/* ============================================================================
   EXTERA — components (v3, elite). Photography-led, editorial, cinematic.
   ========================================================================== */

/* ------------------------------------------------------------- Buttons */
.btn{--bg:var(--action);--fg:#fff;--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-body);font-weight:700;font-size:.9375rem;letter-spacing:.01em;line-height:1;
  padding:1rem 1.5rem;border-radius:var(--radius-md);background:var(--bg);color:var(--fg);
  border:1.5px solid var(--bd);cursor:pointer;white-space:nowrap;position:relative;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease)}
.btn:hover{color:var(--fg);transform:translateY(-1px)}
.btn--primary{--bg:var(--action);box-shadow:0 8px 20px -8px rgba(92,129,171,.7)}
.btn--primary:hover{--bg:var(--action-hover)} .btn--primary:active{--bg:var(--action-press);transform:none}
.btn--ink{--bg:var(--deepwater)} .btn--ink:hover{--bg:#22303F}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)} .btn--ghost:hover{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn--on-dark{--bg:transparent;--fg:#fff;--bd:rgba(201,218,234,.4)} .btn--on-dark:hover{--bg:#fff;--fg:var(--deepwater);--bd:#fff}
.btn--lg{padding:1.15rem 1.9rem;font-size:1rem} .btn--sm{padding:.7rem 1.1rem;font-size:.8125rem}
/* .btn is nowrap by design so short labels never break mid-phrase. At phone widths a long
   one had nowhere to go and ran off the side of the screen, so below 520px it wraps and
   centres instead. Overflowing the viewport is never the better failure. */
@media(max-width:520px){.btn{white-space:normal;line-height:1.25;text-align:center}}
.btn--block{display:flex;width:100%}
.btn__arrow{transition:transform var(--dur) var(--ease-out)} .btn:hover .btn__arrow{transform:translateX(4px)}

/* text link with animated underline */
.tlink{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--steel);
  font-size:.9375rem;background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--dur) var(--ease),color var(--dur-fast) var(--ease);padding-bottom:2px}
.tlink:hover{background-size:100% 1.5px;color:var(--steel)}
.tlink .btn__arrow{transition:transform var(--dur) var(--ease-out)} .tlink:hover .btn__arrow{transform:translateX(4px)}

/* ------------------------------------------------------------- Chips / tags */
.chip{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.8125rem;
  padding:.45rem .85rem;border-radius:var(--radius-pill);background:var(--mist);color:var(--ink);white-space:nowrap}
.chip--sky{background:var(--sky);color:var(--deepwater)}
.chip--dark{background:rgba(255,255,255,.07);color:var(--sky);border:1px solid rgba(201,218,234,.2)}
.chip--line{background:transparent;color:var(--text-secondary);border:1px solid var(--hairline)}
.chip__tick{color:var(--steel);font-weight:800} .chip--dark .chip__tick{color:var(--sky)}
.tag{font-weight:800;font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--deepwater);background:var(--sky);padding:.28rem .6rem;border-radius:var(--radius-sm)}
.swap-tag{font-weight:800;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--deepwater);background:var(--sky);padding:.12rem .42rem;border-radius:4px;vertical-align:middle}

/* ------------------------------------------------------------- Photography */
.ph{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--x-blue-800);isolation:isolate}
.ph img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(var(--photo-fade))}
.ph--wide{aspect-ratio:16/9} .ph--photo{aspect-ratio:4/3} .ph--tall{aspect-ratio:4/5}
.ph--portrait{aspect-ratio:3/4} .ph--square{aspect-ratio:1/1} .ph--pano{aspect-ratio:2.4/1}
.ph--frame{border:1px solid var(--hairline)}
/* cohesive cool grade so mixed photos feel on-brand (subtle).
   Uses ::before so it can co-exist with .ph__grain's ::after on the same figure. */
.ph--cool::before{content:"";position:absolute;inset:0;z-index:1;background:var(--deepwater);
  mix-blend-mode:color;opacity:.16;pointer-events:none}
/* scrim for text legibility over photos (deepwater gradient — brand-sanctioned) */
.ph--scrim::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,17,24,.05) 0%,rgba(11,17,24,.35) 55%,rgba(11,17,24,.85) 100%)}
.ph__cap{position:absolute;left:1rem;bottom:1rem;z-index:2;color:#fff;font-size:.8125rem;font-weight:600;
  display:flex;align-items:center;gap:.5rem;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.ph__zoom img{transition:transform 1.2s var(--ease-out)}
a:hover>.ph__zoom img,.ph__zoom:hover img{transform:scale(1.05)}
.ph__grain::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:170px;opacity:.06;mix-blend-mode:overlay;pointer-events:none;z-index:2}

/* ------------------------------------------------------------- Header / nav */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.topbar.is-hidden{transform:translateY(-100%);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.topbar{transition:none}}
.site-header{transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.site-header__in{display:flex;align-items:center;gap:var(--space-6);padding-block:1.1rem;border-bottom:1px solid transparent}
.brand{display:inline-flex;align-items:center;flex:none}
.brand img{height:18px;width:auto;transition:filter var(--dur) var(--ease)}
.nav{display:none;align-items:center;gap:2rem;margin-left:auto}
.nav a{color:rgba(255,255,255,.82);font-weight:600;font-size:.9375rem;position:relative;transition:color var(--dur-fast) var(--ease)}
.nav a:hover,.nav a[aria-current]{color:#fff}
.nav>a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--steel)}
/* Surfaces dropdown (desktop, hover/focus) */
.nav__group{position:relative;display:inline-flex;align-items:center}
.nav__group>a{display:inline-flex;align-items:center;gap:.4rem}
.nav__group>a::after{content:"";width:.42em;height:.42em;margin-top:-.18em;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);transition:transform var(--dur) var(--ease);opacity:.75}
.nav__group:hover>a::after,.nav__group:focus-within>a::after{transform:rotate(-135deg);margin-top:.06em;opacity:1}
.nav__panel{position:absolute;top:100%;left:50%;min-width:15rem;
  transform:translate(-50%,4px) scale(.98);transform-origin:top center;
  background:rgba(255,255,255,.98);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-deep);
  padding:.4rem;display:grid;gap:.1rem;z-index:130;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur)}
.nav__panel::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}/* hover bridge */
.nav__group:hover .nav__panel,.nav__group:focus-within .nav__panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,10px) scale(1);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s}
.nav__panel a{display:flex;align-items:center;gap:.55rem;padding:.6rem .7rem;border-radius:var(--radius-md);
  color:var(--ink)!important;font-size:.9rem;font-weight:600;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.nav__panel a::before{content:"";width:.5rem;height:.5rem;border-radius:2px;background:var(--sky);flex:none;
  transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.nav__panel a::after{content:none}/* neutralize the direct-nav underline bar inside the panel */
.nav__panel a:hover,.nav__panel a:focus-visible,.nav__panel a[aria-current]{background:var(--mist);color:var(--deepwater)!important}
.nav__panel a:hover::before,.nav__panel a:focus-visible::before,.nav__panel a[aria-current]::before{background:var(--steel);transform:scale(1.15)}
@media(prefers-reduced-motion:reduce){.nav__panel,.nav__group>a::after{transition-duration:1ms}}
.header-cta{display:none;align-items:center;gap:1rem}
.header-tel{color:#fff;font-weight:700;font-size:.9375rem;opacity:.9} .header-tel:hover{opacity:1;color:#fff}
/* solid state on scroll */
.site-header.is-solid{background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}
.site-header.is-solid .site-header__in{border-bottom-color:var(--hairline)}
.site-header.is-solid .brand img{filter:none}
.site-header .brand img{content:url("../img/wordmark-white.svg")}
.site-header.is-solid .brand img{content:url("../img/wordmark-navy.svg")}
.site-header.is-solid .nav a{color:var(--ink)} .site-header.is-solid .nav a:hover,.site-header.is-solid .nav a[aria-current]{color:var(--steel)}
.site-header.is-solid .header-tel{color:var(--deepwater)}
.nav-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;background:none;border:1.5px solid rgba(255,255,255,.3);
  color:#fff;border-radius:var(--radius-md);padding:.5rem .8rem;cursor:pointer;font-weight:700;font-size:.8125rem}
.site-header.is-solid .nav-toggle{border-color:var(--line);color:var(--ink)}
.nav-toggle__bars{display:grid;gap:3px} .nav-toggle__bars i{display:block;width:18px;height:2px;background:currentColor}
@media(min-width:1000px){.nav,.header-cta{display:flex}.nav-toggle{display:none}}

/* Mobile overlay menu */
.mobile-nav{position:fixed;inset:0;z-index:120;background:var(--deepwater);color:#fff;
  display:grid;align-content:start;gap:.25rem;padding:0 var(--shell-pad) var(--shell-pad);
  transform:translateY(-100%);visibility:hidden;transition:transform var(--dur) var(--ease),visibility 0s linear var(--dur);overflow:auto}
.mobile-nav[data-open="true"]{transform:none;visibility:visible;transition:transform var(--dur) var(--ease),visibility 0s}
@media(min-width:1000px){.mobile-nav{display:none}}
.mobile-nav a{font-family:var(--font-body);font-weight:600;font-size:1.125rem;letter-spacing:normal;
  color:#fff;padding:.85rem 0;border-bottom:1px solid var(--line-dark)}
.mobile-nav .btn{margin-top:var(--space-4)}
/* Top bar: brand left, close right, divider under — so the top edge reads as intentional */
.mobile-nav__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  position:sticky;top:0;z-index:1;background:var(--deepwater);
  margin:0 calc(var(--shell-pad) * -1) .5rem;padding:1.05rem var(--shell-pad);border-bottom:1px solid var(--line-dark)}
.mobile-nav__bar .brand{display:inline-flex;padding:0;border:none}
.mobile-nav__close{display:inline-flex;align-items:center;gap:.4rem;background:none;
  border:1.5px solid var(--line-dark);color:#fff;border-radius:var(--radius-md);
  padding:.5rem .8rem;font-family:var(--font-body);font-weight:700;font-size:.8125rem;cursor:pointer;line-height:1}
.mobile-nav__close span{font-size:1.15em}
/* Mobile: Surfaces accordion — tap the head to expand its three category links */
.mobile-nav__group{display:grid}
.mobile-nav__grouphead{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  font-family:var(--font-body);font-weight:600;font-size:1.125rem;color:#fff;text-align:left;
  background:none;border:none;border-bottom:1px solid var(--line-dark);padding:.85rem 0;cursor:pointer}
.mobile-nav__caret{flex:none;width:.55rem;height:.55rem;margin-bottom:.15rem;
  border-right:2px solid var(--text-on-dark-2);border-bottom:2px solid var(--text-on-dark-2);
  transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
.mobile-nav__group[data-open="true"] .mobile-nav__caret{transform:rotate(-135deg);margin-bottom:-.12rem}
/* collapsible region: grid-rows 0fr->1fr for a smooth height animation; visibility gates tab focus */
.mobile-nav__sub{display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows var(--dur) var(--ease),visibility 0s linear var(--dur)}
.mobile-nav__group[data-open="true"] .mobile-nav__sub{grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows var(--dur) var(--ease)}
.mobile-nav__sub-in{display:grid;overflow:hidden}
/* nested sub-links: deeper indent + no interior dividers so the three read as one group */
.mobile-nav__sub a{font-size:1rem;color:var(--text-on-dark-2);padding:.62rem 0 .62rem 1.65rem;position:relative;border-bottom:none}
.mobile-nav__sub a:last-child{border-bottom:1px solid var(--line-dark)}
.mobile-nav__sub a::before{content:"";position:absolute;left:.65rem;top:50%;width:.4rem;height:.4rem;
  margin-top:-.2rem;border-radius:2px;background:var(--steel)}
.mobile-nav__sub a[aria-current]{color:#fff}
.mobile-nav__sub a[aria-current]::before{background:var(--sky);transform:scale(1.3)}
/* Call note under the CTA — for people who'd rather talk it through */
.mobile-nav__callnote{margin-top:1.1rem;text-align:center;padding:0;border:none;
  font-family:var(--font-body);font-size:.95rem;color:var(--text-on-dark-2)}
.mobile-nav__callnote a{padding:0}
.mobile-nav__tel{font-family:var(--font-body)!important;font-size:1rem!important;text-transform:none!important;font-weight:700!important;color:var(--sky)!important;border:none!important}

/* ------------------------------------------------------------- Hero (cinematic) */
/* Fold: hero + trust bar fill the viewport as one dark unit — hero absorbs the slack
   so the light section below never peeks through at the bottom edge. */
.fold{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
/* The hero is the fold. Without this it sizes to its content and leaves a dead band. */
.fold>.phero{flex:1 0 auto;display:flex;align-items:center}
.fold>.phero>.phero__in{width:100%}
.hero{position:relative;flex:1 0 auto;min-height:clamp(600px,92vh,940px);display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;isolation:isolate;background:var(--deepwater)}
@media(min-width:1200px){.hero{align-items:center}}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,17,24,.55) 0%,rgba(11,17,24,.35) 30%,rgba(11,17,24,.72) 100%),
             linear-gradient(90deg,rgba(11,17,24,.72) 0%,rgba(11,17,24,.42) 60%,rgba(11,17,24,.55) 100%)}
.hero__grain{position:absolute;inset:0;z-index:1;background-image:var(--grain);background-size:190px;opacity:.06;mix-blend-mode:overlay;pointer-events:none}
.hero__in{position:relative;z-index:2;width:100%;padding-block:calc(var(--topbar-h,7rem) + clamp(1.75rem,3vw,3.25rem)) clamp(2.5rem,2rem + 3vw,4rem)}
.hero__grid{display:grid;gap:var(--space-10);align-items:end}
@media(min-width:1200px){.hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--space-16)}}
/* Inner-page hero (.phero) reuses .hero__grid; below the 2-col breakpoint pin the single column to
   the container so a long display heading can't grow the auto track past the viewport and clip. */
@media(max-width:1199px){.phero .hero__grid{grid-template-columns:minmax(0,1fr)}}
.hero__copy{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);justify-items:start;max-width:44rem;min-width:0}
.hero__form{width:100%;max-width:31rem}
.hero__title{color:#fff;font-size:var(--fs-d1)}
.hero__sub{font-size:var(--fs-lead);line-height:1.45;color:var(--text-on-dark-2);max-width:40ch}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5) var(--space-6)}
.hero__scroll{position:absolute;left:var(--shell-pad);bottom:1.5rem;z-index:2;font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-on-dark-3);display:none}
@media(min-width:1200px){.hero__scroll{display:block}}

