/* ==========================================================================
   Hikers Cannabis — homepage (staging build)
   Built from the approved design canvas: hikers-homepage-design-mockup-v1
   Palette, type scale and section order follow the mockup exactly; layout is
   rebuilt responsive (mobile artboard -> <768px, desktop artboard -> >=1100px).
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face { font-family:'Lato'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/lato-300.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Lato'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/lato-300-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/lato-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/lato-400-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Lato'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../fonts/lato-italic-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/lato-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/lato-700-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Lato'; font-style:normal; font-weight:900; font-display:swap;
  src:url('../fonts/lato-900.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* --- Tokens --------------------------------------------------------------- */
:root{
  --bark:#3D2B1F;      /* primary dark */
  --cream:#F5EDE0;     /* page + light type on dark */
  --sand:#E7DCCB;      /* secondary light surface */
  --amber:#C47E3A;     /* accent — graphics, rules, large type only */
  /* Text-safe amber pair. #C47E3A is 2.83:1 on cream and 4.09:1 on bark, so it
     fails WCAG AA for small text on both. These two carry amber *text*; the
     base token stays exactly as the style guide has it for graphics (3:1). */
  --amber-ink:#95602C;   /* amber text + button fills on light — 4.53:1 on cream */
  --amber-lift:#D0863D;  /* amber text on bark — 4.58:1 */
  --pine:#2D4A2A;      /* facts strip / secondary CTA */
  --stone:#6A6054;     /* muted type — darkened from #7A6E60 (3.67:1 on sand) */
  --rule:#E7DCCB;

  --serif:Georgia,'Times New Roman',serif;
  --sans:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --pad-x:20px;        /* section inline padding, mobile */
  --maxw:1280px;
}
@media (min-width:768px){ :root{ --pad-x:40px; } }
@media (min-width:1100px){ :root{ --pad-x:64px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--cream); color:var(--bark);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }

.skip{ position:absolute; left:-9999px; top:0; background:var(--bark); color:var(--cream);
  padding:12px 20px; z-index:200; font-weight:700; }
.skip:focus{ left:0; }

/* --- Shared bits ---------------------------------------------------------- */
.wrap{ max-width:var(--maxw); margin:0 auto; }
.sec{ padding:56px var(--pad-x); }
@media (min-width:768px){ .sec{ padding:72px var(--pad-x); } }
@media (min-width:1100px){ .sec{ padding:96px var(--pad-x); } }
.sec--dark{ background:var(--bark); color:var(--cream); }
.sec--sand{ background:var(--sand); }

.eyebrow{ font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber-ink); font-weight:700; }
.sec--dark .eyebrow,.hero .eyebrow,.picker .eyebrow{ color:var(--amber-lift); }
/* amber text can't clear AA on pine at any usable shade — this eyebrow goes sand */
.perks-sec .eyebrow{ color:var(--sand); }
@media (min-width:768px){ .eyebrow{ font-size:15px; } }
.eyebrow--muted{ color:var(--stone); }

/* Dashes in Lato are centred on x-height, so inside all-caps text they sit low
   enough to read as an underscore. Measured in Lato 700: the dash's optical
   centre is 0.414 of cap height, where the caps centre on 0.500 — a 0.06em
   deficit. Nudge it back onto the caps' centre line.
   Applies to any en/em dash or hyphen set in uppercase; reuse on the category
   and location pages rather than re-solving it there. */
.capdash{ position:relative; top:-.06em; }

h1,h2,h3,.serif{ font-family:var(--serif); font-weight:700; line-height:1.2; }
h2{ font-size:26px; }
@media (min-width:768px){ h2{ font-size:32px; } }
.lede{ font-size:17px; line-height:1.6; }
@media (min-width:768px){ .lede{ font-size:18px; } }
.muted{ color:var(--stone); }
.on-dark .muted,.sec--dark .muted{ color:var(--sand); opacity:.72; }

.stack{ display:flex; flex-direction:column; gap:24px; }
.stack--sm{ gap:12px; }
.stack--lg{ gap:32px; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:16px; font-weight:700; line-height:1; white-space:nowrap;
  padding:16px 28px; border-radius:4px; min-height:48px;
  transition:background .18s ease,color .18s ease,border-color .18s ease; }
.btn--amber{ background:var(--amber-ink); color:var(--cream); }
.btn--amber:hover{ background:var(--bark); color:var(--cream); }
.btn--pine{ background:var(--pine); color:var(--cream); }
.btn--pine:hover{ background:var(--bark); }
.btn--ghost{ border:1px solid rgba(231,220,203,.55); color:var(--cream);
  font-size:14px; letter-spacing:.14em; text-transform:uppercase; }
.btn--ghost:hover{ border-color:var(--cream); background:rgba(245,237,224,.08); }
.link-amber{ color:var(--amber-ink); font-weight:700; transition:color .18s ease; }
.sec--dark .link-amber{ color:var(--amber-lift); }
.link-amber:hover{ color:var(--cream); }

/* --- Age gate ------------------------------------------------------------- */
/* Required posture for a MI adult-use retailer: 21+ gate on the site.
   Remove the #agegate block in index.html + this rule to disable. */
#agegate{ position:fixed; inset:0; z-index:300; background:var(--bark);
  display:flex; align-items:center; justify-content:center; padding:24px; }
#agegate[hidden]{ display:none; }
.gate{ max-width:480px; text-align:center; display:flex; flex-direction:column; gap:20px; align-items:center; }
.gate img{ height:72px; width:auto; }
.gate h2{ color:var(--cream); font-size:28px; }
.gate p{ color:var(--sand); font-size:16px; }
.gate .row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.gate .no{ background:none; border:1px solid rgba(231,220,203,.45); color:var(--sand); }
.gate button{ font-family:inherit; cursor:pointer; border:0; }
.gate .fine{ font-size:13px; color:var(--sand); opacity:.6; }
body.gated{ overflow:hidden; }

/* --- Header --------------------------------------------------------------- */
.site-header{ position:sticky; top:0; z-index:100; background:var(--cream);
  border-bottom:1px solid var(--rule); }
.site-header .bar{ max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px var(--pad-x); }
.site-header .logo{ height:44px; width:auto; }
@media (min-width:1100px){ .site-header .logo{ height:56px; } .site-header .bar{ padding:16px var(--pad-x); } }
/* Wordmark beside the logo mark — the mark alone reads too small to carry the
   name on its own, and the hero headline shouldn't have to (it's the page's
   own message, not a place to park the company name). Icon-only below 768px:
   phone headers are already cropped to logo + hamburger, no room to spare. */
.site-header .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.site-header .brand .wordmark{ display:none; font-family:var(--serif); font-weight:700;
  font-size:19px; color:var(--bark); white-space:nowrap; }
