/* ==========================================================================
   Excellent Choice Painting & Decorating Inc.
   Restraint: white paper, one navy, one green used sparingly, one typeface.
   The photographs carry the colour. Nothing else does.
   ========================================================================== */

/* Libre Franklin, self-hosted. Latin subset, four weights, SIL Open Font License (fonts/OFL.txt). */
@font-face{ font-family:"Libre Franklin"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/libre-franklin-400.woff2") format("woff2"); }
@font-face{ font-family:"Libre Franklin"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/libre-franklin-500.woff2") format("woff2"); }
@font-face{ font-family:"Libre Franklin"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/libre-franklin-600.woff2") format("woff2"); }
@font-face{ font-family:"Libre Franklin"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/libre-franklin-700.woff2") format("woff2"); }

:root{
  --paper:  #FFFFFF;
  --paper2: #F7F7F4;
  --paper3: #EFEFEA;
  --ink:    #15171C;
  --body:   #52565F;
  --muted:  #6B6F78;   /* 5.0:1 on white, 4.7:1 on paper2 — WCAG AA for small text */
  --line:   #E3E3DD;
  --line2:  #D2D2CA;

  --navy:   #2E3192;   /* from the logo */
  --navy-d: #1C1E5C;
  --green:  #00A651;   /* from the logo swoosh — used at trace amounts, never as text */
  --green-t:#047A3A;   /* the same green darkened to 5.4:1 for the few places it is text */

  --font: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(20px, 5vw, 72px);
  --sec: clamp(60px, 8vw, 118px);
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.68;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; }
a{ color:inherit; }
::selection{ background:var(--navy); color:#fff; }
:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }
.dark :focus-visible,.navy :focus-visible,.hero :focus-visible,.banner :focus-visible,.ftr :focus-visible,
.lb :focus-visible,.callbar :focus-visible{ outline-color:#fff; }
.btn:focus-visible{ outline-offset:3px; }

/* Skip link — the first tab stop on every page */
.skip{ position:absolute; left:16px; top:-60px; z-index:3000; padding:12px 18px;
  background:var(--navy); color:#fff; font-weight:600; font-size:.93rem; text-decoration:none;
  transition:top .15s; }
.skip:focus{ top:12px; outline:2px solid #fff; outline-offset:2px; }
#content:focus{ outline:none; }

/* Honeypot — present in the DOM for bots, off-canvas for everyone else */
.hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ---------- Type ---------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--font);
  color:var(--ink);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.021em;
  margin:0 0 .55em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.15rem, 4.3vw, 3.65rem); line-height:1.08; }
h2{ font-size:clamp(1.72rem, 3.1vw, 2.7rem); }
h3{ font-size:clamp(1.12rem, 1.6vw, 1.34rem); letter-spacing:-.012em; }
h4{ font-size:1rem; letter-spacing:0; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.lede{ font-size:clamp(1.03rem, 1.35vw, 1.17rem); line-height:1.68; max-width:64ch; }
.narrow{ max-width:66ch; }

/* Section label — a small rule and a word. That is the whole system. */
.label{
  font-size:.70rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 18px;
  padding-top:14px;
  border-top:2px solid var(--green);
  display:inline-block;
}

/* ---------- Layout -------------------------------------------------------- */

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sec); }
.section--tight{ padding-block:clamp(42px,5.5vw,74px); }
.tint{ background:var(--paper2); }
.rule{ border-top:1px solid var(--line); }

.dark{ background:var(--ink); color:#C8CBD2; }
.dark h1,.dark h2,.dark h3,.dark h4{ color:#fff; }
.dark .label{ color:#9195A0; }

.navy{ background:var(--navy-d); color:#C6C8E4; }
.navy h1,.navy h2,.navy h3,.navy h4{ color:#fff; }
.navy .label{ color:#9EA1CB; }

.grid{ display:grid; gap:clamp(22px,3vw,44px); }
.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)); }
.split{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; gap:clamp(26px,5vw,80px); }
.split--even{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; }
@media (max-width:900px){ .g2,.g3,.g4,.split,.split--even{ grid-template-columns:1fr; } }
@media (max-width:1100px) and (min-width:901px){ .g4{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Buttons ------------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.93rem; font-weight:600; letter-spacing:.005em;
  padding:14px 26px;
  background:var(--navy); color:#fff;
  border:1px solid var(--navy);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn:hover{ background:var(--navy-d); border-color:var(--navy-d); }
.btn--line{ background:transparent; color:var(--ink); border-color:var(--line2); }
.btn--line:hover{ background:transparent; border-color:var(--ink); color:var(--ink); }
.dark .btn--line,.navy .btn--line,.hero .btn--line,.banner .btn--line{ color:#fff; border-color:rgba(255,255,255,.4); }
.dark .btn--line:hover,.navy .btn--line:hover,.hero .btn--line:hover,.banner .btn--line:hover{ border-color:#fff; color:#fff; background:transparent; }
.btn--lg{ padding:17px 32px; font-size:1rem; }

.tlink{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:.94rem; color:var(--navy); text-decoration:none;
  border-bottom:1px solid var(--line2); padding-bottom:3px;
  transition:border-color .22s;
}
.tlink:hover{ border-color:var(--navy); }
.dark .tlink,.navy .tlink{ color:#fff; border-color:rgba(255,255,255,.35); }
.dark .tlink:hover,.navy .tlink:hover{ border-color:#fff; }

/* ---------- Header -------------------------------------------------------- */

.hdr{
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr__in{ max-width:var(--maxw); margin-inline:auto; padding:14px var(--gut);
  display:flex; align-items:center; gap:24px; }
.hdr__logo img{ height:38px; width:auto; }
.hdr__nav{ display:flex; align-items:center; gap:24px; margin-left:auto; }
.hdr__nav a{ font-size:.92rem; font-weight:500; color:var(--ink); text-decoration:none;
  white-space:nowrap; padding:4px 0; border-bottom:2px solid transparent; transition:border-color .2s; }
.hdr__nav a:hover,.hdr__nav a[aria-current="page"]{ border-bottom-color:var(--navy); }
.hdr__tel{ font-weight:600; font-size:.92rem; text-decoration:none; white-space:nowrap; }
.hdr__nav a.btn{ color:#fff; border-bottom-color:transparent; padding:11px 20px; font-size:.87rem; }
.hdr__nav a.btn:hover{ border-bottom-color:transparent; }

.burger{ display:none; margin-left:auto; width:44px; height:38px; background:none;
  border:1px solid var(--line2); cursor:pointer; padding:0; position:relative; }
.burger span{ position:absolute; left:11px; right:11px; height:2px; background:var(--ink);
  transition:transform .28s var(--ease), opacity .2s; }
.burger span:nth-child(1){ top:13px } .burger span:nth-child(2){ top:18px } .burger span:nth-child(3){ top:23px }
body.nav-open .burger span:nth-child(1){ transform:translateY(5px) rotate(45deg) }
body.nav-open .burger span:nth-child(2){ opacity:0 }
body.nav-open .burger span:nth-child(3){ transform:translateY(-5px) rotate(-45deg) }

@media (max-width:1080px){
  .burger{ display:block; }
  .hdr__nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:4px var(--gut) 24px;
    transform:translateY(-135%); transition:transform .38s var(--ease);
    max-height:calc(100dvh - 68px); overflow-y:auto; z-index:-1;
  }
  body.nav-open .hdr__nav{ transform:translateY(0); }
  .hdr__nav a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:1.03rem; }
  .hdr__nav a:hover{ border-bottom-color:var(--line); }
  .hdr__tel{ display:none; }
  .hdr__nav a.btn{ margin-top:18px; justify-content:center; }
}

/* ---------- Intro: the logo resolves on paper, then the paper lifts --------- */
/* One colour (the paper), one mark (the logo), one 2px green rule — the same
   vocabulary as the section labels. Nothing here that the rest of the site
   would not do. 1.25s total; the page is already composed underneath by 600ms. */

#curtain{ position:fixed; inset:0; z-index:2000; pointer-events:none; }

#curtain .cpanel{
  position:absolute; inset:0; background:var(--paper);
  display:grid; place-items:center;
  transform:translateY(0);
  animation:cpanel .62s .60s cubic-bezier(.76,0,.18,1) forwards;
}
@keyframes cpanel{ to{ transform:translateY(-101%) } }

#curtain .cmark{ display:grid; justify-items:center; gap:18px; width:min(58vw,300px);
  opacity:0; transform:translateY(6px);
  animation:cmIn .44s .04s var(--ease) forwards; }
#curtain .cmark img{ width:100%; height:auto; }
@keyframes cmIn{ to{ opacity:1; transform:none } }

/* the rule draws left to right under the mark, then the panel takes it away */
#curtain .crule{ display:block; width:48px; height:2px; background:var(--green);
  transform:scaleX(0); transform-origin:left;
  animation:crule .34s .30s var(--ease) forwards; }
@keyframes crule{ to{ transform:scaleX(1) } }

body.curtain-live{ overflow:hidden; }

/* ---------- Reveal -------------------------------------------------------- */

.rv{ opacity:0; transform:translateY(18px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv[data-d="1"]{ transition-delay:.07s } .rv[data-d="2"]{ transition-delay:.14s }
.rv[data-d="3"]{ transition-delay:.21s } .rv[data-d="4"]{ transition-delay:.28s }
.rv[data-d="5"]{ transition-delay:.35s }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0s !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; }
  #curtain{ display:none; }
}

/* ---------- Hero ---------------------------------------------------------- */

.hero{ position:relative; background:var(--ink); color:#fff; isolation:isolate; }
.hero__img{ position:absolute; inset:0; z-index:-2; }
.hero__img img{ width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(12,13,18,.93) 0%, rgba(12,13,18,.80) 46%, rgba(12,13,18,.40) 100%);
}
.hero__in{ padding-block:clamp(76px,11vw,150px); max-width:790px; }
.hero h1{ color:#fff; margin-bottom:22px; }
.hero .lede{ color:#D3D6DC; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:34px; }
.hero .label{ color:#A8ACB5; }
@media (max-width:760px){
  .hero::after{ background:linear-gradient(180deg, rgba(12,13,18,.90) 0%, rgba(12,13,18,.86) 60%, rgba(12,13,18,.78) 100%); }
}

.banner{ background:var(--ink); color:#C8CBD2; padding-block:clamp(50px,7vw,90px); }
.banner h1{ color:#fff; }
.banner .lede{ color:#C0C4CC; }
.banner .label{ color:#9195A0; }
.crumbs{ font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:#8B8F98; margin-bottom:18px; }
.crumbs a{ color:#8B8F98; text-decoration:none; }
.crumbs a:hover{ color:#fff; }

/* ---------- Stat strip ---------------------------------------------------- */

.stats{ border-bottom:1px solid var(--line); }
.stats__in{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:clamp(26px,3.4vw,44px) clamp(14px,2vw,30px); border-left:1px solid var(--line); }
.stat:first-child{ border-left:0; padding-left:0; }
.stat__n{ font-size:clamp(1.8rem,3.3vw,2.6rem); font-weight:700; color:var(--ink);
  line-height:1; letter-spacing:-.03em; }
.stat__l{ font-size:.79rem; color:var(--muted); margin-top:11px; line-height:1.5; letter-spacing:.02em; }
@media (max-width:760px){
  .stats__in{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:0; }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .stat:first-child,.stat:nth-child(3){ padding-left:0; }
}

/* ---------- Service cards ------------------------------------------------- */

.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(20px,2.4vw,34px); }
.card{ text-decoration:none; display:flex; flex-direction:column; }
.card__img{ overflow:hidden; background:var(--paper3); aspect-ratio:4/3; }
.card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.card:hover .card__img img{ transform:scale(1.04); }
.card h3{ margin:20px 0 9px; }
.card p{ font-size:.95rem; margin:0; }
.card__more{ margin-top:16px; font-size:.87rem; font-weight:600; color:var(--navy); }

/* ---------- Feature rows -------------------------------------------------- */

.frow{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,4.5vw,72px); align-items:center; }
.frow + .frow{ margin-top:clamp(46px,6vw,92px); }
.frow--flip .frow__t{ order:2; }
@media (max-width:900px){
  .frow{ grid-template-columns:1fr; }
  .frow--flip .frow__t{ order:0; }
}
.frow__i img{ width:100%; aspect-ratio:5/4; object-fit:cover; }
.flist{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:11px; }
.flist li{ position:relative; padding-left:22px; font-size:.97rem; }
.flist li::before{ content:""; position:absolute; left:0; top:12px; width:10px; height:1px; background:var(--green); }

/* ---------- Subdivisions -------------------------------------------------- */

.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.filters button{ font-size:.82rem; font-weight:500; padding:9px 16px; cursor:pointer;
  border:1px solid var(--line2); background:transparent; color:var(--body);
  font-family:var(--font); transition:all .2s; }
.filters button:hover{ border-color:var(--ink); color:var(--ink); }
.filters button.on{ background:var(--ink); border-color:var(--ink); color:#fff; }

.subs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(256px,1fr));
  border-top:1px solid var(--line); border-left:1px solid var(--line); }
.sub{ padding:22px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px; }
.sub__name{ font-weight:700; color:var(--ink); font-size:1.08rem; letter-spacing:-.01em; }
.sub__city{ font-size:.82rem; color:var(--muted); margin-top:3px; }
.sub__lots{ font-size:1.35rem; font-weight:700; color:var(--ink); line-height:1; white-space:nowrap; }
.sub__lots small{ display:block; font-size:.62rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-top:5px; }
.sub__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.sub__meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.sub__meta span{ font-size:.72rem; border:1px solid var(--line); padding:4px 9px; color:var(--muted); }
.sub__tbd{ background:var(--paper3); }

/* ---------- Gallery ------------------------------------------------------- */

/* One uniform tile, same ratio as the section strips, so every row is complete and the
   grid reads as a grid. Ragged column bottoms were the thing he disliked. */
.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:1100px){ .gal{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:700px){ .gal{ grid-template-columns:repeat(2,1fr); gap:9px } }
.gal figure{ margin:0; aspect-ratio:4/3; overflow:hidden; cursor:zoom-in;
  background:var(--paper3); opacity:0; transition:opacity .5s var(--ease); }
.gal figure.in{ opacity:1; }
.zoom{ display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.zoom:focus-visible{ outline:3px solid var(--navy); outline-offset:-3px; }
.gal img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease); }
.gal figure:hover img{ transform:scale(1.035); }
.gal figcaption{ display:none; }

.lb{ position:fixed; inset:0; z-index:1500; background:rgba(15,16,20,.97); display:none; place-items:center; }
.lb.on{ display:grid }
.lb img{ max-width:92vw; max-height:82vh; object-fit:contain }
.lb__x,.lb__p,.lb__n{ position:absolute; background:none; border:1px solid rgba(255,255,255,.28);
  color:#fff; width:46px; height:46px; cursor:pointer; font-size:1.05rem; display:grid; place-items:center }
.lb__x{ top:18px; right:18px } .lb__p{ left:14px; top:50%; transform:translateY(-50%) }
.lb__n{ right:14px; top:50%; transform:translateY(-50%) }
.lb__c{ position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#9195A0; font-size:.8rem }

/* ---------- Builders + quotes --------------------------------------------- */


.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(22px,2.6vw,40px); }
.quote{ display:flex; flex-direction:column; gap:18px; margin:0; }
.quote__t{ font-size:1.02rem; line-height:1.66; color:var(--ink); margin:0;
  padding-top:20px; border-top:2px solid var(--green); }
.dark .quote__t,.navy .quote__t{ color:#fff; }
.quote__a{ margin-top:auto; }
.quote__a b{ display:block; font-size:.95rem; color:var(--ink); }
.dark .quote__a b,.navy .quote__a b{ color:#fff; }
.quote__a span{ font-size:.82rem; color:var(--muted); }
.navy .quote__a span{ color:#9EA1CB; }

/* ---------- Disclosures — obviously clickable ----------------------------- */

.faq{ border-top:1px solid var(--line); }
.dark .faq,.navy .faq{ border-top-color:rgba(255,255,255,.15); }

.faq details{ border-bottom:1px solid var(--line); transition:background .25s var(--ease); }
.dark .faq details,.navy .faq details{ border-bottom-color:rgba(255,255,255,.15); }
.faq details:hover{ background:var(--paper2); }
.dark .faq details:hover,.navy .faq details:hover{ background:rgba(255,255,255,.045); }
.faq details[open]{ background:var(--paper2); }
.dark .faq details[open],.navy .faq details[open]{ background:rgba(255,255,255,.045); }

.faq summary{
  cursor:pointer; list-style:none; position:relative;
  display:flex; align-items:center; gap:16px;
  padding:20px clamp(14px,2vw,22px) 20px clamp(14px,2vw,22px);
  font-weight:600; font-size:1.03rem; color:var(--ink);
  transition:color .2s;
}
.dark .faq summary,.navy .faq summary{ color:#fff; }
.faq summary::-webkit-details-marker{ display:none; }

/* the label that tells people this opens */
.faq summary::before{
  content:"See more";
  order:2; margin-left:auto;
  font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--navy); white-space:nowrap;
  opacity:.62; transition:opacity .2s, color .2s;
}
.dark .faq summary::before,.navy .faq summary::before{ color:#9EA1CB; }
.faq details[open] summary::before{ content:"Close"; }
.faq details:hover summary::before{ opacity:1; }

/* the control */
.faq summary::after{
  content:""; order:3; flex:none;
  width:30px; height:30px; border:1px solid var(--line2); border-radius:50%;
  background:
    linear-gradient(var(--navy),var(--navy)) center/11px 1.6px no-repeat,
    linear-gradient(var(--navy),var(--navy)) center/1.6px 11px no-repeat;
  transition:transform .3s var(--ease), border-color .2s, background-size .3s var(--ease);
}
.dark .faq summary::after,.navy .faq summary::after{
  border-color:rgba(255,255,255,.3);
  background:
    linear-gradient(#fff,#fff) center/11px 1.6px no-repeat,
    linear-gradient(#fff,#fff) center/1.6px 11px no-repeat;
}
.faq details:hover summary::after{ border-color:var(--navy); }
.dark .faq details:hover summary::after,.navy .faq details:hover summary::after{ border-color:#fff; }
.faq details[open] summary::after{ transform:rotate(135deg); }

/* a green marker on the open item */
.faq summary{ border-left:2px solid transparent; }
.faq details[open] summary{ border-left-color:var(--green); }

.faq p{ padding:0 clamp(14px,2vw,22px) 24px calc(clamp(14px,2vw,22px) + 2px);
  max-width:78ch; font-size:.97rem; }
.dark .faq p,.navy .faq p{ color:#C0C4CC; }

/* ---------- Form ---------------------------------------------------------- */

.form{ display:grid; gap:15px; grid-template-columns:1fr 1fr; }
.form .full{ grid-column:1/-1 }
@media (max-width:700px){ .form{ grid-template-columns:1fr } }
.field label{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.04em;
  color:var(--body); margin-bottom:7px; }
.field input,.field select,.field textarea{
  width:100%; padding:13px 14px; background:#fff; border:1px solid var(--line2);
  color:var(--ink); font-family:var(--font); font-size:1rem; border-radius:0;
  transition:border-color .2s;
}
.field textarea{ min-height:118px; resize:vertical }
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ outline:2px solid var(--navy); outline-offset:1px; border-color:var(--navy) }
.dark .field input:focus-visible,.dark .field select:focus-visible,.dark .field textarea:focus-visible,
.navy .field input:focus-visible,.navy .field select:focus-visible,.navy .field textarea:focus-visible{ outline-color:#fff; border-color:#fff }
.field fieldset{ border:0; padding:0; margin:0; min-width:0; }
.field legend{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.04em; color:var(--body); margin-bottom:7px; padding:0; }
.dark .field legend,.navy .field legend{ color:#A8ACB5 }
.dark .field label,.navy .field label{ color:#A8ACB5 }
.dark .field input,.dark .field select,.dark .field textarea,
.navy .field input,.navy .field select,.navy .field textarea{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); color:#fff;
}
.dark .field select option,.navy .field select option{ background:#1B1D24; color:#fff }
.form__ok{ display:none; grid-column:1/-1; padding:14px 16px; border:1px solid var(--green);
  background:rgba(0,166,81,.07); color:#0A6B37; font-size:.92rem; }
.form__ok.on{ display:block }
.dark .form__ok,.navy .form__ok{ color:#7BE0A8; background:rgba(0,166,81,.10) }

/* ---------- Footer -------------------------------------------------------- */

.ftr{ background:var(--ink); color:#9195A0; padding-block:clamp(48px,6vw,78px) 0; font-size:.93rem; }
.ftr a{ color:#C8CBD2; text-decoration:none }
.ftr a:hover{ color:#fff }
.ftr__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(24px,3vw,44px) }
@media (max-width:900px){ .ftr__grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .ftr__grid{ grid-template-columns:1fr } }
.ftr img{ height:42px; margin-bottom:18px }
.ftr h2{ font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:#fff; margin:0 0 16px; line-height:1.4 }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.ftr__seo{ margin-top:clamp(36px,4.5vw,58px); padding-top:24px; border-top:1px solid rgba(255,255,255,.13);
  font-size:.86rem; line-height:1.8; color:#868A93 }
.ftr__seo b{ color:#C8CBD2 }
.ftr__base{ margin-top:22px; padding:18px 0 24px; border-top:1px solid rgba(255,255,255,.13);
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; font-size:.8rem }

/* ---------- Mobile call bar ----------------------------------------------- */

.callbar{ position:fixed; left:0; right:0; bottom:0; z-index:800; display:none; grid-template-columns:1fr 1fr }
.callbar a{ padding:15px 10px; text-align:center; text-decoration:none; font-weight:600; font-size:.93rem }
.callbar a:first-child{ background:var(--ink); color:#fff }
.callbar a:last-child{ background:var(--navy); color:#fff }
@media (max-width:760px){ .callbar{ display:grid } body{ padding-bottom:54px } }

/* ---------- Landing page -------------------------------------------------- */

.lp{ min-height:100dvh; display:grid; grid-template-columns:1.02fr .98fr }
@media (max-width:900px){ .lp{ grid-template-columns:1fr } }
.lp__l{ background:var(--ink); color:#C8CBD2; padding:clamp(34px,5vw,74px) var(--gut) }
.lp__l h1{ color:#fff; font-size:clamp(1.9rem,3.6vw,3rem) }
.lp__l .lede{ color:#C0C4CC }
.lp__r h2{ font-size:clamp(1.35rem,2.2vw,1.8rem); margin-bottom:6px }
.lp__in{ width:100% }
.lp__note{ font-size:.95rem; margin-bottom:24px }
.lp__l .label{ color:#A8ACB5 }
.lp__r{ background:var(--paper2); padding:clamp(34px,5vw,74px) var(--gut); display:flex; align-items:center }
.lp__logo{ height:36px; margin-bottom:clamp(26px,4vw,48px) }
.lp__ft{ margin-top:clamp(28px,4vw,48px); padding-top:20px; border-top:1px solid rgba(255,255,255,.14);
  font-size:.84rem; color:#8B8F98 }
.lp__ft a{ color:#C8CBD2 }

/* ---------- Notes --------------------------------------------------------- */

.note{ border-left:2px solid var(--navy); background:var(--paper2); padding:14px 18px; font-size:.92rem }

/* Images resolve from data.js at load — reserve the space so nothing jumps */
img[data-pic]:not([src]){ background:var(--paper3); min-height:200px; }
.hero__img img[data-pic]:not([src]){ min-height:100%; }

/* ---------- Working to a schedule ----------------------------------------- */

.scheds{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  border-top:1px solid var(--line); border-left:1px solid var(--line); }
.dark .scheds,.navy .scheds{ border-color:rgba(255,255,255,.15); }
.sched{ padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,30px);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.dark .sched,.navy .sched{ border-color:rgba(255,255,255,.15); }
.sched h3{ margin:0 0 12px; position:relative; padding-top:16px; }
.sched h3::before{ content:""; position:absolute; top:0; left:0; width:24px; height:2px; background:var(--green); }
.sched p{ font-size:.96rem; margin:0; }
.navy .sched p,.dark .sched p{ color:#C6C8E4; }

/* ---------- Before and after ---------------------------------------------- */

.ba{ position:relative; overflow:hidden; touch-action:none; cursor:ew-resize;
  user-select:none; background:var(--paper3); aspect-ratio:3/2; }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__after{ clip-path:inset(0 0 0 50%); }
.ba__handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff;
  transform:translateX(-1px); cursor:ew-resize; box-shadow:0 0 0 1px rgba(0,0,0,.18); }
.ba__handle::after{ content:""; position:absolute; top:50%; left:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); background:#fff; border-radius:50%;
  box-shadow:0 2px 10px rgba(0,0,0,.28); }
.ba__handle::before{ content:"‹ ›"; position:absolute; top:50%; left:50%; z-index:2;
  transform:translate(-50%,-50%); font-size:.9rem; font-weight:700; color:var(--ink);
  letter-spacing:2px; }
.ba__tag{ position:absolute; top:14px; padding:6px 12px; font-size:.7rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; background:rgba(21,23,28,.78); color:#fff; }
.ba__tag--b{ left:14px } .ba__tag--a{ right:14px }
.ba:focus-within .ba__handle::after{ box-shadow:0 0 0 3px var(--navy); }

/* ---------- Gallery: show more -------------------------------------------- */

.gal-more{ display:flex; justify-content:center; margin-top:30px; }
.gal-more[hidden]{ display:none; }

/* ---------- Back to top ---------------------------------------------------- */


/* ---------- Services index (numbered rows) -------------------------------- */

.srows{ border-top:1px solid var(--line); }
.dark .srows,.navy .srows{ border-top-color:rgba(255,255,255,.15); }
.srow{
  display:grid; grid-template-columns:64px minmax(0,1fr) 190px 40px;
  gap:clamp(16px,2.6vw,40px); align-items:center;
  padding:clamp(24px,2.8vw,38px) 0;
  border-bottom:1px solid var(--line);
  text-decoration:none; position:relative;
  transition:padding-left .3s var(--ease);
}
.dark .srow,.navy .srow{ border-bottom-color:rgba(255,255,255,.15); }
.srow:hover{ padding-left:14px; }
.srow__k{ font-size:.8rem; font-weight:600; color:var(--green-t); letter-spacing:.06em; }
.srow__h{ display:block; font-size:clamp(1.2rem,1.9vw,1.62rem); font-weight:700;
  color:var(--ink); letter-spacing:-.018em; line-height:1.2; margin-bottom:8px; }
.dark .srow__h,.navy .srow__h{ color:#fff; }
.srow__d{ display:block; font-size:.96rem; color:var(--body); max-width:62ch; }
.dark .srow__d,.navy .srow__d{ color:#C0C4CC; }
.srow__i{ overflow:hidden; aspect-ratio:16/10; background:var(--paper3); }
.srow__i img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.srow:hover .srow__i img{ transform:scale(1.06); }
/* sub-rows: the two Division 02 capabilities, indented under their parent */
.srow--sub{ padding-block:clamp(16px,1.9vw,24px); background:var(--paper2); }
.srow--sub .srow__k{ color:var(--muted); }
.srow--sub .srow__h{ font-size:clamp(1rem,1.3vw,1.16rem); margin-bottom:6px; }
.srow--sub .srow__d{ font-size:.9rem; }
.srow--sub .srow__i{ aspect-ratio:16/9; }
.srow--sub:first-of-type{ border-top:0; }
@media (min-width:901px){ .srow--sub{ padding-left:34px; } .srow--sub:hover{ padding-left:48px; } }
.srow__go{ font-size:1.15rem; color:var(--navy); justify-self:end; transition:transform .3s var(--ease); }
.dark .srow__go,.navy .srow__go{ color:#fff; }
.srow:hover .srow__go{ transform:translateX(6px); }
@media (max-width:900px){
  .srow{ grid-template-columns:44px minmax(0,1fr); gap:14px; }
  .srow__i,.srow__go{ display:none; }
}

/* ---------- Service areas -------------------------------------------------- */

.areagrps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(24px,3vw,44px); }
.areagrp h3{ font-size:1.06rem; margin:0 0 12px; padding-top:14px; position:relative; }
.areagrp h3::before{ content:""; position:absolute; top:0; left:0; width:24px; height:2px; background:var(--green); }
.areagrp p{ font-size:.95rem; margin:0; color:var(--body); }
.dark .areagrp p,.navy .areagrp p{ color:#C0C4CC; }

/* ---------- Header dropdown ------------------------------------------------ */

.hdr__drop{ position:relative; }
.hdr__dropbtn{ background:none; border:0; font:inherit; font-size:.92rem; font-weight:500;
  color:var(--ink); cursor:pointer; padding:4px 0; display:inline-flex; align-items:center; gap:7px;
  border-bottom:2px solid transparent; font-family:var(--font); }
.hdr__dropbtn::after{ content:""; width:7px; height:7px; border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px);
  transition:transform .25s; }
.hdr__drop.open .hdr__dropbtn::after{ transform:rotate(-135deg) translateY(-2px); }
.hdr__drop.open .hdr__dropbtn,.hdr__dropbtn:hover{ border-bottom-color:var(--navy); }
.hdr__menu{
  position:absolute; top:calc(100% + 13px); left:-20px; min-width:330px;
  background:#fff; border:1px solid var(--line); box-shadow:0 18px 44px rgba(15,17,22,.12);
  padding:6px; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.hdr__drop.open .hdr__menu{ opacity:1; visibility:visible; transform:none; }
.hdr__menu a{ display:block; padding:13px 16px; font-size:.93rem; font-weight:500;
  border-bottom:0 !important; transition:background .18s; }
.hdr__menu a:hover{ background:var(--paper2); }
.hdr__menu a small{ display:block; font-size:.78rem; font-weight:400; color:var(--muted); margin-top:3px; }

@media (max-width:1080px){
  .hdr__drop{ border-bottom:1px solid var(--line); }
  .hdr__dropbtn{ width:100%; justify-content:space-between; padding:15px 0; font-size:1.03rem; }
  .hdr__menu{ position:static; min-width:0; border:0; box-shadow:none; padding:0 0 12px;
    opacity:1; visibility:visible; transform:none; display:none; background:transparent; }
  .hdr__drop.open .hdr__menu{ display:block; }
  .hdr__menu a{ padding:11px 0 11px 16px; border-left:2px solid var(--line) !important; }
  .hdr__menu a:hover{ background:transparent; border-left-color:var(--navy) !important; }
}

/* ---------- Full-bleed image band ------------------------------------------ */

.band{ position:relative; height:clamp(240px,34vw,440px); overflow:hidden; background:var(--ink); }
.band img{ width:100%; height:100%; object-fit:cover; opacity:.82; }
.band__t{ position:absolute; inset:auto 0 0 0; padding:clamp(34px,5vw,64px) 0 clamp(24px,4vw,52px);
  background:linear-gradient(rgba(15,17,22,0), rgba(15,17,22,.72) 40%, rgba(15,17,22,.9)); }
.band__t .wrap{ color:#fff; }
.band__t p{ font-size:clamp(1.1rem,2.1vw,1.7rem); font-weight:600; max-width:30ch;
  letter-spacing:-.015em; line-height:1.25; margin:0; color:#fff; }

/* ---------- Assistant ------------------------------------------------------ */

#cbot{ position:fixed; right:20px; bottom:20px; z-index:1200; }
@media (max-width:760px){ #cbot{ bottom:66px; right:14px; } }

.cbot__fab{
  width:54px; height:54px; border-radius:50%; border:0; cursor:pointer;
  background:var(--navy); color:#fff; display:grid; place-items:center; position:relative;
  box-shadow:0 8px 24px rgba(15,17,22,.26);
  transition:transform .28s var(--ease), background .22s;
}
.cbot__fab:hover{ transform:translateY(-3px) scale(1.04); background:var(--navy-d); }
.cbot__dot{ position:absolute; top:3px; right:3px; width:11px; height:11px; border-radius:50%;
  background:var(--green); border:2px solid var(--paper); }
#cbot.on .cbot__fab{ opacity:0; pointer-events:none; transform:scale(.85); }

.cbot__win[hidden]{ display:none; }
.cbot__win{
  position:absolute; right:0; bottom:0;
  width:min(92vw,378px); height:min(70vh,528px); display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line2); box-shadow:0 22px 54px rgba(15,17,22,.22);
  opacity:0; transform:translateY(12px) scale(.98); transform-origin:bottom right;
  transition:opacity .24s var(--ease), transform .24s var(--ease);
}
#cbot.on .cbot__win{ opacity:1; transform:none; }

.cbot__hd{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:15px 16px 13px; border-bottom:1px solid var(--line); background:var(--paper2); }
.cbot__hd b{ display:block; color:var(--ink); font-size:.97rem; }
.cbot__hd span{ font-size:.76rem; color:var(--muted); }
.cbot__x{ background:none; border:0; color:var(--muted); font-size:.9rem; cursor:pointer; padding:3px 5px; }
.cbot__x:hover{ color:var(--ink); }

.cbot__log{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.cbot__b{ max-width:89%; padding:11px 14px; font-size:.90rem; line-height:1.58;
  animation:cbIn .26s var(--ease); }
@keyframes cbIn{ from{ opacity:0; transform:translateY(6px) } }
.cbot__b--bot{ background:var(--paper2); color:var(--body); border-left:2px solid var(--green); align-self:flex-start; }
.cbot__b--bot b{ color:var(--ink); }
.cbot__b--me{ background:var(--navy); color:#fff; align-self:flex-end; }
.cbot__typing{ display:flex; gap:5px; padding:14px; }
.cbot__typing i{ width:5px; height:5px; background:var(--muted); border-radius:50%; animation:cbd 1.2s infinite; }
.cbot__typing i:nth-child(2){ animation-delay:.15s } .cbot__typing i:nth-child(3){ animation-delay:.3s }
@keyframes cbd{ 0%,60%,100%{ opacity:.25 } 30%{ opacity:1 } }

.cbot__chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px; }
.cbot__chips button{ font-size:.78rem; background:transparent; border:1px solid var(--line2);
  color:var(--body); padding:7px 11px; cursor:pointer; font-family:var(--font);
  transition:border-color .2s, color .2s, transform .2s; }
.cbot__chips button:hover{ border-color:var(--navy); color:var(--navy); transform:translateY(-1px); }

.cbot__in{ display:flex; border-top:1px solid var(--line); }
.cbot__in input{ flex:1; background:transparent; border:0; color:var(--ink); padding:14px 16px;
  font-family:var(--font); font-size:.94rem; }
.cbot__in input:focus-visible{ outline:2px solid var(--navy); outline-offset:-2px; }
.cbot__in button{ background:var(--navy); border:0; color:#fff; width:52px; cursor:pointer;
  display:grid; place-items:center; transition:background .2s; }
.cbot__in button:hover{ background:var(--navy-d); }

/* ---------- Instagram monogram --------------------------------------------- */

.ig{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid rgba(255,255,255,.24); color:#C8CBD2;
  transition:border-color .25s, color .25s, transform .25s; }
.ig:hover{ border-color:#fff; color:#fff; transform:translateY(-2px); }

/* ---------- Checkbox grid (subcontractor application) ---------------------- */

.checks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
.check{ display:flex; align-items:flex-start; gap:10px; padding:12px 14px; cursor:pointer;
  border:1px solid rgba(255,255,255,.22); font-size:.9rem; transition:border-color .2s, background .2s; }
.check:hover{ border-color:rgba(255,255,255,.5); }
.check input{ width:16px; height:16px; margin:3px 0 0; flex:none; accent-color:#00A651; }
.check:has(input:checked){ border-color:var(--green); background:rgba(0,166,81,.10); }
.check b{ display:block; color:#fff; font-weight:600; }
.check span{ display:block; font-size:.79rem; color:#9195A0; margin-top:2px; }

/* ---------- Extra motion --------------------------------------------------- */

/* photographs wipe in rather than just fading */
.rv .card__img img,.frow__i.rv img{ clip-path:inset(0 0 100% 0);
  transition:clip-path .9s var(--ease), transform .7s var(--ease); }
.rv.in .card__img img,.frow__i.rv.in img{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce){
  .rv .card__img img,.frow__i.rv img{ clip-path:none !important; }
}

/* underline that draws in */
.tlink{ position:relative; border-bottom-color:transparent; }
.tlink::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .32s var(--ease); }
.tlink::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line2); }
.dark .tlink::before,.navy .tlink::before{ background:rgba(255,255,255,.3); }
.tlink:hover::after{ transform:scaleX(1); }

/* stat blocks respond to the cursor */
.stat{ transition:background .3s var(--ease); }
.stat:hover{ background:var(--paper2); }

/* buttons nudge their label */
.btn{ position:relative; overflow:hidden; }
.btn::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.10);
  transform:translateX(-101%); transition:transform .38s var(--ease); }
.btn:hover::after{ transform:translateX(0); }
.btn--line::after{ background:rgba(0,0,0,.05); }
.dark .btn--line::after,.navy .btn--line::after,.hero .btn--line::after{ background:rgba(255,255,255,.12); }

/* region blocks */
.areagrp{ padding:4px 0; transition:transform .3s var(--ease); }
.areagrp:hover{ transform:translateX(5px); }

/* schedule panels */
.sched{ transition:background .3s var(--ease); }
.sched:hover{ background:var(--paper2); }
.navy .sched:hover,.dark .sched:hover{ background:rgba(255,255,255,.04); }

/* ---------- Aerial documentation of completed releases --------------------- */

.subs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(16px,2vw,26px); border:0; }
.subs--empty{ display:block; }
.subs__soon{ padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  color:var(--muted); font-size:.98rem; max-width:60ch; }
.aerial{ margin:0; align-self:start; }
.aerial__i{ display:block; overflow:hidden; aspect-ratio:16/10; background:var(--paper3); }
.aerial__i img{ width:100%; height:100%; object-fit:cover; }
.aerial__r{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; margin-top:4px;
  height:clamp(54px,6.4vw,84px); }
.aerial__t{ display:block; overflow:hidden; height:100%; background:var(--paper3); }
.aerial__t img{ width:100%; height:100%; object-fit:cover; }
.aerial figcaption{ padding-top:14px; border-top:1px solid var(--line); margin-top:14px; }
.aerial__n{ display:block; font-weight:700; color:var(--ink); font-size:1.04rem; letter-spacing:-.01em; }
.aerial__m{ display:block; font-size:.83rem; color:var(--muted); margin-top:4px; }

/* ---------- Banner with a photograph behind it ---------------------------- */

.banner--photo{ position:relative; isolation:isolate; overflow:hidden; }
.banner--photo .banner__bg{ position:absolute; inset:0; z-index:-2; }
.banner--photo .banner__bg img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); animation:bgDrift 18s var(--ease) forwards; }
@keyframes bgDrift{ to{ transform:scale(1) } }
.banner--photo::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(15,17,22,.96) 0%, rgba(15,17,22,.86) 42%, rgba(15,17,22,.34) 78%, rgba(15,17,22,.18) 100%),
    linear-gradient(180deg, rgba(15,17,22,.55) 0%, rgba(15,17,22,.18) 40%, rgba(15,17,22,.72) 100%);
}
.banner--photo .wrap{ position:relative; z-index:1; }
.banner--photo{ padding-block:clamp(70px,10vw,132px); }
@media (max-width:760px){
  .banner--photo::after{
    background:linear-gradient(180deg, rgba(15,17,22,.90) 0%, rgba(15,17,22,.84) 55%, rgba(15,17,22,.92) 100%);
  }
}

/* ---------- Checklist ------------------------------------------------------ */

.checklist{ display:grid; gap:0; border-top:1px solid var(--line); }
.dark .checklist,.navy .checklist{ border-top-color:rgba(255,255,255,.15); }
.chk{ display:grid; grid-template-columns:26px minmax(0,1fr); gap:16px;
  padding:22px 0; border-bottom:1px solid var(--line); align-items:start; }
.dark .chk,.navy .chk{ border-bottom-color:rgba(255,255,255,.15); }
.chk__t{ display:block; font-weight:700; font-size:1.02rem; color:var(--ink);
  letter-spacing:-.01em; margin-bottom:6px; }
.dark .chk__t,.navy .chk__t{ color:#fff; }
.chk p{ font-size:.96rem; margin:0; max-width:74ch; }
.chk svg{ width:20px; height:20px; margin-top:3px; color:var(--green); }

/* ---------- Tag chips ------------------------------------------------------ */

.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.tags span{ font-size:.76rem; font-weight:500; letter-spacing:.04em;
  border:1px solid var(--line2); padding:8px 13px; color:var(--body);
  transition:border-color .2s, color .2s; }
.dark .tags span,.navy .tags span{ border-color:rgba(255,255,255,.24); color:#C0C4CC; }
.tags span:hover{ border-color:var(--navy); color:var(--navy); }
.dark .tags span:hover,.navy .tags span:hover{ border-color:#fff; color:#fff; }

/* ---------- Section photograph strip --------------------------------------- */

.strip{ display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.4vw,16px); }
@media (max-width:900px){ .strip{ grid-template-columns:repeat(2,1fr); } }
.strip figure{ margin:0; overflow:hidden; background:var(--paper3); cursor:zoom-in;
  aspect-ratio:4/3; position:relative; }
.strip img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.strip figure:hover img{ transform:scale(1.05); }
.strip figcaption{ position:absolute; inset:auto 0 0 0; padding:26px 14px 12px;
  background:linear-gradient(transparent, rgba(15,17,22,.86)); color:#fff;
  font-size:.8rem; opacity:0; transform:translateY(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease); }
.strip figure:hover figcaption,.strip figure:focus-within figcaption{ opacity:1; transform:none; }
.strip figcaption{ pointer-events:none; }
.strip--empty{ display:block; }
.strip__soon{ padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  color:var(--muted); font-size:.95rem; max-width:60ch; }
.dark .strip__soon,.navy .strip__soon{ border-color:rgba(255,255,255,.15); color:#9195A0; }

/* current section marker on the Services menu (not the open state) */
.hdr__drop--on .hdr__dropbtn{ border-bottom-color:var(--navy); }

/* ---------- Spacing and width utilities ------------------------------------
   These replace the one-line style="" attributes the templates used to emit, so
   the Content-Security-Policy can forbid inline styles outright. ------------- */

.mt-0{ margin-top:0 !important } .mt-8{ margin-top:8px !important } .mt-16{ margin-top:16px !important }
.mt-18{ margin-top:18px !important } .mt-20{ margin-top:20px !important } .mt-26{ margin-top:26px !important }
.mt-30{ margin-top:30px !important } .mt-32{ margin-top:32px !important } .mt-34{ margin-top:34px !important }
.mt-40{ margin-top:40px !important }
.mb-20{ margin-bottom:20px !important } .mb-34{ margin-bottom:34px !important }
.mb-40{ margin-bottom:40px !important } .mb-44{ margin-bottom:44px !important }
.mw-22{ max-width:22ch } .mw-24{ max-width:24ch } .mw-26{ max-width:26ch } .mw-38{ max-width:38ch }
.fs-96{ font-size:.96rem }
.u-plain{ text-decoration:none }
.u-ink{ color:var(--ink) }
.fine{ margin-top:34px; font-size:.9rem; color:var(--muted) }
.split--lead{ margin-bottom:clamp(30px,4vw,54px) }
.wrap--prose{ max-width:820px }
.btnrow{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px }
.banner--404{ min-height:56vh; display:grid; align-items:center }

/* contact page details */
.contact-list{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:22px }
.ck{ font-size:.78rem; letter-spacing:.05em; color:var(--muted); margin-bottom:5px }
.contact-tel{ font-size:1.5rem; font-weight:700; color:var(--ink); text-decoration:none }