/* Homepage hero: statement → question → answer cards (a carousel). */

.hq { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 112px var(--gutter) 56px; container-type: inline-size; }
.hq__inner { width: 100%; }
.hq__title { font-size: clamp(28px, 3.2vw, 50px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 300; margin: 0 0 clamp(28px, 4vw, 44px); max-width: 26ch; }
.hq__title strong { font-weight: 600; color: var(--ember); }

/* words sharpen into focus; the rest of the hero follows once the statement is sharp */
.hq__title .dw { display: inline-block; filter: blur(12px); opacity: .25; }
.hq.is-live .hq__title .dw { animation: dwIn 1.1s var(--ease) forwards; animation-delay: calc(.15s + var(--i) * .09s); }
@keyframes dwIn { to { filter: blur(0); opacity: 1; } }
.hq__q { display: flex; align-items: baseline; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 18px; opacity: 0; transform: translateY(8px); }
.hq.is-live .hq__q { animation: hqIn 1.2s var(--ease) forwards; animation-delay: 1.9s; }
@keyframes hqIn { to { opacity: 1; transform: none; } }
.hq__question { font-size: clamp(26px, 2.8vw, 44px); line-height: 1; letter-spacing: -0.035em; font-weight: 200; margin: 0; }
.hq__question strong { font-weight: 600; color: var(--ember); }
.hq__sub { margin: 0; color: var(--mute); font-size: 15px; }
.hq__clear { font: inherit; color: var(--ember); background: none; border: 0; padding: 0 0 2px; margin-left: 6px; cursor: pointer; background-image: linear-gradient(var(--ember), var(--ember)); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; }

/* carousel: a few cards visible, the next one peeking, no scrollbar */
.hq__viewport { position: relative; margin-right: calc(var(--gutter) * -1); }
.hq__viewport::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: var(--gutter); background: linear-gradient(90deg, rgba(255,253,249,0), var(--paper)); pointer-events: none; transition: opacity .4s; }
.hq.at-end .hq__viewport::after { opacity: 0; }
.hq__track { --card-h: clamp(320px, 44vh, 460px); display: flex; gap: var(--gap); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding: 6px 0 10px; scrollbar-width: none; -ms-overflow-style: none; }
.hq__track::-webkit-scrollbar { display: none; }

.hq__card { position: relative; flex: 0 0 auto; width: calc((100cqw - 11 * var(--gap)) / 12 * 3 + 2 * var(--gap)); height: var(--card-h); scroll-snap-align: start; display: grid; grid-template-rows: 50% minmax(0, 1fr); padding: clamp(18px, 2.2vw, 30px); border-radius: var(--radius); overflow: hidden; cursor: pointer; outline: none; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .7s var(--ease), box-shadow .5s; }
.hq.is-live .hq__card { animation: cardIn 1.1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(2.2s + var(--i) * .11s); }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hq__card:hover, .hq__card:focus-visible { transform: translateY(-4px); }
.hq__card:focus-visible { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ember); }
.hq__card.is-on { width: calc((100cqw - 11 * var(--gap)) / 12 * 6 + 5 * var(--gap)); grid-template-rows: 40% minmax(0, 1fr); cursor: default; transform: none; }
.hq__track.has-pick .hq__card:not(.is-on) { opacity: .5; }
.hq__track.has-pick .hq__card:not(.is-on):hover { opacity: .9; }

.hq__k { align-self: start; opacity: .75; padding-right: 36px; }
.hq__body { height: 100%; min-height: 0; display: flex; flex-direction: column; align-self: start; }
.hq__sym { margin: 0; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 200; transition: font-size 1.1s cubic-bezier(.2,.8,.2,1); }
.hq__sym strong { font-weight: 600; }
.hq__card.is-on .hq__sym { font-size: clamp(24px, 2.4vw, 38px); }
.hq__res { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; opacity: 0; transform: translateY(6px); visibility: hidden; transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s linear .6s; }
.hq__card.is-on .hq__res { opacity: 1; transform: none; visibility: visible; transition-delay: .3s, .3s, 0s; }
.hq__res p { margin: 12px 0 16px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.35; max-width: 44ch; }
.hq__go { margin-top: auto; align-self: flex-start; width: auto; padding: 12px 18px; font-size: 14px; }
.hq__go::before { display: none; }
.hq__go:hover { opacity: .9; }
.hq__go i { transition: transform .3s var(--ease); }
.hq__go:hover i { transform: translateX(3px); }

