/* ==========================================================================
   Bloodhound Hemp Farms — design system
   Palette sampled directly from logo.png:
     leaf  #7AC143  the BLOODHOUND wordmark and the hemp leaves
     mint  #33B78C  the arc beneath the hound + "COLORADO GROWN"
     bark  #20160D  the HEMP wordmark and the hound's linework
     cream #FBF8F1  the logo's paper ground
   ========================================================================== */

/* ------------------------------------------------------------ 1. tokens */

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --leaf: #7AC143;
  --leaf-strong: #5FA330;
  --leaf-deep: #3C6522;
  --leaf-soft: #E6F6CF;
  --mint: #33B78C;
  --mint-soft: #DCF6EC;
  --bark: #20160D;
  --gold: #E8B63F;

  --bg: #FBF8F1;
  --bg-elev: #FFFFFF;
  --bg-sunk: #F4EEE2;
  --bg-inverse: #17100A;

  --fg: #20160D;
  --fg-muted: #6B543E;
  --fg-subtle: #8A7159;
  --fg-inverse: #FBF8F1;

  --line: #E7DECE;
  --line-strong: #D2C5B8;

  --ring: rgb(122 193 67 / 0.55);
  --shadow-color: 32 22 13;

  --header-h: 96px;
  --radius: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
}

html.dark {
  --bg: #120C07;
  --bg-elev: #1C140D;
  --bg-sunk: #0C0804;
  --bg-inverse: #FBF8F1;

  --fg: #F4EEE4;
  --fg-muted: #C0AE99;
  --fg-subtle: #9A8770;
  --fg-inverse: #20160D;

  --line: #33261A;
  --line-strong: #4A3826;

  --leaf-soft: #22330F;
  --mint-soft: #0F3226;
  --shadow-color: 0 0 0;

  color-scheme: dark;
}

/* --------------------------------------------------------- 2. base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color .3s var(--ease-soft), color .3s var(--ease-soft);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--fg);
  text-wrap: balance;
}

p { margin: 0; }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--leaf);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--leaf); color: #10240A; }

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  transform: translateY(-160%);
  background: var(--bark);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 0.6rem;
  font-weight: 600;
  transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* scrollbar */
@supports (scrollbar-color: red blue) {
  html { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
}

/* ---------------------------------------------------- 3. layout shell */

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) { .container { padding-inline: 2rem; } }
@media (min-width: 1280px) { .container { padding-inline: 2.5rem; } }

.container-narrow { max-width: 860px; }

.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }

.surface { background: var(--bg-elev); }
.surface-sunk { background: var(--bg-sunk); }
.hairline { border-color: var(--line); }
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }

/* Decorative section separator shaped like a hemp leaf spine */
.rule-leaf {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--mint);
}
.rule-leaf::before, .rule-leaf::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* ------------------------------------------------------- 4. type bits */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leaf-strong);
}
html.dark .kicker { color: var(--leaf); }
.kicker::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.display-1 { font-size: clamp(2.35rem, 6.2vw, 4.6rem); }
.display-2 { font-size: clamp(1.9rem, 4.4vw, 3.15rem); }
.display-3 { font-size: clamp(1.45rem, 2.6vw, 2.05rem); }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--fg-muted); line-height: 1.7; }

.prose { max-width: 68ch; color: var(--fg-muted); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2.2em; color: var(--fg); }
.prose h3 { font-size: 1.25rem; margin-top: 1.8em; color: var(--fg); }
.prose strong { color: var(--fg); font-weight: 650; }
.prose a { color: var(--leaf-strong); text-decoration: underline; text-underline-offset: 3px; }
html.dark .prose a { color: var(--leaf); }
.prose ol { padding-left: 1.4rem; list-style: decimal; }
.prose ol li { margin-top: .5em; padding-left: .3rem; }
.prose ul { padding-left: 1.2rem; list-style: none; }
.prose ul li { position: relative; padding-left: 1.1rem; margin-top: .5em; }
.prose .not-prose { color: var(--fg); max-width: none; }
.prose .not-prose > * + * { margin-top: 0; }
.prose ul li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--leaf);
}

