/* ==========================================================================
   Hydrock 2026 Premium – design system
   Direction: "Engineered Calm". Cinematic photography, confident Archivo display
   type, Hydrock navy with one accent, hairline ledgers instead of boxes.
   Layers: 1 fonts · 2 tokens · 3 base · 4 layout · 5 buttons · 6 header
           7 hero · 8 home sections · 9 inner pages · 10 blog · 11 footer
           12 floating UI · 13 motion · 14 legacy guards
   ========================================================================== */

/* 1. Fonts (self-hosted, variable, latin) ------------------------------- */
@font-face{font-family:"Archivo";src:url(assets/fonts/archivo-var.woff2) format("woff2");font-weight:500 800;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(assets/fonts/ibm-plex-sans-var.woff2) format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(assets/fonts/ibm-plex-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* 2. Tokens -------------------------------------------------------------- */
:root{
  --midnight:#061629; --navy:#0A2342; --navy-2:#0E2B50; --navy-3:#143563;
  --steel:#3E5F85; --steel-2:#7F97B4;
  --on-navy:#F2F5F9; --on-navy-2:#B7C4D4; --on-navy-3:#8EA0B6;
  --navy-line:rgba(255,255,255,.12); --navy-line-2:rgba(255,255,255,.22);
  --paper:#F7F6F3; --paper-2:#EFEDE8; --paper-3:#E8E5DF; --surface:#FFFFFF;
  --ink:#15202B; --ink-2:#36434F; --muted:#6B7580; --line:#E2DFD9; --line-2:#CFCBC3;
  --brand:#006FA6; --brand-ink:#005B88; --brand-soft:#E3EFF7; --signal:#13A1FF;
  --ok:#2E7D4F; --err:#B3261E;
  --f-display:"Archivo",ui-sans-serif,"Segoe UI",Arial,sans-serif;
  --f-body:"IBM Plex Sans",ui-sans-serif,"Segoe UI",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --t-display:clamp(2.9rem,1.5rem + 5.4vw,5.9rem);
  --t-h1:clamp(2.5rem,1.5rem + 3.6vw,4.4rem);
  --t-h2:clamp(2rem,1.35rem + 2.3vw,3.3rem);
  --t-h3:clamp(1.3rem,1.15rem + .55vw,1.7rem);
  --t-lead:clamp(1.1rem,1.02rem + .35vw,1.3rem);
  --wrap:84rem; --gut:clamp(20px,4vw,56px);
  --hdr:84px; --r:2px;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --sec:clamp(5rem,3rem + 7vw,9.5rem); --sec-s:clamp(3.5rem,2.5rem + 3vw,5.5rem);
}

/* 3. Base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 1rem)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-ink);text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
h1,h2,h3,h4{font-family:var(--f-display);font-stretch:100%;font-weight:600;color:var(--ink);line-height:1.06;margin:0;text-wrap:balance;letter-spacing:-.025em}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.015em;line-height:1.18}
p{margin:0;max-width:64ch}
.lead{font-size:var(--t-lead);color:var(--ink-2);line-height:1.6;font-weight:400}
.muted{color:var(--muted)}
.label{font:500 .72rem/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-ink);display:inline-flex;gap:.75rem;align-items:center}
.label::before{content:"";width:2rem;height:1px;background:currentColor;opacity:.7}
.label.bare::before{display:none}
.svc-code{font:500 .7rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
::selection{background:var(--navy);color:#fff}

/* 4. Layout -------------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.sec{padding-block:var(--sec);position:relative}
.sec.tight{padding-block:var(--sec-s)}
.sec.alt{background:var(--paper-2)}
.sec.white{background:var(--surface)}
.stack{display:flex;flex-direction:column;gap:1rem}
.stack-lg{display:flex;flex-direction:column;gap:2rem}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1.5rem clamp(2rem,5vw,6rem);align-items:end;margin-bottom:clamp(2.5rem,1.5rem + 3.5vw,4.5rem)}
.sec-head>*{min-width:0}
.sec-head h2{max-width:16ch}
.sec-head .lead{max-width:34rem}
@media (max-width:860px){.sec-head{grid-template-columns:minmax(0,1fr);align-items:start}}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,2rem + 4vw,7rem);align-items:center}
.split.top{align-items:start}
.split>*{min-width:0}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.grid{display:grid;gap:1.5rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid>*{min-width:0}
@media (max-width:1000px){.g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

/* photo plates */
.plate{position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden;background:var(--paper-2);border-radius:var(--r)}
.plate.tall{aspect-ratio:4/5}
.plate.wide{aspect-ratio:21/9}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(21,32,43,.08);pointer-events:none}
.plate.frame{padding:0;background:transparent}
.pimg{position:relative;margin:0;aspect-ratio:16/10;max-width:100%;overflow:hidden;background:var(--navy);border-radius:var(--r)}
.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pimg.wide{aspect-ratio:21/8}
.pimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(6,22,41,.45))}
img.graded,.plate img,.pimg img,.hero-bg img,.chero-img img,.band-img img,.svp-img img{filter:saturate(.92) contrast(1.04)}
@media (max-width:900px){.plate.tall{aspect-ratio:4/3}}

