/* ==========================================================================
   Hatipoti Tea — stylesheet
   Sections are ordered the way they appear on the page so this file maps
   cleanly onto WordPress template parts later.
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root{
  --green-900:#14301F;
  --green-800:#1B3E27;
  --green-700:#22512F;
  --green-600:#2E6B3E;
  --cream:#F6F1E7;
  --cream-200:#EFE8DA;
  --cream-300:#E3D9C6;
  --brass:#C08A3E;
  --brass-dark:#9A6B2B;
  --ink:#1A1A17;
  --muted:#6E6A5E;
  --muted-on-dark:rgba(246,241,231,.72);

  --font-display:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --shell:1240px;
  --gutter:clamp(20px,5vw,56px);
  --section-y:clamp(72px,10vw,140px);
  --radius:4px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* 2. Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(15.5px,1.05vw,17px);
  line-height:1.7;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem)}
h2{font-size:clamp(2rem,4.2vw,3.4rem)}
h3{font-size:clamp(1.25rem,1.9vw,1.6rem)}
p{margin:0 0 1.1em;max-width:62ch}
p:last-child{margin-bottom:0}
::selection{background:var(--brass);color:#fff}

/* 3. Layout helpers ----------------------------------------------------- */
.container{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(52px,7vw,92px)}
.section--dark{background:var(--green-900);color:var(--cream)}
.section--deep{background:var(--green-800);color:var(--cream)}
.section--cream{background:var(--cream-200)}
.section--dark p,.section--deep p{color:var(--muted-on-dark)}
.center{text-align:center}
.stack-lg > * + *{margin-top:clamp(28px,4vw,48px)}

.kicker{
  display:inline-block;
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:1.1em;
}
.section--dark .kicker,.section--deep .kicker{color:var(--brass)}
.lede{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.6;color:var(--muted)}
.section--dark .lede,.section--deep .lede,.hero .lede,.team .lede,.cta .lede{color:var(--muted-on-dark)}
.rule{width:56px;height:2px;background:var(--brass);border:0;margin:0 0 1.6em}
.center .rule{margin-inline:auto}

