/* ============================================================
   NuCare Health: "Clear Water" design language
   Light premium health-tech · Sora + Figtree · gradient accents
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---- Tokens ---- */
:root {
  --ink: #10293B;
  --ink-soft: #33475A;
  --muted: #4A5F70;
  --navy: #1B4F8A;
  --teal-deep: #0F6E68;
  --green: #34A466;
  --green-deep: #1E7A4A;
  --mint: #E2F4E9;
  --mist: #F2F8F5;
  --line: #E3EDE8;
  /* white shared by the skyline bottom fade and the pain-point top, as RGB
     channels so the same colour can be used opaque and fully transparent. The
     image simply fades to page white and the pain-point below continues it. */
  --skyline-fade-rgb: 255 255 255;
  --grad-decor: linear-gradient(90deg, #1B4F8A, #1993A4 50%, #34A466);
  --grad-text: linear-gradient(90deg, #1B4F8A, #147D82 55%, #1F8A50);
  --grad-deep: linear-gradient(100deg, #163F6E, #0F6E68 55%, #1E7A4A);
  --radius-card: 22px;
  --shadow-soft: 0 6px 24px rgba(16, 52, 86, .06);
  --shadow-lift: 0 24px 48px rgba(20, 90, 70, .14);
  --maxw: 1200px;
  --pad: clamp(1rem, 4vw, 3rem);
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
}

/* ---- Base ---- */
body { font-family: var(--font-body); color: var(--ink); background: #fff; line-height: 1.65; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.18; color: var(--ink); letter-spacing: -.02em; }
::selection { background: var(--mint); }
:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; }
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
/* Below the skyline band the sections are text-led rather than card-led, so the
   full rhythm above reads as too airy. Tighten it by ~30% from the pain-point down. */
.painpoint, .credibility, .story, .trust, .contact { padding-block: clamp(2.8rem, 6.3vw, 5.25rem); }

.skip-link {
  position: absolute; left: 1rem; top: -3.5rem; z-index: 200;
  background: var(--ink); color: #fff; padding: .6rem 1.1rem; border-radius: 10px;
  font-weight: 600; transition: top .15s ease;
}
.skip-link:focus-visible { top: 1rem; }

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-text { background: none; color: var(--navy); -webkit-text-fill-color: currentColor; }
}

/* ---- Dots motif (logo mark: navy · green · navy) ---- */
.dots { display: inline-flex; gap: .45rem; }
.dots i { width: 9px; height: 9px; border-radius: 3px; background: var(--navy); }
.dots i:nth-child(2) { background: var(--green); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.9rem; border: 0; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: .98rem;
  transition: transform .18s ease, box-shadow .25s ease, filter .18s ease;
}
.btn-grad {
  background: var(--navy); color: #fff;
  box-shadow: 0 10px 30px rgba(20, 64, 107, .18);
}
.btn-grad:hover {
  transform: translateY(-2px); filter: brightness(1.07);
  box-shadow: 0 16px 40px rgba(20, 64, 107, .3);
}

/* ---- Header ---- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled {
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: rgba(227, 237, 232, .9);
  box-shadow: 0 10px 30px rgba(16, 52, 86, .08);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding-block: .8rem; }
/* Larger on landing, then shrinks to the compact navbar size once the header
   gains .scrolled (same scroll state that fades in the header background). */
.brand-logo { height: 60px; width: auto; transition: height .3s ease; }
.site-header.scrolled .brand-logo { height: 42px; }
.nav-menu { display: flex; align-items: center; gap: 2rem; }
.nav-menu a { font-weight: 500; font-size: .97rem; color: var(--ink); }
.nav-menu a:not(.nav-cta):hover {
  color: var(--green-deep);
  text-decoration: underline; text-underline-offset: 7px;
  text-decoration-color: var(--green); text-decoration-thickness: 2px;
}
.nav-menu .nav-cta { padding: .6rem 1.35rem; font-size: .92rem; color: #fff; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: .5rem; }
.nav-toggle span { width: 26px; height: 2px; border-radius: 2px; background: var(--ink); transition: .2s; }
@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  /* keep the header compact on mobile (the menu drops from a fixed 63px top) */
  .brand-logo, .site-header.scrolled .brand-logo { height: 42px; }
  .nav-menu {
    position: fixed; inset: 63px 0 auto 0; z-index: 55;
    flex-direction: column; align-items: flex-start; gap: 1.1rem;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px);
    padding: 1.5rem var(--pad) 2rem; border-bottom: 1px solid var(--line);
    transform: translateY(-130%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .nav-menu.open { transform: translateY(0); visibility: visible; transition: transform .25s ease, visibility 0s; }
}

/* ---- Hero ---- */
.hero {
  position: relative; overflow: hidden; background: #fff;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
}
/* .container is a flex item here, so its margin-inline:auto would shrink it to
   content width. width:100% makes it fill then cap at max-width, keeping the
   same gutter as the header .container so the hero text lines up with the logo. */
.hero > .container { width: 100%; }
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  position: absolute; left: 0; top: -5%; width: 100%; height: 110%;
  object-fit: cover; object-position: 70% center;
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, rgba(0,0,0,.5) 30%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 2%, rgba(0,0,0,.5) 30%, #000 62%);
}
.hero-inner { position: relative; z-index: 1; max-width: 780px; padding-block: 6rem 2.5rem; }
.hero .dots { margin-bottom: 1.4rem; }
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); max-width: 17ch; }
.hero-sub { margin-top: 1.4rem; font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--muted); max-width: 46ch; }
.hero-cta { margin-top: 2.4rem; }

