/* =====================================================================
   Sloka International School, Manneguda: admissions landing page
   Concept: "Every child is born with a unique spark."
   ---------------------------------------------------------------------
   1. Tokens          8. Pathway          15. Location map
   2. Base            9. Cambridge Fit    16. Enquiry ticket
   3. Type helpers   10. Results          17. Footer
   4. Buttons        11. Voice            18. Mobile chrome
   5. Global layers  12. Bento            19. Motion utilities
   6. Header/Loader  13. Prism            20. Reduced motion
   7. Hero / Seven / 14. Letter / Stories
      Approach
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Official Sloka brand colours */
  --yellow: #F9C212;
  --orange: #E87724;
  --maroon: #971B1E;
  --maroon-deep: #761518;   /* shade of brand maroon for depth in dark sections */
  --ink: #1A1110;
  --paper: #FBF5E9;
  --paper-2: #F3E9D4;       /* slightly darker paper for layered sheets */
  --kraft: #E6D2AE;         /* desk */
  --muted: #5B4A44;         /* secondary text on paper, AA on --paper */

  --f-display: "Gloock", "DM Serif Display", Georgia, serif;
  --f-body: "Mukta", "Hind", system-ui, sans-serif;
  --f-hand: "Caveat", "Segoe Print", cursive;
  --f-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1360px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 72px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button { font: inherit; }
main, footer { position: relative; z-index: 2; }
section { position: relative; }

:focus-visible { outline: 3px solid var(--maroon); outline-offset: 3px; border-radius: 4px; }
.theme-dark :focus-visible { outline-color: var(--yellow); }

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--yellow); color: var(--ink); padding: 10px 16px; border-radius: 8px; font-weight: 700;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Section themes: every section paints its own solid colour. js/modules/motion.js
   adds .has-blend + --blend-from so the top of each section melts in from the
   previous section's colour (no hard cuts, and text always sits on its own colour). */
[data-bg="cream"]  { background: var(--paper); }
[data-bg="yellow"] { background: var(--yellow); }
[data-bg="maroon"] { background: var(--maroon); }
[data-bg].has-blend { isolation: isolate; }
[data-bg].has-blend::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none;
  height: clamp(90px, 16vh, 180px);
  background: linear-gradient(var(--blend-from), color-mix(in srgb, var(--blend-from) 35%, transparent) 45%, transparent);
}
.theme-dark { color: var(--paper); }

/* Sections with a max-width still paint their colour edge to edge */
.seven, .approach, .different, .stories { box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); }
.seven.has-blend::before, .approach.has-blend::before, .different.has-blend::before, .stories.has-blend::before { left: -100vmax; right: -100vmax; }

/* ---------- 3. Type helpers ---------- */
.display-lg, .display-md, .display-sm, .hero__title, .voice__title {
  font-family: var(--f-display); font-weight: 400; letter-spacing: -.02em;
}
.display-lg { font-size: clamp(3rem, 2rem + 6vw, 8.5rem); line-height: .9; color: var(--maroon); }
.display-md { font-size: clamp(2.2rem, 1.5rem + 3.6vw, 5.2rem); line-height: .96; color: var(--maroon); }
.display-sm { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem); line-height: 1; color: var(--maroon); }
.theme-dark .display-lg, .theme-dark .display-md, .theme-dark .display-sm { color: var(--paper); }
.display-lg em, .display-md em { font-style: normal; position: relative; }
.text-yellow { color: var(--yellow); }

.eyebrow {
  font-family: var(--f-body); font-weight: 700; font-size: .8rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--maroon); margin-bottom: 1.2rem;
  display: inline-flex; align-items: center; gap: .7em;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.eyebrow--light { color: var(--yellow); }
.hand { font-family: var(--f-hand); font-size: 1.55em; line-height: 1.1; color: var(--maroon); }
.theme-dark .hand { color: var(--yellow); }

/* Pencil underline: drawn by JS (stroke-dashoffset) */
.pencil-line { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .32em; overflow: visible; pointer-events: none; }
.pencil-line path { fill: none; stroke: var(--yellow); stroke-width: 5; stroke-linecap: round; }

/* ---------- 4. Buttons ---------- */
.btn {
  --bg: var(--yellow); --fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .85em 1.5em; border-radius: 999px; border: 2px solid transparent;
  background: var(--bg); color: var(--fg); font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color .25s, color .25s, transform .35s var(--ease-out);
  line-height: 1.1;
}
.btn:hover { --bg: var(--orange); }
.btn:active { transform: scale(.97); }
.btn--sm { padding: .55em 1.15em; font-size: .95rem; }
.btn--lg { padding: 1.05em 1.9em; font-size: 1.08rem; }
.btn--maroon { --bg: var(--maroon); --fg: var(--paper); }
.btn--maroon:hover { --bg: var(--maroon-deep); }
.btn--outline-light { --bg: transparent; --fg: var(--paper); border-color: rgba(251, 245, 233, .6); }
.btn--outline-light:hover { --bg: var(--yellow); --fg: var(--ink); border-color: var(--yellow); }
.btn--outline-light[aria-pressed="true"] { --bg: var(--yellow); --fg: var(--ink); }
.btn--whatsapp { --bg: #1F7A4D; --fg: #fff; }
.btn--whatsapp:hover { --bg: #17603C; }

/* Cambridge Fit compass button */
.compass {
  display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--paper);
  padding: 8px 22px 8px 8px; border-radius: 999px; border: 1.5px solid rgba(251, 245, 233, .45);
  position: relative; will-change: transform; transition: border-color .3s, background-color .3s;
}
.compass:hover { border-color: var(--yellow); background: rgba(249, 194, 18, .08); }
.compass__dial { width: 58px; height: 58px; flex: none; position: relative; }
.compass__dial svg { width: 100%; height: 100%; overflow: visible; }
.compass__label { font-size: .98rem; line-height: 1.25; max-width: 15em; }
.compass__label b { color: var(--yellow); font-weight: 700; white-space: nowrap; }
.compass__ripple {
  position: absolute; left: 37px; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 50%; border: 2px solid var(--yellow); pointer-events: none;
}
.compass--xl { padding: 14px 34px 14px 14px; }
.compass--xl .compass__dial { width: 112px; height: 112px; }
.compass--xl .compass__label { font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); max-width: 13em; }
.compass--xl .compass__ripple { left: 70px; width: 112px; height: 112px; margin: -56px 0 0 -56px; }
.compass--float { display: none; }

/* ---------- 5. Global layers ---------- */
.bg-stage { position: fixed; inset: 0; z-index: 0; background: var(--maroon); pointer-events: none; }
.no-js .bg-stage { display: none; }
/* Phones: blending a full-screen layer on every scroll frame is costly for mobile GPUs,
   so the grain is drawn as a plain faint overlay instead (same look, far cheaper). */
.is-touch .grain { mix-blend-mode: normal; opacity: .16; }
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .38;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Mandala SVG (built by js/modules/mandala.js) */
.mandala { display: block; }
.mandala svg { width: 100%; height: 100%; overflow: visible; }
.m-in { fill: var(--yellow); }
.m-out { fill: var(--orange); }
.m-dia { fill: var(--maroon); }
.m-dot { fill: var(--orange); }
.m-ring { fill: var(--yellow); stroke: var(--maroon); stroke-width: 3; }
.m-core { fill: var(--maroon); }
.m-halo { fill: none; stroke: var(--yellow); stroke-width: 1.4; opacity: 0; }
/* on dark grounds the maroon points get a fine paper edge so they still read */
.mandala--dark .m-dia { stroke: var(--paper); stroke-width: 1; }
.mandala--stamp .m-in, .mandala--stamp .m-out, .mandala--stamp .m-dot, .mandala--stamp .m-ring { fill: none; stroke: var(--maroon); stroke-width: 3; }
.mandala--stamp .m-dia, .mandala--stamp .m-core { fill: var(--maroon); }

/* Spark companion */
.spark { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; opacity: 0; }
.spark__m { width: 34px; height: 34px; margin: -17px 0 0 -17px; position: relative; }
.spark__glow {
  position: absolute; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 194, 18, .38), rgba(232, 119, 36, .12) 45%, transparent 70%);
}
.is-touch .spark__glow { display: none; }

/* ---------- 6. Header + Loader ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 70; height: var(--header-h);
  display: flex; align-items: center; gap: 28px; padding: 0 var(--gutter);
  transition: background-color .4s, box-shadow .4s, transform .5s var(--ease-out);
}
.site-header.is-solid { background: rgba(251, 245, 233, .94); box-shadow: 0 1px 0 rgba(26, 17, 16, .08); backdrop-filter: blur(6px); }
.site-header.is-hidden { transform: translateY(-110%); }
.site-header__logo { display: block; margin-right: auto; }
.site-header__logo img { height: 52px; width: auto; }
/* if the logo file is missing, the alt text renders in brand style */
.site-header__logo img, .footer__brand img, .loader__logo { font-family: var(--f-display); color: var(--yellow); font-size: 1.1rem; }
.site-nav { display: flex; gap: 26px; font-weight: 500; font-size: .98rem; }
.site-nav a { text-decoration: none; color: var(--paper); position: relative; padding: 4px 0; }
.site-header.is-solid .site-nav a { color: var(--ink); }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out);
}
.site-nav a:hover::after { transform: scaleX(1); }

