/* Shared design system for every hand-written page.
 *
 * It started as the 101 rules that were byte-identical across the eleven pages
 * carrying the site chrome. The homepage, 404 and /areas/ were a second lineage
 * with their own class names and no byte-identical rules in common; they have
 * since been folded in, so every page on the site now loads this file. What
 * stays inline on a page is what is genuinely that page's own.
 *
 * Load order matters: this file is linked BEFORE the page's <style>, so a page
 * can still override a shared rule at equal specificity, exactly as it could
 * when everything sat in one block. Watch for the trap that costs you: an
 * override repeating a selector that a LATER rule here also matches will win
 * over that later rule, which is how the dropdown once lost its padding.
 *
 * Production HTML receives content-hashed CSS/JS URLs during the build.
 */

:root{ color-scheme:light;
    --canvas:#fff; --parchment:#f5f5f7; --pearl:#fafafc;
    --navy:#00126d; --navy-deep:#00126d; --navy-soft:#00126d;
    --ink:#1d1d1f; --ink-70:#424245; --ink-48:#6e6e73; --on-dark:#fff; --on-dark-muted:#c7cfdd; --hero-ink:#eef1f6;
    --orange:#FF6D00; --orange-ink:#C4400A; --orange-press:#E56200; --blue-text:#00126d; --brand-blue:#00126D;
    --hairline:#e0e0e0; --divider-soft:rgba(0,0,0,.06);
    --product-shadow:0 3px 30px 5px rgba(0,0,0,.22);
    --pad-x:clamp(1.25rem,5vw,5rem); --maxw:1200px; --nav-h: 80px; --section:clamp(4rem,8vw,6.5rem); }
