/* ============================================================
   EVOLVE — FLAGSHIP LUX SYSTEM
   Couture editorial · warm light-luxe · cinematic contrast
   ============================================================ */

:root {
  /* tweakable knobs (kept for Tweaks panel) */
  --h-primary: 58;      /* warm taupe (logo figure) */
  --h-accent: 32;       /* dusty blush rose (logo petals) */
  --sat: 1;

  /* ---- couture palette · drawn from the Evolve logo ---- */
  --bone:      oklch(0.975 0.009 84);   /* warm ivory paper      */
  --bone-2:    oklch(0.957 0.013 74);   /* deeper sand surface   */
  --bone-3:    oklch(0.935 0.018 66);   /* card warmth           */
  --paper:     oklch(0.992 0.006 86);
  --pine:      oklch(0.275 0.016 52);   /* deep mocha (dark sections) */
  --pine-2:    oklch(0.335 0.018 54);   /* lifted mocha          */
  --ink:       oklch(0.305 0.014 50);   /* warm espresso text    */
  --ink-soft:  oklch(0.46 0.014 52);
  --ink-faint: oklch(0.6 0.012 54);
  --line:      oklch(0.86 0.012 70 / 0.75);
  --line-2:    oklch(0.81 0.016 68);

  /* taupe ramp (primary) — muted, earthy, from the meditating figure */
  --teal:      oklch(0.6 calc(0.028 * var(--sat)) var(--h-primary));
  --teal-deep: oklch(0.46 calc(0.026 * var(--sat)) var(--h-primary));
  --teal-bright:oklch(0.68 calc(0.03 * var(--sat)) var(--h-primary));
  --teal-wash: oklch(0.93 calc(0.016 * var(--sat)) var(--h-primary));
  /* blush ramp (accent) — dusty rose, from the lotus petals */
  --coral:     oklch(0.79 calc(0.05 * var(--sat)) var(--h-accent));
  --coral-deep:oklch(0.66 calc(0.056 * var(--sat)) var(--h-accent));
  --coral-soft:oklch(0.91 calc(0.03 * var(--sat)) var(--h-accent));
  --blush:     oklch(0.92 0.028 36);
  --gold:      oklch(0.8 0.045 70);
  --gold-deep: oklch(0.68 0.05 66);
  --status-green: oklch(0.7 0.13 152);  /* "available" indicator dot */

  /* ---- type ---- */
  --display: "Bodoni Moda", "Times New Roman", serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --label-tracking: 0.34em;

  --pad: clamp(88px, 11vw, 184px);
  --edge: clamp(20px, 5vw, 92px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--body);
  background: var(--bone);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--coral); color: var(--pine); }

/* ---- film grain + vignette atmosphere ---- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  opacity: 0.5; mix-blend-mode: multiply;
}
.atmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.atmos i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; }
.atmos .g1 { width: 52vw; height: 52vw; top: -16vw; right: -12vw; background: radial-gradient(circle, var(--teal-wash), transparent 68%); opacity: 0.7; }
.atmos .g2 { width: 40vw; height: 40vw; top: 38vw; left: -14vw; background: radial-gradient(circle, var(--coral-soft), transparent 68%); opacity: 0.55; }

/* ---- layout ---- */
.shell { width: 100%; max-width: 1480px; margin-inline: auto; padding-inline: var(--edge); }
.bleed { width: 100%; }
section { position: relative; }
.pad { padding-block: var(--pad); }
.pad-t { padding-top: var(--pad); }

/* ---- labels ---- */
.label {
  font-family: var(--body); font-size: 0.72rem; font-weight: 600;
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  color: var(--teal-deep); display: inline-flex; align-items: center; gap: 0.85em;
}
.label::before { content: ""; width: 30px; height: 1px; background: currentColor; opacity: 0.6; }
.label.bare::before { display: none; }
.label.center { justify-content: center; }
.label .idx { font-family: var(--display); font-style: italic; font-weight: 500; letter-spacing: 0; font-size: 0.95rem; }

/* ---- display type ---- */
.display, h1, h2 { font-family: var(--display); font-weight: 500; line-height: 0.98; letter-spacing: -0.018em; color: var(--ink); }
h1 { font-size: clamp(3.4rem, 8.5vw, 9rem); font-weight: 600; }
h2 { font-size: clamp(2.5rem, 5.2vw, 5rem); }
h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.04; letter-spacing: -0.01em; }
em.ital, .ital { font-style: italic; font-weight: 400; }
.tint { color: var(--teal-deep); }
.coral-tint { color: var(--coral-deep); }
.outline { -webkit-text-stroke: 1.2px var(--ink); color: transparent; }
.lede { font-size: clamp(1.12rem, 1.55vw, 1.4rem); line-height: 1.6; color: var(--ink-soft); max-width: 54ch; font-weight: 400; }
.balance { text-wrap: balance; }
p.sm { font-size: 0.97rem; color: var(--ink-soft); }

