/* =============================================================================
   Nice Roofing — site layer
   Loads after style.css. Holds the shared chrome (header, nav, footer),
   the inner-page section primitives and the page-specific components.

   The base palette from style.css is preserved. What changes here is where the
   brand blue is used: it is reserved for actions and focus, while a brushed
   metallic tone — taken from the logo — carries the editorial detail. That
   keeps the dark charcoal foundation premium instead of corporate-blue.
   ========================================================================== */

:root{
  --metal-1:#eef2f6;
  --metal-2:#aab4bf;
  --metal-3:#79838f;
  --metal-grad:linear-gradient(158deg,#f4f7fa 0%,#cdd5dd 34%,#8b95a1 68%,#b9c2cb 100%);
  --rule:1px solid var(--border);
  --pad-section:clamp(64px,8vw,116px);
  --gutter:clamp(18px,4vw,40px);
  --measure:64ch;
}
:root[data-theme="light"]{
  --metal-1:#2b333c;
  --metal-2:#5f6b78;
  --metal-3:#8a949f;
  --metal-grad:linear-gradient(158deg,#3d4650 0%,#5f6b78 38%,#8a949f 72%,#6c7783 100%);
}

/* ============================== Foundations ============================== */

.eyebrow{color:var(--metal-2);letter-spacing:.22em;}
h1,h2,h3,h4,h5{text-wrap:balance;}
p{text-wrap:pretty;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:16px;top:-64px;z-index:400;
  background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 10px 10px;
  font-weight:700;font-size:.9rem;transition:top .2s var(--ease);
}
.skip-link:focus{top:0;}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--blue-2);
  outline-offset:3px;
  border-radius:4px;
}

.btn-sm{padding:11px 22px;font-size:.86rem;}
.btn:focus-visible{outline-offset:4px;}

.metal-num{
  font-family:var(--font-head);font-weight:700;line-height:1;
  background:var(--metal-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* Generic section scaffolding used across every inner page. */
.section{padding:var(--pad-section) 0;}
.section--tight{padding:clamp(48px,5vw,72px) 0;}
.section--alt{background:var(--bg-2);border-block:var(--rule);}
.section--deep{background:var(--bg-3);border-block:var(--rule);}

.section-intro{max-width:var(--measure);margin-bottom:clamp(36px,5vw,64px);}
.section-intro.is-centred{margin-inline:auto;text-align:center;}
.section-intro h2{font-size:clamp(1.75rem,3.6vw,2.75rem);margin-bottom:18px;}
.section-intro p{color:var(--muted);font-size:1.03rem;}
.section-intro p + p{margin-top:14px;}

.lede{font-size:clamp(1.05rem,1.7vw,1.24rem);color:var(--text-2);line-height:1.62;}

.prose{max-width:var(--measure);color:var(--muted);}
.prose > * + *{margin-top:16px;}
.prose h3{color:var(--text);font-size:1.25rem;margin-top:34px;}
.prose h4{color:var(--text);font-size:1.02rem;margin-top:26px;}
.prose strong{color:var(--text-2);}
.prose a{color:var(--blue-2);border-bottom:1px solid rgba(79,139,255,.4);}
.prose a:hover{border-bottom-color:var(--blue-2);}
.prose ul{display:grid;gap:10px;}
.prose ul li{position:relative;padding-left:24px;}
.prose ul li::before{
  content:'';position:absolute;left:2px;top:.62em;width:8px;height:1px;background:var(--metal-3);
}

.grid-2,.grid-3,.grid-4{display:grid;gap:var(--gutter);}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}

.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center;}
.split--wide-media{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);}
.split--top{align-items:start;}
.split-media{border-radius:var(--radius);overflow:hidden;position:relative;background:var(--bg-2);}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.split-media--tall img{aspect-ratio:3/4;}
.split-media figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 24px 18px;color:#fff;font-size:.82rem;
  background:linear-gradient(transparent,rgba(5,7,10,.82));
}

/* Reveal-on-scroll. Progressive: without JS everything is simply visible. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease);}
.reveal.is-in{opacity:1;transform:none;}
html.no-js .reveal,body:not(.js) .reveal{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .reveal{opacity:1;transform:none;}
}

/* ================================ Header ================================= */

.site-header{padding:16px 0;margin-bottom:-104px;}
.header-inner{gap:clamp(12px,2vw,28px);}
.brand img{height:64px;width:auto;}
.site-header.scrolled .brand img{height:50px;}

.main-nav .nav-list{display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);}
.main-nav .nav-list > li{position:relative;}
.main-nav a{
  display:inline-block;padding:8px 2px;font-size:.88rem;font-weight:500;
  opacity:.82;transition:opacity .25s,color .25s;white-space:nowrap;
}
.main-nav a:hover{opacity:1;}
.main-nav .nav-list > li.is-current > a,
.main-nav .nav-list > li.is-current .nav-parent > a,
.main-nav .nav-list > li.is-parent .nav-parent > a{opacity:1;}
.main-nav .nav-list > li.is-current > a::after,
.main-nav .nav-list > li.is-current .nav-parent > a::after,
.main-nav .nav-list > li.is-parent .nav-parent > a::after{
  content:'';display:block;height:2px;margin-top:5px;border-radius:2px;background:var(--blue-2);
}

.nav-parent{display:flex;align-items:center;gap:2px;}
.nav-disclosure{
  background:none;border:none;color:inherit;cursor:pointer;padding:6px 2px;
  display:inline-flex;align-items:center;
}
.nav-disclosure svg{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .28s var(--ease);opacity:.8;
}
.nav-disclosure[aria-expanded="true"] svg{transform:rotate(180deg);}

.nav-dropdown{
  position:absolute;top:calc(100% + 14px);left:-18px;z-index:60;
  min-width:246px;padding:10px;
  background:var(--bg-2);color:var(--text);
  border:1px solid var(--border-2);border-radius:14px;
  box-shadow:0 26px 60px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.nav-dropdown::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px;}
.has-dropdown.is-open .nav-dropdown{opacity:1;visibility:visible;transform:none;}
.nav-dropdown a{
  display:block;padding:10px 14px;border-radius:9px;font-size:.88rem;opacity:.9;
  transition:background .2s,opacity .2s,padding-left .2s var(--ease);
}
.nav-dropdown a:hover{background:var(--ghost-hover);opacity:1;padding-left:18px;}
.nav-dropdown a[aria-current="page"]{background:var(--chip-sel);opacity:1;font-weight:600;}
.nav-dropdown a::after{display:none !important;}
.nav-dropdown-all{margin-top:6px;padding-top:8px;border-top:1px solid var(--border);}
.nav-dropdown-all a{color:var(--blue-2);font-weight:600;}

.header-actions{display:flex;align-items:center;gap:10px;}
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:40px;background:none;border:none;color:inherit;cursor:pointer;padding:0;
}
.nav-toggle-bars{display:flex;flex-direction:column;gap:5px;}
.nav-toggle-bars span{display:block;width:24px;height:2px;background:currentColor;border-radius:2px;}

@media (max-width:1180px){
  .main-nav{display:none;}
  .nav-toggle{display:flex;}
  .header-cta{display:none;}
}
@media (max-width:420px){
  .brand img{height:50px;}
}

/* =========================== Mobile navigation =========================== */

/* [hidden] must beat the layout rules below, or the panel shows on desktop. */
.mobile-nav[hidden],.mobile-nav-scrim[hidden],.lightbox[hidden],
.wizard-panel[hidden],.mobile-subnav[hidden],.faq-a[hidden]{display:none !important;}

.mobile-nav-scrim{
  position:fixed;inset:0;z-index:220;background:rgba(4,6,9,.66);
  backdrop-filter:blur(2px);animation:nrfade .25s var(--ease);
}
@keyframes nrfade{from{opacity:0;}to{opacity:1;}}

.mobile-nav{
  position:fixed;top:0;right:0;bottom:0;z-index:230;
  width:min(392px,92vw);
  background:var(--bg-2);color:var(--text);
  border-left:1px solid var(--border-2);
  box-shadow:-30px 0 80px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  animation:nrslide .32s var(--ease);
  overflow:hidden;
}
@keyframes nrslide{from{transform:translateX(100%);}to{transform:none;}}

.mobile-nav-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;border-bottom:var(--rule);flex:0 0 auto;
}
.mobile-nav-head .brand img{height:50px;}
.mobile-nav-close{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--border-2);
  background:transparent;color:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.mobile-nav-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}

.mobile-nav-body{flex:1 1 auto;overflow-y:auto;padding:8px 0 20px;-webkit-overflow-scrolling:touch;}
.mobile-nav-row{display:flex;align-items:stretch;border-bottom:var(--rule);}
.mobile-nav-row a{
  flex:1;padding:15px 20px;font-family:var(--font-head);font-size:1.02rem;font-weight:500;
  display:flex;align-items:center;min-height:52px;
}
.mobile-nav-body li.is-current > .mobile-nav-row > a,
.mobile-nav-body li.is-parent > .mobile-nav-row > a{color:var(--blue-2);}
.mobile-nav-disclosure{
  width:56px;background:none;border:none;border-left:var(--rule);color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.mobile-nav-disclosure svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .26s var(--ease);}
.mobile-nav-disclosure[aria-expanded="true"] svg{transform:rotate(180deg);}
.mobile-subnav{background:var(--bg);border-bottom:var(--rule);}
.mobile-subnav a{
  display:flex;align-items:center;min-height:46px;
  padding:11px 20px 11px 36px;font-size:.92rem;color:var(--text-2);
  border-bottom:1px solid var(--border);
}
.mobile-subnav li:last-child a{border-bottom:none;}
.mobile-subnav a[aria-current="page"]{color:var(--blue-2);font-weight:600;}

.mobile-nav-foot{flex:0 0 auto;padding:18px 20px calc(18px + env(safe-area-inset-bottom));border-top:var(--rule);background:var(--bg-3);}
.mobile-nav-phone{display:block;text-align:center;margin-top:14px;font-family:var(--font-head);font-size:1.15rem;font-weight:700;}
.mobile-nav-address{margin-top:12px;font-size:.82rem;color:var(--muted);font-style:normal;text-align:center;line-height:1.55;}

body.nav-open{overflow:hidden;}

/* ============================== Breadcrumbs ============================== */

.breadcrumbs{border-bottom:var(--rule);background:var(--bg);}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:13px 0;font-size:.8rem;color:var(--muted);}
.breadcrumbs li{display:flex;align-items:center;gap:6px;}
.breadcrumbs li + li::before{content:'/';color:var(--border-3);}
.breadcrumbs a{color:var(--muted);transition:color .2s;}
.breadcrumbs a:hover{color:var(--text);}
.breadcrumbs [aria-current="page"]{color:var(--text-2);font-weight:600;}

/* ============================== Page heroes ============================== */

.page-hero{position:relative;isolation:isolate;}
.page-hero-inner{position:relative;z-index:2;}
.page-hero h1{font-size:clamp(2.1rem,5.2vw,4rem);}
.page-hero-intro{margin-top:20px;max-width:58ch;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.6;}
.page-hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;}
.page-hero-facts{
  margin-top:42px;display:flex;flex-wrap:wrap;gap:12px 44px;
  padding-top:26px;border-top:1px solid var(--border-2);
}
.page-hero-facts li{display:flex;flex-direction:column;gap:2px;}
.page-hero-facts strong{font-family:var(--font-head);font-size:1.02rem;}
.page-hero-facts span{font-size:.78rem;color:var(--muted);letter-spacing:.04em;}

