@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/images/fonts/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/images/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ============ TOKENS ============ */
:root{
  --cream:#f7fcf8;
  --cream-2:#ebf9ee;
  --paper:#FFFFFF;
  --ink:#2C2A3E;
  --ink-soft:#5A576E;
  --line:#caefd1;

  --coral:#35b24d;
  --coral-d:#2d9942;
  --sun:#6ed481;
  --sky:#34b04c;
  --sage:#40c65a;
  --lilac:#39c153;

  --shadow:0 24px 60px -28px rgba(44,42,62,.35);
  --shadow-sm:0 12px 30px -18px rgba(44,42,62,.3);
  --r:20px;
  --r-lg:28px;
  --head-h:88px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--head-h)}
body{
  font-family:'Outfit',ui-rounded,'Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:clip;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,64px)}

/* ============ BRAND ============ */
.brand{display:inline-flex;align-items:center;line-height:0}
.brand-logo{height:64px;width:auto;display:block}
.foot-brand{line-height:0}
.foot-logo{width:172px;height:auto;display:block;background:#fff;border-radius:20px;padding:16px;box-shadow:0 14px 34px -18px rgba(0,0,0,.5)}

/* ============ HEADER ============ */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(247, 252, 248, 0.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.site-head.scrolled{border-color:var(--line);box-shadow:0 6px 24px -18px rgba(44,42,62,.4);background:rgba(247, 252, 248, 0.94)}
.head-in{height:var(--head-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.head-nav{display:flex;align-items:center;gap:30px}
.head-nav>a{font-size:1.06rem;font-weight:500;color:var(--ink-soft);transition:color .2s}
.head-nav>a:hover{color:var(--coral)}
.head-nav .nav-cta{color:#fff}

/* ---- NAV DROPDOWN (Our Playsets → categories) ---- */
.nav-item{position:relative;display:flex;align-items:center}
.nav-drop-toggle{display:inline-flex;align-items:center;gap:6px;font-size:1.06rem;font-weight:500;
  color:var(--ink-soft);transition:color .2s;cursor:pointer}
.nav-drop-toggle:hover{color:var(--coral)}
.nav-caret{width:15px;height:15px;flex:none;transition:transform .25s ease}
.nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(180deg)}
.nav-drop{
  position:absolute;top:100%;left:0;min-width:260px;margin-top:6px;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column;gap:2px;z-index:70;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.nav-drop::before{content:"";position:absolute;top:-10px;left:0;right:0;height:12px}
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop a{display:block;padding:11px 16px;border-radius:10px;font-size:.98rem;font-weight:500;
  color:var(--ink);white-space:nowrap;transition:background .18s,color .18s;border-bottom:0!important}
.nav-drop a:hover{background:var(--cream-2);color:var(--coral-d)}

.nav-toggle{
  display:none;flex-direction:column;gap:5px;justify-content:center;
  width:44px;height:44px;background:none;border:0;cursor:pointer;padding:9px;
}
.nav-toggle span{height:2.4px;border-radius:2px;background:var(--ink);transition:transform .3s, opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-weight:600;font-size:.98rem;cursor:pointer;
  padding:14px 28px;border-radius:100px;border:1.6px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-sm{padding:10px 20px;font-size:.92rem}
.btn-solid{background:var(--coral);color:#fff;box-shadow:0 12px 26px -12px rgba(53, 178, 77, 0.7)}
.btn-solid:hover{background:var(--coral-d);transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(53, 178, 77, 0.85)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.6);backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}
.btn-on-band{background:#fff;color:var(--coral-d);box-shadow:0 14px 30px -14px rgba(0,0,0,.35)}
.btn-on-band:hover{background:var(--cream);color:var(--coral-d)}
.btn-full{width:100%}

/* ============ HERO ============ */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(560px,82vh,780px);display:flex;align-items:center;background-color:var(--ink)}
.hero-bg{
  position:absolute;inset:0;z-index:-2;
  background-color:var(--cream-2);background-position:center 32%;background-size:cover;background-repeat:no-repeat;
}
.hero-scrim{position:absolute;inset:0;z-index:-1;
  /* brighter image: darker only on the left behind the copy, clear on the right */
  background:linear-gradient(95deg, rgba(18,18,28,.74) 0%, rgba(26,24,38,.5) 32%, rgba(40,40,55,.16) 58%, rgba(40,40,55,0) 82%);
}
.hero-in{padding-top:clamp(48px,6vh,80px);padding-bottom:clamp(48px,6vh,80px)}
.hero-copy{max-width:640px;color:#fff}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(255,255,255,.16);backdrop-filter:blur(4px);
  padding:8px 15px;border-radius:100px;margin-bottom:22px;
  border:1px solid rgba(255,255,255,.24);
}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px rgba(110, 212, 129, 0.3)}
.hero-copy h1{
  color:#fff;font-weight:700;font-size:clamp(2.4rem,5.4vw,4rem);
  line-height:1.03;letter-spacing:-.03em;max-width:16ch;
  text-shadow:0 2px 10px rgba(0,0,0,.55), 0 1px 30px rgba(0,0,0,.4);
}
.squiggle{position:relative;white-space:nowrap;color:var(--sun)}
.squiggle::after{
  content:"";position:absolute;left:0;right:0;bottom:-.1em;height:.4em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c12-9 22 6 33-1s21 8 32 1 21 5 31-2' fill='none' stroke='%23F5B93C' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.hero-copy .lede{
  font-size:clamp(1.05rem,1.5vw,1.24rem);font-weight:400;
  max-width:46ch;margin-top:20px;opacity:1;
  text-shadow:0 1px 6px rgba(0,0,0,.6), 0 1px 20px rgba(0,0,0,.4);
}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.hero-chips li{
  font-size:.82rem;font-weight:500;padding:7px 15px;border-radius:100px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);color:#fff;
}

/* ============ SECTIONS ============ */
.sec{padding:clamp(60px,8vw,120px) 0}
.sec-mission{padding-top:clamp(20px,3vw,40px)}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.78rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:16px;
}
.kicker.light{color:rgba(255,255,255,.85)}
.crayon{width:22px;height:6px;border-radius:100px;display:inline-block}
.c-coral{background:var(--coral)} .c-sun{background:var(--sun)}
.c-sky{background:var(--sky)} .c-sage{background:var(--sage)} .c-lilac{background:var(--lilac)}

h2{font-weight:700;font-size:clamp(1.9rem,3.4vw,2.85rem);line-height:1.08;letter-spacing:-.025em;color:var(--ink)}
.sec-head{max-width:640px;margin-bottom:8px}
.sec-sub{font-size:1.1rem;font-weight:300;color:var(--ink-soft);max-width:52ch;margin-top:16px}

/* ---- ABOUT ---- */
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,72px);align-items:center}
.prose{margin-top:22px;max-width:54ch}
.prose p{color:var(--ink-soft);font-size:1.07rem;margin-top:14px}
.prose p:first-child{margin-top:0}
.prose strong{color:var(--ink);font-weight:600}
.fact-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.fact{flex:1;min-width:130px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow-sm)}
.fact b{display:block;font-size:1.9rem;font-weight:700;letter-spacing:-.02em;color:var(--coral)}
.fact:nth-child(2) b{color:var(--sky)}
.fact:nth-child(3) b{color:var(--sage)}
.fact span{font-size:.82rem;color:var(--ink-soft);font-weight:500}
.about-media{
  min-height:460px;border-radius:var(--r-lg);box-shadow:var(--shadow);border:8px solid #fff;
  background-color:var(--cream-2);background-position:center;background-size:cover;background-repeat:no-repeat;
}

/* ---- MISSION ---- */
.mission-card{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,#33314a,#2C2A3E);
  color:#fff;border-radius:var(--r-lg);
  padding:clamp(38px,5vw,72px);box-shadow:var(--shadow);
}
.mission-card::before{content:"";position:absolute;right:-40px;top:-40px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(110, 212, 129, 0.5),transparent 70%)}
.mission-card::after{content:"";position:absolute;left:-30px;bottom:-50px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(52, 176, 76, 0.4),transparent 70%)}
.mission-lead{font-size:clamp(1.4rem,2.6vw,2.1rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:8px 0 18px;position:relative;max-width:24ch}
.mission-card>p:last-child{color:rgba(255,255,255,.82);font-weight:300;max-width:62ch;position:relative;font-size:1.08rem}

/* ---- APPROACH ---- */
.approach-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,4vw,56px);align-items:center;margin-top:44px}
.approach-photo{min-height:420px;border-radius:var(--r-lg);box-shadow:var(--shadow);border:8px solid #fff;
  background-color:var(--cream-2);background-position:center;background-size:cover;background-repeat:no-repeat}