/* ---- buttons ---- */
.btn {
  font-family: var(--body); font-weight: 600; font-size: 0.94rem;
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 1.05em 1.7em; border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  position: relative; transition: transform .35s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, box-shadow .35s;
  white-space: nowrap; will-change: transform;
}
.btn .arr { width: 1.1em; height: 1.1em; transition: transform .35s; }
.btn-primary { background: var(--pine); color: var(--bone); box-shadow: 0 14px 34px oklch(0.3 0.05 200/0.28); }
.btn-primary:hover { background: var(--teal-deep); transform: translateY(-2px); box-shadow: 0 20px 44px oklch(0.4 0.09 195/0.34); }
.btn-primary:hover .arr { transform: translate(4px,-4px); }
.btn-coral { background: var(--coral); color: var(--pine); }
.btn-coral:hover { transform: translateY(-2px); box-shadow: 0 18px 40px oklch(0.7 0.13 40/0.4); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { border-color: var(--pine); transform: translateY(-2px); }
.btn-ghost-light { background: transparent; color: var(--bone); border-color: oklch(1 0 0/0.28); }
.btn-ghost-light:hover { background: oklch(1 0 0/0.08); border-color: oklch(1 0 0/0.6); transform: translateY(-2px); }

.tlink { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; color: var(--teal-deep); font-size: 0.95rem; }
.tlink .arr { transition: transform .3s; }
.tlink:hover .arr { transform: translateX(5px); }
.tlink.underline { padding-bottom: 4px; background-image: linear-gradient(currentColor,currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .4s; }
.tlink.underline:hover { background-size: 100% 1px; }

/* ---- art-directed image plates ---- */
.plate {
  position: relative; overflow: hidden; border-radius: 2px;
  background:
    linear-gradient(155deg, oklch(0.55 0.03 var(--h-primary)/0.5), oklch(0.78 0.05 var(--h-accent)/0.45)),
    var(--bone-3);
  isolation: isolate;
}
.plate::before {
  content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: overlay; opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.plate::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 90% at 30% 18%, transparent 40%, oklch(0.25 0.018 52/0.32));
}
.plate .cap {
  position: absolute; left: 16px; bottom: 14px; z-index: 3;
  font-family: var(--body); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: oklch(0.98 0.01 90); font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.7em;
}
.plate .cap::before { content: ""; width: 22px; height: 1px; background: var(--coral); }
.plate .frame { position: absolute; inset: 12px; z-index: 2; border: 1px solid oklch(1 0 0/0.28); border-radius: 1px; pointer-events: none; }
.plate.warm { background: linear-gradient(155deg, oklch(0.8 0.05 var(--h-accent)/0.5), oklch(0.6 0.03 var(--h-primary)/0.4)), var(--bone-3); }
.plate .mono { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; opacity: 0.9; }
.plate .mono svg { width: 38%; height: 38%; opacity: 0.5; }

/* ============================================================
   NAV
   ============================================================ */
.announce {
  background: var(--pine); color: var(--bone); font-size: 0.78rem; letter-spacing: 0.04em;
  padding: 0.55em 0; position: relative; z-index: 50;
}
.announce b { color: var(--coral); font-weight: 600; }
.announce-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.announce .status { display: inline-flex; align-items: center; gap: 0.6em; }
/* "available" green — sits apart from the warm taupe/blush palette without clashing */
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--status-green);
  box-shadow: 0 0 0 0 oklch(0.7 0.13 152 / 0.55);
  animation: statusPulse 2.4s ease-out infinite;
}
@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0 oklch(0.7 0.13 152 / 0.55); }
  70%  { box-shadow: 0 0 0 7px oklch(0.7 0.13 152 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.7 0.13 152 / 0); }
}
.announce-phone { display: inline-flex; align-items: center; gap: 0.45em; color: var(--bone); font-weight: 600; white-space: nowrap; transition: color .25s; }
.announce-phone .ph-ic { width: 0.95em; height: 0.95em; flex: none; }
.announce-phone:hover { color: var(--coral); }
/* Reduced motion: a calm, solid availability dot — no pulse. */
@media (prefers-reduced-motion: reduce) {
  .status-dot { animation: none; box-shadow: none; }
}
.nav {
  position: sticky; top: 0; z-index: 100;
  background: oklch(0.972 0.013 88 / 0.72); backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--line); transition: background .4s, border-color .4s;
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1.15rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand .mk { width: auto; height: 46px; flex: none; display: block; }
.brand .wm { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.01em; line-height: 1; color: var(--ink); }
.brand .wm small { display: block; font-family: var(--body); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; }
.nav-links { display: flex; gap: 2.1rem; }
.nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); position: relative; padding-block: 4px; transition: color .25s; white-space: nowrap; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--teal-deep); transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-right { display: flex; align-items: center; gap: 1.4rem; }
.nav-phone { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5em; white-space: nowrap; }
.nav-phone .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px var(--coral-soft); }
.burger { display: none; width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; cursor: pointer; align-items: center; justify-content: center; flex: none; color: var(--ink); }
.burger span, .burger span::before, .burger span::after { content: ""; display: block; width: 18px; height: 1.6px; background: currentColor; transition: transform .3s, background .3s, top .3s; }
.burger span { position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger.open span { background: transparent; }
.burger.open span::before { transform: rotate(45deg); top: 0; }
.burger.open span::after { transform: rotate(-45deg); top: 0; }
.nav-drawer { position: absolute; top: 100%; left: 0; right: 0; background: oklch(0.972 0.013 88 / 0.97); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); box-shadow: 0 24px 50px oklch(0.3 0.04 200/0.12); display: grid; padding: 0.6rem var(--edge) 1.2rem; transform: translateY(-14px); opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.nav-drawer.open { transform: none; opacity: 1; pointer-events: auto; }
.nav-drawer a { padding: 1rem 0.3rem; font-size: 1.08rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 0.5em; }
.nav-drawer a:last-child { border-bottom: none; color: var(--teal-deep); font-weight: 600; }
.burger { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: clamp(36px, 5vw, 70px); padding-bottom: clamp(40px, 5vw, 72px); position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.hero h1 { margin: 1.6rem 0; }
.hero h1 .ln { display: block; overflow: hidden; }
.hero h1 .ln > span { display: block; }
.hero-sub { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; }
.hero .lede { flex: 1; min-width: 280px; }
.hero-cta { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 2.4rem; }
.hero-meta { display: flex; align-items: center; gap: 1.6rem; margin-top: 2.8rem; padding-top: 2rem; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.hero-rate { display: flex; align-items: center; gap: 0.9rem; }
.hero-rate .stars { color: var(--coral); letter-spacing: 2px; font-size: 0.95rem; }
.hero-rate b { font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.hero-rate small { display: block; font-size: 0.78rem; color: var(--ink-faint); margin-top: 2px; }
.hero-div { width: 1px; height: 38px; background: var(--line-2); }

.hero-art { position: relative; }
.hero-plate { aspect-ratio: 0.84; box-shadow: 0 40px 90px oklch(0.3 0.05 200/0.22); }
.float {
  position: absolute; background: oklch(0.99 0.008 90 / 0.92); backdrop-filter: blur(10px);
  border: 1px solid oklch(1 0 0/0.6); border-radius: 14px; box-shadow: 0 22px 50px oklch(0.3 0.05 200/0.2);
  padding: 1rem 1.2rem; z-index: 4;
}
.float-1 { left: -34px; bottom: 54px; display: flex; align-items: center; gap: 0.9rem; }
.float-1 .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--coral-soft); color: var(--coral-deep); display: grid; place-items: center; flex: none; }
.float-1 b { display: block; font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.float-1 small { font-size: 0.76rem; color: var(--ink-soft); }
.float-2 { right: -26px; top: 44px; display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 1.1rem; }
.float-2 .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 oklch(0.6 0.05 58/0.5); animation: pulse 2.4s infinite; }
.float-2 span { font-size: 0.84rem; font-weight: 600; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 oklch(0.6 0.05 58/0.5)} 70%{box-shadow:0 0 0 12px oklch(0.6 0.05 58/0)} 100%{box-shadow:0 0 0 0 oklch(0.6 0.05 58/0)} }

/* ---- kinetic marquee ---- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 1.6rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mq-track { display: flex; gap: 2.6rem; width: max-content; animation: mq 46s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-track span { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-style: italic; color: var(--ink); display: inline-flex; align-items: center; gap: 2.6rem; }
.mq-track span::after { content: "✦"; font-style: normal; font-size: 0.7em; color: var(--coral); }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---- reviews wall (reuses the .marquee / .mq-track mechanism above) ---- */
.reviews-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.reviews-rating { display: inline-flex; align-items: center; gap: 0.55em; margin-top: 1.1rem; font-size: 0.96rem; color: var(--ink); transition: color .25s; }
.reviews-rating .stars { color: var(--coral); letter-spacing: 1px; }
.reviews-rating .rr-text b { font-family: var(--display); font-size: 1.15rem; }
.reviews-rating .rr-ar { width: 1em; height: 1em; opacity: 0.55; transition: transform .3s; }
.reviews-rating:hover { color: var(--coral-deep); }
.reviews-rating:hover .rr-ar { transform: translateX(3px); }

.reviews-marquee { border-block: none; padding-block: 0.5rem; }
.reviews-marquee .mq-track { gap: 1.4rem; align-items: stretch; animation-duration: 72s; }  /* slower, premium pace */
.reviews-marquee:hover .mq-track, .reviews-marquee:focus-within .mq-track { animation-play-state: paused; }

.review-card { flex: 0 0 clamp(280px, 82vw, 360px); white-space: normal; background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; padding: 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.85rem;
  box-shadow: 0 14px 32px -20px oklch(0.3 0.04 60 / 0.28); }
.review-card:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }
.review-card .stars { color: var(--coral); letter-spacing: 2px; font-size: 0.95rem; }
.review-card .rv-text { color: var(--ink); font-size: 0.98rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.review-card .rv-foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.review-card .rv-name { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.review-card .rv-src { font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); flex: none; }

/* touch: swipe instead of auto-scroll; show each review once (hide JS clones) */
@media (hover: none) and (pointer: coarse) {
  .reviews-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x proximity; padding-inline: var(--edge); }
  .reviews-marquee .mq-track { animation: none; }
  .reviews-marquee .mq-track > [aria-hidden="true"] { display: none; }
  .review-card { scroll-snap-align: start; }
}
/* reduced motion: no auto-scroll — a static, readable wrapped grid of the cards */
@media (prefers-reduced-motion: reduce) {
  .reviews-marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; padding-inline: var(--edge); }
  .reviews-marquee .mq-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 1.2rem; }
  .reviews-marquee .mq-track > [aria-hidden="true"] { display: none; }
  .review-card { flex-basis: 320px; }
}

