/* ============================================================
   responsive.css — device-width refinement layer.

   Loaded LAST so it wins over the prebuilt Tailwind bundle at
   equal specificity. `assets/css/styles.css` is compiled output
   and this repo has no build tooling, so every rule below is
   hand-written plain CSS — adding new `md:`/`lg:` utilities to
   the markup would not work (they are not in the bundle).

   Breakpoint map (mirrors the Tailwind build: sm 640 / md 768 / lg 1024):
     <= 380px      compact phones (SE, older Androids)
     <= 479px      phones
     480 - 767px   large phones, small tablets in portrait
     768 - 1023px  tablets — Tailwind `md:` is already live here
     1024 - 1439px laptops — Tailwind `lg:` is live
     1440 - 1919px desktops
     >= 1920px     large monitors / TVs
   ============================================================ */

/* ------------------------------------------------------------
   1. Foundations
   ------------------------------------------------------------ */

html {
  -webkit-text-size-adjust: 100%;   /* stop iOS inflating text in landscape */
}

img, svg, video, canvas, iframe {
  max-width: 100%;
}

/* the fixed header would otherwise cover the top of any #anchor target */
main > section[id] {
  scroll-margin-top: 5.5rem;
}
@media (min-width: 768px) {
  main > section[id] { scroll-margin-top: 6.5rem; }
}

/* long unbroken strings (emails, addresses) must never force a
   flex/grid track wider than its container */
.wrap-anywhere { overflow-wrap: anywhere; }


/* ------------------------------------------------------------
   2. Fluid display type
   The markup jumps 48px -> 72px at exactly 768px. Between those
   the headline is either too heavy for a phone or too small for a
   desktop, so the jump is replaced with a continuous ramp.
   ------------------------------------------------------------ */

h1.font-display {
  font-size: clamp(2.35rem, 1.5rem + 3.8vw, 4.5rem);
}

h2.font-display.md\:text-6xl {
  font-size: clamp(1.95rem, 1.25rem + 3.1vw, 3.75rem);
}

h2.font-display.md\:text-5xl,
h3.font-display.md\:text-4xl {
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3rem);
}

/* headline measure — stop lines running past comfortable reading
   width once the containers widen on big monitors */
@media (min-width: 1536px) {
  h1.font-display { font-size: clamp(4.5rem, 2.4rem + 3vw, 5.5rem); }
  h2.font-display.md\:text-6xl { font-size: clamp(3.75rem, 2.4rem + 1.6vw, 4.25rem); }
}


/* ------------------------------------------------------------
   3. Phones — up to 767px
   ------------------------------------------------------------ */