.pillars{list-style:none;display:flex;flex-direction:column;gap:16px}
.pillars li{display:flex;gap:16px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow-sm)}
.pill-ico{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;color:#fff}
.pill-ico.c-coral{background:var(--coral)} .pill-ico.c-sun{background:var(--sun)}
.pill-ico.c-sky{background:var(--sky)} .pill-ico.c-sage{background:var(--sage)}
.pillars b{display:block;font-size:1.1rem;font-weight:600;letter-spacing:-.01em}
.pillars p{color:var(--ink-soft);font-size:.97rem;margin-top:3px}

/* ---- FEATURE ROWS ---- */
.sec-features{background:var(--cream-2)}
.feature-rows{display:flex;flex-direction:column;gap:clamp(44px,6vw,88px);margin-top:clamp(40px,5vw,64px)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,68px);align-items:center}
.frow:nth-child(even) .frow-media{order:2}
.frow-media{
  min-height:380px;border-radius:var(--r-lg);box-shadow:var(--shadow);border:8px solid #fff;
  background-size:cover;background-position:center;
}
.frow-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;color:#fff;margin-bottom:18px}
.frow-ico.c-coral{background:var(--coral)} .frow-ico.c-sky{background:var(--sky)}
.frow-ico.c-sun{background:var(--sun)} .frow-ico.c-sage{background:var(--sage)}
.frow h3{font-size:clamp(1.5rem,2.5vw,2.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.frow p{color:var(--ink-soft);font-size:1.08rem;margin-top:14px;max-width:52ch}
.frow-sub{font-weight:600;color:var(--ink)!important;margin-top:20px!important}
.frow-list{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:11px}
.frow-list li{display:flex;gap:13px;align-items:center;font-weight:500;font-size:1.05rem;color:var(--ink)}
.frow-list li::before{
  content:"✓";flex:none;width:26px;height:26px;border-radius:8px;
  background:var(--sun);color:#fff;font-size:.9rem;font-weight:700;
  display:grid;place-items:center;
}

/* ---- BAND ---- */
.band{position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(140deg,var(--coral),#43c75c 65%,var(--sun));
  color:#fff;border-radius:var(--r-lg);
  padding:clamp(48px,6vw,84px) clamp(28px,5vw,64px);box-shadow:var(--shadow)}
.band-doodle{display:inline-block;margin-bottom:14px;line-height:0}
.band h2{color:#fff;font-size:clamp(2rem,3.6vw,3rem)}
.band p{max-width:56ch;margin:18px auto 30px;font-weight:300;font-size:1.12rem;color:rgba(255,255,255,.95)}

/* ---- CONTACT ---- */
.contact-wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(34px,5vw,64px);margin-top:44px;align-items:start}
.contact-lead{color:var(--ink-soft);font-size:1.1rem;font-weight:300;max-width:40ch}
.contact-list{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:18px}
.contact-list li{display:flex;gap:16px;align-items:center}
.ci-ico{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:1.25rem}
.ci-ico.c-sky{background:var(--sky)} .ci-ico.c-coral{background:var(--coral)} .ci-ico.c-sage{background:var(--sage)}
.ci-lab{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.contact-list a,.contact-list div>span:last-child{font-weight:500;font-size:1.05rem;color:var(--ink);word-break:break-word}
.contact-list a:hover{color:var(--coral)}
.enquiry{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3vw,38px);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:15px}
.enquiry label{display:flex;flex-direction:column;gap:6px;font-size:.84rem;font-weight:600;color:var(--ink)}
.enquiry input,.enquiry select,.enquiry textarea{font-family:inherit;font-size:1rem;font-weight:400;color:var(--ink);background:var(--cream);border:1.5px solid var(--line);border-radius:14px;padding:13px 16px;transition:border-color .2s, box-shadow .2s}
.enquiry textarea{resize:vertical}
.enquiry input:focus,.enquiry select:focus,.enquiry textarea:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 4px rgba(53, 178, 77, 0.14)}
.form-note{font-size:.8rem;color:var(--ink-soft);text-align:center}
.enquiry.done{align-items:center;justify-content:center;text-align:center;min-height:300px}
.enquiry .done-msg{font-size:1.2rem;font-weight:600;color:var(--sage);max-width:26ch}

/* Honeypot — never shown to a human, never announced to a screen reader.
   Bots fill it in, submit.php silently drops those. Must NOT use
   display:none, which some bots detect and skip. */
.hp-field{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important}

/* AJAX error message under a form */
.form-error{
  margin-top:12px;padding:11px 15px;border-radius:12px;
  background:rgba(53, 178, 77, 0.1);border:1px solid rgba(53, 178, 77, 0.4);
  color:var(--coral-d);font-size:.9rem;font-weight:500;text-align:center;
}
.enquiry button[type="submit"]:disabled{opacity:.65;cursor:progress}

/* ---- FOOTER ---- */
.foot{background:#2C2A3E;color:#fff;padding:clamp(44px,5vw,64px) 0 32px}
.foot .brand-word{color:#fff}
.foot-top{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.13)}
.foot-nav{display:flex;flex-wrap:wrap;gap:26px}
.foot-nav a{font-size:.95rem;color:rgba(255,255,255,.8);font-weight:500}
.foot-nav a:hover{color:var(--sun)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;padding-top:24px}
.foot-bottom p{font-size:.86rem;color:rgba(255,255,255,.62)}
.powered a{color:var(--sun);font-weight:600}
.powered a:hover{text-decoration:underline}

/* ============ REVEAL ============ */
html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}
html.js .reveal.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:940px){
  .about-grid{grid-template-columns:1fr;gap:34px}
  .about-media{order:-1;min-height:300px}
  .approach-grid{grid-template-columns:1fr}
  .approach-photo{min-height:280px;order:-1}
  .frow{grid-template-columns:1fr;gap:26px}
  .frow-media{min-height:260px;order:-1!important}
  .frow-body{order:0}
  .contact-wrap{grid-template-columns:1fr}

  .nav-toggle{display:flex}
  .head-nav{
    position:absolute;top:var(--head-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--cream);border-bottom:1px solid var(--line);
    padding:14px clamp(20px,4vw,64px) 22px;
    box-shadow:0 20px 40px -24px rgba(44,42,62,.5);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .head-nav.open{transform:none;opacity:1;pointer-events:auto}
  .head-nav>a{padding:12px 4px;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .head-nav>a:last-child{border-bottom:0}
  .head-nav .nav-cta{margin-top:10px;border-bottom:0;justify-content:center}

  /* dropdown flattens into an indented, always-open sub-list on mobile */
  .nav-item{display:block}
  .nav-drop-toggle{width:100%;justify-content:space-between;padding:12px 4px;font-size:1.05rem;
    border-bottom:1px solid var(--line)}
  .nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:none}
  .nav-drop{position:static;opacity:1;visibility:visible;transform:none;margin:0 0 4px;
    padding:2px 0 6px 14px;min-width:0;background:transparent;border:0;box-shadow:none}
  .nav-drop::before{display:none}
  .nav-drop a{padding:11px 6px;color:var(--ink-soft);border-bottom:1px solid var(--line)!important}
  .nav-drop a:last-child{border-bottom:0!important}
}
@media (max-width:560px){
  .brand-logo{height:50px}
  .hero-copy h1{font-size:2.35rem}
  .cta-row{flex-direction:column}
  .cta-row .btn{width:100%}
  .fact{min-width:100%}
  .foot-top,.foot-bottom{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
}

/* ==================================================================
   COMING SOON PAGE
   ================================================================== */
.cs-page{min-height:100vh;display:flex;flex-direction:column}

/* ---- HERO ---- */
.cs-hero{
  position:relative;isolation:isolate;overflow:hidden;flex:1;
  display:flex;align-items:center;
  padding:clamp(40px,7vh,90px) 0;
}
.cs-hero-bg{
  position:absolute;inset:0;z-index:-2;
  background-color:var(--cream-2);background-position:center 32%;background-size:cover;background-repeat:no-repeat;
}
.cs-hero-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg, rgba(44,42,62,.9) 0%, rgba(44,42,62,.66) 46%, rgba(53, 178, 77, 0.4) 82%, rgba(110, 212, 129, 0.32) 100%);
}
.cs-hero-in{width:100%;color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center}
.cs-logo{height:120px;width:auto;max-width:88vw;object-fit:contain;margin:0 auto 12px;filter:drop-shadow(0 8px 26px rgba(0,0,0,.35))}
.cs-tag{
  margin:0 auto 24px;font-size:.82rem;font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.35);
}
.cs-badge{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  background:rgba(255,255,255,.16);backdrop-filter:blur(4px);
  padding:10px 20px;border-radius:100px;margin-bottom:26px;
  border:1px solid rgba(255,255,255,.28);
}
.cs-badge .dot{width:9px;height:9px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 5px rgba(110, 212, 129, 0.3);animation:csPulse 2.4s ease-in-out infinite}
@keyframes csPulse{0%,100%{box-shadow:0 0 0 3px rgba(110, 212, 129, 0.35)}50%{box-shadow:0 0 0 9px rgba(110, 212, 129, 0)}}
.cs-hero h1{
  font-weight:700;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;
  letter-spacing:-.03em;max-width:16ch;text-shadow:0 2px 28px rgba(0,0,0,.3);
}
.cs-hero h1 .squiggle{color:var(--sun)}
.cs-open{
  margin-top:30px;display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(6px);border-radius:var(--r-lg);padding:22px 40px;
}
.cs-open .cs-open-lab{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.cs-open .cs-open-date{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:700;letter-spacing:-.02em;color:var(--sun)}
.cs-lede{
  font-size:clamp(1.05rem,1.6vw,1.28rem);font-weight:300;max-width:52ch;
  margin:28px auto 0;opacity:.96;text-shadow:0 1px 14px rgba(0,0,0,.3);
}
.cs-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}

/* ---- OUR APPROACH ---- */
.cs-approach{background:var(--paper);padding:clamp(56px,8vw,104px) 0;border-bottom:1px solid var(--line)}
.cs-approach-head{max-width:24ch;margin-bottom:clamp(32px,5vw,52px)}
.cs-approach-head .kicker{margin-bottom:14px}
.cs-approach-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.08;letter-spacing:-.02em}
.cs-appro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,30px)}
.appro-card{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,2.6vw,34px);box-shadow:var(--shadow-sm);
}
.appro-ico{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  color:#fff;font-size:1.4rem;line-height:1;margin-bottom:18px;
}
.appro-ico.c-sun{background:var(--sun)} .appro-ico.c-coral{background:var(--coral)} .appro-ico.c-sage{background:var(--sage)}
.appro-card h3{font-size:1.22rem;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.appro-card p{color:var(--ink-soft);font-weight:300;font-size:1.02rem}
@media (max-width:860px){.cs-appro-grid{grid-template-columns:1fr}}

/* ---- LOWER PANELS ---- */
.cs-panels{background:var(--cream);padding:clamp(56px,8vw,104px) 0}
.cs-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(34px,5vw,64px);align-items:start}

.cs-contact .kicker{margin-bottom:14px}
.cs-contact h2{margin-bottom:8px}
.cs-contact-lead{color:var(--ink-soft);font-size:1.1rem;font-weight:300;max-width:42ch;margin-top:14px}
.cs-hours{
  margin-top:28px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 24px;box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:16px;
}
.cs-hours .ci-ico{flex:none}
.cs-hours b{display:block;font-size:1.05rem;color:var(--ink)}
.cs-hours span{font-size:.94rem;color:var(--ink-soft)}

/* ---- JOB ENQUIRY ---- */
.cs-jobs{background:var(--cream-2)}
.job-intro{max-width:44ch}
.job-roles{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.job-roles li{
  font-size:.9rem;font-weight:600;padding:9px 16px;border-radius:100px;
  background:var(--paper);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow-sm)
}
.enquiry .field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media (max-width:480px){.enquiry .field-row{grid-template-columns:1fr}}

.cs-foot{background:#2C2A3E;color:#fff;padding:30px 0}
.cs-foot .container{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.cs-foot p{font-size:.86rem;color:rgba(255,255,255,.62)}
.cs-foot .powered a{color:var(--sun);font-weight:600}
.cs-foot .powered a:hover{text-decoration:underline}

@media (max-width:860px){
  .cs-grid{grid-template-columns:1fr;gap:44px}
}

/* ==================================================================
   TEMPLATE ADDITIONS — sections the shell needs that the source CSS
   did not carry (page hero, proof block, FAQ, socials, chips).
   ================================================================== */

/* ---- PAGE HERO (inner pages) ---- */
.page-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
  padding:clamp(70px,11vh,140px) 0;background-color:var(--ink)}
.page-hero-bg{position:absolute;inset:0;z-index:-2;background-color:var(--cream-2);
  background-position:center;background-size:cover;background-repeat:no-repeat}
.page-hero-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,rgba(44,42,62,.88) 0%,rgba(44,42,62,.62) 48%,rgba(53, 178, 77, 0.38) 84%,rgba(110, 212, 129, 0.3) 100%)}
.page-hero-in{color:#fff;max-width:640px}
.page-hero h1{font-weight:700;font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.05;
  letter-spacing:-.03em;text-shadow:0 2px 26px rgba(0,0,0,.28)}
.page-hero p{font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:300;max-width:48ch;margin-top:18px;
  opacity:.96;text-shadow:0 1px 14px rgba(0,0,0,.3)}

/* ---- SESSIONS / AGE GROUPS ---- */
.sec-sessions{background:var(--paper)}
.sess-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,30px);margin-top:44px}
.sess-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,2.6vw,34px);box-shadow:var(--shadow-sm)}
.sess-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;
  font-size:1.4rem;line-height:1;margin-bottom:18px}
.sess-ico.c-coral{background:var(--coral)} .sess-ico.c-sun{background:var(--sun)}
.sess-ico.c-sky{background:var(--sky)} .sess-ico.c-sage{background:var(--sage)}
.sess-ico.c-lilac{background:var(--lilac)}
.sess-card h3{font-size:1.22rem;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.sess-card p{color:var(--ink-soft);font-weight:300;font-size:1.02rem}
.sess-meta{display:inline-block;margin-top:16px;font-size:.82rem;font-weight:600;
  letter-spacing:.06em;color:var(--coral-d);background:rgba(53, 178, 77, 0.1);
  border-radius:100px;padding:7px 15px}
.sess-note{margin-top:30px;background:var(--cream-2);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 24px;color:var(--ink-soft);font-size:1rem}
.sess-note b{color:var(--ink)}
@media (max-width:860px){.sess-grid{grid-template-columns:1fr}}

/* ---- CREDENTIALS / REGULATORY (only renders when supplied) ---- */
.sec-creds{background:var(--cream-2)}
.creds-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,4vw,56px);
  align-items:start;margin-top:40px}
.cred-badge{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,36px);box-shadow:var(--shadow-sm);text-align:center}
.cred-badge .cred-lab{display:block;font-size:.74rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft)}
.cred-badge .cred-val{display:block;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;
  letter-spacing:-.02em;color:var(--coral);margin-top:8px}
.cred-badge .cred-note{display:block;margin-top:10px;font-size:.94rem;color:var(--ink-soft)}
.cred-lines{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:11px}
.cred-lines li{display:flex;gap:13px;align-items:flex-start;font-size:1.02rem;color:var(--ink-soft)}
.cred-lines li::before{content:"✓";flex:none;width:26px;height:26px;border-radius:8px;
  background:var(--sage);color:#fff;font-size:.9rem;font-weight:700;display:grid;place-items:center}
@media (max-width:940px){.creds-grid{grid-template-columns:1fr}}

/* ---- REVIEWS (only renders when real proof is supplied) ---- */
.sec-reviews{background:var(--cream)}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,28px);margin-top:44px}
.rv-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,32px);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:18px}
.rv-card blockquote{color:var(--ink);font-size:1.04rem;font-weight:300;line-height:1.6}
.rv-who{display:flex;align-items:center;gap:14px;margin-top:auto}
.rv-initial{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--sky);color:#fff;font-weight:700;font-size:1.05rem}
.rv-name{display:block;font-weight:600;color:var(--ink)}
.rv-loc{display:block;font-size:.86rem;color:var(--ink-soft)}
@media (max-width:860px){.rv-grid{grid-template-columns:1fr}}

/* ---- FAQ ---- */
.faq-list{margin-top:36px;display:flex;flex-direction:column;gap:14px;max-width:820px}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:600;
  font-size:1.06rem;color:var(--ink);display:flex;justify-content:space-between;
  align-items:center;gap:18px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:9px;
  background:var(--cream-2);color:var(--coral);font-weight:700;display:grid;place-items:center;
  transition:transform .25s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 24px 22px;color:var(--ink-soft);font-weight:300;font-size:1.02rem;max-width:62ch}

/* ---- FOOTER SOCIALS ---- */
.foot-social{display:flex;gap:12px;margin-top:6px}
.foot-social a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.85);font-size:.8rem;font-weight:700;letter-spacing:.04em;
  transition:background .2s,color .2s}
.foot-social a:hover{background:var(--sun);color:#2C2A3E}
.foot-social svg{width:19px;height:19px;display:block;transform:translateZ(0)}
.foot-brandcol{display:flex;flex-direction:column;gap:14px;align-items:flex-start}

/* ---- VISIT STRIP (full-bleed visual break) ---- */
.visit-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.visit-tile{position:relative;min-height:clamp(200px,26vw,320px);
  background-color:var(--cream-2);background-position:center;background-size:cover;
  background-repeat:no-repeat;display:flex;align-items:flex-end}
.visit-tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(44,42,62,.72),rgba(44,42,62,0) 62%)}
.visit-tile span{position:relative;z-index:1;color:#fff;font-weight:600;font-size:1rem;
  letter-spacing:.01em;padding:22px 24px;text-shadow:0 1px 12px rgba(0,0,0,.4)}
