/* Layout: a slow vertical sequence. Full bleed photography alternating with wide, almost empty sand.
   The pacing is the content. Committed single light world, because the brand is a sand world. */
:root{
  --sand:#F5EDE3; --sand-deep:#ECE2D4; --cream:#F5EDE3;
  --stone:#CEC4B0; --gold:#B1864F;
  --terracotta:#A8512A; --clay:#C68459; --forest:#16402F; --ink:#14201A;
  --quiet:#6E6A5E; --rule:#D9C8B8;
  --display:"EB Garamond",Garamond,Georgia,serif;
  --util:"Lato",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--util);font-weight:300;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
.wrap{padding-inline:clamp(20px,6vw,96px)}
.lab{font-family:var(--util);font-size:11px;font-weight:400;letter-spacing:.34em;text-transform:uppercase}
.d{font-family:var(--display);font-weight:400;line-height:1.1;text-wrap:balance}
em{font-style:italic}

/* ---------- 1. the opening ---------- */
.open{position:relative;isolation:isolate;display:grid;align-content:end;
      gap:clamp(20px,3.4vh,34px);padding-block:clamp(96px,16vh,150px) clamp(72px,12vh,120px);
      min-height:min(86svh,780px)}
.open>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.open::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(245,237,227,.84) 0%,rgba(243,234,222,.64) 42%,rgba(240,231,217,.90) 100%)}
.topbar{position:absolute;top:clamp(20px,4vh,40px);left:clamp(20px,6vw,96px);right:clamp(20px,6vw,96px);
        display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:1}
.topbar img{width:46px}
.topbar .lab{color:#655F50}
.open h1{margin:0;font-size:clamp(2.5rem,7.6vw,5.6rem);letter-spacing:-.005em;max-width:15ch;color:var(--forest)}
.open h1 em{color:var(--terracotta)}
.open .sub{max-width:44ch;font-size:clamp(.95rem,1.5vw,1.05rem);line-height:1.85;color:#49453A}
.hair{width:84px;height:1px;background:var(--clay);border:0;margin:0}
.cue{display:flex;align-items:center;gap:12px;color:#655F50;margin-top:clamp(8px,2vh,18px)}
.cue .ln{display:block;width:46px;height:1px;background:var(--rule);transform-origin:left;
         animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scaleX(.35);opacity:.5}50%{transform:scaleX(1);opacity:1}}

/* ---------- reveal ---------- */
.rv{opacity:1;transform:none;transition:opacity 1.4s cubic-bezier(.2,.7,.3,1),transform 1.4s cubic-bezier(.2,.7,.3,1)}
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none}
  .cue .ln{animation:none;transform:scaleX(1)}
}

/* ---------- 2. the band ---------- */
.band{position:relative;min-height:74svh;display:grid;align-items:end;isolation:isolate}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band::after{content:"";position:absolute;inset:0;z-index:-1}
.band.light::after{background:linear-gradient(180deg,rgba(245,237,227,.20),rgba(245,237,227,.90))}
.band.dark::after{background:linear-gradient(100deg,rgba(12,30,21,.80) 0%,rgba(12,30,21,.46) 48%,rgba(12,30,21,.30) 100%),
                             linear-gradient(180deg,rgba(14,32,22,.34),rgba(14,32,22,.78))}