.loader {
  position: fixed; inset: 0; z-index: 150; background: var(--maroon);
  display: grid; place-items: center;
  --hole: 0vmax;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
          mask: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
}
.loader__mandala { width: min(46vmin, 320px); aspect-ratio: 1; grid-area: 1 / 1; }
.loader__logo { grid-area: 1 / 1; align-self: end; margin-bottom: 9vh; height: 46px; width: auto; opacity: 0; }
/* Safety net: if scripts fail, the loader still gets out of the way */
html:not(.is-ready) .loader { animation: loaderBail .6s 6s forwards; }
@keyframes loaderBail { to { opacity: 0; visibility: hidden; } }
.is-loading { overflow: hidden; }

/* ---------- 7a. Hero ---------- */
.hero {
  min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + 40px) var(--gutter) clamp(40px, 7vh, 90px);
  overflow: hidden; isolation: isolate; background: var(--maroon);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__img, .hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__img { animation: breathe 14s ease-in-out infinite alternate; transform-origin: 60% 40%; }
.hero__gl { opacity: 0; transition: opacity 1s; }
.hero.gl-on .hero__gl { opacity: 1; }
@keyframes breathe { from { transform: scale(1.02); } to { transform: scale(1.1); } }
/* A neutral, warm-dark scrim only where the text sits (bottom-left) plus a light
   one under the header, so the building photo keeps its own colours. */
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(26, 17, 16, .78) 0%, rgba(26, 17, 16, .5) 28%, rgba(26, 17, 16, 0) 60%),
    linear-gradient(to right, rgba(26, 17, 16, .55) 0%, rgba(26, 17, 16, .32) 38%, rgba(26, 17, 16, 0) 66%),
    linear-gradient(to bottom, rgba(26, 17, 16, .35), transparent 20%);
}
.hero__title, .hero__sub { text-shadow: 0 2px 22px rgba(26, 17, 16, .45); }
.hero__content { width: 100%; max-width: var(--max); margin: 0 auto; position: relative; }
.hero__title {
  font-size: clamp(3rem, 1.4rem + 7.4vw, 9.6rem); line-height: .9; color: var(--paper);
  max-width: 11.5ch; margin-bottom: .32em;
}
.hero__title .char { display: inline-block; will-change: transform; }
.hero__title .word { white-space: nowrap; }
.hero__spark-word { color: var(--yellow); position: relative; white-space: nowrap; }
.hero__sub { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); max-width: 34ch; color: var(--paper); opacity: .92; margin-bottom: 1.8em; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.hero__badge { margin-top: 28px; }
/* Cambridge logo, exactly as supplied, on a white plate so it reads on photos and colours */
.cam-logo { display: inline-flex; align-items: center; padding: 8px 12px; background: #fff; border-radius: 8px; box-shadow: 0 6px 18px -10px rgba(26, 17, 16, .45); }
.cam-logo img { display: block; max-width: none; }
.hero__note {
  position: absolute; right: var(--gutter); bottom: 32px; transform: rotate(-4deg);
  color: var(--yellow); font-size: 1.5rem; margin: 0;
}

/* ---------- 7b. Seven years ---------- */
.seven {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--gutter);
  padding: clamp(90px, 14vh, 180px) var(--gutter); max-width: var(--max); margin: 0 auto;
}
.seven__svg { width: 100%; max-height: 78vh; overflow: visible; }
.seven__svg text { font-family: var(--f-display); font-size: 560px; }
.seven__outline { fill: none; stroke: var(--maroon); stroke-width: 2.5; }
.seven__ink { fill: var(--ink); }
.seven__text h2 { color: var(--ink); }
.seven__note { transform: rotate(-3deg); margin-top: 1.2em; }

/* ---------- 7c. Approach: Memorise vs Understand ---------- */
.approach { padding: clamp(60px, 10vh, 140px) var(--gutter); max-width: var(--max); margin: 0 auto; }
.approach__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px var(--gutter); align-items: end; margin-bottom: clamp(40px, 6vh, 80px); }
.approach__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.approach__head em { color: var(--maroon); }
.approach__head em::after { /* hand-drawn circle */
  content: ""; position: absolute; inset: -10% -6% -14% -8%; border: 3px solid var(--orange);
  border-radius: 48% 52% 45% 55% / 60% 45% 55% 40%; transform: rotate(-3deg);
}
.approach__copy { position: relative; }
.margin-note { transform: rotate(-4deg); margin: .6em 0 0 .4em; }

.split { --v: .15; --seam: calc(72% - var(--v) * 50%); }
.split__stage {
  position: relative; height: clamp(380px, 56vh, 560px); border-radius: 6px; overflow: hidden;
  background: var(--paper-2); border: 1.5px solid rgba(151, 27, 30, .25);
}
.split__memo {
  position: absolute; inset: 0 auto 0 0; width: var(--seam); overflow: hidden;
  background: #E9E4DA; border-right: 2px solid var(--maroon);
}
.split__grid {
  position: absolute; inset: 44px 0 0 14px; width: 900px;
  font-family: var(--f-mono); font-size: 12.5px; line-height: 1.32; color: #57524E; letter-spacing: -.02em;
  white-space: nowrap; transform-origin: left top;
  transform: scale(calc(1 - var(--v) * .35));
}
.split__grid span { display: block; }
.split__understand { position: absolute; inset: 0 0 0 var(--seam); }
.split__tree { position: absolute; inset: 44px 14px 14px 14px; width: calc(100% - 28px); height: calc(100% - 58px); overflow: visible; }
.split__tree .branch { fill: none; stroke: var(--maroon); stroke-width: 2.2; stroke-linecap: round; }
.split__tree .leaf { font-family: var(--f-display); fill: var(--maroon); }
.split__tree .leaf--root { fill: var(--ink); }
.split__tree .bud { fill: var(--yellow); stroke: var(--maroon); stroke-width: 1.5; }
.split__label {
  position: absolute; top: 12px; left: 14px; z-index: 2; font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #57524E;
}
.split__label--r { left: 20px; color: var(--maroon); }
.split__seam { position: absolute; top: 0; bottom: 0; left: var(--seam); width: 0; z-index: 3; }
.split__knob { position: absolute; top: 50%; left: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; filter: drop-shadow(0 4px 8px rgba(26, 17, 16, .25)); }
.split__control { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.split__control .hand { font-size: 1.5rem; }
.split__range { flex: 1; -webkit-appearance: none; appearance: none; height: 28px; background: transparent; cursor: grab; }
.split__range::-webkit-slider-runnable-track { height: 3px; background: var(--maroon); border-radius: 2px; }
.split__range::-moz-range-track { height: 3px; background: var(--maroon); border-radius: 2px; }
.split__range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11.5px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--maroon); }
.split__range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--maroon); }
.split__hint { margin: 10px 0 0; font-size: 1.35rem; text-align: center; }

/* ---------- 8. Pathway (metro line) ---------- */
.pathway { color: var(--ink); }
.pathway__pin { height: 100vh; height: 100svh; display: flex; flex-direction: column; padding: calc(var(--header-h) + 16px) 0 30px; overflow: hidden; }
.pathway__head { padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 24px; }
.pathway__head .eyebrow { grid-column: 1 / -1; margin: 0; }
.pathway__head h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 4rem); }
.pathway__badge { align-self: end; }
.pathway__viewport { flex: 1; position: relative; margin-top: 3vh; }
.pathway__track { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: flex-start; padding: 0 30vw 0 var(--gutter); will-change: transform; }
.pathway__rail { position: absolute; left: 0; top: 34px; width: 100%; height: 12px; overflow: visible; }
.pathway__rail-line { stroke: rgba(151, 27, 30, .25); stroke-width: 10; fill: none; stroke-linecap: round; }
.pathway__rail-done { stroke: var(--maroon); stroke-width: 10; fill: none; stroke-linecap: round; }
.pathway__train { position: absolute; left: 0; top: 4px; width: 72px; height: 72px; margin-left: -36px; z-index: 3; will-change: transform; }
.stations { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(60px, 8vw, 140px); position: relative; }
.station { position: relative; width: clamp(280px, 26vw, 380px); flex: none; padding-top: 96px; }
.station__dot {
  position: absolute; left: 50%; top: 26px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%;
  background: var(--paper); border: 5px solid var(--maroon); z-index: 2;
}
.station__code { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); font-weight: 700; font-size: .8rem; letter-spacing: .14em; color: var(--maroon); }
.station__card {
  background: var(--paper); padding: 14px 14px 20px; position: relative; border-radius: 3px;
  transform: scale(.84); transform-origin: 50% 0; opacity: .55; filter: saturate(.3);
  transition: transform .7s var(--ease-out), opacity .5s, filter .5s;
  box-shadow: 0 1px 0 rgba(26, 17, 16, .1), 0 18px 30px -18px rgba(118, 21, 24, .45);
}
.station.is-open .station__card { transform: scale(1); opacity: 1; filter: none; }
.station__img { margin: 0 0 14px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper-2); }
.station__img img { width: 100%; height: 100%; object-fit: cover; }
.station h3 { font-family: var(--f-display); font-size: 1.9rem; line-height: 1; color: var(--maroon); margin-bottom: .35em; }
.station h3 small { display: block; font-family: var(--f-body); font-size: .85rem; font-weight: 700; color: var(--ink); margin-top: .4em; letter-spacing: .02em; }
.station p { font-size: 1rem; margin: 0; }
.station--final .station__dot { background: var(--yellow); }
.station__card--final { background: var(--maroon); color: var(--paper); padding: 28px; }
.station__final { font-family: var(--f-display); font-size: 1.8rem !important; line-height: 1.05; margin-bottom: .6em !important; color: var(--yellow); }
.station__card--final .hand { margin-top: .8em; }

