/* ===================================================================== BASE + COMPONENTS — brand-agnostic. Consumes tokens.css. Don't put brand colors/fonts here; everything routes through tokens. Load order in : tokens.css then base.css ===================================================================== */ /* ---- Reset & base ---- */ *,*::before,*::after{box-sizing:border-box}*{margin:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}} body{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.65;color:var(--text-body);background:var(--bg-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} img,svg,video{display:block;max-width:100%;height:auto} [id]{scroll-margin-top:calc(var(--header-h) + 16px)} a{color:var(--link);text-decoration:none;transition:color var(--dur) var(--ease)} a:hover{color:var(--link-hover)} strong{font-weight:700;color:var(--text-strong)} ul{list-style:none;padding:0} :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px} /* ---- Typography ---- */ h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.08;color:var(--text-strong);letter-spacing:-.01em} h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3);line-height:1.18} p{max-width:64ch} .display{font-family:var(--font-display);font-size:var(--fs-display);line-height:1.04;letter-spacing:-.015em} .lead{font-size:var(--fs-lead);line-height:1.55;color:var(--text-muted)} .serif-italic{font-family:var(--font-serif);font-style:italic} .eyebrow{display:inline-block;font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--link);margin-bottom:var(--space-4)} .eyebrow--gold{color:var(--gold)} .accent{color:var(--accent)}.accent-gold{color:var(--gold)}.text-muted{color:var(--text-muted)} /* ---- Layout ---- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--space-5)} .container--narrow{max-width:var(--container-narrow)} .section{padding-block:clamp(3.5rem,2rem + 7vw,7rem)} .section--paper{background:var(--brand-paper)}.section--surface{background:var(--bg-surface)} .section--onyx{background:var(--bg-dark);color:var(--text-on-dark)} .section--tight{padding-block:clamp(2.5rem,1.5rem + 4vw,4rem)} .section--onyx h1,.section--onyx h2,.section--onyx h3{color:#fff} .section--onyx .lead{color:var(--text-on-dark-muted)} .section-head{max-width:60ch;margin-bottom:var(--space-7)} .section-head--center{margin-inline:auto;text-align:center} .grid{display:grid;gap:var(--space-5)} .grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)} @media (max-width:960px){.grid--4,.grid--3{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}} .split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:center} @media (max-width:880px){.split{grid-template-columns:1fr;gap:var(--space-6)}} .rule{height:1px;border:0;background:var(--border-hair)} .rule--gold{height:1px;background:linear-gradient(90deg,transparent,var(--gold-hair) 12%,var(--gold-hair) 88%,transparent)} .rule--accent{height:3px;width:56px;border-radius:2px;background:var(--accent)} .cluster{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center} .flow>*+*{margin-top:var(--space-4)}.text-center{text-align:center} .mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)}.mt-7{margin-top:var(--space-7)} /* ---- Buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--font-body);font-size:1rem;font-weight:700;line-height:1;padding:.95em 1.6em;border-radius:var(--radius-pill);border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .btn:active{transform:translateY(1px)}.btn svg{width:1.05em;height:1.05em} .btn--primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18)} .btn--primary:hover{background:var(--brand-primary-dark);color:#fff;transform:translateY(-2px)} .btn--ghost{background:transparent;color:var(--text-strong);border-color:rgba(20,22,28,.28)} .btn--ghost:hover{border-color:var(--text-strong);background:var(--text-strong);color:#fff} .btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)} .btn--ghost-light:hover{background:#fff;color:var(--bg-dark);border-color:#fff} .btn--invert{background:#fff;color:var(--accent)}.btn--invert:hover{background:var(--bg-dark);color:#fff;transform:translateY(-2px)} .btn--lg{font-size:1.0625rem;padding:1.05em 1.9em}.btn--block{width:100%} /* ---- Header ---- */ .site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg-dark) 92%,transparent);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border-hair-dark);box-shadow:inset 0 3px 0 var(--accent)} .site-header__inner{display:flex;align-items:center;gap:var(--space-5);height:var(--header-h)} .brand{display:inline-flex;align-items:center;gap:.7rem} .brand__logo{height:38px;width:auto;flex:none} .brand__name{font-family:var(--font-display);color:#fff;font-size:1.15rem;line-height:.95} .brand__name small{display:block;font-family:var(--font-body);font-weight:600;font-size:.56rem;letter-spacing:.34em;color:var(--gold);margin-top:3px} .site-nav{margin-left:auto} .site-nav ul{display:flex;align-items:center;gap:clamp(1rem,2vw,1.9rem)} .site-nav a{color:var(--text-on-dark-muted);font-weight:600;font-size:.95rem} .site-nav a:hover,.site-nav a[aria-current=page]{color:#fff} .header-actions{display:flex;align-items:center;gap:var(--space-3)} .header-actions .btn{padding:.7em 1.2em;font-size:.92rem} .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px} .nav-toggle span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:var(--dur)} .nav-toggle span+span{margin-top:5px} .nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (max-width:880px){ .nav-toggle{display:block;margin-left:auto}.site-nav{margin-left:0} .site-nav,.header-actions--collapse{position:fixed;inset:var(--header-h) 0 auto 0;background:var(--bg-dark);flex-direction:column;padding:var(--space-5);gap:var(--space-4);border-bottom:1px solid var(--border-hair-dark);transform:translateY(-12px);opacity:0;pointer-events:none;transition:var(--dur) var(--ease)} .site-nav ul{flex-direction:column;align-items:stretch;gap:var(--space-2)} .site-nav a{display:block;padding:.6rem 0;font-size:1.1rem;border-bottom:1px solid var(--border-hair-dark)} .site-header.nav-open .site-nav,.site-header.nav-open .header-actions--collapse{transform:translateY(0);opacity:1;pointer-events:auto} .header-actions{width:100%}.header-actions .btn{width:100%} } /* ---- Hero ---- */ .hero{position:relative;background:var(--bg-dark);color:var(--text-on-dark);overflow:hidden} .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 72% 8%,color-mix(in srgb,var(--accent) 42%,transparent),transparent 66%);pointer-events:none} .hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .85fr;gap:var(--space-7);align-items:center;padding-block:clamp(3.5rem,2rem + 7vw,6.5rem)} .hero h1{color:#fff;font-size:var(--fs-display);line-height:1.03;letter-spacing:-.015em} .hero__sub{color:var(--text-on-dark-muted);font-size:var(--fs-lead);margin-top:var(--space-5);max-width:46ch} .hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)} .hero__trust{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-5);margin-top:var(--space-6);color:var(--text-on-dark-muted);font-size:var(--fs-small)} .hero__trust .stars{color:var(--gold);letter-spacing:2px} .hero-card{background:color-mix(in srgb,var(--bg-dark) 55%,transparent);border:1px solid var(--border-hair-dark);border-radius:var(--radius-card);padding:var(--space-6);text-align:center;box-shadow:var(--shadow-lg);backdrop-filter:blur(4px)} .hero-card h2{color:#fff;font-size:1.7rem;line-height:1.2} @media (max-width:880px){.hero__inner{grid-template-columns:1fr;gap:var(--space-6)}.hero-card{order:2}} /* ---- Cards ---- */ .card{background:var(--bg-surface);border:1px solid var(--border-hair);border-radius:var(--radius-card);padding:var(--space-6);box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)} .card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent) 25%,transparent)} .card--edge{border-left:3px solid var(--accent)} .service-card .ico{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);margin-bottom:var(--space-4)} .service-card .ico svg{width:26px;height:26px} .service-card h3{margin-bottom:var(--space-2)}.service-card p{color:var(--text-muted);font-size:var(--fs-small)} .service-card .more{display:inline-flex;align-items:center;gap:.4rem;margin-top:var(--space-4);font-weight:700;font-size:var(--fs-small);color:var(--link)} .service-card .more svg{width:.9em;transition:transform var(--dur) var(--ease)}.service-card:hover .more svg{transform:translateX(3px)} .step__num{font-family:var(--font-display);font-size:2.6rem;color:var(--accent);line-height:1;display:block;margin-bottom:var(--space-3)} .step h3{margin-bottom:var(--space-2)}.step p{color:var(--text-muted)} .value{display:flex;gap:var(--space-4);align-items:flex-start} .value .ico{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--border-hair-dark);color:var(--gold)} .value h3{color:#fff;font-size:1.25rem;margin-bottom:var(--space-1)}.value p{color:var(--text-on-dark-muted);font-size:var(--fs-small)} .stat__num{font-family:var(--font-display);font-size:clamp(2.4rem,1.5rem + 3vw,3.4rem);color:var(--accent);line-height:1} .section--onyx .stat__num{color:var(--gold)}.stat__label{color:var(--text-muted);font-size:var(--fs-small);margin-top:var(--space-2)} /* ---- Chips / seal ---- */ .chip{display:inline-flex;align-items:center;gap:.45rem;padding:.5em 1em;border-radius:var(--radius-pill);background:var(--bg-surface);border:1px solid var(--border-hair);font-size:var(--fs-small);font-weight:600;color:var(--text-body);box-shadow:var(--shadow-sm)} .section--onyx .chip{background:rgba(255,255,255,.06);border-color:var(--border-hair-dark);color:var(--text-on-dark)} .chip__dot{width:7px;height:7px;border-radius:50%;background:var(--accent)} .chip-row{display:flex;flex-wrap:wrap;gap:var(--space-2)} .seal{width:116px;height:116px;border-radius:50%;flex:none;display:grid;place-items:center;text-align:center;background:var(--bg-dark);color:var(--gold);border:1px solid var(--gold);box-shadow:0 0 0 4px var(--bg-dark),0 0 0 5px var(--gold-hair)} .seal span{font-weight:700;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;line-height:1.5} /* ---- Testimonials ---- */ .quote{display:flex;flex-direction:column;height:100%} .quote .stars{color:var(--gold);letter-spacing:2px;font-size:1.05rem;margin-bottom:var(--space-3)} .quote blockquote{font-family:var(--font-serif);font-size:1.15rem;line-height:1.55;color:var(--text-strong);flex:1} .quote figcaption{margin-top:var(--space-4);font-size:var(--fs-small);color:var(--text-muted);display:flex;align-items:center;gap:.65rem} .quote .who{font-weight:700;color:var(--text-strong);font-family:var(--font-body)} .avatar{width:38px;height:38px;border-radius:50%;background:var(--bg-dark);color:var(--gold);display:grid;place-items:center;font-weight:700;font-size:.9rem;flex:none} /* ---- FAQ ---- */ .faq{border-top:1px solid var(--border-hair)}.faq__item{border-bottom:1px solid var(--border-hair)} .faq__q{width:100%;text-align:left;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) 0;font-family:var(--font-display);font-size:1.2rem;color:var(--text-strong)} .faq__q .icon{flex:none;width:26px;height:26px;position:relative} .faq__q .icon::before,.faq__q .icon::after{content:"";position:absolute;inset:50% 4px auto 4px;height:2px;background:var(--accent);transition:var(--dur)} .faq__q .icon::after{transform:rotate(90deg)} .faq__q[aria-expanded=true] .icon::after{transform:rotate(0);opacity:0} .faq__a{overflow:hidden;max-height:0;transition:max-height var(--dur) var(--ease)} .faq__a>div{padding-bottom:var(--space-5);color:var(--text-muted);max-width:70ch} /* ---- CTA band ---- */ .cta-band{background:var(--accent);color:#fff;text-align:center} .cta-band .eyebrow{color:rgba(255,255,255,.8)}.cta-band h2{color:#fff} .cta-band .phone{font-family:var(--font-display);font-size:clamp(2.2rem,1.5rem + 3vw,3.4rem);color:#fff;display:inline-block;margin:var(--space-3) 0 var(--space-5)} .cta-band .phone:hover{color:var(--bg-dark)}.cta-band p{margin-inline:auto;color:rgba(255,255,255,.85)} /* ---- Footer ---- */ .site-footer{background:var(--bg-dark);color:var(--text-on-dark-muted);box-shadow:inset 0 3px 0 var(--accent)} .site-footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-6);padding-block:var(--space-8) var(--space-7)} .site-footer h4{color:var(--gold);font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:var(--space-4)} .site-footer a{color:var(--text-on-dark-muted)}.site-footer a:hover{color:#fff}.site-footer li{margin-bottom:var(--space-2)} .site-footer .brand__name{color:#fff} .footer-tagline{font-family:var(--font-serif);font-style:italic;color:var(--text-on-dark);font-size:1.15rem;margin-top:var(--space-4);max-width:34ch} .site-footer__bottom{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;align-items:center;padding-block:var(--space-5);border-top:1px solid var(--border-hair-dark);font-size:var(--fs-small)} @media (max-width:880px){.site-footer__top{grid-template-columns:1fr 1fr}} @media (max-width:520px){.site-footer__top{grid-template-columns:1fr}} /* ---- Forms ---- */ .form-grid{display:grid;gap:var(--space-4);grid-template-columns:1fr 1fr} .field{display:flex;flex-direction:column;gap:.4rem}.field--full{grid-column:1/-1} .field label{font-weight:700;font-size:var(--fs-small);color:var(--text-strong)}.field label .req{color:var(--accent)} .field input,.field select,.field textarea{font-family:var(--font-body);font-size:1rem;color:var(--text-strong);padding:.8em .9em;border:1px solid var(--border-hair);border-radius:var(--radius-sm);background:var(--bg-surface);transition:border-color var(--dur),box-shadow var(--dur)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)} .field textarea{resize:vertical;min-height:120px} .field--error input,.field--error select,.field--error textarea{border-color:var(--accent)} .field__err{color:var(--link);font-size:.82rem;font-weight:600;display:none}.field--error .field__err{display:block} @media (max-width:620px){.form-grid{grid-template-columns:1fr}} .form-success{display:none;text-align:center;padding:var(--space-7) var(--space-5)}.form-success.is-visible{display:block} /* ---- Utilities & motion ---- */ .skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.6rem 1rem;z-index:200;border-radius:0 0 8px 0}.skip-link:focus{left:0;color:#fff} .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}.reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}