/* 4. Buttons ------------------------------------------------------------ */
.btn{
  --btn-bg:var(--brass);
  --btn-fg:#fff;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:1.05em 2.1em;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--btn-bg);
  border-radius:var(--radius);
  cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.btn:hover{background:var(--brass-dark);border-color:var(--brass-dark);transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.btn--ghost{--btn-bg:transparent;--btn-fg:currentColor;border-color:currentColor}
.btn--ghost:hover{background:currentColor;border-color:currentColor;color:var(--green-900)}
.section--dark .btn--ghost:hover,.hero .btn--ghost:hover{color:var(--green-900)}
.btn--sm{padding:.72em 1.35em;font-size:.7rem}
.btn svg{width:1em;height:1em;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.center .btn-row{justify-content:center}

/* Pre-launch: a buy link with no href is inert. Style it as a state, not a
   dead button — it reads as "not yet" rather than "broken". */
.btn[data-buy]:not([href]){
  background:transparent;
  border-color:currentColor;
  border-style:dashed;
  color:currentColor;
  opacity:.72;
  cursor:default;
}
.btn[data-buy]:not([href]):hover{
  background:transparent;
  border-color:currentColor;
  color:currentColor;
  transform:none;
}
.site-footer a[data-buy]:not([href]),
.info-list a[data-buy]:not([href]){
  opacity:.6;
  cursor:default;
  border-bottom:0;
}
/* While the buy link is inert it can't carry the row, so the neighbouring
   button takes over as primary. Reverts on its own once the URL is set. */
.btn-row:has([data-buy]:not([href])) .btn--ghost{
  background:var(--brass);
  border-color:var(--brass);
  color:#fff;
}
.btn-row:has([data-buy]:not([href])) .btn--ghost:hover{
  background:var(--brass-dark);
  border-color:var(--brass-dark);
  color:#fff;
}

/* 5. Header ------------------------------------------------------------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  padding-block:18px;
  color:var(--cream);
  transition:background .35s var(--ease),padding .35s var(--ease),box-shadow .35s var(--ease);
}
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(10,24,15,.55),transparent);
  pointer-events:none;
  transition:opacity .35s var(--ease);
}
.site-header.is-solid{background:var(--green-900);padding-block:11px;box-shadow:0 1px 0 rgba(246,241,231,.12)}
.site-header.is-solid::before{opacity:0}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:1}
.logo{display:block;color:var(--cream);text-decoration:none;flex:none}
/* The lockup is a wide, fixed-ratio bitmap — sizing it by height keeps the
   wordmark at a constant optical size as the bar shrinks. The footer runs the
   full badge instead, which wants width. */
.logo img{width:auto;height:clamp(28px,3.2vw,38px)}
.logo img.logo--badge{width:clamp(136px,15vw,168px);height:auto}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px)}
.nav a{
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  padding:4px 0;
  position:relative;
  white-space:nowrap;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav .btn::after{display:none}
.nav-toggle{
  display:none;
  width:44px;height:38px;
  padding:9px 8px;
  background:none;border:0;cursor:pointer;
}
.nav-toggle span{display:block;height:1.5px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.nav-toggle span + span{margin-top:6px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{
    position:fixed;
    inset:0 0 auto 0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:96px var(--gutter) 40px;
    background:var(--green-900);
    transform:translateY(-100%);
    transition:transform .4s var(--ease);
  }
  .nav.is-open{transform:translateY(0)}
  .logo,.nav-toggle{position:relative;z-index:2}
  .nav a{width:100%;padding:16px 0;font-size:1rem;border-bottom:1px solid rgba(246,241,231,.12)}
  .nav .btn{margin-top:22px;border-bottom:0;width:auto;justify-content:center}
}

/* 6. Hero --------------------------------------------------------------- */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:min(94svh,940px);
  padding-block:clamp(120px,16vh,180px) clamp(26px,3.5vh,40px);
  color:var(--cream);
  overflow:hidden;
}
.hero--short{
  min-height:min(66svh,640px);
  justify-content:center;
  padding-block:clamp(120px,16vh,180px) clamp(80px,10vh,112px);
}
/* The tall hero sets its type along the bottom, where its own gradient does
   the work. The short ones centre it against open frame, so the scrim has to
   come in from the side the text sits on. */
.hero--short .hero__media::after{
  background:
    linear-gradient(to right,rgba(10,24,15,.72),rgba(10,24,15,.26) 52%,rgba(10,24,15,.04) 100%),
    linear-gradient(to top,rgba(10,24,15,.5),rgba(10,24,15,.22));
}
.hero__media{position:absolute;inset:0;z-index:0;background:var(--green-900)}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,24,15,.9) 0%,rgba(10,24,15,.62) 38%,rgba(10,24,15,.4) 70%,rgba(10,24,15,.38) 100%);
}
.hero .container{position:relative;z-index:1;width:100%}
.hero h1{margin-bottom:.28em;text-wrap:balance;text-shadow:0 2px 24px rgba(10,24,15,.4)}
.hero .lede{max-width:44ch;margin-bottom:2em;color:rgba(246,241,231,.88)}
.hero .btn-row{margin-top:0}
/* On a photograph the brass kicker loses against the leaf greens, so the hero
   gets a lifted tint and a shadow to sit it back on the image. */
