/* ==========================================================================
   ZOMBRA: shared chrome + inner-page components.
   Loads after zombra.css and reuses its tokens (paper / ink / green, zero
   radius, hairline rules, Archivo + JetBrains Mono).

   Motion rule for everything in this file: animate transform and opacity only.
   Hover colour shifts on text are the sole exception (no layout, no paint of
   large areas). Entrances are gated by prefers-reduced-motion.
   ========================================================================== */

/* ---------- Header dropdowns ---------- */
.nav__links{position:relative;align-items:center}
.dd{display:flex;align-items:center;gap:2px}
.dd__toggle{display:none}
.js .dd__toggle{display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;color:var(--ink-500);cursor:pointer}
.dd__toggle .i{transition:transform var(--dur-slow) var(--ease-out)}
.dd.is-open .dd__toggle .i{transform:rotate(180deg)}
.dd__toggle:hover{color:var(--ink-900)}

.dd__panel{position:absolute;left:50%;top:calc(100% + 24px);z-index:60;width:min(720px,calc(100vw - 2 * var(--gutter)));background:var(--paper-000);border:1px solid var(--border-default);box-shadow:0 30px 50px rgba(20,23,26,.14);
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,8px);
  transition:opacity 220ms var(--ease-standard),transform 360ms var(--ease-out),visibility 0s linear 360ms}
.dd__panel::before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px} /* hover bridge */
.dd.is-open .dd__panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}
.dd__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border-default)}
.dd__list li{background:var(--paper-000)}
.dd__list a{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:16px 20px;height:100%;transition:background-color var(--dur-base) var(--ease-standard)}
.dd__list a:hover,.dd__list a[aria-current="page"]{background:var(--paper-200)}
.dd__mark{grid-row:1 / span 2;width:34px;height:34px;color:var(--green-700)}
.dd__label{font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ink-900);line-height:1.3}
.dd__meta{font-size:var(--fs-label-xs);color:var(--ink-400);line-height:1.4}
.dd__all{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--paper-100);border-top:1px solid var(--border-default);color:var(--ink-700);transition:color var(--dur-fast)}
.dd__all:hover{color:var(--ink-900)}
.dd__all .i{color:var(--green-700)}

/* ---------- Mobile menu groups ---------- */
.menu__group summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--border-default);font-size:32px;font-weight:600;letter-spacing:-.04em;line-height:1.1;color:var(--ink-900);cursor:pointer}
.menu__group summary::-webkit-details-marker{display:none}
.menu__chev{position:relative;width:14px;height:14px;flex:none}
.menu__chev::before,.menu__chev::after{content:"";position:absolute;background:var(--green-700);transition:transform var(--dur-slow) var(--ease-out)}
.menu__chev::before{left:0;right:0;top:6.25px;height:1.5px}
.menu__chev::after{top:0;bottom:0;left:6.25px;width:1.5px}
.menu__group[open] .menu__chev::after{transform:scaleY(0)}
.menu nav .menu__group ul a{padding:13px 0 13px 4px;font-size:20px;font-weight:500;letter-spacing:-.02em;border-bottom:1px solid var(--border-subtle)}
.menu nav .menu__group ul{padding:2px 0 8px}

/* ---------- Breadcrumbs ---------- */
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;font-family:var(--font-mono);font-size:var(--fs-label-sm);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-400)}
.crumbs li{display:flex;align-items:center}
.crumbs li + li::before{content:"/";margin:0 10px;color:var(--border-strong)}
.crumbs a{padding:6px 0;transition:color var(--dur-fast) var(--ease-standard)}
.crumbs a:hover{color:var(--ink-900)}
.crumbs [aria-current]{color:var(--ink-900)}

