/* === THEME: higrotech === */
/* ============================================
   THEME: HigroTech (marketing site)
   Brand plane (.com). B2B / SaaS marketing, NOT a dispensary.

   The palette is BOOTH's (booth/frontend/src/styles/tokens.css), so the
   marketing site, the platform and the mark read as one company:

     BLUE  = the interface: links, buttons, navigation, structure.
     GREEN = the brand: the sapling mark and its lit H and T, and "live".

   The two ramps were derived to share lightness rung for rung, so neither
   shouts. On this site's light ground the interface uses the darker blue
   rungs (--blue-deep is 5.88:1 on light, --blue-mid takes white text at
   4.71:1); on the dark hero and footer the green signal and light blue carry
   the accents. Change a hex in BOOTH's tokens first, then here.
   ============================================ */
:root {
  /* Platform blue — the interface */
  --blue-signal:  #7ec0ff;   /* accents on dark only */
  --blue:         #0090ed;
  --blue-mid:     #0077c6;   /* button fill, white text */
  --blue-deep:    #0064a8;   /* links + accents on light */
  --blue-dark:    #005c9b;
  --blue-light:   #d8ebfe;   /* tint */

  /* Brand green — the mark, and what's alive */
  --green-signal: #3DDC6A;   /* the lit H and T */
  --green:        #1FA37A;
  --green-deep:   #137256;
  --green-light:  #D4F0E6;

  /* Ground — BOOTH's dark navy and its light theme */
  --navy-bg:      #0b0f16;
  --navy-surface: #131a25;
  --navy-2:       #1a2332;
  --light-bg:     #f7f9fc;
  --white:        #FFFFFF;
  --surface-2:    #f2f6fb;
  --border:       #d7e0ec;
  --ink:          #101823;
  --text-sub:     #4b596b;
  --text-muted:   #5b6d85;

  --font-display: 'Barlow Condensed', Georgia, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: var(--font-display);

  --header-h:        72px;
  --header-logo-w:   200px;
  --header-logo-h:   44px;

  --body-bg:        var(--light-bg);
  --body-fg:        var(--ink);
  --heading:        var(--ink);
  --heading-strong: var(--ink);
  --link:           var(--blue-deep);
  --link-hover:     var(--blue-dark);
  --muted:          var(--text-muted);
  --header-bg:      rgba(11, 15, 22, 0.97);   /* --navy-bg */
  --footer-bg:      var(--navy-bg);
  --footer-accent:  var(--green-signal);
  --about-bg:       linear-gradient(135deg, var(--white) 0%, var(--blue-light) 140%);

  /* Required shared-component semantic aliases */
  --moss:      var(--blue-deep);
  --deep-fern: var(--blue-dark);
  --washi:     var(--border);
  --kinako:    var(--white);
  --shoji:     var(--surface-2);
  --fog:       var(--text-muted);
  --charcoal:  var(--text-sub);
  --sumi:      var(--ink);
  --yuzu:      var(--green-signal);

  --hero-bg-image: none;
  --hero-overlay:  none;
}

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: 0.01em; }
/* Home page headings spread their words evenly across lines; the legal pages
   keep their wrapping as it was. */
body:has(#start.wordmark) :is(h1, h2, h3, h4) { text-wrap: balance; }

/* ---- Home: the one-pager (operator, 2026-10-31) ----
   Navy opening and closing bands frame light content sections, with the
   cannabis spotlight on navy in the middle so it reads as a featured block. */

/* Hero: one centered column on navy, the sapling mark above the headline.
   The shared hero is a two-column, uppercase, word-per-line layout built for
   dispensary art; this site has no hero image, so all of that is re-set. */
body .hero {
  min-height: calc(100vh - 4rem);
  padding: calc(var(--header-h) + 2rem) 0 4rem;
  align-items: center;
  background: radial-gradient(ellipse at 50% 40%, var(--navy-2) 0%, var(--navy-surface) 45%, var(--navy-bg) 100%);
}
body .hero__wrap { grid-template-columns: 1fr; }
body .hero__main {
  padding: 0;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  align-items: center;
}
body .hero__main::before {
  content: "";
  display: block;
  width: clamp(104px, 18vw, 168px);
  aspect-ratio: 1;
  margin: 0 auto 2rem;
  background: url("/img/mark.svg") center / contain no-repeat;
}
body .hero__title {
  color: var(--white);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  line-height: 1.02;
  text-transform: none;
  word-spacing: normal;
  letter-spacing: 0.005em;
  margin-bottom: 1.2rem;
}
body .hero__desc {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.55;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 1;
  max-width: 40ch;
  margin: 0 auto 2.2rem;
}
/* The home page's tagline exists for the page title and share title
   ("HigroTech | Big digital for small business"); the hero description
   already opens with that line, so the shared hero's subtitle is hidden. */
body .hero__subtitle { display: none; }
body .hero__ctas { justify-content: center; align-items: stretch; }
/* The shared hero gives the primary button more padding than the secondary;
   side by side here they should be one height, labels centered. */
body .hero__ctas .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2em 2.6em;
  font-size: 0.85rem;
}
body .hero .cta--secondary {
  background: transparent;
  color: var(--white);
  border-color: var(--blue-signal);
}
body .hero .cta--secondary:hover { background: var(--navy-2); color: var(--white); }

