/* ==========================================================================
   SELF-HOSTED WEBFONTS

   The exact faces Google Fonts was serving, downloaded and served from this
   origin. The site now makes ZERO third-party requests.

   Why: the <link> to fonts.googleapis.com was render-blocking and cross-origin,
   so every first paint waited on a DNS lookup, TCP connect, TLS handshake and
   HTTP round trip to Google before the stylesheet naming the fonts arrived —
   then a SECOND origin (fonts.gstatic.com) for the files themselves. Both hops
   are gone; the faces are discovered as this file parses and fetched over the
   connection the page is already using.

   Subsets: latin and latin-ext only. Google also serves cyrillic, cyrillic-ext
   and vietnamese, but unicode-range meant a browser only ever fetched the latin
   files for this English-language site, so dropping them removes nothing a
   visitor was receiving.

   DM Sans is ONE variable file per subset. Google emits three weight blocks all
   pointing at it, and that is mirrored here rather than 'improved' into a
   font-weight range — the discrete declarations are what the browser resolves
   today, and reproducing them exactly is what makes this swap invisible.

   font-display: swap is preserved, so text is never invisible while a face
   loads, and every font-family declaration below still ends in a real fallback.
   ========================================================================== */

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-500-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-500-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   ROOTS APPAREL MANUFACTURING — CORE STYLESHEET
   Vanilla CSS | Pure Static Architecture | High Performance
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS VARIABLES (DESIGN TOKENS)
   -------------------------------------------------------------------------- */
:root {
  /* Surface & Base Colors */
  --roots-ink: #080808;
  --roots-black: #111111;
  --roots-charcoal: #181818;
  --roots-ivory: #f3f0e9;
  --roots-white: #faf9f6;
  --roots-pure-white: #ffffff;

  /* Brand Accent Colors */
  --roots-red: #a93435;

  /* The ROOTS red as TEXT and as a focus ring. #a93435 is 5.71:1 on ivory —
     comfortably AA — but only 2.90:1 on the #111111 sections, which fails even
     the 3:1 large-text floor and the 3:1 minimum for a focus indicator
     (WCAG 1.4.3 / 1.4.11). Measured, not estimated.

     --roots-red-on-dark is the same hue (359.5deg) and the same saturation
     (52.9%) lifted from 43.3% to 53% lightness, so it reads as the same red:
       on #111111  4.03:1   on #161616  3.86:1
       on #121212  4.00:1   on #080808  4.27:1
     That clears AA for the display headings, the focus ring and the accordion
     arrow everywhere they appear.

     Reaching 4.5:1 for the two small ordinals (.cap-num, .process-stage-num)
     would need #ce6061, a visibly pinker red — a brand decision, not a code
     one, so it is reported rather than applied.

     Only `color` and `outline` resolve through --roots-red-text. Red fills and
     borders still use --roots-red, so no surface changes colour. */
  --roots-red-on-dark: #c7494a;
  --roots-red-text: var(--roots-red);

  /* WCAG AA Compliant Muted Colors */
  --roots-muted: #5c5953;
  /* 4.9:1 on Ivory */
  --roots-muted-light: #a8a69e;
  /* 4.8:1 on Dark */
  --roots-text-muted: #42403d;
  /* 6.2:1 on Ivory */
  --roots-text-muted-light: rgba(250, 249, 246, 0.82);
  /* 7.2:1 on Dark */

  /* Structural Border Lines */
  --roots-line: rgba(8, 8, 8, 0.18);
  --roots-line-light: rgba(250, 249, 246, 0.2);
  --roots-line-subtle: rgba(250, 249, 246, 0.12);

  /* Typography Stacks */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* The only spacing token anything consumes. An eight-step scale was
     declared here and never used — every margin and padding in the file is
     hardcoded — so it documented a system the stylesheet does not follow. */
  --space-section: clamp(80px, 8vw, 130px);

  /* Motion & Transitions */
  --trans-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --trans-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --trans-press: 0.08s ease;
  --trans-slow: 0.7s cubic-bezier(0.16, 1, 0.3, 1);


  /* Page gutter. Mobile used a raw 6vw, which bottomed out at 19px on a 320px
     screen — too tight for an editorial layout. The floor holds it at 22px
     without changing anything from ~370px upward. Desktop keeps its own 8vw. */
  --page-gutter: clamp(22px, 6vw, 88px);

  /* Control scale. The .button family previously shipped one fixed size
     (13px/18px padding, 10px type) from 320px to 2560px, so the same box that
     reads as a considered editorial button at 1440px consumed half the width
     of a 320px screen. These are overridden once, in the mobile block. */
  --control-pad-y: 13px;
  --control-pad-x: 18px;
  --control-fs: 10px;
  --control-gap: 14px;
}

/* --------------------------------------------------------------------------
   SECTION PHOTOGRAPHY — SWAP SLOTS

   The section backgrounds referenced from CSS. All are now SELF-HOSTED; no
   stylesheet rule reaches a third-party origin any more. To move to
   ROOTS-owned photography, drop the files into assets/images/editorial/ and
   change only these values — no layout, cropping or overlay rule is touched.
   See assets/README.md for the replacement priority.

   --img-quality carries no photograph on purpose. The image that was here
   showed two shirts wearing a legible "THE TIE BAR" neck label — another
   company's retail product, at roughly a third of the frame, sitting directly
   behind the ROOTS quality statement. That is not something to host locally;
   it is something to stop publishing. Until ROOTS supplies a photograph of its
   own inspection floor, the section keeps its full visual weight from a gradient
   in the brand's own ink, and the copy over it is unchanged.
   -------------------------------------------------------------------------- */
:root {
  --img-story: url('../assets/images/editorial/roots-story-craftsmanship.webp');
  --img-closing: url('../assets/images/editorial/roots-closing-cta.webp');
  --img-quality:
    radial-gradient(120% 90% at 78% 18%, rgba(250, 249, 246, 0.10), transparent 62%),
    linear-gradient(118deg, #0d0d0d 0%, #191919 46%, #101010 100%);
}

/* A CSS background has no srcset, so a single value would send every viewport
   the desktop file. These two tiers narrow the request by width instead, which
   costs nothing visually: the image sits behind `filter: grayscale(1)` and a
   dark gradient overlay, and carries no detail the reader needs.

   Local WebP, measured on disk:
     roots-closing-cta.webp       2400w   220 KB   (>1400px)
     roots-closing-cta-1600.webp  1600w   108 KB   (≤1400px)
     roots-closing-cta-1200.webp  1200w    66 KB   (≤800px)
   Only this one custom property changes per tier; the section itself is
   untouched, and swapping in ROOTS-owned photography means editing one value
   per tier. */
@media (max-width: 1400px) {
  :root {
      --img-closing: url('../assets/images/editorial/roots-closing-cta-1600.webp');
  }
}

@media (max-width: 800px) {
  :root {
      --img-closing: url('../assets/images/editorial/roots-closing-cta-1200.webp');
  }
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--roots-ivory);
  color: var(--roots-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background-color: var(--roots-ivory);
  color: var(--roots-ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  overflow-x: hidden;
}

/* Section scroll-margin to prevent sticky header clipping */
section[id],
.hero,
main {
  scroll-margin-top: 90px;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

/* Focus Visible Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--roots-red-text);
  outline-offset: 3px;
}

/* Screen reader utility */
.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;
}

.sr-only:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: 0.75rem 1.25rem;
  margin: 0;
  clip: auto;
  white-space: normal;
  background-color: var(--roots-pure-white);
  color: var(--roots-ink);
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  outline: 2px solid var(--roots-red-text);
}

/* Anti-spam honeypot protection */
.hp-field {
  display: none !important;
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY SYSTEM
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.92;
}

h1 {
  font-size: clamp(3.8rem, 9.5vw, 9.5rem);
  margin: 28px 0 44px;
}

h2 {
  font-size: clamp(3rem, 6.8vw, 7.2rem);
}

h1 em,
h2 em {
  color: var(--roots-red-text);
  font-style: italic;
}

p {
  margin: 0;
}

.eyebrow,
.section-kicker {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--roots-muted);
  font-weight: 500;
}

.eyebrow span,
.section-kicker span {
  color: var(--roots-red-text);
}

.light {
  color: var(--roots-text-muted-light);
}

/* --------------------------------------------------------------------------
   4. BUTTONS & INTERACTIVE ELEMENTS
   -------------------------------------------------------------------------- */
.button,
.nav-cta {
  font-size: var(--control-fs);
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
  padding: var(--control-pad-y) var(--control-pad-x);
  border: 1px solid currentColor;
  display: inline-flex;
  gap: var(--control-gap);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color var(--trans-smooth),
    border-color var(--trans-smooth),
    color var(--trans-smooth),
    transform var(--trans-smooth);
  will-change: transform;
}

.button:active,
.nav-cta:active {
  transform: scale(0.985) translateY(1px);
  transition: transform var(--trans-press);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover,
  .nav-cta:hover {
    background-color: var(--roots-red-text);
    border-color: var(--roots-red-text);
    color: var(--roots-white);
  }

  .button:hover span,
  .nav-cta:hover span {
    transform: translateX(4px);
  }
}

