/* =============================================================================
   tokens.css — Design-system custom properties.
   MUST be first in the cascade; every other module consumes these variables.
   NO @import statements; this file is a concat input.
   ============================================================================= */

:root {

  /* --------------------------------------------------------------------------
     A5 PALETTE (20 named hues)
     Source of truth: ConceptA-v7.jsx A5 object.
     Rule: every color in the codebase traces back to exactly one palette entry
     at full opacity. Mixing two palette colors is prohibited.
     -------------------------------------------------------------------------- */
  --acai:        #241025;
  --chile:       #e81b46;
  --coral:       #f5875b;
  --curacao:     #9ee1ed;
  --fig:         #301531;
  --grape:       #a4509f;
  --guava:       #e63e62;
  --lemon:       #FDCD4F;
  --lime:        #a2bc3a;
  --mango:       #f9a127;
  --milk:        #FDFFF5;
  --paleblue:    #6acce0;
  --plum:        #b71f8e;
  --seagreen:    #2c9f93;
  --shamrock:    #04AA6D;
  --sizzurp:     #5e2a60;
  --skyblue:     #41c4dc;
  --snowcone:    #bfebf3;
  --tempranillo: #a31c37;
  --marshmallow: #f0eee4;

  /* --------------------------------------------------------------------------
     NON-PALETTE SUBSTRATE
     Not a chromatic hue; a warmth-adjusted neutral for the §06 shelf.
     -------------------------------------------------------------------------- */
  --shelf-bg: #e8e6e0;

  /* --------------------------------------------------------------------------
     OVERLAY TIERS (white-based transparency)
     Used for text overlays, card borders, rules, and drop shadows.
     -------------------------------------------------------------------------- */
  --overlay-muted:       rgba(255, 255, 255, 0.62);
  --overlay-faint:       rgba(255, 255, 255, 0.28);
  --overlay-rule:        rgba(255, 255, 255, 0.14);
  --overlay-rule-strong: rgba(255, 255, 255, 0.32);
  --overlay-backdrop:    rgba(36, 16, 37, 0.55);
  --overlay-inactive:    rgba(36, 16, 37, 0.18);   /* §06 progress inactive segment */

  /* --------------------------------------------------------------------------
     PAGE TOKENS
     --gutter: symmetric horizontal padding that scales from 20px (390) to 56px (1440).
     v7 target: 20px @390px → 56px @1440px. Formula: m = 36/1050 ≈ 3.429vw, b = 6.6px.
     Verification: 3.429%×390 + 6.6 ≈ 20px (floor); 3.429%×1440 + 6.6 ≈ 56px (cap).
     The prior formula `1.905vw + 12.571px` was incorrect — it only reached 56px at
     ~2280px, leaving desktop layouts ~16px too narrow at 1440px.
     -------------------------------------------------------------------------- */
  --page-bg:      var(--acai);
  --page-text:    var(--marshmallow);
  --max-content:  1440px;
  --gutter:       clamp(20px, calc(3.429vw + 6.6px), 56px);

  /* --------------------------------------------------------------------------
     TYPOGRAPHY ROLES
     --font-display: DIN Pro Condensed — all section headlines, kicker/italic tails
     --font-body:    Avenir — body copy, captions
     --font-ui:      DIN Pro — buttons, pill labels, kickers, closing §09 paragraphs
     --font-label:   Avenir — kickers, small labels (300-weight Avenir)
     -------------------------------------------------------------------------- */
  /* "DIN Pro Condensed Fallback" is the metrics-matched @font-face in typography.css
     (79% size-adjust on Arial Narrow). Inserting it here means every consumer of
     --font-display benefits from FOUT-suppression without needing explicit fallback
     chains in each rule. */
  --font-display: "DIN Pro Condensed", "DIN Pro Condensed Fallback", "DIN Pro", -apple-system, system-ui, sans-serif;
  --font-body:    "Avenir", "DIN Pro", -apple-system, system-ui, sans-serif;
  --font-ui:      "DIN Pro", -apple-system, system-ui, sans-serif;
  --font-label:   "Avenir", "DIN Pro", system-ui, sans-serif;

  /* --------------------------------------------------------------------------
     BORDER RADII
     -------------------------------------------------------------------------- */
  --radius-pill:         999px;
  --radius-card:         28px;
  --radius-card-mobile:  22px;
  --radius-panel:        36px;
  --radius-photo:        24px;
  --radius-photo-sm:     20px;
  --radius-example:      4px;
  --radius-capability:   22px;

  /* --------------------------------------------------------------------------
     TRANSITIONS
     -------------------------------------------------------------------------- */
  --transition-ui:       0.18s ease;
  --transition-carousel: 0.35s ease;

  /* --------------------------------------------------------------------------
     §09 FIELD — CSS radial-gradient, right-anchored (v3, on-grid proof).
     Field: background-image:radial-gradient(circle, var(--skyblue) 46px, transparent 47px)
       + background-size:104px 104px + background-position:top right.
     Dot center formula (from right edge): right − (52 + n×104), n = 0, 1, 2, …
     Pair: two CSS divs, position:absolute, right-anchored.
       sizzurp (n=2): right:214px → center = right − 260 = right − (52 + 2×104). ✓
       chile   (n=3): right:318px → center = right − 364 = right − (52 + 3×104). ✓
     Offset between pair centers and field dot centers = 0 at ALL widths.

     Rejected (v2): SVG <pattern> left-anchored (cx=52 from x=0) + right-pinned
     SVG pair overlay. Field centers = 52 + n×104 from left; pair centers =
     W − 52 and W − 156. Coincide only when W mod 104 = 0. At W=1024: 16–56px
     off-grid, causing visible dot collisions with neighboring field dots.

     Rejected (v1): two-layer composite — linear-scaled SVG band + clamped CSS
     gradient — diverged at all widths ≠ 1440px (≈16px cell mismatch at 1024px),
     producing the visible seam. Architecture replaced.

     No tokens drive the field — the constants 104/46/47 live directly in sections.css.
     Removed tokens (fed the retired v1 CSS gradient):
       --s09-cell       clamp(68px, calc(3.43vw + 54.6px), 104px)
       --s09-dot-radius calc(var(--s09-cell) * 46 / 104)
       --s09-dot-stop   calc(var(--s09-cell) * 47 / 104)
     -------------------------------------------------------------------------- */

}
/* Reset from https://piccalil.li/blog/a-modern-css-reset/ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
/* body intentionally omits height:100% — the sticky-footer flex shell in layout.css
   governs body height via min-height:100dvh only. A definite height:100% on body
   gives the flex container a concrete one-viewport height; on long pages the --acai
   background extends ~1 viewport below the footer (the "footer void" bug). */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
/* =============================================================================
   typography.css — @font-face registrations + body defaults.
   NO @import statements; this file is a concat input.

   All font paths are ../fonts/… relative to this file's location (www/css/),
   which resolves correctly whether served directly or from styles.min.css
   in the same directory.

   Strategy: single family names with numeric weights + real italic faces.
   Avoids synthesized bold/italic which looks mushy at large display sizes.
   ============================================================================= */

/* --------------------------------------------------------------------------
   DIN Pro Condensed — display headlines, kicker italic tails
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "DIN Pro Condensed";
  src: url("../fonts/DINPro/DINPro-CondensedLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro Condensed";
  src: url("../fonts/DINPro/DINPro-CondensedLightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro Condensed";
  src: url("../fonts/DINPro/DINPro-CondensedRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro Condensed";
  src: url("../fonts/DINPro/DINPro-CondensedItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro Condensed";
  src: url("../fonts/DINPro/DINPro-CondensedMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro Condensed";
  src: url("../fonts/DINPro/DINPro-CondensedMediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro Condensed";
  src: url("../fonts/DINPro/DINPro-CondensedBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro Condensed";
  src: url("../fonts/DINPro/DINPro-CondensedBoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro Condensed";
  src: url("../fonts/DINPro/DINPro-CondensedBlack.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro Condensed";
  src: url("../fonts/DINPro/DINPro-CondensedBlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   DIN Pro (regular width) — UI labels, buttons, §09 closing paragraphs
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/DINPro/DINPro-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/DINPro/DINPro-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/DINPro/DINPro.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/DINPro/DINPro-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/DINPro/DINPro-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/DINPro/DINPro-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/DINPro/DINPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/DINPro/DINPro-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/DINPro/DINPro-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/DINPro/DINPro-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Avenir — body copy (Light 300 only; the only Avenir face on disk)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Avenir";
  src: url("../fonts/Avenir/Avenir-Light.woff2") format("woff2"),
       url("../fonts/Avenir/Avenir-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   CLS mitigation: metrics-matched fallback for DIN Pro Condensed.
   size-adjust ~79% on Arial Narrow narrows the fallback cap-height + advance
   widths close to DINPro-CondensedBlack at 900 weight, eliminating the FOUT
   layout shift while the real font loads. One fallback face (the above-fold
   display family) is sufficient; body Avenir is secondary to page metrics.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "DIN Pro Condensed Fallback";
  src: local("Arial Narrow"), local("Arial");
  font-weight: 900;
  font-style: normal;
  size-adjust: 79%;
  ascent-override: 95%;
  descent-override: 22%;
}

/* --------------------------------------------------------------------------
   Body defaults
   Headings default to display family; specific sections override weight/color.
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.5;
  color: var(--page-text);
  background-color: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings: display stack. The --font-display token already includes
   "DIN Pro Condensed Fallback" (metrics-matched, 79% size-adjust on Arial Narrow)
   so FOUT CLS is suppressed for all elements using var(--font-display).
   Weight 500 matches the most-common section headline weight (§02–§08).
   Sections that need 900 override locally. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 0.9;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* =============================================================================
   layout.css — Page frame, container, nav header, nav overlay, shared layout.
   NO @import statements; this file is a concat input.
   ============================================================================= */