/* ------------------------------------------------------------- Lead form */
.leadform{background:#fff;border-radius:var(--radius-2xl);box-shadow:var(--shadow-deep);
  padding:clamp(1.5rem,1.1rem + 1.5vw,2.25rem);display:grid;gap:var(--space-4);color:var(--text-body)}
/* Honeypot. Was an inline style on every lead form, which a new page cannot carry
   (layout-lint is zero-tolerance on new work). Same behaviour, now a class. */
.leadform__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.leadform__body{display:grid;gap:var(--space-5)}
.leadform__head{display:grid;gap:.35rem}
.leadform__title{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:1.35rem;
  text-transform:uppercase;letter-spacing:.01em;color:var(--text-heading);line-height:1.05}
.leadform__sub{font-size:.875rem;color:var(--text-secondary)}
.leadform__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:0;padding:0}
.leadform__steps li{list-style:none;display:grid;gap:.4rem;font-size:.5625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.leadform__steps li b{display:block;height:3px;border-radius:2px;background:var(--x-grey-200)}
.leadform__steps li[data-on]{color:var(--steel)} .leadform__steps li[data-on] b{background:var(--steel)}
.lead__step{display:grid;gap:var(--space-3)} .lead__step[hidden]{display:none}
.lead__actions{display:flex;gap:.6rem;align-items:center}.lead__actions .btn{flex:1}
.lead__back{flex:none;background:none;border:none;color:var(--text-secondary);font-weight:700;font-size:.875rem;cursor:pointer;padding:.5rem .25rem}.lead__back:hover{color:var(--ink)}
.lead__trust{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--text-secondary)}
.lead__trust span{display:inline-flex;align-items:center;gap:.4rem;background:var(--x-grey-50);border:1px solid var(--hairline);border-radius:var(--radius-pill);padding:.35rem .75rem}
.lead__trust b{color:var(--steel);font-weight:800}
.lead__call{font-size:.8125rem;font-weight:500;color:var(--text-secondary)}
.lead__call a{color:var(--steel);font-weight:700;text-decoration:none}.lead__call a:hover{text-decoration:underline}
.lead__fine{font-size:.6875rem;color:var(--text-muted);line-height:1.45}
/* --- Source credit. A trailing attribution line under a section's evidence,
       set quiet and spaced clear of the last caption. --- */
.srccredit{margin-top:var(--space-6);font-size:.6875rem;line-height:1.5;color:var(--text-muted);font-style:italic}
.leadform__done{display:none}
.leadform[data-done="true"] .leadform__body{display:none}
.leadform[data-done="true"] .leadform__done{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.55rem;height:100%;min-height:min(22rem,60vh);padding:var(--space-6) 0}
.leadform__done-seal{--sz:3.75rem;width:var(--sz);height:var(--sz);border-radius:50%;background:var(--confirm);display:grid;place-items:center;position:relative;margin-bottom:1.5rem;color:#fff}
.leadform__done-seal::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--confirm);animation:ld-ring 1.9s ease-out .55s infinite}
.leadform__done-seal svg{width:56%;height:56%;position:relative}
.leadform__done-seal .ld-tick{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:ld-draw .4s ease-out .35s forwards}
.leadform__done-title{font-family:var(--font-display);font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:var(--text-heading);font-size:1.35rem;line-height:1.05}
.leadform__done-sub{font-size:.9375rem;color:var(--text-secondary);max-width:22rem}
.leadform[data-done="true"] .leadform__done-seal{animation:ld-pop .5s cubic-bezier(.2,.9,.3,1.4) both}
.leadform[data-done="true"] .leadform__done-title{opacity:0;animation:ld-rise .5s ease-out .5s forwards}
.leadform[data-done="true"] .leadform__done-sub{opacity:0;animation:ld-rise .5s ease-out .65s forwards}
@keyframes ld-draw{to{stroke-dashoffset:0}}
@keyframes ld-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes ld-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes ld-ring{0%{transform:scale(1);opacity:.45}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.leadform__done-seal,.leadform__done-title,.leadform__done-sub,.leadform__done-seal::after,.leadform__done-seal .ld-tick{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}}

/* fields */
.field{display:grid;gap:.4rem}
.field>label,.field-label{font-size:.75rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--text-secondary)}
/* "(if known)" / "(if someone did)" qualifier inside a field label — opts out of the label's uppercase
   + bold so the hint reads as an aside, not part of the label. Replaces a repeated inline override. */
.field__opt{text-transform:none;font-weight:400;color:var(--text-muted)}
.field input,.field textarea,.field select{width:100%;font-size:1rem;color:var(--text-body);background:#fff;
  padding:.85rem .95rem;border-radius:var(--radius-md);border:1.5px solid var(--x-grey-300);outline:none;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--action);box-shadow:var(--focus-ring)}
