/* ==========================================================================
   mudra v2 — revision 3
   Violet hero → dark ink world → paper inversion at Engagements → dark again.
   Power Grotesk Medium is reserved for five display moments only:
   hero title · Krishna quote · WHY STRATEGY · THE PROCESS title · NEXT STEP title.
   Everything else is GT Standard, set Swiss: tight tracking, generous leading.
   ========================================================================== */

/* --- Power Grotesk (static cuts; Medium = 500 carries all display use) ----- */

@font-face { font-family: 'Power Grotesk'; src: url('../assets/fonts/PowerGrotesk-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Power Grotesk'; src: url('../assets/fonts/PowerGrotesk-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Power Grotesk'; src: url('../assets/fonts/PowerGrotesk-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* --- GT Standard ------------------------------------------------------------ */
/* Three real static cuts (the L family replaced the earlier S Regular):
   - GTStandard-LRegular.woff2 ("GT Standard L", 400) carries all running
     text. Declared across 100–600 on purpose: the page uses label weights
     of 450–560, and with single-weight faces the CSS matcher would send any
     request above 500 to a bolder cut — the range keeps them on Regular.
   - GTStandard-LBold.woff2 (700) sets the big editorial paragraphs
     (font-weight: 700 on the 50px leads).
   - GTStandardVF.woff2 is, despite its filename, NOT variable — it is the
     static "GT Standard S Black" cut (usWeightClass 900), scoped to 900 for
     deliberate Black accents (tier names, done titles).
   Geist remains only as a missing-glyph fallback. */

@font-face {
  font-family: 'GT Standard';
  src: url('../assets/fonts/GTStandard-LRegular.woff2') format('woff2');
  font-weight: 100 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Standard';
  src: url('../assets/fonts/GTStandard-LBold.woff2') format('woff2');
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Standard';
  src: url('../assets/fonts/GTStandardVF.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face { font-family: 'Geist'; src: url('../assets/fonts/Geist-Variable.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* --- Tokens ------------------------------------------------------------------ */

:root {
  color-scheme: dark;
  --violet: #8677EC;
  --violet-soft: #B0A6F5;
  --violet-deep: #4A3EA8;
  --hero-ink: #1D1747;
  --ink: #1B1B1B;
  --paper: #F5F3F0;
  --font-display: 'Power Grotesk', 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'GT Standard', 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(20px, 4vw, 56px);
  --frame: min(1360px, 92vw);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-theme: cubic-bezier(0.6, 0, 0.25, 1);
  --z-topbar: 40;
  --z-sidenav: 42;
  --z-overlay: 60;
  --z-cookie: 90;
  --z-grain: 9999;
}

/* --- Base + theme inversion ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.js { scroll-behavior: auto; }
html:not(.js) { scroll-behavior: smooth; }

body {
  --bg: #131118;
  --fg: var(--paper);
  --muted: #A5A1BC;
  --hair: rgba(245, 243, 240, 0.16);
  --field: rgba(245, 243, 240, 0.04);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 450;
  letter-spacing: -0.03em; /* GT runs narrow across the whole page */
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color 0.7s var(--ease-theme), color 0.7s var(--ease-theme);
}
body.theme-light {
  --bg: #F5F3F0;
  --fg: #1B1B1B;
  --muted: #5D5A66;
  --hair: rgba(27, 27, 27, 0.18);
  --field: rgba(27, 27, 27, 0.04);
}

img { max-width: 100%; display: block; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
fieldset { border: 0; padding: 0; min-inline-size: 0; }
legend { padding: 0; }

::selection { background: rgba(134, 119, 236, 0.4); color: var(--paper); }
body.theme-light ::selection { color: var(--ink); }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

main { position: relative; }
section { position: relative; }

.accent { color: var(--violet); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.7s var(--ease-theme);
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border: 1px solid var(--violet);
  border-radius: 50%;
  margin-right: 12px;
  vertical-align: 0.06em;
}

/* --- Buttons --------------------------------------------------------------------- */

.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0.9em 1.9em;
  background: var(--violet);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
  will-change: transform;
}
.btn-solid:hover { background: var(--violet-soft); color: var(--ink); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.9em 1.6em;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 480;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.btn-ghost:hover { color: var(--fg); border-color: var(--fg); }

.btn-label { display: inline-block; will-change: transform; }

/* --- Global paper grain --------------------------------------------------------------- */

/* Live grain — a full-screen canvas cycling ten noise frames at 25fps
   (js/grain.js), the same architecture as the reference on mudra.hr.
   Subtlety is tuned HERE, via opacity alone. The baked PNG below is only
   the no-JS fallback. */
.grain-global {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.055;
}
body.theme-light .grain-global { opacity: 0.045; }
html:not(.js) .grain-global {
  background-image: url('data:image/png;base64,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');
  background-size: 112px 112px;
  image-rendering: pixelated;
  opacity: 0.5;
}

/* --- Topbar ------------------------------------------------------------------------------ */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 2.4vw, 28px) var(--gutter);
  transition: transform 0.55s var(--ease-out), opacity 0.55s var(--ease-out);
}
.topbar--hidden { transform: translateY(-115%); opacity: 0; pointer-events: none; }

.topbar-wordmark { min-width: 0; }
.topbar-wordmark img { height: 20px; width: auto; max-width: min(42vw, 230px); object-fit: contain; object-position: left center; }
.logo-light-bg { display: none; }
body.theme-light .logo-dark-bg, body.on-hero .logo-dark-bg { display: none; }
body.theme-light .logo-light-bg, body.on-hero .logo-light-bg { display: block; }

.topbar-right { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }

/* language switch — a segmented pill, tap-sized on every breakpoint */
.lang {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  gap: 2px;
}
.lang-btn {
  font-size: 0.72rem;
  font-weight: 540;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 999px;
  transition: color 0.3s, background-color 0.3s;
}
.lang-btn:hover { color: var(--fg); }
.lang-btn.is-active { color: var(--bg); background: var(--fg); }
.lang-sep { display: none; }
body.on-hero .lang { border-color: rgba(29, 23, 71, 0.35); }
body.on-hero .lang-btn { color: rgba(29, 23, 71, 0.6); }
body.on-hero .lang-btn:hover { color: var(--hero-ink); }
body.on-hero .lang-btn.is-active { color: var(--paper); background: var(--hero-ink); }

.topbar-cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.72em 1.5em;
  background: var(--violet);
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
  will-change: transform;
}
.topbar-cta:hover { background: var(--violet-soft); color: var(--ink); }
body.on-hero .topbar-cta { background: var(--hero-ink); color: var(--paper); }
body.on-hero .topbar-cta:hover { background: var(--ink); }

/* --- Side navigation ------------------------------------------------------------------------ */

.sidenav {
  position: fixed;
  right: clamp(10px, 2vw, 26px);
  top: 50%;
  transform: translate(14px, -50%);
  z-index: var(--z-sidenav);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.sidenav--in { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }

.sidenav ul { display: flex; flex-direction: column; gap: 14px; }
.sidenav a {
  display: flex;
  flex-direction: row-reverse; /* dot stays flush right; label grows leftward */
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 3px 2px;
}
.sidenav-dot {
  width: 8px; height: 8px;
  flex: 0 0 8px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.sidenav-label {
  font-size: 0.68rem;
  font-weight: 480;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), color 0.3s var(--ease-out);
  white-space: nowrap;
}
.sidenav a:hover .sidenav-label,
.sidenav a:focus-visible .sidenav-label { opacity: 1; transform: translateX(0); }
.sidenav a:hover .sidenav-dot { border-color: var(--fg); }
.sidenav a.is-active .sidenav-dot {
  background: var(--violet);
  border-color: var(--violet);
  /* paper keyline keeps the active dot legible over the violet sections */
  box-shadow: 0 0 0 1.5px rgba(245, 243, 240, 0.55);
  transform: scale(1.25);
}
.sidenav a.is-active .sidenav-label { color: var(--fg); }

/* --- Mobile floating menu (shown ≤680px) -------------------------------------------------- */

.mobmenu {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: var(--z-sidenav);
  display: none; /* flex on small screens */
  flex-direction: column;
  align-items: center;
}
.mobmenu-btn {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: #17151D;
  color: var(--paper);
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 243, 240, 0.14);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.55);
  transition: transform 0.35s var(--ease-out);
}
.mobmenu-btn svg { width: 22px; height: 22px; }
.mobmenu.is-open .mobmenu-btn { transform: rotate(45deg); }
.mobmenu.is-open .mobmenu-btn svg { transform: rotate(-45deg); transition: transform 0.35s var(--ease-out); }

.mobmenu-panel {
  /* its own dark island — immune to the paper theme flip */
  --bg: #17151D;
  --fg: var(--paper);
  --muted: #A5A1BC;
  --hair: rgba(245, 243, 240, 0.2);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 236px;
  background: #17151D;
  color: var(--paper);
  border: 1px solid rgba(245, 243, 240, 0.14);
  border-radius: 22px;
  padding: 14px 14px 12px;
  box-shadow: 0 26px 64px -18px rgba(0, 0, 0, 0.6);
  display: none;
}
.mobmenu.is-open .mobmenu-panel { display: block; }

.mobmenu-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.mobmenu-nav a {
  padding: 10px 14px;
  border-radius: 12px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 540;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  transition: background-color 0.25s;
}
.mobmenu-nav a:hover,
.mobmenu-nav a:active { background: rgba(245, 243, 240, 0.08); }

.mobmenu-lang { display: flex; width: 100%; }
.mobmenu-lang .lang-btn { flex: 1; text-align: center; }
/* the panel is a fixed dark island — its language pill must not inherit
   the body.on-hero (ink-on-violet) colouring */
.mobmenu-panel .lang { border-color: rgba(245, 243, 240, 0.2); }
.mobmenu-panel .lang-btn,
body.on-hero .mobmenu-panel .lang-btn { color: #A5A1BC; }
.mobmenu-panel .lang-btn:hover,
body.on-hero .mobmenu-panel .lang-btn:hover { color: var(--paper); }
.mobmenu-panel .lang-btn.is-active,
body.on-hero .mobmenu-panel .lang-btn.is-active { color: var(--paper); background: var(--violet); }

/* --- 1 · Hero — solid violet, circle grid, full-width caps ------------------------------------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--gutter) clamp(26px, 4.5vh, 56px);
  overflow: clip;
  background: var(--violet);
  color: var(--hero-ink);
}

.hero-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
}
.field-canvas { width: 100%; height: 100%; display: block; }

.hero-inner { position: relative; z-index: 1; will-change: transform; }

.hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 540;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(27, 23, 71, 0.62);
  margin-bottom: clamp(12px, 2vh, 22px);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--hero-ink);
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.012em;
  width: 100%;
}
.ht-line { display: block; overflow: clip; white-space: nowrap; }
.ht-line1 { font-size: 10.4vw; }
.ht-line2 { font-size: 3.6vw; margin-top: 0.28em; }
.ht-inner { display: inline-block; will-change: transform; }
html.js .ht-inner { transform: translateY(115%); }
html.js .hero-title.is-set .ht-inner { transform: none; }
html.js [data-hero-fade] { opacity: 0; }
html.js .hero.is-set [data-hero-fade] { opacity: 1; }
[data-hero-fade] { transition: opacity 0.8s var(--ease-out) 0.15s; }

.hero-hint {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(26px, 4.5vh, 56px);
  z-index: 1;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(27, 23, 71, 0.6);
}
.hero-hint span { display: inline-block; animation: hint-bob 2.4s var(--ease-out) infinite; }
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(6px); opacity: 0.45; }
}

/* --- 2 · Film (Krishna scrub) — Power Grotesk moment ------------------------------------------- */

.film { background: #0B0A0E; }

.film-pin {
  height: 100svh;
  position: relative;
  overflow: clip;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.film-video,
.film-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-fallback {
  display: none;
  background-image: url('../assets/img/krishna-vr.webp');
  background-size: cover;
  background-position: center;
}
.film--static .film-video { display: none; }
.film--static .film-fallback { display: block; }

.film-scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 10, 14, 0.34);
}

.film-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 7vw, 8rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--paper);
  padding: 0 var(--gutter) clamp(32px, 7vh, 80px);
  max-width: 12.5em;
}
.film-title em { font-style: normal; color: var(--violet); }
.film-title .accent-word { color: var(--violet); }
/* the violet accent sits on live video — a soft dark halo keeps it legible */
.film-title em,
.film-title .accent-word {
  text-shadow:
    0 2px 22px rgba(11, 10, 14, 0.85),
    0 0 3px rgba(11, 10, 14, 0.55);
}
.ft-word { display: inline-block; will-change: transform, opacity, filter; }
html.js .ft-word { opacity: 0.1; }

/* --- 3 · About — GT Standard, sharp portrait, inner parallax ------------------------------------ */

.about { padding: clamp(110px, 18vh, 220px) 0; overflow: clip; }

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  padding-left: var(--gutter);
}

