/* ==========================================================================
   Balmoral Flat Roofing Ltd — core stylesheet
   Hand-authored. No framework, no utility-class generator, no build step.
   Structure:
     01 tokens          06 header/nav        11 systems
     02 reset           07 hero              12 process
     03 typography      08 trust marquee     13 gallery + lightbox
     04 primitives      09 intro/stats       14 reviews / areas / faq
     05 layout          10 services          15 contact, footer, dock
   ========================================================================== */

/* ---------------------------------------------------------------- 01 tokens */
@font-face{
  font-family:"Archivo";
  /* variable file, subset to the characters this site uses — see _subset_fonts.py */
  src:url("../fonts/archivo-var-latin.woff2") format("woff2-variations"),
      url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight:500 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"InterVar";
  src:url("../fonts/inter-var-latin.woff2") format("woff2-variations"),
      url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}

:root{
  /* brand — carried over from the original identity */
  --navy-900:#05214b;
  --navy-800:#08305f;
  --navy-700:#0b3c74;
  --blue-700:#0254a7;
  --blue-600:#0b66bd;
  --blue-500:#1a7fd4;
  --yellow:#ffd408;
  --yellow-600:#e6bd00;
  --gold-ink:#7d5c00;          /* accessible gold for text on light */

  /* neutrals */
  --ink:#07182b;
  --ink-soft:#2b3f56;
  --slate:#4a5c72;
  --slate-2:#556375;
  --paper:#f7f6f3;
  --cloud:#f1f4f8;
  --white:#ffffff;
  --line:#e3e7ee;
  --line-strong:#ccd5e0;
  --line-dark:rgba(255,255,255,.14);

  /* type */
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --text:"InterVar","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-hero:clamp(2.45rem,5.4vw,4.6rem);
  --fs-h2:clamp(1.9rem,3.3vw,2.9rem);
  --fs-h3:clamp(1.2rem,1.7vw,1.52rem);
  --fs-h4:clamp(1.05rem,1.25vw,1.18rem);
  --fs-body:clamp(1rem,1.02vw,1.0625rem);
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --track-kicker:.2em;

  /* rhythm */
  --shell:1220px;
  --gutter:clamp(1.15rem,4vw,2.5rem);
  --sp-1:.5rem;  --sp-2:.85rem; --sp-3:1.25rem; --sp-4:1.75rem;
  --sp-5:2.5rem; --sp-6:3.5rem;  --sp-7:5rem;   --sp-8:7rem;
  --sec-pad:clamp(3.6rem,7.5vw,7rem);

  /* form */
  --radius:6px;
  --radius-lg:10px;
  --shadow-s:0 1px 2px rgba(7,24,43,.05), 0 1px 3px rgba(7,24,43,.04);
  --shadow-m:0 4px 10px rgba(7,24,43,.06), 0 12px 28px rgba(7,24,43,.07);
  --shadow-l:0 18px 48px rgba(7,24,43,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ----------------------------------------------------------------- 02 reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-h,118px);
  overflow-x:clip}
body{
  margin:0;background:var(--white);color:var(--slate);
  font-family:var(--text);font-size:var(--fs-body);line-height:1.68;
  font-weight:400;letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
body.is-locked{overflow:hidden}
img,svg,video{max-width:100%;display:block;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--yellow);color:var(--ink)}

:focus-visible{
  outline:3px solid var(--yellow);outline-offset:3px;border-radius:2px;
}
.on-light :focus-visible{outline-color:var(--blue-700)}

.skip-link{
  position:absolute;left:1rem;top:-100px;z-index:200;
  background:var(--ink);color:#fff;padding:.75rem 1.25rem;border-radius:var(--radius);
  font-weight:600;transition:top .2s var(--ease);
}
.skip-link:focus{top:1rem}

/* ------------------------------------------------------------ 03 typography */
h1,h2,h3,h4,h5{font-family:var(--display);color:var(--ink);margin:0;
  font-weight:700;line-height:1.14;letter-spacing:-.022em}
h1{font-size:var(--fs-hero);font-weight:800;letter-spacing:-.032em;line-height:1.06}
h2{font-size:var(--fs-h2);letter-spacing:-.026em}
h3{font-size:var(--fs-h3);line-height:1.24}
h4{font-size:var(--fs-h4);line-height:1.3}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:600}
em{font-style:italic}
.lede{font-size:clamp(1.06rem,1.35vw,1.235rem);line-height:1.6;color:var(--ink-soft)}
.small{font-size:var(--fs-sm)}

.kicker{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--display);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:var(--track-kicker);text-transform:uppercase;color:var(--blue-700);
  margin:0 0 var(--sp-2);
}
.kicker::before{content:"";width:26px;height:2px;background:var(--yellow);flex:none}
.kicker--light{color:rgba(255,255,255,.82)}
.kicker--center{justify-content:center}

.sec-index{
  font-family:var(--display);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.16em;color:var(--slate-2);text-transform:uppercase;
}

/* ------------------------------------------------------------ 04 primitives */
.btn{
  --btn-bg:var(--yellow); --btn-fg:var(--ink); --btn-bd:var(--yellow);
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  background:var(--btn-bg);border:1px solid var(--btn-bd);color:var(--btn-fg);
  font-family:var(--display);font-weight:600;font-size:.9375rem;letter-spacing:.005em;
  padding:1rem 1.6rem;border-radius:var(--radius);cursor:pointer;text-align:center;
  transition:transform .28s var(--ease), background-color .28s var(--ease),
             border-color .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease);
  will-change:transform;
}
.btn:hover{background:var(--yellow-600);border-color:var(--yellow-600);
  transform:translateY(-2px);box-shadow:0 10px 22px rgba(7,24,43,.16)}
.btn:active{transform:translateY(0)}
.btn__arrow{transition:transform .32s var(--ease);flex:none}
.btn:hover .btn__arrow{transform:translateX(4px)}