/* ------------------------------------------------------- 5. buttons */

.btn {
  --btn-bg: var(--leaf);
  --btn-fg: #10240A;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .2s;
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgb(255 255 255 / .38) 50%, transparent 80%);
  transform: translateX(-120%);
  z-index: -1;
}
.btn:hover::after { transition: transform .75s var(--ease-out); transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { box-shadow: 0 12px 28px -12px rgb(122 193 67 / .8); }
.btn-primary:hover { background: var(--leaf-strong); color: #fff; box-shadow: 0 18px 36px -14px rgb(122 193 67 / .9); }

.btn-mint { --btn-bg: var(--mint); --btn-fg: #04231A; box-shadow: 0 12px 28px -12px rgb(51 183 140 / .75); }
.btn-mint:hover { background: #229371; color: #fff; }

.btn-dark { --btn-bg: var(--bark); --btn-fg: #FBF8F1; }
html.dark .btn-dark { --btn-bg: #FBF8F1; --btn-fg: #20160D; }

.btn-outline {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: var(--line-strong);
}
.btn-outline:hover { border-color: var(--leaf); color: var(--leaf-strong); }
html.dark .btn-outline:hover { color: var(--leaf); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--fg); padding-inline: 1rem; }
.btn-ghost:hover { background: var(--bg-sunk); }

.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.85rem; }
.btn-lg { padding: 1.05rem 2.1rem; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* -------------------------------------------------------- 6. surfaces */

.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
}
.card-hover:hover {
  transform: translateY(-6px);
  border-color: rgb(122 193 67 / .5);
  box-shadow: 0 26px 48px -22px rgb(var(--shadow-color) / .30);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--leaf-soft);
  color: var(--leaf-deep);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html.dark .chip { color: var(--leaf); }
.chip-mint { background: var(--mint-soft); color: #1B745B; }
html.dark .chip-mint { color: var(--mint); }

.badge-sale {
  background: var(--gold);
  color: #2B1B00;
}

/* product card media keeps a consistent frame regardless of source ratio */
/* Product shots arrive on solid white, so the tile is white in both themes
   and the packshot sits on it seamlessly — no grey box, no halo.
   `isolation` gives the blend a well-defined group: without it Chrome
   intermittently fails to repaint a lazily-decoded blended image. */
.pc-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  isolation: isolate;
  display: grid;
  place-items: center;
}
/* Size the <picture> wrapper, not the <img>: a percentage width on an image
   inside an inline <picture> has no resolvable containing block and collapses
   to zero. The wrapper becomes the box; the image fills it. */
.pc-media > picture,
.pc-media > img {
  display: block;
  width: 82%;
  height: 82%;
}
.pc-media picture > img,
.pc-media > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .6s var(--ease-out);
}
.card-hover:hover .pc-media img { transform: scale(1.07) rotate(-1.5deg); }

/* --------------------------------------------------------- 7. inputs */

.field { display: block; }
.label {
  display: block;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
  color: var(--fg);
}
.input, .textarea, .select {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 0.7rem;
  color: var(--fg);
  font: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.textarea { min-height: 8rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--fg-subtle); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--leaf);
  box-shadow: 0 0 0 4px rgb(122 193 67 / .22);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: #D8453F;
  box-shadow: 0 0 0 4px rgb(216 69 63 / .16);
}
.field-error { color: #D8453F; font-size: 0.8rem; margin-top: 0.35rem; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-elev);
}
.qty button {
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--fg-muted);
  transition: background-color .2s, color .2s;
}
.qty button:hover { background: var(--bg-sunk); color: var(--leaf-strong); }
.qty input {
  width: 2.6rem; text-align: center; border: 0; background: none;
  font-weight: 650; color: var(--fg); -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------------- 8. header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.site-header[data-stuck="true"] {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -22px rgb(var(--shadow-color) / .5);
}

.topbar {
  background: var(--bark);
  color: #E8E1D6;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
html.dark .topbar { background: #0A0603; }
.topbar a:hover { color: var(--leaf); }

/* The logo is the brand's strongest asset — give it real presence and never
   let it drop below a legible size for the "COLORADO GROWN" lockup line.
   It shrinks once the header sticks so the two bands stay compact. */
.brand-logo {
  height: 54px;
  width: auto;
  transition: height .3s var(--ease-out), transform .4s var(--ease-out);
}
@media (min-width: 768px)  { .brand-logo { height: 64px; } }
@media (min-width: 1280px) { .brand-logo { height: 76px; } }
.site-header[data-stuck="true"] .brand-logo { height: 48px; }
@media (min-width: 1280px) { .site-header[data-stuck="true"] .brand-logo { height: 56px; } }
.brand:hover .brand-logo { transform: scale(1.04); }

/* Header search — occupies the middle of the top row so the bar reads as a
   storefront rather than a logo stranded beside a row of icons. */
.header-search {
  flex: 1 1 auto;
  align-items: center;
  gap: 0.5rem;
  max-width: 30rem;
  margin-inline: clamp(1rem, 4vw, 3rem);
  padding: 0.35rem 0.35rem 0.35rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-elev);
  transition: border-color .2s, box-shadow .2s;
}
.header-search:focus-within {
  border-color: var(--leaf);
  box-shadow: 0 0 0 4px rgb(122 193 67 / .18);
}
.header-search-ico { color: var(--fg-subtle); display: grid; place-items: center; flex: none; }
.header-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  color: var(--fg);
  padding: 0.3rem 0;
}
.header-search input:focus { outline: none; }
.header-search input::placeholder { color: var(--fg-subtle); }
.header-search input::-webkit-search-cancel-button { cursor: pointer; }
.header-search button {
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  background: var(--bark);
  color: #FBF8F1;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: background-color .2s, transform .2s;
}
.header-search button:hover { background: var(--leaf-strong); transform: translateY(-1px); }
html.dark .header-search button { background: var(--leaf); color: #10240A; }
.drawer .header-search { max-width: none; margin-inline: 1.25rem; }

/* Second header band: the complete menu, with room for the longer
   Spanish labels without crowding the utility icons above it. */
.nav-band {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-elev) 55%, transparent);
}
.nav-band nav {
  height: 52px;
  transition: height .3s var(--ease-out);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-band nav::-webkit-scrollbar { display: none; }
.site-header[data-stuck="true"] .nav-band nav { height: 46px; }
.nav-band .navlink { font-size: 0.9rem; letter-spacing: 0.005em; white-space: nowrap; }

/* Two artworks, one lockup: the cream-inked variant carries the dark UI and
   the bark-coloured footer, so the hound and "HEMP" never vanish. */
.logo-dark { display: none; }
html.dark .logo-light { display: none; }
html.dark .logo-dark { display: block; }
.on-dark .logo-light { display: none; }
.on-dark .logo-dark { display: block; }

.navlink {
  position: relative;
  padding: 0.55rem 0.2rem;
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--fg);
  white-space: nowrap;
  transition: color .2s;
}
.navlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--leaf), var(--mint));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.navlink:hover, .navlink[aria-current="page"] { color: var(--leaf-strong); }
html.dark .navlink:hover, html.dark .navlink[aria-current="page"] { color: var(--leaf); }
.navlink:hover::after, .navlink[aria-current="page"]::after { transform: scaleX(1); }