/* ---- accepted-insurance marquee (reuses .marquee / .mq-track) ---- */
.insurance-head { text-align: center; margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.insurance-head h2 { max-width: 18ch; margin: 0.6rem auto 0; text-wrap: balance; }
.insurance-head .sm { max-width: 54ch; margin: 1rem auto 0; }
.insurance-marquee { border-block: none; padding-block: 0.4rem; }
.insurance-track { list-style: none; margin: 0; padding: 0; align-items: center; animation-duration: 60s; }  /* slower; ul reset */
.insurance-marquee:hover .mq-track, .insurance-marquee:focus-within .mq-track { animation-play-state: paused; }
.ins-item { font-family: var(--body); font-weight: 600; font-size: clamp(0.95rem, 1.5vw, 1.18rem); color: var(--ink);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 1.6rem; padding-left: 1.6rem; }
.ins-item::after { content: "•"; color: var(--coral); font-size: 0.7em; }   /* divider mark between providers */
.insurance-note { text-align: center; margin-top: clamp(1.6rem, 3vw, 2.2rem); font-size: 0.92rem; color: var(--ink-soft); }

/* reduced motion: no auto-scroll — static wrapped row of providers */
@media (prefers-reduced-motion: reduce) {
  .insurance-marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; padding-inline: var(--edge); }
  .insurance-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 0.4rem; }
  .insurance-track > [aria-hidden="true"] { display: none; }
}

/* ============================================================
   MANIFESTO (dark, dramatic)
   ============================================================ */
.dark { background: var(--pine); color: var(--bone); position: relative; overflow: hidden; }
.dark::before { content: ""; position: absolute; inset: 0; opacity: 0.7; pointer-events: none;
  background: radial-gradient(60% 60% at 80% 10%, oklch(0.45 0.035 58/0.5), transparent 70%),
              radial-gradient(50% 50% at 5% 90%, oklch(0.62 0.06 32/0.28), transparent 70%); }