@media (max-width: 767.98px) {

  /* --- vertical rhythm: py-24 (96px) is desktop-scale on a phone --- */
  main > section:not(.vs-section) {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  /* hero still has to clear the fixed header */
  main > section:first-of-type {
    padding-top: 6.75rem;
    padding-bottom: 3rem;
  }

  /* --- hero --- */
  main > section:first-of-type .mx-auto.grid { gap: 2.5rem; }

  .hero-stats { gap: 1rem; }
  .hero-stats .font-display { font-size: 1.6rem; }
  .hero-stats .text-xs { font-size: 0.625rem; letter-spacing: 0.12em; }

  /* the two spec badges hang off the media card on -left-6/-right-4,
     which pushes them onto the viewport edge once the card is only
     ~340px wide — tuck them back inside and shrink them */
  [data-cine-hero] > .absolute.-left-6 {
    left: 0.4rem;
    top: 0.75rem;
  }
  [data-cine-hero] > .absolute.-right-4 {
    right: 0.4rem;
    bottom: 1rem;
  }
  [data-cine-hero] > .absolute.-left-6,
  [data-cine-hero] > .absolute.-right-4 {
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 1rem;
  }
  [data-cine-hero] > .absolute .h-10.w-10 {
    height: 2rem;
    width: 2rem;
  }
  [data-cine-hero] > .absolute .h-10.w-10 svg {
    height: 1rem;
    width: 1rem;
  }

  /* --- about: the 2x2 feature cards get very narrow at 360px --- */
  #about .mx-auto.grid { gap: 2.5rem; }
  #about .grid.grid-cols-2.gap-4 { gap: 0.75rem; }
  #about .mt-8.grid.grid-cols-2 { gap: 0.75rem; }
  #about .mt-8.grid.grid-cols-2 > div { padding: 1rem; }
  #about .mt-8.grid.grid-cols-2 .text-sm { font-size: 0.78rem; line-height: 1.35; }

  /* --- products --- */
  #products .pc-media { height: 16rem; }
  #products article .p-7 { padding: 1.4rem; }
  #products .mt-16 { margin-top: 2.5rem; }
  #products .p-8 { padding: 1.5rem; }

  /* --- gallery: give the two-up cards room for a wrapped title --- */
  #gallery .mt-14 {
    margin-top: 2.25rem;
    grid-auto-rows: 200px;
    gap: 0.75rem;
  }
  #gallery .mt-14 h3 { font-size: 1rem; }
  #gallery .mt-14 .absolute.left-4.top-4 { left: 0.6rem; top: 0.6rem; }
  #gallery .mt-14 .absolute.inset-x-4.bottom-4 { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; }

  /* --- process wheel: the outer icon chips sit on the wheel's
         radius, so the box needs side room or they clip --- */
  #process-wheel > .mx-auto.mt-16 {
    margin-top: 2.5rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
  #process-wheel .animate-panel { border-radius: 1.5rem; }

  /* --- testimonials / FAQ --- */
  section .rounded-\[2rem\].p-8 { padding: 1.5rem; }
  section .space-y-3 button { padding: 1rem 1.15rem; }
  section .space-y-3 button span.font-display { font-size: 1rem; line-height: 1.35; }
  section .space-y-3 .overflow-hidden p { padding: 0 1.15rem 1.25rem; }

  /* --- contact: p-10 + px-6 left only 262px of content, and the
         un-breakable email/address strings forced the cards wider
         than that, so they were clipped by the card's overflow --- */
  #contact .rounded-\[2\.5rem\] { padding: 1.5rem; border-radius: 1.75rem; }
  #contact iframe { height: 260px; }
  #contact .grid.gap-4 > a { padding: 0.9rem 1rem; gap: 0.75rem; }

}

/* Every flex/grid child defaults to min-width:auto (= min-content).
   A long email address or street address therefore refuses to shrink
   and blows the card out of its container. */
#contact .grid.gap-4 > a,
#contact .grid.gap-4 > a > div,
.inq-direct {
  min-width: 0;
}
#contact .grid.gap-4 > a .font-medium {
  overflow-wrap: anywhere;
}


/* ------------------------------------------------------------
   4. Compact phones — up to 380px (iPhone SE, Galaxy S-mini…)
   ------------------------------------------------------------ */

@media (max-width: 380px) {
  main > section:not(.vs-section) { padding-top: 3.25rem; padding-bottom: 3.25rem; }

  /* `section:not(.vs-section)` and section 3's `section:first-of-type`
     are both (0,0,1,2), so the rule above — being later — also won the
     hero and pulled its top padding to 3.25rem/52px. The fixed header
     is 100px tall, so the eyebrow and headline rendered underneath it.
     Restore the hero's own clearance; it must outlive the tie. */
  main > section:first-of-type { padding-top: 6.75rem; padding-bottom: 2.5rem; }

  .hero-stats { gap: 0.6rem; }
  .hero-stats .font-display { font-size: 1.4rem; }

  #about .mt-8.grid.grid-cols-2 { grid-template-columns: 1fr; }
  #gallery .mt-14 { grid-auto-rows: 180px; }
  #products .pc-media { height: 14rem; }

  /* the gallery filter row wraps to three lines otherwise */
  #gallery .flex.flex-wrap.gap-2 button { padding: 0.45rem 0.75rem; font-size: 0.65rem; }
}


/* ------------------------------------------------------------
   5. Large phones / small tablets — 480px to 767px
   The single-column stacks start to look sparse here, so the
   card grids go two-up before the `md:` rules take over.
   ------------------------------------------------------------ */