.about-text { padding: clamp(20px, 4vh, 48px) 0; }
.about-text .eyebrow { margin-bottom: clamp(28px, 5vh, 56px); }

.about-p {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.about-p1 {
  font-weight: 700; /* GT Standard L Bold carries the big paragraphs */
  font-size: 50px;
  line-height: 50px;
  letter-spacing: -0.04em;
  max-width: 21em;
  margin-bottom: clamp(30px, 5.5vh, 64px);
}
.about-p2 {
  font-size: 18px;
  line-height: 22px;
  max-width: 34em;
  margin-left: clamp(2.4rem, 9vw, 11rem);
  color: var(--muted);
}

.about-portrait {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 3 / 3.5;
  overflow: clip; /* the parallaxed image moves inside a sharp frame */
}
.about-portrait img {
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
}

/* --- 4 · Why strategy — Power Grotesk territory ------------------------------------------------- */

.why { padding: clamp(110px, 16vh, 200px) var(--gutter); }

.why-inner { width: var(--frame); margin: 0 auto; }
.why-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  margin-bottom: clamp(48px, 9vh, 110px);
}
.why .eyebrow::before { border-color: var(--violet); }

.beats { display: flex; flex-direction: column; gap: clamp(64px, 14vh, 170px); }

.beat {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.3rem, 5.6vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 14em;
  min-height: 1em;
}
.beat .char { display: inline-block; will-change: transform, opacity, filter; }
.beat .word { display: inline-block; will-change: transform, opacity; }

