:root{
  --charcoal:#16181d;
  --charcoal-2:#1d2027;
  --charcoal-3:#252932;
  --yellow:#f5b301;
  --yellow-bright:#ffc21a;
  --offwhite:#f4f2ec;
  --white-2:#fbfaf7;
  --grey:#9aa0a8;
  --grey-line:rgba(255,255,255,.09);
  --grey-line-dark:rgba(0,0,0,.10);
  --maxw:1400px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--charcoal);
  color:var(--offwhite);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Typography ---------- */
.display{font-family:'Oswald',sans-serif;font-weight:700;line-height:.96;text-transform:uppercase;letter-spacing:.01em}
.eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:.82rem;color:var(--yellow)}
.eyebrow.dark{color:#a86f00}
.hl{color:var(--yellow)}
h2.display{font-size:clamp(2rem,5vw,3.5rem)}
.lead{font-size:1.08rem;color:var(--grey);max-width:60ch}
section{position:relative}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.02rem;padding:.82rem 1.7rem;border-radius:3px;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;cursor:pointer;border:1.5px solid transparent;white-space:nowrap}
.btn svg{transition:transform .2s ease}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--yellow);color:var(--charcoal)}
.btn-primary:hover{background:var(--yellow-bright)}
.btn-ghost{background:transparent;color:var(--offwhite);border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.btn-ghost.on-light{color:var(--charcoal);border-color:rgba(0,0,0,.25)}
.btn-ghost.on-light:hover{border-color:var(--charcoal);color:#000}
@media (prefers-reduced-motion:reduce){.btn,.btn svg{transition:none}}

/* ---------- Nav ---------- */
header.nav{position:sticky;top:0;z-index:100;background:rgba(22,24,29,.86);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
header.nav.scrolled{border-bottom-color:var(--grey-line);background:rgba(20,22,27,.96)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:.7rem}
.logo .mark{width:54px;height:auto;display:block}
.logo .txt{font-family:'Barlow Condensed',sans-serif;line-height:1;text-transform:uppercase}
/* Optically centre the wordmark on the "AT" letterforms rather than on the artwork's box.
   Two things pull it low: the mark's bolt descender drops the artwork's box centre 10.14% of its
   height below the letters, and Barlow Condensed sets an 18px ascent against a 12.46px cap
   height, so the cap band sits low in the line box. Measured shift required: 7.2px. */
.logo .txt.one{font-weight:700;font-size:1.1rem;letter-spacing:.09em;color:#FFBA19;white-space:nowrap;position:relative;top:-7px}
.logo .txt b{display:block;font-weight:700;font-size:1.34rem;letter-spacing:.02em}
.logo .txt span{display:block;font-weight:600;font-size:.62rem;letter-spacing:.34em;color:var(--grey);margin-top:2px}
.nav-links{display:flex;align-items:center;gap:1.35rem;font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem}
.nav-links a{color:var(--offwhite);opacity:.82;transition:opacity .15s,color .15s;position:relative;padding:4px 0}
.nav-links a:hover{opacity:1;color:var(--yellow)}
.nav-cta{display:flex;align-items:center;gap:1.1rem}
.nav-phone{display:flex;align-items:center;gap:.5rem;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.03em;color:var(--offwhite)}
.nav-phone svg{color:var(--yellow)}
.burger{display:none;background:none;border:none;color:var(--offwhite);cursor:pointer;padding:8px}
@media(max-width:1024px){
  .nav-links,.nav-cta{display:none}
  .burger{display:block}
}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:200;background:var(--charcoal);transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;padding:24px}
.drawer.open{transform:translateX(0)}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.drawer a.dl{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:1.5rem;padding:.7rem 0;border-bottom:1px solid var(--grey-line)}
.drawer .drawer-actions{margin-top:auto;display:grid;gap:.8rem}
.drawer .btn{justify-content:center;width:100%}

/* ---------- Hero ---------- */
/* hero + yellow strip together fill exactly one viewport */
.heroblock{min-height:calc(100svh - 74px);display:flex;flex-direction:column}
.hero{background:var(--charcoal);position:relative;overflow:hidden;flex:1;display:flex}
.hero > .wrap{display:flex;flex-direction:column;width:100%}
.hero-grid{display:grid;grid-template-columns:47% 53%;align-items:center;flex:1;min-height:0}
/* The bigger mockup headline made the hero copy 671px tall, which pushed the yellow strip 28.6px
   below the fold at a 900px viewport and broke the hero+strip-in-one-screen rule. The copy is
   vertically centred by .hero-grid, so this padding only sets intrinsic height; trimming it buys
   back 35px and restores the fit without shrinking any type. */
.hero-copy{padding:1.3rem 2rem 1.3rem 0}
/* The hero is flex:1 inside .heroblock, so the yellow strip lands exactly on the fold for free
   PROVIDED the copy is no taller than (viewport - 74px nav - strip). That budget is a function of
   viewport HEIGHT, so the headline is sized off vh as well as vw.
   6.4vh is the binding constraint, taken from the shortest common laptop (768px tall): there the
   budget is 511px and the copy comes in at 506px. 6.6vh also fits but with only 0.6px to spare,
   which is inside the margin that font rendering varies by across machines. It also keeps at three
   lines rather than four; the fourth line costs ~70px of height on its own, which is what pushed
   the strip under the fold. Cap stays 4.5rem because .wrap maxes at 1400, so past that width the
   copy column stops growing and a bigger headline would run into the bolt. */
.hero h1{font-size:clamp(1.9rem,min(4.9vw,6.4vh),4.5rem);line-height:.92;margin:1.15rem 0 1.5rem}
.hero h1 span{display:block}
.hero .lead{font-size:1.12rem;line-height:1.75;color:#bac1c9;max-width:505px}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin:2.1rem 0 1.9rem}
/* Mockup drops the tick icons and separates the claims with middots, which reads much quieter */
.hero-trust{display:flex;flex-wrap:wrap;gap:.4rem .75rem;font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--grey)}
.hero-trust span{white-space:nowrap}
/* Separator hangs off the END of each item, not the start of the next: as a ::before it wrapped
   onto the next line at 390 and left a dangling middot opening the second line. */
.hero-trust span:not(:last-child)::after{content:"\00b7";margin-left:.75rem;opacity:.6}
/* image side — the supplied AT bolt is the divider; its left contour IS the image mask edge,
   traced from the artwork so the two align exactly. It crosses the centre line three times,
   so image and dark panel interlock top, middle and bottom. */
.hero-grid{position:relative}
.hero-copy{position:relative;z-index:2}
.hero-media{position:absolute;inset:0;z-index:0}
/* No hairline rule on the seam: a yellow line following the full seam poked out past the bolt's
   tapered tips as stray slivers at the top and bottom. The bolt alone is the divider, so the
   seam above and below its tips is clean hero background. (.edge is used only on mobile.) */
.hero-media .edge{display:none}
/* The bolt IS the boundary, layered above both panels. Yellow only (the artwork's dark outline
   is dropped, since it read as a muddy second bolt where it crossed the photo), at its natural
   slim ratio w/h 0.187, viewBox tightened to the yellow so it maps exactly onto the band.
   No cropping: at 9% wide over the full hero height the band is 122x665px, a 0.183 ratio against
   the artwork's natural 0.187, so the bolt is undistorted and its full right-to-left sweep is
   kept. That sweep is what makes the seam weave across the centre; cropping the ends to thicken
   the tips flattens it into a straight line with a blob in the middle.
   The mask below traces the bolt's RIGHT contour row by row (measured by rasterising the
   artwork and scanning its alpha), tucked 0.8% under it: the photo starts exactly where the
   bolt ends and slips beneath it, so the panels always hug the bolt with no gap beside it and
   no livery buried under it. That tuck is CLAMPED so the mask never sits left of the bolt's LEFT
   contour: near the tapered tips the bolt is thinner than 0.8%, and unclamped the photo leaked
   past the bolt into the dark panel (25 of 101 sampled rows). Clamped, the left side of the bolt
   is a clean unbroken line against the background for its whole height.
   Bolt spans 45-54%; seam runs 47.31-53.24%, starts at 53.24% (right
   of centre) and crosses the centre line at 31%, 49% and 74%, so the dark panel follows the bolt
   out over the photo side on the upper run and the photo follows it back over the dark side
   below. The livery text is measured at 56.5%, leaving 2.5% clear of the bolt's widest point. */
.hero-media .bolt{position:absolute;top:0;height:100%;left:45%;width:9%;z-index:2;pointer-events:none}
.hero-media .bolt img{width:100%;height:100%;display:block}
.hero-media .imgclip{position:absolute;inset:0;overflow:hidden;z-index:1;clip-path:var(--seam)}
.hero-media{--seam:polygon(53.24% 0,100% 0,100% 100%,47.32% 99%,47.37% 98%,47.43% 97%,47.5% 96%,47.56% 95%,47.63% 94%,47.69% 93%,47.76% 92%,47.82% 91%,47.89% 90%,47.98% 89%,48.12% 88%,48.25% 87%,48.38% 86%,48.51% 85%,48.64% 84%,48.77% 83%,48.91% 82%,49.03% 81%,49.17% 80%,49.29% 79%,49.43% 78%,49.56% 77%,49.68% 76%,49.81% 75%,49.94% 74%,50.08% 73%,50.2% 72%,50.34% 71%,50.46% 70%,50.6% 69%,50.73% 68%,50.86% 67%,50.99% 66%,51.12% 65%,51.25% 64%,51.38% 63%,51.51% 62%,51.64% 61%,51.77% 60%,51.89% 59%,52.03% 58%,52.15% 57%,52.29% 56%,52.41% 55%,52.55% 54%,52.67% 53%,52.81% 52%,52.94% 51%,53.08% 50%,53.2% 49%,48.52% 48%,48.62% 47%,48.7% 46%,48.8% 45%,48.88% 44%,48.96% 43%,49.04% 42%,49.13% 41%,49.21% 40%,49.29% 39%,49.38% 38%,49.46% 37%,49.54% 36%,49.63% 35%,49.71% 34%,49.79% 33%,49.88% 32%,49.96% 31%,50.04% 30%,50.13% 29%,50.2% 28%,50.29% 27%,50.38% 26%,50.45% 25%,50.54% 24%,50.62% 23%,50.7% 22%,50.79% 21%,50.87% 20%,50.95% 19%,51.04% 18%,51.12% 17%,51.2% 16%,51.28% 15%,51.37% 14%,51.47% 13%,51.61% 12%,51.74% 11%,51.88% 10%,52.01% 9%,52.15% 8%,52.28% 7%,52.42% 6%,52.55% 5%,52.69% 4%,52.83% 3%,52.96% 2%,53.1% 1%,53.24% 0%)}
/* img is confined to the region the bolt reveals. Left-anchored on purpose: cover crops
   horizontally on taller viewports, and centre anchoring would drag the livery leftwards into
   the bolt on a tall screen. Anchored left, the livery can only ever move right, so its
   clearance from the bolt is guaranteed at every viewport height. */
.hero-media .imgclip img{position:absolute;top:0;bottom:0;left:44%;width:56%;height:100%;object-fit:cover;object-position:0% 50%}
.hero-media .imgclip::after{content:"";position:absolute;inset:0;background:linear-gradient(97deg,rgba(22,24,29,0) 44%,rgba(22,24,29,.45) 52%,rgba(22,24,29,.12) 66%,transparent 80%)}
@media(max-width:1160px){
  .heroblock{min-height:0}
  .hero-grid{grid-template-columns:1fr;min-height:0;display:flex;flex-direction:column;align-items:stretch}
  .hero-copy{order:1;padding:2.5rem 0 2.1rem;max-width:none}
  .hero h1{font-size:clamp(1.7rem,8.2vw,3.15rem)}
  .hero-media{position:relative;order:2;min-height:0;height:56vw;max-height:430px;margin:0 -24px}
  .hero-media .bolt{display:none}
  .hero-media .edge{display:block;position:absolute;inset:0;background:var(--yellow);clip-path:polygon(0 10%,100% 0,100% 100%,0 100%)}
  .hero-media .imgclip{clip-path:polygon(0 13.5%,100% 3%,100% 100%,0 100%)}
  .hero-media .imgclip img{left:0;width:100%;object-position:50% 50%}
  .hero-media .edge{transform:none;z-index:0}
  .hero-media .imgclip::after{background:linear-gradient(180deg,rgba(22,24,29,.3) 0%,transparent 40%)}
}

/* ---------- Service strip ---------- */
.strip{background:var(--yellow);color:var(--charcoal)}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr)}
/* Icon sits above the heading at every width, as in the mockup, and the dividers are a light
   rule rather than a dark one so the strip reads as one clean yellow band. */
.strip-item{padding:2.1rem 1.9rem;border-right:1px solid rgba(255,255,255,.45);display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}
.strip-item:last-child{border-right:none}
.strip-item svg{flex-shrink:0}
.strip-item h3{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.7rem;letter-spacing:.03em;line-height:1}
.strip-item p{font-size:.9rem;line-height:1.5;color:#2c2410;margin-top:.35rem;font-weight:500}
/* Two columns below 760. Grid items default to min-width:auto, so each column's floor was
   padding(51.2) + icon(30) + gap(16) + the text's min-content(116, set by "communication")
   = 213px against 171px of available column at 390 — the grid overflowed by 34px and the
   page scrolled sideways. Stacking the icon above the text drops the icon+gap out of the
   floor and min-width:0 removes the auto floor entirely; break-word is the backstop so the
   long word wraps instead of spilling on very narrow phones. */
@media(max-width:760px){
  .strip-grid{grid-template-columns:1fr 1fr}
  .strip-item{border-bottom:1px solid rgba(255,255,255,.45);gap:.6rem;padding:1.5rem 1rem;min-width:0}
  .strip-item:nth-child(2n){border-right:none}
  /* Oswald runs ~16% wider than Barlow Condensed, so "Fast Response" needed 139px against
     exactly 139px of column at 390 and wrapped to two lines while the other three stayed on
     one, throwing the bottom row's paragraphs out of alignment. 1.12rem brings it to 121.6px,
     which clears the narrowest common phone (124px of column at 360). */
  .strip-item h3{font-size:1.12rem}
  .strip-item p{overflow-wrap:break-word}
}

/* ---------- Generic section spacing ---------- */
.sec{padding:clamp(4rem,8vw,7rem) 0}
.sec-head{max-width:760px;margin-bottom:3rem}
.sec-head h2{margin:1rem 0 1.1rem}
.light{background:var(--offwhite);color:var(--charcoal)}
.light .lead{color:#4a4f56}
.light .sec-head p,.light p{color:#3d424a}

/* trust intro */
.trust-intro{overflow:hidden}
.trust-intro .wrap{position:relative;z-index:1}
.trust-intro h2{font-size:clamp(1.9rem,4.4vw,3rem);max-width:20ch}
.trust-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start;margin-top:1rem}
.trust-cols .right{padding-top:.4rem}
.wm-mono{position:absolute;right:-6%;top:-30%;width:520px;opacity:.05;pointer-events:none;z-index:0}
@media(max-width:820px){.trust-cols{grid-template-columns:1fr;gap:1.4rem}}

/* environments */
.env-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.env-card{position:relative;border-radius:4px;overflow:hidden;min-height:400px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--charcoal-2);border:1px solid var(--grey-line)}
.env-card .env-bg{position:absolute;inset:0;z-index:0}
.env-card .env-bg img{width:100%;height:100%;object-fit:cover;opacity:.5;transition:transform .5s ease,opacity .4s}
.env-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,24,29,.15) 0%,rgba(22,24,29,.55) 55%,rgba(22,24,29,.96) 100%);z-index:1}
.env-card:hover .env-bg img{transform:scale(1.05);opacity:.62}
.env-body{position:relative;z-index:2;padding:1.8rem}
.env-num{font-family:'Oswald',sans-serif;font-weight:600;font-size:1.1rem;color:var(--yellow);letter-spacing:.05em}
.env-body h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.9rem;margin:.3rem 0 .6rem;line-height:1}
.env-body p{font-size:.94rem;color:#c7ccd2}
.env-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease,opacity .3s,margin .4s}
.env-card:hover .env-tags{max-height:120px;opacity:1;margin-top:1rem}
.env-tags span{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;padding:.28rem .6rem;border:1px solid var(--grey-line);border-radius:2px;color:var(--grey)}
/* env cards 01 + 02 are links through to their service pages */
a.env-card{text-decoration:none;color:inherit}
a.env-card:hover{border-color:rgba(245,179,1,.45)}
a.env-card:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.env-go{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.78rem;color:var(--yellow)}
.env-go svg{transition:transform .3s}
a.env-card:hover .env-go svg{transform:translateX(4px)}
/* offshore: capability being built up, not yet a service page */
.env-card.is-soon{cursor:default}
.env-card.is-soon .env-bg img{opacity:.28;filter:grayscale(.65)}
.env-card.is-soon:hover .env-bg img{transform:none;opacity:.28}
.env-soon{position:absolute;top:1.1rem;left:1.1rem;z-index:2;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.7rem;color:var(--charcoal);
  background:var(--yellow);padding:.34rem .7rem;border-radius:2px}
