/* Fonts, served from this site (Google Fonts files, SIL Open Font License): no extra connection before the text can show.
   Only the Latin and Greek ranges the page uses; the browser downloads a file only when the page has characters in its range. */
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/commissioner-normal-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/commissioner-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/commissioner-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/instrument-serif-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Serif Display';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-display-italic-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Noto Serif Display';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-display-italic-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Serif Display';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-display-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Serif Display';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-display-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   Cyprus Dog Trainer — Andreas Demetriou
   ========================================================= */

:root {
  --navy: #13233a;
  --navy-2: #0c1828;
  --navy-3: #1d3352;
  --navy-4: #2a4670;
  --gold: #c09a55;
  --gold-2: #dcbd7c;
  --gold-deep: #7c5e28;
  --cream: #f6efe2;
  --cream-2: #ede2cc;
  --cream-3: #e4d6ba;
  --white: #fffdf8;
  --ink: #13233a;
  --muted: #5d6676;
  --wa: #25d366;

  --font: "Bricolage Grotesque", "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "Noto Serif Display", Georgia, serif;

  --radius: 28px;
  --radius-sm: 16px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --header-h: 78px;
  --gutter: clamp(16px, 4vw, 56px);
  --shadow: 0 30px 60px -20px rgba(19, 35, 58, .35), 0 12px 24px -12px rgba(19, 35, 58, .2);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  overflow-x: clip; /* not hidden: Safari can otherwise treat <body> as the scroller and break every sticky panel */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-loading { overflow: hidden; }
/* the page under the welcome screen stays out of sight (and out of reach of screen readers and keyboards) until the screen lifts */
body.is-loading > :is(.header, .menu, main, .footer-wrap, .action-bar, .rail, .wa-float, .pup) { visibility: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--gold); color: var(--navy); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.ico { width: 1.15em; height: 1.15em; flex: none; }
.container { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(90px, 12vw, 170px); position: relative; }

/* ---------- type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .86rem; font-weight: 500; letter-spacing: .01em;
  padding: .55em 1em .55em .8em; border-radius: 999px;
  background: rgba(19, 35, 58, .06); border: 1px solid rgba(19, 35, 58, .1);
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fbf71; position: relative; flex: none; }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #2fbf71; animation: ping 1.8s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.5); opacity: 1 } 100% { transform: scale(1.8); opacity: 0 } }

.kicker {
  display: flex; align-items: center; gap: .7em;
  font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
  color: var(--gold-deep); margin-bottom: 1.4rem;
}
.kicker span:first-child { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.15rem; font-weight: 400; }
.kicker--light { color: var(--gold-2); }

.h2 {
  font-size: clamp(2.6rem, 6.4vw, 6rem);
  line-height: .95; letter-spacing: -.045em; font-weight: 700;
}
.h2 em { color: var(--gold-deep); font-size: 1.06em; }
.section-head { margin-bottom: clamp(48px, 7vw, 96px); max-width: 980px; }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .kicker { justify-content: center; }
.section-lead { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--muted); max-width: 640px; margin-top: 1.4rem; }
.section-head--center .section-lead { margin-inline: auto; }

/* split words (headings) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wi { display: inline-block; will-change: transform; }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--navy); --fg: var(--cream);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95em 1.5em; border-radius: 999px; font-weight: 600; font-size: .98rem; line-height: 1;
  background: var(--bg); color: var(--fg); white-space: nowrap; overflow: hidden; isolation: isolate;
  transition: color .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--hover-bg, var(--gold)); transform: translateY(101%); transition: transform .5s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: var(--hover-fg, var(--navy)); }
.btn--lg { padding: 1.15em 1.8em; font-size: 1.02rem; }
.btn--sm { padding: .75em 1.15em; font-size: .9rem; }
.btn--navy { box-shadow: 0 14px 30px -14px rgba(19,35,58,.6); }
.btn--gold { --bg: var(--gold); --fg: var(--navy); --hover-bg: var(--navy); --hover-fg: var(--cream); }
.btn--ghost { --bg: transparent; --fg: var(--navy); border: 1.5px solid rgba(19,35,58,.25); --hover-bg: var(--navy); --hover-fg: var(--cream); }
.btn--ghost-light { --bg: transparent; --fg: var(--cream); border: 1.5px solid rgba(246,239,226,.3); --hover-bg: var(--cream); --hover-fg: var(--navy); }
.btn--wa { --bg: var(--wa); --fg: #08341a; --hover-bg: var(--cream); --hover-fg: var(--navy); }
.magnetic { will-change: transform; }

.link-arrow { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; border-bottom: 1.5px solid currentColor; padding-bottom: .2em; }
.link-arrow .ico { transition: transform .4s var(--ease); }
.link-arrow:hover .ico { transform: translateX(6px); }

/* ---------- preloader ---------- */
.preloader { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: var(--navy); color: var(--cream); }
.preloader__inner { display: grid; justify-items: center; gap: 28px; width: min(560px, 82vw); }
.preloader__logo { width: 100%; opacity: 0; transform: translateY(16px); }
.preloader__paws { display: flex; gap: 18px; height: 34px; }
.preloader__paws svg { width: 26px; height: 26px; color: var(--gold); opacity: 0; }
.preloader__paws svg:nth-child(odd) { transform: translateY(8px) rotate(80deg); }
.preloader__paws svg:nth-child(even) { transform: translateY(-4px) rotate(100deg); }
.preloader__count { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--gold-2); display: flex; gap: 2px; }
.preloader__curtain { position: absolute; inset: 0; background: var(--gold); transform: scaleY(0); transform-origin: bottom; }
.no-js .preloader { display: none; }

/* ---------- cursor & paw trail ---------- */
.cursor { position: fixed; inset: 0 auto auto 0; z-index: 9999; pointer-events: none; display: none; }
.cursor__dot { position: fixed; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--gold); }
.cursor__ring {
  position: fixed; left: 0; top: 0; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%;
  border: 1.5px solid rgba(192, 154, 85, .7); display: grid; place-items: center;
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s var(--ease), border-color .35s;
}
.cursor__label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); opacity: 0; transition: opacity .25s; }
.cursor.is-hover .cursor__ring { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: var(--gold); border-color: var(--gold); }
.cursor.is-hover .cursor__label { opacity: 1; }
.cursor.is-hover .cursor__dot { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .has-cursor .cursor { display: block; } }

.paw-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9990; overflow: hidden; }
.paw-print { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; color: var(--gold); opacity: .55; animation: pawFade 1.4s ease-out forwards; }
.paw-print svg { width: 100%; height: 100%; display: block; }
@keyframes pawFade { 0% { opacity: 0; scale: .4 } 12% { opacity: .6; scale: 1 } 100% { opacity: 0; scale: .9 } }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1001; pointer-events: none; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); transform: scaleX(0); transform-origin: left; }

.grain {
  position: fixed; inset: -50%; z-index: 9989; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 1000; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-inline: var(--gutter);
  transition: transform .6s var(--ease), background .4s, box-shadow .4s, color .4s;
}
.header.is-scrolled { background: rgba(246, 239, 226, .78); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 rgba(19,35,58,.08); }
.header.is-hidden { transform: translateY(-110%); }
.header__logo { position: relative; width: clamp(170px, 17vw, 236px); flex: none; }
.header__logo img { width: 100%; transition: opacity .4s; }
.header__logo .logo-light { position: absolute; inset: 0; opacity: 0; }
.header__nav { display: flex; gap: clamp(14px, 2vw, 34px); font-size: .95rem; font-weight: 500; }
.header__nav a { position: relative; padding: .4em 0; }
.header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.header__nav a:hover::after, .header__nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.header__actions { display: flex; align-items: center; gap: 12px; }
.lang { display: flex; padding: 4px; border-radius: 999px; background: rgba(19,35,58,.07); }
.lang__btn { font-size: .78rem; font-weight: 700; padding: .45em .8em; border-radius: 999px; transition: background .3s, color .3s; }
.lang__btn.is-active { background: var(--navy); color: var(--cream); }

.header[data-theme="dark"] { color: var(--cream); }
.header[data-theme="dark"] .logo-dark { opacity: 0; }
.header[data-theme="dark"] .logo-light { opacity: 1; }
.header[data-theme="dark"].is-scrolled { background: rgba(12, 24, 40, .72); box-shadow: 0 1px 0 rgba(246,239,226,.08); }
.header[data-theme="dark"] .lang { background: rgba(246,239,226,.1); }
.header[data-theme="dark"] .lang__btn.is-active { background: var(--gold); color: var(--navy); }
.header[data-theme="dark"] .burger span { background: var(--cream); }

.burger { display: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(19,35,58,.07); position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .5s var(--ease), top .5s var(--ease); }
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 26px; }
.menu-open .burger span { background: var(--cream) !important; }
.menu-open .burger span:first-child { top: 22px; transform: rotate(45deg); }
.menu-open .burger span:last-child { top: 22px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 999; background: var(--navy); color: var(--cream);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + 24px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
  clip-path: circle(0% at calc(100% - 44px) 40px); visibility: hidden;
  transition: clip-path .8s var(--ease-in-out), visibility 0s .8s;
}
.menu-open .menu { clip-path: circle(150% at calc(100% - 44px) 40px); visibility: visible; transition: clip-path .8s var(--ease-in-out), visibility 0s; }
.menu-open .header { color: var(--cream); background: transparent !important; box-shadow: none !important; transform: none !important; }
.menu-open .header .logo-dark { opacity: 0; }
.menu-open .header .logo-light { opacity: 1; }
.menu-open .header .lang { background: rgba(246,239,226,.1); }
.menu__nav { display: grid; gap: 4px; }
.menu__nav a { display: flex; align-items: baseline; gap: 14px; font-size: clamp(2.2rem, 10vw, 3.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.menu__nav small { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--gold-2); font-weight: 400; letter-spacing: 0; }
.menu-open .menu__nav a { opacity: 1; transform: none; }
.menu-open .menu__nav a:nth-child(1) { transition-delay: .25s } .menu-open .menu__nav a:nth-child(2) { transition-delay: .3s }
.menu-open .menu__nav a:nth-child(3) { transition-delay: .35s } .menu-open .menu__nav a:nth-child(4) { transition-delay: .4s }
.menu-open .menu__nav a:nth-child(5) { transition-delay: .45s } .menu-open .menu__nav a:nth-child(6) { transition-delay: .5s }
.menu-open .menu__nav a:nth-child(7) { transition-delay: .55s }
.menu__phone { font-size: 1.6rem; font-weight: 700; color: var(--gold-2); }
.menu__foot p { opacity: .7; margin-top: 6px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; padding-top: calc(var(--header-h) + clamp(20px, 4vw, 48px)); padding-bottom: 90px; overflow: hidden; display: flex; align-items: center; }
.hero__bg-word {
  position: absolute; left: 50%; bottom: -4vw; translate: -50% 0; z-index: 0; pointer-events: none;
  font-size: 27vw; font-weight: 800; letter-spacing: -.06em; line-height: .8; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(19,35,58,.07);
}
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero__eyebrow { margin-bottom: clamp(20px, 3vw, 36px); }
.hero__title { font-size: clamp(3.5rem, 9.2vw, 9.4rem); line-height: .9; letter-spacing: -.055em; font-weight: 800; margin-bottom: clamp(22px, 3vw, 36px); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line__inner { display: inline-flex; align-items: center; gap: .14em; flex-wrap: nowrap; }
.hero__title em { color: var(--gold-deep); font-size: 1.1em; letter-spacing: -.03em; padding-right: .05em; }
.hero__lead { font-size: clamp(1.12rem, 1.55vw, 1.45rem); max-width: 34ch; line-height: 1.45; color: #2a3a52; }
.hero__sign { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--gold-deep); }
.hero__sign-line { width: 44px; height: 1.5px; background: currentColor; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3.4vw, 42px); }
.hero__quiz-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; font-weight: 500; font-size: .95rem; color: var(--navy); padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(192,154,85,.16); transition: background .3s; }
.hero__quiz-link:hover { background: rgba(192,154,85,.3); }
.hero__quiz-link .ico { transition: transform .4s var(--ease); }
.hero__quiz-link:hover .ico { transform: translateX(5px); }
.hero__quiz-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; color: var(--navy); flex: none; }
.hero__quiz-icon svg { width: 15px; height: 15px; animation: spin 6s linear infinite; }

.hero__visual { position: relative; justify-self: center; width: min(100%, 520px); }
.arch { position: relative; aspect-ratio: 4 / 5.25; border-radius: 999px 999px 32px 32px; overflow: hidden; box-shadow: var(--shadow); background: var(--cream-3); }
.arch__img { width: 100%; height: 115%; object-fit: cover; object-position: 50% 30%; will-change: transform; }
.badge-spin { position: absolute; top: 4%; left: -12%; width: clamp(110px, 11vw, 158px); aspect-ratio: 1; border-radius: 50%; background: var(--navy); display: grid; place-items: center; box-shadow: var(--shadow); z-index: 2; }
.badge-spin svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.badge-spin text { font-size: 15.5px; font-weight: 700; letter-spacing: 2.6px; fill: var(--gold-2); font-family: var(--font); }
.badge-spin img { width: 38%; filter: brightness(0) invert(.94) sepia(.2); }
@keyframes spin { to { transform: rotate(360deg); } }
.float-card {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px; border-radius: 20px; background: rgba(255, 253, 248, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow); max-width: 270px;
}
.float-card strong { display: block; font-size: .95rem; line-height: 1.2; }
.float-card small { display: block; font-size: .78rem; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.float-card__icon { width: 44px; height: 44px; border-radius: 14px; background: var(--gold); color: var(--navy); display: grid; place-items: center; flex: none; }
.float-card__icon svg { width: 22px; height: 22px; }
.float-card__icon--navy { background: var(--navy); color: var(--gold-2); }
.float-card--a { left: -16%; bottom: 14%; animation: bob 6s ease-in-out infinite; }
.float-card--b { right: -8%; top: 30%; animation: bob 7s ease-in-out -2s infinite; }
@keyframes bob { 0%,100% { translate: 0 0 } 50% { translate: 0 -12px } }

.scroll-cue { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; z-index: 2; display: grid; justify-items: center; gap: 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .2em; font-weight: 600; color: var(--muted); }
.scroll-cue__track { width: 1.5px; height: 44px; background: rgba(19,35,58,.15); overflow: hidden; }
.scroll-cue__track span { display: block; width: 100%; height: 50%; background: var(--navy); animation: drip 1.8s var(--ease-in-out) infinite; }
@keyframes drip { 0% { transform: translateY(-100%) } 100% { transform: translateY(200%) } }

/* ---------- tapes ---------- */
.tapes { position: relative; z-index: 3; padding-block: clamp(40px, 6vw, 80px); overflow: hidden; }
.tape { width: 112vw; margin-left: -6vw; padding: clamp(12px, 1.4vw, 20px) 0; overflow: hidden; white-space: nowrap; box-shadow: 0 20px 40px -20px rgba(19,35,58,.4); }
.tape--gold { background: var(--gold); color: var(--navy); transform: rotate(-2.6deg); position: relative; z-index: 2; }
.tape--navy { background: var(--navy); color: var(--cream); transform: rotate(1.8deg); margin-top: -8px; }
.tape__track { display: inline-flex; will-change: transform; }
.tape__track span { padding-right: .5em; font-size: clamp(1.5rem, 3.6vw, 3.2rem); font-weight: 700; letter-spacing: -.03em; text-transform: uppercase; }
.tape--navy .tape__track span { font-family: var(--serif); font-style: italic; text-transform: none; font-weight: 400; letter-spacing: 0; color: var(--gold-2); }

/* ---------- about ---------- */
.about__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.about__media { position: relative; }
.about__photo { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/4.6; box-shadow: var(--shadow); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.polaroid { position: absolute; right: -6%; bottom: 0; width: 46%; margin: 0; padding: 10px 10px 0; background: var(--white); border-radius: 6px; box-shadow: var(--shadow); rotate: 6deg; }
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.polaroid figcaption { font-family: var(--serif); font-style: italic; font-size: .98rem; padding: 10px 2px 12px; color: var(--navy); text-align: center; }
.about__sticker { position: absolute; left: -26px; top: 22px; width: 84px; height: 84px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; color: var(--navy); box-shadow: var(--shadow); animation: wobble 5s ease-in-out infinite; }
.about__sticker svg { width: 40px; height: 40px; }
@keyframes wobble { 0%,100% { rotate: -12deg } 50% { rotate: 12deg } }
.about__copy .h2 { margin-bottom: clamp(24px, 3vw, 40px); }
.highlight-text { font-size: clamp(1.45rem, 2.4vw, 2.25rem); line-height: 1.28; letter-spacing: -.02em; font-weight: 500; }
.hw { opacity: .35; }
.about__small { margin-top: 28px; color: var(--muted); font-size: 1.05rem; max-width: 56ch; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chips li { padding: .6em 1.1em; border-radius: 999px; border: 1.5px solid rgba(19,35,58,.18); font-weight: 600; font-size: .92rem; transition: background .3s, color .3s, border-color .3s; }
.chips li:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(80px, 10vw, 140px); }
.stat { padding: 28px clamp(12px, 2vw, 28px) 0 0; border-top: 1.5px solid rgba(19,35,58,.15); position: relative; }
.stat::before { content: ""; position: absolute; top: -1.5px; left: 0; height: 1.5px; width: 0; background: var(--gold); transition: width 1.2s var(--ease); }
.stat.is-in::before { width: 100%; }
.stat__num { font-size: clamp(3.2rem, 7vw, 6.4rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; display: flex; align-items: flex-start; }
.stat__num sup { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold-deep); font-size: .45em; letter-spacing: 0; margin-left: .06em; margin-top: .15em; }
.stat__num--text { color: var(--gold-deep); }
.stat__label { margin-top: 14px; color: var(--muted); font-size: .98rem; max-width: 22ch; }

/* ---------- zoom-through ---------- */
.zoom { position: relative; background: var(--navy); color: var(--cream); }
.zoom__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.zoom__words { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gutter); pointer-events: none; z-index: 1; }
.zoom__w { font-size: clamp(3.5rem, 13vw, 14rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.zoom__w--r { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold-2); letter-spacing: -.02em; }
.zoom__frame { position: relative; z-index: 2; width: clamp(200px, 26vw, 380px); height: clamp(260px, 38vh, 460px); border-radius: 26px; overflow: hidden; will-change: width, height; }
.zoom__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.zoom__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(24px, 6vw, 90px); background: linear-gradient(180deg, rgba(12,24,40,0) 35%, rgba(12,24,40,.88) 100%); opacity: 0;
}
.zoom__kicker { display: flex; align-items: center; gap: 10px; color: var(--gold-2); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; margin-bottom: 14px; }
.zoom__quote { font-size: clamp(1.8rem, 4.4vw, 4.2rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; max-width: 22ch; }

/* ---------- pillars (stacked) ---------- */
.pillars { background: var(--navy); color: var(--cream); padding-top: clamp(100px, 12vw, 170px); }
.pillars .h2 em { color: var(--gold-2); }
.stack { display: grid; gap: 5vh; }
.stack__card {
  position: sticky; top: calc(var(--header-h) + 3vh + var(--i, 0) * 26px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: stretch;
  min-height: min(76vh, 660px); padding: clamp(22px, 3.4vw, 48px); border-radius: 36px;
  transform-origin: 50% 0; will-change: transform;
  box-shadow: 0 -20px 60px -30px rgba(0,0,0,.6);
}
.stack__card:nth-child(1) { --i: 0 } .stack__card:nth-child(2) { --i: 1 } .stack__card:nth-child(3) { --i: 2 }
.stack__card--cream { background: var(--cream); color: var(--navy); }
.stack__card--gold { background: linear-gradient(140deg, var(--gold-2), var(--gold)); color: var(--navy); }
.stack__card--navy { background: var(--navy-3); color: var(--cream); border: 1px solid rgba(220,189,124,.25); }
.stack__text { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: clamp(6px, 1.5vw, 18px); }
.stack__num { font-family: var(--serif); font-style: italic; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; opacity: .5; }
.stack__card h3 { font-size: clamp(2rem, 4.2vw, 4rem); line-height: .98; letter-spacing: -.045em; font-weight: 700; }
.stack__card p { font-size: clamp(1.08rem, 1.5vw, 1.4rem); line-height: 1.45; max-width: 30ch; margin-top: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { font-size: .82rem; font-weight: 600; padding: .5em .95em; border-radius: 999px; border: 1.5px solid currentColor; opacity: .75; }
.stack__img { margin: 0; border-radius: 26px; overflow: hidden; position: relative; min-height: 300px; }
.stack__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- gallery (horizontal) ---------- */
.gallery { position: relative; background: var(--cream); overflow: hidden; }
.gallery__pin { position: relative; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.gallery__ghost { position: absolute; top: 50%; left: 0; translate: 0 -50%; font-size: 24vw; font-weight: 800; letter-spacing: -.06em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(19,35,58,.08); pointer-events: none; will-change: transform; }
.gallery__track { position: relative; display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); padding-inline: var(--gutter) 12vw; will-change: transform; }
.gallery__intro { flex: none; width: min(520px, 80vw); padding-right: 2vw; }
.gallery__lead { margin-top: 20px; color: var(--muted); font-size: 1.1rem; max-width: 34ch; }
.gallery__hint { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid rgba(19,35,58,.2); margin-top: 32px; animation: nudge 1.8s var(--ease) infinite; }
@keyframes nudge { 0%,100% { transform: translateX(0) } 50% { transform: translateX(10px) } }
.g-card { flex: none; margin: 0; cursor: zoom-in; }
.g-card__img { border-radius: 26px; overflow: hidden; height: 100%; box-shadow: var(--shadow); background: var(--cream-3); }
.g-card__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); will-change: transform; transition: filter .6s; }
.g-card:hover .g-card__img img { filter: saturate(1.15) contrast(1.05); }
.g-card figcaption { display: flex; gap: 14px; align-items: baseline; margin-top: 16px; font-weight: 600; font-size: 1rem; }
.g-card figcaption span:first-child { font-family: var(--serif); font-style: italic; color: var(--gold-deep); font-weight: 400; font-size: 1.2rem; }
.g-card--tall { width: min(44vh, 70vw); } .g-card--tall .g-card__img { height: 64vh; }
.g-card--square { width: min(52vh, 74vw); } .g-card--square .g-card__img { height: min(52vh, 74vw); }
.g-card--low { align-self: flex-end; margin-bottom: 10vh; }
.g-card--wide { width: min(70vh, 84vw); } .g-card--wide .g-card__img { height: min(54vh, 66vw); }
.g-card--small { width: min(34vh, 60vw); align-self: flex-start; margin-top: 14vh; } .g-card--small .g-card__img { height: min(34vh, 60vw); }
.g-cta {
  flex: none; width: min(46vh, 76vw); aspect-ratio: 1; border-radius: 50%; background: var(--navy); color: var(--cream);
  display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; box-shadow: var(--shadow);
  transition: background .5s var(--ease);
}
.g-cta:hover { background: var(--gold); color: var(--navy); }
.g-cta__paw svg { width: 44px; height: 44px; color: var(--gold-2); transition: color .4s; }
.g-cta:hover .g-cta__paw svg { color: var(--navy); }
.g-cta__text { font-size: clamp(2.2rem, 4.6vh, 3.4rem); font-weight: 700; line-height: .95; letter-spacing: -.04em; }
.g-cta__sub { font-size: .9rem; opacity: .75; }

/* ---------- playground ---------- */
.play { background: var(--cream-2); overflow: hidden; }
.play::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(19,35,58,.09) 1.2px, transparent 1.2px); background-size: 26px 26px; mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); pointer-events: none; }
.play__grid { position: relative; display: grid; grid-template-columns: 1.25fr .9fr; gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.stage {
  position: relative; border-radius: 36px; overflow: hidden; min-height: 460px;
  background: radial-gradient(120% 90% at 50% 0%, #fffaf0 0%, #f2e7d1 55%, #e6d6b6 100%);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(19,35,58,.06);
  display: flex; align-items: flex-end; justify-content: center; padding: 70px 4% 56px;
}
.stage__spot { position: absolute; left: 50%; top: -20%; width: 70%; height: 120%; translate: -50% 0; background: radial-gradient(closest-side, rgba(255,255,255,.75), transparent); pointer-events: none; }
.stage__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, rgba(19,35,58,0), rgba(19,35,58,.06)); border-top: 1.5px dashed rgba(19,35,58,.12); pointer-events: none; }
.stage__cmd { position: absolute; left: 22px; top: 22px; z-index: 3; }
.stage__cmd span { display: inline-block; font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.4rem); padding: .15em .6em .2em; border-radius: 16px 16px 16px 4px; background: var(--navy); color: var(--cream); opacity: 0; transform: translateY(10px) scale(.9); transform-origin: left bottom; transition: opacity .3s, transform .4s var(--ease); }
.stage__cmd.is-on span { opacity: 1; transform: none; }
.stage__bubble { position: absolute; right: 9%; top: 18%; z-index: 3; font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.2rem); letter-spacing: -.03em; color: var(--navy); background: var(--white); padding: .3em .7em; border-radius: 22px 22px 22px 6px; box-shadow: var(--shadow); opacity: 0; transform: scale(.3) rotate(-12deg); transform-origin: left bottom; transition: opacity .25s, transform .5s cubic-bezier(.34,1.8,.64,1); }
.stage__bubble.is-on { opacity: 1; transform: none; }
.stage__fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.fx-heart { position: absolute; width: 26px; height: 26px; color: #e0566e; animation: floatUp 1.4s var(--ease) forwards; }
.fx-bone { position: absolute; width: 34px; height: 34px; color: var(--gold-deep); animation: boneDrop .7s cubic-bezier(.5,0,.75,0) forwards; }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(0) scale(.4) } 15% { opacity: 1; transform: translateY(-10px) scale(1) } 100% { opacity: 0; transform: translateY(-120px) scale(.8) rotate(var(--r, 10deg)) } }
@keyframes boneDrop { 0% { transform: translateY(-160px) rotate(0) } 100% { transform: translateY(0) rotate(540deg); opacity: 1 } }
.stage__score { position: absolute; left: 22px; right: 22px; bottom: 16px; display: flex; justify-content: space-between; font-size: .9rem; font-weight: 600; z-index: 3; }
.stage__score > span { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,253,248,.75); padding: .45em .9em; border-radius: 999px; backdrop-filter: blur(8px); }
.stage__score .ico { color: var(--gold-deep); }

