/* Glacial Indifference (OFL), self-hosted - the face of Anna's mockups,
   the free cousin of Neutraface. */
@font-face{font-family:'Glacial Indifference';src:url('/fonts/GlacialIndifference-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Glacial Indifference';src:url('/fonts/GlacialIndifference-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Glacial Indifference';src:url('/fonts/GlacialIndifference-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Glacial Indifference';src:url('/fonts/GlacialIndifference-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

/* ==========================================================================
   Wild by Anna
   Palette is white plus the two colours off Anna's moth: the lemon yellow of
   the bands and the pale green of the wings. Nothing else earns a place.
   Display type is Anton, set enormous and tight, exactly as in her mockup.
   ========================================================================== */

:root{
  --paper:#FBF8F3;          /* the cream her mockups sit on */
  --paper-2:#F7F3EC;
  --ink:#14150F;
  --ink-mid:#55574B;
  --ink-soft:#83857A;
  --rule:#E3E4DC;
  --rule-strong:#C9CBC0;

  /* the moth: lemon band, seafoam wing, and the tints pulled off them.
     Anna wanted more of this through the whole site, not just the hero. */
  --yellow:#FCCE01;
  --yellow-deep:#C79E00;
  --yellow-tint:#FDF1C4;
  --yellow-wash:#FEF8E4;
  --green:#5AABAA;          /* the band colour off the mockup */
  --green-deep:#2A8D8C;
  --green-tint:#D9EDED;
  --green-wash:#EDF7F7;
  --cyan:#2DBBBD;           /* the brushy wash */
  --pink:#E068AC;           /* foxglove */
  --leaf:#799F76;
  --slate:#4A4E47;          /* Anna's charcoal for the big headings */

  --wrap:1440px;
  --pad:clamp(20px,4.2vw,60px);
  --hero-pad:clamp(12px,1.5vw,26px);
  --art-top:clamp(50px,7vh,100px);
  --head-h:81px;      /* measured; keeps the art flush with the foot of the hero */
  --hero-h:62vh;
  --sp:clamp(64px,7vw,116px);

  /* Anna's typeface: Glacial Indifference, the face of her mockups
     (the open-licence cousin of Neutraface), one family for everything. */
  --f-display:'Glacial Indifference','Century Gothic','Trebuchet MS',sans-serif;
  --f-body:'Glacial Indifference','Century Gothic','Trebuchet MS',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.72;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* width/height attributes are set on every image to reserve layout space, so
   height must be released back to auto or the attribute wins as a size hint */
img,svg{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ==========================================================================
   Fixed backdrop
   The stand of umbellifers, the disc and the washes are pinned to the viewport
   and never move. Content scrolls over the top of them; sections that want to
   show the planting through just leave their background transparent.
   ========================================================================== */
.bg-stage{
  position:fixed;inset:0;z-index:0;
  background:var(--paper);
  overflow:hidden;pointer-events:none;
}
/* The planting sits beside the wordmark, in the hero band, exactly as in the
   mockup - not down at the foot of the screen. The sun and the washes are drawn
   into the same SVG, so there is one element to place and nothing can drift.
   It runs on past the bottom of the hero; the first white section crops it. */
.bg-art{
  position:absolute;
  right:0;
  top:var(--art-top);
  height:calc(var(--hero-h) + var(--head-h) - var(--art-top));
  width:100%;
}
.bg-art picture,.bg-art img{
  display:block;width:100%;height:100%;
  object-fit:contain;
  object-position:right bottom;
}
/* Phones only: a faint full-viewport pass of the same planting, sitting under
   the hero's own crop. It exists so the hazy gaps between sections reveal
   artwork while scrolling, on every page, rather than bare cream. */
.bg-veil{display:none}
@media (max-width:860px){
  .bg-veil{display:block;position:absolute;inset:0;opacity:.34}
  .bg-veil picture,.bg-veil img{
    display:block;width:100%;height:100%;
    object-fit:cover;object-position:88% bottom;
  }
}
/* Phones only: the sun alone, at full strength, laid in exactly the veil's
   geometry so it lands on the veil's own faint sun. The band's crop keeps a
   second sun out via its sun-free mobile source. */
.bg-sun{display:none}
@media (max-width:860px){
  .bg-sun{display:block;position:absolute;inset:0}
  .bg-sun picture,.bg-sun img{
    display:block;width:100%;height:100%;
    object-fit:cover;object-position:88% bottom;
  }
}

/* everything else rides above the backdrop */
.site-head,main,.site-foot{position:relative}
main{z-index:1}
.site-foot{z-index:1;background:var(--paper)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--yellow);padding:10px 16px;font:400 13px/1 var(--f-display);letter-spacing:.16em}

/* --- shared type ------------------------------------------------------- */
.display{
  font-family:var(--f-display);
  text-transform:uppercase;
  line-height:.9;
  letter-spacing:-.005em;
  font-weight:400;
}
.eyebrow{
  font-family:var(--f-body);
  font-weight:500;
  font-size:clamp(11px,.85vw,13px);
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 18px;
}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.62;color:var(--ink-mid)}
.muted{color:var(--ink-mid)}

/* --- buttons ----------------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--f-display);
  font-size:13px;
  letter-spacing:.19em;
  text-transform:uppercase;
  text-decoration:none;
  padding:15px 27px 13px;
  border:1.5px solid var(--ink);
  background:transparent;
  color:var(--ink);
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--paper)}
.btn--fill{background:var(--yellow);border-color:var(--yellow)}
.btn--fill:hover,.btn--fill:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--ghost{border-color:var(--ink)}

.textlink{
  display:inline-block;
  font-family:var(--f-display);
  font-size:12.5px;
  letter-spacing:.19em;
  text-transform:uppercase;
  text-decoration:none;
  padding-bottom:5px;
  border-bottom:2px solid var(--yellow);
  transition:border-color .22s ease;
}
.textlink:hover,.textlink:focus-visible{border-bottom-color:var(--ink)}

/* --- header ------------------------------------------------------------ */
.site-head{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.site-head.is-stuck{border-bottom-color:var(--rule)}
.head-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding-top:20px;padding-bottom:20px;
}
.brand{
  font-family:var(--f-display);
  font-size:clamp(15px,1.25vw,18px);
  letter-spacing:.11em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}
.nav{display:flex;align-items:center;gap:clamp(16px,2vw,34px)}
.nav a{
  font-family:var(--f-display);
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  padding:4px 0;
  border-bottom:2px solid transparent;
  transition:border-color .2s ease;
}
.nav a:hover,.nav a:focus-visible{border-bottom-color:var(--yellow)}
.nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.nav .nav-cta{
  border:1.5px solid var(--yellow);
  border-bottom-width:1.5px;
  padding:9px 19px 7px;
  transition:background .22s ease;
}
.nav .nav-cta:hover,.nav .nav-cta:focus-visible{background:var(--yellow);border-bottom-color:var(--yellow)}
.nav .nav-cta[aria-current="page"]{background:var(--yellow);border-color:var(--yellow)}

/* the hanging menu, used below 1040px */
.menu-btn{
  display:none;
  font-family:var(--f-display);font-size:13px;letter-spacing:.19em;text-transform:uppercase;
  background:none;border:1.5px solid var(--ink);color:var(--ink);
  padding:11px 18px 9px;cursor:pointer;
}
.hang{
  position:absolute;left:0;right:0;top:100%;
  background:var(--paper);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  display:none;
  box-shadow:0 22px 44px -28px rgba(20,21,15,.4);
}
.hang.is-open{display:block}
.hang-in{padding-top:26px;padding-bottom:34px}
.hang a.hang-link{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(28px,7vw,40px);
  text-transform:uppercase;
  text-decoration:none;
  line-height:1.24;
  border-bottom:1px solid var(--rule);
  padding:11px 0;
}
.hang a.hang-link:last-of-type{border-bottom:0}
.hang-foot{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px 22px;font-size:14px;color:var(--ink-mid)}
.hang-foot a{text-decoration:none;border-bottom:1px solid var(--yellow)}

/* ==========================================================================
   Hero - built to sit on Anna's mockup
   ========================================================================== */
/* transparent, so the fixed planting shows through behind the wordmark */
.hero{position:relative;background:transparent}
.hero-in{
  container-type:inline-size;
  position:relative;z-index:3;
  /* top padding keeps the moth clear of the sticky header */
  padding:clamp(24px,2.6vw,44px) var(--hero-pad) clamp(28px,3vw,48px);
  /* tall enough that the whole stand of planting is in view before the first
     white section slides over it */
  min-height:var(--hero-h);
  display:flex;flex-direction:column;justify-content:center;
}
/* the wordmark runs the full width of the screen, both edges */
.hero-title{position:relative;display:inline-block;align-self:flex-start;max-width:100%}
.hero-title h1{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:11.5vw;                 /* fallback; Anton advances measure .1982em/char-width */
  line-height:.84;
  letter-spacing:-.012em;
  white-space:nowrap;
}
@supports (container-type:inline-size){
  .hero-title h1{font-size:11.6cqw}
  @media (max-width:860px){.hero-title h1{font-size:18.4cqw}}
}
/* Anna's own moth photograph, cut out and perched on the final A */
.hero-moth,.hero-moth img{display:block;width:100%;height:auto}
.hero-moth{
  position:absolute;
  right:1.6%;
  top:-32%;
  width:9.4%;
  transform:none;
  pointer-events:none;

}
.hero-rule{
  height:5px;background:var(--yellow);
  width:min(505px,38%);
  margin:clamp(10px,1.2vw,18px) 0 clamp(8px,1vw,14px);
}
.hero-tag{
  font-family:var(--f-body);
  font-weight:500;
  color:var(--yellow-deep);
  font-size:clamp(15px,1.75vw,27px);
  letter-spacing:.34em;
  text-transform:uppercase;
  line-height:1.2;
  margin:0 0 clamp(14px,1.8vw,24px);
}
.hero-copy{
  max-width:37ch;
  font-size:clamp(15.5px,1.15vw,17.5px);
  line-height:1.68;
  color:var(--ink-mid);
  margin:0 0 clamp(18px,2.2vw,28px);
}
/* the hero's own art is gone: the fixed backdrop provides it now */

/* ==========================================================================
   Statement band  (mockup: "Great gardens don't fight nature")
   ========================================================================== */
/* fully open: the statement floats on the fixed planting with no panel at
   all, so the copy on the right is set bold to hold its own over the art */
.statement{position:relative;overflow:hidden;background:transparent}
.statement-in{
  position:relative;z-index:3;
  /* tight at the top so the statement clears the fold and reads as part of
     the hero rather than the next thing down */
  padding-top:clamp(14px,1.7vw,30px);
  padding-bottom:clamp(48px,5.4vw,78px);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,64px);
  align-items:end;
}
.statement h2{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(30px,4.35vw,64px);
  line-height:.96;
  letter-spacing:-.008em;
}
/* Joe: same face as the pillar headings, sized up, and sat so its last line
   ranges with the foot of the statement heading beside it */
.statement-copy{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(18px,1.7vw,25px);
  letter-spacing:.05em;
  line-height:1.74;
  color:var(--ink);
}
.statement-copy .btn{margin-top:22px}
/* the sprig sits over the empty third column, bleeding to the section edge */
.statement-art{
  position:absolute;right:0;bottom:0;
  width:clamp(200px,27%,430px);height:100%;
  z-index:1;pointer-events:none;
}
.statement-art .sprig{position:absolute;right:2%;bottom:-4%;width:88%;z-index:3}
.statement-art .disc{position:absolute;right:46%;top:31%;width:36%;z-index:2;opacity:.9}
.statement-art .wash{position:absolute;right:-16%;bottom:-6%;width:86%;z-index:1;opacity:.8}

/* ==========================================================================
   Pillars  (mockup: four principles in a ruled row)
   ========================================================================== */
.pillars{border-bottom:1px solid var(--rule);background:var(--paper)}
.pillars-in{
  padding-top:clamp(34px,3.4vw,46px);
  padding-bottom:clamp(34px,3.4vw,46px);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.pillar{
  display:flex;gap:18px;align-items:flex-start;
  padding:6px clamp(16px,2vw,32px);
  border-left:1px solid var(--rule);
}
.pillar:first-child{border-left:0;padding-left:0}
.pillar-mark{position:relative;flex:0 0 auto;width:clamp(62px,5.6vw,86px)}
.pillar-mark .blob{position:absolute;left:1%;top:31%;width:94%;z-index:1}
.pillar-mark img.ico{position:relative;z-index:2;width:100%}
.pillar h3{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(14px,1.15vw,17px);
  line-height:1.12;
  letter-spacing:.02em;
  margin:0 0 9px;
}
.pillar p{font-size:13.5px;line-height:1.62;color:var(--ink-mid);margin:0}

/* ==========================================================================
   Generic section furniture
   ========================================================================== */
.sec{padding-top:var(--sp);padding-bottom:var(--sp);position:relative;background:var(--paper)}
.sec--tint{background:var(--green-tint)}
.sec--wash{background:var(--green-wash)}
.sec--sun{background:var(--yellow-wash)}
.sec--sun-deep{background:var(--yellow-tint)}
/* Leaves the fixed planting visible behind, to break the run of white.
   The scrim keeps the left-hand type crisp while the right stays open. */
.sec--clear{background:transparent;position:relative}
.sec--clear::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(96deg,
    var(--paper) 0%, var(--paper) 41%,
    rgba(255,255,255,.74) 58%, rgba(255,255,255,0) 79%);
}
.sec--clear > *{position:relative;z-index:1}

/* a quiet band between sections, where the planting comes back through */
.breather{padding-top:clamp(70px,9vw,150px);padding-bottom:clamp(70px,9vw,150px)}
.breather p{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(23px,3.0vw,45px);
  line-height:1.04;
  max-width:21ch;
  margin:0;
}
.breather .rule{height:5px;background:var(--yellow);width:96px;margin:0 0 clamp(20px,2.2vw,32px)}
.sec--ruled{border-bottom:1px solid var(--rule)}
.sec--tight{padding-top:clamp(48px,5vw,80px);padding-bottom:clamp(48px,5vw,80px)}

.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(24px,4vw,72px);
  align-items:end;
  margin-bottom:clamp(34px,4vw,58px);
}
.sec-head h2{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(28px,3.9vw,58px);
  line-height:.98;
}
.sec-head .sec-note{font-size:clamp(15px,1.08vw,16.5px);color:var(--ink-mid);line-height:1.74}
.sec-head .sec-note .textlink{margin-top:16px}

/* --- services grid ------------------------------------------------------ */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--rule);
}
.svc{
  padding:clamp(28px,3vw,44px) clamp(0px,2.4vw,40px) clamp(28px,3vw,44px) 0;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.svc:nth-child(2n){padding-left:clamp(20px,2.4vw,40px);padding-right:0;border-left:1px solid var(--rule)}
.svc-no{
  font-family:var(--f-display);
  font-size:13px;letter-spacing:.2em;color:var(--yellow-deep);
  display:block;margin-bottom:12px;
}
.svc h3{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(21px,2.1vw,31px);
  line-height:1.02;
  margin:0 0 6px;
}
.svc .svc-for{font-size:14px;color:var(--ink-soft);margin:0 0 13px;font-style:italic}
.svc p{font-size:14.8px;line-height:1.7;color:var(--ink-mid);margin:0 0 16px}
.svc p:last-child{margin-bottom:0}
/* the way into a conversation now the per-service links have gone */
.svc-cta{margin:clamp(30px,3.4vw,48px) 0 0}
/* each service carries its mark, cut straight from Anna's mockup */
.svc{display:flex;gap:clamp(18px,2.2vw,34px);align-items:flex-start}
.svc-mark{flex:0 0 auto;width:clamp(92px,8.4vw,130px)}
.svc-mark img{width:100%;height:auto}
.svc-body{flex:1;min-width:0}

/* --- split (image + copy) ---------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.6vw,80px);
  align-items:center;
}
.split--flip .split-media{order:2}
.split-media{position:relative;z-index:0}
.split-media img.photo{position:relative;z-index:1;width:100%;height:auto;display:block}
.split-media .disc{position:absolute;z-index:0}
.split-media .disc--tl{left:-6%;top:-7%;width:34%}
.split-media .disc--br{right:-6%;bottom:-7%;width:28%}
.split-body h2{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(26px,3.3vw,48px);line-height:1;margin:0 0 18px;
}
.split-body p{font-size:clamp(15px,1.08vw,16.5px);line-height:1.76;color:var(--ink-mid)}
.split-body .textlink{margin-top:12px}

/* --- process steps ------------------------------------------------------ */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)}
.step{padding:clamp(24px,2.6vw,36px) clamp(16px,2vw,30px) 0 0;border-left:1px solid var(--rule);padding-left:clamp(16px,2vw,30px)}
.step:first-child{border-left:0;padding-left:0}
.step-no{
  font-family:var(--f-display);font-size:clamp(30px,3.4vw,50px);
  line-height:1;color:var(--green-deep);display:block;margin-bottom:14px;
}
.step h3{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(15px,1.25vw,19px);line-height:1.1;margin:0 0 9px}
.step p{font-size:14px;line-height:1.66;color:var(--ink-mid);margin:0}