.dark .label { color: var(--coral); }
.dark h1, .dark h2, .dark h3 { color: var(--bone); }
.dark .lede { color: oklch(0.86 0.02 90); }
.manifesto { position: relative; z-index: 1; }
.manifesto .big { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1.08; letter-spacing: -0.015em; max-width: 22ch; }
.manifesto .big em { font-style: italic; color: var(--coral); }
.manifesto .big .soft { color: oklch(0.62 0.03 90); }
.manifesto-foot { display: flex; gap: 3rem; margin-top: 4rem; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
.sig-mark { display: flex; flex-direction: column; gap: 0.4rem; }
.sig-mark .sig { font-family: var(--serif); font-style: italic; font-size: 2.2rem; color: var(--bone); }
.sig-mark small { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: oklch(0.72 0.02 90); }

/* ---- "Our belief" manifesto flipped to a light surface ----
   Same markup as the dark sections but on cream: dark text, taupe eyebrow
   (base .label), and a deeper-rose accent that holds contrast on light.
   Scoped to .manifesto-light so the other dark sections are untouched. */
.manifesto-light { background: var(--paper); color: var(--ink); position: relative; }
.manifesto-light .big { color: var(--ink); }
.manifesto-light .big em { color: var(--coral-deep); }
.manifesto-light .big .soft { color: var(--coral-deep); }
.manifesto-light .lede { color: var(--ink-soft); }
.manifesto-light .sig-mark .sig { color: var(--ink); }
.manifesto-light .sig-mark small { color: var(--ink-soft); }
/* clip the oversized depth shape so it never causes horizontal overflow */
.manifesto-light { overflow: hidden; }
.manifesto-light .shell { position: relative; z-index: 1; }

/* depth: oversized lotus mark as faint texture, off to one side (behind text) */
.mf-shape { position: absolute; right: -6%; top: 50%; width: min(46vw, 540px); height: auto;
  transform: translateY(-50%); opacity: 0.06; z-index: 0; pointer-events: none; user-select: none; }

/* founder rose rule that draws in under the name */
.sig-mark .mf-rule { display: block; width: 48px; height: 2px; border-radius: 2px; background: var(--coral-deep);
  transform-origin: left; margin: 0.15rem 0 0.1rem; }

/* quiet connective cue inviting the scroll into the next section */
.mf-connect { position: absolute; left: 50%; bottom: 0; width: 1px; height: 46px; transform: translateX(-50%);
  background: linear-gradient(transparent, var(--line-2)); z-index: 1; pointer-events: none; }

/* ---- reveal (added by lux.js only when motion is allowed) -----------------
   .mf-armed sets the hidden start state; .mf-go plays it. Per-element
   transition-delays are set inline by JS to cascade top-to-bottom. Without JS
   or under reduced motion, none of this applies and the section is final. */
.manifesto-light.mf-armed [data-mf="label"],
.manifesto-light.mf-armed [data-mf="body"],
.manifesto-light.mf-armed [data-mf="founder"] { opacity: 0; transform: translateY(12px);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.manifesto-light.mf-armed.mf-go [data-mf="label"],
.manifesto-light.mf-armed.mf-go [data-mf="body"],
.manifesto-light.mf-armed.mf-go [data-mf="founder"] { opacity: 1; transform: none; }

/* statement words */
.manifesto-light.mf-armed .big .w { display: inline-block; opacity: 0; transform: translateY(12px);
  transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); }
.manifesto-light.mf-armed.mf-go .big .w { opacity: 1; transform: none; }

/* accent phrases land last: ink during reveal, then color in to the rose accent */
.manifesto-light.mf-armed .big em, .manifesto-light.mf-armed .big .soft { color: var(--ink); transition: color .45s ease; }
.manifesto-light.mf-armed.mf-go .big em, .manifesto-light.mf-armed.mf-go .big .soft { color: var(--coral-deep); }

/* eyebrow rule draws in with the label */
.manifesto-light.mf-armed [data-mf="label"]::before { transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.manifesto-light.mf-armed.mf-go [data-mf="label"]::before { transform: scaleX(1); }

/* founder rose rule + connective cue draw in last */
.manifesto-light.mf-armed .mf-rule { transform: scaleX(0); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.manifesto-light.mf-armed.mf-go .mf-rule { transform: scaleX(1); }
.manifesto-light.mf-armed .mf-connect { opacity: 0; transform: translateX(-50%) translateY(-8px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.manifesto-light.mf-armed.mf-go .mf-connect { opacity: 1; transform: translateX(-50%); }

@media (prefers-reduced-motion: reduce) {
  /* depth shape stays static; everything else is already final (JS never arms) */
  .mf-shape { transform: translateY(-50%); }
}

/* ============================================================
   SECTION HEAD
   ============================================================ */
.shead { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; margin-bottom: clamp(3rem, 5vw, 5rem); }
.shead .ttl { max-width: 20ch; }
.shead h2 { margin-top: 1.2rem; }
.shead.center { display: block; text-align: center; }
/* cap the HEADLINE (in its own large font's ch) for a balanced 2-3 line block —
   the old 24ch cap on .ttl was ~216px of body text and crushed the big serif
   headline into a one-word-per-line ribbon. */
.shead.center .ttl { max-width: none; }
.shead.center h2 { max-width: 22ch; margin-inline: auto; text-wrap: balance; line-height: 1.04; }
.shead.center .label { justify-content: center; }

/* ============================================================
   SERVICES (editorial rows)
   ============================================================ */
.svc { border-top: 1px solid var(--line-2); }
.svc-row { display: grid; grid-template-columns: 0.5fr 1.3fr 1.2fr; gap: clamp(1.5rem, 3vw, 3.5rem); align-items: center; padding-block: clamp(2.2rem, 3.5vw, 3.6rem); border-bottom: 1px solid var(--line-2); position: relative; transition: background .25s ease; }
.svc-row:hover { background: oklch(0.96 0.016 84 / 0.45); }
.svc-row:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 4px; }
/* thin rose rule draws in under the row on hover/focus */
.svc-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--coral-deep); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.svc-row:hover::after, .svc-row:focus-visible::after { transform: scaleX(1); }
.svc-row .no { font-family: var(--display); font-style: italic; font-size: clamp(2.4rem, 4vw, 3.6rem); color: var(--teal-deep); transition: color .25s ease; }
.svc-row:hover .no, .svc-row:focus-visible .no { color: var(--coral-deep); }
.svc-row .body h3 { margin-bottom: 0.7rem; }
.svc-row .body p { color: var(--ink-soft); max-width: 42ch; }
.svc-row .meta { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.svc-row .chip { font-size: 0.74rem; font-weight: 600; padding: 0.45em 0.9em; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-soft); }
.svc-row .end { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.svc-row .end .plate { width: 160px; aspect-ratio: 5/4; flex: none; }
.svc-row .end .plate img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.svc-row:hover .end .plate img, .svc-row:focus-visible .end .plate img { transform: scale(1.06); }
.svc-row .go { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink); flex: none; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.svc-row:hover .go, .svc-row:focus-visible .go { background: var(--pine); color: var(--bone); border-color: var(--pine); }
.svc-row .go svg { width: 20px; height: 20px; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.svc-row:hover .go svg, .svc-row:focus-visible .go svg { transform: translateX(3px); }

/* ---- "Our services" section: composition, CTA, row reveal, responsive ----- */
#services { scroll-margin-top: 120px; }                 /* never land under the sticky header */
#services .svc-eyebrow { display: inline-flex; margin-bottom: clamp(1.4rem, 2.5vw, 2rem); }
#services .shead { grid-template-columns: 1.5fr 1fr; align-items: end; gap: clamp(2rem, 5vw, 4rem); margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
#services .shead .ttl { max-width: none; }               /* was 20ch — crushed the headline into a ribbon */
#services .shead h2 { text-wrap: balance; line-height: 1.04; margin-top: 1.05rem; }
#services .shead .svc-lead { justify-self: end; max-width: 34ch; }
/* second audience block sits clearly apart from the first */
#services .svc-head-b { margin-top: clamp(3.5rem, 6vw, 5.5rem); }
/* dual gateway CTAs, equal treatment */
.svc-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.6rem; margin-top: clamp(2rem, 3.5vw, 3rem); }
.svc-cta-note { font-size: 0.86rem; color: var(--ink-faint); }
/* row reveal: each .svc block armed by lux.js (only when motion is allowed) so
   the two blocks reveal independently as each scrolls in. Never pre-hidden. */
#services .svc.svc-armed .svc-row { opacity: 0; transform: translateY(12px);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1), background .25s ease; }
#services .svc.svc-armed.svc-go .svc-row { opacity: 1; transform: none; }

@media (max-width: 860px) {
  #services .shead { grid-template-columns: 1fr; gap: 1.1rem; }
  #services .shead .svc-lead { justify-self: start; max-width: 48ch; }
}
@media (max-width: 680px) {
  #services .svc-row { grid-template-columns: 1fr; gap: 1rem; padding-block: clamp(1.8rem, 6vw, 2.4rem); }
  #services .svc-row .no { font-size: 2.2rem; }
  #services .svc-row .end { justify-content: flex-start; gap: 1rem; }
  #services .svc-row .end .plate { display: block; flex: 1 1 auto; min-width: 0; max-width: 240px; aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  /* clean static hover states — no scale, draw, or nudge */
  .svc-row, .svc-row::after, .svc-row .no, .svc-row .end .plate img, .svc-row .go, .svc-row .go svg { transition: none; }
  .svc-row:hover .end .plate img, .svc-row:focus-visible .end .plate img,
  .svc-row:hover .go svg, .svc-row:focus-visible .go svg { transform: none; }
}

/* ============================================================
   CONDITIONS (big interactive list)
   ============================================================ */
.cond-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.cond-art { position: relative; }
.cond-art .plate { aspect-ratio: 3/4; }
.cond-art .tagcard { position: absolute; right: -24px; bottom: -24px; background: var(--coral); color: var(--pine); border-radius: 16px; padding: 1.2rem 1.4rem; max-width: 230px; box-shadow: 0 24px 50px oklch(0.7 0.13 40/0.35); font-weight: 500; font-size: 0.92rem; line-height: 1.4; }
.cond-list { display: flex; flex-direction: column; }
.cond-list[hidden] { display: none; }   /* display:flex above otherwise overrides the hidden attribute */
.cond-item { display: flex; align-items: center; gap: 1.2rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line-2); cursor: default; transition: padding .35s; }
.cond-item:first-child { border-top: 1px solid var(--line-2); }
.cond-item .ci-no { font-family: var(--body); font-size: 0.78rem; font-weight: 600; color: var(--ink-faint); width: 28px; }
.cond-item .ci-name { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-weight: 500; color: var(--ink); transition: color .3s, transform .35s; flex: 1; }
.cond-item .ci-ar { opacity: 0; transform: translateX(-10px); transition: all .35s; color: var(--coral-deep); }
.cond-item:hover { padding-left: 1.2rem; }
.cond-item:hover .ci-name { color: var(--teal-deep); }
.cond-item:hover .ci-ar { opacity: 1; transform: none; }

/* ---- audience toggle (segmented tabs) for the conditions list ---- */
.cond-toggle { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); margin: 1.8rem 0 1.4rem; }
.cond-toggle button { font-family: var(--body); font-weight: 600; font-size: 0.86rem; line-height: 1; padding: 0.6em 1.15em; border: none; border-radius: 999px; background: none; color: var(--ink-soft); cursor: pointer; white-space: nowrap; transition: background .25s ease, color .25s ease; }
.cond-toggle button:hover { color: var(--ink); }
.cond-toggle button[aria-selected="true"] { background: var(--pine); color: var(--bone); }
.cond-toggle button:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
/* swap animation: incoming list items fade + rise, staggered (JS toggles .cond-in) */
@keyframes condIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cond-list.cond-in .cond-item { animation: condIn .4s cubic-bezier(.2,.7,.2,1) both; }
.cond-list.cond-in .cond-item:nth-child(2){animation-delay:.04s}
.cond-list.cond-in .cond-item:nth-child(3){animation-delay:.08s}
.cond-list.cond-in .cond-item:nth-child(4){animation-delay:.12s}
.cond-list.cond-in .cond-item:nth-child(5){animation-delay:.16s}
.cond-list.cond-in .cond-item:nth-child(6){animation-delay:.20s}
.cond-list.cond-in .cond-item:nth-child(7){animation-delay:.24s}
.cond-list.cond-in .cond-item:nth-child(8){animation-delay:.28s}
@media (prefers-reduced-motion: reduce) { .cond-list.cond-in .cond-item { animation: none; } }

/* ============================================================
   APPROACH (steps)
   ============================================================ */
#approach { scroll-margin-top: 120px; }   /* footer links to /#approach — clear the sticky header */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.step { position: relative; }
.step .sn { font-family: var(--display); font-style: italic; font-size: clamp(3rem, 5vw, 4.6rem); color: var(--teal-deep); line-height: 1; display: block; margin-bottom: 1.2rem; }
.step h3 { margin-bottom: 0.7rem; }
.step p { color: var(--ink-soft); max-width: 34ch; }
.step::after { content: ""; position: absolute; top: 2rem; right: -1.5vw; width: 1px; height: 60%; background: var(--line-2); }
.steps .step:last-child::after { display: none; }

/* ============================================================
   STATS (dark, counters)
   ============================================================ */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.stat { text-align: left; }
.stat .n { font-family: var(--display); font-weight: 500; font-size: clamp(3rem, 5.5vw, 5.4rem); line-height: 0.9; color: var(--bone); }
.stat .n em { font-style: normal; color: var(--coral); }
.stat p { margin-top: 0.9rem; font-size: 0.92rem; color: oklch(0.78 0.02 90); max-width: 22ch; }
.stat + .stat { border-left: 1px solid oklch(1 0 0/0.12); padding-left: clamp(1.5rem,3vw,3rem); }

/* ============================================================
   LOCAL
   ============================================================ */
.local-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.map { aspect-ratio: 4/3; position: relative; border-radius: 3px; overflow: hidden; border: 1px solid var(--line-2);
  background: radial-gradient(circle at 58% 42%, var(--teal-wash), transparent 60%),
    repeating-linear-gradient(0deg, oklch(0.86 0.02 88) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, oklch(0.86 0.02 88) 0 1px, transparent 1px 48px), var(--bone-2); }
.map .pin { position: absolute; left: 57%; top: 45%; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: var(--coral); transform: translate(-50%,-50%) rotate(-45deg); box-shadow: 0 0 0 10px oklch(0.74 0.14 40/0.18); }
.map .pin::after { content: ""; position: absolute; inset: 6px; background: var(--paper); border-radius: 50%; }
.map .mcard { position: absolute; left: 18px; bottom: 18px; right: 18px; background: oklch(0.99 0.008 90/0.94); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; display: flex; align-items: center; gap: 0.9rem; box-shadow: 0 16px 40px oklch(0.3 0.04 200/0.14); }
.areas { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.8rem; }
.areas span { font-size: 0.86rem; padding: 0.5em 1em; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-soft); transition: all .25s; }
.areas span:hover { border-color: var(--teal); color: var(--teal-deep); }
.inforows { margin-top: 2rem; }
.inforow { display: flex; gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.inforow b { min-width: 120px; font-family: var(--body); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-deep); padding-top: 3px; }
.inforow span { color: var(--ink-soft); }
.loc-links { margin-top: 2rem; display: flex; gap: 1.5rem 2rem; flex-wrap: wrap; }

/* ---- consultation form (replaces the map in the Local section) ---- */
.contact-form { display: grid; gap: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.4rem, 3vw, 2rem); box-shadow: 0 18px 44px -28px oklch(0.3 0.04 60 / 0.3); }
.contact-form .field { display: grid; gap: 0.35rem; }
.contact-form label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-deep); }
.contact-form label .opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
.contact-form input, .contact-form textarea { font-family: var(--body); font-size: 0.98rem; color: var(--ink); background: var(--bone); border: 1px solid var(--line-2); border-radius: 10px; padding: 0.7em 0.85em; width: 100%; transition: border-color .2s, box-shadow .2s; }
.contact-form textarea { resize: vertical; min-height: 92px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--ink-faint); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--teal-deep); box-shadow: 0 0 0 3px var(--teal-wash); }
.contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"] { border-color: var(--coral-deep); box-shadow: 0 0 0 3px var(--coral-soft); }
.contact-form .field-err { font-size: 0.78rem; color: var(--coral-deep); }
.contact-form .field-err:empty { display: none; }
.contact-form .form-privacy { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; margin: 0.2rem 0; }
.contact-form .contact-submit { justify-self: start; }
.contact-form .form-status { font-size: 0.92rem; line-height: 1.45; padding: 0.7rem 0.95rem; border-radius: 10px; }
.contact-form .form-status[data-state="ok"] { background: var(--teal-wash); color: var(--teal-deep); }
.contact-form .form-status[data-state="error"] { background: var(--coral-soft); color: var(--coral-deep); }