.stamp {
  position: absolute; right: -16px; top: 22%; width: 132px; height: 132px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; padding: 16px;
  border: 3px double var(--maroon); color: var(--maroon); background: rgba(249, 194, 18, .9);
  font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .75rem;
  transform: rotate(-14deg) scale(0); opacity: 0;
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) .25s, opacity .2s .25s;
}
.stamp em { display: block; font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .75rem; line-height: 1.2; margin-top: 4px; }
.station.is-open .stamp { transform: rotate(-14deg) scale(1); opacity: 1; }

/* ---------- 9. Cambridge Fit moment ---------- */
.fit { padding: clamp(80px, 14vh, 170px) var(--gutter); }
.fit__inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.3fr) auto; align-items: center; gap: 40px var(--gutter); }

/* ---------- 10. Results ---------- */
.results { padding: clamp(80px, 12vh, 150px) 0 0; }
.results__head { padding: 0 var(--gutter); max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 0 32px; align-items: end; }
.results__head .eyebrow, .results__head h2 { grid-column: 1 / -1; }
/* Two clean stat blocks: big serif number + plain sans grade label */
.results__title { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .15em .5em; font-family: var(--f-display); font-size: clamp(3.4rem, 1.4rem + 7vw, 8.6rem); line-height: .85; color: var(--maroon); }
.results__stat { display: inline-flex; align-items: flex-end; gap: .14em; }
.results__stat + .results__stat { padding-left: .45em; border-left: 3px solid rgba(151, 27, 30, .22); }
.results__g { display: flex; flex-direction: column; font-family: var(--f-body); font-weight: 700; font-size: .34em; line-height: 1; padding-bottom: .16em; }
.results__g small { font-size: max(12px, .38em); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .35em; }
.results__lede { font-size: 1.25rem; font-weight: 500; margin: .4em 0 0; }
.results__year { grid-column: 1 / -1; justify-self: start; margin: 0 0 18px; padding: 6px 16px; border-radius: 999px; background: var(--maroon); color: var(--paper); font-weight: 700; font-size: 1rem; letter-spacing: .06em; }
.results__toss { transform: rotate(-3deg); margin: 0; grid-row: span 2; align-self: center; }
.only-mobile { display: none; }
.results__pit { position: relative; height: clamp(320px, 46vh, 480px); margin-top: 20px; border-bottom: 10px solid var(--maroon); }
.results__canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.results__canvas:active { cursor: grabbing; }
.results__grid { list-style: none; margin: 0; padding: 0 var(--gutter) 24px; position: absolute; inset: auto 0 0; display: none; flex-wrap: wrap; justify-content: center; gap: 8px; }
.physics-off .results__grid { display: flex; }
.physics-off .results__canvas { display: none; }
.physics-off .results__pit { height: auto; min-height: 260px; padding-top: 30px; }
.physics-off .results__grid { position: relative; }
.token {
  width: 56px; height: 56px; display: grid; place-items: center; font-family: var(--f-display); font-size: 1.35rem;
  opacity: 0; transform: translateY(-40px);
}
.token--star { color: var(--maroon); position: relative; }
.token--star svg { position: absolute; inset: 0; }
.token--star b { position: relative; font-weight: 400; font-size: 1.05rem; }
.token--a { background: var(--maroon); color: var(--paper); border-radius: 10px; }
.tokens-in .token { animation: tokenDrop .55s var(--ease-out) forwards; animation-delay: calc(var(--i) * 40ms); }
@keyframes tokenDrop { to { opacity: 1; transform: none; } }

/* ---------- 11. Voice ---------- */
.voice { padding: clamp(90px, 14vh, 170px) var(--gutter); overflow: hidden; }
.voice__head { max-width: var(--max); margin: 0 auto clamp(50px, 9vh, 110px); }
.voice__title { font-size: clamp(3.2rem, 1.2rem + 8.6vw, 11rem); line-height: .9; color: var(--paper); max-width: 10ch; }
.voice__title .char { display: inline-block; will-change: transform; }
.voice__title .word { white-space: nowrap; }
.voice__panels { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gutter); }
.vpanel h3 { font-family: var(--f-display); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem); color: var(--yellow); margin: .5em 0 .15em; }
.vpanel p { margin: 0; }
.vpanel__img { margin: 0; overflow: hidden; }
.vpanel__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* three equal, aligned panels */
.vpanel { grid-column: span 6; }