.band .inner{padding-block:clamp(48px,9vh,110px);display:grid;gap:22px}
.band.dark .inner{color:var(--cream)}
.band h2{margin:0;font-size:clamp(2rem,5.6vw,4rem);max-width:17ch}
.band.dark h2 em{color:#D79A68}
.band.light h2{color:var(--forest)}
.band.light h2 em{color:var(--terracotta)}
.band p{margin:0;max-width:44ch;line-height:1.8;font-size:clamp(1.15rem,1.1vw + 0.72rem,1.32rem)}
.band.dark p{color:#DCE6D9}
.band.light p{color:#413E33}

/* ---------- doors ---------- */
.doors{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.door{display:inline-block;font-family:var(--util);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
      padding:16px 30px;text-decoration:none;border:1px solid transparent;transition:.35s}
.door.fill{background:var(--clay);color:#1C1710}
.door.fill:hover{background:var(--terracotta);color:var(--cream)}
.door.line{border-color:var(--clay);color:#8C4421;background:rgba(198,132,89,.18);border-width:1.5px}
.door.line:hover{background:var(--clay);color:#1C1710;border-color:var(--clay)}
.band.light .door.line{color:#8C4421;border-color:var(--clay);background:rgba(198,132,89,.2)}
.band.light .door.line:hover{background:var(--clay);color:#1C1710}

/* ---------- 3. the sound ---------- */
.sound{background:var(--sand-deep);padding-block:clamp(56px,10vh,120px)}
.sound .box{display:grid;gap:26px;justify-items:start;max-width:52ch}
.sound h3{margin:0;font-family:var(--display);font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.2}
.play{display:inline-flex;align-items:center;gap:18px;background:none;border:0;cursor:pointer;
      padding:0;font-family:var(--util);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink)}
.play .disc{width:62px;height:62px;border-radius:50%;border:1px solid var(--clay);display:grid;place-items:center;
            transition:.4s;flex:0 0 auto}
.play:hover .disc{background:var(--clay)}
.play .tri{width:0;height:0;border-left:11px solid var(--terracotta);border-top:7px solid transparent;
           border-bottom:7px solid transparent;margin-left:4px}
.play:hover .tri{border-left-color:#201A12}
.play[data-on="1"] .disc{background:var(--clay)}
.wavewrap{width:100%;max-width:520px;height:46px}
.sound small{color:var(--quiet);font-size:12.5px;line-height:1.8}

/* ---------- 4. the ritual ---------- */
.ritual{background:var(--terracotta);color:#F7EDE2;padding-block:clamp(72px,14vh,170px)}
.ritual .lab{color:#F0C9A8}
.ritual .steps{display:grid;gap:clamp(46px,8vh,92px);margin-top:clamp(36px,6vh,72px);align-items:start}

.step{display:grid;gap:16px;justify-items:start;text-align:left;max-width:42ch}
.step .n{font-family:var(--display);font-size:1.1rem;color:#F0C9A8}
.step h4{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.12}
.step p{margin:0;line-height:1.85;color:#F6E5D6;font-size:clamp(1.12rem,0.95vw + 0.74rem,1.25rem)}
.step .hair{margin-left:0}

/* ---------- 5. the six signals ---------- */
.signals{padding-block:clamp(64px,12vh,140px)}
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
       margin-top:clamp(32px,5vh,56px);border-block:1px solid var(--rule);counter-reset:sgn}
@media(min-width:640px){.sgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.sgrid{grid-template-columns:repeat(6,1fr)}}
.sg{background:var(--sand);padding:clamp(26px,2.6vw,36px) clamp(18px,1.8vw,26px);display:grid;gap:14px;
    align-content:start;min-height:clamp(250px,32vh,350px);counter-increment:sgn}
.sg::before{content:counter(sgn,decimal-leading-zero);font-family:var(--display);font-size:.95rem;
            color:var(--gold);letter-spacing:.08em}

.sg .t{font-family:var(--display);font-size:clamp(1.5rem,2.1vw,1.85rem);color:var(--forest);line-height:1.12}
.sg .b{font-size:15.5px;line-height:1.85;color:#55513F}

/* ---------- 6. two doors ---------- */
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--rule)}
.who>div{position:relative;min-height:62svh;display:grid;align-items:end;isolation:isolate;padding:clamp(28px,4vw,56px)}
.who img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.who>div::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,32,22,.18),rgba(14,32,22,.8))}
.who h4{margin:0 0 12px;font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--cream)}
.who p{margin:0 0 22px;color:#CFDACB;line-height:1.82;font-size:1.04rem;max-width:34ch}
.who .lab{color:#D79A68;margin-bottom:14px;display:block}

/* ---------- 7. close ---------- */
.close{background:var(--forest);color:var(--cream);padding-block:clamp(72px,13vh,150px);text-align:center}
.close img{width:min(380px,74vw);margin:0 auto}
.close .belief{font-family:var(--display);font-style:italic;font-size:clamp(1.5rem,3.4vw,2.3rem);
               margin:clamp(28px,5vh,52px) auto 0;max-width:22ch;line-height:1.3;color:#EFE7DA}
.close .hair{margin:30px auto}
.close .meta{color:#9FB0A0;font-size:11px;letter-spacing:.3em;text-transform:uppercase;line-height:2.4}
.close a.door{margin-top:34px}

/* ===================== shared chrome, added for the five pages ===================== */
.nav{position:absolute;top:clamp(18px,3.4vh,36px);left:clamp(20px,6vw,96px);right:clamp(20px,6vw,96px);
     display:flex;align-items:center;justify-content:space-between;gap:18px;z-index:3}
.nav .brandlink{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.nav .brandlink img{width:44px}
.nav .brandlink span{font-family:var(--util);font-size:10.5px;font-weight:400;letter-spacing:.3em;
                     text-transform:uppercase;white-space:nowrap}
.nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(14px,2.2vw,32px);margin:0;padding:0;justify-content:flex-end}
.nav a.lk{font-family:var(--util);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
          text-decoration:none;color:inherit;padding-bottom:4px;border-bottom:1px solid transparent;transition:.3s}
.nav a.lk:hover{border-bottom-color:currentColor}
.nav a.lk[aria-current="page"]{border-bottom-color:var(--clay)}
.nav.on-dark{color:var(--cream)}
.nav.on-light{color:#49453A}
@media(max-width:620px){
  .nav{flex-direction:column;align-items:flex-start;gap:12px}
  .nav ul{justify-content:flex-start;gap:14px}
  .nav .brandlink img{width:38px}
}

/* page header: photograph, veil, title low in the frame */
.phead{position:relative;isolation:isolate;display:grid;align-content:end;gap:clamp(18px,3vh,30px);
       padding-block:clamp(132px,22vh,210px) clamp(56px,10vh,104px);min-height:min(74svh,680px)}
.phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.phead::after{content:"";position:absolute;inset:0;z-index:-1}
.phead.veil-light::after{background:linear-gradient(180deg,rgba(245,237,227,.84) 0%,rgba(243,234,222,.62) 44%,rgba(240,231,217,.90) 100%)}
.phead.veil-forest::after{background:linear-gradient(180deg,rgba(14,46,33,.72) 0%,rgba(16,48,34,.68) 40%,rgba(12,38,27,.92) 100%)}
.phead.veil-forest{color:var(--cream)}
.phead.veil-forest .lab{color:var(--gold)}
.phead.veil-forest h1 em{color:#D79A68}
.phead.veil-forest .sub{color:#CFDACB}
.phead.veil-dark::after{background:linear-gradient(180deg,rgba(14,32,22,.52) 0%,rgba(14,32,22,.46) 40%,rgba(14,32,22,.86) 100%)}
.phead.veil-dark{color:var(--cream)}
.phead.veil-dark .lab{color:#D9A478}
.phead.veil-light .lab{color:var(--terracotta)}
.phead h1{margin:0;font-family:var(--display);font-weight:400;line-height:1.08;text-wrap:balance;
          font-size:clamp(2.3rem,6.4vw,4.9rem);max-width:17ch;letter-spacing:-.005em}
.phead.veil-light h1{color:var(--forest)}
.phead h1 em{color:var(--terracotta)}
.phead.veil-dark h1 em{color:#E0A070}
.phead .sub{margin:0;max-width:46ch;line-height:1.85;font-size:clamp(1.08rem,0.9vw + 0.74rem,1.22rem)}
.phead.veil-light .sub{color:#49453A}
.phead.veil-dark .sub{color:#D4DCD1}

/* quiet prose sections on sand */
.page{padding-block:clamp(60px,11vh,140px);background:var(--sand)}
.page.deep{background:var(--sand-deep)}
.page.cream{background:var(--cream)}
.lede{font-family:var(--display);font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.32;max-width:24ch;margin:0;color:var(--forest)}
.lede em{color:var(--terracotta)}
.measure{max-width:58ch}
.measure p{line-height:1.86;font-size:clamp(1.12rem,0.95vw + 0.74rem,1.25rem);color:#383528;margin:0 0 1.1em}
.measure p:last-child{margin-bottom:0}
.measure p strong{font-weight:400;color:var(--ink);font-family:var(--display);font-size:1.12em}
.sechead{display:grid;gap:16px;margin-bottom:clamp(28px,5vh,52px)}
.sechead h2{margin:0;font-family:var(--display);font-weight:400;line-height:1.12;color:var(--forest);
            font-size:clamp(1.9rem,4.4vw,3.2rem);max-width:19ch}
.sechead h2 em{color:var(--terracotta)}

/* two column body */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(30px,5vw,76px);align-items:start}
@media(min-width:900px){.split{grid-template-columns:minmax(0,.44fr) minmax(0,.56fr)}}
.split img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* numbered list of offers */
.offers{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule);margin-top:clamp(28px,5vh,52px)}
.offer{background:var(--sand);padding:clamp(26px,4vw,46px) clamp(20px,3vw,40px);
       display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.page.deep .offer{background:var(--sand-deep)}
.page.cream .offer{background:var(--cream)}
.offer .n{font-family:var(--display);font-size:1rem;color:var(--clay)}
.offer h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.55rem,3.2vw,2.15rem);line-height:1.18;color:var(--forest)}
.offer p{margin:0;line-height:1.88;color:#3B382F;font-size:clamp(1.06rem,0.6vw + 0.84rem,1.14rem);max-width:52ch}
.offer ul{margin:4px 0 0;padding-left:1.1em;color:#55513F;line-height:1.95;font-size:1rem;max-width:50ch}
@media(min-width:860px){.offer:not(.stack){grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:clamp(24px,4vw,56px)}
  .offer:not(.stack) .n{grid-column:1;grid-row:1}
  .offer:not(.stack) h3{grid-column:1;grid-row:2}
  .offer:not(.stack) .body{grid-column:2;grid-row:1/4;display:grid;gap:14px;align-content:start}}
.offer.stack{grid-template-columns:minmax(0,1fr);gap:11px}
.offer.stack h3{font-size:clamp(1.35rem,2.6vw,1.75rem)}

/* plain facts list */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--rule);
       border-block:1px solid var(--rule);margin-top:clamp(28px,5vh,52px);counter-reset:fx}
.fact{background:var(--sand);padding:clamp(28px,3.4vw,44px) clamp(20px,2.2vw,30px);display:grid;gap:12px;align-content:start;
      position:relative;counter-increment:fx}
.fact::before{content:counter(fx,decimal-leading-zero);font-family:var(--display);font-size:.95rem;
              color:var(--gold);letter-spacing:.08em}
.page.deep .fact{background:var(--sand-deep)}
.fact .t{font-family:var(--display);font-size:clamp(1.65rem,2.4vw,2rem);line-height:1.16;color:var(--forest)}
.fact .b{font-size:13.8px;line-height:1.82;color:#5C5749}

/* a quiet pull quote */
.pull{border-left:2px solid var(--gold);padding-left:clamp(20px,3vw,40px);max-width:38ch;
      font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,2.8vw,1.9rem);line-height:1.38;color:var(--forest)}

/* the form shell on the start page */
.form{display:grid;gap:clamp(18px,3vh,28px);max-width:560px;margin-top:clamp(28px,5vh,46px)}
.field{display:grid;gap:9px}
.field label{font-family:var(--util);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#655F50}
.field input,.field textarea,.field select{font-family:var(--util);font-weight:300;font-size:1rem;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);padding:10px 0;width:100%;border-radius:0}
.field textarea{resize:vertical;min-height:112px;line-height:1.8}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-bottom-color:var(--clay)}
.note{font-size:12.5px;line-height:1.8;color:var(--quiet);max-width:46ch}

/* footer, every page */
.foot{position:relative;isolation:isolate;background:var(--forest);color:var(--cream);
      padding-block:clamp(64px,11vh,130px);overflow:hidden}
.foot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url(img/tex-grain.jpg);background-size:420px 420px;background-repeat:repeat;
  opacity:.28;mix-blend-mode:soft-light}
.foot .grid{display:grid;gap:clamp(34px,6vh,60px)}
@media(min-width:860px){.foot .grid{grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);
  gap:clamp(40px,6vw,96px);align-items:start}}
.foot .fnav{display:grid;gap:14px}
.foot .fnav a{font-size:11.5px}
.foot .fnav li{line-height:1.5}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(22px,4vw,48px)}
.foot .ch{font-family:var(--util);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
          color:var(--gold);margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid rgba(177,134,79,.4)}
.foot .lock{width:min(340px,70vw);filter:invert(1) hue-rotate(180deg) saturate(.9) brightness(1.08)}
.foot .belief{font-family:var(--display);font-style:italic;font-size:clamp(1.5rem,3.2vw,2.3rem);
              margin:clamp(24px,4vh,42px) 0 0;max-width:22ch;line-height:1.32;color:#EFE7DA}
.foot hr.hair{margin:clamp(26px,4vh,40px) 0;background:#3E6752;width:120px}
.foot .fnav{list-style:none;margin:0;padding:0}
.foot .fnav a{font-family:var(--util);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
              color:#D6E2D6;text-decoration:none;border-bottom:1px solid transparent;transition:.3s}
.foot .fnav a:hover{color:var(--cream);border-bottom-color:var(--clay)}
.foot .meta{color:#A3B6A5;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;line-height:2.3;margin:clamp(24px,3.6vh,34px) 0 0}

.band.light.strong::after{background:linear-gradient(180deg,rgba(245,237,227,.52),rgba(243,234,222,.95))}

/* ===================== texture: no section is ever flat colour ===================== */
.page{position:relative;isolation:isolate}
.page::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url(img/tex-grain.jpg);background-size:420px 420px;background-repeat:repeat;
  opacity:.9;mix-blend-mode:soft-light}
.page.deep::before{opacity:.75}
.page>*{position:relative}

/* a strip of photographs, used once per page to break the quiet */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule)}
.strip figure{margin:0;position:relative;isolation:isolate;min-height:clamp(300px,46svh,560px);
              display:grid;align-items:end;overflow:hidden}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}

.strip figure::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,32,22,0) 38%,rgba(14,32,22,.62))}
.strip figcaption{font-family:var(--display);font-style:italic;font-size:clamp(1rem,1.6vw,1.3rem);
                  letter-spacing:0;text-transform:none;color:#F3E7D7;padding:clamp(16px,2vw,26px);line-height:1.4}
@media(max-width:620px){.strip{grid-template-columns:1fr}
  .strip figure{min-height:clamp(240px,46svh,360px)}}

/* one terracotta moment per page, the colour hit between the quiet */
.shout{position:relative;isolation:isolate;background:var(--terracotta);color:#F8EFE5;
       padding-block:clamp(64px,13vh,150px)}
.shout::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url(img/tex-grain.jpg);background-size:420px 420px;background-repeat:repeat;
  opacity:.55;mix-blend-mode:soft-light}
.shout .lab{color:#F0C9A8;display:block;margin-bottom:clamp(18px,3vh,30px)}
.shout p.line{margin:0;font-family:var(--display);font-weight:400;line-height:1.16;
              font-size:clamp(1.9rem,5vw,3.6rem);max-width:19ch;text-wrap:balance}
.shout p.line em{color:#FBE6D2}
.shout .after{margin:clamp(22px,4vh,38px) 0 0;max-width:44ch;line-height:1.9;color:#F4DCC9;font-size:1.06rem}

/* ===================== the system, written as objects ===================== */
.space{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule);
       margin-top:clamp(30px,5vh,56px)}
@media(min-width:760px){.space{grid-template-columns:repeat(5,1fr)}}
.space .sp{background:var(--sand);padding:clamp(24px,2.6vw,36px) clamp(18px,2vw,26px);display:grid;gap:12px;align-content:start}
.page.deep .space .sp{background:var(--sand-deep)}
.space .ltr{font-family:var(--display);font-size:clamp(2.6rem,5vw,3.6rem);line-height:.9;color:var(--clay)}
.space .nm{font-family:var(--display);font-size:1.3rem;line-height:1.2;color:var(--forest)}
.space .ds{font-size:13.8px;line-height:1.85;color:#5C5749}

.seq{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule);margin-top:clamp(30px,5vh,56px)}
.seq .st{background:var(--sand);padding:clamp(28px,4vw,48px) clamp(20px,3vw,40px);
         display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.page.deep .seq .st{background:var(--sand-deep)}
.seq .num{font-family:var(--display);font-size:clamp(2.2rem,4vw,3rem);line-height:.9;color:var(--gold)}
.seq h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3.2vw,2.25rem);line-height:1.16;color:var(--forest)}
.seq h3 em{color:var(--terracotta)}
.seq p{margin:0;line-height:1.9;color:#3B382F;font-size:clamp(1.06rem,0.6vw + 0.84rem,1.14rem);max-width:54ch}
.seq .built{font-size:13.6px;line-height:1.85;color:#5C5749;max-width:52ch;
            border-left:1px solid var(--rule);padding-left:16px}
@media(min-width:880px){.seq .st{grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:clamp(24px,4vw,56px)}
  .seq .num{grid-column:1;grid-row:1}.seq h3{grid-column:1;grid-row:2}
  .seq .why{grid-column:2;grid-row:1/4;display:grid;gap:16px;align-content:start}}

/* a client's own words */
.said{display:grid;gap:clamp(20px,3vh,30px);max-width:50ch}
.said blockquote{margin:0;font-family:var(--display);font-size:clamp(1.55rem,3.2vw,2.35rem);
                 line-height:1.34;color:var(--forest)}
.said blockquote::before{content:"\201C"}
.said blockquote::after{content:"\201D"}
.said cite{font-style:normal;font-family:var(--util);font-weight:400;font-size:14px;letter-spacing:.16em;
           text-transform:uppercase;color:var(--terracotta);line-height:1.95}
.band.dark .said blockquote{color:var(--cream)}
.band.dark .said cite{color:#A9BBAC}

/* the one sentence, said the same way on every page */
.one{position:relative;isolation:isolate;background:var(--forest);color:var(--cream);
     padding-block:clamp(72px,13vh,150px);overflow:hidden}
.one>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 45%;z-index:-2}
.one::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,rgba(15,38,26,.84) 0%,rgba(15,38,26,.62) 52%,rgba(15,38,26,.46) 100%),
             linear-gradient(180deg,rgba(17,40,28,.30),rgba(17,40,28,.58))}
.one .lab{color:#8FA592;display:block;margin-bottom:clamp(14px,2.4vh,22px)}
.one p{margin:0;font-family:var(--display);font-size:clamp(1.6rem,3.8vw,2.8rem);line-height:1.3;
       max-width:26ch;color:#F2EADC}
.one p em{color:var(--clay);font-style:italic}

/* the ritual, three lines */
.rit{display:grid;gap:clamp(20px,3.4vh,34px);max-width:46ch}
.rit .q{font-family:var(--display);font-size:clamp(1.2rem,2.6vw,1.7rem);line-height:1.4;margin:0}
.rit .stage{font-family:var(--util);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
            color:#F0C9A8;margin:0}

/* ===================== the enquiry panel ===================== */
dialog.panel{border:0;padding:0;background:transparent;max-width:min(680px,92vw);width:100%}
dialog.panel::backdrop{background:rgba(17,32,24,.62);backdrop-filter:blur(3px)}
dialog.panel .inner{background:var(--sand);padding:clamp(28px,5vw,58px);position:relative;
  max-height:86svh;overflow:auto;border-top:3px solid var(--clay)}
dialog.panel h2{margin:0 0 10px;font-family:var(--display);font-weight:400;color:var(--forest);
  font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.14}
dialog.panel .note{margin:0 0 clamp(18px,3vh,28px)}
dialog.panel .x{position:absolute;top:14px;right:16px;background:none;border:0;cursor:pointer;
  font-family:var(--util);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--quiet);padding:8px}
dialog.panel .x:hover{color:var(--terracotta)}
dialog.panel .form{margin-top:0}

/* the linen ground, used where the page wants more cloth than paper */
body.linen .page::before{background-image:url(img/tex-weave.jpg);background-size:560px auto;opacity:.95}

/* display headings that sit outside a sechead still read as headings */
.signals h2, .sound h3{color:var(--forest)}

.greenwrap,
.page.greenwrap,
.page.deep.greenwrap,
.page.cream.greenwrap{background:var(--forest);color:var(--cream);position:relative;isolation:isolate}
.greenwrap::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url(img/tex-grain.jpg);background-size:420px 420px;background-repeat:repeat;
  opacity:.26;mix-blend-mode:soft-light}

/* ---------------------------------------------------------------------------
   A green section with a photograph behind it. 3 October 2026.
   The leaf sits under a heavy forest veil, so every type colour in .greenwrap
   stays exactly as it was and only the ground gains depth.
   --------------------------------------------------------------------------- */
.greenwrap > .bgpic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-3;pointer-events:none}
.greenwrap.haspic::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(104deg,rgba(22,64,47,.93) 0%,rgba(22,64,47,.80) 44%,rgba(22,64,47,.40) 100%),
             linear-gradient(180deg,rgba(22,64,47,.42) 0%,rgba(20,58,42,.72) 100%)}
/* a pale photograph behind green needs a thinner veil, or it disappears entirely */
.greenwrap.haspic.pale > .bgpic{mix-blend-mode:luminosity;opacity:.60}
.greenwrap.haspic.pale::after{
  background:linear-gradient(104deg,rgba(22,64,47,.90) 0%,rgba(22,64,47,.72) 46%,rgba(22,64,47,.22) 100%),
             linear-gradient(180deg,rgba(22,64,47,.30) 0%,rgba(20,58,42,.62) 100%)}

.greenwrap .lede{color:#F2EADC}
.greenwrap .lede em{color:var(--clay)}
.greenwrap .measure p{color:#CFDACB}
.greenwrap .measure p strong{color:var(--cream)}
.greenwrap .lab{color:var(--gold)}
.greenwrap .sechead h2{color:#F2EADC}
.greenwrap .fact,
.page.deep .greenwrap .fact,
.page.deep.greenwrap .fact{background:#17452F}
.greenwrap .facts,
.page.deep.greenwrap .facts{background:#2C5943;border-color:#2C5943}
.greenwrap .fact .t{color:#F2EADC}
.greenwrap .fact::before{color:var(--gold)}
.greenwrap .fact .b{color:#B9C9BB}
.greenwrap .pull{color:#D4AC78;border-left-color:var(--gold)}

/* the system, drawn */
.loopwrap{padding-block:clamp(56px,10vh,120px)}
.loopwrap .inner{max-width:1000px;margin:0 auto}
svg.loop{width:100%;height:auto;display:block}
.loopwrap{padding-block:clamp(70px,13vh,160px)}
.loopwrap .cap{margin:clamp(26px,4.5vh,44px) auto 0;max-width:56ch;text-align:center;
               line-height:1.88;color:#3B382F;font-size:clamp(1.1rem,0.95vw + 0.72rem,1.2rem)}
.greenwrap.loopwrap .cap{color:#C2D1C2}

.foot .ritline{margin:clamp(40px,6vh,64px) 0 0;padding-top:clamp(26px,4vh,38px);
  border-top:1px solid rgba(177,134,79,.34);display:flex;flex-wrap:wrap;gap:14px 30px;
  align-items:baseline;justify-content:space-between}
.foot .ritline .say{font-family:var(--display);font-style:italic;color:var(--gold);
  font-size:clamp(1.1rem,2vw,1.5rem);margin:0}
.foot .ritline .tiny{font-family:var(--util);font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:#8FA592;margin:0}

/* a film, at the size it deserves */
.filmwrap{padding-block:clamp(56px,10vh,130px)}
.film{display:grid;gap:clamp(28px,5vw,72px);align-items:center}
@media(min-width:900px){.film{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}}
.film .holder{position:relative;background:var(--forest)}
.film video{width:100%;height:auto;display:block}
.film .cue{font-family:var(--util);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
           color:var(--quiet);margin:14px 0 0}

/* the keynote page opens like a stage, not a banner */
.phead.tall{min-height:min(88svh,820px);padding-block:clamp(150px,26vh,250px) clamp(64px,12vh,120px)}
.phead.tall h1{font-size:clamp(2.8rem,7.8vw,6rem)}
.phead.tall .hair{background:var(--gold);width:110px;height:2px}

/* the organisational door opens at full height too */


/* the foundations, the way the old site did it: one big value, one small line */
.found{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
       background:#2C5943;border-block:1px solid #2C5943;margin-top:clamp(30px,5vh,56px)}
.found .f{background:#17452F;padding:clamp(30px,3.6vw,52px) clamp(20px,2.2vw,30px);display:grid;gap:14px;align-content:start}
.found .v{font-family:var(--display);font-weight:400;line-height:.92;color:#F2EADC;
          font-size:clamp(3rem,5.6vw,4.8rem);letter-spacing:-.01em}
.found .k{font-size:14px;line-height:1.75;color:#B9C9BB;max-width:24ch}

@media(min-width:1040px){.sgrid.four{grid-template-columns:repeat(4,1fr)}}
@media(min-width:640px) and (max-width:1039px){.sgrid.four{grid-template-columns:repeat(2,1fr)}}

/* ---- the twelve part home sequence ---- */
.open .whisper{margin:clamp(18px,3vh,30px) 0 0;font-family:var(--display);font-style:italic;
  font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--terracotta);max-width:42ch}
.open .doors{margin-top:clamp(16px,2.6vh,26px)}
.pilot{display:grid;gap:clamp(24px,4vh,40px);max-width:60ch}
.pilot .line{margin:0;font-family:var(--display);font-weight:400;line-height:1.16;
  font-size:clamp(1.9rem,4.6vw,3.2rem);color:#F7EDE2}
.pilot .line em{color:#F0C9A8}
.pilot .measure p{color:#F3DFCD}
.pilot .measure p strong{color:#FBF1E6}
.chain{margin:clamp(22px,3.6vh,34px) 0 0;max-width:46ch;font-family:var(--display);
  font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.4;color:var(--forest)}
.chain em{color:var(--terracotta)}
.one .after{margin:clamp(20px,3vh,30px) 0 0;max-width:46ch;line-height:1.85;color:#CFDACB;
  font-size:clamp(1.03rem,1.5vw,1.16rem);font-family:var(--util)}

/* a sequence row that carries one short line */
.seq.brief .st{grid-template-columns:minmax(0,1fr)!important;gap:12px;padding-block:clamp(26px,3vw,40px)}
.seq.brief .num,.seq.brief h3,.seq.brief .why{grid-column:1!important;grid-row:auto!important}
.seq.brief .why{display:grid;gap:10px}
.seq.brief .num{font-size:clamp(1.6rem,2.6vw,2rem)}
.seq.brief h3{font-size:clamp(1.4rem,2.6vw,1.8rem)}
@media(min-width:880px){.seq.brief{grid-template-columns:repeat(4,1fr)}}
/* the outline button, on a dark ground */
.one .door.line, .band.dark .door.line, .who .door.line{
  color:#F0D7BE;border-color:var(--clay);background:rgba(198,132,89,.22)}
.one .door.line:hover, .band.dark .door.line:hover{background:var(--clay);color:#1C1710}

/* the ritual, vertical, flush left */
.steps.vert{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule);
            margin-top:clamp(30px,5vh,56px);counter-reset:vs}
.vstep{background:var(--sand);padding:clamp(28px,4vw,46px) clamp(20px,3vw,40px);
       display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.page.deep .vstep{background:var(--sand-deep)}
.vstep .n{font-family:var(--display);font-size:1rem;color:var(--gold);letter-spacing:.08em}
.vstep h3{margin:0;font-family:var(--display);font-weight:400;color:var(--forest);
          font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.1}
.vstep p{margin:0;line-height:1.86;color:#3B382F;max-width:52ch;
         font-size:clamp(1.12rem,0.95vw + 0.74rem,1.25rem)}
@media(min-width:880px){.vstep{grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);
  gap:clamp(24px,4vw,56px);align-items:baseline}
  .vstep .n{grid-column:1;grid-row:1}
  .vstep h3{grid-column:1;grid-row:2}
  .vstep p{grid-column:2;grid-row:1/3}}

/* ===================== 2 Oct: a nav you cannot miss, and real contrast ===================== */

/* the navigation becomes a fixed bar on its own ground, present on every page */
.nav{position:fixed;top:0;left:0;right:0;
     padding:14px clamp(20px,6vw,96px);
     background:rgba(243,235,224,.93);
     -webkit-backdrop-filter:saturate(1.1) blur(14px);
     backdrop-filter:saturate(1.1) blur(14px);
     border-bottom:1px solid rgba(177,134,79,.34);
     color:#2B3A31!important;
     z-index:60}
.nav .brandlink img{width:34px}
.nav .brandlink span{font-size:10px;letter-spacing:.26em;color:#2B3A31}
.nav ul{gap:clamp(13px,1.9vw,30px)}
.nav a.lk{font-size:11.5px;letter-spacing:.2em;color:#2B3A31;font-weight:400;
          border-bottom:1.5px solid transparent;padding-bottom:3px}
.nav a.lk:hover{border-bottom-color:var(--terracotta);color:var(--terracotta)}
.nav a.lk[aria-current="page"]{border-bottom-color:var(--terracotta);color:var(--terracotta)}
.nav.on-dark,.nav.on-light{color:#2B3A31}
html{scroll-padding-top:92px}
@media(max-width:860px){
  .nav{flex-direction:row;align-items:center;gap:10px;padding:10px clamp(14px,4vw,24px)}
  .nav .brandlink span{display:none}
  .nav .brandlink img{width:30px}
  .nav ul{flex-wrap:nowrap;overflow-x:auto;gap:16px;justify-content:flex-end;
          -ms-overflow-style:none;scrollbar-width:none}
  .nav ul::-webkit-scrollbar{display:none}
  .nav a.lk{font-size:10.5px;letter-spacing:.12em;white-space:nowrap}
}

/* every hero clears the fixed bar */
.open{padding-top:clamp(104px,16vh,150px)}
.phead{padding-block:clamp(148px,24vh,220px) clamp(56px,10vh,104px)}

/* forest ground: the signal grid and the framework read in cream */
.greenwrap .lab{color:var(--gold)!important}
.greenwrap .lede,.greenwrap h2,.greenwrap h3{color:var(--cream)}
.greenwrap .lede em,.greenwrap h2 em{color:#D79A68}
.greenwrap .measure p,.greenwrap p{color:#D6E2D4}
.greenwrap .measure strong{color:var(--cream)}
.greenwrap .chain{color:#E6EDE2}
.greenwrap .chain em{color:#D79A68}
.greenwrap .sgrid{background:#2C5943;border-color:#2C5943}
.greenwrap .sg{background:#173F2C}
.greenwrap .sg .t{color:#F0E6D8}
.greenwrap .sg .b{color:#AFC3B1}
.greenwrap .space{background:#2C5943;border-color:#2C5943}
.greenwrap .space .sp,
.page.deep.greenwrap .space .sp{background:#173F2C}
.greenwrap .space .ltr{color:var(--clay)}
.greenwrap .space .nm{color:#F0E6D8}
.greenwrap .space .ds{color:#AFC3B1}
.greenwrap::before{opacity:.16!important;mix-blend-mode:normal}
.greenwrap .door.line{border-color:var(--clay);color:#F0C9A8;background:rgba(198,132,89,.16)}
.greenwrap .door.line:hover{background:var(--clay);color:#1C1710}
.greenwrap .pull{border-left-color:var(--gold);color:#E6EDE2}

/* the quiet quote and credential blocks, tightened */
.said blockquote{line-height:1.3}
.facts .t{line-height:1.14}
.ritual .measure p{color:#F6E3D3}
.ritual .measure strong{color:#FFF6EC}
.ritual .pilot{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(30px,5vw,76px);align-items:start;margin-top:clamp(18px,3vh,30px)}
@media(max-width:860px){
  .nav{flex-wrap:wrap;justify-content:center;gap:8px 0;padding:9px clamp(12px,4vw,20px)}
  .nav .brandlink{width:100%;justify-content:center;gap:9px}
  .nav .brandlink span{display:inline;font-size:8.6px;letter-spacing:.2em}
  .nav .brandlink img{width:24px}
  .nav ul{width:100%;flex-wrap:wrap;overflow:visible;justify-content:center;gap:12px 15px}
  .nav a.lk{font-size:9.6px;letter-spacing:.1em;white-space:nowrap;padding-bottom:2px}
  .open{padding-top:clamp(118px,19vh,160px)}
  .phead{padding-block:clamp(150px,24vh,210px) clamp(52px,9vh,96px)}
}

/* ===================== the three lines, for the phone ===================== */
.burger{display:none;appearance:none;background:none;border:0;padding:8px 2px;margin:0;cursor:pointer;
        width:34px;height:34px;flex-direction:column;justify-content:center;gap:5px;align-items:flex-end}
.burger span{display:block;height:1.5px;background:#2B3A31;transition:transform .34s cubic-bezier(.2,.7,.3,1),opacity .2s,width .34s}
.burger span:nth-child(1){width:22px}
.burger span:nth-child(2){width:16px}
.burger span:nth-child(3){width:22px}

@media(max-width:860px){
  .nav{flex-wrap:nowrap;flex-direction:row;align-items:center;justify-content:space-between;
       gap:12px;padding:12px clamp(16px,5vw,24px)}
  .nav .brandlink{width:auto;justify-content:flex-start;gap:10px}
  .nav .brandlink img{width:28px}
  .nav .brandlink span{display:inline;font-size:9px;letter-spacing:.22em}
  .burger{display:flex}
  .nav.open-menu .burger span:nth-child(1){width:22px;transform:translateY(6.5px) rotate(45deg)}
  .nav.open-menu .burger span:nth-child(2){opacity:0;width:0}
  .nav.open-menu .burger span:nth-child(3){width:22px;transform:translateY(-6.5px) rotate(-45deg)}

  .nav ul{position:absolute;left:0;right:0;top:100%;width:auto;display:block;
          background:rgba(243,235,224,.985);
          -webkit-backdrop-filter:saturate(1.1) blur(16px);backdrop-filter:saturate(1.1) blur(16px);
          border-bottom:1px solid rgba(177,134,79,.34);
          padding:0 clamp(16px,5vw,24px);
          max-height:0;overflow:hidden;opacity:0;
          transition:max-height .42s cubic-bezier(.2,.7,.3,1),opacity .28s,padding .42s}
  .nav.open-menu ul{max-height:62vh;opacity:1;padding:6px clamp(16px,5vw,24px) 16px;overflow:auto}
  .nav ul li{border-bottom:1px solid rgba(177,134,79,.22)}
  .nav ul li:last-child{border-bottom:0}
  .nav a.lk{display:block;padding:17px 0;font-size:11.5px;letter-spacing:.2em;border-bottom:0}
  .nav a.lk[aria-current="page"]{border-bottom:0;color:var(--terracotta)}

  .open{padding-top:clamp(104px,16vh,150px)}
  .phead{padding-block:clamp(132px,21vh,200px) clamp(52px,9vh,96px)}
}
@media(max-width:860px){
  .nav ul{background:#F3EBE0}
  .nav.open-menu ul{box-shadow:0 18px 40px -22px rgba(20,32,26,.45)}
}

/* ===================== the menu, brought down into reach ===================== */
@media(max-width:860px){
  .nav{padding-top:max(16px,calc(env(safe-area-inset-top) + 12px));padding-bottom:16px}
  .burger{width:48px;height:48px;padding:12px 0 12px 12px;margin-right:-6px;align-items:flex-end;justify-content:center}
  .burger span{height:1.6px}
  .nav ul{top:100%}
  .nav.open-menu ul{padding-top:8px}
  .nav a.lk{padding:19px 0}
  .open{padding-top:clamp(118px,18vh,160px)}
  .phead{padding-block:clamp(146px,23vh,205px) clamp(52px,9vh,96px)}
}

/* ===================== phone: the menu comes to the thumb ===================== */
@media(max-width:860px){
  /* the top bar keeps the brand only, and stays slim */
  .nav{padding-top:max(12px,calc(env(safe-area-inset-top) + 9px));padding-bottom:12px;
       justify-content:center}
  .nav .brandlink{justify-content:center}

  /* the three lines sit low on the right, inside reach */
  .burger{position:fixed;right:16px;bottom:max(18px,calc(env(safe-area-inset-bottom) + 14px));
          width:56px;height:56px;padding:0;margin:0;border-radius:50%;
          background:#F3EBE0;border:1px solid rgba(177,134,79,.45);
          box-shadow:0 14px 30px -12px rgba(20,32,26,.45);
          display:flex;align-items:center;justify-content:center;gap:5px;z-index:70}
  .burger span{width:20px!important;height:1.6px;margin:0}
  .burger span:nth-child(2){width:14px!important}
  .nav.open-menu .burger span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
  .nav.open-menu .burger span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

  /* the panel rises from the bottom */
  .nav ul{position:fixed;left:0;right:0;top:auto;bottom:0;
          padding:0 clamp(18px,6vw,28px);
          border-top:1px solid rgba(177,134,79,.34);border-bottom:0;
          box-shadow:0 -22px 46px -24px rgba(20,32,26,.5);
          transform:translateY(14px);
          transition:max-height .42s cubic-bezier(.2,.7,.3,1),opacity .28s,padding .42s,transform .42s cubic-bezier(.2,.7,.3,1)}
  .nav.open-menu ul{max-height:70vh;transform:translateY(0);
                    padding:10px clamp(18px,6vw,28px) max(96px,calc(env(safe-area-inset-bottom) + 92px))}
  .nav a.lk{padding:18px 0;font-size:12px}

  .open{padding-top:clamp(104px,16vh,146px)}
  .phead{padding-block:clamp(132px,21vh,196px) clamp(52px,9vh,96px)}
}
@media(max-width:860px){
  /* a backdrop filter would trap the fixed menu inside the bar */
  .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:#F3EBE0}
  .nav ul{-webkit-backdrop-filter:none;backdrop-filter:none;background:#F3EBE0}
}

/* ===================== the sequence, read vertically ===================== */
.vseq{list-style:none;margin:clamp(34px,6vh,64px) 0 0;padding:0;display:grid}
.vs{display:grid;grid-template-columns:clamp(74px,9vw,132px) minmax(0,1fr);
    gap:clamp(18px,3vw,44px);align-items:start;
    padding-block:clamp(30px,5vh,56px);border-top:1px solid var(--rule)}
.vs:last-child{border-bottom:1px solid var(--rule)}
.vs .n{font-family:var(--display);font-size:clamp(2.4rem,5.4vw,4.1rem);line-height:.86;
       color:var(--gold);letter-spacing:-.02em}
.vs h3{margin:0 0 10px;font-family:var(--display);font-weight:400;line-height:1.1;
       font-size:clamp(1.65rem,3.4vw,2.5rem);color:var(--forest)}
.vs .because{margin:0 0 clamp(14px,2.4vh,20px);font-family:var(--display);font-style:italic;
             font-size:clamp(1.12rem,1.5vw,1.4rem);line-height:1.35;color:var(--terracotta);max-width:34ch}
.vs p.body{margin:0;line-height:1.9;color:#3B382F;max-width:56ch;
           font-size:clamp(1.06rem,0.6vw + 0.84rem,1.14rem)}
.vs .built{margin:clamp(12px,2vh,18px) 0 0;font-size:13.4px;line-height:1.85;color:#5C5749;
           max-width:52ch;padding-left:16px;border-left:1px solid var(--rule)}
@media(max-width:620px){
  .vs{grid-template-columns:minmax(0,1fr);gap:10px}
  .vs .n{font-size:2.1rem}
}
/* on forest ground */
.greenwrap .vs{border-color:#2C5943}
.greenwrap .vs h3{color:#F0E6D8}
.greenwrap .vs .because{color:#D79A68}
.greenwrap .vs p.body{color:#D6E2D4}
.greenwrap .vs .built{color:#A9BBAC;border-left-color:#2C5943}

/* ===================== 2 Oct, second pass from the comments ===================== */
/* citations: smaller, and always terracotta */
.said cite{font-size:11.5px;letter-spacing:.14em;color:var(--terracotta)}
.band.dark .said cite,.greenwrap .said cite{color:#D79A68}

/* a paragraph that needs to stand apart from the body around it */
.flint{margin:0;font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.72rem);
       line-height:1.45;color:var(--forest);max-width:40ch;
       padding-top:clamp(18px,3vh,26px);border-top:1px solid var(--rule)}
.flint em,.flint strong{font-weight:400;font-style:italic;color:var(--terracotta)}
.player{margin-top:clamp(26px,4.4vh,44px);max-width:860px}
.player iframe{display:block;width:100%;border:0;background:var(--sand-deep);border-radius:14px}
.plfall{display:grid;gap:10px;align-content:center;justify-items:start;text-decoration:none;
        background:var(--forest);color:var(--cream);padding:clamp(34px,5vw,56px);border-radius:14px;
        min-height:220px;transition:.3s}
.plfall:hover{background:#17452F}
.plfall .k{font-family:var(--util);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.plfall .t{font-family:var(--display);font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.2}
.plfall .g{font-family:var(--util);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
           color:var(--clay);border-bottom:1px solid rgba(198,132,89,.6);padding-bottom:3px;margin-top:6px}

/* ===================== the four steps, drawn as a sequence ===================== */
.quad{--g:clamp(22px,2.8vw,44px);position:relative;display:grid;grid-template-columns:repeat(4,1fr);
      gap:var(--g);margin-top:clamp(40px,6.5vh,78px)}
.quad .q{position:relative;display:grid;gap:13px;justify-items:start;align-content:start}
.quad .q::after{content:"";position:absolute;left:66px;right:calc(-1 * var(--g));top:27px;height:1px;
                background:var(--rule)}
.quad .q:last-child::after{display:none}
.quad .dot{width:55px;height:55px;border-radius:50%;border:1px solid var(--gold);background:var(--sand);
           display:grid;place-items:center;font-family:var(--display);font-size:1.3rem;line-height:1;
           color:var(--gold);position:relative;z-index:1}
.page.deep .quad .dot{background:var(--sand-deep)}
.quad h3{margin:0;font-family:var(--display);font-weight:400;line-height:1.14;
         font-size:clamp(1.3rem,1.9vw,1.68rem);color:var(--forest)}
.quad .w{margin:0;font-family:var(--display);font-style:italic;line-height:1.4;
         font-size:clamp(1rem,1.1vw,1.14rem);color:var(--terracotta);max-width:24ch}
.quadnote{margin:clamp(22px,3.4vh,34px) 0 0;font-family:var(--display);font-style:italic;
          font-size:clamp(1.02rem,1.1vw,1.16rem);color:var(--quiet)}
.quadnote::before{content:"";display:inline-block;width:34px;height:1px;background:var(--gold);
                  vertical-align:middle;margin-right:14px}
@media(max-width:880px){
  .quad{grid-template-columns:repeat(2,1fr);row-gap:clamp(30px,5vh,46px)}
  .quad .q:nth-child(2)::after{display:none}
}
@media(max-width:560px){
  .quad{grid-template-columns:1fr;row-gap:clamp(26px,4vh,36px)}
  .quad .q{grid-template-columns:55px minmax(0,1fr);column-gap:18px;gap:8px 18px;align-items:center}
  .quad .dot{grid-row:1 / span 2}
  .quad h3{grid-column:2;align-self:end}
  .quad .w{grid-column:2;align-self:start}
  .quad .q::after{display:none}
}
/* on forest ground */
.greenwrap .quad .dot{background:var(--forest)}
.greenwrap .quad .q::after{background:#2C5943}
.greenwrap .quad h3{color:#F0E6D8}
.greenwrap .quad .w{color:#D79A68}
.greenwrap .quadnote{color:#A9BBAC}

/* ===================== the credentials, at full scale ===================== */
.found{gap:1px;margin-top:clamp(36px,6vh,66px)}
.found .f{padding:clamp(34px,4vw,62px) clamp(22px,2.4vw,34px);gap:18px}
.found .v{font-size:clamp(3.6rem,7vw,6.2rem);line-height:.86;color:#F6EDDF}
.found .f .v em{font-style:normal;color:var(--clay)}
.found .k{font-size:15.5px;line-height:1.85;color:#C2D1C2;max-width:26ch}
.found .cap{font-family:var(--util);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
            color:var(--gold)}
.found .v.word{font-size:clamp(2.5rem,4.3vw,3.7rem);color:var(--clay)}
.found .v{display:flex;align-items:flex-end;min-height:clamp(3.2rem,6.2vw,5.4rem)}

/* ===================== the navigation, unboxed ===================== */
/* at the top of a page it is type on the page, not a bar */
.nav{background:transparent!important;border-bottom:1px solid transparent!important;
     -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
     transition:background .45s ease,border-color .45s ease,backdrop-filter .45s ease,color .45s ease;
     padding-top:max(20px,calc(env(safe-area-inset-top) + 16px));padding-bottom:20px}
.nav.on-light,.nav.on-light a.lk,.nav.on-light .brandlink span{color:#3B4A3F!important}
.nav.on-dark,.nav.on-dark a.lk,.nav.on-dark .brandlink span{color:#F0E6D8!important}
.nav a.lk{border-bottom-color:transparent}
.nav.on-dark a.lk:hover,.nav.on-dark a.lk[aria-current="page"]{color:#E3A878!important;border-bottom-color:#E3A878}
.nav.on-light a.lk:hover,.nav.on-light a.lk[aria-current="page"]{color:var(--terracotta)!important;border-bottom-color:var(--terracotta)}

/* once the hero is behind you, the faintest ground appears, and no rule */
.nav.stuck{background:rgba(243,235,224,.86)!important;
           -webkit-backdrop-filter:saturate(1.05) blur(16px)!important;
           backdrop-filter:saturate(1.05) blur(16px)!important;
           border-bottom-color:rgba(177,134,79,.16)!important;
           padding-top:max(12px,calc(env(safe-area-inset-top) + 9px));padding-bottom:12px}
.nav.stuck,.nav.stuck a.lk,.nav.stuck .brandlink span{color:#3B4A3F!important}
.nav.stuck a.lk:hover,.nav.stuck a.lk[aria-current="page"]{color:var(--terracotta)!important}
.nav.stuck .burger span{background:#3B4A3F}

@media(max-width:860px){
  .nav{background:transparent!important;padding-top:max(16px,calc(env(safe-area-inset-top) + 12px));padding-bottom:16px}
  .nav.stuck{padding-top:max(10px,calc(env(safe-area-inset-top) + 8px));padding-bottom:10px}
  /* the panel keeps its own solid ground, the bar does not */
  .nav ul{background:#F3EBE0!important}
  .nav.open-menu{background:transparent!important}
}
.nav.stuck{background:rgba(244,237,227,.955)!important}
.shout .after strong{color:#FFF3E6;font-weight:400}
.shout .after + .after{margin-top:clamp(14px,2.2vh,22px)}

/* ===================== clips from the talk ===================== */
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.8vw,40px);
       margin-top:clamp(34px,5.5vh,64px)}
.reels figure{margin:0;display:grid;gap:clamp(14px,2.2vh,20px)}
.reels .h{position:relative;background:var(--forest);aspect-ratio:9/16;overflow:hidden}
.reels video{width:100%;height:100%;object-fit:cover;display:block}
.reels figcaption{font-family:var(--display);font-size:clamp(1.12rem,1.5vw,1.38rem);line-height:1.34;
                  color:var(--forest);max-width:26ch}
.reels figcaption em{font-style:italic;color:var(--terracotta)}
@media(max-width:820px){.reels{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.reels{grid-template-columns:1fr;gap:clamp(26px,5vh,40px)}
  .reels figure{grid-template-columns:1fr}}
.greenwrap .reels figcaption{color:#F0E6D8}
.greenwrap .reels figcaption em{color:#D79A68}

/* ===================== the episode library ===================== */
.eps{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;
     background:var(--rule);border-block:1px solid var(--rule);margin-top:clamp(34px,5.5vh,64px)}
.ep{background:var(--sand);padding:clamp(26px,3vw,38px) clamp(20px,2.2vw,30px);
    display:grid;gap:12px;align-content:start;text-decoration:none;color:inherit;transition:background .3s}
.page.deep .ep{background:var(--sand-deep)}
.ep:hover{background:#EFE4D5}
.ep .m{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
       font-family:var(--util);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase}
.ep .m .no{color:var(--gold)}
.ep .m .dt{color:var(--quiet)}
.ep h3{margin:0;font-family:var(--display);font-weight:400;line-height:1.2;
       font-size:clamp(1.22rem,1.7vw,1.5rem);color:var(--forest)}
.ep p{margin:0;font-size:14.4px;line-height:1.8;color:#5C5749}
.ep .go{font-family:var(--util);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
        color:var(--terracotta);margin-top:2px}

/* ===================== four answers, given room ===================== */
.qa{display:grid;margin-top:clamp(8px,1.4vh,18px)}
.qa .r{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.4vh,22px);
       padding-block:clamp(38px,6.2vh,76px);border-top:1px solid var(--rule)}
.qa .r:first-child{border-top:0;padding-top:clamp(10px,1.6vh,22px)}
.qa .k{font-family:var(--display);font-weight:400;line-height:1.1;
       font-size:clamp(1.9rem,4vw,3.1rem);color:var(--forest)}
.qa p{margin:0;line-height:1.78;color:#3B382F;max-width:46ch;
      font-size:clamp(1.18rem,1.1vw + 0.82rem,1.5rem)}
@media(min-width:900px){
  .qa .r{grid-template-columns:minmax(260px,.38fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
}
/* on forest ground */
.greenwrap .qa .r{border-top-color:#2C5943}
.greenwrap .qa .k{color:#F0E6D8}
.greenwrap .qa p{color:#D2DFD1}

/* ===================== SPACE, read down the page ===================== */
.spacev{display:grid;margin-top:clamp(34px,5.5vh,66px)}
.spacev .row{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(10px,1.8vh,16px);
             padding-block:clamp(34px,5.6vh,66px);border-top:1px solid var(--rule)}
.spacev .row:first-child{border-top:0;padding-top:clamp(8px,1.4vh,18px)}
.spacev .l{font-family:var(--display);font-weight:400;line-height:.82;color:var(--clay);
           font-size:clamp(4.4rem,11vw,9rem);letter-spacing:-.02em}
.spacev .n{font-family:var(--display);font-weight:400;line-height:1.08;color:var(--forest);
           font-size:clamp(1.9rem,4vw,3rem)}
.spacev .d2{margin:0;line-height:1.75;color:#3B382F;max-width:34ch;
            font-size:clamp(1.14rem,1vw + 0.82rem,1.42rem)}
@media(min-width:900px){
  .spacev .row{grid-template-columns:clamp(150px,15vw,230px) minmax(0,1fr);
               column-gap:clamp(30px,5vw,80px);row-gap:clamp(10px,1.6vh,16px);align-items:start}
  .spacev .l{grid-row:1 / span 2;align-self:center;text-align:left}
  .spacev .n{grid-column:2}
  .spacev .d2{grid-column:2}
}
.greenwrap .spacev .row{border-top-color:#2C5943}
.greenwrap .spacev .l{color:var(--clay)}
.greenwrap .spacev .n{color:#F0E6D8}
.greenwrap .spacev .d2{color:#D2DFD1}
.qa p strong{font-weight:400;font-family:var(--display);font-style:italic;color:var(--terracotta)}
.greenwrap .qa p strong{color:#D79A68}

/* ===================== the credentials, read down the page ===================== */
.foundv{display:grid;margin-top:clamp(34px,5.5vh,66px)}
.foundv .row{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(10px,1.8vh,18px);
             padding-block:clamp(36px,6vh,72px);border-top:1px solid #2C5943}
.foundv .row:first-child{border-top:0;padding-top:clamp(8px,1.4vh,20px)}
.foundv .v{font-family:var(--display);font-weight:400;line-height:.8;color:#F6EDDF;
           font-size:clamp(5rem,13vw,11rem);letter-spacing:-.025em}
.foundv .v.word{font-size:clamp(2.9rem,6.4vw,5.4rem);color:var(--clay);line-height:.92}
.foundv .cap{font-family:var(--util);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
             color:var(--gold)}
.foundv .k{margin:0;line-height:1.75;color:#D2DFD1;max-width:40ch;
           font-size:clamp(1.14rem,1vw + 0.82rem,1.42rem)}
@media(min-width:900px){
  .foundv .row{grid-template-columns:clamp(200px,20vw,320px) minmax(0,1fr);
               column-gap:clamp(30px,5vw,80px);row-gap:clamp(10px,1.6vh,16px);align-items:center}
  .foundv .v{grid-row:1 / span 2;align-self:center}
  .foundv .cap{grid-column:2;align-self:end}
  .foundv .k{grid-column:2;align-self:start}
}
.qa .doors{margin-top:clamp(16px,2.6vh,24px)}
@media(min-width:900px){.qa .doors{grid-column:2}}

/* ===================== one voice, alone on the page ===================== */
.solo{display:grid;gap:clamp(22px,3.6vh,38px);max-width:30ch}
.solo blockquote{margin:0;font-family:var(--display);font-weight:400;line-height:1.2;
                 font-size:clamp(2.1rem,5.2vw,4rem);color:var(--forest);text-wrap:balance}
.solo blockquote::before{content:"\201C"}
.solo blockquote::after{content:"\201D"}
.solo cite{font-style:normal;font-family:var(--util);font-size:11.5px;letter-spacing:.14em;
           text-transform:uppercase;color:var(--terracotta);line-height:1.95}
.after-solo{margin:clamp(54px,9vh,120px) 0 0;max-width:40ch;
            font-family:var(--display);font-size:clamp(1.42rem,2.4vw,2.05rem);line-height:1.38;color:var(--forest)}
.after-solo em{font-style:italic;color:var(--terracotta)}
.solo{max-width:none}
.solo blockquote{max-width:16ch}
.solo cite{max-width:40ch}

/* ===================== the six conditions, read down the page ===================== */
.sigv{display:grid;margin-top:clamp(34px,5.5vh,66px)}
.sigv .row{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(10px,1.8vh,16px);
           padding-block:clamp(34px,5.6vh,66px);border-top:1px solid #2C5943}
.sigv .row:first-child{border-top:0;padding-top:clamp(8px,1.4vh,20px)}
.sigv .no{font-family:var(--display);font-weight:400;line-height:.9;color:var(--gold);
          font-size:clamp(2.2rem,5vw,4.2rem);letter-spacing:.02em}
.sigv .nm{font-family:var(--display);font-weight:400;line-height:1.06;color:#F0E6D8;
          font-size:clamp(2.1rem,4.6vw,3.4rem)}
.sigv .ds{margin:0;line-height:1.72;color:#D2DFD1;max-width:38ch;
          font-size:clamp(1.14rem,1vw + 0.82rem,1.42rem)}
@media(min-width:900px){
  .sigv .row{grid-template-columns:clamp(110px,11vw,190px) minmax(0,1fr);
             column-gap:clamp(30px,5vw,80px);row-gap:clamp(10px,1.6vh,16px);align-items:start}
  .sigv .no{grid-row:1 / span 2;align-self:start;padding-top:.08em}
  .sigv .nm{grid-column:2}
  .sigv .ds{grid-column:2}
}

/* ===================== a statement that runs both ways ===================== */
.loopline{display:grid;gap:clamp(26px,4.4vh,48px);margin-top:clamp(30px,5vh,56px);max-width:none}
.loopline p{margin:0;font-family:var(--display);font-weight:400;line-height:1.38;
            font-size:clamp(1.5rem,2.8vw,2.3rem);color:#F0E6D8;max-width:26ch}
.loopline p em{font-style:italic;color:#D79A68}
.loopline p.last{color:#D2DFD1;font-size:clamp(1.24rem,1.7vw,1.6rem);max-width:30ch;
                 padding-top:clamp(20px,3.4vh,32px);border-top:1px solid #2C5943}

/* ===================== the loop, drawn ===================== */
.dwrap{margin:clamp(48px,8vh,96px) 0 0;display:grid;gap:clamp(20px,3.4vh,32px);justify-items:center}
.dwrap svg.dia{width:100%;max-width:820px;height:auto;display:block}
.dwrap figcaption{font-family:var(--display);font-style:italic;text-align:center;
                  font-size:clamp(1.08rem,1.4vw,1.32rem);color:#A9BBAC;max-width:40ch}
.reels.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,4.6vw,72px);
           max-width:840px;margin-inline:auto}
.greenwrap .reels .h{background:#17452F;border:1px solid #2C5943}
@media(max-width:620px){.reels.two{grid-template-columns:1fr;max-width:420px}}

/* ===================== text and picture, side by side ===================== */
.sidebyside{display:grid;gap:clamp(34px,5vw,70px);align-items:center;margin-top:clamp(30px,5vh,56px)}
@media(min-width:960px){.sidebyside{grid-template-columns:minmax(0,.46fr) minmax(0,.54fr)}}
.sidebyside .loopline{margin-top:0}
.sidebyside .dwrap{margin:0}
.sidebyside .dwrap svg.dia{max-width:100%}

/* ===================== the newest episode, with its cover ===================== */
.newest{display:grid;gap:clamp(28px,4.5vw,66px);align-items:center;margin-top:clamp(10px,2vh,24px)}
@media(min-width:860px){.newest{grid-template-columns:minmax(0,.4fr) minmax(0,.6fr)}}
.newest img{width:100%;height:auto;display:block;max-width:420px}
.newest>div{display:grid;gap:clamp(14px,2.4vh,22px);align-content:start}
.newest h2{margin:0;font-family:var(--display);font-weight:400;line-height:1.14;
           font-size:clamp(1.8rem,3.4vw,2.8rem);color:var(--forest);max-width:20ch}
.newest p{margin:0;line-height:1.8;color:#49453A;max-width:44ch;
          font-size:clamp(1.08rem,0.8vw + 0.8rem,1.22rem)}
.newest .doors{margin-top:6px}

/* three to start with */
.starts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
        background:var(--rule);border-block:1px solid var(--rule);margin-top:clamp(32px,5vh,58px)}
.st3{background:var(--sand-deep);padding:clamp(28px,3.2vw,46px) clamp(22px,2.4vw,32px);
     display:grid;gap:14px;align-content:start;text-decoration:none;color:inherit;transition:background .3s}
.st3:hover{background:#E8DCCB}
.st3 .n{font-family:var(--display);font-size:clamp(2.2rem,4vw,3.2rem);line-height:.9;color:var(--gold)}
.st3 h3{margin:0;font-family:var(--display);font-weight:400;line-height:1.18;
        font-size:clamp(1.3rem,1.9vw,1.62rem);color:var(--forest)}
.st3 p{margin:0;font-size:15px;line-height:1.8;color:#5C5749}

/* the episode cards, larger */
.eps{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.ep{padding:clamp(30px,3.4vw,44px) clamp(24px,2.4vw,34px);gap:14px}
.ep h3{font-size:clamp(1.34rem,1.9vw,1.68rem);line-height:1.22}
.ep p{font-size:15.2px;line-height:1.82}
.ep .go{font-size:11px;letter-spacing:.24em}

/* a band that asks one question and nothing else */
.askband .inner{padding-block:clamp(90px,18vh,190px)}
.askband h2{max-width:21ch;font-size:clamp(2.1rem,5.4vw,4.2rem)}

/* ===================== 3 Oct: the comment pass ===================== */
/* a quote alone on terracotta */
.ritual .solo blockquote{color:#FFF6EC}
.ritual .solo cite{color:#F0C9A8}
.ritual .solo .lab{color:#F0C9A8}

/* a band whose headline runs across the frame */
.wideband .inner{padding-block:clamp(96px,19vh,200px)}
.wideband h2{max-width:26ch;font-size:clamp(2.1rem,5.6vw,4.4rem)}

/* a section that asks one thing */
.ask{display:grid;gap:clamp(22px,3.6vh,34px);justify-items:start}
.ask h2{margin:0;font-family:var(--display);font-weight:400;line-height:1.14;
        font-size:clamp(2.1rem,5.2vw,4rem);color:var(--forest);max-width:20ch;text-wrap:balance}
.ask h2 em{font-style:italic;color:var(--terracotta)}
.ask .doors{margin-top:clamp(6px,1.4vh,14px)}

/* ===================== two offers, at full weight ===================== */
.big{display:grid;margin-top:clamp(36px,6vh,70px)}
.big .b{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,2.2vh,20px);
        padding-block:clamp(38px,6.2vh,78px);border-top:1px solid var(--rule)}
.big .b:first-child{border-top:0;padding-top:clamp(8px,1.6vh,22px)}
.big .n{font-family:var(--display);font-weight:400;line-height:.86;color:var(--gold);
        font-size:clamp(3.4rem,8vw,6.6rem);letter-spacing:-.02em}
.big h3{margin:0 0 clamp(14px,2.2vh,20px);font-family:var(--display);font-weight:400;line-height:1.08;
        font-size:clamp(2.1rem,4.6vw,3.5rem);color:var(--forest)}
.big p{margin:0;line-height:1.76;color:#3B382F;max-width:46ch;
       font-size:clamp(1.14rem,1vw + 0.82rem,1.44rem)}
@media(min-width:900px){
  .big .b{grid-template-columns:clamp(150px,15vw,250px) minmax(0,1fr);
          column-gap:clamp(30px,5vw,80px);align-items:start}
}
.ritual .solo cite{color:#FBE0C9}

/* ===================== voices, given their own moment ===================== */
.voices{display:grid;margin-top:clamp(36px,6vh,70px)}
.voices .v{margin:0;display:grid;gap:clamp(20px,3.2vh,30px);
           padding-block:clamp(40px,6.4vh,80px);border-top:1px solid var(--rule)}
.voices .v:first-child{border-top:0;padding-top:clamp(6px,1.4vh,18px)}
.voices blockquote{margin:0;font-family:var(--display);font-weight:400;font-style:italic;
                   line-height:1.34;color:var(--forest);max-width:30ch;
                   font-size:clamp(1.55rem,3vw,2.5rem);position:relative;padding-top:clamp(22px,3.4vh,32px)}
.voices blockquote::before{content:"";position:absolute;top:0;left:0;width:54px;height:1.5px;background:var(--gold)}
.voices figcaption{display:grid;gap:5px}
.voices .nm{font-family:var(--display);font-size:clamp(1.08rem,1.3vw,1.26rem);color:var(--terracotta)}
.voices .ro{font-family:var(--util);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--quiet)}
@media(min-width:1000px){
  .voices .v{grid-template-columns:minmax(0,1fr) minmax(240px,.3fr);
             column-gap:clamp(40px,6vw,96px);align-items:start}
  .voices figcaption{align-self:start;padding-top:clamp(26px,4vh,38px)}
}

/* ===================== 3 Oct copy pass ===================== */
.measure p.stack,.band p.stack{line-height:1.62}
.measure p.sig{font-family:var(--display);font-style:italic;color:var(--terracotta);
               font-size:clamp(1.14rem,1.4vw,1.4rem);line-height:1.5;max-width:30ch}
.subline{margin:clamp(18px,3vh,28px) 0 0;font-family:var(--display);font-style:italic;
         font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.45;color:#D6E2D4;max-width:34ch}
.greenwrap .subline{color:#D6E2D4}
.aftnote{margin:clamp(30px,4.6vh,48px) 0 0;max-width:50ch;line-height:1.8;color:#A9BBAC;
         font-size:clamp(1.02rem,0.8vw + 0.76rem,1.16rem)}
.who .sub2{font-family:var(--util);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
           color:var(--gold);margin:0 0 12px}
.one .creed{font-family:var(--display);font-style:italic;color:var(--clay);
            font-size:clamp(1.2rem,2vw,1.6rem);margin-top:clamp(26px,4vh,40px);max-width:30ch}
.bigline{margin:clamp(40px,6.5vh,80px) 0 0;font-family:var(--display);line-height:1.3;
         font-size:clamp(1.7rem,3.6vw,2.9rem);color:var(--forest);max-width:24ch}
.bigline em{font-style:italic;color:var(--terracotta)}
.greenwrap .bigline{color:#F0E6D8}
.greenwrap .bigline em{color:#D79A68}

/* ===================== the Enquire button in the navigation ===================== */
.navcta{appearance:none;cursor:pointer;font-family:var(--util);font-size:10.5px;letter-spacing:.22em;
        text-transform:uppercase;padding:9px 18px;border:1px solid currentColor;background:transparent;
        color:inherit;transition:.3s;white-space:nowrap;margin-left:clamp(14px,2vw,28px)}
.navcta:hover{background:var(--clay);border-color:var(--clay);color:#1C1710}
.nav.on-dark .navcta{color:#F0E6D8}
.nav.on-light .navcta{color:#3B4A3F}
.nav.stuck .navcta{color:#3B4A3F}
@media(max-width:860px){
  .navcta{position:fixed;right:84px;bottom:max(18px,calc(env(safe-area-inset-bottom) + 14px));
          margin:0;z-index:70;background:#F3EBE0;border-color:rgba(177,134,79,.45);color:#3B4A3F!important;
          box-shadow:0 14px 30px -12px rgba(20,32,26,.45);padding:0 20px;height:56px;border-radius:28px;
          display:inline-flex;align-items:center}
  .nav.open-menu .navcta{display:none}
}

/* the title card above the two doors */
.titlecard{padding-block:clamp(72px,12vh,150px)}
.titlecard>div{display:grid;gap:clamp(14px,2.2vh,20px);justify-items:center;text-align:center}
.titlecard h2{margin:0;font-family:var(--display);font-weight:400;line-height:1.1;
              font-size:clamp(2.4rem,6vw,4.6rem);color:var(--forest)}

/* the doors: deeper ground so the type reads, and a cleaner hierarchy */
.who>div{min-height:72svh}
.who>div::after{background:linear-gradient(180deg,rgba(14,32,22,.10) 0%,rgba(14,32,22,.52) 52%,rgba(12,30,21,.88) 100%)!important}
.who .lab{color:#E3A878}
.who h4{margin:0 0 16px;max-width:17ch}
.who p{margin:0 0 26px;color:#E4EBE2;font-size:1.08rem;line-height:1.78;max-width:38ch}
.who p em{font-style:italic;color:#E3A878}
.foundv .cap{font-size:13px;letter-spacing:.2em;color:var(--clay)}

/* ===================== the library, read as an index ===================== */
.index{display:grid;margin-top:clamp(34px,5.5vh,64px);border-top:1px solid var(--rule)}
.ix{display:grid;grid-template-columns:clamp(48px,5vw,76px) minmax(0,1fr);
    gap:6px clamp(18px,2.6vw,38px);align-items:baseline;
    padding-block:clamp(22px,3.4vh,34px);border-bottom:1px solid var(--rule);
    text-decoration:none;color:inherit;transition:background .35s,padding .35s}
.ix:hover{background:#EFE4D5;padding-inline:clamp(10px,1.6vw,22px);
          margin-inline:calc(-1 * clamp(10px,1.6vw,22px))}
.ix .no{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1;
        color:var(--gold);transition:color .35s}
.ix:hover .no{color:var(--terracotta)}
.ix .ti{font-family:var(--display);font-weight:400;line-height:1.22;color:var(--forest);
        font-size:clamp(1.3rem,2.3vw,2rem);max-width:30ch}
.ix .dt{grid-column:2;font-family:var(--util);font-size:10.5px;letter-spacing:.22em;
        text-transform:uppercase;color:var(--quiet)}
@media(min-width:1040px){
  .ix{grid-template-columns:clamp(60px,5vw,80px) minmax(0,1fr) auto;align-items:baseline}
  .ix .ti{max-width:42ch}
  .ix .dt{grid-column:3;text-align:right;white-space:nowrap}
}

/* series headings inside the library */
.serie{display:grid;gap:8px;margin-top:clamp(52px,8vh,100px);margin-bottom:clamp(4px,1vh,12px)}
.serie:first-of-type{margin-top:clamp(30px,5vh,56px)}
.sname{font-family:var(--display);font-weight:400;line-height:1.1;color:var(--forest);
       font-size:clamp(1.8rem,3.4vw,2.7rem)}
.sblurb{font-family:var(--display);font-style:italic;color:var(--terracotta);
        font-size:clamp(1.04rem,1.3vw,1.24rem);line-height:1.4;max-width:34ch}
.index + .serie{margin-top:clamp(56px,9vh,110px)}
.ix .gu{font-family:var(--display);font-style:italic;color:var(--terracotta);
        font-size:clamp(1rem,1.2vw,1.18rem);grid-column:2}
@media(min-width:1040px){.ix .gu{grid-column:2}}

/* ===================== a statement on green ===================== */
.greenstate{position:relative;isolation:isolate;background:var(--forest);color:var(--cream);
            padding-block:clamp(72px,14vh,170px)}
.greenstate::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url(img/tex-grain.jpg);background-size:420px 420px;background-repeat:repeat;
  opacity:.14}
.greenstate>*{position:relative}
.greenstate .lab{color:var(--gold);display:block;margin-bottom:clamp(22px,3.6vh,34px)}
.greenstate .build{margin:0;font-family:var(--display);font-weight:400;line-height:1.5;
                   font-size:clamp(1.3rem,2.4vw,1.95rem);color:#D6E2D4;max-width:30ch}
.greenstate .line{margin:clamp(34px,5.4vh,60px) 0 0;font-family:var(--display);font-weight:400;
                  line-height:1.16;font-size:clamp(2rem,5.2vw,3.9rem);color:#F0E6D8;max-width:20ch;
                  text-wrap:balance}
.greenstate .line em{font-style:italic;color:var(--clay)}
@media(min-width:960px){.sidebyside{grid-template-columns:minmax(0,.34fr) minmax(0,.66fr)}}
.sidebyside .dwrap svg.dia{max-width:none;width:100%}
.sidebyside .loopline p{font-size:clamp(1.3rem,2.2vw,1.9rem);max-width:24ch}
.sidebyside .loopline p.last{font-size:clamp(1.14rem,1.5vw,1.42rem);max-width:28ch}
.shoutline{margin:0;font-family:var(--display);font-weight:400;line-height:1.16;
           font-size:clamp(1.85rem,4vw,3rem);color:var(--terracotta);max-width:18ch;
           padding-left:clamp(20px,3vw,34px);border-left:2px solid var(--clay)}
.shoutline em{font-style:italic;color:var(--forest)}
/* the two doors title card, on linen */
.titlecard::before{opacity:1!important;mix-blend-mode:normal!important;
  background-image:linear-gradient(rgba(245,237,227,.86),rgba(243,234,222,.90)), url(img/fabric.jpg)!important;
  background-size:cover,cover!important;background-position:center,center!important;
  background-repeat:no-repeat,no-repeat!important}

/* a quote spread across the terracotta */
.solo.wide{justify-items:start;max-width:none}
.solo.wide blockquote{max-width:20ch;font-size:clamp(2.2rem,6.2vw,5.2rem);line-height:1.1}
.ritual .solo.wide blockquote em{font-style:italic;color:#FBD9BE}
.solo.wide cite{max-width:46ch}

/* the things she already tried */
.tried{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.8vh,18px)}
.tried li{font-family:var(--display);font-weight:400;line-height:1.14;
          font-size:clamp(1.65rem,3.6vw,2.7rem);color:var(--forest)}
.tried li em{font-style:italic;color:var(--terracotta)}
.tried li:nth-child(2){padding-left:clamp(14px,3vw,46px)}
.tried li:nth-child(3){padding-left:clamp(28px,6vw,92px)}
.tried li:nth-child(4){padding-left:clamp(42px,9vw,138px)}

/* a heading that uses the full width */
.widehead{max-width:none!important;font-size:clamp(2.2rem,5.4vw,4.2rem)!important;line-height:1.1}
.widehead em{font-style:italic;color:var(--terracotta)}
.greenwrap .widehead em{color:#D79A68}

/* the group experience, on terracotta */
.groupband .sechead h2{color:#FFF6EC}
.groupband .measure p{color:#F6E3D3}
.groupband .measure p strong{color:#FFF6EC}
.groupband .lab{color:#F0C9A8}

/* a question on the flowing cloth */
.flowy::before{opacity:1!important;mix-blend-mode:normal!important;
  background-image:linear-gradient(rgba(245,237,227,.80),rgba(240,231,217,.90)), url(img/fabric.jpg)!important;
  background-size:cover,cover!important;background-position:center,center!important;
  background-repeat:no-repeat,no-repeat!important}
.flowy{padding-block:clamp(96px,18vh,200px)}

/* the three disciplines, named in colour */
.disc{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,2vh,20px)}
.disc li{line-height:1.75;color:#3B382F;font-size:clamp(1.08rem,0.8vw + 0.8rem,1.22rem);
         padding-left:clamp(16px,2.2vw,26px);border-left:2px solid var(--rule)}
.disc li .w{font-family:var(--display);font-style:italic;color:var(--terracotta);
            font-size:clamp(1.24rem,1.5vw,1.5rem)}
.disc li:nth-child(1){border-left-color:var(--clay)}
.disc li:nth-child(2){border-left-color:var(--gold)}
.disc li:nth-child(3){border-left-color:var(--forest)}
.measure p.sig{font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.32;max-width:22ch;
               margin-block:clamp(10px,1.8vh,18px)}
.lede{font-size:clamp(1.95rem,4.4vw,3.3rem);line-height:1.2;max-width:19ch}
.split > .rv > p.sig{margin-top:clamp(30px,5vh,52px);max-width:17ch}
p.sig{font-family:var(--display)!important;font-style:italic;color:var(--terracotta);
      font-size:clamp(1.55rem,3vw,2.35rem)!important;line-height:1.32;max-width:19ch;
      margin:clamp(30px,5vh,52px) 0 0}
.greenwrap p.sig{color:#D79A68}

/* the same statement, on terracotta */
.greenstate.warm{background:var(--terracotta);color:#F8EFE5}
.greenstate.warm::before{opacity:.5;mix-blend-mode:soft-light}
.greenstate.warm .lab{color:#F0C9A8}
.greenstate.warm .build{color:#F6E3D3}
.greenstate.warm .line{color:#FFF6EC}
.greenstate.warm .line em{color:#FBD9BE}

/* ===================== 3 Oct: second comment pass ===================== */
/* the credentials in terracotta, lifted just enough to hold on the deep green */
.foundv .v,.foundv .v.word{color:#D4703E}

/* the client quotes, set more quietly: italic Garamond, a gold hair instead of quote marks */
.said blockquote{font-style:italic;font-size:clamp(1.7rem,3.5vw,2.6rem);line-height:1.28;
                 letter-spacing:-.004em;max-width:24ch}
.said blockquote::before{content:"";display:block;width:54px;height:1px;background:var(--gold);
                         opacity:.85;margin-bottom:clamp(20px,3.2vh,34px)}
.said blockquote::after{content:none}
.said cite{font-size:11.5px;letter-spacing:.2em;color:var(--clay);font-style:normal}

/* a portrait allowed its full height, no crop */
.split img.tall{aspect-ratio:1197/1800}

/* the cost figures, big, on a light ground */
.foundv.light .v,.foundv.light .v.word{color:var(--terracotta)}
.foundv.light .cap{color:var(--gold)}
.foundv.light .k{color:#4A4538}
.foundv.light .row{border-top-color:rgba(177,134,79,.26)}
.page.deep .aftnote{color:#4A4538;max-width:58ch}

/* the loop: less text, a larger diagram */
@media(min-width:960px){.sidebyside{grid-template-columns:minmax(0,.33fr) minmax(0,.67fr)}}

/* the episode library, bigger and plainly clickable */
.ix{padding-block:clamp(26px,4vh,42px)}
.ix .no{font-size:clamp(1.9rem,3vw,2.7rem);color:var(--clay)}
.ix .ti{font-size:clamp(1.5rem,2.8vw,2.5rem);max-width:34ch;transition:color .35s}
.ix .ti::after{content:"\2192";display:inline-block;margin-left:.4em;color:var(--clay);
               opacity:0;transform:translateX(-10px);transition:opacity .35s,transform .35s}
.ix:hover .ti{color:var(--terracotta)}
.ix:hover .ti::after{opacity:1;transform:translateX(0)}
@media(min-width:1040px){.ix .ti{max-width:46ch}}

/* ===================== Founders: the method takes the title ===================== */
.phead.veil-clay::after{background:linear-gradient(180deg,rgba(150,66,33,.90) 0%,rgba(168,81,42,.86) 42%,rgba(126,54,27,.95) 100%)}
.phead.veil-clay{color:#FBEADC}
.phead.veil-clay .lab{color:#F2C9A6}
.phead.veil-clay h1{color:#FFF6EC}
.phead.veil-clay h1 em{color:#F7D2B0}
.phead.veil-clay .sub{color:#F4DACA}
.phead.veil-clay .hair{background:#F0C9A8}
.phead.veil-clay .door.fill{background:#FFF6EC;color:#8E3A1C;border-color:#FFF6EC}
.phead.veil-clay .door.fill:hover{background:transparent;color:#FFF6EC}
.phead .promise{margin:0;font-family:var(--display);font-style:italic;line-height:1.14;
                font-size:clamp(1.5rem,3.4vw,2.6rem);max-width:20ch}
.phead.veil-clay .promise{color:#F7D2B0}
.phead.veil-clay .promise em{font-style:italic}

/* one column, read downward */
.downcol{display:grid;gap:clamp(30px,5vh,56px);margin-top:clamp(26px,4.4vh,44px)}

/* a headline allowed to run the width of the page */
.widehead{max-width:30ch}
/* the navigation reads light while it sits on the terracotta hero (wide screens only:
   on a phone the links live inside a sand panel and must stay dark) */
@media(min-width:861px){
  .phead.veil-clay .nav:not(.stuck) .lk,
  .phead.veil-clay .nav:not(.stuck) .brandlink span{color:#FBEADC!important}
  .phead.veil-clay .nav:not(.stuck) .lk:hover,
  .phead.veil-clay .nav:not(.stuck) .lk[aria-current="page"]{color:#FFF6EC!important;border-bottom-color:#F7D2B0!important}
  .phead.veil-clay .nav:not(.stuck) .navcta{color:#FFF6EC!important;border-color:rgba(255,246,236,.55)}
  .phead.veil-clay .nav:not(.stuck) .navcta:hover{background:#FFF6EC;color:#8E3A1C}
}
@media(max-width:860px){
  .phead.veil-clay .nav:not(.stuck) .brandlink span{color:#FBEADC!important}
}
.vs .because{max-width:48ch}
.bigline{max-width:28ch}

/* 3 Oct: the client quotes set in Lato, the other of the two faces */
.said blockquote{font-family:var(--util);font-style:normal;font-weight:300;
                 font-size:clamp(1.42rem,2.7vw,2.15rem);line-height:1.5;
                 letter-spacing:-.004em;max-width:28ch}
.said cite{font-family:var(--display);font-style:italic;font-weight:400;text-transform:none;
           font-size:clamp(1.02rem,1.2vw,1.2rem);letter-spacing:0;color:var(--clay);line-height:1.5}

/* one clip, alone, centred */
.reels.solo1{grid-template-columns:minmax(0,1fr);max-width:430px;margin-inline:auto;
             margin-top:clamp(34px,5.5vh,64px)}
@media(max-width:560px){.reels.solo1{max-width:360px}}

/* air after the three disciplines, before the line that closes them */
.disc + p{margin-top:clamp(24px,3.6vh,38px)}

/* the promise line, on the linen ground */
.phead.veil-light .promise{color:var(--terracotta)}

/* Leti's quote, allowed the width of the page */
.solo.wide blockquote{max-width:27ch}
.solo.wide cite{max-width:none}

/* the things already tried, flush left */
.tried li:nth-child(2),.tried li:nth-child(3),.tried li:nth-child(4){padding-left:0}
.tried{gap:clamp(12px,2.2vh,22px)}

/* ===================== 3 Oct: the second pass on Founders and Organisations ===================== */
/* the mark in the navigation, larger */
.nav .brandlink img{width:58px!important}
@media(max-width:860px){.nav .brandlink img{width:46px!important}}

/* Leti's quote, smaller but still the width of the page */
.solo.wide blockquote{font-size:clamp(1.9rem,4.4vw,3.6rem);max-width:38ch;line-height:1.16}

/* the terracotta statement allowed a wider measure, so it breaks where it should */
.shout p.line{max-width:26ch}

/* the cost figures, a step down */
.foundv.light .v{font-size:clamp(3.6rem,9vw,7.4rem)}

/* ===================== 3 Oct, final pass: six items in the navigation ===================== */
@media(min-width:861px){
  .nav ul{gap:clamp(12px,1.7vw,26px)}
  .nav a.lk{font-size:10.5px;letter-spacing:.17em}
  .nav .brandlink span{display:none}
}
@media(min-width:1180px){
  .nav .brandlink span{display:inline}
  .nav a.lk{font-size:11px;letter-spacing:.19em}
}

/* the credentials, said quietly */
.foundv.quiet .k{max-width:34ch;line-height:1.7}
.foundv.quiet .row{padding-block:clamp(16px,2.6vh,26px)}
.greenwrap .aftnote .inlink{color:#D79A68;text-decoration:none;border-bottom:1px solid rgba(215,154,104,.45);
                            padding-bottom:2px;transition:.3s}
.greenwrap .aftnote .inlink:hover{color:#F0C9A8;border-bottom-color:#F0C9A8}

/* the business case, the largest statement on Founders */
.casestate{margin:clamp(26px,4.4vh,48px) 0 0;font-family:var(--display);font-weight:400;
           line-height:1.08;letter-spacing:-.012em;color:var(--forest);
           font-size:clamp(2.4rem,6.4vw,5.2rem);max-width:21ch}
.casestate em{font-style:italic;color:var(--terracotta)}

/* the Reset Sequence, said once */
.vseq.tight .vs{padding-block:clamp(22px,3.4vh,34px)}
.vseq.tight .because{margin-bottom:0}

/* ===================== 3 Oct, final pass: restraint ===================== */
/* more air between major sections, so the site reads curated rather than filled */
.page{padding-block:clamp(84px,15vh,190px)}
.shout{padding-block:clamp(90px,17vh,200px)}
.ritual{padding-block:clamp(88px,16vh,195px)}
.one{padding-block:clamp(96px,18vh,210px)}
.band .inner{padding-block:clamp(96px,18vh,200px)}
.loopwrap{padding-block:clamp(96px,18vh,205px)}

/* a statement that carries a section is allowed to sit alone */
.measure p strong{display:inline}
.measure > p:last-child:has(strong:only-child){margin-top:clamp(26px,4.2vh,44px)}

/* the signals and the section heads breathe a little more */
.sechead{margin-bottom:clamp(14px,2.6vh,30px)}
p.sig{margin-top:clamp(30px,5vh,56px)!important}

/* Founders opens in the deep green, on the leaf */
.phead.veil-forest .promise{color:#E8B189}
.phead.veil-forest .hair{background:var(--gold)}
.phead.veil-forest .door.fill{background:#FFF6EC;color:#16402F;border-color:#FFF6EC}
.phead.veil-forest .door.fill:hover{background:transparent;color:#FFF6EC}
@media(min-width:861px){
  .phead.veil-forest .nav:not(.stuck) .lk,
  .phead.veil-forest .nav:not(.stuck) .brandlink span{color:#EDE3D6!important}
  .phead.veil-forest .nav:not(.stuck) .lk:hover,
  .phead.veil-forest .nav:not(.stuck) .lk[aria-current="page"]{color:#FFF6EC!important;border-bottom-color:var(--gold)!important}
  .phead.veil-forest .nav:not(.stuck) .navcta{color:#FFF6EC!important;border-color:rgba(255,246,236,.5)}
  .phead.veil-forest .nav:not(.stuck) .navcta:hover{background:#FFF6EC;color:#16402F}
}
@media(max-width:860px){
  .phead.veil-forest .nav:not(.stuck) .brandlink span{color:#EDE3D6!important}
}

/* the Reset Sequence heading, centred over the drawing */
.loopwrap .sechead h2{color:var(--cream)}
.loopwrap .sechead .lab{color:var(--gold)}
.greenwrap .aftnote .inlink,.loopwrap .aftnote .inlink{color:#D79A68}

/* the Keynote opening: a photograph of Etienny, read as a photograph */
.phead.veil-dark::after{background:linear-gradient(180deg,rgba(12,26,19,.38) 0%,rgba(12,26,19,.30) 36%,rgba(10,24,17,.88) 100%)}
.phead.veil-dark .hair{background:var(--gold)}
.phead.veil-dark .promise{color:#E8B189}
@media(min-width:861px){
  .phead.veil-dark .nav:not(.stuck) .lk,
  .phead.veil-dark .nav:not(.stuck) .brandlink span{color:#F2EADC!important}
  .phead.veil-dark .nav:not(.stuck) .lk:hover,
  .phead.veil-dark .nav:not(.stuck) .lk[aria-current="page"]{color:#FFF6EC!important;border-bottom-color:var(--gold)!important}
  .phead.veil-dark .nav:not(.stuck) .navcta{color:#FFF6EC!important;border-color:rgba(255,246,236,.5)}
  .phead.veil-dark .nav:not(.stuck) .navcta:hover{background:#FFF6EC;color:#16402F}
}
@media(max-width:860px){.phead.veil-dark .nav:not(.stuck) .brandlink span{color:#F2EADC!important}}

/* ===================== the photographs come forward ===================== */
/* the veil was crushing the picture. It now darkens only where the type sits. */
.band.dark::after{
  background:
    linear-gradient(100deg,rgba(10,26,18,.86) 0%,rgba(10,26,18,.72) 26%,rgba(10,26,18,.30) 56%,rgba(10,26,18,.02) 82%,rgba(10,26,18,0) 100%),
    linear-gradient(180deg,rgba(12,28,20,.06) 0%,rgba(12,28,20,.10) 42%,rgba(10,26,18,.56) 100%);
}

/* the promise under the two doors, at a size that claims it */
.open .whisper{font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.18;max-width:20ch;
               margin-top:clamp(26px,4.4vh,44px)}

/* the back catalogue, named as what it is */
.archmark{display:grid;gap:clamp(10px,1.8vh,16px);margin-top:clamp(34px,5.5vh,60px);
          padding-top:clamp(22px,3.4vh,32px);border-top:1px solid var(--rule);max-width:60ch}
.archmark .arch{font-family:var(--util);font-size:11px;letter-spacing:.34em;text-transform:uppercase;
                color:var(--gold)}
.archmark p{margin:0;font-family:var(--display);font-style:italic;color:#6A6457;
            font-size:clamp(1.08rem,1.3vw,1.3rem);line-height:1.55}
.archmark + .serie{margin-top:clamp(36px,6vh,66px)}

/* evidence, with its source attached */
.src{display:inline-block;margin-top:6px;font-family:var(--util);font-size:11px;letter-spacing:.2em;
     text-transform:uppercase;color:var(--gold);text-decoration:none;
     border-bottom:1px solid rgba(177,134,79,.4);padding-bottom:2px;transition:.3s}
.src:hover{color:var(--terracotta);border-bottom-color:var(--terracotta)}
.open .whisper{max-width:40ch}

/* the business case: the first sentence holds together on one line */
.casestate{font-size:clamp(2.1rem,5.1vw,4.1rem);max-width:none}

/* the dark veil heroes: eyebrow and button read against bright earth */
.phead.veil-dark .lab{color:#FBEADC;text-shadow:0 1px 10px rgba(10,24,17,.55)}
.phead.veil-dark .door.fill{background:#FFF6EC;color:#1C1710;border-color:#FFF6EC}
.phead.veil-dark .door.fill:hover{background:transparent;color:#FFF6EC}
.phead.veil-dark::after{background:
  radial-gradient(120% 90% at 0% 58%,rgba(10,24,17,.62) 0%,rgba(10,24,17,.22) 46%,rgba(10,24,17,0) 72%),
  linear-gradient(180deg,rgba(12,26,19,.30) 0%,rgba(12,26,19,.16) 34%,rgba(10,24,17,.86) 100%)}
/* the Reset Sequence drawing, larger on the page */
.loopwrap .inner{max-width:1180px}

/* ===================== the enquiry forms ===================== */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{display:grid;gap:clamp(12px,2vh,18px);padding:clamp(22px,3.4vh,34px) 0}
.sent-l{margin:0;font-family:var(--display);font-size:clamp(1.9rem,4vw,2.8rem);
        line-height:1.15;color:var(--forest)}
.sent-b{margin:0;line-height:1.85;color:#49453A;max-width:42ch;
        font-size:clamp(1.02rem,0.8vw + 0.76rem,1.14rem)}
.err{margin:clamp(14px,2.2vh,20px) 0 0;font-family:var(--util);font-size:14px;
     line-height:1.7;color:var(--terracotta)}
.form input:invalid:not(:placeholder-shown){border-bottom-color:var(--terracotta)}

/* ---------------------------------------------------------------------------
   3 October 2026. On a phone, once the header sticks, the floating Enquire and
   menu buttons come up into the bar and ran straight over the wordmark: the
   name ended at 301px and Enquire began at 242px. The mark alone identifies her
   at that size, so the name steps aside only while the header is stuck.
   --------------------------------------------------------------------------- */
@media(max-width:860px){
  .nav.stuck .brandlink{justify-content:flex-start;min-width:0}
  .nav.stuck .brandlink span{display:none}
}

/* ---------------------------------------------------------------------------
   Podcast episode titles in Lato rather than EB Garamond. Eti, 3 October 2026.
   A list of thirty titles reads as a list, not as thirty small headlines, and
   Garamond at that size was doing more work than the page needed.
   The numerals stay Garamond: they are ornament, not reading.
   --------------------------------------------------------------------------- */
.ix .ti{font-family:var(--util);font-weight:400;letter-spacing:.002em;line-height:1.38}
.ep h3{font-family:var(--util);font-weight:400;letter-spacing:.002em;line-height:1.36}
.st3 h3{font-family:var(--util);font-weight:400;letter-spacing:.002em;line-height:1.34}

/* ---------------------------------------------------------------------------
   The Reset Sequence on paper. Eti, 3 October 2026. The circle and the four
   steps were built for a dark ground, so the heading and the caption need
   bringing back to ink when the section is light.
   --------------------------------------------------------------------------- */
.loopwrap:not(.greenwrap) .sechead h2{color:var(--forest)}
.loopwrap:not(.greenwrap) .sechead h2 em{color:var(--terracotta)}
.loopwrap:not(.greenwrap) .cap{color:var(--quiet)}