/* --------------------------------------------------------------------------
   Page frame
   -------------------------------------------------------------------------- */

html {
  height: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Reduced-motion override for scroll is in animations.css (cascades last) */

body {
  min-height: 100vh;    /* fallback: Safari < 15.4 and old Chromium/Firefox */
  min-height: 100dvh;   /* preferred: tracks the dynamic viewport (retracting URL bar) */
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Sticky-footer spacer — <main> absorbs the remaining height between the
   sticky #site-nav and #site-footer so the footer always sits flush at the
   bottom of content (or the bottom of the viewport on short pages).
   Without this rule the acai body background paints below the footer
   whenever document height < 100dvh (the footer-void bug). */
main {
  flex: 1 0 auto;
}

/* --------------------------------------------------------------------------
   Container — max-content-width centering with fluid gutters.
   Used inside sections that need the page-standard horizontal padding.
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   NAV — hamburger-only header (logo + toggle button).
   Spec: padding 22px 56px at 1440 (= var(--gutter)), acai bg.
   Border: none (v7 spec: clean hard edge between nav and hero).
   -------------------------------------------------------------------------- */

#site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--acai);
  /* No border-bottom — v7 spec: seam between nav and hero is a clean hard edge */
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 22px;
  padding-inline: var(--gutter);
  max-width: var(--max-content);
  margin-inline: auto;
}

.nav-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo {
  height: 38px;
  width: auto;
  display: block;
  /* White logo on acai bg — invert the brand-colored WebP */
  filter: brightness(0) invert(1);
}

/* Hamburger button — circular pill per v7 artboard (52×52px, rule-strong border) */
.nav-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-width: 44px;  /* 44px a11y floor; button is 52px so this is a safety net */
  border-radius: var(--radius-pill);
  border: 1px solid var(--overlay-rule-strong);
  background: transparent;
  cursor: pointer;
  color: var(--marshmallow);
  transition: border-color var(--transition-ui), background-color var(--transition-ui);
  flex-shrink: 0;
}

.nav-hamburger:hover {
  border-color: var(--overlay-muted);
  background-color: rgba(255, 255, 255, 0.06);
}

.nav-hamburger:focus-visible {
  outline: 2px solid var(--skyblue);
  outline-offset: 3px;
}

/* The two horizontal bars inside the hamburger */
.nav-hamburger-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
}

.nav-hamburger-bar {
  display: block;
  width: 20px;
  height: 1.5px;
  background-color: var(--marshmallow);
  border-radius: 1px;
}

/* --------------------------------------------------------------------------
   NAV OVERLAY — full-panel right-slide navigation (folded into layout.css).
   Spec: fig background, translateX(100%)→(0) on .is-open, z-index 1000.
   Backdrop is a separate fixed element that covers the page content.
   JS contract: #nav-overlay, .nav-backdrop, .nav-overlay-close, .nav-overlay-link
   -------------------------------------------------------------------------- */

/* Backdrop — covers page, click-target for dismissal */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--overlay-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease-out;
}

.nav-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Overlay panel */
#nav-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  z-index: 1000;
  background-color: var(--fig);
  display: flex;
  flex-direction: column;
  padding: 32px 40px 48px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s ease-out;
  /* border-left subtle rule */
  border-left: 1px solid var(--overlay-rule);
}

#nav-overlay.is-open {
  transform: translateX(0);
}

/* Close button — first focusable element in overlay (focus trap anchor) */
.nav-overlay-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  align-self: flex-end;
  border-radius: var(--radius-pill);
  border: 1px solid var(--overlay-rule-strong);
  background: transparent;
  color: var(--marshmallow);
  cursor: pointer;
  margin-bottom: 40px;
  flex-shrink: 0;
  transition: background-color var(--transition-ui), border-color var(--transition-ui);
}

.nav-overlay-close:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--overlay-muted);
}

.nav-overlay-close:focus-visible {
  outline: 2px solid var(--skyblue);
  outline-offset: 3px;
}

/* Close icon SVG inside button */
.nav-overlay-close svg {
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* Nav list */
.nav-overlay-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.nav-overlay-link {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 3.5vw, 28px);
  line-height: 1.1;
  color: var(--marshmallow);
  text-decoration: none;
  padding: 10px 0;
  letter-spacing: -0.02em;
  transition: color var(--transition-ui);
}

.nav-overlay-link:hover {
  color: var(--lemon);
}

.nav-overlay-link:focus-visible {
  outline: 2px solid var(--skyblue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Phone number link — slightly smaller, different weight */
.nav-overlay-tel {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(16px, 2vw, 18px);
  letter-spacing: 0.04em;
  color: var(--overlay-muted);
  margin-top: 24px;
}

.nav-overlay-tel:hover {
  color: var(--marshmallow);
}

/* --------------------------------------------------------------------------
   PILL component — base + modifiers.
   Used across §02, §04, §07, §08, §09. Min 44px touch target.
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: none;
  min-height: 44px;  /* 44px a11y touch target floor */
  transition: opacity var(--transition-ui);
  white-space: nowrap;
}

.pill:hover {
  opacity: 0.88;
}

.pill:focus-visible {
  outline: 2px solid var(--skyblue);
  outline-offset: 3px;
}

/* §02, §09 mobile: marshmallow bg + acai ink */
.pill--marshmallow {
  background-color: var(--marshmallow);
  color: var(--acai);
  /* F4: v7 A5Selective specifies padding 16px 26px (base pill is 14px 22px — 2px/4px short). */
  padding: 16px 26px;
}

/* §08: snowcone bg + fig text */
.pill--snowcone {
  background-color: var(--snowcone);
  color: var(--fig);
  font-size: 16px;
  /* F4: v7 A5Fractional specifies padding 20px 30px (was 18px 28px — 2px short on both axes). */
  padding: 20px 30px;
}

/* §09 desktop: sizzurp bg + marshmallow text */
.pill--sizzurp {
  background-color: var(--sizzurp);
  color: var(--marshmallow);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 18px 28px;
}

/* §04 ghost pill rows: semi-transparent border, marshmallow text */
.pill--ghost {
  background-color: transparent;
  color: var(--marshmallow);
  border: 1px solid var(--overlay-rule-strong);
  font-size: 13px;
}

/* Product card white CTA (§07) */
.pill--white-on-card {
  background-color: var(--milk);
  font-size: 15px;
  font-weight: 600;
  padding: 16px 24px;
}

/* F-I + F-J: Mobile nav — logo height and nav padding at ≤640px.
   v7 A5MobileNav (line 1163): logo height 28px (desktop: 38px).
   v7 A5MobileNav (line 1161): padding 18px 20px — block reduced from 22px to 18px.
   Inline padding left as-is (var(--gutter) already resolves to ≈20px at mobile widths). */
@media (max-width: 640px) {
  .nav-logo {
    height: 28px;   /* v7 mobile: 28px (desktop: 38px) */
  }

  .nav-inner {
    padding-block: 18px;   /* v7 mobile: 18px (desktop: 22px) */
  }
}

/* F1: §07 mobile CTA pill — full-width, wrapping label, arrow pinned right.
   v7 A5MobileProductCard (lines 1359–1375): width:100%, justifyContent:space-between,
   label in flex:1 1 auto / minWidth:0 span (wraps freely), arrow flex:0 0 auto.
   Base .pill has white-space:nowrap which clips long labels at mobile — override here.
   Scope: ≤900px (raised from 680px per FIX 5 / breakpoint-sweep-2 — at 681–880px
   the shelf is still 2-up but cards are 300–400px wide, too narrow for the nowrap
   CTA pill. Raising to 900px matches the carousel.css and sections.css breakpoints
   so the full §07 mobile treatment fires in sync). */
@media (max-width: 900px) {
  .s07-card-cta {
    width: 100%;
    white-space: normal;
    justify-content: space-between;
    line-height: 1.22;
    letter-spacing: -0.005em;
    box-sizing: border-box;
    font-weight: 700;
    font-size: 14.5px;
  }

  /* Label span — shrinks freely, wraps across as many lines as needed */
  .s07-card-cta .s07-cta-label {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Arrow span — pinned right, never shrinks, never wraps */
  .s07-card-cta > span[aria-hidden] {
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
  }
}

/* --------------------------------------------------------------------------
   KICKER — small uppercase label above headlines.
   Used across all sections. Font: --font-label (Avenir 300).
   -------------------------------------------------------------------------- */

.kicker {
  font-family: var(--font-label);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Visually-hidden helper — accessible text available to screen readers,
   invisible to sighted users. Used for structural headings (§05 mosaic h2).
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* =============================================================================
   sections.css — §01 hero through §09 + footer.
   NO @import statements; this file is a concat input.
   All fidelity bindings per wave5-final-v2-redesign-implementation-plan.md.
   ============================================================================= */

/* --------------------------------------------------------------------------
   §01 HERO — inline retokened SVG, full-width on acai background.
   The SVG fills its container; MATTER. text is live inside the SVG.
   -------------------------------------------------------------------------- */

#s01-hero {
  background-color: var(--acai);
  /* No padding — the SVG itself carries the geometry */
}

.hero-svg-wrap {
  display: block;
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
}

/* Inline SVG fills container width, height proportional */
#s01-hero svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   §02 — What Wins Today.
   Layout: 1.15fr / 0.85fr grid at desktop. Reflows to single column ≤660px.
   Headline: 132px desktop clamp endpoint (DISTINCT from §07 124px).
   Italic tail: --lemon.
   -------------------------------------------------------------------------- */

#s02 {
  background-color: var(--acai);
  padding-block: clamp(56px, calc(6.857vw + 29.3px), 120px) clamp(48px, calc(5.143vw + 28px), 96px);
  padding-inline: var(--gutter);
}

.s02-kicker {
  color: var(--chile);
  margin-bottom: clamp(18px, 2.5vw, 36px);
}

.s02-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 5.333vw, 80px);
  align-items: start;
}