/* --- gallery ------------------------------------------------------------ */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.gallery figure{margin:0;position:relative;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.gallery figure:hover img{transform:scale(1.045)}
.gallery figcaption{
  font-family:var(--f-display);font-size:12px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-soft);padding-top:11px;
}

/* --- notes / journal cards --------------------------------------------- */
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,42px);border-top:1px solid var(--rule);padding-top:clamp(26px,3vw,42px)}
.note h3{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(17px,1.5vw,22px);line-height:1.06;margin:0 0 10px}
.note .note-meta{font-family:var(--f-display);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow-deep);display:block;margin-bottom:11px}
.note p{font-size:14.5px;line-height:1.7;color:var(--ink-mid);margin:0}

/* --- FAQ ---------------------------------------------------------------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:clamp(20px,2.1vw,28px) 44px clamp(20px,2.1vw,28px) 0;
  position:relative;
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(16px,1.65vw,24px);
  line-height:1.14;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:15px;height:15px;margin-top:-7px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/100% 1.5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.5px 100% no-repeat;
  transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(90deg);background:linear-gradient(var(--ink),var(--ink)) center/100% 1.5px no-repeat}
.faq .faq-a{padding:0 clamp(20px,10vw,180px) clamp(22px,2.2vw,30px) 0}
.faq .faq-a p{font-size:15.5px;line-height:1.76;color:var(--ink-mid)}

/* ==========================================================================
   CTA band  (mockup: pale band, statement, photo bleeding off the right)
   ========================================================================== */