.field textarea{resize:vertical;min-height:92px;line-height:1.55}
.field-row{display:grid;gap:var(--space-3)}@media(min-width:520px){.field-row--2{grid-template-columns:1fr 1fr}}
/* Self-hosted suburb autocomplete dropdown (see docs/lead-form.md) — no third party, matched to the form. */
.sac__menu{position:absolute;z-index:1200;margin:0;padding:.3rem;list-style:none;background:#fff;border:1.5px solid var(--x-grey-300);border-radius:var(--radius-md);box-shadow:var(--shadow-float);max-height:min(15rem,50vh);overflow:auto}
.sac__menu[hidden]{display:none}
.sac__item{padding:.6rem .55rem;border-radius:var(--radius-sm);font-size:.95rem;line-height:1.3;color:var(--text-body);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sac__item[data-active],.sac__item:hover{background:var(--x-blue-50)}
.checks{display:grid;gap:.5rem}
/* align-items:flex-start, not center: a label that wraps used to centre its box against two
   lines of text and read as broken. Labels are short enough now that nothing wraps, but this
   is the safety net for the next one somebody adds. */
.check{display:flex;align-items:flex-start;gap:.6rem;font-size:.9375rem;line-height:1.3;cursor:pointer}
.checks__note{margin-top:.6rem}
/* two-up check list — lets a form offer both service lines without a tall, scrolling step */
@media(min-width:420px){.checks--2{grid-template-columns:1fr 1fr;column-gap:var(--space-4)}}
/* loose stack — separates two stacked blocks far enough that a caption at the foot of the
   first can't read as a heading for the second (e.g. slider captions above a photo grid) */
.stack--loose{gap:var(--space-10)}
.check input{width:1.15rem;height:1.15rem;accent-color:var(--steel);flex:none;margin-top:.05rem}
.upload{border:1.5px dashed var(--line);border-radius:var(--radius-md);padding:1rem;text-align:center;font-size:.875rem;color:var(--text-muted);background:var(--x-grey-50)}
.form-fine{font-size:.75rem;color:var(--text-muted)}

/* ---- Trust bar: mobile stack -> tablet 2x2 -> desktop one full-width single-line row ---- */
.trustbar{background:var(--deepwater-2);color:#fff;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
/* content aligns to the page margin on mobile; the dark bar itself stays full-bleed */
.trustbar__in{display:grid;grid-template-columns:1fr;gap:0}
.trustbar__item{display:flex;align-items:center;gap:.6rem;padding:1rem 0;font-weight:600;font-size:.9375rem;
  border-bottom:1px solid var(--line-dark)}
.trustbar__item:last-child{border-bottom:none}
.trustbar__item .t{color:var(--sky);font-weight:800;flex:none}
.trustbar__item .small{color:var(--text-on-dark-3);font-weight:500;white-space:nowrap}
/* tablet: two per row */
@media(min-width:640px){
  .trustbar__in{grid-template-columns:1fr 1fr;column-gap:clamp(1.5rem,4vw,3rem)}
  .trustbar__item{padding:1.15rem 0}
  .trustbar__item:nth-last-child(-n+2){border-bottom:none}
}
/* desktop: one row spanning the width, every claim on a single line, evenly spread.
   Cap the spread (min-width 1440) so wide screens stay convincing, not floaty. */
@media(min-width:1090px){
  .trustbar__in{display:flex;justify-content:space-between;align-items:center;
    max-width:min(1440px,94vw);gap:clamp(1rem,2vw,3rem)}
  .trustbar__item{padding:1.35rem 0;border:none;flex:0 1 auto}
}

/* ------------------------------------------------------------- Section header */
.numhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--space-6);margin-bottom:var(--space-10)}
.numhead .sec-head{margin:0}

/* ------------------------------------------------------------- Cards */
.card{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:var(--space-6);
  display:grid;gap:var(--space-3);align-content:start;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.card--soft{background:var(--mist);border-color:transparent}
.card--pad-lg{padding:var(--space-8)}
/* dark standout card among light cards (e.g. the "new class" in the technology 3-way) */
.card--invert{background:var(--deepwater);border-color:transparent}
.card--invert .card__title{color:#fff}
.card--invert .card__body{color:var(--text-on-dark-2)}
.card--invert .card__kicker{color:var(--sky)}
/* big proof stat (technology "still beading at 3,000 scrubs") */
.techstat{display:grid;gap:.55rem;justify-items:start;padding:var(--space-8);border:1px solid var(--line-dark);border-radius:var(--radius-xl);background:rgba(255,255,255,.03)}
.techstat__n{font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:800;font-size:clamp(3.5rem, 2.4rem + 6vw, 6rem);line-height:.86;color:#fff}
.techstat__k{font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sky)}
.techstat__b{font-size:.9375rem;color:var(--text-on-dark-2)}
/* certification / partner logo strip — auto-scrolling marquee with edge fade */
.logostrip{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.logostrip__track{display:flex;width:max-content;align-items:center;animation:logostrip 42s linear infinite}
.logostrip__track img{height:clamp(48px,6.4vw,78px);width:auto;flex:none;display:block;opacity:.72}
@keyframes logostrip{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logostrip:hover .logostrip__track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.logostrip{-webkit-mask-image:none;mask-image:none}
  .logostrip__track{animation:none;width:100%;justify-content:center}
  .logostrip__track img:last-child{display:none}}
.card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-float);border-color:var(--hairline-2)}
.card__kicker{font-weight:800;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.card__title{font-size:var(--fs-card-title);font-weight:700;color:var(--text-heading)}
.card__body{font-size:.9375rem;line-height:1.55;color:var(--text-secondary)}
.card__n{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:1.05rem;color:var(--steel);
  width:2.6rem;height:2.6rem;border-radius:50%;border:1.5px solid var(--hairline);display:grid;place-items:center}
.band-dark .card{background:rgba(255,255,255,.03);border-color:var(--line-dark)}
.band-dark .card__title{color:#fff}.band-dark .card__body{color:var(--text-on-dark-2)}
.band-dark .card__n{border-color:var(--line-dark);color:var(--sky)}

/* ------------------------------------------------------------- Specialist steps */
.steps{display:grid;gap:var(--space-4);counter-reset:s}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);align-items:start;padding:var(--space-5) 0;border-top:1px solid var(--hairline)}
.step__n{counter-increment:s;font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:1rem;color:var(--steel);
  width:2.6rem;height:2.6rem;border-radius:50%;border:1.5px solid var(--steel);display:grid;place-items:center}
.step__n::before{content:"0" counter(s)}
.step__t{font-family:var(--font-display);font-stretch:125%;font-weight:700;font-size:1.35rem;text-transform:uppercase;letter-spacing:.02em;color:var(--text-heading)}
.step__b{margin-top:.35rem;font-size:.9375rem;line-height:1.55;color:var(--text-secondary);max-width:46ch}
.step__tag{display:inline-block;margin-top:.5rem;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
.band-dark .step{border-color:var(--line-dark)}.band-dark .step__t{color:#fff}.band-dark .step__b{color:var(--text-on-dark-2)}.band-dark .step__tag{color:var(--sky)}

/* ------------------------------------------------------------- The $16 rate (signature) */
.rate{position:relative;overflow:hidden;isolation:isolate;background:var(--deepwater-2);color:#fff}
.rate__bg{position:absolute;inset:0;z-index:0;opacity:.5}
.rate__bg img{width:100%;height:100%;object-fit:cover}
.rate::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,20,27,.42),rgba(14,20,27,.66));pointer-events:none}
.rate__in{position:relative;z-index:2;display:grid;gap:var(--space-6);justify-items:center;text-align:center}
.rate__fig{display:flex;align-items:baseline;justify-content:center;gap:.05em;line-height:.85;color:#fff;
  font-family:var(--font-display);font-stretch:125%;font-weight:800;letter-spacing:-.01em;font-size:var(--fs-price)}
.rate__fig .cur{font-size:.3em;align-self:flex-start;margin-top:.34em;color:var(--sky)}
.rate__fig .num{font-size:1em}
.rate__fig .unit{font-size:.2em;color:var(--sky);letter-spacing:.02em;margin-left:.06em}
.rate__allin{margin-top:.4rem;font-weight:800;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--deepwater);background:var(--sky);padding:.35rem .8rem;border-radius:var(--radius-pill)}
.rate__line{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:clamp(1.5rem,1.1rem + 2vw,2.3rem);
  text-transform:uppercase;color:#fff;letter-spacing:.005em;max-width:20ch}
.rate__min{font-size:.9375rem;color:var(--text-on-dark-2);max-width:52ch}
/* Two-price panel — one .rate section carrying BOTH service lines (cleaning + sealing)
   instead of a single hero number. Figures step down from --fs-price so two sit on one
   row without dwarfing the page. Stacks with a rule between on mobile, splits on desktop. */
.rate__duo{display:grid;grid-template-columns:minmax(0,1fr);gap:0;width:100%;max-width:58rem}
.rate__duo>*{min-width:0}
.rate__col{display:grid;gap:var(--space-2);justify-items:center;text-align:center;
  padding:var(--space-8) 0;border-top:1px solid var(--line-dark)}
.rate__col:first-child{border-top:none;padding-top:0}
.rate__k{font-weight:800;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sky)}
.rate__col .rate__fig{font-size:clamp(3.25rem,1.8rem + 7vw,6.5rem)}
.rate__fig .pre{font-size:.17em;align-self:flex-start;margin-top:.55em;margin-right:.3em;
  color:var(--sky);letter-spacing:.2em;text-transform:uppercase;font-weight:800}
.rate__note{font-size:.9375rem;color:var(--text-on-dark-2);max-width:32ch}
@media(min-width:760px){
  .rate__duo{grid-template-columns:1fr 1fr}
  .rate__col{border-top:none;border-left:1px solid var(--line-dark);padding:0 var(--space-8)}
  .rate__col:first-child{border-left:none;padding-top:0}
}
/* compact inline rate (home hero-adjacent / cards) */
.rate-inline{display:flex;align-items:baseline;gap:.35rem;font-family:var(--font-display);font-stretch:125%;font-weight:800;color:var(--text-heading)}
.rate-inline .n{font-size:2.4rem;line-height:1} .rate-inline .u{font-size:1rem;color:var(--steel)}
.on-dark .rate-inline,.band-dark .rate-inline{color:#fff}

/* size-band table (editorial) */
.bands{border-top:1px solid var(--hairline)}
.bands__row{display:grid;grid-template-columns:1fr auto 6rem;gap:var(--space-4);align-items:baseline;
  padding:1.15rem 0;border-bottom:1px solid var(--hairline)}
.bands__job{font-weight:700;color:var(--text-heading);font-size:1.0625rem}
.bands__area{color:var(--text-muted);font-size:.9375rem;font-variant-numeric:tabular-nums;text-align:right}
.bands__price{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:1.5rem;color:var(--deepwater);text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:560px){.bands__row{grid-template-columns:1fr auto}.bands__area{grid-column:1;text-align:left;padding-top:.2rem}}

/* ------------------------------------------------------------- Surfaces */
.surface{position:relative;display:block;border-radius:var(--radius-xl);overflow:hidden;color:#fff;isolation:isolate;min-height:clamp(340px,42vw,440px)}
.surface img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1.1s var(--ease-out)}
.surface:hover img{transform:scale(1.06)}
.surface img{filter:saturate(1) brightness(.92)}
.surface::before{content:"";position:absolute;inset:0;z-index:1;background:var(--deepwater);mix-blend-mode:color;opacity:.16;pointer-events:none}
.surface::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,17,24,.40) 0%,rgba(11,17,24,.24) 45%,rgba(11,17,24,.88) 100%)}
/* text block hugs the bottom; title + body reserve fixed rows so every card
   aligns on the same axes (tech, title, body, link) regardless of copy length */
.surface__in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:.45rem;padding:var(--space-6)}
.surface__tech{font-size:.6875rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);
  min-height:2.4em;display:flex;align-items:flex-end}