@media (min-width:768px){ .site-header .brand .wordmark{ display:block; } }
@media (min-width:1100px){ .site-header .brand .wordmark{ font-size:22px; } }
.site-header .brand-wrap{ display:flex; flex-direction:column; }
.site-header .header-phone{ display:none; font-family:var(--sans); font-weight:700;
  font-size:12px; color:var(--amber-ink); text-decoration:none; margin-left:54px; white-space:nowrap; }
@media (min-width:768px){ .site-header .header-phone{ display:block; } }
@media (min-width:1100px){ .site-header .header-phone{ margin-left:66px; font-size:13px; } }

.nav{ display:none; }
@media (min-width:1100px){
  .nav{ display:flex; align-items:center; gap:32px; }
  .nav a{ font-size:16px; font-weight:700; color:var(--bark); }
  /* .nav a outranks .btn--amber on specificity — restore the button's own label */
  .nav a.btn--amber{ color:var(--cream); }
  .nav a:not(.btn):hover{ color:var(--amber); }
}
.navtoggle{ display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px; background:none; border:0; cursor:pointer; }
.navtoggle span{ display:block; width:24px; height:2px; background:var(--bark); transition:transform .2s ease,opacity .2s ease; }
.navtoggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.navtoggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (min-width:1100px){ .navtoggle{ display:none; } }

.navdrawer{ display:none; border-top:1px solid var(--rule); background:var(--cream);
  padding:8px var(--pad-x) 20px; }
.navdrawer.open{ display:block; }
.navdrawer a{ display:block; padding:14px 0; font-size:18px; font-weight:700;
  border-bottom:1px solid var(--rule); }
.navdrawer .btn{ display:inline-flex; align-items:center; justify-content:center;
  margin-top:16px; width:100%; padding:16px 28px; }
.navdrawer a.btn--amber{ color:var(--cream); border-bottom:0; }
@media (min-width:1100px){ .navdrawer,.navdrawer.open{ display:none; } }

/* --- Hero ----------------------------------------------------------------- */
.hero{ position:relative; background:var(--bark); height:clamp(300px,52vh,400px); display:flex; overflow:hidden; }
/* object-position alone can't reliably crop more sky: the hero locks to a
   fixed 680px band at >=1100px (below), and this photo (1200x669, 1.79:1) is
   wider than that band until the viewport clears ~1220px — under that, cover
   is height-constrained and only crops left/right, so object-position's Y
   value does nothing at all. A transform zoom, anchored low in the frame,
   crops consistently at every width instead of only on very wide screens. */
.hero img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center;
  transform:scale(1.2); transform-origin:50% 78%; }
.hero .scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(61,43,31,.96) 26%,rgba(61,43,31,.34) 100%); }
.hero .frame{ display:none; }
.hero .inner{ position:relative; width:100%; max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:flex-end; padding:24px var(--pad-x); }
.hero h1{ font-size:26px; color:var(--cream); text-wrap:pretty; }
.hero .eyebrow{ font-size:11px; letter-spacing:.22em; }
.hero .lede{ display:none; }
.hero .hero-actions{ display:none; }
.hero .rule{ width:40px; height:2px; background:var(--amber); display:none; }

@media (min-width:1100px){
  .hero{ height:680px; }
  /* Back to the mockup's falloff. It was lifted to .62 so amber picker text
     would clear contrast over the bright sky — then the card got its own solid
     bark panel, which solved that properly, leaving the flat scrim redundant. */
  .hero .scrim{ background:linear-gradient(90deg,rgba(61,43,31,.94) 0%,rgba(61,43,31,.86) 42%,rgba(61,43,31,.35) 100%); }
  .hero .frame{ display:block; position:absolute; inset:32px; border:1px solid rgba(231,220,203,.32); pointer-events:none; }
  .hero .inner{ align-items:center; justify-content:space-between; gap:48px; padding:0 clamp(48px,5vw,96px); }
  .hero .copy{ display:flex; flex-direction:column; gap:32px; max-width:560px; }
  .hero .rule{ display:block; }
  .hero .eyebrow{ font-size:14px; letter-spacing:.24em; }
  .hero h1{ font-size:clamp(44px,4.6vw,64px); }
  .hero .lede{ display:block; color:var(--sand); max-width:520px; }
  .hero .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; align-self:flex-start; }
  .hero .hero-actions .btn{ letter-spacing:.12em; }
  .hero .hero-actions svg{ width:16px; height:16px; fill:none; stroke:currentColor;
    stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
}

/* Interior hero (about, and later the category + location pages). Shorter than
   the homepage hero, no picker card overlaid on the right, so the copy runs to
   a wider measure and the lede survives on mobile — on an interior page the
   lede is the summary, not decoration. The taller mobile scrim is because the
   text block is taller here and would otherwise reach the light part of it. */
.hero--interior{ height:auto; min-height:clamp(320px,50vh,420px); }
.hero--interior .scrim{
  background:linear-gradient(0deg,rgba(61,43,31,.96) 46%,rgba(61,43,31,.58) 100%); }
.hero--interior .inner{ padding:110px var(--pad-x) 28px; }
.hero--interior .copy{ display:flex; flex-direction:column; gap:14px; }
.hero--interior .lede{ display:block; color:var(--sand); font-size:16px; }
@media (min-width:768px){
  .hero--interior .inner{ padding:130px var(--pad-x) 36px; }
  .hero--interior .lede{ font-size:18px; }
}
@media (min-width:1100px){
  .hero--interior{ height:460px; min-height:0; }
  .hero--interior .scrim{
    background:linear-gradient(90deg,rgba(61,43,31,.94) 0%,rgba(61,43,31,.82) 46%,rgba(61,43,31,.42) 100%); }
  .hero--interior .inner{ align-items:center; padding:0 clamp(48px,5vw,96px); }
  .hero--interior .copy{ max-width:680px; gap:24px; }
  .hero--interior h1{ font-size:clamp(38px,3.8vw,52px); }
  .hero--interior .lede{ max-width:620px; }
}

/* category picker — inside hero on desktop, dark block below hero on mobile.
   Tiles match the .chips "counter tile" treatment used in Rewards (amber top
   border, warm surface, serif accent) instead of a flat hairline grid — this
   was the one list on the page with no tactile texture, which is what read
   as a formulary/clinic list rather than a shop counter. */