/* The theme loads before the component styles, so class-only rules here are
   prefixed with body to win the tie. Buttons: BOOTH blue fill takes white
   text at 4.71:1. The shared a:hover rule outranks the button's own label
   color and would turn the label --link-hover blue on the --blue-dark hover
   fill (1:1, invisible), so the hover label is pinned white. */
body .cta--primary { background: var(--blue-mid); border-color: var(--blue-mid); }
body .cta--primary:hover { color: var(--white); }

/* Content sections */
body .story__pillar-label { color: var(--green-deep); }
#platform.story { background: var(--light-bg); }
#who.story { background: var(--light-bg); }

/* Cannabis spotlight: the one content block on navy */
#cannabis.story { background: radial-gradient(ellipse at 50% 30%, var(--navy-2) 0%, var(--navy-bg) 90%); }
#cannabis .story__eyebrow,
#cannabis .story__pillar-label { color: var(--green-signal); }
#cannabis .story__title,
#cannabis .story__pillar-title { color: var(--white); }
#cannabis .story__deck,
#cannabis .story__pillar-body { color: rgba(255, 255, 255, 0.74); }
#cannabis .story__pillar { background: var(--navy-surface); border-color: #222d3f; }

/* The ladder: from marketing partner to all in, four rungs in a row on
   desktop. Each rung's top rule steps up in green so it reads as a climb. */
#ladder.steps { background: var(--white); padding: 5rem 0; border-color: var(--border); }
#ladder .steps__row { grid-template-columns: repeat(4, 1fr); max-width: 1040px; gap: 1.5rem; }
#ladder .steps__title { font-size: clamp(1.9rem, 4vw, 2.8rem); text-transform: none; letter-spacing: 0.01em; margin-bottom: 2.5rem; }
#ladder .steps__item { border-top: 3px solid var(--green-light); padding-top: 1.1rem; }
#ladder .steps__item:nth-child(2) { border-top-color: #9fdcc4; }
#ladder .steps__item:nth-child(3) { border-top-color: var(--green); }
#ladder .steps__item:nth-child(4) { border-top-color: var(--green-deep); }
#ladder .steps__num { color: var(--green-deep); opacity: 1; font-size: 1.6rem; }
#ladder .steps__head { font-size: 1.2rem; text-transform: none; letter-spacing: 0.01em; }
#ladder .steps__body { font-size: 0.98rem; }

/* Closing band: the ask, with the button under the green rule */
#start.wordmark {
  padding: 5.5rem 0;
  background: radial-gradient(ellipse at 50% 40%, var(--navy-2) 0%, var(--navy-surface) 45%, var(--navy-bg) 100%);
}
#start .wordmark__name { font-weight: 800; font-size: clamp(2.4rem, 6vw, 3.8rem); }
#start .wordmark__rule { background: var(--green-signal); }
#start .wordmark__tagline { margin-top: 2rem; max-width: none; }
/* Two navy bands meet here; a hairline makes the join look meant */
#start.wordmark { border-top: 1px solid #222d3f; }

/* On the home page the closing band already says the name, so the footer's
   brand block is dropped and the footer starts at its links. The platform's
   global "A HigroTech Production" credit would credit HigroTech to itself.
   Scoped to the home page; the legal pages keep their footer as it was. */
