/* =========================================================================
   The Plant Pharmacy
   Modern editorial + horticultural warmth + South Florida.
   Palette taken from the client's own logo. Photography-led; cards are used
   only where they earn their place.
   ========================================================================= */

:root{
  /* --- Green ------------------------------------------------------------ */
  --green:#014626;
  --green-900:#061C10;
  --green-800:#02351D;
  --green-700:#075030;
  --green-600:#0A5C33;
  --green-400:#3E7F5C;
  --green-100:#E4EDE6;

  /* --- Gold: reserved for CTA, emphasis and selected states -------------- */
  --gold:#FED85F;
  --gold-deep:#E3A81C;
  --gold-tint:#FDF3D6;

  /* --- Warm neutrals ----------------------------------------------------- */
  --paper:#FFFFFF;
  --cream:#F8F6EE;
  --sand:#F0EBDC;
  --clay:#E6E0CC;
  --ink:#1B2119;
  --body:#4A4D43;
  --muted:#797C6F;
  --rule:#E3DECD;

  /* --- Type -------------------------------------------------------------- */
  --font-display:"Fraunces",ui-serif,Georgia,serif;
  --font-body:"DM Sans",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;

  --fs-hero:clamp(3rem,5vw,5rem);
  --fs-h1:clamp(2.6rem,4.4vw,4.25rem);
  --fs-h2:clamp(2.3rem,3.8vw,3.75rem);
  --fs-h3:clamp(1.4rem,2vw,1.9rem);
  --fs-h4:1.2rem;
  --fs-h5:1.05rem;
  --fs-h6:.95rem;
  --fs-body:1.0625rem;
  --fs-lead:clamp(1.075rem,1.5vw,1.25rem);
  --fs-small:.9375rem;
  --fs-label:.72rem;

  /* Weights are tokens so the Design screen can drive boldness. */
  --fw-body:400;
  --fw-medium:500;
  --fw-semi:600;
  --fw-bold:700;
  --fw-display:600;

  --lh-head:1.06;
  --lh-body:1.62;
  --ls-head:-.02em;
  --ls-body:0;
  --ls-tight:.01em;
  --ls-label:.16em;

  /* --- Space: sections vary deliberately, they are not interchangeable --- */
  --wrap:1340px;
  --wrap-wide:1440px;
  --wrap-narrow:720px;
  --gutter:clamp(1.15rem,4vw,3rem);
  --sy:clamp(4.5rem,9vw,9.5rem);      /* standard  */
  --sy-lg:clamp(5.5rem,12vw,12rem);   /* spacious  */
  --sy-sm:clamp(3rem,6vw,5.5rem);     /* dense     */

  --r-sm:6px;
  --r-md:12px;
  --r-lg:20px;
  --r-organic:36px;
  --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(27,33,25,.05),0 3px 10px rgba(27,33,25,.05);
  --shadow-md:0 6px 18px rgba(27,33,25,.07),0 18px 44px rgba(27,33,25,.08);
  --shadow-lg:0 24px 70px rgba(6,28,16,.18);

  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:82px;
}

/* ---------------------------------------------------------------- Reset -- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--cream);color:var(--body);
  font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-body);
  line-height:var(--lh-body);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:var(--green);text-underline-offset:3px;}
a:hover{color:var(--green-600);}
button{font:inherit;color:inherit;}
:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;border-radius:3px;}
::selection{background:var(--gold);color:var(--green-900);}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);color:var(--ink);
  line-height:var(--lh-head);letter-spacing:var(--ls-head);
  font-weight:var(--fw-display);margin:0 0 .5em;text-wrap:balance;
}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}
h4{font-size:var(--fs-h4);}
h5{font-size:var(--fs-h5);}
h6{font-size:var(--fs-h6);}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}

/* ------------------------------------------------------------- Layout ---- */
.wrap{width:min(100% - (var(--gutter)*2),var(--wrap));margin-inline:auto;}
.wrap-wide{width:min(100% - (var(--gutter)*2),var(--wrap-wide));margin-inline:auto;}
.wrap-narrow{width:min(100% - (var(--gutter)*2),var(--wrap-narrow));margin-inline:auto;}

.section{padding-block:var(--sy);position:relative;}
.section--lg{padding-block:var(--sy-lg);}
.section--sm{padding-block:var(--sy-sm);}
.section--paper{background:var(--paper);}
.section--cream{background:var(--cream);}
.section--sand{background:var(--sand);}
.section--green{background:var(--green);color:#DCE7DD;}
.section--forest{background:var(--green-900);color:#C9D8CB;}
.section--green h2,.section--green h3,.section--forest h2,.section--forest h3{color:#fff;}

.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--green);color:#fff;padding:.75rem 1.25rem;}
.skip-link:focus{left:.5rem;top:.5rem;}

.eyebrow{
  font-family:var(--font-body);font-size:var(--fs-label);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--green-600);margin:0 0 1rem;
  display:flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold-deep);flex:none;}
.eyebrow--centred{justify-content:center;}
.section--green .eyebrow,.section--forest .eyebrow,
.hero .eyebrow,.final .eyebrow{color:var(--gold);}
.section--green .eyebrow::before,.section--forest .eyebrow::before,
.hero .eyebrow::before,.final .eyebrow::before{background:var(--gold);}

