/* ─── Shared #pg design system ─────────────────────────────────────────── Loaded on every page (home + all 7 service pages). Vars, buttons, scroll reveal, layout utilities, section dividers, reduced-motion. Page-specific section styles (hero variants, unique components) live in home.css or service.css, never here , this file is the one thing every page shares. */ #pg{ --orange:#FFA503; --dark:#36454F; --darker:#263238; --cream:#FAF8F4; --warm:#F0EDE7; --white:#FFFFFF; --text:#1C1C1C; --muted:#637381; --border:rgba(0,0,0,0.07); --font-h:'Sora','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-b:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --ease:cubic-bezier(.4,0,.2,1); --ease-pro:cubic-bezier(.16,1,.3,1); font-family:var(--font-b); color:var(--text); -webkit-font-smoothing:antialiased; line-height:1.6; } #pg *{box-sizing:border-box} #pg a{text-decoration:none;color:inherit} #pg img{max-width:100%;display:block} #pg h1,#pg h2,#pg h3{text-wrap:balance} /* ─── Scroll reveal ──────────────────────────────────────────────────── */ #pg .sr{opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease),transform .6s var(--ease)} #pg .sr.visible{opacity:1;transform:none} #pg .sr-d1{transition-delay:.1s}#pg .sr-d2{transition-delay:.2s} #pg .sr-d3{transition-delay:.3s}#pg .sr-d4{transition-delay:.4s} #pg .sr-left{opacity:0;transform:translateX(-28px);transition:opacity .6s var(--ease),transform .6s var(--ease)} #pg .sr-left.visible{opacity:1;transform:none} #pg .sr-right{opacity:0;transform:translateX(28px);transition:opacity .6s var(--ease),transform .6s var(--ease)} #pg .sr-right.visible{opacity:1;transform:none} /* ─── Layout utilities ───────────────────────────────────────────────── */ #pg .wrap{max-width:1200px;margin:0 auto;padding:0 32px;width:100%} #pg .wrap--narrow{max-width:900px;margin:0 auto;padding:0 32px;width:100%} #pg .label{font-family:var(--font-b);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:12px} #pg .label--white{color:rgba(255,255,255,.55)} #pg .section-divider{height:3px;background:#FFA503;width:100%;max-width:none;margin:0;border:none;display:block} /* ─── Buttons ────────────────────────────────────────────────────────── */ #pg .btn{display:inline-block;padding:15px 36px;border-radius:9999px;font-family:var(--font-h);font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;border:none;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease} #pg .btn-orange{background:linear-gradient(180deg,#FFA503 0%,#E89500 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 4px 12px rgba(0,0,0,.12),0 8px 24px rgba(255,165,3,.18)} #pg .btn-orange:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 8px 24px rgba(0,0,0,.18),0 12px 36px rgba(255,165,3,.22)} #pg .btn-dark{background:var(--dark);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12),0 8px 24px rgba(0,0,0,.16)} #pg .btn-dark:hover{background:var(--darker);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.18),0 12px 40px rgba(0,0,0,.28)} #pg .btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)} #pg .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08)} #pg .btn-group{display:flex;flex-wrap:wrap;gap:14px} /* ─── No-JS fallback ───────────────────────────────────────────────────── Scroll reveal is a JS enhancement, so without JS every .sr element would sit at opacity:0 forever and the page would render as a shell. The html element ships with class="no-js" and an inline script in swaps it to "js" before paint, so this rule only ever applies when JS genuinely did not run. Higher specificity than the plain "#pg .sr" rules on purpose: about.css, faqs.css and service.css each redeclare them and load after this file. Verified 2026-07-26 by rendering with JS disabled. Do not remove. */ html.no-js #pg .sr, html.no-js #pg .sr-left, html.no-js #pg .sr-right{opacity:1;transform:none;transition:none} /* ─── Reduced motion ─────────────────────────────────────────────────── */ @media(prefers-reduced-motion:reduce){ #pg .sr,#pg .sr-left,#pg .sr-right{opacity:1;transform:none;transition:none} } @media(max-width:900px){ #pg .wrap{padding:0 20px} #pg .wrap--narrow{padding:0 20px} }