@media (max-width:860px){.visit-strip{grid-template-columns:1fr 1fr}
  .visit-tile:last-child{grid-column:1 / -1}}

/* ==================================================================
   SHOP / PLAYSET CATALOGUE (enquiry-based — no checkout)
   ================================================================== */
.sec-shop{background:var(--cream)}

/* ---- FILTER TABS ---- */
.shop-filters{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 clamp(30px,4vw,44px)}
.shop-filter{
  font-family:inherit;font-size:.92rem;font-weight:600;cursor:pointer;
  padding:11px 20px;border-radius:100px;border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink-soft);box-shadow:var(--shadow-sm);
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.shop-filter:hover{transform:translateY(-1px);color:var(--coral-d);border-color:var(--coral)}
.shop-filter[aria-pressed="true"]{background:var(--coral);color:#fff;border-color:var(--coral)}
.shop-count{font-size:.9rem;color:var(--ink-soft);margin-bottom:26px}
.shop-count b{color:var(--ink);font-weight:700}

/* ---- PRODUCT GRID ---- */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,30px)}
@media (max-width:900px){.shop-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.shop-grid{grid-template-columns:1fr}}

.prod-card{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease;
}
.prod-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.prod-card[hidden]{display:none}
.prod-media{position:relative;aspect-ratio:4/3;background:var(--cream-2);overflow:hidden}
.prod-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.prod-card:hover .prod-media img{transform:scale(1.05)}
.prod-tag{
  position:absolute;top:14px;left:14px;z-index:1;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;
  padding:7px 13px;border-radius:100px;color:#fff;
  background:rgba(44,42,62,.72);backdrop-filter:blur(4px);
}
.prod-body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px;gap:10px}
.prod-name{font-size:1.16rem;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.prod-desc{display:none}                 /* image-led cards: names + price only */
.prod-name{flex:1}                       /* keeps price + actions bottom-aligned */
.prod-price{
  display:inline-flex;align-self:flex-start;align-items:center;gap:7px;
  font-size:.82rem;font-weight:600;color:var(--coral-d);
  background:rgba(53,178,77,.1);border-radius:100px;padding:7px 14px;margin-top:2px;
}
.prod-price::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral)}
.prod-actions{display:flex;gap:10px;margin-top:8px}
.prod-enq{flex:1;background:var(--coral);color:#fff;box-shadow:0 12px 26px -14px rgba(53,178,77,.7);padding:12px 18px;font-size:.95rem}
.prod-enq:hover{background:var(--coral-d);transform:translateY(-2px)}
.prod-wa{
  flex:none;width:48px;padding:0;background:#25d366;color:#fff;
  box-shadow:0 12px 26px -14px rgba(37,211,102,.8);
}
.prod-wa:hover{background:#1fbe5b;transform:translateY(-2px)}
.prod-wa img{width:22px;height:22px}

/* ---- SHOP HELP STRIP ---- */
.shop-help{
  margin-top:clamp(36px,5vw,52px);display:grid;grid-template-columns:1.2fr .8fr;
  gap:clamp(24px,4vw,44px);align-items:center;
  background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(28px,4vw,48px);box-shadow:var(--shadow-sm);
}
.shop-help h3{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:700;letter-spacing:-.02em;line-height:1.12}
.shop-help p{color:var(--ink-soft);font-weight:300;margin-top:12px;max-width:52ch}
.shop-help .cta-row{margin-top:0}
@media (max-width:760px){.shop-help{grid-template-columns:1fr;gap:22px}}

/* ---- ICON SVGs — replace font-dingbat glyphs with real vector icons so they
   render identically on every device (the old ✿ ☼ ❦ ♥ glyphs came out thin,
   inconsistent and semantically random on mobile). translateZ(0) opts each icon
   out of the DigiSurf icon auto-animator so the white-on-colour fill is stable. */
.pill-ico svg,.frow-ico svg,.sess-ico svg,.ci-ico svg,.appro-ico svg,.band-doodle svg{
  display:block;transform:translateZ(0);stroke:currentColor
}
.pill-ico svg{width:24px;height:24px}
.frow-ico svg,.sess-ico svg,.appro-ico svg{width:28px;height:28px}
.ci-ico svg{width:23px;height:23px}
.band-doodle svg{width:34px;height:34px;display:inline-block;opacity:.92}

/* ---- TRUST STRIP (Ireland-wide · supply+install · built to order) ---- */
.trust-strip{background:var(--coral);color:#fff}
.trust-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 34px;
  padding:16px 0;text-align:center}
.trust-in span{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:1rem;
  letter-spacing:.01em}
.trust-in span::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.22);color:#fff;font-size:.8rem;display:grid;place-items:center}
@media (max-width:720px){.trust-in{flex-direction:column;gap:12px}}

/* ---- "WHAT WE MAKE" — compact card grid (smaller than full rows) ---- */
.make-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,22px);margin-top:38px}
.make-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease}
.make-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.make-img{aspect-ratio:4/3;background-color:var(--cream-2);background-size:cover;background-position:center}
.make-body{padding:16px 18px 20px}
.make-body h3{font-size:1.1rem;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.make-body p{color:var(--ink-soft);font-size:.92rem;margin-top:5px}
@media (max-width:860px){.make-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.make-grid{grid-template-columns:1fr}}

/* ---- REAL-INSTALL GALLERY (image-led, minimal text) ---- */
.sec-gallery{background:var(--cream-2)}
.install-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.install-grid figure{position:relative;margin:0;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);
  aspect-ratio:1/1;background:var(--cream)}
.install-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
.install-grid figure:hover img{transform:scale(1.06)}
@media (max-width:760px){.install-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.install-grid{grid-template-columns:1fr}}