*{margin:0;padding:0;box-sizing:border-box}
.skip{position:fixed;top:0;left:1rem;z-index:1000;transform:translateY(-150%);padding:.8rem 1rem;background:#fff;color:var(--ink);border:2px solid var(--orange-ink);border-radius:8px}
.skip:focus{transform:translateY(0)}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,'Inter',sans-serif;color:var(--ink);font-size:17px;line-height:1.47;letter-spacing:-.01em;background:var(--canvas);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,'Inter',sans-serif;font-weight:600;line-height:1.08;letter-spacing:-.022em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.topbar{background:var(--navy-deep);color:#aab4c6;font-size:0.8rem;padding:8px 0;text-align:center}
header.site{position:sticky;top:0;z-index:100;background:rgba(245,245,247,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--divider-soft)}
/* Bar height is a literal, not var(--nav-h): Chrome will not re-resolve a
   transitioning property when the custom property behind it changes.
   --nav-h drives .mobile-menu only.

   This bar used to animate its own height on scroll, driven by a body.scrolled
   rule and a listener on all fifteen pages. Both heights had been 80px since the
   first commit, so the header never shrank: the animation moved nothing and the
   listener fired on every scroll for no effect. Removed rather than fixed — a
   compacting header is a design decision, and if it comes back it belongs on
   transform, which the compositor can handle without relaying out the page. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:80px}
@media(max-width:900px){:root{--nav-h:76px}.nav{height:76px}}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;font-weight:600;font-size:1.2rem;color:var(--ink);letter-spacing:-.02em}
.brand .logo-mark{width:42px;height:42px;object-fit:contain;flex-shrink:0}
.brand small{display:block;font-weight:400;font-size:0.72rem;color:var(--ink-48);letter-spacing:.03em;text-transform:uppercase;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:1.6rem;list-style:none}
.nav-links>li{position:relative}
.nav-links a{font-size:1rem;color:var(--ink);padding:8px 0;display:inline-flex;align-items:center;gap:4px;transition:color .2s}
.nav-links a:hover{color:var(--orange-ink)}
.caret{font-size:0.55rem;opacity:.5}
.dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--divider-soft);border-radius:18px;padding:10px;min-width:240px;opacity:0;visibility:hidden;transition:all .2s;display:grid;gap:2px}
.nav-links li:hover .dropdown,.nav-links li:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown.wide{min-width:420px;grid-template-columns:1fr 1fr}
.dropdown a{padding:10px 14px;border-radius:10px;font-size:0.92rem;font-weight:400}
.dropdown a:hover{background:var(--parchment);color:var(--orange-ink)}
.nav-right{display:flex;align-items:center;gap:1.25rem;flex-shrink:0}
.nav-phone{font-weight:600;color:var(--ink);font-size:1.1rem;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.nav-phone:hover{color:var(--orange-ink)}
.nav-phone svg{width:20px;height:20px;color:var(--orange-ink)}
.btn-primary,.nav-cta{background:var(--orange);color:var(--blue-text);border-radius:9999px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s,background .2s;cursor:pointer}
.btn-primary:active,.nav-cta:active{transform:scale(.95)}
.btn-primary:hover,.nav-cta:hover{background:var(--orange-press)}
.nav-cta{padding:11px 22px;font-size:1rem;white-space:nowrap}
.btn-primary{padding:13px 28px;font-size:1rem}
/* .btn is the base the CTA rows on /areas/ and 404 compose with. .btn-ghost is
   the on-dark variant DESIGN.md documents; a page sitting on white overrides
   the colours locally. */
.btn{border-radius:9999px;padding:13px 26px;font-size:1rem;font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:background .2s,transform .12s}
.btn:active{transform:scale(.96)}
.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:11px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}
.phone-link{color:#fff;font-weight:600;font-size:1rem;display:inline-flex;align-items:center;gap:8px;padding:13px 14px;white-space:nowrap;transition:color .2s}
:focus-visible{outline:3px solid var(--orange-ink);outline-offset:3px;border-radius:10px}
.tile-dark :focus-visible,.svc-hero :focus-visible{outline-color:#fff}
section{padding:var(--section) 0}
.tile-parchment{background:var(--canvas)}
.tile-dark{background:var(--navy-deep);color:var(--on-dark)}
.eyebrow{font-size:0.92rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:.75rem}
.tile-dark .eyebrow,.svc-hero .eyebrow{color:var(--orange)}
.tile-dark .sec-head .lede{color:var(--on-dark-muted)!important}
.lede{color:var(--ink-48);font-size:1.2rem;font-weight:300;line-height:1.5;max-width:60ch}
.tile-dark .lede{color:var(--on-dark-muted)}
h2.sec{font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.03em;margin-bottom:1rem;max-width:20ch}
.sec-head{max-width:720px;margin-bottom:clamp(2rem,4vw,3rem)}
/* breadcrumb */
.crumb{font-size:0.92rem;color:var(--ink-48);padding-top:1.25rem}
.crumb a:hover{color:var(--orange-ink)}
/* hero */
.svc-hero .eyebrow,.svc-hero h1,.svc-hero .lede,.hero-bullets li{text-shadow:0 1px 2px rgba(0,8,40,.85),0 2px 16px rgba(0,8,40,.5)}
/* 24ch, não 15ch: com as manchetes de serviço encurtadas para "Serviço in
   Westchester County", o teto antigo quebrava em três e quatro linhas, e uma
   manchete de hero com mais de duas linhas é erro de escala, não de texto. */
.svc-hero h1{font-size:clamp(2.4rem,5.2vw,3.6rem);letter-spacing:-.03em;max-width:24ch;margin-bottom:1.1rem}
.svc-hero .lede{color:var(--hero-ink);max-width:46ch;margin-bottom:1.75rem}
.hero-bullets{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin:0 0 2rem}
.hero-bullets li{display:flex;align-items:center;gap:8px;font-size:1.1rem;color:var(--hero-ink)}
.hero-bullets svg{width:18px;height:18px;color:var(--orange);flex-shrink:0}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
/* On a phone the service hero stack ran past the fold and the CTA landed
   around 900px on an 812px screen, so the primary action was never in the
   first view on any of the pages built from this skeleton. The type and the
   spacing come down here rather than the copy, and only below 640px, so the
   desktop hero is untouched. */
@media(max-width:640px){
  .svc-hero{padding:1.75rem 0 1.85rem}
  /* the eyebrow wrapped to two lines on a 360px screen and cost 21px for it */
  .svc-hero .eyebrow{font-size:.82rem;letter-spacing:.06em;margin-bottom:.55rem}
  .svc-hero h1{font-size:clamp(1.95rem,8.4vw,2.35rem);line-height:1.06;margin-bottom:.7rem}
  .svc-hero .lede{font-size:1.05rem;line-height:1.45;margin-bottom:1.1rem}
  .hero-bullets{gap:.45rem;margin:0 0 1.2rem}
  .hero-bullets li{font-size:1rem;line-height:1.35;align-items:flex-start}
  .hero-bullets svg{margin-top:.2rem}
}
.card{background:var(--canvas);border:1px solid var(--hairline);border-radius:18px;padding:1.6rem}
.tile-parchment .card{background:var(--canvas)}
.card h3{font-size:1.2rem;margin-bottom:.5rem;letter-spacing:-.02em}
.card p{color:var(--ink-48);font-size:1.1rem}
.incl-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem}
.incl-grid .card{flex:0 1 300px;max-width:100%}
.intro-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
@media(max-width:900px){
    .intro-split{grid-template-columns:1fr}}
/* steps */
.step{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;background:var(--canvas);border:1px solid var(--hairline);border-radius:16px;padding:1.4rem 1.6rem}
.step::before{counter-increment:s;content:counter(s);width:34px;height:34px;border-radius:9999px;background:var(--orange);color:var(--blue-text);font-weight:700;display:grid;place-items:center;font-size:0.92rem}
.step h3{font-size:1.1rem;margin-bottom:.25rem;letter-spacing:-.02em}
/* work gallery */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.work figure{margin:0}
.work .media{aspect-ratio:3/2;border-radius:18px;overflow:hidden;box-shadow:var(--product-shadow);background:var(--parchment)}
.work img{width:100%;height:100%;object-fit:cover}
/* faq */
.faq details{border-bottom:1px solid var(--divider-soft);padding:1.1rem 0}
.faq summary{font-size:1.1rem;font-weight:600;letter-spacing:-.02em;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange-ink);font-weight:400;font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--ink-48);font-size:1.1rem;margin-top:.7rem;max-width:70ch}
/* footer */
footer.site{background:var(--brand-blue);color:rgba(255,255,255,.72);padding:clamp(3rem,6vw,4rem) 0 2rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
footer.site .brand{color:#fff}
footer.site .footer-heading{color:#fff;font-size:0.8rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:1rem;font-weight:600}
footer.site ul{list-style:none;display:grid;gap:.55rem}
footer.site a:hover{color:var(--orange)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:1.5rem;font-size:0.8rem;color:rgba(255,255,255,.6)}
.footer-slogan{font-family:Georgia,serif;font-style:italic;color:var(--orange)}
/* The three footer columns held their widths all the way down, so on a phone
   they were 124/82/94px of squeezed links. /areas/ had already solved this in
   its own stylesheet; the fix belongs here, where every page gets it. */
@media(max-width:720px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){footer.site li a{display:inline-flex;align-items:center;min-height:32px}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
/* The sheet is a child of the sticky header and anchors to its bottom edge,
   rather than being fixed at var(--nav-h) from the top of the viewport. That
   constant only counted the nav row, so it ignored the topbar above it: at
   scroll 0 the header ran to 131px while the sheet started at 76px, and the
   first 55px of the menu was laid out underneath the header. "Services", the
   first item, lost 31px of its 55px row — elementFromPoint at the centre of
   that link returned the header, not the link, so the site's main nav entry
   was only tappable in its bottom sliver. top:100% takes the measurement from
   the header itself, so the topbar wrapping to two lines cannot desynchronise
   it again.

   The 56px in max-height is the topbar. 100% resolves against the header, so
   it covers the nav row but not the strip above it, and without the allowance
   the sheet ended up to 55px below the fold with its own CTA unreachable —
   the internal scroll cannot reach what is off-screen. It is the two-line
   worst case, so a one-line topbar leaves a little slack rather than cutting.

   Opaque, not rgba(255,255,255,.98): with no backdrop-filter behind it the 2%
   had nothing to do except leak the hero through the open menu. */
.mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--canvas);z-index:99;padding:1.5rem var(--pad-x);max-height:calc(100dvh - 100% - 56px);overflow-y:auto;border-bottom:1px solid var(--divider-soft)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:14px 0;font-size:1.1rem;border-bottom:1px solid var(--divider-soft)}
.mobile-menu a.subservice{padding-left:1rem;font-size:1rem}
/* The menu ends with a labelled contact group: the phone in the .phone-link
   pattern DESIGN.md requires (icon + number, no box), then the CTA as a filled
   button. The homepage had this and the other pages did not — its version is
   the one that follows the brand rule, so it became the shared one. */
.mobile-menu .group-label{font-size:0.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-48);margin-top:1.5rem;font-weight:600;border-bottom:none}
.mobile-menu .phone-link{color:var(--ink);padding:14px 0;display:flex}
.mobile-menu .phone-link:hover{color:var(--orange-ink)}
.mobile-menu .phone-link svg{color:var(--orange-ink)}
.mobile-menu .mobile-cta{background:var(--orange);color:var(--blue-text);text-align:center;margin-top:1.5rem;border:none;border-radius:9999px;padding:13px 24px;width:100%;font-weight:600}
/* Below 1180px the full link row does not fit, so the header goes to the
   burger. It used to take the CTA down with it: .nav-right was hidden whole,
   which left a phone with no visible action anywhere above the fold — the
   burger had to be opened first. The blog shell never had that problem
   (.b-nav a:not(.b-cta) keeps its CTA in the bar), and this is the same fix
   applied to the main shell: drop the links and the phone, keep the CTA.

   The phone is not lost — it stays in the menu sheet, the hero and the
   footer, in the .phone-link form DESIGN.md requires. The bar can only hold
   one action at this width, and the CTA is the one the whole site points at.

   .nav>nav is still hidden outright: hiding only its CONTENTS left it as a
   zero-width flex item, and .nav gap:1rem still reserved 16px for it. With
   .brand{flex-shrink:0} refusing to give, that was what used to push the
   burger past the viewport at 375px. */
@media(max-width:1180px){
    .nav-links,.nav-right .nav-phone{display:none}
    .nav>nav{display:none}
    .burger{display:block}
    .brand small{display:none}
  }
/* Same staging as the blog header, for the same reason: the brand block and
   the CTA cannot both hold full size on one row on a phone. The wordmark
   gives way first, then disappears — the CTA wording is fixed by the brand
   and the logo can carry the identity alone. */
@media(max-width:760px){
    .brand{font-size:1rem;gap:8px;min-width:0}
    .brand .logo-mark{width:36px;height:36px}
    .brand span{white-space:nowrap}
    /* min-height rather than vertical padding: the pill has to stay a 44px
       tap target while giving up every horizontal pixel it can. */
    .nav-cta{padding:0 .95rem;font-size:.9rem;min-height:44px;flex-shrink:0}
  }
@media(max-width:560px){
    .brand span{display:none}
    .nav{gap:.5rem}
  }
/* 320px is the floor this header has to survive (SE, Fold cover screen). Logo,
   pill and burger only fit there once the type comes down one more step. */
@media(max-width:400px){
    .nav-cta{font-size:.8rem;padding:0 .7rem}
  }
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Visible editorial links alongside the rotating blog teasers on service pages. */
.blog-section .guide-links{max-width:760px;margin:1.25rem auto 0;text-align:center;color:var(--on-dark-muted);line-height:1.6}
.blog-section .guide-links a{color:#ff8a2b;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.blog-section .guide-links a:hover{color:#fff}
.blog-section .sec-head .lede a{color:#ff8a2b;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.blog-section .sec-head .lede a:hover{color:#fff}