/* ============================================================
   TESTIMONIAL (editorial pull quote)
   ============================================================ */
.quote-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.quote-art .plate { aspect-ratio: 4/5; }
.quote blockquote { font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 3.1rem); line-height: 1.16; letter-spacing: -0.01em; }
.quote blockquote .mk { color: var(--coral); }
.quote .by { display: flex; align-items: center; gap: 1rem; margin-top: 2.4rem; }
.quote .by .av { width: 50px; height: 50px; border-radius: 50%; background: var(--teal-wash); display: grid; place-items: center; font-weight: 700; color: var(--teal-deep); }
.quote .by b { font-family: var(--body); font-weight: 700; }
.quote .by small { display: block; color: var(--ink-faint); font-size: 0.84rem; }
.quote .stars { color: var(--coral); letter-spacing: 3px; margin-bottom: 1.4rem; }

/* ============================================================
   CTA
   ============================================================ */
.cta { text-align: center; position: relative; z-index: 1; }
.cta h2 { margin: 1.4rem auto 1.6rem; max-width: 16ch; }
.cta .lede { margin: 0 auto 2.6rem; text-align: center; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---- CTA background video + strong scrim (keeps white text/buttons readable) ---- */
.cta-section::before { display: none; }   /* drop the .dark glow; the clip is the atmosphere */
.cta-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.cta-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(oklch(0.17 0.016 52 / 0.82) 0%, oklch(0.14 0.014 52 / 0.9) 100%); }
.cta-section .cta { z-index: 2; }   /* content above the video + scrim */

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--pine); color: var(--bone); padding-top: clamp(56px, 7vw, 96px); padding-bottom: 40px; position: relative; overflow: hidden; }
.footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 60% at 88% 0%, oklch(0.5 0.1 188/0.3), transparent 70%); }
.footer .shell { position: relative; z-index: 1; }
.footer .brand .mk { color: var(--bone); }
.footer .brand .wm { color: var(--bone); }
.footer .brand .wm small { color: oklch(0.7 0.02 90); }

/* CTA band */
.footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; flex-wrap: wrap;
  padding-bottom: clamp(2.4rem, 4vw, 3.4rem); border-bottom: 1px solid oklch(1 0 0 / 0.12); }
.footer-cta-h { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.05; color: var(--bone); }

/* main directory grid: brand + 4 nav columns */
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.15fr 1fr 0.85fr; gap: clamp(1.6rem, 3vw, 3rem);
  align-items: start; padding-block: clamp(2.6rem, 4vw, 3.6rem); }
.footer-nav { display: contents; }
.footer p.bio { margin-top: 1.2rem; max-width: 32ch; color: oklch(0.82 0.02 90); font-size: 0.95rem; line-height: 1.55; }
.footer-founder { margin-top: 0.9rem; max-width: 32ch; font-size: 0.82rem; color: oklch(0.64 0.02 90); }
.footer-social { margin-top: 1.3rem; display: flex; gap: 0.6rem; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid oklch(1 0 0 / 0.2); display: grid; place-items: center; color: oklch(0.86 0.02 90); transition: color .25s, border-color .25s, background .25s; }
.footer-social a:hover { color: var(--coral); border-color: var(--coral); background: oklch(1 0 0 / 0.05); }
.footer-nap { font-style: normal; margin-top: 1.6rem; display: grid; gap: 0.5rem; font-size: 0.92rem; color: oklch(0.8 0.02 90); line-height: 1.5; }
.footer-nap a { color: oklch(0.86 0.02 90); transition: color .25s; }
.footer-nap a:hover { color: var(--coral); }
.footer-dir { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; }
.footer-dir .arr { width: 1em; height: 1em; }

/* column headers (serif) + sub-labels + links */
.footer .fcol h4 { font-family: var(--display); font-weight: 500; font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: var(--bone); margin-bottom: 0.9rem; }
.footer .fcol .fcol-h2 { margin-top: 1.8rem; }
.fcol .fsub { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: oklch(0.58 0.02 90); margin: 1.1rem 0 0.5rem; }
.fcol ul { list-style: none; display: grid; gap: 0.5rem; margin: 0; padding: 0; }
.fcol a { color: oklch(0.82 0.02 90); font-size: 0.92rem; padding-bottom: 1px; transition: color .25s, background-size .35s;
  background-image: linear-gradient(var(--coral), var(--coral)); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; }
.fcol a:hover { color: var(--coral); background-size: 100% 1px; }

/* trust row + local SEO */
.footer-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 2rem; padding-block: clamp(1.5rem, 3vw, 2.1rem);
  border-top: 1px solid oklch(1 0 0 / 0.12); font-size: 0.92rem; }
.ft-item { display: inline-flex; align-items: center; gap: 0.5em; color: oklch(0.84 0.02 90); }
.ft-rating .stars { color: var(--coral); letter-spacing: 1px; }
.ft-rating b { color: var(--bone); font-family: var(--display); font-weight: 500; }
a.ft-item { transition: color .25s; }
a.ft-item:hover { color: var(--coral); }
.footer-seo { margin-top: 1rem; font-size: 0.86rem; color: oklch(0.62 0.02 90); }

.footer-word { display: block; width: 100vw; margin-left: calc(50% - 50vw); margin-block: clamp(1.6rem, 4vw, 3.6rem) 0.4rem; overflow: visible; }
.footer-word text { font-family: var(--display); font-weight: 500; font-size: 215px; fill: oklch(0.97 0.013 88 / 0.06); stroke: oklch(0.97 0.013 88 / 0.3); stroke-width: 0.7; paint-order: stroke fill; }
.footer-bottom { display: flex; justify-content: space-between; gap: 0.5rem 1.5rem; flex-wrap: wrap; font-size: 0.84rem; color: oklch(0.66 0.02 90); }
.footer-bottom a { color: oklch(0.8 0.02 90); transition: color .25s; }
.footer-bottom a:hover { color: var(--coral); }

/* responsive: 5-col desktop -> brand-row + 2-up tablet -> stacked mobile */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CINEMATIC HERO
   ============================================================ */