/* the dog */
.dog { position: relative; z-index: 2; width: min(100%, 620px); height: auto; overflow: visible; }
.dog * { transform-box: view-box; }
.dog__shadow { fill: rgba(19,35,58,.16); transform-origin: 205px 268px; transition: transform .6s var(--ease); }
.dog__all { transform-origin: 210px 200px; }
.dog__torso, .dog__neck, .dog__skull, .dog__snout, .dog__jaw, .dog__leg--fn, .dog__leg--bn { fill: var(--navy); }
.dog__leg--ff, .dog__leg--bf { fill: #0a1626; }
.dog__line { fill: none; stroke: rgba(246,239,226,.85); stroke-width: 3; stroke-linecap: round; }
.dog__tail path { fill: none; stroke: var(--navy); stroke-width: 15; stroke-linecap: round; }
.dog__ear { fill: var(--navy-4); transform-origin: 300px 70px; animation: earSway 3.2s ease-in-out infinite; }
.dog__collar { fill: none; stroke: var(--gold); stroke-width: 9; stroke-linecap: round; }
.dog__tag { fill: var(--gold-2); stroke: var(--gold-deep); stroke-width: 1.5; }
.dog__nose { fill: #070f1b; }
.dog__mouth { fill: #3a0d1a; opacity: 0; transition: opacity .2s; }
.dog__tongue { fill: #e7798b; opacity: 0; transition: opacity .2s; }
.dog__eye { transform-origin: 331px 86px; animation: blink 4.6s infinite; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1) } 95% { transform: scaleY(.1) } }
@keyframes earSway { 0%,100% { transform: rotate(0) } 50% { transform: rotate(4deg) } }

.dog__rear, .dog__fwrap, .dog__headwrap, .dog__leg, .dog__jaw, .dog__body { transition: transform .6s cubic-bezier(.34, 1.4, .64, 1); }
.dog__rear { transform-origin: 262px 190px; }
.dog__body { transform-origin: 200px 215px; animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(1.025) } }
.dog__leg--bn { transform-origin: 140px 196px; }
.dog__leg--bf { transform-origin: 160px 196px; }
.dog__leg--fn { transform-origin: 258px 192px; }
.dog__leg--ff { transform-origin: 280px 192px; }
.dog__headwrap { transform-origin: 300px 160px; }
.dog__head { transform-origin: 300px 150px; transition: transform .25s ease-out; transform: rotate(var(--look, 0deg)); }
.dog__tailwrap { transform-origin: 124px 160px; }
.dog__tail { transform-origin: 124px 160px; animation: wag .45s ease-in-out infinite alternate; }
@keyframes wag { from { transform: rotate(-10deg) } to { transform: rotate(16deg) } }
.dog__jaw { transform-origin: 328px 112px; }

/* poses */
.is-sit .dog__rear, .is-paw .dog__rear { transform: rotate(-21deg); }
.is-sit .dog__leg--bn, .is-paw .dog__leg--bn { transform: translate(14px, -8px) scaleY(.42); }
.is-sit .dog__leg--bf, .is-paw .dog__leg--bf { transform: translate(14px, -8px) scaleY(.42); }
.is-sit .dog__headwrap, .is-paw .dog__headwrap { transform: translate(-4px, -10px) rotate(-4deg); }
.is-sit .dog__shadow, .is-paw .dog__shadow { transform: scaleX(.8); }

.is-paw .dog__leg--fn { transform: rotate(-78deg); animation: pawWave .7s ease-in-out .5s 3 alternate; }
@keyframes pawWave { from { transform: rotate(-78deg) } to { transform: rotate(-58deg) } }

.is-down .dog__rear { transform: translateY(50px); }
.is-down .dog__leg--bn, .is-down .dog__leg--bf { transform: scaleY(.16); }
.is-down .dog__fwrap { transform: translateY(50px); }
.is-down .dog__leg--fn, .is-down .dog__leg--ff { transform: rotate(-90deg); }
.is-down .dog__headwrap { transform: translateY(50px); }
.is-down .dog__tail { animation-duration: .9s; }

.is-speak .dog__headwrap { transform: rotate(-9deg); }
.is-speak .dog__jaw { transform: rotate(24deg); }
.is-speak .dog__mouth, .is-speak .dog__tongue { opacity: 1; }

.is-spin .dog__all { animation: spinDog 1.05s var(--ease-in-out); }
@keyframes spinDog {
  0% { transform: scaleX(1) translateY(0) }
  25% { transform: scaleX(0) translateY(-34px) }
  50% { transform: scaleX(-1) translateY(-10px) }
  75% { transform: scaleX(0) translateY(-34px) }
  100% { transform: scaleX(1) translateY(0) }
}
.is-happy .dog__tail { animation-duration: .13s; }
.is-happy .dog__all { animation: hop .5s cubic-bezier(.34,1.6,.64,1); }
@keyframes hop { 0%,100% { transform: translateY(0) } 40% { transform: translateY(-18px) } }

.controls { display: flex; flex-direction: column; gap: 16px; }
.controls__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cmd {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; aspect-ratio: 1 / .9;
  border-radius: 22px; background: var(--white); font-weight: 700; font-size: 1.02rem;
  box-shadow: 0 2px 0 rgba(19,35,58,.12), 0 14px 28px -18px rgba(19,35,58,.5);
  transition: transform .35s var(--ease), background .3s, color .3s, box-shadow .3s;
}
.cmd:hover { transform: translateY(-4px); box-shadow: 0 2px 0 rgba(19,35,58,.12), 0 22px 34px -18px rgba(19,35,58,.55); }
.cmd:active { transform: translateY(1px) scale(.97); }
.cmd.is-done { background: var(--navy); color: var(--cream); }
.cmd.is-done::after { content: "✓"; position: absolute; top: 8px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: var(--navy); font-size: .7rem; display: grid; place-items: center; }
.cmd--treat { background: var(--gold); color: var(--navy); }
.cmd--treat.is-done { background: var(--gold); color: var(--navy); }
.cmd--treat.is-done::after { display: none; }
.cmd__emoji { font-size: 1.7rem; line-height: 1; }
.cmd kbd { position: absolute; top: 8px; left: 10px; font-family: var(--font); font-size: .66rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; border: 1px solid currentColor; opacity: .4; }
@media (hover: none) { .cmd kbd { display: none; } }
.tip { padding: 22px 24px; border-radius: 24px; background: var(--navy); color: var(--cream); min-height: 140px; }
.tip__label { display: flex; align-items: center; gap: 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--gold-2); margin-bottom: 10px; }
.tip__text { font-size: 1.1rem; line-height: 1.45; }
.controls__done { padding: 22px 24px; border-radius: 24px; background: var(--white); border: 2px solid var(--gold); display: grid; gap: 16px; justify-items: start; }

/* ---------- plan / quiz ---------- */
.plan { background: var(--navy-2); color: var(--cream); overflow: hidden; }
.plan .h2 em { color: var(--gold-2); }
.plan .section-lead { color: rgba(246,239,226,.72); }
.plan__orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: .5; }
.plan__orb--a { width: 46vw; height: 46vw; left: -14vw; top: -10vw; background: radial-gradient(closest-side, rgba(192,154,85,.55), transparent); animation: drift 14s ease-in-out infinite alternate; }
.plan__orb--b { width: 40vw; height: 40vw; right: -12vw; bottom: -14vw; background: radial-gradient(closest-side, rgba(42,70,112,.9), transparent); animation: drift 18s ease-in-out -4s infinite alternate-reverse; }
@keyframes drift { to { transform: translate(8vw, 6vw) scale(1.15); } }
.plan__grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.plan__perks { display: grid; gap: 12px; margin-top: 32px; }
.plan__perks li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.plan__perks .ico { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(192,154,85,.2); color: var(--gold-2); }

.quiz {
  position: relative; border-radius: 32px; padding: clamp(22px, 3vw, 38px);
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(246,239,226,.14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}
.quiz__top { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; font-size: .9rem; font-weight: 600; }
.quiz__step { white-space: nowrap; color: var(--gold-2); }
.quiz__bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(246,239,226,.12); overflow: hidden; }
.quiz__bar span { display: block; height: 100%; width: 33.33%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: inherit; transition: width .7s var(--ease); }
.quiz__viewport { overflow: hidden; margin-inline: -6px; padding-inline: 6px; }
.quiz__slides { display: flex; transition: transform .8s var(--ease), height .5s var(--ease); align-items: flex-start; }
.quiz__slide { flex: 0 0 100%; min-width: 0; border: 0; margin: 0; padding: 4px 6px; transition: opacity .5s; }
.quiz__slide:not(.is-current) { opacity: .0; pointer-events: none; }
.quiz__slide legend { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 22px; padding: 0; }
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.opt {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  padding: 16px 18px; border-radius: 18px; background: rgba(246,239,226,.06); border: 1.5px solid rgba(246,239,226,.12);
  font-weight: 600; font-size: 1rem; line-height: 1.25; transition: background .3s, border-color .3s, transform .35s var(--ease), color .3s;
}
.opt__e { grid-row: span 2; font-size: 1.6rem; width: 46px; height: 46px; border-radius: 14px; background: rgba(246,239,226,.08); display: grid; place-items: center; transition: transform .5s cubic-bezier(.34,1.8,.64,1); }
.opt small { grid-column: 2; font-weight: 400; font-size: .82rem; opacity: .65; }
.opt:hover { border-color: var(--gold); background: rgba(192,154,85,.12); transform: translateY(-3px); }
.opt:hover .opt__e { transform: rotate(-10deg) scale(1.15); }
.opt.is-picked { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.opt.is-picked .opt__e { background: rgba(19,35,58,.12); }
.opt--wide { grid-column: span 2; }
.quiz__result-kicker { display: flex; align-items: center; gap: 8px; color: var(--gold-2); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 700; }
.quiz__result-title { font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 700; margin: 12px 0; }
.quiz__result-title em { color: var(--gold-2); }
.quiz__result-text { color: rgba(246,239,226,.8); font-size: 1.05rem; }
.quiz__result-area { margin-top: 10px; font-size: .95rem; color: var(--gold-2); font-weight: 600; }
.quiz__msg-label { display: block; margin-top: 20px; margin-bottom: 8px; font-size: .85rem; opacity: .7; }
.quiz__msg { width: 100%; resize: vertical; font: inherit; font-size: .95rem; line-height: 1.5; color: var(--cream); background: rgba(0,0,0,.25); border: 1.5px solid rgba(246,239,226,.14); border-radius: 16px; padding: 14px 16px; }
.quiz__msg:focus { outline: none; border-color: var(--gold); }
.quiz__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.quiz__nav { display: flex; justify-content: space-between; margin-top: 22px; }
.quiz__back, .quiz__restart { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; opacity: .75; transition: opacity .3s; }
.quiz__back:hover, .quiz__restart:hover { opacity: 1; }
.quiz__back:disabled { opacity: 0; pointer-events: none; }

/* ---------- areas / map ---------- */
.areas { background: var(--cream); }
.areas__grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.map { position: relative; }
.map__svg { width: 100%; height: auto; overflow: visible; }
.map__island { fill: url(#islandGrad); stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; }
.map__island-shadow { fill: rgba(19,35,58,.1); }
.map__island-dots { fill: url(#dots); pointer-events: none; }
.map__route { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; opacity: .55; }
.pin { cursor: pointer; outline: none; }
.pin__dot { fill: var(--navy); stroke: var(--cream); stroke-width: 3; transition: r .4s var(--ease), fill .3s; }
.pin__core { fill: var(--gold-2); transition: fill .3s; }
.pin__pulse { fill: none; stroke: var(--navy); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pinPulse 2.4s var(--ease) infinite; opacity: 0; }
@keyframes pinPulse { 0% { transform: scale(1); opacity: .8 } 100% { transform: scale(3.6); opacity: 0 } }
.pin__label { font-family: var(--font); font-size: 19px; font-weight: 700; fill: var(--navy); paint-order: stroke; stroke: var(--cream); stroke-width: 5px; stroke-linejoin: round; letter-spacing: -.02em; transition: font-size .3s; }
.pin__dot { transform-box: fill-box; transform-origin: center; }
.pin.is-active .pin__dot { fill: var(--gold); transform: scale(1.45); }
.pin.is-active .pin__core { fill: var(--navy); }
.pin.is-active .pin__pulse { stroke: var(--gold-deep); }
.pin.is-active .pin__label { font-size: 23px; }
.pin:focus-visible .pin__dot { stroke: var(--gold-deep); }

.cities { display: grid; gap: 0; }
.city { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 18px 8px; border-bottom: 1.5px solid rgba(19,35,58,.12); text-align: left; transition: padding .5s var(--ease), background .4s, color .4s; border-radius: 0; }
.city:first-child { border-top: 1.5px solid rgba(19,35,58,.12); }
.city__num { font-family: var(--serif); font-style: italic; color: var(--gold-deep); font-size: 1.1rem; }
.city__name { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; }
.city__name small { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .6em; color: var(--muted); letter-spacing: 0; }
.city__arrow { opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .4s var(--ease); }
.city:hover, .city.is-active { padding-inline: 20px; background: var(--navy); color: var(--cream); border-radius: 16px; }
.city:hover .city__name small, .city.is-active .city__name small { color: var(--gold-2); }
.city:hover .city__arrow, .city.is-active .city__arrow { opacity: 1; transform: none; }
.city-card { margin-top: 22px; padding: 24px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow); }
.city-card__label { display: flex; align-items: center; gap: 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--gold-deep); }
.city-card__name { font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; margin: 6px 0 8px; }
.city-card__text { color: var(--muted); }
.city-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---------- faq ---------- */
.faq { background: var(--cream-2); }
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--header-h) + 40px); }
.faq__head .btn { margin-top: 28px; }
.qa { border-bottom: 1.5px solid rgba(19,35,58,.14); }
.qa:first-child { border-top: 1.5px solid rgba(19,35,58,.14); }
.qa__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; text-align: left; font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; transition: color .3s; }
.qa__q:hover { color: var(--gold-deep); }
.qa__icon { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(19,35,58,.2); flex: none; transition: background .4s, border-color .4s, transform .5s var(--ease); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: currentColor; border-radius: 2px; transition: transform .5s var(--ease); }
.qa__icon::after { transform: rotate(90deg); }
.qa.is-open .qa__icon { background: var(--navy); border-color: var(--navy); color: var(--cream); transform: rotate(180deg); }
.qa.is-open .qa__icon::after { transform: rotate(0); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.qa__a > div { overflow: hidden; }
.qa__a p { padding: 0 60px 28px 0; color: var(--muted); font-size: 1.08rem; line-height: 1.6; }
.qa.is-open .qa__a { grid-template-rows: 1fr; }

/* ---------- contact ---------- */
.contact { position: relative; background: var(--navy); color: var(--cream); padding-block: clamp(110px, 14vw, 200px); overflow: hidden; }
.contact__bg { position: absolute; inset: -10% 0; opacity: .14; }
.contact__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2); }
.contact__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 50%, transparent, var(--navy) 85%); }
.contact__inner { position: relative; text-align: center; display: grid; justify-items: center; }
.contact__inner .kicker { justify-content: center; }
.contact__title { font-size: clamp(4.2rem, 15vw, 15rem); line-height: .86; letter-spacing: -.065em; font-weight: 800; }
.contact__title em { color: var(--gold-2); font-size: 1.04em; letter-spacing: -.03em; }
.contact__phone { display: inline-flex; align-items: center; gap: clamp(12px, 2vw, 24px); margin-top: clamp(28px, 4vw, 52px); padding: 14px clamp(20px, 3vw, 36px) 14px 14px; border-radius: 999px; background: var(--gold); color: var(--navy); box-shadow: 0 30px 60px -20px rgba(192,154,85,.55); transition: background .4s; }
.contact__phone:hover { background: var(--gold-2); }
.contact__phone-icon { width: clamp(52px, 6vw, 76px); height: clamp(52px, 6vw, 76px); border-radius: 50%; background: var(--navy); color: var(--gold-2); display: grid; place-items: center; animation: ring 2.4s ease-in-out infinite; }
.contact__phone-icon svg { width: 44%; height: 44%; }
@keyframes ring { 0%, 60%, 100% { rotate: 0 } 64% { rotate: -14deg } 68% { rotate: 12deg } 72% { rotate: -10deg } 76% { rotate: 8deg } 80% { rotate: 0 } }
.contact__phone-num { font-size: clamp(1.6rem, 4.6vw, 4rem); font-weight: 800; letter-spacing: -.04em; }
.contact__cards { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 14px; width: 100%; margin-top: clamp(56px, 7vw, 100px); text-align: left; }
.c-card { padding: 26px; border-radius: 24px; background: rgba(246,239,226,.06); border: 1px solid rgba(246,239,226,.12); }
.c-card__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-2); font-weight: 700; margin-bottom: 10px; }
.c-card__value { font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.c-card--actions { display: grid; gap: 10px; align-content: center; }

/* ---------- footer (curtain reveal) ---------- */
.footer-wrap { position: relative; }
.footer { background: var(--navy-2); color: var(--cream); padding-top: clamp(60px, 7vw, 100px); overflow: hidden; }
.js-reveal .footer-wrap { height: var(--footer-h, auto); clip-path: inset(0); }
.js-reveal .footer { position: fixed; left: 0; right: 0; bottom: 0; }
.footer__top { display: grid; grid-template-columns: 1.2fr 1fr .9fr; gap: 40px; align-items: start; }
.footer__logo { width: min(300px, 70vw); }
.footer__nav { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 32px; justify-content: start; font-weight: 500; }
.footer__nav a { opacity: .75; transition: opacity .3s, color .3s; }
.footer__nav a:hover { opacity: 1; color: var(--gold-2); }
.footer__contact a { font-size: 1.6rem; font-weight: 700; color: var(--gold-2); letter-spacing: -.02em; }
.footer__contact p { opacity: .65; margin-top: 6px; }
.footer__giant { display: flex; align-items: center; justify-content: center; gap: 2vw; white-space: nowrap; font-size: 9.6vw; font-weight: 800; letter-spacing: -.06em; line-height: 1; padding: clamp(36px, 5vw, 70px) 0 clamp(18px, 2vw, 30px); color: var(--cream); }
.footer__giant span:last-child { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.03em; color: var(--gold-2); }
.footer__giant-paw svg { width: 7vw; height: 7vw; color: var(--gold); display: block; animation: spin 12s linear infinite; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 22px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(246,239,226,.1); font-size: .86rem; opacity: .75; flex-wrap: wrap; }
.to-top { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(246,239,226,.3); display: grid; place-items: center; transition: background .3s, color .3s; }
.to-top:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }

/* ---------- floating contact ---------- */
.action-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 900; display: none; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 999px; background: rgba(12,24,40,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px -10px rgba(0,0,0,.5); transform: translateY(140%); transition: transform .6s var(--ease); }
.action-bar.is-visible { transform: none; }
.action-bar__btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 999px; font-weight: 700; }
.action-bar__btn--call { background: var(--gold); color: var(--navy); }
.action-bar__btn--wa { background: var(--wa); color: #08341a; }

.wa-float { position: fixed; right: 26px; bottom: 26px; z-index: 900; width: 62px; height: 62px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 16px 34px -10px rgba(37,211,102,.6); transform: scale(0); transition: transform .6s cubic-bezier(.34,1.6,.64,1); }
.wa-float.is-visible { transform: scale(1); }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; }
.wa-float__ping { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa); animation: ping 2.2s var(--ease) infinite; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 9995; background: rgba(8,16,28,.94); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.lightbox__fig { margin: 0; display: grid; justify-items: center; gap: 16px; max-width: 92vw; transform: scale(.94); transition: transform .6s var(--ease); }
.lightbox.is-open .lightbox__fig { transform: none; }
.lightbox__fig img { max-height: 80vh; max-width: 92vw; width: auto; border-radius: 18px; }
.lightbox__fig figcaption { color: var(--cream); font-weight: 600; text-align: center; }
.lightbox__close, .lightbox__nav { position: absolute; width: 54px; height: 54px; border-radius: 50%; background: rgba(246,239,226,.1); color: var(--cream); display: grid; place-items: center; transition: background .3s, color .3s; }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--gold); color: var(--navy); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__nav--prev { left: 20px; top: 50%; translate: 0 -50%; }
.lightbox__nav--next { right: 20px; top: 50%; translate: 0 -50%; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .header__nav { display: none; }
  .burger { display: block; }
  .float-card--a { left: -6%; }
  .badge-spin { left: -6%; }
}