body:has(#start.wordmark) .footer__vinyl { display: none; }
body:has(#start.wordmark) .site-footer { padding-top: 2.5rem; }
body:has(#start.wordmark) .ht-credit { display: none; }

@media (max-width: 860px) {
  #ladder .steps__row { grid-template-columns: repeat(2, 1fr); }
}
/* "Start a project" is longer than the legal pages' "Contact": on the home
   page's phone header the logo and the button shrink so both fit on one
   line. Scoped to the home page; the legal pages' header is as it was. */
@media (max-width: 480px) {
  body:has(#start.wordmark) { --header-logo-w: 150px; --header-logo-h: 34px; }
  /* the shared header caps the logo at 32vw (120px here); ours carries the
     name in it, so it gets the room the short header leaves */
  body:has(#start.wordmark) .header__logo img,
  body:has(#start.wordmark) .header__logo .header__logo-img { width: var(--header-logo-w); }
  body:has(#start.wordmark) .header__cta { padding: 0.55em 0.9em !important; font-size: 0.78rem !important; white-space: nowrap; }
}
@media (max-width: 360px) {
  body:has(#start.wordmark) { --header-logo-w: 118px; --header-logo-h: 28px; }
  body:has(#start.wordmark) .header__cta { letter-spacing: 0.04em !important; padding: 0.5em 0.7em !important; }
}
/* The shared steps row turns into a sideways swipe on phones; a ladder reads
   better stacked, so it stays a column. */
@media (max-width: 720px) {
  #ladder .steps__row { grid-auto-flow: row; grid-template-columns: 1fr; overflow: visible; max-width: 480px; }
}
@media (max-width: 600px) {
  body .hero { min-height: auto; padding-bottom: 3rem; }
  body .hero__main { padding: 0 1.25rem; }
  body .hero__ctas { width: auto; align-items: stretch; }
}

/* The header sits on the same navy as the home band. The shared header
   assumes a light bar (a --washi rule under it, --moss button), so the rule
   and the button are re-set for dark: light-blue outline, white label. */
.site-header { border-bottom-color: #222d3f !important; box-shadow: none !important; }
.header__cta { color: var(--white) !important; border-color: var(--blue-signal) !important; }
.header__cta:hover { background: var(--blue-mid) !important; border-color: var(--blue-mid) !important; box-shadow: none !important; }

/* This site has no navigation links, so on narrow screens the shared header's
   menu button would open an empty menu while hiding Contact. Keep Contact. */
.header__nav { display: none !important; }
@media (max-width: 980px) {
  .mobile-menu-toggle { display: none !important; }
  .header__cta { display: inline-flex !important; }
}


/* === BASE === */
/* ============================================
   BASE — reset + layout utilities
   (shared across all tenants; theme.css defines tokens)
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h, 64px) + 32px);
}

body {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-fg, #1C1C1C);
  background: var(--body-bg, #FAFAF5);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--link, #4A7C59);
  text-decoration: none;
  transition: color 0.2s, transform 0.2s, background 0.2s;
}
a:hover { color: var(--link-hover, #7FB069); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display, 'DM Sans', sans-serif);
  font-weight: 700;
  color: var(--heading, #1C1C1C);
  line-height: 1.1;
}

h2 { font-size: clamp(1.8rem, 4vw, 3rem); }

p + p { margin-top: 1.5em; }

.wrap {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Platform producer credit — rendered globally from _skeleton on every
   tenant/page. Subtle by design; a theme may retint via the two tokens. */
.ht-credit {
  text-align: center;
  padding: 1.25rem 1rem;
  background: var(--ht-credit-bg, transparent);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ht-credit-fg, #9a9a9a);
}
.ht-credit p { margin: 0; }
.ht-credit a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.ht-credit a:hover { color: inherit; text-decoration: underline; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}


/* === PRIMITIVE: cta === */
/* CTA primitive — used inline by hero, visit, dutchie-menu, etc.
   Variants (set via config prop "variant"):
     primary          — solid bg in brand color, white text, large
     secondary        — plain text, subtle hover (current default)
     secondary-border — plain + visible border
     secondary-color  — bordered + colored text/border
     secondary-line   — underline-only, minimal                     */

.cta {
  display: inline-block;
  padding: 0.9em 2em;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 4px; border: 2px solid transparent;
  transition: all 0.3s;
  cursor: pointer; position: relative; overflow: hidden;
  text-decoration: none;
}

/* --- Primary: big, bold, solid brand color ---
   The label color is tokenized (--cta-primary-fg, default white) because the
   fleet's primaries were all dark enough for white text — greens and navies —
   and a light brand primary silently produced an illegible button. bakes'
   Budder Gold #C98A3B scores 2.92:1 against white (AA needs 4.5) and 5.78:1
   against Ink, so its theme sets the token. Every theme that does NOT set it
   renders byte-identically to before. */
.cta--primary {
  padding: 1.15em 2.8em;
  font-size: 0.95rem;
  background: var(--moss, #4A7C59);
  color: var(--cta-primary-fg, white);
  border-color: var(--moss, #4A7C59);
}
.cta--primary::before {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--deep-fern, #2B5438);
  transition: left 0.3s; z-index: -1;
}
.cta--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(74, 124, 89, 0.35);
}
.cta--primary:hover::before { left: 0; }

/* --- Secondary: plain text, subtle hover --- */
.cta--secondary {
  background: white; color: var(--moss, #4A7C59);
  border-color: transparent;
}
.cta--secondary:hover {
  background: var(--kinako, #F2EBD9);
  color: var(--sumi, #1C1C1C);
}

/* --- Secondary bordered: plain + visible border --- */
.cta--secondary-border {
  background: white; color: var(--sumi, #1C1C1C);
  border-color: var(--washi, #E4DDD0);
}
.cta--secondary-border:hover {
  border-color: var(--driftwood, #C8BFA8);
  background: var(--kinako, #F2EBD9);
}

/* --- Secondary colored: border + text in brand color --- */
.cta--secondary-color {
  background: transparent; color: var(--moss, #4A7C59);
  border-color: var(--moss, #4A7C59);
}
.cta--secondary-color:hover {
  background: var(--moss, #4A7C59);
  color: var(--cta-primary-fg, white);
}

/* --- Secondary underline: minimal, text-link feel --- */
.cta--secondary-line {
  background: transparent; color: var(--moss, #4A7C59);
  border: none; border-radius: 0;
  padding-left: 0; padding-right: 0;
  border-bottom: 2px solid var(--moss, #4A7C59);
}
.cta--secondary-line:hover {
  color: var(--deep-fern, #2B5438);
  border-bottom-color: var(--deep-fern, #2B5438);
}

/* --- Modifiers --- */
.cta--block { width: 100%; text-align: center; }


/* === COMPONENT: header === */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--header-bg, rgba(250, 250, 245, 0.95));
  backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--washi, #E4DDD0);
  z-index: 1000;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: 0 1.5rem;
}
.header__logo { flex-shrink: 0; display: flex; align-items: center; }
.header__logo img,
.header__logo .header__logo-img {
  width: var(--header-logo-w, 120px);
  height: var(--header-logo-h, 40px);
  display: block;
  object-fit: contain;
  transition: transform 0.3s;
}
.header__nav { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; gap: 2.5rem; list-style: none; }
.nav-link {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fog, #8A8A8A); position: relative;
  transition: color 0.2s;
}
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: var(--moss, #4A7C59);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s;
}
.nav-link:hover, .nav-link.active { color: var(--moss, #4A7C59); }
.nav-link.active::after { transform: scaleX(1); transform-origin: left; }
.header__phone {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--sumi, #1C1C1C); white-space: nowrap;
  transition: color 0.2s;
}
.header__phone-icon {
  width: 1em; height: 1em; flex-shrink: 0;
  color: var(--moss, #4A7C59);
}
.header__phone:hover { color: var(--moss, #4A7C59); }
.header__cta {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--moss, #4A7C59);
  padding: 0.7em 1.5em; border: 2px solid var(--moss, #4A7C59);
  border-radius: 4px; transition: all 0.3s; white-space: nowrap;
}
.header__cta:hover {
  background: var(--moss, #4A7C59); color: white;
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3);
}
.mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.hamburger, .hamburger::before, .hamburger::after {
  display: block; width: 24px; height: 2.5px;
  background: var(--sumi, #1C1C1C); transition: all 0.3s; border-radius: 1px;
}
.hamburger { position: relative; }
.hamburger::before, .hamburger::after { content: ''; position: absolute; left: 0; }
.hamburger::before { top: -8px; }
.hamburger::after { top: 8px; }

@media (max-width: 980px) {
  .header__nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--header-bg, rgba(250, 250, 245, 0.98)); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--washi, #E4DDD0);
    flex-direction: column; padding: 1.5rem 0; z-index: 999;
  }
  .header__nav.open { display: flex; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-link { display: block; padding: 1rem 1.5rem; border-bottom: 1px solid var(--washi, #E4DDD0); }
  .nav-link::after { display: none; }
  .header__cta { display: none; }
  /* Mobile row: the desktop gap (2rem) overflows a 375px viewport once the
     phone joins the row (logo + phone + toggle + 2 gaps + padding = 415px),
     clipping the menu toggle offscreen — tighten it. */
  .header__inner { gap: 0.75rem; }
  /* Cap the logo so logo + phone + toggle always fit one row: tenants set
     --header-logo-w up to 160px, which overflows 375px even with tight gaps.
     32vw = 120px at 375, scaling down gracefully on smaller screens. */
  .header__logo img,
  .header__logo .header__logo-img { width: min(var(--header-logo-w, 120px), 32vw); }
  /* Tuck the phone right, beside the menu toggle (operator call, 2026-07-15):
     under space-between the middle item centers between UNEQUAL flanks (wide
     logo vs 40px toggle), reading ~80px right of viewport center — no
     centering pretense; the auto margin clusters phone+toggle right and the
     row gap provides the breather. */
  .header__phone { font-size: 0.8rem; margin-left: auto; }
  .mobile-menu-toggle { display: block; }
}


/* === COMPONENT: hero === */
.hero {
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: 0;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  background: var(--body-bg, #FAFAF5);
}
.hero__wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; align-items: center;
  width: 100%;
}
.hero__main {
  padding: 4rem 3rem 4rem 0;
  display: flex; flex-direction: column; justify-content: center;
}
.hero__title {
  font-size: clamp(2.8rem, 9vw, 5.2rem);
  font-weight: 700; color: var(--heading-strong, #2B5438);
  margin-bottom: 0.4rem; line-height: 1;
  letter-spacing: -0.02em; text-transform: uppercase;
  word-spacing: 100vw;
  animation: fadeInUp 0.8s ease-out;
}
.hero__subtitle {
  font-size: 1.4rem; font-weight: 600; color: var(--moss, #4A7C59);
  margin-bottom: 0.3rem; letter-spacing: 0.03em;
  font-style: italic;
  animation: fadeInUp 0.8s ease-out 0.1s both;
}
.hero__desc {
  font-size: 1rem; color: var(--charcoal, #4A4A4A);
  margin-bottom: 2rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}
.hero__ctas {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  animation: fadeInUp 0.8s ease-out 0.3s both;
}
.hero__sidebar {
  display: flex; flex-direction: column; gap: 1.5rem;
  margin-top: 2.5rem;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}
.hero__image {
  position: relative;
  height: 100%;
  min-height: calc(100vh - var(--header-h) - 2rem);
  overflow: hidden;
  animation: fadeIn 1s ease-out;
}
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

@media (max-width: 980px) {
  .hero { min-height: auto; }
  .hero__wrap { grid-template-columns: 1fr; }
  .hero__main { padding: 3rem 0; text-align: center; align-items: center; }
  .hero__image { min-height: 60vh; }
  .hero__sidebar { flex-direction: row; gap: 1rem; }
  .info-card { flex: 1; }
}
@media (max-width: 600px) {
  .hero__main { padding: 2rem 0; }
  .hero__title { font-size: 2.2rem; }
  .hero__subtitle { font-size: 1rem; }
  .hero__desc { font-size: 0.85rem; margin-bottom: 1.5rem; }
  .hero__ctas { flex-direction: column; gap: 1rem; width: 100%; }
  .hero__ctas .cta { text-align: center; }
  .hero__image { min-height: 50vh; }
  .hero__sidebar { flex-direction: column; }
}

/* Hero CTAs — roomier on tablet/desktop. The compact mobile base (cta.css)
   looks clunky and undersized against a full-bleed hero on larger screens,
   so bump the padding (and a touch more gap) from tablet up. Mobile-first:
   the base stays untouched below 768px. Engine-wide — applies to every
   tenant's hero. */
@media (min-width: 768px) {
  .hero__ctas { gap: 1.5rem; }
  .hero__ctas .cta { padding: 1.1em 2.8em; }
  .hero__ctas .cta--primary { padding: 1.35em 3.4em; }
}


/* === COMPONENT: story === */
.story { background: var(--shoji, #FBF8F0); padding: 5.5rem 0; }
.story__head { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.story__eyebrow {
  font-family: var(--font-body, sans-serif);
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--moss, #A04E38); margin-bottom: 0.8rem;
}
.story__title {
  font-family: var(--font-heading, serif); color: var(--heading-strong, #28435A);
  font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; margin: 0 0 1rem;
}
.story__deck { color: var(--fog, #5C544D); font-size: 1.1rem; line-height: 1.6; margin: 0; }
.story__pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; max-width: 1040px; margin: 0 auto;
}
.story__pillar {
  background: var(--kinako, #FBF1DD);
  border: 1px solid var(--washi, #F4E6CB);
  border-radius: 12px; padding: 2rem 1.8rem;
}
.story__pillar-label {
  font-family: var(--font-body, sans-serif); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--yuzu, #B8893E); font-weight: 700; margin-bottom: 0.8rem;
}
.story__pillar-title { font-family: var(--font-heading, serif); color: var(--heading-strong, #28435A); font-size: 1.3rem; margin: 0 0 0.6rem; }
.story__pillar-body { color: var(--fog, #5C544D); font-size: 1rem; line-height: 1.6; margin: 0; }
.story__quote { max-width: 760px; margin: 3rem auto 0; text-align: center; border: 0; padding: 0; }
.story__quote-text {
  font-family: var(--font-display, cursive);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); color: var(--moss, #A04E38);
  line-height: 1.25; margin: 0 0 0.6rem;
}
.story__quote-attr {
  font-family: var(--font-body, sans-serif); font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog, #5C544D); font-style: normal;
}
@media (max-width: 860px) { .story__pillars { grid-template-columns: 1fr; max-width: 480px; } }


/* === COMPONENT: steps === */
/* steps — slim "how it works" bridge between the trust ribbon and the shop.
   Low cognitive load: optional title + a 3–4 col row of numbered steps. No CTAs.
   Semantic tokens only, so it reseeds across tenants. */
.steps {
  background: var(--washi, #FBF8F0);
  padding: 3rem 0;
  border-top: 1px solid var(--hairline, rgba(28, 28, 26, 0.10));
  border-bottom: 1px solid var(--hairline, rgba(28, 28, 26, 0.10));
}
.steps__title {
  text-align: center;
  font-family: var(--font-heading, serif);
  color: var(--sumi, #1F1A18);
  font-size: clamp(1rem, 2vw, 1.4rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 1.8rem;
}
.steps__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.steps__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.steps__num {
  font-family: var(--font-display, var(--font-heading, serif));
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1;
  color: var(--moss, #4A7C59);
  opacity: 0.35;
}
.steps__head {
  font-family: var(--font-heading, serif);
  font-size: 1.02rem;
  color: var(--sumi, #1F1A18);
  margin: 0.25rem 0 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.steps__body {
  font-family: var(--font-body, sans-serif);
  font-size: 0.92rem;
  color: var(--fog, #5C544D);
  line-height: 1.5;
  margin: 0;
}
/* Mobile: collapse the grid into a horizontal swipe to save vertical space. */
@media (max-width: 720px) {
  .steps__row {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 76%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
  .steps__item { scroll-snap-align: start; }
}


/* === COMPONENT: faq === */
.faq { padding: 5rem 0; background: var(--faq-bg, var(--shoji, #FAFAF5)); }
.faq__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--heading-strong, #2B5438);
  text-align: center; margin-bottom: 0.5rem;
}
.faq__sub {
  text-align: center; color: var(--fog, #8A8A8A);
  margin-bottom: 2.5rem; font-size: 0.95rem;
}
.faq__list {
  max-width: 720px; margin: 0 auto;
  list-style: none;
}
.faq__item {
  border-bottom: 1px solid var(--washi, #E4DDD0);
}
.faq__trigger {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 0;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 1.05rem; font-weight: 600;
  color: var(--heading, #1C1C1C);
  text-align: left; line-height: 1.4;
}
.faq__trigger:hover { color: var(--moss, #4A7C59); }
.faq__icon {
  font-size: 1.4rem; font-weight: 300;
  color: var(--fog, #8A8A8A);
  transition: transform 0.3s;
  flex-shrink: 0; margin-left: 1rem;
}
.faq__trigger[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq__answer-inner {
  padding: 0 0 1.25rem;
  font-size: 0.95rem;
  color: var(--charcoal, #4A4A4A);
  line-height: 1.7;
}


/* === COMPONENT: wordmark === */
/* Wordmark — a typographic brand-mark band: a centered brand name in the
   display face with an accent rule and optional eyebrow + tagline. A dark
   brand "breath" between content sections. All colors come from semantic
   tokens so any theme can re-skin it by aliasing them. */
.wordmark {
  padding: 4.5rem 0;
  background: var(--wordmark-bg, var(--deep-fern, #1B2D45));
  text-align: center;
}
.wordmark__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wordmark-eyebrow, var(--yuzu, #C4893B));
  margin-bottom: 1.1rem;
}
.wordmark__name {
  font-family: var(--font-display, var(--font-heading, Georgia, serif));
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.05;
  color: var(--wordmark-fg, #FFFFFF);
  margin: 0;
}
.wordmark__rule {
  display: block;
  width: 64px;
  height: 3px;
  margin: 1.4rem auto 0;
  background: var(--wordmark-accent, var(--yuzu, #C4893B));
  border-radius: 2px;
}
.wordmark__tagline {
  margin: 1.2rem auto 0;
  max-width: 40ch;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--wordmark-tagline, rgba(255, 255, 255, 0.82));
}
@media (max-width: 600px) {
  .wordmark { padding: 3.25rem 0; }
}


/* === COMPONENT: footer === */
.site-footer {
  background: var(--footer-bg, #1C1C1C);
  color: rgba(250, 250, 245, 0.7);
  padding: 4rem 0;
  position: relative;
}
.site-footer::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(127, 176, 105, 0.3), transparent);
}
.footer__vinyl {
  text-align: center; padding: 3rem 0;
  border-bottom: 1px solid rgba(250, 250, 245, 0.1);
  position: relative;
}
.footer__center h3 {
  font-family: var(--font-display, 'DM Sans', sans-serif);
  font-size: 1.6rem; color: white;
  margin-bottom: 0.4rem; letter-spacing: -0.01em;
}
.footer__tagline {
  color: var(--footer-accent, #E2B84A);
  font-weight: 600; font-size: 0.95rem;
  margin-bottom: 0.3rem; letter-spacing: 0.05em;
}
.footer__desc {
  font-size: 0.85rem;
  color: rgba(250, 250, 245, 0.5);
  letter-spacing: 0.05em; margin: 0;
}
.footer__copy {
  text-align: center; padding-top: 2rem;
  font-size: 0.8rem; color: rgba(250, 250, 245, 0.4);
}
.footer__warning {
  max-width: 70ch;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 250, 245, 0.12);
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(250, 250, 245, 0.7);
}
.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.25rem; margin-bottom: 1rem;
}
.footer__legal-link {
  color: rgba(250, 250, 245, 0.6);
  font-size: 0.8rem; text-decoration: none;
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer__legal-link:hover {
  color: white;
  border-bottom-color: rgba(250, 250, 245, 0.4);
}
@media (max-width: 600px) {
  .site-footer { padding: 2rem 0; }
  .footer__center h3 { font-size: 1.3rem; }
  .footer__tagline { font-size: 0.85rem; }
}


/* === COMPONENT: prose === */
.prose-section {
  padding: calc(var(--header-height, 80px) + 3rem) 0 4rem;
  background: var(--body-bg);
  color: var(--body-fg);
}

.prose-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.prose-title {
  font-family: var(--heading-font, inherit);
  color: var(--heading-strong, var(--body-fg));
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
  margin: 0 0 0.5rem;
}

.prose-updated {
  color: var(--muted, rgba(0,0,0,0.55));
  font-size: 0.875rem;
  margin: 0 0 2rem;
}

.prose-body {
  line-height: 1.7;
  font-size: 1rem;
}

.prose-body h2 {
  font-family: var(--heading-font, inherit);
  color: var(--heading-strong, var(--body-fg));
  font-size: 1.4rem;
  margin: 2.25rem 0 0.75rem;
}

.prose-body h3 {
  font-size: 1.1rem;
  margin: 1.75rem 0 0.5rem;
}

.prose-body p { margin: 0 0 1rem; }
.prose-body ul, .prose-body ol { margin: 0 0 1rem 1.25rem; }
.prose-body li { margin-bottom: 0.4rem; }
.prose-body a { color: var(--link, var(--heading-strong)); text-decoration: underline; }
.prose-body strong { color: var(--heading-strong, inherit); }