.button:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid var(--roots-red-text);
  outline-offset: 3px;
}

.button span,
.nav-cta span {
  display: inline-block;
  transition: transform var(--trans-smooth);
}

.button-light {
  color: var(--roots-white);
}

.button-dark {
  background-color: var(--roots-black);
  color: var(--roots-white);
  align-self: flex-start;
}

.button-outline {
  color: var(--roots-white);
  white-space: nowrap;
}

.talk {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  /* padding-top lifts the hit area past the 24px WCAG 2.5.8 minimum;
     the underline still sits 7px under the text, so nothing moves. */
  padding-top: 9px;
  padding-bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--trans-fast), border-bottom-color var(--trans-fast);
}

.talk span {
  color: var(--roots-red-text);
  transition: transform var(--trans-fast);
}

.talk:hover {
  color: var(--roots-white);
  border-bottom-color: var(--roots-red-text);
}

/* --------------------------------------------------------------------------
   5. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  padding: 24px 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--roots-white);
  border-bottom: 1px solid var(--roots-line-light);
  transition: background-color var(--trans-smooth), backdrop-filter var(--trans-smooth), padding var(--trans-smooth);
}

.site-header.scrolled {
  position: fixed;
  background-color: rgba(17, 17, 17, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 16px 4vw;
  border-bottom: 1px solid var(--roots-line-subtle);
}

.brand-mark {
  height: 52px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform var(--trans-fast);
}

.brand-mark:hover {
  transform: scale(1.03);
}

.brand-mark img {
  height: 100%;
  width: auto;
  max-height: 52px;
  object-fit: contain;
  object-position: left center;
}

.site-header nav {
  display: flex;
  gap: 28px;
  font-size: 10px;
  letter-spacing: 0.18em;
}

.site-header nav a {
  color: rgba(250, 249, 246, 0.88);
  transition: color var(--trans-fast);
  position: relative;
  /* 4px gave a 23px target, 1px under the WCAG 2.5.8 minimum */
  padding: 7px 0;
}

.site-header nav a:hover,
.site-header nav a.active {
  color: var(--roots-red-text);
}

/* Mobile Hamburger Toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px 8px;
  cursor: pointer;
  z-index: 100;
  background: transparent;
  border: 0;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background-color: var(--roots-white);
  transition: all var(--trans-smooth);
}

.mobile-menu-toggle.is-active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.mobile-menu-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.is-active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile Navigation Drawer */
.mobile-nav-drawer {
  display: none;
  position: fixed;
  inset: 0;
  background-color: var(--roots-black);
  z-index: 90;
  padding: clamp(80px, 12vh, 108px) var(--page-gutter) clamp(24px, 4vh, 40px);
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--trans-smooth);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-drawer.is-open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-drawer nav {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.6vh, 24px);
}

.mobile-nav-drawer nav a {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 5.8vw, 2.2rem);
  letter-spacing: 0.05em;
  color: var(--roots-white);
  transition: color var(--trans-fast);
}

.mobile-nav-drawer nav a:hover,
.mobile-nav-drawer nav a:focus-visible {
  color: var(--roots-red-text);
}

.mobile-nav-footer {
  border-top: 1px solid var(--roots-line-light);
  padding-top: clamp(16px, 2.4vh, 24px);
  margin-top: clamp(20px, 3vh, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   6. HERO SECTION — EDITORIAL REDESIGN
   -------------------------------------------------------------------------- */

/* ── Keyframes ── */
@keyframes hReveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hImgScale {
  from { transform: scale(1.025); }
  to   { transform: scale(1.00); }
}
@keyframes hScrollPulse {
  0%, 100% { opacity: 0.25; transform: scaleY(0.6); }
  50%      { opacity: 0.85; transform: scaleY(1); }
}

/* ── Shell ── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 580px;
  max-height: 1120px;
  overflow: hidden;
  color: var(--roots-white);
  background-color: #060606;
  display: flex;
  flex-direction: column;
}

/* ── Background image ──
   TEMPORARY HERO IMAGE — REPLACE WITH ROOTS-OWNED PHOTOGRAPHY
   Art direction: Master artisan hands guiding raw indigo denim under precision industrial needle */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/hero/roots-hero-craftsmanship.webp');
  background-size: cover;
  background-position: right center;
  filter: contrast(1.05) brightness(0.92);
}

/* --------------------------------------------------------------------------
   HERO ENTRANCE — CSS only.

   Previously an inline <style> in the document head set opacity:0 on six
   selectors and only JavaScript removed it, so the hero was a black rectangle
   whenever scripts were disabled, blocked or slow, and the largest visual on
   the page could not paint before script execution. Content is now visible by
   default and the animation merely enhances it: `both` supplies the end frame,
   so if animations never run the hero still renders complete.

   Timing matches the previous JS sequence exactly.
   -------------------------------------------------------------------------- */
.hero-bg {
  animation:
    hFade 1000ms cubic-bezier(0.16, 1, 0.3, 1) both,
    hImgScale 2400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.h-eyebrow {
  animation: hReveal 680ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
}

.h-line:nth-child(1) {
  animation: hReveal 780ms cubic-bezier(0.16, 1, 0.3, 1) 430ms both;
}

.h-line:nth-child(2) {
  animation: hReveal 780ms cubic-bezier(0.16, 1, 0.3, 1) 535ms both;
}

.h-line:nth-child(3) {
  animation: hReveal 780ms cubic-bezier(0.16, 1, 0.3, 1) 640ms both;
}

.h-body {
  animation: hReveal 700ms cubic-bezier(0.16, 1, 0.3, 1) 780ms both;
}

.h-meta-l {
  animation: hReveal 580ms cubic-bezier(0.16, 1, 0.3, 1) 980ms both;
}

.h-meta-r {
  animation: hReveal 580ms cubic-bezier(0.16, 1, 0.3, 1) 1060ms both;
}

/* ── Cinematic overlay ── */
.hero-fg {
  position: absolute;
  inset: 0;
  /* Controlled dark feathering on left to guarantee crisp text legibility while preserving craftsmanship image on right */
  background:
    linear-gradient(
      to right,
      rgba(6, 6, 6, 0.78) 0%,
      rgba(6, 6, 6, 0.52) 34%,
      rgba(6, 6, 6, 0.15) 58%,
      transparent 80%
    ),
    linear-gradient(
      to top,
      rgba(6, 6, 6, 0.65) 0%,
      transparent 24%
    ),
    radial-gradient(
      ellipse 85% 85% at 50% 50%,
      transparent 65%,
      rgba(0, 0, 0, 0.35) 100%
    );
}

/* Subtle editorial film grain */
.hero-fg::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.024;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Content wrapper ── */
.hero-wrap {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 12-column editorial grid: left 58% for text, right 42% for craftsmanship focal point */
  max-width: min(60%, 780px);
  padding:
    clamp(105px, 12vh, 142px)
    0
    clamp(60px, 7vh, 88px)
    clamp(36px, 8vw, 120px);
}

/* ── TOP block ── */
.hero-top {
  display: flex;
  flex-direction: column;
}

/* Eyebrow / category label */
.h-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 249, 246, 0.65);
  margin-bottom: 24px;
}

.h-sep {
  color: rgba(250, 249, 246, 0.25);
}

/* H1 headline — big, editorial, but controlled (40-50% hero visual attention) */
.h-headline {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 5.5vw, 6.2rem);
  line-height: 0.93;
  letter-spacing: -0.035em;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Each typographic line */
.h-line {
  display: block;
  line-height: 0.94;
}

.h-headline em {
  color: var(--roots-red-text);
  font-style: italic;
}

/* ── BOTTOM block (subtext + CTAs) ── */
.h-body {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.2vh, 24px);
}

.h-subtext {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.68;
  color: rgba(250, 249, 246, 0.78);
  max-width: 300px;
  font-weight: 400;
}