/* ---------- 12. Bento ---------- */
.different { padding: clamp(90px, 14vh, 170px) var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.different__head { margin-bottom: clamp(36px, 6vh, 70px); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(170px, auto); grid-auto-flow: row dense; gap: 14px; }
.tile { position: relative; overflow: hidden; padding: 24px; outline-offset: 4px; }
.tile__title { font-family: var(--f-display); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1; }
.tile__text { margin: .6em 0 0; font-size: 1rem; }
.tile__kicker { font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; margin: 0 0 .6em; }
.tile__tag {
  position: absolute; left: 14px; bottom: 14px; margin: 0; background: var(--paper); color: var(--ink);
  padding: 4px 12px; font-weight: 700; font-size: .9rem; border-radius: 2px;
}
.tile__media { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.tile__media img, .tile__media canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__media canvas { pointer-events: none; }

.tile--ai { grid-column: 1 / 5; grid-row: span 2; background: var(--maroon); color: var(--paper); display: flex; flex-direction: column; border-radius: 0 40px 0 0; }
.tile--ai .tile__kicker { color: var(--yellow); }
.tile--ai .tile__title { font-size: clamp(2.8rem, 2rem + 2.8vw, 4.6rem); color: var(--yellow); margin-top: auto; font-variant-ligatures: none; }
.tile__code { font-family: var(--f-mono); font-size: .92rem; margin: 18px 0 0; color: var(--paper); min-height: 1.4em; }
.tile__code::before { content: "> "; color: var(--yellow); }
.caret { display: inline-block; width: .55em; height: 1.1em; background: var(--yellow); vertical-align: -3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.tile--steam { grid-column: 5 / 10; grid-row: span 2; padding: 0; color: var(--paper); }
.tile--steam .tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 24px 22px; background: linear-gradient(to top, rgba(118, 21, 24, .9), transparent); }

.tile--biz { grid-column: 10 / 13; grid-row: span 2; background: var(--yellow); display: flex; flex-direction: column; }
.tile--biz .tile__title { color: var(--maroon); }
.vinyl { position: relative; width: min(100%, 220px); aspect-ratio: 1; margin: 0 auto 18px; }
.vinyl__disc {
  position: absolute; inset: 0; border-radius: 50%; will-change: transform;
  background:
    radial-gradient(circle, var(--maroon) 0 17%, var(--ink) 17.5% 19%, transparent 19.5%),
    repeating-radial-gradient(circle, #231816 0 2px, #2e211e 2px 3px),
    #231816;
  box-shadow: inset 0 0 0 6px #231816;
}
.vinyl__disc::after { /* light streak */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 0 8%, rgba(255, 255, 255, .14) 12%, transparent 18% 58%, rgba(255, 255, 255, .1) 62%, transparent 68%);
}
.vinyl__label { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-family: var(--f-display); color: var(--yellow); font-size: .82rem; line-height: 1; z-index: 1; }
.onair {
  position: absolute; right: -6px; top: -4px; background: var(--ink); color: #FF5A3C; font-weight: 700; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; padding: 4px 10px 3px 22px; border-radius: 3px; opacity: .45; transition: opacity .3s;
}
.onair::before { content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: currentColor; }
.tile--biz:hover .onair, .tile--biz:focus-visible .onair, .tile--biz.is-live .onair { opacity: 1; }
.tile--biz:hover .onair::before, .tile--biz:focus-visible .onair::before, .tile--biz.is-live .onair::before { animation: onair 1s ease-in-out infinite; box-shadow: 0 0 10px #FF5A3C; }
@keyframes onair { 50% { opacity: .2; } }

.tile--sports { grid-column: 1 / 9; grid-row: span 2; padding: 0; display: flex; align-items: flex-end; min-height: 380px; cursor: pointer; }
/* slideshow: cross-fade with a slow zoom; caption swaps to match the photo */
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s ease; }
.slide.is-on { opacity: 1; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 6s linear; }
.slide.is-on img { transform: scale(1); }
.slides__dots { position: absolute; top: 18px; right: 18px; z-index: 2; display: flex; gap: 6px; }
.slides__dots span { width: 26px; height: 4px; border-radius: 2px; background: rgba(251, 245, 233, .5); transition: background-color .3s; }
.slides__dots span.is-on { background: var(--yellow); }
.slides__over { position: relative; z-index: 1; width: 100%; padding: 90px 24px 22px; background: linear-gradient(to top, rgba(118, 21, 24, .92), transparent); color: var(--paper); }
.slides__kicker { display: block; font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); margin-bottom: 6px; }
.slides__clip { display: block; overflow: hidden; }
.slides__caption { display: inline-block; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.6rem); color: var(--paper); }
.tile--swim { grid-column: 6 / 9; padding: 0; border-radius: 50% 50% 0 0 / 22% 22% 0 0; }
.tile--skate { grid-column: 6 / 9; padding: 0; }
.tile__glide { inset: 0 -18%; }
.tile--art { grid-column: 9 / 13; grid-row: span 2; padding: 0; background: var(--paper-2); display: flex; align-items: flex-end; }
.tile--art .tile__title { position: relative; padding: 18px 24px; background: var(--paper); color: var(--maroon); margin: 0 0 0 0; }
.splash img {
  -webkit-mask-image: var(--splash, none); mask-image: var(--splash, none);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* ---------- 12b. Cambridge: 10 reasons ----------
   Cards alternate paper / soft yellow (a checkerboard on the 5 × 2 grid). Each
   rises in turn, then its outlined numeral inks in; hover lifts the card and
   tips the icon. The maroon band below lists what only Sloka adds. */
.reasons { padding: clamp(80px, 12vh, 150px) var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.reasons__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px var(--gutter); align-items: end; margin-bottom: clamp(32px, 5vh, 56px); }
.reasons__head h2 { margin: 0; }
.reasons__lede { margin: 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.5; color: var(--ink); }
.reasons__lede strong { color: var(--maroon); }

.reasons__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.reason {
  --tone: var(--maroon); --card: var(--paper-2);
  position: relative; display: flex; flex-direction: column; padding: 22px 22px 26px; border-radius: 18px;
  background: var(--card); border: 1.5px solid color-mix(in srgb, var(--tone) 16%, transparent);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s;
}
.reason:nth-child(even) { --tone: var(--orange); --card: color-mix(in srgb, var(--yellow) 24%, var(--paper)); }
.reason__icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: #FFFCF4; color: var(--tone); box-shadow: 0 8px 16px -12px rgba(118, 21, 24, .55);
  transition: transform .5s var(--ease-out);
}
.reason__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reason__num {
  position: absolute; top: 16px; right: 20px; font-family: var(--f-display); font-size: clamp(2.6rem, 2rem + 1.4vw, 3.5rem); line-height: 1;
  color: var(--tone); -webkit-text-stroke: 1.5px var(--tone); transition: color .9s ease calc(var(--i) * 80ms + .45s);
}
.reason__title { margin: 24px 0 10px; font-family: var(--f-body); font-weight: 700; font-size: 1.16rem; line-height: 1.25; color: var(--ink); }
.reason__text { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--muted); }
.reason__text strong { color: var(--maroon); }
.reason:hover { transform: translateY(-6px); box-shadow: 0 26px 40px -28px rgba(118, 21, 24, .6); border-color: color-mix(in srgb, var(--tone) 45%, transparent); }
.reason:hover .reason__icon { transform: rotate(-8deg) scale(1.06); }
/* reveal (backwards fill only, so hover still moves the card afterwards) */
.js .reasons__grid:not(.is-in) .reason { opacity: 0; }
.js .reasons__grid:not(.is-in) .reason__num { color: transparent; }
.reasons__grid.is-in .reason { animation: reasonIn .8s var(--ease-out) calc(var(--i) * 70ms) backwards; }
@keyframes reasonIn { from { opacity: 0; transform: translateY(28px); } }

.reasons__plus {
  margin-top: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 36px;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 44px); border-radius: 22px; color: var(--paper);
  background: radial-gradient(circle at 100% 0, rgba(249, 194, 18, .2), transparent 45%), var(--maroon);
  box-shadow: 0 30px 50px -30px rgba(118, 21, 24, .7);
}
.reasons__plus-kicker { margin: 0 0 4px; font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
.reasons__plus-title { margin: 0; font-family: var(--f-display); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.05; }
.reasons__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.reasons__chips li { padding: .5em 1.05em; border-radius: 999px; border: 1.5px solid rgba(251, 245, 233, .35); background: rgba(251, 245, 233, .08); font-weight: 600; font-size: .98rem; line-height: 1.3; }
.reasons__chips b { color: var(--yellow); }
.reasons__cta { white-space: nowrap; }
.js .reasons__plus:not(.is-in) .reasons__chips li { opacity: 0; }
.reasons__plus.is-in .reasons__chips li { animation: chipIn .6s var(--ease-out) calc(var(--i) * 90ms + .2s) backwards; }
@keyframes chipIn { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.reasons__source { margin: 16px 0 0; font-size: .85rem; color: var(--muted); }

@media (max-width: 1180px) {
  .reasons__plus { grid-template-columns: minmax(0, 1fr); }
  .reasons__cta { justify-self: start; }
}
@media (min-width: 601px) and (max-width: 1180px) {
  .reasons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* keep the checkerboard on two columns */
  .reason:nth-child(even) { --tone: var(--maroon); --card: var(--paper-2); }
  .reason:nth-child(4n+2), .reason:nth-child(4n+3) { --tone: var(--orange); --card: color-mix(in srgb, var(--yellow) 24%, var(--paper)); }
}
@media (max-width: 600px) {
  .reasons__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .reason { padding: 18px 18px 20px; border-radius: 16px; }
  .reason__icon { width: 44px; height: 44px; border-radius: 12px; }
  .reason__icon svg { width: 22px; height: 22px; }
  .reason__num { top: 14px; right: 18px; font-size: 2.4rem; }
  .reason__title { margin: 14px 0 6px; font-size: 1.1rem; }
  .reasons__cta { justify-self: stretch; }
}

/* ---------- 13. Prism ---------- */
.outcomes__pin { min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + 20px) var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto; gap: 20px var(--gutter); align-items: center; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.outcomes__head h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 4rem); margin-bottom: .6em; }
/* white words on a maroon marker stroke (plain white on yellow would be unreadable) */
.hl-white { color: #fff; background: linear-gradient(transparent 10%, var(--maroon) 10% 94%, transparent 94%); padding: 0 .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.outcomes__index { list-style: none; padding: 0; margin: 0; font-family: var(--f-display); font-size: clamp(1.3rem, 1rem + 1vw, 2rem); line-height: 1.25; }
.outcomes__index li { color: rgba(151, 27, 30, .38); transition: color .35s, transform .35s var(--ease-out); }
.outcomes__index li.is-on { color: var(--maroon); transform: translateX(14px); }
.outcomes__index li.is-on::before { content: "→ "; }
.prism-wrap { perspective: 2600px; display: grid; place-items: center; height: min(62vh, 520px); }
.prism { --w: min(460px, 34vw); --h: calc(var(--w) * .66); --z: calc(var(--w) * .688); position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; will-change: transform; }
.prism__face {
  position: absolute; inset: 0; margin: 0; overflow: hidden; backface-visibility: hidden; background: var(--maroon);
  transform: rotateY(calc(var(--i) * 72deg)) translateZ(var(--z));
}
.prism__face img { width: 100%; height: 100%; object-fit: cover; }
.prism__face img.is-low { object-position: 50% 100%; } /* keep the hands-on detail above the caption */
.prism__face figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 22px 18px; background: linear-gradient(to top, rgba(118, 21, 24, .95), transparent); color: var(--paper); }
.prism__face strong { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem); line-height: 1; color: var(--yellow); }
.prism__face span { font-size: 1rem; }
.outcomes__line { grid-column: 1 / -1; font-family: var(--f-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); line-height: 1.2; color: var(--maroon); max-width: 46ch; margin: 0; }
/* Fallback: no 3D → faces become a simple list */
.prism--flat { width: 100%; height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; transform: none !important; }
.prism--flat .prism__face { position: relative; transform: none; aspect-ratio: 4 / 3; }
.prism-wrap:has(.prism--flat) { height: auto; perspective: none; }