@media(max-width:820px){
  .env-grid{grid-template-columns:1fr}
  .env-card{min-height:0}
  .env-tags{max-height:200px;opacity:1;margin-top:1rem}
  .env-card .env-bg img{opacity:.4}
}

/* domestic service rows */
.srow{display:grid;grid-template-columns:64px 1fr auto;gap:1.3rem;align-items:center;padding:1.5rem 0;border-top:1px solid var(--grey-line-dark);cursor:pointer;transition:padding .2s}
.light .srow{border-top-color:rgba(0,0,0,.1)}
.srow:last-of-type{border-bottom:1px solid var(--grey-line-dark)}
.light .srow:last-of-type{border-bottom-color:rgba(0,0,0,.1)}
.srow .num{font-family:'Oswald',sans-serif;font-weight:600;font-size:1.5rem;color:var(--yellow);opacity:.9}
.srow .stitle{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.5rem;line-height:1;letter-spacing:.02em}
.srow .sdesc{font-size:.95rem;color:#4a4f56;margin-top:.25rem}
.srow .arrow{color:var(--yellow);transition:transform .2s}
.srow:hover{padding-left:.5rem}
.srow:hover .arrow{transform:translateX(5px)}
@media(max-width:640px){
  .srow{grid-template-columns:44px 1fr auto;gap:.8rem}
  .srow .stitle{font-size:1.2rem}
  .srow .sdesc{font-size:.88rem}
}

/* ---------- Selected work (editorial portfolio) ---------- */
/* DARK section (reverted from white so the off-white map section below it reads as a
   deliberate break). Bottom padding is tighter than the top now that the standalone CTA
   panel has gone: ~90px desktop / ~64px mobile after the last project. */
.work{background:var(--charcoal);color:var(--offwhite);border-top:1px solid var(--grey-line);padding:clamp(4rem,7vw,100px) 0 clamp(56px,7vw,90px)}
.work-head{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:end;margin-bottom:2.4rem}
.work-head h2{margin:1rem 0 0;line-height:.95}
.work-intro{max-width:420px;font-size:1.05rem;line-height:1.65;color:var(--grey);padding-bottom:.35rem}

.work-filters{display:flex;flex-wrap:wrap;gap:1.9rem;padding-bottom:1.5rem;border-bottom:1px solid var(--grey-line);margin-bottom:1rem}
.work-filters button{background:none;border:0;padding:0 0 .45rem;cursor:pointer;position:relative;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:.82rem;color:var(--grey);transition:color .3s}
.work-filters button::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.work-filters button:hover{color:var(--offwhite)}
.work-filters button[aria-pressed="true"]{color:var(--yellow)}
.work-filters button[aria-pressed="true"]::after{transform:scaleX(1)}
.work-filters button:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}