/* image variant — full-bleed photograph */
.page-hero--image{padding:calc(120px + 4vw) 0 clamp(64px,7vw,104px);color:#fff;}
.page-hero--image .page-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.page-hero--image .page-hero-bg img{width:100%;height:100%;object-fit:cover;}
.page-hero--image .page-hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(6,8,11,.94) 0%,rgba(6,8,11,.8) 46%,rgba(6,8,11,.42) 100%),
             linear-gradient(0deg,rgba(6,8,11,.92),transparent 55%);
}
.page-hero--image .page-hero-copy{max-width:44rem;}
.page-hero--image .page-hero-intro{color:#c8cfd7;}
.page-hero--image .page-hero-facts strong{color:#fff;}
.page-hero--image .page-hero-facts span{color:#98a2ad;}
.page-hero--image .page-hero-facts{border-top-color:rgba(255,255,255,.18);}
.page-hero--image .eyebrow{color:#c3ccd6;}
.page-hero--image .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff;}
.page-hero--image .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);}

/* plain variant — typographic, no photograph */
.page-hero--plain{
  padding:calc(126px + 3vw) 0 clamp(56px,6vw,88px);
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(47,111,237,.16),transparent 58%),
    linear-gradient(180deg,var(--bg-2),var(--bg));
  border-bottom:var(--rule);
}
.page-hero--plain .page-hero-copy{max-width:46rem;}
.page-hero--plain .page-hero-intro{color:var(--muted);}

/* split variant — copy beside a framed photograph */
.page-hero--split{
  padding:calc(120px + 3vw) 0 clamp(56px,6vw,88px);
  background:linear-gradient(180deg,var(--bg-2),var(--bg));
  border-bottom:var(--rule);
}
.page-hero--split .page-hero-inner{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,64px);align-items:center;
}
.page-hero--split .page-hero-intro{color:var(--muted);}
.page-hero-figure{border-radius:var(--radius);overflow:hidden;box-shadow:var(--card-shadow);}
.page-hero-figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/4;}

@media (max-width:860px){
  .page-hero--split .page-hero-inner{grid-template-columns:1fr;}
  .page-hero-figure{order:-1;}
  .page-hero-figure img{aspect-ratio:16/10;}
  .page-hero-facts{gap:14px 28px;}
}

/* ============================== Trust band =============================== */

.trust-band{background:var(--bg-2);border-block:var(--rule);padding:30px 0;}
.trust-band-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px 30px;}
.trust-band .trust-item{
  display:flex;flex-direction:column;gap:5px;text-align:left;
  padding-left:16px;border-left:2px solid var(--border-2);
}
.trust-band .trust-item strong{font-family:var(--font-head);font-size:1rem;letter-spacing:-.01em;}
.trust-band .trust-item span{font-size:.83rem;color:var(--muted);line-height:1.5;}

/* ============================= Service cards ============================= */

.service-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;
}
.service-card:hover{transform:translateY(-6px);border-color:var(--border-3);box-shadow:var(--card-shadow);}
.service-card-media{display:block;overflow:hidden;aspect-ratio:16/10;background:var(--bg-3);}
.service-card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);}
.service-card:hover .service-card-media img{transform:scale(1.05);}
.service-card-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1;}
.service-card-num{
  font-family:var(--font-head);font-size:.78rem;font-weight:700;letter-spacing:.18em;color:var(--metal-3);
}
.service-card h3{font-size:1.28rem;margin:10px 0 12px;}
.service-card h3 a::after{content:'';position:absolute;inset:0;}
.service-card p{color:var(--muted);font-size:.94rem;}
.service-card-points{margin-top:18px;display:grid;gap:7px;}
.service-card-points li{
  position:relative;padding-left:20px;font-size:.85rem;color:var(--text-2);
}
.service-card-points li::before{
  content:'';position:absolute;left:0;top:.6em;width:9px;height:1px;background:var(--metal-3);
}
.service-card .link-arrow{margin-top:auto;padding-top:22px;border:none;font-size:.86rem;color:var(--blue-2);}
.service-card:hover .link-arrow{transform:none;}

.service-card--row{flex-direction:row;align-items:stretch;}
.service-card--row .service-card-media{flex:0 0 40%;aspect-ratio:auto;}
.service-card--compact .service-card-media{aspect-ratio:16/7;}
.service-card--compact .service-card-body{padding:20px 22px 22px;}
.service-card--compact h3{font-size:1.1rem;}

@media (max-width:700px){
  .service-card--row{flex-direction:column;}
  .service-card--row .service-card-media{flex:none;aspect-ratio:16/9;}
}

/* ======================= Editorial section primitives ==================== */

/* Alternating photograph / copy rows — the backbone of the service pages. */
.feature-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,5vw,68px);align-items:center;}
.feature-row + .feature-row{margin-top:clamp(48px,6vw,96px);}
.feature-row:nth-child(even) .feature-row-media{order:2;}
.feature-row-media{border-radius:var(--radius);overflow:hidden;background:var(--bg-2);}
.feature-row-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/4;}
.feature-row-copy h3{font-size:clamp(1.45rem,2.6vw,2.05rem);margin-bottom:16px;}
.feature-row-copy .eyebrow{margin-bottom:10px;}
@media (max-width:820px){
  .feature-row{grid-template-columns:1fr;}
  .feature-row:nth-child(even) .feature-row-media{order:0;}
  .feature-row-media img{aspect-ratio:16/10;}
}

/* Large metallic numerals with copy — used for approach and criteria lists. */
.numbered{display:grid;gap:2px;counter-reset:nr;}
.numbered-item{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,40px);
  padding:clamp(24px,3vw,34px) 0;border-top:var(--rule);align-items:start;
}
.numbered-item:last-child{border-bottom:var(--rule);}
.numbered-item .metal-num{font-size:clamp(1.6rem,3.4vw,2.5rem);min-width:2.4ch;}
.numbered-item h3{font-size:1.18rem;margin-bottom:10px;}
.numbered-item p{color:var(--muted);max-width:62ch;font-size:.97rem;}
.numbered-item p + p{margin-top:10px;}

/* Warning-sign / checklist rows with hairline dividers. */
.signals{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:0 clamp(26px,4vw,56px);}
.signal{padding:22px 0;border-top:var(--rule);}
.signal h3{font-size:1.03rem;margin-bottom:8px;display:flex;gap:10px;align-items:baseline;}
.signal h3::before{content:'';flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--blue-2);transform:translateY(-2px);}
.signal p{color:var(--muted);font-size:.92rem;}
.signals--warn .signal h3::before{background:#d98a3d;}

/* Two-panel comparison. */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);}
.compare-panel{
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;
}
.compare-panel h3{font-size:1.22rem;margin-bottom:6px;}
.compare-panel .compare-tag{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--metal-3);font-weight:700;
}
.compare-panel > p{color:var(--muted);margin:14px 0 18px;font-size:.95rem;}
.compare-list{display:grid;gap:11px;margin-top:auto;}
.compare-list li{position:relative;padding-left:26px;font-size:.9rem;color:var(--text-2);}
.compare-list li::before{
  content:'';position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:3px;
  border:1.5px solid var(--border-3);
}
.compare-panel--accent{border-color:rgba(47,111,237,.42);background:linear-gradient(180deg,rgba(47,111,237,.08),var(--bg-2));}
.compare-panel--accent .compare-list li::before{border-color:var(--blue-2);}
@media (max-width:760px){.compare{grid-template-columns:1fr;}}

/* Specification / detail table. */
.spec-table{width:100%;border-collapse:collapse;font-size:.94rem;}
.spec-table caption{text-align:left;color:var(--muted);font-size:.86rem;padding-bottom:14px;}
.spec-table th,.spec-table td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:var(--rule);}
.spec-table thead th{
  font-family:var(--font-head);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--metal-3);border-bottom:1px solid var(--border-2);
}
.spec-table tbody th{font-weight:600;color:var(--text);width:30%;}
.spec-table td{color:var(--muted);}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* Callouts and disclaimers. */
.callout{
  border-left:3px solid var(--blue);background:var(--bg-2);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:clamp(22px,3vw,30px) clamp(22px,3vw,32px);
}
.callout h3{font-size:1.05rem;margin-bottom:10px;}
.callout p{color:var(--muted);font-size:.94rem;}
.callout p + p{margin-top:10px;}
.callout--warn{border-left-color:#d98a3d;}
.callout--legal{border-left-color:var(--metal-3);}
.callout--legal p{font-size:.88rem;}

/* Disclaimers read as a formal notice: double hairline frame, a titled rule,
   and section-mark (§) numbering on each clause. */
.disclaimer{
  position:relative;counter-reset:clause;
  border:1px solid var(--border-2);border-radius:var(--radius);background:var(--bg-2);
  padding:clamp(26px,3.4vw,42px) clamp(22px,3.2vw,42px);
  color:var(--muted);font-size:.9rem;line-height:1.72;
}
.disclaimer::before{
  content:'';position:absolute;inset:8px;pointer-events:none;
  border:1px solid var(--border);border-radius:calc(var(--radius) - 6px);
}
.disclaimer > strong{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-head);font-size:.76rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--text);
  margin-bottom:22px;
}
.disclaimer > strong::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--border-3),transparent);
}
.disclaimer > p{position:relative;padding-left:48px;counter-increment:clause;}
.disclaimer > p::before{
  content:'§' counter(clause);
  position:absolute;left:0;top:.18em;
  font:700 .74rem var(--font-head);letter-spacing:.06em;color:var(--metal-2);
  padding-bottom:4px;border-bottom:1px solid var(--border-2);
}
.disclaimer > p + p{margin-top:16px;}
.disclaimer p strong{color:var(--text-2);}
.disclaimer a{color:var(--blue-2);border-bottom:1px solid rgba(79,139,255,.4);}
.disclaimer ul{display:grid;gap:8px;padding-left:48px;margin-top:12px;}
@media (max-width:560px){
  .disclaimer > p{padding-left:0;padding-top:26px;}
  .disclaimer > p::before{top:0;}
  .disclaimer ul{padding-left:0;}
}

/* Editorial pull statement. */
.pull{
  max-width:34ch;font-family:var(--font-head);font-weight:500;
  font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.28;letter-spacing:-.02em;color:var(--text);
}
.pull-rule{width:56px;height:2px;background:var(--metal-grad);margin-bottom:22px;}

/* Simple key/value stat row without invented numbers. */
.facts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.facts-row div{background:var(--bg-2);padding:24px 22px;}
.facts-row dt{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--metal-3);font-weight:700;margin-bottom:8px;}
.facts-row dd{color:var(--text-2);font-size:.94rem;}

/* ================================== FAQ ================================== */

.faq{border-top:var(--rule);max-width:min(100%,880px);}
.faq-item{border-bottom:var(--rule);}
.faq-q{margin:0;}
.faq-q button{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:22px;
  background:none;border:none;cursor:pointer;color:var(--text);text-align:left;
  padding:22px 2px;font:600 1.02rem/1.4 var(--font-head);letter-spacing:-.01em;
  min-height:56px;
}
.faq-q button:hover{color:var(--blue-2);}
.faq-q svg{
  flex:0 0 auto;width:20px;height:20px;margin-top:2px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  color:var(--metal-3);transition:transform .3s var(--ease);
}
.faq-q button[aria-expanded="true"] svg{transform:rotate(180deg);color:var(--blue-2);}
.faq-a{padding:0 44px 24px 2px;color:var(--muted);font-size:.96rem;line-height:1.68;}
.faq-a > * + *{margin-top:12px;}
.faq-a ul{display:grid;gap:8px;}
.faq-a li{padding-left:20px;position:relative;}
.faq-a li::before{content:'';position:absolute;left:0;top:.65em;width:8px;height:1px;background:var(--metal-3);}
.faq-a a{color:var(--blue-2);border-bottom:1px solid rgba(79,139,255,.35);}