/* ---------- 14a. Principal's letter ---------- */
.principal { padding: clamp(90px, 14vh, 170px) var(--gutter); }
.letter-scene { perspective: 2200px; max-width: 760px; margin: 0 auto; }
.letter { position: relative; transform-style: preserve-3d; color: var(--ink); }
.letter__panel {
  position: relative; transform-style: preserve-3d;
  background:
    repeating-linear-gradient(transparent 0 33px, rgba(151, 27, 30, .07) 33px 34px),
    linear-gradient(170deg, #FFFBF2, var(--paper) 60%, #F4EAD5);
  box-shadow: 0 30px 60px -30px rgba(26, 17, 16, .6);
}
.letter__panel--top { transform-origin: 50% 100%; z-index: 3; }
.letter__panel--bot { transform-origin: 50% 0; z-index: 2; }
.letter__panel--mid { z-index: 1; border-top: 1px solid rgba(26, 17, 16, .08); border-bottom: 1px solid rgba(26, 17, 16, .08); }
.letter__face { padding: clamp(26px, 5vw, 60px); backface-visibility: hidden; font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); line-height: 1.7; }
.letter__panel--top .letter__face { padding-top: clamp(30px, 5vw, 64px); }
.letter__portrait { float: right; width: clamp(110px, 24%, 180px); margin: 0 0 14px 24px; transform: rotate(3deg); padding: 8px 8px 26px; background: #fff; box-shadow: 0 8px 20px -10px rgba(26, 17, 16, .5); }
.letter__portrait img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.letter__from { margin-bottom: .8em; }
.letter__salute { font-family: var(--f-display); font-size: 1.6em; color: var(--maroon); }
.letter__line .line { display: block; }
.letter__signoff { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.signature { width: min(230px, 55%); margin: 6px 0 0 -6px; overflow: visible; }
.signature__pen { fill: none; stroke: #fff; stroke-width: 46; stroke-linecap: round; stroke-linejoin: round; }
.letter__sign { margin: 0; line-height: 1.4; }
.letter__sign strong { font-family: var(--f-display); font-weight: 400; font-size: 1.4em; color: var(--maroon); }

/* Fit mode (set by js/modules/letter.js on laptops/desktops): the section is held
   on screen while the letter unfolds, so the whole letter is visible at once. */
.principal.is-fit { height: 100vh; height: 100svh; display: grid; place-items: center; padding: calc(var(--header-h) * .6) var(--gutter) 16px; overflow: hidden; }
.principal.is-fit .letter-scene { max-width: 1060px; width: 100%; transform-origin: 50% 50%; }
.principal.is-fit .letter__face { padding: 22px 56px; font-size: 1.02rem; line-height: 1.6; }
.principal.is-fit .letter__panel--top .letter__face { padding-top: 30px; }
.principal.is-fit .letter__line { margin-bottom: .7em; }
.principal.is-fit .letter__salute { font-size: 1.45em; margin-bottom: .4em; }
.principal.is-fit .letter__portrait { width: 132px; margin-bottom: 6px; }
.principal.is-fit .letter__from { margin-bottom: .3em; }
.principal.is-fit .signature { width: 170px; margin-top: 0; }

/* ---------- 14b. Parent stories desk ---------- */
.stories { padding: clamp(90px, 14vh, 170px) var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.stories__head { margin-bottom: 30px; }
.stories__head .hand { transform: rotate(-2deg); margin-top: .5em; }
.desk {
  position: relative; height: clamp(480px, 66vh, 600px); border-radius: 8px; overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, .35), transparent 50%),
    repeating-linear-gradient(92deg, rgba(118, 21, 24, .04) 0 3px, transparent 3px 11px, rgba(118, 21, 24, .03) 11px 13px, transparent 13px 29px),
    var(--kraft);
  box-shadow: inset 0 0 80px rgba(118, 21, 24, .18);
}
.note {
  position: absolute; left: var(--x); top: var(--y); width: min(400px, 42%); padding: 34px 32px 28px;
  transform: rotate(var(--r)); cursor: grab; touch-action: none; user-select: none;
  box-shadow: 0 2px 2px rgba(26, 17, 16, .08), 0 22px 30px -18px rgba(26, 17, 16, .5);
  transition: box-shadow .3s;
}
.note:active { cursor: grabbing; }
.note.is-dragging { box-shadow: 0 2px 2px rgba(26, 17, 16, .08), 0 40px 50px -20px rgba(26, 17, 16, .55); }
.note--letter { background: repeating-linear-gradient(transparent 0 29px, rgba(151, 27, 30, .12) 29px 30px) 0 22px / 100% auto, #FFFDF7; }
.note--letter::before { content: ""; position: absolute; top: 0; bottom: 0; left: 22px; width: 1.5px; background: rgba(232, 119, 36, .5); }
.note--card { background: var(--paper); }
.note--card::before { /* tape */
  content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 28px; margin-left: -55px; transform: rotate(-3deg);
  background: rgba(249, 194, 18, .55);
}
.note__quote { font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.85rem); line-height: 1.15; color: var(--ink); }
.note__by { font-family: var(--f-hand); font-size: 1.45rem; line-height: 1.1; color: var(--maroon); margin: 0; }
.note__by span { font-family: var(--f-body); font-size: .85rem; color: var(--muted); }
mark {
  color: inherit; background: linear-gradient(transparent 55%, rgba(249, 194, 18, .9) 55% 92%, transparent 92%) no-repeat 0 0 / 0% 100%;
  transition: background-size 1.1s var(--ease-out) .2s;
}
mark.is-marked { background-size: 100% 100%; }
.prop { position: absolute; pointer-events: none; }
.prop--pencil { right: 8%; bottom: 14%; width: 260px; height: 16px; transform: rotate(-24deg); border-radius: 0 8px 8px 0; background: linear-gradient(to right, #3a2a22 0 5%, #e9c9a2 5% 12%, var(--yellow) 12% 92%, #c9b9a0 92% 95%, #E87724 95%); box-shadow: 0 6px 10px -4px rgba(26, 17, 16, .4); clip-path: polygon(0 50%, 12% 0, 100% 0, 100% 100%, 12% 100%); }
.prop--ring { left: 40%; bottom: 8%; width: 130px; height: 130px; border-radius: 50%; border: 8px solid rgba(118, 21, 24, .12); filter: blur(.6px); }
.prop--sticky { right: 6%; top: 8%; width: 150px; padding: 22px 16px; background: var(--yellow); color: var(--ink); transform: rotate(7deg); font-size: 1.5rem; box-shadow: 0 14px 20px -12px rgba(26, 17, 16, .5); }

.note-dialog { border: 0; padding: 0; background: transparent; max-width: min(640px, 92vw); width: 100%; overflow: visible; }
.note-dialog::backdrop { background: rgba(118, 21, 24, .55); backdrop-filter: blur(3px); }
.note-dialog__paper { background: repeating-linear-gradient(transparent 0 31px, rgba(151, 27, 30, .1) 31px 32px) 0 26px / 100% auto, #FFFDF7; padding: clamp(30px, 6vw, 56px); position: relative; max-height: 86vh; overflow: auto; box-shadow: 0 40px 80px -30px rgba(26, 17, 16, .7); }
.note-dialog__body p { font-size: 1.12rem; line-height: 1.75; }
.note-dialog__close { position: absolute; right: 14px; top: 12px; background: none; border: 0; cursor: pointer; font-weight: 700; color: var(--maroon); padding: 6px 8px; }

/* ---------- 15. Location ---------- */
.location { padding: clamp(90px, 14vh, 170px) var(--gutter) clamp(60px, 10vh, 120px); overflow: hidden; }
.location__head { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px var(--gutter); align-items: end; }
.location__head .eyebrow { grid-column: 1 / -1; margin: 0; }
.location__search label { display: block; margin-bottom: 6px; }
.location__search input {
  width: 100%; font: inherit; font-size: 1.3rem; padding: 14px 18px; border-radius: 999px;
  border: 2px solid rgba(251, 245, 233, .5); background: rgba(118, 21, 24, .6); color: var(--paper);
}
.location__search input::placeholder { color: rgba(251, 245, 233, .6); }
.location__search input:focus { outline: none; border-color: var(--yellow); }
.location__result { min-height: 1.6em; margin: 10px 0 0 6px; font-weight: 500; font-size: 1.15rem; }
.location__note { margin: 2px 0 0 6px; font-size: .9rem; opacity: .85; }
.orbit-map__eta { opacity: 0; transition: opacity .4s; pointer-events: none; }
.orbit-map__eta.is-on { opacity: 1; }
.orbit-map__eta rect { fill: var(--yellow); stroke: var(--maroon-deep); stroke-width: 3; }
.orbit-map__eta text { font-family: var(--f-body); font-weight: 700; fill: var(--maroon-deep); }
.orbit-map { position: relative; width: min(980px, 100%); aspect-ratio: 1; margin: 20px auto 0; }
.orbit-map__svg { width: 100%; height: 100%; overflow: visible; }
.orbit-map--still .orbit-map__svg { animation: mapBreathe 5s ease-in-out infinite alternate; will-change: transform; }
@keyframes mapBreathe { from { transform: scale(.985); } to { transform: scale(1.01); } }
.road { fill: none; stroke: rgba(251, 245, 233, .14); stroke-width: 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.road--thin { stroke-width: 5; }
.road--orr { stroke: rgba(249, 194, 18, .16); stroke-width: 14; stroke-dasharray: 2 18; }
.road--ring { stroke-width: 1.2; stroke: rgba(251, 245, 233, .16); stroke-dasharray: 4 8; }
.orbit-map__glow { fill: rgba(249, 194, 18, .14); }
.orbit-map__route { fill: none; stroke: var(--yellow); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 12; }
.loc { font-family: var(--f-display); fill: rgba(251, 245, 233, .78); transition: fill .3s; }
.loc.is-dim { fill: rgba(251, 245, 233, .28); }
.loc.is-hit { fill: var(--yellow); }
.loc-dot { fill: var(--yellow); }
.orbit-map__mandala { position: absolute; left: 50%; top: 50%; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.orbit-map__pin { position: absolute; left: 50%; top: calc(50% + 9%); transform: translateX(-50%); margin: 0; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; color: var(--yellow); white-space: nowrap; }
.orbit-map__caption { position: absolute; right: 0; bottom: 4%; margin: 0; font-size: 1.2rem; opacity: .7; }
.location__real { max-width: var(--max); margin: 30px auto 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: center; }
.location__map { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--maroon-deep); }
/* cover over the embed: scrolling passes to the page; click/tap hands control to the map */
.location__map-cover { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 14px; border: 0; background: transparent; cursor: pointer; }
.location__map-cover span { padding: .5em 1.1em; border-radius: 999px; background: rgba(26, 17, 16, .74); color: var(--paper); font-weight: 600; font-size: .92rem; opacity: .85; transition: opacity .25s, transform .3s var(--ease-out); }
.location__map-cover:hover span, .location__map-cover:focus-visible span { opacity: 1; transform: translateY(-2px); }
.location__map.is-live .location__map-cover { display: none; }
.location__map iframe { width: 100%; height: 100%; border: 0; filter: sepia(.25) saturate(.9); }
.location__addr { font-style: normal; font-size: 1.1rem; line-height: 1.7; }
.location__addr strong { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; color: var(--yellow); }
.location__addr .btn { margin-top: 20px; }

/* ---------- 16. Enquiry ticket ---------- */
.enquiry { padding: clamp(90px, 14vh, 170px) var(--gutter); }
.enquiry__head { max-width: 980px; margin: 0 auto 40px; }
.enquiry__head p:last-child { max-width: 46ch; font-size: 1.15rem; }
.ticket { position: relative; max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 24px 260px; filter: drop-shadow(0 30px 40px rgba(118, 21, 24, .3)); }
.ticket__main {
  position: relative; background: var(--paper); padding: clamp(26px, 4vw, 44px); border-radius: 14px 0 0 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px;
}
.ticket__brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 14px; border-bottom: 2px dashed rgba(151, 27, 30, .3); font-weight: 700; color: var(--maroon); }
.ticket__brand-m { width: 34px; height: 34px; flex: none; }
.field { display: flex; flex-direction: column; }
.field label { font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--maroon); margin-bottom: 4px; }
.field .opt { text-transform: none; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.field input, .field select {
  font: inherit; font-size: 1.1rem; padding: 10px 2px; background: transparent; color: var(--ink);
  border: 0; border-bottom: 2px solid rgba(26, 17, 16, .35); border-radius: 0; appearance: none;
}
.field select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23971B1E' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 4px center; padding-right: 28px; }
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--maroon); box-shadow: 0 2px 0 var(--maroon); }
.field[aria-invalid="true"] input, .field[aria-invalid="true"] select { border-bottom-color: #B3261E; }
.field__err { min-height: 1.3em; margin: 3px 0 0; color: #A3201C; font-size: .88rem; font-weight: 500; }
.field--check { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: start; margin-top: 6px; }
.field--check input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--maroon); appearance: auto; }
.field--check label { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 1rem; color: var(--ink); }
.field--check .field__err { grid-column: 2; }
.ticket__submit { grid-column: 1 / -1; justify-self: start; margin-top: 10px; }
.ticket__status { grid-column: 1 / -1; margin: 8px 0 0; font-weight: 500; min-height: 1.4em; }
.ticket__perf { position: relative; background: var(--paper); background-image: linear-gradient(var(--maroon) 50%, transparent 50%); background-size: 2px 14px; background-repeat: repeat-y; background-position: center; }
.ticket__perf::before, .ticket__perf::after { content: ""; position: absolute; left: 50%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: var(--yellow); }
.ticket__perf::before { top: -15px; }
.ticket__perf::after { bottom: -15px; }
.ticket__stub { background: var(--maroon); color: var(--paper); padding: 30px 24px; border-radius: 0 14px 14px 0; display: flex; flex-direction: column; will-change: transform; }
.ticket__stub-k { font-weight: 700; text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; color: var(--yellow); margin: 0; }
.ticket__stub-y { font-family: var(--f-display); font-size: 3.4rem; line-height: 1; margin: .15em 0 .35em; }
.ticket__stub-r { font-size: .95rem; line-height: 1.35; }
.ticket__stub-seats { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0 0 1em; padding: 9px 16px; border-radius: 6px; background: var(--yellow); color: var(--ink); font-weight: 800; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; animation: seatsPulse 1.8s ease-in-out infinite; }
.ticket__stub-seats::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--maroon); }
@keyframes seatsPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(249, 194, 18, .7); } 50% { box-shadow: 0 0 0 10px rgba(249, 194, 18, 0); } }
.enquiry__seats { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 12px 24px; border-radius: 999px; background: var(--maroon); color: var(--paper); font-weight: 800; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); letter-spacing: .02em; box-shadow: 0 10px 24px -12px rgba(118, 21, 24, .8); }
.enquiry__seats::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); animation: seatsDot 1.4s ease-in-out infinite; }
@keyframes seatsDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(249, 194, 18, .8); } 50% { box-shadow: 0 0 0 8px rgba(249, 194, 18, 0); } }
.barcode { margin-top: auto; height: 70px; background: repeating-linear-gradient(90deg, var(--paper) 0 2px, transparent 2px 4px, var(--paper) 4px 7px, transparent 7px 9px, var(--paper) 9px 10px, transparent 10px 14px); opacity: .9; }
.ticket__stamp {
  position: absolute; right: 8%; top: 18%; width: 190px; height: 190px; border-radius: 50%; pointer-events: none;
  border: 5px double var(--maroon); display: grid; place-items: center; opacity: 0; transform: scale(2.6) rotate(-30deg);
}
.ticket__stamp-m { width: 70px; height: 70px; }
.ticket__stamp-t { position: absolute; bottom: 30px; font-family: var(--f-display); font-size: 1.7rem; color: var(--maroon); letter-spacing: .1em; text-transform: uppercase; }
/* the RECEIVED stamp lands in the ticket's top corner, never over the form fields */
.ticket .ticket__stamp { top: -34px; right: 4%; width: 150px; height: 150px; z-index: 5; }
.ticket .ticket__stamp-m { width: 56px; height: 56px; }
.ticket .ticket__stamp-t { bottom: 22px; font-size: 1.3rem; }
.ticket__widget { grid-column: 1 / -1; min-height: 420px; }
.ticket__noscript { grid-column: 1 / -1; }