.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.65rem; height: 2.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.icon-btn:hover { background: var(--bg-sunk); border-color: var(--line); color: var(--leaf-strong); }
html.dark .icon-btn:hover { color: var(--leaf); }
.icon-btn:active { transform: scale(.94); }

.cart-count {
  position: absolute;
  top: 2px; right: 0;
  min-width: 1.15rem; height: 1.15rem;
  padding: 0 0.28rem;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--leaf);
  color: #10240A;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(86vw, 380px);
  background: var(--bg-elev);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .42s var(--ease-out);
  z-index: 120;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer[data-open="true"] { transform: translateX(0); }
.scrim {
  position: fixed; inset: 0;
  background: rgb(10 6 3 / .55);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s, visibility .35s;
  z-index: 110;
}
.scrim[data-open="true"] { opacity: 1; visibility: visible; }

.drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  font-weight: 550;
  transition: color .2s, padding-left .25s var(--ease-out);
}
.drawer-link:hover { color: var(--leaf-strong); padding-left: 0.4rem; }

/* language switch */
.lang-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 11rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  box-shadow: 0 24px 48px -24px rgb(var(--shadow-color) / .45);
  padding: 0.35rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 60;
}
.lang-menu[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-item {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; padding: .6rem .7rem; border-radius: .6rem;
  font-size: .9rem; text-align: left; background: none; border: 0; cursor: pointer;
}
.lang-item:hover { background: var(--bg-sunk); }
.lang-item[aria-current="true"] { background: var(--leaf-soft); font-weight: 650; }

/* ----------------------------------------------------------- 9. hero */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-sunk);
}
/* The slides are stacked in a single grid cell rather than absolutely
   positioned, so the track grows to the tallest slide instead of clipping it.
   Every slide then gets an identical box, which is what keeps the copy on all
   three of them aligned to the same baseline. */