.btn--navy{--btn-bg:var(--navy-900);--btn-bd:var(--navy-900);--btn-fg:#fff}
.btn--navy:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.btn--outline{--btn-bg:transparent;--btn-bd:var(--line-strong);--btn-fg:var(--ink)}
.btn--outline:hover{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
.btn--outline-light{--btn-bg:transparent;--btn-bd:rgba(255,255,255,.42);--btn-fg:#fff}
.btn--outline-light:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn--sm{padding:.7rem 1.15rem;font-size:.875rem}
.btn--lg{padding:1.15rem 1.9rem;font-size:1rem}
.btn--block{width:100%}
.btn-group{display:flex;flex-wrap:wrap;gap:.85rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);
  font-weight:600;color:var(--blue-700);font-size:.9375rem;
}
.link-arrow svg{transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.link-arrow:hover{color:var(--blue-600)}

.badge{
  display:inline-flex;align-items:center;gap:.45rem;background:var(--cloud);
  border:1px solid var(--line);border-radius:100px;padding:.35rem .85rem;
  font-size:var(--fs-xs);font-weight:600;color:var(--ink-soft);letter-spacing:.01em;
}
.badge--gold{background:#fff9e0;border-color:#f2e3a8;color:var(--gold-ink)}

.rule{height:1px;background:var(--line);border:0;margin:var(--sp-5) 0}
.rule--short{max-width:64px;height:3px;background:var(--yellow);margin:0 0 var(--sp-3)}

.img-frame{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--cloud);box-shadow:var(--shadow-s);
}
.img-frame img{width:100%;height:100%;object-fit:cover}
.img-frame::after{content:"";position:absolute;inset:0;border:1px solid rgba(7,24,43,.08);
  border-radius:inherit;pointer-events:none}

/* ---------------------------------------------------------------- 05 layout */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell--narrow{max-width:880px}
.shell--wide{max-width:1440px}
.section{padding-block:var(--sec-pad)}
.section--tight{padding-block:clamp(2.6rem,5vw,4.2rem)}
.section--paper{background:var(--paper)}
.section--cloud{background:var(--cloud)}
.section--ink{background:var(--ink);color:rgba(255,255,255,.82)}
.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}

.sec-head{max-width:760px;margin-bottom:clamp(2rem,4vw,3.4rem)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head p{margin-top:var(--sp-3);color:var(--slate)}
.sec-head--split{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-5);
  align-items:flex-end;justify-content:space-between;max-width:none}
.sec-head--split .sec-head__text{max-width:660px}

.grid{display:grid;gap:clamp(1.1rem,2vw,1.6rem)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
@media (max-width:1000px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* --------------------------------------------------------- 06 header / nav */
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:transform .45s var(--ease), background-color .35s var(--ease),
             box-shadow .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header[data-state="top"]{background:rgba(7,24,43,.34);border-bottom-color:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.site-header[data-state="stuck"]{
  background:rgba(255,255,255,.94);border-bottom-color:var(--line);
  box-shadow:0 2px 18px rgba(7,24,43,.08);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
}
.site-header[data-hidden="true"]{transform:translateY(-101%)}

.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:transparent}
.progress__bar{height:100%;width:0%;background:var(--yellow);
  transition:width .1s linear}

.topbar{
  background:var(--navy-900);color:rgba(255,255,255,.86);
  font-size:var(--fs-xs);letter-spacing:.01em;
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  min-height:38px;padding-block:.35rem}
.topbar__list{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.topbar__list li{display:flex;align-items:center;gap:.45rem}
.topbar svg{width:15px;height:15px;flex:none;color:var(--yellow)}
.topbar a[href^="tel"]{font-weight:600;color:#fff}
.topbar__note{color:rgba(255,255,255,.62)}
@media (max-width:900px){.topbar__note{display:none}}

.header__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  min-height:78px;transition:min-height .35s var(--ease)}
.site-header[data-state="stuck"] .header__bar{min-height:66px}

.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand img{height:40px;width:auto;transition:height .35s var(--ease), opacity .3s var(--ease)}
.brand .brand__light{position:absolute;opacity:0}
.site-header[data-state="stuck"] .brand img{height:35px}
/* on the transparent (hero) state, swap to the white logo */
.site-header[data-state="top"] .brand .brand__dark{opacity:0}
.site-header[data-state="top"] .brand .brand__light{position:relative;opacity:1}

.nav{display:flex;align-items:center}
.nav__list{display:flex;align-items:center;gap:.25rem}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:.35rem;position:relative;
  font-family:var(--display);font-weight:500;font-size:.9375rem;
  padding:.65rem .8rem;border-radius:var(--radius);color:#fff;
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.site-header[data-state="stuck"] .nav__link{color:var(--ink-soft)}
.nav__link::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.42rem;height:2px;
  background:var(--yellow);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease);
}
.nav__link:hover{background:rgba(255,255,255,.1)}
.site-header[data-state="stuck"] .nav__link:hover{background:var(--cloud);color:var(--ink)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__chev{width:12px;height:12px;transition:transform .3s var(--ease)}
.nav__item[data-open="true"] .nav__chev{transform:rotate(180deg)}

.dropdown{
  position:absolute;top:calc(100% + 10px);left:0;min-width:330px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-l);padding:.6rem;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav__item[data-open="true"] .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown__link{display:flex;gap:.85rem;align-items:flex-start;padding:.72rem .8rem;border-radius:var(--radius);
  transition:background-color .2s var(--ease)}
.dropdown__link:hover{background:var(--cloud)}
.dropdown__icon{width:38px;height:38px;flex:none;border-radius:var(--radius);background:var(--cloud);
  display:grid;place-items:center;color:var(--blue-700);border:1px solid var(--line)}
.dropdown__icon svg{width:20px;height:20px}
.dropdown__title{display:block;font-family:var(--display);font-weight:600;color:var(--ink);font-size:.9375rem}
.dropdown__desc{display:block;font-size:var(--fs-xs);color:var(--slate-2);line-height:1.45;margin-top:1px}
.dropdown__foot{margin-top:.4rem;padding:.7rem .8rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center}

.header__cta{display:flex;align-items:center;gap:1rem;flex:none}
.header__phone{display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-weight:700;
  font-size:1rem;color:#fff;letter-spacing:-.01em;transition:color .25s var(--ease)}
.header__phone svg{width:18px;height:18px;color:var(--yellow)}
.site-header[data-state="stuck"] .header__phone{color:var(--ink)}
.site-header[data-state="stuck"] .header__phone svg{color:var(--blue-700)}
.header__phone:hover{color:var(--yellow)}
.site-header[data-state="stuck"] .header__phone:hover{color:var(--blue-700)}
@media (max-width:1180px){.header__phone{display:none}}
@media (max-width:1080px){.nav{display:none}}

.nav-toggle{
  display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.35);
  border-radius:var(--radius);position:relative;flex:none;
}
.site-header[data-state="stuck"] .nav-toggle{border-color:var(--line-strong)}
.nav-toggle span{
  position:absolute;left:50%;width:20px;height:2px;background:#fff;border-radius:2px;
  transform:translateX(-50%);transition:transform .3s var(--ease), opacity .2s var(--ease),
  top .3s var(--ease), background-color .3s var(--ease);
}
.site-header[data-state="stuck"] .nav-toggle span{background:var(--ink)}
.nav-toggle span:nth-child(1){top:16px}
.nav-toggle span:nth-child(2){top:22px}
.nav-toggle span:nth-child(3){top:28px}
.nav-toggle[aria-expanded="true"]{border-color:rgba(255,255,255,.35)}
.nav-toggle[aria-expanded="true"] span{background:#fff}
.nav-toggle[aria-expanded="true"] span:nth-child(1){top:22px;transform:translateX(-50%) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){top:22px;transform:translateX(-50%) rotate(-45deg)}
@media (max-width:1080px){.nav-toggle{display:block}}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:99;background:var(--navy-900);color:#fff;
  padding:calc(var(--header-h,118px) + 2rem) var(--gutter) 3rem;overflow-y:auto;
  clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--ease);
  visibility:hidden;
}
.drawer[data-open="true"]{clip-path:inset(0 0 0 0);visibility:visible}
.drawer__group{border-top:1px solid var(--line-dark);padding:1.1rem 0}
.drawer__group:last-of-type{border-bottom:1px solid var(--line-dark)}
.drawer__link{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font-family:var(--display);font-weight:600;font-size:1.35rem;letter-spacing:-.02em;
  padding:.5rem 0;color:#fff}
.drawer__link span{font-size:var(--fs-xs);font-weight:500;color:rgba(255,255,255,.5);
  font-family:var(--text);letter-spacing:0}
.drawer__sub{padding:.35rem 0 .6rem}
.drawer__sub a{display:block;padding:.42rem 0;color:rgba(255,255,255,.72);font-size:.9375rem}
.drawer__sub a:hover{color:var(--yellow)}
.drawer__cta{margin-top:2rem;display:grid;gap:.8rem}
.drawer__meta{margin-top:2rem;font-size:var(--fs-sm);color:rgba(255,255,255,.6);line-height:1.9}

/* ---------------------------------------------------------------- 07 hero */
.hero{position:relative;min-height:min(94svh,860px);display:flex;align-items:flex-end;
  padding-top:150px;padding-bottom:clamp(2.5rem,5vw,4rem);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:-6% -2% -6% -2%;z-index:-2;transform:translate3d(0,0,0)}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  animation:heroDrift 26s var(--ease-out) forwards}
/* The phone gets a 4:5 crop made for that window, so it is shown straight — the
   landscape band keeps a slight upward bias so the torch and roll clear the copy. */
/* On a phone the hero is between two and three times as tall as it is wide. A
   landscape photograph behind the copy could only ever show a fragment of itself
   there — measured at 390px wide, the browser was cropping the picture to a
   64-pixel-wide strip of bare membrane. No amount of re-cropping fixes that: the
   window is the wrong shape for the photograph.

   So small screens get the picture as a deliberate element instead of a backdrop.
   The copy sits on the brand navy, and the photograph sits beneath it whole, at its
   own aspect ratio, edge to edge. It is the same photograph and the same framing as
   on desktop — just shown rather than cropped. Wider screens keep the full-bleed
   treatment, where the window is the right shape for it. */
/* On a phone the hero window is between two and three times as tall as it is wide.
   A landscape photograph behind the copy could only ever show a fragment of itself
   there — measured at 390px wide, the browser was cropping the picture to a 64-pixel
   strip of bare membrane. Re-cropping does not fix that: the window is the wrong
   shape for the photograph.

   So small screens stack it deliberately. The copy sits on the brand navy where it
   is perfectly legible, then the photograph gets its own full-width band at its own
   aspect ratio — the same framing a desktop visitor sees, shown whole rather than
   cropped — and the credentials close the section underneath it.

   `display:contents` dissolves the two wrapper divs so the headline, the buttons,
   the photograph and the trust list can be ordered directly. Nothing moves in the
   markup, so the desktop composition and the reading order for assistive tech are
   untouched. */
@media (max-width:1024px){
  .hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;
    padding:0;background:var(--navy-900)}
  .hero .hero__inner,.hero .hero__content{display:contents}
  .hero .kicker{order:1;margin:calc(var(--header-h,118px) + 1.3rem) var(--gutter) 0}
  .hero .hero__content h1, .hero .hero__inner h1{order:2;margin:0 var(--gutter) var(--sp-3);font-size:clamp(2.1rem,8.6vw,2.6rem)}
  .hero .hero__sub{order:3;margin:0 var(--gutter) var(--sp-4)}
  .hero .hero__actions{order:4;margin:0 var(--gutter) .4rem}
  .hero .hero__media{order:5;position:relative;inset:auto;z-index:auto;overflow:hidden;
    aspect-ratio:3/2;margin-top:1.7rem}
  .hero .hero__media img{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center 46%;animation:none}
  .hero .hero__trust{order:6;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1rem;
    border-top:1px solid rgba(255,255,255,.16);padding-top:1.1rem;
    margin:1.5rem var(--gutter) 2.1rem;max-width:none}
  .hero .hero__trust li{font-size:var(--fs-xs);gap:.5rem;align-items:flex-start}
  .hero .hero__trust svg{width:17px;height:17px}
  .hero__scrim,.hero__scroll{display:none}
}

@keyframes heroDrift{from{transform:scale(1.09)}to{transform:scale(1)}}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(7,24,43,.72) 0%,rgba(7,24,43,.34) 34%,rgba(7,24,43,.62) 74%,rgba(5,33,75,.92) 100%),
    linear-gradient(100deg,rgba(5,33,75,.82) 0%,rgba(5,33,75,.28) 58%,rgba(5,33,75,0) 100%);
}
.hero__inner{width:100%;position:relative}
.hero__content{max-width:800px;color:#fff}
.hero h1{color:#fff;margin-bottom:var(--sp-3)}
.hero__sub{font-size:clamp(1.06rem,1.5vw,1.28rem);color:rgba(255,255,255,.86);
  max-width:610px;margin-bottom:var(--sp-4)}
.hero__actions{margin-bottom:var(--sp-5)}

.hero__trust{
  display:grid;grid-template-columns:repeat(4,minmax(0,auto));gap:1rem 2.4rem;
  border-top:1px solid rgba(255,255,255,.2);padding-top:1.5rem;max-width:820px;
}
.hero__trust li{display:flex;align-items:center;gap:.65rem;font-size:var(--fs-sm);
  color:rgba(255,255,255,.9);font-weight:500}
.hero__trust svg{width:19px;height:19px;color:var(--yellow);flex:none}
@media (max-width:860px){.hero__trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.hero__trust{grid-template-columns:1fr}}

.hero__scroll{
  position:absolute;right:var(--gutter);bottom:2rem;display:flex;align-items:center;gap:.7rem;
  font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);
  writing-mode:vertical-rl;transform:rotate(180deg);
}
.hero__scroll i{display:block;width:1px;height:52px;background:linear-gradient(rgba(255,255,255,.55),transparent)}
@media (max-width:1080px){.hero__scroll{display:none}}

/* ------------------------------------------------------- 08 trust marquee */
.trust{padding-block:clamp(1.8rem,3vw,2.6rem);border-bottom:1px solid var(--line);background:#fff}
.trust__head{display:flex;align-items:center;gap:1rem;justify-content:center;margin-bottom:1.5rem;
  font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2);
  font-family:var(--display);font-weight:600}
.trust__head::before,.trust__head::after{content:"";height:1px;background:var(--line);flex:1;max-width:120px}
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee__track{display:flex;width:max-content;align-items:center;gap:clamp(2.2rem,4vw,4rem);
  animation:marquee 46s linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee img{height:clamp(38px,3.6vw,52px);width:auto;object-fit:contain;
  filter:grayscale(1) opacity(.62);transition:filter .35s var(--ease)}
.marquee li:hover img{filter:grayscale(0) opacity(1)}

/* --------------------------------------------------------- 09 intro / stats */
.stat-block{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.stat{background:#fff;padding:clamp(1.3rem,2.4vw,2rem)}
.stat__num{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.85rem);
  color:var(--navy-900);letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:2px}
.stat__num sup{font-size:.5em;font-weight:700;color:var(--blue-700);top:-.35em;position:relative}
.stat__label{margin-top:.6rem;font-size:var(--fs-sm);color:var(--slate);line-height:1.5}
@media (max-width:880px){.stat-block{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.stat-block{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--reverse .split__media{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:2.2rem}
  .split--reverse .split__media{order:0}}

.media-stack{position:relative}
.media-stack__main{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-m)}
.media-stack__main img{width:100%;aspect-ratio:4/3.1;object-fit:cover}
.media-stack__badge{
  position:absolute;right:-14px;bottom:-18px;background:var(--yellow);color:var(--ink);
  border-radius:var(--radius-lg);padding:1rem 1.25rem;box-shadow:var(--shadow-l);max-width:190px;
}
.media-stack__badge b{display:block;font-family:var(--display);font-weight:800;font-size:1.85rem;
  letter-spacing:-.03em;line-height:1}
.media-stack__badge span{display:block;font-size:var(--fs-xs);font-weight:600;margin-top:.3rem;line-height:1.35}
@media (max-width:520px){.media-stack__badge{right:10px;bottom:-14px;padding:.8rem 1rem}}

.ticks{display:grid;gap:.7rem;margin:var(--sp-3) 0 var(--sp-4)}
.ticks li{display:flex;gap:.75rem;align-items:flex-start;font-size:.9688rem;color:var(--ink-soft)}
.ticks svg{width:20px;height:20px;flex:none;color:var(--blue-700);margin-top:.15rem}
.ticks--light li{color:rgba(255,255,255,.84)}
.ticks--light svg{color:var(--yellow)}

/* ------------------------------------------------------------- 10 services */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.8vw,1.5rem)}
@media (max-width:1000px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:660px){.svc-grid{grid-template-columns:1fr}}

.svc{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,2.3vw,2rem);overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.svc::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--blue-700),var(--yellow));transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:var(--line-strong)}
.svc:hover::before{transform:scaleX(1)}
.svc__num{position:absolute;right:1.4rem;top:1.2rem;font-family:var(--display);font-weight:700;
  font-size:var(--fs-xs);letter-spacing:.14em;color:var(--line-strong)}
