/* =========================================================================
   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;}
}