.hero-track {
  position: relative;
  display: grid;
  min-height: clamp(600px, 86vh, 860px);
  /* Height of the dots/arrows strip the copy has to clear. The arrows are
     hidden below sm, so the strip is just the dots plus their bottom padding. */
  --hero-controls: 2rem;
}
@media (min-width: 640px) { .hero-track { --hero-controls: 4.75rem; } }

.hero-slide {
  position: relative;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--ease-soft), visibility 1s;
}
.hero-slide[data-active="true"] { opacity: 1; visibility: visible; }

.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transition: transform 9s linear;
}
.hero-slide[data-active="true"] .hero-bg { transform: scale(1); }

.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgb(18 12 7 / .88) 0%, rgb(18 12 7 / .62) 45%, rgb(18 12 7 / .18) 100%),
    linear-gradient(0deg, rgb(18 12 7 / .55), transparent 55%);
}
/* The copy clears a reserved control strip and is anchored to the bottom of
   what is left, so the CTA row lands at the same height on every slide.
   Centring it instead made the gap depend on how many lines the headline
   wrapped to, and the three-line slides ran straight into the dots. */
.hero-content {
  position: relative;
  min-height: 100%;
  display: flex;
  align-items: flex-end;
  padding-top: clamp(3.5rem, 9vh, 6rem);
  padding-bottom: calc(var(--hero-controls) + clamp(1.5rem, 3.5vh, 2.5rem));
}

.hero-copy { position: relative; color: #FBF8F1; }
.hero-copy h1, .hero-copy h2 { color: #fff; }
.hero-copy .kicker { color: var(--leaf); }

.hero-slide[data-active="true"] .reveal-hero > * {
  animation: bh-rise .9s var(--ease-out) backwards;
}
.hero-slide[data-active="true"] .reveal-hero > *:nth-child(1) { animation-delay: .12s; }
.hero-slide[data-active="true"] .reveal-hero > *:nth-child(2) { animation-delay: .24s; }
.hero-slide[data-active="true"] .reveal-hero > *:nth-child(3) { animation-delay: .36s; }
.hero-slide[data-active="true"] .reveal-hero > *:nth-child(4) { animation-delay: .48s; }

.hero-dot {
  width: 2.5rem; height: 3px;
  border-radius: 3px;
  border: 0;
  background: rgb(255 255 255 / .35);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: background-color .3s;
}
.hero-dot[aria-current="true"] { background: rgb(255 255 255 / .28); }
.hero-dot[aria-current="true"]::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--leaf);
  transform-origin: left;
  animation: bh-progress var(--hero-duration, 7s) linear forwards;
}
.hero-nav {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .28);
  background: rgb(255 255 255 / .08);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background-color .25s, transform .25s, border-color .25s;
}
.hero-nav:hover { background: var(--leaf); border-color: var(--leaf); color: #10240A; transform: scale(1.07); }

/* ------------------------------------------------------ 10. marquee */

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: bh-marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: .6rem; padding-inline: 2rem; white-space: nowrap; }