/* ========================== Timeline (stage sheet) =======================
   Not the usual dots-on-a-line timeline. Each stage is a ledger row under a
   hairline rule that draws itself in as the row scrolls into view, with an
   oversized brushed-metal numeral doing the wayfinding. */

.timeline{display:grid;gap:0;}
.timeline-step{
  position:relative;
  display:grid;grid-template-columns:clamp(88px,11vw,170px) minmax(0,1fr);
  gap:clamp(18px,3.5vw,56px);align-items:start;
  padding:clamp(32px,4.5vw,58px) clamp(2px,1vw,16px);
  border-top:1px solid var(--border);
  transition:background .35s;
}
.timeline-step:last-child{border-bottom:1px solid var(--border);}
.timeline-step:hover{background:linear-gradient(90deg,var(--ghost-hover),transparent 60%);}

/* The rule above each stage draws left-to-right as the stage enters the
   viewport. Compositor-only (scaleX), and a plain hairline where the
   scroll-timeline API is unsupported.

   The `auto` in the shorthand is load-bearing: omitting the duration resets it
   to 0s, which finishes the animation before the timeline can drive it, so the
   rule silently sits at its end state instead of drawing. Same for every other
   view()-driven animation in this file. */
.timeline-step::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue-2),var(--metal-3) 55%,transparent 92%);
  transform-origin:left center;transform:scaleX(1);
  pointer-events:none;
}
@supports (animation-timeline: view()){
  .timeline-step::before{
    animation:nrRuleDraw auto both linear;
    animation-timeline:view();
    animation-range:entry 5% entry 70%;
  }
  @keyframes nrRuleDraw{from{transform:scaleX(0);}to{transform:scaleX(1);}}
}

.timeline-marker{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(3.2rem,8vw,6rem);line-height:.82;letter-spacing:-.04em;
  background:var(--metal-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;padding-top:6px;
}
.timeline-marker::after{
  content:'STAGE';display:block;margin-top:14px;
  background:none;-webkit-text-fill-color:var(--metal-3);
  font-size:.64rem;font-weight:700;letter-spacing:.34em;color:var(--metal-3);
}

.timeline-body h3{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:8px;}
.timeline-role{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--metal-2);border:1px solid var(--border-2);border-radius:100px;
  padding:6px 14px;margin-bottom:16px;
}
.timeline-role::before{
  content:'';width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--blue-2);
}
.timeline-body > p{color:var(--muted);max-width:62ch;font-size:1rem;line-height:1.7;}

/* Detail lists read as a spec sheet: ruled columns, no boxes. */
.timeline-detail{
  margin-top:26px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px clamp(22px,3vw,44px);
}
.timeline-detail div{border-top:2px solid var(--border-2);padding:14px 0 0;}
.timeline-detail h4{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-2);margin-bottom:11px;font-weight:700;
}
.timeline-detail li,.timeline-detail p{font-size:.9rem;color:var(--text-2);line-height:1.55;}
.timeline-detail ul{display:grid;gap:8px;}
.timeline-detail li{position:relative;padding-left:18px;}
.timeline-detail li::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:1px;background:var(--metal-3);}

@media (max-width:640px){
  .timeline-step{grid-template-columns:1fr;gap:14px;padding-inline:0;}
  .timeline-marker{font-size:2.6rem;display:flex;align-items:baseline;gap:12px;padding-top:0;}
  .timeline-marker::after{margin-top:0;}
}

/* ============================ Service areas ============================== */

.region-panel{
  position:relative;border-top:1px solid var(--border-2);
  padding:clamp(34px,4.5vw,60px) 0;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,4vw,60px);
}
.region-panel:last-of-type{border-bottom:1px solid var(--border-2);}
.region-panel[hidden]{display:none !important;}
.region-panel:target .region-head h2{color:var(--blue-2);}
.region-head{position:relative;}
.region-num{font-size:clamp(2.6rem,6vw,4.4rem);display:block;margin-bottom:8px;}
.region-head h2{font-size:clamp(1.35rem,2.6vw,1.85rem);margin-bottom:12px;}
.region-head p{color:var(--muted);font-size:.94rem;max-width:42ch;}
.region-note{margin-top:14px;font-size:.86rem;color:var(--metal-3);border-left:2px solid var(--border-2);padding-left:14px;}
.city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px;align-content:start;}
.city-row[hidden]{display:none !important;}
.city-row > a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border:1px solid var(--border);border-radius:11px;background:var(--bg-2);
  transition:border-color .25s,background .25s,transform .25s var(--ease);
  min-height:50px;height:100%;
}
.city-row > a:hover{border-color:var(--blue-2);background:var(--bg-3);transform:translateY(-2px);}
.city-name{
  font-size:.92rem;font-weight:600;color:var(--text);line-height:1.3;
  overflow-wrap:break-word;hyphens:auto;
}
.city-go{
  flex:0 0 auto;color:var(--metal-3);font-size:1rem;line-height:1;transition:color .25s,transform .25s var(--ease);
}
.city-row > a:hover .city-go{color:var(--blue-2);transform:translateX(3px);}
@media (max-width:880px){
  .region-panel{grid-template-columns:1fr;}
}

.city-finder{
  background:var(--bg-2);border:1px solid var(--border-2);border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);
}
.city-finder label{display:block;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.city-finder-field{position:relative;}
.city-finder input{
  width:100%;padding:16px 52px 16px 18px;font-size:1rem;font-family:var(--font-body);
  background:var(--bg);border:1px solid var(--border-2);border-radius:12px;color:var(--text);
}
.city-finder input:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 3px rgba(47,111,237,.18);}
.city-finder-clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;border:none;background:transparent;color:var(--muted);cursor:pointer;
  display:none;align-items:center;justify-content:center;
}
.city-finder-clear.is-shown{display:flex;}
.city-finder-clear svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.city-finder-status{margin-top:14px;font-size:.88rem;color:var(--muted);min-height:1.4em;}
.city-finder-empty{
  margin-top:16px;padding:20px;border:1px dashed var(--border-2);border-radius:12px;
  color:var(--muted);font-size:.92rem;
}
.city-finder-empty a{color:var(--blue-2);font-weight:600;}

/* A-to-Z directory — the full community list set like a book index: an
   oversized brushed-metal letter, then the cities as direct links. */
.az-directory{border-top:1px solid var(--border-2);}
.az-group{
  display:grid;grid-template-columns:clamp(64px,8vw,130px) minmax(0,1fr);
  gap:clamp(16px,3vw,48px);align-items:start;
  padding:clamp(20px,2.8vw,34px) 0;
  border-bottom:1px solid var(--border);
}
.az-letter{
  font:700 clamp(2.2rem,5vw,3.8rem)/0.85 var(--font-head);letter-spacing:-.03em;
  background:var(--metal-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-top:4px;
}
.az-cities{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.az-cities a{
  display:inline-flex;align-items:center;gap:0;
  padding:11px 18px;border-radius:100px;
  border:1px solid var(--border-2);
  font-size:.93rem;font-weight:600;color:var(--text);
  transition:border-color .25s,background .25s,transform .25s var(--ease),gap .25s var(--ease);
}
.az-go{
  display:inline-block;max-width:0;overflow:hidden;opacity:0;
  color:var(--blue-2);transform:translateX(-4px);
  transition:max-width .3s var(--ease),opacity .25s,transform .3s var(--ease);
}
.az-cities a:hover,.az-cities a:focus-visible{
  border-color:var(--blue-2);background:var(--chip-sel);transform:translateY(-2px);gap:8px;
}
.az-cities a:hover .az-go,.az-cities a:focus-visible .az-go{
  max-width:1.4em;opacity:1;transform:none;
}
@media (max-width:640px){
  .az-group{grid-template-columns:clamp(40px,10vw,56px) minmax(0,1fr);gap:14px;}
  .az-letter{font-size:1.9rem;}
  .az-cities a{padding:10px 15px;font-size:.88rem;}
}

/* ---------------------------- Address block ---------------------------- */

.address-block address{font-style:normal;display:grid;gap:2px;}
.address-block address span{display:block;color:var(--text-2);font-size:.95rem;line-height:1.55;}
.address-block .address-name{
  font-family:var(--font-head);font-weight:600;color:var(--text);font-size:1.02rem;margin-bottom:4px;
}
.address-block-heading{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--metal-3);
  font-family:var(--font-head);font-weight:700;margin-bottom:14px;
}
.address-block-note{margin-top:14px;color:var(--muted);font-size:.87rem;line-height:1.6;max-width:44ch;}
.address-block-note strong{color:var(--text-2);}
.address-block-actions{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px;}

.address-block--card{
  background:var(--bg-2);border:1px solid var(--border-2);border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);
}
.address-block--stacked{
  border-left:2px solid var(--blue);padding-left:clamp(18px,2.4vw,26px);
}
.address-block--inline{margin-top:26px;padding-top:22px;border-top:var(--rule);}

/* --------------------------- Contact details --------------------------- */

.contact-details h3{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--metal-3);
  font-family:var(--font-head);font-weight:700;margin-bottom:16px;
}
.contact-channels{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.contact-channel{background:var(--bg-2);padding:14px 18px;display:grid;gap:3px;}
.contact-channel-label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--metal-3);font-weight:700;}
.contact-channel-value{font-size:.95rem;color:var(--text);font-weight:500;}
a.contact-channel-value:hover{color:var(--blue-2);text-decoration:underline;}
.contact-channel-static{color:var(--text-2);font-weight:400;}
.contact-hours{margin-top:20px;}
.contact-hours h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--metal-3);margin-bottom:10px;}
.contact-hours p{display:flex;justify-content:space-between;gap:14px;font-size:.9rem;color:var(--muted);margin-bottom:6px;}
.contact-hours span{color:var(--text-2);}

.area-map{
  position:relative;border:1px solid var(--border-2);border-radius:var(--radius);
  background:linear-gradient(160deg,var(--bg-2),var(--bg));overflow:hidden;padding:clamp(26px,3vw,36px);
}
.area-map svg{width:100%;height:auto;display:block;}
.area-map figcaption{margin-top:16px;font-size:.8rem;color:var(--metal-3);}

/* ============================== Portfolio =============================== */

.portfolio-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding-bottom:26px;margin-bottom:30px;border-bottom:var(--rule);
}
.portfolio-filters{display:flex;flex-wrap:wrap;gap:9px;margin:0;}
.portfolio-filter{min-height:42px;}
.portfolio-filter[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;}
.portfolio-count{font-size:.85rem;color:var(--muted);}

.portfolio-card{isolation:isolate;}
.portfolio-badge{
  position:absolute;z-index:2;top:16px;left:16px;
  background:rgba(6,8,11,.72);backdrop-filter:blur(6px);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.2);
}
.portfolio-card-open{
  position:absolute;inset:0;z-index:3;background:none;border:none;cursor:zoom-in;
  display:flex;align-items:flex-start;justify-content:flex-end;padding:16px;
}
.portfolio-card-icon{
  width:38px;height:38px;border-radius:50%;
  background:rgba(6,8,11,.6);border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.9);transition:opacity .3s,transform .3s var(--ease);
}
.portfolio-card-icon svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.portfolio-card:hover .portfolio-card-icon,
.portfolio-card-open:focus-visible .portfolio-card-icon{opacity:1;transform:none;}
.portfolio-card-open:focus-visible{outline:3px solid var(--blue-2);outline-offset:-3px;}