.beat-rise { margin-left: clamp(0px, 9vw, 190px); }

.beat-focus { margin-left: clamp(0px, 4.5vw, 95px); }
.beat-lead { display: block; }
.beat-sub {
  display: block;
  margin-top: 1.2em;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--muted);
  max-width: 30em;
}

.why-quote {
  margin: clamp(90px, 16vh, 200px) 0 0 auto;
  max-width: 50rem;
  padding-left: clamp(20px, 2.6vw, 36px);
  border-left: 1px solid var(--violet);
}
.wq-text {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: -0.04em;
}
.wq-text em { font-style: normal; color: var(--violet); }
.wq-text .word { display: inline-block; }
.wq-cite {
  display: block;
  margin-top: 1.2em;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- 5 · Engagements — paper theme; THE PROCESS title is Power Grotesk --------------------------- */

.tiers { padding: clamp(120px, 18vh, 230px) var(--gutter); overflow: clip; }

.tiers-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* circles fade out before the section edge instead of being sliced by it */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 160px, #000 calc(100% - 160px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 160px, #000 calc(100% - 160px), transparent);
}

.tiers-inner { position: relative; width: var(--frame); margin: 0 auto; }

.tiers-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.4vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: clamp(20px, 3.4vh, 38px) 0 clamp(14px, 2vh, 22px);
}
.tiers-sub { color: var(--muted); max-width: 34em; line-height: 1.5; margin-bottom: clamp(48px, 8vh, 96px); }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  align-items: stretch;
}

.tier {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 34px);
  border: 1px solid var(--hair);
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(2px);
  transition:
    border-color 0.45s var(--ease-out),
    background-color 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}
.tier:hover {
  background: #FFFFFF;
  border-color: rgba(27, 27, 27, 0.05);
  /* a touch bigger, floating on a soft wide shadow */
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 34px 80px -30px rgba(27, 27, 27, 0.18),
    0 10px 30px -14px rgba(27, 27, 27, 0.08);
}

/* The Build — the recommended engagement, dressed in brand violet and a
   step larger than its neighbours (the site's ink-on-violet island theme) */
.tier--featured {
  position: relative;
  background: var(--violet);
  border-color: transparent;
  color: var(--hero-ink);
  --fg: var(--hero-ink);
  --muted: rgba(29, 23, 71, 0.66);
  --hair: rgba(29, 23, 71, 0.3);
  transform: scale(1.045);
  z-index: 1;
  box-shadow: 0 26px 60px -28px rgba(74, 62, 168, 0.45);
}
.tier--featured:hover {
  background: var(--violet);
  border-color: transparent;
  transform: translateY(-6px) scale(1.065);
  box-shadow:
    0 38px 85px -30px rgba(74, 62, 168, 0.55),
    0 12px 30px -14px rgba(74, 62, 168, 0.3);
}
.tier--featured .tier-price,
body.theme-light .tier--featured .tier-price { color: var(--paper); }
.tier--featured .tier-cta .btn-label { border-bottom-color: var(--hero-ink); }
.tier--featured .tier-cta::after { color: var(--hero-ink); }
.tier--featured .tier-cta:hover .btn-label,
body.theme-light .tier--featured .tier-cta:hover .btn-label { color: var(--paper); }

.tier-badge {
  position: absolute;
  top: -14px;
  right: 20px;
  padding: 0.5em 1.1em;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 560;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px -10px rgba(27, 27, 27, 0.4);
  /* static badge; every 3s a short digital glitch burst (steps = hard cuts) */
  animation: badge-glitch 3s steps(1, end) infinite;
  will-change: transform;
}
@keyframes badge-glitch {
  0%, 87% { transform: none; text-shadow: none; opacity: 1; }
  88%   { transform: translate(-2px, 1px) skewX(-8deg); text-shadow: -2px 0 var(--violet-soft), 2px 0 var(--violet-deep); }
  89.5% { transform: translate(2px, -1px) skewX(6deg);  text-shadow: 2px 0 var(--violet-soft), -2px 0 var(--violet-deep); opacity: 0.85; }
  91%   { transform: translate(-1px, 0);                text-shadow: -1px 0 var(--violet-soft), 1px 0 var(--violet-deep); opacity: 1; }
  92.5% { transform: translate(1px, 1px) skewX(-4deg);  text-shadow: 1px 0 var(--violet-soft), -1px 0 var(--violet-deep); }
  94%, 100% { transform: none; text-shadow: none; opacity: 1; }
}