.surface__name{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:1.5rem;line-height:1.05;text-transform:uppercase;color:#fff;min-height:2.1em;display:flex;align-items:flex-start}
.surface__desc{font-size:.9375rem;line-height:1.5;color:var(--text-on-dark-2);max-width:34ch;min-height:4.5em;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.surface__link{margin-top:.5rem;font-weight:700;font-size:.875rem;color:#fff;display:flex;gap:.4rem;min-height:2.6em;align-items:flex-end}

/* ------------------------------------------------------------- Before / after */
.ba{position:relative;overflow:hidden;border-radius:var(--radius-lg);aspect-ratio:16/10;cursor:ew-resize;user-select:none;touch-action:none;border:1px solid var(--hairline)}
.ba__img{position:absolute;inset:0}.ba__img img{width:100%;height:100%;object-fit:cover;filter:contrast(var(--photo-fade))}
.ba__after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba__before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba__label{position:absolute;top:.7rem;z-index:3;font-weight:800;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(11,17,24,.6);padding:.28rem .6rem;border-radius:var(--radius-pill)}
.ba__label--b{left:.7rem}.ba__label--a{right:.7rem;background:var(--steel)}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;transform:translateX(-1px);z-index:4;box-shadow:0 0 0 1px rgba(11,17,24,.15)}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:var(--shadow-float);display:grid;place-items:center;color:var(--steel);font-weight:800}

/* ------------------------------------------------------------- Reviews */
/* Captioned photo. Reusable block so a page never needs a one-off wrapper. */
.figure{margin:var(--space-8) 0 0;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-xl);overflow:hidden}
.figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.figure figcaption{padding:var(--space-4) var(--space-6);font-size:.92rem;color:var(--text-muted)}
.review{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:var(--space-6);display:grid;gap:var(--space-4);grid-template-rows:auto 1fr auto}
.review__stars{color:var(--steel);letter-spacing:3px;font-size:.95rem}
.review__q{font-family:var(--font-display);font-stretch:125%;font-weight:700;font-size:1.15rem;line-height:1.25;text-transform:uppercase;letter-spacing:.01em;color:var(--text-heading)}
.review__q--body{font-family:var(--font-body);font-weight:400;font-size:1.0625rem;line-height:1.5;text-transform:none;color:var(--text-body)}
.review__by{font-size:.8125rem;font-weight:600;color:var(--text-muted)}
.review--swap{border-style:dashed;background:var(--x-grey-50)}

/* ------------------------------------------------------------- Endorsement lockup */
.endorse{display:inline-flex;align-items:center;gap:.8rem;line-height:1.1}
/* JUMBOGUARD certification mark: the bare elephant logo icon — one flat colour,
   no container, no checkmark. Painted via mask so it recolours per context. */
.endorse__badge{flex:none;width:2.75rem;height:2.25rem;
  background-color:var(--deepwater);
  -webkit-mask:url(../img/jumboguard-elephant.svg) center/contain no-repeat;
          mask:url(../img/jumboguard-elephant.svg) center/contain no-repeat}
.endorse__badge img{display:none}
.endorse__text{display:grid;gap:.14rem}
.endorse__brand{font-family:var(--font-body);font-weight:800;font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--deepwater)}
.endorse__label{font-weight:700;font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.endorse--on-dark .endorse__badge{background-color:#fff}
.endorse--on-dark .endorse__brand{color:#fff}.endorse--on-dark .endorse__label{color:var(--sky)}
.endorse--lg .endorse__badge{width:3.5rem;height:2.85rem}.endorse--lg .endorse__brand{font-size:1.05rem}.endorse--lg .endorse__label{font-size:.6875rem}
/* hero lockup: no pill container — just the bare mark + stacked text */
.endorse--badge{gap:.8rem}

/* ------------------------------------------------------------- Guarantee band + certificate */
.gband{position:relative;overflow:hidden;isolation:isolate}
.gband__ghost{position:absolute;left:-3%;bottom:-32%;z-index:0;width:min(60%,620px);opacity:.05;pointer-events:none}
.gband__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-10);align-items:center}
/* prevent long unbreakable display words (MineralProtect./GlassProtect.) from forcing
   the single grid track to max-content and clipping under .gband{overflow:hidden} */
.gband__in>*,.gband .stack,.gband .stack>*{min-width:0}
.gband .h2{font-size:clamp(1.35rem, 0.6rem + 3.7vw, 2.75rem)}
@media(min-width:920px){.gband__in{grid-template-columns:1.05fr .95fr;gap:var(--space-16)}}
/* Certificate — engraved, official-document treatment: guilloché rosette
   watermark, double gold rule frame, fleuron divider, gold authenticity seal.
   No brand marks on the document itself. Gold is the one sanctioned exception
   to the one-blue rule (see --gold* in tokens.css), scoped to this component. */
.cert{
  --cert-pad:clamp(1.55rem,1rem + 2.4vw,2.6rem);
  position:relative;isolation:isolate;overflow:hidden;
  color:var(--ink);
  background:
    radial-gradient(120% 85% at 50% -5%, rgba(183,139,58,.06), transparent 58%),
    linear-gradient(180deg,#fffdf8 0%, var(--paper) 42%);
  border:1px solid rgba(183,139,58,.30);border-radius:12px;
  box-shadow:var(--shadow-deep);padding:var(--cert-pad);
}
/* guilloché rosette watermark (behind the register) */
.cert::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:52%;width:min(118%,30rem);aspect-ratio:1;transform:translate(-50%,-50%);
  background:url(../img/cert-rosette.svg) center/contain no-repeat;opacity:.09}
/* double engraved gold frame */
.cert::after{content:"";position:absolute;z-index:3;pointer-events:none;
  inset:.6rem;border:1.5px solid var(--gold-line);border-radius:9px;
  box-shadow:inset 0 0 0 3px #fffdf8, inset 0 0 0 4px rgba(183,139,58,.55)}
.cert__frame{position:relative;z-index:2;padding:.6rem .5rem}
.cert__head{text-align:center;display:grid;justify-items:center;gap:.5rem;padding-bottom:.85rem}
.cert__kick{font-size:.625rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.cert__title{font-family:var(--font-display);font-stretch:125%;font-weight:800;
  font-size:clamp(1.4rem,1.05rem + 1.5vw,1.85rem);text-transform:uppercase;
  color:var(--deepwater);line-height:1.02;letter-spacing:.05em;margin-top:.05rem}
.cert__fleuron{width:min(15rem,72%);height:14px;margin:.15rem 0;
  background:url(../img/cert-fleuron.svg) center/contain no-repeat}
.cert__no{font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.cert__no b{color:var(--ink);font-weight:800;letter-spacing:.12em}
.cert__rule{height:0;border:0;border-top:1.5px solid var(--gold-line);
  box-shadow:0 3px 0 -2px rgba(183,139,58,.5);margin:0 0 .3rem}
.cert__rows{display:grid;gap:0}
.cert__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.62rem .15rem;border-bottom:1px solid var(--hairline-2)}
.cert__row:last-child{border-bottom:0}
.cert__k{font-size:.5625rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.cert__v{font-size:.875rem;font-weight:700;color:var(--text-heading);text-align:right}
.cert__foot{margin-top:1.05rem;display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem}
.cert__sign{display:grid;gap:.35rem;flex:1;min-width:0}
.cert__signline{height:1px;background:var(--ink);opacity:.35;width:min(15rem,100%)}
.cert__signlabel{font-size:.625rem;line-height:1.45;color:var(--text-muted);max-width:19rem}
.cert__seal{width:clamp(76px,19vw,96px);height:auto;flex:none;filter:drop-shadow(0 6px 14px rgba(11,17,24,.26))}
@media(max-width:520px){
  .cert__rows{gap:0}
  .cert__foot{flex-direction:column-reverse;align-items:center;text-align:center;gap:.9rem}
  .cert__signline{margin-inline:auto}
}

/* compact guarantee info card (band variant) */
.ginfo{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-radius:var(--radius-lg);padding:var(--space-6);display:grid;gap:var(--space-4)}

/* ------------------------------------------------------------- Compare / lists */
.checklist,.crosslist{display:grid;gap:.6rem;padding:0;margin:0}
.checklist li,.crosslist li{position:relative;padding-left:1.8rem;list-style:none;font-size:.9375rem;line-height:1.55;color:var(--text-body)}
.checklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--steel);font-weight:800}
.crosslist li{color:var(--text-secondary)}.crosslist li::before{content:"✕";position:absolute;left:0;top:0;color:var(--x-grey-400);font-weight:800}
.checklist li strong{color:var(--ink);font-weight:700}
.band-dark .checklist li,.band-dark .crosslist li,.band-abyss .checklist li,.band-abyss .crosslist li,.rate .checklist li{color:var(--text-on-dark)}
.band-dark .checklist li::before,.band-abyss .checklist li::before,.rate .checklist li::before{color:var(--sky)}
.band-dark .checklist li strong,.band-abyss .checklist li strong,.rate .checklist li strong{color:#fff}
.band-dark .crosslist li,.band-abyss .crosslist li{color:var(--text-on-dark-2)}
.band-dark .muted,.band-abyss .muted,.on-dark .muted{color:var(--text-on-dark-2)}
.compare{display:grid;gap:var(--space-4)}@media(min-width:760px){.compare{grid-template-columns:1fr 1fr;gap:var(--space-5)}}
.compare__col{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:var(--space-6);display:grid;gap:var(--space-4);align-content:start}
.compare__col--yes{border-top:3px solid var(--steel)}.compare__col--no{border-top:3px solid var(--x-grey-300)}
.compare__h{font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.compare__col--yes .compare__h{color:var(--steel)}

.numlist{display:grid;gap:var(--space-5);counter-reset:n}
.numlist__item{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:start}
.numlist__n{counter-increment:n;flex:none;width:2.4rem;height:2.4rem;border-radius:50%;border:1.5px solid var(--hairline);display:grid;place-items:center;
  font-family:var(--font-display);font-stretch:125%;font-weight:800;color:var(--steel)}
.numlist__n::before{content:"0" counter(n)}
.numlist__t{font-weight:700;font-size:var(--fs-card-title);color:var(--text-heading)}
.numlist__b{margin-top:.2rem;font-size:.9375rem;line-height:1.55;color:var(--text-secondary)}
.band-dark .numlist__n{border-color:var(--line-dark);color:var(--sky)}.band-dark .numlist__t{color:#fff}.band-dark .numlist__b{color:var(--text-on-dark-2)}

/* ------------------------------------------------------------- Gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
.gallery .ph{aspect-ratio:1/1}
@media(min-width:760px){.gallery{grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
  .gallery__feature{grid-column:span 2;grid-row:span 2;aspect-ratio:1/1}}

/* ------------------------------------------------------------- Specs (About) */
.specs{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden}
@media(min-width:620px){.specs{grid-template-columns:repeat(3,1fr)}}
.spec{background:#fff;padding:var(--space-6);display:grid;gap:.3rem}
.spec__k{font-size:.625rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.spec__v{font-size:var(--fs-card-title);font-weight:700;color:var(--text-heading)}

/* ------------------------------------------------------------- FAQ */
.faq{display:grid;border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:1.3rem .25rem;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-stretch:125%;font-weight:700;font-size:1.15rem;text-transform:uppercase;letter-spacing:.01em;color:var(--text-heading)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;color:var(--steel);font-weight:400;font-size:1.5rem;line-height:1;transition:transform var(--dur) var(--ease)}
.faq details[open] summary{color:var(--steel)}.faq details[open] summary::after{content:"–"}
.faq__a{padding:0 .25rem 1.4rem;font-size:.9375rem;line-height:1.6;color:var(--text-secondary);max-width:66ch}
.faq__a p+p{margin-top:.6rem}

/* ------------------------------------------------------------- Page hero (inner) */
.phero{position:relative;color:#fff;overflow:hidden;isolation:isolate;background:var(--deepwater);min-height:clamp(420px,54vh,560px);display:flex;align-items:flex-end}
.phero__bg{position:absolute;inset:0;z-index:0}.phero__bg img,.phero__bg video{width:100%;height:100%;object-fit:cover;display:block}
.phero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,17,24,.55),rgba(11,17,24,.35) 40%,rgba(11,17,24,.8)),linear-gradient(90deg,rgba(11,17,24,.72) 0%,rgba(11,17,24,.42) 60%,rgba(11,17,24,.55) 100%)}
/* cool colour-grade under the scrim so every full-bleed hero photo matches the inline .ph--cool family */
.hero__bg::before,.phero__bg::before{content:"";position:absolute;inset:0;z-index:0;background:var(--deepwater);mix-blend-mode:color;opacity:.16;pointer-events:none}
/* Darkens a bright hero photo so white type stays readable. Opt-in per page: the
   default .phero__bg tint is tuned for darker images. */
.phero--scrim .phero__bg::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,22,34,.78) 0%,rgba(11,22,34,.62) 45%,rgba(11,22,34,.80) 100%)}
.phero__grain{position:absolute;inset:0;z-index:1;background-image:var(--grain);background-size:190px;opacity:.06;mix-blend-mode:overlay;pointer-events:none}
.phero__in{position:relative;z-index:2;width:100%;min-width:0;padding-block:calc(var(--topbar-h,7rem) + clamp(1.5rem,2.5vw,2.75rem)) clamp(2.5rem,2rem + 3vw,3.5rem);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);justify-items:start}
.breadcrumb{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.8125rem;font-weight:600;color:var(--text-on-dark-2)}
.breadcrumb a{color:var(--sky)}.breadcrumb span{color:var(--text-on-dark-3)}

/* ------------------------------------------------------------- Offer banner */
.offer{background:var(--deepwater-2);color:#fff;font-size:.8125rem;position:relative;z-index:101}
/* Flash-free offer hide: inline <head> guard adds .offer-off from a cached kill-switch state */
html.offer-off [data-offer]{display:none}
.offer__in{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.55rem var(--shell-pad);text-align:center}
.offer .tag{flex:none}.offer__text{color:var(--text-on-dark-2)}.offer__text a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.offer__close{margin-left:.25rem;background:none;border:none;color:var(--text-on-dark-3);cursor:pointer;font-size:1.1rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-block:-11px}.offer__close:hover{color:#fff}
@media(max-width:560px){.offer .tag{display:none}}
/* when offer present, header sits below it via body offset handled inline */

/* ------------------------------------------------------------- Footer */
.site-footer{background:var(--deepwater-2);color:var(--text-on-dark-2);position:relative;overflow:hidden}
.site-footer__wm{position:absolute;left:50%;bottom:-1.2vw;transform:translateX(-50%);z-index:0;
  font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:15.5vw;line-height:.72;
  text-transform:uppercase;white-space:nowrap;pointer-events:none;letter-spacing:.04em;
  color:transparent;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  -webkit-background-clip:text;background-clip:text}
.site-footer__in{position:relative;z-index:2;display:grid;gap:var(--space-10);padding-block:var(--space-12) var(--space-10)}
.footer-top{display:grid;gap:var(--space-8)}
.footer-brand{display:grid;gap:var(--space-4);max-width:34ch}.footer-brand img{height:17px}
.footer-brand p{font-size:.9375rem;color:var(--text-on-dark-2)}
.footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6) var(--space-8)}
.footer-col h3{font-size:.625rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);margin-bottom:var(--space-4)}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}.footer-col a{color:var(--text-on-dark-2);font-size:.9375rem}.footer-col a:hover{color:#fff}
.footer-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--line-dark);font-size:.8125rem}
.footer-bar p{margin:0;color:var(--text-on-dark-2)}
.footer-bar a{color:var(--text-on-dark-2);text-decoration:underline;text-underline-offset:2px;margin-left:.6rem}
.footer-bar a:hover{color:#fff}
.footer-bar__note{color:var(--text-on-dark-3);line-height:1.5}
@media(min-width:860px){.site-footer__in{gap:var(--space-12);padding-block:var(--space-20) var(--space-10)}.footer-top{grid-template-columns:1fr 2.6fr;gap:var(--space-12)}.footer-cols{grid-template-columns:repeat(4,1fr);gap:var(--space-6)}.footer-bar p{white-space:nowrap}}

/* ------------------------------------------------------------- Mobile CTA (floating corner pills)
   No full-width strip: two quiet pills sit in the bottom corners so they reclaim the vertical space.
   Left = permanent, understated "Call". Right = "Get a quote", which stays tucked away while the
   header is on screen and slides in only once the header retracts (root gets .cta-armed). */
.mobilecta{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;pointer-events:none;
  justify-content:space-between;align-items:flex-end;gap:.75rem;
  padding:.75rem clamp(.75rem,4vw,1.1rem) calc(.75rem + env(safe-area-inset-bottom))}
/* Call — quiet glass pill, always present */
.mobilecta__call{pointer-events:auto;display:inline-flex;align-items:center;gap:.45rem;
  min-height:2.9rem;padding:0 1rem;border-radius:999px;font-weight:800;font-size:.9375rem;line-height:1;
  color:var(--text-heading);text-decoration:none;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--hairline);box-shadow:0 6px 20px -8px rgba(11,17,24,.28)}