.hero .kicker{color:#EFC98C;text-shadow:0 1px 12px rgba(10,24,15,.85),0 1px 2px rgba(10,24,15,.7)}
.hero__body{margin-top:auto}
.hero__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:clamp(30px,5vh,60px);
  position:relative;
  z-index:1;
}
.hero--short .hero__foot{display:none}
.hero__meta{
  margin:0;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(246,241,231,.68);
}
.scroll-cue{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(246,241,231,.68);
  text-decoration:none;
  white-space:nowrap;
}
.scroll-cue i{display:block;width:46px;height:1px;background:currentColor;position:relative;overflow:hidden}
.scroll-cue i::after{
  content:"";position:absolute;inset:0;background:var(--brass);
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media (max-width:700px){.scroll-cue{display:none}.hero__foot{justify-content:flex-start}}

/* 7. Split (image + text) ----------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,5vw,80px);
  align-items:center;
}
.split--reverse .split__media{order:2}
.split__media{position:relative}
.split__media img{width:100%;border-radius:var(--radius);box-shadow:0 20px 44px rgba(20,48,31,.16)}
.split__body{max-width:56ch}
.stamp{
  position:absolute;
  right:-18px;
  bottom:-18px;
  width:clamp(88px,10vw,116px);
  height:clamp(88px,10vw,116px);
  display:grid;
  place-content:center;
  text-align:center;
  border-radius:50%;
  background:var(--brass);
  color:#fff;
  font-family:var(--font-display);
  font-size:.9rem;
  line-height:1.15;
  letter-spacing:.04em;
  box-shadow:0 10px 30px rgba(20,48,31,.28);
}
.stamp b{display:block;font-size:1.5em;font-weight:600}
@media (max-width:820px){
  .split{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
  .stamp{right:16px;bottom:-24px}
}

/* 8. "Branching out" — Why Hatipoti ------------------------------------- */
.branch{
  position:relative;
  display:grid;
  grid-template-columns:1fr minmax(200px,320px) 1fr;
  gap:clamp(24px,4vw,64px) clamp(24px,5vw,72px);
  align-items:center;
  margin-top:clamp(36px,5vw,60px);
}
/* Connectors are anchored to each item rather than drawn over the grid, so
   they stay aligned with the badges at any column width. */
.branch__item{position:relative}
@media (min-width:901px){
  .branch__col .branch__item::after,
  .branch__item--bottom::after{
    content:"";
    position:absolute;
    border-color:rgba(192,138,62,.5);
    border-style:dashed;
  }
  .branch__col .branch__item::after{
    top:27px;
    width:calc(clamp(24px,5vw,72px) + 6px);
    border-width:1.5px 0 0;
  }
  .branch__col--left .branch__item::after{left:100%}
  .branch__col--right .branch__item::after{right:100%}
  .branch__item--bottom::after{
    left:50%;
    bottom:100%;
    height:calc(clamp(24px,4vw,64px) + 4px);
    border-width:0 0 0 1.5px;
  }
}
.branch__center{grid-column:2;grid-row:1;position:relative;z-index:1}
.branch__center img{width:100%;border-radius:var(--radius);box-shadow:0 26px 46px rgba(0,0,0,.42)}
.branch__col{
  grid-row:1;
  display:flex;
  flex-direction:column;
  gap:clamp(28px,3.6vw,54px);
  position:relative;
  z-index:1;
}
.branch__col--left{grid-column:1;text-align:right;align-items:flex-end}
.branch__col--right{grid-column:3;text-align:left;align-items:flex-start}
.branch__item{max-width:30ch}
.branch__item--bottom{
  grid-column:2;grid-row:2;
  text-align:center;
  justify-self:center;
  position:relative;z-index:1;
}
.branch__item h3{font-size:clamp(1.05rem,1.5vw,1.3rem);margin-bottom:.45em}
.branch__item p{font-size:.92rem;line-height:1.62;margin:0;max-width:none}
.badge{
  width:56px;height:56px;
  display:grid;place-content:center;
  margin-bottom:16px;
  border:1px solid rgba(192,138,62,.55);
  border-radius:50%;
  color:var(--brass);
  background:rgba(192,138,62,.08);
}
.badge svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.branch__col--left .badge{margin-left:auto}
.branch__item--bottom .badge{margin-inline:auto}

@media (max-width:900px){
  .branch{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
  .branch__center{grid-column:1/-1;grid-row:1;max-width:230px;margin-inline:auto}
  .branch__col{display:contents}
  .branch__item{max-width:none;text-align:left;align-items:flex-start}
  .branch__col--left,.branch__col--right{text-align:left}
  .branch__col--left .badge{margin-left:0}
  .branch__item--bottom{grid-column:auto;grid-row:auto;text-align:left;justify-self:stretch}
  .branch__item--bottom .badge{margin-inline:0}
}
@media (max-width:520px){
  .branch{grid-template-columns:1fr}
}

/* 9. Product ------------------------------------------------------------ */
.product{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(32px,5vw,84px);
  align-items:center;
}
.product__gallery{display:grid;gap:14px}
.product__stage{border-radius:var(--radius)}
.product__stage img{width:100%;border-radius:var(--radius)}
.product__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.product__thumbs button{
  padding:0;border:1px solid transparent;background:var(--cream-200);
  border-radius:var(--radius);cursor:pointer;overflow:hidden;transition:border-color .25s var(--ease)
}
.section--dark .product__thumbs button{background:rgba(246,241,231,.07)}
.product__thumbs button:hover,.product__thumbs button[aria-current="true"]{border-color:var(--brass)}
.product__thumbs img{width:100%;aspect-ratio:1;object-fit:cover}
.price{display:flex;align-items:baseline;gap:14px;margin:.2em 0 1.2em}
.price b{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:600}
.price s{color:var(--muted);font-size:1rem}
.section--dark .price s{color:var(--muted-on-dark)}
.price em{
  font-style:normal;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);border:1px solid rgba(192,138,62,.5);border-radius:99px;padding:.35em .8em;
}
.spec-list{list-style:none;margin:1.6em 0 0;padding:0;border-top:1px solid rgba(26,26,23,.12)}
.section--dark .spec-list,.section--deep .spec-list{border-color:rgba(246,241,231,.16)}
.spec-list li{
  display:flex;justify-content:space-between;gap:20px;
  padding:.78em 0;border-bottom:1px solid rgba(26,26,23,.12);font-size:.92rem;
}
.section--dark .spec-list li,.section--deep .spec-list li{border-color:rgba(246,241,231,.16)}
.spec-list span:first-child{color:var(--muted);letter-spacing:.05em}
.section--dark .spec-list span:first-child{color:var(--muted-on-dark)}
.spec-list span:last-child{font-weight:600;text-align:right}
.buy-note{font-size:.78rem;color:var(--muted);margin-top:1.1em}
.section--dark .buy-note{color:var(--muted-on-dark)}
@media (max-width:820px){.product{grid-template-columns:1fr}}

/* 10. Cards / steps ----------------------------------------------------- */
.grid{display:grid;gap:clamp(20px,2.6vw,32px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.card{
  background:var(--cream-200);
  border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);
  height:100%;
}
.section--dark .card,.section--deep .card{background:rgba(246,241,231,.06)}
/* On the cream sections a card in the same cream reads as loose text, so it
   steps one tone lighter to hold its shape. */
.section--cream .card{background:var(--cream)}
.card img{border-radius:var(--radius);margin-bottom:20px;width:100%;aspect-ratio:4/3;object-fit:cover}
.card h3{font-size:1.15rem}
.card p{font-size:.93rem;margin:0}
.card__num{
  display:block;font-family:var(--font-display);font-size:2.2rem;
  color:var(--brass);line-height:1;margin-bottom:.3em;
}

/* 11. Team -------------------------------------------------------------- */
.team{position:relative;min-height:min(76svh,720px);display:grid;place-items:center;overflow:hidden;color:var(--cream);text-align:center}
.team__media{position:absolute;inset:0;background:var(--green-900)}
.team__media img{width:100%;height:100%;object-fit:cover}
/* The garden photo is busy through the middle, which is exactly where the line
   under the headline lands — a flat tint left it unreadable, so the scrim
   deepens towards the centre band. */
.team__media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 78% at 50% 58%,rgba(10,24,15,.72) 0%,rgba(10,24,15,.5) 60%,rgba(10,24,15,.42) 100%),
    linear-gradient(to bottom,rgba(10,24,15,.42),rgba(10,24,15,.42));
}
.team .container{position:relative;z-index:1}
.team h2{
  font-size:clamp(2.4rem,9vw,7rem);
  letter-spacing:-.02em;
  line-height:.95;
  margin-bottom:.3em;
  text-wrap:balance;
  text-shadow:0 2px 30px rgba(10,24,15,.55);
}
.team p{margin-inline:auto}
.team .lede{color:var(--cream);text-shadow:0 1px 14px rgba(10,24,15,.8)}