.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:1.6rem}
.wk{position:relative;overflow:hidden;border-radius:2px;background:var(--charcoal-2);display:block;text-decoration:none;
  transition:opacity .3s,filter .3s}
.wk .wk-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.wk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.wk::after{content:"";position:absolute;inset:0;z-index:1;transition:opacity .3s;
  background:linear-gradient(to top,rgba(9,14,17,.9) 0%,rgba(9,14,17,.35) 42%,rgba(9,14,17,0) 74%)}
.wk-body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:1.6rem}
.wk-cat{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;color:var(--yellow);margin-bottom:.45rem}
.wk-body h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.45rem;line-height:.98;letter-spacing:.01em;color:var(--offwhite);margin:0}
.wk-body p{font-size:.92rem;line-height:1.55;color:#c7ccd2;margin:.6rem 0 0;max-width:44ch}
.wk-arrow{position:absolute;right:1.6rem;bottom:1.6rem;z-index:2;color:var(--yellow);transition:transform .3s}
.wk:hover img{transform:scale(1.02)}
.wk:hover::after{opacity:1.15}
.wk:hover .wk-arrow{transform:translateX(4px)}
.wk:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.wk.lg .wk-body h3{font-size:2.15rem}
.wk.lg .wk-body{padding:2rem}
.wk.lg .wk-arrow{right:2rem;bottom:2rem}

/* explicit mosaic placement */
.wk-kitchen{grid-column:1/7;grid-row:1/3}
.wk-gym{grid-column:7/13;grid-row:1}
.wk-ext{grid-column:7/10;grid-row:2}
.wk-salon{grid-column:10/13;grid-row:2}
.wk-agri{grid-column:1/6;grid-row:3}
.wk-panel{grid-column:6/10;grid-row:3}
.wk-ufh{grid-column:10/13;grid-row:3}
.wk-ff{grid-column:1/13;grid-row:4}
.work-grid{grid-template-rows:320px 264px 400px 470px}

/* editorial statement panel */
.wk-panel{background:var(--charcoal-2);border:1px solid var(--grey-line);border-radius:2px;
  display:flex;flex-direction:column;justify-content:center;padding:2.2rem}
.wk-panel .rule{width:38px;height:3px;background:var(--yellow);margin-bottom:1.3rem}
.wk-panel .lbl{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--yellow)}
.wk-panel h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.85rem;line-height:.98;color:var(--offwhite);margin:.7rem 0 .9rem}
.wk-panel p{font-size:.93rem;line-height:1.6;color:var(--grey);margin:0}
.wk-panel .plink{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--yellow)}
.wk-panel .plink svg{transition:transform .3s}
.wk-panel .plink:hover svg{transform:translateX(4px)}