/* Full-bleed band. The text block's left edge is nudged to line up with the
   site's centred grid, while the photo runs off the right of the viewport. */
/* Anna: the photo runs as a full-width banner underneath the band, at
   every width, rather than beside it */
.cta{background:var(--green);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:stretch}
.cta-in{
  flex:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  align-items:center;
  gap:clamp(24px,3.4vw,56px);
  padding:clamp(46px,5.6vw,84px)
          max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad)));
}
.cta h2{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(28px,3.9vw,58px);line-height:.96;
}
.cta-copy{font-size:clamp(15px,1.08vw,16.5px);line-height:1.72}
.cta-copy .btn{margin-top:22px}
.cta-photo{flex:none;width:100%;position:relative;min-height:clamp(220px,30vw,420px)}
.cta-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   Page hero for the deeper pages
   ========================================================================== */
/* transparent, so the deeper pages open on the same fixed planting */
.phero{position:relative;background:transparent}
.phero-in{
  position:relative;z-index:3;
  padding-top:clamp(46px,6vw,104px);
  padding-bottom:clamp(46px,6vw,104px);
  /* tall enough to leave a band of the fixed planting beside the title */
  min-height:clamp(290px,52vh,560px);
  display:flex;flex-direction:column;justify-content:center;
  max-width:none;
}
.phero h1{
  max-width:min(720px,48vw);
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(34px,6.2vw,94px);line-height:.88;letter-spacing:-.01em;
}
.phero .phero-rule{height:5px;background:var(--yellow);width:min(320px,46%);margin:clamp(14px,1.5vw,22px) 0 clamp(14px,1.5vw,22px)}
/* Joe: the strapline in the same face as the prose openers */
.phero .lede{
  max-width:min(50ch,46vw);
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(28px,3.4vw,50px);
  line-height:.98;
  color:var(--ink);
}
/* deeper pages take their art from the shared fixed backdrop */