/* CTA row */
.h-ctas {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

/* Primary CTA — refined rectangular outline button */
.h-cta-primary {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--roots-white);
  padding: 13px 26px;
  border: 1px solid rgba(250, 249, 246, 0.75);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.h-cta-primary:active {
  transform: scale(0.985) translateY(1px);
  transition: transform var(--trans-press);
}

@media (hover: hover) and (pointer: fine) {
  .h-cta-primary:hover {
    background-color: var(--roots-red-text);
    border-color: var(--roots-red-text);
    color: var(--roots-white);
  }

  .h-cta-primary:hover .h-arrow {
    transform: translateX(4px);
  }
}

.h-cta-primary:focus-visible {
  outline: 2px solid var(--roots-red-text);
  outline-offset: 3px;
  background-color: var(--roots-red-text);
  border-color: var(--roots-red-text);
  color: var(--roots-white);
}

.h-arrow {
  display: inline-block;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Secondary CTA — understated editorial text link */
.h-cta-secondary {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 249, 246, 0.72);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(250, 249, 246, 0.25);
  /* Visual height stays 18px; the vertical padding plus matching negative
     margin lifts the hit area to ~42px for WCAG 2.5.8 without moving anything. */
  padding: 12px 0 3px;
  margin: -12px 0 0;
  transition:
    color 0.25s ease,
    border-bottom-color 0.25s ease,
    transform var(--trans-press);
}

.h-cta-secondary:active {
  transform: translateY(1px);
  transition: transform var(--trans-press);
}

@media (hover: hover) and (pointer: fine) {
  .h-cta-secondary:hover {
    color: var(--roots-white);
    border-bottom-color: var(--roots-red-text);
  }
}

.h-cta-secondary:focus-visible {
  outline: 2px solid var(--roots-red-text);
  outline-offset: 3px;
  color: var(--roots-white);
  border-bottom-color: var(--roots-red-text);
}

/* ── Bottom metadata bar (absolute, full width) ── */
.hero-meta {
  position: absolute;
  z-index: 3;
  bottom: clamp(22px, 3vh, 36px);
  left:  clamp(36px, 8vw, 120px);
  right: clamp(36px, 8vw, 120px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Was 9px at .45 alpha, which measured 4.29-4.36:1 against the sampled
     backdrop at every viewport — below the 4.5:1 AA minimum for small text.
     .6 measures ~7:1. */
  color: rgba(250, 249, 246, 0.6);
}

.h-stat-accent {
  color: var(--roots-white);
  font-weight: 600;
  letter-spacing: 0.16em;
}

.h-meta-l,
.h-meta-r {
  display: flex;
  align-items: center;
  gap: 10px;
}

.h-scroll-arrow {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.3s ease;
}

/* Animated scroll indicator line */
.h-scroll-line {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: rgba(250, 249, 246, 0.35);
  transform-origin: top;
  animation: hScrollPulse 2.8s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   7. SECTIONS GENERAL (IVORY & BLACK)
   -------------------------------------------------------------------------- */
.section-ivory {
  background-color: var(--roots-ivory);
  color: var(--roots-ink);
  padding: var(--space-section) 8vw;
}

.section-black {
  background-color: var(--roots-black);
  color: var(--roots-white);
  padding: var(--space-section) 8vw;
}

/* Every container that paints a dark ground behind red text. Redefining the
   token here means no selector below needs to know which surface it is on —
   the accent lightens wherever the ground goes dark, and nowhere else.
   Kept next to .section-black so the list is maintained alongside the surfaces
   it names. */
.hero,
.section-black,
.quality,
.closing,
.mission-half.dark,
.footer,
.mobile-nav-drawer {
  --roots-red-text: var(--roots-red-on-dark);
}

.section-kicker {
  margin-bottom: 56px;
}

/* --------------------------------------------------------------------------
   8. INTRO / ABOUT SECTION (#about)
   -------------------------------------------------------------------------- */
.intro-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 8vw;
}

.intro-grid h2 {
  font-size: clamp(2.8rem, 5.8vw, 6.4rem);
}

.intro-copy {
  padding-top: 15px;
  max-width: 420px;
}

/* `:not(.eyebrow)` matters. These selectors are specificity (0,1,1) and beat
   the (0,1,0) `.eyebrow` rule, so the eyebrows that happen to be direct
   children here — "BUILT ON EXPERIENCE" in Story, "THE NEXT CHAPTER" in the
   closing CTA — were rendering as 15px muted body copy instead of the 11px
   uppercase label used by every other eyebrow on the site. */
.intro-copy p:not(.eyebrow),
.story-copy>p:not(.eyebrow),
.focus-head p:not(.eyebrow),
.process-head p:not(.eyebrow),
.closing-content>p:not(.eyebrow) {
  font-size: 15px;
  line-height: 1.65;
  color: var(--roots-text-muted);
  margin-bottom: 22px;
}

.stat {
  margin-top: 60px;
  padding-left: 20px;
  border-left: 2px solid var(--roots-red);
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat strong {
  font: 500 90px / 0.7 var(--font-serif);
}

.stat strong span {
  color: var(--roots-red-text);
}

.stat div {
  font-size: 10px;
  letter-spacing: 0.15em;
  line-height: 1.5;
  color: var(--roots-muted);
}

/* --------------------------------------------------------------------------
   9. STORY SECTION
   -------------------------------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 8vw;
  align-items: center;
  padding-top: 40px;
}

.story-image {
  min-height: 560px;
  background: var(--img-story) center / cover;
  filter: grayscale(1);
}

.story-copy {
  max-width: 450px;
}

.story-copy h2 {
  margin: 22px 0 38px;
}

.phrase-list {
  border-top: 1px solid var(--roots-line);
  margin-top: 42px;
}

.phrase-list span {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--roots-line);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--roots-ink);
}

/* --------------------------------------------------------------------------
   10. PROCESS SECTION (#process)
   -------------------------------------------------------------------------- */
.process-head,
.capabilities-head,
.focus-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}

/* `:not(.eyebrow)` is load-bearing here, not decoration. The shared body-copy
   rule in section 7 is `.process-head p:not(.eyebrow)` — specificity (0,2,1) —
   and it sets the dark-surface colour. Without the same `:not()` this rule is
   (0,1,1) and loses, so "One considered process…" rendered as #42403d on the
   #111111 process section: 1.83:1, against the 4.5:1 that 15px text needs. */
.process-head p:not(.eyebrow) {
  color: var(--roots-text-muted-light);
  max-width: 280px;
}

/* Sized by ratio, not by viewport height. With `height: 56vh` the frame kept a
   fixed height while the width tracked the viewport, so the same photograph was
   asked to work at 0.61:1 on a 320px phone and 4.27:1 on a 2560px display — a
   seven-fold swing that left the subject cropped out at both ends. A ratio with
   a height cap holds the crop inside a sane band at every width. */
.process-visual {
  margin: 60px 0 0 0;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 380px;
  max-height: 720px;
  overflow: hidden;
  background-color: #121212;
  user-select: none;
  touch-action: pan-y;
  border-radius: 4px;
  border: 1px solid rgba(250, 249, 246, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

/* Subtle architectural corner accents */
.process-visual::before,
.process-visual::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 4;
  border-color: rgba(250, 249, 246, 0.35);
  transition: border-color var(--trans-smooth);
}
.process-visual::before {
  top: 12px;
  left: 12px;
  border-top: 1px solid;
  border-left: 1px solid;
}
.process-visual::after {
  bottom: 12px;
  right: 12px;
  border-bottom: 1px solid;
  border-right: 1px solid;
}

/* Top Progress Track & Filling Line */
.process-progress-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(250, 249, 246, 0.12);
  z-index: 5;
  overflow: hidden;
}

.process-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--roots-red), #e04a4b);
  box-shadow: 0 0 10px rgba(169, 52, 53, 0.6);
  transform-origin: left center;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Live Technical Stage Badge */
.process-badge {
  position: absolute;
  top: clamp(14px, 2.5vw, 24px);
  right: clamp(14px, 2.5vw, 28px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(17, 17, 17, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(250, 249, 246, 0.18);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--roots-white);
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.process-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--roots-red);
  box-shadow: 0 0 8px var(--roots-red);
  animation: processDotPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes processDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

/* Floating Stage Navigation Arrows */
.process-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(250, 249, 246, 0.2);
  color: var(--roots-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.65;
}

.process-nav-btn:hover {
  opacity: 1;
  background: var(--roots-charcoal);
  border-color: var(--roots-red);
  color: var(--roots-white);
  box-shadow: 0 4px 16px rgba(169, 52, 53, 0.35);
  transform: translateY(-50%) scale(1.08);
}

.process-nav-btn:active {
  transform: translateY(-50%) scale(0.96);
}

.process-nav-prev {
  left: clamp(12px, 2.5vw, 24px);
}

.process-nav-next {
  right: clamp(12px, 2.5vw, 24px);
}

.process-nav-btn:focus-visible {
  outline: 2px solid var(--roots-red);
  outline-offset: 2px;
}

.process-img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.process-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.8) contrast(1.04) brightness(0.9);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.52s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.52s ease;
  will-change: opacity, transform;
}

.process-img.is-active {
  opacity: 1;
  transform: scale(1);
  filter: grayscale(0.55) contrast(1.06) brightness(0.95);
  z-index: 1;
  animation: processKenBurns 8s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}

@keyframes processKenBurns {
  0% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.035) translateY(-4px); }
}

.process-img.is-settling {
  opacity: 0;
  transform: scale(0.985);
  z-index: 0;
}

.process-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(24px, 3.5vw, 44px) clamp(24px, 3.5vw, 48px);
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  align-items: flex-start;
  background: linear-gradient(180deg, transparent 0%, rgba(17, 17, 17, 0.4) 30%, rgba(17, 17, 17, 0.92) 85%, rgba(17, 17, 17, 0.98) 100%);
  z-index: 2;
  pointer-events: none;
}

.process-caption-body {
  max-width: 680px;
}