/* ---- Section headings ---- */
.sec-head { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 2.75rem; }
.sec-head .dots i { width: 8px; height: 8px; }
.sec-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }

.ellipsis-dots { display: inline-flex; align-items: flex-end; gap: .16em; margin-left: .16em; vertical-align: baseline; }
.ellipsis-dots i { width: .16em; height: .16em; border-radius: 50%; background: var(--navy); }
.ellipsis-dots i:nth-child(2) { background: var(--green); }

/* ---- Benefits ---- */
.benefits {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--mist) 24%, var(--mist) 76%, #fff 100%);
}
/* Large NuCare logo watermark bleeding off the right of the section, behind the
   content (the container is lifted above it). overflow:hidden clips the bleed. */
.benefits::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -5%; top: 50%; transform: translateY(-50%);
  width: min(860px, 56vw); aspect-ratio: 369.56 / 283;
  background: url("assets/NuCare-logo(mine).svg") center / contain no-repeat;
  opacity: .08;
}
.benefits > .container { position: relative; z-index: 1; }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: end; }
.benefit-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 1.9rem 1.5rem; box-shadow: var(--shadow-soft); color: var(--ink);
}
/* Growing-graph stagger: cards share a baseline (align-items:end) and step up in
   height left to right, so the row reads like rising bars. */
.benefit-card:nth-child(1) { min-height: 208px; }
.benefit-card:nth-child(2) { min-height: 260px; }
.benefit-card:nth-child(3) { min-height: 312px; }
.benefit-card:nth-child(4) { min-height: 364px; }
/* One continuous chart-arrow spanning the whole grid, in the band above the text.
   Each card holds the same full-width shape at the same anchor; the horizontal
   offset reveals that card's slice and overflow:hidden hides it in the gaps, so it
   reads as a single arrow seen only through the cards. newarrow.svg is used as an
   alpha mask, filled with a gradient that fades in navy from the start of the
   arrow and shifts to green near the arrowhead. */