/* --- prose -------------------------------------------------------------- */
.prose{max-width:66ch}
.prose h2{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(22px,2.5vw,36px);line-height:1.02;margin:clamp(34px,3.4vw,54px) 0 16px;
}
.prose h2:first-child{margin-top:0}
.prose h3{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(17px,1.5vw,22px);line-height:1.1;margin:30px 0 10px;
}
.prose p{font-size:clamp(15.5px,1.1vw,17px);line-height:1.8;color:var(--ink-mid)}
.prose em{font-style:italic}
.prose .pull{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(21px,2.4vw,34px);line-height:1.04;color:var(--ink);
  border-left:5px solid var(--yellow);padding-left:22px;margin:clamp(30px,3vw,44px) 0;
}

.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.6vw,80px);align-items:start}

/* --- fact list ---------------------------------------------------------- */
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.facts li{
  border-bottom:1px solid var(--rule);
  padding:15px 0;
  display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:18px;
  font-size:15px;line-height:1.66;
}
.facts .k{font-family:var(--f-display);text-transform:uppercase;font-size:12.5px;letter-spacing:.15em;padding-top:3px}
.facts .v{color:var(--ink-mid)}

/* --- contact cards ------------------------------------------------------ */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
.card{border:1px solid var(--rule);padding:clamp(24px,2.6vw,38px)}
.card h3{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(17px,1.5vw,22px);line-height:1.08;margin:0 0 12px}
.card p{font-size:15px;line-height:1.7;color:var(--ink-mid)}
.card .big{
  font-family:var(--f-display);text-transform:none;
  font-size:clamp(17px,1.6vw,23px);letter-spacing:.01em;
  text-decoration:none;border-bottom:3px solid var(--yellow);
  display:inline-block;margin-top:6px;padding-bottom:3px;word-break:break-word;
}
.card .big:hover{border-bottom-color:var(--ink)}

/* --- testimonials ------------------------------------------------------- */
.quote{
  margin:clamp(28px,3.2vw,48px) 0 0;
  border-left:5px solid var(--yellow);
  padding:6px 0 6px clamp(18px,2.2vw,30px);
  max-width:76ch;
}
.quote p{font-size:clamp(15.5px,1.1vw,17px);line-height:1.72;color:var(--ink-mid);font-style:italic}
.quote cite{
  display:block;margin-top:12px;font-style:normal;
  font-family:var(--f-display);text-transform:uppercase;
  font-size:12.5px;letter-spacing:.17em;
}

/* --- accreditation strip ------------------------------------------------ */
.creds{display:flex;flex-wrap:wrap;gap:clamp(26px,3.4vw,54px);align-items:center}
.creds img{height:clamp(52px,5vw,74px);width:auto;opacity:.78;filter:grayscale(1)}

/* --- empty / in-progress state ------------------------------------------ */
.pending{
  border:1px solid var(--rule);
  border-left:5px solid var(--yellow);
  padding:clamp(24px,2.8vw,40px);
  background:var(--paper-2);
}
.pending h3{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(17px,1.6vw,23px);line-height:1.08;margin:0 0 12px}
.pending p{font-size:15.5px;line-height:1.74;color:var(--ink-mid)}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot{border-top:1px solid var(--rule);padding-top:clamp(48px,5vw,76px);padding-bottom:34px}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(26px,3.4vw,54px);
}
.foot-brand{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(19px,1.8vw,26px);line-height:1.04;margin:0 0 12px}
.site-foot h4{font-family:var(--f-display);text-transform:uppercase;font-size:12.5px;letter-spacing:.19em;margin:0 0 16px}
.site-foot p,.site-foot li{font-size:14.5px;line-height:1.72;color:var(--ink-mid)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:8px}
.site-foot a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}
.site-foot a:hover,.site-foot a:focus-visible{border-bottom-color:var(--yellow)}
.foot-rule{height:5px;background:var(--yellow);width:78px;margin:0 0 20px}
.foot-base{
  margin-top:clamp(34px,3.6vw,54px);padding-top:20px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:12.5px;color:var(--ink-soft);
}

/* --- floating whatsapp -------------------------------------------------- */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:70;
  width:54px;height:54px;border-radius:50%;
  background:#25D366;
  display:grid;place-items:center;
  box-shadow:0 8px 22px -6px rgba(20,21,15,.42);
  transition:transform .2s ease;
}
.wa-float:hover{transform:translateY(-2px)}
.wa-float svg{width:28px;height:28px}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
  .rv.in{opacity:1;transform:none}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .statement-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .statement-art{width:clamp(160px,24%,300px);opacity:.9}
  .pillars-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 0}
  .pillar{padding-top:22px;padding-bottom:22px}
  .pillar:nth-child(odd){border-left:0;padding-left:0}
  .pillar:nth-child(-n+2){padding-top:6px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step:nth-child(odd){border-left:0;padding-left:0}
  .step:nth-child(n+3){padding-top:clamp(20px,2.4vw,32px)}
}

@media (max-width:1040px){
  .nav{display:none}
  .menu-btn{display:block}
  .site-head{position:sticky}
  .bg-art{width:72%;opacity:.92}
  .cta{flex-direction:column}
  .cta-in{flex:1 1 auto;grid-template-columns:minmax(0,1fr);gap:24px;min-height:0;
    padding:clamp(40px,6vw,64px) var(--pad)}
  .cta-photo{flex:1 1 auto;width:100%;min-height:clamp(210px,34vw,300px)}
}