.hero-cine { position: relative; min-height: clamp(620px, 92vh, 920px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; color: var(--bone); }
.hero-cine-media { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(72% 90% at 80% 6%, oklch(0.5 0.04 58 / 0.5), transparent 60%),
    radial-gradient(58% 78% at 4% 98%, oklch(0.66 0.07 32 / 0.42), transparent 56%),
    linear-gradient(158deg, var(--pine) 0%, var(--pine-2) 40%, oklch(0.42 0.03 56) 100%);
}
.hero-cine-img, .hero-cine-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: 0; }
/* dark overlay — opacity bumped a touch since the video is brighter than the photo */
.hero-cine-media::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(160deg, oklch(0.18 0.018 52 / 0.86) 0%, oklch(0.22 0.022 54 / 0.80) 50%, oklch(0.32 0.05 32 / 0.68) 100%),
    linear-gradient(0deg, oklch(0.16 0.016 52 / 0.70), transparent 50%); }
.hero-cine-grain { position: absolute; inset: 0; opacity: 0.55; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px; }
.hero-cine-scrim { position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, oklch(0.17 0.016 52 / 0.45) 0%, transparent 16%, transparent 30%, oklch(0.15 0.016 52 / 0.52) 55%, oklch(0.12 0.014 52 / 0.92) 100%),
    radial-gradient(120% 130% at -5% 105%, oklch(0.13 0.014 52 / 0.85) 0%, transparent 60%); }
/* extra bottom space so the meta row never collides with the centered scroll cue */
.hero-cine-inner { position: relative; z-index: 2; padding-block: clamp(118px, 16vh, 190px) clamp(104px, 13vh, 150px); width: 100%; }
.hero-cine .label { color: var(--coral); }
.hero-cine .label::before { background: var(--coral); }
.hero-cine h1 { color: var(--bone); font-size: clamp(3.6rem, 9.6vw, 10.5rem); margin: 1.5rem 0 1.7rem; letter-spacing: -0.022em; text-shadow: 0 1px 2px oklch(0.12 0.03 200 / 0.5), 0 4px 24px oklch(0.1 0.02 200 / 0.55); }
.hero-cine h1 .ital { color: var(--coral); }
.hero-cine .lede { color: oklch(0.93 0.015 90); max-width: 52ch; text-shadow: 0 1px 12px oklch(0.1 0.02 200 / 0.6); }
.hero-cine .hero-cta { margin-top: 2.5rem; }
.hero-cine-cap { position: absolute; left: var(--edge); top: clamp(98px, 13vh, 152px); z-index: 2; font-family: var(--body); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: oklch(0.86 0.02 90); display: flex; align-items: center; gap: 0.7em; opacity: 0.85; }
.hero-cine-cap::before { content: ""; width: 24px; height: 1px; background: var(--coral); }
.hero-cine-floats { position: absolute; right: var(--edge); top: clamp(118px, 16vh, 182px); z-index: 3; display: flex; flex-direction: column; gap: 1rem; align-items: flex-end; }
/* Floats sit on the dark hero photo. Give them a near-solid light surface and
   force dark text (otherwise text inherits the hero's light --bone color and
   washes out). Aim for WCAG AA against the card, not the photo. */
.hero-cine-floats .float { position: static; background: var(--paper); border-color: var(--line-2); box-shadow: 0 18px 44px oklch(0.12 0.02 60 / 0.5); }
.hero-cine-floats .float-1 b { color: var(--ink); }
.hero-cine-floats .float-1 small { color: var(--ink-soft); }
.hero-cine-floats .float-2 span { color: var(--ink); }
.hero-cine-meta { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.8rem; padding-top: 1.9rem; border-top: 1px solid oklch(1 0 0 / 0.2); flex-wrap: wrap; }
.hero-cine-meta .hcm { display: flex; align-items: center; gap: 0.65rem; font-size: 0.92rem; color: oklch(0.84 0.02 90); }
.hero-cine-meta .hcm b { color: var(--bone); font-family: var(--display); font-size: 1.12rem; font-weight: 500; }
.hero-cine-meta .hcm .stars { color: var(--coral); letter-spacing: 1px; }
.hero-cine-meta .hcm-div { width: 1px; height: 30px; background: oklch(1 0 0 / 0.2); }
.scrollcue { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: oklch(0.82 0.02 90); }
.scrollcue span { width: 1px; height: 36px; background: linear-gradient(var(--coral), transparent); transform-origin: top; animation: cue 2s infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 40% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@media (max-width: 980px) { .hero-cine-floats { display: none; } }
@media (max-width: 860px) { .hero-cine { min-height: clamp(500px, 78vh, 720px); } .hero-cine-cap, .scrollcue, .hero-cine-meta .hcm-div { display: none; } .hero-cine-meta { gap: 0.4rem 1.2rem; } }
/* Hero content is static & always fully visible — no opacity/transform
   animation (which can be caught mid-fade or paused in a backgrounded tab).
   The cinematic banner carries the drama on its own. */
.hero-cine .rv { transform: none !important; opacity: 1 !important; animation: none !important; }

/* ============================================================
   REVEALS — base state VISIBLE (never stuck hidden); .in plays entrance
   ============================================================ */
.rv { }
.rv.in { animation: rvUp 1s cubic-bezier(.2,.7,.2,1) both; }
.rv.d1.in { animation-delay: .1s; }
.rv.d2.in { animation-delay: .2s; }
.rv.d3.in { animation-delay: .3s; }
.rv.d4.in { animation-delay: .4s; }
/* transform-only: content is ALWAYS visible (opacity never animated), so it
   can never get stuck hidden in a backgrounded/paused document. */
@keyframes rvUp { from { transform: translateY(34px); } to { transform: none; } }

.cursor-glow { position: fixed; top: 0; left: 0; width: 460px; height: 460px; border-radius: 50%; pointer-events: none; z-index: 8000; transform: translate(-50%,-50%); background: radial-gradient(circle, oklch(0.7 0.04 58/0.1), transparent 65%); mix-blend-mode: multiply; transition: opacity .4s; opacity: 0; }

/* ============================================================
   INNER PAGES
   ============================================================ */
.phead { padding-top: clamp(48px, 6vw, 90px); padding-bottom: clamp(36px, 4vw, 60px); text-align: center; }
.phead .crumbs { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.5rem; }
.phead .crumbs a:hover { color: var(--teal-deep); }
.phead h1 { font-size: clamp(3rem, 6.5vw, 6.6rem); margin: 0.6rem auto 1.4rem; max-width: 15ch; }
.phead .lede { margin-inline: auto; text-align: center; }

.detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; padding-block: clamp(2.5rem, 4vw, 4.5rem); }
.detail:nth-child(even) .detail-art { order: 2; }
.detail-art .plate { aspect-ratio: 5/4; box-shadow: 0 30px 70px oklch(0.3 0.05 200/0.16); }
.detail .no { font-family: var(--display); font-style: italic; font-size: clamp(2rem,3.5vw,3rem); color: var(--teal-deep); display: block; margin-bottom: 0.6rem; }
.detail h2 { margin-bottom: 1.2rem; }
.detail .lede { margin-bottom: 1.6rem; }
.detail-list { list-style: none; display: grid; gap: 0.9rem; margin-bottom: 1.8rem; }
.detail-list li { display: flex; gap: 0.9rem; align-items: flex-start; color: var(--ink-soft); }
.detail-list .tk { width: 24px; height: 24px; border-radius: 50%; background: var(--teal-wash); color: var(--teal-deep); display: grid; place-items: center; flex: none; margin-top: 3px; }
.detail-list .tk svg { width: 13px; height: 13px; }
.detail-meta { display: flex; gap: 1.6rem; flex-wrap: wrap; padding: 1.3rem 0; border-top: 1px solid var(--line-2); margin-bottom: 1.8rem; }
.detail-meta .m b { font-family: var(--display); font-size: 1.5rem; color: var(--teal-deep); display: block; line-height: 1; }
.detail-meta .m small { font-size: 0.78rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.1em; }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2vw, 2rem); }
.value { padding: 2.2rem 2rem; border: 1px solid var(--line-2); border-radius: 4px; background: var(--paper); transition: transform .35s, box-shadow .35s; }
.value:hover { transform: translateY(-5px); box-shadow: 0 24px 50px oklch(0.3 0.04 200/0.1); }
.value .vic { width: 52px; height: 52px; border-radius: 13px; background: var(--teal-wash); color: var(--teal-deep); display: grid; place-items: center; margin-bottom: 1.4rem; }
.value h3 { margin-bottom: 0.7rem; }
.value p { color: var(--ink-soft); font-size: 0.97rem; }