/* =====================================================================
   ExtraaEdge enquiry widget: visual restyle ONLY, scoped to #ee-form-8.
   Their fields, hidden inputs and JavaScript are untouched.
   ===================================================================== */
#ee-form-8 { --ee-font-family: var(--f-body); --ee-primary-color: var(--maroon); --ee-danger-color: #A3201C; font-family: var(--f-body); color: var(--ink); }
#ee-form-8 .ee-form-widget, #ee-form-8 .ee-container, #ee-form-8 form { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; }
#ee-form-8 .ee-form-header { padding: 0 0 18px !important; background: none !important; text-align: left; }
#ee-form-8 .ee-form-heading { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.1; color: var(--maroon); text-align: left; }
#ee-form-8 .ee-form-instruction { margin: 4px 0 0; color: var(--muted); }
#ee-form-8 .ee-form-body { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; padding: 0 !important; }
#ee-form-8 .ee-row { margin: 0 0 16px !important; padding: 0 !important; display: block; }
#ee-form-8 .col-25, #ee-form-8 .col-75 { width: 100% !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important; }
#ee-form-8 label { display: block; margin: 0 0 6px; font-family: var(--f-body); font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--maroon); }
#ee-form-8 .asterix { color: var(--maroon); }
#ee-form-8 input[type="text"], #ee-form-8 input[type="tel"], #ee-form-8 input[type="email"], #ee-form-8 input:not([type]),
#ee-form-8 .select2-container .select2-selection--single {
  width: 100% !important; height: 52px !important; margin: 0 !important; padding: 0 14px; box-sizing: border-box;
  font: 400 1.05rem/1.2 var(--f-body) !important; color: var(--ink) !important;
  background: #fff !important; border: 1.5px solid rgba(26, 17, 16, .22) !important; border-radius: 10px !important; box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s;
}
#ee-form-8 input::placeholder { color: #7A6F6A; opacity: 1; }
#ee-form-8 input:focus, #ee-form-8 .select2-container--focus .select2-selection--single, #ee-form-8 .select2-container--open .select2-selection--single, #ee-form-8 .iti__selected-flag:focus {
  outline: none !important; border-color: var(--maroon) !important; box-shadow: 0 0 0 3px rgba(249, 194, 18, .6) !important;
}
#ee-form-8 .select2-container { width: 100% !important; }
#ee-form-8 .select2-selection__rendered { line-height: 49px !important; padding: 0 !important; color: var(--ink) !important; }
#ee-form-8 .select2-selection__placeholder { color: #7A6F6A !important; }
#ee-form-8 .select2-selection__arrow { height: 50px !important; right: 10px !important; }
#ee-form-8 .select2-selection__arrow b { border-top-color: var(--maroon) !important; }
#ee-form-8 .iti { width: 100%; display: block; }
#ee-form-8 .iti__selected-flag { border-radius: 10px 0 0 10px; background: var(--paper) !important; }
#ee-form-8 .iti__selected-dial-code { color: var(--ink); font-weight: 600; }
#ee-form-8 .iti__country-list { z-index: 20; border-radius: 10px; font-family: var(--f-body); }
/* errors (their classes: .in-valid on the field, .error on the message) */
#ee-form-8 .in-valid, #ee-form-8 .in-valid + .select2-container .select2-selection--single { border-color: #A3201C !important; box-shadow: 0 0 0 3px rgba(163, 32, 28, .15) !important; }
#ee-form-8 .error { display: block; margin-top: 5px; color: #A3201C; font-size: .88rem; font-weight: 500; }
/* captcha row, consent and submit span the full ticket width. The captcha row
   (and the field just before it, so nothing is left half-empty) take a full row;
   inside it the captcha box and "Enter Text" sit on the same two columns as the
   fields above, both 52px tall and vertically centred. */