@media (max-width:860px){
  /* keep enough hero height that the fixed planting is actually in view
     before the first white section slides over it */
  /* no room for a side-by-side layout here, so the wordmark takes the full
     width again and the planting sits beneath it */
  /* same trick as desktop: pin the artwork to the foot of the hero, so the
     first white section crops it rather than burying it */
  .hero-in{min-height:var(--hero-h);padding-bottom:clamp(170px,44vw,290px);justify-content:flex-start}
  .hero-title h1{font-size:18.2vw}
  /* perched on the top right corner of the A, not sat across it */
  .hero-moth{right:-4%;top:-44%;width:10.5%}
  .hero-rule{width:min(320px,52%)}
  /* the artwork is wide and shallow; on a phone crop into it rather than
     letterboxing it down to a sliver */
  .bg-art{
    width:100%;top:auto;
    height:min(30vh,262px);
    bottom:calc(100vh - var(--hero-h) - var(--head-h));
    opacity:1;
  }
  .bg-art picture,.bg-art img{object-fit:cover;object-position:92% bottom}
  .phero-in{min-height:clamp(240px,34vh,360px)}
  .phero h1{max-width:none}
  .phero .lede{max-width:none}
  .statement-in{grid-template-columns:minmax(0,1fr);padding-bottom:clamp(150px,32vw,230px)}
  .statement-art{width:min(58%,300px);height:auto;top:auto;bottom:0;opacity:.85}
  .sec-head{grid-template-columns:minmax(0,1fr);align-items:start;gap:20px}
  .svc-grid{grid-template-columns:minmax(0,1fr)}
  .svc,.svc:nth-child(2n){padding-left:0;padding-right:0;border-left:0}
  .split{grid-template-columns:minmax(0,1fr);gap:28px}
  .split--flip .split-media{order:0}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notes{grid-template-columns:minmax(0,1fr);gap:26px}
  .two-col{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phero-art{width:56%;opacity:.55}
  .facts li{grid-template-columns:minmax(0,1fr);gap:4px}
}

@media (max-width:600px){
  .pillars-in{grid-template-columns:minmax(0,1fr)}
  .pillar{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:22px}
  .pillar:first-child{border-top:0;padding-top:0}
  .steps{grid-template-columns:minmax(0,1fr)}
  .step{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:22px}
  .step:first-child{border-top:0}
  .gallery{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .creds img{height:46px}
}

@media print{
  .site-head,.wa-float,.hero-art,.phero-art,.cta-photo{display:none}
}

/* ==========================================================================
   Blocks added with Anna's second round of copy
   ========================================================================== */

/* the manifesto band: her line about nature already being there */
.manifesto h2{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(30px,4.4vw,68px);line-height:.96;letter-spacing:-.008em;
  /* the copy carries its own line breaks; a max-width here just wrapped
     "to be" onto a line of its own */
  max-width:none;
}
.manifesto-sub{
  font-size:clamp(17px,1.6vw,24px);line-height:1.4;
  margin:clamp(20px,2.4vw,32px) 0 0;max-width:34ch;
  border-left:5px solid var(--green-deep);padding-left:20px;
}

/* "what I'll be thinking about" */
.thinklead{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:12.5px;letter-spacing:.19em;margin:0 0 18px;
}
.thinklist{list-style:none;margin:0;padding:0}
.thinklist li{
  border-top:1px solid rgba(20,21,15,.16);
  padding:15px 0 15px 30px;position:relative;
  font-size:clamp(15px,1.08vw,16.5px);line-height:1.66;
}
.thinklist li::before{
  content:"";position:absolute;left:0;top:23px;
  width:12px;height:12px;border-radius:50%;background:var(--cyan);
}
.thinklist li:last-child{border-bottom:1px solid rgba(20,21,15,.16)}
.thinklist li:last-child::before{background:var(--yellow-deep)}

/* the questions Anna actually wants answered */
.asks{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--rule);
}
.asks li{
  border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);
  padding:clamp(20px,2.2vw,30px) clamp(16px,2vw,28px) clamp(20px,2.2vw,30px) 0;
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(15px,1.5vw,22px);line-height:1.14;
}
.asks li:nth-child(3n){border-right:0;padding-right:0}
/* set in the face and size the questions used before they became bullets,
   with the journal's pink carried onto its rule */
.asks-note{
  margin-top:clamp(24px,2.6vw,36px);
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(15px,1.5vw,22px);
  line-height:1.35;color:var(--ink);
  max-width:none;
  border-left:5px solid var(--pink);
  padding-left:22px;
}

/* the closing line */
.closer{text-align:center}
.closer h2{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(32px,5.4vw,86px);line-height:.94;letter-spacing:-.01em;
}

/* training and study */
.study{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(20,21,15,.16);
}
.study-item{
  padding:clamp(22px,2.4vw,34px) clamp(16px,2vw,30px) 0 0;
  border-right:1px solid rgba(20,21,15,.16);
  padding-right:clamp(16px,2vw,30px);
}
.study-item:last-child{border-right:0}
.study-tag{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:11.5px;letter-spacing:.2em;color:var(--green-deep);
  display:block;margin-bottom:12px;
}
.study-item h3{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(16px,1.4vw,21px);line-height:1.08;margin:0 0 10px;
}
.study-item p{font-size:14.5px;line-height:1.66;color:var(--ink-mid);margin:0}
.study-note{
  margin-top:clamp(26px,3vw,42px);padding-top:clamp(20px,2.2vw,30px);
  border-top:1px solid rgba(20,21,15,.16);
  font-size:clamp(15px,1.08vw,16.5px);line-height:1.74;max-width:74ch;
}

/* journal strands, each carrying a different note of the palette */
.note--a{border-top:5px solid var(--yellow)}
.note--b{border-top:5px solid var(--cyan)}
.note--c{border-top:5px solid var(--pink)}
.note--a,.note--b,.note--c{padding-top:20px}

/* the entries themselves: a card per entry, topped in its strand's colour */
.entries{display:grid;gap:clamp(26px,3vw,46px)}
.entry{
  border:1px solid var(--rule);
  background:rgba(255,255,255,.6);
  padding:clamp(24px,3.2vw,48px);
}
.entry--seasonal{border-top:5px solid var(--yellow)}
.entry--plants{border-top:5px solid var(--cyan)}
.entry--field{border-top:5px solid var(--pink)}
.entry-head{display:flex;align-items:baseline;gap:18px;margin:0 0 12px}
.entry-head .note-meta{margin-bottom:0}
.entry-date{font-size:13.5px;color:var(--ink-soft)}
.entry h2{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(24px,2.7vw,42px);line-height:1;
  margin:0 0 clamp(16px,1.8vw,26px);
}
.entry .two-col{align-items:start}
.entry-gallery{margin-top:clamp(20px,2.4vw,36px)}

/* areas */
.area-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--rule);
}
.area-card{
  padding:clamp(24px,2.6vw,36px) clamp(18px,2.2vw,34px) clamp(24px,2.6vw,36px) 0;
  border-right:1px solid var(--rule);
}
.area-card:last-child{border-right:0}
.area-card:not(:first-child){padding-left:clamp(18px,2.2vw,34px)}
.area-card h3{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(20px,2vw,30px);line-height:1.02;margin:0 0 8px;
}
.area-card h3 a{text-decoration:none;border-bottom:3px solid var(--yellow)}
.area-card h3 a:hover{border-bottom-color:var(--ink)}
.area-card p{font-size:14.8px;line-height:1.7;color:var(--ink-mid);margin:0 0 14px}
.arealist{list-style:none;margin:0;padding:0}
.arealist li{border-bottom:1px solid var(--rule);padding:11px 0}
.arealist a{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:14px;letter-spacing:.1em;text-decoration:none;
}
.arealist a:hover{color:var(--green-deep)}

/* a little more of the palette through the existing furniture */
.step-no{color:var(--cyan)}
.svc-no{color:var(--yellow-deep)}
.pillar-mark .blob{opacity:.95}
.facts .k{color:var(--green-deep)}
.card{border-color:var(--rule)}
.card:hover{border-color:var(--cyan)}
.foot-rule{background:var(--yellow)}
.sec--sun-deep .pending,.sec--tint .pending{background:rgba(255,255,255,.7)}