.s02-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, calc(7.238vw + 27.7px), 132px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--marshmallow);
  margin: 0 0 36px;
  text-wrap: pretty;
}

.s02-headline em {
  font-style: italic;
  font-weight: 700;
  color: var(--lemon);
}

.s02-body-col {
  padding-top: clamp(4px, 0.8vw, 12px);
}

.s02-body-primary {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.333vw, 20px);
  line-height: 1.55;
  color: var(--marshmallow);
  margin: 0;
  text-wrap: pretty;
}

.s02-body-primary .s02-accent {
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--lemon);
}

.s02-body-secondary {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.333vw, 20px);
  line-height: 1.55;
  color: var(--overlay-muted);
  margin-top: 22px;
  text-wrap: pretty;
}

/* §02 reflow threshold: stacks at ≤660px */
@media (max-width: 660px) {
  .s02-grid {
    grid-template-columns: 1fr;
  }

  .s02-body-col {
    padding-top: 0;
  }
}

/* --------------------------------------------------------------------------
   §03 — What it actually means.
   Background: --fig. Three-up card grid; sizzurp card bg; dot swatches.
   Headline: 108px desktop. Italic tail: --mango. Card radius: 28px / 22px mobile.
   Swatch dots: card 01 --guava, card 02 --plum, card 03 --grape.
   -------------------------------------------------------------------------- */

#s03 {
  background-color: var(--fig);
  /* FIX 3 (MED): bumped clamp min from 48px → 64px so the dark fig floor above/below
     the card row reads as generous breathing room at all viewport widths, matching
     v7's ~120px symmetric padding at desktop and ~60–80px minimum at tablet.
     Max stays 120px (matches A5ThreeMatter padding:'120px 56px'). */
  padding-block: clamp(64px, 6.667vw, 120px);
  padding-inline: var(--gutter);
  border-top: 1px solid var(--overlay-rule);
  border-bottom: 1px solid var(--overlay-rule);
}

.s03-kicker {
  color: var(--chile);
  margin-bottom: clamp(28px, 3.889vw, 56px);
}

.s03-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, calc(5.905vw + 25px), 108px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--marshmallow);
  /* FIX 3 (MED): bumped margin-bottom min from 28px → 48px to ensure the
     headline→card-row gap reads as 60–80px of fig floor at tablet widths.
     Max stays 64px (matches A5ThreeMatter h2 margin:'0 0 64px'). */
  margin: 0 0 clamp(48px, 4.444vw, 64px);
  text-wrap: pretty;
  max-width: 1200px;
}

.s03-headline em {
  font-style: italic;
  font-weight: 700;
  color: var(--mango);
}

/* Three-up card grid — fixed 3 columns above 820px, 1-column below.
   auto-fit was rejected: with exactly 3 cards it collapses to 2+1 across the
   ~640–940px range (the third card strands alone at half-width in the lower-left),
   because 3×280px + gaps exceeds the section inner width at those viewports.
   fixed repeat(3,1fr) forces 3-up at all desktop/wide-tablet widths; the
   hard 820px → 1fr cliff skips the broken 2+1 state entirely. */
.s03-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 820px) {
  .s03-grid {
    grid-template-columns: 1fr;
  }
}

.s03-card {
  background-color: var(--sizzurp);
  border-radius: var(--radius-card);
  padding: 36px 32px 32px;
  border: 1px solid var(--overlay-rule);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.s03-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Color swatch dot — unique color per card via data-swatch modifier classes */
.s03-swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.s03-swatch--guava  { background-color: var(--guava); }
.s03-swatch--plum   { background-color: var(--plum); }
.s03-swatch--grape  { background-color: var(--grape); }

.s03-card-kicker {
  color: var(--overlay-muted);
}

.s03-card-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 3.619vw, 52px);
  line-height: 0.98;
  color: var(--marshmallow);
  letter-spacing: -0.02em;
  margin: 0;
  /* FIX 1 (HIGH): v7 renders the card headline as one line — upright word + italic
     colored tail on the same baseline (e.g. "Strategy matters."). The build was
     breaking the tail to a second line because DIN Pro Condensed at 52px in a
     ~430px card column sits at the wrap threshold. white-space:nowrap locks the
     entire phrase to one baseline, matching the single-line two-tone treatment.
     The <em> is already display:inline (UA default); the explicit rule below
     reinforces that against any cascade regression. Card body <p> is a separate
     element and is wholly unaffected by this rule. */
  white-space: nowrap;
}

/* Per-card italic tail colors */
.s03-card:nth-child(1) .s03-card-headline em { color: var(--guava); }
.s03-card:nth-child(2) .s03-card-headline em { color: var(--plum); }
.s03-card:nth-child(3) .s03-card-headline em { color: var(--grape); }

.s03-card-headline em {
  font-style: italic;
  font-weight: 700;
  /* Reinforce inline flow — prevents any future cascade from blockifying the
     colored tail and breaking the single-line two-tone phrase (FIX 1). */
  display: inline;
}

.s03-card-body {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.048vw, 15.5px);
  line-height: 1.55;
  color: var(--marshmallow);
  opacity: 0.85;
  margin: 0;
}

/* Mobile: smaller card radius per spec */
@media (max-width: 500px) {
  .s03-card {
    border-radius: var(--radius-card-mobile);
    padding: 22px 22px;
  }
}

/* --------------------------------------------------------------------------
   §04 — What Builds Moats.
   Service rows: 88px / 1fr / photo grid. Photo track fluid: minmax(0, clamp(300px, 32vw, 460px)).
   Reflows at ≤760px: photo becomes full-width stacked below text.
   Accent dots: row 1 --chile, row 2 --mango, row 3 --skyblue.
   Italic tail: --skyblue. Service titles: 700 italic.
   -------------------------------------------------------------------------- */

#s04 {
  background-color: var(--acai);
  padding-block: clamp(56px, 6.667vw, 120px) clamp(40px, 5.333vw, 80px);
  padding-inline: var(--gutter);
}

.s04-kicker {
  color: var(--overlay-muted);
  margin-bottom: clamp(14px, 2.5vw, 36px);
}

.s04-headline {
  font-family: var(--font-display);
  font-weight: 500;
  /* §04 uses 96px desktop, not 132 or 124 — its own distinct size */
  font-size: clamp(48px, calc(4.571vw + 30.3px), 96px);
  letter-spacing: -0.03em;
  line-height: 0.94;
  color: var(--marshmallow);
  margin: 0 0 clamp(28px, 3.333vw, 48px);
  max-width: 1280px;
}

.s04-headline em {
  font-style: italic;
  font-weight: 700;
  color: var(--skyblue);
}