.process-stage-num {
  font-family: var(--font-sans);
  color: var(--roots-red-text);
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  background: rgba(169, 52, 53, 0.15);
  border: 1px solid rgba(169, 52, 53, 0.3);
  border-radius: 3px;
  flex-shrink: 0;
  display: inline-block;
  transform: translateY(0);
  opacity: 1;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-title {
  font: 500 clamp(26px, 3vw, 38px) var(--font-serif);
  color: var(--roots-white);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
  line-height: 1.15;
  transform: translateY(0);
  opacity: 1;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.03s,
              transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.03s;
}

.process-desc {
  font-size: clamp(12.5px, 1vw, 14.5px);
  color: rgba(250, 249, 246, 0.88);
  line-height: 1.55;
  transform: translateY(0);
  opacity: 1;
  transition: opacity 0.36s cubic-bezier(0.16, 1, 0.3, 1) 0.06s,
              transform 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.06s;
}

/* Staggered exit state during stage transitions */
.process-caption.is-transitioning .process-stage-num {
  opacity: 0;
  transform: translateY(-8px) scale(0.9);
  transition-delay: 0s;
}

.process-caption.is-transitioning .process-title {
  opacity: 0;
  transform: translateY(10px);
  transition-delay: 0s;
}

.process-caption.is-transitioning .process-desc {
  opacity: 0;
  transform: translateY(12px);
  transition-delay: 0s;
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  border-top: 1px solid rgba(250, 249, 246, 0.18);
  margin-top: 28px;
  gap: 0;
}

/* Gliding Timeline Slider Bar with Subtle Glow */
.timeline-slider-track {
  position: absolute;
  top: -1px;
  left: 0;
  min-width: 100%;
  width: max-content;
  height: 2px;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.timeline-slider-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--roots-red);
  box-shadow: 0 0 10px rgba(169, 52, 53, 0.7);
  transform: translate3d(var(--slider-x, 0px), 0, 0);
  width: var(--slider-w, 100px);
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, width;
}

.timeline button {
  position: relative;
  padding: 18px 12px 16px 0;
  color: rgba(250, 249, 246, 0.55);
  background: none;
  border: 0;
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.35;
  cursor: pointer;
  transition: color var(--trans-fast);
}

/* Fallback static indicator line for pre-JS / non-JS */
.timeline:not(.has-slider) button::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 12px;
  height: 2px;
  background: transparent;
  transition: background-color var(--trans-fast);
}

.timeline:not(.has-slider) button.active::before,
.timeline:not(.has-slider) button[aria-selected="true"]::before {
  background: var(--roots-red);
}

.timeline.has-slider button::before {
  display: none;
}

.timeline button span {
  display: block;
  margin-bottom: 8px;
  /* 0.45 composited to 4.36:1 on #111111 — just under the 4.5:1 floor for
     11px text. 0.48 clears it at 4.80:1 and is a 3% opacity change. */
  color: rgba(250, 249, 246, 0.48);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  transition: color var(--trans-fast);
}

.timeline button:hover {
  color: var(--roots-white);
}

.timeline button:hover span {
  color: var(--roots-white);
}

.timeline button.active,
.timeline button[aria-selected="true"] {
  color: var(--roots-white);
  font-weight: 600;
}

.timeline button.active span,
.timeline button[aria-selected="true"] span {
  color: var(--roots-red-text);
  font-weight: 700;
}

.timeline button:focus-visible {
  outline: 2px solid var(--roots-red-text);
  outline-offset: 3px;
}

.process-footer {
  margin-top: 42px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.process-footer::before,
.process-footer::after {
  content: '';
  flex: 0 1 120px;
  height: 1px;
  background: rgba(250, 249, 246, 0.12);
}

.process-tagline {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--roots-text-muted-light);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   11. CAPABILITIES SECTION (#capabilities) — ACCESSIBLE ACCORDION
   -------------------------------------------------------------------------- */
.capabilities {
  padding-top: 50px;
}

.capabilities-head h2 {
  font-size: clamp(2.8rem, 5.5vw, 6.2rem);
}

.capability-list {
  margin-top: 60px;
}

.capability-item {
  border-top: 1px solid rgba(250, 249, 246, 0.16);
  transition: background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: background-color, border-color;
}

.capability-item:last-child {
  border-bottom: 1px solid rgba(250, 249, 246, 0.16);
}

.capability-item.is-open {
  border-top-color: rgba(169, 52, 53, 0.55);
  background-color: rgba(250, 249, 246, 0.025);
}

.capability-item.is-open + .capability-item {
  border-top-color: rgba(250, 249, 246, 0.28);
}

.capability-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 60px 1fr 32px;
  align-items: center;
  padding: 26px 0;
  text-align: left;
  color: var(--roots-white);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, color;
}

.capability-trigger:hover,
.capability-trigger:focus-visible {
  color: var(--roots-red-text);
  transform: translateX(4px);
}

.capability-item.is-open .capability-trigger {
  color: var(--roots-white);
  transform: none;
}

.cap-num {
  font-size: 11px;
  color: var(--roots-muted-light);
  font-weight: 500;
  transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.capability-item.is-open .cap-num {
  color: var(--roots-red-text);
  font-weight: 600;
}

/* The heading wraps the button, not the other way round (ARIA APG accordion).
   <button> takes phrasing content only, so the previous <h3> inside it was
   invalid, and role=button makes its children presentational — the six
   capability titles were not exposed as headings at all, so they could not be
   used to navigate the section. The wrapper carries no visual weight of its
   own; .cap-title keeps the type it always had. */
.cap-heading {
  margin: 0;
  font: inherit;
}

.cap-title {
  font: 500 clamp(1.6rem, 3.2vw, 3.4rem) var(--font-serif);
  letter-spacing: -0.02em;
  transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.capability-trigger:hover .cap-title {
  color: var(--roots-red-text);
}

.capability-trigger .row-arrow {
  text-align: right;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transform-origin: center center;
  transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.capability-trigger[aria-expanded="true"] .row-arrow,
.capability-item.is-open .row-arrow {
  transform: rotate(180deg);
  color: var(--roots-red-text);
}

/* Physics-based Grid-Template-Rows Accordion with Silky Interpolation */
.capability-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.48s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  visibility: hidden;
  overflow: hidden;
  will-change: grid-template-rows;
}

.capability-item.is-open .capability-panel,
.capability-panel.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
}

.capability-panel-inner {
  min-height: 0;
  padding: 0 0 28px 60px;
  max-width: 680px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease,
              transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.capability-item.is-open .capability-panel-inner,
.capability-panel.is-open .capability-panel-inner {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
              transform 0.48s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}

.capability-panel p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--roots-text-muted-light);
}

.capability-panel a {
  color: var(--roots-red-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.capability-panel a:hover {
  color: var(--roots-white);
}

/* --------------------------------------------------------------------------
   12. FOCUS SECTION (#focus)
   -------------------------------------------------------------------------- */
.focus-head h2 {
  font-size: clamp(2.8rem, 5.5vw, 5.8rem);
}

.focus-head p {
  max-width: 250px;
}

.focus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 60px;
}

.focus-tile {
  position: relative;
  height: 500px;
  overflow: hidden;
  color: var(--roots-white);
  display: block;
  /* The tile's text is --roots-white, so on the ivory section a failed image
     left the alt text white on cream — unreadable at the exact moment it is
     the only thing the visitor has. The MEN'S DENIM tile still loads from a
     third-party host, which makes this a live path, not a hypothetical one.
     .process-visual already does the same thing with a #121212 ground. */
  background-color: var(--roots-charcoal);
}

.focus-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform var(--trans-slow), filter var(--trans-slow);
}

.focus-tile:hover img,
.focus-tile:focus-visible img {
  transform: scale(1.04);
  filter: grayscale(0.4);
}

.tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.75));
}

.tile-label {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.15em;
}

.tile-label strong {
  font: 500 30px var(--font-serif);
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   13. MATERIALS SECTION
   -------------------------------------------------------------------------- */
.materials h2 {
  margin-bottom: 56px;
}

.material-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.material-item {
  margin: 0;
}

.material-item img {
  width: 100%;
  aspect-ratio: 1 / 1.25;
  object-fit: cover;
  filter: grayscale(1);
  display: block;
}

.material-item figcaption {
  display: block;
  margin-top: 15px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--roots-ink);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   14. QUALITY SECTION
   -------------------------------------------------------------------------- */
.quality,
.closing {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--roots-white);
  background-color: var(--roots-black);
}

.quality-image,
.closing-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: grayscale(1);
}

.quality-image {
  background-image: var(--img-quality);
}

.closing-image {
  background-image: var(--img-closing);
}

.quality-overlay,
.closing-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.35)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.75), transparent 55%);
}

.quality-content,
.closing-content {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: 150px 8vw 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 900px;
}

.quality-content h2,
.closing-content h2 {
  margin: 28px 0;
  font-size: clamp(3.4rem, 7.5vw, 7.8rem);
}

/* Same specificity trap as .process-head p above: `.closing-content>p:not(.eyebrow)`
   in section 7 carries the dark-surface colour, so the closing CTA's one line of
   copy — "Let's turn your creative vision into market-ready apparel." — was
   #42403d over a dark photograph. The eyebrow is excluded either way; it takes
   its colour from `.eyebrow.light`. */
.quality-content>p:not(.eyebrow),
.closing-content>p:not(.eyebrow) {
  max-width: 400px;
  color: var(--roots-text-muted-light);
  font-size: 15px;
  line-height: 1.65;
}