/* 12. Reviews ----------------------------------------------------------- */
/* Four reviews, four identical boxes on a two-by-two grid. The byline is
   pushed to the foot of its box, so the rails line up across the row however
   long the quote runs. */
.reviews{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;
  margin-top:clamp(36px,5vw,60px);
}
.review-box{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:0;
  height:100%;
  padding:clamp(26px,3vw,40px);
  background:var(--cream);
  border:1px solid var(--cream-300);
  border-radius:var(--radius);
}
.section--dark .review-box,.section--deep .review-box{
  background:rgba(246,241,231,.06);
  border-color:rgba(246,241,231,.16);
}
/* Auto margins centre a short quote in its box, so the spare room in a box
   next to a long review reads as breathing space rather than a gap. */
.review-box blockquote{
  margin:auto 0;
  font-family:var(--font-display);
  font-size:clamp(1.05rem,1.35vw,1.22rem);
  line-height:1.46;
  letter-spacing:-.01em;
}
.review-box blockquote p{max-width:none;margin:0 0 .75em}
.review-box blockquote p:last-child{margin-bottom:0}
.review-box figcaption{
  padding-top:18px;
  border-top:1px solid var(--cream-300);
  font-size:.82rem;
  line-height:1.5;
}
.section--dark .review-box figcaption,.section--deep .review-box figcaption{
  border-top-color:rgba(246,241,231,.16);
}
.review-box figcaption strong{display:block;font-size:.94rem}
.review-box figcaption span{color:var(--muted)}
.section--dark .review-box figcaption span,.section--deep .review-box figcaption span{color:var(--muted-on-dark)}
.stars{display:flex;gap:3px;color:var(--brass)}