/* 5. Buttons & links ----------------------------------------------------- */
.btn{--b:var(--brand);--bt:#fff;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:54px;padding:.9rem 1.6rem;border-radius:var(--r);border:1px solid var(--b);background:var(--b);color:var(--bt);font:600 .95rem/1 var(--f-body);letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn svg{width:18px;height:18px;flex:none;transition:transform .3s var(--ease)}
.btn:hover{background:var(--brand-ink);border-color:var(--brand-ink);transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(0,111,166,.55)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:transparent;border-color:var(--ink);box-shadow:none}
.btn.light{--b:#fff;--bt:var(--navy)}
.btn.light:hover{background:#fff;border-color:#fff;box-shadow:0 10px 24px -8px rgba(255,255,255,.35)}
.on-navy .btn.ghost,.hero .btn.ghost,.chero .btn.ghost,.phero .btn.ghost,.cta .btn.ghost,.band .btn.ghost{color:#fff;border-color:var(--navy-line-2)}
.on-navy .btn.ghost:hover,.hero .btn.ghost:hover,.chero .btn.ghost:hover,.phero .btn.ghost:hover,.cta .btn.ghost:hover,.band .btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn.sm{min-height:44px;padding:.65rem 1.15rem;font-size:.88rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
.link-arrow{position:relative;font-weight:600;color:var(--brand-ink);text-decoration:none;display:inline-flex;gap:.5rem;align-items:center;padding-bottom:2px}
.link-arrow::after{content:"→";font-family:var(--f-body);transition:transform .3s var(--ease)}
.link-arrow::before{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.link-arrow:hover::after{transform:translateX(5px)}
.link-arrow:hover::before{transform:scaleX(1);transform-origin:left}
.on-navy .link-arrow,.hero .link-arrow{color:#9CD4FF}

/* 6. Header -------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:60;color:var(--on-navy);background:rgba(6,22,41,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--navy-line);transition:background-color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.hdr.tx{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.hdr.tx::before{content:"";position:absolute;inset:0 0 -40px 0;z-index:-1;background:linear-gradient(180deg,rgba(6,22,41,.55),rgba(6,22,41,0));pointer-events:none;transition:opacity .4s}
.hdr.tx.solid,body.menu-open .hdr.tx{position:fixed;background:rgba(6,22,41,.92);border-bottom-color:var(--navy-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 12px 32px -16px rgba(6,22,41,.6)}
.hdr.tx.solid::before{opacity:0}
.hdr-in{display:flex;align-items:center;gap:clamp(1rem,2vw,2.5rem);min-height:var(--hdr)}
.brand{display:flex;align-items:center;margin-right:auto;color:var(--on-navy);text-decoration:none;flex:none}
.brand img{width:172px;height:auto;display:block}
.nav{display:flex;align-items:center}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:.25rem;align-items:center}
.nav-list>li{position:relative;display:flex;align-items:center}
.nav-list>li>a{position:relative;color:var(--on-navy-2);text-decoration:none;font-size:.94rem;font-weight:500;padding:.7rem .85rem;letter-spacing:.005em;transition:color .25s}
.nav-list>li>a::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.3rem;height:1px;background:var(--signal);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav-list>li>a:hover,.nav-list>li>a[aria-current="page"],.nav-list>li.open>a{color:#fff}
.nav-list>li>a:hover::after,.nav-list>li>a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.dd-tgl{background:none;border:0;color:var(--on-navy-2);width:28px;height:36px;margin-left:-.6rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:2px}
.dd-tgl svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.dd.open .dd-tgl svg,.dd:hover .dd-tgl svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + .9rem);left:50%;transform:translate(-50%,8px);min-width:34rem;background:var(--midnight);border:1px solid var(--navy-line-2);border-radius:3px;padding:.75rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.25rem;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-1rem;height:1rem}
.dd:hover .dd-menu,.dd.open .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s}
.dd-menu a{display:grid;grid-template-columns:2.2rem 1fr;gap:.6rem;align-items:start;padding:.9rem .95rem;border-radius:2px;color:#fff;text-decoration:none;transition:background-color .25s}
.dd-menu a:hover{background:rgba(255,255,255,.06)}
.dd-menu .dd-n{font:500 .68rem/1.5 var(--f-mono);color:var(--steel-2);letter-spacing:.1em;padding-top:.15rem}
.dd-menu b{display:block;font:600 .98rem/1.25 var(--f-display);font-stretch:100%;letter-spacing:-.01em;color:#fff}
.dd-menu small{display:block;font:500 .66rem/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy-3);margin-top:.2rem}
.dd-menu .dd-all{grid-column:1/-1;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--navy-line);margin-top:.4rem;padding-top:.9rem;color:#9CD4FF;font-weight:600;font-size:.9rem}
.hdr-cta{display:flex;gap:1rem;align-items:center;flex:none}
.hdr-phone{color:var(--on-navy);text-decoration:none;font:500 .88rem var(--f-mono);letter-spacing:.02em;white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem;transition:color .25s}
.hdr-phone svg{width:15px;height:15px;color:var(--signal)}
.hdr-phone:hover{color:#fff}
.hdr .btn{min-height:46px;padding:.7rem 1.2rem;font-size:.88rem}
.menu-btn{display:none;background:none;border:1px solid var(--navy-line-2);color:var(--on-navy);border-radius:var(--r);width:48px;height:48px;cursor:pointer;align-items:center;justify-content:center;flex:none}
.menu-btn svg{width:22px;height:22px}
.menu-btn .x{display:none}
body.menu-open .menu-btn .bars{display:none}
body.menu-open .menu-btn .x{display:block}
.nav-foot{display:none}
@media (max-width:1180px){.hdr-phone{display:none}}
@media (max-width:1040px){
  .menu-btn{display:inline-flex}
  .nav{position:fixed;inset:0;z-index:55;background:var(--midnight);flex-direction:column;align-items:stretch;justify-content:space-between;padding:calc(var(--hdr) + 1rem) max(var(--gut),env(safe-area-inset-right,0px)) max(1.25rem,env(safe-area-inset-bottom,0px)) max(var(--gut),env(safe-area-inset-left,0px));overflow:auto;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s}
  .nav.open{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s}
  .nav::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 100% 0%,rgba(19,161,255,.12),transparent 70%);pointer-events:none}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;position:relative}
  .nav-list>li{flex-direction:column;align-items:stretch;border-bottom:1px solid var(--navy-line)}
  .nav-list>li>a{font:600 clamp(1.6rem,6vw,2.1rem)/1.1 var(--f-display);letter-spacing:-.02em;color:#fff;padding:1.05rem 0;display:flex;justify-content:space-between;align-items:center}
  .nav-list>li>a::after{display:none}
  .nav-list>li>a[aria-current="page"]{color:#9CD4FF}
  .dd-tgl{display:none}
  .dd-menu{position:static;transform:none;opacity:1;visibility:visible;min-width:0;background:none;border:0;box-shadow:none;padding:0 0 1rem;grid-template-columns:minmax(0,1fr);gap:0}
  .dd-menu a{padding:.6rem 0 .6rem .25rem}
  .dd-menu b{font-size:1.05rem}
  .dd-menu small{display:none}
  .dd-menu .dd-all{display:none}
  .nav-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem;margin-top:2rem;position:relative}
  .nav-foot .btn{min-height:52px}
  .nav-foot .btn.full{grid-column:1/-1}
  .nav .open-order{order:-1}
  .hdr.tx .hdr-cta .btn.ghost{display:none}
}
@media (max-width:520px){.hdr .hdr-cta .btn{display:none}.brand img{width:148px}:root{--hdr:72px}}
.nav-list>li>a[aria-current="page"]{color:#fff}
@media (min-width:1041px){.nav-list>li:not(.dd)>a[aria-current="page"]::after{transform:scaleX(1)}}

/* 7. Hero (home) --------------------------------------------------------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--midnight);color:var(--on-navy);min-height:min(100svh,980px);display:flex;flex-direction:column;justify-content:flex-end}
.hero-bg{position:absolute;inset:0;z-index:-3;background:var(--midnight)}
.hero-bg .hs{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.6s var(--ease)}
.hero-bg .hs.is-on{opacity:1}
.hero-bg .hs img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.06);transition:transform 12s linear}
.hero-bg .hs.is-on img{transform:scale(1)}
.hero-shade{position:absolute;inset:0;z-index:-2;pointer-events:none;background:
 linear-gradient(90deg,rgba(6,22,41,.92) 0%,rgba(6,22,41,.78) 28%,rgba(6,22,41,.38) 56%,rgba(6,22,41,.1) 78%,rgba(6,22,41,0) 100%),
 linear-gradient(0deg,rgba(6,22,41,.96) 0%,rgba(6,22,41,.55) 28%,rgba(6,22,41,0) 52%),
 linear-gradient(180deg,rgba(6,22,41,.5) 0%,rgba(6,22,41,0) 22%)}
.hero-shade::after{content:"";position:absolute;inset:0;background:var(--navy);mix-blend-mode:multiply;opacity:.18}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3rem;align-items:end;padding-top:calc(var(--hdr) + clamp(3rem,8vh,6rem));padding-bottom:clamp(2.5rem,5vh,4rem);width:100%}
.hero-copy{display:flex;flex-direction:column;gap:clamp(1.25rem,2.5vh,1.75rem);max-width:52rem;min-width:0}
.hero-copy .label{color:#D6EBFF}
.hero h1{font-size:var(--t-display);color:#fff;letter-spacing:-.035em;line-height:.98;max-width:13ch;text-shadow:0 2px 30px rgba(6,22,41,.35)}
.hero h1 em{font-style:normal;color:#9CD4FF}
.hero .lead{color:#DCE5EE;max-width:36rem;font-size:clamp(1.08rem,1rem + .4vw,1.3rem)}
.hero .btn-row{margin-top:.5rem}
.hero-index{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-left:1px solid var(--navy-line-2);min-width:17rem}
.hero-index a{display:grid;grid-template-columns:2.5rem 1fr auto;align-items:center;gap:.75rem;padding:.85rem 0 .85rem 1.25rem;color:#E6ECF2;text-decoration:none;font:600 .95rem/1.3 var(--f-display);letter-spacing:-.005em;transition:color .3s,padding-left .3s var(--ease);position:relative}
.hero-index a::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;background:var(--signal);transform:scaleY(0);transition:transform .4s var(--ease)}
.hero-index i{font:500 .66rem/1 var(--f-mono);font-style:normal;color:var(--steel-2);letter-spacing:.12em}
.hero-index svg{width:16px;height:16px;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s var(--ease)}
.hero-index a:hover{color:#fff;padding-left:1.6rem}
.hero-index a:hover::before{transform:scaleY(1)}
.hero-index a:hover svg{opacity:1;transform:none}
.hero-foot{border-top:1px solid var(--navy-line);background:rgba(6,22,41,.38);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero-foot .wrap{display:flex;align-items:stretch;gap:2rem;justify-content:space-between}
.hero-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,auto);gap:0 clamp(2rem,4vw,4.5rem)}
.hero-facts li{padding:1.2rem 0;display:flex;flex-direction:column;gap:.25rem;position:relative}
.hero-facts li+li::before{content:"";position:absolute;left:calc(clamp(2rem,4vw,4.5rem) / -2);top:1.2rem;bottom:1.2rem;width:1px;background:var(--navy-line)}
.hero-facts b{font:600 clamp(1.6rem,1.2rem + 1.2vw,2.3rem)/1 var(--f-display);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.hero-facts b.w{font-size:clamp(1.3rem,1rem + 1vw,1.9rem)}
.hero-facts span{font-size:.8rem;line-height:1.35;color:var(--on-navy-2);max-width:14rem}
.hs-ind{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:.6rem;font:500 .66rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-2);flex:none}
.hs-cap{position:relative;height:1em;min-width:13rem;text-align:right}
.hs-cap span{position:absolute;right:0;top:0;white-space:nowrap;opacity:0;transition:opacity .6s}
.hs-cap span.is-on{opacity:1}
.hs-bars{display:flex;gap:6px}
.hs-bars i{display:block;width:34px;height:2px;background:rgba(255,255,255,.22);position:relative;overflow:hidden}
.hs-bars i::after{content:"";position:absolute;inset:0;background:var(--signal);transform:scaleX(0);transform-origin:left}
.hs-bars i.is-on::after{animation:hsBar var(--hs-dur,9s) linear forwards}
.hs-bars i.done::after{transform:scaleX(1)}
@keyframes hsBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:1180px){.hero-index{display:none}.hero-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.hero-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem;width:100%}.hero-facts li:nth-child(3)::before{display:none}.hero-facts li:nth-child(n+3){border-top:1px solid var(--navy-line)}.hs-ind{display:none}}
@media (max-width:760px){
  .hero{min-height:0;justify-content:flex-start}
  .hero-bg{height:min(62svh,560px);inset:0 0 auto 0}
  .hero-bg .hs img{object-position:60% 35%}
  .hero-shade{background:linear-gradient(180deg,rgba(6,22,41,.55) 0%,rgba(6,22,41,.1) 18%,rgba(6,22,41,.15) 48%,rgba(6,22,41,.9) 72%,var(--midnight) 86%);height:min(62svh,560px);bottom:auto}
  .hero-shade::after{display:none}
  .hero-grid{padding-top:calc(min(62svh,560px) - 9rem);padding-bottom:2.25rem;gap:0}
  .hero-copy{gap:1.1rem}
  .hero h1{font-size:clamp(2.5rem,11vw,3.4rem);max-width:none}
  .hero .lead{font-size:1.05rem}
  .hero .btn-row .btn{flex:1 1 auto}
  .hero-foot{background:var(--midnight);-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero-facts{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scrollbar-width:none}
  .hero-facts::-webkit-scrollbar{display:none}
  .hero-facts li{flex:0 0 auto;min-width:11.5rem;padding:1.1rem 1.25rem 1.1rem 0;margin-right:1.25rem;border-top:0!important;scroll-snap-align:start}
  .hero-facts li::before{display:none}
  .hero-facts li+li{border-left:1px solid var(--navy-line);padding-left:1.25rem}
  .hero-facts span{font-size:.78rem}
}
@media (max-width:380px){.hero h1{font-size:2.3rem}}
@media (orientation:landscape) and (max-height:520px) and (max-width:1100px){.hero{min-height:0}.hero-grid{padding-top:calc(var(--hdr) + 1.5rem)}.hero h1{font-size:2.4rem}}

/* authorities strip */
.auth{background:var(--surface);border-bottom:1px solid var(--line)}
.auth .wrap{display:flex;gap:1rem 3rem;align-items:center;flex-wrap:wrap;padding-block:1.35rem}
.auth p{font:500 .68rem/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);flex:none}
.auth ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 0}
.auth li{font:600 .92rem/1 var(--f-display);letter-spacing:.01em;color:var(--navy);padding:.25rem 1.1rem;position:relative}
.auth li+li::before{content:"";position:absolute;left:0;top:50%;height:12px;width:1px;background:var(--line-2);transform:translateY(-50%)}
.auth li:first-child{padding-left:0}

/* 8. Home sections -------------------------------------------------------- */
/* about */
.home-about .plate{box-shadow:0 40px 80px -40px rgba(10,35,66,.35)}
.home-about .plate.tall{margin-left:auto;width:min(100%,30rem)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.checks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:.85rem;align-items:start;color:var(--ink-2);font-size:1rem;line-height:1.5}
.checks li::before{content:"";width:12px;height:12px;margin-top:.45rem;border:1px solid var(--brand);background:linear-gradient(var(--brand),var(--brand)) center/6px 6px no-repeat;justify-self:center}
.checks b{color:var(--ink);font-weight:600}
.checks.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.85rem 2rem}
.checks.rule li{padding:.9rem 0;border-bottom:1px solid var(--line);margin:0}
.checks.rule{gap:0;border-top:1px solid var(--line)}
.checks.rule li::before{margin-top:.5rem}
@media (max-width:640px){.checks.two{grid-template-columns:minmax(0,1fr)}}
.on-navy .checks li{color:var(--on-navy-2)}
.on-navy .checks li::before{border-color:#9CD4FF;background-image:linear-gradient(#9CD4FF,#9CD4FF)}
.on-navy .checks b{color:#fff}

/* service panels: four elevations */
.svc-panels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--line)}
.svc-panels.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.svp{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(560px,46vw,720px);background:var(--navy);color:#fff;text-decoration:none;isolation:isolate;overflow:hidden}
.svc-panels.three .svp{min-height:clamp(440px,34vw,560px)}
.svp-img{position:absolute;inset:0;margin:0;z-index:-2}
.svp-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.2s var(--ease),filter .8s}
.svp::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,22,41,.25) 0%,rgba(6,22,41,.1) 30%,rgba(6,22,41,.72) 58%,rgba(6,22,41,.96) 100%);transition:opacity .6s}
.svp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.svp-top{position:absolute;top:1.5rem;left:1.5rem;right:1.5rem;display:flex;justify-content:space-between;align-items:center;font:500 .68rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#E6ECF2}
.svp-n{font:600 1.1rem/1 var(--f-display);letter-spacing:-.02em;color:#fff}
.svp-body{position:relative;padding:1.5rem clamp(1.25rem,1.6vw,2rem) clamp(1.5rem,2vw,2.25rem);display:flex;flex-direction:column;gap:.75rem}
.svp h3{color:#fff;font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem);letter-spacing:-.02em;line-height:1.1;max-width:12ch}
.svp p{color:#D5DEE8;font-size:.94rem;line-height:1.55;max-width:30ch}
.svp ul{list-style:none;margin:.25rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--navy-line-2);display:grid;gap:.4rem}
.svp li{font-size:.86rem;color:#E6ECF2;display:flex;gap:.6rem;align-items:center}
.svp li::before{content:"";width:5px;height:5px;background:var(--signal);flex:none}
.svp .link-arrow{color:#fff;margin-top:.35rem;font-size:.92rem}
.svp:hover .svp-img img{transform:scale(1.05)}
.svp:hover::after{transform:scaleX(1)}
.svp:hover .link-arrow{color:#9CD4FF}
@media (max-width:1100px){.svc-panels{grid-template-columns:repeat(2,minmax(0,1fr))}.svp{min-height:clamp(480px,56vw,620px)}}
@media (max-width:900px){.svc-panels.three{grid-template-columns:minmax(0,1fr)}.svc-panels.three .svp{min-height:0}}
@media (max-width:640px){
  .svc-panels{grid-template-columns:minmax(0,1fr)}
  .svp,.svc-panels.three .svp{min-height:0;justify-content:flex-start}
  .svp-img{position:relative;aspect-ratio:16/10;inset:auto;z-index:0}
  .svp-img img{position:absolute;inset:0}
  .svp::before{background:linear-gradient(180deg,transparent 0%,transparent 40%,var(--navy) 62%)}
  .svp-top{top:1.1rem;left:1.1rem;right:1.1rem;z-index:1}
  .svp-body{margin-top:-4.5rem;padding:1rem 1.25rem 1.6rem;background:linear-gradient(180deg,transparent,var(--navy) 3.5rem)}
  .svp h3{max-width:none}
  .svp p{max-width:none}
}

/* expertise ledger */
.xp{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,1rem + 5vw,7rem);align-items:start}
.xp-side{display:flex;flex-direction:column;gap:1rem;position:sticky;top:calc(var(--hdr) + 2rem)}
.xp-img{aspect-ratio:4/5;margin-top:1rem;border-radius:var(--r)}
.xp-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.xp-list a{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;gap:1.25rem;align-items:center;padding:1.3rem .5rem 1.3rem 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:padding-left .35s var(--ease),background-color .35s}
.xp-n{font:500 .74rem/1 var(--f-mono);color:var(--muted);letter-spacing:.1em}
.xp-t{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.xp-t b{font:600 1.2rem/1.2 var(--f-display);letter-spacing:-.015em;transition:color .3s}
.xp-t span{color:var(--muted);font-size:.95rem;line-height:1.5}
.xp-a{color:var(--brand);width:22px;height:22px;transition:transform .35s var(--ease)}
.xp-list a:hover{padding-left:.9rem;background:linear-gradient(90deg,var(--surface),transparent)}
.xp-list a:hover .xp-a{transform:translateX(5px)}
.xp-list a:hover b{color:var(--brand-ink)}
.xp-list a:hover .xp-n{color:var(--brand)}
@media (max-width:900px){.xp{grid-template-columns:minmax(0,1fr)}.xp-side{position:static}.xp-img{aspect-ratio:16/9}}
@media (max-width:480px){.xp-list a{grid-template-columns:2.4rem minmax(0,1fr);gap:.9rem}.xp-a{display:none}}

/* full-bleed statement band */
.band{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--midnight);min-height:clamp(520px,66vh,760px);display:flex;align-items:center}
.band-img{position:absolute;inset:0;margin:0;z-index:-2}
.band-img img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,22,41,.94) 0%,rgba(6,22,41,.8) 36%,rgba(6,22,41,.3) 68%,rgba(6,22,41,.1) 100%),linear-gradient(0deg,rgba(6,22,41,.5),transparent 40%)}
.band .wrap{width:100%;padding-block:clamp(4rem,2rem + 6vw,8rem)}
.band-copy{max-width:40rem;display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start}
.band .label{color:#9CD4FF}
.band h2{color:#fff;font-size:clamp(2.2rem,1.4rem + 3vw,4rem);letter-spacing:-.03em;line-height:1.02}
.band p{color:#D5DEE8;font-size:1.12rem;line-height:1.6;max-width:32rem}
@media (max-width:760px){.band{align-items:flex-end;min-height:600px}.band::before{background:linear-gradient(180deg,rgba(6,22,41,.25) 0%,rgba(6,22,41,.6) 36%,rgba(6,22,41,.95) 64%,var(--midnight) 100%)}}

/* why: hairline grid */
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2);border-left:1px solid var(--line-2)}
.why>div{padding:clamp(1.6rem,1.2rem + 1.2vw,2.5rem) clamp(1.4rem,1rem + 1vw,2rem) clamp(1.8rem,1.4rem + 1.2vw,2.75rem);border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:.9rem;min-width:0;position:relative;background:transparent;transition:background-color .4s}
.why>div::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.why>div:hover{background:var(--surface)}
.why>div:hover::before{transform:scaleX(1)}
.why svg{width:30px;height:30px;color:var(--brand);stroke-width:1.4;margin-bottom:.4rem}
.why h3{font-size:1.3rem}
.why p{font-size:.98rem;color:var(--ink-2);line-height:1.6}
.why.why2{grid-template-columns:repeat(2,minmax(0,1fr))}
.why.why2>div{counter-increment:why}
.why.why2>div h3::before{content:"0" counter(why);display:block;font:500 .7rem/1 var(--f-mono);letter-spacing:.14em;color:var(--brand);margin-bottom:.8rem}
.why.why2{counter-reset:why}
@media (max-width:900px){.why{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:600px){.why,.why.why2{grid-template-columns:minmax(0,1fr)}}

/* navy band sections */
.on-navy{background:var(--navy);color:var(--on-navy)}
.on-navy.deep{background:var(--midnight)}
.on-navy h2,.on-navy h3{color:#fff}
.on-navy .lead,.on-navy p{color:var(--on-navy-2)}
.on-navy .label{color:#9CD4FF}
.on-navy .sec-head .lead{color:#C5D1DD}

/* process: horizontal timeline */
.proc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 clamp(1.25rem,2vw,2.5rem);counter-reset:p;position:relative}
.proc::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--navy-line-2)}
.proc li{counter-increment:p;padding:2rem 0 1rem;position:relative;display:flex;flex-direction:column;gap:.6rem;min-width:0}
.proc li::before{content:"0" counter(p);font:600 clamp(2rem,1.5rem + 1.5vw,2.8rem)/1 var(--f-display);letter-spacing:-.04em;color:#fff;opacity:.92;margin-bottom:.6rem}
.proc li::after{content:"";position:absolute;top:-1px;left:0;width:10px;height:10px;background:var(--signal);transform:translateY(-50%) rotate(45deg) scale(.7)}
.proc h3{font-size:1.12rem;color:#fff}
.proc p{font-size:.93rem;color:var(--on-navy-2);line-height:1.55}
.proc .docs{margin-top:auto;padding-top:.6rem;font:500 .66rem/1.5 var(--f-mono);color:var(--steel-2);letter-spacing:.1em;text-transform:uppercase}
.proc-compact .docs{display:none}
@media (max-width:1100px){.proc{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 2rem}.proc::before{display:none}.proc li{border-top:1px solid var(--navy-line-2)}}
@media (max-width:640px){.proc{grid-template-columns:minmax(0,1fr);gap:0}.proc li{padding:1.6rem 0 1.6rem 4.4rem;border-top:1px solid var(--navy-line)}.proc li::before{position:absolute;left:0;top:1.55rem;font-size:1.6rem}.proc li::after{display:none}}
.proc-link{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.proc-link h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}

/* controls ledger (title block) */
.tblock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);margin:0}
.tblock.t3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tblock>div{padding:1.6rem clamp(1.25rem,2vw,2.25rem) 1.8rem 0;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:.6rem;min-width:0}
.tblock>div+div{padding-left:clamp(1.25rem,2vw,2.25rem)}
.tblock>div:last-child{border-right:0}
.tblock dt,.tblock .k{font:500 .68rem/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.tblock .v{font:600 1.05rem/1.45 var(--f-display);letter-spacing:-.01em;color:var(--ink);margin:0}
@media (max-width:800px){.tblock,.tblock.t3{grid-template-columns:minmax(0,1fr)}.tblock>div{border-right:0;border-bottom:1px solid var(--line);padding:1.3rem 0}.tblock>div+div{padding-left:0}.tblock>div:last-child{border-bottom:0}}
.prequal{margin-top:clamp(2.5rem,2rem + 2vw,4rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:1.5rem 3rem;align-items:center;padding:clamp(1.6rem,1.2rem + 1.5vw,2.5rem) clamp(1.5rem,1.2rem + 1.5vw,2.75rem);background:var(--surface);border-left:3px solid var(--navy)}
.prequal h3{font-size:1.35rem}
.prequal .checks{margin:0;gap:.6rem .8rem}
.prequal .checks li{font-size:.95rem}
@media (max-width:1000px){.prequal{grid-template-columns:minmax(0,1fr)}.prequal .btn{justify-self:start}}

/* quotation */
.quote{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,1rem + 5vw,7rem);align-items:start}
.qc{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.qc a{display:flex;align-items:center;gap:1.1rem;padding:1.15rem 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font:600 1.1rem/1.3 var(--f-display);letter-spacing:-.01em;min-height:44px;word-break:break-word;transition:color .25s,padding-left .35s var(--ease)}
.qc svg{width:22px;height:22px;flex:none;color:var(--brand)}
.qc small{display:block;font:500 .64rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.qc a:hover{color:var(--brand-ink);padding-left:.5rem}
@media (max-width:900px){.quote{grid-template-columns:minmax(0,1fr)}}

/* form */
.form{background:var(--surface);padding:clamp(1.5rem,1rem + 2.5vw,3rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.4rem 1.5rem;position:relative;box-shadow:0 30px 60px -40px rgba(10,35,66,.35);border-top:3px solid var(--navy)}
.form .full{grid-column:1/-1}
@media (max-width:600px){.form{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.field label{font:500 .72rem/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.field label small{font:inherit;text-transform:none;letter-spacing:.02em;color:var(--muted)}
.field input,.field select,.field textarea{font:400 1rem/1.4 var(--f-body);color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);padding:.85rem 1rem;min-height:52px;width:100%;transition:border-color .25s,background-color .25s,box-shadow .25s}
.field input::placeholder,.field textarea::placeholder{color:#9AA3AC}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.5rem}
.field textarea{min-height:150px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#B9B3A8}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(0,111,166,.15)}
.field input[type=file]{padding:.7rem .9rem;font-size:.92rem;cursor:pointer}
.field .hint{font-size:.8rem;color:var(--muted)}
.field .err{font-size:.82rem;color:var(--err);display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--err);box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.consent input{width:20px;height:20px;margin-top:.15rem;accent-color:var(--brand);flex:none}
.consent.invalid{color:var(--err)}
.consent.invalid input{outline:2px solid var(--err)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.form-ok{grid-column:1/-1;background:var(--brand-soft);border-left:3px solid var(--brand);padding:1rem 1.25rem;color:var(--ink);line-height:1.5}
.form .btn{min-width:12rem}

/* 9. Inner pages --------------------------------------------------------- */
/* page hero (text) */
.phero{position:relative;isolation:isolate;overflow:hidden;background:var(--midnight);color:var(--on-navy)}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--navy-line) 1px,transparent 1px),linear-gradient(90deg,var(--navy-line) 1px,transparent 1px);background-size:96px 96px;opacity:.5;mask-image:linear-gradient(90deg,transparent 25%,#000 70%);-webkit-mask-image:linear-gradient(90deg,transparent 25%,#000 70%)}
.phero::after{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(70% 90% at 100% 100%,rgba(19,161,255,.16),transparent 60%),radial-gradient(40% 60% at 0% 0%,rgba(10,35,66,.9),transparent 70%)}
.phero .wrap{padding-block:clamp(3.5rem,2rem + 6vw,7.5rem) clamp(3rem,2rem + 4vw,5.5rem);display:flex;flex-direction:column;gap:1.4rem}
.hdr.tx ~ main .phero .wrap{padding-top:calc(var(--hdr) + clamp(3rem,2rem + 5vw,6.5rem))}
.hdr.tx ~ main .chero{padding-top:var(--hdr)}
.phero h1{color:#fff;max-width:18ch;font-size:var(--t-h1);letter-spacing:-.03em;line-height:1}
.phero .lead{color:#D5DEE8;max-width:40rem}
.phero .btn-row{margin-top:.5rem}
.crumbs{font:500 .68rem/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-2);display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.crumbs a{color:var(--on-navy-2);text-decoration:none;transition:color .25s}
.crumbs a:hover{color:#fff}
.crumbs span[aria-hidden]{opacity:.45}
.crumbs span:last-child{color:#fff}

/* cinematic service hero */
.chero{background:var(--midnight);position:relative;min-height:clamp(540px,76vh,820px);display:flex;align-items:flex-end;isolation:isolate;overflow:hidden;color:#fff}
.chero-img{position:absolute;inset:0;margin:0;z-index:-2}
.chero-img img{width:100%;height:100%;object-fit:cover;object-position:center 40%;animation:cheroIn 1.8s var(--ease-out) both}
@keyframes cheroIn{from{transform:scale(1.06)}to{transform:scale(1)}}
.chero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,22,41,.92) 0%,rgba(6,22,41,.74) 36%,rgba(6,22,41,.32) 70%,rgba(6,22,41,.12) 100%),linear-gradient(0deg,rgba(6,22,41,.92) 0%,rgba(6,22,41,.3) 40%,rgba(6,22,41,0) 60%),linear-gradient(180deg,rgba(6,22,41,.55),transparent 25%)}
.chero .wrap{width:100%;padding-block:clamp(3rem,2rem + 4vw,5.5rem);display:flex;flex-direction:column;gap:1.4rem}
.chero .label{color:#9CD4FF}
.chero h1{color:#fff;font-size:var(--t-h1);letter-spacing:-.03em;line-height:1;max-width:17ch}
.chero .lead{color:#E3EAF1;max-width:42rem}
.chero .btn-row{margin-top:.5rem}
@media (max-width:760px){.chero{min-height:min(82svh,700px)}.chero::before{background:linear-gradient(180deg,rgba(6,22,41,.45) 0%,rgba(6,22,41,.25) 25%,rgba(6,22,41,.86) 55%,rgba(6,22,41,.98) 100%)}}

/* service body */
.layout-side{display:grid;grid-template-columns:minmax(0,1fr) 21rem;gap:clamp(2.5rem,1rem + 4vw,6rem);align-items:start}
.layout-side>.stack-lg{gap:clamp(3rem,2rem + 3vw,5rem)}
@media (max-width:960px){.layout-side{grid-template-columns:minmax(0,1fr)}.aside{position:static}}
.aside{position:sticky;top:calc(var(--hdr) + 1.5rem);background:var(--midnight);color:var(--on-navy);padding:1.9rem 1.75rem 1.75rem;display:flex;flex-direction:column;gap:1rem;border-top:3px solid var(--signal)}
.aside h3{color:#fff;font-size:1.3rem}
.aside p{color:var(--on-navy-2);font-size:.95rem}
.aside .btn{justify-content:center}
.aside .btn.ghost{color:#fff;border-color:var(--navy-line-2)}
.aside .btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.aside nav{display:flex;flex-direction:column;border-top:1px solid var(--navy-line);margin-top:.5rem}
.aside nav a{padding:.8rem 0;border-bottom:1px solid var(--navy-line);text-decoration:none;color:var(--on-navy-2);font-weight:500;font-size:.93rem;display:flex;justify-content:space-between;gap:.75rem;transition:color .25s,padding-left .3s var(--ease)}
.aside nav a::after{content:"→";opacity:0;transition:opacity .25s}
.aside nav a:hover{color:#fff;padding-left:.35rem}
.aside nav a:hover::after{opacity:1}
.aside nav a[aria-current="page"]{color:#9CD4FF}
.prose{display:flex;flex-direction:column;gap:1.2rem;color:var(--ink-2);font-size:1.08rem;line-height:1.7}
.prose h2{font-size:clamp(1.6rem,1.25rem + 1.3vw,2.3rem);margin-top:.75rem;color:var(--ink)}
.prose h3{margin-top:.5rem;color:var(--ink)}
.prose ul,.prose ol{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.prose img{border-radius:var(--r)}
.prose table{border-collapse:collapse;width:100%;font-size:.95rem}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:.7rem .5rem;text-align:left;vertical-align:top}
.prose th{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.prose blockquote{margin:0;padding:.5rem 0 .5rem 1.5rem;border-left:3px solid var(--navy);font-family:var(--f-display);font-size:1.3rem;line-height:1.35;color:var(--ink)}
.prose .label{align-self:flex-start}
.prose>p:first-of-type{font-size:1.18rem;color:var(--ink)}
.scope-head{display:flex;flex-direction:column;gap:1.25rem}

/* other services, faq */
.osvc{grid-template-columns:repeat(3,minmax(0,1fr))}
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding:1.4rem 0;font:600 1.12rem/1.35 var(--f-display);letter-spacing:-.01em;color:var(--ink);transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border:1px solid var(--line-2);border-radius:50%;background:linear-gradient(var(--ink),var(--ink)) center/10px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 10px no-repeat;transition:transform .4s var(--ease),border-color .3s,background .3s}
.faq summary:hover{color:var(--brand-ink)}
.faq summary:hover::after{border-color:var(--brand)}
.faq details[open] summary::after{transform:rotate(45deg);border-color:var(--brand);background:linear-gradient(var(--brand),var(--brand)) center/10px 1px no-repeat,linear-gradient(var(--brand),var(--brand)) center/1px 10px no-repeat}
.faq details[open] summary{color:var(--navy)}
.faq .a{padding:0 3.5rem 1.6rem 0;color:var(--ink-2);display:flex;flex-direction:column;gap:.75rem;line-height:1.65}
.faq .a p{max-width:62ch}
@media (max-width:600px){.faq .a{padding-right:0}}
.faq-page .faq summary{font-size:1.2rem}

/* cta band */
.cta{background:var(--midnight);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 85% 50%,rgba(19,161,255,.18),transparent 60%)}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--navy-line) 1px,transparent 1px),linear-gradient(90deg,var(--navy-line) 1px,transparent 1px);background-size:96px 96px;opacity:.45;mask-image:linear-gradient(90deg,transparent 40%,#000);-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000)}
.cta .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2.5rem;align-items:center;padding-block:clamp(4rem,2.5rem + 5vw,7rem)}
.cta h2{color:#fff;font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);letter-spacing:-.03em;max-width:16ch}
.cta p{color:#C5D1DD;font-size:1.08rem;line-height:1.6;max-width:34rem}
.cta .btn-row{justify-content:flex-end}
@media (max-width:860px){.cta .wrap{grid-template-columns:minmax(0,1fr)}.cta .btn-row{justify-content:flex-start}}

/* services overview rows */
.svc-rows{display:flex;flex-direction:column}
.svc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,6rem);align-items:center;padding-block:clamp(3rem,2rem + 3vw,5rem);border-top:1px solid var(--line-2);position:relative}
.svc-row:last-child{border-bottom:1px solid var(--line-2)}
.svc-row .plate{aspect-ratio:4/3}
.svc-row:nth-child(even) .plate{order:2}
.svc-row .n{font:600 clamp(3rem,2rem + 3vw,5rem)/1 var(--f-display);letter-spacing:-.05em;color:var(--paper-3);position:absolute;top:clamp(1.5rem,1rem + 1.5vw,2.5rem);right:0;pointer-events:none;-webkit-text-stroke:1px var(--line-2);color:transparent}
.svc-row h2{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.7rem)}
@media (max-width:900px){.svc-row{grid-template-columns:minmax(0,1fr)}.svc-row:nth-child(even) .plate{order:0}.svc-row .n{top:1rem}}

/* about */
.principles{counter-reset:pr}
.principles>div{counter-increment:pr}
.principles>div h3::before{content:"0" counter(pr);display:block;font:500 .7rem/1 var(--f-mono);letter-spacing:.14em;color:var(--brand);margin-bottom:.9rem}
.lead-card{background:var(--midnight);color:var(--on-navy);padding:clamp(2rem,1.5rem + 2vw,3rem);display:flex;flex-direction:column;gap:1rem;border-top:3px solid var(--signal)}
.lead-card h2,.lead-card h3{color:#fff}
.lead-card p{color:var(--on-navy-2)}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(2.5rem,1rem + 4vw,6rem);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.cinfo{display:flex;flex-direction:column;background:var(--midnight);color:var(--on-navy);border-top:3px solid var(--signal)}
.cinfo>div{padding:1.35rem 1.75rem;border-bottom:1px solid var(--navy-line);display:flex;flex-direction:column;gap:.35rem}
.cinfo>div:last-child{border-bottom:0}
.cinfo .k{font:500 .66rem/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--steel-2)}
.cinfo a,.cinfo .v{font:600 1.08rem/1.45 var(--f-display);letter-spacing:-.01em;color:#fff;text-decoration:none;overflow-wrap:anywhere}
.cinfo a:hover{color:#9CD4FF}
.cinfo .link-arrow{font:600 .9rem/1.3 var(--f-body);color:#9CD4FF;margin-top:.4rem;align-self:flex-start}
.h3s{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem)}

/* 10. Blog ---------------------------------------------------------------- */
.pcard{display:flex;flex-direction:column;background:var(--surface);color:inherit;text-decoration:none;border-radius:var(--r);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pcard .plate{aspect-ratio:3/2;border-radius:0}
.pcard .plate img{transition:transform 1.1s var(--ease)}
.pcard-body{padding:1.5rem 1.6rem 1.75rem;display:flex;flex-direction:column;gap:.7rem;flex:1;border:1px solid var(--line);border-top:0}
.pcard .meta{display:flex;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;font:500 .66rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pcard .meta b{color:var(--brand-ink);font-weight:500}
.pcard h3{font-size:1.3rem;transition:color .3s}
.pcard p{font-size:.95rem;color:var(--ink-2);line-height:1.6}
.pcard .link-arrow{margin-top:auto;padding-top:.5rem}
a.pcard:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(10,35,66,.35)}
a.pcard:hover h3{color:var(--brand-ink)}
a.pcard:hover .plate img{transform:scale(1.05)}
.pcard:not(:has(.plate)) .pcard-body{border-top:3px solid var(--navy)}
.article{max-width:46rem}
.article .plate.wide{margin:0 0 2.5rem;aspect-ratio:21/10}
.article .prose{font-size:1.1rem}
.article .prose h2{margin-top:1.5rem}
.article .prose h3{margin-top:1rem}
.article .prose p+p{margin-top:.1rem}
.pagination,.nav-links{display:flex;gap:.5rem;flex-wrap:wrap}
.nav-links .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .9rem;border:1px solid var(--line-2);border-radius:var(--r);text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem}
.nav-links .page-numbers.current{background:var(--navy);color:#fff;border-color:var(--navy)}
.post-meta{display:flex;gap:1.25rem;flex-wrap:wrap;font:500 .7rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-2)}

/* 11. Footer -------------------------------------------------------------- */
.ftr{background:var(--midnight);color:var(--on-navy-2);font-size:.94rem;position:relative;overflow:hidden}
.ftr::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 0% 0%,rgba(19,161,255,.08),transparent 60%);pointer-events:none}
.ftr .wrap{position:relative;padding-block:clamp(4rem,2.5rem + 4vw,6.5rem) 1.75rem}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2rem 4rem;align-items:end;padding-bottom:clamp(2.5rem,2rem + 2vw,3.5rem);border-bottom:1px solid var(--navy-line)}
.ftr-top h2{color:#fff;font-size:clamp(1.8rem,1.3rem + 2vw,3rem);letter-spacing:-.03em;max-width:16ch}
.ftr-top .btn-row{justify-content:flex-end}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:2.5rem 2rem;padding-block:clamp(2.5rem,2rem + 2vw,3.5rem)}
.ftr-logo{display:block;width:190px}
.ftr-logo img{width:100%;height:auto}
.ftr .ftr-about{display:flex;flex-direction:column;gap:1.25rem;max-width:26rem}
.ftr .fh{font:500 .66rem/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--steel-2);margin:0 0 1.1rem}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.ftr li{line-height:1.5}
.ftr a{color:var(--on-navy-2);text-decoration:none;transition:color .25s}
.ftr a:hover{color:#fff}
.ftr .ftr-contact li{display:flex;flex-direction:column;gap:.1rem}
.ftr .ftr-contact small{font:500 .62rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel-2)}
.ftr .ftr-contact a{color:#fff;font-weight:500}
.ftr p{color:var(--on-navy-2);line-height:1.6}
.ftr-base{padding-top:1.4rem;border-top:1px solid var(--navy-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;font:400 .76rem/1.5 var(--f-mono);letter-spacing:.04em;color:var(--on-navy-3)}
.ftr-base nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.ftr-base{padding-right:clamp(0px,calc(100px - (100vw - var(--wrap))/2),88px)}
@media (max-width:1000px){.ftr-top{grid-template-columns:minmax(0,1fr);align-items:start}.ftr-top .btn-row{justify-content:flex-start}}
@media (max-width:900px){.ftr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ftr .ftr-about{grid-column:1/-1}}
@media (max-width:560px){.ftr-grid{grid-template-columns:minmax(0,1fr)}}

/* 12. Floating UI --------------------------------------------------------- */
.wa{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(100px + env(safe-area-inset-bottom,0px));z-index:58;width:56px;height:56px;border-radius:50%;background:#1F8F55;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.45);transition:transform .3s var(--ease),box-shadow .3s}
.wa:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 34px -8px rgba(0,0,0,.5)}
.wa svg{width:28px;height:28px}
body.menu-open .wa,body.menu-open #hydrock-chatbot-root{display:none!important}
.consent-bar{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;max-width:30rem;background:var(--surface);color:var(--ink);border-radius:3px;padding:1.1rem 1.3rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:0 24px 60px -20px rgba(6,22,41,.45);font-size:.9rem;line-height:1.5;border-top:3px solid var(--navy)}
.consent-bar[hidden]{display:none}
.consent-bar p{max-width:none;color:var(--ink-2)}
.consent-bar a{color:var(--brand-ink)}
.consent-bar .btn{min-height:40px;padding:.5rem 1rem;font-size:.85rem}
.consent-bar .btn.ghost{color:var(--ink);border-color:var(--line-2)}
@media (max-width:760px){
  .consent-bar{right:max(16px,env(safe-area-inset-right,0px));max-width:none;padding:1rem 1.1rem;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding-right:4.5rem}
  .wa,.wa.wa{width:48px;height:48px;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .wa svg{width:24px;height:24px}
  html #hydrock-chatbot-root{right:calc(14px + env(safe-area-inset-right,0px))!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important}
  html #hydrock-chatbot-root .hydrock-qc-launcher{width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important}
  body.kb-open .wa,body.kb-open #hydrock-chatbot-root:not(:has(.is-open)){display:none!important}
  body.consent-open .wa{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  body.consent-open #hydrock-chatbot-root{bottom:calc(150px + env(safe-area-inset-bottom,0px))!important}
}
@media (max-width:1100px){
  html #hydrock-chatbot-root .hydrock-qc-host .quikchat-input-area textarea,html #hydrock-chatbot-root .hydrock-qc-host .quikchat-input-textbox{font-size:16px!important}
}

/* 13. Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{opacity:0;transform:translateY(22px);animation:rise .9s var(--ease-out) forwards}
  .hero-copy>*:nth-child(1){animation-delay:.15s}.hero-copy>*:nth-child(2){animation-delay:.3s}.hero-copy>*:nth-child(3){animation-delay:.5s}.hero-copy>*:nth-child(4){animation-delay:.65s}
  .hero-index,.hero-foot{opacity:0;animation:fadeIn 1.2s var(--ease-out) .9s forwards}
  .hero-bg .hs.is-on img{animation:none}
  .phero h1,.phero .lead,.phero .crumbs,.phero .btn-row,.chero h1,.chero .lead,.chero .crumbs,.chero .label,.chero .btn-row{opacity:0;transform:translateY(18px);animation:rise .9s var(--ease-out) forwards}
  .phero .crumbs,.chero .crumbs,.chero .label{animation-delay:.05s}.phero h1,.chero h1{animation-delay:.18s}.phero .lead,.chero .lead{animation-delay:.32s}.phero .btn-row,.chero .btn-row{animation-delay:.45s}
  @keyframes rise{to{opacity:1;transform:none}}
  @keyframes fadeIn{to{opacity:1}}
  html.rv-on .rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
  html.rv-on .rv.in{opacity:1;transform:none}
  html.rv-on .rv-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease-out)}
  html.rv-on .rv-img.in{clip-path:inset(0 0 0 0)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero-bg .hs:not(:first-child){display:none}.hero-bg .hs:first-child{opacity:1}
}

/* 14. Legacy guards (blog and WordPress pages rendered with plugin CSS) -------- */
body.hy{font-family:var(--f-body)!important;background:var(--paper)!important;color:var(--ink)}
body.hy .hdr *,body.hy .ftr *,body.hy .phero *{font-family:inherit}
body.hy .hdr,body.hy .ftr{font-family:var(--f-body)}
body.hy .phero h1{color:#fff!important;font-family:var(--f-display)!important;font-stretch:100%}
body.hy .phero .crumbs,body.hy .ftr .fh,body.hy .ftr-base,body.hy .label{font-family:var(--f-mono)!important}
body.hy .ftr .fh{color:var(--steel-2)!important;font-size:.66rem!important}
body.hy .prose h1,body.hy .prose h2,body.hy .prose h3,body.hy .prose h4,body.hy .prose .elementor-heading-title{font-family:var(--f-display)!important;font-stretch:100%;color:var(--ink)}
body.hy .prose p,body.hy .prose li{font-family:var(--f-body)!important}
body.hy .chero h1,body.hy .band h2,body.hy .cta h2{color:#fff!important;font-family:var(--f-display)!important}
body.hy .prose .elementor-section,body.hy .prose .elementor-container{max-width:100%!important}
.more-row{display:flex;justify-content:center;margin-top:2rem}
.clip{display:none!important}

/* ---- refinements after first device pass ---- */
/* The open mobile menu must not be trapped inside the blurred header (backdrop-filter creates a containing block). */
body.menu-open .hdr,body.menu-open .hdr.tx,body.menu-open .hdr.tx.solid{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--midnight)}
@media (max-width:760px){
  .hero-copy .label{font-size:.64rem;letter-spacing:.12em}
  .hero-copy .label::before{width:1.25rem}
  .hero-foot .wrap{padding:0}
  .hero-facts{margin-inline:0;padding-inline:max(var(--gut),env(safe-area-inset-left,0px));scroll-padding-inline:max(var(--gut),env(safe-area-inset-left,0px))}
}
@media (max-width:760px){.chero{min-height:min(72svh,640px)}}
/* panel header: long discipline labels wrap instead of colliding with the number */
.svp-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;text-align:right;line-height:1.5}
.svp-top span:last-child{max-width:16ch;justify-self:end}
.svc-panels.three .svp h3{max-width:16ch;font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem)}
.nav .nav-foot .btn.ghost{color:#fff;border-color:var(--navy-line-2)}
.nav .nav-foot .btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
@media (max-width:640px){.svc-panels.three .svp-top span:last-child{display:none}.svp-top span:last-child{font-size:.62rem;max-width:12ch}}
/* very small phones (320 to 360px): buttons may wrap, menu actions stack */
@media (max-width:360px){.btn{white-space:normal;text-align:center;line-height:1.25}.nav .nav-foot{grid-template-columns:minmax(0,1fr)}.hero h1{font-size:2.2rem}.chero h1,.phero h1{font-size:2.1rem}}
/* tablets: taller service panels so the photograph stays visible; three-panel strip keeps three columns */
@media (min-width:641px) and (max-width:1100px){.svc-panels .svp{min-height:clamp(560px,72vw,680px)}}
@media (min-width:641px) and (max-width:900px){.svc-panels.three{grid-template-columns:repeat(3,minmax(0,1fr))}.svc-panels.three .svp{min-height:440px}.svc-panels.three .svp h3{font-size:1.2rem}.svc-panels.three .svp-top span:last-child{display:none}.svc-panels.three .svp-body{padding:1.25rem 1rem 1.4rem}}

/* ==========================================================================
   Refinements R1 to R10 (17 October 2026) – each block can be removed on its own
   ========================================================================== */
/* R1 one shared photographic grade: cooler, slightly desaturated, lifted contrast, light navy tint */
.plate img,.pimg img,.svp-img img,.band-img img,.chero-img img,.hero-bg img{filter:saturate(.8) contrast(1.07) brightness(.97)}
.plate::before,.svp-img::after,.band-img::after,.chero-img::after,.pimg::before{content:"";position:absolute;inset:0;background:var(--navy);mix-blend-mode:multiply;opacity:.12;pointer-events:none;z-index:1}
.pcard .plate::before{opacity:.07}
/* R2 photographic heroes on About, Services, Why Hydrock and Contact */
.chero.mid{min-height:clamp(460px,60vh,660px)}
@media (max-width:760px){.chero.mid{min-height:min(60svh,520px)}}
/* R3 hero: lighter gradient so the photograph reads, larger facts, index as a hairline rail */
.hero-shade{background:linear-gradient(90deg,rgba(6,22,41,.88) 0%,rgba(6,22,41,.7) 26%,rgba(6,22,41,.3) 54%,rgba(6,22,41,.06) 76%,rgba(6,22,41,0) 100%),linear-gradient(0deg,rgba(6,22,41,.96) 0%,rgba(6,22,41,.5) 26%,rgba(6,22,41,0) 50%),linear-gradient(180deg,rgba(6,22,41,.45) 0%,rgba(6,22,41,0) 20%)}
.hero-facts b{font-size:clamp(1.9rem,1.3rem + 1.5vw,2.7rem)}
.hero-facts b.w{font-size:clamp(1.4rem,1rem + 1.1vw,2.1rem)}
.hero-index{min-width:20rem;border-left:0}
.hero-index li{border-bottom:1px solid var(--navy-line-2)}
.hero-index li:first-child{border-top:1px solid var(--navy-line-2)}
.hero-index a{padding:1rem .25rem 1rem 0;font-size:1.02rem;grid-template-columns:2.4rem 1fr auto}
.hero-index a::before{left:0;top:auto;bottom:-1px;height:1px;width:100%;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.hero-index a:hover{padding-left:.35rem}
.hero-index a:hover::before{transform:scaleX(1)}
.hero-index i{color:#9CD4FF}
@media (min-width:1024px) and (max-width:1180px){.hero-index{display:flex;min-width:16rem}.hero-grid{grid-template-columns:minmax(0,1fr) auto}}
/* R5 mobile: shorter page, headline higher on the first screen */
@media (max-width:760px){:root{--sec:clamp(3.75rem,2rem + 7vw,5.5rem)}.band{min-height:520px}.hero-bg,.hero-shade{height:min(56svh,520px)}.hero-grid{padding-top:calc(min(56svh,520px) - 8rem)}}
@media (max-width:640px){.svp-img{aspect-ratio:16/9}.svp-body{margin-top:-4rem;padding:.8rem 1.25rem 1.4rem;gap:.6rem}.svp ul{gap:.3rem;padding-top:.7rem}.svp p{font-size:.92rem}}
/* R6 tablet: phone number visible beside the menu button, readable panel labels on large screens */
@media (min-width:700px) and (max-width:1040px){.hdr-phone{display:inline-flex}}
.svp-top{font-size:clamp(.66rem,.5rem + .14vw,.8rem)}
/* R7 typography */
h2{line-height:1.04}
.home-about h2{max-width:18ch}
.phero h1,.chero h1{line-height:.98}
body:not(.hy-home) main .label::before{display:none}
/* R8 motion: eased slide drift instead of linear */
.hero-bg .hs img{transition:transform 12s cubic-bezier(.2,.4,.3,1)}
/* R9 service pages: number-only labels on the other-services strip */
.svc-panels.three .svp-top span:last-child{display:none}
/* R10 footer: wordmark row above the link columns */
.ftr-brand{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:2rem 4rem;align-items:center;padding-bottom:clamp(2rem,1.5rem + 2vw,3rem);border-bottom:1px solid var(--navy-line)}
.ftr-brand .ftr-logo{width:min(100%,300px)}
.ftr-brand p{font-size:1.05rem;max-width:34rem;color:#C5D1DD}
.ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:800px){.ftr-brand{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.ftr-grid{grid-template-columns:minmax(0,1fr)}}
/* R5 (continued) mobile compaction: denser ledgers and panels on phones */
@media (max-width:640px){
  .svp ul{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem}
  .svp-body{margin-top:-5rem}
  .why>div{padding:1.4rem 1.1rem 1.5rem;gap:.6rem}
  .why svg{width:26px;height:26px;margin-bottom:.1rem}
  .xp-list a{padding:1rem .25rem 1rem 0}
  .xp-t span{font-size:.9rem}
  .proc li{padding:1.3rem 0 1.3rem 4rem}
  .home-about .plate.tall{aspect-ratio:16/10}
  .sec-head{margin-bottom:2rem}
  .prequal{padding:1.4rem 1.2rem}
  .tblock>div{padding:1.1rem 0}
  .ftr .wrap{padding-block:3.5rem 1.5rem}
  .ftr-grid{gap:2rem;padding-block:2rem}
}
/* ---- 2.0.1 Safari/iOS hardening ----
   iOS Safari ignores overflow-x on <body> alone, so the lock goes on html and body; clip avoids creating a scroll container. */
html,body{overflow-x:hidden;max-width:100%}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
/* image reveal: opacity instead of clip-path (no partial states if the observer is late) */
@media (prefers-reduced-motion:no-preference){
  html.rv-on .rv-img{clip-path:none;opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
  html.rv-on .rv-img.in{opacity:1;transform:none}
}
/* ---- 2.0.3 iOS width safety: no in-flow element may exceed the viewport, no grid or flex child may grow past its track ---- */
@media (max-width:1040px){
  main{max-width:100%;overflow-x:clip}
  main *{min-width:0}
  .layout-side>*,.split>*,.stack-lg>*,.prose>*,.plate,.pimg,.svp,.svp-img,.svp-body,.why>div,.checks li,.faq,.aside,.cinfo,.form,.tblock>div{max-width:100%}
  .plate,.pimg{width:100%}
  .plate img,.pimg img,.svp-img img{max-width:none;width:100%;height:100%}
}
/* ---- 2.0.4 figure margins: the original templates reset these inline; the shared image helper does not, so reset them here ---- */
figure.plate,figure.pimg,figure.chero-img,figure.band-img,figure.svp-img,.hero-bg figure.hs,figure.hero-figure{margin:0}
.article .plate.wide{margin:0 0 2.5rem}
/* ---- 2.0.6 hero facts on phones: a two-by-two grid instead of a sideways swipe strip ---- */
@media (max-width:760px){
  .hero-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;overflow:visible;scroll-snap-type:none;margin-inline:0;padding-inline:max(var(--gut),env(safe-area-inset-left,0px))}
  .hero-facts li{min-width:0;flex:none;margin:0;padding:1rem 1rem 1rem 0;border:0!important;scroll-snap-align:none}
  .hero-facts li:nth-child(even){padding-left:1rem;border-left:1px solid var(--navy-line)!important}
  .hero-facts li:nth-child(n+3){border-top:1px solid var(--navy-line)!important}
  .hero-facts li::before{display:none}
  .hero-facts b{font-size:clamp(1.6rem,1.2rem + 2vw,2rem)}
  .hero-facts b.w{font-size:clamp(1.2rem,1rem + 1.6vw,1.6rem)}
  .hero-facts span{font-size:.78rem;max-width:none}
}
@media (max-width:360px){.hero-facts{grid-template-columns:minmax(0,1fr)}.hero-facts li:nth-child(even){padding-left:0;border-left:0!important}.hero-facts li:nth-child(n+2){border-top:1px solid var(--navy-line)!important}}
@media (max-width:760px){.hero-facts li:nth-child(odd){padding-left:0}}
/* ---- 2.0.7 ledger cell padding follows the column, not the source order (fixes the indented "Civil Defence" cell on About) ---- */
.tblock.t2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tblock>div{padding-left:clamp(1.25rem,2vw,2.25rem)}
.tblock>div:nth-child(4n+1),.tblock.t3>div:nth-child(3n+1),.tblock.t2>div:nth-child(2n+1){padding-left:0}
.tblock.t3>div:nth-child(3n+2),.tblock.t3>div:nth-child(3n){padding-left:clamp(1.25rem,2vw,2.25rem)}
.tblock.t2>div:nth-child(2n){padding-left:clamp(1.25rem,2vw,2.25rem)}
.tblock>div:nth-child(4n),.tblock.t3>div:nth-child(3n),.tblock.t2>div:nth-child(2n){border-right:0}
.tblock.t2>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
@media (min-width:801px){.tblock.t2>div:nth-child(n+3){padding-top:1.4rem}}
@media (max-width:800px){.tblock.t2{grid-template-columns:minmax(0,1fr)}.tblock.t2>div{padding-left:0;border-right:0;border-bottom:1px solid var(--line)}.tblock.t2>div:last-child{border-bottom:0}}
/* authority strip: dividers only when the list fits on one line; on smaller screens use spacing alone */
@media (max-width:1100px){.auth li+li::before{display:none}.auth ul{gap:.45rem 1.4rem}.auth li{padding:.15rem 0}}
/* ---- 2.0.8 ledger on phones: when cells stack in one column, no cell carries column padding (rule written to outrank the column rules above) ---- */
@media (max-width:800px){
  .tblock>div:nth-child(n),.tblock.t3>div:nth-child(n),.tblock.t2>div:nth-child(n){padding:1.3rem 0;border-right:0;border-bottom:1px solid var(--line)}
  .tblock>div:last-child:nth-child(n),.tblock.t3>div:last-child:nth-child(n),.tblock.t2>div:last-child:nth-child(n){border-bottom:0}
}
/* ---- 2.0.9 authority names: an even grid where the single line no longer fits (phones and tablets); desktop keeps the divided line ---- */
@media (max-width:1100px){
  .auth .wrap{flex-direction:column;align-items:flex-start;gap:.9rem;padding-block:1.5rem}
  .auth ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));gap:.6rem 1.5rem;width:100%}
  .auth li{padding:0;font-size:.95rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .auth li::before{display:none}
}
@media (max-width:480px){.auth ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem 1rem}.auth li{font-size:.92rem}}
@media (max-width:340px){.auth ul{grid-template-columns:minmax(0,1fr)}}