@media (max-width: 900px) {
  :root { --header-h: 68px; }
  .header__cta { display: none; }
  .hero { align-items: flex-start; padding-bottom: 110px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { width: min(100%, 420px); margin-top: 18px; }
  .hero__title { font-size: clamp(3.2rem, 15vw, 6.4rem); }
  .badge-spin { left: -4%; top: -4%; }
  .float-card--a { left: -2%; bottom: 8%; }
  .float-card--b { right: -2%; top: 36%; }
  .about__grid, .plan__grid, .areas__grid, .faq__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 520px; }
  .polaroid { right: -2%; }
  .about__sticker { left: -8px; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .stack__card { grid-template-columns: 1fr; min-height: 0; top: calc(var(--header-h) + 12px + var(--i, 0) * 16px); }
  .stack__img { min-height: 0; aspect-ratio: 4/3; }
  .play__grid { grid-template-columns: 1fr; }
  .stage { min-height: 0; aspect-ratio: 1 / .9; padding-bottom: 50px; }
  .faq__head { position: static; }
  .contact__cards { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .action-bar { display: grid; }
  .wa-float { display: none; }
  .zoom__words { flex-direction: column; justify-content: space-between; padding-block: 12vh; }
  .zoom__w { font-size: clamp(3.5rem, 20vw, 7rem); }
  .footer__bottom { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}

@media (max-width: 560px) {
  .header__logo { width: 150px; }
  .lang__btn { padding: .4em .65em; }
  .hero__ctas .btn { width: 100%; }
  .hero__lead { max-width: none; }
  .hero__quiz-link { font-size: .88rem; }
  .float-card { padding: 9px 12px 9px 9px; max-width: 200px; gap: 9px; }
  .float-card__icon { width: 36px; height: 36px; border-radius: 11px; }
  .float-card strong { font-size: .82rem; }
  .float-card small { font-size: .75rem; }
  .badge-spin { width: 96px; }
  .badge-spin text { font-size: 17px; }
  .opts { grid-template-columns: 1fr; }
  .opt--wide { grid-column: auto; }
  .opt { padding: 12px 14px; }
  .opt__e { width: 40px; height: 40px; font-size: 1.35rem; }
  .controls__grid { gap: 8px; }
  .cmd { border-radius: 18px; font-size: .92rem; }
  .cmd__emoji { font-size: 1.4rem; }
  .qa__a p { padding-right: 0; }
  .stack__card { border-radius: 26px; padding: 18px; }
  .stack__img { border-radius: 18px; }
  .city-card__name { font-size: 1.8rem; }
  .contact__phone { padding: 10px 22px 10px 10px; }
}

/* mobile gallery: pinned horizontal scroll, same as desktop */
@media (max-width: 900px) {
  .gallery__ghost { font-size: 44vw; }
  .gallery__track { gap: 20px; padding-right: 16vw; }
  .gallery__intro { width: 80vw; }
  .gallery__intro .h2 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .gallery__hint { width: 52px; height: 52px; margin-top: 22px; }
  .g-card--tall { width: min(68vw, 40svh); } .g-card--tall .g-card__img { height: min(92vw, 56svh); }
  .g-card--square, .g-card--small { width: min(74vw, 46svh); } .g-card--square .g-card__img, .g-card--small .g-card__img { height: min(74vw, 46svh); }
  .g-card--wide { width: min(84vw, 62svh); } .g-card--wide .g-card__img { height: min(64vw, 44svh); }
  .g-card--low { margin-bottom: 6svh; } .g-card--small { margin-top: 8svh; }
  .g-cta { width: min(66vw, 40svh); }
  .g-card figcaption { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* keep gentle transitions; only stop endless decorative loops */
  .badge-spin svg, .seal__ring, .footer__giant-paw svg, .hero__quiz-icon svg, .about__sticker, .float-card, .scroll-cue__track span, .live-dot::after, .wa-float__ping, .plan__orb, .story__img--text svg, .contact__phone-icon, .seal-card::after { animation: none !important; }
  .breeds__track, .ig-row__track { animation-duration: 160s !important; }
}

/* iPhone / touch polish */
@media (max-width: 900px) {
  .quiz__msg { font-size: 16px; }
  .header { padding-top: env(safe-area-inset-top); height: calc(var(--header-h) + env(safe-area-inset-top)); }
  .hero { min-height: 100svh; }
}
html[lang="el"] .hero__title { font-size: clamp(2.7rem, 7.6vw, 7.8rem); }
html[lang="el"] .h2 { font-size: clamp(2.2rem, 5.2vw, 5rem); }
html[lang="el"] .contact__title { font-size: clamp(3rem, 11vw, 11rem); }
html[lang="el"] .zoom__w { font-size: clamp(2.8rem, 10vw, 11rem); }
html[lang="el"] .stack__card h3 { font-size: clamp(1.7rem, 3.3vw, 3.2rem); }
@media (max-width: 560px) { html[lang="el"] .hero__title { font-size: 11.4vw; } }
.controls__done[hidden], [hidden] { display: none !important; }
/* keep grid children from expanding past the viewport */
.hero__grid > *, .about__grid > *, .plan__grid > *, .areas__grid > *, .faq__grid > *, .play__grid > *, .stack__card > *, .contact__cards > *, .footer__top > * { min-width: 0; }
.quiz { min-width: 0; max-width: 100%; }
@media (max-width: 560px) {
  .header { gap: 10px; }
  .header__logo { width: 138px; }
  .header__actions { gap: 8px; }
  .burger { width: 42px; height: 42px; }
  .burger span { left: 12px; right: 12px; }
  .burger span:first-child { top: 16px; } .burger span:last-child { top: 24px; }
  .menu-open .burger span:first-child, .menu-open .burger span:last-child { top: 20px; }
}

/* =========================================================
   v2 — Instagram content upgrade
   ========================================================= */
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 10001; padding: 10px 16px; border-radius: 12px; background: var(--gold); color: var(--navy); font-weight: 700; transition: top .3s var(--ease); }
.skip-link:focus { top: 12px; }
@media (max-width: 1360px) { .header__nav { display: none; } .burger { display: block; } }
.header__ig { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(19,35,58,.07); transition: background .3s, color .3s, transform .4s var(--ease); }
.header__ig:hover { background: var(--navy); color: var(--cream); transform: rotate(-8deg) scale(1.06); }
.header[data-theme="dark"] .header__ig { background: rgba(246,239,226,.1); }
.menu__ig { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; opacity: .85; }
@media (max-width: 400px) { .header__ig { display: none; } }

/* hero trust row */
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: .9rem; font-weight: 600; color: #2a3a52; }
.hero__trust li { display: inline-flex; align-items: center; gap: 7px; }
.hero__trust .ico { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--navy); color: var(--gold-2); }
.float-card--b { max-width: 250px; }

/* government seal */
.seal-card { display: flex; align-items: center; gap: 20px; margin-top: 30px; padding: 18px 22px 18px 18px; border-radius: 24px; background: var(--navy); color: var(--cream); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.seal-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(220,189,124,.18) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 5s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 0%, 55% { transform: translateX(-100%) } 85%, 100% { transform: translateX(100%) } }
.seal { position: relative; flex: none; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-2), var(--gold-deep)); display: grid; place-items: center; box-shadow: inset 0 0 0 3px rgba(255,255,255,.25), 0 10px 24px -8px rgba(0,0,0,.5); }
.seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 20s linear infinite; }
.seal__ring text { font-size: 15px; font-weight: 800; letter-spacing: 1.6px; fill: var(--navy); font-family: var(--font); }
.seal__island { width: 46%; color: var(--navy); }
.seal-card__title { font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.seal-card__text { font-size: .86rem; color: var(--gold-2); margin-top: 6px; }

/* slogan statement */
.statement { text-align: center; margin-top: clamp(80px, 10vw, 140px); }
.statement__text { font-size: clamp(2.2rem, 6vw, 5.6rem); font-weight: 800; letter-spacing: -.05em; line-height: .98; max-width: 16ch; margin-inline: auto; }
.statement__text em { color: var(--gold-deep); font-size: 1.05em; }
.statement__sub { margin-top: 22px; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.2rem); }

/* ---------- programmes bento ---------- */
.programmes { background: var(--cream); }
.programmes .h2 { max-width: 18ch; }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(300px, 34vh); gap: 16px; grid-template-areas: "a a b" "c d b" "c e f"; }
.prog--a { grid-area: a; } .prog--b { grid-area: b; } .prog--c { grid-area: c; } .prog--d { grid-area: d; } .prog--e { grid-area: e; } .prog--f { grid-area: f; }
.prog { position: relative; border-radius: 28px; overflow: hidden; color: var(--cream); isolation: isolate; background: var(--navy); box-shadow: var(--shadow); }
.prog__img { position: absolute; inset: 0; z-index: -2; }
.prog__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--ease), filter .6s; }
.prog::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,24,40,0) 25%, rgba(12,24,40,.55) 55%, rgba(12,24,40,.94) 100%); transition: background .6s; }
.prog:hover .prog__img img { transform: scale(1.14); filter: saturate(1.15); }
.prog:hover::before { background: linear-gradient(180deg, rgba(12,24,40,.15) 0%, rgba(12,24,40,.7) 45%, rgba(12,24,40,.96) 100%); }
.prog__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 2.2vw, 30px); }
.prog__emoji { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(246,239,226,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 1.4rem; margin-bottom: 12px; }
.prog h3 { font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; }
.prog p { margin-top: 8px; font-size: .98rem; line-height: 1.45; color: rgba(246,239,226,.85); max-width: 46ch; }
.prog__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.prog__tags li { font-size: .74rem; font-weight: 700; padding: .4em .8em; border-radius: 999px; background: rgba(220,189,124,.2); color: var(--gold-2); }
.prog__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700; font-size: .92rem; color: var(--navy); background: var(--gold); padding: .65em 1.1em; border-radius: 999px; transition: background .3s; }
.prog__cta:hover { background: var(--cream); }
@media (hover: hover) and (min-width: 901px) {
  .prog p, .prog__tags, .prog__cta { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .6s var(--ease), opacity .4s, margin .5s var(--ease); }
  .prog:hover p, .prog:focus-within p { max-height: 140px; opacity: 1; margin-top: 8px; }
  .prog:hover .prog__tags, .prog:focus-within .prog__tags { max-height: 80px; opacity: 1; margin-top: 12px; }
  .prog:hover .prog__cta, .prog:focus-within .prog__cta { max-height: 60px; opacity: 1; margin-top: 14px; overflow: visible; }
}
.prog-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }
.prog-badges li { display: inline-flex; align-items: center; gap: 8px; padding: .7em 1.2em; border-radius: 999px; background: var(--white); box-shadow: 0 10px 24px -16px rgba(19,35,58,.5); font-weight: 600; font-size: .92rem; }
.prog-badges .ico { color: var(--gold-deep); }

/* ---------- problems ---------- */
.problems { background: var(--navy-2); color: var(--cream); overflow: hidden; }
.problems .h2 em { color: var(--gold-2); }
.problems .section-lead { color: rgba(246,239,226,.72); }
.problems__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.problems__grid > * { min-width: 0; }
.problem-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.pchip { display: inline-flex; align-items: center; gap: 8px; padding: .7em 1.1em; border-radius: 999px; border: 1.5px solid rgba(246,239,226,.18); background: rgba(246,239,226,.04); font-weight: 600; font-size: .95rem; transition: background .35s, color .35s, border-color .35s, transform .4s var(--ease); }
.pchip:hover { border-color: var(--gold); transform: translateY(-3px); }
.pchip.is-active { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.problem-panel { position: relative; border-radius: 32px; overflow: hidden; background: var(--navy-3); border: 1px solid rgba(220,189,124,.2); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.problem-panel__img { margin: 0; height: clamp(220px, 30vh, 320px); overflow: hidden; position: relative; }
.problem-panel__img img { width: 100%; height: 100%; object-fit: cover; }
.problem-panel__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, var(--navy-3)); }
.problem-panel__body { padding: 4px clamp(22px, 3vw, 36px) clamp(24px, 3vw, 36px); }
.problem-panel__kicker { display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; font-weight: 700; color: var(--gold-2); }
.problem-panel h3 { font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: -.04em; line-height: 1.02; margin: 10px 0 12px; }
.problem-panel p { color: rgba(246,239,226,.82); }
.problem-panel__case { margin: 18px 0 22px; padding: 14px 18px; border-left: 3px solid var(--gold); background: rgba(220,189,124,.08); border-radius: 0 14px 14px 0; font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.4; }
.problem-panel__case-label { display: block; font-family: var(--font); font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 4px; }

/* ---------- timeline ---------- */
.results { background: var(--navy); color: var(--cream); overflow: hidden; }
.results .h2 em { color: var(--gold-2); }
.results .section-lead { color: rgba(246,239,226,.72); }
.medals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: clamp(60px, 8vw, 110px); }
.medal { position: relative; padding: 26px 20px; border-radius: 26px; text-align: center; background: linear-gradient(160deg, rgba(220,189,124,.16), rgba(220,189,124,.04)); border: 1px solid rgba(220,189,124,.25); overflow: hidden; }
.medal::before { content: ""; position: absolute; width: 140%; aspect-ratio: 1; left: -20%; top: -110%; border-radius: 50%; background: radial-gradient(closest-side, rgba(220,189,124,.25), transparent); }
.medal__num { display: block; font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 800; letter-spacing: -.05em; color: var(--gold-2); line-height: 1; }
.medal__label { display: block; margin-top: 8px; font-weight: 700; letter-spacing: .04em; }
.medals__caption { grid-column: 1 / -1; text-align: center; font-family: var(--serif); font-style: italic; color: rgba(246,239,226,.6); font-size: 1.05rem; }
.tl { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
.tl__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; translate: -50% 0; background: rgba(246,239,226,.12); }
.tl__fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--gold-2), var(--gold)); transform-origin: top; transform: scaleY(0); }
.tl__item { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.tl__dot { position: absolute; left: 50%; top: 28px; width: 18px; height: 18px; translate: -50% 0; border-radius: 50%; background: var(--navy); border: 3px solid var(--gold); z-index: 1; box-shadow: 0 0 0 6px rgba(192,154,85,.15); }
.tl__card { grid-column: 1; margin-right: 46px; border-radius: 26px; overflow: hidden; background: var(--navy-3); border: 1px solid rgba(246,239,226,.08); display: grid; grid-template-columns: auto 1fr; }
.tl__item:nth-child(odd) .tl__card { grid-column: 2; margin: 0 0 0 46px; }
.tl__img { margin: 0; width: 150px; height: 100%; min-height: 150px; overflow: hidden; }
.tl__img img { width: 100%; height: 100%; object-fit: cover; }
.tl__body { padding: 22px 24px; }
.tl__item:not(.tl__item--img) .tl__card { grid-template-columns: 1fr; }
.tl__date { display: flex; align-items: baseline; gap: 8px; color: var(--gold-2); font-weight: 600; font-size: .9rem; }
.tl__year { font-family: var(--serif); font-style: italic; font-size: 1.7rem; font-weight: 400; line-height: 1; }
.tl h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); letter-spacing: -.025em; line-height: 1.15; margin: 8px 0; }
.tl p:last-child { color: rgba(246,239,226,.75); font-size: .97rem; }

/* ---------- stories ---------- */
.stories { background: var(--cream-2); overflow: visible; overflow-x: clip; }
.stories__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; max-width: none; }
.stories__nav { display: flex; gap: 10px; flex: none; }
.round-btn { width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid rgba(19,35,58,.22); display: grid; place-items: center; transition: background .3s, color .3s, transform .4s var(--ease); }
.round-btn:hover { background: var(--navy); color: var(--cream); transform: scale(1.06); }
.stories__track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px max(var(--gutter), calc((100vw - 1360px) / 2 + var(--gutter))) 30px; scrollbar-width: none; cursor: grab; outline: none; }
.stories__track::-webkit-scrollbar { display: none; }
.stories__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.stories__track.is-dragging .story { pointer-events: none; }
.story { flex: none; width: clamp(260px, 26vw, 340px); scroll-snap-align: start; border-radius: 26px; overflow: hidden; background: var(--white); box-shadow: 0 24px 50px -30px rgba(19,35,58,.45); transition: translate .5s var(--ease), rotate .5s var(--ease), box-shadow .5s; }
.story:hover { translate: 0 -8px; rotate: -.6deg; box-shadow: var(--shadow); }
.story__img { height: 300px; overflow: hidden; background: var(--cream-3); }
.story__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); user-select: none; -webkit-user-drag: none; }
.story:hover .story__img img { transform: scale(1.06); }
.story__img--text { display: grid; place-items: center; background: linear-gradient(150deg, var(--gold-2), var(--gold-deep)); }
.story__img--text svg { width: 90px; height: 90px; color: rgba(19,35,58,.85); animation: wobble 5s ease-in-out infinite; }
.story__body { padding: 20px 22px 24px; }
.story__tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); background: rgba(192,154,85,.14); padding: .35em .8em; border-radius: 999px; }
.story h3 { font-size: 1.6rem; letter-spacing: -.035em; margin: 10px 0 6px; }
.story p { color: var(--muted); font-size: .97rem; }
.breeds { margin-top: clamp(40px, 6vw, 80px); }
.breeds__label { text-align: center; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--gold-deep); margin-bottom: 16px; }
.breeds__row { overflow: hidden; border-block: 1.5px solid rgba(19,35,58,.12); padding: 16px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.breeds__track { display: inline-flex; white-space: nowrap; animation: marquee 60s linear infinite; }
.breeds__track span { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.4rem); padding-right: .4em; color: var(--navy); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- checklist ---------- */
.checklist { background: var(--cream); }
.checklist__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.checklist__grid > * { min-width: 0; }
.checklist__head { position: sticky; top: calc(var(--header-h) + 40px); }
.checklist__score { display: flex; align-items: center; gap: 16px; margin-top: 30px; font-weight: 700; }
.checklist__count { font-size: 1.6rem; letter-spacing: -.03em; }
.checklist__bar { flex: 1; max-width: 280px; height: 8px; border-radius: 99px; background: rgba(19,35,58,.1); overflow: hidden; }
.checklist__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); border-radius: inherit; transition: width .7s var(--ease); }
.stamp { margin-top: 30px; display: inline-grid; place-items: center; width: 170px; height: 170px; border-radius: 50%; border: 4px double var(--gold-deep); color: var(--gold-deep); text-align: center; font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.1; padding: 20px; rotate: -12deg; opacity: 0; transform: scale(2.4); transition: opacity .4s, transform .6s cubic-bezier(.34,1.6,.64,1); }
.stamp.is-on { opacity: 1; transform: scale(1); }
.checklist__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.check { width: 100%; display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 16px; text-align: left; padding: 20px 22px; border-radius: 22px; background: var(--white); box-shadow: 0 2px 0 rgba(19,35,58,.08), 0 16px 30px -24px rgba(19,35,58,.5); transition: transform .4s var(--ease), background .4s, box-shadow .4s; }
.check:hover { transform: translateX(6px); }
.check__box { width: 32px; height: 32px; border-radius: 10px; border: 2px solid rgba(19,35,58,.25); display: grid; place-items: center; color: transparent; transition: background .35s, border-color .35s, color .35s, transform .5s cubic-bezier(.34,1.8,.64,1); }
.check__num { font-family: var(--serif); font-style: italic; color: var(--gold-deep); font-size: 1.3rem; line-height: 1.4; }
.check__q { display: block; font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; line-height: 1.35; padding-top: 3px; }
.check__a { display: grid; grid-template-rows: 0fr; opacity: 0; color: var(--muted); transition: grid-template-rows .55s var(--ease), opacity .4s, margin .4s; }
.check__a > * { overflow: hidden; }
.check__a { display: block; max-height: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .4s, margin .4s; }
.check.is-on { background: var(--navy); color: var(--cream); }
.check.is-on .check__box { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: rotate(-8deg) scale(1.1); }
.check.is-on .check__a { max-height: 160px; opacity: 1; margin-top: 8px; color: rgba(246,239,226,.82); }
.check.is-on .check__a b { color: var(--gold-2); }
.check--bonus { border: 2px dashed rgba(192,154,85,.6); }

/* ---------- instagram wall ---------- */
.insta { background: var(--navy); color: var(--cream); padding-block: clamp(90px, 12vw, 160px); overflow: hidden; }
.insta__head { text-align: center; display: grid; justify-items: center; margin-bottom: clamp(40px, 6vw, 70px); }
.insta__head .kicker { justify-content: center; }
.insta__title { font-size: clamp(1.9rem, 5.4vw, 5rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; overflow-wrap: anywhere; }
.insta__title em { color: var(--gold-2); }
.insta .section-lead { color: rgba(246,239,226,.72); margin-inline: auto; margin-bottom: 28px; }
.ig-row { overflow: hidden; padding: 7px 0; }
.ig-row__track { display: inline-flex; gap: 14px; animation: marquee 55s linear infinite; }
.ig-row--rev .ig-row__track { animation-direction: reverse; animation-duration: 62s; }
.ig-row:hover .ig-row__track { animation-play-state: paused; }
.ig-tile { position: relative; flex: none; width: clamp(160px, 17vw, 250px); aspect-ratio: 1; border-radius: 22px; overflow: hidden; display: block; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s; }
.ig-tile::after { content: ""; position: absolute; inset: 0; background: rgba(12,24,40,.55); opacity: 0; transition: opacity .4s; }
.ig-tile__icon { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1; width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: var(--navy); display: grid; place-items: center; transform: scale(0); transition: transform .5s cubic-bezier(.34,1.6,.64,1); }
.ig-tile:hover img { transform: scale(1.1); }
.ig-tile:hover::after { opacity: 1; }
.ig-tile:hover .ig-tile__icon { transform: scale(1); }

/* contact + footer */
.contact__cards { grid-template-columns: 1fr 1fr; }
.c-card--ig { transition: background .4s, border-color .4s; }
.c-card--ig:hover { background: rgba(220,189,124,.14); border-color: var(--gold); }
.c-card--ig .c-card__value { display: flex; align-items: center; gap: 10px; font-size: clamp(1rem, 1.5vw, 1.3rem); overflow-wrap: anywhere; }
.footer__ig { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; opacity: .8; font-weight: 600; transition: color .3s, opacity .3s; overflow-wrap: anywhere; }
.footer__ig:hover { opacity: 1; color: var(--gold-2); }

/* opts grid fits 10 goals */
.opts--6 { grid-template-columns: repeat(2, 1fr); }

/* responsive for new sections */
@media (max-width: 1100px) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "a a" "b c" "d e" "f f"; grid-auto-rows: minmax(340px, auto); }
}
@media (max-width: 900px) {
  .problems__grid, .checklist__grid { grid-template-columns: 1fr; }
  .checklist__head { position: static; }
  .stamp { width: 130px; height: 130px; font-size: 1.15rem; position: absolute; right: 0; top: -10px; margin: 0; }
  .checklist__head { position: relative; }
  .medals { grid-template-columns: 1fr 1fr; }
  .tl__line { left: 9px; }
  .tl__dot { left: 9px; }
  .tl__item { grid-template-columns: 1fr; }
  .tl__card, .tl__item:nth-child(odd) .tl__card { grid-column: 1; margin: 0 0 0 34px; }
  .stories__nav { display: none; }
  .contact__cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "f"; grid-auto-rows: minmax(400px, auto); }
  .tl__card { grid-template-columns: 1fr !important; }
  .tl__img { width: 100%; height: 170px; min-height: 0; }
  .seal-card { flex-direction: column; align-items: flex-start; }
  .seal { width: 84px; height: 84px; }
  .hero__trust { font-size: .84rem; }
  .story { width: 78vw; }
  .story__img { height: 260px; }
}
html[lang="el"] .statement__text { font-size: clamp(1.9rem, 5vw, 4.6rem); }
/* clip off-screen animation states so iOS never scrolls sideways */
main, .footer-wrap { overflow-x: clip; }
.tl__img img { object-position: 50% 28%; }
@media (max-width: 900px) {
  .checklist__bar { max-width: 150px; }
  .stamp { top: auto; bottom: -34px; right: 0; width: 104px; height: 104px; font-size: .95rem; padding: 12px; }
}
.hero__title em:empty { display: none; }
.footer__contact .footer__ig { font-size: .95rem; color: var(--cream); letter-spacing: 0; }

/* =========================================================
   Phone-only flow (desktop untouched)
   ========================================================= */
@media (max-width: 900px) {
  .bento { display: block; }
  .prog { position: sticky; top: calc(var(--header-h) + 10px + env(safe-area-inset-top)); height: min(74svh, 560px); margin-bottom: 22px; transform-origin: 50% 0; will-change: transform; }
  .prog:last-child { margin-bottom: 0; }
  .prog__shade { position: absolute; inset: 0; z-index: 2; background: #050b14; opacity: 0; pointer-events: none; border-radius: inherit; }
  .prog h3 { font-size: 1.9rem; }
  .story { will-change: transform; transform-origin: 50% 100%; }
  .statement__text { will-change: transform; }
}
/* tactile press feedback on touch screens */
@media (hover: none) {
  .btn, .opt, .pchip, .check, .story, .cmd, .city, .qa__q, .round-btn, .ig-tile, .prog__cta, .action-bar__btn { -webkit-tap-highlight-color: transparent; }
  .btn:active, .opt:active, .pchip:active, .round-btn:active, .prog__cta:active, .action-bar__btn:active { transform: scale(.95); transition: transform .12s; }
  .check:active, .city:active, .ig-tile:active { transform: scale(.98); transition: transform .12s; }
  .btn:active::before { transform: translateY(0); }
}

/* =========================================================
   v3 — audit fixes
   ========================================================= */
/* how it works */
.how { background: var(--cream); }
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.steps__line { position: absolute; left: 12%; right: 12%; top: 38px; height: 2px; background: rgba(19,35,58,.12); }
.steps__fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); transform-origin: left; transform: scaleX(0); }
.step { position: relative; text-align: center; padding: 0 8px; }
.step__num { display: block; font-family: var(--serif); font-style: italic; color: var(--gold-deep); font-size: 1.1rem; margin-bottom: 6px; }
.step__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--navy); color: var(--gold-2); box-shadow: 0 0 0 8px var(--cream), var(--shadow); }
.step__icon .ico { width: 26px; height: 26px; }
.step h3 { font-size: 1.35rem; letter-spacing: -.03em; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 1rem; max-width: 26ch; margin-inline: auto; }
.how__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(40px, 5vw, 64px); }

/* bigger tap targets */
.lang__btn { min-height: 34px; min-width: 40px; }
.quiz__back, .quiz__restart { padding: 10px 4px; }
.link-arrow { padding-block: .45em; }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 26px; padding-left: 4px; }
  .steps__line { left: 35px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; }
  .steps__fill { transform-origin: top; transform: scaleY(0); }
  .step { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; text-align: left; align-items: start; padding: 0; }
  .step__icon { grid-row: span 3; margin: 0; }
  .step__num { margin: 4px 0 2px; }
  .step p { margin: 0; max-width: none; }
  .how__cta .btn { width: 100%; }

  /* training cards: compact so the photo is visible while stacked */
  .stack__card { display: flex; flex-direction: column; gap: 14px; padding: 14px; min-height: 0; max-height: calc(100svh - var(--header-h) - 40px); }
  .stack__img { order: -1; aspect-ratio: auto; height: 26svh; min-height: 150px; flex: none; }
  .stack__text { gap: 12px; padding: 4px 6px 8px; }
  .stack__num { font-size: 2.2rem; position: absolute; top: 22px; right: 26px; color: var(--cream); opacity: .9; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
  .stack__card h3 { font-size: 1.75rem; }
  .stack__card p { font-size: 1rem; margin-top: 6px; }
  .tags li { font-size: .74rem; padding: .4em .8em; }

  /* readable map labels on phones */
  .pin__label { font-size: 34px; stroke-width: 8px; }
  .pin.is-active .pin__label { font-size: 38px; }
  .pin .pin__dot, .pin .pin__core { transform: scale(1.5); }
  .pin.is-active .pin__dot { transform: scale(2); }
  .pin__core { transform-box: fill-box; transform-origin: center; }

  .lang__btn { min-height: 40px; }
  .c-card--ig .c-card__value { font-size: .95rem; }
}

