/* =============================================================
   NextLevel Landscaping — demo design system
   Reference direction: lagunapools.com.au (adapted, not copied)
   Palette is PLACEHOLDER — client brand colours pending.
   ============================================================= */

/* ---------- 1. Tokens ------------------------------------------------ */
:root{

  --ink:#1C2412;              /* deep green-black — body text */
  --bg:#F6F5EF;               /* warm off-white ground        */
  --muted:#6E7358;            /* secondary text on light */
  --muted-dark:rgba(255,255,255,.74);
  --line:#E2E0D5;
  --line-dark:rgba(255,255,255,.22);

  --scrim:rgba(20,26,14,.55);

  --r-arch:clamp(64px,12vw,176px);
  --r-arch-sm:clamp(40px,8vw,88px);
  --container:1200px;
  --gutter:24px;

  --f:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --pad-band:96px;
  --pad-band-lg:128px;
  --pad-band-sm:32px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Base ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;
  font-family:var(--f);
  font-size:16px;
  line-height:1.8;
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{
  margin:0;
  font-weight:400;
  line-height:1.04;
  text-transform:uppercase;
  letter-spacing:0;
}
h1,.h1{font-size:clamp(2rem,5.4vw,3rem)}
h2,.h2{font-size:clamp(1.9rem,4.6vw,2.6rem)}
h3,.h3{font-size:clamp(1.2rem,2.4vw,1.42rem);font-weight:500}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.measure{max-width:62ch}

.eyebrow{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--accent);
  margin-bottom:1.1rem;
}
.band--dark .eyebrow{color:var(--muted-dark)}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.6;color:var(--muted)}
.band--dark .lead{color:var(--muted-dark)}