.lead{font-size:var(--fs-lead);color:var(--body);max-width:56ch;}
.section--green .lead,.section--forest .lead{color:#BFD0C1;}

.s-head{max-width:62ch;margin-bottom:clamp(2.5rem,5vw,4rem);}
.s-head--centred{max-width:none;text-align:center;}
.s-head--centred .lead{margin-inline:auto;}
.s-head--centred h2{max-width:22ch;margin-inline:auto;}

/* ------------------------------------------------ Botanical decoration --- */
/* Oversized, very low-contrast foliage marks that break the rectangle
   without adding rustic clutter. Purely decorative, never announced. */
.leafmark{
  position:absolute;pointer-events:none;z-index:0;
  color:var(--green);opacity:.028;
}
.leafmark--tr{top:-4%;right:-6%;width:clamp(220px,30vw,520px);}
.leafmark--bl{bottom:-8%;left:-7%;width:clamp(200px,26vw,460px);rotate:190deg;}
.section--green .leafmark,.section--forest .leafmark{color:#fff;opacity:.06;}
.section > .wrap,.section > .wrap-wide,.section > .wrap-narrow{position:relative;z-index:1;}

/* Placeholder for photography that has not been supplied yet. Designed, so
   the layout reads correctly — but obviously a placeholder. */
.ph{
  position:relative;overflow:hidden;background:var(--panel,#EFEBDD);
  display:flex;align-items:center;justify-content:center;
}
:root{--panel:#EFEBDD;}
.ph::after{
  content:attr(data-ph);
  font-size:.6rem;font-weight:700;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--muted);opacity:.7;
}
.ph svg{display:none;}
.section--green .ph,.section--forest .ph{background:linear-gradient(150deg,var(--green-700) 0%,var(--green-900) 100%);}
.section--green .ph svg,.section--forest .ph svg{color:#fff;opacity:.22;}
.section--green .ph::after,.section--forest .ph::after{background:rgba(0,0,0,.3);color:#C9D8CB;}

/* ------------------------------------------------------------ Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-weight:var(--fw-bold);font-size:.95rem;letter-spacing:var(--ls-tight);
  padding:1rem 1.75rem;min-height:48px;border-radius:var(--r-pill);
  border:2px solid transparent;cursor:pointer;text-decoration:none;
  transition:background-color .2s var(--ease),color .2s var(--ease),
             border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.btn .tpp-icon{flex:none;transition:transform .2s var(--ease);}
.btn:hover .tpp-icon:last-child{transform:translateX(4px);}
.btn--primary{background:var(--gold);color:var(--green-900);border-color:var(--gold);}
.btn--primary:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--green-900);box-shadow:0 8px 20px rgba(227,168,28,.28);}
.btn--secondary{background:var(--green);color:#fff;border-color:var(--green);}
.btn--secondary:hover{background:var(--green-700);border-color:var(--green-700);color:#fff;}
.btn--outline{background:transparent;color:var(--green);border-color:var(--rule);}
.btn--outline:hover{border-color:var(--green);background:var(--green);color:#fff;}
.btn--ondark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);}
.btn--ondark:hover{background:#fff;color:var(--green);border-color:#fff;}

/* Tertiary: text + arrow. The workhorse — replaces most secondary buttons. */
.tlink{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:var(--fw-bold);font-size:.95rem;color:var(--green);
  text-decoration:none;padding-block:.35rem;
}
.tlink .tpp-icon{transition:transform .2s var(--ease);}
.tlink:hover .tpp-icon{transform:translateX(5px);}
.section--green .tlink,.section--forest .tlink{color:var(--gold);}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--rule);
  background:transparent;cursor:pointer;color:var(--ink);
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.icon-btn:hover{background:var(--green);color:#fff;border-color:var(--green);}

/* ------------------------------------------------------- Utility strip --- */
.utility-bar{background:var(--green-900);color:#B9CCBB;font-size:.82rem;}
.utility-inner{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:center;justify-content:space-between;min-height:40px;padding-block:.45rem;}
.utility-note{display:flex;align-items:center;gap:.5rem;margin:0;color:var(--gold);font-weight:600;}
.utility-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;}
.utility-meta a,.utility-city{display:inline-flex;align-items:center;gap:.4rem;color:#B9CCBB;text-decoration:none;}
.utility-meta a:hover{color:#fff;}
@media(max-width:719px){.utility-meta{display:none;}.utility-note{font-size:.78rem;}}

/* ------------------------------------------------------------- Header ---- */
.site-head-wrap{position:sticky;top:0;z-index:90;}
.site-header{background:var(--paper);border-bottom:1px solid var(--rule);transition:box-shadow .25s var(--ease);}
.site-head-wrap.is-stuck .site-header{box-shadow:var(--shadow-sm);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--header-h);}

/* The logo sits in a white well that hangs below the bar, its underside
   curved to echo the mortar bowl in the mark. */
.site-brand{position:relative;z-index:2;flex:none;display:flex;align-items:center;text-decoration:none;}
.site-brand::before{
  content:"";position:absolute;inset:-15px -22px -26px -22px;
  background:var(--paper);border-radius:0 0 40px 40px;z-index:-1;
  box-shadow:0 14px 26px rgba(27,33,25,.07);
  transition:inset .28s var(--ease),border-radius .28s var(--ease);
}
.site-brand img{max-height:56px;width:auto;margin-top:10px;transition:max-height .28s var(--ease),margin-top .28s var(--ease);}
@media(min-width:1080px){.site-brand img{max-height:66px;}}
.site-head-wrap.is-stuck .site-brand::before{inset:-12px -17px -10px -17px;border-radius:0 0 22px 22px;}
.site-head-wrap.is-stuck .site-brand img{max-height:48px;margin-top:0;}
@media(max-width:1079px){
  .site-brand::before{inset:-10px -14px -14px -14px;border-radius:0 0 24px 24px;}
}
.brand-text{font-family:var(--font-display);font-weight:700;color:var(--green);font-size:1.2rem;line-height:1.05;}
.brand-tag{display:block;font-family:var(--font-body);font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}

.nav-primary{display:none;}
@media(min-width:1080px){
  /* Centred in the header, set in uppercase with tracking so the row reads as
     a considered navigation rather than body text. */
  .nav-primary{display:block;margin-inline:auto;}
  .nav-primary > ul{display:flex;justify-content:center;gap:2.1rem;list-style:none;margin:0;padding:0;}
  .nav-primary li{position:relative;}
  .nav-primary > ul > li > a{
    display:inline-flex;align-items:center;gap:.35rem;
    text-decoration:none;color:var(--ink);
    font-weight:700;font-size:.8rem;
    text-transform:uppercase;letter-spacing:.09em;
    padding:.55rem 0;position:relative;
  }
  .nav-primary > ul > li > a::after{
    content:"";position:absolute;left:0;right:0;bottom:.1rem;height:2px;
    background:var(--gold-deep);transform:scaleX(0);transform-origin:left;
    transition:transform .25s var(--ease);
  }
  .nav-primary > ul > li > a:hover::after,
  .nav-primary .current-menu-item > a::after{transform:scaleX(1);}
  .nav-caret{transition:transform .2s var(--ease);}
  .nav-primary li:hover > a .nav-caret,
  .nav-primary li:focus-within > a .nav-caret{transform:rotate(90deg);}

  .nav-primary .sub-menu{
    position:absolute;top:calc(100% + .5rem);left:-1.25rem;
    min-width:270px;list-style:none;margin:0;padding:.6rem;
    background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);
    box-shadow:var(--shadow-md);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  }
  .nav-primary li:hover > .sub-menu,
  .nav-primary li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none;}
  .nav-primary .sub-menu a{
    display:block;padding:.6rem .85rem;border-radius:var(--r-md);
    text-decoration:none;color:var(--body);font-size:.94rem;font-weight:600;
  }
  .nav-primary .sub-menu a:hover{background:var(--green-100);color:var(--green);}
}
.header-actions{display:flex;align-items:center;gap:.6rem;flex:none;}
@media(max-width:1079px){.header-actions .btn--secondary{display:none;}}
@media(max-width:639px){
  .header-actions .btn span{display:none;}
  .header-actions .btn{padding:.85rem;min-width:48px;}
  .header-actions .icon-btn{display:none;}
}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--paper);cursor:pointer;}
@media(min-width:1080px){.nav-toggle{display:none;}}

.header-search{border-top:1px solid var(--rule);background:var(--cream);}
.header-search-form{display:flex;align-items:center;gap:.75rem;padding-block:1rem;color:var(--muted);}
.header-search-form input[type="search"]{flex:1;min-width:0;border:0;background:none;font-family:var(--font-body);font-size:1.05rem;color:var(--ink);padding:.6rem 0;}
.header-search-form input[type="search"]:focus{outline:none;}

/* ---------------------------------------------------------- Mobile nav --- */
.nav-drawer{
  position:fixed;inset:0;z-index:120;background:var(--paper);
  transform:translateX(100%);transition:transform .3s var(--ease);
  display:flex;flex-direction:column;visibility:hidden;
}
.nav-drawer.is-open{transform:translateX(0);visibility:visible;}
.nav-drawer-top{display:flex;align-items:center;justify-content:space-between;padding:1rem var(--gutter);border-bottom:1px solid var(--rule);min-height:var(--header-h);}
.nav-drawer nav{padding:1.5rem var(--gutter);overflow-y:auto;flex:1;}
.nav-drawer ul{list-style:none;margin:0;padding:0;}
.nav-drawer > nav > ul > li > a{
  display:block;padding:.95rem 0;font-family:var(--font-display);font-size:1.45rem;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);
}
.nav-drawer .sub-menu{padding:.5rem 0 1rem 1rem;}
.nav-drawer .sub-menu a{display:block;padding:.55rem 0;color:var(--body);text-decoration:none;font-size:1rem;}
.nav-drawer .nav-caret{display:none;}
.nav-drawer-foot{padding:1.5rem var(--gutter);background:var(--cream);border-top:1px solid var(--rule);}
.drawer-note{display:flex;gap:.55rem;align-items:flex-start;color:var(--green);font-weight:600;font-size:.95rem;}
.nav-drawer-foot .btn{width:100%;margin-top:.75rem;}
body.nav-open{overflow:hidden;}

/* --------------------------------------------------------------- Hero ---- */
/* Full-bleed photograph, statement over it, a floating diagnosis card on the
   image. Calm and photography-led; a quiet green ground stands in with no photo. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(520px,72vh,760px);display:flex;align-items:flex-end;
  color:#fff;background:var(--green-900);
}
.hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;}
.hero.hero--photo::after,
.hero.hero--plain::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(6,28,16,.82) 0%,rgba(6,28,16,.55) 42%,rgba(6,28,16,.15) 100%),
             linear-gradient(0deg,rgba(6,28,16,.55) 0%,rgba(6,28,16,0) 45%);
}
.hero--plain .hero-bg{
  background:
    radial-gradient(90% 80% at 80% 10%,rgba(254,216,95,.14) 0%,rgba(254,216,95,0) 55%),
    linear-gradient(140deg,var(--green) 0%,var(--green-900) 100%);
}
.hero--plain .hero-bg.ph::after,.hero--plain .hero-bg svg{opacity:.14;}
.hero-inner{
  position:relative;z-index:1;
  display:grid;gap:2rem;align-items:end;
  padding-block:clamp(2.5rem,6vw,4.5rem);
}
@media(min-width:920px){.hero-inner{grid-template-columns:1.55fr .45fr;gap:3rem;}}
.hero-copy{max-width:660px;}
.hero h1{color:#fff;font-size:clamp(2.6rem,4.6vw,4.25rem);margin-bottom:.4em;text-wrap:balance;}
.hero h1 .accent{color:var(--gold);}
.hero .eyebrow{color:var(--gold);}
.hero .eyebrow::before{background:var(--gold);}
.hero-intro{font-size:var(--fs-lead);color:#DCE7DD;max-width:42ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem;}

/* Floating diagnosis card — the Farmora "mission card" idea, made ours. */
.hero-card{
  align-self:end;justify-self:stretch;text-decoration:none;color:#EAF2EA;
  background:rgba(6,24,14,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);
  padding:1.5rem 1.6rem;display:flex;flex-direction:column;gap:.5rem;
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.hero-card:hover{background:rgba(6,24,14,.72);transform:translateY(-3px);}
.hero-card-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);}
.hero-card-title{font-family:var(--font-display);font-size:1.3rem;color:#fff;}
.hero-card-text{font-size:.92rem;color:#C4D6C6;line-height:1.5;}
.hero-card-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.35rem;font-weight:700;font-size:.85rem;color:var(--gold);}
@media(max-width:919px){.hero-card{justify-self:start;max-width:26rem;}}

/* --------------------------------------------------------- The promise --- */
.promise-grid{display:grid;gap:1.5rem;}
@media(min-width:900px){.promise-grid{grid-template-columns:.3fr .7fr;gap:clamp(2rem,5vw,4.5rem);}}
.promise-aside .eyebrow{margin-top:.5rem;}
.promise-statement{
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(1.75rem,3.4vw,2.9rem);line-height:1.18;letter-spacing:-.015em;
  color:var(--ink);margin:0 0 1.5rem;text-wrap:balance;max-width:24ch;
}
.promise-body .lead{margin-bottom:1.75rem;}

/* -------------------------------------------------------------- Proof ---- */
.proof-grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;}
@media(min-width:920px){.proof-grid{grid-template-columns:.9fr 1.1fr;}}
.proof-figure{border-radius:120px var(--r-organic) var(--r-organic) var(--r-organic);overflow:hidden;aspect-ratio:4/4.4;}
.proof-figure img,.proof-figure .ph{width:100%;height:100%;object-fit:cover;}
.proof-copy h2{font-size:var(--fs-h2);}
.proof-copy h2 span{display:block;}
.proof-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,1.6vw,1.25rem);margin:clamp(1.75rem,3vw,2.5rem) 0;}
.proof-stats > div{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);
  padding:1.15rem 1.25rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.proof-stats > div:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.proof-stats dt{font-family:var(--font-display);font-size:clamp(1.7rem,2.8vw,2.4rem);color:var(--green);line-height:1;margin-bottom:.25rem;}