#ee-form-8 .ee-row:has(> .captchaContainer), #ee-form-8 .ee-row:has(+ .ee-row > .captchaContainer),
#ee-form-8 .check-box-field, #ee-form-8 .ee-form-footer { grid-column: 1 / -1; }
#ee-form-8 .captchaContainer { display: grid !important; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; width: 100%; margin: 0 !important; }
#ee-form-8 .captchaContainer .ee-row { margin: 0 !important; }
#ee-form-8 .cpatcha {
  display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
  width: 100% !important; height: 52px !important; margin: 0 !important; padding: 0 8px 0 16px !important; box-sizing: border-box;
  border: 1.5px solid rgba(26, 17, 16, .22) !important; border-radius: 10px; background: #fff; overflow: hidden;
}
#ee-form-8 .cpatcha canvas { display: block; margin: 0 auto 0 0; }
#ee-form-8 .cpatcha .divider { align-self: stretch; height: auto !important; margin: 10px 0 !important; }
#ee-form-8 .cpatcha .refreshButtonContainer { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: 8px; cursor: pointer; }
#ee-form-8 .cpatcha .refreshButtonContainer:hover { background: var(--paper); }
/* consent: checkbox and text centred on one line, readable size */
#ee-form-8 .check-box-field { margin-top: 2px !important; }
#ee-form-8 .check-box-field label { display: flex !important; gap: 12px; align-items: center; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink); cursor: pointer; }
#ee-form-8 .check-box-field label span { display: block; margin: 0 !important; font-size: 1rem !important; line-height: 1.45 !important; color: var(--ink) !important; }
#ee-form-8 .check-box-field input[type="checkbox"] { width: 22px; height: 22px; margin: 0 !important; flex: none; accent-color: var(--maroon); }
#ee-form-8 .ee-form-footer { padding: 6px 0 0 !important; text-align: left !important; }
#ee-form-8 .btn-submit {
  display: inline-flex; align-items: center; justify-content: center; min-width: 220px; min-height: 54px; padding: .9em 2.2em !important; margin: 0 !important;
  border: 0 !important; border-radius: 999px !important; background: var(--maroon) !important; color: var(--paper) !important;
  font: 700 1.08rem/1 var(--f-body) !important; letter-spacing: .02em; text-transform: none !important; cursor: pointer; box-shadow: none !important;
  transition: background-color .25s, color .25s, transform .3s var(--ease-out);
}
#ee-form-8 .btn-submit:hover, #ee-form-8 .btn-submit:focus-visible { background: var(--yellow) !important; color: var(--ink) !important; }
#ee-form-8 .btn-submit:focus-visible { outline: 3px solid var(--maroon); outline-offset: 3px; }
#ee-form-8 .btn-submit:active { transform: scale(.97); }
#ee-form-8 .btn-submit[disabled], #ee-form-8 .btn-submit.disabled { opacity: .6; cursor: wait; }

/* The widget opens two things outside #ee-form-8 (attached to <body>): its dropdown
   lists and its feedback pop-up. These rules use only the widget's own classes. */
.select2-container--open .select2-dropdown { border: 1.5px solid var(--maroon); border-radius: 10px; overflow: hidden; font-family: var(--f-body); z-index: 1060; }
.select2-container--open .select2-results__option { padding: 10px 14px; font-size: 1rem; color: var(--ink); }
.select2-container--open .select2-results__option--highlighted[aria-selected] { background: var(--yellow) !important; color: var(--ink) !important; }
.select2-container--open .select2-search__field { border-radius: 8px; border: 1.5px solid rgba(26, 17, 16, .25); font-size: 16px; }
.ee-form-widget-feedback .modal-content { border-radius: 14px; font-family: var(--f-body); color: var(--ink); }
.ee-form-widget-feedback .modal-header strong { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; color: var(--maroon); }
.ee-form-widget-feedback .btn-feedback-control { background: var(--maroon) !important; color: var(--paper) !important; border: 0 !important; border-radius: 999px !important; padding: .7em 1.8em !important; font-weight: 700; }
.ee-form-widget-feedback .btn-feedback-control:hover { background: var(--yellow) !important; color: var(--ink) !important; }

/* ---------- 17. Footer ---------- */
.footer { padding: 40px var(--gutter) 30px; color: var(--paper); background: var(--maroon-deep); }
.footer__grow { position: relative; max-width: var(--max); margin: 0 auto 50px; height: 200px; }
.footer__line { position: absolute; left: 0; top: 40px; width: 90%; height: 120px; overflow: visible; }
.footer__line path { fill: none; stroke: var(--yellow); stroke-width: 2.5; stroke-dasharray: 4 7; }
.footer__mandala { position: absolute; right: 0; top: 0; width: 200px; height: 200px; }
.footer__grow-note { position: absolute; right: 210px; top: 150px; margin: 0; transform: rotate(-4deg); }
.footer__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr .8fr; gap: 40px var(--gutter); padding-bottom: 40px; border-bottom: 1px solid rgba(251, 245, 233, .2); }
.footer__brand img { height: 64px; width: auto; margin-bottom: 18px; }
.footer__brand p { max-width: 32ch; }
.footer__brand .compass { margin-top: 10px; }
.footer__h { font-family: var(--f-body); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .18em; color: var(--yellow); margin-bottom: 14px; }
.footer address { font-style: normal; }
.footer__hours { margin: 10px 0 0; font-size: .92rem; opacity: .85; }
.location__phone { display: block; width: fit-content; margin-top: 10px; color: var(--yellow); font-weight: 700; font-size: 1.15rem; text-decoration: none; padding: 6px 0; }
.location__phone:hover { text-decoration: underline; }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 8px; }
.footer a { text-decoration-color: rgba(249, 194, 18, .5); text-underline-offset: 3px; }
.footer a:hover { color: var(--yellow); }
.footer__base { max-width: var(--max); margin: 0 auto; padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; font-size: .9rem; opacity: .85; }
.footer__base p { margin: 0; }

/* ---------- 18. Mobile chrome ---------- */
.mobile-bar { display: none; }