.lightbox{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(4,6,9,.94);padding:clamp(16px,4vw,48px);
}
.lightbox[hidden]{display:none;}
.lightbox-stage{position:relative;max-width:min(1180px,100%);width:100%;text-align:center;}
.lightbox-figure{display:flex;flex-direction:column;gap:16px;align-items:center;}
.lightbox-images{display:flex;gap:12px;width:100%;justify-content:center;}
.lightbox-images figure{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;}
.lightbox-images img{
  width:100%;max-height:min(68vh,760px);object-fit:contain;border-radius:10px;background:#0b0d10;
}
.lightbox-images figcaption{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#8b95a1;}
.lightbox-caption{color:#fff;max-width:62ch;margin-inline:auto;}
.lightbox-caption strong{display:block;font-family:var(--font-head);font-size:1.15rem;margin-bottom:5px;}
.lightbox-caption span{color:#9aa4af;font-size:.88rem;}
.lightbox-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .25s;
}
.lightbox-btn:hover{background:rgba(255,255,255,.2);}
.lightbox-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.lightbox-prev{left:-8px;}
.lightbox-next{right:-8px;}
.lightbox-close{
  position:absolute;top:-8px;right:-8px;z-index:3;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.lightbox-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.lightbox-counter{margin-top:6px;font-size:.78rem;color:#7d8792;letter-spacing:.12em;}
@media (max-width:760px){
  .lightbox-prev{left:auto;right:70px;top:auto;bottom:-4px;transform:none;width:46px;height:46px;}
  .lightbox-next{right:12px;top:auto;bottom:-4px;transform:none;width:46px;height:46px;}
  .lightbox-close{top:0;right:0;}
  .lightbox-images{flex-direction:column;}
}

/* ============================ Inspection CTA ============================= */

.inspection-cta{position:relative;overflow:hidden;}
.inspection-cta--band{
  background:
    radial-gradient(90% 130% at 8% 0%,rgba(47,111,237,.2),transparent 62%),
    var(--bg-3);
  border-block:var(--rule);
  padding:clamp(52px,6vw,84px) 0;
}
.inspection-cta--panel{padding:clamp(40px,5vw,64px) 0;}
.inspection-cta--panel .inspection-cta-inner{
  background:var(--bg-2);border:1px solid var(--border-2);border-radius:var(--radius);
  padding:clamp(28px,4vw,52px);
}
.inspection-cta-inner{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,auto);
  gap:clamp(24px,4vw,56px);align-items:center;
}
.inspection-cta-copy h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:14px;}
.inspection-cta-copy p{color:var(--muted);max-width:58ch;}
.inspection-cta-note{margin-top:12px;font-size:.86rem;color:var(--metal-3);}
.inspection-cta-actions{display:flex;flex-direction:column;gap:14px;align-items:stretch;}
.inspection-cta-actions .btn{white-space:nowrap;}
.inspection-cta-phone{font-size:.88rem;color:var(--muted);text-align:center;}
.inspection-cta-phone:hover{color:var(--text);}
@media (max-width:820px){
  .inspection-cta-inner{grid-template-columns:1fr;}
  .inspection-cta-actions{align-items:stretch;}
  /* nowrap keeps the button on one line beside the copy on desktop. Stacked on
     a phone there is nothing to align to, and the longer Spanish labels then
     run past the screen edge — .inspection-cta's overflow:hidden was silently
     slicing the end off the button at ~350px and narrower. Let them wrap. */
  .inspection-cta-actions .btn{white-space:normal;}
}

/* ================================ Forms ================================= */

.form-shell{
  background:var(--bg-2);border:1px solid var(--border-2);border-radius:var(--radius);
  padding:clamp(24px,3.4vw,44px);
  /* The form sits in a page column, so its own width is what decides whether a
     two-up row still fits — the viewport can be 1000px wide while the form is
     only 400px. Measure against the form, not the window. */
  container-type:inline-size;
  container-name:form;
}
.form-legend{
  font-family:var(--font-head);font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:600;
  letter-spacing:-.02em;margin-bottom:6px;padding:0;
}
.form-hint{color:var(--muted);font-size:.92rem;margin-bottom:22px;}
fieldset{border:none;padding:0;margin:0;min-width:0;}

.field{display:flex;flex-direction:column;gap:8px;}
.field + .field,.field-row + .field,.field + .field-row,.field-row + .field-row{margin-top:18px;}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;}
.field-row--three{grid-template-columns:repeat(3,minmax(0,1fr));}
/* The columns of a row are themselves adjacent .field siblings, so the
   margin-top rule above was giving every column after the first an 18px top
   margin — inside a grid that pushes the whole column (label and control)
   below its neighbour instead of adding space between stacked fields. The grid
   gap already spaces the columns; the stacking margin must not apply across
   them. */
.field-row > .field + .field{margin-top:0;}
/* Narrower than this the columns cannot hold a label on one line; one label
   wraps, its neighbour does not, and the two input boxes end up 20px apart.
   Stack them rather than ship a ragged row. Must come after the base
   .field-row rules above, or they would override it. The 600px viewport
   media query further down is the fallback for browsers without @container. */
@container form (max-width:520px){
  .field-row,.field-row--three{grid-template-columns:1fr;}
}
.field > label,.field-label{
  font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.field .req{color:var(--blue-2);}
.field .optional{text-transform:none;letter-spacing:0;font-weight:400;color:var(--metal-3);}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg);border:1px solid var(--border-2);color:var(--text);
  padding:14px 16px;border-radius:10px;font-family:var(--font-body);font-size:.97rem;
  /* Explicit, or a <select> inherits the body's 1.6 while an <input> keeps the
     UA's line-height:normal — leaving the two 2px apart side by side in a row. */
  line-height:1.4;
  min-height:50px;transition:border-color .25s,box-shadow .25s;
}
/* line-height alone does not settle it — Chrome gives <select> a taller
   intrinsic box than a text input. Pin the single-line controls to one height
   so a text input and a select sitting in the same .field-row match. Checkboxes
   and radios are excluded; they have their own sizing further down. */