.svc__icon{width:56px;height:56px;border-radius:var(--radius);background:var(--cloud);
  display:grid;place-items:center;color:var(--blue-700);margin-bottom:1.15rem;
  border:1px solid var(--line);transition:background-color .4s var(--ease),color .4s var(--ease)}
.svc__icon svg{width:28px;height:28px}
.svc:hover .svc__icon{background:var(--navy-900);color:var(--yellow);border-color:var(--navy-900)}
.svc h3{margin-bottom:.55rem;font-size:1.28rem}
.svc p{font-size:.9375rem;color:var(--slate);margin-bottom:1.2rem}
.svc__list{margin:0 0 1.3rem;display:grid;gap:.4rem}
.svc__list li{font-size:.875rem;color:var(--slate-2);padding-left:1rem;position:relative}
.svc__list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--yellow)}
.svc__foot{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line)}
.svc--feature{background:var(--navy-900);border-color:var(--navy-900);color:rgba(255,255,255,.8)}
.svc--feature h3{color:#fff}
.svc--feature p{color:rgba(255,255,255,.72)}
.svc--feature .svc__icon{background:rgba(255,255,255,.1);border-color:var(--line-dark);color:var(--yellow)}
.svc--feature .svc__foot{border-color:var(--line-dark)}
.svc--feature .link-arrow{color:var(--yellow)}

/* -------------------------------------------------------------- 11 systems */
.sysrow{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.sysrow + .sysrow{margin-top:clamp(1.2rem,2.4vw,2rem)}
.sysrow__media{position:relative;min-height:330px;overflow:hidden}
.sysrow__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.sysrow:hover .sysrow__media img{transform:scale(1.045)}
.sysrow__body{padding:clamp(1.6rem,3.2vw,3rem);display:flex;flex-direction:column;justify-content:center}
.sysrow--reverse .sysrow__media{order:2}
@media (max-width:880px){.sysrow{grid-template-columns:1fr}
  .sysrow--reverse .sysrow__media{order:0}
  .sysrow__media{min-height:0;aspect-ratio:16/9}}
.sysrow__meta{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.1rem}
.spec{display:inline-flex;flex-direction:column;background:var(--cloud);border:1px solid var(--line);
  border-radius:var(--radius);padding:.5rem .8rem;min-width:104px}
.spec b{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink);line-height:1.2}
.spec span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);margin-top:2px}