/* ---- ENQUIRY PREFILL NOTE (contact page) ---- */
.enq-note{
  display:none;align-items:flex-start;gap:12px;
  background:rgba(53,178,77,.1);border:1px solid rgba(53,178,77,.34);
  border-radius:14px;padding:14px 16px;margin-bottom:4px;
}
.enq-note.show{display:flex}
.enq-note .enq-ico{flex:none;width:34px;height:34px;border-radius:10px;background:var(--coral);
  color:#fff;display:grid;place-items:center;font-size:1rem}
.enq-note b{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.enq-note span{font-size:1.02rem;font-weight:600;color:var(--ink)}

/* ---- HERO/PAGE BADGE FIX ----
   The translucent-white badge pill was read as a white background by the
   contrast auto-guard, which flipped the text to black (unreadable on the photo).
   Darken the pill so the white text stays bright and the guard leaves it alone. */
.hero .eyebrow,.page-hero .eyebrow{background:rgba(12,14,22,.52);border-color:rgba(255,255,255,.34);color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* Nav links darkened from grey to near-black ink */
.head-nav>a,.nav-drop-toggle{color:var(--ink)}

/* Ghost buttons on the hero photo and the green band sit on dark backgrounds —
   darken the pill so the white text stays bright (contrast guard was flipping it). */
.hero .btn-ghost,.band .btn-ghost{background:rgba(12,14,22,.42);border-color:rgba(255,255,255,.55);color:#fff}
.hero .btn-ghost:hover,.band .btn-ghost:hover{background:rgba(12,14,22,.55)}

/* Brighter hero: lighten the dark scrim (text stays readable via text-shadow +
   the dark pills on the badge/buttons) and give the photo a subtle lift. */
.hero-scrim{background:linear-gradient(95deg, rgba(12,14,22,.46) 0%, rgba(20,22,34,.28) 36%, rgba(40,40,55,.06) 62%, rgba(40,40,55,0) 84%)}
.hero-bg{filter:brightness(1.07) saturate(1.04)}

/* Tighter vertical rhythm — reduce the large empty gaps between sections */
.sec{padding:clamp(30px,3.4vw,52px) 0}
.sec-mission{padding-top:clamp(10px,1.6vw,22px)}
.about-grid,.approach-grid{margin-top:clamp(22px,2.6vw,34px)}
.make-grid,.install-grid{margin-top:clamp(22px,2.6vw,32px)}
.sec-head{margin-bottom:0}

/* Keep the fixed WhatsApp button from overlapping the "Powered by DigiSurf" footer link */
.foot{padding-bottom:76px}
@media (max-width:700px){.foot{padding-bottom:100px}}

/* ---- SHOW FULL PHOTOS (no incorrect cropping) ----
   Product cards: contain the whole playset in a portrait-friendly frame. */
.prod-media{aspect-ratio:4/5;background:var(--cream-2)}
.prod-media img{object-fit:contain}
/* Gallery: masonry columns so each photo shows at its natural shape, uncropped. */
.install-grid{display:block;column-count:4;column-gap:14px}
.install-grid figure{break-inside:avoid;margin:0 0 14px;aspect-ratio:auto;border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow-sm);background:var(--cream)}
.install-grid img{width:100%;height:auto;aspect-ratio:auto;object-fit:fill;display:block}
@media (max-width:900px){.install-grid{column-count:3}}
@media (max-width:640px){.install-grid{column-count:2}}
@media (max-width:430px){.install-grid{column-count:1}}

/* ---- HERO CAROUSEL (rotating photos + bold, centred copy) ---- */
.hero-slides{position:absolute;inset:0;z-index:-2;background:var(--ink)}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;will-change:opacity;animation:heroFade 32s ease-in-out infinite}
.hero-slide:nth-child(1){animation-delay:-2s}
.hero-slide:nth-child(2){animation-delay:6s}
.hero-slide:nth-child(3){animation-delay:14s}
.hero-slide:nth-child(4){animation-delay:22s}
@keyframes heroFade{0%{opacity:0}3%{opacity:1}22%{opacity:1}26%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-slide{animation:none}.hero-slide:nth-child(1){opacity:1}}

.hero-carousel .hero-scrim{background:linear-gradient(180deg,rgba(10,12,20,.52) 0%,rgba(10,12,20,.34) 44%,rgba(10,12,20,.6) 100%)}
.hero-carousel .hero-in{text-align:center}
.hero-carousel .hero-copy{max-width:840px;margin:0 auto}
.hero-carousel .hero-copy h1{font-weight:800;font-size:clamp(2.8rem,6.4vw,4.8rem);max-width:none;
  letter-spacing:-.03em;text-shadow:0 3px 16px rgba(0,0,0,.6),0 2px 44px rgba(0,0,0,.5)}
.hero-carousel .hero-copy .lede{margin:22px auto 0;max-width:58ch;font-weight:500}
.hero-carousel .cta-row{justify-content:center}

/* Hero carousel — brighter photos + faster rotation */
.hero-carousel .hero-scrim{background:linear-gradient(180deg,rgba(10,12,20,.34) 0%,rgba(10,12,20,.16) 45%,rgba(10,12,20,.42) 100%)}
.hero-slide{animation-duration:16s}
.hero-slide:nth-child(1){animation-delay:-1s}
.hero-slide:nth-child(2){animation-delay:3s}
.hero-slide:nth-child(3){animation-delay:7s}
.hero-slide:nth-child(4){animation-delay:11s}
@keyframes heroFade{0%{opacity:0}4%{opacity:1}22%{opacity:1}27%{opacity:0}100%{opacity:0}}

/* Hero carousel — brighten the photos themselves + very light overlay */
.hero-slide{filter:brightness(1.16) saturate(1.06) contrast(1.02)}
.hero-carousel .hero-scrim{background:linear-gradient(180deg,rgba(8,10,18,.20) 0%,rgba(8,10,18,.04) 42%,rgba(8,10,18,.3) 100%)}
/* keep the centred copy readable on bright photos via stronger text shadow */
.hero-carousel .hero-copy h1{text-shadow:0 2px 4px rgba(0,0,0,.55),0 4px 22px rgba(0,0,0,.55)}
.hero-carousel .hero-copy .lede{text-shadow:0 1px 3px rgba(0,0,0,.7),0 2px 14px rgba(0,0,0,.6)}

/* price line wraps neatly with the supply & installation note */
.prod-price{white-space:normal;line-height:1.35;align-self:flex-start}

/* "supply & installation" note under each price pill */
.prod-note{display:block;font-size:.82rem;font-weight:500;color:var(--ink-soft);margin-top:5px;align-self:flex-start}

/* ---- Content images show FULL (no top/bottom crop) ---- */
.make-img{aspect-ratio:4/5;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:var(--cream-2)}
.about-media,.approach-photo{background-size:contain;background-repeat:no-repeat;background-position:center;background-color:var(--cream-2)}

/* =====================================================================
   CLIENT EDITS — Stephen Mooney, 26/08
   1. "Black font on the little text boxes doesnt work - need this brighter"
   2. "Need the image in the background to be brighter"
   3. "A lot of empty space on the front page if we can reduce this"
   ===================================================================== */

/* ---- 1. BRIGHTER COPY IN THE SMALL TEXT BOXES ---- */
/* The headings inside the little boxes were near-black ink. Lift them to the
   brand green and size them past the 18.66px bold threshold so the brighter
   colour still clears AA contrast on white. */
.fact b,
.pillars b,
.make-body h3{color:var(--coral-d)}
.fact:nth-child(2) b,
.fact:nth-child(3) b{color:var(--coral-d)}
.pillars b,
.make-body h3{font-size:1.2rem;font-weight:700;line-height:1.2}

/* Body copy in the same boxes was a washed-out grey — strengthen it so the
   whole box reads crisply rather than muddy. */
.fact span,
.pillars p,
.make-body p{color:#45435c}
.fact span{font-size:.9rem;font-weight:500}
.pillars p,
.make-body p{font-size:1rem}

/* Crisper box edges so the boxes themselves look brighter, not washed out. */
.fact,
.pillars li,
.make-card{background:#fff;border-color:#b6e8c1}

/* ---- 2. BRIGHTER BACKGROUND IMAGERY ---- */
/* Lighter scrim over the rotating hero photos + a touch more lift on the
   photos themselves. Copy stays readable on the text-shadows below. */
.hero-carousel .hero-scrim{
  background:linear-gradient(180deg,rgba(8,10,18,.14) 0%,rgba(8,10,18,.02) 42%,rgba(8,10,18,.24) 100%);
}
.hero-slide{filter:brightness(1.24) saturate(1.08) contrast(1.02)}
.hero-carousel .hero-copy h1{text-shadow:0 2px 5px rgba(0,0,0,.62),0 4px 26px rgba(0,0,0,.6)}
.hero-carousel .hero-copy .lede{text-shadow:0 1px 4px rgba(0,0,0,.75),0 2px 16px rgba(0,0,0,.65)}
/* Same lift on the inner-page hero photo. */
.page-hero-bg{filter:brightness(1.2) saturate(1.06)}
.page-hero-scrim{background:linear-gradient(180deg,rgba(8,10,18,.42) 0%,rgba(8,10,18,.3) 50%,rgba(8,10,18,.5) 100%)}

/* ---- 3. LESS EMPTY SPACE ON THE FRONT PAGE ---- */
/* The "show full photos" rule letterboxed every portrait photo inside a
   landscape frame, which is where most of the empty space came from. Give the
   frames the photos' own 3:4 shape instead: the photo fills edge to edge, so
   nothing is cropped AND the cream bars are gone. */
.about-media,
.approach-photo,
.make-img{
  aspect-ratio:3/4;min-height:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* Narrow the photo columns so a 3:4 frame doesn't make the rows tall. */
.about-grid{grid-template-columns:1.28fr .72fr}
.approach-grid{grid-template-columns:.82fr 1.18fr}
@media (max-width:820px){
  .about-grid,.approach-grid{grid-template-columns:1fr}
  .about-media,.approach-photo{aspect-ratio:4/3;max-height:420px}
}

/* Shorter hero and tighter rhythm through the page. */
.hero{min-height:clamp(460px,64vh,620px)}
.hero-in{padding-top:clamp(34px,4.5vh,58px);padding-bottom:clamp(34px,4.5vh,58px)}
.sec{padding:clamp(26px,2.8vw,44px) 0}
.sec-mission{padding-top:clamp(8px,1.2vw,16px)}
.about-grid,.approach-grid{margin-top:clamp(16px,2vw,26px)}
.make-grid,.install-grid{margin-top:clamp(16px,2vw,26px)}
.fact-row{margin-top:22px}
.prose{margin-top:16px}
.cta-row{margin-top:22px}
.sec-sub{margin-top:12px}

/* =====================================================================
   TYPOGRAPHY + HEADER LAYOUT
   ===================================================================== */

/* ---- Outfit on EVERYTHING (headings and body) ----
   The stack already named Outfit but the webfont was never linked, so the
   whole site was silently rendering in the Segoe UI fallback. The <link> is
   now in each page's <head>; this pins every element to it. */
html,body,
h1,h2,h3,h4,h5,h6,
p,a,li,span,b,strong,em,i,small,label,legend,figcaption,blockquote,
button,input,select,textarea,summary,th,td,
.btn,.kicker,.eyebrow,.prod-name,.prod-price,.prod-note,.mission-lead,
.sec-sub,.lede,.trust-in span,.make-body h3,.pillars b,.fact b,.fact span{
  font-family:'Outfit',ui-rounded,'Segoe UI',system-ui,-apple-system,sans-serif;
}
body{font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-.025em}
h1{letter-spacing:-.03em}

/* ---- HEADER: logo left · menu centred · Enquire button right ----
   Three-column grid with equal 1fr rails so the menu sits on the true page
   centre, not merely in the space left over after the logo. */
.head-in{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:16px;height:var(--head-h);
}
.brand{grid-column:1;justify-self:start}
.head-nav{
  grid-column:2;justify-self:center;
  display:flex;align-items:center;gap:clamp(16px,2vw,30px);
}
.head-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
.head-right .nav-cta{color:#fff;white-space:nowrap}

/* Give the centre column room before the mobile breakpoint kicks in. */
@media (max-width:1100px){
  .head-nav{gap:15px}
  .head-nav>a,.nav-drop-toggle{font-size:.98rem}
}

@media (max-width:940px){
  /* The drawer is absolutely positioned, so it leaves the grid flow and the
     bar becomes logo | (Enquire + burger). */
  .head-in{grid-template-columns:auto 1fr}
  .brand{grid-column:1}
  .head-right{grid-column:2;justify-self:end}
  .head-nav{grid-column:1 / -1}
}
@media (max-width:430px){
  .head-right{gap:6px}
  .head-right .nav-cta{padding:9px 13px;font-size:.84rem}
}

/* =====================================================================
   PREMIUM PASS
   Restraint over decoration: smaller display type, warm neutral paper,
   hairline rings instead of borders, layered low-alpha shadows, and the
   bright green demoted to a marker rather than a fill.
   ===================================================================== */

:root{
  /* Warm neutral paper — the minty off-white read as clip-art. */
  --cream:#FAF9F6;
  --cream-2:#F3F1EB;
  --paper:#FFFFFF;

  /* Deep, warm greens. Bright green survives only as an accent marker. */
  --ink:#16211B;
  --ink-soft:#5F6B63;
  --forest:#14532D;
  --forest-2:#186B39;
  --accent:#35B24D;

  --line:rgba(22,33,27,.10);
  --ring:inset 0 0 0 1px rgba(22,33,27,.09);
  --ring-hover:inset 0 0 0 1px rgba(20,83,45,.22);
  --shadow-sm:0 1px 2px rgba(22,33,27,.04), 0 10px 24px -18px rgba(22,33,27,.30);
  --shadow:0 2px 6px rgba(22,33,27,.05), 0 30px 60px -34px rgba(22,33,27,.40);
  --r:18px;
  --r-lg:24px;
}
body{background:var(--cream);color:var(--ink);font-size:1rem;line-height:1.65}

/* ---- TYPE SCALE — down. Poster-sized display type is what reads broken. ---- */
h1,.hero-copy h1,.hero-carousel .hero-copy h1,.page-hero-in h1{
  font-size:clamp(2.05rem,3.5vw,3.15rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.08;max-width:20ch;
}
.hero-carousel .hero-copy h1{max-width:24ch;margin-inline:auto}
h2{font-size:clamp(1.55rem,2.4vw,2.2rem);font-weight:700;letter-spacing:-.025em;line-height:1.14}
h3{font-size:1.08rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.lede,.hero-copy .lede{font-size:clamp(.98rem,1.05vw,1.08rem);font-weight:400;line-height:1.6}
.sec-sub{font-size:1.02rem;font-weight:400;line-height:1.62;color:var(--ink-soft)}
.prose p{font-size:1rem;line-height:1.7;color:var(--ink-soft)}
.mission-lead{font-size:clamp(1.2rem,1.9vw,1.6rem);font-weight:600;letter-spacing:-.02em}
.mission-card>p:last-child{font-size:1rem;line-height:1.68}

/* ---- MICRO-LABELS — uppercase, wide tracking, hairline rule not a blob ---- */
.kicker,.eyebrow{
  font-size:.7rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
}
.kicker{color:var(--forest-2);margin-bottom:14px;gap:12px}
.crayon{width:26px;height:1.5px;border-radius:0;background:var(--accent);opacity:.9}
.kicker.light{color:rgba(255,255,255,.9)}
.kicker.light .crayon{background:rgba(255,255,255,.75)}

/* ---- SURFACES — hairline rings, never borders ---- */
.fact,.pillars li,.make-card,.prod-card,.enquiry,.shop-help,.faq-item{
  border:0 !important;
  background:var(--paper);
  border-radius:var(--r);
  box-shadow:var(--ring), var(--shadow-sm);
  transition:box-shadow .32s cubic-bezier(.2,.7,.3,1), transform .32s cubic-bezier(.2,.7,.3,1);
}
.make-card:hover,.prod-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--ring-hover), var(--shadow);
}

/* ---- FACT BOXES — the 1.9rem label was a stat-number size applied to words,
   which forced every box to wrap and left the first one half empty. ---- */
.fact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.fact{position:relative;overflow:hidden;padding:20px 20px 18px}
.fact::before{
  content:"";position:absolute;left:20px;top:0;width:26px;height:2px;
  background:var(--accent);border-radius:0 0 2px 2px;
}
.fact b,.fact:nth-child(2) b,.fact:nth-child(3) b{
  display:block;font-size:1rem;font-weight:600;line-height:1.3;
  letter-spacing:-.01em;color:var(--forest-2);margin-bottom:5px;
}
.fact span{display:block;font-size:.9rem;font-weight:400;line-height:1.5;color:var(--ink-soft)}
@media (max-width:640px){.fact-row{grid-template-columns:1fr}}

/* ---- PILLARS — ghosted index numeral, calmer icon chip ---- */
.pillars li{position:relative;overflow:hidden;padding:20px 22px;gap:15px}
.pillars li::after{
  content:counter(pillar,decimal-leading-zero);counter-increment:pillar;
  position:absolute;right:16px;bottom:4px;
  font-size:2.6rem;font-weight:700;letter-spacing:-.04em;
  color:rgba(22,33,27,.045);pointer-events:none;line-height:1;
}
.pillars{counter-reset:pillar}
.pill-ico,.pill-ico.c-coral,.pill-ico.c-sun,.pill-ico.c-sky,.pill-ico.c-sage{
  width:38px;height:38px;border-radius:11px;
  background:rgba(53,178,77,.10);color:var(--forest);
  box-shadow:inset 0 0 0 1px rgba(20,83,45,.14);
}
.pill-ico svg{width:19px;height:19px;stroke:currentColor;fill:none}
.pillars b,.make-body h3{font-size:1.04rem;font-weight:600;color:var(--forest-2);letter-spacing:-.01em}
.pillars p,.make-body p{font-size:.94rem;line-height:1.55;color:var(--ink-soft)}
.make-body{padding:15px 17px 17px}

/* ---- PHOTO FRAMES — the 8px white border read as a cheap Polaroid mat ---- */
.about-media,.approach-photo,.frow-media{
  border:0;border-radius:var(--r-lg);
  box-shadow:var(--ring), var(--shadow);
}
.install-grid figure{box-shadow:var(--ring), var(--shadow-sm);border-radius:16px}

/* ---- BUTTONS — tighter, with a little depth ---- */
.btn{padding:12px 24px;font-size:.94rem;font-weight:600;letter-spacing:0;border-radius:100px}
.btn-sm{padding:10px 19px;font-size:.88rem}
.btn-solid{
  background:linear-gradient(180deg,var(--forest-2),var(--forest));
  color:#fff;border-color:transparent;
  box-shadow:0 1px 2px rgba(20,83,45,.28), 0 12px 24px -14px rgba(20,83,45,.7);
}
.btn-solid:hover{
  background:linear-gradient(180deg,#1c7d43,#12482a);
  box-shadow:0 2px 4px rgba(20,83,45,.3), 0 16px 30px -14px rgba(20,83,45,.8);
}
.btn-on-band{background:#fff;color:var(--forest)}

/* ---- HEADER + TRUST STRIP ---- */
.site-head{background:rgba(250,249,246,.78)}
.site-head.scrolled{background:rgba(250,249,246,.94);box-shadow:0 1px 0 rgba(22,33,27,.07)}
.head-nav>a,.nav-drop-toggle{font-size:.98rem;font-weight:500;color:var(--ink-soft)}
.head-nav>a:hover,.nav-drop-toggle:hover{color:var(--forest)}
.trust-strip{background:var(--forest);color:#fff}
.trust-in span{font-size:.88rem;font-weight:500;letter-spacing:.01em}
.trust-in span::before{background:rgba(255,255,255,.16);font-size:.7rem;width:19px;height:19px}

/* ---- MISSION + BAND — deep forest, not slate ---- */
.mission-card{background:linear-gradient(155deg,#1B5E33 0%,#123F24 100%)}
.mission-card::before{background:radial-gradient(circle,rgba(53,178,77,.34),transparent 70%)}
.mission-card::after{background:radial-gradient(circle,rgba(53,178,77,.2),transparent 70%)}
.band{background:linear-gradient(155deg,#1B5E33 0%,#123F24 100%)}
.foot{background:#101A14}

/* ---- PRODUCT CARDS ---- */
.prod-media{background:var(--cream-2);box-shadow:inset 0 -1px 0 rgba(22,33,27,.06)}
.prod-name{font-size:1.02rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.35}
.prod-price{
  background:transparent;padding:0;border-radius:0;
  font-size:1.06rem;font-weight:700;color:var(--forest);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.prod-price::before{width:5px;height:5px;background:var(--accent)}
.prod-note{font-size:.78rem;color:var(--ink-soft);letter-spacing:.01em}
.prod-tag{
  background:rgba(255,255,255,.92);color:var(--forest);
  font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 2px 10px -4px rgba(22,33,27,.4);
}
.shop-filter{border-color:var(--line);font-size:.88rem;font-weight:500;color:var(--ink-soft)}
.shop-filter[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:#fff}

/* ---- RHYTHM ---- */
.sec{padding:clamp(40px,4.6vw,68px) 0}
.sec-head{max-width:600px}

/* ---- premium pass, follow-ups ---- */
.prod-card,.make-card{border-radius:var(--r-lg)}
.prod-enq{
  flex:1;padding:11px 18px;font-size:.9rem;font-weight:600;
  background:linear-gradient(180deg,var(--forest-2),var(--forest));color:#fff;
  box-shadow:0 1px 2px rgba(20,83,45,.28), 0 12px 24px -15px rgba(20,83,45,.75);
}
.prod-enq:hover{background:linear-gradient(180deg,#1c7d43,#12482a);transform:translateY(-2px)}
/* An alpha-white chip reads as pure white to the contrast guard, which then
   flips the tick to black on the green strip. Give it a real colour. */
.trust-in span::before{background:#2E8B4A;color:#fff}
.shop-help,.enquiry,.faq-item{border-radius:var(--r-lg)}
.page-hero-in h1{max-width:22ch}
.sec-mission{padding-top:clamp(6px,1vw,14px)}

/* =====================================================================
   MISSION PANEL — split feature card
   Was a flat green rectangle with the copy in one corner and 45% of the
   surface empty. Now: editorial column + a real photo bleeding to the
   edge, on a layered, grained forest surface.
   ===================================================================== */
.sec-mission{padding-bottom:clamp(30px,3.4vw,50px)}

.mission-card{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:stretch;gap:0;padding:0;
  border-radius:clamp(22px,2.2vw,30px);
  color:#fff;
  /* layered, not flat: a warm lit corner, a deep pooled corner, a base ramp */
  background:
    radial-gradient(115% 95% at 88% 4%, rgba(72,196,104,.30) 0%, transparent 58%),
    radial-gradient(95% 85% at -5% 105%, rgba(6,32,18,.85) 0%, transparent 62%),
    linear-gradient(155deg,#1D6B3B 0%,#14532D 46%,#0D3A20 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 44px 80px -44px rgba(9,43,24,.85);
}

/* Fine grain — the single detail that stops a large flat fill reading as a
   placeholder. Sits above the gradients, below the content. */
.mission-card::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.34;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mission-card::after{content:none}

.mission-copy{
  position:relative;z-index:1;
  padding:clamp(30px,3.4vw,52px) clamp(26px,3vw,48px);
  display:flex;flex-direction:column;justify-content:center;
}
.mission-card .kicker.light{color:rgba(255,255,255,.86);margin-bottom:16px}
.mission-lead{
  font-size:clamp(1.32rem,2vw,1.85rem);font-weight:600;
  letter-spacing:-.025em;line-height:1.16;max-width:19ch;margin:0 0 14px;
}
.mission-body{
  font-size:1rem;line-height:1.62;color:rgba(255,255,255,.8);
  max-width:44ch;font-weight:400;margin:0;
}

/* Three proof points on hairline rules — substance without another paragraph. */
.mission-points{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;margin:24px 0 26px;
}
.mission-points li{
  padding:0 16px;border-left:1px solid rgba(255,255,255,.16);
  display:flex;flex-direction:column;gap:3px;
}
.mission-points li:first-child{padding-left:0;border-left:0}
.mission-points b{
  font-size:.94rem;font-weight:600;letter-spacing:-.01em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.mission-points span{
  font-size:.74rem;font-weight:500;line-height:1.4;
  color:rgba(255,255,255,.6);letter-spacing:.01em;
}

.mission-card .cta-row{margin-top:0;gap:10px}
.mission-card .btn-on-band{background:#fff;color:var(--forest)}
.mission-card .btn-on-band:hover{background:#F1F7F2;color:#0D3A20}
/* Dark pill, not translucent white — a white wash reads as a white ground to
   the contrast guard, which then flips the label to black. */
.mission-card .btn-ghost{background:rgba(8,34,20,.46);border-color:rgba(255,255,255,.5);color:#fff}
.mission-card .btn-ghost:hover{background:rgba(8,34,20,.62)}

/* Photo bleeds to the card edge and dissolves into the green. */
.mission-media{
  position:relative;z-index:1;min-height:100%;
  background-color:#0D3A20;background-size:cover;background-position:center 38%;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 46%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 46%);
}
.mission-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,83,45,.9) 0%,rgba(20,83,45,.28) 38%,transparent 70%),
             linear-gradient(0deg,rgba(13,58,32,.5) 0%,transparent 45%);
}

@media (max-width:900px){
  .mission-card{grid-template-columns:1fr}
  .mission-media{
    order:-1;min-height:0;aspect-ratio:16/9;
    -webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 52%,transparent 100%);
  }
  .mission-media::after{
    background:linear-gradient(180deg,rgba(20,83,45,.15) 0%,rgba(20,83,45,.85) 100%);
  }
  .mission-copy{padding-top:clamp(6px,2vw,18px)}
}
@media (max-width:560px){
  .mission-points{grid-template-columns:1fr;gap:12px}
  .mission-points li{padding:0 0 0 14px;border-left:1px solid rgba(255,255,255,.18)}
  .mission-points li:first-child{padding-left:14px;border-left:1px solid rgba(255,255,255,.18)}
}

/* =====================================================================
   "HOW WE WORK" — hairline spec list
   Four floating white slivers with filled green icon chips and a ghosted
   numeral bleeding off the right edge is template language. Replaced with a
   bounded, hairline-ruled index list: numerals in a fixed left gutter,
   no boxes, no shadows, an accent rail that arms on hover.
   ===================================================================== */
.approach-grid{
  grid-template-columns:.88fr 1.12fr;
  gap:clamp(26px,3.2vw,52px);
  align-items:stretch;
}
.approach-photo{
  position:relative;align-self:start;
  aspect-ratio:4/5;border-radius:clamp(18px,1.8vw,24px);
}
.approach-photo::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),
             inset 0 -90px 100px -70px rgba(9,30,18,.6);
}

.pillars{counter-reset:pillar;height:100%;gap:0;justify-content:center}
.pillars li{
  flex:1;
  display:grid;grid-template-columns:46px minmax(0,1fr);
  align-items:center;gap:0;
  padding:20px 16px 20px 16px;
  background:transparent;border:0;border-radius:10px;
  box-shadow:none;
  border-top:1px solid var(--line);
  transition:background .34s cubic-bezier(.2,.7,.3,1),
             box-shadow .34s cubic-bezier(.2,.7,.3,1);
}
.pillars li:last-child{border-bottom:1px solid var(--line)}
/* Explicit placement so hiding the icon can't shunt the copy into the gutter. */
.pillars li::before{
  content:counter(pillar,decimal-leading-zero);counter-increment:pillar;
  grid-column:1;grid-row:1;align-self:center;
  font-size:.78rem;font-weight:700;letter-spacing:.13em;
  font-variant-numeric:tabular-nums;
  color:rgba(22,33,27,.30);
  transition:color .34s ease;
}
.pillars li::after{content:none}
.pillars li>div{grid-column:2;grid-row:1;min-width:0}
.pill-ico,.pill-ico.c-coral,.pill-ico.c-sun,.pill-ico.c-sky,.pill-ico.c-sage{display:none !important}
.pillars li:hover{
  background:linear-gradient(90deg,rgba(24,107,57,.06) 0%,rgba(24,107,57,0) 72%);
  box-shadow:inset 2px 0 0 var(--accent);
}
.pillars li:hover::before{color:var(--forest-2)}
.pillars b{font-size:1.02rem;font-weight:600;color:var(--forest-2);letter-spacing:-.01em}
.pillars p{font-size:.93rem;line-height:1.55;color:var(--ink-soft);margin-top:4px;max-width:46ch}

@media (max-width:820px){
  .approach-grid{grid-template-columns:1fr}
  .approach-photo{aspect-ratio:4/3;max-height:400px}
  .pillars{height:auto}
  .pillars li{padding:16px 14px}
}

/* =====================================================================
   "WHAT WE MAKE" — full-bleed editorial tiles
   Photo-on-top / white-caption-below is the most generic card there is, and
   the ragged two- and three-line captions made the row uneven. Now the photo
   IS the card, with the copy set over a gradient foot and a hairline
   call-to-action rule.
   ===================================================================== */
.make-grid{grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.3vw,18px)}
.make-card{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:3/4;
  border:0;background:#0C3319;
  border-radius:clamp(16px,1.6vw,22px);
  box-shadow:var(--ring), var(--shadow-sm);
}
.make-card:hover{
  transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px rgba(20,83,45,.24), var(--shadow);
}
.make-img{
  position:absolute;inset:0;aspect-ratio:auto;min-height:0;
  background-size:cover;background-position:center;
  transform:scale(1.02);
  transition:transform .85s cubic-bezier(.2,.7,.3,1);
}
.make-card:hover .make-img{transform:scale(1.08)}
.make-card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,26,16,0) 22%,
    rgba(8,26,16,.30) 48%,
    rgba(6,22,13,.80) 74%,
    rgba(5,19,11,.94) 100%);
}
.make-body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(14px,1.35vw,19px);
  background:transparent;
}
.make-body h3{
  color:#fff;font-size:1.01rem;font-weight:600;letter-spacing:-.012em;line-height:1.25;
}
.make-body p{
  color:rgba(255,255,255,.74);font-size:.845rem;line-height:1.45;margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.5em;
}
.make-body::after{
  content:"View sets \2192";
  display:block;width:100%;margin-top:11px;padding-top:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
  font-size:.66rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.9);
  transition:letter-spacing .34s ease,color .34s ease;
}
.make-card:hover .make-body::after{letter-spacing:.23em;color:#fff}

@media (max-width:860px){.make-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.make-grid{grid-template-columns:1fr}.make-card{aspect-ratio:4/3}}

/* The per-build block in each page's <head> declares
   `.pill-ico{display:grid !important}` and, being later in document order,
   an equal-specificity !important here would lose. Out-specify it instead,
   or the hidden chips reflow into the numeral gutter. */
.pillars li .pill-ico,
.pillars li .pill-ico.c-coral,
.pillars li .pill-ico.c-sun,
.pillars li .pill-ico.c-sky,
.pillars li .pill-ico.c-sage{display:none !important}

/* =====================================================================
   GALLERY — deliberate 4x4 mosaic, not ragged masonry
   column-count masonry left every column ending at a different height, so
   13 photos read as an accident. 13 tiles fit a 4x4 grid EXACTLY when one
   spans 2x2 (4 + 12 = 16 cells), so the flagship shot anchors the corner
   and the block closes flush on every row.
   ===================================================================== */
.install-grid{
  display:grid !important;column-count:auto;
  grid-template-columns:repeat(4,1fr);
  grid-auto-flow:dense;
  gap:clamp(8px,.85vw,12px);
  margin-top:clamp(18px,2.2vw,30px);
}
.install-grid figure{
  position:relative;margin:0;overflow:hidden;
  aspect-ratio:4/5;break-inside:auto;
  border-radius:clamp(11px,1.1vw,15px);
  background:var(--cream-2);
  box-shadow:var(--ring), 0 1px 2px rgba(22,33,27,.05);
  transition:box-shadow .4s cubic-bezier(.2,.7,.3,1);
}
.install-grid figure.gal-feature{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.install-grid img{
  width:100%;height:100%;aspect-ratio:auto;object-fit:cover;display:block;
  transform:scale(1.02);
  transition:transform .9s cubic-bezier(.2,.7,.3,1);
}
.install-grid figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(6,22,13,.34) 100%);
  opacity:0;transition:opacity .4s ease;
}
.install-grid figure:hover img{transform:scale(1.09)}
.install-grid figure:hover::after{opacity:1}
.install-grid figure:hover{box-shadow:inset 0 0 0 1px rgba(20,83,45,.24), var(--shadow-sm)}

/* Each breakpoint keeps the cell count divisible, so no row is ever short. */
@media (max-width:900px){
  .install-grid{grid-template-columns:repeat(3,1fr)}
  .install-grid figure.gal-feature{grid-column:span 3;grid-row:span 1;aspect-ratio:16/9}
}
@media (max-width:560px){
  .install-grid{grid-template-columns:repeat(2,1fr)}
  .install-grid figure.gal-feature{grid-column:span 2;aspect-ratio:16/10}
}

/* =====================================================================
   BAND CTA — split panel on the same forest surface as the mission card
   A centred promo box with a clip-art star is the most generic closer
   there is. Copy left, actions right, plus a direct-dial line.
   ===================================================================== */
.band{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;gap:clamp(26px,3.2vw,56px);
  text-align:left;
  padding:clamp(30px,3.6vw,54px) clamp(26px,3.2vw,52px);
  border-radius:clamp(22px,2.2vw,30px);
  color:#fff;
  background:
    radial-gradient(110% 100% at 92% 0%, rgba(72,196,104,.28) 0%, transparent 58%),
    radial-gradient(90% 90% at -5% 108%, rgba(6,32,18,.85) 0%, transparent 62%),
    linear-gradient(150deg,#1D6B3B 0%,#14532D 48%,#0D3A20 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 44px 80px -44px rgba(9,43,24,.85);
}
.band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.32;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.band-doodle{display:none}
.band-copy,.band-act{position:relative;z-index:1}
.band .kicker.light{color:rgba(255,255,255,.86);margin-bottom:14px}
.band .kicker.light .crayon{background:rgba(255,255,255,.72)}
.band h2{color:#fff;max-width:17ch;margin:0}
.band-lead{
  font-size:1rem;line-height:1.62;color:rgba(255,255,255,.8);
  max-width:46ch;margin-top:12px;
}
.band-act{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.band-act .btn{width:100%;justify-content:center}
.band .btn-on-band{background:#fff;color:var(--forest)}
.band .btn-on-band:hover{background:#F1F7F2;color:#0D3A20}
.band .btn-ghost{background:rgba(8,34,20,.46);border-color:rgba(255,255,255,.5);color:#fff}
.band .btn-ghost:hover{background:rgba(8,34,20,.62)}
.band-tel{
  display:flex;flex-direction:column;gap:2px;margin-top:8px;padding-top:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  text-decoration:none;
}
.band-tel span{
  font-size:.66rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.band-tel b{
  font-size:1.14rem;font-weight:600;letter-spacing:-.01em;color:#fff;
  font-variant-numeric:tabular-nums;transition:color .3s ease;
}
.band-tel:hover b{color:#8FD9A3}
@media (max-width:800px){
  .band{grid-template-columns:1fr;gap:24px}
  .band h2,.band-lead{max-width:none}
}

/* =====================================================================
   FOOTER — four columns on a lit, grained surface
   A logo sticker, five inline links and a thin copyright line reads like a
   placeholder. Real structure: brand + blurb, two link columns, a contact
   column with the number set as the object it is.
   ===================================================================== */
.foot{
  position:relative;overflow:hidden;color:#fff;
  padding:clamp(46px,5vw,72px) 0 84px;
  background:
    radial-gradient(85% 130% at 6% -10%, rgba(24,107,57,.34) 0%, transparent 62%),
    linear-gradient(180deg,#0E1A13 0%,#09120C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}
.foot::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.3;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.foot>.container{position:relative;z-index:1}

.foot-grid{
  display:grid;
  grid-template-columns:1.55fr 1fr 1.05fr 1.15fr;
  gap:clamp(22px,2.8vw,52px);
  padding-bottom:clamp(28px,3vw,44px);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.12);
}
.foot-logo{
  width:146px;padding:12px;border-radius:15px;background:#fff;
  box-shadow:0 18px 36px -22px rgba(0,0,0,.8), inset 0 0 0 1px rgba(22,33,27,.06);
}
.foot-blurb{
  margin-top:17px;font-size:.9rem;line-height:1.62;
  color:rgba(255,255,255,.6);max-width:35ch;
}
.foot-social{display:flex;gap:9px;margin-top:18px}
.foot-social a{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:transparent;color:rgba(255,255,255,.82);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  transition:background .28s ease,color .28s ease,box-shadow .28s ease;
}
.foot-social a:hover{background:#8FD9A3;color:#0B1810;box-shadow:none}
.foot-social svg{width:17px;height:17px}

.foot-col h4{
  font-size:.67rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:rgba(255,255,255,.48);margin-bottom:15px;
}
.foot-nav{display:flex;flex-direction:column;flex-wrap:nowrap;gap:10px;align-items:flex-start}
.foot-nav a{font-size:.92rem;font-weight:400;color:rgba(255,255,255,.72);transition:color .25s ease}
.foot-nav a:hover{color:#8FD9A3}

.foot-tel{
  display:block;font-size:1.2rem;font-weight:600;letter-spacing:-.015em;
  color:#fff;font-variant-numeric:tabular-nums;transition:color .25s ease;
}
.foot-tel:hover{color:#8FD9A3}
.foot-link{display:inline-block;margin-top:10px;font-size:.9rem;color:rgba(255,255,255,.72);transition:color .25s ease}
.foot-link:hover{color:#8FD9A3}
.foot-contact address{
  margin-top:17px;font-style:normal;font-size:.87rem;line-height:1.68;
  color:rgba(255,255,255,.56);
}

.foot-bottom{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;
  padding-top:clamp(18px,2vw,26px);border:0;
}
.foot-bottom p{font-size:.79rem;color:rgba(255,255,255,.46);letter-spacing:.01em}
.powered a{color:rgba(255,255,255,.74);font-weight:500}
.powered a:hover{color:#8FD9A3;text-decoration:none}

@media (max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr;row-gap:34px}
  .foot-brandcol{grid-column:1 / -1}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr;row-gap:30px}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}
@media (max-width:700px){.foot{padding-bottom:106px}}

/* =====================================================================
   BUG FIX — WhatsApp buttons
   `.btn{padding:12px 24px}` in the premium pass was appended AFTER
   `.prod-wa{padding:0}`. Equal specificity, later wins: a 48px-wide pill got
   24px of side padding, the content box collapsed to 0 and the icon vanished,
   leaving a bare green disc. Out-specify and set the box explicitly.
   ===================================================================== */
.prod-actions .prod-wa{
  flex:none;width:46px;height:46px;min-height:46px;padding:0;
  display:grid;place-items:center;border-radius:50%;
  background:#1FA855;color:#fff;border:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),
             0 1px 2px rgba(11,60,30,.3),
             0 10px 22px -12px rgba(31,168,85,.75);
  transition:background .28s ease, transform .28s ease, box-shadow .28s ease;
}
.prod-actions .prod-wa:hover{
  background:#25D366;transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),
             0 2px 4px rgba(11,60,30,.3),
             0 14px 26px -12px rgba(37,211,102,.85);
}
.prod-actions .prod-wa img{width:21px;height:21px;display:block}
.prod-actions{align-items:center;gap:9px}
.prod-actions .prod-enq{min-height:46px;display:inline-flex;align-items:center;justify-content:center}

/* Floating WhatsApp button — same treatment, less neon. */
.ds-fab{
  width:56px;height:56px;background:#1FA855;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),
             0 4px 10px rgba(11,60,30,.28),
             0 18px 34px -14px rgba(11,60,30,.6);
}
.ds-fab:hover{background:#25D366}
.ds-fab img{width:29px;height:29px}

/* =====================================================================
   INNER-PAGE HERO
   The shop hero cover-cropped a tall portrait photo into a wide banner, so
   it showed one slide at arm's length; the badge ran to two lines and ended
   on a stray separator; and the H1 repeated verbatim as the H2 below it.
   ===================================================================== */
.page-hero{padding:clamp(56px,9vh,108px) 0;background-color:#0D3A20}
.page-hero-bg{background-position:center 46%;filter:brightness(1.06) saturate(1.03)}
.page-hero-scrim{
  background:
    linear-gradient(100deg, rgba(8,26,16,.86) 0%, rgba(10,32,19,.66) 42%, rgba(12,40,24,.3) 72%, rgba(12,40,24,.12) 100%),
    linear-gradient(180deg, rgba(6,20,12,.34) 0%, transparent 34%, rgba(6,20,12,.44) 100%);
}
.page-hero-in{max-width:700px}
.page-hero .eyebrow{
  font-size:.66rem;letter-spacing:.19em;
  background:rgba(8,26,16,.5);border-color:rgba(255,255,255,.26);
  padding:7px 14px;margin-bottom:18px;
  backdrop-filter:blur(8px);
}
.page-hero .eyebrow .dot{width:6px;height:6px;background:#8FD9A3;box-shadow:0 0 0 3px rgba(143,217,163,.28)}
.page-hero h1{text-shadow:0 2px 6px rgba(0,0,0,.42), 0 6px 34px rgba(0,0,0,.4)}
.page-hero p{
  font-weight:400;font-size:clamp(.99rem,1.15vw,1.08rem);line-height:1.6;
  color:rgba(255,255,255,.88);max-width:50ch;margin-top:14px;
  text-shadow:0 1px 5px rgba(0,0,0,.5);
}

/* Hairline stat rail — gives the banner substance instead of dead photo. */
.hero-meta{
  list-style:none;display:flex;flex-wrap:wrap;gap:0;
  margin-top:26px;padding-top:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.hero-meta li{
  display:flex;flex-direction:column;gap:2px;
  padding:0 22px;border-left:1px solid rgba(255,255,255,.2);
}
.hero-meta li:first-child{padding-left:0;border-left:0}
.hero-meta b{
  font-size:1.12rem;font-weight:600;letter-spacing:-.015em;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 5px rgba(0,0,0,.45);
}
.hero-meta span{
  font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
@media (max-width:560px){
  .hero-meta{gap:14px}
  .hero-meta li{padding:0 0 0 14px;border-left:1px solid rgba(255,255,255,.2);flex:1 1 100%}
  .hero-meta li:first-child{padding-left:14px;border-left:1px solid rgba(255,255,255,.2)}
}

/* =====================================================================
   CLIENT ROUND 2
   1. Whole image must fit — nothing cropped
   2. Gallery: named, priced, smallest to largest
   3. Bolder hero over the rotating photos
   ===================================================================== */

/* ---- 1. FIT THE WHOLE IMAGE ----
   `contain` alone was what caused the "too much empty space" complaint, so the
   frames are cut to the photos' own 3:4 shape first. Every content photo is
   0.75-0.80, so contain in a 3:4 frame fits edge to edge with no bar AND no
   crop. The frame colour matches the surface behind it either way. */
.about-media,.approach-photo{
  aspect-ratio:3/4;min-height:0;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  background-color:var(--cream-2);
}
.make-img{
  background-size:contain;background-repeat:no-repeat;background-position:center;
  background-color:#0C3319;
}
.frow-media{background-size:contain;background-repeat:no-repeat;background-color:var(--cream-2)}
.visit-tile{background-size:contain !important;background-repeat:no-repeat;background-position:center;background-color:var(--cream-2)}
/* Heroes stay full-bleed — they now run landscape photos, so cover barely cuts. */
.hero-slide,.page-hero-bg{background-size:cover;background-position:center 44%}

/* ---- 2. GALLERY — the range, named and priced, smallest first ----
   13 is prime, so a uniform grid can never close flush: the first tile (the
   entry-level set, so size order still reads left-to-right) spans 2x2 and
   12 + 4 = 16 divides both 4 and 2 columns exactly. */
.install-grid{
  display:grid !important;grid-template-columns:repeat(4,1fr);
  grid-auto-flow:dense;gap:clamp(10px,1.1vw,16px);
}
.install-grid figure{
  display:flex;flex-direction:column;aspect-ratio:auto;overflow:hidden;
  background:var(--paper);border-radius:var(--r);
  box-shadow:var(--ring), var(--shadow-sm);
  transition:box-shadow .34s cubic-bezier(.2,.7,.3,1), transform .34s cubic-bezier(.2,.7,.3,1);
}
.install-grid figure>a{display:flex;flex-direction:column;height:100%;text-decoration:none}
.gal-media{
  display:block;position:relative;aspect-ratio:4/5;overflow:hidden;
  background:var(--cream-2);
  box-shadow:inset 0 -1px 0 rgba(22,33,27,.07);
}
.install-grid img{
  position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  object-fit:contain;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.install-grid figure:hover{transform:translateY(-3px);box-shadow:var(--ring-hover), var(--shadow)}
.install-grid figure:hover img{transform:scale(1.04)}
.install-grid figcaption{
  display:flex;flex-direction:column;gap:5px;
  padding:13px 15px 15px;margin-top:auto;
}
.install-grid figcaption b{
  font-size:.92rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;
  color:var(--ink);
}
.install-grid figcaption span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.9rem;font-weight:700;color:var(--forest);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.install-grid figcaption span::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;
}
.install-grid figure.gal-feature{grid-column:span 2;grid-row:span 2}
.gal-feature .gal-media{aspect-ratio:auto;flex:1}
.gal-feature figcaption{padding:17px 19px 19px;gap:6px}
.gal-feature figcaption b{font-size:1.1rem}
.gal-feature figcaption span{font-size:1.06rem}
@media (max-width:900px){
  .install-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:460px){
  .install-grid{grid-template-columns:1fr}
  .install-grid figure.gal-feature{grid-column:span 1;grid-row:span 1}
  .gal-feature .gal-media{aspect-ratio:4/5;flex:none}
}

/* ---- 3. BOLDER HERO ---- */
.hero{min-height:clamp(520px,72vh,700px)}
.hero-carousel .hero-copy h1{
  font-size:clamp(2.5rem,4.9vw,4.15rem);
  font-weight:800;letter-spacing:-.035em;line-height:1.02;max-width:20ch;
  text-shadow:0 2px 6px rgba(0,0,0,.5), 0 6px 40px rgba(0,0,0,.55);
}
.hero-carousel .hero-copy .lede{
  font-size:clamp(1.02rem,1.25vw,1.16rem);font-weight:500;
  color:rgba(255,255,255,.94);max-width:60ch;margin-top:20px;
}
.hero-carousel .hero-scrim{
  background:linear-gradient(180deg,rgba(8,22,14,.42) 0%,rgba(8,22,14,.22) 42%,rgba(6,18,11,.62) 100%);
}
.hero-slide{filter:brightness(1.12) saturate(1.06)}
.hero .cta-row{gap:12px;margin-top:26px}
/* Three routes in, like the reference site — keep them one rank apart. */
.hero .btn-solid{background:linear-gradient(180deg,#22874A,#14532D)}
.hero .btn-ghost{background:rgba(8,26,16,.5);border-color:rgba(255,255,255,.55)}

/* Carousel retimed for THREE slides. The old 4-slide delays (0/3/7/11 over a
   16s loop) left a ~4.7s window with every slide faded out and the flat ink
   background showing through. Even thirds, with the fade-out of one crossing
   the fade-in of the next. */
.hero-slide{animation-duration:15s}
.hero-slide:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2){animation-delay:5s}
.hero-slide:nth-child(3){animation-delay:10s}
@keyframes heroFade{0%{opacity:0}3%{opacity:1}30%{opacity:1}36%{opacity:0}100%{opacity:0}}

/* Gallery: three columns, and the flagship set closes the grid as a full-width
   split row. 12 + 3 = 15 divides 3 exactly; at two columns 12 + 2 = 14 divides
   2 exactly. Size order (smallest first) is preserved either way, and the
   entry-level set is no longer blown up to the largest tile on the page. */
.install-grid{grid-template-columns:repeat(3,1fr)}
.install-grid figure.gal-feature{grid-column:1 / -1;grid-row:auto}
.gal-feature>a{flex-direction:row;align-items:stretch}
.gal-feature .gal-media{
  flex:0 0 clamp(190px,26%,320px);aspect-ratio:4/5;
  box-shadow:inset -1px 0 0 rgba(22,33,27,.07);
}
.gal-feature figcaption{
  flex:1;justify-content:center;margin-top:0;
  padding:clamp(20px,2.6vw,38px);gap:9px;
}
.gal-feature figcaption b{font-size:clamp(1.1rem,1.5vw,1.4rem)}
.gal-feature figcaption span{font-size:1.06rem}
.gal-feature figcaption::after{
  content:"Built to your garden — supplied and installed";
  font-size:.8rem;font-weight:400;line-height:1.5;color:var(--ink-soft);max-width:44ch;
}
@media (max-width:900px){
  .install-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .gal-feature>a{flex-direction:column}
  .gal-feature .gal-media{flex:none;aspect-ratio:4/5;box-shadow:inset 0 -1px 0 rgba(22,33,27,.07)}
}
@media (max-width:460px){
  .install-grid{grid-template-columns:1fr}
  .install-grid figure.gal-feature{grid-column:1 / -1}
}

/* =====================================================================
   PROCESS — four connected steps
   The reference site closes with a four-step installation journey; ours is
   numbered discs on a single hairline rail so the four read as one sequence
   rather than four detached boxes.
   ===================================================================== */
.sec-process{background:var(--cream-2)}
.steps{
  list-style:none;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,30px);
  margin-top:clamp(26px,3vw,42px);
  counter-reset:step;
}
/* the rail the discs sit on */
.steps::before{
  content:"";position:absolute;left:0;right:0;top:19px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(20,83,45,.22) 8%,rgba(20,83,45,.22) 92%,transparent);
}
.steps li{position:relative;padding-top:0;min-width:0}
.step-n{
  position:relative;z-index:1;
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--cream-2);
  box-shadow:inset 0 0 0 1.5px rgba(20,83,45,.28);
  color:var(--forest-2);
  font-size:.74rem;font-weight:700;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  transition:background .3s ease,color .3s ease,box-shadow .3s ease;
}
.steps li:hover .step-n{
  background:linear-gradient(180deg,var(--forest-2),var(--forest));color:#fff;
  box-shadow:0 1px 2px rgba(20,83,45,.3), 0 10px 20px -12px rgba(20,83,45,.8);
}
.steps b{
  display:block;margin-top:17px;
  font-size:1.02rem;font-weight:600;letter-spacing:-.01em;color:var(--forest-2);
}
.steps p{
  margin-top:6px;font-size:.92rem;line-height:1.58;color:var(--ink-soft);max-width:34ch;
}
@media (max-width:860px){
  .steps{grid-template-columns:1fr 1fr;row-gap:28px}
  .steps::before{display:none}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .steps li{display:grid;grid-template-columns:38px 1fr;column-gap:15px}
  .steps .step-n{grid-row:1/3}
  .steps b{margin-top:8px}
  .steps p{grid-column:2}
}

/* =====================================================================
   FIX — gallery feature row
   `.gal-feature>a` is (0,1,1); the base `.install-grid figure>a` is (0,1,2),
   so the base `flex-direction:column` won and the row layout never applied.
   With a column axis, `flex:0 0 clamp(190px,26%,320px)` sized the media's
   HEIGHT instead of its width: a 1000px-wide, 320px-tall strip with the
   contained photo floating in the middle of it.

   Rebuilt on grid so no axis is implied, and out-specified so it holds.
   ===================================================================== */
.install-grid figure.gal-feature>a{
  display:grid;grid-template-columns:clamp(200px,27%,320px) minmax(0,1fr);
  align-items:stretch;height:auto;
}
.install-grid figure.gal-feature .gal-media{
  flex:none;width:auto;height:100%;aspect-ratio:auto;
  min-height:clamp(220px,24vw,310px);
  box-shadow:inset -1px 0 0 rgba(22,33,27,.07);
}
.install-grid figure.gal-feature figcaption{
  margin-top:0;align-self:center;
  padding:clamp(20px,2.4vw,34px);gap:9px;
}
@media (max-width:640px){
  .install-grid figure.gal-feature>a{grid-template-columns:1fr}
  .install-grid figure.gal-feature .gal-media{
    aspect-ratio:4/5;height:auto;min-height:0;
    box-shadow:inset 0 -1px 0 rgba(22,33,27,.07);
  }
}

/* Stale feature-tile aspect ratios from the earlier masonry-era layout.
   `.install-grid figure.gal-feature` (0,2,2) beats `.install-grid figure`
   (0,1,2), so `aspect-ratio:16/9` at <=900 and `16/10` at <=560 still won and
   squashed the feature card on tablet and phone. Cleared at equal
   specificity, later in the file. */
@media (max-width:900px){
  .install-grid figure.gal-feature{aspect-ratio:auto;grid-column:1 / -1;grid-row:auto}
}
@media (max-width:560px){
  .install-grid figure.gal-feature{aspect-ratio:auto;grid-column:1 / -1}
}

/* =====================================================================
   HOMEPAGE REBUILT TO THE REFERENCE BLUEPRINT
   Hero(4 CTAs) > Why Choose(4 cards) > Category grid > two split sections
   with tick lists > full range + prices > priced-direct panel > 4-step
   process > final CTA > footer.
   ===================================================================== */

/* ---- Hero: four routes in, one rank apart ---- */
.hero-cta{gap:10px}
.hero-cta .btn{padding:12px 20px;font-size:.9rem}
@media (max-width:560px){.hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .hero-cta .btn{width:100%}}

/* ---- WHY CHOOSE — four cards ---- */
.sec-why{background:var(--paper)}
.why-grid{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,20px);margin-top:clamp(20px,2.4vw,32px);
}
.why-card{
  position:relative;overflow:hidden;
  padding:clamp(20px,2vw,28px);
  border-radius:var(--r);background:var(--cream);
  box-shadow:var(--ring), var(--shadow-sm);
  transition:box-shadow .32s cubic-bezier(.2,.7,.3,1), transform .32s cubic-bezier(.2,.7,.3,1);
}
.why-card:hover{transform:translateY(-3px);box-shadow:var(--ring-hover), var(--shadow)}
.why-card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--accent),rgba(53,178,77,0));
}
.why-n{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  color:rgba(22,33,27,.3);font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.why-card b{display:block;font-size:1.02rem;font-weight:600;letter-spacing:-.01em;color:var(--forest-2)}
.why-card p{margin-top:6px;font-size:.93rem;line-height:1.58;color:var(--ink-soft)}
@media (max-width:900px){.why-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.why-grid{grid-template-columns:1fr}}

/* ---- CATEGORY GRID — now five ---- */
.make-grid-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.make-grid-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.make-grid-5{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.make-grid-5{grid-template-columns:1fr}}

/* ---- SPLIT SECTIONS — image one side, copy + ticks + CTA the other ---- */
.sec-split-alt{background:var(--cream-2)}
.split{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(26px,3.4vw,60px);align-items:center;
}
.split-rev .split-media{order:2}
.split-media{
  position:relative;align-self:stretch;min-height:clamp(300px,32vw,440px);
  border-radius:clamp(18px,1.8vw,24px);
  background-size:contain;background-repeat:no-repeat;background-position:center;
  background-color:var(--cream-2);
  box-shadow:var(--ring), var(--shadow);
}
.sec-split-alt .split-media{background-color:var(--paper)}
.split-media::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -80px 90px -70px rgba(9,30,18,.42);
}
.split-copy h2{margin-top:0}
.split-lead{
  margin-top:14px;font-size:1rem;line-height:1.68;color:var(--ink-soft);max-width:56ch;
}
.ticks{list-style:none;display:grid;gap:0;margin:22px 0 24px;max-width:52ch}
.ticks li{
  position:relative;padding:12px 0 12px 32px;
  font-size:.96rem;line-height:1.5;color:var(--ink);
  border-top:1px solid var(--line);
}
.ticks li:last-child{border-bottom:1px solid var(--line)}
.ticks li::before{
  content:"";position:absolute;left:4px;top:50%;margin-top:-5px;
  width:11px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.split-copy .cta-row{margin-top:0}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:24px}
  .split-rev .split-media{order:0}
  .split-media{min-height:0;aspect-ratio:4/3}
}

/* A ghost button on a pale section needs ink, not white-on-white. */
.btn-quiet{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-quiet:hover{background:var(--paper);border-color:rgba(20,83,45,.3);color:var(--forest)}

/* =====================================================================
   NO DEAD SPACE IN A TILE, AND NOTHING CROPPED
   `contain` shows the whole photo, which is what was asked for, but the two
   landscape shots (p3 1.355, p12 1.333) left 41% and 40% of a 4:5 tile as
   flat cream bar, and p5 (0.563) left 30%. Cropping to fill would cut the
   sides off a wide swing frame, so instead each tile carries a scaled,
   blurred copy of its own photo behind the sharp one. Full image, no bars.
   ===================================================================== */
.gal-media,.prod-media{
  position:relative;overflow:hidden;isolation:isolate;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.gal-media::before,.prod-media::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:inherit;background-size:cover;background-position:center;
  filter:blur(24px) saturate(1.3) brightness(.97);
  transform:scale(1.28);
}
/* A light frosted veil so the sharp photo reads as sitting ON the blur
   rather than dissolving into it. */
.gal-media::after,.prod-media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(252,251,249,.42) 0%,rgba(248,247,243,.3) 100%);
  box-shadow:inset 0 0 44px rgba(22,33,27,.07);
}
.install-grid img,.prod-media img{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 10px 24px rgba(14,40,24,.22));
}
.prod-media .prod-tag{z-index:3}
/* the figure's own hover veil has to stay above the tile layers */
.install-grid figure::after{z-index:4}

/* =====================================================================
   VERTICAL RHYTHM — one gap, used everywhere
   The closing CTA sat in a section carrying an inline `padding-top:0` while
   `.sec` still supplied a full padding-bottom, so the white gap above the
   panel was 0px and the gap below it was up to 68px. `.sec-mission` had the
   same split (6px top / 50px bottom). One token, applied symmetrically.
   ===================================================================== */
:root{--gap-sec:clamp(44px,4.8vw,72px)}
.sec{padding:var(--gap-sec) 0}
.sec-mission,.sec-band{padding-top:var(--gap-sec);padding-bottom:var(--gap-sec)}

/* =====================================================================
   PROCESS — connected journey, rebuilt
   The old version was a full-width rail that ran on past step 04 into empty
   space, four hollow outline discs and loose text: a wireframe. Now each step
   is a real card, the discs are filled and lit, the watermark numeral gives
   depth, and the connector lives in the grid gap so it can only ever run
   BETWEEN steps — never off the end.
   ===================================================================== */
.sec-process{background:var(--cream-2)}
.steps{
  --step-gap:clamp(14px,1.7vw,26px);
  list-style:none;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--step-gap);
  margin-top:clamp(24px,3vw,40px);
  counter-reset:step;
}
.steps::before{content:none}            /* kill the old dangling full-width rail */

.step{position:relative;min-width:0}

/* the connector, drawn in the gap — never after the last step */
.step:not(:last-child)::after{
  content:"";position:absolute;z-index:0;
  top:calc(26px + 21px);height:1px;
  right:calc(-1 * var(--step-gap));width:var(--step-gap);
  background:linear-gradient(90deg,rgba(20,83,45,.34),rgba(20,83,45,.14));
}
.step:not(:last-child)::before{
  content:"";position:absolute;z-index:1;
  top:calc(26px + 21px - 3.5px);right:calc(-1 * var(--step-gap) + 1px);
  width:6px;height:6px;
  border-top:1.5px solid rgba(20,83,45,.42);
  border-right:1.5px solid rgba(20,83,45,.42);
  transform:rotate(45deg);
}

.step-card{
  position:relative;overflow:hidden;height:100%;
  background:var(--paper);
  border-radius:var(--r);
  padding:26px 22px 26px;
  box-shadow:var(--ring), var(--shadow-sm);
  transition:transform .36s cubic-bezier(.2,.7,.3,1), box-shadow .36s cubic-bezier(.2,.7,.3,1);
}
.step:hover .step-card{transform:translateY(-4px);box-shadow:var(--ring-hover), var(--shadow)}

/* accent hairline along the top edge that draws across on hover */
.step-card::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:42px;
  background:linear-gradient(90deg,var(--accent),rgba(53,178,77,0));
  transition:width .55s cubic-bezier(.2,.7,.3,1);
}
.step:hover .step-card::before{width:100%}

/* oversized ghosted numeral for depth */
.step-card::after{
  content:counter(step,decimal-leading-zero);counter-increment:step;
  position:absolute;right:12px;bottom:-18px;
  font-size:4.4rem;font-weight:800;letter-spacing:-.05em;line-height:1;
  color:rgba(20,83,45,.055);
  font-variant-numeric:tabular-nums;pointer-events:none;
}

/* filled, lit disc — not a hollow outline */
.step-n{
  position:relative;z-index:2;
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:linear-gradient(180deg,var(--forest-2),var(--forest));
  color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),
             0 1px 2px rgba(20,83,45,.3),
             0 10px 22px -12px rgba(20,83,45,.9);
  transition:box-shadow .36s ease, transform .36s ease;
}
.step:hover .step-n{
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),
             0 2px 4px rgba(20,83,45,.32),
             0 14px 28px -12px rgba(20,83,45,1);
}
.steps b{
  display:block;margin-top:18px;position:relative;z-index:1;
  font-size:1.04rem;font-weight:600;letter-spacing:-.012em;color:var(--forest-2);
}
.steps p{
  margin-top:7px;position:relative;z-index:1;
  font-size:.93rem;line-height:1.6;color:var(--ink-soft);
}

@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
  .step:not(:last-child)::after,
  .step:not(:last-child)::before{display:none}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  /* reset the legacy li grid (38px 1fr) that squished the new .step-card
     into a 40px sliver — the current markup wraps everything in .step-card */
  .steps li{display:block;grid-template-columns:none;column-gap:0}
  .step-card{padding:22px 20px}
  .step-card::after{font-size:3.6rem;bottom:-14px}
}

/* =====================================================================
   CLIENT ROUND 3
   ===================================================================== */

/* ---- Price bubble now carries "supplied and installed" ----
   NOTE the background is opaque. A translucent `rgba(24,107,57,.10)` pill
   computes to luminance .112 against text at .065 — ratio 1.41, under the
   1.45 floor of the contrast guard in each page, which would flip the price
   to white and make it vanish on the pale pill. */
.prod-body .prod-price{
  display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;
  align-self:flex-start;margin-top:2px;
  padding:9px 16px;border-radius:100px;
  background:#E8F4EC;
  box-shadow:inset 0 0 0 1px rgba(20,83,45,.16);
  font-size:.97rem;font-weight:700;color:var(--forest);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  line-height:1.25;white-space:normal;
}
.prod-body .prod-price::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  flex:none;align-self:center;
}
.prod-body .prod-price em{
  font-style:normal;font-weight:500;font-size:.79rem;letter-spacing:.01em;
  color:var(--forest-2);
}
.prod-note{display:none}

/* ---- Hero: one static shot, whole image visible ----
   The element's own background is suppressed (`background-size:0`) and the
   photo is painted twice by its pseudos instead: a blurred cover layer fills
   the frame edge to edge, a sharp `contain` layer sits on top so the full
   playset is visible with nothing cropped and no flat bars. */
.hero-still .hero-slides{background:#0B2E19}
.hero-still .hero-slide{
  animation:none !important;
  opacity:1;filter:none;
  background-size:0 0;
}
.hero-still .hero-slide::before,
.hero-still .hero-slide::after{
  content:"";position:absolute;inset:0;background-repeat:no-repeat;
  background-image:inherit;background-position:center;
}
.hero-still .hero-slide::before{
  z-index:0;background-size:cover;
  filter:blur(40px) saturate(1.25) brightness(.6);
  transform:scale(1.3);
}
.hero-still .hero-slide::after{
  z-index:1;background-size:contain;
  filter:brightness(1.06) saturate(1.04);
}
.hero-still .hero-scrim{
  background:linear-gradient(180deg,rgba(6,20,12,.5) 0%,rgba(6,20,12,.26) 40%,rgba(5,17,10,.68) 100%);
}
@media (prefers-reduced-motion:no-preference){
  .hero-still .hero-slide{transition:none}
}

/* =====================================================================
   HERO — full bleed
   The previous version painted the photo twice (blurred cover behind, sharp
   `contain` on top) so the whole image was visible with nothing cropped. In
   practice that pinned the photo into a centre column with heavy blurred
   pillars either side. Edge-to-edge wins: one cover layer, no pseudos.
   ===================================================================== */
.hero-still .hero-slide::before,
.hero-still .hero-slide::after{content:none !important}
.hero-still .hero-slide{
  animation:none !important;opacity:1;
  background-size:cover;
  background-position:center 52%;
  background-repeat:no-repeat;
  filter:brightness(1.08) saturate(1.05);
}
.hero-still .hero-slides{background:#0B2E19}
/* A shorter frame crops less out of a 1.33 landscape photo. */
.hero.hero-still{min-height:clamp(440px,62vh,600px)}
.hero-still .hero-in{padding-top:clamp(30px,4vh,52px);padding-bottom:clamp(30px,4vh,52px)}
.hero-still .hero-copy h1{font-size:clamp(2.2rem,4.2vw,3.5rem)}
.hero-still .hero-scrim{
  background:linear-gradient(180deg,rgba(6,20,12,.52) 0%,rgba(6,20,12,.3) 42%,rgba(5,17,10,.66) 100%);
}

/* =====================================================================
   HERO HEADLINE — scaled back up
   The previous pass shrank it to 3.5rem max to fit a shortened banner, which
   left the headline small and broken over three lines. Bigger type, a wider
   measure so a 62-character headline sets on two lines, and a taller frame
   to carry it.
   ===================================================================== */
.hero.hero-still{min-height:clamp(520px,74vh,720px)}
.hero-still .hero-in{padding-top:clamp(40px,6vh,72px);padding-bottom:clamp(40px,6vh,72px)}
.hero-still .hero-copy h1{
  font-size:clamp(2.5rem,5.4vw,4.6rem);
  font-weight:800;letter-spacing:-.035em;line-height:1.03;
  max-width:32ch;margin-inline:auto;
  text-shadow:0 2px 8px rgba(0,0,0,.55), 0 8px 44px rgba(0,0,0,.6);
}
.hero-still .hero-copy .lede{
  font-size:clamp(1.05rem,1.35vw,1.24rem);font-weight:500;
  max-width:62ch;margin-top:22px;
}
.hero-still .hero-cta{margin-top:30px}
.hero-still .hero-cta .btn{padding:14px 24px;font-size:.96rem}
@media (max-width:700px){
  .hero-still .hero-copy h1{font-size:clamp(2.1rem,8vw,2.9rem);max-width:20ch}
}

/* ============================================================
   HERO v2 — brighter image, high-contrast readable copy,
   playful accents. Appended last so it wins the cascade over
   the earlier hero-carousel + "brighten" theme layers.
   ============================================================ */
.hero-v2{min-height:clamp(600px,86vh,820px)}
.hero-v2 .hero-in{text-align:left}
.hero-v2 .hero-copy{max-width:660px;margin:0}

/* Sunny image: warm and punchy, held still (no ken-burns drift) */
.hero-v2 .hero-slide{
  filter:brightness(1.03) saturate(1.09) contrast(1.05);
  background-size:cover;
  background-position:center 42%;
  animation:none;opacity:1;
}

/* Scrim: dark and readable behind the copy on the left, opening up to
   show the sunny playset on the right, with a soft green wash rising
   from the base to seat the section on the page. */
.hero-v2 .hero-scrim{
  background:
    linear-gradient(90deg, rgba(9,20,13,.84) 0%, rgba(9,20,13,.64) 30%, rgba(12,26,16,.30) 56%, rgba(12,26,16,0) 82%),
    linear-gradient(0deg,  rgba(9,20,13,.58) 0%, rgba(9,20,13,0) 44%);
}

/* Eyebrow badge */
.hero-v2 .eyebrow{
  background:rgba(9,20,13,.58);border:1px solid rgba(255,255,255,.36);
  color:#fff;text-transform:uppercase;letter-spacing:.15em;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.hero-v2 .eyebrow .dot{background:#F5B93C;box-shadow:0 0 0 4px rgba(245,185,60,.3)}

/* Headline — bigger, tighter, with a warm gold squiggle accent */
.hero-v2 .hero-copy h1{
  font-size:clamp(2.55rem,5.6vw,4.5rem);line-height:1.02;letter-spacing:-.03em;
  max-width:15ch;font-weight:800;
  text-shadow:0 2px 16px rgba(0,0,0,.5),0 1px 44px rgba(0,0,0,.34);
}
.hero-v2 .squiggle{color:#F9D876}

.hero-v2 .hero-copy .lede{
  font-size:clamp(1.06rem,1.35vw,1.24rem);line-height:1.55;max-width:44ch;
  color:rgba(255,255,255,.94);margin-top:20px;
}

/* Trust chips with a green tick */
.hero-v2 .hero-chips{margin-top:26px;gap:10px}
.hero-v2 .hero-chips li{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(9,20,13,.58);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-weight:600;font-size:.84rem;padding:8px 15px 8px 12px;
  border-radius:100px;backdrop-filter:blur(4px);
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.hero-v2 .hero-chips li::before{
  content:"";width:17px;height:17px;flex:none;border-radius:50%;
  background:#35B24D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/11px;
}

/* CTAs a touch larger for presence */
.hero-v2 .hero-cta{margin-top:30px;gap:14px}
.hero-v2 .hero-cta .btn{padding:15px 28px;font-size:1rem}

@media (max-width:760px){
  .hero-v2{min-height:clamp(540px,82vh,700px)}
  .hero-v2 .hero-copy h1{font-size:clamp(2.15rem,8.5vw,3rem);max-width:18ch}
  .hero-v2 .hero-scrim{
    background:
      linear-gradient(90deg, rgba(9,20,13,.82) 0%, rgba(9,20,13,.66) 46%, rgba(12,26,16,.46) 100%),
      linear-gradient(0deg,  rgba(9,20,13,.6) 0%, rgba(9,20,13,0) 52%);
  }
}

/* =====================================================================
   HERO — larger frame, photo full-bleed  (2026-09-07)
   The frame is taller than the original (533px -> ~720px at 1280), which
   already crops less off a 1.33 landscape photo. The slide stays on
   `cover` so the image spans the full width edge to edge; the focal
   point is nudged up so the top of the playset stays in frame.
   Appended last so it beats the earlier hero-carousel / hero-still /
   hero-v2 layers.
   ===================================================================== */
.hero.hero-still.hero-v2{min-height:clamp(620px,90vh,940px)}

.hero-still .hero-slides{background:#0B2E19}
.hero-still .hero-slide{
  background-image:url('images/hero-playset-hd.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 22%;
}

/* Mobile gets the portrait shot of the same playset — a landscape photo in a
   tall narrow frame has to crop the sides away to fill it. Set here rather
   than inline in the HTML so this media query can win. */
@media (max-width:760px){
  .hero.hero-still.hero-v2{min-height:clamp(560px,84vh,760px)}
  .hero-still .hero-slide{
    background-image:url('images/hero-playset-mobile.jpg');
    background-position:center center;
  }
}