/* ---------- Page hero ---------- */
.phero{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--nav-h) + clamp(20px,3vw,40px)) 0 clamp(56px,7vw,104px);border-bottom:1px solid var(--border-default)}
.phero__grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(20,23,26,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,23,26,.045) 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size);-webkit-mask-image:linear-gradient(to bottom,#000,transparent 85%);mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.phero__inner{display:grid;gap:var(--gutter)}
.phero__inner--media{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(32px,5vw,80px)}
.phero__copy{display:flex;flex-direction:column;align-items:flex-start;padding-top:clamp(20px,3vw,40px)}
.phero__eyebrow{margin-top:clamp(28px,4vw,52px)}
.phero__title{margin-top:18px;max-width:20ch;font-size:clamp(40px,5.6vw,84px);line-height:.96;letter-spacing:-.05em;text-wrap:balance}
.phero__lede{margin-top:clamp(22px,2.6vw,32px);max-width:54ch;font-size:var(--fs-lede);line-height:1.45;letter-spacing:-.012em;color:var(--ink-700);text-wrap:pretty}
.phero__lede a{color:var(--ink-900);text-decoration:underline;text-decoration-color:var(--green-300);text-underline-offset:3px}
.phero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,40px)}
.phero__actions .btn--primary{min-width:230px}
.phero__actions .btn--secondary{min-width:196px}
.phero__media{position:relative;background:var(--paper-000);border:1px solid var(--border-default)}
.phero__media img{width:100%;height:auto}

/* ---------- Content sections ---------- */
.section--lazy{content-visibility:auto;contain-intrinsic-size:auto 640px}
.cblock{padding-block:calc(var(--section-y) * .5)}
.cblock + .cblock{padding-top:0}
.cblock__grid{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:var(--gutter);align-items:start}
.cblock + .cblock .cblock__grid{padding-top:calc(var(--section-y) * .5);border-top:1px solid var(--border-default)}
.cblock__title{position:sticky;top:calc(var(--nav-h) + 32px);font-size:clamp(26px,2.6vw,38px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.prose{max-width:var(--max-prose);display:flex;flex-direction:column;gap:20px}
.prose p{font-size:var(--fs-body-lg);line-height:1.7;color:var(--ink-500);text-wrap:pretty}
.prose a{color:var(--ink-900);text-decoration:underline;text-decoration-color:var(--green-300);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color var(--dur-base)}
.prose a:hover{text-decoration-color:var(--green-700)}
.prose strong{color:var(--ink-900);font-weight:600}
.prose__list{display:grid;gap:10px}
.prose__list li{position:relative;padding-left:22px;font-size:var(--fs-body);line-height:1.6;color:var(--ink-700)}
.prose__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--green-700)}
.prose__sub{display:flex;flex-direction:column;gap:14px;padding-top:12px}
.prose__sub h3{font-size:var(--fs-h3);letter-spacing:-.03em}