/* -------------------------------------------------------------- 12 process */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,2.2vw,2rem);
  position:relative;counter-reset:step}
.steps::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:var(--line-dark);
  z-index:0}
.step{position:relative;z-index:1;padding-top:0}
.step__dot{width:54px;height:54px;border-radius:50%;background:var(--navy-900);
  border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;margin-bottom:1.2rem;
  font-family:var(--display);font-weight:700;color:var(--yellow);font-size:1rem;
  transition:background-color .4s var(--ease), transform .4s var(--ease)}
.step:hover .step__dot{background:var(--yellow);color:var(--ink);transform:translateY(-3px)}
.step h3{font-size:1.1rem;margin-bottom:.5rem}
.step p{font-size:.9rem;color:rgba(255,255,255,.7)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.steps::before{display:none}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ------------------------------------------------------------- 13 gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1.2vw,1rem);
  align-items:start}
.gal__item{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--cloud);
  cursor:zoom-in;border:0;padding:0;display:block;width:100%}
.gal__item img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/3;
  transition:transform .9s var(--ease), filter .5s var(--ease)}
.gal__item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,24,43,.72));
  opacity:0;transition:opacity .45s var(--ease)}
.gal__item:hover img{transform:scale(1.07)}
.gal__item:hover::after,.gal__item:focus-visible::after{opacity:1}
.gal__cap{position:absolute;left:1rem;right:1rem;bottom:.9rem;z-index:2;color:#fff;text-align:left;
  font-family:var(--display);font-weight:600;font-size:.9rem;opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease)}
.gal__cap span{display:block;font-family:var(--text);font-weight:400;font-size:var(--fs-xs);
  color:rgba(255,255,255,.72);margin-top:2px}
.gal__item:hover .gal__cap,.gal__item:focus-visible .gal__cap{opacity:1;transform:translateY(0)}
.gal__item--tall img{aspect-ratio:4/4.55}
@media (max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}
  .gal__item--tall img{aspect-ratio:4/4}}
@media (max-width:520px){.gal{grid-template-columns:1fr}  .gal__item img,.gal__item--tall img{aspect-ratio:4/3}}

.lightbox{position:fixed;inset:0;z-index:120;background:rgba(4,15,28,.94);
  display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease), visibility .35s}
.lightbox[data-open="true"]{opacity:1;visibility:visible}
.lightbox__img{max-width:min(1180px,94vw);max-height:82vh;width:auto;border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(0,0,0,.5);transform:scale(.965);transition:transform .4s var(--ease)}
.lightbox[data-open="true"] .lightbox__img{transform:scale(1)}
.lightbox__cap{color:rgba(255,255,255,.78);font-size:var(--fs-sm);text-align:center;margin-top:1.1rem}
.lightbox__close{position:absolute;top:1.1rem;right:1.1rem;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);color:#fff;display:grid;place-items:center;
  transition:background-color .25s var(--ease), transform .25s var(--ease)}