.mobilecta__call .mobilecta__icon{color:var(--action)}
.mobilecta__call:active{transform:translateY(1px)}
/* Get a quote — steel pill, coupled to the header (revealed by .cta-armed on the root) */
.mobilecta__quote{display:inline-flex;align-items:center;gap:.35rem;
  min-height:2.9rem;padding:0 1.15rem;border-radius:999px;font-weight:800;font-size:.9375rem;line-height:1;
  color:var(--text-on-dark);text-decoration:none;background:var(--action);
  box-shadow:0 8px 24px -8px rgba(11,17,24,.4);
  opacity:0;visibility:hidden;transform:translateY(140%);pointer-events:none;
  transition:opacity .28s ease,transform .34s cubic-bezier(.22,1,.36,1),visibility 0s linear .34s}
.cta-armed .mobilecta__quote{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.mobilecta__quote:active{transform:translateY(1px)}
@media(max-width:999px){.mobilecta{display:flex}.site-footer{padding-bottom:3.4rem}}
@media(prefers-reduced-motion:reduce){
  .mobilecta__quote{transition:opacity .2s ease,visibility 0s linear .2s;transform:none}
  .cta-armed .mobilecta__quote{transition-delay:0s}
  .mobilecta__call:active,.mobilecta__quote:active{transform:none}}

/* utility */
.swap-note{font-size:.8125rem;color:var(--text-muted)}
.hairline-top{border-top:1px solid var(--hairline)}

/* ---------------------------------------- Durability proof chart (glass page) */
.repel{margin:0}
.repel__card{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-float);padding:clamp(1.1rem,.5rem + 2.4vw,2.25rem);max-width:920px;margin-inline:auto}
.repel__title{font-size:.6875rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:var(--space-4)}
.repel__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.repel__svg{display:block;width:100%;min-width:560px;height:auto}
.repel__svg .ax{stroke:var(--line)}
.repel__svg .axlab{fill:var(--text-muted);font-family:var(--font-body)}
.repel__svg .thr{stroke:var(--line);stroke-dasharray:5 5}
.repel__svg .thrlab{fill:var(--text-muted);font-family:var(--font-body);font-style:italic}
.repel__svg .lineus{stroke:var(--steel);fill:none}
.repel__svg .dotus{fill:var(--steel)}
.repel__svg .linethem{stroke:var(--x-grey-600);fill:none}
.repel__svg .dotthem{fill:var(--x-grey-600)}
.repel__svg .labus{fill:var(--deepwater);font-family:var(--font-body);font-weight:700}
.repel__svg .labthem{fill:var(--text-secondary);font-family:var(--font-body);font-weight:700}
.repel__hint{display:none}
.repel__legend{display:flex;flex-wrap:wrap;gap:.55rem 1.75rem;margin-top:var(--space-5);
  padding-top:var(--space-5);border-top:1px solid var(--hairline-2)}
.repel__key{display:inline-flex;align-items:center;gap:.6rem;font-size:.9375rem;font-weight:600;color:var(--text-body)}
.repel__key--them{color:var(--text-secondary)}
.repel__swatch{width:1.7rem;height:3px;border-radius:2px;flex:none}
.repel__key--us .repel__swatch{background:var(--steel)}
.repel__key--them .repel__swatch{background:var(--x-grey-600)}
.repel__cap{font-size:.8125rem;line-height:1.55;color:var(--text-muted);
  margin:var(--space-5) auto 0;max-width:78ch;text-align:center}
.repel__stats{display:grid;gap:var(--space-4);grid-template-columns:1fr;max-width:920px;margin:var(--space-8) auto 0}
.repel__stat{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);
  padding:var(--space-6);box-shadow:var(--shadow-card)}
.repel__statn{display:block;font-family:var(--font-display);font-stretch:var(--display-stretch);
  font-weight:800;font-size:clamp(2.3rem,1.7rem + 2.6vw,3.25rem);line-height:.9;color:var(--deepwater)}