.field select,
.field input:not([type="checkbox"]):not([type="radio"]){height:52px;}
.field textarea{min-height:130px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue-2);box-shadow:0 0 0 3px rgba(47,111,237,.16);
}
.field-error{color:#e4736a;font-size:.85rem;}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#e4736a;}
.field-help{color:var(--metal-3);font-size:.84rem;}

.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.choice-grid--wide{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.choice{position:relative;}
.choice input{position:absolute;opacity:0;width:1px;height:1px;}
.choice span{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;
  min-height:96px;padding:18px 12px;border-radius:12px;cursor:pointer;
  background:var(--chip-bg);border:1px solid var(--border-2);color:var(--text-2);
  font:600 .9rem var(--font-body);
  transition:border-color .22s,background .22s,transform .22s var(--ease),box-shadow .22s;
}
.choice span svg{width:28px;height:28px;stroke:var(--metal-2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .22s;}
.choice span:hover{border-color:var(--border-3);transform:translateY(-2px);}
.choice input:checked + span{
  border-color:var(--blue);background:var(--chip-sel);color:var(--text);
  box-shadow:0 0 0 3px rgba(47,111,237,.18);
}
.choice input:checked + span svg{stroke:var(--blue-2);}
.choice input:focus-visible + span{outline:2px solid var(--blue-2);outline-offset:3px;}
.choice--row span{flex-direction:row;min-height:52px;border-radius:100px;padding:12px 22px;}

.checkbox{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:.92rem;color:var(--text-2);line-height:1.55;}
.checkbox input{
  flex:0 0 auto;width:22px;height:22px;margin-top:1px;accent-color:var(--blue);cursor:pointer;
  /* A consent checkbox sits inside a .field, so it picks up the text-input
     styling. height:22px alone loses to that rule's min-height:50px, which
     stretched the box into a 22x50 sliver — reset the box here. */
  min-height:0;padding:0;border:none;border-radius:0;background:none;
}
.checkbox span a{color:var(--blue-2);text-decoration:underline;}

/* Honeypot: off-screen, never focusable, never announced. */
.nr-hp{position:absolute !important;left:-9999px !important;top:auto;width:1px;height:1px;overflow:hidden;}

.form-status{
  border:1px solid #e4736a;border-left-width:3px;border-radius:10px;
  background:rgba(228,115,106,.08);padding:18px 20px;margin-bottom:24px;
}
.form-status[hidden]{display:none;}
.form-status-title{font-weight:700;font-size:.95rem;color:var(--text);}
.form-status-list{margin-top:10px;display:grid;gap:6px;}
.form-status-list li{font-size:.9rem;padding-left:18px;position:relative;color:var(--text-2);}
.form-status-list li::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:1px;background:#e4736a;}
.form-status-list a{color:var(--text);text-decoration:underline;}
.form-status-notice{color:var(--text);font-weight:500;}

/* Multi-step wizard shell */
.wizard-head{margin-bottom:26px;}
.wizard-steps{display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:14px;list-style:none;}
.wizard-steps li{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--metal-3);
  display:flex;align-items:center;gap:8px;
}
.wizard-steps li::after{content:'';width:14px;height:1px;background:var(--border-2);}
.wizard-steps li:last-child::after{display:none;}
.wizard-steps li[aria-current="step"]{color:var(--blue-2);}
.wizard-steps li.is-done{color:var(--text-2);}
.wizard-track{height:4px;border-radius:4px;background:var(--border);overflow:hidden;}
.wizard-track span{display:block;height:100%;background:var(--blue);border-radius:4px;transition:width .45s var(--ease);}

.wizard-panel[hidden]{display:none;}
.wizard-nav{display:flex;justify-content:space-between;gap:14px;margin-top:30px;padding-top:22px;border-top:var(--rule);}
.wizard-nav .btn{min-width:140px;}
.wizard-nav .btn[hidden]{display:none;}

.review-list{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.review-list > div{
  background:var(--bg);padding:14px 18px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) auto;
  gap:14px;align-items:baseline;
}
.review-list dt{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--metal-3);font-weight:700;}
.review-list dd{color:var(--text-2);font-size:.94rem;word-break:break-word;}
.review-list button{
  background:none;border:none;color:var(--blue-2);font:600 .82rem var(--font-body);cursor:pointer;
  text-decoration:underline;padding:4px;
}
@media (max-width:600px){
  .review-list > div{grid-template-columns:1fr auto;}
  .review-list dt{grid-column:1 / -1;}
  .field-row,.field-row--three{grid-template-columns:1fr;}
  .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ============================ Reviews page ============================== */

.principle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.principle{background:var(--bg-2);padding:clamp(24px,3vw,34px);}
.principle .metal-num{font-size:1.5rem;display:block;margin-bottom:14px;}
.principle h3{font-size:1.05rem;margin-bottom:10px;}
.principle p{color:var(--muted);font-size:.92rem;}

/* The honest empty state: a ledger panel with an oversized brushed-metal zero
   — the count of reviews we were willing to fabricate. */
.review-empty{
  display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);
  gap:clamp(28px,5vw,72px);align-items:center;
  border:1px solid var(--border-2);border-radius:var(--radius);background:var(--bg-2);
  padding:clamp(30px,4.5vw,64px);
}
.review-empty-figure{
  display:grid;gap:16px;justify-items:start;align-content:center;
  padding-right:clamp(18px,3vw,44px);border-right:1px solid var(--border);
}
.review-zero{
  font:700 clamp(7rem,15vw,12rem)/0.78 var(--font-head);letter-spacing:-.05em;
  background:var(--metal-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.review-zero-caption{
  font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--metal-3);line-height:1.7;
  padding-top:14px;border-top:2px solid var(--border-2);
}
.review-empty h2{font-size:clamp(1.3rem,2.4vw,1.9rem);margin:10px 0 14px;}
.review-empty p{color:var(--muted);max-width:62ch;}
.review-empty p + p{margin-top:12px;}
.review-empty-actions{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;}
@media (max-width:760px){
  .review-empty{grid-template-columns:1fr;gap:26px;}
  .review-empty-figure{
    border-right:none;padding-right:0;padding-bottom:22px;border-bottom:1px solid var(--border);
    grid-template-columns:auto minmax(0,1fr);align-items:end;gap:18px;
  }
  .review-zero{font-size:5rem;}
  .review-zero-caption{border-top:none;padding-top:0;padding-bottom:8px;}
}

.review-card-v{
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;gap:14px;
}
.review-card-v blockquote{color:var(--text-2);font-size:1rem;line-height:1.65;}
.review-card-v footer{margin-top:auto;font-size:.85rem;color:var(--muted);}
.review-card-v .review-source{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--metal-3);}

/* ============================== 404 page ================================ */

.error-page{
  min-height:72vh;display:flex;align-items:center;
  padding:clamp(100px,12vw,160px) 0 clamp(60px,8vw,100px);
  background:radial-gradient(100% 80% at 20% 0%,rgba(47,111,237,.14),transparent 60%),var(--bg);
}
.error-code{
  font-family:var(--font-head);font-size:clamp(4rem,14vw,9rem);line-height:.9;font-weight:700;
  background:var(--metal-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:18px;
}
.error-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:34px;max-width:760px;}
.error-links a{
  border:1px solid var(--border-2);border-radius:12px;padding:18px 20px;
  display:flex;flex-direction:column;gap:5px;transition:border-color .25s,transform .25s var(--ease),background .25s;
  min-height:76px;
}
.error-links a:hover{border-color:var(--blue-2);transform:translateY(-3px);background:var(--bg-2);}
.error-links strong{font-family:var(--font-head);font-size:1rem;}
.error-links span{font-size:.83rem;color:var(--muted);}

/* ============================ Thank you page ============================ */

.thanks{padding:clamp(120px,14vw,180px) 0 clamp(60px,8vw,100px);}
.thanks-mark{
  width:74px;height:74px;border-radius:50%;margin-bottom:26px;
  background:rgba(30,190,93,.12);border:2px solid var(--green);
  display:flex;align-items:center;justify-content:center;
}
.thanks-mark svg{width:34px;height:34px;stroke:var(--green);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.thanks-ref{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  border:1px dashed var(--border-2);border-radius:10px;padding:12px 18px;
  font-family:var(--font-head);letter-spacing:.06em;color:var(--text-2);font-size:.92rem;
}
.thanks-next{margin-top:38px;display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;max-width:760px;}
.thanks-next li{background:var(--bg-2);padding:20px 24px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;}
.thanks-next .metal-num{font-size:1.05rem;}
.thanks-next strong{display:block;margin-bottom:5px;font-family:var(--font-head);font-size:1rem;}
.thanks-next p{color:var(--muted);font-size:.91rem;}

/* =============================== Footer =================================
   Masthead (brand + the one CTA) over ruled directory columns, closed by an
   oversized brushed-metal wordmark sunk into the base of the page. */

.site-footer{padding:clamp(56px,7vw,88px) 0 0;}

.footer-masthead{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,80px);align-items:start;
  padding-bottom:clamp(36px,5vw,60px);
}
.footer-brand img{height:66px;width:auto;margin-bottom:20px;}
.footer-statement{color:var(--muted);font-size:.92rem;max-width:42ch;line-height:1.7;}
.footer-address{margin-top:22px;font-style:normal;font-size:.9rem;color:var(--text-2);line-height:1.7;}
.footer-address strong{font-family:var(--font-head);font-weight:600;}
.footer-directions{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:.85rem;font-weight:600;color:var(--blue-2);
}
.footer-directions svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.footer-directions:hover{text-decoration:underline;}

.footer-cta{border-left:1px solid var(--border);padding-left:clamp(24px,4vw,64px);}
.footer-cta-title{
  font-family:var(--font-head);font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.12;margin-bottom:24px;
  text-wrap:balance;
}
.footer-cta-actions{display:flex;flex-wrap:wrap;gap:12px;}
.footer-contact-list{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:20px;}
.footer-contact-list a{color:var(--text-2);font-size:.92rem;font-weight:500;}
.footer-contact-list a:hover{color:var(--blue-2);}
.footer-hours{margin-top:16px;font-size:.85rem;color:var(--muted);max-width:34ch;}
.footer-hours p{display:flex;justify-content:space-between;gap:12px;margin-bottom:5px;}
.footer-hours span{color:var(--text-2);}
.footer-social{display:flex;gap:10px;margin-top:18px;}
.footer-social a{
  width:36px;height:36px;border:1px solid var(--border-2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;
  transition:border-color .25s,color .25s;
}
.footer-social a:hover{border-color:var(--blue-2);color:var(--blue-2);}

/* Directory columns carry the same ruled spec-sheet language as the stage
   details on the process page. */
.footer-directory{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,4vw,56px);
}
.footer-col{border-top:2px solid var(--border-2);padding-top:16px;}
.footer-heading{
  font-family:var(--font-head);font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--blue-2);margin-bottom:16px;font-weight:700;
}
.footer-col ul{display:grid;gap:10px;}
.footer-col a{color:var(--text-2);font-size:.9rem;transition:color .2s;display:inline-block;}
.footer-col a:hover{color:var(--blue-2);}
.footer-more{color:var(--blue-2) !important;font-weight:600;}

/* The wordmark is display only: huge, brushed-metal, sunk behind the bottom
   bar so the base of the page reads as a signature rather than a link dump. */
.footer-wordmark{
  overflow:hidden;pointer-events:none;user-select:none;
  margin-top:clamp(26px,4vw,52px);margin-bottom:-2px;
}
.footer-wordmark span{
  display:block;text-align:center;white-space:nowrap;
  font:700 clamp(3.4rem,11.4vw,11rem)/0.78 var(--font-head);
  letter-spacing:-.02em;
  background:var(--metal-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.18;
  transform:translateY(12%);
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 30%,transparent 96%);
}

.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;
  border-top:var(--rule);padding:22px 0;color:var(--muted);font-size:.82rem;text-align:left;
}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.footer-legal a:hover{color:var(--blue-2);text-decoration:underline;}
.footer-top{color:var(--text-2);font-weight:600;}

/* Build credit. Deliberately quieter than the legal row beside it — it is an
   attribution, not navigation, so it recedes until deliberately looked for. */
.footer-credit{color:var(--muted);opacity:.75;}
.footer-credit a{color:var(--text-2);font-weight:600;}
.footer-credit a:hover{color:var(--blue-2);text-decoration:underline;}

@media (max-width:900px){
  .footer-masthead{grid-template-columns:1fr;gap:30px;}
  .footer-cta{border-left:none;padding-left:0;border-top:var(--rule);padding-top:28px;}
}
@media (max-width:720px){
  .footer-directory{grid-template-columns:1fr;gap:26px;}
}
@media (max-width:560px){
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}

/* ============================ Mobile sticky ============================= */

.mobile-sticky{
  padding-bottom:env(safe-area-inset-bottom);
  grid-template-columns:repeat(var(--sticky-cols,3),1fr);
}
.mobile-sticky[data-count="1"]{--sticky-cols:1;}
.mobile-sticky[data-count="2"]{--sticky-cols:2;}
.m-btn{min-height:52px;display:flex;align-items:center;justify-content:center;}
@media (max-width:980px){
  body{padding-bottom:52px;}
}

/* ====================== Homepage-specific adjustments =================== */

/* style.css hid these until GSAP ran. GSAP has been removed, so they are
   visible by default and the entrance is handled in CSS below. */
.reveal-text,.reveal-fade,.reveal-up{opacity:1;transform:none;}

.hero-logo{opacity:1;animation:heroIn .9s var(--ease) both;}
.hero h1{animation:heroIn .9s .12s var(--ease) both;}
.hero-sub{animation:heroIn .9s .24s var(--ease) both;}
.hero-cta{animation:heroIn .9s .36s var(--ease) both;}
@keyframes heroIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .hero-logo,.hero h1,.hero-sub,.hero-cta{animation:none;}
}
.hero-bg img{transform:none;}
.hero-cta .btn{transition:transform .3s var(--ease),background .3s,border-color .3s;}

/* style.css sets height:100vh. On a phone 100vh is the URL-bar-*collapsed*
   height, so on load the hero is taller than what the visitor can actually see
   and it then resizes the moment the bar hides — a scroll jump on the very
   first gesture. svh is the stable small-viewport height; the vh declaration
   above stays as the fallback for browsers without it. */
.hero{height:100svh;}

/* The 680px floor from style.css exceeds the viewport on short phones (a
   320x658 screen got a 680px hero), pushing the CTAs under the fold before a
   single pixel is scrolled. Below that width the hero simply fills the screen. */
@media (max-width:560px){
  .hero{min-height:0;}
}

.home-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);}
.home-services-grid > *:nth-child(7){grid-column:span 1;}
@media (max-width:980px){.home-services-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.home-services-grid{grid-template-columns:1fr;}}

.home-process{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;}
.home-process-step{padding:26px 24px 26px 0;border-top:2px solid var(--border-2);}
.home-process-step .metal-num{font-size:1.05rem;display:block;margin-bottom:10px;}
.home-process-step h3{font-size:1.02rem;margin-bottom:8px;}
.home-process-step p{font-size:.89rem;color:var(--muted);}

.home-areas{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start;}
.home-area-list{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.home-area-list a{
  background:var(--bg-2);padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  transition:background .25s;min-height:56px;
}
.home-area-list a:hover{background:var(--bg-3);}
.home-area-list strong{font-family:var(--font-head);font-size:.98rem;font-weight:600;}
.home-area-list span{font-size:.8rem;color:var(--muted);text-align:right;}
@media (max-width:820px){.home-areas{grid-template-columns:1fr;}}

.masonry img{cursor:default;}

/* Old homepage sections that are no longer used keep their styles in
   style.css; nothing references .emergency-banner, .finance-card or
   .review-card any more. */

/* ============================ Utility helpers =========================== */

.mt-0{margin-top:0;}
.mt-s{margin-top:16px;}
.mt-m{margin-top:28px;}
.mt-l{margin-top:clamp(36px,5vw,64px);}
.text-centre{text-align:center;}
.max-measure{max-width:var(--measure);}
.centre-block{margin-inline:auto;}
.stack-s{display:grid;gap:14px;}
.stack-m{display:grid;gap:24px;}
.stack-l{display:grid;gap:clamp(30px,4vw,52px);}

@media (max-width:720px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
}
@media (min-width:721px) and (max-width:1024px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* =============================================================================
   ============================  V2 PRESENTATION SKIN  ========================
   Loaded after everything above — same class names, elevated treatment.
   Design language: cinematic depth, standing-seam line motif, aurora glow,
   glass surfaces, oversized metallic numerals, restrained motion.
   ========================================================================== */

:root{
  --glow-blue:0 0 44px rgba(47,111,237,.34);
  --edge-grad:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 38%,rgba(47,111,237,.28) 100%);
  --edge-grad-hover:linear-gradient(135deg,rgba(255,255,255,.26),rgba(120,150,200,.10) 38%,rgba(79,139,255,.55) 100%);
  --glass:rgba(20,24,30,.55);
  --aurora-a:rgba(47,111,237,.20);
  --aurora-b:rgba(140,160,190,.10);
  --seam-line:rgba(255,255,255,.05);
  --radius-lg:20px;
}
:root[data-theme="light"]{
  --glow-blue:0 10px 40px rgba(47,111,237,.22);
  --edge-grad:linear-gradient(135deg,rgba(15,25,40,.14),rgba(15,25,40,.04) 38%,rgba(47,111,237,.30) 100%);
  --edge-grad-hover:linear-gradient(135deg,rgba(15,25,40,.22),rgba(15,25,40,.06) 38%,rgba(47,111,237,.55) 100%);
  --glass:rgba(255,255,255,.62);
  --aurora-a:rgba(47,111,237,.14);
  --aurora-b:rgba(60,80,110,.07);
  --seam-line:rgba(15,25,40,.05);
}

/* ------------------------- shared decorative layers ---------------------- */

/* Static atmosphere wash. The old version ran an infinite drift animation on
   a huge blended layer — a constant compositing cost that made every page
   scroll worse for an effect nobody consciously saw. */
.hero-aurora{
  position:absolute;inset:-10% -6%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 55% at 82% 12%,var(--aurora-a),transparent 70%),
    radial-gradient(38% 48% at 8% 88%,var(--aurora-b),transparent 70%),
    radial-gradient(30% 40% at 20% 10%,rgba(47,111,237,.10),transparent 70%);
}