/* filtering: keep the mosaic, de-emphasise non-matching */
.wk.dim{opacity:.16;filter:grayscale(1);pointer-events:none}

/* closing CTA */
.work-cta{margin-top:80px;background:var(--charcoal-2);border-left:3px solid var(--yellow);
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;padding:2.2rem 2.4rem}
.work-cta h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.75rem;line-height:1;color:var(--offwhite);margin:0}
.work-cta p{font-size:.95rem;color:var(--grey);margin:.55rem 0 0}
.work-cta .btn{height:56px;padding:0 2.4rem;border-radius:2px;white-space:nowrap}

.work-more{display:none}

@media(max-width:1080px){
  .wk-body h3{font-size:1.3rem}
  .wk.lg .wk-body h3{font-size:1.8rem}
  .wk-panel h3{font-size:1.6rem}
}
@media(max-width:900px){
  .work-head{grid-template-columns:1fr;gap:1.2rem;align-items:start}
  .work-intro{max-width:none;padding-bottom:0}
}
@media(max-width:820px){
  /* clean vertical stack, text under the image, no shrunken mosaic */
  .work-grid{grid-template-columns:1fr;grid-template-rows:none;gap:1.5rem}
  .wk,.wk-panel{grid-column:1/-1!important;grid-row:auto!important}
  .wk{border:1px solid var(--grey-line);border-radius:2px}
  .wk .wk-media{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}
  .wk img{position:absolute}
  .wk::after{inset:auto;display:none}
  .wk-body{padding:1.2rem 1.2rem 1.4rem;height:auto}
  .wk-body h3,.wk.lg .wk-body h3{font-size:1.35rem}
  .wk-arrow{position:static;display:block;margin-top:.9rem}
  .wk.lg .wk-body{padding:1.2rem 1.2rem 1.4rem}
  /* mobile priority order */
  .wk-kitchen{order:1}.wk-gym{order:2}.wk-ext{order:3}.wk-agri{order:4}.wk-ff{order:5}.wk-panel{order:6}
  .wk-salon{order:7}.wk-ufh{order:8}
  .wk-salon,.wk-ufh{display:none}
  .work-grid.show-all .wk-salon,.work-grid.show-all .wk-ufh{display:block}
  .work-more{display:block;order:9;width:100%;margin-top:.2rem;background:none;cursor:pointer;
    border:1px solid var(--grey-line);color:var(--yellow);padding:1rem;border-radius:2px;
    font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.85rem}
  .wk-panel{padding:1.6rem 1.3rem}
  .work-cta{grid-template-columns:1fr;margin-top:3rem;padding:1.8rem 1.4rem;gap:1.4rem}
  .work-cta .btn{width:100%;justify-content:center}
  .work-filters{gap:1.2rem}
}

/* site & offshore technical */
.tech{background:var(--charcoal-2);border-top:1px solid var(--grey-line);border-bottom:1px solid var(--grey-line)}
.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.tech-list{display:grid;gap:0;margin:1.6rem 0}
/* fixed label column so every grey description starts on the same vertical line;
   `auto` sized each label to its own text and staggered the descriptions */
.tech-list .ti{display:grid;grid-template-columns:172px 1fr;gap:22px;padding:.95rem 0;border-top:1px solid var(--grey-line);align-items:baseline}
.tech-list .ti .lbl{font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--yellow);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}
.tech-list .ti p{font-size:.98rem;color:#c7ccd2}
.tech-media{position:relative;border-radius:4px;overflow:hidden;border:1px solid var(--grey-line)}
.tech-media img{width:100%;height:100%;object-fit:cover;min-height:340px}
.cert-note{margin-top:1.4rem;padding:1rem 1.2rem;border-left:3px solid var(--yellow);background:rgba(245,179,1,.06);font-size:.9rem;color:var(--grey)}
@media(max-width:820px){.tech-grid{grid-template-columns:1fr;gap:2rem}}

/* experience stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.4rem}
.stat{padding:1.8rem;border:1px solid var(--grey-line);border-radius:4px;background:var(--charcoal-2)}
.stat .big{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(2.4rem,5vw,3.4rem);color:var(--yellow);line-height:1}
.stat .lbl{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;color:var(--grey);margin-top:.5rem}
@media(max-width:640px){.stats{grid-template-columns:1fr}}

/* why choose */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--grey-line)}
.why-item{padding:2.2rem 1.8rem 2.2rem 0;border-bottom:1px solid var(--grey-line);border-right:1px solid var(--grey-line);padding-right:1.8rem;padding-left:1.6rem}
.why-item:nth-child(3n){border-right:none}
.why-num{font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--yellow);font-size:.9rem;letter-spacing:.1em}
.why-item h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.4rem;margin:.6rem 0 .5rem;line-height:1.05}
.why-item p{font-size:.94rem;color:#c7ccd2}
@media(max-width:820px){.why-grid{grid-template-columns:1fr}.why-item{border-right:none!important;padding-left:0}}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.about-media{border-radius:4px;overflow:hidden;border:1px solid var(--grey-line);position:relative}
.about-media img{width:100%;object-fit:cover}
.about-media .tag{position:absolute;left:0;bottom:1.4rem;background:var(--yellow);color:var(--charcoal);font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.5rem 1.1rem;font-size:.95rem}
.about-facts{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.4rem;margin-top:1.6rem}
.about-facts .f{padding:.6rem 0;border-top:1px solid var(--grey-line)}
.about-facts .f .k{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--yellow)}
.about-facts .f .v{font-size:.98rem;color:var(--offwhite)}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;gap:2rem}}