.lightbox__close:hover{background:rgba(255,255,255,.14);transform:rotate(90deg)}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border-radius:50%;border:1px solid rgba(255,255,255,.28);color:#fff;display:grid;place-items:center;
  transition:background-color .25s var(--ease)}
.lightbox__nav:hover{background:rgba(255,255,255,.14)}
.lightbox__nav--prev{left:clamp(.6rem,2vw,2rem)}
.lightbox__nav--next{right:clamp(.6rem,2vw,2rem)}

/* ------------------------------------------- 14 reviews / areas / accordion */
.rev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.8vw,1.5rem)}
@media (max-width:1000px){.rev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.rev-grid{grid-template-columns:1fr}}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.4rem,2.2vw,1.9rem);display:flex;flex-direction:column;height:100%}
.review__stars{display:flex;gap:3px;color:#f0b400;margin-bottom:1rem}
.review__stars svg{width:17px;height:17px}
.review p{font-size:.9688rem;color:var(--ink-soft);line-height:1.75}
.review__meta{margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:.75rem}
.review__av{width:38px;height:38px;border-radius:50%;background:var(--navy-900);color:var(--yellow);
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.85rem;flex:none}
.review__name{font-family:var(--display);font-weight:600;color:var(--ink);font-size:.9375rem;line-height:1.3}
.review__svc{font-size:var(--fs-xs);color:var(--slate-2)}
.rating-summary{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.rating-summary__score{font-family:var(--display);font-weight:800;font-size:2.6rem;color:var(--ink);
  letter-spacing:-.03em;line-height:1}
.rating-summary__stars{display:flex;gap:3px;color:#f0b400}
.rating-summary__stars svg{width:19px;height:19px}

.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.6rem;
  list-style:none;padding:0;margin:0}
.area-chip{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:.7rem .95rem;font-size:.9rem;color:var(--ink-soft);
  transition:border-color .3s var(--ease), transform .3s var(--ease), color .3s var(--ease)}
.area-chip svg{width:15px;height:15px;color:var(--blue-700);flex:none}
.area-chip:hover{border-color:var(--blue-700);transform:translateY(-2px);color:var(--ink)}

.faq{display:grid;gap:.75rem;max-width:940px;margin-inline:auto}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;transition:border-color .35s var(--ease), box-shadow .35s var(--ease)}
.faq__item h3{margin:0;font:inherit;letter-spacing:inherit;line-height:inherit}
.faq__q{display:flex;width:100%;text-align:left;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.25rem clamp(1.1rem,2.2vw,1.7rem);cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:600;color:var(--ink);font-size:1.05rem;line-height:1.42;
  transition:color .3s var(--ease)}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--blue-700)}
.faq__mark{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);flex:none;
  display:grid;place-items:center;position:relative;transition:background-color .35s var(--ease),
  border-color .35s var(--ease), transform .35s var(--ease);margin-top:.1rem}
.faq__mark::before,.faq__mark::after{content:"";position:absolute;background:var(--ink);
  transition:transform .35s var(--ease), background-color .35s var(--ease)}
.faq__mark::before{width:11px;height:1.5px}
.faq__mark::after{width:1.5px;height:11px;transition:transform .35s var(--ease), opacity .3s var(--ease)}
.faq__item.is-open{border-color:var(--line-strong);box-shadow:var(--shadow-s)}
.faq__item.is-open .faq__mark{background:var(--yellow);border-color:var(--yellow)}
.faq__item.is-open .faq__mark::after{opacity:0;transform:scaleY(0)}
.faq__item.is-open .faq__q{color:var(--ink)}
.faq__answer-inner{padding:0 clamp(1.1rem,2.2vw,1.7rem) 1.5rem;color:var(--slate);font-size:.9688rem;
  max-width:78ch}
.faq__answer-inner p{margin-bottom:.8rem}
.faq__answer-inner p:last-child{margin-bottom:0}
.faq__answer-inner ul{margin:.6rem 0 .9rem;display:grid;gap:.45rem}
.faq__answer-inner ul li{position:relative;padding-left:1.35rem}
.faq__answer-inner ul li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  background:var(--yellow);border-radius:1px}
.faq__answer-inner table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.9rem}
.faq__answer-inner th,.faq__answer-inner td{padding:.6rem .7rem;text-align:left;
  border-bottom:1px solid var(--line)}
.faq__answer-inner th{background:var(--cloud);font-family:var(--display);font-weight:600;
  color:var(--ink);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase}
.faq__more{margin-top:1rem}
/* smooth expand: 0fr -> 1fr on a grid row (no max-height guessing).
   Only applied once JS is present, so with JS disabled every answer stays readable. */
.js .faq__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .44s var(--ease)}
.js .faq__item.is-open .faq__body{grid-template-rows:1fr}
.faq__body > div{overflow:hidden}

/* ------------------------------------------------------- 15 contact / CTA */
.cta-band{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;isolation:isolate}
.cta-band__bg{position:absolute;inset:0;z-index:-1;opacity:.2}
.cta-band__bg img{width:100%;height:100%;object-fit:cover}
.cta-band__stripes{position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(115deg,rgba(255,212,8,.07) 0 2px,transparent 2px 26px)}
.cta-band h2{color:#fff;max-width:640px}
.cta-band__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:900px){.cta-band__grid{grid-template-columns:1fr}}
.cta-band__call{background:rgba(255,255,255,.06);border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);padding:clamp(1.5rem,2.6vw,2.1rem);backdrop-filter:blur(4px)}
.cta-band__call .t{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,2.6vw,2.1rem);
  color:var(--yellow);letter-spacing:-.02em;line-height:1;display:block;margin:.5rem 0 .35rem}

.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.field{margin-bottom:1.1rem}
.field label{display:block;font-family:var(--display);font-weight:600;font-size:.8125rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.45rem}
.field label .req{color:var(--blue-700)}
.field input,.field select,.field textarea{
  width:100%;background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:.85rem 1rem;font-size:.9688rem;color:var(--ink);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.field textarea{min-height:132px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--slate-2)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue-700);box-shadow:0 0 0 3px rgba(2,84,167,.14)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234a5c72' d='M1.4 1.4 6 6l4.6-4.6L12 2.8 6 8.8 0 2.8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:11px;padding-right:2.6rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.875rem;color:var(--slate);
  margin:1.2rem 0 1.4rem}
.consent input{width:19px;height:19px;flex:none;margin-top:.15rem;accent-color:var(--blue-700)}
.form-note{font-size:var(--fs-xs);color:var(--slate-2);margin-top:1rem}
.form-status{display:none;border-radius:var(--radius);padding:.9rem 1.1rem;font-size:.9375rem;
  margin-bottom:1.2rem}