/* touch devices: CSS-only footer reveal (robust on iOS Safari) */
.touch-reveal main { position: relative; z-index: 1; background: var(--cream); }
.touch-reveal .footer-wrap { position: sticky; bottom: 0; z-index: 0; overflow: visible; }
@media (max-width: 900px) {
  .step__icon { grid-column: 1; grid-row: 1 / span 3; }
  .step__num, .step h3, .step p { grid-column: 2; }
}
@media (max-width: 900px) {
}

/* Reduce Motion: zoom moment shown as a still */
.zoom-static .zoom__pin { height: auto; padding: 90px 16px; }
.zoom-static .zoom__words { display: none; }
.zoom-static .zoom__frame { width: min(100%, 1100px); height: min(80svh, 720px); }
.zoom-static .zoom__overlay { opacity: 1; }

/* phones: extra life */
@media (max-width: 900px) {
  .wi { transform-style: preserve-3d; }
  .split { perspective: 600px; }
  .kicker::before { content: ""; display: inline-block; width: 0; height: 1.5px; background: currentColor; transition: width 1.1s var(--ease); margin-right: -.7em; }
  .kicker.is-in::before { width: 26px; margin-right: 0; }
  .section-head--center .kicker::before, .insta__head .kicker::before, .contact__inner .kicker::before { display: none; }
  /* sweeping shine on the main buttons */
  .btn--navy, .btn--gold, .btn--wa, .contact__phone, .action-bar__btn { position: relative; overflow: hidden; }
  .btn--navy::after, .btn--gold::after, .btn--wa::after, .contact__phone::after, .action-bar__btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: translateX(-150%) skewX(-20deg);
    animation: shine 4.5s ease-in-out infinite;
  }
  .action-bar__btn--wa::after { animation-delay: 2.2s; }
  /* iOS-style sheets: dark backdrop makes each section's rounded edges visible */
  .touch-reveal main { background: var(--navy-2); }
  .hero, .tapes, .about { background: var(--cream); }
}
@keyframes shine { 0%, 70% { transform: translateX(-150%) skewX(-20deg); } 100% { transform: translateX(325%) skewX(-20deg); } }

/* v4 — gallery uses CSS sticky (smooth in/out), no pin jumps */
.gallery-sticky .gallery { overflow: visible; overflow-x: clip; }
.gallery-sticky .gallery__pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
/* how-it-works icons stay inside their own layer (never float over the gallery) */
.how { position: relative; isolation: isolate; z-index: 0; }
.gallery { position: relative; z-index: 1; }

/* =========================================================
   v8 — quick finder, sections sheet, chapter rail
   ========================================================= */
.find { position: relative; z-index: 2; background: var(--cream); padding-block: clamp(36px, 5vw, 80px) clamp(60px, 8vw, 120px); }
.find__head { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 10px 48px; margin-bottom: clamp(26px, 3.4vw, 46px); }
.find__head .kicker { grid-column: 1 / -1; }
.find__title { font-size: clamp(2.3rem, 5.4vw, 4.6rem); font-weight: 700; letter-spacing: -.05em; line-height: .98; }
.find__title em { color: var(--gold-deep); }
.find__lead { justify-self: end; max-width: 380px; color: var(--muted); font-size: 1.02rem; }
.find__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.find__tile {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; gap: 10px;
  min-height: clamp(170px, 17vw, 236px); padding: 18px; border-radius: 24px; background: var(--navy); color: var(--cream);
  box-shadow: 0 22px 40px -26px rgba(19,35,58,.7); transition: transform .6s var(--ease), box-shadow .6s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.find__img { position: absolute; inset: 0; z-index: -2; }
.find__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.1s var(--ease), filter .6s; }
.find__tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,24,40,.05) 20%, rgba(12,24,40,.55) 55%, rgba(12,24,40,.92) 100%); }
.find__emoji { position: absolute; top: 14px; left: 14px; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem; background: rgba(246,239,226,.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.find__text { display: grid; gap: 4px; min-width: 0; }
.find__text strong { font-size: clamp(1.05rem, 1.35vw, 1.3rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; }
.find__text small { font-size: .8rem; line-height: 1.3; opacity: .78; }
.find__arrow { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--navy); transform: rotate(-45deg); transition: transform .5s var(--ease), background .3s; }
.find__arrow .ico { width: 16px; height: 16px; }
.find__tile--areas { background: var(--navy-3); }
.find__tile--areas::before, .find__tile--plan::before { display: none; }
.find__map { position: absolute; inset: 8% -10% 30% 8%; z-index: -1; color: var(--gold); opacity: .32; }
.find__map svg { width: 100%; height: 100%; }
.find__tile--plan { background: var(--gold); color: var(--navy); }
.find__tile--plan .find__emoji { background: rgba(19,35,58,.12); }
.find__tile--plan .find__arrow { background: var(--navy); color: var(--gold-2); }
.find__burst { position: absolute; right: -14%; top: -18%; width: 70%; aspect-ratio: 1; z-index: -1; color: rgba(255,253,248,.4); animation: spin 18s linear infinite; }
.find__burst svg { width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) {
  .find__tile:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -24px rgba(19,35,58,.75); }
  .find__tile:hover .find__img img { transform: scale(1.12); filter: saturate(1.15); }
  .find__tile:hover .find__arrow { transform: rotate(0deg); }
}
.find__tile:active { transform: scale(.97); transition: transform .15s; }
.find__tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) { .find__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .find { padding-block: 26px 70px; }
  .find__head { grid-template-columns: 1fr; gap: 10px; }
  .find__lead { justify-self: start; font-size: .95rem; }
  .find__title { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .find__grid { gap: 10px; }
  .find__tile { min-height: 136px; padding: 12px 12px 13px; border-radius: 20px; }
  .find__emoji { top: 10px; left: 10px; width: 34px; height: 34px; border-radius: 11px; font-size: 1.05rem; }
  .find__arrow { top: 10px; right: 10px; width: 28px; height: 28px; }
  .find__arrow .ico { width: 13px; height: 13px; }
  .find__text strong { font-size: 1rem; }
  .find__text small { font-size: .72rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .touch-reveal .find { background: var(--cream); }
}

/* landing spotlight on a target card */
.is-spot { position: relative; }
.is-spot::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; animation: spot 2.8s var(--ease) forwards; }
@keyframes spot {
  0% { opacity: 0; box-shadow: inset 0 0 0 0 var(--gold-2), inset 0 0 0 0 rgba(220,189,124,0); }
  18% { opacity: 1; box-shadow: inset 0 0 0 4px var(--gold-2), inset 0 0 80px rgba(220,189,124,.5); }
  60% { opacity: 1; box-shadow: inset 0 0 0 3px var(--gold-2), inset 0 0 30px rgba(220,189,124,.25); }
  100% { opacity: 0; box-shadow: inset 0 0 0 3px var(--gold-2), inset 0 0 0 rgba(220,189,124,0); }
}

/* page-jump curtain (long jumps feel like a page turn, not a blur) */
.jump-curtain { position: fixed; inset: 0; z-index: 1200; pointer-events: none; background: var(--navy); clip-path: inset(100% 0 0 0); display: grid; place-items: center; color: var(--gold-2); }
.jump-curtain__label { font-family: var(--serif); font-style: italic; font-size: clamp(1.8rem, 6vw, 3.4rem); opacity: 0; transform: translateY(20px); }
.jump-curtain__paw { width: 34px; height: 34px; margin: 0 auto 10px; display: block; opacity: 0; }

/* mobile action bar: Sections + Call + WhatsApp */
.action-bar { grid-template-columns: auto 1fr 1fr; }
.action-bar__btn--nav { background: rgba(246,239,226,.12); color: var(--cream); padding: 10px 14px 10px 10px; font-size: .92rem; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.action-bar__btn--nav::after { display: none !important; }
.nav-ring { position: relative; width: 30px; height: 30px; display: grid; place-items: center; flex: none; }
.nav-ring svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.nav-ring circle { fill: none; stroke: rgba(246,239,226,.18); stroke-width: 3; }
.nav-ring .nav-ring__fill { stroke: var(--gold-2); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .3s linear; }
.nav-ring .ico { width: 13px; height: 13px; color: var(--gold-2); }
@media (max-width: 430px) {
  .action-bar { gap: 6px; padding: 6px; grid-template-columns: auto minmax(0, .82fr) minmax(0, 1.18fr); }
  .action-bar__btn { padding: 13px 10px; gap: 6px; font-size: .9rem; }
  .action-bar__btn--nav { padding: 8px 12px 8px 8px; }
  .action-bar__btn .ico { width: 18px; height: 18px; }
}
@media (max-width: 350px) { .action-bar__btn--nav > span:last-child { display: none; } .action-bar__btn--nav { padding: 8px; } }

/* sections sheet */
.sheet { position: fixed; inset: 0; z-index: 1100; visibility: hidden; transition: visibility 0s .6s; }
.sheet.is-open { visibility: visible; transition: visibility 0s; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(5,11,20,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .45s; }
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 84svh; display: flex; flex-direction: column;
  background: var(--cream); color: var(--navy); border-radius: 30px 30px 0 0; padding: 8px 18px 0;
  box-shadow: 0 -30px 60px -20px rgba(0,0,0,.45); transform: translateY(105%); transition: transform .6s var(--ease); will-change: transform;
}
.sheet.is-open .sheet__panel { transform: none; }
.sheet__grab { width: 42px; height: 5px; border-radius: 9px; background: rgba(19,35,58,.18); margin: 4px auto 10px; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet__title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.04em; }
.sheet__close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(19,35,58,.08); color: var(--navy); display: grid; place-items: center; cursor: pointer; }
.sheet__close .ico { width: 18px; height: 18px; }
.sheet__progress { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; font-size: .78rem; font-weight: 700; color: var(--gold-deep); }
.sheet__progress-bar { flex: 1; height: 5px; border-radius: 9px; background: rgba(19,35,58,.1); overflow: hidden; }
.sheet__progress-bar span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transform-origin: left; transform: scaleX(0); transition: transform .5s var(--ease); }
.sheet__body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 0 calc(22px + env(safe-area-inset-bottom)); }
.sheet__ch { padding-top: 14px; opacity: 0; transform: translateY(18px); transition: opacity .45s, transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 45ms + 120ms); }
.sheet.is-open .sheet__ch { opacity: 1; transform: none; }
.sheet__ch-title { display: flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 4px; }
.sheet__ch-title b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; letter-spacing: 0; text-transform: none; }
.sheet__ch.is-current .sheet__ch-title { color: var(--navy); }
.sheet__link { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid rgba(19,35,58,.08); font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; }
.sheet__link > span { flex: 1; min-width: 0; }
.sheet__link .ico { width: 16px; height: 16px; opacity: .35; flex: none; }
.sheet__link em { font-family: var(--font); font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: .35em .75em; border-radius: 999px; background: var(--navy); color: var(--gold-2); display: none; white-space: nowrap; }
.sheet__link.is-here em { display: inline-block; }
.sheet__link.is-here { color: var(--navy); }
.sheet__link.is-here .ico { opacity: 0; width: 0; }
.sheet__link.is-done > span { opacity: .55; }
.sheet__link:active { background: rgba(19,35,58,.05); }
.sheet__totop { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: .7em 1.2em; border-radius: 999px; background: rgba(19,35,58,.07); font-weight: 700; font-size: .9rem; }
.sheet__totop .ico { width: 15px; height: 15px; transform: rotate(-90deg); }
.sheet-open .action-bar { transform: translateY(140%) !important; }

/* desktop section rail (v18.0): a thin track at the far right whose gold thumb follows the scroll like a scrollbar;
   hover it and a small panel of sections opens at the right edge only, and closes again when the mouse leaves */
.rail { display: none; }
@media (min-width: 901px) {
  .rail { position: fixed; right: 0; top: calc(var(--header-h) + 22px); bottom: 26px; z-index: 850; display: block; width: 30px; opacity: 0; pointer-events: none; transition: opacity .5s; }
  .rail.is-visible { opacity: 1; pointer-events: auto; }
  .header__nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
  .has-cursor .rail a { cursor: none; }
}
@media (prefers-reduced-motion: reduce) { .find__burst { animation: none; } }
/* phones: a slightly tighter timeline (same reveal, less scrolling) */
@media (max-width: 640px) {
  .tl { gap: 22px; }
  .tl__img { height: 132px; }
  .tl__body { padding: 18px 20px; }
}

/* =========================================================
   v9 — hall of fame: totals from every show + photo sets
   ========================================================= */