@media (min-width: 480px) and (max-width: 767.98px) {
  #products .grid.grid-cols-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #products .grid.grid-cols-1 > article:last-child { grid-column: 1 / -1; }
  #products .grid.grid-cols-1 > article:last-child .pc-media { height: 18rem; }

  section .mt-14.grid.grid-cols-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  section .mt-14.grid.grid-cols-1 > figure:last-child { grid-column: 1 / -1; }

  #gallery .mt-14 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 190px; }
  #gallery .mt-14 > button:first-child { grid-column: span 2; grid-row: span 2; }
}


/* ------------------------------------------------------------
   6. Tablets — 768px to 1023px
   Tailwind's `md:` rules fire at 768 and immediately go to the
   full desktop layout: three product cards at 214px each, a
   four-column gallery, a 6/6 hero split. All too tight here.
   ------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1023.98px) {

  /* --- hero: give the copy more of the row than the media --- */
  main > section:first-of-type { padding-top: 8rem; padding-bottom: 4.5rem; }
  main > section:first-of-type .md\:col-span-6:first-child { grid-column: span 7 / span 7; }
  main > section:first-of-type .md\:col-span-6:last-child { grid-column: span 5 / span 5; }
  main > section:first-of-type .mx-auto.grid { gap: 2rem; }

  /* --- products: 3-up leaves 214px per card; 2-up is readable --- */
  #products .md\:grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #products .md\:grid-cols-3 > article:last-child { grid-column: 1 / -1; }
  #products .md\:grid-cols-3 > article:last-child .pc-media { height: 22rem; }

  /* --- testimonials --- */
  section .md\:grid-cols-3 figure { padding: 1.75rem; }
  section .mt-14.md\:grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  section .mt-14.md\:grid-cols-3 > figure:last-child { grid-column: 1 / -1; }

  /* --- gallery: four columns is ~170px per tile at this width --- */
  #gallery .md\:grid-cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 200px;
  }

  /* --- process wheel stacks (lg: two-up); cap it so the panel
         does not get pushed a full screen down --- */
  #process-wheel .aspect-square { max-width: 33rem; }

  /* --- about / FAQ two-up columns need a smaller gutter --- */
  #about .mx-auto.grid { gap: 2.5rem; }
  section .max-w-6xl.md\:grid-cols-2 { gap: 2.5rem; }

  /* --- contact --- */
  #contact .rounded-\[2\.5rem\] { padding: 2.5rem; }
  #contact iframe { height: 320px; }
}


/* ------------------------------------------------------------
   7. Laptops — 1024px to 1439px
   ------------------------------------------------------------ */

@media (min-width: 1024px) and (max-width: 1439.98px) {
  #process-wheel .aspect-square { max-width: 34rem; }
}


/* ------------------------------------------------------------
   8. Desktops and large monitors
   Content is capped at max-w-7xl (1280px). On a 1920 monitor that
   leaves 320px of dead margin each side, and 640px on a 2560. The
   containers grow in steps rather than going full-bleed, which
   would push line lengths past a readable measure.
   ------------------------------------------------------------ */

@media (min-width: 1536px) {
  .max-w-7xl { max-width: 88rem; }   /* 1280 -> 1408 */
  .max-w-6xl { max-width: 76rem; }   /* 1152 -> 1216 */
  .max-w-5xl { max-width: 64rem; }
  .max-w-2xl { max-width: 46rem; }

  main > section:not(.vs-section) { padding-top: 9rem; padding-bottom: 9rem; }

  #products .pc-media { height: 24rem; }
  #gallery .md\:grid-cols-4 { grid-auto-rows: 260px; }
  #process-wheel .aspect-square { max-width: 46rem; }
}

@media (min-width: 1920px) {
  .max-w-7xl { max-width: 96rem; }   /* 1536 */
  .max-w-6xl { max-width: 82rem; }
  .max-w-2xl { max-width: 48rem; }

  #products .pc-media { height: 26rem; }
  #gallery .md\:grid-cols-4 { grid-auto-rows: 300px; }
  #process-wheel .aspect-square { max-width: 50rem; }

  /* body copy keeps pace with the larger canvas */
  main p.text-lg { font-size: 1.2rem; }
}

@media (min-width: 2400px) {
  .max-w-7xl { max-width: 104rem; }
  #process-wheel .max-w-\[1400px\] { max-width: 108rem; }
}