.repel__statk{display:block;margin-top:var(--space-3);font-size:.875rem;line-height:1.5;color:var(--text-secondary)}
@media(min-width:760px){.repel__stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.repel__hint{display:block;font-size:.75rem;color:var(--text-muted);text-align:right;margin-top:var(--space-2)}}

/* Legal / long-form policy pages (privacy, terms) */
.legal{max-width:74ch}
.legal__meta{color:var(--text-muted);font-size:.875rem;margin-bottom:var(--space-8)}
.legal h2{font-size:1.375rem;line-height:1.2;margin-top:var(--space-10);margin-bottom:var(--space-3);color:var(--ink)}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.0625rem;margin-top:var(--space-6);margin-bottom:var(--space-2);color:var(--ink)}
.legal p{color:var(--text-secondary);line-height:1.7;margin-bottom:var(--space-4)}
.legal ul{margin:0 0 var(--space-4);padding-left:1.2rem;color:var(--text-secondary);line-height:1.7}
.legal li{margin-bottom:.4rem}
.legal li::marker{color:var(--steel)}
.legal a{color:var(--steel);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--ink)}
.legal strong{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------- Layout primitives
   Extracted from the patterns every page was re-declaring inline (sec-head bottom
   margin, wide two-column split, centred closing CTA, centred media). Added so the
   /glass/ pages could be built with zero inline layout — reuse these, don't re-nudge. */
.sec-head--spaced{margin-bottom:var(--space-8)}
.sec-head--spaced-lg{margin-bottom:var(--space-10)}
.grid--split{gap:var(--space-12);align-items:start}
.lead--center{text-align:center;margin-inline:auto}
.mediawide{max-width:1000px;margin-inline:auto}
.ctaband{display:grid;gap:var(--space-5);justify-items:center;text-align:center}
.ctaband .cluster{justify-content:center}
.ctaband .header-tel{color:#fff}

/* ------------------------------------------------------------- Restoration verdict
   The two-outcome triage (restore vs replace) that the restoration + scratch pages
   both turn on. Deliberately not a .card: the point is the pair reads as one verdict. */
.verdict{display:grid;gap:var(--space-5)}
@media(min-width:760px){.verdict{grid-template-columns:repeat(2,minmax(0,1fr))}}
.verdict__col{border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:var(--space-6);
  background:#fff;display:grid;gap:var(--space-3);align-content:start;border-top:3px solid var(--steel)}
.verdict__col--no{border-top-color:var(--x-grey-300);background:var(--surface-soft)}
.verdict__k{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.verdict__col--no .verdict__k{color:var(--text-muted)}
.verdict__t{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:1.5rem;
  line-height:1.05;text-transform:uppercase;color:var(--text-heading);
  min-height:2.1em;display:flex;align-items:flex-end}
.verdict__b{font-size:.9375rem;line-height:1.55;color:var(--text-secondary)}
.band-dark .verdict__col{background:rgba(255,255,255,.03);border-color:var(--line-dark)}
.band-dark .verdict__t{color:#fff}.band-dark .verdict__b{color:var(--text-on-dark-2)}

/* ------------------------------------------------------------- Process gallery
   Glass damage does not photograph honestly — a camera flattens what the eye reads
   instantly at a raking angle — so the restoration pages show the WORK rather than
   before/after pairs. auto-fit so the row stays right at 2, 3 or 4 photos. */
.procgrid{display:grid;gap:var(--space-6);grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.procgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.procgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1180px){.procgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.procfig{display:grid;gap:var(--space-3);margin:0;align-content:start}
/* align-content:start is load-bearing: .procfig stretches to the tallest cell in the
   row, and with auto rows the leftover space would inflate each photo box by a
   different amount, so the captions stopped sharing a baseline. */
.procfig__cap{font-size:.875rem;line-height:1.5;color:var(--text-secondary)}
.procfig__cap b{color:var(--text-heading);font-weight:700;display:block}
.band-dark .procfig__cap{color:var(--text-on-dark-2)}
.band-dark .procfig__cap b{color:#fff}

/* Photo-hero inherits on-dark treatment for eyebrow + lead (was inline on every page) */
.phero .eyebrow{color:var(--sky)}
.phero .lead{color:var(--text-on-dark-2)}
/* A dark hero has to recolour anything that defaults to dark ink, or it disappears.
   .btn--ghost sets --fg:var(--ink) and muted small print is grey on near-black. */
.phero .btn--ghost{--fg:#fff;--bd:rgba(255,255,255,.45)}
.phero .btn--ghost:hover{--bg:#fff;--fg:var(--ink);--bd:#fff}
.phero .muted,.phero .small{color:var(--text-on-dark-2)}


/* ------------------------------------------------------------- Article layout
   Extracted from site/learn/why-limestone-goes-white.html, which shipped with 40
   inline layout declarations and failed the new-page gate. These are the patterns
   the Learn articles reach for; use them instead of re-nudging per element. */
.sec-head--spaced-sm{margin-bottom:var(--space-6)}
.sec-head--spaced-xs{margin-bottom:var(--space-5)}
.cluster--center{justify-content:center}
.grid--even{gap:var(--space-6);align-items:stretch}
.grid--wide{gap:var(--space-12);align-items:center}

/* A centred aside under a figure or block: the "here's what that means" line. */
.note-center{text-align:center;margin-top:var(--space-4)}
.note-center--lg{text-align:center;margin-top:var(--space-8)}
/* The closing paragraph that sits under a section, centred and measure-limited. */
.outro{margin-top:var(--space-8);text-align:center;max-width:44rem;margin-inline:auto}

/* A card that is itself a link: title, body, then the arrow pinned underneath. */
.linkcard{display:grid;gap:.4rem;text-decoration:none}
.linkcard .tlink{margin-top:.3rem}

/* White bordered panel around an inline diagram. --w sets the drawing's own max
   width per instance (a custom property, so it stays out of the markup's style tier). */
.panel{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-xl);
  padding:clamp(1rem,3vw,2rem);margin:var(--space-10) 0 0}
.panel-fit{display:block;max-width:var(--w,680px);margin-inline:auto}

/* A page that opens on a plain band instead of a photo hero still has to clear the
   fixed .topbar. .hero__in and .phero__in bake that calc into themselves; this is the
   same clearance as a class, so any band can be the first thing on a page. */
.section--underbar{position:relative;
  padding-block:calc(var(--topbar-h,7rem) + clamp(1.5rem,2.5vw,2.75rem)) clamp(2.5rem,2rem + 3vw,3.5rem)}
/* Same rhythm .phero__in gives a hero: breadcrumb, heading block, then the buttons. */
.section--underbar>.shell{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);justify-items:start}

/* ------------------------------------------ Capability statement (the sheets)
   A leave-behind that has to do more than list services: a builder who has always
   been told damaged glazing is a replacement should put it down having changed
   their mind. So it is built as a document, not a page of copy — each .capsheet is
   ONE A4 page, stacked on screen as paper and broken to real pages in print. Very
   little running prose survives: the argument is carried by an image masthead, a
   before/after, tick-vs-cross panels and trigger cards, because that is what gets
   read on a site office desk. Edit the page, run `npm run capability:pdf`, and the
   download follows. One source of truth, no artwork file to keep in sync. */
.capsheets{display:grid;gap:clamp(1.5rem,3vw,2.5rem);max-width:60rem;margin-inline:auto}
.capsheet{position:relative;background:#fff;color:var(--text-body);border:1px solid var(--hairline);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-float);
  display:flex;flex-direction:column}

/* --- Masthead over a photograph (page 1) ---------------------------------- */
.capsheet__hero{position:relative;isolation:isolate;background:var(--deepwater);color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(19rem,30vw,24rem)}
.capsheet__heroimg{position:absolute;inset:0;z-index:0}
.capsheet__heroimg img{width:100%;height:100%;object-fit:cover;display:block}
.capsheet__heroimg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,17,24,.78) 0%,rgba(11,17,24,.52) 40%,rgba(11,17,24,.94) 100%)}
.capsheet__heroin{position:relative;z-index:2;padding:var(--cap-pad,clamp(1.4rem,3vw,2.1rem))}

/* --- Slim running header (pages 2+) --------------------------------------- */
.capsheet__bar{background:var(--deepwater);color:#fff;padding:var(--space-4) var(--cap-pad,clamp(1.4rem,3vw,2.1rem))}

/* Shared masthead furniture: wordmark left, what-this-is + page number right. */
.capsheet__brandrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4)}
.capsheet__hero .capsheet__brandrow{padding-bottom:var(--space-4);margin-bottom:var(--space-5);
  border-bottom:1px solid rgba(201,218,234,.28)}
.capsheet__brandrow img{height:17px;width:auto;display:block}
.capsheet__meta{display:flex;align-items:center;gap:.7rem;
  font-size:.625rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--sky)}
.capsheet__pg{color:rgba(233,240,248,.62)}
.capsheet__kick{font-size:.625rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.capsheet__title{margin-top:var(--space-3);font-family:var(--font-display);font-stretch:var(--display-stretch);
  font-weight:800;font-size:clamp(1.9rem,1.1rem + 3.1vw,3.1rem);line-height:1.02;
  letter-spacing:var(--tk-tight);text-transform:uppercase;color:#fff;max-width:17ch}
.capsheet__strap{margin-top:var(--space-4);font-size:1rem;line-height:1.5;color:var(--text-on-dark-2);max-width:60ch}
.capsheet__for{margin-top:var(--space-5);display:flex;flex-wrap:wrap;gap:.4rem}

/* --- The reframe: what a scratch is, and why they were told otherwise ------ */
.capwhy{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--hairline);
  border-bottom:1px solid var(--hairline)}
.capwhy__c{background:#fff;padding:var(--cap-pad,clamp(1.4rem,3vw,2.1rem))}
.capwhy__c--fill{background:var(--x-blue-50)}
.capwhy__k{font-size:.5625rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.capwhy__t{margin-top:.5rem;font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:800;
  font-size:1.15rem;line-height:1.12;letter-spacing:var(--tk-tight);text-transform:uppercase;color:var(--text-heading)}
.capwhy__b{margin-top:.55rem;font-size:.875rem;line-height:1.55;color:var(--text-secondary)}
@media(min-width:760px){.capwhy{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- Before / after. The single most persuasive object in the document, so it
       is given real size and captions that say what changed, not "before". --- */
.capba{padding:var(--cap-pad,clamp(1.4rem,3vw,2.1rem))}
.capba__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);margin-top:var(--space-4)}
.capba__f{margin:0;display:grid;gap:.6rem}
.capba__ph{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--mist);aspect-ratio:4/3}
.capba__ph img{width:100%;height:100%;object-fit:cover;display:block}
.capba__tag{position:absolute;top:.55rem;left:.55rem;z-index:2;padding:.25rem .6rem;border-radius:var(--radius-pill);
  font-size:.5625rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(11,17,24,.82);color:#fff}
.capba__f--to .capba__tag{background:var(--steel)}
.capba__cap{font-size:.8125rem;line-height:1.5;color:var(--text-secondary)}
.capba__cap b{display:block;color:var(--text-heading);font-weight:700}
@media(min-width:620px){.capba__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* A sheet with room to spare gives the evidence more of the page. */
.capba--tall .capba__ph{aspect-ratio:1/1}

/* --- Trigger cards: the moments a builder currently orders new glass. This is
       the block that earns the "keep them in mind" the whole document is for. -- */
.captrig{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--hairline);
  border-block:1px solid var(--hairline)}
.captrig__i{background:#fff;padding:var(--space-5) var(--cap-pad,clamp(1.4rem,3vw,2.1rem));display:grid;gap:.3rem;align-content:start}
.captrig__n{font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:800;
  font-size:.6875rem;color:var(--steel);font-variant-numeric:tabular-nums}
.captrig__t{font-size:.9375rem;font-weight:700;color:var(--text-heading);line-height:1.25}
.captrig__b{font-size:.8125rem;line-height:1.5;color:var(--text-secondary)}
@media(min-width:620px){.captrig{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.captrig{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* --- The commercial case, as two opposed panels rather than two paragraphs -- */
.capvs{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--hairline)}
.capvs__c{background:var(--x-grey-50);padding:var(--cap-pad,clamp(1.4rem,3vw,2.1rem))}
.capvs__c--yes{background:var(--deepwater);color:var(--text-on-dark)}
.capvs__k{font-size:.5625rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.capvs__c--yes .capvs__k{color:var(--sky)}
.capvs__t{margin-top:.4rem;font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:800;
  font-size:1.35rem;line-height:1.08;letter-spacing:var(--tk-tight);text-transform:uppercase;color:var(--text-heading)}
.capvs__c--yes .capvs__t{color:#fff}
.capvs__l{margin:var(--space-4) 0 0;padding:0;display:grid;gap:.5rem}
.capvs__l li{list-style:none;position:relative;padding-left:1.4rem;font-size:.8125rem;line-height:1.5;color:var(--text-secondary)}
.capvs__c--yes .capvs__l li{color:var(--text-on-dark-2)}
.capvs__l li::before{content:"✕";position:absolute;left:0;top:0;font-weight:800;color:var(--x-grey-400)}
.capvs__c--yes .capvs__l li::before{content:"✓";color:var(--sky)}
/* Honest-limits list: same rhythm as the comparison lists but neutral. These are
   caveats stated up front, not a loss column, and a row of crosses would read as
   the wrong argument entirely. */
.capvs__l--plain li::before{content:"\00B7";color:var(--steel);font-weight:800}
.capvs__note{margin-top:var(--space-4);font-size:.75rem;line-height:1.5;color:var(--text-muted)}
.capvs__c--yes .capvs__note{color:var(--text-on-dark-3)}
@media(min-width:760px){.capvs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- The height argument. On anything above ground level this is the whole
       commercial case, so it gets its own band under the comparison rather than
       a bullet inside it: taking a unit out opens the facade, restoring never
       does, and that is where the two numbers pull furthest apart. ----------- */
.capcall{background:var(--x-blue-800);color:var(--text-on-dark);border-top:1px solid var(--line-dark);
  padding:var(--cap-pad,clamp(1.4rem,3vw,2.1rem));display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
.capcall__k{font-size:.5625rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sky)}
.capcall__t{margin-top:.5rem;font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:800;
  font-size:1.5rem;line-height:1.06;letter-spacing:var(--tk-tight);text-transform:uppercase;color:#fff}
.capcall__b{font-size:.875rem;line-height:1.55;color:var(--text-on-dark-2)}
.capcall__b+.capcall__b{margin-top:.6rem}
.capcall__b em{font-style:normal;color:var(--sky)}
@media(min-width:760px){.capcall{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:var(--space-8);align-items:start}}

/* --- Capability cards, image-led ------------------------------------------ */
.capcards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
.capcard{display:grid;gap:.55rem;align-content:start}
.capcard__ph{border-radius:var(--radius-md);overflow:hidden;background:var(--mist);aspect-ratio:16/10}
.capcard__ph img{width:100%;height:100%;object-fit:cover;display:block}
.capcard__n{font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:800;
  font-size:.6875rem;color:var(--steel);font-variant-numeric:tabular-nums}
.capcard__t{font-size:1rem;font-weight:700;color:var(--text-heading);line-height:1.2}
.capcard__b{font-size:.8125rem;line-height:1.5;color:var(--text-secondary)}
@media(min-width:760px){.capcards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* --- The method, as four frames. Scratches are famously hard to photograph, so
       the proof on offer is the work itself, not a before/after of a scratch. ---- */
.capmethod{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-4)}
.capstep{margin:0;display:grid;gap:.5rem;align-content:start}
.capstep__ph{border-radius:var(--radius-md);overflow:hidden;background:var(--mist);aspect-ratio:3/4}
.capstep__ph img{width:100%;height:100%;object-fit:cover;display:block}
.capstep__n{font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:800;
  font-size:.6875rem;color:var(--steel);font-variant-numeric:tabular-nums}
.capstep__t{font-size:.875rem;font-weight:700;color:var(--text-heading);line-height:1.25}
.capstep__b{font-size:.8125rem;line-height:1.45;color:var(--text-secondary)}
@media(min-width:760px){.capmethod{grid-template-columns:repeat(4,minmax(0,1fr))}
  .capmethod--three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.capmethod--three .capstep__ph{aspect-ratio:3/2}

/* Every document photo is wrapped in <picture> so print can pull a light JPEG
   derivative (see scripts/build-print-images.mjs). <picture> is inline by default,
   which collapses the sized boxes above and reflows the whole document onto an
   extra page, so it is made a pass-through block wherever one is used. */
.capsheet__heroimg picture,.capba__ph picture,.capstep__ph picture,.capcard__ph picture{
  display:block;width:100%;height:100%}

/* --- Published day rates. The one object in these documents that carries a number,
       which means it is the one that gets forwarded to whoever holds the budget. Built
       to be read cold, by someone with no context and a spreadsheet open. --- */
.caprate{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  gap:1px;background:var(--hairline);border:1px solid var(--hairline);
  border-radius:var(--radius-md);overflow:hidden;margin-top:var(--space-4)}
.caprate__c{background:#fff;padding:.7rem .85rem;display:grid;gap:.1rem;align-content:center}
.caprate__c--h{background:var(--deepwater)}
.caprate__c--k{background:var(--x-grey-50)}
.caprate__c--best{background:var(--x-blue-50)}
.caprate__h{font-size:.5625rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.caprate__k{font-size:.8125rem;font-weight:700;color:var(--text-heading);line-height:1.25}
.caprate__ksub{font-size:.6875rem;color:var(--text-muted);line-height:1.3}
.caprate__v{font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:800;
  font-size:1.05rem;line-height:1.1;color:var(--text-heading);font-variant-numeric:tabular-nums}
.caprate__c--best .caprate__v{color:var(--accent-2,var(--steel))}
.caprate__hr{font-size:.6875rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
.caprate__note{margin-top:var(--space-3);font-size:.75rem;line-height:1.5;color:var(--text-muted)}

/* --- Generic document furniture ------------------------------------------- */
.capsheet__body{display:grid;grid-template-columns:minmax(0,1fr);flex:1 0 auto}
.capcol{padding:var(--cap-pad,clamp(1.4rem,3vw,2.1rem))}
.capcol+.capcol{border-top:1px solid var(--hairline)}
.capsec{padding:var(--cap-pad,clamp(1.4rem,3vw,2.1rem))}
.capsec--soft{background:var(--x-grey-50)}
.capsec--line{border-top:1px solid var(--hairline)}
@media(min-width:900px){
  .capsheet__body--split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .capsheet__body--split .capcol+.capcol{border-top:0;border-left:1px solid var(--hairline);background:var(--x-grey-50)}
}

.capblk+.capblk{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--hairline-2)}
.capblk__h{display:flex;align-items:center;gap:.6rem;margin-bottom:var(--space-4);
  font-size:.625rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.capblk__h::after{content:"";flex:1;height:1px;background:var(--hairline)}
.capsec--soft .capblk__h::after{background:var(--line)}
.capblk__note{margin-top:var(--space-4);font-size:.8125rem;line-height:1.5;color:var(--text-muted)}
.capblk__note b{color:var(--ink);font-weight:700}
.caplede{font-size:.9375rem;line-height:1.55;color:var(--text-secondary);max-width:68ch}

.captags{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0}
.captags li{list-style:none;font-size:.75rem;font-weight:600;color:var(--text-secondary);
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-pill);padding:.25rem .6rem}

.caprows{display:grid;gap:0;margin:0;padding:0}
.caprows>li{list-style:none;display:grid;grid-template-columns:minmax(5.5rem,auto) minmax(0,1fr);
  gap:var(--space-4);align-items:baseline;padding:.5rem 0;border-top:1px solid var(--hairline-2)}
.caprows>li:first-child{border-top:0;padding-top:0}
.caprow__k{font-size:.5625rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.caprow__v{font-size:.8125rem;font-weight:600;line-height:1.45;color:var(--text-heading)}

.capseq{display:grid;gap:.8rem;counter-reset:cq;margin:0;padding:0}
.capseq>li{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);align-items:baseline}
.capseq>li::before{counter-increment:cq;content:"0" counter(cq);font-family:var(--font-display);font-stretch:var(--display-stretch);
  font-weight:800;font-size:.625rem;color:var(--steel);font-variant-numeric:tabular-nums}
.capseq__t{font-size:.875rem;font-weight:700;color:var(--text-heading)}
.capseq__b{display:block;margin-top:.15rem;font-size:.8125rem;line-height:1.5;font-weight:400;color:var(--text-secondary)}

/* --- Contact bar: the last thing on every page and the reason it exists ---- */
.capsheet__foot{margin-top:auto;background:var(--deepwater);color:#fff;
  padding:var(--space-5) var(--cap-pad,clamp(1.4rem,3vw,2.1rem));
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4)}
.capsheet__footco{display:grid;gap:.2rem;min-width:0}
.capsheet__footk{font-size:.5625rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sky)}
.capsheet__footv{font-size:.8125rem;color:var(--text-on-dark-2)}
.capsheet__footc{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem}
.capsheet__footc a,.capsheet__footc span{font-size:.9375rem;font-weight:700;color:#fff;text-decoration:none}
.capsheet__footc a:hover{text-decoration:underline}

/* ------------------------------------ Capability statement shelf (the index)
   One footer link lands here and every statement hangs off it, so adding a third
   never puts a third link in the footer. The cover on each card is page 1 of the
   real document, written by scripts/build-capability-pdf.mjs, which means the
   shelf cannot advertise a cover the PDF has moved on from. */
.capindex{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);max-width:64rem;margin-inline:auto}
@media(min-width:760px){
  .capindex{grid-template-columns:repeat(2,minmax(0,1fr))}
  .capdoc__t{min-height:2.75rem}   /* two lines at 2-up */
}
.capdoc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.capdoc:hover{box-shadow:var(--shadow-float);transform:translateY(-2px)}
/* Covers are cropped to the masthead rather than letterboxed: the top third of an
   A4 sheet is the part that identifies it across a room. */
.capdoc__cover{display:block;background:var(--deepwater);border-bottom:1px solid var(--hairline)}
.capdoc__cover img{width:100%;display:block;aspect-ratio:16/11;object-fit:cover;object-position:top center}
.capdoc__in{padding:var(--space-6);display:flex;flex-direction:column;gap:.45rem;flex:1}
.capdoc__k{font-size:.5625rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.capdoc__t{font-family:var(--font-display);font-stretch:var(--display-stretch);font-weight:800;
  font-size:1.25rem;line-height:1.1;letter-spacing:var(--tk-tight);text-transform:uppercase;color:var(--text-heading)}
.capdoc__b{font-size:.875rem;line-height:1.55;color:var(--text-secondary)}
.capdoc__meta{margin-top:.2rem;font-size:.6875rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted)}
.capdoc__acts{margin-top:auto;padding-top:var(--space-5);border-top:1px solid var(--hairline-2);
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
/* Reserve the tallest title's height so the summary copy starts on the same line in every
   card; without it a two-line title and a three-line one push their bodies to different
   heights and the row reads ragged. How many lines that is depends on how wide the cards
   are, so it is set per breakpoint alongside the column count below. Stacked on mobile
   there is nothing to align against, so nothing is reserved. */
.capdoc__meta{padding-top:.15rem}

/* --- Screen-only furniture around the sheets ------------------------------ */
.capbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-4);max-width:60rem;margin:0 auto var(--space-8)}
.capbar__note{font-size:.8125rem;color:var(--text-secondary);max-width:44ch}

/* ------------------------------------------------------------------- Print
   Only the sheets survive. Chrome lays print out at the PAPER width (A4 ≈ 794px),
   which is BELOW the 760/900/980px screen breakpoints every grid here switches on,
   so each multi-column grid is re-declared. Forget one and the document silently
   reflows to a single column and spills extra pages — which build-capability-pdf.mjs
   fails on rather than shipping. --cap-pad drives every internal gutter, so paper
   margins are one number. */
@media print{
  @page{size:A4 portrait;margin:0}
  html,body{background:#fff}
  .skip,.topbar,.offer,.site-header,.mobile-nav,.mobilecta,.site-footer,
  .breadcrumb,.no-print{display:none!important}
  main,.section,.section--tight,.section--underbar{padding-block:0!important}
  .shell{max-width:none;padding-inline:0}
  .band-soft,.band-white,.band-dark,.band-abyss{background:#fff}
  .grain::after{display:none}

  .capsheets{gap:0;max-width:none}
  .capsheet{--cap-pad:6.2mm;
    max-width:none;border:0;border-radius:0;box-shadow:none;min-height:297mm;
    break-after:page;page-break-after:always;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .capsheet:last-child{break-after:auto;page-break-after:auto}
  .capsheet *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  .capsheet__hero{min-height:94mm}
  .capsheet__brandrow img{height:13px}
  .capsheet__meta,.capsheet__kick{font-size:6.2pt}
  .capsheet__hero .capsheet__brandrow{padding-bottom:3mm;margin-bottom:4mm}
  .capsheet__title{margin-top:2.4mm;font-size:26pt;max-width:18ch}
  .capsheet__strap{margin-top:3mm;font-size:9pt;line-height:1.42;max-width:none}
  .capsheet__for{margin-top:3.4mm;gap:1.4mm}
  .capsheet__for .chip{font-size:6.8pt;padding:.8mm 2.4mm}
  .capsheet__bar{padding:3.4mm 6.2mm}

  .capwhy{grid-template-columns:repeat(2,minmax(0,1fr))}
  .capwhy__k{font-size:5.6pt}
  .capwhy__t{margin-top:1.2mm;font-size:11.5pt}
  .capwhy__b{margin-top:1.6mm;font-size:8pt;line-height:1.45}

  .capba__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4mm;margin-top:3.4mm}
  .capba__ph{aspect-ratio:7/6}
  .capba--tall .capba__ph{aspect-ratio:1/1}
  .capba__f{gap:1.6mm}
  .capba__tag{font-size:5.6pt;padding:.7mm 2mm}
  .capba__cap{font-size:7.6pt;line-height:1.42}

  .capmethod{grid-template-columns:repeat(4,minmax(0,1fr));gap:4mm;margin-top:2.4mm}
  .capstep__ph{aspect-ratio:2/1}
  .capmethod--tall .capstep__ph{aspect-ratio:4/3}
  .capmethod--square .capstep__ph{aspect-ratio:6/5}
  .capmethod--three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .capmethod--three .capstep__ph{aspect-ratio:9/4}
  .capstep{gap:1.2mm}
  .capstep__n{font-size:6.2pt}
  .capstep__t{font-size:8pt}
  .capstep__b{font-size:7.2pt;line-height:1.38}

  .caprate{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);margin-top:3mm}
  .caprate__c{padding:2.2mm 2.6mm}
  .caprate__h{font-size:5.4pt}
  .caprate__k{font-size:7.4pt}
  .caprate__ksub{font-size:6.4pt}
  .caprate__v{font-size:10pt}
  .caprate__hr{font-size:6.4pt}
  .caprate__note{margin-top:2.4mm;font-size:6.6pt;line-height:1.4}

  .captrig{grid-template-columns:repeat(3,minmax(0,1fr))}
  .captrig__i{padding:2.7mm 4.6mm;gap:.5mm}
  .captrig__n{font-size:6.2pt}
  .captrig__t{font-size:8.4pt}
  .captrig__b{font-size:7.4pt;line-height:1.42}

  .capvs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .capcall{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:6mm;padding:4.4mm 6.2mm}
  .capcall__k{font-size:5.6pt}
  .capcall__t{margin-top:1.2mm;font-size:13pt}
  .capcall__b{font-size:7.8pt;line-height:1.45}
  .capcall__b+.capcall__b{margin-top:1.8mm}
  .capvs__k{font-size:5.6pt}
  .capvs__t{margin-top:1mm;font-size:12pt}
  .capvs__l{margin-top:2.6mm;gap:1.2mm}
  .capvs__l li{font-size:7.8pt;line-height:1.42;padding-left:4mm}
  .capvs__note{margin-top:3.4mm;font-size:6.8pt;line-height:1.42}

  .capcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:4.5mm}
  .capcard__ph{aspect-ratio:16/9}
  .capcards--tall .capcard__ph{aspect-ratio:11/8}
  .capcard{gap:1.5mm}
  .capcard__n{font-size:6.2pt}
  .capcard__t{font-size:9pt}
  .capcard__b{font-size:7.5pt;line-height:1.42}

  .capsheet__body--split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .capsheet__body--split .capcol+.capcol{border-top:0;border-left:1px solid var(--hairline);background:var(--x-grey-50)}
  .capblk+.capblk{margin-top:4.2mm;padding-top:3.6mm}
  .capblk__h{margin-bottom:3mm;font-size:5.8pt}
  .capblk__note{margin-top:3mm;font-size:7.2pt;line-height:1.42}
  .caplede{font-size:8.4pt;line-height:1.45}

  .captags{gap:1.2mm}
  .captags li{font-size:7pt;padding:.7mm 2.1mm}

  .caprows>li{padding:.9mm 0;gap:4mm}
  .caprow__k{font-size:5.6pt}
  .caprow__v{font-size:7.6pt;line-height:1.38}

  .capseq{gap:1.9mm}
  .capseq>li{gap:2.4mm}
  .capseq>li::before{font-size:6pt}
  .capseq__t{font-size:8pt}
  .capseq__b{font-size:7.5pt;line-height:1.42}

  .capsheet__foot{padding:4mm 6.2mm}
  .capsheet__footk{font-size:5.6pt}
  .capsheet__footv{font-size:7.2pt}
  .capsheet__footc a,.capsheet__footc span{font-size:8.6pt}
}

/* ------------------------------------------------------------- Rate card (commercial day rates) */
.ratecard{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--radius-lg);background:#fff}
.ratecard table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.ratecard th,.ratecard td{text-align:left;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--hairline)}
.ratecard thead th{background:var(--mist);color:var(--text-heading);font-size:.625rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--x-grey-300)}
.ratecard thead th:not(:first-child),.ratecard td{text-align:right}
.ratecard tbody th{font-weight:700;font-size:.9375rem;color:var(--text-heading)}
.ratecard tbody tr:last-child th,.ratecard tbody tr:last-child td{border-bottom:none}
.ratecard tbody tr.is-floor{background:var(--mist)}
.ratecard__amt{display:block;font-family:var(--font-display);font-stretch:125%;font-weight:800;
  font-size:1.15rem;line-height:1.15;color:var(--text-heading)}
.ratecard__per{display:block;font-size:.75rem;color:var(--text-muted)}
.ratecard caption{caption-side:bottom;text-align:left;padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--hairline);font-size:.75rem;color:var(--text-muted);line-height:1.5}
@media(max-width:540px){
  .ratecard th,.ratecard td{padding:var(--space-3)}
  .ratecard thead th{font-size:.5625rem;letter-spacing:.08em}
  .ratecard tbody th{font-size:.8125rem}
  .ratecard__amt{font-size:1rem}
  .ratecard__per{font-size:.6875rem}
  .ratecard caption{padding:var(--space-3)}
}