/* reviews */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.rev-card{background:var(--charcoal-2);border:1px solid var(--grey-line);border-radius:4px;padding:1.8rem;display:flex;flex-direction:column}
.light .rev-card{background:#fff;border-color:rgba(0,0,0,.09)}
.stars{color:var(--yellow);letter-spacing:.14em;font-size:1.05rem;margin-bottom:1rem}
.rev-card p.q{font-size:1rem;line-height:1.55;flex:1}
.rev-card .who{margin-top:1.3rem;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem}
.rev-card .who small{display:block;font-weight:500;letter-spacing:.03em;color:var(--grey);font-size:.8rem;text-transform:none}
.light .rev-card .who small{color:#666}
.rev-note{margin-top:2rem;font-size:.9rem;color:#666}
@media(max-width:820px){.rev-grid{grid-template-columns:1fr}}


/* process */
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:1rem;position:relative}
.proc-step .pn{font-family:'Oswald',sans-serif;font-weight:600;font-size:3.4rem;color:var(--yellow);line-height:1;opacity:.95}
.proc-step h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.4rem;margin:.4rem 0 .5rem}
.proc-step p{font-size:.96rem;color:#c7ccd2}
.proc-step{position:relative;padding-top:1.4rem;border-top:2px solid var(--grey-line)}
.proc-step::before{content:"";position:absolute;top:-2px;left:0;width:40%;height:2px;background:var(--yellow)}
@media(max-width:760px){.proc-grid{grid-template-columns:1fr;gap:1.4rem}}

/* faq */
.faq-item{border-top:1px solid var(--grey-line-dark)}
.faq-item:last-child{border-bottom:1px solid var(--grey-line-dark)}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:1.35rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.2rem;letter-spacing:.02em;color:inherit}
.faq-q .pm{color:var(--yellow);flex-shrink:0;transition:transform .25s;font-size:1.4rem;line-height:1}
.faq-item.open .faq-q .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 0 1.35rem;font-size:.98rem;color:#4a4f56;max-width:70ch}

/* final CTA */
.final{background:var(--charcoal);overflow:hidden;position:relative}
.final-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.final-copy{padding:clamp(3.5rem,7vw,6rem) 3rem clamp(3.5rem,7vw,6rem) 0}
.final-copy h2{font-size:clamp(2rem,4.6vw,3.4rem);margin-bottom:1.2rem;max-width:18ch}
.final-media{position:relative;min-height:100%}
.final-media .fclip{position:absolute;inset:0;clip-path:polygon(16% 0,100% 0,100% 100%,0 100%);overflow:hidden}
.final-media img{width:100%;height:100%;object-fit:cover}
.final-media .fclip::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(22,24,29,.85),transparent 45%)}
/* form */
.qform{margin-top:2rem;display:grid;gap:.85rem;max-width:520px}
.qform .row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.qform label{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;color:var(--grey);margin-bottom:.25rem;display:block}
.qform input,.qform select,.qform textarea{width:100%;background:var(--charcoal-2);border:1px solid var(--grey-line);border-radius:3px;padding:.7rem .8rem;color:var(--offwhite);font-family:'Inter',sans-serif;font-size:.95rem}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:2px solid var(--yellow);outline-offset:0;border-color:var(--yellow)}
.qform textarea{resize:vertical;min-height:88px}
.qform .btn{margin-top:.4rem;justify-content:center}
.form-msg{font-size:.9rem;color:var(--yellow);margin-top:.6rem;display:none}
@media(max-width:900px){
  .final-grid{grid-template-columns:1fr}
  .final-copy{padding:3rem 0}
  .final-media{min-height:56vw;max-height:380px}
  .final-media .fclip{clip-path:polygon(0 0,100% 0,100% 84%,0 100%)}
  .qform{max-width:100%}
}

