/* ══════════════════════════════════════════════════════════════════════════
   RM Cleary Tarmacadam — the whole site's stylesheet.
   Linked by index.html, about.html, our-work.html and plant.html.

   This was inline in every page until 29 Aug. At two pages the duplication was
   the safer trade; at four it is not, and our-work.html had already drifted —
   it was still carrying the pre-carousel hero rules.

   Uploaded with must-revalidate, not the year-long immutable caching img/ and
   fonts/ get. Those are safe because their filenames carry the version; this
   one does not, and a stale stylesheet leaves the whole site unstyled.
   ══════════════════════════════════════════════════════════════════════════ */

/* Only the seven faces the stylesheet below actually asks for. The Google link
   this replaced fetched twelve — Sora 300/400/700 and DM Sans 300/600 were
   never referenced by a single rule. */
@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/sora-500.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/sora-600.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/dm-sans-400.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/dm-sans-500.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/dm-sans-700.woff2) format('woff2')}
/* Source Serif 4 sets the wordmark and nothing else, so it is subset to letters,
   space, ampersand, comma and full stop — 7.6K a weight instead of 25K. If the
   wordmark ever needs a digit or a hyphen, re-cut it: the glyph will not fall
   back, it will simply be missing. */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/source-serif-4-600.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/source-serif-4-700.woff2) format('woff2')}

/* ══════════════════════════════════════════════════════════
   RM Cleary Tarmacadam — modernised.
   Palette unchanged from the original. Type is Sora + DM Sans.
   ══════════════════════════════════════════════════════════ */
:root{
  --white:#FFFFFF; --wash:#F4F8FE; --sky:#E6F0FD; --line:#D9E4F2;
  --ink:#0A1A33; --navy:#0D3A82; --blue:#1A6DE0; --bright:#3B8BFF;
  --muted:#5B6B85; --amber:#A2570B; --amberbg:#FDF2E3;
  --on-ink:#C4D8F2; --on-ink-dim:#8CA5C6;
  --disp:'Sora',system-ui,-apple-system,sans-serif;
  --body:'DM Sans',system-ui,-apple-system,sans-serif;
  --mark:'Source Serif 4',Georgia,'Times New Roman',serif;
  --pad:120px;
  --gap:92px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;font-optical-sizing:auto;
  /* A wash of sky at the masthead, gone by the time the services start.
     Sits behind everything; .tint sections still paint over it. */
  background-color:var(--white);
  background-image:linear-gradient(180deg,#E4EFFD 0,#F1F6FE 340px,#FBFCFE 720px,var(--white) 1080px);
  background-repeat:no-repeat}
header{background:rgba(246,250,255,.86)}
h1,h2,h3,h4{font-family:var(--disp);margin:0;line-height:1.05;
  letter-spacing:-.035em;font-weight:600;text-wrap:balance}
p{margin:0}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--navy)}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.wrap{width:min(1200px,100% - var(--pad)*2);margin-inline:auto}
.col{display:flex;flex-direction:column}
/* Navy rather than the accent blue, and a point larger. That reads as heavier
   than bumping the weight did — the colour is doing the work — and it needs no
   font face beyond the two Sora weights already here.
   The hero overrides the colour: navy on a dark photograph is invisible. */
.lbl{font-family:var(--disp);font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--navy)}
.num{font-variant-numeric:tabular-nums}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px}
.shot{overflow:hidden;border-radius:4px;background:var(--sky)}
.shot img{width:100%;height:100%;object-fit:cover}

.btn,.btn-o{font-family:var(--disp);font-size:15px;font-weight:600;
  padding:17px 28px;border-radius:100px;display:inline-block;
  transition:background .16s,color .16s,border-color .16s}