/* Service row: 88px counter / 1fr text / fluid photo */
.s04-row {
  display: grid;
  grid-template-columns: 88px 1fr minmax(0, clamp(300px, 32vw, 460px));
  gap: 40px;
  align-items: center;
  padding-block: 32px;
  border-top: 1px solid var(--overlay-rule);
}

.s04-row-counter {
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--overlay-muted);
  letter-spacing: 0.16em;
}

.s04-row-kicker-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* Accent dot per row */
.s04-accent-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.s04-accent-dot--chile   { background-color: var(--chile); }
.s04-accent-dot--mango   { background-color: var(--mango); }
.s04-accent-dot--skyblue { background-color: var(--skyblue); }

.s04-row-kicker {
  color: var(--marshmallow);
}

.s04-row-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(32px, 3.81vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--marshmallow);
  margin: 0;
}

.s04-row-body {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.048vw, 16px);
  line-height: 1.55;
  color: var(--marshmallow);
  opacity: 0.85;
  margin-top: 18px;
  max-width: 560px;
}

/* s04-row-content spans the middle column; counter and photo are cols 1 and 3 */
.s04-row-content {
  /* Default flow: auto placement in col 2 is correct */
}

.s04-row-photo {
  border-radius: var(--radius-photo);
  overflow: hidden;
  width: 100%;
  /* Aspect ratio roughly matches the artboard 240px height at 460px width */
  aspect-ratio: 460 / 240;
}

.s04-row-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Reflow ≤760px: collapse to single column; photo becomes full-width */
@media (max-width: 760px) {
  .s04-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .s04-row-counter {
    display: none; /* condensed layout; counter info redundant in kicker */
  }

  .s04-row-photo {
    order: -1;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-photo-sm);
  }
}

/* --------------------------------------------------------------------------
   §05 — How the work compounds.
   2×2 mosaic framed in --fig (6px seams). Photos use background-size:cover.
   Accent blocks: mango + seagreen. Rules under: plum (mango), lime (seagreen).
   Background: --fig outer. Reflows ≤560px to single column.
   -------------------------------------------------------------------------- */

#s05 {
  background-color: var(--fig);
  padding-block: clamp(24px, 2.667vw, 40px) 0;
  /* F3: v7 A5Promise specifies 24px outer horizontal inset, not the global --gutter (56px@1440).
     These inset-panel sections float as contained cards; --gutter makes the inset read too wide. */
  padding-inline: 24px;
}

.s05-kicker {
  color: var(--overlay-muted);
  margin-bottom: clamp(14px, 1.944vw, 28px);
}

/* The 2×2 mosaic — fig bg shows as 6px seams between the four cells */
.s05-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: var(--fig);
  gap: 6px;
  padding: 6px;
}

/* Photo cells — use background-image/cover (no <img>) for art-direction control */
.s05-photo {
  background-size: cover;
  background-position: center;
  min-height: clamp(220px, 25vw, 360px);
}

.s05-photo--strategy {
  background-image: url("../img/pair-strategy-process-outcomes.webp");
}

.s05-photo--pilot {
  background-image: url("../img/pair-pilot-analysis-optimization.webp");
}

/* Accent copy blocks */
.s05-block {
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  min-height: clamp(220px, 25vw, 360px);
}

.s05-block--mango   { background-color: var(--mango); }
.s05-block--seagreen { background-color: var(--seagreen); }

.s05-block-title {
  font-family: var(--font-display);
  color: var(--milk);
  font-size: clamp(22px, 2.667vw, 38px);
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.05;
}

/* Accent rule under title — plum under mango, lime under seagreen */
.s05-block-rule {
  width: 72px;
  height: 3px;
  flex-shrink: 0;
}

.s05-block--mango   .s05-block-rule { background-color: var(--plum); }
.s05-block--seagreen .s05-block-rule { background-color: var(--lime); }

.s05-block-body {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(14px, 1.143vw, 17px);
  line-height: 1.55;
  margin: 0;
  max-width: 500px;
  text-wrap: pretty;
}

/* Reflow ≤620px — stack vertically: photo / orange / teal / photo.
   Raised from 560px (FIX C / breakpoint-sweep-2): in the 561–620px band the
   two-column layout stays active but each column is only ~275–305px wide. After
   the mango block's 64px×2 horizontal padding only ~145–175px of text width
   remains, causing the copy to wrap to enough lines that its content height
   exceeds the photo-driven row height and clips at the cell bottom. The 619px
   capture confirmed the two-column layout only barely fits; raising to 620px
   eliminates that entire failure band. Single-column reflow is the correct
   constraint-first response when the column is too narrow for the block padding.
   Keep background-size:cover; DO NOT switch to align-items:start (exposes fig seams). */
@media (max-width: 620px) {
  .s05-mosaic {
    grid-template-columns: 1fr;
  }

  .s05-block {
    padding: 28px 24px;
  }

  /* Reorder cells: photo | mango | seagreen | photo */
  .s05-photo--strategy  { order: 1; }
  .s05-block--mango     { order: 2; }
  .s05-block--seagreen  { order: 3; }
  .s05-photo--pilot     { order: 4; }
}

/* --------------------------------------------------------------------------
   §06 — Selected Examples (carousel host). See carousel.css for track/cards.
   Background: --shelf-bg (#e8e6e0). Light section.
   -------------------------------------------------------------------------- */

#s06 {
  background-color: var(--shelf-bg);
  /* +8px block padding absorbs rotated-card corner bleed (spec §7 risk table) */
  padding-top:    calc(clamp(36px, 4.444vw, 64px) + 8px);
  padding-bottom: calc(clamp(44px, 5vw, 72px) + 8px);
  padding-inline: var(--gutter);
  /* overflow-x on #s06 clips horizontal bleed at section edges;
     overflow-y visible allows tilt corner to show above/below — handled by
     the +8px block padding. Nesting: .s06-track-viewport clips lateral
     translateX travel without clipping tilt corners. */
  overflow-x: hidden;
  overflow-y: visible;
}

.s06-label {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: clamp(11px, 0.903vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(36, 16, 37, 0.55);
  text-align: center;
  margin-bottom: clamp(22px, 2.778vw, 40px);
}

/* --------------------------------------------------------------------------
   §07 — What we build for ourselves.
   Background: --fig outer with 24px inset panel, radius 36.
   Headline: 124px desktop (DISTINCT from §02 132px — do not conflate).
   Italic tail + kicker color: --lemon.
   -------------------------------------------------------------------------- */

#s07 {
  /* Spec: --fig outer (the inset-panel effect is created by the padding gap between
     the fig outer and the fig panel inside — the panel's border provides the visual edge).
     F3: v7 A5WeBuild uses margin:40px 24px 24px — 24px horizontal inset, not --gutter (56px@1440). */
  background-color: var(--fig);
  padding: 40px 24px 24px;
}

.s07-panel {
  background-color: var(--fig);
  border-radius: var(--radius-panel);
  padding: 56px clamp(24px, 2.778vw, 40px) 48px;
  border: 1px solid var(--overlay-rule);
}

.s07-kicker {
  color: var(--lemon);
  margin-bottom: 22px;
}

/* §07 manifesto grid — 1.15fr / 0.85fr like §02 */
.s07-manifesto {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 4.444vw, 64px);
  align-items: end;
  margin-bottom: 44px;
  padding-inline: 16px;
}

.s07-headline {
  font-family: var(--font-display);
  font-weight: 500;
  /* 124px desktop — explicitly different from §02 132px */
  font-size: clamp(50px, calc(7.048vw + 22.5px), 124px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--milk);
  margin: 0;
  text-wrap: pretty;
}

.s07-headline em {
  font-style: italic;
  font-weight: 700;
  color: var(--lemon);
}

.s07-body {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.238vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 460px;
  text-wrap: pretty;
  padding-bottom: 10px;
}

/* §07 manifesto reflow ≤760px */
@media (max-width: 760px) {
  .s07-manifesto {
    grid-template-columns: 1fr;
    padding-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   §07 Product Cards — shamrock (Radial One) + tempranillo (GrowSure).
   Carousel structure present but inert at 2 products (shelf.js no-ops).
   -------------------------------------------------------------------------- */

/* See carousel.css for shelf viewport + track geometry */

.s07-product-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--milk);
}

/* Product photo hero.
   Layer order (bottom → top):
     0 — brand-color background fill (fallback if photo fails to load)
     1 — hero <img> (object-fit:cover, z-index:0) — visible at top of card
     2 — ::after gradient (z-index:1) — transparent 0–45%, fades to brand color 45–100%
         so the bottom of the photo blends seamlessly into the content area
     3 — status pill + logo (z-index:2) — float above gradient
   The <img> must NOT carry z-index:-1; that was the bug causing photos to hide
   behind the brand-color background fill. */