/* footer */
footer{background:#101216;border-top:1px solid var(--grey-line);padding:3.4rem 0 6rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.foot-brand .logo{margin-bottom:1rem}
.foot-brand p{font-size:.9rem;color:var(--grey);max-width:32ch}
.foot-col h4{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:var(--yellow);margin-bottom:1rem}
.foot-col a,.foot-col p{display:block;font-size:.92rem;color:var(--grey);padding:.28rem 0;transition:color .15s}
.foot-col a:hover{color:var(--offwhite)}
.foot-bottom{border-top:1px solid var(--grey-line);margin-top:2.6rem;padding-top:1.6rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.82rem;color:#5f656d}
.foot-bottom a{color:#5f656d}
.foot-bottom a:hover{color:var(--grey)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* mobile sticky bar */
.mobar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--charcoal);border-top:1px solid var(--grey-line);grid-template-columns:1fr 1fr;gap:0}
.mobar a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1rem}
.mobar a.call{color:var(--offwhite)}
.mobar a.quote{background:var(--yellow);color:var(--charcoal)}
@media(max-width:1024px){.mobar{display:grid}}

/* reveal
   Content is VISIBLE BY DEFAULT. JS adds .pending to opt an element into the entrance
   animation, then .in to play it. This inversion matters: previously .reveal hid content
   outright and only JS could bring it back, so a single syntax error in the page script
   left #work and #areas permanently blank. Now a JS failure just means no animation. */
.reveal{opacity:1}
.reveal.pending{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.pending.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal.pending{opacity:1;transform:none;transition:none}}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* ---------- Inner service pages (domestic.html / commercial.html) ---------- */
.pagehead{background:var(--charcoal);padding:clamp(2.6rem,5vw,4rem) 0 clamp(1.6rem,3vw,2.4rem);border-bottom:1px solid var(--grey-line)}
.pagehead h1.display{font-size:clamp(2rem,5vw,3.5rem);margin:.9rem 0 1.1rem;max-width:22ch}
.pagehead .lead{max-width:60ch}
.crumb{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:.76rem;color:var(--grey)}
.crumb a{color:var(--grey);text-decoration:none}
.crumb a:hover{color:var(--yellow)}
.crumb span{margin:0 .45rem;opacity:.5}
.nav-links a[aria-current="page"]{opacity:1;color:var(--yellow)}

/* ---------- Homepage colour rotation: dark -> orange -> white -> dark ... ----------
   Order is hero(dark) strip(orange) why(white) work(dark) areas(orange) contact(white)
   footer(dark). No two adjacent sections share a background. */

/* strip items 01/02 are links through to their service pages */
a.strip-item{color:inherit;text-decoration:none;transition:background .2s}
a.strip-item:hover{background:rgba(255,255,255,.28)}
a.strip-item:focus-visible{outline:2px solid var(--charcoal);outline-offset:-3px}
/* Offshore badge is absolutely positioned so it adds NO height: the strip has a fixed
   183px budget in the fold rule and any extra flow content would push it past the fold. */
.strip-item{position:relative}
.strip-item.is-soon{opacity:.72}
.strip-soon{position:absolute;top:.7rem;right:.8rem;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.62rem;color:var(--yellow);
  background:var(--charcoal);padding:.22rem .5rem;border-radius:2px;white-space:nowrap}

/* orange section */
.sec.accent{background:var(--yellow);color:var(--charcoal)}
.sec.accent .lead,.sec.accent p{color:#3a2f0d}
.sec.accent .eyebrow,.sec.accent .eyebrow.dark{color:#6b4d00}
.sec.accent .area-list span{border-color:rgba(0,0,0,.2);background:rgba(255,255,255,.42)}
.sec.accent .area-cta a{color:var(--charcoal);border-bottom-color:rgba(0,0,0,.5)}

/* qualifications block (inside the WHITE service-area section) */
.quals{margin-top:3.2rem;padding-top:2.3rem;border-top:1px solid rgba(0,0,0,.14)}
.quals-head{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:.78rem;color:#a86f00;margin-bottom:1.2rem}
.qual-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.qual{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:3px;
  padding:1rem 1.05rem;display:flex;gap:.7rem;align-items:flex-start;min-width:0}
.qual svg{flex-shrink:0;margin-top:3px;color:#a86f00}
.qual span{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.92rem;
  line-height:1.25;color:#4a4f56;min-width:0;overflow-wrap:break-word}
.qual span b{display:block;font-weight:700;text-transform:uppercase;font-size:1.05rem;
  letter-spacing:.02em;color:var(--charcoal);line-height:1.1;margin-bottom:.15rem}

/* yellow variant of the final CTA + form */
.final.on-accent{background:var(--yellow);color:var(--charcoal)}
.final.on-accent .eyebrow,
.final.on-accent .eyebrow.dark{color:#6b4d00}
.final.on-accent .lead{color:#3a2f0d}
.final.on-accent .qform label{color:#5c4a12}
.final.on-accent .qform input,
.final.on-accent .qform select,
.final.on-accent .qform textarea{background:#fff;border-color:rgba(0,0,0,.2);color:var(--charcoal)}
/* the global focus ring is yellow, which is invisible here */
.final.on-accent .qform input:focus,
.final.on-accent .qform select:focus,
.final.on-accent .qform textarea:focus{outline-color:var(--charcoal);border-color:var(--charcoal)}
.final.on-accent a:focus-visible,
.final.on-accent button:focus-visible{outline-color:var(--charcoal)}
/* .btn-primary is yellow-on-dark; on a yellow section it would disappear, so it inverts */
.final.on-accent .btn-primary{background:var(--charcoal);color:var(--offwhite)}
.final.on-accent .btn-primary:hover{background:#0b0d11}
.final.on-accent .form-msg{color:#6b4d00}
.final.on-accent .final-media .fclip::after{background:linear-gradient(100deg,rgba(245,179,1,.92),transparent 45%)}
@media(max-width:900px){
  .final.on-accent .final-media .fclip::after{background:linear-gradient(180deg,rgba(245,179,1,.88),transparent 42%)}
}

/* FAQ on the orange section (about.html) */
.sec.accent .faq-item{border-top-color:rgba(0,0,0,.22)}
.sec.accent .faq-item:last-child{border-bottom-color:rgba(0,0,0,.22)}
.sec.accent .faq-q{color:var(--charcoal)}
.sec.accent .faq-q .pm{color:var(--charcoal)}
.sec.accent .faq-a p{color:#3a2f0d}

/* ---------- Request a quote: call/WhatsApp first, form second ----------
   The van photo is MOBILE ONLY. On desktop it took half the section and did
   nothing for conversion, so the copy, CTAs and form get the full width. */
.final-media{display:none}
/* block, not a 1-col grid: .wrap uses `margin:0 auto`, and auto margins on a grid item
   cancel `justify-self:stretch`, so it shrink-to-fit to ~706px instead of filling to 1400 */
.final-grid{display:block}
.final-copy{padding:clamp(3.5rem,7vw,6rem) 0}
.final-copy h2{max-width:22ch}
.final-actions{display:flex;flex-wrap:wrap;gap:1rem;margin:1.9rem 0 0}
.final-actions .btn{min-height:56px;padding:0 1.9rem}
.final-actions .btn svg{transition:none}
.final-actions .btn:hover svg{transform:none}
/* the form is the secondary path now */
.form-alt{margin:2.4rem 0 0;padding-top:1.6rem;border-top:1px solid rgba(0,0,0,.18);
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:.82rem;color:#5c4a12}
.qform{max-width:720px}
@media(max-width:900px){
  .final-media{display:block}
  .final-actions .btn{width:100%}
}

/* mobile sticky bar: Call | WhatsApp | Quote */
.mobar{grid-template-columns:1fr 1fr .8fr}
.mobar a.wa{color:var(--offwhite);border-left:1px solid var(--grey-line)}
.mobar a.quote{border-left:1px solid var(--grey-line)}
@media(max-width:400px){
  .mobar a{font-size:.9rem;padding:.95rem .5rem;gap:.35rem}
}

/* ---------- #contact: horizontal, call/WhatsApp only ---------- */
.final-row{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center;
  padding:clamp(2.6rem,4.5vw,3.6rem) 0}
.final-text{max-width:60ch}
/* no max-width: letting the heading use the column keeps it to two lines, which is what
   actually shortens the band */
.final-row h2{font-size:clamp(1.7rem,3.2vw,2.5rem);max-width:none}
.final-row .lead{margin-top:.8rem;max-width:64ch}
.final-row .final-actions{margin:0;flex-wrap:nowrap}
@media(max-width:900px){
  .final-row{grid-template-columns:1fr;gap:1.8rem;padding:2.6rem 0 2.2rem}
  .final-row .final-actions{flex-wrap:wrap}
}

/* ---------- Service area map (warm off-white break between two dark sections) ---------- */
/* Compact: the whole section must sit inside a normal desktop viewport.
   Height is content-based, never 100vh. Budget at 1440: 555 map + 2x75 padding = 705px.
   That lands in the overlap of Will's two specs: 700-780px absolute AND a 30-35% cut from
   the original 1013px. The copy column measures ~540px, so the map governs the height. */
.areamap{background:#F3F0E8;color:var(--charcoal);padding:75px 0}
.areamap .wrap{max-width:1320px}
.area-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:center}
.area-copy h2{margin:.85rem 0 24px}
.areamap .lead{color:#4a4f56;max-width:52ch}
.area-note{margin-top:28px;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:.86rem;color:#6b7178}
.area-phone{display:inline-flex;align-items:center;gap:.6rem;margin-top:.6rem;
  font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.1rem);
  color:var(--charcoal);border-bottom:3px solid var(--yellow);padding-bottom:.15rem;
  transition:color .2s}
.area-phone svg{color:#a86f00;flex-shrink:0}
.area-phone:hover{color:#a86f00}
.area-phone:focus-visible{outline:2px solid #a86f00;outline-offset:4px}
.area-range{margin-top:24px;padding-top:20px;border-top:1px solid rgba(0,0,0,.14);
  font-size:.92rem;line-height:1.55;color:#5c626a;max-width:46ch}

/* the map itself */
.area-vis{display:flex;justify-content:flex-start;align-items:center}
/* HEIGHT drives the size. The viewBox is 400x760 (ratio 1.9), so setting width first
   letterboxes: a 480px-wide box only holds a 316px-wide drawing and leaves ~164px of dead
   space in the column. width:auto lets the intrinsic ratio derive the width from the height,
   so the element box == the drawing and the column reads as deliberate, not empty. */
.nemap{height:555px;width:auto;max-width:100%;overflow:visible}
.nemap .land{fill:rgba(22,24,29,.055);stroke:rgba(22,24,29,.28);stroke-width:1.1;
  stroke-linejoin:round}
.nemap .route{fill:none;stroke:var(--yellow);stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:1200;stroke-dashoffset:1200;
  animation:drawroute 2.2s ease .3s forwards}
@keyframes drawroute{to{stroke-dashoffset:0}}
.nemap .mapbolt{fill:var(--yellow);stroke:none;opacity:.9}
.nemap .mk circle{fill:var(--charcoal);transition:r .25s ease,fill .25s ease}
.nemap .mk text{font-family:'Barlow Condensed',sans-serif;font-weight:600;fill:#4a4f56;
  dominant-baseline:middle;paint-order:stroke;stroke:#F3F0E8;stroke-width:3px;
  stroke-linejoin:round}
.nemap .t1 circle{fill:var(--yellow);stroke:var(--charcoal);stroke-width:1.6}
.nemap .t1 text{font-weight:700;fill:var(--charcoal);letter-spacing:.02em}
.nemap .t2 text{fill:#3d424a}
.nemap .t3 text{fill:#6b7178}
/* gentle staggered entrance, no constant drifting */
.nemap .mk{opacity:0;transform:translateY(3px);animation:mkin .5s ease forwards;
  animation-delay:var(--d)}
@keyframes mkin{to{opacity:1;transform:translateY(0)}}
.nemap .mk:hover circle{fill:var(--yellow);r:6}
.nemap .mk:hover text{fill:var(--charcoal)}
@media (prefers-reduced-motion:reduce){
  .nemap .mk{opacity:1;transform:none;animation:none}
  .nemap .route{stroke-dashoffset:0;animation:none}
}

/* mobile: grouped regional list instead of tiny labels */
.area-groups{display:none}
.area-groups .ag{padding:.9rem 0;border-top:1px solid rgba(0,0,0,.12)}
.area-groups h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.82rem;color:#a86f00;margin-bottom:.3rem}
.area-groups p{font-size:.93rem;line-height:1.5;color:#4a4f56}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* wide screens: stop growing */
@media(min-width:1600px){.nemap{height:555px}}

/* Stack at 1100, not 900. Two columns below ~1100 forces the map under ~450px tall, which
   drops the label sizes to 10.4/8.6/7.7px - measured, and the smallest are unreadable.
   Will's own rule: keep two columns ONLY while both stay readable, otherwise stack.
   Stacked, the map keeps a 470px height and the grouped regional list carries the detail. */
@media(max-width:1100px){
  .area-grid{grid-template-columns:1fr;gap:2.4rem}
  .nemap{height:470px}
  .nemap .t3{display:none}          /* secondary labels would be unreadable this small */
  /* stretch would override the SVG's intrinsic width and letterbox it again;
     the list still wants full width, so only the map centres itself */
  .area-vis{flex-direction:column;align-items:stretch;justify-content:center;gap:1.6rem}
  .nemap{align-self:center}
  .area-groups{display:block}
  .areamap .lead{max-width:none}
  .areamap{padding:64px 0}
}

/* ---------- Qualifications: dark, immediately after the off-white map ---------- */
.quals-sec{background:var(--charcoal);border-top:3px solid var(--yellow);
  padding:clamp(3rem,5.5vw,4.5rem) 0}
.quals-sec .quals{margin-top:0;padding-top:0;border-top:none}
.quals-sec .quals-head{color:var(--yellow)}
.quals-sec .qual{background:var(--charcoal-2);border-color:var(--grey-line)}
.quals-sec .qual svg{color:var(--yellow)}
.quals-sec .qual span{color:var(--grey)}
.quals-sec .qual span b{color:var(--offwhite)}

/* ---------- Compact enquiry form in the yellow conversion section ---------- */
.final-row{grid-template-columns:1fr 1fr;align-items:start;gap:clamp(2rem,4vw,3.5rem)}
.final-left .final-actions{margin-top:1.9rem}
.qform.compact{margin-top:0;max-width:none;gap:.7rem}
.qform.compact label{color:#5c4a12}
.qform.compact input,.qform.compact select,.qform.compact textarea{
  background:#FBF7E9;border:1px solid rgba(22,24,29,.42);border-radius:2px;
  color:var(--charcoal);padding:.6rem .7rem;font-size:.93rem}
.qform.compact input:focus,.qform.compact select:focus,.qform.compact textarea:focus{
  outline:2px solid var(--charcoal);outline-offset:0;border-color:var(--charcoal)}
.qform.compact textarea{min-height:74px;resize:vertical}
.qform.compact .row.last{align-items:end;gap:1rem}
.qform.compact .upload input[type=file]{background:none;border:none;padding:.35rem 0;font-size:.82rem}
.qform.compact .upload input[type=file]::file-selector-button{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.78rem;background:transparent;color:var(--charcoal);
  border:1px solid rgba(22,24,29,.42);border-radius:2px;padding:.45rem .8rem;margin-right:.6rem;cursor:pointer}
.qform.compact .upload input[type=file]::file-selector-button:hover{background:rgba(22,24,29,.08)}
.qform.compact button[type=submit]{background:var(--charcoal);color:var(--offwhite);
  border-radius:2px;min-height:52px;padding:0 1.6rem;margin-top:0;width:100%}
.qform.compact button[type=submit]:hover{background:#000}
.qform.compact button[type=submit]:focus-visible{outline:2px solid var(--charcoal);outline-offset:3px}
.form-msg{display:none;margin-top:.8rem;font-size:.92rem;line-height:1.5;color:var(--charcoal);
  background:rgba(255,255,255,.5);border-left:3px solid var(--charcoal);padding:.7rem .9rem}
.form-msg.show{display:block}

@media(max-width:900px){
  .final-row{grid-template-columns:1fr}
  .qform.compact .row,.qform.compact .row.last{grid-template-columns:1fr}
  .qform.compact button[type=submit]{width:100%}
}

/* ---------- Desktop / mobile copy variants ----------
   Will's copy brief specifies dedicated shorter wording below 768px rather than shrinking
   the desktop text. Both variants sit in the markup; only one is ever rendered. */
.d-copy{display:initial}
.m-copy{display:none}
@media(max-width:767px){
  .d-copy{display:none}
  .m-copy{display:initial}
}

/* mobile: service rows collapse to the title, description reveals on tap */
.srow-toggle{display:none}
@media(max-width:767px){
  .srow{cursor:pointer}
  .srow .sdesc{max-height:0;overflow:hidden;opacity:0;
    transition:max-height .28s ease,opacity .2s ease,margin .28s ease;margin-top:0}
  .srow.open .sdesc{max-height:140px;opacity:1;margin-top:.3rem}
  .srow .arrow{transition:transform .28s ease}
  .srow.open .arrow{transform:rotate(90deg)}
}

/* service-area town groups: visually hidden on desktop (kept for screen readers and
   search), compact expandable rows on mobile */
@media(min-width:1101px){
  .area-groups{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
@media(max-width:1100px){
  .area-groups .ag{padding:0;border-top:1px solid rgba(0,0,0,.12)}
  .area-groups .ag h3{margin:0;padding:.85rem 0;cursor:pointer;display:flex;
    align-items:center;justify-content:space-between;gap:1rem}
  .area-groups .ag h3::after{content:"+";font-size:1.15rem;line-height:1;color:#a86f00;
    transition:transform .25s ease}
  .area-groups .ag.open h3::after{transform:rotate(45deg)}
  .area-groups .ag p{max-height:0;overflow:hidden;opacity:0;
    transition:max-height .3s ease,opacity .22s ease,padding .3s ease;padding:0}
  .area-groups .ag.open p{max-height:220px;opacity:1;padding:0 0 .9rem}
}

/* final CTA: small trust line under the buttons */
.final-trust{margin-top:1rem;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:#5c4a12}

/* ---------- Domestic service matrix (replaces the old .srow list) ----------
   Editorial, not interactive: no numbers, no arrows, no hover movement. The old rows
   carried an arrow and a hover shift but did not link anywhere, which read as clickable. */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,4vw,3.6rem);margin-top:.6rem}
.svc{padding:1.35rem 0 1.4rem;border-top:1px solid rgba(0,0,0,.13);position:relative}
.svc.wide{grid-column:1/-1}
.svc h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.32rem;line-height:1.05;letter-spacing:.01em;color:var(--charcoal);
  padding-left:1.15rem;position:relative;transition:color .2s}
.svc h3::before{content:"";position:absolute;left:0;top:.32em;width:9px;height:9px;
  background:var(--yellow);transition:background .2s}
.svc p{margin:.4rem 0 0 1.15rem;font-size:.95rem;line-height:1.5;color:#5c626a;max-width:44ch}
.svc:hover h3{color:#000}
.svc:hover h3::before{background:var(--yellow-bright)}

@media(max-width:767px){
  /* genuinely expands, so a +/- affordance is honest here */
  .svc-grid{grid-template-columns:1fr}
  .svc{padding:0}
  .svc h3{padding:1rem 1.9rem 1rem 1.15rem;cursor:pointer;font-size:1.18rem}
  .svc h3::before{top:1.35rem}
  .svc h3::after{content:"+";position:absolute;right:0;top:.95rem;font-size:1.25rem;
    line-height:1;color:#a86f00;font-family:'Inter',sans-serif;font-weight:400;
    transition:transform .25s ease}
  .svc.open h3::after{transform:rotate(45deg)}
  .svc p{max-height:0;overflow:hidden;opacity:0;margin-top:0;
    transition:max-height .28s ease,opacity .2s ease,padding .28s ease;padding:0 1.15rem}
  .svc.open p{max-height:150px;opacity:1;padding:0 1.15rem 1.05rem}
}

/* ---------- Commercial capability rows on mobile ---------- */
@media(max-width:820px){
  .tech-list .ti{grid-template-columns:1fr;gap:.3rem;padding:.85rem 0}
}

/* ---------- About: facts + qualifications ---------- */
.about-facts .f .sub{font-size:.82rem;line-height:1.4;color:var(--grey);margin-top:.15rem}
.about-media .tag-sub{position:absolute;left:0;bottom:0;background:rgba(22,24,29,.86);
  color:var(--grey);font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;padding:.4rem 1.1rem}
.about-quals{margin-top:1.9rem;padding-top:1.4rem;border-top:1px solid var(--grey-line)}
.about-quals h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.78rem;color:var(--yellow);margin-bottom:.9rem}
.about-quals ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.4rem}
.about-quals li{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;line-height:1.35}
.about-quals li svg{color:var(--yellow);flex-shrink:0;margin-top:.15rem}
.about-quals li b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;font-size:1rem;color:var(--offwhite)}
.about-quals li span{color:var(--grey)}
@media(max-width:640px){.about-quals ul{grid-template-columns:1fr}}

/* About facts + qualifications sit on a LIGHT section, but were styled when that section
   was dark: .v and li b were var(--offwhite), i.e. invisible on #f4f2ec. */
.light .about-facts .f{border-top-color:rgba(0,0,0,.13)}
.light .about-facts .f .k{color:#a86f00}
.light .about-facts .f .v{color:var(--charcoal)}
.light .about-facts .f .sub{color:#5c626a}
.light .about-quals{border-top-color:rgba(0,0,0,.13)}
.light .about-quals h3{color:#a86f00}
.light .about-quals li b{color:var(--charcoal)}
.light .about-quals li span{color:#5c626a}
.light .about-quals li svg{color:#a86f00}