@media (max-width: 899px) {
  :root { --header-h: 62px; }

  /* ---- mobile pass ---- */
  .hero { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }   /* clear the sticky bar */
  .site-header .btn--sm { min-height: 44px; }
  .only-desktop { display: none; }
  .footer__list a, .footer__base a { display: inline-block; padding: 11px 0; }
  .site-header__logo { padding: 3px 0; }
  .split__range { height: 44px; }
  .approach__head em::after { inset: -4% -3% -10% -3%; }

  /* Memorise vs Understand stacks vertically: memorise on top, the tree gets full width */
  .split { --seam: calc(62% - var(--v) * 44%); }
  .split__stage { height: 580px; }
  .split__memo { inset: 0 0 auto 0; width: auto; height: var(--seam); border-right: 0; border-bottom: 2px solid var(--maroon); }
  .split__grid { font-size: 12px; }
  .split__understand { inset: var(--seam) 0 0 0; }
  .split__tree { inset: 36px 8px 8px 8px; width: calc(100% - 16px); height: calc(100% - 44px); }
  .split__label--r { top: 8px; }
  .split__seam { top: var(--seam); bottom: auto; left: 0; right: 0; width: auto; height: 0; }
  .split__knob { left: 50%; top: 0; }

  .token { width: 46px; height: 46px; font-size: 1.15rem; }
  .token--star b { font-size: .9rem; }

  .prism-wrap { height: 44vh; }
  .outcomes__pin { gap: 14px; }

  /* the orbit map becomes a tall ellipse so every name fits the screen */
  .orbit-map { width: 100%; margin-left: 0; aspect-ratio: 1000 / 1240; }
  .orbit-map__mandala { width: 20%; }
  .orbit-map__pin { top: calc(50% + 7.5%); }
  .road { stroke-width: 4; }
  .road--thin { stroke-width: 2; }
  .road--orr { stroke-width: 6; stroke-dasharray: 1 8; }
  .site-nav { display: none; }
  .site-header__logo img { height: 38px; }
  .hero__note { display: none; }
  .hero__shade { background:
    linear-gradient(to top, rgba(26, 17, 16, .84) 0%, rgba(26, 17, 16, .6) 46%, rgba(26, 17, 16, 0) 82%),
    linear-gradient(to bottom, rgba(26, 17, 16, .35), transparent 18%); }
  .hero__ctas .compass { display: none; } /* compass lives in the floating badge on mobile */
  .hero__badge .cam-logo img { height: 38px !important; }

  .seven { grid-template-columns: 1fr; padding-top: 70px; }
  .seven__num { width: 58%; margin: 0 auto; }

  .approach__head { grid-template-columns: 1fr; }

  /* Pathway becomes a vertical line */
  .pathway__pin { height: auto; overflow: visible; padding-bottom: 60px; }
  .pathway__head { grid-template-columns: 1fr; }
  .pathway__viewport { flex: none; margin-top: 30px; }
  .pathway__track { position: relative; display: block; padding: 0 var(--gutter) 0 calc(var(--gutter) + 56px); transform: none !important; }
  .pathway__rail { left: calc(var(--gutter) + 18px); top: 0; width: 12px; height: 100%; }
  .pathway__train { left: calc(var(--gutter) + 24px); top: 0; width: 52px; height: 52px; margin-left: -26px; }
  .stations { flex-direction: column; gap: 46px; }
  .station { width: 100%; padding-top: 0; }
  .station__dot { left: -46px; top: 14px; margin-left: 0; }
  .station__code { left: -50px; top: 50px; transform: none; }
  .station__card { transform: scale(.94); transform-origin: 0 0; }
  .stamp { right: -6px; top: -30px; width: 112px; height: 112px; }

  .fit__inner { grid-template-columns: 1fr; }
  .compass--xl .compass__dial { width: 84px; height: 84px; }
  .compass--xl .compass__ripple { left: 56px; width: 84px; height: 84px; margin: -42px 0 0 -42px; }

  .results__head { grid-template-columns: 1fr; }
  .results__stat--pass { flex-basis: 100%; }
  .results__stat--pass + .results__stat { border-left: 0; padding-left: 0; }

  .reasons__head { grid-template-columns: 1fr; }
  .results__toss { grid-row: auto; margin-top: 10px; font-size: 1.35rem; }
  .only-mobile { display: inline; }

  .voice__panels { grid-template-columns: 1fr; }
  .vpanel { grid-column: 1; }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 10px; }
  .tile--ai, .tile--steam, .tile--biz, .tile--sports, .tile--art { grid-column: 1 / -1; grid-row: auto; }
  .tile--steam { min-height: 280px; }
  .tile--sports { min-height: 300px; }
  .tile--swim { grid-column: 1; min-height: 190px; }
  .tile--skate { grid-column: 2; min-height: 190px; }
  .tile--art { min-height: 300px; }
  .tile--biz { flex-direction: row; flex-wrap: wrap; gap: 0 18px; align-items: center; }
  .tile--biz .vinyl { width: 120px; margin: 0; }
  .tile--biz .tile__title { flex: 1; }

  /* bottom padding keeps the closing line clear of the sticky Enquire Now bar */
  .outcomes__pin { grid-template-columns: 1fr; grid-template-rows: auto; align-content: center; padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .outcomes__index { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 1.1rem; }
  .outcomes__index li.is-on { transform: none; }
  .outcomes__index li.is-on::before { content: ""; }
  .prism { --w: min(78vw, 400px); }
  /* frame hugs the box (plus room for its turn), so heading, box and closing line share one screen */
  .prism-wrap { height: calc(min(78vw, 400px) * .66 + 56px); }
  .outcomes__line { font-size: 1.15rem; }

  .desk { height: auto; padding: 50px 18px 30px; display: flex; flex-direction: column; gap: 34px; }
  .note { position: relative; left: auto; top: auto; width: 100%; touch-action: auto; cursor: pointer; }
  .prop--pencil, .prop--ring { display: none; }
  .prop--sticky { position: relative; right: auto; top: auto; align-self: flex-end; order: 3; }

  .location__head, .location__real { grid-template-columns: 1fr; }

  .ticket { grid-template-columns: 1fr; grid-template-rows: auto 24px auto; }
  .ticket__main { grid-template-columns: 1fr; border-radius: 14px 14px 0 0; }
  .ticket__perf { background-image: linear-gradient(90deg, var(--maroon) 50%, transparent 50%); background-size: 14px 2px; background-repeat: repeat-x; }
  .ticket__perf::before, .ticket__perf::after { top: 50%; left: auto; margin: -15px 0 0; }
  .ticket__perf::before { left: -15px; }
  .ticket__perf::after { right: -15px; bottom: auto; }
  .ticket__stub { border-radius: 0 0 14px 14px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 20px 24px; }
  .ticket__stub-y { font-size: 2.6rem; margin: 0; }
  .ticket__stub-r { margin: 0; }
  .barcode { width: 100%; height: 34px; margin-top: 8px; }
  .ticket__stamp { width: 140px; height: 140px; right: 6%; top: 14%; }
  .ticket__stamp-m { width: 52px; height: 52px; }
  .ticket__stamp-t { font-size: 1.2rem; bottom: 22px; }
  #ee-form-8 .ee-form-body { grid-template-columns: 1fr; }
  /* captcha box full width (keeps its refresh button), "Enter Text" below it */
  #ee-form-8 .captchaContainer { grid-template-columns: 1fr; gap: 16px; }
  /* consent text wraps on phones: the checkbox lines up with its first line */
  #ee-form-8 .check-box-field label { align-items: flex-start !important; }
  #ee-form-8 .check-box-field input[type="checkbox"] { margin-top: 2px !important; }
  #ee-form-8 .btn-submit { width: 100%; }
  .ticket .ticket__stamp { top: -24px; right: 2%; width: 116px; height: 116px; }
  .ticket .ticket__stamp-m { width: 42px; height: 42px; }
  .ticket .ticket__stamp-t { font-size: 1rem; bottom: 16px; }
  .ticket__widget { min-height: 600px; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__mandala { width: 130px; height: 130px; }
  .footer__grow { height: 150px; }
  .footer__grow-note { right: 0; top: 136px; }
  .footer__base { flex-direction: column; padding-bottom: 80px; }

  .mobile-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(118, 21, 24, .96); transition: transform .45s var(--ease-out);
  }
  .mobile-bar .btn { width: 100%; }
  .mobile-bar.is-hidden { transform: translateY(110%); }
  .compass--float {
    display: grid; place-items: center; position: fixed; left: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 76;
    width: 62px; height: 62px; padding: 0; border-radius: 50%; border: 2px solid var(--yellow); background: var(--maroon);
  }
  .compass--float .compass__dial { width: 50px; height: 50px; }
  .compass--float .compass__ripple { left: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; }
}

@media (max-width: 899px) and (max-height: 760px) {
  .outcomes__head h2 { font-size: 1.85rem; margin-bottom: .4em; }
  .outcomes__index { font-size: 1rem; }
  .outcomes__pin { gap: 10px; }
}

@media (max-width: 520px) {
  /* footer: one column, so the address and long email lines get the full width */
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .footer__list--row { display: flex; flex-wrap: wrap; gap: 6px 22px; }
}

/* ---------- 19. Motion utilities ---------- */
/* Line-by-line text reveal (SplitType lines wrapped in masks) */
.line-mask { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.line-mask > .line { display: block; transform-origin: 0 100%; }

/* Image reveals driven by --p (0 → 1) from js/modules/motion.js */
[data-reveal] { --p: 0; }
.js [data-reveal="bloom"] > img {
  -webkit-mask: url("../assets/mask-bloom.svg") center / calc(var(--p) * 320%) auto no-repeat;
          mask: url("../assets/mask-bloom.svg") center / calc(var(--p) * 320%) auto no-repeat;
}
.js [data-reveal="ink"] > img {
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--p) * 130% - 30%), transparent calc(var(--p) * 130%));
          mask-image: linear-gradient(100deg, #000 calc(var(--p) * 130% - 30%), transparent calc(var(--p) * 130%));
}
.js [data-reveal].is-revealed > img { -webkit-mask: none; mask: none; clip-path: none; }
[data-skew] { will-change: transform; }

/* ---------- 20. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; }
  .hero__img { animation: none; }
  .js [data-reveal] > img { -webkit-mask: none !important; mask: none !important; clip-path: none !important; }
  .loader { display: none; }
}