.form-status[data-state="ok"]{display:block;background:#e9f7f0;border:1px solid #b7e3cd;color:#0c6b4d}
.form-status[data-state="error"]{display:block;background:#fdeceb;border:1px solid #f5c6c2;color:#8f1d12}

.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.4rem,2.4vw,2rem)}
.info-card + .info-card{margin-top:1rem}
.info-list{display:grid;gap:1.05rem}
.info-list li{display:flex;gap:.9rem;align-items:flex-start}
.info-list svg{width:19px;height:19px;color:var(--blue-700);flex:none;margin-top:.28rem}
.info-list b{display:block;font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:.9375rem;margin-bottom:.15rem}
.info-list span,.info-list a{font-size:.9375rem;color:var(--slate);line-height:1.6}
.info-list a:hover{color:var(--blue-700);text-decoration:underline}
.hours{display:grid;gap:.4rem;font-size:.9rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.4rem;
  border-bottom:1px dashed var(--line)}
.hours li:last-child{border-bottom:0;padding-bottom:0}
.hours b{color:var(--ink);font-weight:600}

/* --------------------------------------------------------------- 16 footer */
.site-footer{background:var(--ink);color:rgba(255,255,255,.68);padding-top:clamp(3rem,6vw,5rem)}
.site-footer h4{color:#fff;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:1.15rem;font-weight:600}
.footer__grid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1.15fr;gap:clamp(1.6rem,3.4vw,3rem);
  padding-bottom:clamp(2.2rem,4vw,3.2rem);border-bottom:1px solid var(--line-dark)}
@media (max-width:980px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}
.footer__brand img{height:44px;width:auto;margin-bottom:1.15rem}
.footer__links{display:grid;gap:.6rem;font-size:.9375rem}
.footer__links a:hover{color:var(--yellow)}
.footer__nap{display:grid;gap:.5rem;font-size:.9375rem;line-height:1.65}
.footer__nap a:hover{color:var(--yellow)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding-block:1.5rem;font-size:var(--fs-xs);color:rgba(255,255,255,.5)}
.footer__bottom a:hover{color:var(--yellow)}
.footer__legal{display:flex;gap:1.3rem;flex-wrap:wrap}
.footer__marks{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin-top:1.2rem}
.footer__marks img{height:44px;width:auto;background:#fff;border-radius:4px;padding:5px 8px;
  object-fit:contain}

/* ------------------------------------------------------------ 17 sticky dock */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  background:rgba(7,24,43,.97);border-top:1px solid rgba(255,255,255,.14);
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .45s var(--ease);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.dock[data-show="true"]{transform:translateY(0)}
.dock__inner{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;max-width:640px;margin-inline:auto}
.dock .btn{padding:.85rem 1rem;font-size:.9rem}
@media (max-width:820px){.dock{display:block}body{padding-bottom:76px}}

.totop{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:94;
  width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line-strong);
  display:grid;place-items:center;color:var(--ink);box-shadow:var(--shadow-m);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.totop[data-show="true"]{opacity:1;visibility:visible;transform:translateY(0)}
.totop:hover{background:var(--navy-900);color:var(--yellow);border-color:var(--navy-900)}
@media (max-width:820px){.totop{bottom:86px}}

/* ------------------------------------------------------------ 18 reveal anim */
[data-reveal]{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay:var(--d,0ms)}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translate3d(-28px,0,0)}
[data-reveal="right"]{transform:translate3d(28px,0,0)}
/* Reveal offsets must never widen the scrollable area, so anything that slides in
   horizontally is clipped by its own container rather than by the page. */
@media (max-width:900px){
  [data-reveal="left"],[data-reveal="right"]{transform:translate3d(0,26px,0)}
}
.split,.grid,.shell{max-width:100%}
[data-reveal="scale"]{transform:scale(.955)}
[data-reveal].is-in{opacity:1;transform:none}

.parallax{will-change:transform}

/* ------------------------------------------------------------ 19 utilities */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.text-center{text-align:center}
.mt-0{margin-top:0}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}
.mb-0{margin-bottom:0}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}
.on-ink{color:rgba(255,255,255,.78)}
.divider-y{display:grid;gap:1px;background:var(--line);border-radius:var(--radius-lg);overflow:hidden}
.divider-y > *{background:#fff}

/* ------------------------------------------------------- 20 page templates */
.page-hero{position:relative;padding-top:calc(78px + clamp(3rem,7vw,5.5rem));
  padding-bottom:clamp(2.5rem,5vw,4rem);background:var(--navy-900);color:#fff;overflow:hidden}
.page-hero__bg{position:absolute;inset:0;z-index:0;opacity:.26}
.page-hero__bg img{width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(5,33,75,.94) 0%,rgba(5,33,75,.72) 55%,rgba(5,33,75,.42) 100%)}
.page-hero__inner{position:relative;z-index:2;max-width:820px}
.page-hero h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3.4rem)}
.page-hero p{color:rgba(255,255,255,.82);font-size:clamp(1rem,1.3vw,1.15rem);margin-top:1rem;max-width:640px}

/* ------------------------------------------------------- 20a mobile page headers
   These MUST stay after the .page-hero / .cta-band base rules above, and every rule is
   scoped with its section class so it wins on specificity too. Verified with
   _audit_images_phone2.py: the photograph is no longer cropped on phones. */
@media (max-width:660px){
  .page-hero,.cta-band{padding-bottom:calc(100vw / 2.33 + 1.4rem)}
  .page-hero .page-hero__bg,.cta-band .cta-band__bg{
    inset:auto 0 0 0;height:auto;aspect-ratio:233/100;opacity:1}
  .page-hero .page-hero__bg::after,.cta-band .cta-band__bg::after{content:"";position:absolute;
    inset:0;z-index:1;background:linear-gradient(180deg,var(--navy-900) 0%,
    rgba(5,33,75,.68) 34%,rgba(5,33,75,0) 82%)}
  .page-hero .page-hero__bg img,.cta-band .cta-band__bg img{object-fit:cover}
  .page-hero::after{display:none}
}

.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:var(--fs-xs);
  color:rgba(255,255,255,.6);margin-bottom:1.2rem}
.crumbs a:hover{color:var(--yellow)}
.crumbs li{display:flex;align-items:center;gap:.5rem}
.crumbs li+li::before{content:"/";color:rgba(255,255,255,.3)}

.prose{max-width:74ch}
.prose h2{margin-top:clamp(2rem,4vw,3rem);margin-bottom:.9rem}
.prose h3{margin-top:1.9rem;margin-bottom:.7rem}
.prose p,.prose li{color:var(--ink-soft)}
.prose ul{margin:1rem 0 1.4rem;display:grid;gap:.55rem}
.prose ul li{position:relative;padding-left:1.5rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  background:var(--yellow);border-radius:1px}
.prose ol{counter-reset:ol;margin:1rem 0 1.4rem;display:grid;gap:.7rem}
.prose ol li{position:relative;padding-left:2.4rem;counter-increment:ol}
.prose ol li::before{content:counter(ol,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-family:var(--display);font-weight:700;font-size:.8125rem;color:var(--blue-700)}
.prose blockquote{margin:1.6rem 0;padding:1.2rem 1.5rem;border-left:3px solid var(--yellow);
  background:var(--paper);border-radius:0 var(--radius) var(--radius) 0;
  font-size:1.05rem;color:var(--ink-soft)}
.prose blockquote p{margin:0}
.prose table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.9375rem}
.prose th,.prose td{padding:.8rem .9rem;text-align:left;border-bottom:1px solid var(--line)}
.prose th{background:var(--cloud);font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase}
.prose td:first-child{color:var(--ink);font-weight:500}