.quality-words {
  display: flex;
  gap: 30px;
  margin-top: 60px;
  font: 500 22px var(--font-serif);
}

.quality-words span::before {
  content: '—';
  color: var(--roots-red-text);
  margin-right: 10px;
}

/* --------------------------------------------------------------------------
   15. WHY ROOTS SECTION
   -------------------------------------------------------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
}

.why-intro {
  margin-top: 32px;
  max-width: 280px;
  line-height: 1.6;
  color: var(--roots-text-muted);
}

.benefit-list {
  border-top: 1px solid var(--roots-line);
}

.benefit-item {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr 25px;
  text-align: left;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--roots-line);
  color: var(--roots-muted);
  transition: all var(--trans-smooth);
  cursor: pointer;
}

.benefit-item strong {
  font: 500 26px var(--font-serif);
  color: var(--roots-ink);
  transition: color var(--trans-fast);
}

.benefit-item.selected,
.benefit-item:hover,
.benefit-item:focus-visible {
  padding-left: 15px;
  color: var(--roots-red-text);
}

.benefit-item.selected strong,
.benefit-item:hover strong,
.benefit-item:focus-visible strong {
  color: var(--roots-red-text);
}

/* --------------------------------------------------------------------------
   16. MISSION & VISION SECTION
   -------------------------------------------------------------------------- */
.mission {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mission-half {
  /* Grid items default to min-width:auto, so the widest <br>-forced headline
     line sets a floor for the column. With viewport-relative padding (8vw)
     inside a 50%-wide column that floor exceeded the viewport and pushed the
     whole document 35px wide at every desktop size. Column-relative padding
     plus min-width:0 keeps the section inside the viewport. */
  min-width: 0;
  min-height: 560px;
  padding: 100px clamp(32px, 4vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.mission-half h2 {
  font-size: clamp(2.8rem, 4.8vw, 5.2rem);
  margin: 60px 0 32px;
}

.mission-half>p:last-child {
  max-width: 360px;
  font-size: 14px;
  line-height: 1.65;
}

.dark {
  background-color: var(--roots-black);
  color: var(--roots-white);
}

.dark>p:last-child {
  color: var(--roots-text-muted-light);
}

.ivory {
  background-color: var(--roots-ivory);
}

.ivory>p:last-child {
  color: var(--roots-text-muted);
}

/* --------------------------------------------------------------------------
   17. CLOSING CALL-TO-ACTION SECTION
   -------------------------------------------------------------------------- */
.closing-content {
  align-items: center;
  text-align: center;
  margin: auto;
}

.closing-content>p {
  margin-bottom: 30px;
}

.talk {
  margin-top: 25px;
  color: rgba(250, 249, 246, 0.8);
}

/* --------------------------------------------------------------------------
   18. CONTACT SECTION (#contact)
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
}

.contact h2 {
  font-size: clamp(3.2rem, 6.5vw, 6.5rem);
}

.contact-details {
  margin-top: 60px;
  font-style: normal;
}

.contact-details p {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--roots-ink);
}

.contact-details span {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--roots-muted);
  font-weight: 500;
}

.contact-details a {
  /* Phone, email and site links rendered 19px tall as inline elements.
     inline-block lets the vertical padding reserve a real hit area. */
  display: inline-block;
  padding-block: 4px;
  border-bottom: 1px solid var(--roots-red);
  transition: color var(--trans-fast);
  overflow-wrap: anywhere;
}

.contact-details a:hover,
.contact-details a:focus-visible {
  color: var(--roots-red-text);
}

.contact form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact label,
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact label,
.contact-field-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--roots-muted);
  font-weight: 500;
  text-transform: uppercase;
}

.contact input,
.contact textarea {
  border: 0;
  border-bottom: 1px solid var(--roots-line);
  background: transparent;
  outline: 0;
  padding: 8px 0;
  resize: vertical;
  color: var(--roots-ink);
  font-size: 15px;
  font-family: inherit;
  transition: border-color var(--trans-fast);
}

.contact input:focus,
.contact textarea:focus {
  border-color: var(--roots-red-text);
}

/* ==========================================================================
   LUXURY CUSTOM SELECT DROPDOWN
   ========================================================================== */
.custom-select {
  position: relative;
  width: 100%;
}

.custom-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid var(--roots-line);
  background: transparent;
  padding: 8px 0;
  color: var(--roots-muted);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  outline: 0;
  transition: border-color var(--trans-fast), color var(--trans-fast);
}

.custom-select-trigger:hover {
  border-color: var(--roots-red-text);
  color: var(--roots-ink);
}

.custom-select.is-open .custom-select-trigger {
  border-color: var(--roots-red-text);
  color: var(--roots-ink);
}

.custom-select-trigger[data-selected="true"] {
  color: var(--roots-ink);
  font-weight: 500;
}

.custom-select-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 12px;
}

.custom-select-arrow {
  flex-shrink: 0;
  color: var(--roots-muted);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color var(--trans-fast);
}

.custom-select.is-open .custom-select-arrow {
  transform: rotate(180deg);
  color: var(--roots-red-text);
}

/* Floating Luxury Dropdown Menu Panel */
.custom-select-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 120;
  background-color: #faf8f5;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 4px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06);
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 360px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
  overscroll-behavior: contain;
}

.custom-select.is-open .custom-select-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Individual Dropdown Item */
.custom-select-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color var(--trans-fast), color var(--trans-fast);
  color: var(--roots-ink);
  position: relative;
  user-select: none;
}

.custom-select-option:hover,
.custom-select-option.is-focused {
  background-color: rgba(169, 52, 53, 0.08);
}

.custom-select-option.is-selected {
  background-color: rgba(169, 52, 53, 0.06);
  border-left: 2px solid var(--roots-red);
}

.custom-select-option.is-placeholder {
  opacity: 0.75;
  font-size: 13px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
  margin-bottom: 4px;
  padding-bottom: 8px;
}

.custom-select-option .opt-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--roots-red);
  background: rgba(169, 52, 53, 0.1);
  padding: 3px 6px;
  border-radius: 2px;
  flex-shrink: 0;
  line-height: 1;
}

.custom-select-option .opt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
  min-width: 0;
}

.custom-select-option .opt-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--roots-ink);
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}

.custom-select-option .opt-desc {
  font-size: 11.5px;
  color: var(--roots-muted);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}

.custom-select-option .opt-check {
  font-size: 14px;
  font-weight: 700;
  color: var(--roots-red);
  opacity: 0;
  transition: opacity var(--trans-fast);
  margin-left: auto;
  flex-shrink: 0;
}

.custom-select-option.is-selected .opt-check {
  opacity: 1;
}

/* Hidden native select for form data and Google Sheets */
.sr-only-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* `outline: 0` on the base rule above is (0,1,1) — the same specificity as the
   global `input:focus-visible` ring in section 2 — and it comes later, so it
   won. The eight enquiry fields were the only controls on the site with no
   focus ring at all; a 1px underline changing colour is a much weaker cue than
   every other control gets, and inconsistent with them. This restores the house
   indicator at a specificity the reset cannot beat, while keeping the underline
   colour change as a second, quieter signal. */
.contact input:focus-visible,
.contact textarea:focus-visible {
  outline: 2px solid var(--roots-red-text);
  outline-offset: 3px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.form-status {
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.55;
  display: none;
}

/* Paragraph margins are reset globally, so restore a gap between the two
   lines of the hand-off notice. */
.form-status p+p {
  margin-top: 8px;
}

.form-status a {
  border-bottom: 1px solid currentColor;
}

/* Confirmed submission saved to Google Sheets */
.form-status.success {
  display: block;
  background-color: rgba(30, 80, 40, 0.08);
  color: #1b4d22;
  border-left: 3px solid #2e7d32;
}

/* Email client hand-off fallback */
.form-status.hand-off {
  display: block;
  background-color: rgba(169, 52, 53, 0.06);
  color: var(--roots-ink);
  border-left: 3px solid var(--roots-red);
}

.form-status.error {
  display: block;
  background-color: rgba(169, 52, 53, 0.1);
  color: var(--roots-red-text);
  border-left: 3px solid var(--roots-red);
}

.contact form button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background-color: var(--roots-black);
  color: var(--roots-white);
  padding: 80px 8vw 24px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 5vw;
  align-items: start;
  min-height: 240px;
}

/* The contact column holds an unbreakable 29-character email address, which
   set a min-content floor wide enough to push the footer past the viewport
   on small phones. */
.footer-top>* {
  min-width: 0;
}

.footer-contact a {
  overflow-wrap: anywhere;
}

.footer-brand img {
  width: auto;
  max-width: 240px;
  height: 76px;
  object-fit: contain;
  object-position: left center;
}

.footer-brand p {
  margin-top: 16px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--roots-muted-light);
}

.footer nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--roots-text-muted-light);
}

/* Footer and drawer links rendered at 15-23px tall, below the 24px minimum in
   WCAG 2.5.8. Padding lifts the hit area without changing the visual rhythm. */
.footer nav a,
.footer-contact a,
.footer-bottom a {
  display: inline-block;
  padding-block: 5px;
}

