/* ============================================================
   Kinward — home page
   Palette + type sampled from Kinward_storyboard001
   ============================================================ */

@font-face{
  font-family:'Voyage';
  src:url('../assets/fonts/Voyage-Black.woff2') format('woff2'),
      url('../assets/fonts/Voyage-Black.woff') format('woff');
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Larken';
  src:url('../assets/fonts/Larken-Light.woff2') format('woff2'),
      url('../assets/fonts/Larken-Light.otf') format('opentype');
  font-weight:300; font-style:normal; font-display:swap;
}

:root{
  --frame:#f2e9e0;          /* fixed page frame        */
  --frame-w:14px;
  --ink:#241c11;            /* header / near-black     */
  --olive:#55503c;          /* headline + body ink     */
  --olive-soft:#5c5747;
  --cream:#f2e8da;          /* display cream           */
  --hero-cream:#f4ecdd;
  --s2-bg:#eddacb;
  --s3-left:#dddad3;
  --s4-bg:#ebdcbb;
  --s5-bg:#e0d4be;
  --s6-right:#e0d4be;      /* client 4 Aug: match the section above (s5) */
  --s8-bg:#f0dac2;
  --sage:#927f74;          /* client 31 Jul (was #a6a48f) */
  --foot:#554c47;          /* client 31 Jul (was #828073) */
  --hair:rgba(36,28,17,.55);

  --head-h:72px;
  --pad-x:clamp(24px, 3.2vw, 54px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
/* pinned (translated) sections must never extend the document's
   scrollable area past the last section's bottom edge */
main{ position:relative; overflow:clip; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:'Larken', Georgia, serif;
  font-weight:300;
  color:var(--olive);
  background:var(--frame);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img, video{ display:block; max-width:100%; height:auto; }
.mask-img .mi img{ height:100%; }
ul{ list-style:none; }
a{ color:inherit; text-decoration:none; }
.ul{
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
}
a:focus-visible, button:focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
  border-radius:2px;
}

/* ---------- fixed cream page frame ---------- */
.page-frame{
  position:fixed; inset:0; z-index:60;
  border:var(--frame-w) solid var(--frame);
  pointer-events:none;
}

/* ---------- site menu overlay ---------- */
.site-menu{
  position:fixed; inset:0;
  z-index:55;                 /* above the header, beneath the cream frame */
  background:#4a443c;
  color:var(--cream);
  display:flex; align-items:center;
  pointer-events:none;
  visibility:hidden;
}
.site-menu.open{ pointer-events:auto; }
.menu-close{
  position:absolute;
  top:calc(var(--frame-w) + 18px);
  right:calc(var(--frame-w) + var(--pad-x));
  background:none; border:0; cursor:pointer;
  font:inherit; color:inherit;
  font-size:clamp(16px, 1.25vw, 24px);
  padding:.4em 0;
}
.menu-nav{
  display:flex; flex-direction:column;
  margin-left:24.5%; flex:1;   /* hairlines run to the right edge, per mock */
}
.menu-link{
  font-size:clamp(34px, 4.2vw, 76px);
  font-weight:300; line-height:1.12;
  padding:.28em 0 .26em;
  border-bottom:1px solid rgba(242,232,218,.5);
  opacity:.85;
  transition:opacity .35s ease;
}
.menu-link .mask > .mi-m{ display:block; }
.js .menu-link .mask > .mi-m{ transform:translateY(110%); }
/* rollover: the pointed-at title brightens while the others diminish */
.menu-nav:hover .menu-link, .menu-nav:focus-within .menu-link{ opacity:.45; }
.menu-nav:hover .menu-link:hover,
.menu-nav:focus-within .menu-link:focus-visible{ opacity:1; }
.menu-link[aria-current]{ opacity:.35; pointer-events:none; }

/* ---------- header ---------- */
.site-head{
  position:fixed;
  top:var(--frame-w);
  left:var(--frame-w); right:var(--frame-w);
  z-index:50;
  height:var(--head-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad-x);
  color:var(--ink);
  border-bottom:1px solid var(--hair);
  transition:color .5s ease, border-color .5s ease;
}
.site-head.head--cream{ color:var(--cream); border-color:rgba(242,232,218,.5); }
/* legibility scrim once content scrolls beneath the header */
.site-head.head--scrolled{
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  background:rgba(242,233,224,.5);
}
.site-head.head--scrolled.head--cream{ background:rgba(38,33,24,.28); }
/* Book a call: no resting underline — same rollover as the nav items */
.head-link{
  font-size:1rem;
  padding:.35em 0;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.head-link:hover{ border-bottom-color:currentColor; }
.wordmark{
  position:absolute; left:50%; transform:translateX(-50%);
  font-family:'Voyage', serif;
  font-size:1.7rem;
  letter-spacing:.01em;
}
/* persistent top navigation (client 4 Aug — replaces the overlay menu
   on desktop; the burger + overlay remain the small-screen fallback) */
.head-nav{ display:flex; gap:clamp(16px, 2vw, 38px); font-size:.98rem; margin-left:auto; }
.head-nav a{
  padding:.35em 0;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, opacity .3s ease;
}
.head-nav a:hover{ border-bottom-color:currentColor; }
.head-nav a[aria-current]{ border-bottom-color:currentColor; opacity:.75; pointer-events:none; }
@media (max-width:899.9px){ .head-nav{ display:none; } }
.menu-btn{
  background:none; border:0; cursor:pointer;
  display:flex; flex-direction:column; gap:5px;
  padding:8px 0;
  color:inherit;
}
.menu-btn span{
  display:block; width:56px; height:1.5px;
  background:currentColor;
  transition:background .5s ease;
}
/* desktop: the persistent nav replaces the burger + overlay */
@media (min-width:900px){ .menu-btn{ display:none; } }

/* ---------- shared section + mask machinery ---------- */
.sec{
  position:relative;
  min-height:100vh;
  padding:calc(var(--head-h) + var(--frame-w)) 0 0;
  overflow:clip;
}
/* mobile browser chrome eats vh — size to the SMALL viewport so
   bottom-anchored elements (scroll arrow) stay above the fold */
@supports (min-height:100svh){ .sec{ min-height:100svh; } }
.hero{ z-index:1; }
.sec:not(.hero){ z-index:2; }
/* desktop conveyor pacing: transparent flow spacers per transition —
   invisible, the pinned previous section sits fullscreen beneath them */
.conv-gap{ height:var(--travel-gap, 0px); pointer-events:none; }

/* mobile-only line breaks (client 5 Aug typesetting) */
.br-m{ display:none; }

/* mask = clip container; .mi = inner element that pours up */
.mask{ display:block; overflow:hidden; }
.mask > .mi{ display:block; }
.mask-img{ overflow:hidden; }
.mask-img .mi{ display:block; height:100%; }
.mask-img .mi img{ width:100%; height:100%; object-fit:cover; }
/* start state only when JS is running */
.js .mask > .mi, .js .mask-img > .mi{ transform:translateY(110%); }
.js .reveals-done .mi{ transform:none; }
.no-pointer a, .no-pointer button{ pointer-events:none; }

/* ============ 01 · hero ============ */
/* client 4 Aug: "Warm Growth" reduced to a lowercase display accent
   (like the wordmark); the "I help…" statement is now the headline,
   so what Tash does is the first thing the landing page says. Photo
   removed until professional shots are ready.                        */
.hero{ display:flex; flex-direction:column; }
.hero-bg{ position:absolute; inset:0; background:#cfc4b5; }
.hero-video{ width:100%; height:100%; object-fit:cover; }
.hero-stage{
  position:relative; flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:0 var(--pad-x) 10vh;
}
.hero-mark{
  font-family:'Voyage', serif;
  font-weight:900;
  color:var(--olive);
  font-size:clamp(34px, 4.4vw, 82px);
  line-height:1;
}
/* Voyage glyphs overshoot a tight line box; extend the reveal mask
   upward so tops are never clipped — padding grows the mask, the
   negative margin keeps the type exactly where it was */
.hero-mark.mask, .close-l.mask{ padding-top:.18em; margin-top:-.18em; }
.hero-head{
  margin-top:5.5vh;
  font-weight:300;
  font-size:clamp(30px, 3.5vw, 64px);
  line-height:1.16;
  color:var(--olive);
  max-width:20em;
}
/* two typeset versions — fixed breaks on desktop, natural flow on
   mobile (client 6 Aug) */
.hero-head--m{ display:none; }
.hero-arrow{
  position:absolute; bottom:9vh; left:50%; transform:translateX(-50%);
  color:var(--olive);
}

/* ============ 02 · I help you build ============ */
.s2{
  background:linear-gradient(160deg, #f2e3d6 0%, var(--s2-bg) 55%, #ecd5c0 100%);
  display:grid;
  grid-template-columns: 44% 56%;
}
.s2-media{
  grid-column:2; grid-row:1;
  height:calc(100vh - var(--head-h) - var(--frame-w));
}
.s2-left{
  grid-column:1; grid-row:1;
  padding:4vh var(--pad-x) 7vh;
  display:flex; flex-direction:column; justify-content:space-between;
}
.s2-top{ display:flex; align-items:flex-start; }
.s2-kicker{ font-size:1.02rem; max-width:34em; padding-top:2vh; }
.s2-head{
  font-size:clamp(44px, 4.6vw, 84px);
  line-height:1.06;
  font-weight:300;
  color:var(--olive);
}

/* ============ 03 · slowing down ============ */
.s3{
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--s3-left);
  padding-top:0;
}
.s3-copy{
  display:flex; align-items:center;
  padding:calc(var(--head-h) + 6vh) var(--pad-x) 8vh;
}
.s3-body{ max-width:36em; font-size:1.05rem; }
.s3-body p + p{ margin-top:1.2em; }
.s3-cta{ margin-top:2.4em; }
.s3-media{ position:relative; overflow:hidden; }
.s3-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.s3-head{
  position:relative;
  text-align:right;
  /* client 5 Aug: visual gap above the type (below the header hairline)
     = visual gap to the right frame edge. The 0.17em subtracts Larken's
     ascent whitespace so the INK, not the line box, sets the gap. */
  padding:calc(var(--head-h) + var(--pad-x) - 0.17em) var(--pad-x) 0;
  font-size:clamp(40px, 4.4vw, 78px);
  line-height:1.08; font-weight:300;
  color:#f2e8e6;
}

/* ============ 04 · empathy before tactics ============ */
.s4{ background:var(--s4-bg); }
.s4-inner{ position:relative; min-height:calc(100vh - var(--head-h) - var(--frame-w)); }
.s4-media{
  position:absolute; left:25%; top:8vh; bottom:0; width:50%;
}
.s4-head{
  position:absolute; left:var(--pad-x); top:38%;
  z-index:2;
  font-size:clamp(48px, 5.4vw, 96px);
  line-height:1.04; font-weight:300;
  color:#6b6852;
}
.s4-body{
  position:absolute; right:var(--pad-x); top:41%;
  width:min(38%, 34em);
  font-size:1.02rem; z-index:2;
}
.s4-body p + p{ margin-top:1.2em; }

/* ============ 05 · where I'm at my best ============ */
.s5{ background:var(--s5-bg); }
.s5-head{
  position:absolute; left:var(--pad-x); top:46%;
  font-size:clamp(40px, 4.6vw, 82px);
  font-weight:300; line-height:1.05;
  max-width:46%;
}
.s5-right{
  margin-left:51%;
  padding:8vh var(--pad-x) 10vh 0;
  max-width:46em;
}
.s5-intro{ font-size:1.02rem; }
.s5-intro + .s5-intro{ margin-top:1.4em; }
.s5-list{ margin-top:2.2em; }
.s5-list li{ border-bottom:1px solid rgba(85,80,60,.5); }
.s5-list .mi{ display:flex; gap:.6em; padding:.85em 0; font-size:1.02rem; }
.s5-list strong{ font-weight:300; white-space:nowrap; }
.s5-list em{ font-style:normal; }

/* ============ 06 · are we a fit / three ways ============ */
/* layout per client mock (30 Jul): the right headline's top hangs from
   the bottom of the left body copy — grid row 1 is sized by the left
   column's content, the right column starts in row 2 */
.s6{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto 1fr;
  padding-top:0;
  background:var(--s6-right);
}
.s6-bg{
  position:absolute; top:0; bottom:0; left:0; width:50%;
  background:#4b4530 url('../assets/img/plant_shadow.jpg') center/cover no-repeat;
}
.s6-fit{
  grid-column:1; grid-row:1;
  position:relative;
  color:#efe3d0;
  padding:calc(var(--head-h) + 7vh) var(--pad-x) 3vh;
}
.s6-fit-head{
  font-size:clamp(42px, 4.4vw, 78px);
  font-weight:300; line-height:1.05;
}
.s6-fit-body{ margin-top:3.5vh; max-width:32em; font-size:1.02rem; }
.s6-fit-body p + p{ margin-top:1.2em; }
.s6-ways{
  grid-column:2; grid-row:2;
  position:relative;
  display:flex; flex-direction:column;
  padding:0 var(--pad-x) 5vh;
}
.s6-ways-head{
  font-size:clamp(42px, 4.6vw, 82px);
  font-weight:300; line-height:1.06;
}
.s6-ways-list{ margin-top:4.5vh; font-size:1.05rem; }
.s6-ways-list li + li{ margin-top:1.1em; }
/* right edge aligned with the header menu (sections are full-bleed,
   the header is inset by the page frame — hence the extra frame-w) */
.s6-cta{ margin-top:auto; padding-top:6vh; align-self:flex-end; margin-right:var(--frame-w); }

/* ============ 07 · kind words ============ */
.s7{ color:var(--cream); }
.s7-bg{ position:absolute; inset:0; background:#6e4530; }
.s7-video{ width:100%; height:100%; object-fit:cover; }
.s7-inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  padding:2vh var(--pad-x) 6vh;
  min-height:calc(100vh - var(--head-h) - var(--frame-w));
}
.s7-kicker{ font-size:1rem; }
.s7-logos{
  margin-top:4.5vh;
  display:flex; gap:clamp(28px, 6vw, 110px);
  align-items:center; flex-wrap:wrap; justify-content:center;
}
.s7-logos li{ display:flex; align-items:center; }
.logo-img{ width:auto; opacity:.95; }
.logo-sanctus{ height:22px; }
.logo-tyllr{ height:46px; }
.logo-ocushield{ height:27px; }
.logo-antidote{ height:48px; }
.logo-myndup{ height:15px; }
.logo-sapienx{ height:28px; }
.s7-head{
  margin-top:5vh;
  font-size:clamp(44px, 4.8vw, 84px);
  font-weight:300;
}
.car{ width:100%; margin-top:4.5vh; }
.car-viewport{ overflow:visible; touch-action:pan-y; }
.car-track{ user-select:none; -webkit-user-select:none; }
.car-track{
  display:flex; gap:clamp(18px, 2.4vw, 34px);
  transition:transform .65s cubic-bezier(.33,1,.36,1);
  will-change:transform;
}
.car-card{
  flex:0 0 min(620px, 72vw);
}
.car-card blockquote{
  border:1px solid rgba(242,232,218,.75);
  border-radius:56px;
  padding:clamp(26px, 3.4vw, 44px) clamp(28px, 3.8vw, 52px);
  font-size:1.02rem;
  min-height:100%;
  transition:opacity .5s ease;
}
.car-card blockquote footer{ margin-top:1.4em; }
.car-card[aria-hidden="true"] blockquote{ opacity:.75; }
.car-card{ cursor:pointer; }
.car-dots{
  margin-top:3.5vh;
  display:flex; gap:14px; justify-content:center;
}
.car-dots button{
  width:11px; height:11px; border-radius:50%;
  border:1px solid var(--cream);
  background:transparent; cursor:pointer; padding:0;
}
.car-dots button[aria-selected="true"]{ background:var(--cream); }

/* ============ 08 · mission ============ */
/* client 4 Aug pm: the supplied interior image (section08_002) sits
   behind "Work is where we spend most of our lives…" */
.s8{
  background:#cbb69d url('../assets/img/s8_bg.jpg') no-repeat;
  /* client 5 Aug: image composition shifted 100px left */
  background-position:calc(50% - 100px) center;
  background-size:cover;
  display:flex;
}
.s8-inner{
  margin:auto; text-align:center;
  padding:4vh var(--pad-x) 8vh;
}
.s8-head{
  margin-top:7vh;
  /* sized so "…It matters to me" holds on one line (client 5 Aug break) */
  font-size:clamp(28px, 3.3vw, 58px);
  font-weight:300; line-height:1.18;
  color:#f0e7d3;
}
.s8-cta{ margin-top:6vh; font-size:1rem; color:#ece2cc; }
/* two typeset versions of the mission headline — breaks differ per
   breakpoint (client 6 Aug) */
.s8-head--m{ display:none; }

/* ============ 09 · close + footer ============ */
.close{
  background:var(--sage);
  color:var(--cream);
  display:flex; flex-direction:column;
  padding-bottom:0;
}
/* home close (client 4 Aug): photo removed, away from the grey into the
   pinky/orange family of section two; headline in the same olive as
   "Three ways to work with me" */
.close--warm{
  background:linear-gradient(160deg, #f2e0cf 0%, var(--s2-bg) 50%, #e9cdb2 100%);
  color:var(--olive);
}
.close--warm .close-head{ color:var(--olive); }
.close-stage{ position:relative; flex:1; min-height:72vh; }
.close-head{
  font-family:'Voyage', serif; font-weight:900;
  color:#efe7da;
  font-size:clamp(52px, 8.2vw, 150px);
  line-height:.9;
}
/* lowercase display type has descenders (g, y) whose swash tails
   overflow the tight line box — grow the inner element so the reveal
   mask never crops them (the mask's own padding-top already covers the
   cap overshoot). The padding must stay UNcompensated on the inner
   element: a negative margin here pulls the mask's clip edge back up
   and re-crops the tails. Layout is compensated on the mask instead. */
.close-l .mi, .hero-mark .mi{ padding-bottom:.3em; }
.hero-mark.mask{ margin-bottom:-.3em; }
.close-l{ position:absolute; }
/* client 5 Aug: "Let's get you" sits just above "in the room" */
.close-l1{ top:calc(48% - 1.12em); left:15%; z-index:1; }
.close-l2{ top:48%; right:12%; z-index:3; }
.close-cta{
  position:absolute; top:80%; left:0; right:0;
  text-align:center; font-size:1rem;
}
.site-foot{
  position:relative;
  background:var(--foot);
  color:var(--cream);
  min-height:120px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad-x);
  font-size:.98rem;
}
.foot-mark{
  position:absolute; left:50%; transform:translateX(-50%);
  font-family:'Voyage', serif; font-size:1.6rem;
}
.foot-copy{ display:flex; flex-direction:column; align-items:flex-end; gap:.45em; text-align:right; }
.foot-credit{ font-size:.85rem; opacity:.9; }

/* ============================================================
   What is Warm Growth? page
   ============================================================ */

/* ---- WG 01 · intro ---- */
.wg-s1{
  background:#464744 url('../assets/img/wg_s1.jpg') center/cover no-repeat;
  color:#e9e1d1;
}
.wg-s1-inner{
  min-height:calc(100vh - var(--head-h) - var(--frame-w));
  padding:6vh var(--pad-x) 8vh 37.5%;
}
.wg-s1-head{
  font-size:clamp(44px, 5.2vw, 100px);
  font-weight:300; line-height:1.08;
  color:#f2ead9;
  /* left-aligned over the body copy (client 1 Aug), same height */
  text-align:left;
  margin-top:8vh;
}
.wg-s1-body{ margin-top:14vh; max-width:52em; font-size:1.05rem; }
/* client 17 Aug: the copy block sits vertically centred in the
   section — equal space above and below (was: pushed 200px up) */
@media (min-width:900px){
  .wg-s1-inner{
    display:flex; flex-direction:column; justify-content:center;
    padding-top:0; padding-bottom:0;
  }
  .wg-s1-head{ margin-top:0; }
  .wg-s1-body{ margin-top:7vh; }
}
.wg-s1-body p + p{ margin-top:1.2em; }

/* ---- WG 02 · a three part process ---- */
.wg-s2{ background:#dacec0; color:#5d5949; }
.wg-s2-head{
  position:absolute; left:var(--pad-x); top:47%;
  font-size:clamp(40px, 4.7vw, 90px);
  font-weight:300; line-height:1.12;
}
.wg-proc{
  list-style:none;
  margin-left:40.5%;
  padding:6vh var(--pad-x) 6vh 0;
}
.wg-row{
  display:grid;
  grid-template-columns:clamp(140px, 15vw, 300px) 1fr;
  padding:4.5vh 0;
}
.wg-row + .wg-row{ border-top:1px solid rgba(66,60,45,.75); }
.wg-num .mi{
  font-size:clamp(70px, 6.8vw, 130px);
  line-height:.9;
}
.wg-row-body{ font-size:1.02rem; padding-top:.4em; }
.wg-label{ margin-bottom:1.2em; }
.wg-row-body p + p{ margin-top:1.2em; }
.wg-levers{ margin:1.2em 0 1.2em 2em; }
.wg-s2-media{
  position:absolute; left:var(--frame-w); bottom:0;
  width:clamp(200px, 20vw, 385px);
  aspect-ratio:393/266;
}

/* ---- WG 03 · three ways to work together ---- */
.wg-s3{
  background:#d5c9bb; color:#5d5949;
  display:flex; flex-direction:column;
}
.wg-s3-head{
  margin-top:4vh;
  text-align:center;
  font-size:clamp(42px, 5.4vw, 104px);
  font-weight:300; line-height:1.08;
}
.wg-cols{
  display:grid; grid-template-columns:1fr 1fr 1fr;
  margin-top:6.5vh;
  padding:0 var(--pad-x);
}
.wg-col{ padding:0 clamp(18px, 2.6vw, 50px); font-size:1.02rem; }
.wg-col:first-child{ padding-left:0; }
.wg-col + .wg-col{ border-left:1px solid rgba(66,60,45,.75); }
.wg-col-num .mi{
  font-size:clamp(64px, 5.8vw, 110px);
  line-height:1;
  font-weight:300;
}
.wg-col-label{
  font-size:clamp(26px, 2.2vw, 42px);
  font-weight:300;
  margin:.35em 0 .8em;
}
.wg-col p + p{ margin-top:1.2em; }
.wg-cta{ text-align:center; margin:auto 0 4.5vh; }
/* client 4 Aug pm: everything except Book a call up 50px — the headline's
   rise is capped at the header line so it never tucks under the scrim */
@media (min-width:900px){
  .wg-s3-head{ margin-top:max(0px, calc(4vh - 50px)); }
  .wg-cols{ margin-top:max(2vh, calc(6.5vh - 14px)); }
}

/* ============================================================
   Coaching page
   ============================================================ */

/* ---- CO 01 · coaching intro ---- */
.co-s1{ color:#ece4d4; }
.co-s1-bg{ position:absolute; inset:0; background:#4a4133; }
.co-s1-bg video{ width:100%; height:100%; object-fit:cover; }
.co-s1-inner{
  position:relative;
  min-height:calc(100vh - var(--head-h) - var(--frame-w));
  padding:5vh var(--pad-x) 7vh 54%;
}
.co-s1-head{
  font-size:clamp(44px, 5vw, 96px);
  font-weight:300; line-height:1.05;
  color:#f2ead9;
  margin-top:5vh;
}
.co-s1-body{ margin-top:6vh; font-size:1.05rem; }
.co-s1-body p + p{ margin-top:1.2em; }
.co-s1-sub .mi{
  font-size:clamp(26px, 2.4vw, 46px);
  line-height:1.2;
}
.co-s1-sub{ margin:5vh 0 4.5vh !important; }

/* ---- CO 02 · how it works ---- */
.co-s2{ background:#f2e3cd; color:#5d5949; text-align:center; }
.co-s2-head{
  margin-top:8vh;
  font-size:clamp(44px, 5.4vw, 104px);
  font-weight:300; line-height:1.05;
}
.co-s2-sub{ margin-top:3vh; }
.co-s2-sub .mi{ font-size:clamp(26px, 2.5vw, 48px); line-height:1.2; }
.co-s2-cols{
  /* columns sized to their text and centred as a block, so the space
     left and right of the pair is equal (client 1 Aug) */
  display:grid; grid-template-columns:max-content max-content;
  justify-content:center;
  gap:clamp(30px, 6vw, 120px);
  margin:6vh auto 0;
  padding:0 var(--pad-x) 16vh;
  text-align:left; font-size:1.02rem;
}
.co-s2-cols p + p{ margin-top:1.2em; }
/* flowing paragraph (client 6 Aug): no fixed breaks — the max-width
   keeps the desktop max-content column from swallowing the whole line */
.co-s2-flow{ max-width:28em; }
.co-s2-strip{
  position:absolute; left:0; right:0; bottom:0;
  height:clamp(80px, 13vh, 141px);
}

/* ---- CO 03 · what changes? ---- */
.co-s3{ background:#ddd0bf; color:#5d5949; }
.co-s3-right{ padding:14vh var(--pad-x) 8vh 53%; }
.co-s3-head{
  font-size:clamp(44px, 5vw, 96px);
  font-weight:300; line-height:1.05;
}
.co-s3-body{ margin-top:7vh; font-size:1.02rem; }
.co-s3-body p + p{ margin-top:1.2em; }
.co-s3-media{
  position:absolute; left:var(--pad-x); bottom:0;
  width:min(42%, 805px);
  aspect-ratio:805/387;
}

/* ---- CO 04 · who it's for / nature ---- */
.co-nat{ background:#e2d2c6; color:#5d5949; }
.co-nat-inner{ position:relative; min-height:calc(100vh - var(--head-h) - var(--frame-w)); }
.co-nat-head{
  font-size:clamp(44px, 5vw, 96px);
  font-weight:300; line-height:1.05;
}
.co-nat-body{ margin-top:5vh; font-size:1.02rem; }
.co-nat-body p + p{ margin-top:1.2em; }
.co-nat-left{ position:absolute; left:var(--pad-x); top:9%; width:27%; }
.co-nat-media{
  position:absolute; left:36%; top:11%;
  width:28%; aspect-ratio:535/752;
}
.co-nat-right{ position:absolute; left:66.5%; top:48%; right:var(--pad-x); }

/* ---- CO 05 · why me? ---- */
.co-s4{ background:#ede1bd; color:#5d5949; }
.co-s4-inner{ position:relative; padding:4vh var(--pad-x) 8vh; }
.co-s4-head{
  font-size:clamp(48px, 5.4vw, 104px);
  font-weight:300; line-height:1.05;
}
.co-s4-body{ margin-top:5vh; max-width:36em; font-size:1.02rem; }
.co-s4-body p + p{ margin-top:1.2em; }
.co-s4-media{
  position:absolute; left:63.7%; top:36%;
  width:clamp(220px, 17vw, 330px);
  aspect-ratio:330/358;
}

/* ---- CO 05 · a final thought ---- */
.co-s5{ background:#d9cbb8; color:#5d5949; }
.co-s5-media{
  /* spans from headline top to body-copy bottom (client 1 Aug mock):
     top/height set by fitSpans() in main.js, width follows the ratio */
  position:absolute; left:22.6%;
  top:calc(var(--head-h) + var(--frame-w) + 16vh); /* pre-JS fallback */
  width:auto;
  aspect-ratio:341/511;
  max-width:30%;
}
.co-s5-right{ padding:16vh var(--pad-x) 8vh 54%; }
.co-s5-head{
  font-size:clamp(42px, 4.9vw, 94px);
  font-weight:300; line-height:1.05;
}
.co-s5-body{ margin-top:6vh; font-size:1.02rem; }
.co-s5-body p + p{ margin-top:1.2em; }

/* ---- CO 06 · let's talk close ---- */
/* client 4 Aug pm: tighter, more central diagonal per attachment */
.co-l1{ top:26%; left:38%; z-index:1; }
.co-l2{ top:45%; right:35%; left:auto; z-index:3; }
.co-close-row{
  position:absolute; top:73%; left:0; right:0;
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(40px, 10vw, 210px);
}
.co-close-sub{ font-size:1.05rem; }
.co-close-cta{ font-size:1.05rem; padding-top:1.4em; }
.foot-links{ display:flex; flex-direction:column; gap:.45em; }

/* ---- contact page (Say hello + inline Calendly, client 6 Aug) ---- */
.contact .close-stage{
  display:grid;
  grid-template-columns:1fr minmax(400px, 36%);
  align-items:center;
  gap:clamp(30px, 4vw, 80px);
  padding:5vh calc(var(--pad-x) + 3vw) 5vh calc(var(--pad-x) + 9vw);
}
/* headline joins the flow — the diagonal is an indent, not absolutes */
.contact .ct-l1, .contact .ct-l2{ position:static; }
.contact .ct-l2{ margin-left:.6em; }
.ct-head{ font-size:clamp(48px, 7.7vw, 132px); }
.ct-sub{ margin-top:5.5vh; font-size:1.05rem; }
.ct-cta{ margin-top:1.3em; font-size:1.05rem; }
.ct-cal{
  height:min(600px, 66vh);
  background:#d9d4c6;        /* panel tone while the widget loads */
}
.ct-cal .mi{ height:100%; }
.calendly-inline-widget{ height:100%; }

/* ============================================================
   Work page — concertina
   ============================================================ */
.work{ background:#d8cec1; color:#5d5949; }
.work-inner{
  padding:3vh var(--pad-x) 0;
  /* fill the first viewport so the footer sits below the fold,
     with clear air between the panel media and the footer bar */
  min-height:calc(100vh - var(--head-h) - var(--frame-w));
}
.work .site-foot{ margin-top:7vh; }
.work-row-head .mi{ cursor:pointer; }
.work-head{
  font-size:clamp(40px, 4.7vw, 90px);
  font-weight:300; line-height:1.12;
  margin-top:4vh;
}
/* two typeset versions — breaks differ per breakpoint (client 6 Aug) */
.work-head--m{ display:none; }
.work-acc{ position:relative; margin-top:8vh; }
.work-row{ position:relative; }
.work-row-head{ border-top:1px solid rgba(66,60,45,.8); }
.work-row-head .mi{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2vh 0;
  min-height:calc(clamp(58px, 8.3vh, 90px) - 1px);
}
.work-row-head h2{
  font-size:clamp(28px, 2.3vw, 44px);
  font-weight:300; line-height:1.1;
}
.work-toggle{
  background:none; border:0; cursor:pointer;
  font:inherit; color:inherit;
  font-size:clamp(15px, 1.25vw, 24px);
  padding:.4em 0 .4em 1em;
}
.work-toggle em{ font-style:normal; }
.work-toggle .wt-close{ display:none; }
.work-row.open .work-toggle .wt-view{ display:none; }
.work-row.open .work-toggle .wt-close{ display:inline; }
/* panels sit under the row head; only shown when the row is open */
.work-panel{
  position:absolute; left:0; right:0; top:100%;
  visibility:hidden;
}
.work-cols-2, .work-cols-3{ display:grid; }
.work-cols-2{ grid-template-columns:1fr 1.2fr; }
.work-cols-3{ grid-template-columns:1fr 1.15fr 1.15fr; }
.has-intro .wk-intro{ grid-column:1 / -1; margin-bottom:5vh; font-size:1.02rem; }
.work-col{
  font-size:1.02rem;
  padding:0 clamp(20px, 3vw, 60px);
  /* divider alpha is animated with the concertina (see main.js) */
  border-left:1px solid rgba(66,60,45,var(--div-a,.55));
  display:flex; flex-direction:column; align-items:flex-start;
}
.work-col:first-of-type{ border-left:0; padding-left:0; }
.work-col p + p{ margin-top:1.2em; }
.wk-label{ margin-bottom:.9em; }
/* margin-top:auto bottom-aligns media across equal-height grid columns,
   so both thumbnails share the same horizontal plane */
.wk-media{ margin-top:auto; padding-top:1.2vh; position:relative; width:min(290px, 80%); overflow:visible; }
.wk-media a{ display:block; position:relative; }
.wk-media img{ display:block; width:100%; height:auto; }
.wk-arrow{
  position:absolute; right:-46px; bottom:0;   /* flush to image bottom edge */
  color:#5d5949;
}
.wk-media a:focus-visible .wk-arrow, .wk-media a:hover .wk-arrow{ transform:translate(2px,-2px); }

/* short-viewport safeguard: scale concertina thumbnails so panels
   stay above the fold on small laptops / heavy browser chrome */
@media (min-width:900px) and (max-height:760px){
  .wk-media{ width:min(230px, 70%); }
  .wk-arrow{ right:-42px; width:30px; height:30px; }
}
@media (min-width:900px) and (max-height:670px){
  .wk-media{ width:min(185px, 62%); }
  .work-head{ margin-top:2vh; }
  .work-acc{ margin-top:5vh; }
}

/* ============================================================
   About page (client 7 Aug)
   ============================================================ */
.about{ background:#f0e5c9; color:#5d5949; }
.about-inner{
  display:grid;
  grid-template-columns:minmax(320px, 44%) 1fr;
  gap:clamp(40px, 6vw, 120px);
  padding:8vh var(--pad-x) 10vh;
  min-height:calc(100vh - var(--head-h) - var(--frame-w));
}
.about-head{
  font-size:clamp(40px, 4.6vw, 84px);
  font-weight:300; line-height:1.14;
  color:#55503c;
}
.about-media{
  margin-top:9vh;
  width:clamp(260px, 28vw, 410px);
}
.about-body{
  max-width:38em;
  font-size:1.02rem;
  padding-top:1vh;
}
.about-body p + p{ margin-top:1.2em; }

/* ============ responsive ============ */
@media (max-width: 899px){
  :root{ --head-h:60px; --frame-w:8px; }
  .menu-btn span{ width:40px; }
  /* client 5 Aug: no Book a call in the mobile header — the overlay
     menu (with Home first) is the mobile navigation; burger on the right */
  .head-link{ display:none; }
  .menu-btn{ margin-left:auto; }
  .hero-mark{ font-size:clamp(38px, 11vw, 64px); }
  .hero-head{ font-size:clamp(26px, 6.6vw, 38px); margin-top:4vh; }
  .hero-head--d{ display:none; }
  .hero-head--m{ display:block; }
  .hero-arrow{ bottom:7vh; }

  .s2{ grid-template-columns:1fr; }
  .s2-media{ grid-column:1; grid-row:2; height:52vh; }
  .s2-left{ grid-row:1; gap:6vh; padding-bottom:6vh; }

  .s3{ grid-template-columns:1fr; }
  .s3-media{ min-height:60vh; order:-1; }
  .s3-copy{ padding:6vh var(--pad-x); }

  .s4-media{ position:relative; inset:auto; left:auto; width:82%; margin:0 auto; height:48vh; }
  .s4-head{ position:relative; top:auto; margin:5vh var(--pad-x) 0; }
  /* bottom space as PADDING: a margin here escapes the section
     (overflow:clip is not a formatting context) and opens a cream
     gap between s4 and s5 */
  .s4-body{ position:relative; inset:auto; width:auto; margin:4vh var(--pad-x) 0; padding-bottom:8vh; }

  .s5-head{ position:relative; top:auto; max-width:none; margin:2vh var(--pad-x) 0; }
  .s5-right{ margin:5vh 0 0; padding:0 var(--pad-x) 14vh; }

  .s6{ display:block; }
  .s6-bg{ display:none; }
  .s6-fit{
    min-height:70vh;
    background:#4b4530 url('../assets/img/plant_shadow.jpg') center/cover no-repeat;
    padding-bottom:9vh;
  }
  .s6-ways{ padding:7vh var(--pad-x); }
  .s6-cta{ margin-top:8vh; }

  .car-card{ flex-basis:84vw; }

  /* Work page — 4-line headline break, stacked columns get two clear
     lines between company blocks, a clear line after each company name,
     and columns ending in an image get a third line (client 6 Aug) */
  .work-head--d{ display:none; }
  .work-head--m{ display:block; font-size:clamp(30px, 8.6vw, 38px); }
  .work-cols-2, .work-cols-3{ grid-template-columns:1fr; gap:3.1em; }
  .work-col{ border-left:0; padding:0; }
  .wk-label{ margin-bottom:1.5em; }
  /* events/newsletters: company name grouped tight with its statement,
     the clear space lives between companies */
  .has-intro .wk-label{ margin-bottom:0; }
  .wk-media{ margin-bottom:1.55em; }
  .wk-arrow{ right:-40px; }

  /* Coaching page */
  .co-s1-inner{ padding:4vh var(--pad-x) 8vh; }
  .co-s1-head{ margin-top:2vh; }
  .co-s2-cols{ grid-template-columns:1fr; gap:4vh; padding-bottom:20vh; }
  /* client 6 Aug: image follows the copy in flow with a tight gap,
     instead of anchoring to the stretched section's bottom edge */
  .co-s3-right{ padding:6vh var(--pad-x) 0; }
  .co-s3-media{ position:static; margin:7vh auto 0; width:calc(100% - 2*var(--pad-x)); }
  .co-nat-inner{ min-height:0; padding:4vh 0 8vh; }
  .co-nat-left, .co-nat-right{ position:relative; inset:auto; width:auto; margin:0 var(--pad-x); }
  .co-nat-media{ position:relative; inset:auto; width:70%; margin:5vh auto; }
  .co-nat-right{ margin-top:5vh; }
  .co-s4-media{ position:relative; left:auto; top:auto; margin:5vh 0 0; }
  .co-s5-media{ position:relative; left:auto; top:auto; margin:4vh var(--pad-x) 0; }
  .co-s5-right{ padding:4vh var(--pad-x) 8vh; }
  /* client 5 Aug: mobile closes per screenshot — tight central diagonal,
     left-aligned copy, email centred beneath */
  .co-l1{ top:28%; left:24%; }
  .co-l2{ top:37%; right:26%; }
  /* client 6 Aug: gap above the email matches the gap between "talk"
     and the body copy */
  .co-close-row{ flex-direction:column; align-items:center; gap:8vh; text-align:center; top:54%; padding:0 max(28px, 7vw); }
  /* contact: stack copy over the calendar */
  .contact .close-stage{ display:block; padding:6vh max(28px, 7vw) 4vh; }
  .contact .ct-l2{ margin-left:.5em; }
  .ct-sub{ margin-top:4vh; }
  .ct-cal{ margin-top:6vh; height:560px; }
  .co-close-sub{ text-align:left; }
  .co-close-cta{ padding-top:0; }
  .br-m{ display:inline; }
  .s8-head--d{ display:none; }
  .s8-head--m{ display:block; }
  /* sized so "It matters to me that work works –" holds on one line */
  .s8-head{ font-size:clamp(19px, 5.4vw, 30px); }

  /* work page: panels join the flow so tall stacked columns grow the
     section instead of clipping below it (display toggled in main.js);
     with a state open, the viewport-fill minimums come off so the
     footer sits straight below the content — no empty tail */
  .work-panel{ position:static; display:none; }
  .work:has(.work-row.open){ min-height:0; }
  .work:has(.work-row.open) .work-inner{ min-height:0; }

  /* WG page */
  .wg-s1-inner{ padding:4vh var(--pad-x) 8vh; }
  /* client 5 Aug: headline much nearer the top of the section */
  .wg-s1-head{ margin-top:2vh; }
  .wg-s1-body{ margin-top:5vh; }
  .wg-s2-head{ position:relative; top:auto; margin:4vh var(--pad-x) 0; }
  .wg-proc{ margin:4vh 0 0; padding:0 var(--pad-x) 22vh; }
  .wg-row{ grid-template-columns:70px 1fr; padding:3.5vh 0; }
  .wg-s2-media{ width:150px; }
  .wg-cols{ grid-template-columns:1fr; }
  .wg-col{ padding:0; }
  .wg-col + .wg-col{ border-left:0; border-top:1px solid rgba(66,60,45,.75); margin-top:4vh; padding-top:4vh; }
  .close-l1{ left:6%; }
  .close-l2{ right:5%; }
  .site-foot{ min-height:90px; }

  /* About page */
  .about-inner{ display:block; padding:5vh var(--pad-x) 8vh; }
  .about-media{ margin:5vh 0 6vh; width:min(70%, 320px); }
}