.sidebar{display:grid;gap:1rem;position:sticky;top:110px}
.sidebar__card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem}
.sidebar__card h3{font-size:1.05rem;margin-bottom:.9rem}
.sidebar__links{display:grid;gap:.15rem}
.sidebar__links a{display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:.6rem .7rem;border-radius:var(--radius);font-size:.9375rem;color:var(--ink-soft);
  transition:background-color .25s var(--ease), color .25s var(--ease)}
.sidebar__links a:hover{background:var(--cloud);color:var(--ink)}
.sidebar__links a[aria-current="page"]{background:var(--navy-900);color:#fff;font-weight:600}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(2rem,4vw,3.5rem);
  align-items:start}
@media (max-width:980px){.two-col{grid-template-columns:1fr}.sidebar{position:static}}

.cards-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
@media (max-width:720px){.cards-2{grid-template-columns:1fr}}
.mini{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem}
.mini h4{margin-bottom:.5rem}
.mini p{font-size:.9375rem;margin:0}
.mini__ico{width:42px;height:42px;border-radius:var(--radius);background:var(--cloud);
  display:grid;place-items:center;color:var(--blue-700);margin-bottom:1rem;border:1px solid var(--line)}
.mini__ico svg{width:21px;height:21px}

.notfound{min-height:76svh;display:grid;place-items:center;text-align:center;padding-top:120px}
.notfound h1{font-size:clamp(3.2rem,10vw,6rem);color:var(--navy-900);margin-bottom:.6rem}


/* ------------------------------------------------- 22 accreditation list */
.accred-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
@media (max-width:900px){.accred-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.accred-list{grid-template-columns:1fr}}
.accred{background:#fff;display:flex;align-items:center;gap:1.05rem;padding:clamp(1.1rem,2vw,1.5rem);
  transition:background-color .35s var(--ease)}
.accred:hover{background:var(--paper)}
.accred__mark{width:74px;height:60px;flex:none;display:grid;place-items:center;
  border-radius:var(--radius);background:#fff}
.accred__mark img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.accred__text b{display:block;font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:.9375rem;line-height:1.35;margin-bottom:.15rem}
.accred__text span{display:block;font-size:var(--fs-xs);color:var(--slate-2);line-height:1.45}

/* ------------------------------------------------- 23 misc page components */
.towns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 3.2rem;
  column-rule:1px solid var(--line)}
@media (max-width:820px){.towns{grid-template-columns:1fr;column-rule:0}}
.town{margin-bottom:2.2rem;scroll-margin-top:130px;break-inside:avoid}
.town h3{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.5rem}
.town h3::before{content:"";width:9px;height:9px;background:var(--yellow);border-radius:2px;
  flex:none;transform:translateY(-2px)}
.town p{font-size:.9688rem}
.town:last-child{margin-bottom:0}

.quotebox{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--yellow);
  border-radius:0 var(--radius) var(--radius) 0;padding:1.4rem 1.6rem;margin:1.6rem 0;
  font-size:1.02rem;color:var(--ink-soft)}
.quotebox footer{margin-top:.9rem;font-size:var(--fs-xs);color:var(--slate-2);
  letter-spacing:.06em;text-transform:uppercase;font-weight:600}

.factbox{background:var(--navy-900);color:rgba(255,255,255,.8);border-radius:var(--radius-lg);
  padding:clamp(1.4rem,2.6vw,2rem);margin:1.8rem 0}
.factbox h3{color:#fff;font-size:1.05rem;margin-bottom:.9rem;letter-spacing:.02em}
.factbox dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.4rem;margin:0;font-size:.9375rem}
.factbox dt{color:rgba(255,255,255,.55);font-weight:500}
.factbox dd{margin:0;color:#fff;font-weight:500}
@media (max-width:520px){.factbox dl{grid-template-columns:1fr;gap:.15rem .0}
  .factbox dd{margin-bottom:.6rem}}

.wide-fig{margin:1.8rem 0}
.wide-fig figcaption{font-size:var(--fs-xs);color:var(--slate-2);margin-top:.7rem;line-height:1.5}

.timeline{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;margin:1.6rem 0}
.timeline li{background:#fff;display:grid;grid-template-columns:150px 1fr;gap:1.2rem;
  padding:1rem 1.3rem;font-size:.9375rem}
.timeline b{font-family:var(--display);color:var(--ink);font-weight:600}
@media (max-width:560px){.timeline li{grid-template-columns:1fr;gap:.25rem}}

.price-table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.9375rem;
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.price-table th,.price-table td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
.price-table th{background:var(--cloud);font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.price-table td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}
.price-table tr:last-child td{border-bottom:0}

.note{font-size:var(--fs-xs);color:var(--slate-2);line-height:1.6}

.legal{max-width:76ch;counter-reset:h2}
.legal h2{font-size:clamp(1.35rem,2.2vw,1.7rem);margin-top:2.6rem;padding-top:1.4rem;
  border-top:1px solid var(--line)}
.legal h2:first-of-type{margin-top:0;border-top:0;padding-top:0}
.legal h3{font-size:1.05rem;margin-top:1.6rem;margin-bottom:.5rem}
.legal p,.legal li{font-size:.9688rem}
.legal ul,.legal ol{margin:.9rem 0 1.2rem;display:grid;gap:.5rem}
.legal ul li{position:relative;padding-left:1.4rem}
.legal ul li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  background:var(--yellow);border-radius:1px}
.legal ol{counter-reset:l;list-style:none}
.legal ol li{counter-increment:l;position:relative;padding-left:2.2rem}
.legal ol li::before{content:counter(l) ".";position:absolute;left:0;top:0;font-family:var(--display);
  font-weight:700;color:var(--blue-700);font-size:.875rem}
.legal-table{width:100%;border-collapse:collapse;font-size:.9rem;margin:1.2rem 0}
.legal-table th,.legal-table td{padding:.7rem .9rem;border:1px solid var(--line);text-align:left;
  vertical-align:top}
.legal-table th{background:var(--cloud);font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:.78rem;letter-spacing:.05em;text-transform:uppercase}


/* ------------------------------------------------- 24 work / project blocks */
.job{padding-block:clamp(2rem,4vw,3.2rem);border-top:1px solid var(--line)}
.job:first-of-type{border-top:0;padding-top:0}
.job__head{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-end;
  justify-content:space-between;margin-bottom:1.4rem}
.job__head h2{font-size:clamp(1.35rem,2.1vw,1.7rem);margin-bottom:.4rem}
.job__head p{max-width:62ch;font-size:.9375rem;margin:0}
.job__place{display:flex;align-items:center;gap:.45rem;font-family:var(--display);font-weight:600;
  font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-700);
  margin-bottom:.5rem!important}
.job__place svg{width:15px;height:15px}
.job__tag{font-size:var(--fs-xs);color:var(--slate-2);border:1px solid var(--line);
  border-radius:100px;padding:.3rem .75rem;white-space:nowrap}