.mobile-nav-footer .talk {
  padding-block: 6px;
}

.footer nav a {
  transition: color var(--trans-fast);
}

.footer nav a:hover,
.footer nav a:focus-visible {
  color: var(--roots-red-text);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  color: var(--roots-text-muted-light);
  font-style: normal;
}

.footer-contact a {
  transition: color var(--trans-fast);
}

.footer-contact a:hover,
.footer-contact a:focus-visible {
  color: var(--roots-red-text);
}

.footer-bottom {
  border-top: 1px solid rgba(250, 249, 246, 0.2);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--roots-muted-light);
}

/* --------------------------------------------------------------------------
   20. KEYFRAME ANIMATIONS
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   21a. PROCESS TIMELINE HORIZONTAL RAIL (TABLET & MOBILE)
   Ensures the 9 manufacturing stages never compress below comfortable legibility.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .timeline {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(250, 249, 246, 0.22) transparent;
  }

  .timeline::-webkit-scrollbar {
    height: 3px;
  }

  .timeline::-webkit-scrollbar-track {
    background: transparent;
  }

  .timeline::-webkit-scrollbar-thumb {
    background: rgba(250, 249, 246, 0.22);
    border-radius: 2px;
  }

  .timeline button {
    flex: 0 0 auto;
    min-width: 130px;
    max-width: 160px;
    scroll-snap-align: start;
    padding-right: 0;
  }

  .timeline button::before {
    right: 0;
  }
}

/* --------------------------------------------------------------------------
   21b. RESPONSIVE MEDIA QUERIES (TABLET & MOBILE)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  .intro-grid,
  .story,
  .why-grid,
  .contact-grid {
    gap: 5vw;
  }

  .focus-tile {
    height: 420px;
  }

  /* ── Hero tablet composition ── */
  .hero-wrap {
    max-width: min(72%, 640px);
    padding: clamp(95px, 11vh, 125px) 0 clamp(54px, 6.5vh, 76px) clamp(30px, 6vw, 60px);
  }

  .h-headline {
    font-size: clamp(2.6rem, 6.2vw, 4.8rem);
  }
}

@media (max-width: 800px) {

  /* One place sets the phone control scale. 13px/18px padding at 10px type is
     an editorial desktop button; on a 320px screen the same box was 43px tall
     and half the viewport wide. 11px/15px keeps a comfortable ~39px target
     without turning into a full-width pill. */
  :root {
    --control-pad-y: 11px;
    --control-pad-x: 15px;
    --control-fs: 9.5px;
    --control-gap: 10px;
  }

  /* The global h2 clamp floors at 3rem, so every section heading stayed 48px
     all the way down to 320px — "WE DON'T JUST MAKE GARMENTS" broke onto seven
     lines of ~11 characters. This floor tracks the hero headline's treatment
     and still reaches 48px by ~560px, where the old value took over. */
  h2 {
    font-size: clamp(2.15rem, 8.6vw, 3rem);
  }

  .site-header {
    padding: 18px var(--page-gutter);
  }

  .site-header nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .nav-cta {
    font-size: 9px;
    padding: 10px 14px;
  }

  .quality-content,
  .closing-content {
    padding: 130px var(--page-gutter) 70px;
  }

  /* ── Hero mobile composition ── */
  .hero-wrap {
    max-width: 100%;
    padding:
      clamp(84px, 10.5vh, 104px)
      0
      clamp(48px, 6vh, 68px)
      var(--page-gutter);
  }

  .hero-bg {
    background-image: url('../assets/images/hero/roots-hero-craftsmanship-mobile.webp');
    background-position: 80% center;
  }

  .hero-fg {
    background:
      linear-gradient(
        to right,
        rgba(6, 6, 6, 0.88) 0%,
        rgba(6, 6, 6, 0.72) 55%,
        rgba(6, 6, 6, 0.40) 100%
      ),
      linear-gradient(
        to top,
        rgba(6, 6, 6, 0.82) 0%,
        transparent 32%
      );
  }

  .h-eyebrow {
    font-size: 9px;
    gap: 8px;
    margin-bottom: 16px;
  }

  .h-headline {
    font-size: clamp(2.3rem, 9.2vw, 3.8rem);
    line-height: 0.94;
  }

  .h-body {
    gap: 14px;
  }

  .h-subtext {
    font-size: 13px;
    max-width: 100%;
    line-height: 1.56;
  }

  .h-ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .h-cta-primary {
    min-height: 44px;
  }

  .h-cta-secondary {
    margin: 0;
    padding: 10px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .button,
  .nav-cta {
    min-height: 44px;
  }

  .hero-meta {
    left: var(--page-gutter);
    right: var(--page-gutter);
    /* 8px is below the practical legibility floor on a phone */
    font-size: 9.5px;
    letter-spacing: 0.14em;
  }

  .h-scroll-line {
    height: 16px;
  }

  .section-ivory,
  .section-black {
    padding: 75px var(--page-gutter);
  }

  .section-kicker {
    margin-bottom: 40px;
  }

  .intro-grid,
  .story,
  .why-grid,
  .contact-grid,
  .mission {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .story-image {
    min-height: 380px;
    order: 2;
  }

  .story {
    padding-top: 30px;
  }

  .stat {
    margin-top: 40px;
  }

  .process-head,
  .capabilities-head,
  .focus-head {
    display: block;
  }

  .process-head p,
  .focus-head p {
    margin-top: 20px;
    max-width: 100%;
  }

  .process-visual {
    margin-top: 36px;
    aspect-ratio: 4 / 3;
    min-height: 280px;
    max-height: 500px;
  }

  .process-caption {
    padding: 20px 18px;
    gap: 14px;
  }

  .process-caption h3 {
    font-size: 24px;
    margin-bottom: 4px;
  }

  .process-caption p {
    font-size: 12.5px;
    line-height: 1.45;
  }

  .timeline {
    margin-top: 20px;
    gap: 18px;
  }

  .timeline button {
    min-width: 125px;
    font-size: 9.5px;
    padding-top: 14px;
  }

  .timeline button span {
    font-size: 10.5px;
    margin-bottom: 6px;
  }

  .process-footer {
    margin-top: 32px;
    padding-top: 16px;
    gap: 16px;
  }

  .process-tagline {
    font-size: 10px;
    letter-spacing: 0.22em;
  }

  .capabilities-head .button {
    margin-top: 24px;
  }

  .capability-list {
    margin-top: 40px;
  }

  .capability-trigger {
    grid-template-columns: 45px 1fr 24px;
    padding: 18px 0;
  }

  .capability-panel-inner {
    padding-left: 45px;
  }

  /* A fixed pixel height made the crop change shape across the range: the same
     photograph was a 282x380 portrait at 320px and a 676x380 letterbox at
     768px, so each tile lost its subject at one end. A ratio keeps the crop
     constant; max-height stops a single column ballooning on wide phones. */
  .focus-grid {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .focus-tile {
    height: auto;
    /* An explicit width keeps the box definite. Without it the grid item's
       stretch width is treated as indefinite, so max-height clamped the ratio
       by shrinking the tile to 368px inside a 422px column instead of
       trimming its height, leaving it floating off the section's edges. */
    width: 100%;
    aspect-ratio: 4 / 5;
    /* Held at the previous fixed height so the section is never taller than it
       was: below ~375px the ratio now wins and the tile is shorter, above it
       the cap holds. Either way the crop never reaches the 1.78:1 letterbox
       that a 676x380 tile produced at 768px. */
    max-height: 380px;
  }

  /* Two up before a single tile would letterbox. Also halves the section from
     2131px to ~1100px of scrolling on a phone. */
  @media (min-width: 640px) {
    .focus-grid {
      grid-template-columns: 1fr 1fr;
    }

    .focus-tile {
      aspect-ratio: 3 / 4;
      max-height: none;
    }
  }

  /* The title alone is 30px serif and nearly filled the row, so it collided
     with "VIEW DETAILS" on phones. Number + title on one line, action below. */
  .tile-label {
    left: 20px;
    right: 20px;
    bottom: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 10px;
  }

  .tile-label strong {
    font-size: 24px;
  }

  .tile-label span:last-child {
    flex: 1 0 100%;
  }

  .material-strip {
    display: flex;
    overflow-x: auto;
    margin-right: calc(-1 * var(--page-gutter));
    padding-right: var(--page-gutter);
    scroll-snap-type: x mandatory;
  }

  /* 70vw alone kept growing: by 800px a single fabric swatch was 560x730 —
     taller than most laptop screens — and you still only saw 1.3 of them. The
     cap holds the swatch at a readable 300px and brings 2-3 into view as the
     screen widens, so the carousel eases toward the four-up grid at 820px. */
  .material-item {
    min-width: min(70vw, 300px);
    scroll-snap-align: start;
  }

  .quality-words {
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 40px;
  }

  .quality-words span {
    font-size: 18px;
  }

  .mission-half {
    min-height: 480px;
    padding: 70px var(--page-gutter);
  }

  /* "BETTER MANUFACTURING" is one forced line; at the 2.8rem floor it needed
     329px and overflowed a 320px screen. */
  .mission-half h2 {
    font-size: clamp(2rem, 7.5vw, 2.8rem);
  }

  .mission-half h2 {
    margin: 40px 0 24px;
  }

  .contact-details {
    margin-top: 40px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer {
    padding: 60px var(--page-gutter) 22px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    min-height: 380px;
  }

  .footer-contact {
    font-size: 12.5px;
  }

  .footer-brand {
    grid-column: span 2;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    line-height: 1.5;
  }
}

/* --------------------------------------------------------------------------
   21b. TABLET BAND — 801px to 1080px

   This range had no rules of its own. The mobile block stopped at 800px and
   the desktop layout assumes roughly 1100px, so an 820px tablet got the full
   desktop navigation crammed into six items plus a CTA that wrapped onto two
   lines, two-column grids at half their intended width, and 16px of genuine
   horizontal overflow where "MANUFACTURING." in the Vision panel could not fit
   its 344px column at 56px type.
   -------------------------------------------------------------------------- */
@media (min-width: 801px) and (max-width: 1080px) {

  /* Six nav items plus a CTA need ~1100px to breathe. Below that the drawer
     is the better control — it is already built, and already holds the CTA. */
  .site-header nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .nav-cta {
    --control-pad-y: 11px;
    --control-pad-x: 15px;
    --control-fs: 9.5px;
    --control-gap: 10px;
  }

  /* Stacking these is what removes the 820px overflow. Each was a two-column
     grid inheriting desktop type sizes at roughly half the desktop width. */
  .mission,
  .contact-grid,
  .intro-grid,
  .why-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .mission-half {
    min-height: 420px;
    padding: 72px var(--page-gutter);
  }

  .mission-half h2 {
    font-size: clamp(2.4rem, 5.4vw, 3.4rem);
  }

  .quality-content,
  .closing-content {
    padding: 130px var(--page-gutter) 70px;
  }
}

/* --------------------------------------------------------------------------
   21c. SMALL PHONES — 520px and below
   Refinements that only make sense once the screen is genuinely narrow.
   -------------------------------------------------------------------------- */
@media (max-width: 520px) {

  /* The header CTA wrapped onto two lines at 320px and took 53% of the bar,
     squeezing the logo and the menu button. The drawer carries the same
     "START A PARTNERSHIP" action, so nothing is lost by dropping it here. */
  .nav-cta {
    display: none;
  }

  .section-ivory,
  .section-black {
    padding: 60px var(--page-gutter);
  }

  .section-kicker {
    margin-bottom: 30px;
  }

  /* Two columns forced the 29-character email to break mid-token
     ("rootsbusinessconnect@gm / ail.com"). One column lets it sit whole. */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 34px;
    min-height: 0;
  }

  .footer-brand {
    grid-column: auto;
  }

  /* 25px tall is past the 24px minimum but tight for six stacked links. */
  .footer nav a {
    padding: 6px 0;
  }

  /* The section-16 clamp is `clamp(3.4rem, 7.5vw, 7.8rem)`, and below ~453px
     the 7.5vw preferred size is under the 3.4rem floor, so the floor is what
     renders — a fixed 54.4px that never gets smaller however narrow the screen
     is. "CHECKPOINT." sets ~300px at that size inside a 276px content box at
     320px, so the last glyphs were cut off by the section's own overflow:hidden.
     A floor scaled to the viewport keeps the same editorial weight and lets the
     longest word fit. 12vw meets 3.4rem at 453px, so nothing changes above that. */
  .quality-content h2,
  .closing-content h2 {
    font-size: clamp(2.45rem, 12vw, 3.4rem);
  }

  .process-visual {
    aspect-ratio: 1 / 1;
    min-height: 260px;
    max-height: 380px;
  }

  .process-caption {
    padding: 16px 14px;
    gap: 10px;
  }

  .process-caption h3 {
    font-size: 20px;
  }

  .process-caption p {
    font-size: 11.5px;
    line-height: 1.4;
  }

  .timeline button {
    min-width: 115px;
  }

  .process-footer::before,
  .process-footer::after {
    flex: 0 1 36px;
  }
}

/* --------------------------------------------------------------------------
   21c. SUBTLE EDITORIAL SCROLL REVEALS
   -------------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-on-scroll.reveal-quiet {
  transform: translateY(8px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.50s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   22. REDUCED MOTION ACCESSIBILITY
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    /* The hero reveal is staggered up to 1060ms; without resetting the delay
       those elements stay hidden that long even with an instant animation. */
    animation-delay: 0s !important;
  }

  /* Show all hero elements immediately — no animation required */
  .hero-bg,
  .h-eyebrow,
  .h-line,
  .h-body,
  .h-meta-l,
  .h-meta-r {
    opacity: 1 !important;
    transform: none !important;
  }

  .h-scroll-line {
    animation: none !important;
    opacity: 0.4 !important;
  }

  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .process-img,
  .process-stage-num,
  .process-title,
  .process-desc,
  .timeline-slider-bar,
  .capability-panel,
  .capability-panel-inner,
  .capability-trigger .row-arrow {
    transition: none !important;
    transform: none !important;
  }

  /* The loading screen's reduced-motion behaviour is defined with the rest of
     it in section 23, where it can rely on source order rather than on
     !important. */
}


/* --------------------------------------------------------------------------
   23. BRAND TITLE CARD (LOADING SCREEN)

   The ROOTS mark is a signature, so it is revealed the way a signature is
   made: one sweep along its own writing direction, left to right. Every
   intermediate frame is therefore a complete left-hand portion of the mark.
   The previous implementation traced nine hand-authored strokes through an
   SVG mask; because those paths did not follow the raster letterforms, the
   fully "drawn" state showed a severed t-bar and a broken s, and a full-plate
   rectangle had to be faded in at 2.3s to repair it. A sweep cannot break
   the artwork, and needs no repair frame.

   Ground is #060606 — the same value as .hero's background-color — so the
   clear is a cross-fade between two identical darks with no flash.

   The reveal, the hold and the clear are all CSS with animation-fill-mode:
   both. If this page's JavaScript never runs, the overlay still ends at
   opacity 0 / visibility hidden / pointer-events none. main.js only removes
   the finished node.

     0.12 – 1.06s  mark swept in
     0.10 – 1.40s  stage settles 1.028 -> 1
     0.60 – 1.12s  rule draws outward from centre
     0.80 – 1.28s  place line rises
     1.34 – 1.80s  overlay clears

   The hero's own CSS entrance runs from page render (eyebrow 0.26s through
   meta bar 1.76s, background scale 2.4s), so the hero is still arriving as
   this clears rather than sitting finished behind it.
   -------------------------------------------------------------------------- */
.roots-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #060606;
  animation: rootsLoaderClear 460ms cubic-bezier(0.4, 0, 0.2, 1) 1340ms both;
}

