/* =====================================================================
   HUB TEMPLATE · V5 approved system (TASK HUB, 2026-09-26)
   Loaded AFTER ../css/v5.css and svc.css (the SHARED service layer: hero
   layout, chips, byline, slot-5 steps + capsule box, condition-card image
   treatment, why-us field, proof head, visit, booking, FAQ, CTA). This file
   adds only the hub slots: the brain-mapping hero + EEG + children index,
   the intro (capsule + press line), the children index (V2 category-index
   language), the routed-conditions grid, the approach, the proof ledger.
   Content is fully visible with JS off; motion is GSAP only (hub.js).
   ===================================================================== */

/* ---------- hero: the owner's film (brain-mapping beat) as the plate, the EEG trace, the children index ---------- */
.hub-hero .svc-hero__plate { background: var(--ink-0); }
.hub-hero .svc-hero__img { opacity: .78; }
.hub-hero .svc-hero__shade {
  background:
    linear-gradient(90deg, var(--ink-0) 0%, rgba(14, 11, 12, .66) 18%, rgba(14, 11, 12, .12) 50%, rgba(14, 11, 12, 0) 72%),
    linear-gradient(180deg, rgba(14, 11, 12, .55) 0%, rgba(14, 11, 12, 0) 24%, rgba(14, 11, 12, .1) 58%, var(--ink-0) 100%),
    radial-gradient(90% 80% at 60% 40%, transparent 50%, rgba(58, 10, 29, .4) 100%); }