.s07-card-photo {
  height: 320px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Brand-color fill is the baseline — visible only if photo fails to load */
[data-bg="var(--shamrock)"]    .s07-card-photo { background-color: var(--shamrock); }
[data-bg="var(--tempranillo)"] .s07-card-photo { background-color: var(--tempranillo); }

/* Gradient fade ::after — sits ABOVE the photo (z-index:1), BELOW the pill/logo (z-index:2).
   Per v7 A5ProductCard: transparent 35% → brand-color 80 92% → brand-color solid 100%.
   transparent stop WAS 45%; changed to 35% to match v7 render where the fade initiates
   ~35% from the bottom of the photo zone (earlier onset = more of the photo fades into
   the card color, matching the v7 desktop reference). The 92% and 100% stops are unchanged.
   Hardcoded brand colors because CSS custom properties can't be interpolated inside
   color stops with alpha without color-mix; the two values are stable tokens. */
[data-bg="var(--shamrock)"]    .s07-card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(4, 170, 109, 0.8) 92%, #04AA6D 100%);  /* transparent WAS 45% */
  z-index: 1;
  pointer-events: none;
}

[data-bg="var(--tempranillo)"] .s07-card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(163, 28, 55, 0.8) 92%, #a31c37 100%);  /* transparent WAS 45% */
  z-index: 1;
  pointer-events: none;
}

/* Status pill — top-left overlay. z-index:2 keeps it above the ::after gradient (z:1). */
.s07-status-pill {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--milk);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Status indicator dot — lime (live) vs lemon (in-dev) */
.s07-status-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.s07-status-dot--live {
  background-color: var(--lime);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 20%, transparent);
}

.s07-status-dot--dev {
  background-color: var(--lemon);
  /* no glow for in-dev status */
}

/* Logo — top-right overlay. z-index:2 keeps it above the ::after gradient (z:1).
   height:28px is the primary size lever; width:auto preserves aspect ratio (no squish).
   max-width:160px is a safety cap only — it activates only when auto-width would exceed
   160px (e.g. GrowSure's wide horizontal wordmark at large display sizes). When both
   height and max-width are set with width:auto, the browser resolves width by aspect ratio
   first and only clamps it at max-width — the height constraint is never overridden,
   so the image scales proportionally down to fit whichever limit triggers first. */
.s07-card-logo {
  position: absolute;
  top: 22px;
  right: 26px;
  z-index: 2;
  height: 28px;        /* WAS 44px. v7 render: ~18–20px tall. 28px matches credential weight. */
  max-width: 160px;    /* Cap for wide wordmarks (GrowSure). height stays primary lever. */
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));
}

/* Card content area */
.s07-card-content {
  padding: 8px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.s07-card-kicker {
  opacity: 0.78;
}

.s07-card-tagline {
  font-family: var(--font-ui);
  font-size: clamp(17px, 1.524vw, 22px);
  line-height: 1.25;
  color: var(--milk);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.s07-card-body {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.048vw, 15px);
  line-height: 1.55;
  color: var(--milk);
  opacity: 0.85;
  margin: 0;
  text-wrap: pretty;
}

.s07-card-cta {
  margin-top: auto;
  /* Desktop: prevent flex column's default align-items:stretch from blockifying the
     inline-flex pill. align-self:flex-start makes it hug its content and sit left,
     with the arrow immediately after the label (gap:10px from base .pill handles spacing).
     Mobile override (layout.css @media max-width:640px) sets width:100% explicitly,
     which overrides the flex-start sizing and keeps the full-width label-left/arrow-right
     treatment that matches the v7 mobile render. */
  align-self: flex-start;
  /* Color is white-on-card-bg; background set by .pill--white-on-card in layout.css */
}

/* Card background colors */
[data-bg="var(--shamrock)"]    { background-color: var(--shamrock); }
[data-bg="var(--tempranillo)"] { background-color: var(--tempranillo); }

/* pill--white-on-card: card bg color for text (set via custom property) */
[data-bg="var(--shamrock)"]    .pill--white-on-card { color: var(--shamrock); }
[data-bg="var(--tempranillo)"] .pill--white-on-card { color: var(--tempranillo); }

/* F6: dead --photo-url / --card-bg background-image layers removed.
   The gradient fade is now a ::after pseudo-element above the <img> hero.
   See .s07-card-photo::after rules above. */

/* Mobile card radius */
@media (max-width: 500px) {
  .s07-product-card {
    border-radius: var(--radius-card-mobile);
  }
}

/* --------------------------------------------------------------------------
   §08 — Turnkey Executive.
   Background: --fig outer + --plum inner block (radius 36).
   Headline: 128px desktop (its own distinct endpoint).
   Italic tail: --snowcone.
   Capability headers: Brand --tempranillo, Marketing --sizzurp, Web --fig.
   CTA: snowcone bg + fig text (pill--snowcone).
   -------------------------------------------------------------------------- */

#s08 {
  background-color: var(--fig);
  /* F3: v7 A5Fractional uses padding:24px 24px 24px — 24px all sides, not --gutter (56px@1440). */
  padding: 24px;
}

.s08-panel {
  background-color: var(--plum);
  border-radius: var(--radius-panel);
  padding: clamp(32px, 4.444vw, 64px) clamp(24px, 4.444vw, 64px) clamp(36px, 5vw, 72px);
  color: var(--milk);
}

.s08-kicker {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 36px;
  display: block;
}

.s08-headline {
  font-family: var(--font-display);
  font-weight: 500;
  /* 128px desktop — its own distinct endpoint */
  font-size: clamp(54px, calc(6.857vw + 26.7px), 128px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--milk);
  margin: 0;
  max-width: 1180px;
}

.s08-headline em {
  font-style: italic;
  font-weight: 700;
  color: var(--snowcone);
}

.s08-supertitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(13px, 1.524vw, 22px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 26px;
  max-width: 880px;
}

/* Three-column body */
.s08-body-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.889vw, 56px);
  margin-top: clamp(28px, 3.889vw, 56px);
  padding-top: clamp(20px, 2.778vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.s08-body-col-label {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--snowcone);
  font-weight: 600;
  margin-bottom: 14px;
  /* FIX 5 (MED): v7 A5Fractional renders these labels in sentence case —
     "01 · The access", "02 · The deployment", "03 · The shape".
     The .kicker base class (layout.css) applies text-transform:uppercase which
     was promoting them to "01 · THE ACCESS". Override to none to restore
     the v7 sentence-case treatment. */
  text-transform: none;
}

.s08-body-col-text {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.238vw, 18px);
  line-height: 1.55;
  color: var(--milk);
  margin: 0;
  text-wrap: pretty;
}

/* Auto-reflow ≤680px */
@media (max-width: 680px) {
  .s08-body-cols {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Capabilities rail divider */
.s08-capabilities-rail {
  margin-top: clamp(36px, 5vw, 72px);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.s08-capabilities-rail-line-short {
  height: 1px;
  width: 64px;
  background: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.s08-capabilities-rail-line-long {
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, 0.18);
}

.s08-capabilities-label {
  color: rgba(255, 255, 255, 0.85);
}

/* Three-up capability cards — fixed 3 columns above 820px, 1-column below.
   auto-fit was rejected: with exactly 3 cards it collapses to a 2+1 orphan layout
   across the ~680–940px range (the "Web" card strands alone at half-width),
   because auto-fit has no way to force 3-up when the minmax threshold isn't met.
   fixed repeat(3,1fr) forces 3-up at all desktop/wide-tablet widths; the
   hard 820px → 1fr cliff skips the broken 2+1 state entirely. */
.s08-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 820px) {
  .s08-capabilities-grid {
    grid-template-columns: 1fr;
  }
}

.s08-cap-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-capability);
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.s08-cap-header {
  color: var(--milk);
  padding: 14px 22px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* Header colors per spec: Brand --tempranillo, Marketing --sizzurp, Web --fig */
.s08-cap-header--brand      { background-color: var(--tempranillo); }
.s08-cap-header--marketing  { background-color: var(--sizzurp); }
.s08-cap-header--web        { background-color: var(--fig); }

.s08-cap-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 30px;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1;
}

.s08-cap-no {
  color: rgba(255, 255, 255, 0.85);
}

.s08-cap-list {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--milk);
}