/* ------------------------------------------------------------
   9. Phones in landscape
   Short viewport + wide: the hero's tall media and the nav panel
   both need to stop assuming vertical room.
   ------------------------------------------------------------ */

@media (orientation: landscape) and (max-height: 540px) and (max-width: 1024px) {
  main > section:first-of-type {
    padding-top: 5.5rem;
    padding-bottom: 2.5rem;
  }
  main > section:first-of-type .mx-auto.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
    align-items: center;
  }
  /* wide+short landscape phones (e.g. 932x430) land inside the tablet
     width bucket too, whose 7fr/5fr span rule would otherwise fight
     the 2-col track definition above and stack the hero instead of
     placing it side by side */
  main > section:first-of-type .md\:col-span-6:first-child,
  main > section:first-of-type .md\:col-span-6:last-child {
    grid-column: span 1 / span 1;
  }
  [data-cine-hero] { max-width: 17rem; }
  main > section:not(.vs-section) { padding-top: 3rem; padding-bottom: 3rem; }
}


/* ------------------------------------------------------------
   10. Touch and pointer affordances
   ------------------------------------------------------------ */

/* iOS Safari zooms the page whenever a focused field is under 16px */
@media (max-width: 1023.98px) {
  .inq-field,
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* WCAG 2.5.8 asks for ~44px targets; several pills sit at 34-36px */
@media (hover: none) {
  #gallery .flex.flex-wrap.gap-2 button,
  #products button,
  header .hdr-cta,
  .inq-btn {
    min-height: 44px;
  }
  #contact a[href^="tel"],
  #contact a[href^="mailto"] {
    display: inline-block;
    padding-block: 0.3rem;
  }
  /* the wheel's number chips double as the visible hit area */
  #process-wheel .justify-center.gap-1\.5 > button {
    padding-block: 0.75rem;
    background-clip: content-box;
  }
}


/* ------------------------------------------------------------
   11. Mobile navigation
   The header nav is `hidden md:flex`, so below 768px the site had
   no way to reach any section. This is the replacement: a
   hamburger in the header bar and a drop-down panel.
   ------------------------------------------------------------ */