.tier-num {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: clamp(26px, 4.5vh, 54px);
}
.tier-name {
  font-family: var(--font-display); /* Power Grotesk, like the section title */
  font-weight: 500;
  font-size: clamp(1.3rem, 1.7vw, 1.7rem);
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.tier-price {
  font-family: var(--font-body);
  font-weight: 340;
  font-size: clamp(1.9rem, 2.7vw, 2.9rem);
  letter-spacing: -0.035em;
  margin: 0.3em 0 0.95em;
  color: var(--violet);
}
body.theme-light .tier-price { color: var(--violet-deep); }
.tier-copy {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.tier-deliv {
  margin-top: 0.9em;
  padding-top: 0.9em;
  border-top: 1px solid var(--hair);
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--muted);
}
.tier-cta {
  margin-top: auto;
  padding-top: clamp(26px, 4vh, 44px);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  text-align: left;
  will-change: transform;
}
.tier-cta .btn-label { border-bottom: 1px solid var(--violet); padding-bottom: 4px; transition: color 0.3s var(--ease-out); }
.tier-cta::after { content: '\2192'; color: var(--violet); transition: transform 0.3s var(--ease-out); }
.tier-cta:hover .btn-label { color: var(--violet); }
.tier-cta:hover::after { transform: translateX(5px); }
body.theme-light .tier-cta:hover .btn-label { color: var(--violet-deep); }

/* --- 6 · Manifesto — GT Standard, Swiss modernist ------------------------------------------------ */

.manifesto { padding: clamp(130px, 20vh, 240px) var(--gutter) clamp(90px, 13vh, 160px); }
.manifesto-inner { width: var(--frame); margin: 0 auto; }
.manifesto .eyebrow { margin-bottom: clamp(48px, 9vh, 110px); }

.mani-body { display: flex; flex-direction: column; gap: clamp(36px, 6.5vh, 84px); }

/* strict hierarchy: one lead statement, then two quieter body paragraphs */
.mani-p {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.02em;
  max-width: 34em;
}
.mani-p:first-child {
  font-weight: 700;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: -0.04em;
  max-width: 25em;
}
.mani-p:nth-child(2) { margin-left: clamp(0px, 8vw, 180px); }
.mani-p:nth-child(3) { margin-left: clamp(0px, 12vw, 270px); }

.mani-p .word { display: inline-block; }
html.js .mani-p .word { opacity: 0.13; }

/* --- 6b · Logo marquee ----------------------------------------------------------------------------- */

.logos { padding: clamp(40px, 7vh, 90px) 0 clamp(60px, 9vh, 110px); overflow: clip; }
/* left-aligned to the same frame edge as every other eyebrow */
.logos-eyebrow { margin: 0 auto clamp(30px, 5vh, 52px); width: var(--frame); }

.marquee {
  display: flex;
  overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

.mq-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(28px, 3.6vw, 64px);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 520;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper); /* logos read white */
  white-space: nowrap;
}
.mq-item svg { width: 26px; height: 26px; flex: 0 0 26px; }

/* --- 6c · Testimonials — one voice at a time, blur-morphing carousel ---------------------------------- */

.testi { padding: clamp(60px, 9vh, 120px) var(--gutter) clamp(110px, 16vh, 200px); }
.testi-inner { width: var(--frame); margin: 0 auto; }
.testi .eyebrow { margin-bottom: clamp(36px, 6vh, 64px); }

.testi-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(150px, 22vh, 240px);
  text-align: center;
}
.titem {
  grid-area: 1 / 1;
  max-width: 30em;
  margin: 0 auto;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity, filter;
}
.titem.is-current { pointer-events: auto; }
html:not(.js) .titem { position: static; opacity: 1; margin-bottom: 3em; }

.titem-quote {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.03em;
}
.titem-quote::before { content: '\201C'; color: var(--violet); margin-right: 0.1em; }
.titem-quote::after { content: '\201D'; color: var(--violet); margin-left: 0.05em; }
.titem-author {
  display: block;
  margin-top: 1.8em;
  font-size: 0.74rem;
  font-weight: 520;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.testi-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(24px, 4vh, 40px);
}
.testi-dot {
  width: 8px; height: 8px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  padding: 0;
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}
.testi-dot.is-active { background: var(--violet); border-color: var(--violet); transform: scale(1.25); }

/* --- 7 · Book — Kerna split on solid brand violet ----------------------------------------------------- */