.gal--job{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.gal--job .gal__item img{aspect-ratio:4/3}

.ba{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--cloud)}
.ba img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ba figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.5rem;
  background:linear-gradient(transparent,rgba(4,15,28,.92));color:rgba(255,255,255,.82);
  font-size:.9rem;line-height:1.55}
.ba figcaption b{display:block;font-family:var(--display);font-weight:700;color:var(--yellow);
  font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.35rem}
@media (max-width:520px){.ba figcaption{padding:1rem 1.1rem;font-size:.85rem}}

.client{background:#fff;border-radius:var(--radius);display:grid;place-items:center;
  padding:1.1rem;min-height:112px}
.client img{max-height:70px;width:auto;object-fit:contain;
  filter:grayscale(1) opacity(.86);transition:filter .4s var(--ease)}
.client:hover img{filter:grayscale(0) opacity(1)}

.faq-group{margin-bottom:clamp(2rem,4vw,3.4rem)}
.faq-group:last-of-type{margin-bottom:0}
.faq-group__title{font-size:clamp(1.15rem,1.7vw,1.4rem);margin-bottom:1rem;
  padding-bottom:.7rem;border-bottom:2px solid var(--yellow);display:inline-block}

.split--wide-text{grid-template-columns:1.4fr 1fr}
@media (max-width:900px){.split--wide-text{grid-template-columns:1fr}}


/* ---------------------------------------- 25 small-screen header behaviour */
@media (max-width:900px){
  .topbar__list li:nth-child(3){display:none}
}
@media (max-width:700px){
  .topbar__inner{gap:1rem}
  .topbar__list{flex-wrap:nowrap;overflow:hidden;gap:1rem}
  .topbar__list li:nth-child(2){display:none}
  .topbar__list li{font-size:12px;white-space:nowrap}
  .topbar{font-size:12px}
  .brand img{height:32px}
  .site-header[data-state="stuck"] .brand img{height:30px}
  .header__bar{min-height:66px;gap:.75rem}
  .site-header[data-state="stuck"] .header__bar{min-height:60px}
  .header__cta .btn{display:none}
  .header__cta{gap:.5rem}
  .nav-toggle{width:44px;height:44px}
  .nav-toggle span:nth-child(1){top:15px}
  .nav-toggle span:nth-child(2){top:21px}
  .nav-toggle span:nth-child(3){top:27px}
  .nav-toggle[aria-expanded="true"] span:nth-child(1),
  .nav-toggle[aria-expanded="true"] span:nth-child(3){top:21px}
  .drawer__link{font-size:1.2rem}
}
@media (max-width:430px){
  .topbar__list li:nth-child(1){display:none}
  .brand img{height:29px}
  .brand{gap:.45rem}
}
@media (max-width:360px){
  .topbar__list{display:none}
}

input[type="file"]{padding:.55rem .7rem;cursor:pointer}
input[type="file"]::file-selector-button{
  font-family:var(--display);font-weight:700;font-size:.8125rem;letter-spacing:.01em;
  padding:.62rem 1rem;margin-right:.85rem;border:0;border-radius:var(--radius);
  background:var(--navy-900);color:#fff;cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease)}
input[type="file"]::file-selector-button:hover{background:var(--blue-700)}
input[type="file"]:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px}
input[type="file"]:focus-visible::file-selector-button{background:var(--blue-700)}
.legal p,.legal li{max-width:74ch}
.legal-table{width:100%;border-collapse:collapse;margin:1.4rem 0 1.8rem;font-size:.9375rem}
.legal-table th{background:var(--navy-900);color:#fff;font-family:var(--display);font-weight:600;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;text-align:left}
.legal-table th,.legal-table td{padding:.75rem .9rem;border:1px solid var(--line);vertical-align:top}
.legal-table tr:nth-child(even) td{background:var(--paper)}
.legal ol,.legal ul{margin:1rem 0 1.4rem 1.2rem}
.legal li{margin-bottom:.5rem}
.legal h3{font-size:1.02rem;margin:1.6rem 0 .6rem}

/* ------------------------------------------------ 26 consent + form fallback */
.consent-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--navy-900);color:rgba(255,255,255,.9);
  padding:1rem var(--gutter);box-shadow:0 -8px 30px rgba(4,15,28,.28);
  transform:translateY(105%);transition:transform .5s var(--ease);visibility:hidden}
.consent-bar[data-show="true"]{transform:none;visibility:visible}
.consent-bar__inner{max-width:var(--shell);margin-inline:auto;display:flex;flex-wrap:wrap;
  gap:.9rem 1.4rem;align-items:center;justify-content:space-between}
.consent-bar p{margin:0;font-size:.875rem;line-height:1.55;max-width:62ch;color:rgba(255,255,255,.86)}
.consent-bar a{color:var(--yellow);text-decoration:underline}
.consent-bar__actions{display:flex;gap:.6rem;flex:0 0 auto}
.consent-bar .btn{padding:.7rem 1.2rem;font-size:.84rem}
.btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff}
@media (max-width:640px){
  .consent-bar__inner{flex-direction:column;align-items:stretch}
  .consent-bar__actions{display:grid;grid-template-columns:1fr 1fr}
  .consent-bar .btn{width:100%;justify-content:center}
}

.form-fallback{margin-top:1rem;padding:1.1rem 1.2rem;border:1px solid var(--line);
  border-left:3px solid var(--blue-700);border-radius:0 var(--radius) var(--radius) 0;
  background:var(--paper);font-size:.9375rem;color:var(--ink-soft)}
.form-fallback[hidden]{display:none}
.form-fallback strong{color:var(--ink)}
.form-fallback ul{margin:.7rem 0 0;padding-left:1.15rem;display:grid;gap:.35rem}
.form-fallback a{color:var(--blue-700);font-weight:600;text-decoration:underline}

/* the enquiry form is long; keep the submit button reachable while it posts */
.form-status[data-state="ok"]{color:#1c6a3f;font-weight:600}
.form-status[data-state="error"]{color:#a1281f;font-weight:600}
.form-status:not(:empty){margin-bottom:1rem}

/* ------------------------------------------------------- 21 reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .hero__media img{animation:none;transform:none}
  .marquee__track{animation:none}
}
@media print{
  .site-header,.dock,.totop,.drawer,.marquee,.site-footer__cta{display:none!important}
  body{color:#000}
  [data-reveal]{opacity:1!important;transform:none!important}
}

/* Phone browsers in “Desktop site” mode use a ~980px layout viewport. A badge
   offset 14px beyond the media card then reaches 3px beyond the page edge on the
   residential layout. Keep the overlap, but inward, before the full desktop nav. */
@media (max-width:1100px){.media-stack__badge{right:0}}

/* Contact layouts become too narrow in a ~980px Android “Desktop site” viewport:
   long select values and the native file-control label were being truncated. */
@media (max-width:1020px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:1100px){.field-row--files{grid-template-columns:1fr}}

/* The generic timeline uses a pale background. Inside the navy contact card that
   made white copy almost disappear; the dark variant owns its complete palette. */
.timeline--dark{background:var(--line-dark);border-color:var(--line-dark)}
.timeline--dark li{background:var(--navy-800);color:rgba(255,255,255,.88)}
.timeline--dark b{color:var(--yellow)}