/* Holohan Martial Arts v6: the Earth house of Four Wellness.
   Grammar: Takedown. Stand up (light, upright, things hang) > the hit > on the ground (heavy, flat, things settle).
   Shared system from /family/family.css; this file sets the earth tokens and the house sections. */
@font-face { font-family: "Big Shoulders Stencil Display"; src: url("/holohan/fonts/big-shoulders-stencil-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --h-ground: #f3f0e7;
  --h-ink: #1c1d19;
  --h-soft: #5f5d50;
  --h-accent: #1f4d3a;
  --h-accent-ink: #f3f0e7;
  --h-line-ink: #1c1d19;
  --h-dark: #13261d;
  --h-dark-2: #1a3127;
  --h-night: #0c1510;
  --h-earth: #1f4d3a;
  --h-leaf: #bfca91;
  --h-focus: #1f4d3a;
  --stencil: "Big Shoulders Stencil Display", "Barlow Condensed", "Arial Narrow", sans-serif;
  --pad: clamp(44px, 9vw, 136px);
  --gx: var(--fw-gutter);
  --ch: 10px;
  --ch-clip: polygon(var(--ch) 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 calc(100% - var(--ch)), 0 var(--ch));
  --drop: cubic-bezier(.45, 0, .9, .45);   /* gravity: accelerates into the floor */
  --settle: cubic-bezier(.2, .7, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.hm { margin: 0; background: var(--h-ground); color: var(--h-ink); font: 400 16px/1.6 var(--fw-text); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.fw-on-dark { --h-soft: #b9c2a8; --h-accent: var(--h-leaf); --h-accent-ink: #13261d; --h-line-ink: #f3f0e7; --h-focus: var(--h-leaf); color: #f3f0e7; }
.fw-on-dark .fw-kicker { color: var(--h-leaf); }
:focus-visible { outline: 2px solid var(--h-focus); outline-offset: 3px; }
.hm main section[id] { scroll-margin-top: 0; }

/* =====================================================================
   1. HERO. A true layered scene: plate, light, octagon, film window, Paddy, cage mesh, dust.
   Planes land heavy on load, foreground last, then sink at different rates with scroll.
   ===================================================================== */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--h-night); color: #f3f0e7; height: calc(100svh - var(--fw-bar-h)); min-height: 560px; max-height: 1040px; }
.hero__world, .hero__fore { position: absolute; inset: 0; pointer-events: none; }
.hero__world { z-index: 1; }
.hero__fore { z-index: 2; }
.hz { position: absolute; display: block; margin: 0; }
.hz img { max-width: none; display: block; width: 100%; height: 100%; }
.hz--plate, .hz--win, .hz--paddy, .hz--mesh { will-change: transform; }
.hz--plate { inset: 0; }
.hz--plate img { object-fit: cover; object-position: 46% 30%; }
.hz--win { width: min(78vw, 320px); aspect-ratio: 1; left: -16px; top: 31%; }
.win__clip { position: absolute; inset: 0; clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); background: #050806; }
.win__clip img, .win__clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.win__clip video { opacity: 0; transition: opacity .4s var(--fw-ease); }
.win__clip video.is-on { opacity: 1; }
.win__ring { position: absolute; inset: -6%; width: 112%; height: 112%; overflow: visible; }
.win__ring polygon { fill: none; stroke: var(--h-leaf); stroke-width: 2; vector-effect: non-scaling-stroke; }
.hz--paddy { width: min(64vw, 250px); aspect-ratio: 559 / 961; right: -34px; bottom: 0; }
.hz--thud { width: 330px; aspect-ratio: 1; right: -30px; bottom: -120px; opacity: 0; }
.hz--mesh { left: -14%; right: -14%; bottom: -8px; height: 30%; background: url("/holohan/assets/mesh-edge.webp") 40% 100% / cover no-repeat; opacity: .85; }

.hero__in { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: flex; flex-direction: column; padding: 14px var(--gx) 96px; }
.hero__in a { pointer-events: auto; }
.hero__brand { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 15px/.95 var(--fw-display); letter-spacing: .1em; text-transform: uppercase; }
.hero__brand img { width: 38px; height: 38px; }
.hero__kicker { margin: 20px 0 8px; }
.hero__knot { font-size: 22px; display: inline-flex; color: #f3f0e7; view-transition-name: fw-mark; }
.hero__h { margin: 0; font: 800 clamp(54px, 17.5vw, 74px)/.88 var(--fw-display); text-transform: uppercase; letter-spacing: -.005em; }
.hero__a, .hero__b { display: block; }
.hero__b { font: 800 clamp(60px, 20.4vw, 88px)/.86 var(--fw-display); letter-spacing: -.005em; color: var(--h-leaf); }
.hero__lede { margin: auto 0 0; max-width: 168px; font: 400 14px/1.45 var(--fw-text); color: #e8ebdc; }
.hero__actions { display: none; }

/* landing on load. Individual transform properties, so scroll writes to transform never fight them. */
@keyframes land { 0% { transform: translate3d(0, -72px, 0); opacity: 0; animation-timing-function: var(--drop); } 12% { opacity: 1; } 56% { transform: translate3d(0, 0, 0); animation-timing-function: var(--settle); } 70% { transform: translate3d(0, -7px, 0); animation-timing-function: cubic-bezier(.5, 0, .9, .5); } 82% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes land-text { 0% { transform: translate3d(0, -34px, 0); opacity: 0; animation-timing-function: var(--drop); } 20% { opacity: 1; } 62% { transform: translate3d(0, 0, 0); animation-timing-function: var(--settle); } 78% { transform: translate3d(0, -4px, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes thud { 0% { transform: translate3d(0, 0, 0); } 22% { transform: translate3d(0, 7px, 0); } 48% { transform: translate3d(0, -3px, 0); } 100% { transform: translate3d(0, 0, 0); } }
@keyframes puff { 0% { opacity: 0; transform: scale(.25); } 14% { opacity: .62; } 100% { opacity: 0; transform: scale(1.5); } }
.hz--win { animation: land .95s backwards .1s; }
.hz--paddy { animation: land .95s backwards .36s; }
.hz--mesh { animation: land .95s backwards .52s; }
.hero__world, .hero__fore { animation: thud .45s backwards .86s; }
.hz--thud { animation: puff .8s backwards .85s; }
.hero__brand, .hero__kicker, .hero__a, .hero__b, .hero__lede { will-change: transform, opacity; }
.hero__brand { animation: rise .6s backwards .1s; }
.hero__kicker { animation: rise .6s backwards .2s; }
.hero__a { animation: land-text .75s backwards .16s; }
.hero__b { animation: land-text .75s backwards .28s; }
.hero__lede { animation: rise .6s backwards .6s; }
.hero__actions { animation: rise .6s backwards .72s; }

@media (max-height: 700px) and (max-width: 760px) {
  .hero__h { font-size: clamp(46px, 14vw, 58px); }
  .hero__b { font-size: clamp(58px, 19vw, 76px); }
  .hero__kicker { margin-top: 12px; }
  .hz--win { width: min(58vw, 206px); top: 35%; left: -12px; }
  .hz--paddy { width: min(50vw, 186px); }
  .hero__lede { font-size: 13px; max-width: 150px; }
  .hero__in { padding-bottom: 88px; }
}

/* =====================================================================
   2. WELCOME. The cage doors open on everyday people (on the team photo, unpinned, cheap to composite).
   ===================================================================== */
.welcome { background: var(--h-ground); padding: var(--pad) 0; }
.welcome__in { max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--gx); display: grid; gap: 18px; }
.welcome__h { margin: 0; font-size: clamp(34px, 10.2vw, 76px); max-width: 12ch; }
.welcome__lead { margin: 0; font: 500 16px/1.5 var(--fw-text); max-width: 46ch; }
.welcome__photo { position: relative; margin: 6px calc(var(--gx) * -1); aspect-ratio: 16 / 9.4; overflow: hidden; background: var(--h-night); }
.welcome__photo > picture, .welcome__photo > picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.welcome__photo > picture img { object-fit: cover; object-position: 50% 40%; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 6px 0 0; padding: 0; }
.facts > div { border-top: 1px solid var(--h-ink); padding: 8px 0 0; }
.facts dt { font: 700 clamp(26px, 7vw, 46px)/1 var(--fw-display); color: var(--fw-earth); }
.facts dd { margin: 4px 0 0; font-size: 13px; line-height: 1.35; color: var(--h-soft); }
.door { position: absolute; top: 0; bottom: 0; width: 50.4%; z-index: 3; background: var(--h-night); will-change: transform; }
.door::before { content: ""; position: absolute; inset: 0; background: url("/holohan/assets/mesh.webp") 0 0 / auto 100% repeat-x; opacity: .8; }
.door--l { left: 0; border-right: 2px solid #f3f0e74d; }
.door--r { right: 0; border-left: 2px solid #f3f0e74d; }
.door--r::before { background-position: 100% 0; transform: scaleX(-1); }
.doors__seal { position: absolute; z-index: 4; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; will-change: transform, opacity; }

/* =====================================================================
   3. THE BUILDING. Two floors, one school. Pick a class and the crest drops onto its floor.
   ===================================================================== */
.room { background: var(--h-dark); padding: var(--pad) 0 calc(var(--pad) * .8); overflow: clip; }
.room__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--gx); grid-template-areas: "side" "picks" "bld" "read"; }
.room__side { grid-area: side; }
.room__side .fw-h2 { margin-bottom: 14px; }
.room__intro { color: #d2d8c3; margin: 0; max-width: 44ch; }
.room__picks { grid-area: picks; display: flex; gap: 8px; margin: 0 calc(var(--gx) * -1); padding: 2px var(--gx); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.room__picks::-webkit-scrollbar { display: none; }
.pick { flex: none; min-height: 44px; padding: 0 16px; border: 1.5px solid #ffffff3d; border-radius: 999px; background: none; color: #f3f0e7; font: 600 14px/1 var(--fw-text); cursor: pointer; scroll-snap-align: start; white-space: nowrap; transition: background-color .18s var(--fw-ease), color .18s var(--fw-ease), border-color .18s var(--fw-ease), transform .18s var(--fw-ease); }
.pick:active { transform: scale(.97); }
.pick[aria-pressed="true"] { background: var(--h-leaf); border-color: var(--h-leaf); color: #13261d; }
@media (hover: hover) and (pointer: fine) { .pick:hover { border-color: var(--h-leaf); } }
.room__read { grid-area: read; border-top: 1px solid #ffffff26; padding-top: 16px; min-height: 196px; }
.room__where { margin: 0 0 10px; font: 700 12px/1 var(--fw-text); letter-spacing: .2em; text-transform: uppercase; color: var(--h-leaf); }
.room__text { margin: 0 0 12px; color: #e3e7d8; max-width: 46ch; }
.room__who { margin: 0; font-size: 14px; color: #b9c2a8; }

.bld { grid-area: bld; position: relative; display: grid; padding-top: 46px; margin-top: 0; }
.bld__roof { display: block; width: 100%; height: 30px; overflow: visible; }
.bld__roof polyline { fill: none; stroke: #ffffff59; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bld__slab { height: 10px; background: #2f4a3c; }
.bld__ground { height: 16px; background: repeating-linear-gradient(135deg, #5b6f3e 0 2px, transparent 2px 9px), #2a3a22; border-top: 3px solid var(--h-leaf); }
.floor { position: relative; display: block; width: 100%; padding: 0; border: 0; border-left: 2px solid #ffffff4d; border-right: 2px solid #ffffff4d; background: #0e1c15; color: inherit; text-align: left; cursor: pointer; aspect-ratio: 16 / 6.6; overflow: hidden; }
.floor__img { position: absolute; inset: 8px; overflow: hidden; background: #0a140f; }
.floor__img img { width: 100%; height: 100%; object-fit: cover; opacity: .26; transition: opacity .45s var(--fw-ease); }
.floor.is-lit .floor__img img { opacity: 1; }
.floor__tag { position: absolute; left: 16px; bottom: 16px; display: grid; gap: 4px; padding: 9px 12px; background: rgba(14, 28, 21, .9); border-left: 3px solid var(--h-leaf); max-width: calc(100% - 32px); }
.floor__tag b { font: 700 19px/1 var(--fw-display); text-transform: uppercase; letter-spacing: .04em; color: #f3f0e7; }
.floor__tag span { font-size: 12.5px; line-height: 1.3; color: #d2d8c3; }
.floor:not(.is-lit) .floor__tag { opacity: .7; }
.bld__weight { position: absolute; z-index: 3; right: 22px; top: 0; width: 52px; height: 52px; padding: 6px; border-radius: 50%; background: #f3f0e7; border: 1px solid #00000040; transform: translate3d(0, 0, 0); will-change: transform; }
.bld__weight img { width: 38px; height: 38px; }
.bld[data-p="all"] .bld__weight { opacity: 0; }
.bld__dust { position: absolute; z-index: 4; left: 0; top: 0; width: 220px; height: 220px; margin: -110px 0 0 -110px; opacity: 0; pointer-events: none; }
.also { max-width: var(--fw-max); margin: clamp(24px, 5vw, 56px) auto 0; padding: 0 var(--gx); font-size: 14.5px; line-height: 1.55; color: #c9d0bb; }
.also b { color: var(--h-leaf); font-weight: 700; }

/* =====================================================================
   4. THE HIT. Real fight-night footage. The loop stops dead on the punch; the page takes the hit.
   ===================================================================== */
.hit { background: #070d0a; position: relative; }
.hit__track { height: calc(100svh + 120svh); }
.hit__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #070d0a url("/holohan/assets/hit-bg-m.webp") 50% 50% / cover no-repeat; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 0 0 56px; }
.hit__pre { position: relative; z-index: 3; margin: 0; padding: 0 var(--gx); font: 600 clamp(20px, 5.4vw, 30px)/1.1 var(--fw-display); letter-spacing: .14em; text-transform: uppercase; color: #cfd6bf; }
.hit__frame { position: relative; z-index: 2; margin: 0; width: 100%; will-change: transform, opacity; }
.hit__shake { position: relative; aspect-ratio: 4 / 3; background: #050806; overflow: hidden; }
.hit__pre, .hit__real, .hit__post, .hit__flash { will-change: transform, opacity; }
.hit__shake picture, .hit__shake img.hit__still, .hit__shake video, .hit__first { position: absolute; inset: 0; width: 100%; height: 100%; }
.hit__shake img, .hit__shake video { width: 100%; height: 100%; object-fit: cover; }
.hit__shake picture { display: block; }
.hit__still { opacity: 0; }
.hit__video { opacity: 0; }
.hit__video.is-on { opacity: 1; }
.hit__flash { position: absolute; inset: 0; background: #f3f0e7; opacity: 0; pointer-events: none; }
.hit__ring { will-change: transform, opacity; position: absolute; left: 70%; top: 36%; width: 150%; max-width: none; height: auto; aspect-ratio: 1; margin: 0; opacity: 0; transform: translate(-50%, -50%) scale(.2); pointer-events: none; }
.hit__frame figcaption { padding: 8px var(--gx) 0; font-size: 12.5px; color: #aab39a; }
.hit__h { position: relative; z-index: 3; margin: 0; padding: 0 var(--gx); line-height: .8; }
.hit__real { display: block; text-transform: uppercase; font: 900 clamp(120px, 40vw, 190px)/.8 var(--stencil); letter-spacing: .01em; color: var(--h-leaf); transform-origin: 0 100%; opacity: 0; }
.hit__post { position: relative; z-index: 3; margin: 0; padding: 0 var(--gx); max-width: 28ch; font: 500 clamp(17px, 4.6vw, 22px)/1.35 var(--fw-text); color: #e6e9d8; opacity: 0; }
.hit__real.is-in { opacity: 1; animation: slam .46s var(--settle) backwards; }
.hit__post.is-in { opacity: 1; animation: rise .6s backwards .42s; }
@keyframes slam { 0% { opacity: 0; transform: translate3d(0, -10px, 0) scale(1.55); } 40% { opacity: 1; } 68% { transform: translate3d(0, 3px, 0) scale(.97); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }

/* =====================================================================
   5. TRAINING. The ground half: disciplines lie flat as rows; kids get a growth ruler.
   ===================================================================== */
.train { position: relative; background: var(--h-earth); padding: calc(var(--pad) + 14px) 0 0; }
.train::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; border-top: 3px solid var(--h-leaf); background: repeating-linear-gradient(135deg, #5b6f3e 0 2px, transparent 2px 9px), #2a3a22; }
.train__in { max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--gx); }
.train__head { margin-bottom: clamp(24px, 4vw, 48px); display: grid; gap: 12px; }
.train__head .fw-h2 { margin: 0; font-size: clamp(42px, 12.5vw, 96px); font-weight: 800; }
.train__lede { margin: 0; max-width: 40ch; color: #dfe6cf; font-size: 17px; }
.disc { border-bottom: 1px solid #ffffff3d; }
.disc__row { border-top: 1px solid #ffffff3d; }
.disc__row summary { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; min-height: 68px; padding: 10px 0; cursor: pointer; }
.disc__row summary::-webkit-details-marker { display: none; }
.disc__name { font: 800 clamp(33px, 9.4vw, 70px)/.95 var(--fw-display); text-transform: uppercase; letter-spacing: -.005em; }
.disc__tag { grid-column: 1; font: 700 11.5px/1.2 var(--fw-text); letter-spacing: .16em; text-transform: uppercase; color: var(--h-leaf); }
.disc__row summary::after { content: ""; grid-row: 1 / span 2; grid-column: 2; width: 44px; height: 44px; background: #f3f0e7 center / 16px 2px no-repeat linear-gradient(#13261d, #13261d), linear-gradient(#13261d, #13261d) center / 2px 16px no-repeat; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); transition: transform .3s var(--settle); }
[data-land] { transform-origin: 0 100%; will-change: transform, opacity; }
.js [data-land]:not(.is-in) { opacity: 0; }
[data-land].is-in { animation: land-text .85s backwards; }
.disc__row[open] summary::after { background: #bfca91 center / 16px 2px no-repeat linear-gradient(#13261d, #13261d); }
.disc__row summary:focus-visible { outline-offset: -2px; }
.disc__body { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; padding: 2px 0 20px; animation: lay .5s var(--settle) backwards; }
@keyframes lay { from { opacity: 0; transform: translate3d(0, -12px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.disc__body img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; }
.disc__body p { margin: 0 0 10px; color: #e3e9d5; max-width: 52ch; font-size: 15px; line-height: 1.55; }
.disc__note { font-size: 14px; color: #bfca91 !important; }
.train__cta { margin: 22px 0 0; padding-bottom: var(--pad); }
.train .fw-btn { --h-accent: var(--h-leaf); --h-accent-ink: #13261d; }

.kids { background: var(--h-dark); padding: var(--pad) 0; }
.kids__in { max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--gx); }
.kids__h { margin: 0 0 10px; font: 800 clamp(38px, 12.2vw, 104px)/.9 var(--fw-display); text-transform: uppercase; white-space: nowrap; }
.kids__lede { margin: 0; max-width: 40ch; color: #d2d8c3; }
.kids__ruler { margin: 20px calc(var(--gx) * -.4) 4px; }
.ruler { --thumb: 48px; position: relative; padding-top: 4px; }
.ruler input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 56px; margin: 0; background: transparent; cursor: grab; touch-action: pan-y; }
.ruler input:active { cursor: grabbing; }
.ruler input::-webkit-slider-runnable-track { height: 14px; background: linear-gradient(90deg, #bfca91 0 20.8%, transparent 20.8% 21.4%, #8fa078 21.4% 45.4%, transparent 45.4% 46%, #6f8564 46% 70.4%, transparent 70.4% 71%, #55704f 71% 100%) center / 100% 100% no-repeat; border-radius: 0; }
.ruler input::-moz-range-track { height: 14px; background: linear-gradient(90deg, #bfca91 0 20.8%, transparent 20.8% 21.4%, #8fa078 21.4% 45.4%, transparent 45.4% 46%, #6f8564 46% 70.4%, transparent 70.4% 71%, #55704f 71% 100%); }
.ruler input::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb); height: var(--thumb); margin-top: -17px; background: #f3f0e7; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); border: 0; }
.ruler input::-moz-range-thumb { width: var(--thumb); height: var(--thumb); background: #f3f0e7; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); border: 0; border-radius: 0; }
.ruler input:focus-visible { outline: 2px solid var(--h-leaf); outline-offset: 2px; }
.ruler__ticks { list-style: none; display: flex; justify-content: space-between; margin: 0; padding: 0 calc(var(--thumb) / 2); pointer-events: none; }
.ruler__ticks li { width: 0; display: flex; justify-content: center; white-space: nowrap; font: 700 12px/1 var(--fw-text); color: #aab39a; }
.kid { display: grid; gap: 16px; margin-top: 20px; }
.kid__img { width: 100%; aspect-ratio: 16 / 5.8; object-fit: cover; border-radius: 12px; }
.kid__ages { margin: 0 0 8px; font: 700 12px/1.2 var(--fw-text); letter-spacing: .16em; text-transform: uppercase; color: var(--h-leaf); }
.kid__name { margin: 0 0 10px; font: 800 clamp(38px, 11vw, 64px)/.92 var(--fw-display); text-transform: uppercase; }
.kid p { max-width: 52ch; }
.kid__txt p { margin: 0 0 10px; color: #e3e9d5; }
.kid__does { font-size: 14.5px; color: #bfca91 !important; }
.kid.is-land .kid__txt, .kid.is-land .kid__img { animation: lay .45s var(--settle) backwards; }
.kids__word { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #ffffff2e; font-size: 14.5px; color: #b9c2a8; max-width: 52ch; }

/* =====================================================================
   6. PEOPLE
   ===================================================================== */
.people { background: var(--h-ground); padding: var(--pad) 0; }
.people__in { max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--gx); }
.paddy { display: grid; gap: 18px; }
.paddy__fig { margin: 0 calc(var(--gx) * -1); aspect-ratio: 1 / .58; overflow: hidden; background: #0e1c15; }
.paddy__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.paddy__copy .fw-h2 { font-size: clamp(44px, 13vw, 120px); margin-bottom: 12px; white-space: nowrap; }
.paddy__q { margin: 0 0 14px; padding: 0; font: 600 clamp(19px, 5.4vw, 32px)/1.2 var(--fw-display); letter-spacing: .01em; text-transform: uppercase; color: var(--fw-earth); }
.paddy__q p { margin: 0; }
.paddy__bio { margin: 0 0 18px; font-size: 15px; color: var(--h-soft); max-width: 54ch; }
.paddy__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; max-width: 520px; }
.paddy__facts > div { border-top: 1px solid var(--h-ink); padding-top: 10px; }
.paddy__facts dt { font: 700 clamp(28px, 8vw, 46px)/1 var(--fw-display); color: var(--fw-earth); }
.paddy__facts dd { margin: 4px 0 0; font-size: 13px; line-height: 1.3; color: var(--h-soft); }
.coaches { margin-top: clamp(32px, 7vw, 96px); }
.coaches__h { margin: 0 0 16px; font: 800 clamp(34px, 9vw, 56px)/.95 var(--fw-display); text-transform: uppercase; }
.coaches__row { list-style: none; margin: 0 calc(var(--gx) * -1); padding: 0 var(--gx) 14px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #1f4d3a #0000; }
.coaches__row li { flex: 0 0 158px; scroll-snap-align: start; display: grid; gap: 2px; align-content: start; }
.coaches__row img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 8px; border-radius: 12px; background: #0e1c15; }
.coaches__row b { font: 700 19px/1.05 var(--fw-display); text-transform: uppercase; letter-spacing: .03em; }
.coaches__row span { font-size: 13px; line-height: 1.35; color: var(--h-soft); }
.coaches__cell { display: none !important; }
.coaches__q { margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--h-ink); max-width: 48ch; }
.coaches__q p { margin: 0 0 8px; font: 500 clamp(18px, 5vw, 24px)/1.35 var(--fw-text); }
.coaches__q cite { font: 700 12px/1 var(--fw-text); letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: var(--h-soft); }

.fw-film { padding: clamp(36px, 9vw, 128px) 0; }

/* ---- FAQ ---- */
.faq { background: var(--h-ground); padding: 0 0 var(--pad); }
.faq__grid { display: grid; gap: 22px; max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--gx); border-top: 1px solid var(--h-ink); padding-top: clamp(32px, 5vw, 64px); }
.faq .fw-h2 { max-width: 12ch; font-size: clamp(36px, 10.5vw, 76px); margin: 0; }
.faq__list details { border-bottom: 1px solid var(--fw-rule); }
.faq__list details:first-child { border-top: 1px solid var(--fw-rule); }
.faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 0; font: 700 17px/1.3 var(--fw-text); cursor: pointer; list-style: none; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid; border-bottom: 2px solid; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--settle); }
.faq__list details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq__list p { margin: 0 0 18px; color: var(--h-soft); max-width: 58ch; }

/* =====================================================================
   9. START. The membership path, then your first week.
   ===================================================================== */
.start { background: var(--h-dark); padding: var(--pad) 0; }
.start__in { max-width: var(--fw-max); margin: 0 auto; padding: 0 var(--gx); }
.start__head { display: grid; gap: 12px; margin-bottom: clamp(22px, 4vw, 56px); }
.start__head .fw-h2 { margin: 0; font-size: clamp(38px, 11.4vw, 100px); max-width: 13ch; }
.start__lede { margin: 0; max-width: 52ch; color: #d2d8c3; font-size: 17px; }
.path { display: grid; gap: 14px; margin-bottom: clamp(32px, 7vw, 96px); }
.path__card { padding: 18px 18px 20px; background: var(--h-earth); clip-path: var(--ch-clip); --ch: 16px; }
.path__card--onyx { background: #050806; border: 0; }
.path__tier { margin: 0 0 10px; font: 700 12px/1 var(--fw-text); letter-spacing: .2em; text-transform: uppercase; color: var(--h-leaf); }
.path__h { margin: 0 0 10px; font: 800 clamp(34px, 9vw, 52px)/.95 var(--fw-display); text-transform: uppercase; }
.path__card p:not(.path__tier) { margin: 0; color: #dfe6cf; max-width: 48ch; }
.path__bar { padding: 4px 0; }
.path__canvas { display: none; width: 100%; height: auto; }
.js .path__canvas { display: block; }
.js .path__plates { display: none; }
.path__plates { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; }
.path__plates li { aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolygon points='3,0 7,0 10,3 10,7 7,10 3,10 0,7 0,3' fill='%23bfca91'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.path__label { margin: 0; font: 700 13px/1 var(--fw-text); letter-spacing: .18em; text-transform: uppercase; color: #f3f0e7; }
.week__h { margin: 0 0 clamp(14px, 3vw, 36px); font: 800 clamp(48px, 14vw, 132px)/.88 var(--fw-display); text-transform: uppercase; }
.week__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: wk; }
.week__step { padding: 12px 0 14px; border-top: 1px solid #ffffff38; display: grid; gap: 8px; justify-items: start; }
.week__verb { margin: 0; font: 800 clamp(30px, 8vw, 46px)/1 var(--fw-display); text-transform: uppercase; color: var(--h-leaf); }
.week__text { margin: 0; color: #dfe6cf; max-width: 46ch; font-size: 14.5px; line-height: 1.45; }
.week__addr { font-style: normal; font-weight: 600; max-width: 34ch; }


/* =====================================================================
   NAV: the gate. A thumb-reach dock (Book + The school) and the open-school directory behind cage doors.
   ===================================================================== */
.dock { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px; background: rgba(12, 21, 16, .96); border-top: 1px solid #ffffff1f; padding: 8px max(var(--gx), env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(var(--gx), env(safe-area-inset-right)); transform: translate3d(0, 130%, 0); will-change: transform; }
.dock.is-on { transform: translate3d(0, 0, 0); }
.dock__book, .dock__gate { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none; font: 800 14px/1 var(--fw-text); letter-spacing: .08em; text-transform: uppercase; clip-path: var(--ch-clip); --ch: 11px; transition: transform .16s var(--fw-ease); }
.dock__book { flex: 1 1 0; max-width: 290px; background: var(--h-leaf); color: #13261d; }
.dock__gate { flex: none; padding: 0 18px 0 14px; background: #f3f0e7; color: #13261d; }
.dock__gate svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.dock__book:active, .dock__gate:active { transform: scale(.97); }
.dock :focus-visible { outline: 3px solid #f3f0e7; outline-offset: -5px; }
.dock__book:focus-visible { outline-color: #13261d; }
html:not(.js) .dock__gate { display: none; }
html:not(.js) .dock { transform: none; position: static; }

.gate { position: fixed; inset: 0; z-index: 90; background: var(--h-night); color: #f3f0e7; display: none; overflow: hidden; }
.gate.is-open { display: block; }
.gate__door { position: absolute; top: 0; bottom: 0; width: 50.4%; z-index: 3; background: var(--h-night); pointer-events: none; }
.gate__door::before { content: ""; position: absolute; inset: 0; background: url("/holohan/assets/mesh.webp") 0 0 / auto 100% repeat-x; opacity: .78; }
.gate__door--l { left: 0; border-right: 2px solid #f3f0e74d; translate: -101% 0; }
.gate__door--r { right: 0; border-left: 2px solid #f3f0e74d; translate: 101% 0; }
.gate__door--r::before { transform: scaleX(-1); }
.gate__in { position: absolute; inset: 0; z-index: 2; overflow-y: auto; overscroll-behavior: contain; padding: max(18px, env(safe-area-inset-top)) var(--gx) calc(24px + env(safe-area-inset-bottom)); max-width: 980px; margin: 0 auto; }
.gate__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.gate__head h2 { margin: 0; font: 800 38px/1 var(--fw-display); text-transform: uppercase; letter-spacing: .02em; }
.gate__close { min-height: 44px; padding: 0 18px; border: 1.5px solid #f3f0e7; background: none; color: inherit; font: 700 13px/1 var(--fw-text); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; clip-path: var(--ch-clip); --ch: 9px; }
.gate__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gate__list a { display: grid; grid-template-rows: auto 1fr; height: 100%; background: #16261d; color: #f3f0e7; text-decoration: none; clip-path: var(--ch-clip); --ch: 14px; transition: background-color .16s var(--fw-ease), transform .16s var(--fw-ease); }
.gate__list a:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .gate__list a:hover { background: #20382b; } }
.gate__list img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gate__list span { display: grid; gap: 3px; padding: 10px 14px 14px; align-content: start; }
.gate__list b { font: 800 22px/1 var(--fw-display); text-transform: uppercase; letter-spacing: .03em; }
.gate__list small { font-size: 12.5px; color: var(--h-leaf); letter-spacing: .04em; }
.gate :focus-visible { outline: 3px solid var(--h-leaf); outline-offset: -4px; }

/* =====================================================================
   DESKTOP
   ===================================================================== */
@media (min-width: 761px) {
  .hero { min-height: 680px; }
  .hero__in { max-width: var(--fw-max); margin: 0 auto; padding: clamp(20px, 3.4vh, 40px) var(--gx) clamp(40px, 8vh, 96px); justify-content: flex-start; }
  .hero__brand { font-size: 17px; }
  .hero__brand img { width: 44px; height: 44px; }
  .hero__kicker { margin: clamp(34px, 8vh, 96px) 0 12px; }
  .hero__h { font-size: clamp(76px, 9.2vw, 138px); max-width: 7.2em; }
  .hero__b { font-size: clamp(104px, 11.6vw, 176px); }
  .hero__lede { margin: clamp(20px, 3vh, 34px) 0 0; max-width: 34ch; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; }
  .hero__actions { display: flex; margin-top: 26px; pointer-events: auto; }
  .hz--plate img { object-position: 50% 42%; }
    .hz--win { width: min(70vh, 40vw, 600px); left: auto; right: clamp(150px, 19vw, 330px); top: 13%; }
  .hz--paddy { width: min(40vh, 24vw, 360px); right: 2vw; bottom: 0; }
  .hz--thud { width: 520px; right: 0; bottom: -180px; }
  .hz--mesh { left: auto; right: -4%; width: 62%; height: 44%; bottom: -10px; background-position: 100% 100%; }
      
  .welcome__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "copy photo" "facts photo"; column-gap: clamp(32px, 6vw, 96px); row-gap: 28px; align-items: start; }
  .welcome__copy { grid-area: copy; align-self: end; }
  .welcome__photo { grid-area: photo; margin: 0; aspect-ratio: 16 / 11; }
  .facts { grid-area: facts; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
  .welcome__lead { font-size: 19px; margin-top: 18px; }
  .doors__seal { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
  .gate__door::before { background-size: auto 100%; }

  .room__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(32px, 5vw, 80px); grid-template-areas: "side bld" "picks bld" "read bld"; align-items: start; }
  .room__picks { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .room__read { min-height: 250px; }
  .bld { grid-row: 1 / span 3; padding-top: 52px; margin-top: 0; }
  .also { font-size: 16px; max-width: min(var(--fw-max), 100%); }

  .hit__track { height: calc(100svh + 190svh); }
  .hit__stage { display: block; padding: 0; background-image: url("/holohan/assets/hit-bg.webp"); }
  .hit__pre { position: absolute; left: 7vw; top: 12vh; margin: 0; padding: 0; font-size: clamp(20px, 2vw, 30px); }
  .hit__frame { position: absolute; left: 7vw; top: 0; bottom: 0; margin: auto 0; width: 64vw; height: max-content; }
  .hit__shake { aspect-ratio: 16 / 9; }
  .hit__h { position: absolute; right: 3vw; bottom: 21vh; margin: 0; padding: 0; text-align: right; }
  .hit__real { font-size: clamp(150px, 15.4vw, 270px); transform-origin: 100% 100%; }
  .hit__post { position: absolute; right: 3vw; bottom: 9vh; width: min(24vw, 360px); margin: 0; padding: 0; font-size: clamp(18px, 1.5vw, 24px); }
  .hit__frame figcaption { padding-left: 0; }
  .hit__ring { left: 76%; top: 34%; width: 80%; }
  
  .disc__row summary { min-height: 96px; }
  .disc__body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-bottom: 40px; }
  .disc__body img { aspect-ratio: 16 / 9; border-radius: 14px; }
  .disc__body p { font-size: 16px; line-height: 1.6; }
  .train__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .kid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
  .ruler { --thumb: 52px; }
  .kids__ruler { margin: 36px 0 12px; }

  .paddy { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
  .paddy__fig { margin: 0; aspect-ratio: 1; border-radius: 20px; }
  .coaches__row { margin: 0; padding: 0 0 14px; overflow-x: visible; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
  .coaches__cell { display: grid !important; align-content: center; gap: 12px; padding: 0 0 0 4px; border-top: 1px solid var(--h-ink); }
  .coaches__qm { font: 500 clamp(18px, 1.5vw, 22px)/1.4 var(--fw-text); }
  .coaches__by { font: 700 12px/1 var(--fw-text); letter-spacing: .16em; text-transform: uppercase; color: var(--h-soft); }
  .coaches__q { display: none; }
  .coaches__row li { flex: none; }
  .coaches__row b { font-size: 21px; }
  .coaches__row span { font-size: 14px; }
  .faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); }
  .path { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .path__bar { grid-column: 1 / -1; order: 3; }
  .path__plates { grid-template-columns: repeat(30, 1fr); gap: 6px; }
  .week__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
  .gate__list { grid-template-columns: repeat(4, 1fr); }
  .dock { left: 50%; right: auto; bottom: 16px; width: min(520px, calc(100vw - 2 * var(--gx))); padding: 8px; transform: translate3d(-50%, 150%, 0); border: 1px solid #ffffff26; }
  .dock.is-on { transform: translate3d(-50%, 0, 0); }
  .gate__head h2 { font-size: 54px; }
}

/* =====================================================================
   REDUCED MOTION: a complete, still page. The doors are open, the hit has landed.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hz, .bld__weight, .hit__frame, .hit__shake,   .hit__track { height: auto; }
  .hit__stage { position: relative; height: auto; min-height: 0; }
  .door, .doors__seal { display: none; }
  .hit__stage { padding: var(--pad) 0; }
  .hit__real, .hit__post, .hit__still { opacity: 1; }
  .hit__first, .hit__video { display: none; }
  .hit__pre { padding-bottom: 14px; }
  .hz--thud { display: none; }
  .gate__door { display: none; }
  .dock { transform: none; }
}