.book {
  padding: clamp(110px, 16vh, 210px) var(--gutter) 0;
  /* the closing section mirrors the hero: violet field, ink type — all
     descendant components restyle through the re-scoped theme variables */
  background: var(--violet);
  color: var(--hero-ink);
  --bg: var(--violet);
  --fg: var(--hero-ink);
  --muted: rgba(29, 23, 71, 0.62);
  --hair: rgba(29, 23, 71, 0.28);
  --field: rgba(29, 23, 71, 0.06);
}
.book .accent { color: var(--paper); }
.book .eyebrow::before { border-color: var(--hero-ink); }
.book :focus-visible { outline-color: var(--hero-ink); }
.book ::selection { background: rgba(29, 23, 71, 0.85); color: var(--paper); }
.book .btn-solid { background: var(--hero-ink); color: var(--paper); }
.book .btn-solid:hover { background: var(--ink); color: var(--paper); }
.book .cal-day.is-selected,
.book .slot.is-selected { background: var(--hero-ink); border-color: var(--hero-ink); color: var(--paper); }
.book .slots-tz { color: var(--hero-ink); }
.book .booking-chosen { color: var(--hero-ink); }
.book .form-note.is-error { color: #8F2F1F; }
.book .form-note.is-ok { color: var(--hero-ink); }
.book .f-field-date input { color-scheme: light; }
.book .book-biglogo .logo-dark-bg { display: none; }
.book .book-biglogo .logo-light-bg { display: block; }

/* the calendar sits on its own light, rounded panel; the type runs narrower here */
.book .booking {
  background: #F3F2EE;
  border-color: rgba(27, 27, 27, 0.1);
  border-radius: 20px;
  color: var(--ink);
  --fg: var(--ink);
  --muted: #6B6875;
  --hair: rgba(27, 27, 27, 0.14);
  --field: rgba(27, 27, 27, 0.035);
  font-weight: 400;
  letter-spacing: -0.03em;
}
.book .cal-month,
.book .slots-date,
.book .booking-chosen { font-weight: 400; letter-spacing: -0.035em; }
.book .cal-day { font-weight: 400; letter-spacing: -0.03em; }
.book .slot { font-weight: 400; letter-spacing: -0.01em; }

.book-grid {
  width: var(--frame);
  margin: 0 auto;
  display: grid;
  /* the right column spans both rows; the logo owns the bottom-left cell,
     so its bottom edge is the grid's bottom edge — i.e. the newsletter's */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'left  right'
    'logo  right';
  column-gap: clamp(36px, 5vw, 90px);
  row-gap: 0;
  align-items: stretch;
}

.book-left { grid-area: left; display: flex; flex-direction: column; }

/* right column stretches to the full grid height: the calendar panel
   grows, the newsletter stays pinned to the bottom */
.book-right { grid-area: right; display: flex; flex-direction: column; }
.book-right .booking { flex: 1 1 auto; }
.book-right .newsletter { flex: 0 0 auto; }

.book-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 5.6vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.015em;
  margin: clamp(18px, 3vh, 34px) 0 clamp(12px, 1.8vh, 20px);
}
.book-sub {
  color: var(--muted);
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.03em;
  max-width: 34em;
  margin-bottom: clamp(36px, 6vh, 64px);
}

.cycle {
  position: relative;
  height: 56px; /* two 26px lines + breathing room inside the clip */
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.03em;
  margin-bottom: clamp(22px, 3.6vh, 40px);
  overflow: clip;
}
.cycle-item {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  will-change: transform, opacity;
}
.cycle-item.is-current { opacity: 1; }
html:not(.js) .cycle-item:not(.is-current) { display: none; }

.book-biglogo {
  grid-area: logo;
  align-self: end; /* strict bottom alignment with the newsletter block */
  margin-top: clamp(48px, 8vh, 110px); /* minimum breathing room above */
}
.book-biglogo img { width: 100%; max-width: 560px; height: auto; }

/* --- Booking widget ------------------------------------------------------------------------------------ */

.booking {
  position: relative;
  border: 1px solid var(--hair);
  overflow: clip;
}
.booking.is-flash { animation: booking-flash 1.2s var(--ease-out); }
@keyframes booking-flash {
  0%, 100% { border-color: var(--hair); }
  35% { border-color: var(--violet); }
}

.booking-panel { padding: clamp(22px, 2.6vw, 40px); }

.booking-step-pick {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 3vw, 48px);
}

.cal-step {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg);
  margin-bottom: 1.4em;
}

.cal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 14px; margin-bottom: 1.2em; }
.cal-month {
  font-weight: 540;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  min-width: 9.5em;
  text-align: center;
}
.cal-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--hair);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), opacity 0.3s;
}
.cal-btn:hover { border-color: var(--fg); }
.cal-btn:disabled { opacity: 0.3; cursor: default; }
.cal-btn:disabled:hover { border-color: var(--hair); }

.cal-week, .cal-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.cal-week span {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 8px 0 10px;
}
.cal-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out), color 0.25s;
}
.cal-day:not(:disabled):hover { border-color: var(--fg); }
.cal-day:disabled { color: var(--muted); opacity: 0.32; cursor: default; }
.cal-day.is-pad { visibility: hidden; }
.cal-day.is-selected { background: var(--violet); border-color: var(--violet); color: var(--paper); }

.slots { opacity: 0.35; transition: opacity 0.4s var(--ease-out); pointer-events: none; }
.slots.is-live { opacity: 1; pointer-events: auto; }
.slots-tz { letter-spacing: 0.1em; color: var(--violet); margin-left: 8px; }
.slots-date {
  font-weight: 540;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  margin-bottom: 1.1em;
  min-height: 1.4em;
}
.slots-list { display: flex; flex-direction: column; gap: 8px; }
.slot {
  padding: 0.8em 1.2em;
  border: 1px solid var(--hair);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-align: left;
  transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out), color 0.25s, transform 0.25s var(--ease-out);
}
.slot:hover { border-color: var(--fg); transform: translateX(4px); }
.slot.is-selected { background: var(--violet); border-color: var(--violet); color: var(--paper); }

.booking-step-form { display: none; }
.booking-step-form.is-open { display: block; }
html:not(.js) .booking-step-form { display: block; }

.booking-chosen {
  font-weight: 540;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin-bottom: 1.5em;
  color: var(--violet);
}
.booking-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: clamp(20px, 3vh, 32px);
}

.booking-step-done { display: none; text-align: center; padding-block: clamp(56px, 9vh, 110px); }
.booking-step-done.is-open { display: block; }
.done-title {
  font-weight: 900; /* the real GT Standard Black cut */
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  letter-spacing: -0.035em;
  margin-bottom: 0.35em;
}
.done-copy { color: var(--muted); line-height: 1.5; max-width: 30em; margin: 0 auto; }

/* newsletter */
.newsletter {
  margin-top: clamp(28px, 4.5vh, 52px);
  padding-top: clamp(24px, 4vh, 44px);
  border-top: 1px solid var(--hair);
}
.newsletter-title {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.03em;
  margin-bottom: 0.9em;
}
.newsletter-form { display: flex; gap: 10px; max-width: 520px; }
.newsletter-form input[type="email"] {
  flex: 1;
  min-width: 0;
  background: var(--field);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 0.85em 1.4em;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 0.92rem;
  transition: border-color 0.3s var(--ease-out);
}
.newsletter-form input[type="email"]:focus { outline: none; border-color: var(--violet); }
.newsletter-form input::placeholder { color: var(--muted); }