.medals { grid-template-columns: repeat(3, 1fr); }
.medal__num sup { font-size: .5em; vertical-align: super; margin-left: 2px; }
.tl p.tl__text { color: rgba(246,239,226,.75); font-size: .97rem; }
.tl__awards { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tl__awards li { font-size: .78rem; font-weight: 700; letter-spacing: .02em; padding: .38em .8em; border-radius: 999px; background: rgba(220,189,124,.14); border: 1px solid rgba(220,189,124,.28); color: var(--gold-2); white-space: nowrap; }
.tl__thumbs { display: flex; gap: 8px; margin-top: 14px; }
.tl__thumb { position: relative; flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--navy-2); cursor: zoom-in; box-shadow: 0 0 0 1px rgba(246,239,226,.14); transition: transform .4s var(--ease), box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.tl__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tl__thumb:nth-child(n+5) { display: none; }
.tl__thumb[data-more]::after { content: attr(data-more); position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12,24,40,.62); color: var(--gold-2); font-weight: 800; font-size: .95rem; }
.tl__thumb:hover, .tl__thumb:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--gold-2); outline: none; }
.tl__thumb:active { transform: scale(.94); }
.tl__img { position: relative; cursor: zoom-in; }
.tl__img::after { content: "📷 " attr(data-n); position: absolute; left: 10px; bottom: 10px; padding: .3em .7em; border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--cream); background: rgba(12,24,40,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tl__img[data-n="1"]::after { content: "📷"; }
.tl__img:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

.tl__item--img .tl__card { grid-template-columns: 170px 1fr; }
.tl__item--img .tl__img { width: 100%; }
.lightbox.is-single .lightbox__nav { display: none; }
@media (max-width: 900px) {
  .medals { grid-template-columns: 1fr 1fr; }
  .medal { padding: 20px 14px; }
  .medal__num { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .medal__label { font-size: .86rem; }
}
@media (max-width: 640px) {
  .tl__item--img .tl__card { grid-template-columns: 1fr; }
  .tl__img { height: 168px; }
  .tl__thumbs { gap: 7px; }
  .tl__thumb { width: 52px; height: 52px; border-radius: 12px; }
}

/* v9.1 — QA: contrast on dark rows */
.city:hover .city__num, .city.is-active .city__num { color: var(--gold-2); }
/* phones: the checklist head was still offset by its desktop sticky `top`, pushing it over the first card */
@media (max-width: 900px) { .checklist__head { top: auto; } }
@media (max-width: 640px) { .stamp { width: 112px; height: 112px; padding: 10px; font-size: .84rem; line-height: 1.05; bottom: -40px; } }
/* v9.2 — Facebook next to Instagram */
.insta__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.footer__contact .footer__ig + .footer__ig { margin-top: 6px; }
.menu__ig + .menu__ig { margin-left: 0; }
.menu__foot .menu__ig { display: flex; }
.c-card--social { display: grid; gap: 10px; align-content: start; }
.c-card--social .c-card__label { margin-bottom: 2px; }
.c-card--social a.c-card__value { transition: color .3s; }
.c-card--social a.c-card__value:hover { color: var(--gold-2); }
.c-card--social:hover { background: rgba(246,239,226,.06); border-color: rgba(246,239,226,.12); }
@media (max-width: 560px) { .insta__ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; } .insta__ctas .btn { justify-content: center; } }
/* laptops: a slightly tighter header so nav + Instagram + Facebook + call button always fit */
@media (min-width: 1361px) and (max-width: 1520px) { .header__nav { gap: 18px; font-size: .88rem; } .header__actions { gap: 8px; } }

/* v9.4 — smooth horizontal sections */
@media (hover: hover) and (pointer: fine) { .stories__track { scroll-snap-type: x proximity; } }
.stories__track { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.story { backface-visibility: hidden; }
.g-card__img { transform: translateZ(0); }
.g-card__img img { backface-visibility: hidden; }
/* cards snap in line with the page content, not flush to the screen edge */
.stories__track { scroll-padding-inline: max(var(--gutter), calc((100vw - 1360px) / 2 + var(--gutter))); }
/* timeline: dots wait in soft cream, then light up gold as the line reaches them */
.tl__dot { border-color: rgba(246,239,226,.28); box-shadow: 0 0 0 6px rgba(246,239,226,.05); transition: background .45s var(--ease), border-color .45s var(--ease), box-shadow .6s var(--ease); }
.tl__dot.is-lit { background: var(--gold-2); border-color: var(--gold-2); box-shadow: 0 0 0 6px rgba(220,189,124,.22), 0 0 22px rgba(220,189,124,.65); }
/* phones / narrow screens: title on top, first photo visible right away (no empty half-screen when the section arrives) */
@media (max-width: 900px) {
  .gallery__track { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; align-items: center; column-gap: 20px; row-gap: 22px; }
  .gallery__intro { grid-row: 1; grid-column: 1 / 4; width: auto; max-width: calc(100vw - 2 * var(--gutter)); justify-self: start; padding-right: 0; }
  .gallery__intro .kicker { margin-bottom: .8rem; }
  .gallery__lead { margin-top: 10px; font-size: .98rem; }
  .gallery__hint { display: none; }
  .g-card, .g-cta { grid-row: 2; }
  .g-card--low, .g-card--small { margin: 0; align-self: center; }
}
/* timeline: a brighter rail and a glowing head that travels down with you */
.tl__line { width: 3px; background: rgba(246,239,226,.16); }
.tl__head { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 5px rgba(220,189,124,.25), 0 0 24px 4px rgba(220,189,124,.7); z-index: 2; pointer-events: none; }
/* centre the dots with a margin (not `translate`) so the pop-in animation can't double-shift them off the line */
.tl__dot { translate: none; margin-left: -9px; }

/* v10.7 — phones: show-ring gallery as a native swipe carousel (no scroll-jacking, no jitter) */
.gallery-swipe .gallery { height: auto !important; overflow: hidden; }
.gallery-swipe .gallery__pin { position: relative; height: auto; display: block; overflow: visible; padding: clamp(72px, 16vw, 110px) 0 clamp(56px, 12vw, 90px); }
.gallery-swipe .gallery__track {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none;
  will-change: auto; padding-bottom: 8px; cursor: grab;
}
.gallery-swipe .gallery__track::-webkit-scrollbar { display: none; }
.gallery-swipe .g-card, .gallery-swipe .g-cta { scroll-snap-align: start; }
.gallery-swipe .g-card__img img { transform: scale(1.04); }
.gallery-swipe .gallery__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery-swipe .gallery__track.is-dragging .g-card, .gallery-swipe .gallery__track.is-dragging .g-cta { pointer-events: none; }
@media (max-width: 900px) { .gallery-swipe .gallery__intro { position: sticky; left: 0; z-index: 1; } }
/* desktop drag on the scroll-driven gallery */
.gallery-sticky .gallery__pin { cursor: grab; }
.gallery.is-dragging .gallery__pin { cursor: grabbing; }
.gallery.is-dragging .g-card { pointer-events: none; }
/* comfortable tap targets for the social links in the contact card */
.c-card--social { gap: 2px; }
.c-card--social a.c-card__value { padding: 10px 0; margin: 0; min-height: 44px; }

/* v11.2 — quiz goals: multi-select + phone layout that never clips */
.quiz__hint { margin: -10px 0 16px; font-size: .9rem; font-weight: 600; color: var(--gold-2); }
.quiz__next { margin-top: 18px; }
.quiz__next:disabled { opacity: .35; pointer-events: none; }
.opt { min-width: 0; }
.opt > span:last-child { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 560px) {
  .opts--6 { grid-template-columns: 1fr; gap: 8px; }
  .opts--6 .opt { padding: 9px 12px; }
  .quiz__next { width: 100%; justify-content: center; }
}
/* options without a sub-line: keep the label vertically centred next to the icon */
.opt:not(:has(small)) { grid-template-rows: auto; }
.opt:not(:has(small)) .opt__e { grid-row: auto; }

/* v12 — hover effects live on separate properties/elements, so they never fight the scroll animations (no jitter) */
.cmd { transition: translate .35s var(--ease), scale .2s var(--ease), background .3s, color .3s, box-shadow .3s; }
.cmd:hover { transform: none; translate: 0 -4px; }
.cmd:active { transform: none; translate: 0 1px; scale: .97; }
.find__tile { transition: translate .6s var(--ease), scale .15s, box-shadow .6s var(--ease); }
@media (hover: hover) and (pointer: fine) { .find__tile:hover { transform: none; translate: 0 -6px; } }
.find__tile:active { transform: none; scale: .97; }
.pchip { transition: background .35s, color .35s, border-color .35s, translate .4s var(--ease); }
.pchip:hover { transform: none; translate: 0 -3px; }
.prog__img img { transition: filter .6s; }
.prog:hover .prog__img img { transform: scale(1.06); }
@media (hover: hover) and (pointer: fine) { .prog__img { transition: transform 1.2s var(--ease); } .prog:hover .prog__img { transform: scale(1.07); } }
@media (hover: hover) and (pointer: fine) { .tl__img { transition: transform 1s var(--ease); } .tl__card:hover .tl__img { transform: scale(1.04); } }
/* plan: same look, far cheaper to paint (no live blur over moving orbs → no hitching on iPhone) */
.plan__orb { filter: none; opacity: .55; }
.quiz { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); }
/* photos in the sliders can't be picked up by the browser's own image-drag */
.g-card img, .story img, .ig-tile img, .tl__img img, .tl__thumb img { -webkit-user-drag: none; user-select: none; }
/* approval card in the hero: compact, one row on every screen */
.seal-card--hero { margin-top: 20px; max-width: 560px; gap: 16px; padding: 14px 20px 14px 14px; flex-direction: row; align-items: center; }
.seal-card--hero .seal { width: 72px; height: 72px; }
.seal-card--hero .seal-card__title { font-size: 1rem; }
.seal-card--hero .seal-card__text { font-size: .8rem; margin-top: 4px; }
@media (max-width: 640px) {
  .seal-card--hero { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; margin-top: 16px; }
  .seal-card--hero .seal { width: 58px; height: 58px; }
  .seal-card--hero .seal-card__title { font-size: .92rem; line-height: 1.25; }
  .seal-card--hero .seal-card__text { font-size: .74rem; }
}

/* =========================================================
   (05) SHOW RING — 3D cylinder of photos (v13.5)
   The section is tall; its inner panel sticks with CSS while the scroll spins the ring.
   ========================================================= */
.ring { position: relative; z-index: 1; height: 100vh; height: 100svh; background: radial-gradient(120% 90% at 50% 40%, var(--navy-3) 0%, var(--navy) 45%, var(--navy-2) 100%); color: var(--cream); overflow-x: clip; }
.ring__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.ring__kicker { position: absolute; left: var(--gutter); top: calc(var(--header-h) + 18px); z-index: 3; color: var(--gold-2); }
.ring__stage { position: absolute; inset: 0; perspective: 1300px; perspective-origin: 50% 30%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.ring__stage:active { cursor: grabbing; }
.ring__scene { position: absolute; left: 50%; top: 58%; width: 0; height: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.ring__cyl { position: absolute; left: 0; top: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; will-change: transform; }
.ring__item { --w: clamp(170px, 17vw, 280px); position: absolute; width: var(--w); height: calc(var(--w) * 1.3); left: calc(var(--w) / -2); top: calc(var(--w) * -0.65); padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--navy-3); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); transform: rotateY(var(--a)) translateZ(var(--r, 600px)); cursor: zoom-in; -webkit-appearance: none; appearance: none; }
.ring__item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ring__item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(220,189,124,.35); background: linear-gradient(130deg, rgba(255,255,255,.16), transparent 40%); pointer-events: none; }
.ring__shade { position: absolute; inset: 0; z-index: 1; background: var(--navy-2); opacity: 0; pointer-events: none; }
.ring__cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ring__title3d { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; }
.ring__h { margin: 0; display: grid; justify-items: center; font-family: var(--serif); font-weight: 400; font-size: clamp(70px, 13vw, 240px); line-height: .85; letter-spacing: -.03em; color: var(--cream); text-shadow: 0 10px 60px rgba(0,0,0,.6); }
.ring__h span { font-size: .42em; color: rgba(246,239,226,.72); letter-spacing: -.01em; }
.ring__h em { font-style: italic; background: linear-gradient(100deg, #f3dca6, var(--gold-2) 45%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .06em .12em 0; }
.ring__glow { position: absolute; left: 50%; top: 58%; width: min(70vw, 900px); height: min(36vw, 420px); transform: translate(-50%, -30%); border-radius: 50%; background: radial-gradient(closest-side, rgba(220,189,124,.22), rgba(220,189,124,.06) 60%, transparent); pointer-events: none; z-index: -1; }
.ring__lead { position: absolute; left: var(--gutter); bottom: 34px; z-index: 3; max-width: 25em; margin: 0; font-size: 15px; color: rgba(246,239,226,.7); }
.ring__count { position: absolute; right: calc(var(--gutter) + 90px); bottom: 34px; z-index: 3; font-family: var(--serif); font-size: 18px; color: rgba(246,239,226,.7); }
.ring__count span { color: var(--gold-2); font-size: 34px; }
@media (max-width: 900px) {
  .ring__item { --w: clamp(150px, 40vw, 220px); }
  .ring__lead { right: var(--gutter); bottom: 96px; font-size: 14px; }
  .ring__count { bottom: auto; top: calc(var(--header-h) + 18px); right: var(--gutter); }
}


/* =========================================================
   (07) STORIES — 3D storybook (v13.5)
   The book panel sticks with CSS while the page scroll turns the leaves.
   ========================================================= */
.stories.section { padding-top: 0; }
.stories__scroll { position: relative; height: 100vh; height: 100svh; }
.stories__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; padding-top: calc(var(--header-h) + 14px); }
.stories__head { margin-bottom: 0; }
.stories__head .h2 { font-size: clamp(2.4rem, 4.6vw, 4.4rem); }
.stories__lead { margin-top: 10px; }
.stories__nav { align-items: center; }
.book__count { font-family: var(--serif); font-size: 1.1rem; color: var(--muted); margin-right: 8px; white-space: nowrap; }
.book__count b { font-weight: 400; font-size: 2rem; color: var(--gold-deep); }
.book { --pw: min(28vw, 400px, calc((100svh - 330px) / 1.32)); --ph: calc(var(--pw) * 1.32); position: relative; flex: 1; display: grid; place-items: center; perspective: 2400px; perspective-origin: 50% 0%; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.book:active { cursor: grabbing; }
.book__inner { position: relative; width: calc(var(--pw) * 2); height: var(--ph); perspective: 2200px; transform: rotateX(14deg); transform-origin: 50% 100%; will-change: transform; }
.book__shadow { position: absolute; left: 50%; bottom: calc(50% - var(--ph) / 2 - 26px); width: calc(var(--pw) * 2.1); height: 50px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(19,35,58,.35), transparent); pointer-events: none; will-change: transform; }
.book__base { position: absolute; top: 0; width: var(--pw); height: var(--ph); }
.book__base--left { left: 0; border-radius: 16px 4px 4px 16px; background: linear-gradient(90deg, var(--navy-2), var(--navy) 85%, #0a1422); display: grid; place-items: center; box-shadow: inset -8px 0 18px rgba(0,0,0,.4); }
.book__base--left img { width: 26%; opacity: .12; filter: invert(1); }
.book__base--right { left: var(--pw); border-radius: 4px 16px 16px 4px; }
.leaf { position: absolute; top: 0; left: var(--pw); width: var(--pw); height: var(--ph); transform-origin: 0 50%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; will-change: transform; --sh: 0; }
.leaf__face { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.leaf__front { border-radius: 4px 16px 16px 4px; }
.leaf__back { transform: rotateY(180deg); border-radius: 16px 4px 4px 16px; }
.leaf__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--sh); background: linear-gradient(90deg, rgba(19,35,58,.55), rgba(19,35,58,.05) 60%, rgba(255,255,255,.2)); }
.leaf__back::after { background: linear-gradient(270deg, rgba(19,35,58,.55), rgba(19,35,58,.05) 60%, rgba(255,255,255,.2)); }
.page { background: #fffaf0; background-image: radial-gradient(120% 90% at 30% 10%, #fffdf8, #f6ecd8); color: var(--ink); }
.leaf__front.page { box-shadow: inset 14px 0 22px -14px rgba(19,35,58,.45); }
.leaf__back.page, .book__base--right.page { box-shadow: inset -14px 0 22px -14px rgba(19,35,58,.45); }
.book__base--right.page { box-shadow: inset 14px 0 22px -14px rgba(19,35,58,.45), 0 30px 60px -30px rgba(19,35,58,.5); }
/* cover */
.cover { border-radius: 4px 16px 16px 4px; background: linear-gradient(135deg, var(--navy-3), var(--navy) 55%, var(--navy-2)); color: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12%; box-shadow: inset 10px 0 16px -8px rgba(0,0,0,.6), 0 30px 60px -25px rgba(19,35,58,.7); }
.cover__frame { position: absolute; inset: 5%; border: 1.5px solid rgba(220,189,124,.55); border-radius: 8px; pointer-events: none; }
.cover__frame::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(220,189,124,.25); border-radius: 5px; }
.cover__paw { width: 22%; aspect-ratio: 1; color: var(--gold-2); margin-bottom: 8%; }
.cover__kicker { font-size: .72rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-2); }
.cover__title { margin: 6% 0; font-family: var(--serif); font-weight: 400; font-size: calc(var(--pw) * .13); line-height: 1; letter-spacing: -.01em; }
.cover__title em { font-style: italic; color: var(--gold-2); }
.cover__by { font-size: .8rem; letter-spacing: .12em; opacity: .7; }
.cover__open { position: absolute; bottom: 9%; left: 0; right: 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); animation: nudge 1.8s var(--ease) infinite; }
/* text page */
.page--text { display: flex; flex-direction: column; padding: 11% 11% 10%; }
.page__thumb { display: none; }
.page__no { font-family: var(--serif); font-style: italic; color: var(--gold-deep); font-size: 1rem; text-align: center; }
.page__tag { align-self: flex-start; margin-top: auto; padding: 6px 12px; border-radius: 999px; background: rgba(192,154,85,.16); color: var(--gold-deep); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.page__name { margin: 14px 0 12px; font-family: var(--serif); font-weight: 400; font-size: calc(var(--pw) * .135); line-height: .98; letter-spacing: -.02em; }
.page__text { font-size: clamp(.86rem, calc(var(--pw) * .042), 1.05rem); line-height: 1.55; color: #3d4757; }
.page__sign { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--gold-deep); border-top: 1px dashed rgba(124,94,40,.3); }
.page__sign svg { width: 18px; height: 18px; color: var(--gold); }
/* photo page */
.page--photo { display: grid; place-items: center; padding: 9%; }
.polaroid { position: relative; margin: 0; width: 92%; padding: 5% 5% 4%; background: #fff; box-shadow: 0 18px 36px -16px rgba(19,35,58,.45); transform: rotate(-2.4deg); }
.leaf:nth-child(even) .polaroid { transform: rotate(2deg); }
.polaroid::before, .polaroid::after { content: ""; position: absolute; top: -10px; width: 34%; height: 22px; background: rgba(220,189,124,.55); }
.polaroid::before { left: -6%; transform: rotate(-28deg); }
.polaroid::after { right: -6%; transform: rotate(28deg); }
.polaroid img { width: 100%; aspect-ratio: .9; object-fit: cover; display: block; }
.polaroid figcaption { margin-top: 6%; text-align: center; font-family: var(--serif); font-style: italic; font-size: calc(var(--pw) * .07); color: var(--navy); line-height: 1; }
.page--paw, .page--end { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.page--paw svg, .page__bigpaw { width: 34%; aspect-ratio: 1; color: var(--gold); opacity: .85; }
.page--paw span { font-family: var(--serif); font-style: italic; font-size: calc(var(--pw) * .1); color: var(--navy); }
.page__end { font-family: var(--serif); font-size: calc(var(--pw) * .12); line-height: 1; }
.page__end em { color: var(--gold-deep); }
.book__base--right { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 12%; text-align: center; }
.page__starts { font-family: var(--serif); font-size: calc(var(--pw) * .1); line-height: 1.02; }
.page__phone { font-weight: 700; color: var(--gold-deep); }
.book__bar { position: relative; width: min(240px, 50vw); height: 3px; margin: 0 auto calc(22px + env(safe-area-inset-bottom)); border-radius: 3px; background: rgba(19,35,58,.12); overflow: hidden; }
.book__bar i { position: absolute; inset: 0; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-height: 760px) and (min-width: 901px) { .stories__lead { display: none; } .book { --pw: min(28vw, 400px, calc((100svh - 250px) / 1.32)); } }
@media (max-width: 900px) {
  .stories__pin { padding-top: calc(var(--header-h) + 4px); }
  .stories__lead { display: none; }
  .stories__head { flex-direction: row; align-items: flex-end; }
  .stories__head .h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .stories__nav .round-btn { width: 46px; height: 46px; }
  .book__count { display: none; }
  .book { --pw: min(80vw, calc((100svh - 300px) / 1.42)); --ph: calc(var(--pw) * 1.42); }
  .book__inner { width: var(--pw); transform: rotateX(8deg); }
  .book__base--left { display: none; }
  .book__base--right, .leaf { left: 0; }
  .page--text { padding: 7% 8% 8%; }
  .page__thumb { display: block; height: 44%; margin: -8% -9% 6%; overflow: hidden; }
  .page__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .page__thumb--paw { display: grid; place-items: center; background: var(--cream-3); }
  .page__thumb--paw svg { width: 30%; height: 60%; color: var(--gold); }
  .page__no { position: absolute; top: 3%; right: 6%; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
  .page__tag { margin-top: 0; }
  .page__name { font-size: calc(var(--pw) * .12); margin: 10px 0 8px; }
  .page__text { font-size: .86rem; line-height: 1.45; }
  .page__sign { font-size: .85rem; padding-top: 10px; }
  .book__bar { margin-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* =========================================================
   (03) PROGRAMMES — 3D hexagonal prism (v13.5)
   One scroll gesture = one face; the info panel beside it follows.
   ========================================================= */
.programmes.section { padding-top: 0; }
.pstage { position: relative; height: 100vh; height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--header-h) + 14px); overflow: hidden; }
.pstage__head .h2 { font-size: clamp(2.2rem, 4.2vw, 4rem); max-width: 22ch; }
.pstage__lead { margin-top: 10px; }
.pstage__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 4vw; padding-bottom: 28px; }
.prism { --fw: min(23vw, 330px, calc((100svh - 330px) / 1.3)); --fh: calc(var(--fw) * 1.3); --r: calc(var(--fw) * 0.866 + 1px); position: relative; justify-self: center; width: var(--fw); height: var(--fh); perspective: 1300px; perspective-origin: 50% 20%; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; cursor: grab; }
.prism__spin { position: absolute; inset: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; will-change: transform; transform: translateZ(calc(var(--r) * -1)) rotateX(-9deg); }
.pface { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; background: var(--navy); color: var(--cream); transform: rotateY(calc(var(--i) * 60deg)) translateZ(var(--r)); -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 30px 60px -25px rgba(19,35,58,.6); }
.pface img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.pface::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12,24,40,.05) 35%, rgba(12,24,40,.92)); }
.pface::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; border: 1px solid rgba(220,189,124,.45); background: linear-gradient(115deg, rgba(255,255,255,.2), transparent 35%); pointer-events: none; }
.pface__no { position: absolute; z-index: 2; left: 18px; top: 16px; font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--gold-2); }
.pface__emoji { position: absolute; z-index: 2; right: 16px; top: 14px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(246,239,226,.16); font-size: 1.3rem; }
.pface__t { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; font-size: calc(var(--fw) * .085); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; }
.pface__shade { position: absolute; inset: 0; z-index: 2; background: var(--navy-2); opacity: 0; pointer-events: none; }
.prism__floor { position: absolute; left: 50%; bottom: -34px; width: calc(var(--fw) * 2.3); height: 60px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(19,35,58,.28), transparent); pointer-events: none; }
.pinfos { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.pinfo { display: none; }
.pinfo.is-active { display: block; }
.pinfo__no { font-family: var(--serif); font-size: 1rem; color: var(--muted); }
.pinfo__no b { font-family: var(--serif); font-weight: 400; font-size: 3.4rem; line-height: 1; color: var(--gold-deep); margin-right: 4px; }
.pinfo h3 { margin: 6px 0 12px; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 700; color: var(--navy); }
.pinfo p { font-size: 1.05rem; line-height: 1.55; color: var(--muted); max-width: 40ch; }
.pinfo .prog__tags { margin-top: 16px; }
.pinfo .prog__tags li { background: rgba(192,154,85,.16); color: var(--gold-deep); }
.pinfo .prog__cta { margin-top: 20px; }
.pinfo .prog__cta:hover { background: var(--navy); color: var(--cream); }
.pnav { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.pnav__dots { display: flex; gap: 6px; }
.pnav__dots button { width: 34px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(19,35,58,.14); position: relative; overflow: hidden; cursor: pointer; }
.pnav__dots button i { position: absolute; inset: 0; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s var(--ease); }
.pnav__dots button.is-on i { transform: scaleX(1); }
@media (max-height: 760px) and (min-width: 901px) { .pstage__lead { display: none; } .prism { --fw: min(23vw, 330px, calc((100svh - 250px) / 1.3)); } }
@media (max-width: 900px) {
  .pstage { padding-top: calc(var(--header-h) + 4px); }
  .pstage__lead { display: none; }
  .pstage__head .h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .pstage__grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 26px; align-items: start; padding-top: 18px; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .prism { --fw: min(62vw, 300px, calc((100svh - 470px) / 1.12)); --fh: calc(var(--fw) * 1.12); perspective: 1100px; }
  .pinfo__no { display: none; }
  .pinfo p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pnav .round-btn { display: none; }
  .pinfos { justify-content: flex-start; }
  .pinfo__no b { font-size: 2.2rem; }
  .pinfo h3 { font-size: clamp(1.5rem, 6.5vw, 2rem); margin: 2px 0 6px; }
  .pinfo p { font-size: .92rem; line-height: 1.45; }
  .pinfo .prog__tags { margin-top: 10px; }
  .pinfo .prog__cta { margin-top: 12px; }
  .pnav { margin-top: 14px; }
  .pnav .round-btn { width: 44px; height: 44px; }
}
@media (max-width: 900px) and (max-height: 900px) { .pinfo .prog__tags, .pinfo__no { display: none; } }
@media (max-width: 900px) and (max-height: 760px) { .pstage__grid { gap: 18px; padding-top: 10px; } .pinfo p { display: none; } .pinfo h3 { margin-bottom: 0; } .prism { --fw: min(62vw, 300px, calc((100svh - 450px) / 1.12)); } }

/* programme info: always show tags + CTA (the old bento hover rule targets these classes too) */
.pinfo .prog__tags, .pinfo .prog__cta { max-height: none; opacity: 1; overflow: visible; }
.pinfo .prog__tags { margin-top: 16px; }
.pinfo .prog__cta { margin-top: 20px; }

/* "all programmes" overlay with the classic bento grid */
.pnav__all { margin-left: 2px; }
.pmodal { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: clamp(12px, 3vw, 40px); visibility: hidden; pointer-events: none; }
.pmodal.is-open { visibility: visible; pointer-events: auto; }
.pmodal__bg { position: absolute; inset: 0; background: rgba(12,24,40,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .45s var(--ease); cursor: zoom-out; }
.pmodal.is-open .pmodal__bg { opacity: 1; }
.pmodal__panel { position: relative; width: min(1240px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: 30px; background: var(--cream); padding: clamp(20px, 3vw, 40px); box-shadow: 0 50px 120px -30px rgba(0,0,0,.55); opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.pmodal.is-open .pmodal__panel { opacity: 1; transform: none; }
.pmodal__head { position: relative; padding-right: 64px; margin-bottom: 22px; }
.pmodal__title { margin-top: 10px; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 700; color: var(--navy); }
.pmodal__title em { font-family: var(--serif); font-weight: 400; color: var(--gold-deep); }
.pmodal__x { position: absolute; top: -4px; right: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--cream); transition: transform .4s var(--ease), background .3s; }
.pmodal__x:hover { transform: rotate(90deg); background: var(--gold-deep); }
.pmodal__x svg { width: 22px; height: 22px; }
.pmodal .bento { grid-auto-rows: minmax(260px, 30vh); }
.pmodal .prog { cursor: pointer; }
html.pm-open, html.pm-open body { overflow: hidden; }
@media (max-width: 900px) {
  .pmodal { padding: 10px; }
  .pmodal__panel { border-radius: 24px; padding: 18px; }
  .pmodal .bento { display: grid; grid-template-columns: 1fr; grid-template-areas: none; grid-auto-rows: auto; gap: 12px; }
  .pmodal .prog { grid-area: auto !important; position: relative; top: auto; height: auto; min-height: 300px; margin: 0; transform: none !important; }
  .pmodal .prog h3 { font-size: 1.5rem; }
}
@media (max-width: 900px) { .pnav .round-btn.pnav__all { display: grid; width: 44px; height: 44px; margin-left: auto; } }
html.pm-open .action-bar, html.pm-open .wa-float { opacity: 0; pointer-events: none; }

/* overlay: everything fits on one screen, no scrolling inside */
.pmodal__panel { display: flex; flex-direction: column; height: min(100%, 880px); overflow: hidden; }
.pmodal__head { flex: none; margin-bottom: 16px; }
.pmodal .bento { flex: 1; min-height: 0; grid-auto-rows: auto; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pmodal .prog { min-height: 0; border-radius: 20px; }
.pmodal .prog__body { padding: clamp(12px, 1.4vw, 20px); }
.pmodal .prog__emoji { width: 36px; height: 36px; border-radius: 11px; font-size: 1.05rem; margin-bottom: 6px; }
.pmodal .prog h3 { font-size: clamp(1.05rem, 1.55vw, 1.5rem); }
.pmodal .prog p { font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pmodal .prog__tags { display: none !important; }
.pmodal .prog__cta { font-size: .82rem; padding: .5em .95em; }
@media (max-width: 900px) {
  .pmodal__panel { height: 100%; padding: 14px; }
  .pmodal__head { margin-bottom: 10px; padding-right: 54px; }
  .pmodal__head .kicker { display: none; }
  .pmodal__title { margin-top: 0; font-size: clamp(1.15rem, 5vw, 1.5rem); }
  .pmodal__x { top: 0; width: 42px; height: 42px; }
  .pmodal .bento { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); grid-template-areas: none; gap: 8px; }
  .pmodal .prog { min-height: 0; border-radius: 16px; }
  .pmodal .prog p { display: none; }
  .pmodal .prog__body { padding: 10px; }
  .pmodal .prog__emoji { width: 30px; height: 30px; font-size: .9rem; border-radius: 9px; margin-bottom: 4px; }
  .pmodal .prog h3 { font-size: .98rem; line-height: 1.08; }
  .pmodal .prog__cta { margin-top: 8px; font-size: .74rem; padding: .45em .8em; }
}
@media (min-width: 901px) and (max-height: 820px) { .pmodal .prog__emoji, .pmodal .prog p { display: none; } }

/* (06) hall of fame photos: always show the whole photo (they are portrait shots in wide frames),
   framed by a soft blurred copy of itself instead of cropping heads and dogs off */
.tl__img { isolation: isolate; background: var(--navy-2); }
.tl__img::before { content: ""; position: absolute; inset: -12%; z-index: -1; background: var(--bg) center / cover no-repeat; filter: blur(18px) saturate(1.15) brightness(.62); transform: translateZ(0); }
.tl__img img { position: relative; object-fit: contain; object-position: 50% 50%; filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)); }
@media (max-width: 640px) {
  .tl__img { height: clamp(230px, 68vw, 320px); }
}

/* =========================================================
   (04) PROBLEMS — flip deck: the problem on the front, the fix on the back (v14.1)
   ========================================================= */
.problems__head { max-width: 760px; }
.pdeck { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(34px, 5vw, 60px); perspective: 1600px; }
.pcard { position: relative; height: clamp(420px, 52vh, 480px); perspective: 1300px; outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pcard__inner { position: absolute; inset: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform 1s cubic-bezier(.25,.9,.25,1.05); }
.pcard.is-flipped .pcard__inner { transform: rotateY(180deg); }
.pcard__face { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.pcard__front { display: flex; flex-direction: column; padding: 26px; background: linear-gradient(160deg, var(--navy-3), var(--navy) 70%); border: 1px solid rgba(220,189,124,.22); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.pcard__front::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 85% 0%, rgba(220,189,124,.18), transparent 60%); pointer-events: none; }
.pcard__front::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 40%); pointer-events: none; }
.pcard__no { position: relative; font-family: var(--serif); font-style: italic; font-size: 6.2rem; line-height: .85; color: transparent; -webkit-text-stroke: 1px rgba(220,189,124,.55); }
.pcard__emoji { position: relative; margin-top: auto; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; font-size: 1.7rem; background: rgba(220,189,124,.12); border: 1px solid rgba(220,189,124,.32); }
.pcard__t { position: relative; margin: 18px 0 16px; font-size: clamp(1.45rem, 1.9vw, 1.85rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 700; color: var(--cream); }
.pcard__tap { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.pcard__tap i { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-style: normal; font-size: .95rem; transition: transform .6s var(--ease); }
.pcard:hover .pcard__tap i, .pcard:focus-visible .pcard__tap i { transform: rotate(180deg); }
.pcard:focus-visible .pcard__front { box-shadow: 0 0 0 3px var(--gold); }
.pcard__back { transform: rotateY(180deg); display: flex; flex-direction: column; background: var(--cream); color: var(--navy); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.pcard__img { position: relative; flex: none; height: 38%; overflow: hidden; background: var(--cream-3); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; }
.pcard__body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 16px 18px 18px; }
.pcard__how { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.pcard__how .ico { width: 14px; height: 14px; }
.pcard__d { margin-top: 6px; font-size: .88rem; line-height: 1.45; color: #3d4757; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__case { margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--gold); font-family: var(--serif); font-style: italic; font-size: .98rem; line-height: 1.3; color: var(--navy); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: .6em 1em; border-radius: 999px; background: var(--navy); color: var(--cream); font-weight: 700; font-size: .82rem; transition: background .3s, color .3s; }
.pcard__cta:hover { background: var(--gold); color: var(--navy); }
.pcard__cta .ico { width: 16px; height: 16px; }
@media (max-width: 1100px) { .pdeck { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pcard { height: 440px; } }
@media (max-width: 900px) {
  .pdeck { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 6px var(--gutter) 22px; scrollbar-width: none; perspective: none; }
  .pdeck::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 min(80vw, 340px); height: min(470px, 70svh); scroll-snap-align: center; }
  .pcard__no { font-size: 5rem; }
}

/* (04) v14.2 — one-screen stage; the scroll slides the deck sideways one card at a time */
.problems.section { padding-block: 0; }
.problems__stage { position: relative; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--header-h) + 8px); padding-bottom: 18px; overflow: hidden; }
.problems__head .h2 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
.problems__head .section-lead { margin-top: 12px; }
.pdeck-view { position: relative; width: 100%; overflow: hidden; padding: 26px 0 30px; padding-left: max(var(--gutter), calc((100vw - 1360px) / 2 + var(--gutter))); }
.pdeck { display: flex !important; gap: 18px; width: max-content; margin: 0 !important; padding: 0 !important; overflow: visible !important; perspective: none; will-change: transform; grid-template-columns: none; }
.pcard { flex: none; width: clamp(250px, 21vw, 300px); height: min(470px, calc(100svh - 330px)); min-height: 360px; scroll-snap-align: none; }
.pcard__no { font-size: 3.6rem; }
.pcard__art { position: relative; display: block; width: 100%; height: auto; margin-top: auto; color: var(--gold-2); filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); transition: transform .8s var(--ease); }
.pcard:hover .pcard__art { transform: translateY(-4px) scale(1.03); }
.pcard__t { margin: 14px 0 12px; }
.pdeck-foot { display: flex; align-items: center; gap: 16px; }
.pdeck__bar { width: min(220px, 40vw); height: 3px; border-radius: 3px; background: rgba(246,239,226,.14); overflow: hidden; }
.pdeck__bar i { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); transition: transform .8s var(--ease); }
.pdeck__hint { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(246,239,226,.55); }
@media (max-height: 760px) { .problems__head .section-lead { display: none; } }
@media (max-width: 900px) {
  .problems__stage { justify-content: flex-start; padding-top: calc(var(--header-h) + 6px); padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .problems__head .h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .problems__head .section-lead { display: none; }
  .pdeck-view { padding: 16px 0 18px var(--gutter); }
  .pcard { width: min(78vw, 330px); height: min(460px, calc(100svh - 300px)); min-height: 330px; }
  .pcard__no { font-size: 3rem; }
  .pcard__front { padding: 22px; }
}

/* =========================================================
   Walking Labrador companion (v14.6): walks while you scroll, tap = next section
   ========================================================= */
.pup { position: fixed; left: 22px; bottom: 20px; z-index: 880; width: 96px; padding: 6px 0 0; border: 0; background: none; color: var(--gold); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform: translateX(-170px); opacity: 0; transition: transform 1.1s var(--ease), opacity .6s ease, bottom .5s var(--ease); }
.pup.is-in { transform: none; opacity: 1; }
.pup__hop { display: block; will-change: transform; }
.pup__svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%; transition: transform .45s var(--ease); filter: drop-shadow(0 6px 10px rgba(12,24,40,.28)); }
.pup.is-back .pup__svg { transform: scaleX(-1); }
.pup__body { fill: var(--gold); }
.pup__far { fill: var(--gold-deep); }
.pup__ear { fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; opacity: .45; }
.pup__shadow { position: absolute; left: 10%; right: 6%; bottom: -3px; height: 8px; border-radius: 50%; background: radial-gradient(closest-side, rgba(12,24,40,.32), transparent); transition: transform .3s; }
.pup:hover .pup__body, .pup:focus-visible .pup__body { fill: var(--gold-2); }
.pup:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 14px; }
.pup__tip { position: absolute; left: 4px; bottom: calc(100% + 4px); display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 8px 11px; border-radius: 999px; white-space: nowrap;
  background: var(--navy); color: var(--cream); border: 1px solid rgba(220,189,124,.45); font-size: .8rem; font-weight: 600; letter-spacing: .01em; box-shadow: 0 14px 30px -12px rgba(12,24,40,.6);
  opacity: 0; transform: translateY(8px) scale(.94); transform-origin: 20px 100%; pointer-events: none; transition: opacity .35s ease, transform .45s var(--ease); }
.pup__tip .ico { width: 14px; height: 14px; color: var(--gold); transform: rotate(90deg); transition: transform .3s; }
.pup__tip.is-top .ico { transform: rotate(-90deg); }
.pup:hover .pup__tip, .pup:focus-visible .pup__tip, .pup.is-tip .pup__tip { opacity: 1; transform: none; }
.pup.is-walking .pup__tip { opacity: 0; transform: translateY(8px) scale(.94); }
.pup-trail { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 870; pointer-events: none; }
.pup-print { position: absolute; width: 13px; height: 13px; margin: -6px 0 0 -6px; color: var(--gold); transform: rotate(var(--r)); opacity: 0; animation: pupPrint 2.3s ease-out forwards; }
@keyframes pupPrint { 0% { opacity: 0; transform: rotate(var(--r)) scale(.5); } 12% { opacity: .55; transform: rotate(var(--r)) scale(1); } 100% { opacity: 0; transform: rotate(var(--r)) scale(.85); } }
@media (max-width: 900px) {
  .pup { left: 12px; width: 70px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .pup.has-bar { bottom: calc(98px + env(safe-area-inset-bottom)); }
  .pup__tip { font-size: .74rem; padding: 7px 11px 7px 9px; }
  .pup-print { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
}
@media (prefers-reduced-motion: reduce) { .pup { transition: opacity .3s; transform: none; } .pup-print { display: none; } }
@media print { .pup, .pup-trail { display: none; } }

/* v14.6: phones show no Call / WhatsApp buttons on screen — the bar is just the "Sections" pill, bottom-right */
@media (max-width: 900px) {
  .action-bar { left: auto; right: 12px; grid-template-columns: auto; padding: 6px; }
  .action-bar__btn--call, .action-bar__btn--wa { display: none !important; }
  .action-bar__btn--nav { padding: 8px 14px 8px 8px; }
  .pup.has-bar { bottom: calc(14px + env(safe-area-inset-bottom)); }
}
@media (max-width: 350px) { .action-bar__btn--nav > span:last-child { display: inline; } .action-bar__btn--nav { padding: 8px 14px 8px 8px; } }

/* v14.6: (03) prism always fits the screen on desktop — sized from the space left under the heading */
@media (min-width: 901px) {
  .pstage__head .h2 { max-width: 30ch; font-size: clamp(2rem, 3.6vw, 3.6rem); }
  @supports (height: 1cqh) {
    .pstage__grid { container-type: size; }
    .prism { --fw: min(23vw, 330px, calc((100cqh - 76px) / 1.3)); }
    .pinfos { max-height: 100cqh; }
  }
}

/* v14.7: (05) ring on phones — photos sized to the screen height so the text below never covers them */
@media (max-width: 900px) {
  .ring__stage { --rw: min(40vw, 220px, calc((100svh - 300px) / 1.75)); }
  .ring__item { --w: var(--rw); }
  .ring__scene { top: min(58%, calc(100% - 160px - var(--rw) * .9)); }
  .ring__lead { bottom: calc(82px + env(safe-area-inset-bottom)); }
}
@media (min-width: 901px) { .ring__lead { left: calc(var(--gutter) + 120px); } } /* leaves room for the walking dog at bottom-left */

/* =========================================================
   Loading screen (v15.7) "Fetch!": throw the ball in a 3D arena, the Labrador brings it back
   ========================================================= */
.pl { display: grid; justify-items: center; gap: 14px; width: 100%; padding: 0 16px; user-select: none; -webkit-user-select: none; }
.pl__logo { width: min(320px, 60vw); height: auto; }
.pl__hint { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 3vw, 1.6rem); color: var(--gold-2); transition: opacity .5s; }
.pl__hint.is-used { opacity: .35; }
.fx { position: relative; width: min(760px, 96vw); height: min(46vh, 380px); perspective: 820px; perspective-origin: 50% 8%; touch-action: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 75% at 50% 60%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 62% 75% at 50% 60%, #000 55%, transparent 100%); }
.fx__world { position: absolute; left: 50%; top: 78%; width: 0; height: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.fx__floor { position: absolute; left: -1300px; top: -800px; width: 2600px; height: 1600px; transform: rotateX(90deg);
  background: radial-gradient(circle at 50% 50%, rgba(192,154,85,.34), rgba(192,154,85,.08) 22%, transparent 48%),
    repeating-linear-gradient(90deg, rgba(220,189,124,.16) 0 2px, transparent 2px 90px), repeating-linear-gradient(0deg, rgba(220,189,124,.16) 0 2px, transparent 2px 90px); }
.fx__shadow { position: absolute; left: -16px; top: -6px; width: 32px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); }
.fx__shadow--dog { left: -60px; top: -14px; width: 120px; height: 28px; opacity: .55; }
.fx__dog { position: absolute; left: 0; top: 0; width: 132px; pointer-events: none; }
.fx__flip { transform-origin: 50% 100%; }
.fx__flip svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); }
.fx__ball { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: 0; border-radius: 50%; cursor: grab; touch-action: none;
  background: radial-gradient(circle at 34% 30%, #fbffd0 0, #dff05a 22%, #b9d428 55%, #7f9a12 100%); box-shadow: inset -3px -4px 8px rgba(0,0,0,.25), 0 0 18px rgba(223,240,90,.35); }
.fx__ball::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; }   /* bigger grab area for fingers */
.fx__ball:active { cursor: grabbing; }
.fx__ball i { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.fx__ball i::before, .fx__ball i::after { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); }
.fx__ball i::before { left: -19px; top: 0; }
.fx__ball i::after { left: 19px; top: 0; }
.fx__pop { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--gold-2); opacity: 0; pointer-events: none; translate: -50% 0; }
.fx__pop.is-on { animation: fxPop 1.2s var(--ease) forwards; }
@keyframes fxPop { 0% { opacity: 0; margin-top: 12px; } 20% { opacity: 1; margin-top: 0; } 75% { opacity: 1; } 100% { opacity: 0; margin-top: -26px; } }
.pl__meta { display: flex; align-items: center; gap: 14px; width: min(420px, 84vw); }
.pl__fetch { min-width: 5.5em; font-size: .8rem; letter-spacing: .04em; color: rgba(246,239,226,.6); }
.pl__bar { flex: 1; height: 2px; border-radius: 2px; background: rgba(246,239,226,.14); overflow: hidden; }
.pl__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); transform: scaleX(0); transform-origin: 0 50%; }
.pl__count { min-width: 3.2em; text-align: right; font-family: var(--serif); font-size: 1rem; color: rgba(246,239,226,.6); }
.pl__count b { font-weight: 400; font-size: 1.6rem; color: var(--cream); font-variant-numeric: tabular-nums; }
.pl__enter { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 1px solid rgba(220,189,124,.5); border-radius: 999px; background: transparent; color: var(--cream);
  font: inherit; font-weight: 700; cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .4s, transform .5s var(--ease), background .3s; }