.lead { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.lead-art .plate { aspect-ratio: 4/5; box-shadow: 0 36px 80px oklch(0.3 0.05 200/0.2); }
.lead .sig { font-family: var(--serif); font-style: italic; font-size: 2rem; color: var(--teal-deep); margin-top: 1.6rem; }

.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2vw, 1.8rem); }
.member .plate { aspect-ratio: 3/4; margin-bottom: 1.1rem; }
.member h3 { font-size: 1.4rem; }
.member .role { color: var(--teal-deep); font-weight: 600; font-size: 0.9rem; margin-top: 0.2rem; }
.member .cred { color: var(--ink-faint); font-size: 0.85rem; }

/* ---- homepage "Meet the team": clickable cards, subtle hover, founder note ---- */
/* its own surface (alternate cream) so it reads as a distinct band from the
   "How it works" section above (--bone) and the dark stats below */
#team { scroll-margin-top: 120px; background: var(--bone-2); }
.team-home .member { color: inherit; }
.team-home .member .plate { aspect-ratio: 1; }   /* square frame for the 800x800 headshots (object-fit:cover) */
.team-home .member h3 { transition: color .25s ease; }
.team-home .member .plate img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.team-home .member:hover h3, .team-home .member:focus-visible h3 { color: var(--coral-deep); }
.team-home .member:hover .plate img, .team-home .member:focus-visible .plate img { transform: scale(1.05); }
.team-home .member:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 4px; border-radius: 4px; }
/* founder bio: clearly separated supporting detail under the name/credentials */
.team-home .founder-line { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-soft); line-height: 1.55; max-width: 32ch; }
.team-cta { display: flex; justify-content: center; margin-top: clamp(2.4rem, 4vw, 3.4rem); }
@media (prefers-reduced-motion: reduce) {
  .team-home .member .plate img { transition: none; }
  .team-home .member:hover .plate img, .team-home .member:focus-visible .plate img { transform: none; }
}

.faq-list { max-width: 880px; margin-inline: auto; }
.faq { border-bottom: 1px solid var(--line-2); }
.faq summary { cursor: pointer; list-style: none; padding: 1.6rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; font-family: var(--display); font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; flex: none; color: var(--teal-deep); transition: transform .35s, background .35s; }
.faq[open] summary .pm { transform: rotate(45deg); background: var(--teal-wash); }
.faq p { padding: 0 0 1.8rem; color: var(--ink-soft); max-width: 72ch; }