.s08-cap-item {
  padding: 12px 22px;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: baseline;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.s08-cap-item:first-child {
  border-top: none;
}

.s08-cap-item-no {
  font-family: var(--font-label);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

/* §08 CTA row */
.s08-cta-row {
  margin-top: clamp(28px, 3.889vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.s08-pricing-note {
  color: rgba(255, 255, 255, 0.6);
  /* At desktop (>840px) the note sits right of the CTA button in a space-between row;
     text-align:right and flex-shrink:1 let it compress before the row wraps.
     min-width:0 prevents the text from pushing past the container boundary. */
  text-align: right;
  flex-shrink: 1;
  min-width: 0;
}

/* §08 CTA row column-stack at ≤840px.
   At 829px and 759px the space-between row produces an awkward half-wrapped state
   (button left, note below-left, right half empty). Switching to column at 840px
   produces a clean stacked treatment matching v7 mobile intent.
   text-align:left on the note overrides the desktop right-align for the stacked case. */
@media (max-width: 840px) {
  .s08-cta-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .s08-pricing-note {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   §09 — Let's Matter Together.
   Background: --paleblue + CSS radial-gradient field, right-anchored.
   Field: background-image radial-gradient — r=46px skyblue dot in a 104px×104px
     cell, background-position:top right. This anchors the dot grid to the top-right
     corner so every dot center is at container_right − (52 + n×104).
     Tiles to any section height via background-repeat:repeat. One layer, no SVG,
     no seam possible.
   Pair: two CSS divs (#s09-pair-chile, #s09-pair-sizzurp), position:absolute,
     right-anchored. n=3 (chile): right − (52+3×104) = right − 364px → right:318px.
     n=2 (sizzurp): right − (52+2×104) = right − 260px → right:214px. Row 1 centers
     at y=156px from top → top:110px for a 92px-diameter div.
   ALIGNMENT PROOF: field dot center x = container_right − (52 + n×104).
     Pair div center x = container_right − right_css − 46 (half-width).
     Chile: right_css=318px → center = right − 318 − 46 = right − 364 = right−(52+3×104). ✓
     Sizzurp: right_css=214px → center = right − 214 − 46 = right − 260 = right−(52+2×104). ✓
     Offset = 0 at 1024px, 1280px, 1440px, 1920px, and ALL other widths.
   Headline: --guava (NOT chile), 104px desktop, weight 900, uppercase.
   Closing paragraphs: --font-ui (DIN Pro), weight 500, 17px, uppercase, --sizzurp.
   position:relative required — positioning ancestor for #s09-pair-* divs.
   Removed: SVG <pattern>/#s09-field (left-anchored, caused 16–56px off-grid offset).
   Removed: SVG #s09-pair overlay (right-pinned SVG on left-anchored grid = mismatch).
   -------------------------------------------------------------------------- */

#s09 {
  background-color: var(--paleblue);
  /* Right-anchored dot grid: gradient anchors from the RIGHT edge so dot centers
     land at container_right − (52 + n×104) — the same formula used by the pair divs.
     r=46px → stop at 46px (solid) / 47px (transparent) to match field geometry.
     background-size 104px 104px matches the pair div's 92px diameter + 12px gap. */
  background-image: radial-gradient(circle, var(--skyblue) 46px, transparent 47px);
  background-size: 104px 104px;
  background-position: top right;
  background-repeat: repeat;
  /* Block padding: clamp() so 96px/88px desktop scales to 56px/48px at 390px. */
  padding: clamp(56px, 6.667vw, 96px) var(--gutter) clamp(48px, 6.111vw, 88px);
  /* position:relative is the positioning ancestor for both pair divs. */
  position: relative;
}

/* Right-anchored pair dots — desktop only (≥761px).
   Diameter: 92px (= 2 × r46, matching the gradient dot diameter).
   Position geometry — both values derive from right − (52 + n×104):
     sizzurp (n=2): center_from_right = 52 + 208 = 260px → right = 260 − 46 = 214px
     chile   (n=3): center_from_right = 52 + 312 = 364px → right = 364 − 46 = 318px
   Row 1: dot center y = 52 + 104 = 156px from top → top = 156 − 46 = 110px.
   This leaves 2 gradient dot columns (n=0, n=1) visibly to the right of the pair,
   matching v7's top-right placement intent (pair is not flush to the right edge). */
#s09-pair-chile,
#s09-pair-sizzurp {
  position: absolute;
  top: 110px;
  width: 92px;
  height: 92px;
  border-radius: var(--radius-pill);
  z-index: 0;
  pointer-events: none;
}

#s09-pair-chile   { background-color: var(--chile);   right: 318px; }
#s09-pair-sizzurp { background-color: var(--sizzurp); right: 214px; }

/* Headline row and copy: position:relative + z-index:1 so text paints above the SVG band. */
.s09-headline-row,
.s09-copy {
  position: relative;
  z-index: 1;
}

/* .s09-pair-dot: NARROW/COMPACT-ONLY (≤1365px). At wide (≥1366px) these spans are display:none;
   the pair is rendered by the #s09-pair-chile / #s09-pair-sizzurp CSS divs instead.
   Threshold raised from 761px → 1366px per clearance spec: the headline collides with the
   floating pair from ~761px up to ~1340px, so the inline treatment now covers that full band. */
@media (min-width: 1366px) {
  .s09-pair-dot {
    display: none;
  }
}

/* Headline row — stacking context handled by z-index:1 above (shared with .s09-copy). */
.s09-headline-row {
  margin-bottom: 96px;
  padding-top: 8px;
}

/* §09 headline: guava (NOT chile), 900 weight, uppercase — all per spec */
.s09-headline {
  font-family: var(--font-display);
  font-weight: 900;
  /* 104px desktop — numerically coincides with the SVG cell constant (104) but is
     INDEPENDENT. Do not bind this font-size to any SVG geometry constant. */
  font-size: clamp(36px, calc(6.476vw + 10.7px), 104px);
  letter-spacing: 0.005em;
  color: var(--guava);
  margin: 0;
  text-transform: uppercase;
  line-height: 0.95;
  max-width: 1080px;
}

/* Closing paragraphs: DIN Pro (--font-ui), NOT Avenir; 17px/13px; sizzurp; uppercase.
   position:relative + z-index:1 applied via shared rule with .s09-headline-row above
   so copy paints above the CSS gradient field (which is a background-image, not stacked). */
.s09-copy {
  max-width: 1240px;
}

.s09-para {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(13px, 1.143vw, 17px);
  letter-spacing: 0.07em;
  color: var(--sizzurp);
  margin: 0;
  text-transform: uppercase;
  line-height: 1.75;
}

.s09-para + .s09-para {
  margin-top: 24px;
}

.s09-say-hello {
  color: var(--sizzurp);
  text-decoration: underline;
  font-weight: 800;
}

.s09-say-hello:focus-visible {
  outline: 2px solid var(--skyblue);
  outline-offset: 2px;
}

/* CTA row — at wide (≥1366px): pill only (pair-dots are the #s09-pair-* absolute divs, not in this row).
   At narrow/compact (≤1365px): the .s09-pair-dot spans become static flex siblings beside the pill.
   No position:relative needed (no positioned children in this row at wide). */
.s09-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  margin-top: 24px;
}

/* Wide (≥1366px): desktop pill visible, mobile pill hidden; pair-dot spans hidden (pair is #s09-pair-* divs).
   Threshold raised from 761px → 1366px: the floating top-right pair only shows where the 1-line headline
   clears it (+25px at 1366, +54px at 1440). Below 1366 the inline treatment handles the pair. */
@media (min-width: 1366px) {
  .s09-cta-pill--mobile { display: none; }
  .s09-cta-pill--desktop { display: inline-flex; }

  /* Wide headline has NO period (v7: "LET'S MATTER TOGETHER" no period at wide) */
  .s09-period {
    display: none;
  }

  .s09-headline-row {
    margin-bottom: 96px;
  }

  /* Guard: never let the headline's right edge come within 16px of the pair's left edge.
     Pair left edge = 410px from container right (chile: right:318 + width:92 = 410).
     Reserve = 410 + 16px keep-out = 426px. The headline is left-anchored at --gutter, so its
     usable inline width = viewport − gutter − 426px. min() retains the 1080px ceiling so
     ultra-wide doesn't over-grow. This guard does NOT force a wrap at 1366 (+9px slack) or
     1440 (+38px slack), preserving v7's one-line headline at both canonical widths.
     If #s09 is ever wrapped in a max-content container, replace 100vw with the container width. */
  .s09-headline {
    /* 100% resolves to #s09's content box (already inset by --gutter on both sides).
       + var(--gutter) adds back the single left-side gutter that the content-box width
       already consumed, so the arithmetic matches the original 100vw intent:
         100vw - gutter - 426  ≡  (100% + gutter) - 426  (same clearance, no overflow)
       Using 100vw was the trigger: on pages taller than the viewport the scrollbar gutter
       is excluded from 100vw in Safari, causing the value to exceed the layout width by
       ~15px → root horizontal overflow → Safari re-measures 100dvh → footer void. */
    max-width: min(1080px, calc(100% + var(--gutter) - 426px));
  }
}

/* Narrow/compact reflow ≤1365px — pair-dot spans appear inline beside the pill.
   Fixed 56px diameter; no position:absolute at any width.
   CSS gradient field stays VISIBLE at all widths (field fills the whole section per v7).
   Wide pair divs (#s09-pair-chile, #s09-pair-sizzurp) are hidden below 1366px;
   narrow/compact layout uses inline .s09-pair-dot spans instead.
   Threshold raised from 760px → 1365px: the whole 761–1365px collision band now uses the
   proven inline pill+dots treatment. The class names (--mobile / --desktop) are kept as-is
   to avoid touching HTML; this comment reflects the new semantic extent. */
@media (max-width: 1365px) {
  #s09-pair-chile,
  #s09-pair-sizzurp {
    display: none;
  }

  .s09-pair-dot {
    display: block;
    position: static;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
  }

  /* Mobile pair-dot fill colors — scoped here because the desktop CSS divs
     (#s09-pair-chile / #s09-pair-sizzurp) carry their own background-color rules;
     these spans only exist at mobile. */
  .s09-pair-dot--chile   { background-color: var(--chile); }
  .s09-pair-dot--sizzurp { background-color: var(--sizzurp); }

  /* Mobile headline: period is a real text node <span class="s09-period"> in the HTML.
     At desktop it is hidden (see desktop rule below). At mobile it becomes visible. */
  .s09-period {
    display: inline;
  }

  .s09-cta-row {
    margin-top: 26px;
    margin-bottom: 56px;
  }

  /* Desktop pill hidden; mobile pill visible */
  .s09-cta-pill--desktop { display: none; }
  .s09-cta-pill--mobile  { display: inline-flex; }

  .s09-headline-row {
    margin-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   FOOTER
   Background: --acai. Two-column flex at desktop; stacked on mobile.
   -------------------------------------------------------------------------- */

#site-footer {
  background-color: var(--acai);
  padding: clamp(18px, 1.944vw, 28px) var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-logo-wrap {
  display: flex;
  align-items: center;
}

.footer-logo {
  height: 28px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.footer-meta {
  display: flex;
  gap: clamp(16px, 2.222vw, 32px);
  flex-wrap: wrap;
}

.footer-meta-item {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--marshmallow);
  opacity: 0.85;
}

.footer-meta-item--muted {
  color: var(--overlay-muted);
  opacity: 1;
}

/* Footer links (email + phone) — inherit the surrounding muted-text treatment so
   they read as informational rather than interactive CTAs. Underline on hover
   provides the affordance cue without introducing a jarring contrasting color.
   focus-visible uses --skyblue to match every other interactive element on the page. */
#site-footer a {
  color: inherit;           /* resolves to var(--marshmallow) at 0.85 opacity via .footer-meta-item */
  text-decoration: none;
}

#site-footer a:hover {
  text-decoration: underline;
}

#site-footer a:focus-visible {
  outline: 2px solid var(--skyblue);
  outline-offset: 2px;
  border-radius: 2px;       /* softens the rect outline to match pill element focus rings */
}

@media (max-width: 480px) {
  #site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .footer-meta {
    flex-direction: column;
    gap: 4px;
  }
}

/* ==========================================================================
   §07 MOBILE OVERRIDES — F2, F5, F6, F3-mobile
   All breakpoints match the carousel.css shelf collapse point (680px, raised
   from 640px per FIX 4) or the v7 mobile artboard width (440px) as specified.
   ========================================================================== */

/* F2 + F5 + F-F — logo, status pill, status dot, and card photo at ≤900px.
   v7 A5MobileProductCard: logo height 32px / top 16px / right 18px.
   Pill: font-size 9px / padding 6px 12px / top 14px / left 14px.
   Photo: height 220px (desktop: 320px). Reducing the photo area also
   relieves vertical collision between the logo and the status pill.
   F-F: v7 A5MobileProductCard (lines 1339–1345) renders the status pill as
   text only — no colored dot element is present in the mobile component.
   Hide the dot on mobile; desktop keeps both the dot and its glow.
   Breakpoint raised 680px → 900px (FIX 5 / breakpoint-sweep-2): at 681–880px
   the shelf is still 2-up but cards are 300–400px wide — too narrow for the
   nowrap CTA label and the logo/eyebrow clear of each other. Raising to 900px
   fires this block together with carousel.css and layout.css breakpoints so the
   entire §07 mobile treatment activates before CTA text clips or logos collide. */
@media (max-width: 900px) {
  .s07-status-dot {
    display: none;   /* v7 mobile: text-only pill; dot is desktop-only */
  }

  .s07-card-logo {
    height: 30px;      /* WAS 22px — over-correction from desktop measurement mis-applied to
                          mobile. v7 A5MobileProductCard JSX sets height:32; 30px matches the
                          "large/prominent" read of the GrowSure card in the v7 mobile render.
                          Collision check at 390px (narrowest common mobile):
                          card inner width = 390 - 24(#s07 sides) - 2(border) - 36(panel sides) = 328px.
                          Pill right edge ≈ 14(left) + ~120(text+padding at 9px/0.22em) = ~134px.
                          Logo left edge = 328 - 18(right) - 124(GrowSure wordmark at 30px) = 186px.
                          Clearance = 186 - 134 = 52px. No collision. */
    max-width: 132px;  /* WAS 120px. GrowSure wordmark renders ~124px wide at 30px height;
                          132px cap gives 8px safety margin without distorting aspect ratio. */
    top: 16px;         /* v7 mobile: 16px (desktop: 22px) */
    right: 18px;       /* v7 mobile: 18px (desktop: 26px) */
  }

  .s07-status-pill {
    font-size: 9px;       /* v7 mobile: 9px (desktop: 10px) */
    padding: 6px 12px;    /* v7 mobile: 6px 12px (desktop: 8px 14px) */
    top: 14px;            /* v7 mobile: top 14px (desktop: 20px) */
    left: 14px;           /* v7 mobile: left 14px (desktop: 20px) */
  }

  .s07-card-photo {
    height: 220px;   /* v7 A5MobileProductCard: height 220 (desktop: 320px) */
  }
}

/* F6 — §07 panel outer margin and inner padding at ≤440px (v7 mobile artboard).
   v7 A5MobileWeBuild: margin 16px 12px, borderRadius 28, padding 32px 18px 26px.
   Desktop panel uses --radius-panel (36px) and padding 56px / clamp / 48px;
   mobile values are substantially tighter across all three dimensions. */
@media (max-width: 440px) {
  #s07 {
    padding: 16px 12px;   /* v7 A5MobileWeBuild: margin 16px 12px */
  }

  .s07-panel {
    border-radius: 28px;         /* v7 mobile: 28px (desktop: 36px via --radius-panel) */
    padding: 32px 18px 26px;     /* v7 A5MobileWeBuild: 32px top / 18px sides / 26px bottom */
  }

  /* F3 — §05 and §08 mobile outer inset at ≤440px.
     v7 A5MobileFractional: padding 16px 12px for §08 outer (#s08 wraps the magenta panel).
     §05 is an inset-panel section too; 12px side inset at this width. */
  #s05 {
    padding-inline: 12px;   /* v7 mobile: tighter side inset at 440px artboard */
  }

  #s08 {
    padding: 16px 12px;   /* v7 A5MobileFractional: padding 16px 12px for outer fig wrapper */
  }
}
/* =============================================================================
   carousel.css — §06 example card track + progress + §07 shelf viewport/track.
   NO @import statements; this file is a concat input.
   ============================================================================= */