.form-note { font-size: 0.8rem; color: var(--muted); min-height: 1.2em; margin-top: 0.9em; }
.form-note.is-error { color: #E77C6A; }
.form-note.is-ok { color: var(--violet-soft); }
body.theme-light .form-note.is-ok { color: var(--violet-deep); }

/* footer bar */
.footer {
  margin-top: clamp(60px, 10vh, 120px);
  padding: clamp(24px, 3.6vh, 40px) 0;
  border-top: 1px solid var(--hair);
  width: var(--frame);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: 26px; }
.footer-links a {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s;
}
.footer-links a:hover { color: var(--fg); }
.footer-copy { font-size: 0.8rem; color: var(--muted); }

/* --- Forms (shared field styles) --------------------------------------------------------------------------- */

.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f-field { display: block; margin-bottom: 10px; min-width: 0; }
/* form field labels — GT Standard Bold, sentence case, full-contrast */
.f-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg);
  margin-bottom: 6px;
}
.f-field input, .f-field textarea {
  width: 100%;
  background: var(--field);
  border: 1px solid var(--hair);
  padding: 0.68em 0.9em;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 0.95rem;
  border-radius: 0;
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.f-field textarea { resize: vertical; min-height: 76px; }
.f-field input:focus, .f-field textarea:focus { outline: none; border-color: var(--violet); }
.f-field input::placeholder { color: var(--muted); }
.f-field-date input { color-scheme: dark; max-width: 240px; }
body.theme-light .f-field-date input { color-scheme: light; }

.f-check {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 5px 0;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  cursor: pointer;
}
.f-check input {
  appearance: none;
  width: 17px; height: 17px;
  flex: 0 0 17px;
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
  transition: border-color 0.25s, background-color 0.25s;
  cursor: pointer;
}
.f-check input:checked { background: var(--violet); border-color: var(--violet); }
.f-check input:checked::after { content: ''; width: 5px; height: 9px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); }
.f-check input:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

.f-block { min-width: 0; }
.f-legend {
  font-weight: 560;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.8em;
}

/* --- SPA overlay — compact two-column interior ---------------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: #0E0C13;
  color: var(--paper);
  /* always dark — re-scope theme variables so the paper section can't bleed in */
  --fg: var(--paper);
  --muted: #A5A1BC;
  --hair: rgba(245, 243, 240, 0.2);
  --field: rgba(245, 243, 240, 0.045);
  visibility: hidden;
}
.overlay.is-open { visibility: visible; }

.overlay-inner {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(60px, 8vh, 88px) var(--gutter) clamp(28px, 4vh, 48px);
}

.overlay-close {
  position: fixed;
  top: clamp(14px, 2vw, 24px);
  right: var(--gutter);
  width: 48px; height: 48px;
  border: 1px solid rgba(245, 243, 240, 0.22);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--paper);
  transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.overlay-close:hover { border-color: var(--paper); transform: rotate(90deg); }

.overlay-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 3.6vw, 64px);
  width: min(1220px, 100%);
  margin: 0 auto;
  align-items: start;
}

.overlay-title {
  /* the tier's name — Power Grotesk here too, matching the cards */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: clamp(14px, 2.2vh, 24px) 0 0.12em;
}
.overlay-price {
  font-weight: 340;
  font-size: clamp(1.4rem, 2.1vw, 2rem);
  letter-spacing: -0.03em;
  color: var(--violet);
  margin-bottom: clamp(16px, 2.6vh, 28px);
}
.overlay-included {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--paper);
  margin-bottom: 0.7em;
}
.overlay-detail { margin-bottom: clamp(16px, 2.6vh, 28px); }
.overlay-detail li {
  position: relative;
  padding: 0.5em 0 0.5em 1.4em;
  border-top: 1px solid rgba(245, 243, 240, 0.12);
  font-size: 0.88rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: #CFCCDA;
}
.overlay-detail li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--violet);
}
.overlay-note { color: var(--muted); font-size: 0.88rem; line-height: 1.5; max-width: 24em; }

/* Clean SaaS form: one column of numbered groups, strict internal grids,
   uniform field rhythm, actions pinned to a hairline footer row. */
.overlay-form {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vh, 26px);
}
.ofg-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--paper);
  margin-bottom: 12px;
}
.ofg-label .num { color: var(--violet); margin-right: 0.7em; }
.ofg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.ofg-grid .f-field, .ofg .f-field { margin-bottom: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55em 1.15em;
  border: 1px solid rgba(245, 243, 240, 0.2);
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: -0.01em;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.chip:hover { border-color: var(--paper); color: var(--paper); }
.chip:has(input:checked) { background: var(--violet); border-color: var(--violet); color: var(--paper); }
.chip input { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); }
.chip:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }

.ofg-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 10px 24px; align-items: end; }

.overlay .f-label { font-size: 0.8rem; margin-bottom: 5px; }
.overlay .f-field input, .overlay .f-field textarea {
  background: rgba(245, 243, 240, 0.05);
  border-color: rgba(245, 243, 240, 0.14);
  color: var(--paper);
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  padding: 0.62em 0.85em;
}
.overlay .f-field input:hover, .overlay .f-field textarea:hover { border-color: rgba(245, 243, 240, 0.3); }
.overlay .f-field input:focus, .overlay .f-field textarea:focus { border-color: var(--violet); background: rgba(245, 243, 240, 0.07); }
.overlay .f-field-date input { color-scheme: dark; max-width: none; width: 100%; }
.overlay .f-field textarea { min-height: 68px; }
.overlay .f-check { font-size: 0.85rem; color: var(--muted); }
.overlay .f-check:hover { color: var(--paper); }

.overlay-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid rgba(245, 243, 240, 0.12);
  padding-top: clamp(14px, 2.2vh, 20px);
}
.overlay-actions .form-note { margin: 0; flex: 1; }

.overlay-done {
  display: none;
  width: min(1220px, 100%);
  margin: 0 auto;
  text-align: center;
  padding-block: clamp(70px, 16vh, 180px);
}
.overlay-done .btn-ghost { margin-top: 2.4em; }
.overlay.is-done .overlay-grid { display: none; }
.overlay.is-done .overlay-done { display: block; }