.hero-seams{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 54px,var(--seam-line) 54px 55px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 72%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 72%);
}


/* ------------------------------- eyebrows -------------------------------- */

.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{
  content:'';width:30px;height:1px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--blue-2),var(--metal-3));
}
.page-hero--image .eyebrow::before{background:linear-gradient(90deg,var(--blue-2),rgba(255,255,255,.4));}

/* ------------------------------ page heroes ------------------------------ */

.page-hero{overflow:hidden;}
.page-hero-inner{z-index:2;}
.page-hero h1{
  font-size:clamp(2.3rem,5.6vw,4.35rem);
  letter-spacing:-0.03em;
}
.page-hero-intro{margin-top:22px;}

/* image variant — cinematic */
.page-hero--image{padding:calc(136px + 4vw) 0 clamp(78px,8vw,124px);}
.page-hero--image .page-hero-bg img{
  animation:heroDrift 7s ease-out both;
}
@keyframes heroDrift{from{transform:scale(1.1);}to{transform:scale(1.0);}}
@media (prefers-reduced-motion:reduce){.page-hero--image .page-hero-bg img{animation:none;transform:none;}}
.page-hero--image .page-hero-bg::after{
  background:
    linear-gradient(105deg,rgba(5,7,10,.95) 0%,rgba(5,7,10,.82) 42%,rgba(6,8,12,.34) 100%),
    linear-gradient(0deg,var(--bg) 0%,transparent 34%),
    radial-gradient(60% 80% at 90% 10%,rgba(47,111,237,.16),transparent 70%);
}
.page-hero--image .hero-seams{z-index:1;opacity:.55;}
.page-hero--image .hero-aurora{z-index:1;opacity:.75;}
.page-hero--image h1{text-shadow:0 6px 60px rgba(0,0,0,.55);}

/* glassy fact chips */
.page-hero-facts{border:none;padding:0;gap:12px;margin-top:44px;}
/* Solid translucent chips — backdrop-filter blur here made every hero scroll
   expensively, since the blur resamples the backdrop on each frame. */
.page-hero-facts li{
  flex-direction:column;gap:3px;
  padding:14px 20px;border-radius:14px;
  background:var(--bg-2);border:1px solid var(--border-2);
}
.page-hero--image .page-hero-facts li{border-color:rgba(255,255,255,.14);background:rgba(10,13,18,.78);}
.page-hero-facts strong{font-size:1.05rem;}
.page-hero-facts span{letter-spacing:.05em;}

/* plain variant — aurora field */
.page-hero--plain{
  background:linear-gradient(180deg,var(--bg-2),var(--bg));
  position:relative;
}
.page-hero--plain .hero-seams{opacity:.8;}
.page-hero--plain h1{
  background:linear-gradient(120deg,var(--text) 55%,var(--metal-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* split variant — layered figure */
.page-hero--split{background:linear-gradient(180deg,var(--bg-2),var(--bg));position:relative;}
.page-hero--split .hero-seams{opacity:.7;}
.page-hero-figure{
  position:relative;box-shadow:0 30px 80px rgba(0,0,0,.45),var(--glow-blue);
  border:1px solid var(--border-2);
}
.page-hero-figure::before{
  content:'';position:absolute;inset:14px -14px -14px 14px;z-index:-1;
  border:1px solid var(--border-2);border-radius:var(--radius);
  background:repeating-linear-gradient(115deg,transparent 0 10px,var(--seam-line) 10px 11px);
}
:root[data-theme="light"] .page-hero-figure{box-shadow:0 24px 60px rgba(20,40,80,.18);}

/* ------------------------------ breadcrumbs ------------------------------ */

.breadcrumbs{background:transparent;border-bottom:var(--rule);position:relative;z-index:3;}
.breadcrumbs ol{padding:14px 0;}
.breadcrumbs a:hover{color:var(--blue-2);}

/* ------------------------------- sections -------------------------------- */

.section{position:relative;}
/* clip rather than hidden: hidden makes these sections scroll containers, and
   view() binds to the nearest one — which froze the drawn-in rules on every
   stepped list inside an alt/deep section (.home-process-step among them) at
   their finished state. clip contains the aurora wash just the same. */
.section--alt,.section--deep{overflow:clip;}
.section--alt::before,.section--deep::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 60% at 100% 0%,var(--aurora-a),transparent 70%),
    radial-gradient(34% 46% at 0% 100%,var(--aurora-b),transparent 70%);
  opacity:.5;
}
.section--deep::before{opacity:.75;}
.section--alt > .container,.section--deep > .container{position:relative;z-index:1;}

.section-intro h2{font-size:clamp(1.9rem,3.9vw,3rem);letter-spacing:-0.03em;}
.section-intro p{font-size:1.06rem;line-height:1.7;}

/* ------------------------------- buttons --------------------------------- */

.btn{position:relative;overflow:hidden;}
.btn-primary{
  background:linear-gradient(135deg,#3d7bf5,#2558c9);
  box-shadow:0 10px 34px rgba(47,111,237,.42),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover{background:linear-gradient(135deg,#4f8bff,#2f6fed);box-shadow:0 14px 44px rgba(47,111,237,.55),inset 0 1px 0 rgba(255,255,255,.25);}
.btn-primary::after{
  content:'';position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease);
}
.btn-primary:hover::after{left:130%;}
@media (prefers-reduced-motion:reduce){.btn-primary::after{display:none;}}

/* ------------------------------ glass cards ------------------------------ */
/* Gradient hairline borders: paint bg inside padding-box, gradient in border-box */

.service-card,
.callout,
.compare-panel,
.principle,
.review-card-v,
.review-empty,
.city-finder,
.address-block--card,
.form-shell,
.facts-row,
.error-links a{
  border:1px solid transparent;
  background:
    linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
    var(--edge-grad) border-box;
}
.facts-row{gap:0;background:
    linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
    var(--edge-grad) border-box;overflow:hidden;}
.facts-row div{background:transparent;border-right:var(--rule);}
.facts-row div:last-child{border-right:none;}

.callout{border-radius:var(--radius-lg);position:relative;}
.callout::before{
  content:'';position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--blue-2),transparent);
}
.callout--warn::before{background:linear-gradient(180deg,#d98a3d,transparent);}
.callout--legal::before{background:linear-gradient(180deg,var(--metal-3),transparent);}
.callout:hover{box-shadow:0 18px 50px rgba(0,0,0,.30);}
:root[data-theme="light"] .callout:hover{box-shadow:0 18px 44px rgba(20,40,80,.12);}

.service-card{border-radius:var(--radius-lg);}
.service-card:hover{
  background:
    linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
    var(--edge-grad-hover) border-box;
  box-shadow:0 26px 60px rgba(0,0,0,.42),var(--glow-blue);
  transform:translateY(-8px);
}
:root[data-theme="light"] .service-card:hover{box-shadow:0 22px 50px rgba(20,40,80,.16);}
.service-card-media{position:relative;}
.service-card-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(6,8,12,.55));
  opacity:.85;transition:opacity .4s;
}
.service-card:hover .service-card-media::after{opacity:.4;}
.service-card-body .service-card-num{color:var(--metal-3);}
.service-card .link-arrow{transition:color .3s,transform .3s var(--ease);}
.service-card:hover .link-arrow{transform:translateX(6px);color:var(--blue-2);}

.compare-panel{border-radius:var(--radius-lg);position:relative;overflow:hidden;}
.compare-panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--metal-3),transparent 70%);
}
.compare-panel--accent{
  background:
    linear-gradient(180deg,rgba(47,111,237,.10),var(--bg-2) 55%) padding-box,
    linear-gradient(135deg,rgba(79,139,255,.6),rgba(47,111,237,.12) 60%,rgba(79,139,255,.35)) border-box;
}
.compare-panel--accent::before{background:linear-gradient(90deg,var(--blue-2),transparent 80%);}
.compare{position:relative;}
@media (min-width:761px){
  .compare::after{
    content:'VS';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
    width:52px;height:52px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font:700 .8rem var(--font-head);letter-spacing:.1em;color:var(--text);
    background:var(--bg);border:1px solid var(--border-2);
    box-shadow:0 10px 30px rgba(0,0,0,.4);
  }
}

/* ---------------------------- numbered editorial -------------------------- */

.numbered-item{
  position:relative;transition:background .35s;
  padding-left:clamp(6px,1vw,14px);padding-right:clamp(6px,1vw,14px);
}
.numbered-item:hover{background:linear-gradient(90deg,var(--ghost-hover),transparent 70%);}
/* Same drawn-in rule as the process timeline, so every stepped list on the
   site shares one visual language. */
@supports (animation-timeline: view()){
  .numbered-item::before{
    content:'';position:absolute;top:-1px;left:0;right:0;height:2px;
    background:linear-gradient(90deg,var(--blue-2),var(--metal-3) 55%,transparent 92%);
    transform-origin:left center;
    animation:nrRuleDraw auto both linear;
    animation-timeline:view();
    animation-range:entry 5% entry 70%;
    pointer-events:none;
  }
}
.numbered-item .metal-num{
  font-size:clamp(2.2rem,4.6vw,3.6rem);
}
.numbered-item h3{font-size:1.3rem;}

/* -------------------------------- signals -------------------------------- */

.signals{gap:14px clamp(14px,2vw,20px);}
.signal{
  border:1px solid transparent;border-radius:16px;
  padding:20px 22px;
  background:
    linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
    var(--edge-grad) border-box;
  transition:transform .35s var(--ease),box-shadow .35s;
}
.signal:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.3);}
:root[data-theme="light"] .signal:hover{box-shadow:0 14px 34px rgba(20,40,80,.12);}
.signal h3::before{
  width:9px;height:9px;box-shadow:0 0 12px rgba(47,111,237,.8);
}
.signals--warn .signal h3::before{box-shadow:0 0 12px rgba(217,138,61,.8);}

/* timeline: fully styled in the base layer above — no v2 override needed. */

/* --------------------------------- tables --------------------------------- */