/* ==========================================================================
   Mobile pass over the new blocks and the old
   ========================================================================== */
@media (max-width:1180px){
  .study{grid-template-columns:repeat(2,minmax(0,1fr))}
  .study-item:nth-child(2n){border-right:0}
  .study-item:nth-child(n+3){border-top:1px solid rgba(20,21,15,.16);margin-top:6px}
  .asks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .asks li:nth-child(3n){border-right:1px solid var(--rule);padding-right:clamp(16px,2vw,28px)}
  .asks li:nth-child(2n){border-right:0;padding-right:0}
  .area-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:860px){
  .manifesto h2{max-width:none}
  .asks{grid-template-columns:minmax(0,1fr)}
  .asks li,.asks li:nth-child(3n),.asks li:nth-child(2n){
    border-right:0;padding-right:0;padding-left:0;
  }
  .study{grid-template-columns:minmax(0,1fr)}
  .study-item{border-right:0;padding-right:0;padding-left:0;
    border-top:1px solid rgba(20,21,15,.16);margin-top:0}
  .study-item:first-child{border-top:0}
  .area-grid{grid-template-columns:minmax(0,1fr)}
  .area-card,.area-card:not(:first-child){
    border-right:0;padding-left:0;padding-right:0;
    border-bottom:1px solid var(--rule);
  }
  .area-card:last-child{border-bottom:0}
  .closer h2{font-size:clamp(30px,9vw,56px)}
  /* stop the long service and area headings colliding with the edge */
  .sec-head h2,.split-body h2,.prose h2{overflow-wrap:break-word}
}

/* the accent discs sit outside the photo on desktop; on a full-width phone
   layout that pushes them past the viewport edge */
@media (max-width:1040px){
  .split-media .disc--tl{left:-2%;top:-4%;width:26%}
  .split-media .disc--br{right:-2%;bottom:-4%;width:22%}
}
@media (max-width:860px){
  .split-media .disc--tl{left:0;top:-3%;width:24%}
  .split-media .disc--br{right:0;bottom:-3%;width:20%}
}

/* .wrap and .prose land on the same element in a few places. .prose's narrower
   max-width was winning the cascade and, with the wrap's auto margins, centring
   the whole column in the page. Keep the page grid, cap the lines instead. */
.wrap.prose{max-width:var(--wrap)}
.wrap.prose > *{max-width:66ch}
.wrap.prose > .pull{max-width:24ch}

/* ==========================================================================
   Phone hero, final word.
   The stylesheet grew three separate max-width:860px blocks, so these land
   last on purpose: the custom properties have to be reset before .bg-art's
   calc() reads them, or the artwork is positioned off the desktop numbers.
   ========================================================================== */
@media (max-width:860px){
  :root{--hero-h:72vh;--head-h:72px}
  .hero-in{
    min-height:var(--hero-h);
    justify-content:flex-start;
    padding-bottom:clamp(170px,44vw,290px);
  }
  .bg-art{
    width:100%;
    top:auto;
    height:min(30vh,262px);
    bottom:calc(100vh - var(--hero-h) - var(--head-h));
    opacity:1;
  }
  .bg-art picture,.bg-art img{object-fit:cover;object-position:92% bottom}
}

/* The manifesto band keeps its yellow on the left and opens up on the right so
   the fixed planting reads through it, same move as the clear breather. */
.sec.manifesto{
  background:linear-gradient(96deg,
    #FDF1C4 0%, #FDF1C4 44%,
    rgba(253,241,196,.80) 60%,
    rgba(253,241,196,0) 84%);
}
.sec.manifesto > *{position:relative;z-index:1}
@media (max-width:860px){
  /* the artwork sits behind the copy at this width, so keep the band solid */
  .sec.manifesto{background:var(--yellow-tint)}
}

/* ==========================================================================
   Section boundaries that open onto the planting
   The band colour moves onto a ::before layer so the fade can be masked into
   it without touching the type. Masking the section itself would take the
   words with it. The fade sits inside the section's own padding, so nothing
   is ever read through the artwork.
   ========================================================================== */
.fade-b,.fade-t{background:transparent!important;position:relative;isolation:isolate}
.fade-b > *,.fade-t > *{position:relative;z-index:1}
.fade-b::before,.fade-t::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
}
.fade-b::before{
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--fade)),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--fade)),transparent 100%);
}
.fade-t::before{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade),#000 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade),#000 100%);
}
:root{--fade:clamp(72px,11vw,140px)}