.hq__more { position: absolute; right: clamp(18px, 2.2vw, 30px); top: clamp(18px, 2.2vw, 30px); display: inline-flex; flex-direction: column-reverse; align-items: flex-end; gap: 6px; opacity: .7; }
.hq__more i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px currentColor; font-size: 14px; }
.hq__more b { font-weight: 400; white-space: nowrap; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .4s var(--ease); }
.hq__card:hover .hq__more b, .hq__card:focus-visible .hq__more b { opacity: 1; transform: none; }
.hq__card.is-on .hq__more { display: none; }

.hq__nav { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.hq__arrow { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); font-size: 18px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background .3s, color .3s; }
.hq__arrow:hover { background: var(--ink); color: var(--paper); }
.hq__arrow:disabled { opacity: .3; pointer-events: none; }
.hq__dots { display: flex; gap: 6px; }
.hq__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); cursor: pointer; transition: background .3s, width .4s var(--ease); }
.hq__dots i.is-on { background: var(--ember); width: 18px; border-radius: 3px; }
.hq__hint { color: var(--mute); margin-left: 8px; }

/* tints: each card inside its door's colour family */
.hq__card--clarity-a { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.hq__card--clarity-b { background: linear-gradient(160deg, #fde3cb, #fbca99); color: var(--ink); }
.hq__card--clarity-a .hq__k, .hq__card--clarity-a .hq__sym strong, .hq__card--clarity-b .hq__k, .hq__card--clarity-b .hq__sym strong { color: var(--ember); }
.hq__card--clarity-a .btn, .hq__card--clarity-b .btn { background: var(--ink); color: var(--paper); }
.hq__card--vitamins-a { background: var(--id-vitamins); color: var(--paper-2); }
.hq__card--vitamins-b { background: linear-gradient(160deg, #b9a08d, #9b8371); color: var(--paper-2); }
.hq__card--vitamins-c { background: linear-gradient(160deg, #e2d2c3, #cdb6a4); color: var(--ink); }
.hq__card--vitamins-c .hq__k, .hq__card--vitamins-c .hq__sym strong { color: #745646; }
.hq__card--vitamins-a .btn, .hq__card--vitamins-b .btn { background: var(--paper); color: #745646; }
.hq__card--vitamins-c .btn { background: #745646; color: var(--paper); }
.hq__card--mentor-a { background: var(--id-mentor); color: #fff; }
.hq__card--mentor-b { background: linear-gradient(160deg, #c04c00, #a34400); color: #fff; }
.hq__card--mentor-c { background: linear-gradient(160deg, #f8a966, #ef8a3c); color: var(--ink); }
.hq__card--mentor-c .hq__k { color: #7a2f00; }
.hq__card--mentor-a .btn, .hq__card--mentor-b .btn { background: #fff; color: var(--id-mentor-solid); }
.hq__card--mentor-c .btn { background: var(--ink); color: var(--paper); }
.hq__card--lab { background: var(--id-lab); color: var(--paper); }
.hq__card--lab .hq__k, .hq__card--lab .hq__sym strong { color: var(--id-lab-accent); }
.hq__card--lab .btn { background: var(--paper); color: var(--id-lab); }
.hq__card--talk { background: var(--ink); color: var(--paper); }
.hq__card--talk .hq__k, .hq__card--talk .hq__sym strong { color: var(--peach); }
.hq__card--talk .btn { background: var(--ember); color: var(--paper); }

/* phones and small laptops: natural height, swipeable row */
@media (max-width: 1000px) {
  .hq { padding-top: 120px; }
  .hq__track { padding-right: var(--gutter); }
  .hq__card, .hq__card.is-on { width: min(78vw, 420px); height: auto; min-height: 300px; grid-template-rows: minmax(110px, auto) auto; }
  .hq__sym, .hq__card.is-on .hq__sym { font-size: clamp(22px, 2.6vw, 32px); }
  .hq__track.has-pick .hq__card:not(.is-on) { opacity: .65; }
  .hq__hint { display: none; }
}

/* reduced motion: everything present at once, no blur */
@media (prefers-reduced-motion: reduce) {
  .hq__title .dw { filter: none; opacity: 1; }
  .hq__q, .hq__card { opacity: 1; transform: none; animation: none !important; }
}

/* category hidden at rest; shows on hover/focus, when expanded, and always on touch screens */
.hq__k { opacity: 0; transform: translateY(-4px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.hq__card:hover .hq__k, .hq__card:focus-visible .hq__k, .hq__card.is-on .hq__k { opacity: .75; transform: none; }
@media (hover: none) { .hq__k { opacity: .75; transform: none; } }
.hq__more b { display: none; }

/* the tiles follow the hero directly now; give the join room */
.hq + .elsewhere { padding-top: clamp(72px, 9vw, 120px); }

/* the statement leads the hierarchy on desktop */
@media (min-width: 1001px) {
  .hq__title { font-size: clamp(40px, 4.6vw, 76px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 200; max-width: 20ch; margin-bottom: clamp(28px, 3.4vw, 44px); }
  .hq__title strong { font-weight: 600; }
  .hq__track { --card-h: clamp(300px, 38vh, 400px); }
}

/* one CTA shape for every card; tints only change colours */
.hq .hq__card .btn.hq__go, .hq .hq__card.is-on .hq__res .btn.hq__go { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; font-size: 14px; font-weight: 500; line-height: 1.2; border-radius: 999px; min-height: 0; height: auto; width: auto; margin: auto 0 0; align-self: flex-start; box-shadow: none; transform: none; }
.hq .hq__card .btn.hq__go i { font-style: normal; font-size: 14px; line-height: 1; }
.hq .hq__card .btn.hq__go { flex: none; }

.hq__card--clarity-c { background: linear-gradient(160deg, #fff6ec, #fde3cb); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(204,85,0,.12); }
.hq__card--clarity-c .hq__k, .hq__card--clarity-c .hq__sym strong { color: var(--ember); }
.hq__card--clarity-c .btn { background: var(--ink); color: var(--paper); }

/* an expanded card grows with its content; it never clips */
.hq__card.is-on { height: auto; min-height: var(--card-h); grid-template-rows: minmax(110px, 1fr) auto; }
.hq__card.is-on .hq__body { height: auto; }
.hq__card.is-on .hq__res .btn.hq__go { margin-top: 18px; }

/* the hero is as tall as its content; the row below follows at a normal distance */
.hq { min-height: 0; padding-bottom: clamp(24px, 3vw, 40px); }
.hq + .elsewhere { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }

/* ---------- opening choreography (homepage) ---------- */
/* the statement: bigger, more air */
@media (min-width: 1001px) {
  .hq__title { font-size: clamp(48px, 5.6vw, 96px); line-height: 1.1; letter-spacing: -0.04em; max-width: 17ch; margin-bottom: clamp(28px, 3vw, 44px); }
  .hq__track { --card-h: clamp(300px, calc(100vh - 560px), 460px); }
}
/* short desktop viewports: the statement gives a little so the cards' first line stays in view */
@media (min-width: 1001px) and (max-height: 920px) {
  .hq__title { font-size: clamp(44px, 5vw, 76px); }
}
.hq__title { line-height: 1.16; }
/* everything but the statement starts invisible; the page is white */
body[data-page="index"] .hero__eyebrow, body[data-page="index"] .hq__q, body[data-page="index"] .hq__card,
body[data-page="index"] .hq__nav, body[data-page="index"] .nav, body[data-page="index"] .elsewhere, body[data-page="index"] .footer { opacity: 0; }
/* then, one after the other */
body[data-page="index"].is-live .hero__eyebrow { animation: hqIn .9s var(--ease) 1.1s both; }
body[data-page="index"].is-live .hq__q { animation: hqIn .9s var(--ease) 1.4s both; }
body[data-page="index"].is-live .hq__card { animation: cardIn 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(1.7s + var(--i) * .08s); }
body[data-page="index"].is-live .hq__nav { animation: hqIn .9s var(--ease) 2.4s both; }
body[data-page="index"].is-live .nav { animation: hqIn .9s var(--ease) .6s both; }
body[data-page="index"].is-live .elsewhere { animation: hqIn 1s var(--ease) 2.6s both; }
body[data-page="index"].is-live .footer { animation: hqIn 1s var(--ease) 2.9s both; }
/* seen already this visit: arrive quickly, together */
body[data-page="index"].is-quick .hq__title .dw { animation-duration: .5s; animation-delay: calc(var(--i) * .02s); }
body[data-page="index"].is-quick .hero__eyebrow, body[data-page="index"].is-quick .hq__q, body[data-page="index"].is-quick .hq__card,
body[data-page="index"].is-quick .hq__nav, body[data-page="index"].is-quick .nav, body[data-page="index"].is-quick .elsewhere, body[data-page="index"].is-quick .footer { animation-duration: .6s !important; animation-delay: .2s !important; }
@media (prefers-reduced-motion: reduce) {
  body[data-page="index"] .hero__eyebrow, body[data-page="index"] .hq__q, body[data-page="index"] .hq__card,
  body[data-page="index"] .hq__nav, body[data-page="index"] .nav, body[data-page="index"] .elsewhere, body[data-page="index"] .footer { opacity: 1; animation: none !important; }
}

/* ---------- preloader: "design" lands on its word ---------- */
.hq-loader { position: fixed; inset: 0; z-index: 200; background: var(--ink); }
.hq-handoff { position: fixed; z-index: 201; left: 0; top: 0; margin: 0; white-space: nowrap; pointer-events: none; color: var(--peach); opacity: 0; will-change: filter, opacity; }
.hq__title .dw.is-anchor { filter: none !important; animation: none !important; }
body.is-quick .hq-loader, body.is-quick .hq-handoff { display: none; }
@media (prefers-reduced-motion: reduce) { .hq-loader, .hq-handoff { display: none; } }

/* ---------- phones: airy, balanced ---------- */
@media (max-width: 1000px) {
  .hq { padding-top: 112px; padding-bottom: 20px; }
  .hero__eyebrow { align-items: flex-start; }
  .hero__eyebrow .pulse { margin-top: .35em; }
  .hq__title { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 28px; }
  .hq__q { margin-bottom: 14px; }
  .hq__question { font-size: clamp(24px, 6.4vw, 30px); }
  .hq__sub { font-size: 14px; }
  .hq__card, .hq__card.is-on { min-height: 250px; grid-template-rows: minmax(76px, auto) auto; padding: 20px; }
  .hq__sym, .hq__card.is-on .hq__sym { font-size: clamp(20px, 5.6vw, 26px); }
  .hq__card.is-on .hq__res .btn.hq__go { margin-top: 16px; }
  .hq__nav { margin-top: 12px; }
  .hq + .elsewhere { padding-top: 56px; }
}
@media (max-width: 480px) {
  .eyebrow__extra { display: none; }
}

@media (max-width: 1000px) {
  /* collapsed resolution takes no space on phones (cards are content-height there) */
  .hq__card:not(.is-on) .hq__res { max-height: 0; overflow: hidden; margin: 0; }
  .hq__card.is-on .hq__res { max-height: 800px; }
  .hq__res { transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s linear .6s; }
}

/* ---------- Flip-driven expand: CSS no longer animates size or type ---------- */
.hq__card, .hq__card.is-on { transition: opacity .6s var(--ease), box-shadow .5s; will-change: transform; }
.hq__card:hover, .hq__card:focus-visible { transform: none; }
.hq__sym, .hq__card.is-on .hq__sym { transition: none; }
.hq__res, .hq__card.is-on .hq__res { transition: visibility 0s; transform: none; }
.hq__track { scroll-snap-type: none; }

/* Flip also moves and scales the symptom text; it must not have its own transition */
.hq__sym { transition: none; transform-origin: 0 0; }

/* ---------- inner heroes speak the landing hero's language ---------- */
/* same statement type: weight 300, open leading, the same size scale; emphasis in the page's colour */
.phero__title, .rhero__title, .lhero__title, .chero__title, .ahead__title, .xhead__title {
  font-size: clamp(44px, 5.6vw, 96px); line-height: 1.1; letter-spacing: -0.04em; font-weight: 300; max-width: 17ch;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.phero__title strong, .rhero__title strong, .lhero__title strong, .chero__title strong, .ahead__title strong, .xhead__title strong,
.phero__title .serif, .chero__title .serif { font-weight: 600; }
.phero__title .serif, .chero__title .serif { color: var(--ember); }
body[data-page="mentorship"] .phero__title .serif, body[data-page="mentorship"] .phero__title strong { color: var(--id-mentor-solid, var(--ember)); }
/* the line under the statement: lighter and a little larger, like the landing's question */
.phero__lede, .lhero__lede, .ahead__lede, .xhead__lede { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; font-weight: 300; max-width: 46ch; }
.phero__lede b, .lhero__lede b { font-weight: 500; }
/* words sharpen out of a blur; the "word" wrappers (homepage) are untouched */
.dw { display: inline-block; }
/* the page starts white and arrives one piece at a time (JS adds is-live; no-JS and reduced motion show everything) */
body:not([data-page="index"]) main > :not(:first-child):not(dialog):not([aria-hidden="true"]), body:not([data-page="index"]) .footer { opacity: 0; }
/* opacity only: an animated transform on a section would capture its pinned (position: fixed) children */
@keyframes pgIn { from { opacity: 0; } to { opacity: 1; } }
body:not([data-page="index"]).is-live main > :not(:first-child):not(dialog):not([aria-hidden="true"]) { animation: pgIn 1s var(--ease) .1s both; }
body:not([data-page="index"]).is-live .footer { animation: pgIn 1s var(--ease) .4s both; }
body:not([data-page="index"]).is-quick main > :not(:first-child):not(dialog):not([aria-hidden="true"]), body:not([data-page="index"]).is-quick .footer { animation-duration: .5s; animation-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  body:not([data-page="index"]) main > :not(:first-child):not(dialog):not([aria-hidden="true"]), body:not([data-page="index"]) .footer { opacity: 1; animation: none !important; }
}
/* phones: the same scale the landing statement uses */
@media (max-width: 1000px) {
  .phero__title, .rhero__title, .lhero__title, .chero__title, .ahead__title, .xhead__title { font-size: clamp(40px, 9.6vw, 76px); line-height: 1.08; }
}

/* one hero frame for every inner page, modelled on the Lab: full viewport, content anchored to the bottom */
.phero, .lhero, .rhero, .chero, .ahead, .xhead {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100svh; padding: 150px var(--gutter) 64px; border-bottom: 0;
}
.phero, .rhero, .chero, .ahead { background: var(--paper); overflow: visible; }
.lhero { overflow: hidden; } /* its field canvas stays inside */
.phero__inner, .chero__inner, .lhero__inner { width: 100%; }
.ahead .back, .xhead .back { margin-bottom: 24px; }
.ahead > *, .xhead > * { flex: none; }
.ahead > .back, .xhead > .back { align-self: flex-start; }

/* while GSAP runs the open/close, the CSS transitions would fight it and make the type jump */
.hq__track.is-flipping .hq__card, .hq__track.is-flipping .hq__sym, .hq__track.is-flipping .hq__res { transition: none; }
.hq__track.is-flipping .hq__card.is-on .hq__res { transition: none; }
.hq__more { transition: opacity .4s ease, transform .4s ease; }

/* the answer cards arrive one at a time, three seconds apart, once the question is in view */
body.v2 .hq .hq__card { opacity: 0; animation: none; }
body.v2 .hq__track.is-seen .hq__card { animation: cardIn 1.4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 3s); }
@media (prefers-reduced-motion: reduce) { body.v2 .hq .hq__card { opacity: 1; animation: none !important; transform: none; } }
/* open card: more air between the line, the answer and the way forward */
.hq__card.is-on .hq__res p { margin: clamp(18px, 1.6vw, 24px) 0 0; line-height: 1.45; }
.hq .hq__card.is-on .hq__res .btn.hq__go { margin-top: clamp(24px, 2.2vw, 32px); }