/* ---------- 3. Bands / rhythm ------------------------------------- */
.band{padding-block:var(--pad-band);position:relative}
.band--lg{padding-block:var(--pad-band-lg)}
.band--tight{padding-block:var(--pad-band-sm)}
.band--dark{background:var(--surface-dark);color:#fff}
.band--dark h1,.band--dark h2,.band--dark h3{color:#fff}

.section-head{margin-bottom:3rem;max-width:52ch}
.section-head .lead{margin-top:.6rem}

/* contour motif — faint topographic lines behind dark bands / stats */
.contour::before{
  content:"";
  position:absolute;inset:0;
  background:url("../img/contour-lines.svg") right center/cover no-repeat;
  opacity:.1;pointer-events:none;
}
.band:not(.band--dark).contour::before{display:none}

/* ---------- 4. The arch / scoop shape --------------------------- */
.arch{border-radius:var(--r-arch) 0 0 0;overflow:hidden}
.arch--tr{border-radius:0 var(--r-arch) 0 0}
.arch--br{border-radius:0 0 var(--r-arch) 0}
.arch--bl{border-radius:0 0 0 var(--r-arch)}
.arch--sm{border-radius:var(--r-arch-sm) 0 0 0}
.arch--sm.arch--tr{border-radius:0 var(--r-arch-sm) 0 0}

.media{position:relative;background:var(--surface-dark);overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover}
.media--tall{aspect-ratio:4/5}
.media--wide{aspect-ratio:16/11}
.media--band{aspect-ratio:auto;min-height:420px}
.media__scrim{position:absolute;inset:0;background:var(--scrim)}

/* ---------- 5. Buttons ----------------------------------------- */
.btn-ghost{
  --c:var(--ink);
  display:inline-flex;align-items:center;gap:.6em;
  padding:15px 34px;
  border:1.5px solid var(--c);
  border-radius:999px;
  color:var(--c);
  background:transparent;
  font:500 .8rem/1 var(--f);
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:color .3s var(--ease);
  isolation:isolate;
}
.btn-ghost::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--c);
  transform:translateY(101%);
  transition:transform .32s var(--ease);
}
.btn-ghost:hover{color:var(--bg)}
.btn-ghost:hover::before{transform:translateY(0)}
.btn-ghost--fill{--c:var(--accent);background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-ghost--fill:hover{color:var(--accent)}
.btn-ghost--fill::before{background:#fff}
.band--dark .btn-ghost{--c:#fff}
.band--dark .btn-ghost:hover{color:var(--surface-dark)}

.tlink{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.8rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:3px;
  transition:gap .25s var(--ease),opacity .25s;
}
.tlink:hover{gap:.9em;opacity:.7}
.band--dark .tlink{border-color:var(--line-dark)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0 0;padding:0;list-style:none}
.chips li{
  font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  padding:.42em .9em;border:1px solid var(--line);border-radius:999px;color:var(--muted);
}
.band--dark .chips li{border-color:var(--line-dark);color:var(--muted-dark)}

/* ---------- 6. Header ----------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 0;
  transition:background-color .3s var(--ease),padding .3s var(--ease),box-shadow .3s;
}
.site-header__row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:flex;flex-direction:column;line-height:1;letter-spacing:.14em;font-weight:500;font-size:.98rem;color:#fff;transition:color .3s}
.brand span{font-size:.66rem;letter-spacing:.34em;color:var(--muted-dark);margin-top:5px;transition:color .3s}
.main-nav{display:flex;gap:2rem}
.main-nav a{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.86);transition:color .25s}
.main-nav a:hover{color:#fff}
.header-cta{display:flex;align-items:center;gap:1.4rem}
.header-cta .phone{font-size:.82rem;letter-spacing:.06em;color:#fff;display:flex;align-items:center;gap:.5em}
.header-cta .btn-ghost{padding:11px 24px;font-size:.72rem}
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.5);border-radius:999px;width:44px;height:44px;color:#fff;font-size:1rem;cursor:pointer}

/* scrolled state */
.site-header.is-stuck{background-color:var(--surface-dark);padding:12px 0;box-shadow:0 1px 0 rgba(0,0,0,.18)}
.site-header.is-stuck .brand,
.site-header.is-stuck .main-nav a,
.site-header.is-stuck .header-cta .phone{color:var(--ink)}
.site-header.is-stuck .brand span{color:var(--muted)}
.site-header.is-stuck .main-nav a{color:var(--muted)}
.site-header.is-stuck .main-nav a:hover{color:var(--ink)}
.site-header.is-stuck .btn-ghost{--c:var(--ink)}
.site-header.is-stuck .nav-toggle{color:var(--ink);border-color:var(--line)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:200;background:var(--surface-dark);color:#fff;
  transform:translateX(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column;padding:28px}
.drawer.is-open{transform:none}
.drawer__top{display:flex;justify-content:space-between;align-items:center}
.drawer__close{background:none;border:1px solid rgba(255,255,255,.5);border-radius:999px;width:44px;height:44px;color:#fff;font-size:1rem;cursor:pointer}
.drawer nav{display:flex;flex-direction:column;gap:.4rem;margin-top:3rem}
.drawer nav a{font-size:1.5rem;text-transform:uppercase;padding:.5rem 0;border-bottom:1px solid var(--line-dark)}
.drawer__foot{margin-top:auto;color:var(--muted-dark);font-size:.85rem}

/* ---------- 7. Hero ------------------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--surface-dark)}
.hero__media{position:absolute;inset:0;overflow:hidden;border-radius:0 0 0 var(--r-arch);background:var(--surface-dark)}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media img{animation:kenburns 22s var(--ease) infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
/* readability overlay: flat tint + top/bottom gradient for nav & headline */
.hero__overlay{position:absolute;inset:0;background:rgba(20,22,18,.42)}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,22,18,.62) 0%,rgba(20,22,18,.18) 32%,rgba(20,22,18,.20) 55%,rgba(20,22,18,.80) 100%)}
.hero__cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;
  color:rgba(255,255,255,.8);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.hero__cue::after{content:"";width:1px;height:46px;background:rgba(255,255,255,.5);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.3;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}
.hero__tag{position:relative;z-index:2;padding-bottom:46px;color:#fff}
.hero__tag span{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75)}

/* ---------- 8. Headline band -------------------------------- */
.headline .row-split{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.headline h1{margin-bottom:1.4rem}
.headline .btns{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.headline__aside{border-left:1px solid var(--line-dark);padding-left:2rem;color:var(--muted-dark);font-size:.92rem}
.headline__aside strong{display:block;color:#fff;font-size:2.4rem;font-weight:400;line-height:1;margin-bottom:.3rem}

/* ---------- 9. Stats strip --------------------------------- */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-arch-sm) 0 var(--r-arch-sm) 0;overflow:hidden}
.stat{background:var(--bg);padding:2rem 1.4rem;text-align:center}
.stat i{font-size:1.15rem;color:var(--accent);margin-bottom:.9rem;display:block}
.stat b{display:block;font-size:1.7rem;font-weight:400;line-height:1;margin-bottom:.5rem;color:var(--ink);letter-spacing:.01em}
.stat span{font-size:.78rem;line-height:1.5;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* about */
.row-split{display:grid}
.about-split{grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:center}
.about__media .media{aspect-ratio:4/5}
.about__values{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;flex-direction:column;gap:1rem}
.about__values li{display:flex;gap:1rem;font-size:.94rem;color:var(--muted-dark);line-height:1.6}
.about__values i{color:var(--accent);font-size:1rem;margin-top:.25rem;flex:none}
.about__values b{color:#fff;font-weight:500}

/* ---------- 10. Services (alternating arch bands) ---------- */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;margin-bottom:5.5rem}
.svc:last-child{margin-bottom:0}
.svc:nth-child(even) .svc__media{order:2}
.svc__no{display:inline-flex;align-items:center;gap:.6em;font-size:.8rem;letter-spacing:.2em;color:var(--accent);font-weight:500}
.svc__no i{font-size:1.5rem}
.svc h3{margin:.6rem 0 1rem}
.svc__media .media{aspect-ratio:16/12}

/* ---------- 11. Projects (swiper) ------------------------- */
.proj-swiper{overflow:visible}
.proj-card{display:block;color:inherit}
.proj-card .media{aspect-ratio:16/11;margin-bottom:1.4rem}
.proj-card__meta{display:flex;gap:.8rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:.6rem}
.proj-card h3{margin-bottom:.7rem}
.proj-card p{color:var(--muted-dark);font-size:.94rem}
.swiper-controls{display:flex;gap:.8rem;margin-top:2.5rem}
.swiper-controls button{width:52px;height:52px;border-radius:999px;border:1.5px solid var(--line-dark);
  background:none;color:#fff;font-size:1rem;cursor:pointer;transition:background .25s,color .25s}
.swiper-controls button:hover{background:#fff;color:var(--surface-dark)}
.band:not(.band--dark) .swiper-controls button{border-color:var(--line);color:var(--ink)}
.band:not(.band--dark) .swiper-controls button:hover{background:var(--ink);color:var(--bg)}

/* ---------- 12. Current work + stepper -------------------- */
.cw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.cw-card{display:block;color:inherit}
.cw-card .media{aspect-ratio:16/11;margin-bottom:1.3rem}
.cw-card__meta{display:flex;justify-content:space-between;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.cw-card h3{font-size:1.12rem;margin-bottom:.9rem}
.cw-card__note{font-size:.9rem;color:var(--muted);margin-bottom:1.2rem}
.stepper{list-style:none;padding:0;margin:0 0 1rem;display:flex;gap:6px}
.stepper li{flex:1;height:5px;border-radius:999px;background:var(--line)}
.stepper li.done{background:var(--accent)}
.stepper li.now{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.cw-card__stage{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);font-weight:500}
.cw-card__stage small{font-size:.72rem;display:block;color:var(--muted);font-weight:400;letter-spacing:.04em;margin-top:2px}

/* ---------- 13. Process ---------------------------------- */
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3.25rem}
.proc__num{position:relative;width:92px;height:92px;border-radius:50%;border:1.5px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:1.6rem;color:var(--accent)}
.proc__num span{position:absolute;right:-4px;top:-4px;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.72rem;display:flex;align-items:center;justify-content:center}
.proc h3{font-size:1.2rem;margin-bottom:.7rem}
.proc p{font-size:1rem;line-height:1.65;color:var(--muted)}

/* photo-led process step (client asked for images over icons,
   2026-09-23). Deliberately mirrors the store's "What we stock"
   row — client pointed at it and asked for the same treatment:
   portrait 3/4 images, tight gap, smaller type, and scooped
   bookend corners on the first and last card only. */
.proc-grid:has(.proc--photo){gap:1.6rem}
.proc__media{position:relative;margin-bottom:1rem;overflow:hidden;
  background:var(--surface-dark)}
/* height:auto is required — the width/height HTML attributes (kept for
   CLS) map to a presentational height, which would otherwise beat
   aspect-ratio and give the image its intrinsic 3:2 shape */
.proc__media img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  transition:transform .6s var(--ease)}
.proc--photo:hover .proc__media img{transform:scale(1.04)}
/* bookends, same as .store-card */
.proc--photo:first-child .proc__media{border-radius:var(--r-arch-sm) 0 0 0}
.proc--photo:last-child .proc__media{border-radius:0 var(--r-arch-sm) 0 0}
.proc--photo h3{font-size:1rem;margin-bottom:.4rem}
.proc--photo p{font-size:.86rem;line-height:1.6}
.proc__step{position:absolute;left:0;bottom:0;z-index:2;
  min-width:40px;height:40px;padding:0 .7rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--accent-ink,#17190F);
  font-size:.82rem;font-weight:500;letter-spacing:.04em;
  border-radius:0 var(--r-arch-sm) 0 0}
@media(prefers-reduced-motion:reduce){
  .proc__media img{transition:none}
  .proc--photo:hover .proc__media img{transform:none}
}

/* ---------- 14. Store ----------------------------------- */
.store-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.store-card{display:block}
.store-card .media{aspect-ratio:3/4;margin-bottom:1rem}
.store-card:nth-child(2) .media{border-radius:0 var(--r-arch-sm) 0 0}
.store-card:nth-child(3) .media{border-radius:0 0 var(--r-arch-sm) 0}
.store-card h3{font-size:1rem;margin-bottom:.4rem}
.store-card p{font-size:.86rem;color:var(--muted-dark)}
.band--dark .store-card p{color:var(--muted-dark)}

/* ---------- 15. Reviews -------------------------------- */
.rev-swiper{overflow:visible}
/* margin:0 — the card is a <blockquote>, whose browser default 40px side
   margins were indenting every review and narrowing it by 80px */
.rev-card{margin:0;border-top:1px solid var(--line);padding-top:1.6rem}
.rev-card p{font-size:1.02rem;line-height:1.7;margin-bottom:1.4rem;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden}
.rev-card__who{display:flex;align-items:center;gap:.9rem}
.rev-avatar{width:46px;height:46px;border-radius:50% 50% 50% 0;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;letter-spacing:.04em;flex:none}
.rev-card__who b{font-weight:500;font-size:.9rem}
.rev-card__who span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}

/* ---------- 16. Contact ------------------------------- */
.contact-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:start}
.contact-wrap>*{min-width:0}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.5rem}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:4px;
  font:400 .95rem/1.5 var(--f);color:var(--ink);background:#fff;
}
.field select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27><path fill=%27%236E7358%27 d=%27M5 7l5 5 5-5z%27/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:14px;padding-right:38px;cursor:pointer}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field textarea{min-height:120px;resize:vertical}
.field.err input,.field.err textarea,.field.err select{border-color:#c0392b}
.field .msg{font-size:.72rem;color:#c0392b;margin-top:.35rem;display:none}
.field.err .msg{display:block}
.form-note{font-size:.82rem;color:var(--muted);margin-top:.8rem}
/* the panel is deliberately a solid light box, so its ink is pinned
   dark rather than inherited — otherwise dropping the form on a dark
   band would give white text on a white panel */
.form-ok{display:none;padding:1.2rem 1.4rem;border-radius:4px;background:color-mix(in srgb,var(--accent) 12%,#fff);
  color:#1C2412;
  border:1px solid color-mix(in srgb,var(--accent) 40%,#fff);font-size:.9rem;margin-bottom:1.2rem}
.form-ok.show{display:block}
.contact-info dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem}
.contact-info dt{color:var(--accent);font-size:1rem}
.contact-info dd{margin:0;font-size:.95rem;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.contact-info dd a:hover{color:var(--ink)}
.contact-info .tbc{font-style:italic;opacity:.7}

/* ---------- 17. Footer ------------------------------- */
.site-footer{background:var(--surface-dark-2);color:var(--muted-dark);padding-block:72px 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:2.5rem}
.site-footer h4{color:#fff;font-size:.8rem;letter-spacing:.14em;margin-bottom:1.2rem}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem;font-size:.9rem}
.site-footer a:hover{color:#fff}
.footer-brand .brand{color:#fff}
.footer-brand p{font-size:.9rem;margin-top:1rem;max-width:34ch}
.footer-bar{margin-top:56px;border-top:1px solid var(--line-dark);padding:22px 0;font-size:.78rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- 18. Floating "Get a Free Quote" button ----------
   Right side (WhatsApp float was removed per client request);
   hidden until the visitor scrolls past the hero, see main.js #14. */
.quote-float{position:fixed;right:22px;bottom:22px;z-index:120;
  padding:13px 22px;font-size:.74rem;box-shadow:0 8px 24px rgba(0,0,0,.22);
  background:#C2E807;border-color:#C2E807;color:#17190F;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.quote-float.is-visible{opacity:1;transform:none;pointer-events:auto}
.quote-float:hover{transform:translateY(-2px)}
.quote-float.is-visible:hover{transform:translateY(-2px)}
@media(max-width:640px){
  .quote-float{right:14px;bottom:14px;padding:11px 16px;font-size:.72rem}
}
@media(prefers-reduced-motion:reduce){
  .quote-float{transition:opacity .2s}
}

/* ---------- 19. Reveal animation ------------------ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}

/* ---------- 20. Responsive ------------------------ */
@media(max-width:992px){
  .main-nav,.header-cta .phone{display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .header-cta .btn-ghost{display:none}
  .row-split,.headline .row-split{grid-template-columns:1fr;gap:2rem}
  .headline__aside{border-left:0;border-top:1px solid var(--line-dark);padding:2rem 0 0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .svc{grid-template-columns:1fr;gap:1.6rem;margin-bottom:3.5rem}
  .svc:nth-child(even) .svc__media{order:0}
  .cw-grid,.proc-grid,.store-grid{grid-template-columns:1fr 1fr}
  .contact-wrap{grid-template-columns:1fr;gap:2.5rem}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  :root{--pad-band:64px;--pad-band-lg:80px}
  .cw-grid,.proc-grid,.store-grid,.stats{grid-template-columns:1fr}
  .hero__tag h2{font-size:1.5rem}
  .footer-bar{flex-direction:column;margin-top:32px;gap:.5rem}
  /* Footer keeps TWO link columns on mobile. Collapsing all four
     blocks to one column made the footer 1257px tall at 375px —
     1.5x the viewport. Brand and the company block still span
     full width; Explore and Store sit side by side. */
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem 1.4rem}
  .footer-grid > :first-child,
  .footer-grid > :last-child{grid-column:1 / -1}
  .site-footer{padding-block:56px 0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .hero__media img{animation:none}
  html{scroll-behavior:auto}
}

/* =============================================================
   21. Sub-pages (Our Work, Project, Current Work, detail)
   ============================================================= */
.subhero{position:relative;background:var(--surface-dark);color:#fff;padding:150px 0 64px;overflow:hidden}
.subhero__media{position:absolute;inset:0;z-index:0}
.subhero__media img{width:100%;height:100%;object-fit:cover;opacity:.28}
.subhero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,18,.7),rgba(20,22,18,.92))}
.subhero .container{position:relative;z-index:1}
.crumb{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:1.1rem}
.crumb a:hover{color:#fff}
.subhero h1{margin-bottom:1rem}
.subhero .lead{max-width:60ch}
.subhero__meta{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.6rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-dark)}
.subhero__meta b{color:#fff;font-weight:500}

/* filter bar (static in demo) */
.filterbar{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:3rem}
.filterbar button{font:500 .72rem/1 var(--f);letter-spacing:.06em;text-transform:uppercase;
  padding:.7em 1.2em;border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);cursor:pointer;transition:.2s}
.filterbar button.is-active,.filterbar button:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* work index grid */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem 2.5rem}
.work-grid a{display:block}
.work-card .media{aspect-ratio:16/11;margin-bottom:1.3rem}
.work-card__meta{display:flex;gap:.7rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.work-card h3{margin-bottom:.7rem}
.work-card p{color:var(--muted);font-size:.94rem}

/* project detail */
.detail-body{display:grid;grid-template-columns:1.4fr .8fr;gap:4rem;align-items:start}
.narrative p{font-size:1.02rem;line-height:1.8}
.spec{border-top:1px solid var(--line);padding-top:1.4rem}
.spec dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.4rem;font-size:.92rem}
.spec dt{text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--muted);padding-top:2px}
.spec dd{margin:0;color:var(--ink)}
.scope-list{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-direction:column;gap:.7rem}
.scope-list li{display:flex;gap:.8rem;font-size:.94rem;color:var(--muted);line-height:1.6}
.scope-list i{color:var(--accent);margin-top:.35rem;font-size:.7rem;flex:none}

/* gallery + lightbox */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem}
.gallery-grid button{padding:0;border:0;background:none;cursor:pointer;overflow:hidden;border-radius:4px}
.gallery-grid img{aspect-ratio:1/1;width:100%;object-fit:cover;transition:transform .4s var(--ease)}
.gallery-grid button:hover img{transform:scale(1.05)}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(15,16,13,.94);display:none;align-items:center;justify-content:center;padding:5vw}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:90vh;object-fit:contain;border-radius:4px}
.lightbox button{position:absolute;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;width:52px;height:52px;border-radius:999px;font-size:1.1rem;cursor:pointer}
.lightbox .lb-close{top:24px;right:24px}
.lightbox .lb-prev{left:24px}
.lightbox .lb-next{right:24px}

/* vertical stepper (current-work detail) */
.stepper-v{list-style:none;padding:0;margin:0;position:relative}
.stepper-v::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--line)}
.stepper-v li{position:relative;padding:0 0 1.7rem 3rem;min-height:1px}
.stepper-v li:last-child{padding-bottom:0}
.stepper-v .dot{position:absolute;left:6px;top:0;width:20px;height:20px;border-radius:50%;background:var(--bg);border:2px solid var(--line);z-index:1}
.stepper-v li.done .dot{background:var(--accent);border-color:var(--accent)}
.stepper-v li.now .dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent)}
.stepper-v .st-name{text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;font-weight:500;color:var(--muted)}
.stepper-v li.done .st-name,.stepper-v li.now .st-name{color:var(--ink)}
.stepper-v li.now .st-name::after{content:" · in progress";color:var(--accent);font-weight:500}

/* progress summary bar */
.prog{display:flex;align-items:center;gap:1rem;margin:0 0 2rem}
.prog__bar{flex:1;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.prog__bar span{display:block;height:100%;background:var(--accent);border-radius:999px}
.prog__pct{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}

/* timeline / update log */
.timeline{list-style:none;padding:0;margin:0}
.timeline li{display:grid;grid-template-columns:120px 1fr;gap:1.4rem;padding:1.2rem 0;border-top:1px solid var(--line)}
.timeline li:first-child{border-top:0}
.timeline time{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.timeline .tl-stage{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:.3rem}
.timeline p{font-size:.94rem;color:var(--ink);margin:0}

/* "office would edit this" callout on detail page */
/* same rule as .ba-note: mix into transparent, never into var(--bg),
   so it survives being dropped on a dark band */
.cms-note{margin-top:2rem;padding:1.1rem 1.3rem;border:1px dashed var(--line);border-radius:6px;
  font-size:.84rem;color:color-mix(in srgb,var(--ink) 82%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.cms-note b{color:var(--ink);font-weight:500}

@media(max-width:900px){
  .detail-body{grid-template-columns:1fr;gap:2.5rem}
  .work-grid{grid-template-columns:1fr;gap:2.5rem}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .timeline li{grid-template-columns:1fr;gap:.3rem}
}

/* =============================================================
   22. Count-up stat line (replaces the boxed grid)
   ============================================================= */
.statline{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;position:relative;z-index:1}
.stat-n{position:relative;padding-left:1.6rem}
.stat-n::before{content:"";position:absolute;left:0;top:.4rem;bottom:.4rem;width:1px;background:var(--line)}
.stat-n b{display:block;font-size:clamp(2.6rem,5vw,3.6rem);font-weight:400;line-height:1;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat-n b i{font-style:normal;color:var(--accent)}
.stat-n > span{display:block;margin-top:.7rem;font-size:.82rem;line-height:1.5;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.stat-n b span{display:inline}

.credline{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;margin-top:3.5rem;padding-top:1.8rem;
  border-top:1px solid var(--line);position:relative;z-index:1}
.credline span{display:flex;align-items:center;gap:.7em;font-size:.82rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em}
.credline i{color:var(--accent);font-size:.95rem}
.credline b{color:var(--ink);font-weight:500}

/* =============================================================
   23. Services explorer (replaces 8 stacked rows)
   ============================================================= */
.svc-explorer{display:grid;grid-template-columns:.95fr 1.05fr;gap:4rem;align-items:start}

.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-item{
  width:100%;display:flex;align-items:center;gap:1.2rem;
  padding:1.15rem .4rem;background:none;border:0;border-bottom:1px solid var(--line);
  font:400 1rem/1.1 var(--f);color:var(--muted);text-align:left;cursor:pointer;
  text-transform:uppercase;letter-spacing:.02em;
  transition:color .3s var(--ease),padding-left .3s var(--ease);
}
.svc-item__no{font-size:.72rem;letter-spacing:.16em;color:var(--line);transition:color .3s;flex:none}
.svc-item__name{flex:1;font-size:clamp(1.05rem,1.8vw,1.35rem)}
.svc-item__go{opacity:0;transform:translateX(-8px);transition:.3s var(--ease);color:var(--accent);flex:none}
.svc-item:hover{color:var(--ink);padding-left:1rem}
.svc-item.is-active{color:var(--ink);padding-left:1rem}
.svc-item.is-active .svc-item__no{color:var(--accent)}
.svc-item.is-active .svc-item__go{opacity:1;transform:none}

.svc-stage{position:sticky;top:110px}
.svc-figure{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-arch) 0 0 0;background:var(--surface-dark)}
.svc-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease),transform 1.1s var(--ease)}
.svc-figure img.is-on{opacity:1;transform:none}
.svc-copy{margin-top:1.8rem;min-height:150px}
.svc-copy h3{margin-bottom:.8rem}
.svc-copy p{color:var(--muted);font-size:.96rem}
.svc-copy .chips{margin-top:1.1rem}
.svc-copy__inner{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.svc-copy__inner.is-on{opacity:1;transform:none}
.svc-accordion-media{display:none}

@media(max-width:900px){
  .svc-explorer{grid-template-columns:1fr;gap:0}
  .svc-stage{display:none}
  .svc-item{flex-wrap:wrap}
  .svc-item.is-active{padding-left:.4rem}
  .svc-item__go{display:none}
  .svc-accordion-media{display:block;width:100%;overflow:hidden;max-height:0;
    transition:max-height .45s var(--ease);}
  .svc-item.is-active + .svc-accordion-media{max-height:900px}
  .svc-accordion-media .inner{padding:.4rem 0 1.8rem}
  .svc-accordion-media .media{aspect-ratio:16/11;border-radius:var(--r-arch-sm) 0 0 0;margin-bottom:1.1rem}
  .svc-accordion-media p{color:var(--muted);font-size:.94rem}
}

/* =============================================================
   24. Before / after drag slider
   ============================================================= */
.ba-wrap{position:relative}
.ba{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-arch) 0 0 0;
  background:var(--surface-dark);cursor:ew-resize;touch-action:pan-y;user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__before{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.ba__line{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#fff;
  transform:translateX(-1px);pointer-events:none;box-shadow:0 0 18px rgba(0,0,0,.35)}
.ba__grip{position:absolute;top:50%;left:var(--x,50%);width:58px;height:58px;margin:-29px 0 0 -29px;
  border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;
  gap:.35em;font-size:.8rem;box-shadow:0 6px 24px rgba(0,0,0,.28);pointer-events:none}
.ba:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ba__tag{position:absolute;bottom:20px;padding:.5em 1.1em;border-radius:999px;
  background:rgba(20,22,18,.62);color:#fff;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  pointer-events:none;backdrop-filter:blur(4px)}
.ba__tag--b{left:20px}
.ba__tag--a{right:20px}
.ba-hint{margin-top:1rem;font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:.6em}
.ba-hint i{color:var(--accent)}
/* NOTE: the tint must mix into `transparent`, NOT into var(--bg).
   `--bg` is the LIGHT ground and is not flipped inside .band--dark
   (only --ink/--muted/--line/--accent are), so mixing into it painted
   a light box inside dark bands while --muted flipped to near-white —
   invisible text. Mixing into transparent tints whatever is behind it,
   so this reads correctly on both grounds. */
.ba-note{margin-top:1.4rem;padding:.9rem 1.1rem;border:1px dashed var(--line);border-radius:6px;
  font-size:.78rem;color:color-mix(in srgb,var(--ink) 82%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}

@media(max-width:900px){
  .statline{grid-template-columns:1fr 1fr;gap:2.4rem 1.6rem}
}
@media(max-width:640px){
  .ba{aspect-ratio:4/3}
  .ba__grip{width:48px;height:48px;margin:-24px 0 0 -24px}
}

/* ---------- 25. Header legibility over the hero video ---------- */
/* Primary CTA stays filled in both header states so it never
   disappears into a bright video frame. */
.site-header .header-cta .btn-ghost--fill,
.site-header.is-stuck .header-cta .btn-ghost--fill{
  --c:var(--accent);
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.site-header .header-cta .btn-ghost--fill::before{background:#fff}
.site-header .header-cta .btn-ghost--fill:hover{color:var(--accent)}

/* soft shadow so white nav text holds up on bright frames */
.site-header:not(.is-stuck) .brand,
.site-header:not(.is-stuck) .main-nav a,
.site-header:not(.is-stuck) .header-cta .phone,
.site-header:not(.is-stuck) .nav-toggle{
  text-shadow:0 1px 14px rgba(20,22,18,.6);
}
.site-header:not(.is-stuck) .nav-toggle{
  background:rgba(20,22,18,.25);
  backdrop-filter:blur(3px);
}

/* =============================================================
   26. SECTION SCOOPS
   The big curve belongs to the band, not to every image.
   A band pulls up over the one above it and cuts one corner,
   revealing the previous band's colour through the curve.
   ============================================================= */
.band--scoop{
  --r-scoop:clamp(64px,11vw,150px);
  position:relative;
  z-index:1;
  background:var(--bg);
  border-radius:var(--r-scoop) 0 0 0;
  margin-top:calc(-1 * var(--r-scoop));
  padding-top:calc(var(--pad-band) + var(--r-scoop) * .55);
}
.band--scoop.band--dark{background:var(--surface-dark)}
.band--scoop-tr{border-radius:0 var(--r-scoop) 0 0}
.band--scoop-sm{--r-scoop:clamp(44px,6vw,90px)}
.band--scoop-lg{--r-scoop:clamp(90px,16vw,220px)}
.band--scoop-xl{--r-scoop:clamp(110px,22vw,300px)}

/* footer gets one too */
.site-footer--scoop{
  position:relative;z-index:1;
  border-radius:0 clamp(64px,11vw,150px) 0 0;
  margin-top:calc(-1 * clamp(64px,11vw,150px));
  padding-top:calc(72px + clamp(64px,11vw,150px) * .55);
}

/* images: plain now — the shape lives on the sections */
.media{border-radius:4px}
.svc-figure{border-radius:4px}
.gallery-grid button{border-radius:4px}

@media(max-width:640px){
  .band--scoop{padding-top:calc(var(--pad-band) + var(--r-scoop) * .35)}
}
.band--scoop.contour::before{border-radius:inherit}
/* leftover per-card arch rules — images stay plain */
.store-card .media,
.store-card:nth-child(2) .media,
.store-card:nth-child(3) .media,
.svc-accordion-media .media,
.about__media .media{border-radius:4px}

/* =============================================================
   27. Band shape variant: both top corners (tab)
   ============================================================= */
.band--scoop-top{border-radius:var(--r-scoop) var(--r-scoop) 0 0}

/* =============================================================
   28. Full-bleed project image strip
   Fixed height, natural widths — landscape and portrait shots
   give the row its varied rhythm.
   ============================================================= */
.strip-band{position:relative;padding-block:0;background:var(--surface-dark)}
.strip{overflow:hidden;width:100%}
.strip .swiper-slide{
  width:auto;
  height:clamp(230px,32vw,440px);
  position:relative;
}
.strip .swiper-slide img{
  height:100%;width:auto;max-width:none;display:block;object-fit:cover;
}
.strip .swiper-slide button{
  padding:0;border:0;background:none;cursor:pointer;display:block;height:100%;
}
.strip__cap{
  position:absolute;left:14px;bottom:14px;z-index:2;
  padding:.42em 1em;border-radius:999px;
  background:rgba(20,22,18,.6);backdrop-filter:blur(4px);
  color:#fff;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);transition:.3s var(--ease);pointer-events:none;
}
.strip .swiper-slide:hover .strip__cap{opacity:1;transform:none}

.strip__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:54px;height:54px;border-radius:50%;border:0;
  background:rgba(255,255,255,.92);color:var(--ink);
  font-size:1rem;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.22);
  transition:background .25s,transform .25s var(--ease);
}
.strip__nav:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
.strip__prev{left:18px}
.strip__next{right:18px}
.strip__nav.swiper-button-disabled{opacity:.35;pointer-events:none}

@media(max-width:640px){
  .strip__nav{width:44px;height:44px}
  .strip__prev{left:10px}
  .strip__next{right:10px}
}

/* =============================================================
   29. BRAND PASS — context-aware accent
   Lime is unreadable as text on the off-white ground, so the
   accent resolves to moss on light and lime on dark. Anything
   sitting ON the accent uses --accent-ink.
   ============================================================= */
/* superseded by the theme block below */
.band--dark, .site-footer, .subhero, .drawer, .site-header,
.strip-band, .lightbox { /* superseded by the theme block below */ }

.btn-ghost--fill{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
  --c:var(--accent);
}
.btn-ghost--fill::before{background:var(--accent-ink)}
.btn-ghost--fill:hover{color:var(--accent)}
.site-header .header-cta .btn-ghost--fill,
.site-header.is-stuck .header-cta .btn-ghost--fill{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
}
.site-header .header-cta .btn-ghost--fill::before{background:#fff}
.site-header .header-cta .btn-ghost--fill:hover{color:var(--ink)}

.rev-avatar{background:var(--accent);color:var(--accent-ink)}
.stepper li.done,.stepper li.now{background:var(--accent)}
.proc__num span{background:var(--accent);color:var(--accent-ink)}
.stepper-v li.done .dot,.stepper-v li.now .dot{background:var(--accent);border-color:var(--accent)}
.prog__bar span{background:var(--accent)}

/* header: stays olive when stuck so the white logo keeps working */
.site-header.is-stuck .main-nav a,
.site-header.is-stuck .header-cta .phone{color:rgba(255,255,255,.88)}
.site-header.is-stuck .main-nav a:hover{color:#fff}
.site-header.is-stuck .nav-toggle{color:#fff;border-color:rgba(255,255,255,.45)}

/* real logo lockup */
.brand{display:block}
.brand img{height:44px;width:auto;display:block;filter:grayscale(1);transition:filter .3s}
.drawer .brand img{height:40px}
/* footer logo +30% (client, round 4): 40->52 */
.site-footer .brand img{height:52px}
@media(max-width:640px){
  .brand img{height:34px}
  .site-footer .brand img{height:44px}
}

/* welcome page: full-colour logo everywhere; every other page: b&w */
.pg-home .brand img{filter:none}

/* =============================================================
   30. THEMES — three complete looks for the client to compare.
   Each varies palette AND design treatment (shape + button +
   heading weight), not just colour.
   ============================================================= */

/* --- A. BRAND OLIVE (the logo's own colours) ---------------- */
:root,
[data-theme="brand"]{
  --ink:#1C2412;   --bg:#F6F5EF;
  --surface-dark:#5A6428;  --surface-dark-2:#4A5321;
  --muted:#6E7358; --line:#E2E0D5;
  --accent-dark:#C2E807;   --accent-ink-dark:#1C2412;
  --accent-light:#5A6428;  --accent-ink-light:#ffffff;
  --btn-radius:999px;  --h-weight:400;  --scoop:1;
}



/* --- C. CARBON + LIME (bold, architectural) ----------------- */
[data-theme="carbon"]{
  --ink:#14150F;   --bg:#FFFFFF;
  --surface-dark:#17190F;  --surface-dark-2:#0D0E08;
  --muted:#6A6C60; --line:#E6E6E0;
  --accent-dark:#C2E807;   --accent-ink-dark:#14150F;
  --accent-light:#3E4A16;  --accent-ink-light:#ffffff;
  --btn-radius:2px;    --h-weight:500;  --scoop:0;
}

/* context-aware accent, driven by the active theme */
:root{ --accent:var(--accent-light); --accent-ink:var(--accent-ink-light); }
.band--dark, .site-footer, .subhero, .drawer, .site-header,
.strip-band, .lightbox, .hero{ --accent:var(--accent-dark); --accent-ink:var(--accent-ink-dark); }

/* design traits driven by the theme */
.btn-ghost{border-radius:var(--btn-radius)}
h1,h2,h3,h4,h5,h6{font-weight:var(--h-weight)}

/* themes B and C are straight-edged — no scoop anywhere */
[data-theme="carbon"] .band--scoop{
  border-radius:0;margin-top:0;padding-top:var(--pad-band);
}
[data-theme="carbon"] .hero__media{border-radius:0}
[data-theme="carbon"] .site-footer--scoop{border-radius:0;margin-top:0;padding-top:72px}
/* carbon also squares off the small stuff */
[data-theme="carbon"] .media,
[data-theme="carbon"] .svc-figure,
[data-theme="carbon"] .gallery-grid button,
[data-theme="carbon"] .chips li,
[data-theme="carbon"] .strip__cap,
[data-theme="carbon"] .ba__tag{border-radius:0}
[data-theme="carbon"] .field input,
[data-theme="carbon"] .field textarea{border-radius:0}

/* sticky header: explicit per theme, no var indirection */
[data-theme="brand"]  .site-header.is-stuck{background-color:#5A6428}
[data-theme="carbon"] .site-header.is-stuck{background-color:#17190F}

/* =============================================================
   32. CONTRAST PASS
   --muted and --line were light-context only, so any secondary
   text landing on a dark band came out near-invisible. Flip them
   with context, the same way --accent already does.
   ============================================================= */
.band--dark, .site-footer, .subhero, .drawer, .strip-band, .hero{
  --muted:rgba(255,255,255,.76);
  --line:rgba(255,255,255,.22);
}

/* store cards live on a light band now — stop forcing white text */
.store-card p{color:var(--muted)}
.band--dark .store-card p{color:var(--muted)}

/* service numbers were --line (≈1.2:1) — invisible */
.svc-item__no{color:var(--muted);opacity:.7}
.svc-item.is-active .svc-item__no,
.svc-item:hover .svc-item__no{color:var(--accent);opacity:1}

/* review attribution + avatar */
.rev-card__who b{color:inherit}
.rev-card__who span span{color:var(--muted)}
.rev-avatar{background:var(--accent);color:var(--accent-ink)}

/* project card body copy sits on a dark band */
.proj-card p{color:var(--muted)}
/* avatar is a <span>, so it needs to outrank .rev-card__who span */
.rev-card__who .rev-avatar{background:var(--accent);color:var(--accent-ink);display:flex}

/* =============================================================
   33. THEME D — Carbon soft
   Carbon lime's palette with Brand olive's design treatment:
   pill buttons, weight-400 headings, and the big scoop curves.
   (Deliberately NOT listed in the squared/no-scoop rules above,
   so it inherits the curved defaults.)
   ============================================================= */
[data-theme="carbon-soft"]{
  --ink:#14150F;   --bg:#FFFFFF;
  --surface-dark:#17190F;  --surface-dark-2:#0D0E08;
  --muted:#6A6C60; --line:#E6E6E0;
  --accent-dark:#C2E807;   --accent-ink-dark:#14150F;
  --accent-light:#3E4A16;  --accent-ink-light:#ffffff;
  --btn-radius:999px;  --h-weight:400;  --scoop:1;
}
[data-theme="carbon-soft"] .site-header.is-stuck{background-color:#17190F}

/* =============================================================
   34. SCOOP OVERLAP FIX
   A scooped band pulls itself up over the previous one with an
   opaque background. If that pull exceeds the previous band's
   bottom padding it paints over real content. Compensate.
   ============================================================= */
:root{--r-footer-scoop:clamp(64px,11vw,150px)}
.site-footer--scoop{
  border-radius:0 var(--r-footer-scoop) 0 0;
  margin-top:calc(-1 * var(--r-footer-scoop));
  padding-top:calc(72px + var(--r-footer-scoop) * .55);
}
/* the band above the footer must own enough padding to be eaten */
#contact{padding-bottom:calc(var(--pad-band-lg) + var(--r-footer-scoop))}
.band--dark + .site-footer--scoop{margin-top:0;border-radius:0;padding-top:72px}

/* =============================================================
   35. Services explorer — header inside the left column so the
   image column runs the full height of the section instead of
   leaving dead space beside the heading.
   ============================================================= */
.svc-left{display:flex;flex-direction:column}
.svc-left .section-head{margin-bottom:2.2rem;max-width:100%}
.svc-stage{align-self:start}
@media(max-width:900px){
  .svc-left .section-head{margin-bottom:1.6rem}
}

/* =============================================================
   36. Footer — simple radius on BOTH top corners
   (replaces the large single-corner sweep)
   ============================================================= */
:root{--r-footer-scoop:clamp(28px,4vw,56px)}
.site-footer--scoop{
  border-radius:var(--r-footer-scoop) var(--r-footer-scoop) 0 0;
  margin-top:calc(-1 * var(--r-footer-scoop));
  padding-top:calc(72px + var(--r-footer-scoop));
}
/* the band above only needs to absorb the (now small) pull */
#contact{padding-bottom:calc(var(--pad-band-lg) + var(--r-footer-scoop))}
/* footer following a dark band: curve would be invisible, keep it flat */
.band--dark + .site-footer--scoop{margin-top:0;border-radius:0;padding-top:72px}

/* =============================================================
   37. LAYOUT B — two-line header with centred logo,
   plus a headline carousel over the hero video.
   Toggled from the demo bar via [data-layout].
   ============================================================= */
.hdr2{display:none}
[data-layout="centred"] .hdr2{
  display:block;position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background-color .3s var(--ease),box-shadow .3s;
}
[data-layout="centred"] .hero__tag{display:none}
[data-layout="centred"] .hero__cue{display:none}

/* header content runs near edge-to-edge (Laguna reference), wider
   than the site's normal 1200px content container */
.hdr2 .container{max-width:none;padding-inline:clamp(20px,4vw,56px)}

/* row 1 — utility */
.hdr2__util{border-bottom:1px solid rgba(255,255,255,.16)}
.hdr2__util-row{display:flex;align-items:center;justify-content:space-between;height:42px}
.hdr2__util-links{display:flex;gap:1.6rem}
.hdr2__util a,.hdr2__util-right a{
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72);transition:color .25s;
}
.hdr2__util a:hover{color:#fff}
.hdr2__util-right{display:flex;align-items:center;gap:1.4rem}

/* row 2 — main nav with centred logo (font-size matches lagunapools.com.au's 17px nav) */
.hdr2__main{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:78px;gap:2rem}
.hdr2__nav{display:flex;gap:0}
.hdr2__nav--r{justify-content:flex-end}
.hdr2__nav>a,.hdr2__nav>.hdr2__drop{
  font-size:1.0625rem;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.9);
  transition:color .25s,border-color .3s;padding:0 1.1rem;border-left:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;position:relative;
}
.hdr2__nav--l>:first-child,.hdr2__nav--r>:first-child{border-left:none;padding-left:0}
.hdr2__nav a:hover{color:var(--lime,#C2E807)}

/* ---- Services nav dropdown ---- */
.hdr2__drop>a{color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;display:inline-flex;align-items:center;gap:.4em}
.hdr2__drop-arrow{font-size:.62em;transition:transform .25s var(--ease)}
.hdr2__drop:hover .hdr2__drop-arrow,.hdr2__drop:focus-within .hdr2__drop-arrow{transform:rotate(180deg)}
.hdr2__drop-panel{
  position:absolute;top:100%;left:0;min-width:248px;padding:.5rem 0;margin-top:.9rem;
  background:#17190F;border:1px solid rgba(255,255,255,.14);border-radius:4px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s;
}
.hdr2__drop:hover .hdr2__drop-panel,.hdr2__drop:focus-within .hdr2__drop-panel{
  opacity:1;visibility:visible;transform:none;transition-delay:0s;
}
.hdr2__drop-panel a{
  display:flex;align-items:center;gap:.7rem;padding:.6rem 1.15rem;
  font-size:.86rem;letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.82);
  border-left:0;
}
.hdr2__drop-panel a i{width:1em;text-align:center;color:#C2E807;font-size:.82em}
.hdr2__drop-panel a+a{border-top:1px solid rgba(255,255,255,.1)}
.hdr2__drop-panel .hdr2__drop-all{color:#fff;font-weight:500}
.hdr2__nav a:focus-visible,.hdr2__drop-panel a:focus-visible{outline:2px solid #C2E807;outline-offset:-2px}
.hdr2__brand img{height:54px;width:auto;display:block;filter:grayscale(1);transition:filter .3s}
.pg-home .hdr2__brand img{height:62px;filter:none}
.hdr2__toggle{display:none}

/* stuck state */
[data-layout="centred"] .hdr2.is-stuck{background-color:var(--surface-dark);box-shadow:0 1px 0 rgba(0,0,0,.2)}
[data-layout="centred"] .hdr2.is-stuck .hdr2__main{height:62px}
[data-layout="centred"] .hdr2.is-stuck .hdr2__brand img{height:44px}
[data-layout="centred"] .pg-home .hdr2.is-stuck .hdr2__brand img{height:50px}
[data-layout="centred"] .hdr2.is-stuck .hdr2__nav>a,
[data-layout="centred"] .hdr2.is-stuck .hdr2__nav>.hdr2__drop{border-left-color:var(--line)}
[data-layout="centred"] .hdr2.is-stuck .hdr2__nav--l>:first-child,
[data-layout="centred"] .hdr2.is-stuck .hdr2__nav--r>:first-child{border-left:none}
[data-layout="centred"] .hdr2:not(.is-stuck) .hdr2__nav a,
[data-layout="centred"] .hdr2:not(.is-stuck) .hdr2__util a{text-shadow:0 1px 14px rgba(20,22,18,.6)}

/* ---- hero headline carousel ---- */
.hero-car{display:none}
[data-layout="centred"] .hero-car{
  display:flex;align-items:center;gap:1.5rem;
  position:relative;z-index:2;width:100%;
  max-width:var(--container);margin-inline:auto;
  padding:0 var(--gutter) 90px;
}
.hero-car__track{flex:1;position:relative;min-height:220px;display:flex;align-items:center;justify-content:center}
.hero-slide{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.8rem;text-align:center;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.hero-slide.is-on{opacity:1;transform:none;pointer-events:auto}
.hero-slide h1{
  color:#fff;font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.08;
  max-width:20ch;text-shadow:0 2px 26px rgba(20,22,18,.5);
}
.hero-car__nav{
  flex:none;width:46px;height:46px;border-radius:50%;
  background:none;border:1px solid rgba(255,255,255,.4);color:#fff;
  font-size:.9rem;cursor:pointer;transition:.25s;
}
.hero-car__nav:hover{background:rgba(255,255,255,.15);border-color:#fff}

/* vertical scroll-down cue */
.hero-scroll{display:none}
[data-layout="centred"] .hero-scroll{
  display:block;position:absolute;left:38px;bottom:120px;z-index:2;
  color:rgba(255,255,255,.8);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
}
[data-layout="centred"] .hero-scroll span{writing-mode:vertical-rl}
[data-layout="centred"] .hero-scroll::after{
  content:"";display:block;width:1px;height:52px;margin:12px auto 0;
  background:rgba(255,255,255,.55);animation:cue 1.8s var(--ease) infinite;
}
[data-layout="centred"] .hero-scroll__arrow{
  display:block;text-align:center;margin-top:8px;font-size:.62rem;
  color:rgba(255,255,255,.8);animation:cue-arrow 1.8s var(--ease) infinite;
}
@keyframes cue-arrow{0%,100%{opacity:.3;transform:translateY(-2px)}50%{opacity:1;transform:translateY(2px)}}
[data-layout="centred"] .hero{align-items:flex-end}

@media(max-width:992px){
  .hdr2__nav,.hdr2__util-links{display:none}
  .hdr2__main{grid-template-columns:auto 1fr}
  .hdr2__util-row{justify-content:flex-end}
  .hdr2__toggle{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.5);
    background:rgba(20,22,18,.25);color:#fff;cursor:pointer;justify-self:end}
  .hdr2__brand img{height:44px}
  .pg-home .hdr2__brand img{height:48px}
  [data-layout="centred"] .hero-scroll{display:none}
  [data-layout="centred"] .hero-car{padding-bottom:64px;gap:.6rem}
  .hero-car__nav{width:38px;height:38px}
}
/* =============================================================
   38. STICKY HERO — opt-in design (data-hero="sticky").
   The section after the hero scrolls up and covers it.
   The hero pins at top:0; every .band is position:relative so
   later sections paint over it in DOM order.
   ============================================================= */
:root{--r-cover:clamp(28px,4vw,64px)}

[data-hero="sticky"] .hero{position:sticky;top:0;z-index:0}
[data-hero="sticky"] .hero + .band{
  position:relative;z-index:1;
  border-radius:var(--r-cover) var(--r-cover) 0 0;
  background-color:var(--surface-dark);
}
[data-hero="sticky"] main > .band{position:relative;z-index:1}
/* square themes keep the cover, lose the radius */
[data-hero="sticky"][data-theme="carbon"] .hero + .band{border-radius:0}
/* the hero's own bottom sweep is pointless once it gets covered */
[data-hero="sticky"] .hero__media{border-radius:0}

@media(prefers-reduced-motion:reduce){
  [data-hero="sticky"] .hero{position:relative}
}

/* --- sticky hero: every band must be opaque, or the pinned
   video shows through the transparent light sections -------- */
[data-hero="sticky"] main > .band{background-color:var(--bg)}
[data-hero="sticky"] main > .band--dark{background-color:var(--surface-dark)}
[data-hero="sticky"] main > .strip-band{background-color:var(--surface-dark)}

/* =============================================================
   39. WCAG 2.2 fixes
   2.4.1 Bypass Blocks + 2.2.2 Pause, Stop, Hide
   ============================================================= */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:300;
  padding:12px 20px;border-radius:4px;
  background:var(--accent,#1C2412);color:var(--accent-ink,#fff);
  font:500 .82rem/1 var(--f);letter-spacing:.06em;text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:12px;outline:2px solid #fff;outline-offset:2px}

/* NOTE: the .hero-pause control was removed at the client's request
   (2026-09-23). That was our WCAG 2.2.2 (Level A) mechanism for the
   looping hero video — logged as an accepted risk in the vault,
   revisit before launch. prefers-reduced-motion is still honoured
   in main.js. Styles deleted with the markup. */
/* line-based themes square off the skip link too */
[data-theme="nocturne"] .skip-link,[data-theme="blueprint"] .skip-link{border-radius:0}

/* =============================================================
   40. Intro band — stats + credentials merged into the dark
   headline section, so they need light-context colours here.
   ============================================================= */
#intro .statline{margin-top:3.5rem}
#intro .stat-n::before,
#intro .credline{border-color:var(--line-dark)}
#intro .stat-n b{color:#fff}
#intro .stat-n > span,
#intro .credline span{color:var(--muted-dark)}
#intro .credline b{color:#fff}

/* =============================================================
   41. Intro layout — two switchable versions via [data-intro]
   split (default): copy left, stats 2x2 right, creds strip below
   stacked        : copy full-width, stats 1x4 row, creds strip
   ============================================================= */
#intro .intro-copy .measure{max-width:44ch}
#intro .credline{
  margin-top:2.8rem;max-width:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem 2.5rem;align-items:center;
}
#intro .credline span{font-size:.8rem}

/* --- SPLIT (default) --- */
:root{--intro:split}
[data-intro="split"] #intro .intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,6vw,5.5rem);
  align-items:center;
}
[data-intro="split"] #intro .statline{
  grid-template-columns:repeat(2,1fr);
  gap:2.4rem 2.6rem;
}
[data-intro="split"] #intro .stat-n b{font-size:clamp(2.2rem,3.6vw,3rem)}

/* --- STACKED --- */
[data-intro="stacked"] #intro .intro-grid{display:block}
[data-intro="stacked"] #intro .intro-figures{margin-top:3.2rem}
[data-intro="stacked"] #intro .statline{grid-template-columns:repeat(4,1fr);gap:2.5rem}

/* --- shared responsive --- */
@media(max-width:900px){
  [data-intro="split"] #intro .intro-grid{grid-template-columns:1fr;gap:2.8rem}
  [data-intro="split"] #intro .statline{grid-template-columns:1fr 1fr}
  [data-intro="stacked"] #intro .statline{grid-template-columns:1fr 1fr}
}
@media(max-width:340px){
  #intro .statline{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  #intro .credline{grid-template-columns:1fr;gap:.9rem}
}

/* =============================================================
   42. Carbon soft — rounded top on the "Our Work" band
   The dark projects band curves up out of the light section
   above it. One corner — top-left sweep; carbon-soft only.
   ============================================================= */
[data-theme="carbon-soft"]{--r-ow:clamp(56px,11vw,150px)}
[data-theme="carbon-soft"] #projects{
  position:relative;
  z-index:1;
  border-radius:var(--r-ow) 0 0 0;   /* one side — top-left sweep only */
  margin-top:calc(-1 * var(--r-ow));
  padding-top:calc(var(--pad-band) + var(--r-ow) * .4);
}
[data-theme="carbon-soft"] #projects.contour::before{border-radius:inherit}
/* the light band above needs room to be pulled into */
[data-theme="carbon-soft"] #services{padding-bottom:calc(var(--pad-band) + var(--r-ow))}
@media(max-width:640px){
  [data-theme="carbon-soft"]{--r-ow:44px}
}

/* =============================================================
   40. Tap targets — WCAG 2.2 AA (2.5.8 Target Size Minimum, 24px)
   Applies at ALL widths (was ≤768px only — footer links were still 20px
   on tablet-landscape/desktop, audited 2026-09-24).
   Audited 2026-09-23 at 375px: footer links were 20px tall,
   breadcrumbs 16px, and the header Instagram icon 23x12.
   padding-block on an inline link grows the hit area WITHOUT
   changing the line box, so none of this shifts layout.
   ============================================================= */
.site-footer ul a,
.contact-info dd a,
.crumb a,
.footer-bar a,
.drawer__foot a,
.form-note a,
.hdr2__util-links a,
.hdr2__util-right a{
  display:inline-block;
  min-height:24px;
  padding-block:3px;
}
/* icon-only links need width as well as height */
.hdr2__util-right a[aria-label]{
  min-width:24px;
  text-align:center;
}
/* footer lists: keep the visual rhythm now the links are taller */
.site-footer ul{gap:.35rem}

/* =============================================================
   Header logo — larger, centred, overlapping both header rows
   (client Stage 02 V2, item 5). B&W treatment unchanged
   (grayscale on sub-pages, colour on the homepage).
   ============================================================= */
@media(min-width:993px){
  [data-layout="centred"] .hdr2__brand{
    position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:3;
  }
  /* brand is out of the grid flow, so pin the nav groups to their columns */
  [data-layout="centred"] .hdr2__nav--l{grid-column:1}
  [data-layout="centred"] .hdr2__nav--r{grid-column:3}
  [data-layout="centred"] .hdr2__brand img,
  [data-layout="centred"] .pg-home .hdr2__brand img{height:92px}
  [data-layout="centred"] .hdr2.is-stuck .hdr2__brand{top:8px}
  [data-layout="centred"] .hdr2.is-stuck .hdr2__brand img,
  [data-layout="centred"] .pg-home .hdr2.is-stuck .hdr2__brand img{height:72px}
  /* utility rule stops short of the logo instead of running behind it */
  [data-layout="centred"] .hdr2__util{border-bottom:0;position:relative}
  [data-layout="centred"] .hdr2__util::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:linear-gradient(to right,
      rgba(242,242,236,.16) calc(50% - 120px),transparent calc(50% - 120px),
      transparent calc(50% + 120px),rgba(242,242,236,.16) calc(50% + 120px));
  }
}
@media(max-width:992px){
  .hdr2__brand img{height:48px}
  .pg-home .hdr2__brand img{height:52px}
}

/* =============================================================
   Header type sizes (client Stage 02 V2, item 3).
   Main nav ("area 1") 17px -> 18px; top utility row ("area 2")
   12.8px -> 14.5px. The utility row stays clearly below the nav
   so the two rows keep their hierarchy. One step smaller between
   993-1200px so nothing gets near the centred logo.
   ============================================================= */
@media(min-width:993px){
  .hdr2__nav>a,.hdr2__nav>.hdr2__drop{font-size:1.0625rem}
  .hdr2__util a,.hdr2__util-right a{font-size:.875rem}
}
@media(min-width:1201px){
  .hdr2__nav>a,.hdr2__nav>.hdr2__drop{font-size:1.125rem}
  .hdr2__util a,.hdr2__util-right a{font-size:.90625rem}
}

/* =============================================================
   Header social icons — matching bordered circles (Instagram +
   Facebook read as one pair), slightly larger, closer together.
   Icon size is set on the <i> so it doesn't follow the utility
   row's text size.
   ============================================================= */
.hdr2__socials{display:inline-flex;align-items:center;gap:.5rem}
.hdr2__util-right a.hdr2__social{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;min-width:30px;min-height:30px;padding:0;
  border:1px solid rgba(242,242,236,.45);border-radius:50%;
  transition:color .25s,border-color .25s,background-color .25s;
}
.hdr2__util-right a.hdr2__social i{font-size:.9rem;line-height:1}
.hdr2__util-right a.hdr2__social:hover{color:#C2E807;border-color:#C2E807}

/* =============================================================
   Service tags as plain text separated by pipes — no pill border
   (client Stage 02 V2, item 8: "these look like buttons").
   ============================================================= */
.chips{gap:.35rem 0}
.chips li{border:0;border-radius:0;padding:0;font-size:.8rem;letter-spacing:.06em}
/* trailing (not leading) pipe, so a wrapped line never starts with one */
.chips li:not(:last-child)::after{content:"|";margin:0 .75em;opacity:.5}

/* Homepage services image — the site's single oversized curved
   corner, top-right (client Stage 02 V2, item 9). */
html[data-theme="carbon-soft-v2"] #services .svc-figure{border-radius:0 clamp(72px,12vw,170px) 0 0}

/* Service page actions — quote button + guide download (item 10) */
.svc-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.svc-download{display:inline-flex;align-items:center;gap:.6em}
.svc-download[hidden]{display:none}

/* Service photos on the Services page and each single service page
   carry the same single oversized curved corner as the homepage
   services image — always the photo's OUTER top corner: top-left
   when the photo sits on the left, top-right when it sits on the
   right (even rows of the Services list). */
html[data-theme="carbon-soft-v2"] .svc .svc__media .media{
  border-radius:clamp(64px,10vw,150px) 0 0 0;overflow:hidden;
}
html[data-theme="carbon-soft-v2"] .svc:nth-child(even) .svc__media .media{
  border-radius:0 clamp(64px,10vw,150px) 0 0;
}

/* =============================================================
   Stage 02 V2 — items 13, 14, 15 + service credential line
   ============================================================= */

/* 13. One arrowhead everywhere: carousel + photo-strip controls
   use the same bare thin chevron as the hero arrows (no circle). */
html[data-theme="carbon-soft-v2"] .swiper-controls{gap:.5rem;margin-left:-.6rem}
html[data-theme="carbon-soft-v2"] .swiper-controls button{
  width:46px;height:46px;padding:0;
  border:0;border-radius:0;background:none;font-size:1.15rem;
  transition:background-color .25s,color .25s;
}
/* hover only: a full SQUARE light box behind a dark chevron (dark
   box / light chevron on light bands). Nothing shows at rest. */
html[data-theme="carbon-soft-v2"] .swiper-controls button:hover{background:#F2F2EC;color:#17190F}
html[data-theme="carbon-soft-v2"] .band:not(.band--dark) .swiper-controls button:hover{background:var(--v2-ink);color:#F2F2EC}
html[data-theme="carbon-soft-v2"] .swiper-controls button:focus-visible,
html[data-theme="carbon-soft-v2"] .strip__nav:focus-visible{outline:2px solid #C2E807;outline-offset:2px}
/* over photos: bare white chevron at rest (shadow keeps it readable on
   any image); square light box on hover. `body` lifts these above the
   theme file's own .strip__nav rules, which load later and were leaving
   the button filled at rest. */
html[data-theme="carbon-soft-v2"] body .strip__nav{
  width:56px;height:56px;border:0;border-radius:0;background:none;box-shadow:none;
  color:#fff;font-size:1.7rem;filter:drop-shadow(0 2px 10px rgba(0,0,0,.65));
  transition:background-color .25s,color .25s,filter .25s;
}
html[data-theme="carbon-soft-v2"] body .strip__nav:hover{background:#F2F2EC;color:#17190F;border-color:transparent;filter:none;transform:translateY(-50%)}
@media(max-width:640px){
  html[data-theme="carbon-soft-v2"] body .strip__nav{width:44px;height:44px;font-size:1.35rem}
}

/* 15. "What we do": the big heading is gone (kept for screen
   readers); the label carries the section, larger and in ink. */
html[data-theme="carbon-soft-v2"] #services .section-head .eyebrow{
  font-size:1.05rem;letter-spacing:.2em;font-weight:600;color:var(--v2-ink);margin-bottom:1.3rem;
}

/* 14. Process steps: no number badge on the photo. Each step now
   carries a large outlined numeral, and a hairline runs from one
   numeral to the next so the four steps read as one timeline. */
.proc-grid:has(.proc--photo){counter-reset:proc-step}
.proc--photo{counter-increment:proc-step}
.proc--photo h3{position:relative;padding-top:3.1rem;margin-top:.2rem}
.proc--photo h3::before{
  content:"0" counter(proc-step);
  position:absolute;left:0;top:0;
  font-size:2.3rem;font-weight:500;line-height:1;letter-spacing:.02em;
  color:var(--muted);
}
@supports (-webkit-text-stroke:1px #000){
  .proc--photo h3::before{color:transparent;-webkit-text-stroke:1.2px currentColor;-webkit-text-stroke-color:var(--ink)}
  html[data-theme="carbon-soft-v2"] .band--dark .proc--photo h3::before{-webkit-text-stroke-color:var(--v2-on-night)}
}
.proc--photo h3::after{
  content:"";position:absolute;top:1.15rem;left:3.6rem;right:-1.6rem;height:1px;
  background:var(--line);
}
.band--dark .proc--photo h3::after{background:var(--line-dark)}
.proc--photo:last-child h3::after{right:0}
@media(max-width:992px){
  /* grid wraps here, so each rail stops at its own card */
  .proc--photo h3::after{right:0}
}

/* Service page credential line — plain small text, not the dashed
   "draft note" box it used to borrow. */
.svc-cred{display:flex;align-items:baseline;gap:.65em;margin-top:1.5rem;font-size:.82rem;line-height:1.6;color:var(--muted)}
.svc-cred i{color:var(--accent);font-size:.95em}

/* 12. Contour lines (client Stage 02 V2): re-oriented artwork
   (ridge runs bottom-left to top-right), a little stronger, and
   pinned to the viewport so the lines run on unbroken from one
   dark band into the next instead of restarting at every section.
   (Browsers without fixed backgrounds fall back to a per-band
   cover image.) Dark bands only, as before. */
.contour::before{
  background:url("../img/contour-lines.svg?v=2") center/cover no-repeat fixed;
  opacity:.05; /* .2 -> .1 -> .05 on review — the thicker lines read too strong */
}

/* 16. Contact form — Services multi-select (checkbox dropdown).
   Matches the other fields: same label, box, radius and caret. */
.field--multi{position:relative}
.field .field__label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.5rem}
.msel__btn{
  display:block;width:100%;padding:14px 38px 14px 16px;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:4px;background-color:#fff;
  font:400 .95rem/1.5 var(--f);color:var(--muted);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27><path fill=%27%236E7358%27 d=%27M5 7l5 5 5-5z%27/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:14px;
}
html[data-theme="carbon-soft-v2"] .msel__btn{border-color:var(--v2-line-ui)}
html[data-theme="carbon-soft-v2"] .msel__btn:hover{border-color:var(--v2-ink)}
.field--multi.has-value .msel__btn{color:var(--ink)}
.msel__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.msel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msel__panel{
  position:absolute;left:0;right:0;top:100%;z-index:20;margin-top:6px;padding:.4rem 0;
  background:#fff;border:1px solid var(--line);border-radius:4px;
  box-shadow:0 14px 34px rgba(23,25,15,.16);max-height:24rem;overflow:auto;
}
.msel__panel[hidden]{display:none}
.field .msel__opt{
  display:flex;align-items:center;gap:.75rem;margin:0;padding:.6rem 1rem;min-height:44px;cursor:pointer;
  font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--ink);
}
.field .msel__opt:hover{background:rgba(23,25,15,.05)}
.field .msel__opt input{
  width:18px;height:18px;flex:none;margin:0;padding:0;border-radius:3px;accent-color:#3E4A16;cursor:pointer;
}
.field .msel__opt:focus-within{outline:2px solid var(--accent);outline-offset:-2px}

/* =============================================================
   Footer — option E5 "Contour footer" (client pick, 2026-10-13).
   Larger brand logo, contour lines behind the content, and a
   credentials row (company / ABN · licence / MLSA) between the
   link columns and the bottom bar.
   ============================================================= */
.site-footer .brand.ftr5__logo img{height:108px}
.site-footer.is-e5{position:relative;overflow:hidden}
.site-footer.is-e5 > .container{position:relative;z-index:1}
.site-footer.is-e5 .footer-bar{margin-top:24px}
.ftr5,.ftr5__split{overflow-wrap:anywhere}
.ftr5__split{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.6rem 1.4rem;
  margin-top:32px;padding:20px 0 0;
  font-size:.78rem;letter-spacing:.04em;color:var(--muted-dark);
}
@media(max-width:640px){
  .ftr5__logo{margin-bottom:4px}
  .site-footer .brand.ftr5__logo img{height:72px}
  .ftr5__split{flex-direction:column;align-items:flex-start;margin-top:20px;padding:14px 0 0;gap:1rem}
}