/* Signed note from the family — mirrors the review figcaption. */
.signature{
  margin-top:1.6em;
  padding-top:18px;
  border-top:1px solid var(--cream-300);
  font-size:.82rem;
  line-height:1.5;
}
.signature strong{display:block;font-size:.94rem}
.signature span{color:var(--muted)}
.section--dark .signature,.section--deep .signature{border-top-color:rgba(246,241,231,.16)}
.section--dark .signature span,.section--deep .signature span{color:var(--muted-on-dark)}
.stars svg{width:15px;height:15px;fill:currentColor}
@media (max-width:780px){.reviews{grid-template-columns:1fr;grid-auto-rows:auto}}

/* 13. Contact ----------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.field{display:block;margin-bottom:20px}
.field span{
  display:block;font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.field input,.field textarea,.field select{
  width:100%;
  padding:.95em 1.05em;
  font:inherit;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--cream-300);
  border-radius:var(--radius);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;border-color:var(--brass);box-shadow:0 0 0 3px rgba(192,138,62,.16);
}
.form-note{font-size:.78rem;color:var(--muted);margin-top:14px}
.form-status{
  margin-top:16px;padding:.9em 1.1em;border-radius:var(--radius);
  background:rgba(192,138,62,.12);border:1px solid rgba(192,138,62,.4);
  font-size:.88rem;
}
.form-status[hidden]{display:none}
.info-list{list-style:none;margin:0;padding:0}
.info-list li{padding:1.2em 0;border-bottom:1px solid rgba(26,26,23,.12)}
.info-list li:first-child{padding-top:0}
.info-list h3{font-size:.72rem;font-family:var(--font-body);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:.5em}
.info-list a{text-decoration:none;border-bottom:1px solid rgba(26,26,23,.25)}
.info-list a:hover{border-color:var(--brass)}
.map{margin-top:clamp(28px,4vw,44px);border-radius:var(--radius);overflow:hidden}
.map img{width:100%;aspect-ratio:2/1;object-fit:cover}

/* 14. FAQ --------------------------------------------------------------- */
.faq{max-width:820px;margin-inline:auto;border-top:1px solid rgba(26,26,23,.14)}
.section--dark .faq{border-color:rgba(246,241,231,.16)}
.faq details{border-bottom:1px solid rgba(26,26,23,.14)}
.section--dark .faq details{border-color:rgba(246,241,231,.16)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.3em 44px 1.3em 0;position:relative;
  font-family:var(--font-display);font-size:clamp(1.05rem,1.6vw,1.25rem);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;
  border-right:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{padding-bottom:1.4em;margin:0;color:var(--muted)}
.section--dark .faq p{color:var(--muted-on-dark)}

/* 15. CTA band ---------------------------------------------------------- */
.cta{position:relative;overflow:hidden;color:var(--cream);text-align:center}
.cta__media{position:absolute;inset:0;background:var(--green-900)}
.cta__media img{width:100%;height:100%;object-fit:cover}
.cta__media::after{content:"";position:absolute;inset:0;background:rgba(10,24,15,.68)}
.cta .container{position:relative;z-index:1;padding-block:clamp(72px,10vw,132px)}
.cta h2{max-width:16ch;margin-inline:auto;text-wrap:balance}
.cta .btn-row{justify-content:center}

/* 16. Footer ------------------------------------------------------------ */
.site-footer{background:var(--green-900);color:var(--cream);padding-block:clamp(52px,6vw,76px) 28px}
.footer-top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(32px,4vw,52px);
  border-bottom:1px solid rgba(246,241,231,.14);
}
@media (max-width:760px){.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
.footer-brand .logo{margin-bottom:18px}
.footer-brand p{font-size:.92rem;color:var(--muted-on-dark);max-width:34ch}
.site-footer h4{
  font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);margin-bottom:1.2em;
}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.72em}
.site-footer a{color:var(--muted-on-dark);text-decoration:none;font-size:.92rem;transition:color .2s var(--ease)}
.site-footer a:hover{color:var(--cream)}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  padding-top:24px;font-size:.78rem;color:rgba(246,241,231,.5);
}