.proof-stats dd{margin:0;font-size:var(--fs-small);color:var(--body);max-width:24ch;}
.proof-line{
  display:flex;align-items:center;gap:.7rem;
  background:var(--green-100);border-radius:var(--r-md);padding:.9rem 1.1rem;
  font-size:var(--fs-small);color:var(--green);font-weight:600;
}
.proof-line .tpp-icon{flex:none;color:var(--green);}

/* -------------------------------------------------------- Trust strip ---- */
.trust-strip{background:var(--paper);border-bottom:1px solid var(--rule);}
.trust-row{
  display:flex;flex-wrap:wrap;justify-content:center;
  padding-block:clamp(1.5rem,3vw,2.25rem);
}
.trust-item{
  display:flex;align-items:center;gap:.65rem;
  padding:.55rem clamp(1rem,2.4vw,2.25rem);
  font-size:.94rem;font-weight:600;color:var(--ink);
  border-right:1px solid var(--rule);
}
.trust-item:last-child{border-right:0;}
.trust-item .tpp-icon{color:var(--green-400);flex:none;}
.trust-item b{color:var(--green);font-family:var(--font-display);font-size:1.05rem;}
@media(max-width:719px){
  .trust-item{border-right:0;flex:0 0 100%;justify-content:flex-start;padding-inline:0;}
}

/* ------------------------------------------------------- Shop by need ---- */
/* Editorial grid: the first tile is deliberately larger so the row does not
   read as five interchangeable rectangles. */
.need-grid{display:grid;gap:clamp(1rem,1.8vw,1.5rem);}
@media(min-width:640px){.need-grid{grid-template-columns:repeat(2,1fr);}}
.need-card{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r-lg);text-decoration:none;color:#fff;
  min-height:clamp(240px,26vw,320px);
  background:var(--green-800);isolation:isolate;
}
.need-media{position:absolute;inset:0;z-index:-2;}
.need-media img,.need-media .ph{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
/* Diagonal overlay: dark at the bottom-left (behind the text) fading to clear
   at the top-right — keeps the copy readable over any photo. */
.need-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top right,rgba(6,28,16,.94) 0%,rgba(6,28,16,.62) 38%,rgba(6,28,16,.18) 74%,rgba(6,28,16,0) 100%);
}
.need-card{transition:box-shadow .25s var(--ease),transform .25s var(--ease);}
.need-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);}
.need-card:hover .need-media img{transform:scale(1.05);}
.need-body{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.25rem,2.4vw,1.9rem);text-align:left;--need-pad:clamp(1.25rem,2.4vw,1.9rem);}
.need-body h3{color:#fff;margin:0 0 .3rem;font-size:clamp(1.3rem,2vw,1.75rem);text-shadow:0 1px 12px rgba(0,0,0,.35);}
.need-body p{color:#DCE7DD;font-size:var(--fs-small);margin:0;max-width:34ch;text-shadow:0 1px 10px rgba(0,0,0,.3);}
/* Default: the title + description sit at the very bottom, where "Learn more"
   will appear. On hover the whole text block slides up as one and "Learn more"
   fades in beneath it, in the space it left behind. */
.need-text{display:block;transition:transform .35s var(--ease);}
.need-card:hover .need-text,.need-card:focus-visible .need-text{transform:translateY(-2.35rem);}
.need-more{
  position:absolute;left:var(--need-pad);bottom:var(--need-pad);
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  font-weight:700;font-size:.9rem;color:var(--gold);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .35s var(--ease);
}
.need-card:hover .need-more,.need-card:focus-visible .need-more{opacity:1;transform:translateY(0);pointer-events:auto;}
@media(hover:none){.need-text{transform:translateY(-2.35rem);}.need-more{opacity:1;transform:none;}}

/* ---------------------------------------------------------- Products ----- */
.prod-grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem);}
@media(min-width:640px){.prod-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1100px){
  .prod-grid{grid-template-columns:repeat(3,1fr);}
  .prod-grid[data-count="4"]{grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,2vw,1.75rem);}
  .prod-grid[data-count="2"]{grid-template-columns:repeat(2,1fr);max-width:900px;}
  .prod-grid[data-count="1"]{grid-template-columns:minmax(0,400px);}
}
.prod{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.prod:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent;}
.prod-media{
  overflow:hidden;background:var(--green);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  padding:clamp(1.1rem,2.2vw,1.9rem);
}
.prod-media img{max-width:100%;max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 16px 28px rgba(0,0,0,.32));}
/* Placeholder photo fills the media box edge-to-edge; real packshots stay contained. */
.prod-media img.is-placeholder,.p-figure img.is-placeholder{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;filter:none;
}
.p-figure{position:relative;}