.benefit-graph {
  position: absolute; left: 0; bottom: 22px; z-index: 0; pointer-events: none;
  width: calc(400% + 3.75rem); height: 330px; max-width: none; opacity: .1;
  background: linear-gradient(90deg, transparent 0%, #215495 40%, #215495 50%, #34A466 100%);
  -webkit-mask: url("assets/newarrow.svg") 0 0 / 100% 100% no-repeat;
  mask: url("assets/newarrow.svg") 0 0 / 100% 100% no-repeat;
}
.benefit-card:nth-child(2) .benefit-graph { left: calc(-100% - 1.25rem); }
.benefit-card:nth-child(3) .benefit-graph { left: calc(-200% - 2.5rem); }
.benefit-card:nth-child(4) .benefit-graph { left: calc(-300% - 3.75rem); }
.benefit-title {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 700; font-size: 1.22rem;
  line-height: 1.25; letter-spacing: -.01em; color: var(--ink); margin-bottom: .7rem;
}
.benefit-desc { position: relative; z-index: 1; color: var(--muted); font-size: .96rem; line-height: 1.55; }
@media (max-width: 820px) {
  .benefit-grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  .benefits .benefit-card { min-height: 0; justify-content: flex-start; }
  .benefit-graph { display: none; }
}
@media (max-width: 520px) { .benefit-grid { grid-template-columns: 1fr; } }

/* ---- Services ---- */
/* Paint the services section (white) just over the skyline band's top edge to
   hide the band layer's sub-pixel clip seam under smooth scroll — mirrors the
   pain-point overlap on the band's bottom edge. */
.services { position: relative; z-index: 1; margin-bottom: -2px; background: #fff; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.service-card {
  display: flex; flex-direction: column; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 1.8rem 1.6rem 1.5rem; box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: #BFE3D2; }
.service-card:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 3px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--navy); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  margin-bottom: 1.2rem;
}
.service-card:nth-child(3n+2) .chip { background: var(--green); }
.service-name { font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; color: var(--ink); margin-bottom: .45rem; letter-spacing: -.01em; }
.service-lead { font-weight: 600; font-size: .98rem; color: var(--ink-soft); margin-bottom: .55rem; }
.service-blurb {
  color: var(--muted); font-size: .95rem;
  display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.learn-more { margin-top: auto; padding-top: 1.25rem; font-weight: 600; font-size: .95rem; color: var(--green-deep); transition: transform .18s ease, color .18s ease; }
.service-card:hover .learn-more { transform: translateX(4px); color: var(--teal-deep); }
@media (max-width: 900px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .service-grid { grid-template-columns: 1fr; } }

/* ---- Skyline band ---- */
/* translateZ(0) keeps the parallaxed image and its clip on one GPU layer so the
   clip edges stay crisp while scrolling. No background colour here: a bare edge
   should fall back to page white (invisible against the sections above/below),
   never a coloured hairline. The white/green seams where this band meets its
   neighbours are hidden by the .services and .painpoint overlaps (see those rules). */
.skyline-band {
  position: relative; overflow: hidden; height: clamp(300px, 52vw, 540px);
  transform: translateZ(0);
}
.skyline-band img {
  position: absolute; left: 0; top: -30%; width: 100%; height: 160%;
  object-fit: cover;
}
.skyline-band::before, .skyline-band::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
}
.skyline-band::before { top: 0; height: 24%; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0)); }
/* Fade the image into the shared white. The gradient reaches full opacity and
   HOLDS solid white over the bottom strip, so the image is completely covered
   before the section edge — the pain-point below starts on the same solid white,
   so there is no brightness step (the earlier seam) at the boundary. */
.skyline-band::after {
  bottom: 0; height: 42%;
  background: linear-gradient(0deg,
    rgb(var(--skyline-fade-rgb)) 0%,
    rgb(var(--skyline-fade-rgb)) 12%,
    rgb(var(--skyline-fade-rgb) / 0) 100%);
}

/* ---- Pain-point ---- */
/* white flows down from the skyline band (same solid white at the top edge)
   and stays white to the first line of copy.
   The band is its own GPU layer (translateZ(0)); under ScrollSmoother's fractional
   transform its bottom edge can leave a 1px seam. Painting this section above the
   band (z-index) and overlapping it by 2px hides that edge under solid-green-on-
   solid-green, so no seam is ever visible. */
.painpoint {
  position: relative; z-index: 1; margin-top: -2px;
  background: linear-gradient(180deg,
    rgb(var(--skyline-fade-rgb)) 0%,
    #fff clamp(5rem, 10vw, 9.5rem));
}
.painpoint-inner { max-width: 940px; }
.painpoint h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.22; margin-bottom: 2.4rem; }
/* the descendant selector (em *) keeps the gradient applied directly to any
   wrapper SplitText injects around these words on scroll — background-clip
   isn't inherited, so a plain ".painpoint h2 em" rule leaves split words invisible */
.painpoint h2 em, .painpoint h2 em * {
  font-style: italic;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* synthetic italic overhangs its box; pad the background so clip:text keeps the
     last letter's slant, and cancel the pad with a negative margin to keep spacing */
  padding-right: .12em; margin-right: -.12em;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .painpoint h2 em, .painpoint h2 em * { background: none; color: var(--green-deep); -webkit-text-fill-color: currentColor; }
}