.table-scroll{
  border:1px solid transparent;border-radius:var(--radius-lg);
  background:
    linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
    var(--edge-grad) border-box;
  padding:6px 6px 2px;
}
.spec-table caption{padding:16px 16px 12px;}
.spec-table thead th{background:var(--bg-3);}
.spec-table thead th:first-child{border-radius:12px 0 0 0;}
.spec-table thead th:last-child{border-radius:0 12px 0 0;}
.spec-table tbody tr{transition:background .25s;}
.spec-table tbody tr:hover{background:var(--ghost-hover);}
.spec-table tbody tr:last-child th,.spec-table tbody tr:last-child td{border-bottom:none;}

/* ----------------------------------- FAQ ---------------------------------- */

.faq{border:none;display:grid;gap:12px;max-width:min(100%,900px);}
.faq-item{
  border:1px solid transparent;border-radius:16px;border-bottom:1px solid transparent;
  background:
    linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
    var(--edge-grad) border-box;
  transition:box-shadow .3s;
}
.faq-item:has(button[aria-expanded="true"]){
  background:
    linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
    var(--edge-grad-hover) border-box;
  box-shadow:0 16px 44px rgba(0,0,0,.3);
}
.faq-q button{padding:20px 22px;}
.faq-q svg{
  width:30px;height:30px;padding:6px;border-radius:50%;
  border:1px solid var(--border-2);margin-top:0;
}
.faq-q button[aria-expanded="true"] svg{border-color:var(--blue);background:rgba(47,111,237,.14);}
.faq-a{padding:0 56px 22px 22px;}

/* ------------------------------ inspection CTA ---------------------------- */

.inspection-cta--band{
  background:var(--bg-3);
  border-block:1px solid var(--border-2);
  position:relative;overflow:hidden;
}
.inspection-cta--band::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 130% at 10% 0%,rgba(47,111,237,.28),transparent 60%),
    radial-gradient(50% 90% at 95% 100%,rgba(140,160,190,.10),transparent 70%);
}
.inspection-cta--band::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 54px,var(--seam-line) 54px 55px);
  -webkit-mask-image:linear-gradient(105deg,rgba(0,0,0,.9),transparent 65%);
  mask-image:linear-gradient(105deg,rgba(0,0,0,.9),transparent 65%);
}
.inspection-cta-inner{position:relative;z-index:1;}
.inspection-cta-copy h2{font-size:clamp(1.9rem,3.6vw,2.85rem);letter-spacing:-0.03em;}
.inspection-cta--panel .inspection-cta-inner{
  border:1px solid transparent;
  background:
    linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
    var(--edge-grad-hover) border-box;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.inspection-cta-actions .btn-primary{padding:18px 40px;}

/* -------------------------------- portfolio ------------------------------- */

.portfolio-card{border-radius:16px;transition:transform .45s var(--ease),box-shadow .45s;}
.portfolio-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(0,0,0,.5);}
.portfolio-filter{transition:.3s;border-radius:100px;}
.portfolio-filter:hover{transform:translateY(-2px);}
.portfolio-filter.is-active,.portfolio-filter[aria-pressed="true"]{
  background:linear-gradient(135deg,#3d7bf5,#2558c9);border-color:transparent;
  box-shadow:0 8px 24px rgba(47,111,237,.4);
}

/* ----------------------------- region panels ------------------------------ */

.region-num{
  font-size:clamp(3rem,7vw,5.2rem);line-height:1;
}
.region-panel::after{
  content:'';position:absolute;right:0;top:clamp(34px,4.5vw,60px);width:clamp(80px,14vw,220px);height:1px;
  background:linear-gradient(90deg,transparent,var(--border-2));
}
.city-row > a{
  border:1px solid transparent;border-radius:12px;
  background:
    linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
    var(--edge-grad) border-box;
}
.city-row > a:hover{
  background:
    linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
    var(--edge-grad-hover) border-box;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}

.city-finder{border-radius:var(--radius-lg);box-shadow:0 24px 60px rgba(0,0,0,.25);}
:root[data-theme="light"] .city-finder{box-shadow:0 18px 44px rgba(20,40,80,.10);}
.city-finder input{border-radius:14px;padding:18px 56px 18px 20px;font-size:1.05rem;}

.area-map{
  border:1px solid transparent;
  background:
    linear-gradient(160deg,var(--bg-2),var(--bg)) padding-box,
    var(--edge-grad) border-box;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
}
:root[data-theme="light"] .area-map{box-shadow:0 18px 44px rgba(20,40,80,.10);}

/* --------------------------------- forms ---------------------------------- */

.form-shell{border-radius:var(--radius-lg);box-shadow:0 30px 80px rgba(0,0,0,.35);}
:root[data-theme="light"] .form-shell{box-shadow:0 22px 56px rgba(20,40,80,.12);}
.wizard-track{height:6px;border-radius:6px;}
.wizard-track span{background:linear-gradient(90deg,#3d7bf5,#5e9bff);box-shadow:0 0 14px rgba(47,111,237,.6);}
.choice span{border-radius:14px;min-height:104px;}
.choice input:checked + span{
  background:
    linear-gradient(180deg,rgba(47,111,237,.16),var(--chip-bg) 80%) padding-box,
    linear-gradient(135deg,#4f8bff,rgba(47,111,237,.25)) border-box;
  border:1px solid transparent;
  box-shadow:0 10px 30px rgba(47,111,237,.24);
}
.choice{position:relative;}
.choice input:checked + span::after{
  content:'✓';position:absolute;top:8px;right:10px;
  width:20px;height:20px;border-radius:50%;font-size:.7rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(47,111,237,.5);
}
.field input,.field select,.field textarea{border-radius:12px;}
.review-list{border-radius:16px;}

/* ------------------------------ reviews page ------------------------------ */

.principle-grid{border:none;background:none;gap:14px;border-radius:0;overflow:visible;}
.principle{border-radius:16px;transition:transform .35s var(--ease),box-shadow .35s;}
.principle:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.3);position:relative;z-index:1;}

/* ------------------------------- home extras ------------------------------ */

.home-process-step{position:relative;transition:border-color .35s,transform .35s var(--ease);}
.home-process-step:hover{border-top-color:var(--blue-2);transform:translateY(-4px);}
@supports (animation-timeline: view()){
  .home-process-step::before{
    content:'';position:absolute;top:-2px;left:0;right:24px;height:2px;
    background:linear-gradient(90deg,var(--blue-2),var(--metal-3) 70%,transparent);
    transform-origin:left center;
    animation:nrRuleDraw auto both linear;
    animation-timeline:view();
    animation-range:entry 5% entry 60%;
    pointer-events:none;
  }
}
.home-area-list{border:1px solid transparent;border-radius:var(--radius-lg);
  background:
    linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
    var(--edge-grad) border-box;}
.home-area-list a{background:transparent;border-bottom:var(--rule);}
.home-area-list a:last-child{border-bottom:none;}
.home-area-list a:hover{background:var(--ghost-hover);}

/* --------------------------------- footer --------------------------------- */

.site-footer{position:relative;overflow:hidden;}
.site-footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(79,139,255,.6) 30%,rgba(150,170,195,.5) 70%,transparent);
}
.site-footer::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0%,rgba(47,111,237,.08),transparent 70%);
}
.footer-masthead,.footer-directory,.footer-bottom{position:relative;z-index:1;}

/* ------------------------------ error page -------------------------------- */

.error-page{position:relative;overflow:hidden;}
.error-page::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 54px,var(--seam-line) 54px 55px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.8),transparent 70%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.8),transparent 70%);
}
.error-page .container{position:relative;z-index:1;}
.error-links a{border-radius:14px;}
.error-links a:hover{
  background:
    linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
    var(--edge-grad-hover) border-box;
  border-color:transparent;
}

/* ------------------------------ thank you --------------------------------- */

.thanks-mark{box-shadow:0 0 0 10px rgba(30,190,93,.08),0 0 50px rgba(30,190,93,.25);}
.thanks-next{border-radius:var(--radius-lg);}

/* --------------------------- reading progress ----------------------------- */

.nr-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:400;pointer-events:none;
}
.nr-progress span{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,#2f6fed,#5e9bff,#8fb3d9);
}
@media (prefers-reduced-motion:reduce){.nr-progress{display:none;}}

/* ------------------------------ nav dropdown ------------------------------ */

.nav-dropdown{
  border:1px solid transparent;
  background:
    linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
    var(--edge-grad) border-box;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  border-radius:16px;
}
:root[data-theme="light"] .nav-dropdown{box-shadow:0 24px 56px rgba(20,40,80,.18);}

/* --------------------------- reveal enrichment ---------------------------- */

/* (v2 used to slow reveals to .8s — removed: slow reveals read as scroll lag.) */

/* ---------------------- V2.1 refinements ---------------------- */

/* Concentric survey-rings fill the plain hero's open right side */
.page-hero--plain::after,
.page-hero--split::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  right:-160px;top:50%;transform:translateY(-50%);
  width:min(560px,44vw);aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle at center,transparent 0 46px,var(--seam-line) 46px 47px);
  -webkit-mask-image:radial-gradient(circle at center,rgba(0,0,0,.9),transparent 72%);
  mask-image:radial-gradient(circle at center,rgba(0,0,0,.9),transparent 72%);
}
.page-hero--split::after{display:none;}
@media (max-width:900px){.page-hero--plain::after{display:none;}}

/* Editorial numbered lists: kill the dead space at wide viewports */
.numbered{max-width:980px;}

/* Timeline detail cards keep their spacing tidy inside the narrower rhythm */
.timeline{max-width:1060px;}
/* Header legibility: over flat (non-photo) heroes the header text follows the
   theme instead of being forced white, so light mode stays readable. */
body.has-flat-hero .site-header:not(.scrolled){color:var(--text);}

/* ------------------------------ language switch ---------------------------- */

/* A milled two-position selector rather than a dropdown: both languages stay
   visible, and the active one sits proud on a brushed-metal plate. Real links,
   so it works with JS disabled. */
.lang-switch{
  display:inline-flex;align-items:center;
  padding:2px;border-radius:100px;
  border:1px solid currentColor;
  opacity:.85;
  transition:opacity .25s;
}
.lang-switch:hover{opacity:1;}
.lang-opt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:28px;padding:0 9px;
  border-radius:100px;
  font:700 .72rem/1 var(--font-body);letter-spacing:.08em;
  color:currentColor;
  transition:color .25s,background .25s;
}
a.lang-opt:hover{background:rgba(127,127,127,.18);}
.lang-opt.is-active{
  background:var(--metal-grad);
  color:#0b0d10;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
:root[data-theme="light"] .lang-opt.is-active{color:#f5f7fa;}
.lang-opt:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px;}

/* Mobile menu: full-width, spelled out, above the inspection button. */
.lang-switch--block{display:flex;width:100%;margin-bottom:14px;}
.lang-switch--block .lang-opt{flex:1;height:40px;font-size:.82rem;letter-spacing:.04em;}

/* Below the desktop nav breakpoint the header keeps the toggle but drops the
   inspection button, so the two controls do not crowd the logo. */
@media (max-width:560px){
  .site-header .lang-switch{display:none;}
}

/* ------------------------ before/after job record -------------------------
   One photograph split by a draggable brushed-metal seam. The interaction is
   a native <input type="range"> stretched invisibly across the frame, so the
   browser supplies drag, touch, click-to-jump and arrow keys; JS only mirrors
   the value into --ba-x. The clip-path repaints on the compositor-friendly
   path and nothing here animates continuously. */

.ba{margin:0;}
.ba-frame{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--radius-lg);
  border:1px solid transparent;
  background:
    linear-gradient(var(--bg-3),var(--bg-3)) padding-box,
    var(--edge-grad) border-box;
}
.ba-frame .ba-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.ba-clip{
  position:absolute;inset:0;z-index:1;
  clip-path:inset(0 calc(100% - var(--ba-x,50%)) 0 0);
}