/* One inset value for every text row, and vertical-only margins so nothing
   resets the horizontal padding (the description used to run edge-to-edge). */
.prod{--prod-pad:clamp(1.25rem,2vw,1.6rem);}
.prod-type,.prod h3,.prod p,.prod .tlink{margin-inline:var(--prod-pad);}
.prod-type{
  margin-block:1.25rem .4rem;font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold-deep);
}
.prod h3{margin-block:0 .5rem;font-size:clamp(1.3rem,1.8vw,1.5rem);line-height:1.2;color:var(--ink);}
.prod:hover h3{color:var(--green);}
.prod p{margin-block:0 1.25rem;font-size:var(--fs-small);line-height:1.55;color:var(--body);}
.prod .tlink{margin-top:auto;margin-bottom:1.4rem;}
.section-foot{margin-top:clamp(2.5rem,4vw,3.5rem);display:flex;justify-content:center;}

/* --------------------------------------------------- Ask the Professor --- */
.professor{position:relative;overflow:hidden;}
.professor--light{background:var(--paper);color:var(--body);}
.professor-head{display:grid;gap:2rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem);}
@media(min-width:900px){.professor-head{grid-template-columns:1.15fr .85fr;gap:3.5rem;}}



.steps{display:grid;gap:clamp(1rem,1.6vw,1.4rem);}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.steps{grid-template-columns:repeat(4,1fr);}}
.step{background:var(--cream);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(1.5rem,2.4vw,2rem);display:flex;flex-direction:column;gap:.5rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease);}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.step-n{
  font-family:var(--font-display);font-size:2.4rem;line-height:1;
  color:var(--gold);font-variant-numeric:tabular-nums;margin-bottom:.4rem;
}
.step h3{color:var(--ink);font-family:var(--font-body);font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;margin:0;}
.step p{color:var(--body);font-size:var(--fs-small);margin:0;}

.professor-cta{
  margin-top:clamp(2rem,4vw,3rem);
  display:grid;gap:2rem;align-items:center;
  background:linear-gradient(120deg,var(--green-700) 0%,var(--green-800) 100%);
  border-radius:var(--r-organic);padding:clamp(1.75rem,3.5vw,3rem);
  position:relative;overflow:hidden;
}
@media(min-width:820px){.professor-cta{grid-template-columns:auto 1fr auto;gap:2.5rem;}}
.professor-cta img{width:clamp(110px,13vw,170px);filter:drop-shadow(0 14px 24px rgba(0,0,0,.45));}
.professor-cta h3{color:#fff;font-size:clamp(1.5rem,2.4vw,2rem);margin:0 0 .35rem;}
.professor-cta p{color:#B6CAB8;margin:0;}

/* ------------------------------------------------------- Case study ------ */
.case-grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-items:center;}
@media(min-width:980px){.case-grid{grid-template-columns:1fr 1.1fr 1fr;}}
.case-figure{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;}
.case-figure img,.case-figure .ph{width:100%;height:100%;object-fit:cover;}
.case-figure--after{border-radius:var(--r-lg) var(--r-lg) 90px var(--r-lg);}
.case-copy{padding-block:1rem;}
.case-title{font-size:clamp(1.9rem,3vw,2.6rem);margin-bottom:1.5rem;}
.case-step{padding:1.1rem 0;border-top:1px solid var(--rule);}
.case-step:last-of-type{border-bottom:1px solid var(--rule);margin-bottom:1.75rem;}
.case-step dt{
  font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:.35rem;
}
.case-step dd{margin:0;color:var(--body);}

/* --------------------------------------------------------------- Why ----- */
.why-grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center;}
@media(min-width:980px){.why-grid{grid-template-columns:.95fr 1.05fr;}}
.why-figure{border-radius:120px var(--r-organic) var(--r-organic) var(--r-organic);overflow:hidden;aspect-ratio:4/4.6;}
.why-figure img,.why-figure .ph{width:100%;height:100%;object-fit:cover;}
.why-grid h2{font-size:var(--fs-h2);}
.why-grid h2 span{display:block;}
.stat-row{display:grid;gap:clamp(1.25rem,2.5vw,2rem);margin:clamp(2rem,3.5vw,2.75rem) 0;}
@media(min-width:560px){.stat-row{grid-template-columns:repeat(2,1fr);}}
.stat dt{
  font-family:var(--font-display);font-size:clamp(2rem,3.4vw,2.9rem);
  color:var(--green);line-height:1;margin-bottom:.35rem;
}
.stat dd{margin:0;font-size:var(--fs-small);color:var(--body);max-width:26ch;}
.why-more{display:flex;flex-wrap:wrap;gap:.5rem .65rem;}
.why-more li{
  list-style:none;font-size:.86rem;color:var(--body);
  background:var(--paper);border:1px solid var(--rule);
  padding:.45rem .95rem;border-radius:var(--r-pill);
}

/* -------------------------------------------------------------- Story ---- */
.story{background:var(--sand);position:relative;overflow:hidden;}
.story-grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center;}
@media(min-width:980px){.story-grid{grid-template-columns:1.05fr .95fr;}}
.story-figure{border-radius:var(--r-organic) 140px var(--r-organic) var(--r-organic);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shadow-md);}
.story-figure img,.story-figure .ph{width:100%;height:100%;object-fit:cover;}
.story h2{font-size:var(--fs-h2);max-width:16ch;}

/* -------------------------------------------------------------- Guide ---- */
.guide-grid{display:grid;gap:clamp(1.5rem,3vw,2.25rem);}
@media(min-width:700px){.guide-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.guide-grid{grid-template-columns:repeat(3,1fr);}}
.guide{display:flex;flex-direction:column;text-decoration:none;color:inherit;}
.guide-media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/2;margin-bottom:1.25rem;}
.guide-media img,.guide-media .ph{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.guide:hover .guide-media img{transform:scale(1.04);}
.guide-cat{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold-deep);margin-bottom:.5rem;}
.guide h3{font-size:clamp(1.25rem,1.8vw,1.5rem);margin:0 0 .6rem;}
.guide:hover h3{color:var(--green);}
.guide p{font-size:var(--fs-small);color:var(--body);margin:0 0 1rem;}
.guide .tlink{margin-top:auto;}

/* ------------------------------------------------------- Where to buy ---- */
.buy-grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-items:center;}
@media(min-width:980px){.buy-grid{grid-template-columns:1fr 1fr;}}
.buy-routes{display:grid;gap:1px;background:rgba(255,255,255,.16);border-radius:var(--r-lg);overflow:hidden;}
@media(min-width:560px){.buy-routes{grid-template-columns:repeat(2,1fr);}}
.buy-route{background:var(--green);padding:clamp(1.4rem,2.4vw,1.9rem);display:flex;flex-direction:column;gap:.5rem;}
.buy-route .tpp-icon{color:var(--gold);}
.buy-route h3{color:#fff;font-size:1.1rem;margin:.4rem 0 0;}
.buy-route p{color:#A9BFAB;font-size:var(--fs-small);margin:0;}

/* ---------------------------------------------------------------- FAQ ---- */
.faq-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start;}
@media(min-width:900px){.faq-grid{grid-template-columns:.8fr 1.2fr;}}
.accordion{border-top:1px solid var(--rule);}
.accordion-item{border-bottom:1px solid var(--rule);}
.accordion-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  background:none;border:0;padding:1.35rem 0;min-height:56px;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-size:clamp(1.1rem,1.5vw,1.3rem);font-weight:600;color:var(--ink);
  transition:color .2s var(--ease);
}
.accordion-trigger:hover{color:var(--green);}
.acc-sign{position:relative;flex:none;width:26px;height:26px;}
.acc-sign::before,.acc-sign::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--green);
  translate:-50% -50%;transition:transform .28s var(--ease),opacity .28s var(--ease);
}
.acc-sign::before{width:15px;height:2px;}
.acc-sign::after{width:2px;height:15px;}
.accordion-trigger[aria-expanded="true"] .acc-sign::after{transform:scaleY(0);opacity:0;}
.accordion-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease);}
.accordion-panel > div{overflow:hidden;}
.accordion-panel.is-open{grid-template-rows:1fr;}
.accordion-panel p{padding-bottom:1.4rem;max-width:68ch;color:var(--body);margin:0;}