/* --------------------------------------------------------------------------
   §06 — Selected Examples carousel.
   Track: auto-fill columns (6→2 shed), white tilted cards.
   Overflow: overflow-x:hidden on the carousel wrapper / overflow-y:visible
   on the track so rotated card corners bleed without clipping.
   JS contract: [data-carousel], [data-carousel-track], [data-carousel-prev],
                [data-carousel-next], [data-carousel-progress].
   -------------------------------------------------------------------------- */

.s06-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  /* No padding-inline here — #s06 handles the gutter so label + carousel align */
}

/* Track container — overflow-x hidden clips horizontal scroll/drag travel;
   overflow-y visible lets tilted card corners show above/below the row.
   The +8px padding on #s06 block-axis absorbs corner bleed without cropping. */
.s06-track-viewport {
  flex: 1;
  overflow-x: hidden;
  overflow-y: visible;
}

/* The scrolling track — JS sets translateX via inline style.
   Single-row horizontal layout: all 18 cards in ONE row extending beyond the
   viewport so translateX pagination can slide them.

   --per-page is set via CSS custom property (defaulting to 6) and shed
   responsively via media queries below. JS reads this var via
   getComputedStyle to derive perPage without coupling to breakpoint logic.

   Card width formula: each card consumes exactly 1/perPage of the viewport
   minus the gaps that fit within a page:
     card-width = (100% - (perPage - 1) * gap) / perPage
   where 100% is the viewport width (.s06-track-viewport).

   grid-auto-flow: column + grid-auto-columns keeps all cards in ONE row.
   The track's total width = 18 * (card-width + gap) - gap, which exceeds the
   viewport whenever 18 > perPage, forming the scrollable overflowing strip
   that translateX pagination slides. */