/* ---- Credibility & Story ---- */
.photo-frame { border-radius: 26px; overflow: hidden; box-shadow: 0 30px 70px rgba(16, 52, 86, .14); }
.photo-frame img { width: 100%; height: auto; }
.credibility-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.credibility-text p { font-size: 1.12rem; line-height: 1.85; color: var(--ink-soft); margin-bottom: 2rem; }
.story-inner { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.story-copy p { color: var(--ink-soft); margin-bottom: 1rem; max-width: 62ch; }
.story-signoff { margin-top: 1.6rem; }
.story-signoff strong {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .story-signoff strong { background: none; color: var(--navy); -webkit-text-fill-color: currentColor; }
}
@media (max-width: 900px) {
  .credibility-inner, .story-inner { grid-template-columns: 1fr; }
  .story-inner .photo-frame { order: -1; }
}

/* ---- Trust marquee ---- */
.trust { padding-bottom: clamp(2.8rem, 6.3vw, 5.25rem); }
.trust .sec-head { margin-bottom: 2rem; }
.marquee {
  overflow: hidden; padding-block: 1.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; gap: 4.5rem; padding-right: 4.5rem; }
.marquee-group img { height: 46px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .2s ease, opacity .2s ease; }
.marquee-group img:hover { filter: grayscale(0); opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Contact ---- */
.contact {
  background:
    radial-gradient(700px 380px at 6% 0%, #E9F3FA, rgba(233, 243, 250, 0) 70%),
    radial-gradient(700px 380px at 94% 100%, var(--mint), rgba(226, 244, 233, 0) 70%);
}
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact .sec-head { margin-bottom: 1.5rem; }
.contact-note { color: var(--muted); margin-bottom: 2rem; font-size: 1.08rem; }
.contact-list { list-style: none; display: grid; gap: 1.15rem; }
.contact-list li { color: var(--ink-soft); }
.contact-list strong { color: var(--ink); font-weight: 600; }
.contact-list a { color: var(--green-deep); font-weight: 600; }
.contact-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-form {
  display: grid; gap: 1.1rem;
  background: rgba(255, 255, 255, .8); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 26px;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: 0 30px 80px rgba(16, 52, 86, .12);
}
.contact-form label { display: grid; gap: .45rem; font-weight: 600; font-size: .92rem; color: var(--ink); }
.contact-form input, .contact-form textarea {
  padding: .85rem 1rem; border: 1px solid #DCE9E3; border-radius: 12px;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: #fff;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: 2px solid var(--green-deep); outline-offset: 2px; border-color: var(--green-deep);
}
.contact-form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; }
.form-status { min-height: 1.3em; font-weight: 600; font-size: .95rem; color: var(--ink-soft); display: flex; align-items: center; }
.form-status.ok { color: var(--green-deep); }
.form-status.err { color: #B23A2E; }
.send-dots { display: inline-flex; gap: .3rem; margin-left: .5rem; }
.send-dots i { width: 7px; height: 7px; border-radius: 2px; background: var(--navy); animation: sendpulse 1s ease-in-out infinite; }
.send-dots i:nth-child(2) { background: var(--green); animation-delay: .15s; }
.send-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sendpulse { 0%, 100% { opacity: .25; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@media (max-width: 820px) { .contact-inner { grid-template-columns: 1fr; } }

/* ---- Footer ---- */
.site-footer { background: #0E2B47; color: #B9CBDA; padding-block: 3.5rem; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; }
.footer-logo { height: 46px; background: #fff; padding: .5rem .8rem; border-radius: 12px; }
.footer-address { font-style: normal; font-size: .95rem; line-height: 1.9; }
.footer-address a { color: #9FD9B4; }
.footer-address a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-copy { font-size: .85rem; opacity: .75; }

/* ---- Drawer ---- */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(13, 34, 52, .45); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s ease;
}
.drawer-backdrop.show { opacity: 1; }
.drawer-backdrop:not(.show) { pointer-events: none; }
.contact:focus { outline: none; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(600px, 100%);
  background: #fff; z-index: 100; overflow-y: auto;
  box-shadow: -30px 0 80px rgba(13, 34, 52, .25);
  transform: translateX(100%); transition: transform .34s cubic-bezier(.32, .72, .28, 1);
}
.drawer.open { transform: translateX(0); }
.drawer-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 1.05rem;
}
.drawer-close:hover { background: var(--mint); }
.drawer-media { margin: 0; }
.drawer-media img {
  width: 100%; height: 240px; object-fit: cover;
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}
.drawer-body { padding: 1.6rem clamp(1.6rem, 4vw, 2.6rem) clamp(2rem, 5vw, 3rem); }
.drawer[data-no-media] .drawer-body { padding-top: clamp(4rem, 8vh, 5.5rem); }
.drawer-title { font-size: clamp(1.6rem, 4vw, 2.1rem); }
.drawer-tagline { color: var(--teal-deep); font-weight: 600; font-size: 1.05rem; margin: .55rem 0 1.4rem; }
.drawer-content p { color: var(--muted); margin-bottom: 1rem; }
.drawer-content ul, .drawer-content ol { color: var(--muted); margin: 0 0 1rem 1.25rem; }
.drawer-content li { margin-bottom: .35rem; }
.drawer-content li::marker { color: var(--green-deep); }
.drawer-cta { margin-top: 1.4rem; }
body.drawer-open { overflow: hidden; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .marquee-track { width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee-group[aria-hidden] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}