/* ---------------------------------------------------------- Final CTA ---- */
.final{background:var(--green-900);color:#B6CAB8;position:relative;overflow:hidden;}
.final-grid{display:grid;gap:2.5rem;align-items:center;}
@media(min-width:900px){.final-grid{grid-template-columns:1.2fr auto;gap:4rem;}}
.final h2{color:#fff;font-size:clamp(2.4rem,4.4vw,4rem);max-width:16ch;}
.final h2 span{display:block;}
.final-actions{display:flex;flex-wrap:wrap;gap:.85rem;}
.final-professor{position:absolute;right:-2%;bottom:0;width:clamp(150px,17vw,260px);opacity:.9;pointer-events:none;}
@media(max-width:1099px){.final-professor{display:none;}}

/* ------------------------------------------------------------- Footer ---- */
.site-footer{background:var(--cream);border-top:4px solid var(--gold);}
.footer-main{padding-block:clamp(3rem,6vw,5rem) 2rem;display:grid;gap:2.5rem;}
@media(min-width:700px){.footer-main{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1080px){.footer-main{grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:2rem;}}
.footer-logo{max-height:78px;width:auto;margin-bottom:1.1rem;}
.footer-blurb{font-size:var(--fs-small);color:var(--muted);max-width:32ch;margin-bottom:1.25rem;}
.site-footer h3{
  font-family:var(--font-body);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);
  margin:0 0 1.1rem;
}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem;}
.site-footer a{color:var(--body);text-decoration:none;font-size:.95rem;}
.site-footer a:hover{color:var(--green);}
.social-row{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;flex-direction:row!important;}
.social-btn{
  width:42px;height:42px;border-radius:50%;background:var(--paper);
  border:1px solid var(--rule);color:var(--green);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.social-btn:hover{background:var(--green);color:#fff;transform:translateY(-2px);}
.footer-contact li{font-size:.95rem;color:var(--body);}
.footer-bottom{
  border-top:1px solid var(--rule);padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;justify-content:space-between;
  font-size:.85rem;color:var(--muted);
}
.footer-bottom a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:.85rem;}

.to-top{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:80;
  width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:var(--green);color:#fff;box-shadow:var(--shadow-md);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .2s var(--ease),transform .2s var(--ease);
}
.to-top:hover{background:var(--green-700);transform:translateY(-3px);}
.to-top[hidden]{display:none;}

/* ------------------------------------------------------------ Utility ---- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.is-hidden{display:none!important;}
.reveal{opacity:0;transform:translateY(18px);}
.reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none;}
  .btn:hover,.prod:hover .prod-media,.social-btn:hover,.to-top:hover{transform:none;}
  .need-card:hover .need-media img,.guide:hover .guide-media img{transform:none;}
}

/* ==========================================================================
   Product pages — same language as the homepage: a dark hero, editorial bands,
   and data set as data. Cards only where products are being browsed.
   ========================================================================== */

/* Registered mark — small superscript, never full-size type. */
.tpp-reg{font-size:.42em;vertical-align:super;letter-spacing:0;}
/* Gold only on dark grounds; the deeper tone keeps contrast on cream. */
.p-hero .tpp-reg{color:var(--gold);}
.prod .tpp-reg,.showcase-title .tpp-reg{color:var(--gold-deep);}
.tpp-npk-inline{
  font-variant-numeric:tabular-nums;color:var(--muted);
  font-family:var(--font-body);font-size:.72em;font-weight:600;
}

/* ---------------------------------------------------------- Product hero -- */
.p-hero{
  position:relative;background:var(--green);color:#C4D6C6;
  overflow:hidden;isolation:isolate;
  padding-block:clamp(2rem,4vw,3rem) clamp(3rem,6vw,5rem);
}
.p-hero-ground{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  opacity:.22;
}
.p-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,var(--green) 0%,rgba(1,70,38,.94) 45%,rgba(6,28,16,.82) 100%);
}
.p-hero-inner{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center;}
@media(min-width:980px){.p-hero-inner{grid-template-columns:55fr 45fr;gap:clamp(3rem,5vw,5rem);}}
.p-hero h1{color:#fff;font-size:var(--fs-h1);margin-bottom:.2em;}
.p-hero .lead{color:#B9CDBB;max-width:48ch;}
.p-hero .eyebrow{color:var(--gold);}
.p-hero .eyebrow::before{background:var(--gold);}

.crumbs{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  font-size:.85rem;color:rgba(255,255,255,.6);margin-bottom:1.5rem;
}
.crumbs a{color:rgba(255,255,255,.78);text-decoration:none;}
.crumbs a:hover{color:var(--gold);}

.p-npk{
  font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.04em;
  font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--gold);margin:0 0 .5rem;
}
.p-descriptor{
  font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:#8FA891;margin-bottom:1.1rem;
}

/* Inline facts — a wrapping list, never a fixed-column band, so one fact reads
   as one fact when a product has sparse data. */
.fact-list{display:flex;flex-wrap:wrap;gap:.65rem;margin:1.75rem 0 0;padding:0;}
.fact{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-md);padding:.65rem 1rem;min-width:0;
}
.fact dt{
  font-size:.64rem;font-weight:700;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--gold);margin-bottom:.2rem;
}
.fact dd{margin:0;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;font-size:.95rem;}
.p-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem;}

.p-figure{
  margin:0;border-radius:var(--r-organic) var(--r-organic) 120px var(--r-organic);
  overflow:hidden;background:var(--green-800);box-shadow:var(--shadow-lg);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  padding:clamp(1.5rem,3vw,2.75rem);
}
.p-figure img{max-width:100%;max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 18px 32px rgba(0,0,0,.4));}
.p-figure .ph{width:100%;height:100%;}

.p-hero--archive .wrap{max-width:var(--wrap);}
.p-hero--archive h1{font-size:var(--fs-h1);}

/* ------------------------------------------------------------- Benefits --- */
/* Hairline grid, no boxes. */
.p-benefits{
  list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--rule);border-block:1px solid var(--rule);
}
@media(min-width:620px){.p-benefits{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){
  .p-benefits{grid-template-columns:repeat(3,1fr);}
  .p-benefits[data-count="4"]{grid-template-columns:repeat(2,1fr);}
  .p-benefits[data-count="2"]{grid-template-columns:repeat(2,1fr);}
}
.p-benefits > li{background:var(--paper);padding:1.75rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;}
.p-benefit-icon{color:var(--accent);}
.p-benefits h3{font-size:1.1rem;margin:.25rem 0 0;}
.p-benefits p{font-size:var(--fs-small);color:var(--body);margin:0;}

/* ------------------------------------------------------ Editorial splits -- */
.p-split{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start;}
@media(min-width:900px){.p-split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);}}
.p-split--single{grid-template-columns:1fr!important;max-width:74ch;}
.p-prose h2{margin-bottom:.5em;}
.p-prose h3{margin-top:1.75rem;font-size:1.15rem;}
.p-feeds{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:1.25rem;
  background:var(--green-100);color:var(--green);font-weight:700;
  padding:.6rem 1.1rem;border-radius:var(--r-pill);
}
.p-aside-block{padding-bottom:1.75rem;margin-bottom:1.75rem;border-bottom:1px solid var(--rule);}
.p-aside-block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}
.p-aside-block h3{
  font-family:var(--font-body);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin:0 0 1rem;
}
.chip-list{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;}
.chip-list li{
  border:1px solid var(--rule);background:var(--paper);
  padding:.4rem .9rem;border-radius:var(--r-pill);font-size:.88rem;color:var(--ink);
}
.tick-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem;}
.tick-list li{display:flex;align-items:flex-start;gap:.6rem;font-size:.95rem;color:var(--body);}
.tick-list .tpp-icon{color:var(--green-400);flex:none;margin-top:.28rem;}