@keyframes rootsLoaderClear {
  from {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  99% {
    opacity: 0;
  }

  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* One declaration sizes the whole composition: the mark, the rule beneath it
   and the measure the place line is centred in.
     40vw + 140px  gives phones a dominant mark and desktops a composed one
     58vh          keeps the card inside short and landscape viewports
     540px         caps it at the resolution of roots-logo-mark.png at 2x */
.roots-loader-stage {
  width: min(76vw, 40vw + 140px, 58vh, 540px);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: rootsStage 1800ms both;
}

/* One timeline for the card itself: a long settle onto its final size, then,
   under the fade, a small lift and swell so it releases forward rather than
   simply switching off. The hero's background is contracting from 1.025 to 1
   through the same moment, so the two layers separate instead of sliding
   together. Both movements are a couple of per cent — enough to feel, not
   enough to notice. */
@keyframes rootsStage {
  0% {
    transform: scale(1.028);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  72% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 1);
  }

  100% {
    transform: scale(1.026) translateY(-10px);
  }
}

.roots-mark-wrap {
  position: relative;
  width: 100%;
  line-height: 0;
}

.roots-mark {
  width: 100%;
  height: auto;
  display: block;
}

/* Curtain in the ground colour, retreating rightwards. Its leading edge is
   feathered and raked 7 degrees to sit with the script's italic lean, so the
   mark resolves out of the dark rather than being uncovered by a hard line.

   The -6% overhang places the opaque edge of the feather exactly on the mark's
   left side at rest, so the sweep starts revealing on its first frame instead
   of spending a third of a second travelling across empty ground, and the
   travel of 90% carries the trailing edge just past the right side at 94% of
   the run. Easing is a true in-and-out — a hand starts from rest, crosses at
   speed and comes to rest — rather than a front-loaded ease-out that would
   snap the mark into place and then wait. */
.roots-mark-wipe {
  position: absolute;
  top: -10%;
  left: -6%;
  width: 118%;
  height: 120%;
  background: linear-gradient(97deg, rgba(6, 6, 6, 0) 0%, #060606 5%, #060606 100%);
  animation: rootsMarkWipe 940ms cubic-bezier(0.4, 0.02, 0.28, 1) 60ms both;
}

@keyframes rootsMarkWipe {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(90%, 0, 0);
  }
}

/* The artwork's box ends at the tip of the R's descender, so a gap measured
   from the box reads tighter than it is. */
.roots-loader-rule {
  width: 100%;
  height: 1px;
  margin-top: clamp(26px, 3.6vw, 52px);
  background-color: rgba(250, 249, 246, 0.2);
  transform-origin: 50% 50%;
  animation: rootsRuleDraw 520ms cubic-bezier(0.16, 1, 0.3, 1) 600ms both;
}

@keyframes rootsRuleDraw {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* Reduced motion: the card still appears, but nothing travels — no sweep, no
   settle, no rise. Only opacity changes, and the page is released in 0.82s
   rather than 1.8s.

   The blanket reset in the reduced-motion block above forces every animation
   on the page to 0.01ms with no delay. That is correct for movement, but
   applied here it clears this overlay within a single frame, so the card
   appears as a black flash between the first paint and the hero. These three
   declarations restore the timing — and only the timing — for the one element
   that needs it. Nothing here reinstates motion, so removing the !important
   would not make the page calmer, only make it flash. */
@media (prefers-reduced-motion: reduce) {
  .roots-loader-overlay {
    animation-duration: 300ms !important;
    animation-delay: 520ms !important;
    animation-timing-function: linear !important;
  }

  .roots-mark-wipe {
    display: none;
  }

  .roots-loader-stage,
  .roots-loader-rule {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   24. FLOATING WHATSAPP CONTACT

   A secondary channel, and styled to stay one: ink ground with no colour at
   rest, no standing label, and less visual weight than START A PARTNERSHIP.
   Subtle organic resting floating motion, smooth entrance, and refined luxury
   emerald micro-interaction on hover/focus. Shared by both pages.
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  /* env() keeps it clear of the iOS home indicator and Android gesture bar. */
  bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom, 0px));
  /* Below the mobile drawer (90) and the enlarged technical drawing (120) so
     neither is ever obscured, above ordinary page content. */
  z-index: 40;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--roots-black);
  /* Hairline border reads cleanly on dark sections; shadow defines edge on ivory */
  border: 1px solid rgba(250, 249, 246, 0.16);
  /* Dual-layer depth: crisp contact shadow + wide ambient blur */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.28);
  color: var(--roots-white);
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wa-float-icon {
  /* 20 of 48 is ~42%: balanced glyph scale */
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover & Focus Interaction — Refined luxury emerald tone + micro lift */
.wa-float:hover,
.wa-float:focus-visible {
  background-color: #075e54;
  border-color: #0d7065;
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.24),
    0 10px 24px rgba(7, 94, 84, 0.30);
}