@media (max-width: 1080px) {
  .detail, .lead { grid-template-columns: 1fr; }
  .detail:nth-child(even) .detail-art { order: -1; }
  .detail-art, .lead-art { max-width: 480px; }
  .values { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .team { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .rv.in { animation: none; }
  .mq-track, .float-2 .pulse { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .nav-links, .nav-phone { display: none; }
  .burger { display: inline-flex; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 460px; }
  .svc-row { grid-template-columns: 0.4fr 1.4fr; }
  .svc-row .end .plate { display: none; }
  .cond-grid, .local-grid, .quote-wrap { grid-template-columns: 1fr; }
  .quote-art { max-width: 420px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
  .stat + .stat { border-left: none; padding-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid oklch(1 0 0/0.12); padding-left: clamp(1.5rem,3vw,3rem); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .step::after { display: none; }
  .shead { grid-template-columns: 1fr; }
  .cursor-glow { display: none; }
}
@media (max-width: 560px) {
  :root { --label-tracking: 0.24em; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat + .stat, .stat:nth-child(even) { border-left: none; padding-left: 0; border-top: 1px solid oklch(1 0 0/0.12); padding-top: 1.5rem; }
  .footer-top { grid-template-columns: 1fr; }
  .float-1 { left: 0; }
  .cond-art .tagcard { right: 0; }
}

/* ============================================================
   NAV — DROPDOWN & MEGA MENU  (added for sitemap IA)
   ============================================================ */
.nav-links { align-items: center; }
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-item > .nav-top { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); padding-block: 4px; cursor: pointer; white-space: nowrap; transition: color .25s; background: none; border: none; font-family: inherit; }
.nav-item > .nav-top:hover { color: var(--ink); }
.nav-item .chev { width: 0.66em; height: 0.66em; opacity: 0.55; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.nav-item.open .chev { transform: rotate(180deg); }
/* mega items go position:static so their full-width panel anchors to the
   header (.nav, which is positioned) rather than the trigger. */
.nav-item.has-mega { position: static; }
/* hover bridge so a small dropdown doesn't close in the 14px gap */
.nav-item.has-drop::after { content: ""; position: absolute; top: 100%; left: -10px; right: -10px; height: 18px; }

/* ---- shared closed/open state (motion via .open; close is faster) ---------- */
.drop, .mega {
  z-index: 120; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;  /* close: quick */
}
.nav-item.open .drop, .nav-item.open .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .22s cubic-bezier(.2,.7,.2,1), transform .22s cubic-bezier(.2,.7,.2,1), visibility 0s;  /* open */
}

/* ---- small dropdowns (About / Resources / Contact) ------------------------ */
.drop {
  position: absolute; top: calc(100% + 14px); left: 0; min-width: 248px; display: grid; gap: 2px; padding: 0.8rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 28px 60px oklch(0.3 0.04 60 / 0.18);
  transform: translateY(-8px) scale(0.98); transform-origin: top center;
}
.nav-item.align-right .drop { left: auto; right: 0; }
.nav-item.open .drop { transform: none; }
.drop a { position: relative; padding: 0.6rem 0.9rem; border-radius: 9px; font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; transition: background .2s, color .2s, transform .2s; }
.drop a:hover { background: var(--bone-2); color: var(--coral-deep); transform: translateX(2px); }
.drop > a { opacity: 0; transition: opacity .2s ease-out, transform .2s cubic-bezier(.2,.7,.2,1), color .2s, background .2s; }
.nav-item.open .drop > a { opacity: 1; }
.nav-item.open .drop > a:nth-child(2){transition-delay:.04s} .nav-item.open .drop > a:nth-child(3){transition-delay:.08s}
.nav-item.open .drop > a:nth-child(4){transition-delay:.12s} .nav-item.open .drop > a:nth-child(5){transition-delay:.16s}
.nav-item.open .drop > a:nth-child(6){transition-delay:.20s}

/* ---- full-width mega panel, anchored under the header --------------------- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 34px 60px -24px oklch(0.3 0.04 60 / 0.32);
  transform: translateY(-8px) scale(0.98); transform-origin: top center;
}
.nav-item.open .mega { transform: none; }
.mega-inner {
  max-width: 1180px; margin-inline: auto; padding: clamp(1.8rem, 3vw, 2.8rem) var(--edge);
  display: flex; gap: clamp(1.6rem, 3vw, 3.4rem); align-items: stretch;
}
.mega-col { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; }
/* column headers in the serif display, small, thin rule beneath */
.mega-h { font-family: var(--display); font-weight: 500; font-size: 1.06rem; letter-spacing: 0; text-transform: none;
  color: var(--ink); padding: 0 0.4rem 0.7rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.mega-col a { position: relative; z-index: 1; padding: 0.52rem 0.7rem; border-radius: 9px; font-size: 0.95rem; font-weight: 500;
  color: var(--ink-soft); transition: color .2s, transform .2s cubic-bezier(.2,.7,.2,1); }
.mega-col a:hover { color: var(--coral-deep); transform: translateX(2px); }
/* underline that draws in from the left on hover */
.mega-col a::after { content: ""; position: absolute; left: 0.7rem; bottom: 0.32rem; height: 1.5px; width: calc(100% - 1.4rem);
  background: var(--coral-deep); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.mega-col a:hover::after { transform: scaleX(1); }
/* glide pill — soft rounded highlight that slides between items (JS-driven) */
.mega-col .glide { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 0; border-radius: 10px;
  background: var(--coral-soft); opacity: 0; transform: translateY(0); pointer-events: none;
  /* transform + opacity only (no layout-triggering animation); height is set instantly by JS */
  transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .2s ease; }

/* feature panel (~1/3) — soft tinted card with the lotus mark */
.mega-feature { flex: 0 0 31%; display: flex; flex-direction: column; gap: 0.7rem; justify-content: center;
  padding: clamp(1.3rem, 2vw, 1.9rem); border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(155deg, var(--coral-soft), var(--bone-2)); }
.mega-feature .mf-art { width: 50px; height: 50px; border-radius: 12px; background: oklch(1 0 0 / 0.5);
  display: grid; place-items: center; }
.mega-feature .mf-art img { width: 34px; height: 34px; object-fit: contain; }
.mega-feature .mf-h { font-family: var(--display); font-weight: 500; font-size: 1.5rem; line-height: 1.05; color: var(--ink); }
.mega-feature .mf-p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5; }
.mega-feature .mf-link { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; font-size: 0.92rem; color: var(--coral-deep);
  background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .35s, transform .2s; padding-bottom: 3px; }
.mega-feature .mf-link svg { width: 1em; height: 1em; transition: transform .3s; }
.mega-feature .mf-link:hover { background-size: 100% 1px; }
.mega-feature .mf-link:hover svg { transform: translateX(4px); }

/* the shared underline animation shouldn't apply to the drop links or triggers */
.drop a::after, .nav-item > .nav-top::after { display: none; }
/* active state */
.nav-links > a.current, .nav-item.current > .nav-top { color: var(--ink); }

/* ---- entrance cascade: columns lift, items fade in sequence, feature last -- */
.mega-col, .mega-feature { transform: translateY(8px); transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.nav-item.open .mega-col, .nav-item.open .mega-feature { transform: none; }
.nav-item.open .mega-inner > *:nth-child(2){transition-delay:.04s}
.nav-item.open .mega-inner > *:nth-child(3){transition-delay:.08s}
.nav-item.open .mega-inner > *:nth-child(4){transition-delay:.12s}
.mega-col a { opacity: 0; }
.nav-item.open .mega-col a { opacity: 1; }
.nav-item.open .mega-col a:nth-of-type(1){transition-delay:.06s}
.nav-item.open .mega-col a:nth-of-type(2){transition-delay:.085s}
.nav-item.open .mega-col a:nth-of-type(3){transition-delay:.11s}
.nav-item.open .mega-col a:nth-of-type(4){transition-delay:.135s}
.nav-item.open .mega-col a:nth-of-type(5){transition-delay:.16s}
.nav-item.open .mega-col a:nth-of-type(6){transition-delay:.185s}
.nav-item.open .mega-col a:nth-of-type(7){transition-delay:.21s}
.nav-item.open .mega-col a:nth-of-type(8){transition-delay:.235s}
.mega-feature { opacity: 0; transition: transform .22s cubic-bezier(.2,.7,.2,1), opacity .22s ease-out; }
.nav-item.open .mega-feature { opacity: 1; transition-delay: .2s; }

/* page scrim — dims + blurs everything behind an open panel; header stays above it */
.nav-scrim { position: fixed; inset: 0; z-index: 80; background: oklch(0.25 0.015 60 / 0.28);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.nav-scrim.show { opacity: 1; pointer-events: auto; }

/* reduced motion: instant show/hide, same final layout. No slide/scale/stagger,
   no glide pill, no cross-fade lag, no underline draw. */
@media (prefers-reduced-motion: reduce) {
  .drop, .mega, .mega-col, .mega-feature, .drop > a, .mega-col a, .nav-scrim { transition: none; }
  .drop, .mega { transform: none; }
  .nav-item.open .mega-col, .nav-item.open .mega-feature, .nav-item.open .drop > a,
  .nav-item.open .mega-col a, .nav-item.open .drop > a[class] { transition-delay: 0s; }
  .mega-col, .mega-feature, .drop > a, .mega-col a, .drop a { transform: none; opacity: 1; }
  .mega-col .glide { display: none; }
  .mega-col a::after { transition: none; }
  .mega-col a:hover { background: var(--bone-2); }
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.crumbs a { color: var(--ink-faint); transition: color .2s; }
.crumbs .sep { opacity: 0.5; padding-inline: 0.2em; }

/* ============================================================
   PLACEHOLDER / STUB NOTICE
   ============================================================ */
.stub-note {
  max-width: 760px; margin: 0 auto; padding: 1.3rem 1.6rem;
  border: 1px dashed var(--line-2); border-radius: 14px; background: var(--bone-2);
  display: flex; gap: 1rem; align-items: flex-start; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5;
}
.stub-note .tag { flex: none; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral-deep); background: var(--coral-soft); border-radius: 999px; padding: 0.45em 0.9em; margin-top: 2px; }
.stub-note b { color: var(--ink); }

/* ============================================================
   HUB LINK GRID  (treatments / conditions cards)
   ============================================================ */
.hubsec { margin-top: clamp(2.4rem, 4vw, 4rem); }
.hubsec > .label { margin-bottom: 1.6rem; }
.linkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.6vw, 1.4rem); }
.linkcard {
  display: flex; flex-direction: column; gap: 0.5rem; padding: 1.7rem 1.6rem;
  border: 1px solid var(--line-2); border-radius: 6px; background: var(--paper);
  transition: transform .35s, box-shadow .35s, border-color .35s;
}
.linkcard:hover { transform: translateY(-5px); box-shadow: 0 24px 50px oklch(0.3 0.04 60 / 0.12); border-color: var(--teal); }
.linkcard .lc-no { font-family: var(--display); font-style: italic; font-size: 1.3rem; color: var(--teal-deep); line-height: 1; }
.linkcard h3 { font-size: 1.35rem; }
.linkcard p { font-size: 0.92rem; color: var(--ink-soft); }
.linkcard .lc-go { margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.84rem; font-weight: 600; color: var(--teal-deep); }
.linkcard .lc-go svg { width: 1em; height: 1em; transition: transform .3s; }
.linkcard:hover .lc-go svg { transform: translateX(4px); }
.linkgrid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.linkgrid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* contact / book simple info layout reuse */
.stub-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 2.4rem; }

@media (max-width: 1200px) {
  .nav-links { display: none; }
  .nav-phone { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 980px) { .linkgrid, .linkgrid.cols-2, .linkgrid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .linkgrid, .linkgrid.cols-2, .linkgrid.cols-4 { grid-template-columns: 1fr; } .stub-note { flex-direction: column; } }

/* ============================================================
   FOOTER — now 5 columns (Kids&Teens + Parents&Adults added)
   ============================================================ */
.footer-top { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; }
@media (max-width: 1080px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

/* homepage condition rows are now links */
a.cond-item { cursor: pointer; }

/* ============================================================
   MOBILE DRAWER — grouped sections for the deep nav
   ============================================================ */
.nav-drawer { max-height: 80vh; overflow-y: auto; }
.nav-drawer .d-top { display: block; padding: 0.95rem 0.3rem; font-size: 1.05rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
/* accordion header (a button, so it toggles instead of navigating) */
.nav-drawer .d-h { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5em; padding: 0.95rem 0.3rem; font-size: 1.05rem; font-weight: 600; color: var(--ink); background: none; border: none; border-bottom: 1px solid var(--line); font-family: inherit; text-align: left; cursor: pointer; }
.nav-drawer .d-h .chev { width: 0.85em; height: 0.85em; opacity: 0.6; transition: transform .3s; }
.nav-drawer .d-h[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-drawer .d-sub { display: none; padding: 0.2rem 0 0.7rem 0.9rem; }
.nav-drawer .d-group.open .d-sub { display: grid; }
.nav-drawer .d-sub a { padding: 0.5rem 0.3rem; font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); border-bottom: none; }
.nav-drawer .d-sub a:hover { color: var(--teal-deep); }
.nav-drawer .d-lbl { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-deep); padding: 0.7rem 0.3rem 0.15rem; }
.nav-drawer .d-feature { margin-top: 0.5rem; color: var(--coral-deep); font-weight: 600; }
.nav-drawer .dphone { display: block; padding: 1rem 0.3rem; color: var(--teal-deep); font-weight: 600; border-bottom: none; }