/* --------------------------------------------------------------- Steps ---- */
.p-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.p-steps li{display:flex;gap:1.25rem;align-items:flex-start;padding:1.15rem 0;border-bottom:1px solid var(--rule);}
.p-steps li:first-child{border-top:1px solid var(--rule);}
.p-step-n{
  font-family:var(--font-display);font-size:1.6rem;line-height:1;
  color:var(--accent);font-variant-numeric:tabular-nums;flex:none;min-width:2.2rem;
}
.p-steps p{margin:.15rem 0 0;}
.p-rate-title{font-size:clamp(1.5rem,2.4vw,2rem);}

/* -------------------------------------------------------------- Tables ---- */
.table-scroll{overflow-x:auto;}
.p-table{
  width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;
}
.p-table th,.p-table td{padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid var(--rule);}
.p-table tbody tr:last-child th,.p-table tbody tr:last-child td{border-bottom:0;}
.p-table thead th{
  background:var(--accent);color:#fff;border-bottom:0;
  font-size:.68rem;letter-spacing:var(--ls-label);text-transform:uppercase;
}
.p-table tbody th{font-weight:700;color:var(--ink);}
.p-table tbody tr:nth-child(even){background:var(--cream);}
.p-table--ga td{text-align:right;font-weight:700;color:var(--green);white-space:nowrap;}
.p-ga-sub{display:block;font-weight:400;font-size:.8rem;color:var(--muted);margin-top:.15rem;}

.p-ga{display:grid;gap:2rem;align-items:start;}
@media(min-width:900px){.p-ga{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:2.5rem;}}
.p-ga--single{grid-template-columns:1fr!important;}
.p-derived h3{font-size:1.05rem;margin-bottom:.5rem;}
.p-derived p{font-size:var(--fs-small);color:var(--body);}

/* ------------------------------------------------------------ Longform ---- */
.p-longform{max-width:70ch;margin-inline:auto;font-size:1.06rem;}
.p-longform h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:2rem;}
.p-longform h2:first-child{margin-top:0;}
.p-longform h3{font-size:1.15rem;margin-top:1.5rem;}

/* ------------------------------------------------------- Product cards ---- */
.prod-npk{
  position:absolute;top:.9rem;right:.9rem;
  font-size:.72rem;font-weight:700;letter-spacing:.05em;
  font-variant-numeric:tabular-nums;color:var(--green-900);
  background:var(--gold);padding:.25rem .6rem;border-radius:var(--r-pill);
}
.prod-media{position:relative;}

/* ------------------------------------------------------------- Archive ---- */
.filter-bar{
  display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;
  justify-content:space-between;margin-bottom:clamp(2rem,4vw,3rem);
}
.filter-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;}
.filter-chip{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  border:1px solid var(--rule);background:var(--paper);
  padding:.55rem 1.1rem;border-radius:var(--r-pill);
  font-size:.92rem;font-weight:600;color:var(--ink);text-decoration:none;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.filter-chip:hover{border-color:var(--green);color:var(--green);}
.filter-chip.is-current{background:var(--green);border-color:var(--green);color:#fff;}
.filter-chip.is-empty{opacity:.5;}
.chip-count{
  font-size:.72rem;font-variant-numeric:tabular-nums;
  background:var(--cream);color:var(--muted);padding:.05rem .45rem;border-radius:var(--r-pill);
}
.filter-chip.is-current .chip-count{background:rgba(255,255,255,.22);color:#fff;}

.filter-search{
  display:flex;align-items:center;gap:.55rem;min-height:48px;
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-pill);padding:.15rem 1.15rem;color:var(--muted);
  min-width:min(300px,100%);
}
.filter-search:focus-within{border-color:var(--green);color:var(--green);}
.filter-search input{border:0;background:none;padding:.7rem 0;flex:1;min-width:0;font-family:var(--font-body);font-size:.98rem;color:var(--ink);}
.filter-search input:focus{outline:none;}
.filter-empty{text-align:center;color:var(--muted);padding:3rem 0;}

.empty-state{
  text-align:center;background:var(--paper);border:1px dashed var(--rule);
  border-radius:var(--r-lg);padding:clamp(2.5rem,6vw,4.5rem) 1.5rem;
}
.empty-state p{max-width:48ch;margin-inline:auto;color:var(--body);}
.empty-state .btn{margin-top:1.5rem;}

.pagination{margin-top:3rem;display:flex;justify-content:center;}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;height:46px;padding:0 .8rem;margin:0 .2rem;
  border:1px solid var(--rule);border-radius:var(--r-md);
  background:var(--paper);color:var(--ink);text-decoration:none;font-weight:600;
}
.pagination .page-numbers.current{background:var(--green);border-color:var(--green);color:#fff;}


/* ==========================================================================
   About page
   ========================================================================== */
/* Global rules applied: sections alternate light grounds (paper / cream),
   every grid is boxed cards that lift on hover, dark hero + closing band. */
.about-hero .crumbs{margin-bottom:1.4rem;}

/* What we do — copy beside a boxed image. */
.about-split{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;}
@media(min-width:900px){.about-split{grid-template-columns:1.05fr .95fr;}}
.about-copy h2{font-size:var(--fs-h2);margin-bottom:.55em;}
.about-copy p{max-width:60ch;margin:0 0 1em;}
.about-copy p:last-child{margin-bottom:0;}
.about-figure{
  margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--shadow-md);border:1px solid var(--rule);
}
.about-figure img{width:100%;height:100%;object-fit:cover;display:block;}

/* Boxed card grids — family fields and services. */
.about-grid{display:grid;gap:clamp(1rem,1.8vw,1.5rem);}
@media(min-width:600px){.about-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1000px){
  .about-grid{grid-template-columns:repeat(3,1fr);}
  .about-grid[data-count="4"]{grid-template-columns:repeat(4,1fr);}
  .about-grid[data-count="2"]{grid-template-columns:repeat(2,1fr);}
}
.about-card{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.4vw,2rem);display:flex;flex-direction:column;gap:.55rem;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.section--paper .about-card{background:var(--cream);}
.about-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent;}
.about-card h3{font-size:1.1rem;margin:0;color:var(--ink);}
.about-card p{font-size:var(--fs-small);color:var(--body);margin:0;}
.about-ic{
  width:52px;height:52px;border-radius:50%;flex:none;margin-bottom:.35rem;
  background:var(--green-100);color:var(--green);
  display:inline-flex;align-items:center;justify-content:center;
}

/* Closing band. */
.about-cta{overflow:hidden;}
.about-cta-inner{display:grid;gap:2rem;align-items:center;}
@media(min-width:820px){.about-cta-inner{grid-template-columns:1fr auto;gap:3.5rem;}}
.about-cta h2{font-size:clamp(2rem,3.6vw,3rem);max-width:20ch;margin:0 0 .5em;}
.about-cta .lead{color:#BFD0C1;margin:0;}
.about-cta-actions{display:flex;flex-wrap:wrap;gap:1rem;}


/* --------------------------------------------- Product page — balance ---- */
/* Two-column bands were leaving voids wherever one side ran short. The fix is
   weight, not more whitespace: the narrow side gets a tinted panel so it holds
   its half, and the ratios sit closer to even. */
@media(min-width:900px){
  .p-split{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:start;}
}
.p-aside{
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:clamp(1.5rem,2.5vw,2rem);
}
.section--paper .p-aside{background:var(--cream);}
.p-aside-block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}

/* Rates sit beside the steps, so give the table a ground to sit on. */
@media(min-width:900px){
  .p-split > div:last-child:not(:only-child) .table-scroll{
    background:var(--cream);border-radius:var(--r-lg);padding:clamp(1rem,2vw,1.5rem);
  }
  .section--cream .p-split > div:last-child:not(:only-child) .table-scroll{background:var(--paper);}
}

/* Guaranteed analysis — the "derived from" note is short, so it becomes a
   panel rather than a floating paragraph beside a tall table. */
@media(min-width:900px){.p-ga{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);}}
.p-derived{
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:clamp(1.4rem,2.4vw,1.9rem);
}
.p-derived h3{
  font-family:var(--font-body);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:.75rem;
}

/* Longform reads as a passage, not a stranded measure in a wide empty band. */
.p-longform{max-width:none;}
.p-longform h2:first-child{margin-top:0;}