.picker{ background:var(--bark); padding:16px var(--pad-x) 24px; }
.picker .inner{ max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.picker .cats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.picker .cats a{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:18px 14px; background:rgba(245,237,224,.07); border-top:2px solid var(--amber);
  font-size:15px; font-weight:700; color:var(--cream);
  transition:background .18s ease,border-color .18s ease; }
.picker .cats a:hover{ background:rgba(196,126,58,.24); border-color:var(--cream); }
.picker .cats span{ font-size:17px; color:var(--amber); font-family:var(--serif); font-weight:700; }
.picker .ways{ display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; }
.picker .ways a{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-lift); font-weight:700; }
.picker .ways a:hover{ color:var(--cream); }
.picker .ways .dot{ font-size:12px; color:rgba(196,126,58,.55); }
.picker .quick{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.picker .quick a{ display:flex; align-items:center; justify-content:center; min-height:48px;
  font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.picker .quick .call{ background:var(--amber); color:var(--bark); }
.picker .quick .dir{ border:1px solid rgba(231,220,203,.55); color:var(--cream); }
.picker .title{ display:none; }

@media (min-width:1100px){
  .picker{ position:absolute; right:0; top:0; height:100%; width:100%; background:none;
    padding:0; pointer-events:none; }
  .picker .inner{ height:100%; max-width:var(--maxw); padding:0 clamp(48px,5vw,96px);
    display:flex; flex-direction:row; align-items:center; justify-content:flex-end; }
  /* the label + ways row sit on bare photo otherwise; amber small text over a
     bright sky is unreadable, so the card carries its own backing */
  .picker .card{ width:clamp(340px,30vw,400px); flex:none; pointer-events:auto;
    display:flex; flex-direction:column; gap:12px;
    background:var(--bark); border:1px solid rgba(231,220,203,.2);
    padding:20px; }
  .picker .title{ display:block; font-size:12px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--amber-lift); font-weight:700; }
  .picker .cats a{ padding:24px 20px; font-size:17px; background:rgba(245,237,224,.05); }
  .picker .cats span{ font-size:19px; }
  .picker .ways{ gap:10px; }
  .picker .ways a,.picker .ways .dot{ font-size:13px; }
  .picker .quick{ display:none; }
}
.hero-wrap{ position:relative; }

/* --- Facts strip ---------------------------------------------------------- */
.facts{ background:var(--pine); color:var(--cream); }
.facts .inner{ max-width:var(--maxw); margin:0 auto;
  display:flex; flex-direction:column; gap:8px; padding:16px var(--pad-x); font-size:14px; }
.facts .row{ display:flex; justify-content:space-between; gap:12px; }
.facts .strong{ font-weight:700; }
.facts dl{ margin:0; }
.facts dt{ font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--sand); font-weight:700; }
.facts dd{ margin:0; font-family:var(--serif); font-size:20px; font-weight:700; color:var(--cream); }
.facts .col{ display:none; }
.facts .atm{ display:flex; align-items:center; gap:8px; margin:0;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--sand); }
.facts .tag{ font-size:11px; letter-spacing:.12em; color:var(--cream);
  border:1px solid rgba(245,237,224,.5); border-radius:3px; padding:2px 6px; }
.facts .row .atm{ font-size:11px; }
@media (min-width:768px){
  .facts .inner{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; padding:0 var(--pad-x); }
  .facts .row{ display:none; }
  .facts .col{ display:flex; flex-direction:column; gap:8px; padding:32px 24px; }
  .facts .col + .col{ border-left:1px solid rgba(245,237,224,.18); }
}
@media (min-width:1100px){ .facts .inner{ grid-template-columns:repeat(4,1fr); } .facts .col{ padding:32px 40px; } }
@media (min-width:768px) and (max-width:1099px){ .facts .col:nth-child(3),.facts .col:nth-child(4){ border-top:1px solid rgba(245,237,224,.18); } .facts .col:nth-child(3){ border-left:0; } }

/* --- How to order --------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } }
/* four fulfillment types: 2x2 on tablet, one row on desktop */
@media (min-width:768px){ .steps--four{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .steps--four{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
  .steps--four .step{ padding:28px 24px 32px; }
  .steps--four .step h3{ font-size:24px; } }
.step{ display:flex; flex-direction:column; gap:10px; background:rgba(245,237,224,.06); padding:24px 20px 28px; }
@media (min-width:768px){ .step{ padding:32px 28px 36px; gap:12px; } }
.step .num{ font-family:var(--serif); font-size:44px; line-height:1; font-weight:700; color:var(--amber); }
@media (min-width:768px){ .step .num{ font-size:56px; } }
.step h3{ font-size:23px; color:var(--cream); }
@media (min-width:768px){ .step h3{ font-size:26px; } }
.step .sub{ font-size:16px; font-weight:700; color:var(--cream); }
.step p{ font-size:16px; color:var(--sand); }
/* A .sub that is a link — the phone number on the contact page. Without this
   it renders as the same bold cream label the sibling cards carry and gives no
   signal that it is tappable, which matters because it is the fastest channel
   on the page and the copy says so.

   The text stays CREAM and the amber does the signalling as an underline.
   Colouring the text amber-lift was tried and measured 3.87:1 — it is 4.58:1
   on bark, but .step sits on rgba(245,237,224,.06) OVER bark, which is lighter,
   and that drops it under AA. Same trap the amber split exists to avoid: amber
   is for graphics and rules, not small text. An underline is a decoration, so
   it only owes the 3:1 graphics threshold, which amber-lift clears easily. */
/* Category cross-nav on the category pages: same .step card, made clickable.
   Text stays cream/sand exactly as .step already sets — do not colour h3
   amber-lift on hover, that measured 3.87:1 on this card's tint over bark
   (see the .step .sub a note below) and fails AA. Border is a graphic, so
   amber-lift's 3:1 threshold is the one that applies, and it clears it. */
a.step{ text-decoration:none; border:1px solid transparent;
  transition:background-color .15s ease, border-color .15s ease; }
a.step:hover{ background:rgba(245,237,224,.12); border-color:var(--amber-lift); }
/* A visited card link must read the same as an unvisited one — browsers give
   :visited its own default color independent of .step h3's explicit rule,
   and that showed up as some cards on this page reading legibly and others
   (whichever categories the visitor already opened) reading faint. :link and
   :visited restated together is the standard fix. */
a.step:link h3, a.step:visited h3{ color:var(--cream); }
a.step:link p, a.step:visited p{ color:var(--sand); }
.step .sub a{ color:var(--cream); text-decoration:underline;
  text-decoration-color:var(--amber-lift); text-decoration-thickness:2px;
  text-underline-offset:4px; }
.step .sub a:hover{ text-decoration-color:var(--cream); }

/* --- Two-column split ----------------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:1100px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:64px; align-items:start; }
  .split--even{ grid-template-columns:1fr 1fr; align-items:center; }
  .split--wide-left{ grid-template-columns:1.1fr .9fr; align-items:center; }
  .split--wide-right{ grid-template-columns:.9fr 1.1fr; align-items:center; }
}

/* numbered rows */
.rows{ display:flex; flex-direction:column; }
.rows .r{ display:flex; align-items:baseline; gap:16px; padding:12px 0; }
.rows .r + .r{ border-top:1px solid var(--rule); }
.rows .n{ font-family:var(--serif); font-size:14px; font-weight:700; color:var(--amber-ink); letter-spacing:.1em; }
.rows .t{ font-size:17px; line-height:1.45; }
@media (min-width:768px){ .rows .r{ padding:14px 0; } .rows .t{ font-size:18px; } }

/* on-site ATM notice — sits under the first-time steps and repeats in Visit */
.note{ display:flex; align-items:center; gap:12px; font-size:16px; line-height:1.5;
  color:var(--bark); background:var(--sand); border-left:3px solid var(--amber-ink);
  padding:14px 18px; }
.note-mark{ font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--amber-ink);
  background:var(--amber-ink); color:var(--cream); border-radius:3px;
  padding:4px 8px; flex:none; }
.sec--dark .note,.on-dark .note{ background:rgba(245,237,224,.06); color:var(--sand); }

/* --- Photo gallery + pull quote -------------------------------------------
   Was scoped to `.place` (the homepage's only user). Un-scoped so the About
   page — and the category/location pages the README lists next — can reuse the
   lead-shot + captioned-pair layout without cloning it. `.place` keeps only
   what is genuinely the homepage section: its top border and inset shadow. */
.place{ border-top:1px solid var(--rule); box-shadow:inset 0 6px 12px -6px rgba(61,43,31,.22); }
.gallery{ display:flex; flex-direction:column; gap:16px; }
.shot{ position:relative; overflow:hidden; border-radius:4px; }
.shot img{ width:100%; height:100%; object-fit:cover; }
.lead-shot{ height:220px; }
.pair{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.pair .shot{ height:130px; }
.cap{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:16px;
  background:linear-gradient(0deg,rgba(61,43,31,.72) 0%,rgba(61,43,31,0) 55%); border-radius:4px; }
.cap span{ font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--cream); font-weight:700; }
.pull{ font-family:var(--serif); font-size:20px; line-height:1.4; font-weight:700; }

/* local saying, straight from the owner */
.saying{ margin:0; border-left:3px solid var(--amber); padding:2px 0 2px 20px; }
.saying blockquote{ margin:0; font-family:var(--serif); font-weight:700;
  font-size:24px; line-height:1.25; color:var(--bark); text-wrap:balance; }
.saying figcaption{ margin-top:8px; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--stone); font-weight:700; }
@media (min-width:768px){ .saying blockquote{ font-size:28px; } }
@media (min-width:768px){
  .lead-shot{ height:280px; }
  .pair{ gap:16px; }
  .pair .shot{ height:180px; }
  .pull{ font-size:22px; }
}