/* Deliverables: two- and four-item sets fill two columns instead of leaving a gap. */
@media (min-width:981px){.formats[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
.section--dark .shead__title--sm{max-width:14ch}

/* Hub + home service cards: one link per card, stretched over the whole card. */
.svc__link{color:inherit}
.svc__link::after{content:"";position:absolute;inset:0;z-index:2}
.svc__link:focus-visible{outline:none}
.svc:focus-within{outline:2px solid var(--focus-ring);outline-offset:-2px}

/* ---------- Related pages ---------- */
.related__groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:56px var(--gutter)}
.related__group .kicker{margin-bottom:18px}
.related__list{border-top:1px solid var(--border-default)}
.related__item{display:grid;grid-template-columns:36px minmax(0,1fr) 14px;gap:16px;align-items:start;padding:20px 4px 20px 0;border-bottom:1px solid var(--border-default)}
.related__item.related__item--plain{grid-template-columns:minmax(0,1fr) 14px}
.related__mark{width:32px;height:32px;color:var(--ink-400);transition:color var(--dur-slow) var(--ease-standard)}
.related__text{display:flex;flex-direction:column;gap:6px;transition:transform 600ms var(--ease-out)}
.related__text strong{font-size:19px;font-weight:500;letter-spacing:-.025em;line-height:1.25;color:var(--ink-900)}
.related__text span{font-size:var(--fs-body-sm);line-height:1.55;color:var(--ink-500);max-width:52ch}
.related__arrow{width:14px;height:14px;margin-top:6px;color:var(--green-700);transition:transform 600ms var(--ease-out)}
.related__item:hover .related__mark{color:var(--green-700)}
.related__item:hover .related__text{transform:translateX(6px)}
.related__item:hover .related__arrow{transform:translate(3px,-3px)}
.nf__cta{margin-top:40px} /* 404 page: quote button under the link list */

/* ---------- Quote CTA ---------- */
.qcta{padding-block:calc(var(--section-y) * .8)}
.qcta__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:end;position:relative}
.qcta__title{font-size:clamp(48px,6.6vw,104px);line-height:.9;letter-spacing:-.055em;color:var(--dark-fg)}
.qcta__copy{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.qcta__lede{font-size:var(--fs-body-lg);line-height:1.65;color:var(--dark-muted);max-width:44ch;text-wrap:pretty}
.qcta__note{display:flex;flex-wrap:wrap;gap:8px 26px;color:var(--dark-dim);font-size:var(--fs-label-xs)}
.qcta__note li{display:flex;align-items:center;gap:9px}
.qcta__note li::before{content:"";width:6px;height:6px;background:var(--green-300)}

/* ---------- Quote page + location ---------- */
.qform{padding-top:calc(var(--section-y) * .7)}
.qform__title{font-size:var(--fs-display-3);line-height:.98;letter-spacing:var(--ls-display-3);color:var(--dark-fg);max-width:16ch}
.locale__grid{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:var(--gutter);align-items:start}
.locale__card{max-width:var(--max-prose);padding:28px 30px;background:var(--paper-000);border:1px solid var(--border-default)}
.locale__label{color:var(--green-700);margin-bottom:14px}
.locale__note{margin-top:18px;font-size:var(--fs-body-sm);line-height:1.6;color:var(--ink-500)}

/* ---------- Footer additions ---------- */
.footer__top{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}
.footer__cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.footer__cols ul a{padding:2px 0}
.nap{display:flex;flex-direction:column;gap:2px;font-style:normal;font-size:15px;line-height:1.5;color:var(--ink-700)}
.nap strong{font-weight:500;color:var(--ink-900);margin-bottom:4px}
.nap a{align-self:flex-start;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size 500ms var(--ease-out),color var(--dur-base)}
.nap a:hover{color:var(--ink-900);background-size:100% 1px}
.footer__area{margin-top:10px;font-size:15px;color:var(--ink-700)}
.footer__cols li a[rel~="noopener"]::after{content:" ↗";color:var(--green-700)}

/* ---------- Motion (transform + opacity only) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  /* Only the buttons ease in. The H1, lede and hero image are the LCP
     candidates and are never hidden, so they paint immediately. */
  .phero__actions{animation:rise 900ms var(--ease-out) 200ms both}
}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .footer__cols--4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .footer__top{grid-template-columns:1fr}
}
@media (max-width:980px){
  .phero__inner--media,.cblock__grid,.locale__grid,.qcta__grid{grid-template-columns:1fr}
  .cblock__title{position:static}
  .cblock + .cblock .cblock__grid{padding-top:calc(var(--section-y) * .4)}
  .qcta__grid{align-items:start}
  .phero__title{max-width:none}
}
@media (max-width:640px){
  .phero__actions .btn{width:100%;min-width:0}
  .dd__list{grid-template-columns:1fr}
  .footer__cols--4{grid-template-columns:1fr 1fr}
  .footer__cols--4 > div:last-child{grid-column:1 / -1}
  .related__item{grid-template-columns:32px minmax(0,1fr) 14px;gap:14px}
  .locale__card{padding:22px 20px}
}