/* Compact download row — the label is a real regulatory document, so it stays
   available; the sell sheet is marketing artwork, so it is a link, not a band. */
.p-downloads{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;
  margin-top:1.5rem;padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.16);
}
.p-downloads-label{
  font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:#8FA891;
}
.p-downloads a{
  display:inline-flex;align-items:center;gap:.45rem;
  color:#fff;text-decoration:none;font-size:.92rem;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:.15rem;
}
.p-downloads a:hover{color:var(--gold);border-bottom-color:var(--gold);}
.p-downloads .tpp-icon{flex:none;}

/* Simplified Professor-led presentation. */
.home-intro{
  background:var(--cream);border-bottom:1px solid var(--rule);
  padding:clamp(3.5rem,6vw,6rem) 0;
  position:relative;overflow:hidden;
  background-image:url('../images/leaf-texture.svg');background-repeat:repeat;background-size:150px 150px;
}
.home-intro-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:3rem;align-items:center;}
.home-intro h1{font-size:clamp(2.4rem,4.5vw,4rem);max-width:15ch;color:var(--green);line-height:1.08;}
.home-intro .lead{max-width:48ch;}
.home-professor{margin:0;text-align:center;position:relative;}
.home-professor::before{content:"";position:absolute;left:50%;top:46%;width:min(115%,560px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;background:radial-gradient(circle,rgba(1,70,38,.09),rgba(1,70,38,0) 62%);}
.home-professor img{width:auto;height:clamp(320px,40vw,500px);margin:auto;object-fit:contain;position:relative;}
/* Popular category quick links under the hero CTAs. */
.hero-popular{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-top:1.6rem;font-size:.95rem;color:var(--muted);}
.hero-popular-k{font-weight:700;color:var(--ink);}
.hero-popular a{color:var(--green);font-weight:600;text-decoration:none;}
.hero-popular a:hover{text-decoration:underline;text-underline-offset:2px;}
.hero-popular span[aria-hidden]{color:var(--rule);}
.home-professor figcaption{font-size:var(--fs-small);color:var(--green);margin-top:1rem;font-weight:600;}
.home .section{padding-block:clamp(3rem,5vw,4.5rem);}
.home .s-head{margin-bottom:2rem;}
.home h2{font-size:clamp(1.9rem,3vw,2.75rem);}
.home .prod-grid[data-count="2"]{margin-inline:auto;max-width:1000px;}
.prod-media{background:var(--green-100);height:320px;padding:1rem;}
.prod-media img{max-height:100%;object-fit:contain;filter:none;}
.prod-type{color:var(--green);}
/* Description inset comes from the shared --prod-pad rule; no extra padding, so
   type, title and copy all align to the same gutter. */
.maak-hub{background:var(--sand);}
.maak-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);}
.maak-enquiry{margin-top:1.5rem;font-size:var(--fs-small);}
.maak-enquiry a{display:inline-block;font-weight:700;}
.site-footer .footer-professor{width:90px;height:135px;object-fit:contain;margin-top:1.5rem;}
.final{padding-block:2.5rem;}
.final h2{font-size:clamp(1.8rem,3vw,2.8rem);}
.final-grid{padding-right:170px;}
.final-professor{right:3%;width:125px;opacity:1;}
.p-hero--archive{padding-block:2rem;min-height:0;}
.p-hero--archive .lead{max-width:65ch;}
/* Tighten the hero → grid gap only on the product catalogue, where the filter
   bar sits right under the hero. Blog, single posts, About and Contact keep
   symmetric top/bottom section padding. */
.p-hero--catalog + .section{padding-top:2rem;}
.filter-chips{gap:.5rem;}
.p-hero{padding-block:2.5rem;}
.p-hero h1{font-size:clamp(2rem,4vw,3.3rem);}
.p-figure img{object-fit:contain;max-height:520px;width:auto;margin:auto;}
.contact-page{padding-block:3.5rem;}
.contact-page>.wrap>.lead{max-width:65ch;}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;margin-top:3rem;}
.contact-grid h2{font-size:var(--fs-h3);}
.contact-grid aside{background:var(--green-100);padding:2rem;border-radius:var(--r-lg);}
.contact-links{display:grid;gap:1rem;margin-top:2rem;overflow-wrap:anywhere;}
:target{scroll-margin-top:140px;}
@media(max-width:767px){
 .home-intro-grid,.maak-grid,.contact-grid{grid-template-columns:1fr;gap:2rem;}
 .home-intro h1{max-width:18ch;}
 .home-professor img{height:270px;}
 .hero-actions{gap:.7rem;}
 .hero-actions .btn{flex:1 1 180px;justify-content:center;}
 .home-professor figcaption{margin-top:.5rem;}
 .final-grid{padding-right:0;}
 .final-professor{display:none;}
 .prod-media{height:300px;}
 .contact-grid aside{padding:1.5rem;}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* Preserve native visibility for filtered cards and dialogs. */
[hidden] { display: none !important; }

.about { overflow: clip; }

.home-company-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(24px,5vw,80px); align-items:start; }
.home-company-copy p:first-child { margin-top:0; }
.home-company-copy { max-width:65ch; }
.home-news .s-head > p:last-child { max-width:58ch; margin:1rem auto 0; }
.news-empty { max-width:65ch; margin:0 auto; padding:1.5rem; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--cream); text-align:center; }
@media(max-width:699px) { .home-company-grid { grid-template-columns:1fr; } }

/* ==========================================================================
   Blog — index, archives, single post (boxed cards, house hover rule)
   ========================================================================== */
.post-grid{display:grid;gap:clamp(1.5rem,3vw,2.25rem);}
@media(min-width:640px){.post-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.post-grid{grid-template-columns:repeat(3,1fr);}}
.post-card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent;}
.post-media{aspect-ratio:3/2;overflow:hidden;background:var(--green-100);}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.post-card:hover .post-media img{transform:scale(1.04);}
.post-body{display:flex;flex-direction:column;gap:.55rem;padding:clamp(1.35rem,2vw,1.6rem);flex:1;}
.post-meta{display:flex;align-items:center;gap:.75rem;font-size:var(--fs-label);color:var(--muted);}
.post-cat{font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--green);}
.post-meta time{letter-spacing:.02em;}
.post-body h3{margin:0;font-size:clamp(1.2rem,1.6vw,1.4rem);line-height:1.25;color:var(--ink);}
.post-card:hover h3{color:var(--green);}
.post-body p{margin:0;font-size:var(--fs-small);color:var(--body);line-height:1.55;}
.post-body .tlink{margin-top:auto;padding-top:.35rem;}

/* Single post */
.post-hero-meta{color:#B9CDBB;font-size:var(--fs-small);margin:.4rem 0 0;}
.post-prose{font-size:1.075rem;line-height:1.72;color:var(--body);}
.post-prose > *{max-width:68ch;}
.post-prose p{margin:0 0 1.25em;}
.post-prose h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:1.8em 0 .5em;color:var(--ink);}
.post-prose h3{font-size:clamp(1.2rem,1.8vw,1.5rem);margin:1.6em 0 .5em;color:var(--ink);}
.post-prose ul,.post-prose ol{margin:0 0 1.25em;padding-left:1.3em;}
.post-prose li{margin:0 0 .5em;}
.post-prose a{color:var(--green);text-decoration:underline;text-underline-offset:2px;}
.post-prose strong{color:var(--ink);}
.post-foot{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(2.5rem,4vw,3.5rem);padding-top:1.75rem;border-top:1px solid var(--rule);}