/* The seam itself: a metal line with a knurled knob, purely decorative —
   the range input underneath is what actually receives the pointer. */
.ba-seam{
  position:absolute;top:0;bottom:0;left:var(--ba-x,50%);width:0;z-index:2;
  pointer-events:none;
}
.ba-seam::before{
  content:'';position:absolute;top:0;bottom:0;left:-1px;width:2px;
  background:var(--metal-grad);
  box-shadow:0 0 0 1px rgba(4,6,9,.35),0 0 26px rgba(4,6,9,.5);
}
.ba-knob{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text);
  border:2px solid transparent;
  background:
    linear-gradient(var(--bg),var(--bg)) padding-box,
    var(--metal-grad) border-box;
  box-shadow:0 14px 34px rgba(4,6,9,.5);
  transition:transform .25s var(--ease);
}
.ba-knob svg{width:22px;height:22px;}
.ba-frame:active .ba-knob{transform:translate(-50%,-50%) scale(.94);}

/* The invisible control. Full-frame so the whole photograph is draggable. */
.ba-range{
  position:absolute;inset:0;z-index:3;width:100%;height:100%;
  margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;
  touch-action:pan-y;
}
.ba-range:focus-visible ~ .ba-seam .ba-knob{
  outline:2px solid var(--blue-2);outline-offset:4px;
}

/* Corner plates, set like the stamps on inspection photo documentation. */
.ba-plate{
  position:absolute;top:14px;z-index:2;pointer-events:none;
  display:grid;gap:1px;padding:9px 14px;border-radius:10px;
  background:rgba(7,9,12,.66);border:1px solid rgba(255,255,255,.16);
  color:#fff;font-family:var(--font-head);
  transition:opacity .3s;
}
.ba-plate b{font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;}
.ba-plate i{font-style:normal;font-size:.68rem;color:rgba(255,255,255,.66);letter-spacing:.03em;}
.ba-plate--before{left:14px;}
.ba-plate--after{right:14px;text-align:right;}
.ba-frame.is-min .ba-plate--before{opacity:0;}
.ba-frame.is-max .ba-plate--after{opacity:0;}

/* Ledger strip under the frame: the two states, written down. */
.ba-ledger{
  display:grid;grid-template-columns:1fr 1fr;margin-top:14px;
  border:1px solid transparent;border-radius:var(--radius);overflow:hidden;
  background:
    linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
    var(--edge-grad) border-box;
}
.ba-ledger > div{padding:18px 22px;}
.ba-ledger > div + div{border-left:var(--rule);}
.ba-ledger-tag{
  display:block;margin-bottom:6px;
  font:600 .7rem var(--font-head);letter-spacing:.22em;text-transform:uppercase;
  color:var(--metal-2);
}
.ba-ledger p{font-size:.93rem;line-height:1.55;color:var(--muted);}

@media (max-width:640px){
  .ba-knob{width:46px;height:46px;}
  .ba-plate{padding:7px 10px;border-radius:8px;}
  .ba-plate i{display:none;}
  .ba-ledger{grid-template-columns:1fr;}
  .ba-ledger > div + div{border-left:none;border-top:var(--rule);}
}

/* ------------------------------- the reel ---------------------------------
   One piece of footage treated as a field recording rather than an embed: a
   slate of what was recorded, a frame that opens out towards full width as it
   scrolls into view, and a ledger of stages underneath that lights up as
   playback reaches each one.

   All scroll motion is transform/opacity on a view() timeline — it runs off the
   main thread and there is no scroll listener anywhere in the section, so it
   cannot cost scroll frames. Browsers without scroll-driven animations get the
   resting state below, which is a composed section in its own right. */

.reel{
  /* overflow:clip, not hidden. hidden makes the section a scroll container, and
     view() binds to the nearest ancestor scroll container — which never scrolls,
     so every scroll-driven animation inside would freeze at a fixed progress.
     clip does the same clipping without creating one. */
  position:relative;overflow:clip;
  padding:var(--pad-section) 0 clamp(46px,6vw,80px);
  background:
    radial-gradient(64% 56% at 50% -8%,rgba(47,111,237,.16),transparent 72%),
    var(--bg-3);
  border-block:var(--rule);
}
/* The standing-seam motif that runs through the heroes, kept faint. */
.reel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 54px,var(--seam-line) 54px 55px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 62%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 62%);
}

.reel-head{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(24px,4vw,64px);align-items:end;
  margin-bottom:clamp(32px,4.4vw,58px);
}
.reel-head .section-intro{margin-bottom:0;max-width:56ch;}

/* Slate: the recording's own metadata, ruled like the spec sheets elsewhere. */
.reel-slate{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px clamp(18px,2.4vw,32px);}
.reel-slate > div{border-top:2px solid var(--border-2);padding:13px 0 0;}
.reel-slate dt{
  font:700 .63rem var(--font-body);letter-spacing:.3em;text-transform:uppercase;
  color:var(--metal-3);
}
.reel-slate dd{font-family:var(--font-head);font-size:.98rem;color:var(--text-2);margin-top:7px;}

.reel-film{position:relative;z-index:2;margin:0;}

/* The frame. Full width at rest, scaled in from the edges — scaling down never
   overflows, so the section can be full-bleed without a horizontal scrollbar. */
.reel-frame{
  position:relative;overflow:hidden;
  width:100%;aspect-ratio:16/9;max-height:min(78svh,760px);
  border-radius:26px;background:#05070a;
  transform:scale(.9);
  box-shadow:0 40px 90px rgba(0,0,0,.55);
}
:root[data-theme="light"] .reel-frame{box-shadow:0 30px 70px rgba(20,40,80,.22);}

.reel-video{width:100%;height:100%;object-fit:cover;display:block;}

/* Grade: vignette and a top wash, so the HUD and the timecode stay readable
   over any frame of the footage. */
.reel-grade{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(118% 88% at 50% 42%,transparent 38%,rgba(4,6,9,.74) 100%),
    linear-gradient(180deg,rgba(4,6,9,.34),transparent 26%);
}

/* Two opposite corner marks, set like the plates on the inspection photos. */
.reel-marks{position:absolute;inset:clamp(12px,1.6vw,20px);pointer-events:none;opacity:.85;}
.reel-marks::before,.reel-marks::after{
  content:'';position:absolute;width:34px;height:34px;
  border:1px solid rgba(255,255,255,.55);
}
.reel-marks::before{top:0;left:0;border-right:0;border-bottom:0;}
.reel-marks::after{bottom:0;right:0;border-left:0;border-top:0;}

@supports (animation-timeline: view()){
  .reel-frame{
    animation:nrReelOpen auto both linear;
    animation-timeline:view();
    animation-range:entry 14% cover 42%;
  }
  @keyframes nrReelOpen{from{transform:scale(.8);}to{transform:scale(1);}}

  /* The footage settles as the frame grows — the two scales run at slightly
     different ranges, which is what gives the opening its depth. */
  .reel-video{
    animation:nrReelSettle auto both linear;
    animation-timeline:view();
    animation-range:entry 14% cover 56%;
  }
  @keyframes nrReelSettle{from{transform:scale(1.16);}to{transform:scale(1);}}

  .reel-grade{
    animation:nrReelGrade auto both linear;
    animation-timeline:view();
    animation-range:entry 18% cover 48%;
  }
  @keyframes nrReelGrade{from{opacity:1;}to{opacity:.5;}}

  .reel-marks{
    animation:nrReelMarks auto both linear;
    animation-timeline:view();
    animation-range:entry 26% cover 46%;
  }
  @keyframes nrReelMarks{from{opacity:0;transform:scale(1.06);}to{opacity:.85;transform:none;}}
}

/* Playback HUD. Translucent, never blurred: backdrop-filter on a scrolling
   overlay re-samples the frame underneath it and shows up as scroll jank. */
.reel-hud{
  position:absolute;z-index:3;display:flex;align-items:center;gap:15px;
  left:clamp(16px,2.2vw,30px);bottom:clamp(18px,2.4vw,32px);
}
.reel-toggle{
  width:54px;height:54px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  color:#fff;background:rgba(8,11,15,.62);border:1px solid rgba(255,255,255,.42);
  transition:transform .3s var(--ease),background .3s,border-color .3s;
}
.reel-toggle:hover{background:rgba(8,11,15,.82);border-color:#fff;transform:scale(1.06);}
.reel-toggle svg{width:20px;height:20px;fill:currentColor;}
.reel-toggle .ico-pause,
.reel-toggle[aria-pressed="true"] .ico-play{display:none;}
.reel-toggle[aria-pressed="true"] .ico-pause{display:block;}

.reel-tc{
  font:700 .78rem/1 var(--font-head);letter-spacing:.2em;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.8);
}
.reel-tc i{font-style:normal;opacity:.6;}

/* Progress hairline along the bottom edge — scaleX only, no layout. */
.reel-bar{position:absolute;z-index:3;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.16);}
.reel-bar i{
  display:block;height:100%;transform-origin:left center;
  transform:scaleX(var(--reel-p,0));
  background:linear-gradient(90deg,var(--blue-2),#eef2f6);
}

/* Stage ledger. The rule over each row fills while that stage is on screen, so
   the written record and the footage are reading the same clock. */
.reel-ledger{margin-top:clamp(26px,3.4vw,46px);}
.reel-ledger ol{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,46px);}
.reel-ledger li{position:relative;border-top:2px solid var(--border-2);padding:15px 0 0;}
.reel-ledger li::after{
  content:'';position:absolute;top:-2px;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--blue-2),var(--metal-2));
  box-shadow:0 0 16px rgba(79,139,255,.7);
  transition:width .55s var(--ease);
}
.reel-ledger li.is-live::after{width:100%;}
.reel-at{
  display:block;line-height:1;font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.45rem,2.9vw,2rem);letter-spacing:-.03em;
  background:var(--metal-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.reel-ledger h3{font-size:1.02rem;margin:13px 0 8px;transition:color .35s;}
.reel-ledger li.is-live h3{color:var(--blue-2);}
.reel-ledger p{font-size:.9rem;line-height:1.62;color:var(--muted);}

.reel-cta{margin-top:clamp(26px,3.2vw,40px);position:relative;z-index:2;}

@media (max-width:900px){
  .reel-head{grid-template-columns:1fr;align-items:start;}
  .reel-ledger ol{grid-template-columns:1fr;gap:0;}
  .reel-ledger li{padding-bottom:18px;}
}
@media (max-width:640px){
  .reel-frame{aspect-ratio:4/3;border-radius:18px;}
  .reel-slate{gap:14px 18px;}
  .reel-toggle{width:46px;height:46px;}
  .reel-toggle svg{width:17px;height:17px;}
}

/* Reduced motion: the frame sits open, nothing scales, nothing plays (the
   script leaves the poster up). The global rule above collapses transition and
   animation durations, but a view() animation is progress-driven rather than
   time-driven, so it has to be switched off by name. */
@media (prefers-reduced-motion:reduce){
  .reel-frame,.reel-video,.reel-grade,.reel-marks{animation:none;}
  .reel-frame{transform:scale(.94);}
  .reel-video{transform:none;}
  .reel-grade{opacity:.5;}
  .reel-marks{opacity:.85;transform:none;}
}