/* --- Rewards / discounts -------------------------------------------------- */
.plainlist{ display:flex; flex-direction:column; }
.plainlist div{ padding:11px 0; font-size:17px; font-weight:700; color:var(--cream); }
.plainlist div + div{ border-top:1px solid rgba(231,220,203,.22); }
@media (min-width:768px){ .plainlist div{ padding:12px 0; font-size:18px; } }
.perks{ display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width:1100px){
  .perks{ grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
  .perks > div + div{ border-left:1px solid rgba(231,220,203,.22); padding-left:64px; }
}
.perks > div + div{ border-top:1px solid rgba(231,220,203,.22); padding-top:28px; }
@media (min-width:1100px){ .perks > div + div{ border-top:0; padding-top:0; } }

/* topographic contour wash — brand's trail language, kept faint enough to read
   as texture rather than pattern */
.perks-sec{ position:relative; overflow:hidden; background:var(--pine); }
.perks-sec::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420' viewBox='0 0 640 420'%3E%3Cg fill='none' stroke='%23C47E3A' stroke-width='1.1' opacity='.22'%3E%3Cpath d='M-40 60 C 90 10 190 110 320 62 S 560 -8 690 44'/%3E%3Cpath d='M-40 104 C 90 54 190 154 320 106 S 560 36 690 88'/%3E%3Cpath d='M-40 152 C 100 96 200 200 330 148 S 570 78 700 130'/%3E%3Cpath d='M-40 208 C 110 148 210 252 340 200 S 580 130 710 182'/%3E%3Cpath d='M-40 268 C 120 204 220 306 350 256 S 590 186 720 238'/%3E%3Cpath d='M-40 330 C 130 262 230 362 360 314 S 600 244 730 296'/%3E%3Cpath d='M-40 396 C 140 324 240 420 370 374 S 610 304 740 356'/%3E%3C/g%3E%3C/svg%3E");
  background-size:640px 420px; }
.perks-sec > *{ position:relative; }