/* -------------------------------------------------- Home — Instagram ----- */
.ig-head{margin-bottom:clamp(2rem,3.5vw,3rem);}
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.5rem,1.2vw,.85rem);}
@media(min-width:600px){.ig-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:960px){.ig-grid{grid-template-columns:repeat(6,1fr);}}
.ig-tile{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:var(--r-md);background:var(--green-100);}
.ig-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.ig-tile::after{content:"";position:absolute;inset:0;background:var(--green-900);opacity:0;transition:opacity .25s var(--ease);}
.ig-tile-icon{
  position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  color:#fff;opacity:0;transform:scale(.9);transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.ig-tile:hover img{transform:scale(1.06);}
.ig-tile:hover::after{opacity:.42;}
.ig-tile:hover .ig-tile-icon,.ig-tile:focus-visible .ig-tile-icon{opacity:1;transform:scale(1);}

/* ------------------------------------------------ Home — trust marquee --- */
.trust-strip{background:var(--green);overflow:hidden;}
.marquee{display:flex;overflow:hidden;}
.marquee-track{display:flex;flex:0 0 auto;width:max-content;align-items:center;animation:tpp-marquee 44s linear infinite;}
.trust-item{
  display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;
  padding:1.05rem 2.1rem;color:#D3E2D5;font-weight:600;font-size:.92rem;letter-spacing:.01em;
  border-right:1px solid rgba(255,255,255,.12);
}
.trust-item .tpp-icon{color:var(--gold);flex:none;}
@keyframes tpp-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;}
  .trust-item[aria-hidden="true"]{display:none;}
  .trust-item{border-right:0;}
}

/* --------------------------------------------- Home — diagnostic band ---- */
.home-diagnose{overflow:hidden;}
.diagnose-inner{display:grid;gap:2rem;align-items:center;}
@media(min-width:900px){.diagnose-inner{grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,5vw,4rem);}}
.diagnose-copy h2{font-size:clamp(1.9rem,3.2vw,2.9rem);max-width:20ch;margin:0 0 .5em;}
.diagnose-copy .lead{color:#BFD0C1;margin:0;}
.diagnose-action{display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start;}
@media(min-width:900px){.diagnose-action{align-items:flex-end;}}
.diagnose-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;}
@media(min-width:900px){.diagnose-chips{justify-content:flex-end;}}
.diagnose-chips a{
  display:inline-flex;align-items:center;min-height:40px;padding:.4rem 1rem;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);
  color:#EAF2EB;font-size:.9rem;font-weight:600;text-decoration:none;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.diagnose-chips a:hover{background:var(--gold);border-color:var(--gold);color:var(--green-900);}

/* Company section — CTA is a button, spaced below the copy. */
.home-company-copy + .btn{margin-top:1.75rem;}

/* ==========================================================================
   Contact — details + "Ask the Professor" form
   ========================================================================== */
.contact-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);}
@media(min-width:900px){.contact-grid{grid-template-columns:.82fr 1.18fr;align-items:start;}}
.contact-details h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:0 0 1.5rem;}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:1.35rem;}
.contact-list li{display:flex;gap:.9rem;align-items:flex-start;}
.contact-ic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--green-100);color:var(--green);display:inline-flex;align-items:center;justify-content:center;}
.contact-k{display:block;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:.15rem;}
.contact-list a{color:var(--ink);text-decoration:none;font-weight:600;}
.contact-list a:hover{color:var(--green);}

.tpp-form-card{background:var(--cream);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.5rem);}
.form-title{font-size:clamp(1.4rem,2.2vw,1.9rem);margin:0 0 1.5rem;}
.tpp-form{display:grid;gap:1.1rem;}
.form-two{display:grid;gap:1.1rem;}
@media(min-width:560px){.form-two{grid-template-columns:1fr 1fr;}}
.form-row{display:flex;flex-direction:column;gap:.4rem;}
.form-row label{font-size:.92rem;font-weight:600;color:var(--ink);}
.form-row label span[aria-hidden]{color:var(--gold-deep);}
.form-opt{font-weight:400;color:var(--muted);}
.tpp-form input,.tpp-form textarea{
  font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);
  padding:.8rem 1rem;width:100%;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.tpp-form input:focus,.tpp-form textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(1,70,38,.12);}
.tpp-form textarea{resize:vertical;min-height:120px;}
.tpp-form .btn{justify-self:start;margin-top:.35rem;}
.form-err{color:#B23A2E;font-size:.85rem;font-weight:600;}
.form-alert{background:#FCEEEC;border:1px solid #E7C3BD;color:#8A2C22;border-radius:var(--r-md);padding:.85rem 1rem;font-size:.92rem;font-weight:600;}
.form-note{font-size:.82rem;color:var(--muted);margin:.25rem 0 0;}
.form-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.form-success{text-align:center;padding:1.5rem 0;}
.form-success-icon{width:60px;height:60px;border-radius:50%;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-bottom:1rem;}
.form-success h3{font-size:clamp(1.35rem,2vw,1.7rem);margin:0 0 .5rem;color:var(--ink);}
.form-success p{color:var(--body);max-width:38ch;margin:0 auto 1.5rem;}

/* ------------------------------------------------- MAAK (external) links -- */
.is-maak, li.is-maak > a{color:var(--gold-deep)!important;font-weight:700;}
.is-maak::after, li.is-maak > a::after{content:" \2197";font-weight:700;}
.nav-primary li.is-maak > a{color:var(--gold-deep)!important;}

/* Social icons stay visible on hover (white on green). */
.social-btn:hover .tpp-icon{color:#fff;}

/* ---------------------------------------- Subtle botanical texture -------- */
/* A faint repeating leaf motif under the flat light bands, so they read as
   textured rather than blank. Base colours (and alternation) are unchanged. */
.home-company,
.maak-hub,
.about .section--paper,
.about .section--cream{
  background-image:url('../images/leaf-texture.svg');
  background-repeat:repeat;
  background-size:150px 150px;
}

/* -------------------------------------------- About — areas of expertise -- */
.about-expertise{margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(2rem,3.5vw,2.75rem);border-top:1px solid var(--rule);}
.about-expertise .eyebrow{margin-bottom:1.1rem;}
.expertise-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.65rem;}
.expertise-chips li{
  display:inline-flex;align-items:center;min-height:40px;padding:.45rem 1.1rem;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-pill);
  font-size:.92rem;font-weight:600;color:var(--ink);
  transition:border-color .2s var(--ease),color .2s var(--ease),background-color .2s var(--ease);
}
.expertise-chips li:hover{border-color:var(--green);color:var(--green);background:var(--cream);}

/* -------------------------------------- Category filter — compact on mobile */
/* Pills wrap as before; just smaller text so each stays on a single line. */
@media(max-width:640px){
  .filter-chip{font-size:.82rem;padding:.5rem .95rem;min-height:40px;white-space:nowrap;}
  .chip-count{font-size:.68rem;}
}

/* ------------------------------------------------------ Where to buy (stockists) */
.wtb-count{font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 1.5rem;}
.wtb-grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,2vw,1.4rem);grid-template-columns:1fr;}
@media(min-width:640px){.wtb-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:980px){.wtb-grid{grid-template-columns:repeat(3,1fr);}}
.store-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(1.35rem,2.2vw,1.7rem);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.store-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent;}
.store-card--hq{border-color:var(--gold-deep);background:var(--gold-tint);}
.store-tag{
  align-self:flex-start;display:inline-block;margin-bottom:.7rem;
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);background:var(--gold);border-radius:var(--r-pill);padding:.28rem .7rem;
}
.store-name{font-size:1.2rem;line-height:1.25;margin:0 0 .5rem;color:var(--ink);}
.store-addr{font-size:var(--fs-small);line-height:1.55;color:var(--body);margin:0 0 1.15rem;}
.store-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;}
.store-phone,.store-directions{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--fs-small);font-weight:600;text-decoration:none;
}
.store-phone{color:var(--green);}
.store-phone:hover{color:var(--gold-deep);}
.store-directions{
  color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:.4rem .85rem;transition:background .2s var(--ease),border-color .2s var(--ease);
}
.store-directions:hover{background:var(--cream);border-color:var(--green);}
.store-phone svg,.store-directions svg{flex:0 0 auto;}
.wtb-cta{display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-items:center;}
@media(min-width:900px){.wtb-cta{grid-template-columns:1.4fr .6fr;}}
.wtb-cta-actions{display:flex;flex-direction:column;gap:.75rem;align-items:flex-start;}
@media(max-width:899px){.wtb-cta-actions{flex-direction:row;flex-wrap:wrap;}}