.mnav-toggle {
  display: none;
  position: relative;
  height: 44px;
  width: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid oklch(32% 0.06 145 / 0.22);
  border-radius: 999px;
  background: oklch(100% 0 0 / 0.55);
  color: var(--forest);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.mnav-toggle:hover { background: oklch(100% 0 0 / 0.9); }
.mnav-toggle:focus-visible { outline: 2px solid var(--oil-deep); outline-offset: 2px; }

.mnav-bar {
  position: absolute;
  left: 50%;
  height: 1.5px;
  width: 18px;
  border-radius: 2px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.mnav-bar:nth-child(1) { top: 16px; }
.mnav-bar:nth-child(2) { top: 21px; }
.mnav-bar:nth-child(3) { top: 26px; }

.mnav-toggle[aria-expanded="true"] .mnav-bar:nth-child(1) {
  top: 21px;
  transform: translateX(-50%) rotate(45deg);
}
.mnav-toggle[aria-expanded="true"] .mnav-bar:nth-child(2) { opacity: 0; }
.mnav-toggle[aria-expanded="true"] .mnav-bar:nth-child(3) {
  top: 21px;
  transform: translateX(-50%) rotate(-45deg);
}

.mnav-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: oklch(22% 0.02 60 / 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mnav-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mnav-panel {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: calc(100% - 0.35rem);
  display: none;
  overflow-y: auto;
  max-height: calc(100dvh - 6.5rem);
  padding: 0.6rem 0.7rem 1rem;
  border: 1px solid var(--border);
  border-radius: 1.75rem;
  background: oklch(97.5% 0.018 85 / 0.97);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(-0.6rem);
  /* the closed panel keeps its full 343x468 box. Without these two it
     stays hit-testable at opacity 0, so it silently swallows every tap
     over the top of the page and fires whichever invisible nav link is
     under the finger. `visibility` also drops the links out of the tab
     order while closed; it is delayed so the fade-out still plays. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.28s;
}
.mnav-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s;
}

.mnav-links { display: grid; }
.mnav-links a {
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  color: var(--foreground);
  font-size: 1.02rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.mnav-links a:hover,
.mnav-links a:focus-visible {
  background: oklch(32% 0.06 145 / 0.07);
  color: var(--forest);
}

.mnav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  min-height: 48px;
  border-radius: 999px;
  background: var(--forest);
  color: var(--cream);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.mnav-meta {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.9rem;
  padding: 0 1rem;
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
}
.mnav-meta a {
  color: var(--muted-foreground);
  font-size: 0.85rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.mnav-meta a:hover { color: var(--oil-deep); }

/* only below the `md:` breakpoint, where the desktop nav disappears */
@media (max-width: 767.98px) {
  .mnav-toggle { display: inline-flex; }
  .mnav-panel { display: block; }
  header > div { gap: 0.6rem; }
}

/* the header CTA and the hamburger together overflow a 360px bar */
@media (max-width: 379.98px) {
  header .hdr-cta { display: none; }
}

@media (max-width: 767.98px) {
  header > div { padding-left: 1rem; padding-right: 1rem; }
  header .hdr-cta { padding-inline: 0.9rem; font-size: 0.8rem; }
  header a[aria-label="Anuva Organics — home"] img { height: 44px !important; }
  header a[aria-label="Anuva Organics — home"] > span > span:first-child { font-size: 23px !important; }
  header a[aria-label="Anuva Organics — home"] > span > span:last-child { font-size: 9.5px !important; }
}

body.mnav-open { overflow: hidden; }


/* ------------------------------------------------------------
   12. Reduced motion
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .mnav-panel,
  .mnav-scrim,
  .mnav-bar {
    transition-duration: 0.01ms;
    /* `transition-duration` alone leaves the panel's 0.28s visibility
       delay in place, which would keep it hit-testable after closing */
    transition-delay: 0s;
  }
}


/* ------------------------------------------------------------
   13. Fixes found by device-width testing
   ------------------------------------------------------------ */

/* --- #process overflowed its row on tablets ---
   The section is `md:grid-cols-12 md:gap-20`. Eleven 80px gutters
   claim 880px of the row, but the content box is only 705px at 768px,
   so all twelve tracks solved to 0px and the copy column ran out to
   904px — clipped rather than scrollable, because the page wrapper
   carries `overflow-x-hidden`, so the text was simply lost. Cap the
   gutter until the container can actually afford 80px. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  #process .mx-auto.grid.md\:grid-cols-12 {
    column-gap: 2rem;
    row-gap: 3.5rem;
  }
}


/* --- touch targets section 10 did not reach --- */
@media (hover: none) {

  /* The wheel's visible icon chip lives inside `.wheel-label`, which is
     pointer-events:none and is pushed radially outward by JS. So the
     11px chip a thumb aims at takes no clicks at all, while the
     button's own 22px box sits somewhere else on the ring. Give the
     chip its clicks back — the event bubbles to the parent button —
     and a 44px hit area, leaving the wheel's geometry untouched. */
  #process-wheel .wheel-label span.grid {
    position: relative;
    pointer-events: auto;
  }
  #process-wheel .wheel-label span.grid::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    height: 44px;
    width: 44px;
    transform: translate(-50%, -50%);
  }

  /* The progress pills under the wheel are 6px tall. They are
     border-box with an explicit `h-1.5`, so the padding alone has to
     add up to the full 44px — it does not stack on top of the 6px. */
  #process-wheel .justify-center.gap-1\.5 > button {
    padding-block: 1.375rem;
  }

  /* text links sitting at 16-30px tall */
  .mnav-meta a,
  .inq-direct a,
  #contact .absolute.bottom-4 a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }


  /* hero scroll cue */
  main > section:first-of-type > a[href="#about"] {
    min-height: 44px;
  }

  /* the story rail dots keep their painted 32px; only the hit area
     grows. `.vs-dot` is already position:relative in story.css. */
  .vs-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    height: 44px;
    width: 44px;
    transform: translate(-50%, -50%);
  }

  /* 2.6rem -> 2.75rem. Deliberately NOT given `position: relative`
     here: it is position:fixed in story.css and relies on that. */
  .vs-motion-toggle {
    height: 2.75rem;
    width: 2.75rem;
  }
}