/* -------------------------------------------- 11. scroll reveal */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  will-change: opacity, transform;
}
.reveal[data-shown="true"] { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .09s; }
.reveal-d2 { transition-delay: .18s; }
.reveal-d3 { transition-delay: .27s; }
.reveal-d4 { transition-delay: .36s; }

.tilt { transition: transform .5s var(--ease-out); transform-style: preserve-3d; }

/* ------------------------------------------------- 12. keyframes */

@keyframes bh-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes bh-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bh-spin { to { transform: rotate(360deg); } }
@keyframes bh-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes bh-bounce { 0%, 100% { transform: translateY(-18%); animation-timing-function: cubic-bezier(.8,0,1,1); } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,.2,1); } }
@keyframes bh-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes bh-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes bh-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes bh-pop { 0% { transform: scale(.85); opacity: 0; } 60% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
@keyframes bh-dots { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* --------------------------------------- 13. "Areas we serve" strip */

.areas-strip {
  background: #0B1220;
  color: #C8D2E0;
  border-top: 1px solid rgb(255 255 255 / .06);
}
html.dark .areas-strip { background: #080C14; }
.areas-strip h2 {
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.areas-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.15rem;
  font-size: 0.875rem;
}
.areas-list a {
  padding: 0.28rem 0.35rem;
  border-radius: 0.3rem;
  color: #AEBACB;
  transition: color .2s, background-color .2s;
}
.areas-list a:hover { color: #fff; background: rgb(122 193 67 / .18); }
.areas-sep { color: #3C4A60; user-select: none; }

/* -------------------------------------------------------- 14. footer */

.site-footer {
  position: relative;
  background: var(--bark);
  color: #CFC5B8;
  overflow: hidden;
}
html.dark .site-footer { background: #0A0603; }
.site-footer h3 {
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.footer-link { display: inline-block; padding: 0.28rem 0; color: #BEB2A3; transition: color .2s, transform .2s var(--ease-out); }
.footer-link:hover { color: var(--leaf); transform: translateX(3px); }
.footer-dog {
  position: absolute;
  right: -2rem; bottom: 0;
  width: min(360px, 34vw);
  opacity: .1;
  pointer-events: none;
}
.social-btn {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .16);
  color: #DED5C8;
  transition: background-color .25s, color .25s, transform .25s, border-color .25s;
}
.social-btn:hover { background: var(--leaf); border-color: var(--leaf); color: #10240A; transform: translateY(-3px); }

.fda-note {
  font-size: 0.74rem;
  line-height: 1.6;
  color: #8E8277;
}

/* ----------------------------------------- 15. accessibility widget */

.a11y-fab {
  position: fixed;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 130;
  width: 3.4rem; height: 3.4rem;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #1C64F2;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 14px 34px -12px rgb(28 100 242 / .7);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.a11y-fab:hover { transform: scale(1.08) rotate(8deg); }
.a11y-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.a11y-panel {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(92vw, 380px);
  z-index: 140;
  background: var(--bg-elev);
  border-right: 1px solid var(--line);
  box-shadow: 24px 0 60px -28px rgb(var(--shadow-color) / .55);
  transform: translateX(-102%);
  transition: transform .42s var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.a11y-panel[data-open="true"] { transform: translateX(0); }

.a11y-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--bg);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.a11y-row:hover { border-color: var(--leaf); }
.a11y-row[aria-pressed="true"] { border-color: var(--leaf); background: var(--leaf-soft); }
.a11y-row .a11y-ico {
  flex: none;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border-radius: 0.6rem;
  background: var(--bg-sunk);
  color: var(--leaf-strong);
}
.a11y-row[aria-pressed="true"] .a11y-ico { background: var(--leaf); color: #10240A; }
html.dark .a11y-row[aria-pressed="true"] .a11y-ico { color: #10240A; }
.a11y-switch {
  flex: none;
  width: 2.5rem; height: 1.4rem;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  transition: background-color .25s;
}
.a11y-switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: #fff;
  transition: transform .25s var(--ease-out);
}
.a11y-row[aria-pressed="true"] .a11y-switch { background: var(--leaf-strong); }
.a11y-row[aria-pressed="true"] .a11y-switch::after { transform: translateX(1.1rem); }

/* --- accessibility modes applied to <html> --- */
html[data-a11y-contrast="1"] {
  --bg: #ffffff; --bg-elev: #ffffff; --bg-sunk: #f2f2f2;
  --fg: #000000; --fg-muted: #1a1a1a; --fg-subtle: #333333;
  --line: #000000; --line-strong: #000000;
}
html.dark[data-a11y-contrast="1"] {
  --bg: #000000; --bg-elev: #000000; --bg-sunk: #0d0d0d;
  --fg: #ffffff; --fg-muted: #f0f0f0; --fg-subtle: #dddddd;
  --line: #ffffff; --line-strong: #ffffff;
}
html[data-a11y-contrast="1"] .hero-veil { background: rgb(0 0 0 / .82); }
html[data-a11y-contrast="1"] .card,
html[data-a11y-contrast="1"] .input { border-width: 2px; }

html[data-a11y-font="1"] { font-size: 112.5%; }
html[data-a11y-font="2"] { font-size: 125%; }
html[data-a11y-font="3"] { font-size: 140%; }

html[data-a11y-readable="1"] body,
html[data-a11y-readable="1"] h1, html[data-a11y-readable="1"] h2,
html[data-a11y-readable="1"] h3, html[data-a11y-readable="1"] h4,
html[data-a11y-readable="1"] .display-1, html[data-a11y-readable="1"] .display-2 {
  font-family: Verdana, Tahoma, 'Segoe UI', sans-serif !important;
  letter-spacing: 0.01em;
}

html[data-a11y-spacing="1"] body {
  letter-spacing: 0.06em;
  word-spacing: 0.16em;
  line-height: 2;
}
html[data-a11y-spacing="1"] p { margin-bottom: 0.6em; }

html[data-a11y-links="1"] a:not(.btn) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}

html[data-a11y-images="1"] img,
html[data-a11y-images="1"] picture,
html[data-a11y-images="1"] video,
html[data-a11y-images="1"] .hero-bg,
html[data-a11y-images="1"] .footer-dog { visibility: hidden !important; }
html[data-a11y-images="1"] .hero-veil { background: var(--bark); }

html[data-a11y-cursor="1"], html[data-a11y-cursor="1"] * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cpath d='M6 3l26 16-11 2 6 12-5 3-6-12-8 7z' fill='%23000' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 4 2, auto !important;
}

html[data-a11y-motion="1"] *,
html[data-a11y-motion="1"] *::before,
html[data-a11y-motion="1"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

.reading-guide {
  position: fixed;
  left: 0; right: 0;
  height: 2.6rem;
  border-top: 3px solid var(--leaf);
  border-bottom: 3px solid var(--leaf);
  background: rgb(122 193 67 / .10);
  pointer-events: none;
  z-index: 125;
  display: none;
}
html[data-a11y-guide="1"] .reading-guide { display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------ 16. chatbot */

.chat-fab {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 130;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.15rem 0.75rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--leaf), var(--mint));
  color: #0C2109;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 16px 38px -14px rgb(51 183 140 / .8);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.chat-fab:hover { transform: translateY(-3px) scale(1.03); }
.chat-fab .dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: #17A34A; box-shadow: 0 0 0 3px rgb(23 163 74 / .25);
}

.chat-panel {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 135;
  width: min(94vw, 396px);
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  box-shadow: 0 40px 80px -30px rgb(var(--shadow-color) / .6);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility .28s;
}
.chat-panel[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

.chat-head {
  display: flex; align-items: center; gap: .75rem;
  padding: 0.9rem 1rem;
  background: linear-gradient(120deg, var(--leaf-deep), var(--mint-600, #229371));
  color: #fff;
}
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--bg);
  scroll-behavior: smooth;
}
.msg {
  max-width: 85%;
  padding: 0.7rem 0.9rem;
  border-radius: 1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  animation: bh-pop .3s var(--ease-out);
}
.msg-bot { align-self: flex-start; background: var(--bg-elev); border: 1px solid var(--line); border-bottom-left-radius: .3rem; }
.msg-user { align-self: flex-end; background: var(--leaf); color: #10240A; border-bottom-right-radius: .3rem; font-weight: 500; }
.msg a { color: var(--leaf-strong); text-decoration: underline; }
html.dark .msg-bot a { color: var(--leaf); }
.msg-user a { color: #10240A; }

.chat-typing { display: inline-flex; gap: .25rem; }
.chat-typing i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--fg-subtle); animation: bh-dots 1.2s infinite; }
.chat-typing i:nth-child(2) { animation-delay: .18s; }
.chat-typing i:nth-child(3) { animation-delay: .36s; }

.chat-chip {
  padding: .45rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  font-size: .8rem;
  cursor: pointer;
  transition: border-color .2s, color .2s, background-color .2s;
}
.chat-chip:hover { border-color: var(--leaf); color: var(--leaf-strong); background: var(--leaf-soft); }

/* ------------------------------------------------ 17. misc widgets */

.stars { display: inline-flex; gap: 1px; color: var(--gold); }

.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease-out);
}
.accordion[data-open="true"] .accordion-body { grid-template-rows: 1fr; }
.accordion-body > div { overflow: hidden; }
.accordion summary { list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }

.breadcrumb a:hover { color: var(--leaf-strong); text-decoration: underline; }

/* Over a photographic hero the default muted brown disappears. */
.breadcrumb-on-dark { color: rgb(255 255 255 / .72); }
.breadcrumb-on-dark a:hover { color: #fff; }
.breadcrumb-on-dark [aria-current="page"] { color: #fff; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  transform: translate(-50%, 1rem);
  z-index: 150;
  padding: .8rem 1.2rem;
  border-radius: 999px;
  background: var(--bark);
  color: #fff;
  font-size: .9rem;
  font-weight: 550;
  box-shadow: 0 20px 40px -18px rgb(0 0 0 / .6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, transform .3s var(--ease-out), visibility .3s;
}
.toast[data-open="true"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
html.dark .toast { background: #F4EEE4; color: #20160D; }

.video-facade {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.video-facade::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgb(18 12 7 / .55), rgb(18 12 7 / .12));
  transition: background-color .3s;
}
.video-facade:hover::after { background: linear-gradient(0deg, rgb(18 12 7 / .38), transparent); }
.video-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
}
.video-play span {
  width: 5.2rem; height: 5.2rem;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgb(255 255 255 / .92);
  color: var(--leaf-deep);
  box-shadow: 0 0 0 0 rgb(122 193 67 / .55);
  animation: bh-ping 2.6s ease-out infinite;
  transition: transform .3s var(--ease-out);
}
.video-facade:hover .video-play span { transform: scale(1.1); }
@keyframes bh-ping {
  0% { box-shadow: 0 0 0 0 rgb(122 193 67 / .6); }
  70% { box-shadow: 0 0 0 26px rgb(122 193 67 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(122 193 67 / 0); }
}

.leaf-blob {
  position: absolute;
  border-radius: 48% 52% 62% 38% / 44% 38% 62% 56%;
  filter: blur(46px);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}

/* ------------------------------------------------------- 18. print */

@media print {
  .site-header, .site-footer, .a11y-fab, .chat-fab, .chat-panel,
  .a11y-panel, .areas-strip, .scrim, .drawer, .toast { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; }
}