/* rewards steps marked like trail blazes */
.blazes{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.blazes li{ display:flex; align-items:center; gap:16px; padding:14px 0;
  font-size:17px; font-weight:700; color:var(--cream); }
.blazes li + li{ border-top:1px solid rgba(231,220,203,.22); }
.blaze{ flex:none; width:11px; height:22px; background:var(--amber); border-radius:1px; }
@media (min-width:768px){ .blazes li{ font-size:18px; padding:15px 0; } }

/* discounts as counter-board tiles */
.chips{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.chips li{ background:rgba(245,237,224,.06); border-top:2px solid var(--amber);
  padding:18px 16px; font-family:var(--serif); font-size:19px; font-weight:700;
  line-height:1.2; color:var(--cream); }
@media (min-width:768px){ .chips{ gap:12px; } .chips li{ padding:22px 20px; font-size:21px; } }

/* --- Menu preview --------------------------------------------------------- */
.menucard{ border:1px solid rgba(61,43,31,.18); background:var(--cream);
  display:flex; flex-direction:column; overflow:hidden; }
.menucard .top,.menucard .bottom{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 16px; }
.menucard .top{ border-bottom:1px solid rgba(61,43,31,.14); }
.menucard .top .label{ font-family:var(--serif); font-size:16px; font-weight:700; }
.menucard .top .count{ font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--stone); font-weight:700; white-space:nowrap; }
.menucard .grid{ padding:16px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.menucard .bottom{ border-top:1px solid rgba(61,43,31,.14); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--stone); }
.prod{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.prod .ph{ aspect-ratio:1/1; position:relative; min-width:0; overflow:hidden; background:var(--sand); }
.prod .ph img{ width:100%; height:100%; object-fit:cover; }
.prod .cat{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); font-weight:700; }
.prod .name{ font-size:15px; font-weight:700; }
.menu-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
.menu-head .copy{ display:flex; flex-direction:column; gap:16px; max-width:640px; }
@media (min-width:768px){
  .menucard .grid{ padding:24px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .menucard .top,.menucard .bottom{ padding:16px 24px; }
  .menucard .top .label{ font-size:18px; }
  .menucard .top .count,.menucard .bottom{ font-size:12px; letter-spacing:.16em; }
}
@media (min-width:1100px){ .menucard .grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.prod--wide-only{ display:none; }
@media (min-width:768px){ .prod--wide-only{ display:flex; } }
.only-wide{ display:none; }
@media (min-width:1100px){ .only-wide{ display:flex; } }

/* --- Staff ---------------------------------------------------------------- */
.portrait{ position:relative; overflow:hidden; border-radius:4px; height:240px; }
.portrait img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:1100px){ .portrait{ height:420px; } }

/* --- Delivery zones ------------------------------------------------------- */
.zones{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.zones a{ display:block; font-size:16px; border-bottom:1px solid rgba(61,43,31,.14);
  padding-bottom:8px; transition:color .18s ease,border-color .18s ease; }
.zones a:hover{ color:var(--amber); border-color:var(--amber); }
@media (min-width:768px){ .zones{ grid-template-columns:repeat(3,1fr); gap:12px 32px; } .zones a{ font-size:17px; padding-bottom:10px; } }
@media (min-width:1100px){ .zones{ grid-template-columns:repeat(4,1fr); } }

/* --- Treehuggers ---------------------------------------------------------- */
.ratio-3-2{ aspect-ratio:3/2; position:relative; overflow:hidden; border-radius:4px; }
.ratio-3-2 img{ width:100%; height:100%; object-fit:cover; }

/* house-line mark sits on a light panel so the green outline reads off the bark */
.markpanel{ background:var(--cream); border-radius:4px; overflow:hidden;
  height:clamp(260px,34vw,400px); padding:24px; }
.markpanel img{ width:100%; height:100%; object-fit:contain; }
/* Plain block, NOT display:grid — that is the whole fix, and `.portrait`
   below is the proof it works.

   The markup is <picture><source><img></picture>. Under `display:grid` the
   <picture> is blockified into a grid item and becomes the img's containing
   block, with no definite height of its own — so `height:100%` on the img
   resolved against nothing, the img sized from its width alone and kept the
   SVG's 1:1 ratio, rendering 458x458 in a 458x336 box. overflow:hidden then
   clipped 122px off the bottom of the tree.

   As a plain block the <picture> stays inline, percentage heights skip it, and
   the img resolves `height:100%` against .markpanel's content box — exactly
   how .portrait has always worked. object-fit:contain letterboxes and centres
   the artwork, so this is immune to which candidate <picture> resolves: the
   square 1200x1200 SVG or the 700x868 PNG fallback. */
@media (min-width:768px){ .markpanel{ padding:32px; } }

/* Treehuggers palette overlay — from the signed Brand Style Guide (Rick Post,
   2026-08-27): deep-woods-at-dusk tokens distinct from the base site palette
   above. Scoped to body.page-id-2753 only, so .sec--dark/.sec--sand/.btn--amber
   are untouched on every other page. Contrast-checked against the guide's own
   rule (amber/parchment text on deep forest, bark text on light): amber on
   deep forest is 7.6:1, parchment on deep forest 13.3:1; amber on the light
   sections would be 1.8:1 and is not used as text there. */
body.page-id-2753{
  --th-forest:#182619;
  --th-forest-shadow:#0F1A11;
  --th-amber:#E4A94A;
  --th-amber-dim:#B9863A;
  --th-parchment-dim:#DCD1B4;
}
body.page-id-2753 .hero--treehuggers,
body.page-id-2753 .sec--dark{
  background:linear-gradient(160deg,var(--th-forest) 0%,var(--th-forest-shadow) 100%);
}
body.page-id-2753 .hero--treehuggers .scrim{
  background:linear-gradient(0deg,rgba(24,38,25,.96) 46%,rgba(24,38,25,.58) 100%); }
@media (min-width:1100px){
  body.page-id-2753 .hero--treehuggers .scrim{
    background:linear-gradient(90deg,rgba(24,38,25,.94) 0%,rgba(24,38,25,.86) 42%,rgba(24,38,25,.35) 100%); }
}
body.page-id-2753 .hero--treehuggers .eyebrow,
body.page-id-2753 .sec--dark .eyebrow{ color:var(--th-amber); }
body.page-id-2753 .sec--sand{ background:var(--th-parchment-dim); }
body.page-id-2753 .btn.btn--amber{ background:var(--th-amber); color:var(--th-forest); }
body.page-id-2753 .btn.btn--amber:hover{ background:var(--th-amber-dim); color:var(--th-forest); }

/* --- FAQ ------------------------------------------------------------------ */
.faq{ display:flex; flex-direction:column; border-top:1px solid rgba(61,43,31,.18); }
.faq details{ border-bottom:1px solid rgba(61,43,31,.18); }
.faq summary{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  list-style:none; cursor:pointer; padding:18px 0; min-height:48px;
  font-family:var(--serif); font-size:19px; font-weight:700; line-height:1.3;
  color:var(--bark); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:''; flex:none; width:14px; height:14px;
  border-right:2px solid var(--amber); border-bottom:2px solid var(--amber);
  transform:rotate(45deg) translate(-3px,-3px); transition:transform .2s ease; }
.faq details[open] summary::after{ transform:rotate(-135deg) translate(-3px,-3px); }
/* var(--amber) is documented "graphics, rules, large type only" — at ~2.4:1
   on the sand/cream backgrounds every light .faq section sits on, it fails
   even the 3:1 large-text minimum, so hovering a question made it nearly
   disappear. --amber-ink is the variable already documented as the correct
   amber-on-light choice (4.53:1 on cream). */
.faq summary:hover{ color:var(--amber-ink); }
.faq .a{ padding:0 0 20px; max-width:72ch; }
.faq .a p{ font-size:17px; line-height:1.6; color:var(--bark); }
@media (min-width:768px){ .faq summary{ font-size:21px; padding:20px 0; } }
@media (prefers-reduced-motion:reduce){ .faq summary::after{ transition:none; } }

/* .faq hardcodes bark (dark) text, correct on the light/sand sections it was
   built for (homepage, FAQ page). The 6 category pages put their FAQ block on
   a sec--dark section, which made every question and answer bark-on-bark —
   invisible. Restate for that context, same pattern as the footer's
   .site-footer .col a light-on-dark override. */
.sec--dark .faq{ border-top-color:rgba(245,237,224,.18); }
.sec--dark .faq details{ border-bottom-color:rgba(245,237,224,.18); }
.sec--dark .faq summary{ color:var(--cream); }
.sec--dark .faq summary:hover{ color:var(--amber-lift); }
.sec--dark .faq .a p{ color:var(--sand); }

/* Category-FAQ subheads on the FAQ page: six ".faq" blocks stacked in one
   section (already spaced by .stack--lg's 32px gap) need a divider label
   per group. #id selector on purpose — a bare h3 here would lose to the
   kit's h3 rule (see the kit-interop note below), and this isn't worth a
   new class for one instance. */
#category-faq h3{ font-size:19px; color:var(--amber-ink); margin-bottom:4px; }

/* --- Visit ---------------------------------------------------------------- */
.hr{ height:1px; background:var(--rule); }

/* anchor jumps must clear the sticky header */
main section[id],section[id]{ scroll-margin-top:88px; }
.visit .line{ font-size:17px; line-height:1.6; }
/* address-block links (phone, email): same reasoning as .step .sub a — cream
   or bark text carries the contrast, amber carries the affordance. */
.visit .line a{ text-decoration:underline; text-decoration-color:var(--amber-ink);
  text-decoration-thickness:2px; text-underline-offset:4px; }
.visit .line a:hover{ text-decoration-color:var(--bark); }
/* vanity number: no dotted underline, and it must not be mistaken for a typo */
abbr[title]{ text-decoration:none; border:0; cursor:inherit; }
.visit .hours{ display:flex; justify-content:space-between; font-size:17px; gap:16px; }
@media (min-width:768px){ .visit .line,.visit .hours{ font-size:18px; } }
.map{ position:relative; overflow:hidden; border-radius:4px; height:280px; }
.map img{ width:100%; height:100%; object-fit:cover; }
/* the map is now a Maps Embed iframe, not an <img> — it has to fill the same
   fixed-height box, and iframes carry a default border and inline baseline gap */
.map iframe{ width:100%; height:100%; border:0; display:block; }
@media (min-width:1100px){ .map{ height:420px; } }

/* --- Footer --------------------------------------------------------------- */
.site-footer{ background:var(--bark); color:var(--cream); padding:40px var(--pad-x); }
.site-footer .inner{ max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; gap:24px; }
.site-footer .cols{ display:grid; grid-template-columns:1fr; gap:28px; }
.site-footer .brand{ font-family:var(--serif); font-size:20px; font-weight:700; }
.site-footer .addr{ font-size:15px; line-height:1.6; color:var(--sand); }
.site-footer h3{ font-family:var(--sans); font-size:14px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber-lift); font-weight:700; }
.site-footer .col{ display:flex; flex-direction:column; gap:8px; }
.site-footer .col a{ font-size:15px; color:var(--sand); }
.site-footer .col a:hover{ color:var(--cream); }
.site-footer .legal{ font-size:14px; line-height:1.6; color:var(--sand); opacity:.66; max-width:860px; }
@media (min-width:768px){
  .site-footer{ padding:64px var(--pad-x); }
  .site-footer .cols{ grid-template-columns:1.4fr 1fr 1fr; gap:48px; }
  .site-footer .brand{ font-size:24px; }
  .site-footer .inner{ gap:32px; }
}

.site-footer .eyebrow{ color:var(--amber-lift); }

/* --- Footer subscribe ----------------------------------------------------- */
.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.subscribe{ display:grid; grid-template-columns:1fr; gap:24px; }
.sub-copy{ display:flex; flex-direction:column; gap:8px; }
.sub-copy h2{ color:var(--cream); font-size:24px; }
.sub-form{ display:flex; flex-direction:column; gap:14px; }
.field{ display:flex; flex-direction:column; gap:10px; }
.field input[type="email"]{ font-family:inherit; font-size:16px; color:var(--cream);
  background:rgba(245,237,224,.08); border:1px solid rgba(231,220,203,.32);
  border-radius:4px; padding:14px 16px; min-height:48px; width:100%; }
.field input[type="email"]::placeholder{ color:rgba(231,220,203,.5); }
.field input[type="email"]:focus{ border-color:var(--amber); outline:none;
  background:rgba(245,237,224,.12); }
.field .btn{ width:100%; }
.consent{ display:flex; align-items:flex-start; gap:10px; font-size:14px;
  line-height:1.5; color:var(--sand); cursor:pointer; }
.consent input{ margin-top:3px; width:18px; height:18px; accent-color:var(--amber); flex:none; }
.sub-status{ font-size:14px; color:var(--amber-lift); min-height:1em; margin:0; }
.sub-status[data-state="error"]{ color:#E8A87C; }
@media (min-width:768px){
  .subscribe{ grid-template-columns:1.1fr 1fr; gap:48px; align-items:start; }
  .sub-copy h2{ font-size:28px; }
  .field{ flex-direction:row; }
  .field .btn{ width:auto; flex:none; }
}

.social{ list-style:none; display:flex; gap:8px; margin:8px 0 0; padding:0; }
.social a{ display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid rgba(231,220,203,.28); border-radius:4px;
  color:var(--sand); transition:border-color .18s ease,color .18s ease,background .18s ease; }
.social a:hover{ color:var(--amber-lift); border-color:var(--amber-lift); background:rgba(196,126,58,.12); }
.social svg{ width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.social svg .dot{ fill:currentColor; stroke:none; }

/* --- Contact form ---------------------------------------------------------
   The footer's .sub-form is coloured for bark; this is the same anatomy on a
   light section. In WordPress this becomes an Elementor Pro Form widget — the
   current /contact-2-2/ already uses one, so the plugin is proven on this
   install and submissions get stored. Keep the field order and the labels. */
.contactform{ display:flex; flex-direction:column; gap:18px; }
.contactform .row2{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:768px){ .contactform .row2{ grid-template-columns:1fr 1fr; } }
.ffield{ display:flex; flex-direction:column; gap:8px; }
.ffield label{ font-size:14px; font-weight:700; letter-spacing:.04em; color:var(--bark); }
.ffield .req{ color:var(--amber-ink); }
.ffield input,.ffield select,.ffield textarea{
  font-family:inherit; font-size:16px; line-height:1.5; color:var(--bark);
  background:var(--cream); border:1px solid rgba(61,43,31,.34); border-radius:4px;
  padding:13px 14px; min-height:48px; width:100%; }
.ffield textarea{ min-height:150px; resize:vertical; }
.ffield input::placeholder,.ffield textarea::placeholder{ color:var(--stone); }
.ffield input:focus,.ffield select:focus,.ffield textarea:focus{
  outline:none; border-color:var(--amber-ink); box-shadow:0 0 0 3px rgba(149,96,44,.18); }
.contactform .btn{ align-self:flex-start; }
.contactform .formnote{ font-size:14px; line-height:1.5; color:var(--stone); }
.contactform .sub-status{ color:var(--amber-ink); }
/* .consent is coloured for the bark footer; this is the same control on a
   light section. Checkbox stays 18px with a 44px-tall label hit area. */
.consent--light{ color:var(--bark); align-items:center; min-height:44px; }
.consent--light span{ color:var(--bark); font-size:15px; }
.consent--light input{ margin-top:0; accent-color:var(--amber-ink); }

/* --- Social links (contact page) ------------------------------------------
   Bigger, labelled cousins of the footer's icon row: on a page whose job is
   "how do I reach you", an unlabelled glyph is a worse answer than a row that
   names the network and the handle. */
.sociallinks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.sociallinks a{ display:flex; align-items:center; gap:16px; min-height:64px;
  padding:14px 18px; background:rgba(245,237,224,.06);
  border:1px solid rgba(231,220,203,.22); border-radius:4px; color:var(--cream);
  transition:background .18s ease,border-color .18s ease; }
.sociallinks a:hover{ background:rgba(196,126,58,.16); border-color:var(--amber-lift); }
.sociallinks svg{ flex:none; width:26px; height:26px; fill:none; stroke:var(--amber-lift);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.sociallinks svg .dot{ fill:var(--amber-lift); stroke:none; }
.sociallinks .net{ font-weight:700; font-size:17px; }
.sociallinks .at{ margin-left:auto; font-size:15px; color:var(--sand); }
@media (max-width:479px){
  .sociallinks a{ flex-wrap:wrap; }
  .sociallinks .at{ margin-left:0; flex-basis:100%; padding-left:42px; }
}

/* --- Store / menu page ----------------------------------------------------
   The Carrot widget mounts into #carrot-store-root and renders client-side, so
   the container is EMPTY on first paint. Without a min-height the page snaps
   from a collapsed layout to a full menu as the bundle lands — a large layout
   shift on the one page people actually transact on. Reserve the space. */
.sec--menu{ padding-top:32px; padding-bottom:32px; }
@media (min-width:768px){ .sec--menu{ padding-top:48px; padding-bottom:48px; } }
#carrot-store{ min-height:640px; }
@media (min-width:768px){ #carrot-store{ min-height:820px; } }

/* the hero is shorter here — the menu is the reason for the page, and a tall
   hero just pushes it below the fold */
@media (min-width:1100px){ .hero--short{ height:340px; } }

/* .note is a flex row built for one line beside its mark; the noscript
   fallback is a paragraph, so let it wrap and sit above the text */
.note--block{ display:block; }
.note--block p{ margin:0; font-size:16px; line-height:1.55; }
.note--block a{ text-decoration:underline; text-decoration-color:var(--amber-ink);
  text-decoration-thickness:2px; text-underline-offset:3px; }

/* --- Mobile action bar ---------------------------------------------------- */
.actionbar{ position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--bark); border-top:1px solid rgba(196,126,58,.55);
  padding-bottom:env(safe-area-inset-bottom); }
.actionbar a{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; min-height:58px; padding:8px 4px; color:var(--cream);
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.actionbar a + a{ border-left:1px solid rgba(245,237,224,.14); }
.actionbar a:active{ background:rgba(196,126,58,.22); }
.actionbar svg{ width:20px; height:20px; fill:none; stroke:var(--amber);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
/* keep the bar off the last line of the footer */
body{ padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
body.gated .actionbar{ display:none; }
@media (min-width:768px){
  .actionbar{ display:none; }
  body{ padding-bottom:0; }
}

/* staging ribbon — delete before production */
.staging-flag{ background:var(--amber-ink); color:var(--cream); text-align:center;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px; }

/* ==========================================================================
   Elementor interop
   Elementor's kit stylesheet targets links as `.elementor-kit-NNNN a`
   (0,2,0 specificity). Single-class rules above lose that fight even though
   this file loads later, so anything whose colour must survive inside an
   Elementor page is restated here at matching-or-higher specificity.
   Keep this block last.
   ========================================================================== */
.btn.btn--amber{ color:var(--cream); }
.btn.btn--amber:hover{ color:var(--cream); }
.btn.btn--pine{ color:var(--cream); }
.btn.btn--ghost{ color:var(--cream); }
.btn.btn--ghost:hover{ color:var(--cream); }
.link-amber.link-amber{ color:var(--amber-ink); }
.sec--dark .link-amber.link-amber{ color:var(--amber-lift); }
.picker .quick a.call{ color:var(--bark); }
.picker .quick a.dir{ color:var(--cream); }
.actionbar a.actionbar-link,.actionbar a{ color:var(--cream); }
.zones a.zone{ color:var(--bark); }
.site-footer .col a,.site-footer .addr a{ color:var(--sand); }
.faq summary{ color:var(--bark); }
/* .note--block a only restated text-decoration (line ~694), never color, so
   the link fell through to the kit's own link color — a dark brown that's
   all but invisible against .note's sand-on-dark-tint (the Poison Control
   number in the FAQ page's Resources section). Match .note's own colour per
   context, same split as .sec--dark .note above. */
.note--block a{ color:var(--bark); }
.sec--dark .note--block a,.on-dark .note--block a{ color:var(--sand); }
.gate button.btn{ color:var(--cream); }
.gate .no.no{ color:var(--sand); }

/* Elementor kit also restyles form controls and their labels — restate ours. */
.consent.consent{ font-size:14px; line-height:1.5; color:var(--sand); }
.consent.consent span{ font-size:14px; line-height:1.5; color:var(--sand); }
/* Must come after `.consent.consent span` above, not before it: both are
   (0,2,1), so this is decided purely on order. Placed earlier the light
   variant lost and the contact form's 21+ label rendered sand-on-cream at
   1.17:1. */
.consent--light.consent--light,
.consent--light.consent--light span{ color:var(--bark); font-size:15px; }
.sub-form .field input[type="email"]{
  font-size:16px; color:var(--cream); background:rgba(245,237,224,.08);
  border:1px solid rgba(231,220,203,.32); border-radius:4px; padding:14px 16px; }
.sub-form .field input[type="email"]::placeholder{ color:rgba(231,220,203,.55); }
.sub-form .sub-status{ font-size:14px; }

/* The kit also owns `body` and every heading — it sets Inter, its own colours,
   a white page and `text-transform: capitalize` (which was rendering the About
   page's H2 as "Nature's Hideaway For Cannabis Enthusiasts"). Those rules are
   `.elementor-kit-NNNN body` / `.elementor-kit-NNNN h2` at (0,1,1), so bare
   `body` and `h2` lose no matter which sheet loads last.
   The hook below matches the kit class by pattern rather than by id, so this
   keeps working if the kit is ever regenerated with a different number, and
   lands at (0,1,2) — one element above the kit. */
body[class*="elementor-kit-"]{
  background:var(--cream); color:var(--bark);
  font-family:var(--sans); font-size:17px; line-height:1.6; }

body[class*="elementor-kit-"] h1,
body[class*="elementor-kit-"] h2,
body[class*="elementor-kit-"] h3{
  font-family:var(--serif); font-weight:700; line-height:1.2;
  text-transform:none; letter-spacing:normal;
  /* sections own their colour; inherit rather than take the kit's */
  color:inherit; }

/* everything else set in Georgia by this build */
body[class*="elementor-kit-"] .serif,
body[class*="elementor-kit-"] .faq summary,
body[class*="elementor-kit-"] .facts dd,
body[class*="elementor-kit-"] .step .num,
body[class*="elementor-kit-"] .rows .n,
body[class*="elementor-kit-"] .saying blockquote,
body[class*="elementor-kit-"] .pull,
body[class*="elementor-kit-"] .menucard .top .label,
body[class*="elementor-kit-"] .site-footer .brand{
  font-family:var(--serif); text-transform:none; }

/* Sizes: only BARE element selectors lose to the kit — every rule in this
   build that carries a class already outranks it (h1 and .step h3 measured
   correct on staging; only `h2 { font-size }` was being overridden, at 67.6px).
   Scoped to `.sec h2` on purpose: a blanket `h2` here would sit at (0,1,2) and
   start beating `.gate h2` and `.sub-copy h2`, which are correct as they are. */
body[class*="elementor-kit-"] .sec h2{ font-size:26px; }
@media (min-width:768px){ body[class*="elementor-kit-"] .sec h2{ font-size:32px; } }

/* the three headings that must NOT inherit their section's colour */
body[class*="elementor-kit-"] .hero h1{ color:var(--cream); }
body[class*="elementor-kit-"] .gate h2{ color:var(--cream); }
body[class*="elementor-kit-"] .saying blockquote{ color:var(--bark); }

/* Class-name collision with Hello Elementor: the parent theme owns .site-header
   and .site-footer and constrains both to its 1140px content width. Ours are
   full-bleed bands whose inner .inner does the constraining, so undo it. */
.site-footer.site-footer,.site-header.site-header{
  max-width:none; width:auto; margin-inline:0; }

/* The kit paints EVERY <button> — a background AND a 2px border — which used to
   turn the nav toggle into a brown box (#624231) with bark bars sitting on it
   at 1.50:1: all but invisible, and nothing to do with the bar colour. That
   accidental box is why the toggle went bare (no fill) for a while. Now it's
   a deliberate bark chip matching the site's own button language (.btn--pine,
   .btn--amber — solid fill, no outline), with cream bars for contrast on the
   dark fill instead of bark bars on cream. `.navtoggle` alone is (0,1,0) and
   loses to the kit's `button` (0,1,1), so double the class the way
   `.btn.btn--amber`, `.consent.consent` and `.site-footer.site-footer`
   already do. Cream-on-bark clears 10.4:1. */
.navtoggle.navtoggle{ background:var(--bark); border:0; border-radius:8px;
  width:44px; height:44px; padding:10px; }
.navtoggle.navtoggle span{ background:var(--cream); }

/* Hello Elementor sets `display:flex` on .site-header. Our .bar is the flex
   row; the header is only the band. As a flex item .bar had flex-grow:0, so it
   shrank to its content — 144px inside a 500px header — and `margin:0 auto`
   then centred it, leaving the logo and hamburger floating mid-page on every
   WordPress page at every width. Undoing max-width/width alone (above) did not
   help: the parent's `display` was the cause. */
.site-header.site-header{ display:block; }

/* Towns in the delivery grid that do NOT have their own page. Same cell as
   `.zones a` so the grid stays even, but stone-on-cream and no rule colour
   change on hover — it must not read as a link that failed. 5.0:1 on cream. */
.zones span{ display:block; font-size:16px; color:var(--stone);
  border-bottom:1px solid rgba(61,43,31,.14); padding-bottom:8px; }
@media (min-width:768px){ .zones span{ font-size:17px; padding-bottom:10px; } }

/* Header and footer used two different box models, so their content never
   lined up: the header capped `.bar` at --maxw *including* its own padding
   (content landed at 124px on a 1400 viewport), while the footer padded the
   band and capped `.inner` inside it (content at 64px). Hello Elementor also
   forces 10px inline padding on both bands and beats our `.site-footer` rule,
   which pulled the footer to 10px on mobile against the header's 30px.

   One model for both: the BAND carries --pad-x, the inner element only caps
   the width. `.site-header.site-header .bar` is (0,3,0) so it clears the
   base `.site-header .bar` rule at (0,2,0). */
.site-header.site-header{ padding-inline:var(--pad-x); }
.site-header.site-header .bar{ padding-inline:0; }
.site-footer.site-footer{ padding-inline:var(--pad-x); }

/* Hello Elementor also puts 24px of BLOCK padding on .site-header, on top of
   .bar's own 12px — the mobile header measured 117px tall for 68px of content,
   49px of dead space on a sticky bar. `.bar` owns the vertical rhythm, the
   band owns nothing. (Same fix as padding-inline above; I normalised one axis
   and not the other.) */
.site-header.site-header{ padding-block:0; }

/* The mark is a square badge with a wordmark inside it, so it reads smaller
   than its box. 44px left it undersized on mobile against a 44px hamburger;
   52px gives it presence and still steps up to 56px on desktop. Header comes
   out at 76px — shorter than before AND a bigger logo, because the dead
   padding above is gone. */
.site-header .logo{ height:52px; }
/* ...and restore the desktop step. The rule above lands after the original
   `@media (min-width:1100px){ .site-header .logo{ height:56px } }`, same
   specificity, so it was overriding desktop too and knocked it 56 -> 52. */
@media (min-width:1100px){ .site-header .logo{ height:56px; } }

/* WP Rocket 3.23's "Automatic Lazy Rendering" stamps data-wpr-lazyrender on
   below-the-fold elements and ships one inline rule in <head>:

       [data-wpr-lazyrender]{ content-visibility:auto; }

   with no contain-intrinsic-size to go with it. A skipped element therefore
   measures 0x0, so every marked container collapses and stacks on the same
   line at the end of the document. The document never grows to include them,
   so they never come near the viewport, so the browser never renders them, so
   they never get a height. It deadlocks, and it does not recover on scroll.

   On the homepage that took out containers 7-14: #menu, #people, #zones,
   #faq, #treehuggers, #visit AND the footer -- half the page, measured as
   0px tall with 800/612/496/980/592/682/620px of content inside. /about/ lost
   #how-we-work, #visit and the footer the same way. Only the two pages Rocket
   had cached carried the attribute, so this was still spreading: the markup is
   added when each page's cache is written, not at publish.

   Turning it off in Rocket's settings does the same thing at the source and is
   the tidier home for this -- but the fix belongs in the theme too, so a cache
   purge or a settings reset can't quietly take the footer away again. Rocket's
   rule is inline in <head> and lands after this file, hence !important. */
[data-wpr-lazyrender]{ content-visibility:visible !important; }

/* ==========================================================================
   Legacy (non-Canvas) surfaces — /privacy-policy/, /blog/, posts, search, 404
   ==========================================================================

   These render through Elementor's Theme Builder, not Canvas, so their content
   was written long before this stylesheet and is not built against it. The
   header and footer injected into templates 2201/2204 DO want the styles
   above; the content between them does not.

   So: restore document defaults inside main.site-main only. Everything outside
   it — the injected chrome — keeps the design. Scoped to body.hk-legacy
   (added in functions.php) so none of this can reach a Canvas page. */

body.hk-legacy main.site-main h1,
body.hk-legacy main.site-main h2,
body.hk-legacy main.site-main h3{ margin:1.4em 0 .5em; }
body.hk-legacy main.site-main h1:first-child{ margin-top:0; }
body.hk-legacy main.site-main p,
body.hk-legacy main.site-main ul,
body.hk-legacy main.site-main ol{ margin:0 0 1em; }
body.hk-legacy main.site-main li{ margin:0 0 .35em; }

/* A legal page whose links are invisible is a real problem, not a cosmetic
   one: site.css sets a{color:inherit;text-decoration:none} globally. Put the
   affordance back — but only for links carrying an href, so Elementor's
   structural anchors are left alone. */
body.hk-legacy main.site-main a[href]{
  color:var(--amber-ink);
  text-decoration:underline;
  text-underline-offset:2px;
}
body.hk-legacy main.site-main a[href]:hover{ color:var(--bark); }

/* The mobile action bar is a Canvas-page component and does not exist here, so
   the padding reserved for it at the bottom of body would just be dead space. */
body.hk-legacy{ padding-bottom:0; }