.s06-track {
  --per-page: 6;
  --gap: clamp(12px, 1.524vw, 22px);

  display: grid;
  grid-auto-flow: column;
  /* Each card is exactly 1/perPage of the viewport, accounting for gaps
     between the cards visible per page. */
  grid-auto-columns: calc(
    (100% - (var(--per-page) - 1) * var(--gap)) / var(--per-page)
  );
  gap: var(--gap);

  /* Will-change hints to compositor for GPU-accelerated translateX */
  will-change: transform;
  /* Transition applied by JS; default none so programmatic moves are instant */
  transition: none;
}

/* Responsive shedding — shed --per-page as viewport narrows.
   These match the v7 feel: 6 across desktop, stepping down to 4 → 3 → 2. */
@media (max-width: 1100px) {
  .s06-track { --per-page: 4; }
}

@media (max-width: 720px) {
  .s06-track { --per-page: 3; }
}

@media (max-width: 480px) {
  .s06-track { --per-page: 2; }
}

/* Example card — white, tilted per --card-tilt, shadow */
.s06-card {
  aspect-ratio: 0.78 / 1;
  border-radius: var(--radius-example);
  background-color: var(--milk);
  box-shadow: 0 10px 28px rgba(36, 16, 37, 0.10),
              0 2px  6px  rgba(36, 16, 37, 0.06);
  overflow: hidden;
  /* --card-tilt is set per-card by JS from data-tilt attribute (unitless number).
     JS sets e.g. --card-tilt: -1.6 (no unit). We multiply by 1deg here so that
     rotate() receives a valid angle. rotate(-1.6) is invalid CSS; this form is not. */
  transform: rotate(calc(var(--card-tilt, 0) * 1deg));
  /* Reserve rotation space so siblings don't shift when tilt is applied */
  transform-origin: center center;
}

.s06-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Chevron buttons (prev/next) — use arrow-carousel.svg icon */
.s06-prev,
.s06-next {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;  /* 44px a11y touch target */
  border: none;
  background: transparent;
  color: rgba(36, 16, 37, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  transition: color var(--transition-ui), background-color var(--transition-ui);
  font-size: 36px;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1;
}

.s06-prev:hover,
.s06-next:hover {
  color: rgba(36, 16, 37, 0.65);
  background-color: rgba(36, 16, 37, 0.06);
}

.s06-prev:focus-visible,
.s06-next:focus-visible {
  outline: 2px solid var(--skyblue);
  outline-offset: 3px;
}

/* Progress container — JS renders <button role="tab"> segments inside this.
   Container is intentionally EMPTY in HTML; JS owns its contents entirely. */
.s06-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: clamp(22px, 2.5vw, 36px);
  min-height: 44px;  /* 44px touch target for the segment area */
}

/* Segment buttons — rendered by JS; styled here for JS to pick up.
   Active: --sizzurp. Inactive: overlay-inactive. */
.s06-progress [role="tab"] {
  height: 3px;
  width: clamp(24px, calc(1.14vw + 19.5px), 36px);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  background-color: var(--overlay-inactive);
  /* Expand the tap area without changing visual height */
  padding: 0;
  /* CSS custom property lets JS drive the active state cleanly */
  transition: background-color var(--transition-ui), width var(--transition-ui);
  /* 44px touch target via padding on block axis */
  padding-block: 20px;
  margin-block: -20px;
}

.s06-progress [role="tab"][aria-selected="true"] {
  background-color: var(--sizzurp);
}

.s06-progress [role="tab"]:focus-visible {
  outline: 2px solid var(--skyblue);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   §07 — Product shelf viewport + track.
   At 2 products: static 2-up layout, no JS activation (shelf.js no-ops).
   At 3+ products: JS adds data-shelf-active, sets --product-count,
   unhides chevrons, enables translateX pagination.
   JS contract: [data-shelf], [data-shelf-track], [data-shelf-prev], [data-shelf-next].
   -------------------------------------------------------------------------- */

/* Shelf viewport — clips to 2 visible cards */
.s07-shelf {
  position: relative;
  overflow: hidden;
}

/* Track — 2-up grid at base state (no JS required).
   When data-shelf-active is present, JS overrides with translateX. */
.s07-shelf-track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  /* will-change + transition applied by JS only when shelf is active */
  transition: none;
}

/* Active shelf (≥3 products): JS sets this attribute */
[data-shelf-active] .s07-shelf-track {
  /* Width is 2 cards' worth; extra cards overflow (hidden by viewport) */
  grid-template-columns: repeat(var(--product-count, 2), calc(50% - 9px));
  will-change: transform;
}

/* Shelf chevrons — hidden at ≤2 products (HTML hidden attribute),
   shown by JS at ≥3 products (JS removes hidden). */
.s07-shelf-prev,
.s07-shelf-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--overlay-rule-strong);
  background: var(--fig);
  color: var(--milk);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 28px;
  line-height: 1;
  z-index: 10;
  transition: background-color var(--transition-ui), border-color var(--transition-ui);
}

.s07-shelf-prev { left: -8px; transform: translate(-100%, -50%); }
.s07-shelf-next { right: -8px; transform: translate(100%, -50%); }

.s07-shelf-prev:hover,
.s07-shelf-next:hover {
  background-color: var(--sizzurp);
}

.s07-shelf-prev:focus-visible,
.s07-shelf-next:focus-visible {
  outline: 2px solid var(--skyblue);
  outline-offset: 3px;
}

/* Mobile: single-column stacked cards at ≤900px.
   Raised from 680px (FIX 5 / breakpoint-sweep-2): at 681–880px the 2-up shelf
   produces 300–400px-wide cards where the nowrap CTA pill clips mid-word and the
   brand logo/eyebrow tag collide. Raising to 900px collapses the shelf to 1-col
   before that band, matching the raised breakpoints in layout.css (.s07-card-cta)
   and sections.css (§07 mobile overrides). All three must fire together at 900px. */
@media (max-width: 900px) {
  .s07-shelf-track,
  [data-shelf-active] .s07-shelf-track {
    grid-template-columns: 1fr;
  }

  .s07-shelf-prev,
  .s07-shelf-next {
    display: none;
  }
}
/* =============================================================================
   animations.css — Transitions, keyframes, and reduced-motion overrides.
   MUST be last in the cascade so its overrides win.
   NO @import statements; this file is a concat input.
   ============================================================================= */


/* PRELOADER */
/* restore animation delay to 2s BEFORE DEPLOYING*/

.page-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  background-color: #FFFFFF; /* Keep the background color */
  display: flex; /* To center the object */
  justify-content: center;
  align-items: center;
  animation-name: preloader-fade;
  animation-delay: 2s;
  animation-duration: 1.5s;
  animation-fill-mode: both;
}

.page-preloader object {
  /* Adjust size as needed */
  width: 120px;
  height: 120px;
}

.preloader-complete {
  animation-delay: .1s;
}

@keyframes preloader-fade {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}


/* --------------------------------------------------------------------------
   Navigation overlay entrance/exit
   -------------------------------------------------------------------------- */

#nav-overlay {
  transition: transform 0.28s ease-out;
}

.nav-backdrop {
  transition: opacity 0.28s ease-out;
}

/* --------------------------------------------------------------------------
   Carousel track transitions (applied by JS when animating; CSS transition
   is set on the element directly by JS; these rules ensure the timing token
   matches carousel-primitives.js TRANSITION_DURATION when CSS declares it).
   -------------------------------------------------------------------------- */

/* Default: no transition (JS arms/disarms the transition on the element).
   This prevents flicker on page load before JS fires. */
.s06-track[style*="transition"] {
  /* Passthrough — JS manages transition timing directly via inline style */
}

/* --------------------------------------------------------------------------
   Nav hamburger bar morphing hint — subtle UI feedback on hover
   -------------------------------------------------------------------------- */

.nav-hamburger-bar {
  transition: width var(--transition-ui), opacity var(--transition-ui);
}

/* --------------------------------------------------------------------------
   Pill hover / focus transitions
   -------------------------------------------------------------------------- */

.pill {
  transition: opacity var(--transition-ui), background-color var(--transition-ui);
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion — ALL motion-sensitive overrides live here
   so they win the cascade (this file is last in the concat).
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* Kill all CSS transitions globally */
  *,
  *::before,
  *::after {
    transition-duration: 0.001s !important;
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
  }

  /* Prevent browser-level smooth scrolling under reduced-motion.
     html rule in layout.css sets scroll-behavior:smooth; this wins over it. */
  html {
    scroll-behavior: auto !important;
  }
}