.wa-float:active {
  transform: scale(0.95);
  transition-duration: 120ms;
}

/* Subtle micro-motion on WhatsApp glyph */
.wa-float:hover .wa-float-icon,
.wa-float:focus-visible .wa-float-icon {
  transform: translateY(-0.5px) scale(1.05);
}

.wa-float:focus-visible {
  outline: 2px solid var(--roots-red-text);
  outline-offset: 3px;
}

/* Editorial Tooltip — crisp typography & geometric pointer */
.wa-float-tip {
  position: absolute;
  right: calc(100% + 14px);
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--roots-white);
  background-color: var(--roots-black);
  border: 1px solid rgba(250, 249, 246, 0.18);
  padding: 7px 13px;
  border-radius: 2px;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transition:
    opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wa-float-tip::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  background-color: var(--roots-black);
  border-top: 1px solid rgba(250, 249, 246, 0.18);
  border-right: 1px solid rgba(250, 249, 246, 0.18);
}

/* Hover reveal for fine pointers */
@media (hover: hover) and (pointer: fine) {
  .wa-float:hover .wa-float-tip {
    opacity: 1;
    transform: translateX(0);
  }
}

.wa-float:focus-visible .wa-float-tip {
  opacity: 1;
  transform: translateX(0);
}

/* Touch devices hide tooltip to prevent sticky tap overlays */
@media (hover: none),
(pointer: coarse) {
  .wa-float-tip {
    display: none;
  }
}

/* Desktop sizing (>1024px) */
@media (min-width: 1025px) {
  .wa-float {
    width: 52px;
    height: 52px;
  }

  .wa-float-icon {
    width: 22px;
    height: 22px;
  }
}

/* Keyframes: Smooth Entrance Animation (run once past hero) */
@keyframes waEntrance {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.92);
  }
  65% {
    opacity: 1;
    transform: translateY(-1.5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.wa-float.has-entered {
  animation: waEntrance 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Held back while hero is on screen */
.wa-float.is-held {
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  pointer-events: none;
  animation: none;
}

/* Stand aside during mobile drawer open, technical drawing enlargement, or input focus */
body.mobile-nav-open .wa-float,
body.ms-locked .wa-float,
.mobile-nav-drawer.is-open ~ .wa-float,
body:has(input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]):focus, textarea:focus, select:focus) .wa-float {
  opacity: 0 !important;
  transform: translateY(12px) scale(0.92) !important;
  pointer-events: none !important;
}

/* Compact adjustments for landscape mobile phones */
@media (max-height: 500px) and (orientation: landscape) {
  .site-header {
    padding: 8px var(--page-gutter);
  }

  .brand-mark {
    height: 36px;
  }

  .brand-mark img {
    max-height: 36px;
  }

  .nav-cta {
    display: none;
  }

  .mobile-nav-drawer {
    padding: 64px var(--page-gutter) 20px;
  }

  .mobile-nav-drawer nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
  }

  .mobile-nav-drawer nav a {
    font-size: 1.35rem;
  }

  .mobile-nav-footer {
    padding-top: 14px;
    margin-top: 14px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .wa-float {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    width: 42px;
    height: 42px;
  }

  .wa-float-icon {
    width: 18px;
    height: 18px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .wa-float,
  .wa-float-icon,
  .wa-float-tip {
    animation: none !important;
    transition: none !important;
  }

  .wa-float:hover,
  .wa-float:focus-visible,
  .wa-float:hover .wa-float-icon,
  .wa-float:focus-visible .wa-float-icon,
  .wa-float.is-held {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   16. LUXURY SUBMISSION SUCCESS POPUP MODAL
   -------------------------------------------------------------------------- */
.roots-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: rgba(14, 13, 12, 0.76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

.roots-modal-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

.roots-modal-card {
  background-color: #ffffff;
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  border: 1px solid #ded9ce;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.36),
    0 6px 20px rgba(0, 0, 0, 0.12);
  padding: clamp(28px, 4.5vw, 42px) clamp(24px, 4vw, 36px) clamp(24px, 3.5vw, 36px);
  text-align: center;
  position: relative;
  overflow: hidden;
  transform: scale(0.9) translateY(24px);
  opacity: 0;
  transition:
    transform 0.46s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.roots-modal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #a93435 0%, #d45c5d 50%, #a93435 100%);
}

.roots-modal-backdrop.is-active .roots-modal-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.roots-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #88837a;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.roots-modal-close:hover,
.roots-modal-close:focus-visible {
  color: #1f1e1c;
  background-color: #f2eee6;
  outline: none;
}

.roots-modal-icon-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.roots-modal-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(169, 52, 53, 0.25);
  animation: rootsPulseRing 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.roots-modal-check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: block;
}

.roots-check-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2.5;
  stroke: #a93435;
  fill: rgba(169, 52, 53, 0.05);
}

.roots-check-path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  stroke: #a93435;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.roots-modal-backdrop.is-active .roots-check-circle {
  animation: rootsStroke 0.55s cubic-bezier(0.65, 0, 0.45, 1) forwards 0.15s;
}

.roots-modal-backdrop.is-active .roots-check-path {
  animation: rootsStroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.65s forwards;
}

@keyframes rootsStroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes rootsPulseRing {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  60% {
    transform: scale(1.22);
    opacity: 0;
  }
  100% {
    transform: scale(1.22);
    opacity: 0;
  }
}

.roots-modal-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #a93435;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.roots-modal-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(24px, 3.2vw, 30px);
  color: #1f1e1c;
  margin: 0 0 10px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.roots-modal-desc {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: #5c5852;
  margin: 0 0 20px;
}

.roots-modal-summary {
  background-color: #f7f5f0;
  border: 1px solid #e8e4dc;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 22px;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.8;
  color: #33312c;
}

.roots-modal-summary-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e8e4dc;
  padding: 4px 0;
}

.roots-modal-summary-row:last-child {
  border-bottom: 0;
}

.roots-modal-summary-label {
  color: #88837a;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
}

.roots-modal-summary-val {
  font-weight: 600;
  color: #1f1e1c;
  text-align: right;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roots-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.roots-modal-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  background-color: #1a1918;
  color: #ffffff;
  border: 0;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 0.25s ease, transform 0.2s ease;
}

.roots-modal-btn-primary:hover,
.roots-modal-btn-primary:focus-visible {
  background-color: #a93435;
  transform: translateY(-1px);
}

.roots-modal-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 20px;
  background-color: #f2eee6;
  color: #1f1e1c;
  border: 1px solid #dcd7ce;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.roots-modal-btn-secondary:hover,
.roots-modal-btn-secondary:focus-visible {
  background-color: #e5e0d5;
  border-color: #c9c3b8;
}