.hub-hero__eeg { position: absolute; left: 30%; right: 0; top: 64%; height: 18%; pointer-events: none; }
.eeg { display: block; width: 100%; height: 100%; overflow: visible; }
.eeg path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.eeg__base { stroke: rgba(243, 236, 232, .14); stroke-width: 1; }
.eeg__trace { stroke: var(--crimson-hi); stroke-width: 1.6; opacity: .85; }
.eeg__pulse { stroke: #fff; stroke-width: 2.2; opacity: .9; }
.hub-hero .gyro__rec { left: auto; right: var(--gutter); top: 108px; }
.hub-hero__copy { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: end; gap: clamp(28px, 4vw, 64px); }
.hub-hero .svc-hero__inner { max-width: 820px; }
.hub-hero__h1 { font-size: clamp(3rem, 6.4vw, 7rem); max-width: 11ch; overflow-wrap: break-word; }
.hub-hero .svc-hero__geo { font-size: .42em; margin-top: .2em; }

.hidx { padding: 18px 18px 12px; border-radius: 22px; border: 1px solid var(--line-2); background: rgba(14, 11, 12, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hidx__h { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font: 600 11px/1.3 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hidx__h i { width: 7px; height: 7px; border-radius: 50%; background: var(--crimson-hi); flex: none; }
.hidx ol { list-style: none; margin: 0; padding: 0; }
.hidx a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 11px 2px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.3; color: var(--paper); text-decoration: none; transition: color var(--dur) var(--ease-out), padding var(--dur) var(--ease-out); }
.hidx a:hover, .hidx a:focus-visible { color: var(--crimson-hi); padding-left: 8px; }
.hidx a.is-on { color: var(--crimson-hi); }
.hidx__n { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; color: var(--dim); }
.snap__rsf { flex: none; padding: 3px 6px; border-radius: 4px; background: var(--crimson); font: 600 9.5px/1.2 var(--f-mono); letter-spacing: .12em; color: #fff; }

/* ---------- hub-intro: the category capsule (crimson box) beside the intro + the press line ---------- */
.hub-intro.chapter { padding-block: clamp(72px, 8vw, 128px); background: var(--ink-0); border-top: 1px solid var(--line); }
.hub-intro__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.hub-cap { grid-template-columns: 1fr; margin-top: 22px; }
/* TASK V: the left column holds the brain-mapping room photo; the capsule then leads the text column */
.hub-intro__media { margin: 22px 0 0; }
.hub-intro__media .bezel__core { aspect-ratio: 1 / 1; }
.hub-intro__media picture, .hub-intro__img { display: block; width: 100%; height: 100%; }
.hub-intro__img { object-fit: cover; }
.hub-intro__txt > .hub-cap { margin: 0 0 clamp(26px, 3vw, 40px); }
.hub-cap .w5-cap__prose p { max-width: 56ch; }
.hub-intro__prose p + p { margin-top: 1em; }
.hub-press { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.hub-press__k { font: 600 10.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.hub-press a { font: 800 clamp(1.2rem, 1.7vw, 1.5rem)/1.1 var(--f-display); text-transform: uppercase; color: var(--paper); text-decoration: underline; text-decoration-color: var(--crimson); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.hub-press a:hover { color: var(--crimson-hi); }
.hub-press time { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- hub-children: the rich service index (V2 Swiss index, re-skinned into V5) ---------- */
.hub-kids.chapter { padding-block: clamp(72px, 8vw, 128px); background: linear-gradient(180deg, var(--ink-0) 0%, var(--ink-1) 100%); }
.hub-kids__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.hub-kids__count { display: flex; align-items: baseline; gap: 12px; font: 600 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hub-kids__count span { font: 900 clamp(4rem, 8vw, 7.6rem)/.78 var(--f-display); letter-spacing: -.01em; color: var(--crimson-hi); }
.kids { border-bottom: 1px solid var(--line); }
.kid { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 420px); gap: clamp(20px, 3vw, 48px); align-items: start;
  padding: clamp(32px, 4vw, 56px) 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.kid__rule { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--crimson); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out); }
.kid:hover .kid__rule, .kid:focus-within .kid__rule, .kid:target .kid__rule, .kid.is-lit .kid__rule { transform: scaleX(1); }
.kid__n { font: 600 12px/2.2 var(--f-mono); letter-spacing: .14em; color: var(--crimson-hi); }
/* TASK V: the title is sized to its own column (container units): the longest word (--kid-fit chars, set by the build) always fits,
   so no word runs past the column at any width; overflow-wrap:anywhere stays only as the last resort. A metric-matched fallback face
   (the display face's per-character width, same line box) keeps the wrap and the height the same before and after the webfont swaps. */
@font-face { font-family: 'Big Shoulders Fallback'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Roboto');
  font-weight: 100 900; size-adjust: 63%; }
.kid__main { container-type: inline-size; min-width: 0; }
.kid__h { margin-bottom: 18px; font: 900 clamp(2.4rem, 4.9vw, 5.2rem)/.86 'Big Shoulders Display', 'Big Shoulders Fallback', 'Oswald', sans-serif;
  font-size: min(clamp(2.4rem, 4.9vw, 5.2rem), calc(100cqi / (var(--kid-fit, 10) * .5)));
  text-transform: uppercase; letter-spacing: -.005em; overflow-wrap: anywhere; max-width: 100%; padding-bottom: .04em; transition: transform .6s var(--ease-out); }
.kid:hover .kid__h { transform: translateX(8px); }
/* while GSAP reveals the row it owns the title's transform: no CSS transition may run on it (a transition mid-flight is what GSAP re-read
   as the end state, leaving the title stuck 40% low over the body copy) */
.kid--anim .kid__h { transition: none; }
.kid__prose p { max-width: 58ch; font-size: clamp(1rem, 1.2vw, 1.1rem); color: #ddd3cf; }
.kid__prose p + p { margin-top: .9em; color: var(--muted); }
.kid__media { position: relative; margin: 0; }
.kid__media .bezel__core { aspect-ratio: 4 / 3; }
.kid__media picture, .kid__img, .kid__video { display: block; width: 100%; height: 100%; }
.kid__img, .kid__video { object-fit: cover; }
.kid__img { filter: grayscale(.2) contrast(1.04); transition: filter var(--dur) var(--ease-out), transform 1.2s var(--ease-out); }
.kid:hover .kid__img { filter: none; transform: scale(1.03); }
.kid__tag { position: absolute; left: 18px; top: 18px; z-index: 2; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
@media (prefers-reduced-motion: reduce) { .kid:hover .kid__img, .kid:hover .kid__h { transform: none; } }

/* ---------- ARCH §6.3 routed conditions: the routing grid on the shared condition image map ---------- */
.hub-conds.chapter { padding-block: clamp(72px, 8vw, 128px); background: var(--ink-1); }
.hub-conds__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px clamp(28px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 3.4vw, 44px); }
.hub-conds__head .eyebrow { grid-column: 1 / -1; justify-self: start; }
.hub-conds .h2 { font-size: clamp(2.4rem, 4.8vw, 4.8rem); max-width: 14ch; }
.hub-conds__lede p { color: var(--muted); max-width: 44ch; }
.ctiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ctile { position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column; gap: 10px; min-height: 250px; padding: 24px 22px 22px;
  border-radius: var(--radius-in); border: 1px solid var(--line); background: var(--ink-0); }
.ctile:first-child { grid-column: span 2; }
.ctile--plain { background: radial-gradient(120% 120% at 100% 100%, rgba(99, 18, 50, .75) 0%, var(--ink-0) 65%); }
.ctile--img::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 11, 12, .18) 0%, rgba(14, 11, 12, .5) 42%, rgba(14, 11, 12, .9) 100%); }
.ctile--img .cond__bg img { opacity: .72; }
.ctile::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--crimson); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.ctile:hover::after, .ctile:focus-within::after { transform: scaleX(1); }
.ctile--img:hover .cond__bg img { opacity: .8; transform: scale(1.03); }
.ctile__n { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--crimson-hi); }
.ctile__h { margin-top: auto; font: 800 clamp(1.5rem, 2vw, 1.95rem)/.96 var(--f-display); text-transform: uppercase; max-width: 16ch; }
.ctile:first-child .ctile__h { font-size: clamp(2rem, 3.2vw, 3rem); }
.ctile__a { color: var(--paper); text-decoration: none; }
.ctile__a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ctile__a:focus-visible { outline: none; }
.ctile:focus-within { outline: 2px solid var(--crimson-hi); outline-offset: 3px; }
.ctile__p { font-size: 14.5px; line-height: 1.5; color: #d8cdc9; max-width: 34ch; }
.ctile__go { position: absolute; right: 18px; top: 18px; }
.ctile:hover .cond__go .btn__icon { background: var(--crimson); transform: translateX(4px); }

/* ---------- ARCH §6.3 why-us part 1: the approach (shared slot-5 step markup) + the cited source ---------- */
.hub-approach.chapter { padding-block: clamp(72px, 8vw, 128px); background: var(--ink-0); }
.hub-approach__head { margin-bottom: clamp(28px, 3.4vw, 44px); }
.hub-approach .h2 { font-size: clamp(2.4rem, 4.8vw, 4.8rem); max-width: 16ch; }
.hub-step__h { margin-bottom: 10px; font: 800 clamp(1.45rem, 2.1vw, 1.9rem)/.98 var(--f-display); text-transform: uppercase; }
.hub-step__prose p { color: #e2d8d4; font-size: 16px; max-width: 40ch; }
.hub-sources { margin-top: clamp(28px, 3vw, 40px); padding: 18px 22px; border-radius: 18px; border: 1px solid var(--line); }
.cond-sources__k { margin-bottom: 4px; font: 600 10.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }

/* ---------- hub-proof: the masked display label + the trust ledger ---------- */
.hub-proof__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hub-proof .pros__name { font-size: clamp(4rem, 9vw, 8.8rem); margin-bottom: 0; }
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.ledger__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line-2); }
.ledger__k { font: 600 10.5px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.ledger__v { font: 800 clamp(1.15rem, 1.6vw, 1.45rem)/1.1 var(--f-display); text-transform: uppercase; color: var(--paper); text-decoration: none; transition: color var(--dur) var(--ease-out); }
.ledger__v:hover { color: var(--crimson-hi); }
.ledger__v--rating { display: inline-flex; align-items: center; gap: 16px; }
.ledger__num { font: 900 clamp(3.6rem, 6vw, 5.6rem)/.8 var(--f-display); font-variant-numeric: tabular-nums; }
.ledger__txt { display: grid; gap: 4px; font: 500 14px/1.3 var(--f-body); text-transform: none; color: var(--muted); }
.hub-rev { display: grid; gap: 18px; margin-top: clamp(32px, 4vw, 56px); }

/* ---------- shared chapters on the hub ---------- */
.hpage .booking .h2 { font-size: clamp(2.4rem, 4.4vw, 4.4rem); max-width: 14ch; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
  .hub-hero__copy { grid-template-columns: 1fr; }
  .hidx { display: none; }
  .kid { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 340px); }
  .ctiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hub-intro__grid, .hub-proof__grid, .hub-conds__head { grid-template-columns: 1fr; }
  .hub-intro__media .bezel__core { aspect-ratio: 16 / 10; }
  .kid { grid-template-columns: 44px minmax(0, 1fr); }
  .kid__media { grid-column: 2; max-width: 560px; }
}
@media (max-width: 768px) {
  .hub-hero__h1 { font-size: clamp(2.4rem, 11.2vw, 3.6rem); max-width: none; }
  .hub-hero .svc-hero__geo { font-size: .5em; }
  .hub-hero__eeg { left: 0; top: 52%; height: 18%; }
  .hub-hero .gyro__rec { top: 84px; right: 12px; }
  .hub-kids__head { flex-direction: column; align-items: flex-start; }
  .kid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kid__n { line-height: 1; }
  .kid__media { grid-column: 1; max-width: none; }
  .kid__h { font-size: min(clamp(2.2rem, 10.4vw, 3.2rem), calc(100cqi / (var(--kid-fit, 10) * .5))); margin-bottom: 12px; }
  .ctiles { grid-template-columns: 1fr; }
  .ctile:first-child { grid-column: auto; }
  .ctile { min-height: 190px; }
  .ledger__row { grid-template-columns: 1fr; gap: 8px; }
  .hub-steps .w5-step { grid-template-columns: 72px 1fr; }
}