/* --- Booking frame — the header CTA's overlay, dressed as the book section ------------------------------------- */
/* carries .book for the component theme; this block re-wins the vars that
   the generic .overlay island would otherwise darken */
.overlay-book {
  padding: 0;
  background: var(--violet);
  color: var(--hero-ink);
  --bg: var(--violet);
  --fg: var(--hero-ink);
  --muted: rgba(29, 23, 71, 0.62);
  --hair: rgba(29, 23, 71, 0.28);
  --field: rgba(29, 23, 71, 0.06);
}
.overlay-book .overlay-close {
  border-color: rgba(29, 23, 71, 0.35);
  color: var(--hero-ink);
}
.overlay-book .overlay-close:hover { border-color: var(--hero-ink); }
.overlay-book .f-field input, .overlay-book .f-field textarea {
  background: var(--field);
  border-color: var(--hair);
  color: var(--fg);
}
.overlay-book .f-field input:focus, .overlay-book .f-field textarea:focus { border-color: var(--hero-ink); background: rgba(27, 27, 27, 0.05); }

.bkm { width: min(1080px, 100%); margin: 0 auto; padding-bottom: clamp(24px, 4vh, 48px); }
.bkm-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.6vw, 4.4rem);
  line-height: 0.96;
  letter-spacing: -0.015em;
  margin: clamp(14px, 2.2vh, 26px) 0 clamp(10px, 1.6vh, 18px);
}
.bkm .book-sub { margin-bottom: clamp(26px, 4.5vh, 44px); }

/* --- Quick test ------------------------------------------------------------------------------------------------ */

/* entry strip — one compact band between Why strategy and The Process */
.qtstrip { padding: clamp(56px, 8vh, 110px) var(--gutter); }
.qtstrip-inner {
  width: var(--frame);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 60px);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: clamp(30px, 5vh, 56px) 0;
  flex-wrap: wrap;
}
.qtstrip-line1 {
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  letter-spacing: -0.03em;
  margin-top: 0.9em;
}
.qtstrip-line2 {
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--muted);
  margin-top: 0.35em;
}
.qtstrip-cta { flex-shrink: 0; }

/* secondary entry in #book — quiet underlined text link */
.qt-booklink {
  align-self: flex-start;
  margin-top: clamp(14px, 2.4vh, 24px);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
  padding-bottom: 3px;
  text-align: left;
  transition: color 0.3s, border-color 0.3s;
}
.qt-booklink:hover { color: var(--fg); border-color: var(--fg); }

/* overlay stage */
.qt-overlay .overlay-inner { display: grid; }
.qt-stage {
  width: min(720px, 100%);
  margin: auto;
  padding: clamp(20px, 4vh, 48px) 0;
}

.qt-progress {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: clamp(28px, 5vh, 48px);
}
.qt-ring {
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}
.qt-ring.is-filled { background: var(--violet); border-color: var(--violet); }
.qt-ring.is-current { transform: scale(1.45); border-color: var(--paper); }

.qt-back {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: clamp(14px, 2.4vh, 22px);
  transition: color 0.3s;
}
.qt-back:hover { color: var(--fg); }

.qt-q {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  line-height: 1.16;
  letter-spacing: -0.03em;
  max-width: 20em;
  margin-bottom: clamp(26px, 4.5vh, 44px);
}

.qt-answers { display: flex; flex-direction: column; gap: 10px; }
.qt-answer {
  text-align: left;
  padding: 16px 20px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--fg);
  background: rgba(245, 243, 240, 0.03);
  transition: border-color 0.3s, background-color 0.3s, transform 0.3s var(--ease-out);
}
.qt-answer:hover { border-color: var(--paper); transform: translateY(-2px); }
.qt-answer.is-checked { border-color: var(--violet); background: rgba(134, 119, 236, 0.16); }

/* Q3 — ring rating 1..5 */
.qt-rate { display: flex; gap: clamp(12px, 2.6vw, 24px); }
.qt-rate-ring {
  width: clamp(44px, 7vw, 60px);
  height: clamp(44px, 7vw, 60px);
  border: 2px solid var(--muted);
  border-radius: 50%;
  padding: 0;
  transition: background-color 0.25s, border-color 0.25s, transform 0.25s var(--ease-out);
}
.qt-rate-ring:hover { border-color: var(--paper); transform: scale(1.06); }
.qt-rate-ring.is-filled { background: var(--violet); border-color: var(--violet); }
.qt-rate-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  max-width: calc(5 * clamp(44px, 7vw, 60px) + 4 * clamp(12px, 2.6vw, 24px));
  font-size: 0.8rem;
  color: var(--muted);
}