.pl__enter.is-on { opacity: 1; transform: none; pointer-events: auto; }
.pl__enter:hover { background: var(--gold); color: var(--navy); }
.pl__enter .ico { width: 16px; height: 16px; }
@media (max-width: 600px) { .fx__dog { width: 104px; } .fx__shadow--dog { left: -48px; width: 96px; } .fx { height: min(44vh, 330px); } }
/* v15.9 training arena: agility kit, treats, the trainer's click, command buttons */
.fx__kit { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; pointer-events: none; }
.fx__post { position: absolute; left: -45px; top: -62px; width: 6px; height: 62px; border-radius: 3px; background: linear-gradient(90deg, #fff7e8, #cbbfa8); box-shadow: 0 0 8px rgba(0,0,0,.3); }
.fx__post--r { left: 39px; }
.fx__rail { position: absolute; left: -42px; top: -50px; width: 84px; height: 7px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--gold) 0 12px, #fff7e8 12px 24px); box-shadow: 0 4px 10px rgba(0,0,0,.3); }
.fx__rail--low { top: -26px; opacity: .55; }
.fx__tyre .fx__post { top: -100px; height: 100px; left: -48px; }
.fx__tyre .fx__post--r { left: 42px; }
.fx__ring { position: absolute; left: -38px; top: -104px; width: 76px; height: 76px; border-radius: 50%; box-sizing: border-box; border: 8px solid var(--gold); box-shadow: 0 0 14px rgba(0,0,0,.35), inset 0 0 6px rgba(0,0,0,.3); }
.fx__ring::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 8px dashed #fff7e8; }
.fx__pole i { position: absolute; left: -3px; top: -74px; width: 6px; height: 74px; border-radius: 3px; background: repeating-linear-gradient(180deg, var(--gold) 0 10px, #fff7e8 10px 20px); box-shadow: 0 0 8px rgba(0,0,0,.3); }
.fx__pole--alt i { background: repeating-linear-gradient(180deg, #fff7e8 0 10px, var(--gold-deep) 10px 20px); }
.fx__cone i { position: absolute; left: -12px; top: -28px; width: 24px; height: 28px; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #f3c15b 0 30%, #fff7e8 30% 46%, #e3a43a 46% 100%); }
.fx__treat { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.fx__treat b { position: absolute; left: -12px; top: -9px; width: 24px; height: 8px; border-radius: 4px; background: #f6efe2; box-shadow: 0 3px 6px rgba(0,0,0,.35); transition: transform .35s var(--ease), opacity .35s; }
.fx__treat b::before, .fx__treat b::after { content: ""; position: absolute; top: -3px; width: 9px; height: 14px; border-radius: 50%; background: #f6efe2; box-shadow: 0 0 0 0 transparent; }
.fx__treat b::before { left: -4px; } .fx__treat b::after { right: -4px; }
.fx__treat.is-eaten b { transform: scale(.1) translateY(-20px); opacity: 0; }
.fx__click { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.fx__click::after { content: ""; position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--gold-2); opacity: 0; }
.fx__click.is-on::after { animation: fxClick .7s var(--ease) forwards; }
@keyframes fxClick { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.8); } }
.fx { cursor: default; }
.pl__cmds { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pl__cmds button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px 9px 12px; border-radius: 999px; border: 1px solid rgba(220,189,124,.35); background: rgba(246,239,226,.06);
  color: var(--cream); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .25s, border-color .25s, transform .2s; }
.pl__cmds button span { font-size: 1rem; color: var(--gold-2); }
.pl__cmds button:hover { background: rgba(220,189,124,.16); border-color: var(--gold-2); }
.pl__cmds button.is-hit { animation: cmdHit .45s var(--ease); }
@keyframes cmdHit { 40% { transform: scale(.92); background: var(--gold); color: var(--navy); } }
@media (max-width: 600px) { .pl { gap: 10px; } .pl__cmds button { padding: 8px 12px 8px 10px; font-size: .82rem; } }
@media (max-height: 700px) { .pl__logo { width: min(240px, 50vw); } .fx { height: min(40vh, 300px); } }
/* v16.2: the visitor enters only with the button, so make it the clear next step once loading is done */
.pl__enter.is-on { background: var(--gold); color: var(--navy); border-color: var(--gold); box-shadow: 0 0 0 0 rgba(220,189,124,.5); animation: plEnter 2.2s ease-out infinite; }
.pl__enter.is-on:hover { background: var(--gold-2); }
@keyframes plEnter { 0% { box-shadow: 0 0 0 0 rgba(220,189,124,.55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(220,189,124,0); } }
/* v16.5 garden: line-art trees, bushes, flowers, fence, moon and the dog's bed; a stone path and grass on the lawn */
.fx__floor { background: radial-gradient(circle at 50% 50%, rgba(192,154,85,.26), rgba(192,154,85,.07) 26%, transparent 52%) !important; }
.fx__floor svg { position: absolute; inset: 0; }
.fx__stones ellipse { fill: rgba(246,239,226,.05); stroke: rgba(220,189,124,.55); stroke-width: 3; }
.fx__tufts path { fill: none; stroke: rgba(220,189,124,.4); stroke-width: 3; stroke-linecap: round; }
.fx__art { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.fx__art svg { display: block; height: 100%; width: auto; overflow: visible; fill: #12213a; stroke: var(--gold-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fx__art svg * { vector-effect: non-scaling-stroke; }
.fx__art svg .d { fill: none; stroke-width: 1.2; opacity: .6; }
.fx__art--flowers svg circle { fill: rgba(220,189,124,.25); }
.fx__art--moon svg { fill: rgba(246,239,226,.12); stroke: var(--cream); filter: drop-shadow(0 0 10px rgba(246,239,226,.35)); }
.fx__art--bed svg { fill: rgba(192,154,85,.22); stroke: var(--gold-2); stroke-width: 2; }
.pl__lang { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px; z-index: 2; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(246,239,226,.08); border: 1px solid rgba(220,189,124,.25); }
.pl__lang button { min-width: 38px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: rgba(246,239,226,.7); font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.pl__lang button.is-on { background: var(--gold); color: var(--navy); }
/* v16.7 a proper, chunky dog bed: padded bolster, cushion, stitching */
.fx__art--bedBack svg .r, .fx__art--bedFront svg .r { fill: #6e5730; stroke: var(--gold-2); stroke-width: 2.2; }
.fx__art--bedBack svg .c { fill: #d9c49a; fill-opacity: .9; stroke: var(--gold-2); stroke-width: 1.6; }
.fx__art--bedFront svg .w { fill: #4d3c21; stroke: var(--gold-2); stroke-width: 2.2; }
.fx__art--bedBack svg .d, .fx__art--bedFront svg .d { stroke: #f6efe2; opacity: .55; }
.fx__art--bedBack svg .s, .fx__art--bedFront svg .s { stroke-dasharray: 4 5; opacity: .7; }
.fx__art--bedBack svg .c + .d { stroke: #8a6f41; opacity: .6; }

/* =========================================================
   (✦) Quick topics as a training path (v16.9): 8 stops on a winding gold trail; the Labrador walks to the one you tap
   ========================================================= */
.trail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); row-gap: clamp(60px, 7vw, 100px); column-gap: 16px; padding: 18px 0 8px; }
.trail__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.trail__under { stroke: rgba(192,154,85,.16); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.trail__line { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .1 14; }
.trail__stop { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; color: var(--navy); text-decoration: none; -webkit-tap-highlight-color: transparent; }
a.trail__stop:nth-of-type(5) { grid-column: 4; grid-row: 2; }
a.trail__stop:nth-of-type(6) { grid-column: 3; grid-row: 2; }
a.trail__stop:nth-of-type(7) { grid-column: 2; grid-row: 2; }
a.trail__stop:nth-of-type(8) { grid-column: 1; grid-row: 2; }
.trail__medal { position: relative; display: grid; place-items: center; width: clamp(104px, 10vw, 140px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--navy-3);
  box-shadow: 0 0 0 5px var(--cream), 0 0 0 7px var(--gold), 0 24px 40px -18px rgba(19,35,58,.6); transition: transform .5s var(--ease), box-shadow .4s; }
.trail__medal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.trail__medal--map { background: var(--navy); color: var(--gold); }
.trail__medal--map svg { width: 78%; height: auto; }
.trail__medal--plan { background: var(--gold); color: var(--navy); }
.trail__medal--plan svg { width: 46%; height: 46%; }
.trail__no { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--gold-deep); }
.trail__no span { font-style: normal; font-size: .95rem; margin-right: 2px; }
.trail__text { display: grid; gap: 3px; max-width: 220px; }
.trail__text strong { font-size: clamp(1.02rem, 1.3vw, 1.22rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.trail__text small { font-size: .82rem; line-height: 1.35; color: var(--muted); }
.trail__stop.is-here .trail__medal { box-shadow: 0 0 0 5px var(--cream), 0 0 0 8px var(--gold-2), 0 0 34px 8px rgba(220,189,124,.55); }
@media (hover: hover) {
  .trail__stop:hover .trail__medal { transform: translateY(-6px) scale(1.05); box-shadow: 0 0 0 5px var(--cream), 0 0 0 8px var(--gold-2), 0 30px 46px -18px rgba(19,35,58,.7); }
  .trail__stop:hover .trail__medal img { transform: scale(1.1); }
}
.trail__stop:focus-visible { outline: none; }
.trail__stop:focus-visible .trail__medal { box-shadow: 0 0 0 5px var(--cream), 0 0 0 9px var(--navy); }
.trail__dog { position: absolute; left: 0; top: 0; width: 74px; z-index: 3; pointer-events: none; will-change: transform; }
.trail__flip { transform-origin: 50% 100%; }
.trail__flip svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 8px rgba(19,35,58,.3)); }
@media (max-width: 1100px) and (min-width: 701px) { .trail__medal { width: 108px; } .trail__text small { font-size: .78rem; } }
@media (max-width: 700px) {
  .trail { grid-template-columns: 1fr; row-gap: 30px; padding-top: 6px; }
  a.trail__stop:nth-of-type(n) { grid-column: auto; grid-row: auto; }
  .trail__stop { grid-template-columns: 96px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; justify-items: start; align-items: center; text-align: left; }
  .trail__medal { width: 96px; grid-row: 1 / 3; grid-column: 1; }
  .trail__no { grid-column: 2; align-self: end; }
  .trail__text { grid-column: 2; align-self: start; }
  a.trail__stop:nth-of-type(even) { grid-template-columns: 1fr 96px; justify-items: end; text-align: right; }
  a.trail__stop:nth-of-type(even) .trail__medal { grid-column: 2; }
  a.trail__stop:nth-of-type(even) .trail__no, a.trail__stop:nth-of-type(even) .trail__text { grid-column: 1; }
  .trail__dog { width: 60px; }
}
/* v17.2 the six commands as one even grid: same size, same alignment (3 × 2 on phones, one row on wide screens) */
.pl__cmds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(440px, 92vw); }
.pl__cmds button { justify-content: center; width: 100%; min-height: 48px; padding: 8px 10px; font-size: .86rem; line-height: 1.15; text-align: center; }
.pl__cmds button span { flex: none; }
@media (min-width: 760px) { .pl__cmds { grid-template-columns: repeat(6, 1fr); width: min(780px, 92vw); } }
@media (max-width: 380px) { .pl__cmds button { font-size: .8rem; padding: 8px 6px; gap: 5px; } }
.pl__meta { justify-content: center; }
.pl__cmds button { animation: plCmdIn .55s var(--ease) both; }
.pl__cmds button:nth-child(1) { animation-delay: .35s; } .pl__cmds button:nth-child(2) { animation-delay: .41s; } .pl__cmds button:nth-child(3) { animation-delay: .47s; }
.pl__cmds button:nth-child(4) { animation-delay: .53s; } .pl__cmds button:nth-child(5) { animation-delay: .59s; } .pl__cmds button:nth-child(6) { animation-delay: .65s; }
.pl__cmds button.is-hit { animation: cmdHit .45s var(--ease); }
@keyframes plCmdIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* v17.4 (03) on phones: the prism is sized from the space that is left, so the description, "Ask about this" and the dots
   always fit above the walking dog and the Sections pill. The title already sits on the prism face, so it is not repeated. */
@media (max-width: 900px) {
  .pstage__grid { container-type: size; padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .pinfo h3 { display: none; }
  .pinfo p { margin-top: 0; }
  .prism { --fw: min(72vw, 320px, calc((100cqh - 214px) / 1.12)); }
}
@media (max-width: 900px) and (max-height: 760px) { .prism { --fw: min(72vw, 320px, calc((100cqh - 160px) / 1.12)); } }
@media (max-width: 900px) { .pinfo .prog__tags { display: none; } }
@media (max-width: 900px) and (max-height: 760px) { .prism { --fw: min(72vw, 320px, calc((100cqh - 140px) / 1.12)); } }
.programmes.section { padding-bottom: 0; }   /* v17.8 the badges under the prism are gone: no empty band before (04) */
@media (min-width: 901px) {
  .rail__track { position: absolute; right: 11px; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: rgba(128,128,128,.26); }
  .rail__ticks i { position: absolute; left: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: rgba(128,128,128,.55); top: calc(var(--t, 0) * (100% - 26px) + 13px); transition: background .3s; }
  .rail__ticks i.is-done { background: var(--gold); }
  .rail__thumb { position: absolute; left: 50%; width: 7px; height: 26px; margin-left: -3.5px; border-radius: 5px; background: var(--gold); box-shadow: 0 0 0 3px rgba(192,154,85,.22), 0 4px 10px rgba(0,0,0,.25); top: calc(var(--p, 0) * (100% - 26px)); }
  .rail__bubble { position: absolute; right: 16px; top: 50%; white-space: nowrap; padding: 6px 11px; border-radius: 999px; background: var(--navy); color: var(--cream); font-size: .76rem; font-weight: 700; font-style: normal;
    box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); opacity: 0; transform: translate(8px, -50%); pointer-events: none; transition: opacity .3s, transform .4s var(--ease); }
  .rail__bubble small { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold-2); margin-right: 6px; font-size: .86rem; }
  .rail__bubble.is-on { opacity: 1; transform: translate(0, -50%); }
  .rail:hover .rail__bubble { opacity: 0; }
  .rail__panel { position: absolute; right: 24px; top: 50%; width: 260px; max-height: min(78vh, 640px); overflow-y: auto; overscroll-behavior: contain; padding: 12px 8px 8px; border-radius: 18px;
    background: rgba(246,239,226,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 60px -24px rgba(19,35,58,.55), 0 0 0 1px rgba(19,35,58,.06);
    opacity: 0; visibility: hidden; transform: translate(14px, -50%); transition: opacity .3s, transform .45s var(--ease), visibility 0s .45s; }
  .rail:hover .rail__panel, .rail:has(.rail__item:focus-visible) .rail__panel { opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity .3s, transform .45s var(--ease), visibility 0s; }
  .rail.is-closed .rail__panel { opacity: 0; visibility: hidden; transform: translate(14px, -50%); }
  .rail__title { margin: 0 10px 6px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .rail__item { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 10px; color: var(--navy); font-size: .86rem; font-weight: 600; line-height: 1.25; text-decoration: none; transition: background .2s; }
  .rail__item small { min-width: 22px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .92rem; color: var(--gold-deep); }
  .rail__item:hover { background: rgba(192,154,85,.16); }
  .rail__item.is-current { background: var(--navy); color: var(--cream); }
  .rail__item.is-current small { color: var(--gold-2); }
}
@media (min-width: 901px) { .rail__bubble { background: var(--gold); color: var(--navy); } .rail__bubble small { color: var(--navy); opacity: .7; } }
/* v18.3 only the gold thumb shows on the rail: no section dots, no track line */
@media (min-width: 901px) { .rail__ticks { display: none; } .rail__track { background: transparent; } }
/* v18.5 the words above the dog in the loading screen stay a little longer */
.fx__pop.is-on { animation: fxPop 2.3s var(--ease) forwards; }
@keyframes fxPop { 0% { opacity: 0; margin-top: 12px; } 12% { opacity: 1; margin-top: 0; } 80% { opacity: 1; } 100% { opacity: 0; margin-top: -26px; } }
/* v18.8 the dog's "next section" bubble reads on every background */
.pup__tip { border-width: 1.5px; }
.pup.on-dark .pup__tip { background: var(--cream); color: var(--navy); border-color: var(--gold); box-shadow: 0 14px 30px -12px rgba(0,0,0,.6), 0 0 0 4px rgba(220,189,124,.18); }
.pup.on-dark .pup__tip .ico { color: var(--gold-deep); }
/* v19.0 phones: the "Sections" pill is small and discreet — glassy, thin gold edge; while scrolling it shrinks to its icon
   (with the reading-progress ring) and opens back to "Sections" a moment after you stop */
@media (max-width: 900px) {
  .action-bar { right: 12px; padding: 3px; border: 1px solid rgba(220,189,124,.3); background: rgba(19,35,58,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 24px -12px rgba(0,0,0,.55); }
  .action-bar__btn--nav { padding: 3px 12px 3px 3px; gap: 7px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; background: transparent; }
  .action-bar__btn--nav .nav-ring { width: 30px; height: 30px; }
  .action-bar__btn--nav > span:last-child { display: inline-block; max-width: 110px; overflow: hidden; white-space: nowrap; transition: max-width .45s var(--ease), opacity .3s, margin .45s var(--ease); }
  .action-bar.is-compact .action-bar__btn--nav { padding-right: 3px; }
  .action-bar.is-compact .action-bar__btn--nav > span:last-child { max-width: 0; opacity: 0; margin-left: -7px; }
  .action-bar__btn--nav { transition: padding .45s var(--ease); }
}
/* v19.1 first appearance of the dog: a one-time invitation to tap him */
.pup__tip.is-intro .ico { display: none; }
.pup.is-tip .pup__tip.is-intro, .pup.is-walking .pup__tip.is-intro { opacity: 1; transform: none; }
.pup__tip.is-intro { background: var(--gold); color: var(--navy); border-color: var(--gold); box-shadow: 0 14px 30px -12px rgba(0,0,0,.5), 0 0 0 5px rgba(220,189,124,.22); }
/* v19.2 the trail gets a starting point before "Puppy": the dog waits there and comes back there after every trip */
.trail { grid-template-columns: minmax(110px, .62fr) repeat(4, 1fr); }
.trail__stop--start { grid-column: 1; grid-row: 1; cursor: default; }
a.trail__stop:nth-of-type(1) { grid-column: 2; grid-row: 1; } a.trail__stop:nth-of-type(2) { grid-column: 3; grid-row: 1; }
a.trail__stop:nth-of-type(3) { grid-column: 4; grid-row: 1; } a.trail__stop:nth-of-type(4) { grid-column: 5; grid-row: 1; }
a.trail__stop:nth-of-type(5) { grid-column: 5; grid-row: 2; } a.trail__stop:nth-of-type(6) { grid-column: 4; grid-row: 2; }
a.trail__stop:nth-of-type(7) { grid-column: 3; grid-row: 2; } a.trail__stop:nth-of-type(8) { grid-column: 2; grid-row: 2; }
.trail__medal--start { width: clamp(78px, 7vw, 96px); margin-top: clamp(14px, 1.6vw, 22px); background: var(--navy); color: var(--gold-2); }
.trail__medal--start svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trail__medal--start svg path:last-child { fill: rgba(220,189,124,.35); }
.trail__stop--start .trail__text strong { font-size: clamp(.95rem, 1.1vw, 1.05rem); }
@media (max-width: 1100px) and (min-width: 701px) { .trail__medal { width: 96px; } .trail__medal--start { width: 70px; } .trail__text small { font-size: .74rem; } }
@media (max-width: 700px) {
  .trail { grid-template-columns: 1fr; }
  .trail__stop--start { grid-column: auto; grid-row: auto; grid-template-columns: 1fr 96px; justify-items: end; text-align: right; }
  .trail__stop--start .trail__medal { grid-column: 2; width: 72px; margin: 0 12px 0 0; justify-self: center; }
  .trail__stop--start .trail__no, .trail__stop--start .trail__text { grid-column: 1; }
  a.trail__stop:nth-of-type(n) { grid-column: auto; grid-row: auto; }
}

/* v19.3 — Safari hit-tests the tilted 3D floor/garden in front of the buttons: only the ball stays clickable */
.fx__world, .fx__world * { pointer-events: none; }
.fx__ball, .fx__ball * { pointer-events: auto; }
.pl__cmds, .pl__meta, .pl__enter, .pl__lang { position: relative; z-index: 5; }
/* v19.4 — (02) deck arrows (dark section) */
.pdeck__arrow { width: 46px; height: 46px; flex: none; border-color: rgba(246,239,226,.28); color: var(--cream); }
.pdeck__arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.pdeck__arrow .ico { width: 18px; height: 18px; }
@media (max-width: 600px) { .pdeck-foot { gap: 10px; } .pdeck__hint { display: none; } .pdeck__arrow { width: 42px; height: 42px; } }
@media (min-width: 601px) { .pdeck-foot { justify-content: flex-end; } .pdeck__hint { order: -1; margin-right: 6px; } }

/* v19.6 — (02) deck: the cards take their height from the room that is really left on screen, so a card is never cut
   (the title stays clear of the header and the card bottoms stay above the arrows) */
.problems__stage { justify-content: flex-start; }
.problems__head { flex: none; margin-top: auto; }
.pdeck-view { flex: 0 1 calc(470px + 56px); min-height: 0; container-type: size; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.pdeck-foot { flex: none; margin-bottom: auto; padding-top: 4px; }
.pcard { --chh: min(470px, calc(100cqh - 40px)); height: var(--chh) !important; min-height: 0 !important; width: min(clamp(250px, 21vw, 300px), calc(var(--chh) * .7)); }
.pcard__art { max-height: max(70px, calc(var(--chh) - 230px)); }
@media (max-width: 900px) {
  .pdeck-view { flex-basis: calc(460px + 40px); }
  .pcard { --chh: min(460px, calc(100cqh - 30px)); width: min(78vw, 330px, calc(var(--chh) * .78)); }
  .pcard__art { max-height: max(64px, calc(var(--chh) - 210px)); }
}
@media (min-width: 901px) {
  .pcard { width: min(clamp(250px, 21vw, 300px), max(236px, calc(var(--chh) * .7))); }
}
@media (min-width: 901px) and (max-height: 680px) {
  .pcard__front { padding: 20px; }
  .pcard__no { font-size: 2.6rem; }
  .pcard__t { font-size: 1.3rem; margin: 10px 0 10px; hyphens: auto; -webkit-hyphens: auto; }
  .pcard__art { max-height: max(70px, calc(var(--chh) - 190px)); }
}
/* v19.8 — desktop scene transitions: the shadow a leaving section sinks under */
.sec-veil { position: absolute; inset: 0; z-index: 60; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(8,16,28,.12), rgba(8,16,28,.5)); }
@media (max-width: 900px) { .sec-veil { display: none; } }
/* v20.1 — the rising sheet: side strips + rounded corners in the colour of the section above, shrunk away with transforms */
.sec-sheet { --c: var(--cream); position: absolute; inset: 0; z-index: 61; pointer-events: none; visibility: hidden; }
.sec-sheet i { position: absolute; top: 0; bottom: 0; width: 3.2%; background: var(--c); will-change: transform; }
.sec-sheet i:first-child { left: 0; transform-origin: 0 0; }
.sec-sheet i:nth-child(2) { right: 0; transform-origin: 100% 0; }
.sec-sheet u { position: absolute; left: 0; right: 0; top: -1px; height: clamp(90px, 10vw, 170px); transform-origin: 50% 0; will-change: transform;
  background: radial-gradient(ellipse 50.4% 100% at 50% 100%, transparent 99.2%, var(--c) 100%); }
@media (max-width: 900px) { .sec-sheet { display: none; } }
.sec-veil { visibility: hidden; will-change: opacity; }

/* =========================================================
   v21 motion system (motion.js)
   ========================================================= */
/* odometer digits */
.kicker > span:first-child, .contact__phone-num { font-variant-numeric: tabular-nums; }
.is-rolling { display: inline-block; white-space: nowrap; line-height: 1; vertical-align: baseline; }
.is-rolling .odo, .is-rolling .odo__c { display: inline-block; height: 1em; line-height: 1em; vertical-align: top; }
.is-rolling .odo { overflow: hidden; }
.is-rolling .odo__r { display: block; will-change: transform; }

/* paragraphs rising line by line */
.ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.lni { display: inline-block; transform-origin: 0 100%; will-change: transform; }

/* gold words catch a foil shine */
.is-shine em .wi, .contact__title.is-shine em .wi {
  background-image: linear-gradient(100deg, currentColor 0 38%, #fff3d2 47%, #ffffff 50%, #fff3d2 53%, currentColor 62% 100%);
  background-size: 280% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: foil 1.9s cubic-bezier(.3, .6, .25, 1) both;
}
.is-shine em .w:nth-child(2) .wi { animation-delay: .08s; } .is-shine em .w:nth-child(3) .wi { animation-delay: .16s; } .is-shine em .w:nth-child(4) .wi { animation-delay: .24s; }
@keyframes foil { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* chapter numbers drifting behind the headings */
/* drawn above the content (thin, faint outline, no clicks) so the moving layer never forces Safari to repaint the section under it */
.chap { position: absolute; z-index: 3; top: clamp(30px, 6vw, 110px); right: clamp(-40px, -2vw, 0px); pointer-events: none; user-select: none;
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(8rem, 19vw, 19rem); line-height: .8; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.2px rgba(192,154,85,.55); opacity: 0; will-change: transform, opacity; }
.problems .chap, .pillars .chap, .results .chap, .plan .chap, .insta .chap { -webkit-text-stroke-color: rgba(220,189,124,.42); }
@media (max-width: 900px) { .chap { font-size: 46vw; top: 14px; right: -6vw; -webkit-text-stroke-width: 1px; } }

/* (05) the loop around "ring" */
.ring__h em { position: relative; }
.ring-loop { position: absolute; left: -12%; right: -14%; top: -6%; bottom: -14%; width: 126%; height: 120%; overflow: visible; pointer-events: none; }
.ring-loop path { fill: none; stroke: var(--gold-2); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 4px 14px rgba(220,189,124,.35)); }

/* (07) "a story." typed out */
#stories-title em .tc { opacity: 0; }
#stories-title em .tc.is-on { opacity: 1; }
.tw-caret { display: inline-block; position: relative; width: 0; height: .9em; vertical-align: baseline; }
.tw-caret::after { content: ""; position: absolute; left: .04em; bottom: -.08em; width: .055em; height: .95em; border-radius: 2px; background: currentColor; animation: caretBlink .9s steps(1) infinite; }
.tw-caret.is-done::after { animation: none; opacity: 0; transition: opacity .6s; }
@keyframes caretBlink { 50% { opacity: 0; } }
/* v21.4 — the WhatsApp button (bottom right) never sits on the section arrows on mid-size screens */
@media (min-width: 901px) and (max-width: 1480px) {
  .pdeck-foot { padding-right: max(var(--gutter, 24px), calc(110px - (100vw - min(100vw, 1360px)) / 2)); }
  .pnav { padding-right: 84px; }
}
/* v22.4 — phones get the prism arrows too (same row as the dots, nothing taller) */
@media (max-width: 900px) {
  .pnav { gap: 10px; }
  .pnav .round-btn { display: grid; width: 42px; height: 42px; flex: none; }
  .pnav .round-btn .ico { width: 17px; height: 17px; }
  .pnav__dots { gap: 5px; flex: 1 1 auto; min-width: 0; justify-content: center; }
  .pnav__dots button { width: auto; flex: 1 1 0; max-width: 30px; height: 4px; }
  .pnav .round-btn.pnav__all { margin-left: 4px; }
}
/* v22.5 — wide screens: the 9 stops spread evenly over the full width — 5 on top (start + 01–04),
   05–08 sit in the gaps below, so the path zigzags evenly and no slot is left empty */
@media (min-width: 701px) {
  .trail { grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: 12px; row-gap: clamp(36px, 4.5vw, 70px); }
  .trail__stop--start { grid-column: 1 / 3; grid-row: 1; }
  a.trail__stop:nth-of-type(1) { grid-column: 3 / 5; grid-row: 1; } a.trail__stop:nth-of-type(2) { grid-column: 5 / 7; grid-row: 1; }
  a.trail__stop:nth-of-type(3) { grid-column: 7 / 9; grid-row: 1; } a.trail__stop:nth-of-type(4) { grid-column: 9 / 11; grid-row: 1; }
  a.trail__stop:nth-of-type(5) { grid-column: 8 / 10; grid-row: 2; } a.trail__stop:nth-of-type(6) { grid-column: 6 / 8; grid-row: 2; }
  a.trail__stop:nth-of-type(7) { grid-column: 4 / 6; grid-row: 2; } a.trail__stop:nth-of-type(8) { grid-column: 2 / 4; grid-row: 2; }
}
/* v22.6 — the "how to open" line sits under the book, not on its cover */
.cover__open { display: none; }
.book__hint { margin: 14px auto 10px; padding: 0 var(--gutter, 20px); text-align: center; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); animation: nudge 1.8s var(--ease) infinite; transition: opacity .3s; }
@media (max-width: 900px) { .book__hint { margin: 10px auto 6px; font-size: .68rem; } }
/* v23.1 — card backs: the full text always shows (no "…"); the photo takes what room is left, the type scales with --k */
.pcard__back .pcard__img { flex: 1 1 auto; height: auto; min-height: 64px; max-height: 42%; }
.pcard__back .pcard__body { flex: none; padding: calc(16px * var(--k, 1)) 18px calc(18px * var(--k, 1)); }
.pcard__d { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: calc(.88rem * var(--k, 1)); }
.pcard__case { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: calc(.98rem * var(--k, 1)); margin-top: calc(10px * var(--k, 1)); }
.pcard__how { font-size: calc(.68rem * var(--k, 1)); }
.pcard__cta { font-size: calc(.82rem * var(--k, 1)); margin-top: calc(12px * var(--k, 1)); }
.pcard__back.is-tight .pcard__img { display: none; }
.pcard__back.is-scroll .pcard__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* =========================================================
   v23.4 phones
   ========================================================= */
@media (max-width: 900px) {
  /* no giant outlined section numbers on small screens */
  .chap { display: none !important; }

  /* (02) the photos show whole, over a soft blurred copy of themselves */
  .stack__img { background: var(--navy-2); isolation: isolate; }
  .stack__img::before { content: ""; position: absolute; inset: -24px; z-index: 0; background: var(--bg) center / cover no-repeat; filter: blur(18px) brightness(.72) saturate(1.1); transform: scale(1.08); }
  .stack__img img { z-index: 1; object-fit: contain !important; }

  /* (04) all the problems at once, in a grid — no sideways deck */
  .problems__stage { height: auto; min-height: 0; overflow: visible; justify-content: flex-start; padding-bottom: 46px; }
  .problems__head { margin-top: 0; }
  .pdeck-view { flex: none; container-type: normal; display: block; padding: 18px var(--gutter) 0; overflow: visible; }
  .pdeck { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: auto !important; transform: none !important; }
  .pcard { --chh: 250px; width: auto !important; height: auto !important; aspect-ratio: 3 / 4; min-height: 0 !important; }
  .pcard__front { padding: 14px 14px 13px; border-radius: 20px; }
  .pcard__no { font-size: 1.7rem; }
  .pcard__art { max-height: none; margin-top: auto; }
  .pcard__t { font-size: 1.02rem; margin: 8px 0 7px; line-height: 1.1; }
  .pcard__tap { font-size: .6rem; letter-spacing: .1em; gap: 6px; }
  .pcard__tap i { width: 20px; height: 20px; font-size: .7rem; }
  .pdeck-foot { display: none !important; }
}
@media (max-width: 360px) { .pcard__t { font-size: .92rem; } }

/* the answer window (phones) */
.fixm { position: fixed; inset: 0; z-index: 5200; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); visibility: hidden; pointer-events: none; }
.fixm.is-open { visibility: visible; pointer-events: auto; }
.fixm__bg { position: absolute; inset: 0; background: rgba(8,16,28,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s var(--ease); }
.fixm.is-open .fixm__bg { opacity: 1; }
.fixm__panel { position: relative; width: min(560px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: 26px; background: var(--cream); color: var(--navy); box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }
.fixm__x { position: absolute; z-index: 3; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(12,24,40,.78); color: var(--cream); border: 1px solid rgba(246,239,226,.25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fixm__x svg { width: 20px; height: 20px; }
.fixm__img { position: relative; margin: 0; height: min(42svh, 340px); overflow: hidden; border-radius: 26px 26px 0 0; background: var(--navy-2); isolation: isolate; }
.fixm__img::before { content: ""; position: absolute; inset: -24px; z-index: 0; background: var(--bg) center / cover no-repeat; filter: blur(18px) brightness(.72); transform: scale(1.08); }
.fixm__img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.fixm__body { padding: 18px 20px 22px; }
.fixm__no { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--gold-deep); line-height: 1; }
.fixm__t { margin: 6px 0 12px; font-size: 1.5rem; line-height: 1.08; letter-spacing: -.03em; font-weight: 700; }
.fixm__content .pcard__how { font-size: .7rem; }
.fixm__content .pcard__d { font-size: .98rem; line-height: 1.55; margin-top: 8px; }
.fixm__content .pcard__case { font-size: 1.06rem; margin-top: 14px; }
.fixm__content .pcard__cta { margin-top: 18px; font-size: .9rem; padding: .75em 1.2em; }
@media (max-width: 900px) { .pcard__back { display: none; } .pcard.is-flipped .pcard__inner { transform: none; } }
/* v23.7 — small phones: the "6/6" bar stops short of the "Every box ticked" stamp */
@media (max-width: 640px) { .checklist__score { padding-right: 122px; } }
/* v23.8 — playground: Safari doesn't stretch a grid item that has an aspect-ratio, so the stage stayed small on tablets/phones */
@media (max-width: 900px) { .stage { width: 100%; } }
/* tablets: stage and commands side by side again, like on desktop */
@media (min-width: 640px) and (max-width: 900px) {
  .play__grid { grid-template-columns: 1.15fr .85fr; align-items: start; }
  .stage { aspect-ratio: 1 / 1.05; }
  .controls__grid { grid-template-columns: repeat(2, 1fr); }
  .cmd { aspect-ratio: 1 / .78; }
}
/* v23.9 — big screens: the prism and the book grow with the screen (still limited by the height that is really there) */
@media (min-width: 1500px) {
  .prism { --fw: min(23vw, 430px, calc((100cqh - 76px) / 1.3)); }
  .book { --pw: min(26vw, 500px, calc((100svh - 330px) / 1.32)); }
}
@media (min-width: 1500px) and (max-height: 760px) { .book { --pw: min(26vw, 500px, calc((100svh - 250px) / 1.32)); } }
@media (min-width: 2200px) {
  .prism { --fw: min(23vw, 560px, calc((100cqh - 76px) / 1.3)); }
  .book { --pw: min(26vw, 640px, calc((100svh - 330px) / 1.32)); }
}
/* v24.2 — counters keep a steady width while they count */
[data-count] { display: inline-block; font-variant-numeric: tabular-nums; text-align: center; }

/* v24.2 — (04) desktop: a slider to browse the problems (replaces the arrows) */
.pdeck-foot { justify-content: center !important; gap: 18px; padding-right: 0 !important; }
.pdeck__lbl { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--gold-2); min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.pdeck__lbl--end { color: rgba(246,239,226,.45); }
.pdeck__range { --p: 0; -webkit-appearance: none; appearance: none; width: min(560px, 54vw); height: 34px; margin: 0; background: transparent; cursor: grab; touch-action: pan-y; }
.pdeck__range:active { cursor: grabbing; }
.pdeck__range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold-2) 0 calc(var(--p) * 100%), rgba(246,239,226,.16) calc(var(--p) * 100%) 100%); }
.pdeck__range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(246,239,226,.16); }
.pdeck__range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--gold-2); }
.pdeck__range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: var(--gold); border: 3px solid var(--navy-2); box-shadow: 0 0 0 1.5px var(--gold-2), 0 8px 18px -6px rgba(0,0,0,.6); transition: transform .25s var(--ease), box-shadow .25s; }
.pdeck__range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); border: 3px solid var(--navy-2); box-shadow: 0 0 0 1.5px var(--gold-2); }
.pdeck__range:hover::-webkit-slider-thumb, .pdeck__range:focus-visible::-webkit-slider-thumb { transform: scale(1.18); box-shadow: 0 0 0 1.5px var(--gold-2), 0 0 0 9px rgba(220,189,124,.18), 0 8px 18px -6px rgba(0,0,0,.6); }
.pdeck__range:active::-webkit-slider-thumb { transform: scale(1.28); }
.pdeck__range:focus-visible { outline: none; }
/* v24.2 — the book takes its size from the room that is really left between the heading and the hint/bar under it,
   so it is never cut at the bottom (whatever the window or browser bars) */
@supports (height: 1cqh) {
  .book { container-type: size; min-height: 0; }
  @media (min-width: 901px) {
    .book { --pw: min(28vw, 400px, calc((100cqh - 44px) / 1.32)); }
  }
  @media (min-width: 1500px) { .book { --pw: min(26vw, 500px, calc((100cqh - 44px) / 1.32)); } }
  @media (min-width: 2200px) { .book { --pw: min(26vw, 640px, calc((100cqh - 44px) / 1.32)); } }
  @media (max-width: 900px) { .book { --pw: min(80vw, calc((100cqh - 24px) / 1.42)); } }
}
/* v24.8 — the sheet (entering) and the veil (leaving) only ever show within one screen of the section's top / bottom:
   keep their layers that size instead of the whole (sometimes 5000px tall) section, so Safari never paints giant layers */
.sec-sheet { top: 0; bottom: auto; height: min(100%, 110vh); }
.sec-veil { top: auto; bottom: 0; height: min(100%, 110vh); }
.sec-veil { will-change: auto; visibility: hidden; opacity: 0; transition: opacity .9s ease, visibility 0s linear .9s; }
.is-sinking > .sec-veil { visibility: visible; opacity: .85; transition: opacity .9s ease, visibility 0s; }
/* v25.2 — the rail thumb is moved with a transform from JS (no per-frame layout) */
@media (min-width: 901px) { .rail__thumb { top: 0 !important; will-change: transform; } }
.rail__thumb { top: 0; }
.pdeck__lbl--end { color: rgba(246,239,226,.62); }   /* v25.5 contrast ≥ 4.5 */

/* =========================================================
   v25.7 phones held sideways (landscape, very short screens):
   the one-screen stages grow to fit their content instead of squeezing it
   ========================================================= */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  /* (03) programmes: prism and its text side by side */
  .pstage { height: auto; min-height: 100svh; overflow: visible; }
  .pstage__grid { container-type: normal; grid-template-columns: auto 1fr; grid-template-rows: auto; align-items: center; gap: 28px; padding-bottom: 70px; }
  .prism { --fw: min(30vw, 230px) !important; --fh: calc(var(--fw) * 1.12); }
  .pinfo p { display: block; }
  /* (07) the book: a real size, the section simply gets taller */
  .stories__pin { height: auto; min-height: 100svh; overflow: visible; padding-bottom: 20px; }
  .book { container-type: normal; flex: none; padding: 18px 0 8px; }
  .book { --pw: min(34vw, 270px) !important; --ph: calc(var(--pw) * 1.42); }
  .book__bar { margin-bottom: 70px; }
  /* (05) the ring: room for the photos */
  .ring { height: auto; min-height: 640px; }
  .ring__stage { --rw: min(22vw, 170px); }
  /* (04) the problem grid: three columns fit a wide phone */
  .pdeck { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pcard { aspect-ratio: 4 / 4.4; }
}
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .stories__scroll { height: auto; min-height: 100svh; }
  .pstage__grid { gap: 110px; }
  .prism { margin-left: 100px; }
  .ring { min-height: 740px; }
  .ring__scene { top: 60% !important; }
}
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .ring__pin { height: 740px; }
}
/* v26.1 — very narrow phones (Greek texts are longer): buttons may wrap and tighten a little, the text is never cut */
@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; line-height: 1.2; padding-left: 18px; padding-right: 18px; font-size: .94rem; }
  .btn .ico { flex: none; }
}
/* v26.2 — the inactive language reads clearly (contrast ≥ 4.5 on both header themes) */
.header:not([data-theme="dark"]) .lang__btn:not(.is-active) { color: var(--navy); }
.header[data-theme="dark"] .lang__btn:not(.is-active) { color: var(--cream); }
.menu-open .header .lang__btn:not(.is-active) { color: var(--cream); }
/* v26.4 — the fixed footer behind the page is its own layer from the start, so revealing it never stalls a frame */
.js-reveal .footer { will-change: transform; transform: translateZ(0); }
.contact__bg { will-change: transform; }

/* ===== v27: loader on phones — scene centred inside the padding, language pill back in its corner ===== */
.fx { width: min(760px, 100%); }
.pl__lang { position: absolute; }
.fx__floor, .fx__shadow { z-index: 0; }
.fx__pop, .fx__click { z-index: 9000; }

/* v27 rail: only the gold thumb (and a thin strip around its line) takes the pointer; the panel opens from the thumb, not the whole right edge */
@media (min-width: 901px) {
  .rail.is-visible { pointer-events: none; }
  .rail.is-visible .rail__track { pointer-events: auto; cursor: pointer; }
  .rail__track::before { content: ""; position: absolute; top: 0; bottom: 0; left: -6px; right: -6px; }
  .rail__track::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: rgba(128,128,128,.28); opacity: 0; transition: opacity .3s; }
  .rail.is-open .rail__track::after, .rail.is-drag .rail__track::after, .rail__track:hover::after { opacity: 1; }
  .rail__thumb { z-index: 1; cursor: grab; transition: width .25s, margin .25s; }
  .rail__thumb::before { content: ""; position: absolute; inset: -8px -9px; }
  .rail.is-open .rail__thumb, .rail.is-drag .rail__thumb { width: 9px; margin-left: -4.5px; }
  .rail.is-drag .rail__thumb { cursor: grabbing; }
  .rail.is-drag, .rail.is-drag * { user-select: none; -webkit-user-select: none; }
  .has-cursor .rail__thumb, .has-cursor .rail__track { cursor: none; }
  .rail:hover .rail__panel { opacity: 0; visibility: hidden; transform: translate(14px, -50%); transition: opacity .3s, transform .45s var(--ease), visibility 0s .45s; }
  .rail.is-open .rail__panel, .rail:has(.rail__item:focus-visible) .rail__panel { opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity .3s, transform .45s var(--ease), visibility 0s; pointer-events: auto; }
  .rail.is-closed .rail__panel, .rail.is-drag .rail__panel { opacity: 0; visibility: hidden; transform: translate(14px, -50%); }
  .rail:hover .rail__bubble.is-on { opacity: 1; }
  .rail.is-open .rail__bubble, .rail.is-drag .rail__bubble { opacity: 0; }
}
.wa-float__ping { pointer-events: none; }
/* v27 no gold frame around the section you jump to */
.is-spot::after { display: none; }

/* v27 (04) phone answer window: always whole on screen — the photo shrinks to make room, then the text scales a touch (--fk) */
.fixm__panel { display: flex; flex-direction: column; overflow: hidden; --fk: 1; }
.fixm__img { flex: 0 1 min(42svh, 340px); height: auto; min-height: 96px; }
.fixm__img img { position: absolute; inset: 0; z-index: 1; transition: opacity .25s; }
.fixm__body { flex: none; padding: calc(18px * var(--fk)) 20px calc(22px * var(--fk)); }
.fixm__no { font-size: calc(1.5rem * var(--fk)); }
.fixm__t { font-size: calc(1.5rem * var(--fk)); margin: calc(6px * var(--fk)) 0 calc(12px * var(--fk)); }
.fixm__content .pcard__how { font-size: calc(.7rem * var(--fk)); }
.fixm__content .pcard__d { font-size: calc(.98rem * var(--fk)); line-height: 1.5; margin-top: calc(8px * var(--fk)); }
.fixm__content .pcard__case { font-size: calc(1.06rem * var(--fk)); margin-top: calc(14px * var(--fk)); }
.fixm__content .pcard__cta { margin-top: calc(18px * var(--fk)); font-size: calc(.9rem * var(--fk)); }
.leaf__face { opacity: var(--fo, 1); }

/* v27 (09) plan on phones: compact two-column answers so a whole question fits on the screen; one steady height for all three */
@media (max-width: 900px) {
  .quiz { --qk: 1; padding: 18px 14px 14px; border-radius: 26px; }
  .quiz__top { margin-bottom: calc(14px * var(--qk)); font-size: .82rem; }
  .quiz__slide legend { font-size: calc(1.32rem * var(--qk)); margin-bottom: calc(12px * var(--qk)); }
  .quiz__hint { margin: calc(-4px * var(--qk)) 0 calc(10px * var(--qk)); font-size: calc(.82rem * var(--qk)); }
  .opts, .opts--6 { grid-template-columns: 1fr 1fr; gap: calc(8px * var(--qk)); }
  .opt--wide { grid-column: span 2; }
  .opt, .opts--6 .opt { padding: calc(10px * var(--qk)) 10px; column-gap: 8px; border-radius: 14px; font-size: calc(.86rem * var(--qk)); line-height: 1.2; }
  .opt__e { width: calc(30px * var(--qk)); height: calc(30px * var(--qk)); font-size: calc(1.05rem * var(--qk)); border-radius: 9px; }
  .opt small { font-size: calc(.72rem * var(--qk)); }
  .quiz__next { margin-top: calc(12px * var(--qk)); width: 100%; justify-content: center; }
  .quiz__nav { margin-top: calc(10px * var(--qk)); }
  .quiz__slides { transition: transform .7s var(--ease); }
}
@media (hover: none) { .opt:hover { transform: none; } .opt:hover .opt__e { transform: none; } }
/* the many goals: small tiles, the icon above the words, so long words never break in the middle */
@media (max-width: 900px) {
  .opt > span:last-child { overflow-wrap: normal; }
  .opts--6 .opt { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: calc(5px * var(--qk)); padding: calc(9px * var(--qk)) 10px; }
  .opts--6 .opt__e { width: calc(26px * var(--qk)); height: calc(26px * var(--qk)); font-size: calc(.95rem * var(--qk)); border-radius: 8px; }
}
/* v27 loader on a phone held sideways: everything, Enter included, fits the short screen */
@media (max-height: 520px) and (orientation: landscape) {
  .pl { gap: 6px; }
  .pl__logo { width: min(200px, 30vw); }
  .pl__hint { font-size: 1rem; }
  .fx { height: min(36vh, 150px); }
  .pl__cmds button { min-height: 38px; padding: 6px 8px; font-size: .8rem; }
  .pl__enter { padding: 9px 18px; }
}
@media (max-height: 400px) and (orientation: landscape) { .pl__hint { display: none; } .fx { height: min(34vh, 130px); } }
@media (max-height: 340px) and (orientation: landscape) { .pl__logo { width: 150px; } .fx { height: 112px; } .pl__cmds button { min-height: 34px; } }

/* v28 (06) the gold timeline line and its glowing head move on their own layers (smooth on phones) */
.tl__fill, .tl__head { will-change: transform; }
/* v28 (05) ring: no overflow clipping on the 3D photo cards (WebKit can drop a clipped 3D layer for a few frames) — the photo rounds itself */
.ring__item { overflow: visible; }
.ring__item img, .ring__shade { border-radius: inherit; }
.ring__item img { display: block; }

/* v28 (07) phone book pages: the whole photo is shown (no cut heads or dogs), over a soft blurred copy of itself */
@media (max-width: 900px) {
  .page__thumb { position: relative; isolation: isolate; background: var(--navy-2); }
  .page__thumb::before { content: ""; position: absolute; inset: -20px; z-index: 0; background: var(--bg) center / cover no-repeat; filter: blur(14px) brightness(.8); transform: scale(1.08); }
  .page__thumb img { position: relative; z-index: 1; object-fit: contain; }
}
/* v28 (09) phones: the shorter questions get big centred answer tiles that fill the card */
@media (max-width: 900px) {
  .quiz__slide .opt { min-height: var(--oh, 0px); }
  .quiz__slide.is-roomy .opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 12px 8px; }
  .quiz__slide.is-roomy .opt__e { width: calc(46px * var(--qk)); height: calc(46px * var(--qk)); font-size: calc(1.5rem * var(--qk)); border-radius: 14px; }
  .quiz__slide.is-roomy .opt > span:not(.opt__e) { font-size: calc(.98rem * var(--qk)); }
  .quiz__slide.is-roomy .opt small { font-size: calc(.78rem * var(--qk)); }
  .opt.is-picked { box-shadow: 0 10px 26px -10px rgba(192,154,85,.7); }
}
/* v28 (03) prism faces: no overflow clip on the 3D faces themselves (the photo and layers round themselves) */
.pface { overflow: visible; }
.pface img, .pface::before, .pface__shade { border-radius: inherit; }

/* v28 phones: the rising "sheet" of each section, painted with transforms (strips + two rounded corners), not a clip-path */
@media (max-width: 900px) {
  .sec-sheet.sec-sheet--phone { display: block; top: 0; bottom: auto; height: min(100%, 110vh); z-index: 61; }
  .sec-sheet--phone i { width: 5%; }
  .sec-sheet--phone b { position: absolute; top: -1px; width: 40px; height: 40px; will-change: transform; }
  .sec-sheet--phone b:nth-of-type(1) { left: 5%; transform-origin: 0 0; background: radial-gradient(circle at 100% 100%, transparent 39.5px, var(--c) 40px); }
  .sec-sheet--phone b:nth-of-type(2) { right: 5%; transform-origin: 100% 0; background: radial-gradient(circle at 0 100%, transparent 39.5px, var(--c) 40px); }
}

/* v28 (02) the stacked cards scale and their photos zoom while you scroll: keep each on its own layer so nothing is repainted per frame */
.stack__card, .stack__img img, .stack__shade { will-change: transform; }
.stack__img::before { will-change: transform; }
/* v28.2 (09) very short phone screens: answers as compact rows, icon beside the words; sideways phones get three columns */
@media (max-width: 900px) {
  .quiz.is-tight .opts--6 .opt { flex-direction: row; align-items: center; gap: 7px; padding: calc(8px * var(--qk)) 8px; }
  .quiz.is-tight .opts--6 .opt__e { flex: none; width: calc(22px * var(--qk)); height: calc(22px * var(--qk)); font-size: calc(.85rem * var(--qk)); border-radius: 6px; }
  .quiz.is-tight .opts--6 .opt > span:last-child { font-size: max(11px, calc(.84rem * var(--qk))); line-height: 1.15; }
  .quiz.is-tight .quiz__top { margin-bottom: 10px; }
  .quiz.is-tight .quiz__slide legend { margin-bottom: 8px; }
  .quiz.is-wide .opts, .quiz.is-wide .opts--6 { grid-template-columns: repeat(3, 1fr); }
  .quiz.is-wide .opt--wide { grid-column: span 3; }
  .quiz.is-wide .quiz__next { width: auto; margin-top: 10px; }
}
@media (max-width: 360px) { .quiz.is-tight .opts--6 .opt__e { display: none; } }
@media (max-width: 900px) {
  .quiz.is-wide { padding: 12px 14px 10px; }
  .quiz.is-wide .quiz__top { margin-bottom: 6px; }
  .quiz.is-wide .quiz__slide legend { font-size: 1.05rem; margin-bottom: 6px; }
  .quiz.is-wide .quiz__hint { margin: 0 0 6px; }
  .quiz.is-wide .quiz__nav { margin-top: 4px; }
}
/* v28.2 contact background: the photo is already black-and-white (a live filter on this big layer cost one heavy frame as it arrived) */
.contact__bg img { filter: none; }
/* v28.3 the soft backdrops are pre-blurred little images: no live filter, and no backdrop blur on badges that ride on moving cards */
.tl__img::before, .stack__img::before, .fixm__img::before, .page__thumb::before { filter: none !important; }
.tl__img::after { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12,24,40,.78); }
/* v28.5 (06) the photo fills its frame without deciding its height (a card used to grow 24px when its photo arrived, pushing the page) */
.tl__img { position: relative; }
.tl__img img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* v29 loading screen: the 3D garden stays hidden until it is fully built, then fades in as one picture */
.fx { opacity: 0; }
/* v29 (08) plan on phones: bigger, easier answer text */
@media (max-width: 900px) {
  .opt, .opts--6 .opt { font-size: max(14px, calc(1.02rem * var(--qk))); line-height: 1.22; }
  .opt small { font-size: max(12px, calc(.8rem * var(--qk))); }
  .quiz__slide.is-roomy .opt > span:not(.opt__e) { font-size: max(15px, calc(1.1rem * var(--qk))); }
  .quiz__slide.is-roomy .opt small { font-size: max(12px, calc(.84rem * var(--qk))); }
  .quiz__slide legend { font-size: max(19px, calc(1.4rem * var(--qk))); }
  .quiz__hint { font-size: max(13px, calc(.88rem * var(--qk))); }
  .quiz.is-tight .opts--6 .opt > span:last-child { font-size: max(13px, calc(.9rem * var(--qk))); }
}
@media (max-width: 360px) { .quiz.is-tight .opts--6 .opt > span:last-child { font-size: 12.5px; } }

/* v29 (07) storybook on phones: the open book like on a computer — the photo on the left page, the story on the right,
   with pages a little taller so the words stay a comfortable size */
@media (max-width: 900px) {
  .book { --pw: min(46vw, 260px, calc((100cqh - 24px) / 1.62)) !important; --ph: calc(var(--pw) * 1.62) !important; }
  .book__inner { width: calc(var(--pw) * 2); }
  .book__base--left { display: grid; }
  .book__base--right, .leaf { left: var(--pw); }
  .page__thumb { display: none !important; }
  .page--text { padding: 9% 9% 8%; }
  .page__no { position: static; color: var(--gold-deep); text-shadow: none; font-size: .78rem; }
  .page__tag { margin-top: auto; padding: 4px 8px; font-size: max(8.5px, calc(var(--pw) * .046)); letter-spacing: .08em; line-height: 1.25; }
  .page__name { font-size: calc(var(--pw) * .15); margin: 7px 0 6px; }
  .page__text { font-size: max(11.5px, calc(var(--pw) * .068)); line-height: 1.38; }
  .page__sign { font-size: max(10px, calc(var(--pw) * .056)); padding-top: 7px; gap: 5px; }
  .page__sign svg { width: 13px; height: 13px; }
  .polaroid { width: 90%; padding: 5% 5% 3%; }
  .polaroid::before, .polaroid::after { top: -7px; height: 14px; }
  .polaroid figcaption { font-size: calc(var(--pw) * .09); }
  .cover { padding: 10%; }
  .cover__kicker { font-size: max(8px, calc(var(--pw) * .045)); letter-spacing: .18em; }
  .cover__by { font-size: max(9px, calc(var(--pw) * .05)); letter-spacing: .06em; }
  .page__end, .page__starts { font-size: calc(var(--pw) * .1); }
  .page--paw svg, .page__bigpaw { width: 30%; }
}
@media (max-width: 900px) {
  .book { --ph: calc(var(--pw) * 1.8) !important; --pw: min(46vw, 260px, calc((100cqh - 24px) / 1.8)) !important; }
  .page__text { font-size: max(12.5px, calc(var(--pw) * .074)); line-height: 1.4; }
  .page__name { font-size: calc(var(--pw) * .16); }
  .page__tag { font-size: max(9px, calc(var(--pw) * .05)); }
}
@media (max-width: 900px) and (orientation: landscape) { .book { --pw: min(34vw, 270px, calc((100cqh - 24px) / 1.42)) !important; --ph: calc(var(--pw) * 1.42) !important; } }
@media (max-width: 900px) { .page__text { font-size: clamp(12.5px, calc(var(--pw) * .074), 15px); } .page__name { font-size: min(calc(var(--pw) * .16), 34px); } }
/* the very narrowest phones (under 360px) keep the single page, photo above the story */
@media (max-width: 359px) {
  .book { --pw: min(80vw, calc((100cqh - 24px) / 1.42)) !important; --ph: calc(var(--pw) * 1.42) !important; }
  .book__inner { width: var(--pw); }
  .book__base--left { display: none; }
  .book__base--right, .leaf { left: 0; }
  .page__thumb { display: block !important; }
  .page--text { padding: 7% 8% 8%; }
  .page__no { position: absolute; top: 3%; right: 6%; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
  .page__tag { margin-top: 0; }
  .page__name { font-size: calc(var(--pw) * .12); }
  .page__text { font-size: .86rem; line-height: 1.45; }
}
@media (max-width: 359px) {
  .page__thumb { height: 36%; }
  .page__text { font-size: 11.5px; line-height: 1.32; }
  .page__name { font-size: 22px; margin: 6px 0 4px; }
  .page__tag { font-size: 8.5px; padding: 3px 7px; letter-spacing: .06em; }
  .page__sign { font-size: 10px; padding-top: 5px; }
}
@media (max-width: 359px) { .page--text { padding: 6% 7% 6%; } .page__end, .page__starts { font-size: 19px; } .page--text .btn, .page--text p { font-size: 11px; } }

/* v29.1 (03) phones: a shorter title so the programme cards get the room (Greek took four lines and squeezed the prism) */
@media (max-width: 900px) {
  #prog-title { font-size: clamp(1.5rem, 6.4vw, 2rem); line-height: 1.05; }
  .pstage__grid { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .prism { --fw: min(78vw, 330px, calc((100cqh - 150px) / 1.12)) !important; }
}
@media (max-width: 900px) and (max-height: 760px) { .prism { --fw: min(78vw, 330px, calc((100cqh - 128px) / 1.12)) !important; } }
/* v29.1 storybook, last right page on phones: the button and the phone number sized for the small page, words never cut */
@media (max-width: 900px) {
  .book__base--right.page { gap: 10px; padding: 10% 8%; }
  .book__base--right .page__bigpaw { width: 22%; }
  .book__base--right .page__starts { font-size: max(15px, calc(var(--pw) * .1)); line-height: 1.05; }
  .book__base--right .btn { height: auto; min-height: 0; max-width: 100%; padding: 9px 13px; font-size: max(11.5px, calc(var(--pw) * .066)); line-height: 1.2; white-space: normal; text-align: center; border-radius: 999px; }
  .book__base--right .page__phone { font-size: max(12.5px, calc(var(--pw) * .074)); white-space: nowrap; }
}
/* v29.1 (06) the glowing head of the timeline rides the middle of the screen by itself (sticky), so it glides with the finger */
.tl__head { position: sticky; display: block; left: auto; top: calc(50vh - 7px); top: calc(50dvh - 7px); margin: 0 0 0 calc(50% - 7px); transform: none !important; will-change: auto; }
@supports (overflow: clip) { .results { overflow: clip; } }   /* clip, not hidden: lets the timeline head stay sticky */
/* v29.3 (06) the gold line is drawn by the sticky head itself (a long tail above it, cut at the top of the timeline),
   so line and head move together with the scroll on the browser's own compositor — no script, no lag */
@supports (overflow: clip) {
  .tl__line { overflow-x: visible; overflow-y: clip; }
  .tl__fill { display: none; }
  .tl__head::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 50%; width: 3px; height: 9000px; margin-left: -1.5px; background: linear-gradient(0deg, var(--gold) 0, var(--gold-2) 600px, var(--gold-2)); pointer-events: none; }
}

/* v29.4 (05) phones: the photos as a row you swipe through (native scrolling, snaps to the centre) instead of the 3D ring */
.ring.ring--flat { height: auto; min-height: 0; padding: calc(var(--header-h) + 40px) 0 calc(92px + env(safe-area-inset-bottom)); }
.ring--flat .ring__pin { height: auto; overflow: visible; display: flex; flex-direction: column; }
.ring--flat .ring__kicker { position: static; margin: 0 var(--gutter) 12px; }
.ring--flat .ring__count { position: absolute; top: 0; right: var(--gutter); bottom: auto; margin: 0; }
.ring--flat .ring__title3d { position: static; transform: none !important; margin: 0 var(--gutter) 22px; white-space: normal; pointer-events: none; }
.ring--flat .ring__h { justify-items: start; font-size: clamp(58px, 17vw, 96px); }
.ring--flat .ring__stage { position: relative; inset: auto; perspective: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x pan-y; cursor: auto; overscroll-behavior-x: contain; }
.ring--flat .ring__stage::-webkit-scrollbar { display: none; }
.ring--flat .ring__scene, .ring--flat .ring__cyl { position: static; left: auto; top: auto; width: auto; height: auto; transform: none !important; transform-style: flat; }
.ring--flat .ring__cyl { display: flex; gap: 12px; width: max-content; padding: 4px 14vw 20px; }
.ring--flat .ring__item { --w: 72vw; position: relative; left: auto; top: auto; flex: none; width: min(72vw, 340px); height: min(calc(72vw * 1.28), 56svh, 440px); transform: none !important; z-index: auto !important; scroll-snap-align: center; scroll-snap-stop: always; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 40px -18px rgba(0,0,0,.75); }
.ring--flat .ring__shade { display: none; }
.ring--flat .ring__glow { top: 55%; }
.ring--flat .ring__lead { position: static; margin: 4px var(--gutter) 0; max-width: none; }
.ring--flat .ring__pin { position: relative; }
/* v29.4 (02) touch screens: the cards follow one another (no sticky pile — that jerked on iPhone while scrolling) */
@media (hover: none), (pointer: coarse) {
  .stack__card { position: relative; top: auto !important; will-change: auto; }
  .stack { gap: 18px; }
}

/* v29.6 (03) on phones: under the prism only "Tap for more" (the description used to come and go with Safari's toolbar);
   a tap on the programme in front, or on that line, opens its whole text in the answer window of (04) */
.pinfo__more { display: none; }
@media (max-width: 900px) {
  .pinfo .pinfo__d { display: none !important; }
  .pinfo__more { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font: inherit; font-size: .95rem; font-weight: 600; color: var(--gold-deep); background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pinfo__more svg { width: 18px; height: 18px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: rgba(192,154,85,.18); }
  .pinfo__more:active { transform: scale(.96); }
  .pinfo .prog__cta { margin-top: 8px; }
  .pface { cursor: pointer; }
}
.fixm__content > .pinfo__d { font-size: calc(1rem * var(--fk, 1)); line-height: 1.55; color: var(--muted); }
.fixm__content > .prog__tags { display: flex; margin-top: calc(14px * var(--fk, 1)); }
.fixm__content > .prog__tags li { background: rgba(192,154,85,.16); color: var(--gold-deep); }
.fixm__content > .prog__cta { margin-top: calc(18px * var(--fk, 1)); }
/* the "Tap for more" line takes a little room: the prism gives it up, so the dots stay clear of the dog and the Sections pill */
@media (max-width: 900px) { .prism { --fw: min(78vw, 330px, calc((100cqh - 206px) / 1.12)) !important; } .pinfo__more { padding: 2px 0; margin-top: 16px; display: flex; width: max-content; } }
@media (max-width: 900px) and (max-height: 760px) { .prism { --fw: min(78vw, 330px, calc((100cqh - 180px) / 1.12)) !important; } .pinfo__more { margin-top: 24px; } }

/* v29.7 (05) on phones: the caption is written under each photo (nothing opens on a tap) */
.ring--flat .ring__item { height: auto; overflow: visible; background: none; box-shadow: none; border-radius: 0; cursor: default; text-align: left; color: inherit; }
.ring--flat .ring__item img { height: min(calc(72vw * 1.22), 50svh, 420px); border-radius: 18px; box-shadow: 0 20px 40px -18px rgba(0,0,0,.75); background: var(--navy-3); }
.ring--flat .ring__cap { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: block; margin-top: 12px; padding: 0 4px; font-size: .98rem; font-weight: 600; line-height: 1.35; color: var(--cream); }
.ring--flat .ring__item::after { bottom: auto; height: min(calc(72vw * 1.22), 50svh, 420px); border-radius: 18px; }

/* v30.0 (06) eight medals: two rows of four from tablets up, four rows of two on phones */
@media (min-width: 700px) { .medals { grid-template-columns: repeat(4, 1fr); } }
/* v30.1 (03) on computers too, a click on the programme in front opens its window */
@media (hover: hover) and (pointer: fine) { .pface { cursor: pointer; } }
/* v30.2 (05) phones and tablets: the row has room on both sides for every photo, the last one too, to snap to the centre */
.ring--flat .ring__cyl { padding-left: calc(50vw - min(36vw, 170px)); padding-right: calc(50vw - min(36vw, 170px)); }
/* v31.2 (05) phones: each photo sits at the top of its card, in its gold frame (a button centres its content, so a shorter caption pushed the photo down) */
.ring--flat .ring__item { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
.ring--flat .ring__item img { flex: none; width: 100%; }