/* 17. Opening curtain ---------------------------------------------------
   The badge, the place line and the rule arrive as three slow beats, then the
   whole panel lifts away. Every step is CSS, including the dismissal, so a
   stalled or blocked main.js can never leave the curtain stuck over the site.
   It shows once per visit — the inline guard in each page's <head> stamps
   sessionStorage and adds .curtain-done, which skips it on the pages after
   the first without ever painting a frame of it. */
.curtain{
  position:fixed;
  inset:0;
  z-index:200;                      /* over the header, which sits at 100 */
  display:grid;
  place-items:center;
  padding:24px;
  background:var(--cream);
  animation:curtain-out .8s var(--ease) 2.55s both;
}
.curtain-done .curtain{display:none}

.curtain__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(20px,3vw,30px);
  max-width:100%;
}
.curtain__badge{
  width:clamp(128px,17vw,186px);
  height:auto;
  animation:curtain-badge 1.15s var(--ease) .1s both;
}
.curtain__kicker{
  /* tracking this wide overflows a 320px phone at full size, and a centred
     grid overflows in both directions — so it scales with the viewport */
  --track:clamp(.2em,1.1vw,.42em);
  margin:0;
  max-width:100%;
  font-size:clamp(.56rem,2.4vw,.68rem);
  font-weight:500;
  letter-spacing:var(--track);
  text-indent:var(--track);         /* the tracking is trailing, so re-centre */
  text-transform:uppercase;
  text-align:center;
  color:var(--brass-dark);
  animation:curtain-rise .8s var(--ease) .9s both;
}
.curtain__rule{
  display:block;
  width:56px;
  height:1px;
  background:var(--brass);
  animation:curtain-rule .7s var(--ease) 1.45s both;
}

@keyframes curtain-badge{
  from{opacity:0;transform:scale(.94)}
  to  {opacity:1;transform:none}
}
@keyframes curtain-rise{
  from{opacity:0;transform:translateY(9px)}
  to  {opacity:1;transform:none}
}
@keyframes curtain-rule{
  from{opacity:0;transform:scaleX(0)}
  to  {opacity:1;transform:none}
}
@keyframes curtain-out{
  to{opacity:0;visibility:hidden}
}

/* 18. Reveal on scroll -------------------------------------------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  /* durations above are already zeroed; the delays would still be waited out */
  .curtain,.curtain__badge,.curtain__kicker,.curtain__rule{animation-delay:0s!important}
}