/* contact gate */
.qt-contact-sub {
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--muted);
  margin: -1.2em 0 2em;
  max-width: 30em;
}
.qt-contact-form { display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
.qt-contact-form .qt-submit { align-self: flex-start; margin-top: 14px; }
.qt-consent {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 34em;
  margin-top: 14px;
}

/* result */
.qt-result .eyebrow { margin-bottom: clamp(18px, 3vh, 28px); }
.qt-result-title {
  font-family: var(--font-display); /* Power Grotesk — ASCII apostrophes only */
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.015em;
  margin-bottom: clamp(18px, 3vh, 30px);
}
.qt-result-body {
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.03em;
  max-width: 36em;
}
.qt-result-note {
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: var(--muted);
  border-left: 1px solid var(--violet);
  padding-left: 16px;
  margin-top: 1.4em;
  max-width: 34em;
}
.qt-result-cta { margin-top: clamp(28px, 5vh, 44px); }

/* recommended-card highlight after the result CTA scroll */
.tier--flash {
  box-shadow: 0 0 0 2px var(--violet), 0 26px 60px -26px rgba(74, 62, 168, 0.4);
  animation: tier-flash 1.6s var(--ease-out);
}
.tier--featured.tier--flash {
  /* the Build card is already violet — the keyline reads in paper there */
  box-shadow: 0 0 0 2px var(--paper), 0 26px 60px -26px rgba(74, 62, 168, 0.55);
  animation: tier-flash-paper 1.6s var(--ease-out);
}
@keyframes tier-flash {
  0%, 100% { box-shadow: 0 0 0 2px var(--violet), 0 26px 60px -26px rgba(74, 62, 168, 0.4); }
  40% { box-shadow: 0 0 0 6px rgba(134, 119, 236, 0.55), 0 26px 60px -26px rgba(74, 62, 168, 0.4); }
}
@keyframes tier-flash-paper {
  0%, 100% { box-shadow: 0 0 0 2px var(--paper), 0 26px 60px -26px rgba(74, 62, 168, 0.55); }
  40% { box-shadow: 0 0 0 6px rgba(245, 243, 240, 0.6), 0 26px 60px -26px rgba(74, 62, 168, 0.55); }
}

@media (max-width: 680px) {
  .qtstrip-inner { flex-direction: column; align-items: flex-start; }
  .qt-rate { flex-wrap: wrap; }
}

/* --- Cookie bar --------------------------------------------------------------------------------------------------- */

.cookiebar {
  position: fixed;
  left: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  z-index: var(--z-cookie);
  max-width: min(520px, calc(100vw - 2 * clamp(14px, 2vw, 28px)));
  background: #17151D;
  color: var(--paper);
  border: 1px solid rgba(245, 243, 240, 0.16);
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  transform: translateY(calc(100% + 40px));
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}
.cookiebar.is-in { transform: none; opacity: 1; }
.cookiebar-text { font-size: 0.85rem; line-height: 1.45; color: #C9C6D4; flex: 1 1 240px; }
.cookiebar-actions { display: flex; gap: 10px; margin-left: auto; }
.cookiebar .btn-solid { padding: 0.7em 1.4em; font-size: 0.72rem; }
.cookiebar .btn-ghost { padding: 0.7em 1.2em; font-size: 0.72rem; border-color: rgba(245, 243, 240, 0.22); color: #C9C6D4; }
.cookiebar .btn-ghost:hover { color: var(--paper); border-color: var(--paper); }

/* --- Scrollbar ------------------------------------------------------------------------------------------------------ */

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: rgba(134, 119, 236, 0.35); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Responsive ------------------------------------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  /* single column: intro, then calendar + newsletter, the logo last */
  .book-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas:
      'left'
      'right'
      'logo';
    row-gap: clamp(36px, 6vh, 56px);
  }
  .book-biglogo { margin-top: 0; align-self: auto; }
  .overlay-grid { grid-template-columns: 1fr; }
  .ofg-grid, .ofg-row { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .about-grid { grid-template-columns: 1fr; padding-right: var(--gutter); }
  .about-portrait { justify-self: center; max-width: 520px; margin-top: clamp(12px, 3vh, 30px); }
  .about-p2 { margin-left: clamp(1.6rem, 8vw, 5rem); }
  .booking-step-pick { grid-template-columns: 1fr; }
  .testi-row { flex-direction: column; }
  .tcard { min-height: 0; }
  .tcard.is-open { flex-grow: 1; }
}

@media (max-width: 680px) {
  /* content was running too close to the screen edges: a fixed, wider
     gutter, and the frame derives from it (92vw gave only ~16px margins) */
  :root {
    --gutter: 28px;
    --frame: calc(100vw - 2 * var(--gutter));
  }
  body { font-size: 1rem; }
  /* the 50px editorial set steps down together on small screens */
  .about-p1, .wq-text, .mani-p:first-child { font-size: 34px; line-height: 36px; }
  .tier-grid { grid-template-columns: 1fr; }
  /* topbar must fit logo + pill + CTA on one row: everything tightens */
  .topbar { gap: 10px; }
  .topbar-wordmark img { max-width: 28vw; }
  .topbar-right { gap: 8px; }
  .lang { padding: 2px; }
  .lang-btn { padding: 5px 9px; font-size: 0.62rem; letter-spacing: 0.1em; }
  .topbar-cta { padding: 0.6em 0.95em; font-size: 0.64rem; letter-spacing: 0.08em; }
  /* the floating menu replaces the side dots on phones */
  .sidenav { display: none; }
  .mobmenu { display: flex; }
  .hero-hint { display: none; }
  /* the floating menu button hovers over the hero's last line otherwise */
  .hero { padding-bottom: clamp(92px, 13vh, 120px); }
  /* stacked lockup: line 1 breaks into one word per row, each JS-fitted
     to full width; line 2 stays a single fitted run */
  .ht-line1 { white-space: normal; }
  .ht-word { display: block; line-height: 0.92; }
  .ht-line2 { margin-top: 0.5em; }
  .film-title { font-size: clamp(2rem, 10.5vw, 3.1rem); }
  .beat { font-size: clamp(1.9rem, 9vw, 2.9rem); }
  .beat-rise, .beat-focus { margin-left: 0; }
  .why-quote { margin-left: 0; }
  .mani-p:nth-child(2), .mani-p:nth-child(3) { margin-left: 0; }
  .f-row { grid-template-columns: 1fr; gap: 0; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn-solid { align-self: flex-start; }
  .cookiebar { left: 10px; right: 10px; bottom: 10px; max-width: none; }
  .footer { flex-direction: column; align-items: flex-start; gap: 14px; }
  .overlay-actions { flex-direction: column-reverse; align-items: stretch; }
  .overlay-actions .btn-solid { width: 100%; }
}

/* --- Reduced motion ---------------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .marquee-track { animation: none; }
}
html.no-motion .ft-word,
html.no-motion .mani-p .word,
html.no-motion [data-hero-fade] { opacity: 1 !important; }
html.no-motion .ht-inner { transform: none !important; }
html.no-motion .film-pin { height: auto; min-height: 60svh; }
html.no-motion .marquee-track { animation: none; }

/* --- WordPress-only additions (ACF-driven content) ----------------------------------------------- */

/* real client logos from the Media Library (white/transparent assets) */
.mq-item img { height: clamp(22px, 2.2vw, 30px); width: auto; display: block; }

/* Cal.com / Calendly embed replacing the built-in calendar (booking_embed_code) */
.booking--embed { padding: 0; overflow: clip; }
.booking--embed iframe { display: block; width: 100%; min-height: 580px; border: 0; border-radius: inherit; }