/* a band that opens at both ends fades top and bottom in one mask */
.fade-b.fade-t::before{
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
          mask-image:linear-gradient(to bottom,
    transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
}

/* each band paints its own colour onto that layer */
.sec--sun-deep.fade-b::before,.sec--sun-deep.fade-t::before{background:var(--yellow-tint)}
.sec--sun.fade-b::before,.sec--sun.fade-t::before{background:var(--yellow-wash)}
.sec--tint.fade-b::before,.sec--tint.fade-t::before{background:var(--green-tint)}
.sec--wash.fade-b::before,.sec--wash.fade-t::before{background:var(--green-wash)}
.sec--ruled.fade-b::before,.sec--ruled.fade-t::before{background:var(--paper)}
/* the blocks outside the .sec-- family that now open onto the planting */
.statement.fade-t::before,.statement.fade-b::before{background:var(--paper)}
.statement.fade-b{border-bottom:0}
.pillars.fade-b::before,.pillars.fade-t::before{background:var(--paper)}
.pillars.fade-b,.pillars.fade-t{--fade:clamp(56px,6vw,90px)}
.pillars.fade-b{border-bottom:0}
.sec.closer.fade-b::before,.sec.closer.fade-t::before{background:var(--green)}

/* a ruled section that fades out at the bottom drops its hard line too */
.sec--ruled.fade-b{border-bottom:0}

/* The CTA band carries a photo, so the haze has to take the whole band with
   it rather than just the background layer. A shallower fade keeps the
   heading clear of the transparent zone. */
.cta--fade{
  --fade:clamp(40px,5vw,110px);
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
          mask-image:linear-gradient(to bottom,
    transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
}

/* the footer opens onto the planting as well, and loses its hard rule */
.site-foot.fade-t{--fade:clamp(48px,6vw,100px);border-top:0}
.site-foot.fade-t::before{background:var(--paper)}
/* the manifesto keeps its left-to-right opening as well as the fade */
.sec.manifesto.fade-b::before{
  background:linear-gradient(96deg,
    #FDF1C4 0%, #FDF1C4 44%,
    rgba(253,241,196,.80) 60%,
    rgba(253,241,196,0) 84%);
}
.sec.manifesto.fade-b{background:transparent!important}

/* a ruled section that fades in at the top should not also draw a hard line */
.sec--ruled.fade-t{border-top:0}

/* ==========================================================================
   Phone hero
   The artwork sits behind the wordmark at this width, so the wordmark, the
   rule, the tagline and the standfirst get a solid panel of their own. It
   stops above the button, which takes its own, so the planting reads between
   the two.
   ========================================================================== */
@media (max-width:860px){
  .hero-lead{
    background:var(--paper);
    margin:calc(clamp(24px,2.6vw,44px) * -1) calc(var(--hero-pad) * -1) 0;
    padding:clamp(24px,2.6vw,44px) var(--hero-pad) clamp(18px,4vw,26px);
  }
  .hero-in .btn--solid{background:var(--paper)}
  .hero-in .btn--solid:hover,.hero-in .btn--solid:focus-visible{
    background:var(--ink);color:var(--paper);
  }
  /* the manifesto is solid on a phone, so its fade needs the flat colour */
  .sec.manifesto.fade-b::before{background:var(--yellow-tint)}
}

/* Anna's portrait is a tall frame. Shown at the full column width it dwarfs the
   copy beside it, so it is scaled down rather than cropped - the whole picture
   stays, exactly as she sent it. */
.portrait-frame img.photo{
  width:auto;
  max-width:min(100%,430px);
  height:auto;
  object-fit:fill;
}
@media (max-width:860px){
  .portrait-frame img.photo{max-width:min(100%,340px)}
}

/* ==========================================================================
   The handover block
   Two halves of one argument - what Anna takes on, and what she needs back -
   held in a single band so the conversation runs straight through instead of
   being cut in half by a section break.
   ========================================================================== */
/* the questions, re-set as a bulleted list in the thinklist style under
   their own header, per Joe */
.handover .wants{max-width:62ch;margin-top:clamp(24px,2.6vw,40px)}

/* the two halves are one thought, so they sit close and share no rule */
.handover .handover-turn{
  margin-top:clamp(14px,1.8vw,30px);
  padding-top:0;
  border-top:0;
}
/* smaller than a section opener: it is a turn in the conversation, not a
   fresh start, and it should not out-shout the line above it */
.handover .handover-turn h2{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-size:clamp(23px,2.8vw,42px);
  line-height:.98;
}
.handover .asks{border-top-color:rgba(20,21,15,.16)}
.handover .asks li{border-color:rgba(20,21,15,.16)}
.handover .thinklist li{border-color:rgba(20,21,15,.16)}
.closer{text-align:center}

/* The closer landed on the same tint as the services band below it and the two
   ran together. It gets the deeper band colour so the punchline is its own beat. */
.sec.closer{background:var(--green)}
.sec.closer h2{max-width:none}

/* With the copy gone to the About page, the introduction is just her name and
   what she does, so it is set large enough to hold the column on its own. */
.split-body--big h2{font-size:clamp(36px,6.5vw,100px);line-height:.94}
.about-cta{margin:clamp(24px,2.8vw,40px) 0 0}

/* headings run in the ink black, as originally */
.split-body--big{align-self:center}
.handover-cta{margin-top:clamp(30px,3.4vw,48px)}
@media (max-width:860px){
  .split-body--big h2{font-size:clamp(32px,9.5vw,60px)}
}

/* the opening line of the handover carries the block now the eyebrow has gone */
.handover-lead h2{font-size:clamp(30px,4.25vw,63px);line-height:.96}
@media (max-width:860px){
  .handover-lead h2{font-size:clamp(30px,8.4vw,54px)}
}

/* the towns and districts each area page covers */
.places{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(20,21,15,.16);
}
.place{
  padding:clamp(20px,2.2vw,30px) clamp(18px,2.2vw,32px) clamp(20px,2.2vw,30px) 0;
  border-bottom:1px solid rgba(20,21,15,.16);
  border-right:1px solid rgba(20,21,15,.16);
}
.place:nth-child(3n){border-right:0;padding-right:0}
.place:not(:nth-child(3n+1)){padding-left:clamp(18px,2.2vw,32px)}
.place h3{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(15px,1.35vw,20px);line-height:1.08;margin:0 0 9px;
}
.place p{font-size:14.5px;line-height:1.66;color:var(--ink-mid);margin:0}

@media (max-width:1024px){
  .places{grid-template-columns:repeat(2,minmax(0,1fr))}
  .place:nth-child(3n){border-right:1px solid rgba(20,21,15,.16);padding-right:clamp(18px,2.2vw,32px)}
  .place:not(:nth-child(3n+1)){padding-left:0}
  .place:nth-child(2n){border-right:0;padding-right:0}
  .place:nth-child(2n){padding-left:clamp(18px,2.2vw,32px)}
}
@media (max-width:640px){
  .places{grid-template-columns:minmax(0,1fr)}
  .place,.place:nth-child(2n),.place:nth-child(3n){
    border-right:0;padding-left:0;padding-right:0;
  }
}

/* the link out sits under the punchline now, on the band itself */
.closer-cta{margin-top:clamp(28px,3.2vw,46px)}
.closer-cta .btn:hover,.closer-cta .btn:focus-visible{background:var(--ink);color:var(--green)}

/* the opening block of a deeper page gets a heading of its own, so the page
   does not start on a paragraph after all that space */
.prose-open{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(28px,3.4vw,50px);line-height:.98;margin:0 0 22px;
}

/* ==========================================================================
   Anna's review
   ========================================================================== */
/* the quote she wanted without its rule. .prose .pull sets the border at a
   higher specificity, so this has to match it to win. */
.prose .pull--bare,.pull--bare{border-left:0;padding-left:0}

/* "what I'll be thinking about" now carries the same weight as the headings
   either side of it, rather than sitting up as a small label */
h2.thinklead{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(23px,2.8vw,42px);line-height:.98;
  letter-spacing:0;margin:0 0 20px;
}
/* Anna asked for italics. Anton has no italic cut, and dropping the body face
   into a display heading to fake one looked like a mistake - a different
   typeface, lowercase, mid-sentence. The heading stays in Anton and leans
   instead, so it is still the same letterforms, just emphasised. */
.closer h2 em,.handover h2 em{
  font-style:normal;
  display:inline-block;
  transform:skewX(-11deg);
}
/* the list item is body copy already, so a real italic belongs there - just
   not a bold one */
.thinklist em{font-style:italic;font-weight:400}

/* ==========================================================================
   Phone: the hazy gaps between bands, same as desktop
   The fades used to be masked off here because all they revealed was the
   page's own cream. The .bg-veil now puts a faint pass of the planting behind
   the whole page on phones, so the gaps reveal artwork and stay on. The
   breather keeps a translucent wash rather than the desktop's sideways scrim,
   because its copy runs the full width here.
   ========================================================================== */
@media (max-width:860px){
  .sec--clear::before{background:rgba(251,248,243,.74)}
  .breather{padding-top:clamp(48px,9vw,80px);padding-bottom:clamp(48px,9vw,80px)}
}

/* Anna: the handover reads well stacked on a phone but not across a browser.
   The turn was a two-column head, so its heading sat far left and its note far
   right with a hole between them. Kept in one column, it reads top to bottom
   the way it does on a phone, and the questions run full width beneath. */
/* the turn is a two-col again: heading and note left, the wants list right,
   mirroring the pair above it */
.handover .handover-turn .sec-note{
  margin-top:18px;
  font-size:clamp(15px,1.08vw,16.5px);color:var(--ink-mid);line-height:1.74;
}
.handover .handover-turn .sec-note p{max-width:52ch}
@media (min-width:861px){
  .handover .wants{margin-top:0}
}

/* Anna wanted each sentence of the statement on its own line */
.statement .lines{line-height:1.62}

/* ==========================================================================
   Phone legibility pass
   The statement scrolls over the crisp band art on a phone, so it gets a
   slight paper haze behind it. And the general copy runs a step bigger
   everywhere for anyone who can't see so well.
   ========================================================================== */
@media (max-width:860px){
  .statement{background:rgba(251,248,243,.72)}

  body{font-size:17px}
  .prose p,.sec-head .sec-note,.thinklist li,.cta-copy,
  .handover .handover-turn .sec-note,.quote p,
  .faq .faq-a p,.hang-foot{font-size:17px}
  .lede{font-size:18px}
  .svc p,.step p,.note p,.pillar p,.area-card p,.place p,.study-item p,
  .card p,.pending p,.asks-note,.study-note,
  .site-foot p,.site-foot li,.facts li{font-size:16px}
}

/* the same step up for anyone reading on a browser */
@media (min-width:861px){
  body{font-size:17px}
  .prose p,.sec-head .sec-note,.thinklist li,.cta-copy,
  .handover .handover-turn .sec-note,.quote p,.faq .faq-a p{font-size:18px}
  .lede{font-size:21px}
  .svc p,.step p,.note p,.pillar p,.area-card p,.place p,.study-item p,
  .card p,.pending p,.study-note,
  .site-foot p,.site-foot li,.facts li{font-size:16px}
}

/* Joe: the hero writing and the statement sit an inch too low on a browser.
   The hero band gives up 96px and the wordmark rises the rest of the way, so
   everything below moves up with it. The phone hero already sits at the top
   of its band, so it stays put. */
@media (min-width:861px){
  .hero-in{min-height:calc(var(--hero-h) - 77px)}
  .hero-lead{margin-top:-77px}
}

/* ==========================================================================
   Metrics for thin Jost
   Display type in Jost at thin weight: wide, light and letterspaced, so
   the Anton-era sizes come down and everything gets real leading. Small
   caps labels hold a medium weight so they stay legible.
   ========================================================================== */
h1,h2{font-weight:400}
h3{font-weight:500}
/* the face has no italic cut; the browser leans it where copy asks */
.nav a,.nav .nav-cta,.btn,.textlink,.menu-btn,.brand,.svc-no,.note-meta,
.study-tag,.entry-date,.site-foot h4,.gallery figcaption,.facts .k,
.quote cite,.arealist a{font-weight:600}

/* the wordmark holds to about two thirds of the line */
.hero-title h1{font-size:8.3vw;letter-spacing:.03em;line-height:1.02}
@supports (container-type:inline-size){
  .hero-title h1{font-size:8.6cqw}
  @media (max-width:860px){.hero-title h1{font-size:8.6cqw}}
}
.statement h2{font-size:clamp(26px,3.8vw,56px);line-height:1.14;letter-spacing:.02em}
.sec-head h2{font-size:clamp(24px,3.3vw,48px);line-height:1.14;letter-spacing:.02em}
.split-body h2{font-size:clamp(23px,2.9vw,42px);line-height:1.12;letter-spacing:.02em}
.split-body--big h2{font-size:clamp(30px,5.2vw,76px);line-height:1.08}
.phero h1{font-size:clamp(30px,5.2vw,76px);line-height:1.06;letter-spacing:.03em}
.phero .lede{font-size:clamp(21px,2.5vw,36px);line-height:1.18;letter-spacing:.02em}
.prose h2,.prose-open{letter-spacing:.02em;line-height:1.14}
.sec.closer h2{font-size:clamp(26px,4.2vw,64px);line-height:1.1;letter-spacing:.02em}
.cta h2{font-size:clamp(24px,3.3vw,48px);line-height:1.12;letter-spacing:.02em}
.breather p{line-height:1.2;letter-spacing:.02em}
.entry h2{line-height:1.12;letter-spacing:.02em}
h2.thinklead,.handover .handover-turn h2{line-height:1.14;letter-spacing:.02em}
.handover-lead h2{font-size:clamp(26px,3.7vw,54px);line-height:1.14}
.svc h3,.pillar h3,.step h3,.note h3,.card h3,.pending h3,.study-item h3,
.place h3,.area-card h3,.foot-brand{letter-spacing:.05em;line-height:1.22}
.faq summary{letter-spacing:.03em;line-height:1.24}
.hang a.hang-link{font-size:clamp(23px,5.6vw,32px);letter-spacing:.04em}
.asks-note{letter-spacing:.03em;line-height:1.5}
.statement-copy{letter-spacing:.06em}
@media (max-width:860px){
  .split-body--big h2{font-size:clamp(28px,8vw,50px)}
  .handover-lead h2{font-size:clamp(26px,7vw,44px)}
  .sec.closer h2{font-size:clamp(26px,7.5vw,48px)}
}
/* Jost has a true italic, so the skewed fake is retired */
.closer h2 em,.handover h2 em{transform:none;font-style:italic}

/* ==========================================================================
   Client questionnaire
   Static site: answers compose into a prefilled email or WhatsApp message.
   ========================================================================== */
.qform{display:grid;gap:clamp(22px,2.6vw,34px)}
.qf label,.qf legend{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:10px;color:var(--ink);
}
fieldset.qf{border:0;padding:0;margin:0}
.qf input[type=text],.qf select,.qf textarea{
  width:100%;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);
  background:rgba(255,255,255,.72);border:1px solid var(--rule-strong);border-radius:0;
}
.qf textarea{min-height:110px;resize:vertical}
.qf input:focus,.qf select:focus,.qf textarea:focus{outline:2px solid var(--yellow);outline-offset:1px}
.qf .opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px}
.qf .opt{
  display:flex;align-items:center;gap:10px;font-size:16px;color:var(--ink-mid);
  font-family:var(--f-body);font-weight:400;text-transform:none;letter-spacing:0;margin-bottom:0;
}
.qf .opt input{width:18px;height:18px;accent-color:var(--green-deep);flex:0 0 auto}
.q-send{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.q-note{font-size:14px;color:var(--ink-soft)}
@media (max-width:600px){.qf .opts{grid-template-columns:minmax(0,1fr)}}