.btn{background:var(--blue);color:#fff}
.btn:hover,.btn:focus-visible{background:var(--navy);color:#fff}
.btn-o{color:var(--ink);border:1px solid var(--line)}
.btn-o:hover,.btn-o:focus-visible{border-color:var(--blue);color:var(--blue)}
/* Navy fill — the wordmark colour rather than the accent blue. Used where a
   filled button sits on white and the bright blue would shout. */
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover,.btn-navy:focus-visible{background:var(--ink);color:#fff}

/* ── header ─────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:32px;padding:20px 0}
/* The wordmark is the company's actual logo lockup — serif, RM set small
   against CLEARY, TARMACADAM letterspaced beneath. Reproduced from the
   original rather than restyled. */
.mark{margin-right:auto;display:grid;justify-items:start;line-height:1;text-decoration:none}
.mark .n{font-family:var(--mark);font-weight:700;font-size:29px;
  letter-spacing:.005em;color:var(--navy)}
.mark .n small{font-size:.62em;letter-spacing:.02em}
.mark .t{font-family:var(--mark);font-size:13px;font-weight:600;letter-spacing:.42em;
  text-transform:uppercase;color:var(--navy);margin-top:5px;opacity:.9}
.mark .s{font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:7px;white-space:nowrap}
.mark em{font-style:normal}
nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
nav a{font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap}
nav a:hover{color:var(--blue)}
.hdr-cta{font-family:var(--disp);font-size:14px;font-weight:600;
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:100px;white-space:nowrap}
.hdr-cta:hover{background:var(--navy);color:#fff}
.menu{display:none;flex:none;width:46px;height:46px;border:1px solid var(--line);
  background:var(--white);border-radius:100px;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.menu i{display:block;width:18px;height:1.5px;background:var(--ink);border-radius:2px}

/* ── hero ───────────────────────────────────────────────────────────────
   Full bleed: the photographs fill the band and the words sit over them.
   Four slides, cross-fading. Each slide carries its own scrim strength in
   --s, measured from how bright that photograph is on the LEFT, where the
   headline sits — a single fixed veil either greys out the dark shots or
   strands the white text on the bright ones. Do not flatten these to one
   value; see claude/design-decisions.md. */
.hero{position:relative;overflow:hidden;isolation:isolate;
  min-height:min(76vh,600px);display:grid;align-items:center;
  background:var(--ink)}
.hero-stage{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;
  will-change:opacity}
.hero-slide.on{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero-slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(102deg,
    rgba(5,15,34,var(--s)) 0%,
    rgba(5,15,34,calc(var(--s) * .82)) 38%,
    rgba(5,15,34,calc(var(--s) * .34)) 72%,
    rgba(5,15,34,calc(var(--s) * .18)) 100%)}

.hero-txt{position:relative;z-index:10;display:flex;flex-direction:column;gap:24px;
  padding:64px 0}
.hero-txt > *{max-width:34rem}
.eyebrow{display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:#8FBBFF}
.hero .lbl{color:#8FBBFF}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.4rem);letter-spacing:-.045em;
  line-height:1;max-width:13ch;color:#fff}
.hero h1 em{font-style:normal;color:var(--bright)}
.hero .lede{font-size:18px;color:#CBDCF3;max-width:45ch}
/* The hero h1 IS the lede. Without this it would inherit the 4.4rem headline
   sizing from the global h1 rule and defeat the point of removing the
   headline. Weight and letter-spacing come back to body values too. */
h1.lede{font-family:var(--body);font-weight:400;letter-spacing:0;line-height:1.62}
.acts{display:flex;gap:12px;flex-wrap:wrap;padding-top:8px}
.hero .btn-o{color:#fff;border-color:rgba(255,255,255,.45)}
.hero .btn-o:hover,.hero .btn-o:focus-visible{border-color:#fff;color:#fff;
  background:rgba(255,255,255,.1)}
.hero .btn:hover,.hero .btn:focus-visible{background:#fff;color:var(--navy)}

/* controls sit on the bottom edge of the band */
.hero-ui{position:absolute;z-index:12;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:14px;padding-bottom:24px}
.hero-dots{display:flex;gap:7px}
.hero-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;
  cursor:pointer;background:rgba(255,255,255,.42);transition:all .25s}
.hero-dots button:hover{background:rgba(255,255,255,.75)}
.hero-dots button[aria-current="true"]{background:#fff;width:26px;border-radius:100px}

/* ── stats ──────────────────────────────────────────────── */
.stats{padding:88px 0 0;background:transparent}
.stats-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line)}
/* Centred in each column. The first/last cells no longer drop their outer
   padding — flush-to-the-gutter only made sense while the text was ranged
   left, and keeping it would throw the three off centre against each other. */
.stat{display:grid;gap:10px;padding:34px 40px;border-right:1px solid var(--line);
  text-align:center;justify-items:center}
.stat:last-child{border-right:0}
.stat b{font-family:var(--disp);font-size:clamp(2rem,3.6vw,3.25rem);font-weight:600;
  letter-spacing:-.05em;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.stat span{font-size:14px;color:var(--muted)}

/* ── section scaffolding ────────────────────────────────── */
section{padding:var(--gap) 0}
.tint{background:var(--wash)}
.sec-hd{grid-column:span 5;gap:22px}
.sec-hd h2{font-size:clamp(2rem,3.4vw,2.9rem)}
.sec-bd{grid-column:7 / span 6;gap:20px;padding-top:6px}

/* ── service cards ──────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:6px;
  overflow:hidden;margin-top:64px}
.card{display:grid;gap:14px;padding:40px;background:var(--white);align-content:start}
.card h3{font-size:23px}
.card p{font-size:15.5px;line-height:1.66;color:var(--muted)}
.card .tags{font-size:12.5px;font-weight:500;letter-spacing:.04em;
  color:var(--navy);padding-top:6px}

/* ── dark band — photo showing through, as on the live site ─ */
.band{position:relative;overflow:hidden;background:var(--ink);padding:0}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,26,52,.94) 0%,rgba(8,26,52,.72) 55%,rgba(8,26,52,.42) 100%)}
.band-in{position:relative;z-index:2;padding:76px 0;display:grid;
  grid-template-columns:1fr auto;gap:40px;align-items:center;color:#fff}
.band h2{font-size:clamp(1.7rem,2.9vw,2.5rem);font-weight:500;
  letter-spacing:-.03em;line-height:1.14;color:#fff;max-width:24ch}
.band p{font-size:17px;color:var(--on-ink);max-width:52ch;margin-top:16px}
.band .btn{background:var(--white);color:var(--navy);white-space:nowrap}
.band .btn:hover{background:var(--sky);color:var(--navy)}

/* ── build-up table ─────────────────────────────────────── */
.fig{grid-column:7 / span 6;background:var(--white);border:1px solid var(--line);
  border-radius:6px;overflow:hidden}
.fig-viz{padding:28px 28px 22px;background:var(--wash);border-bottom:1px solid var(--line)}
.fig-viz svg{width:100%;height:auto;display:block}
@keyframes lay-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tick-in{from{opacity:0}to{opacity:1}}
.fig-viz .lay{transform-origin:left center;animation:lay-in .62s cubic-bezier(.2,.7,.3,1) both}
.fig-viz .lay-1{animation-delay:.05s}
.fig-viz .lay-2{animation-delay:.19s}
.fig-viz .lay-3{animation-delay:.33s}
.fig-viz .lay-4{animation-delay:.47s}
.fig-viz .tick{animation:tick-in .45s ease both}
.fig-viz .t1{animation-delay:.30s}
.fig-viz .t2{animation-delay:.44s}
.fig-viz .t3{animation-delay:.58s}
.fig-viz .t4{animation-delay:.72s}
.fig-hd{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 28px;border-bottom:1px solid var(--line);
  font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.fig-hd em{font-style:normal;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.layer{display:grid;grid-template-columns:132px 1fr;gap:24px;
  padding:26px 28px;border-bottom:1px solid var(--sky);align-items:start}
.layer:last-child{border-bottom:0}
.layer .d{display:grid;gap:3px;padding-top:2px}
.layer .d b{font-family:var(--disp);font-size:15px;font-weight:600;
  color:var(--blue);font-variant-numeric:tabular-nums}
.layer .d span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.layer.sub .d b{color:var(--muted)}
.layer h4{font-size:17px;font-weight:600;margin-bottom:6px}
.layer p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.warn{display:grid;gap:8px;margin-top:14px;padding:22px 24px;
  background:var(--amberbg);border-radius:6px}
.warn b{font-family:var(--disp);font-size:15px;font-weight:600;
  letter-spacing:-.01em;line-height:1.32;color:var(--amber)}
.warn p{font-size:14.5px;line-height:1.62;color:var(--amber)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-top:64px}
.trio .shot{height:300px}

/* ── story ──────────────────────────────────────────────── */
.pull{margin-top:12px;padding-left:22px;border-left:2px solid var(--blue)}
.pull p{font-family:var(--disp);font-size:21px;font-weight:500;
  letter-spacing:-.02em;line-height:1.34;color:var(--ink)}

/* ── work grid ──────────────────────────────────────────── */
.work-hd{display:flex;justify-content:space-between;align-items:end;
  gap:40px;flex-wrap:wrap;padding-bottom:32px}
.work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.work .shot{height:340px}

/* ── ticks ──────────────────────────────────────────────── */
.ticks{grid-column:7 / span 6;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:6px;overflow:hidden;list-style:none;margin:0;padding:0}
.ticks li{display:flex;align-items:flex-start;gap:14px;
  padding:17px 22px;background:var(--white);font-size:15.5px;line-height:1.5}
.ticks svg{flex:none;margin-top:2px}

/* ── contact ────────────────────────────────────────────── */
.c-hd{display:grid;gap:20px;padding-bottom:44px}
.c-hd h2{font-size:clamp(2.1rem,3.6vw,3rem);max-width:20ch}
.c-hd p{font-size:18px;color:var(--muted);max-width:56ch}
.cgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px;align-items:start}
.cinfo{grid-column:span 5;display:flex;flex-direction:column}
.cline{display:grid;gap:6px;padding:22px 0;border-top:1px solid var(--line)}
.cline:last-child{border-bottom:1px solid var(--line)}
.cline .k{font-size:11.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.cline .v{font-family:var(--disp);font-size:18px;font-weight:500;
  letter-spacing:-.02em;color:var(--ink)}
a.v{color:var(--blue);min-height:44px;display:flex;align-items:center;gap:.5rem}
a.v:hover{color:var(--navy)}
.cline .eir{font-size:14px;letter-spacing:.06em;color:var(--muted);
  font-variant-numeric:tabular-nums}
.cline small{font-size:15px;color:var(--muted)}

form{grid-column:7 / span 6;display:grid;gap:18px;padding:36px;
  background:var(--wash);border-radius:8px}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
label{font-size:12.5px;font-weight:500;letter-spacing:.04em;
  color:var(--muted);display:block;margin-bottom:8px}
input,select,textarea{width:100%;min-height:52px;background:var(--white);
  border:1px solid var(--line);border-radius:6px;color:var(--ink);
  font-family:var(--body);font-size:15px;padding:.85rem .9rem}
textarea{min-height:124px;resize:vertical;line-height:1.55}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(26,109,224,.12)}
button[type=submit]{font-family:var(--disp);font-size:15px;font-weight:600;
  background:var(--blue);color:#fff;border:0;border-radius:100px;
  padding:17px 30px;min-height:52px;justify-self:start;cursor:pointer;
  transition:background .16s}
button[type=submit]:hover{background:var(--navy)}
button[type=submit][disabled]{opacity:.6;cursor:progress}
.sent{font-size:14px;color:var(--blue);margin:0;min-height:1.2em}
.sent.err{color:var(--amber)}
.fnote{font-size:13.5px;line-height:1.55;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── footer ─────────────────────────────────────────────── */
footer{background:var(--ink)}
.f-in{display:flex;justify-content:space-between;align-items:center;
  gap:24px;flex-wrap:wrap;padding:34px 0;font-size:13.5px;color:var(--on-ink)}
.f-in span:last-child{color:var(--on-ink-dim)}
.f-in a{color:var(--on-ink);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.f-in a:hover{color:#fff}

/* ── responsive ─────────────────────────────────────────── */
@media(max-width:1240px){
  :root{--pad:56px;--gap:76px}
  nav{position:absolute;left:0;right:0;top:100%;background:var(--white);
    border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(10,26,51,.1);
    display:none;padding:.4rem 0}
  nav.open{display:block}
  nav ul{flex-direction:column;gap:0;width:min(1200px,100% - var(--pad)*2);margin-inline:auto}
  nav li{border-bottom:1px solid var(--line)}
  nav li:last-child{border-bottom:0}
  nav a{display:block;font-size:16px;padding:.9rem 0}
  .menu{display:flex}
  .bar{position:relative}
}
@media(max-width:900px){
  /* Collapse the 12-col grids outright — leaving 12 tracks in place keeps
     11 x 40px of gap, which alone overflows a phone. */
  .g12,.cgrid{grid-template-columns:1fr;gap:40px}
  .sec-hd,.sec-bd,.fig,.ticks,.cinfo,form{grid-column:1 / -1}
  .hero{min-height:min(70vh,520px)}
  .hero-txt{padding:64px 0 84px}
  .hero-txt > *{max-width:none}
  .band-in{grid-template-columns:1fr;padding:72px 0}
  .band .btn{justify-self:start}
  .cards{grid-template-columns:1fr}
  .work{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trio{grid-template-columns:1fr;padding-top:56px}
  .trio .shot{height:260px}
  .cgrid{gap:40px}
}
@media(max-width:620px){
  :root{--pad:20px;--gap:72px}
  .g12,.cgrid{gap:32px}
  body{font-size:16px}
  .hero{min-height:auto}
  .hero-txt{padding:52px 0 88px;gap:20px}
  .hero .lede{font-size:16.5px}
  .stats{padding:56px 0 0}
  .stats-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat{padding:22px 10px}
  .stat span{font-size:11.5px;line-height:1.35}
  .acts{flex-direction:column}
  .acts a{text-align:center}
  .card{padding:28px 24px}
  .layer{grid-template-columns:1fr;gap:8px}
  .work{gap:8px}
  .work .shot{height:190px}
  .f2{grid-template-columns:1fr}
  form{padding:24px 20px}
  .mark .n{font-size:24px}
  .mark .t{letter-spacing:.34em}
  .mark .s{white-space:normal}
  .mark .s{display:none}
  .hdr-cta{font-size:13px;padding:11px 16px}
  /* The diagram is drawn at 620 wide; letting it shrink to 350 takes the
     labels below legibility, so let it scroll inside its own box instead. */
  .fig-viz{overflow-x:auto;padding:20px}
  .fig-viz svg{min-width:520px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fig-viz .lay,.fig-viz .tick{animation:none;transform:none;opacity:1}
}

@media(prefers-reduced-motion:reduce){
  .hero-slide{transition:none}
}

/* ── enquiry popup ────────────────────────────────────────────────────────
   Injected by site.js on every page except the home page, where the form is
   already in the document. The markup lives in the script so there is one copy
   of it rather than one per page. */
/* position:fixed is not optional. The UA default for <dialog> is absolute,
   which anchors it to the DOCUMENT — open it from a button near the bottom of
   a long page and the box renders above the viewport, off screen, looking like
   nothing happened. */
.enq-dlg{position:fixed;inset:0;margin:auto;
  border:0;padding:0;border-radius:12px;width:min(560px,100% - 32px);
  max-height:min(86vh,860px);background:var(--white);color:var(--ink);
  box-shadow:0 24px 60px rgba(10,26,51,.28);overflow:auto}
.enq-dlg::backdrop{background:rgba(6,16,36,.62);backdrop-filter:blur(2px)}
.enq-hd{padding:34px 34px 0;display:grid;gap:12px}
.enq-hd h2{font-size:clamp(1.5rem,3vw,1.95rem);letter-spacing:-.032em}
.enq-hd p{font-size:15px;color:var(--muted)}
.enq-dlg form#mEnq{padding:26px 34px 34px;display:grid;gap:18px;background:transparent;border:0}
/* This is a <form method="dialog"> so the button closes the dialog natively.
   Being a form, it inherits the site-wide enquiry-form rules — 36px of padding
   and a tinted background — which paints a panel over the heading. Reset it. */
.enq-x{position:absolute;top:14px;right:14px;z-index:2;
  margin:0;padding:0;background:none;border:0;display:block;gap:0;
  grid-column:auto;box-shadow:none}
.enq-x button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);color:var(--muted);cursor:pointer;display:grid;place-items:center}
.enq-x button:hover{border-color:var(--blue);color:var(--blue)}

@media(max-width:620px){
  .enq-dlg{width:100%;max-width:100%;max-height:92vh;border-radius:12px 12px 0 0;
    margin:auto auto 0}
  html.enq-open,body.enq-open{overflow:hidden}
  .enq-hd{padding:28px 20px 0}
  .enq-dlg form#mEnq{padding:22px 20px 28px}
}
@media(prefers-reduced-motion:no-preference){
  .enq-dlg[open]{animation:enq-in .22s ease}
  @keyframes enq-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ── gallery expander ─────────────────────────────────────────────────────
   The button site.js lays over the last visible tile of a project gallery. */
.proj-gallery .shot[hidden]{display:none}
.proj-gallery .shot{position:relative}

.shot-more{position:absolute;inset:0;z-index:2;width:100%;
  border:0;padding:0 16px;cursor:pointer;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:rgba(5,15,34,.46);
  transition:background .18s}
.shot-more:hover,.shot-more:focus-visible{background:rgba(5,15,34,.66)}
.shot-more .count{font-family:var(--disp);font-size:34px;font-weight:600;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 12px rgba(5,15,34,.45)}
@media(prefers-reduced-motion:reduce){ .shot-more{transition:none} }

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE REFRESH — Draft 4, folded in 8 Oct 2026.

   Arrived as a separate home-refresh.css. Folded in here rather than kept as a
   second stylesheet: deploy.sh uploads site.css and site.js BY NAME and would
   never have sent it, which deploys new markup with none of its styling.

   Every rule below is scoped to .home — the class on index.html's <body> — so
   none of it reaches about, our-work or plant.
   ══════════════════════════════════════════════════════════════════════════ */
/* First-draft homepage direction. Scoped to .home to preserve inner-page layouts. */
.home{--gap:96px;--wash:#edf3fa;--line:#d5e0ee;--muted:#52657c;background:#f7f9fc}
.home h2,.home h3{font-family:'DM Sans',sans-serif;font-weight:700;letter-spacing:-.045em;line-height:1.06}
.home h2{font-size:clamp(2.2rem,4vw,3.6rem)}
.home .wrap{width:min(1200px,100% - 96px)}
.home header{background:#f7f9fc;border-top:4px solid var(--navy);border-bottom:0;box-shadow:0 2px 16px #0a1a3308}
.home .bar{padding:19px 0;gap:26px}
.home .mark .s{font-size:10px;letter-spacing:.12em}
.home .hdr-cta{background:var(--navy);border-radius:5px}
.home .btn,.home .btn-o{border-radius:5px;padding:16px 25px;font-size:14px}
/* Hero height scales with the window (8 Oct). A fixed 520px meant the photos
   got cropped harder the wider the screen — on a 1900px monitor only about half
   of each 16:9 photo was visible. 38.5vw holds the crop at roughly 74% of the
   photo at any normal desktop width — the proportion signed off on 8 Oct.
   46vw was tried first and was too tall: it filled a 1080p screen on its own
   and pushed "What we do" off the bottom. The 460px floor protects phones; the
   860px ceiling stops the hero swallowing a very large monitor. */
.home .hero{min-height:clamp(460px,38.5vw,860px);padding:0}
.home .hero-txt{padding:72px 0 90px;gap:30px}
.home .hero h1.lede{font-family:'DM Sans',sans-serif;font-size:clamp(21px,2.2vw,30px);font-weight:500;line-height:1.42;letter-spacing:-.025em;max-width:26ch;color:#fff;text-wrap:pretty}
.home .hero .acts{padding-top:0}
.home .hero .btn{background:#fff;color:var(--navy)}
.home .hero .btn:hover{background:#dbeaff}
.home .hero .btn-o{background:#0a1a3326;border-color:#ffffff88}
.home .hero-ui{padding-bottom:22px}
.home .hero-dots{gap:3px}
.home .hero-dots button{height:28px;width:30px;border-radius:0;background:transparent;position:relative}
.home .hero-dots button::after{content:'';position:absolute;top:12px;left:3px;right:3px;height:3px;background:#ffffff77}
.home .hero-dots button[aria-current=true]::after{background:#fff}
.home .stats{padding:0;background:var(--navy);color:#fff}
.home .stats-in{border:0}
.home .stat{padding:30px 24px;gap:8px;text-align:left;justify-items:start;border-color:#ffffff2b}
.home .stat:first-child{padding-left:0}
.home .stat:last-child{padding-left:42px}
.home .stat:nth-child(2){padding-left:42px}
.home .stat b{font-family:'DM Sans',sans-serif;font-size:29px;color:#fff;letter-spacing:-.03em}
.home .stat span{font-size:13px;color:#c6d8f0}
.home #what{background:#edf3fa}
.section-intro{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:38px}
.section-intro>div{display:grid;gap:18px}
.section-intro h2{max-width:17ch}
.section-intro>p{max-width:34ch;color:var(--muted);font-size:16px;line-height:1.65}
.home .lbl{font-size:11px;letter-spacing:.18em}
.home .cards{gap:18px;border:0;background:none;border-radius:0}
.home .card{border:1px solid #d7e2ef;border-top:3px solid var(--navy);border-radius:5px;background:#ffffffd9;padding:32px;gap:16px;position:relative}
.home .card h3{font-size:26px;max-width:24ch}
.home .card>svg{width:42px;height:42px;background:#e9f1fb;padding:9px;border-radius:6px;box-sizing:content-box;width:25px;height:25px}
.home .card p{font-size:15px}
.home .card .tags{border-top:1px solid var(--line);padding-top:16px;font-size:11px;letter-spacing:.06em;margin-top:3px}
.card-index{position:absolute;right:30px;top:32px;color:#667b97;font-family:'Sora',sans-serif;font-size:12px}
.home #since{background:#0a2c61;color:white;padding:0;overflow:hidden}
.story-layout{display:grid;grid-template-columns:1fr 1fr;min-height:540px}
.story-copy{padding:78px 64px 78px 0;display:grid;gap:24px;align-content:center}
.home #since .lbl{color:#94bffa}
.home #since h2{max-width:14ch;color:#fff}
.story-lede{font-size:20px;line-height:1.5;color:#e2edff;max-width:37ch}
.story-detail{font-size:15px;color:#bbcee8;line-height:1.75;max-width:48ch}
.home #since .btn-o{color:white;border-color:#ffffff66;font-size:12px;padding:14px 17px}
.home #since .btn-o:hover{background:#fff;color:var(--navy)}
.story-photo{position:relative;margin:0;min-height:440px;margin-right:calc((min(1200px,100vw - 96px) - 100vw)/2)}
.story-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.story-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#082551cc,transparent 50%)}
.story-photo figcaption{position:absolute;bottom:32px;left:32px;right:32px;z-index:1;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.home #work{background:#f8fafc}
.home #work .work-hd{padding-bottom:36px}
.home #work h2{font-size:clamp(2.2rem,4vw,3.6rem)!important;max-width:16ch!important}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.project-card{display:block;color:var(--ink);background:white;border:1px solid #dfe7f1;border-radius:5px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.project-card:hover{color:var(--navy);box-shadow:0 12px 30px #0d3a8214;transform:translateY(-4px)}
.project-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.project-body{padding:24px;display:grid;gap:10px;position:relative}
.project-body .lbl{font-size:9px;color:#52657c}
.project-body h3{font-size:23px;padding-right:22px}
.project-arrow{position:absolute;right:22px;bottom:21px;color:var(--blue);font-size:24px}
.home #where{background:#0d3a82;color:#fff;position:relative;overflow:hidden}
.home #where::before{content:'';position:absolute;width:680px;height:680px;border:1px solid #ffffff0e;border-radius:50%;left:-360px;top:-260px;box-shadow:0 0 0 90px #ffffff03,0 0 0 180px #ffffff03;pointer-events:none}
.home #where .wrap{position:relative}
.home #where .lbl{color:#a9ccff}
.home #where .sec-hd{grid-column:span 6}
.home #where .sec-hd h2{font-size:clamp(2.2rem,4vw,3.6rem);max-width:17ch}
.home #where .sec-hd p{color:#d0dff4!important;max-width:48ch}
.home #where .ticks{background:none;border:0;border-radius:0;align-content:center;gap:0}
.home #where .ticks li{background:none;border-bottom:1px solid #ffffff30;padding:22px 0;font-size:16px;gap:18px}
.home #where .ticks li:first-child{border-top:1px solid #ffffff30}
.home #where .ticks svg{stroke:#b9d6ff;background:#ffffff14;border-radius:50%;width:28px;height:28px;padding:5px;margin:0}
.home #contact{background:#edf3fa}
.home .c-hd h2{font-size:clamp(2.2rem,4vw,3.6rem);max-width:20ch}
.home .c-hd p{font-size:17px}
.home .cgrid{gap:60px}
.home .cinfo{padding-right:10px}
.home #enq{background:white;border:1px solid #dbe5f1;box-shadow:0 16px 44px #0a2c6109;border-radius:7px;padding:36px}
.home input,.home select,.home textarea{background:#f8fafc;border-color:#d4dfed;border-radius:4px}
.home label{color:#405570}
.form-title{font-family:'DM Sans',sans-serif!important;font-size:27px!important;letter-spacing:-.03em;margin-bottom:5px}
.home button[type=submit]{background:var(--navy);border-radius:5px;justify-self:stretch}
.home button[type=submit]:hover{background:var(--ink)}
.home .cline .v{font-family:'DM Sans',sans-serif;font-weight:500;letter-spacing:0}
.home footer{background:#071d3d;border-top:4px solid #1a6de0}
.home .f-in{padding:30px 0}
.demo-note{font-size:12px;line-height:1.5;color:#52657c;padding:10px 13px;background:#eef3fa;border-radius:4px}
@media(min-width:1101px){.home nav{display:block;position:static;padding:0;background:none;border:0;box-shadow:none}.home nav ul{flex-direction:row;width:auto;gap:23px}.home nav li{border:0}.home nav a{padding:0;font-size:14px}.home .menu{display:none}}
@media(max-width:1100px){.home .story-copy{padding-right:35px}.home .project-grid{gap:14px}.home .project-body{padding:20px}.home .project-body h3{font-size:21px}}
@media(max-width:900px){.home .wrap{width:calc(100% - 56px)}.home{--gap:72px}.home #where .sec-hd{grid-column:1 / -1}.home .story-layout{grid-template-columns:1fr}.home .story-copy{padding:64px 0;max-width:600px}.home .story-photo{margin:0 -28px;height:360px;min-height:0}.home .story-photo img{object-position:center 60%}.home .cards{grid-template-columns:repeat(2,minmax(0,1fr))}.home .card{padding:25px}.home .card-index{top:25px;right:25px}.home .card h3{font-size:23px}.section-intro{display:grid;gap:20px}.section-intro>p{max-width:50ch}.home .cgrid{gap:35px}.home .cinfo{padding:0}.home #enq{padding:30px}.home .hero h1.lede{max-width:30ch;font-size:26px}.home .hero{min-height:500px}.home .project-body h3{font-size:20px}.home .project-body .lbl{letter-spacing:.08em}.home .project-arrow{display:none}}
@media(max-width:620px){.home .wrap{width:calc(100% - 40px)}.home .bar{padding:14px 0;gap:10px}.home .mark .n{font-size:23px}.home .mark .t{font-size:11px}.home .hdr-cta{font-size:11px;padding:12px}.home .menu{width:38px;height:38px;border-radius:5px}.home nav ul{width:calc(100% - 32px)}.home .hero{min-height:490px}.home .hero h1.lede{font-size:24px;max-width:28ch}.home .hero-txt{padding:46px 0 74px;gap:24px}.home .hero .acts{flex-direction:row;gap:10px}.home .hero .btn,.home .hero .btn-o{font-size:11px;padding:14px 16px}.home .stat,.home .stat:first-child,.home .stat:nth-child(2),.home .stat:last-child{padding:24px 10px;justify-items:center;text-align:center}.home .stat b{font-size:21px}.home .stat span{font-size:10px;line-height:1.5;max-width:13ch}.home .cards{grid-template-columns:1fr;gap:16px}.home .card h3{font-size:25px}.home .card{padding:27px}.home .card p{font-size:15px}.home .story-copy{padding:64px 0}.home .story-copy .acts{flex-direction:row;gap:10px}.home #since .btn-o{font-size:11px;padding:13px}.home .story-photo{margin:0 -20px;height:300px}.home .story-photo figcaption{left:20px;bottom:24px}.home .project-grid{grid-template-columns:1fr;gap:22px}.home .project-card img{aspect-ratio:16/10}.home .project-body{padding:23px}.home .project-body h3{font-size:25px}.home .project-arrow{display:block}.home .project-body .lbl{font-size:10px}.home .work-hd{gap:25px}.home #where .ticks li{font-size:15px;padding:20px 0}.home .c-hd{padding-bottom:32px}.home #enq{padding:25px 20px}.home .cgrid{gap:32px}.home .f-in{gap:12px;font-size:12px}.home .cline .v{font-size:17px}.home h2{font-size:38px}}
@media(prefers-reduced-motion:reduce){.project-card{transition:none}.project-card:hover{transform:none}}

/* Draft 02 — simplified photographic hero. */
.home .hero .hero-title{font-family:'DM Sans',sans-serif;font-size:clamp(48px,5.5vw,80px);font-weight:700;line-height:1.04;letter-spacing:-.045em;color:#fff;max-width:none;text-wrap:initial;text-shadow:0 2px 20px #081b3438}
.home .hero-title span{display:block}
.home .hero-txt{gap:0}
@media(max-width:620px){.home .hero .hero-title{font-size:clamp(37px,10.8vw,62px);line-height:1.07}.home .hero{min-height:460px}}

/* The hero's two action buttons are back (8 Oct). Draft 4 set .hero-txt gap to
   0 while the title was its only child; with the buttons under it they need
   air, or they sit against the descender of "1970s". */
.home .hero-txt{gap:30px}
@media(max-width:620px){ .home .hero-txt{gap:22px} }