/* Typefaces (SIL Open Font License), embedded as Latin subsets.
   National Park: sturdy and human, for display. Tektur: the machine voice, for small labels.
   Crimson Pro: reading text. Young Serif: the promise. */
@font-face { font-family: "CL National Park"; src: url(../fonts/NationalPark-Regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CL National Park"; src: url(../fonts/NationalPark-Bold.woff) format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "CL Tektur"; src: url(../fonts/Tektur-Regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CL Tektur"; src: url(../fonts/Tektur-Medium.woff) format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "CL Crimson Pro"; src: url(../fonts/CrimsonPro-Regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CL Crimson Pro"; src: url(../fonts/CrimsonPro-Italic.woff) format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "CL Crimson Pro"; src: url(../fonts/CrimsonPro-Bold.woff) format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "CL Young Serif"; src: url(../fonts/YoungSerif-Regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
/* =========================================================================
   CROSSLAND AI · hero, pass 1 (art direction)
   Tokens first. The scene is a night sky by design, so both themes share it.
   ========================================================================= */
:root {
  --void: #070A1C;        /* deep indigo space, the base */
  --nebula: #1B1440;      /* violet depth in the sky gradient */
  --reentry: #FF6A2B;     /* fire, the heat of impact */
  --plasma: #FFD27A;      /* white-gold, the hottest part of the flame */
  --aurora: #7FE3FF;      /* Earth's atmosphere, star lines, focus rings */
  --starlight: #F2EEFF;   /* text */
  --dim: rgba(242, 238, 255, .8);      /* secondary text: bright enough to read comfortably on the dark sky */

  --display: "CL National Park", "National Park", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --serif: "CL Crimson Pro", "Crimson Pro", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --accent: "CL Young Serif", "Young Serif", Rockwell, Georgia, serif;
  --tech: "CL Tektur", "Tektur", "Bahnschrift", "Segoe UI", sans-serif;
  /* Depth: a solid extruded body under the letters, then a soft cast shadow. Sized in em, so it scales with the type. */
  --x-warm: 0 .012em 0 #F0B060, 0 .024em 0 #E39A45, 0 .036em 0 #D2823A, 0 .048em 0 #BC6C30, 0 .06em 0 #A35827, 0 .072em 0 #874620, 0 .084em 0 #6B361A, 0 .16em .1em rgba(0, 0, 0, .55);
  --x-ember: 0 .012em 0 #E8792F, 0 .024em 0 #D46826, 0 .036em 0 #BD5820, 0 .048em 0 #A2491C, 0 .06em 0 #873B18, 0 .072em 0 #6D3015, 0 .084em 0 #542612, 0 .16em .1em rgba(0, 0, 0, .55);
  --x-cool: 0 .012em 0 #C9C3EE, 0 .024em 0 #ABA4DD, 0 .036em 0 #8E86C8, 0 .048em 0 #7169B0, 0 .06em 0 #585096, 0 .072em 0 #433C7A, 0 .084em 0 #312B5E, 0 .16em .1em rgba(0, 0, 0, .6);
  --x-small: 0 .04em 0 #5A5391, 0 .08em 0 #37325F, 0 .14em .08em rgba(0, 0, 0, .5);

  --pad: 48px;            /* bleed around the stage so the screen can shake; JS reads this */
  --cy: 46%;              /* where the cross arms meet; JS reads this */
  --earth: .2;            /* share of the viewport height Earth fills; JS reads this */
  --gap: clamp(10px, 1.8vh, 22px);
  --tagroom: clamp(16px, 2.6vh, 28px);   /* extra space below the crossing for the tagline */
  --logo-size: clamp(40px, min(8.6vw, 15vh), 140px);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --void: #070A1C; --nebula: #1B1440; --reentry: #FF6A2B;
    --plasma: #FFD27A; --aurora: #7FE3FF; --starlight: #F2EEFF;
  }
}
:root[data-theme="dark"] {
  --void: #070A1C; --nebula: #1B1440; --reentry: #FF6A2B;
  --plasma: #FFD27A; --aurora: #7FE3FF; --starlight: #F2EEFF;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--starlight);
  font-family: var(--serif);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- stage ---------- */
.scene { position: fixed; inset: 0; overflow: hidden; background: var(--void); }
.shake { position: absolute; inset: calc(var(--pad) * -1); will-change: transform; }
.shake > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.frame { position: absolute; inset: var(--pad); }
.frame main { position: absolute; inset: 0; }

.veil {
  position: absolute; left: 50%; top: var(--cy);
  width: min(1180px, 116vw); height: min(620px, 78vh);
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(7, 10, 28, .8), rgba(7, 10, 28, .5) 55%, rgba(7, 10, 28, 0));
  pointer-events: none;
}

.flash {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% var(--cy), #FFFFFF 0%, var(--plasma) 22%, rgba(255, 106, 43, .55) 48%, rgba(255, 106, 43, 0) 78%);
  mix-blend-mode: screen;
}

/* ---------- the four words that fly in along the cross ---------- */
.word {
  position: absolute; left: 50%; top: var(--cy);
  translate: -50% -50%;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(24px, min(5.8vw, 9.5vh), 100px);
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #FFF3DF;
  /* a thin dark edge first, so the letters stay readable against bright fire */
  text-shadow: 0 0 1px rgba(30, 8, 0, .95), 0 0 3px rgba(30, 8, 0, .85), 0 0 20px rgba(255, 140, 50, .75), 0 0 52px rgba(255, 90, 30, .5);
  pointer-events: none;
  will-change: transform, opacity;
}
html:not(.js) .word { display: none; }

/* ---------- wordmark: sits on top of the horizontal arm ---------- */
.logo {
  position: absolute; left: 50%;
  bottom: calc(100% - var(--cy) + var(--gap) - .14em);
  translate: calc(-50% + var(--logo-shift, 0px)) 0;   /* nudged so the vertical arm falls between CROSS and LAND */
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--logo-size);
  line-height: 1.1;
  letter-spacing: .015em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The wordmark's glow is drawn on the fx canvas (see fx.logoGlow), which is far cheaper than a CSS filter. */
.logo .ch {
  display: inline-block;
  /* a highlight band sweeps across the gold; each letter is delayed a little, so it travels along the word */
  background:
    linear-gradient(112deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 62%) no-repeat,
    linear-gradient(180deg, #FFFFFF 6%, #FFF3D6 24%, var(--plasma) 52%, var(--reentry) 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 240% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  will-change: transform, opacity;
}
/* Each letter is two layers: the body (its own text, drawn only as an extrusion that falls away from the light)
   and the shiny face on top (::after). --lx/--ly follow the wordmark as it turns. */
.logo .ch {
  position: relative;
  background: none;
  text-shadow:
    calc(var(--lx, .2) * .014em) calc(var(--ly, 1) * .014em) 0 #F3B560, calc(var(--lx, .2) * .028em) calc(var(--ly, 1) * .028em) 0 #E69D46,
    calc(var(--lx, .2) * .042em) calc(var(--ly, 1) * .042em) 0 #D5853B, calc(var(--lx, .2) * .056em) calc(var(--ly, 1) * .056em) 0 #BF6E31,
    calc(var(--lx, .2) * .07em) calc(var(--ly, 1) * .07em) 0 #A55A28, calc(var(--lx, .2) * .084em) calc(var(--ly, 1) * .084em) 0 #894821,
    calc(var(--lx, .2) * .098em) calc(var(--ly, 1) * .098em) 0 #6C371B, calc(var(--lx, .2) * .112em) calc(var(--ly, 1) * .112em) 0 #522915,
    calc(var(--lx, .2) * .2em) calc(var(--ly, 1) * .2em) .14em rgba(0, 0, 0, .6);
}
.logo .ch::after {
  content: attr(data-c);
  position: absolute; left: 0; top: 0;
  background:
    linear-gradient(112deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 62%) no-repeat,
    linear-gradient(180deg, #FFFFFF 4%, #FFF1D2 26%, var(--plasma) 56%, #FF8A3A 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 240% 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.logo { pointer-events: auto; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.logo.grabbed { cursor: grabbing; }
.intro-done .logo .ch::after {
  animation: logo-shine 16s cubic-bezier(.4, 0, .2, 1) infinite;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes logo-shine {                      /* one slow pass, then a long rest */
  0%       { background-position: 240% 0, 0 0; }
  20%, 100% { background-position: -160% 0, 0 0; }
}
.logo .sp { display: inline-block; width: .26em; }
.logo .ch.split { margin-right: .08em; }   /* a clean channel for the beam */

/* ---------- the promise: sits below the horizontal arm ---------- */
/* ---------- the tagline: split around the crossing, so the glowing center sits where the words meet ---------- */
.tagline {
  position: absolute; left: 50%; top: var(--cy);
  translate: -50% -50%;
  margin: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  width: max-content;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.45vw, 22px);
  line-height: 1.2;
  letter-spacing: .01em;
  color: #FFE6B8;
  white-space: nowrap;
  pointer-events: none;
}
.tag-l, .tag-r {
  position: relative;
  text-shadow: 0 0 3px rgba(7, 10, 28, .9);
}
.tag-l { text-align: right; transform-origin: 100% 50%; }
.tag-r { text-align: left; transform-origin: 0 50%; }
.tag-l::before, .tag-r::before {           /* the beam fades behind the words */
  content: ""; position: absolute; inset: -12px -18px; z-index: -1;
  background: radial-gradient(closest-side, rgba(7, 10, 28, .9), rgba(7, 10, 28, 0));
}
.tag-gap { width: clamp(30px, 3vw, 44px); }

.motto {
  position: absolute; left: 50%;
  top: calc(var(--cy) + var(--gap) + var(--tagroom));
  translate: -50% 0;
  margin: 0;
  width: max-content; max-width: 94vw;
  text-align: center;
  color: var(--starlight);
  text-shadow: 0 2px 24px rgba(7, 10, 28, .9);
}
.motto-a {
  display: block;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, min(3.6vw, 6vh), 58px);
  line-height: 1.15;
  letter-spacing: -.005em;
  will-change: transform, opacity;
}
.motto-b {
  display: block;
  font-weight: 900;
  font-size: clamp(30px, min(4.8vw, 8vh), 80px);
  line-height: 1.04;
  letter-spacing: -.02em;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

/* ---------- navigation: one destination at the end of each arm ---------- */
/* ---------- the portal: one door at the foot of the cross ---------- */
.crossnav { position: absolute; inset: 0; pointer-events: none; }
.portal {
  pointer-events: auto;
  position: absolute; left: 50%; top: calc(var(--cy) + min(27vh, 270px));
  translate: -50% -50%;
  width: max-content; max-width: 92vw;       /* never squeezed to half the screen */
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: var(--starlight);
  text-decoration: none;
  text-align: center;
  text-shadow: 0 1px 14px rgba(7, 10, 28, .95);
  will-change: transform, opacity;
}
.portal-ring {
  position: relative;
  scale: calc(1 + var(--pull, 0) * .45);   /* grows as a deliberate scroll builds up */
  width: 64px; height: 64px;
  border-radius: 50%;
  /* a way through: light at the center, a dark throat around it, then the turning ring */
  background: radial-gradient(circle, #FFFFFF 0%, #FFF3D2 14%, #FFD27A 30%, #FF8A3A 46%, #5A2A6E 62%, #150B2E 78%, #07051A 100%);
  box-shadow: 0 0 0 1px rgba(255, 214, 122, .25), 0 0 30px 6px rgba(255, 150, 70, .5), inset 0 0 14px rgba(255, 190, 110, .35);
  transition: scale .3s cubic-bezier(.2, .8, .3, 1.4), box-shadow .3s;
}
.portal-ring::before {                     /* the accretion ring, turning */
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 244, 220, 0) 0%, var(--plasma) 18%, var(--reentry) 40%, rgba(255, 106, 43, 0) 58%, rgba(127, 227, 255, .8) 80%, rgba(255, 244, 220, 0) 100%);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%, #000 100%);
  mask: radial-gradient(circle, transparent 60%, #000 62%, #000 100%);
  animation: ring-turn 5s linear infinite;
  will-change: transform;                  /* rotate the finished ring as a layer instead of redrawing it */
}
.portal-ring::after {                      /* a thin lensing halo */
  content: ""; position: absolute; inset: -14px -22px; border-radius: 50%;
  border: 1px solid rgba(127, 227, 255, .35);
  transform: rotate(-18deg);
}
@keyframes ring-turn { to { transform: rotate(360deg); } }
.portal-label {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: .03em;
  transition: color .25s;
}
.portal-hint { font-style: italic; font-size: 15px; color: var(--dim); margin-top: -6px; }
.portal-ring.gulp { animation: gulp .5s ease-out; }
@keyframes gulp {
  35% { box-shadow: 0 0 0 1px rgba(255, 214, 122, .6), 0 0 38px 10px rgba(255, 170, 80, .7), inset 0 0 22px rgba(255, 180, 90, .5); }
}
.portal.charged .portal-ring { animation: charged 1s ease-in-out 3; }
@keyframes charged {
  50% { scale: 1.25; box-shadow: 0 0 0 1px rgba(255, 214, 122, .75), 0 0 60px 18px rgba(255, 170, 80, .75), inset 0 0 26px rgba(255, 190, 100, .6); }
}
.portal-label { transition: color .25s, text-shadow .6s; }
.portal.charged .portal-label { color: var(--plasma); text-shadow: 0 0 18px rgba(255, 190, 100, .85), 0 1px 14px rgba(7, 10, 28, .95); }
.portal:hover .portal-ring, .portal:focus-visible .portal-ring {
  scale: 1.18;
  box-shadow: 0 0 0 1px rgba(255, 214, 122, .5), 0 0 40px 10px rgba(255, 150, 60, .6), inset 0 0 22px rgba(255, 180, 90, .5);
}
.portal:hover .portal-label, .portal:focus-visible .portal-label { color: var(--plasma); }
.portal:focus-visible { outline: 2px solid var(--aurora); outline-offset: 10px; border-radius: 8px; }


/* ---------- top bar ---------- */
/* ---------- the black hole transition and the pages behind it ---------- */
.warp { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 15; pointer-events: none; display: none; }
.warp.on { display: block; }
.scene.warping { pointer-events: none; }
.scene.warping .shake { will-change: transform, filter; }

.page {
  position: fixed; inset: 0; z-index: 20;
  background: var(--void);
  color: var(--starlight);
  visibility: hidden; opacity: 0;
  transform: scale(1.06);
  transition: opacity .7s ease, transform .7s ease, visibility 0s .7s;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
.page.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
.page:focus { outline: none; }
.page-body {
  position: relative;
  min-height: 100%;
  /* the descent: space at the top, sky at the bottom */
  z-index: 1;
  /* the descent: open space at the top (the live sky shows through), dawn at the bottom */
  background:
    radial-gradient(ellipse 60% 30% at var(--hx, 50%) 0%, rgba(255, 106, 43, .18), rgba(255, 106, 43, 0) 70%),
    linear-gradient(180deg, rgba(7, 10, 28, 0) 0%, rgba(10, 11, 36, .1) 55%, rgba(18, 18, 58, .6) 80%, rgba(26, 42, 92, .92) 94%, #274A86 100%);
}
/* the same universe continues behind the page: calmer, dimmer, drifting as you scroll */
.page-sky { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
.mini-ring.gulp { animation: miniGulp .5s ease-out; }
@keyframes miniGulp { 35% { box-shadow: 0 0 0 2px var(--plasma), 0 0 18px 4px rgba(255, 170, 80, .85); } }
.scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 44px;
  color: var(--dim); text-decoration: none; font-style: italic; font-size: 15px;
}
.scroll-cue i { width: 1px; height: 38px; background: linear-gradient(180deg, var(--plasma), rgba(255, 214, 122, 0)); animation: cue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.scroll-cue:hover { color: var(--starlight); }
.scroll-cue:focus-visible { outline: 2px solid var(--aurora); outline-offset: 6px; border-radius: 4px; }
.h-quote {
  margin: 0 0 26px; max-width: 18ch;
  font-family: var(--accent); font-weight: 400;
  font-size: clamp(34px, 5vw, 72px); line-height: 1.1; letter-spacing: -.01em;
  color: #F4F1FF; text-shadow: var(--x-cool);
}
.h-quote em { font-style: normal; color: #FFE0A6; text-shadow: var(--x-warm); }
.proof-band { margin-top: clamp(56px, 9vh, 104px); }
.ways { margin-top: clamp(64px, 11vh, 128px); }
.ways .doors { margin-top: 28px; }
@media (prefers-reduced-motion: reduce) { .scroll-cue i { animation: none; } }

/* ---------- sticky bar ---------- */
.pagebar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px clamp(16px, 3vw, 40px);
  background: rgba(7, 10, 28, .72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(242, 238, 255, .08);
}
.pagebar-home {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 20px/1 var(--display); letter-spacing: .05em; text-transform: uppercase;
  color: var(--starlight); background: none; border: 0; padding: 6px 0; cursor: pointer;
}
.mini-ring {
  width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0%, #FFD27A 32%, #FF8A3A 50%, #2A1450 72%, #07051A 100%);
  box-shadow: 0 0 0 2px var(--reentry), 0 0 10px rgba(255, 106, 43, .7);
}
.pagebar-home:hover .mini-ring { box-shadow: 0 0 0 2px var(--plasma), 0 0 16px 2px rgba(255, 190, 100, .8); }
.pagebar-nav { display: flex; gap: clamp(12px, 2vw, 28px); }
.pagebar-nav a { color: var(--dim); text-decoration: none; font-size: 16px; font-style: italic; }
.pagebar-nav a:hover { color: var(--starlight); }
.pagebar-right { display: flex; align-items: center; gap: 16px; }
.pagebar .sound-label { display: none; }
.pagebar-book, .btn-fill {
  font: 800 17px/1 var(--display); letter-spacing: .03em;
  color: var(--void); background: var(--plasma); text-decoration: none;
  border: 0; border-radius: 999px; padding: 12px 20px; cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.pagebar-book { white-space: nowrap; }
@media (max-width: 420px) { .pagebar-book { font-size: 15px; padding: 10px 14px; } .pagebar-right { gap: 10px; } }
@media (max-width: 360px) { .pagebar-home span:last-child { display: none; } }
.pagebar-book:hover, .btn-fill:hover { background: #FFE3A6; transform: translateY(-1px); }
.page a:focus-visible, .page button:focus-visible, .page input:focus-visible, .page summary:focus-visible { outline: 2px solid var(--aurora); outline-offset: 3px; }

/* ---------- layout and type ---------- */
.sec { position: relative; padding: clamp(72px, 11vh, 140px) clamp(16px, 4vw, 48px); }
.wrap { max-width: 1120px; margin: 0 auto; }
.wrap.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.wrap.two.wide-demo { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.copy.narrow { max-width: 640px; }
.h-display {
  margin: 0 0 24px;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(40px, 6.6vw, 96px); line-height: 1.02; letter-spacing: .005em;
  background: linear-gradient(180deg, #FFFFFF 6%, var(--plasma) 52%, var(--reentry) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  width: max-content; max-width: 100%;
}
.h-display.small { font-size: clamp(34px, 4.8vw, 68px); }
.h-display em { font-style: normal; }
.h-chapter {
  margin: 0 0 18px;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(32px, 4.4vw, 60px); line-height: 1.04; letter-spacing: .01em;
  color: var(--starlight);
}
.chapter-n { margin: 0 0 8px; font-style: italic; color: var(--plasma); font-size: 18px; }
.lead { margin: 0 0 24px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; max-width: 60ch; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.h-display.center, .h-chapter.center { text-align: center; width: auto; }
.fineprint { font-style: italic; font-size: 14px; color: var(--dim); margin: 16px 0 0; }
.ticks { list-style: none; padding: 0; margin: 0 0 28px; }
.ticks li { position: relative; padding-left: 26px; margin: 10px 0; font-size: 17px; line-height: 1.4; }
.ticks li::before { content: "✦"; position: absolute; left: 0; color: var(--plasma); }
.btn-line {
  display: inline-block; font: 800 18px/1 var(--display); letter-spacing: .03em;
  color: var(--plasma); text-decoration: none; border-bottom: 2px solid var(--reentry); padding: 6px 0;
}
.btn-line:hover { color: #FFE3A6; }

/* arrival */
.arrival { padding-top: clamp(80px, 14vh, 180px); }
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.door {
  display: grid; gap: 6px; padding: 22px 22px 24px;
  border: 1px solid rgba(242, 238, 255, .12); border-radius: 14px;
  background: rgba(27, 20, 64, .35);
  color: var(--starlight); text-decoration: none;
  transition: border-color .25s, transform .25s, background-color .25s;
}
.door:hover { border-color: var(--reentry); transform: translateY(-3px); background: rgba(27, 20, 64, .55); }
.door-n { font-style: italic; color: var(--plasma); }
.door-t { font: 800 26px/1 var(--display); letter-spacing: .02em; }
.door-d { color: var(--dim); font-size: 15px; line-height: 1.4; }

/* proof */
.proof-band .stats { margin: 0; }
.stats { list-style: none; margin: 0; padding: 28px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; border-top: 1px solid rgba(242, 238, 255, .12); border-bottom: 1px solid rgba(242, 238, 255, .12); }
.stats li { text-align: center; }
.stats strong { display: block; font: 900 clamp(40px, 5vw, 64px)/1 var(--display); color: var(--plasma); }
.stats span { display: block; margin-top: 8px; color: var(--dim); font-size: 15px; line-height: 1.35; }

/* demos */
.demo {
  border: 1px solid rgba(242, 238, 255, .14); border-radius: 16px;
  background: rgba(7, 10, 28, .6);
  padding: 18px 20px 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
/* Solutions: two demos in one card, one after the other */
.demo-deck { position: relative; }
.deck-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 10px; }
.deck-count { font: italic 400 15px/1 var(--serif); color: var(--dim); }
.deck-count b { font-style: normal; color: var(--starlight); }
.deck-arrows { display: flex; gap: 8px; }
.deck-arrow {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(7, 10, 28, .6); color: var(--starlight); border: 1px solid rgba(242, 238, 255, .22);
  transition: border-color .2s, background-color .2s, opacity .2s;
}
.deck-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.deck-arrow:hover:not(:disabled) { border-color: var(--plasma); background: rgba(27, 20, 64, .7); }
.deck-arrow:disabled { opacity: .35; cursor: default; }
.deck-arrow:focus-visible, .deck-link:focus-visible, .clip-btn:focus-visible, .clip-close:focus-visible { outline: 2px solid var(--aurora); outline-offset: 3px; }
.deck-arrow.pulse { animation: deckPulse 2.4s ease-in-out infinite; }
@keyframes deckPulse { 50% { border-color: var(--plasma); box-shadow: 0 0 0 4px rgba(255, 214, 122, .14), 0 0 18px rgba(255, 170, 80, .35); } }
.deck-track { display: grid; }
.deck-slide { grid-area: 1 / 1; transition: opacity .45s ease, transform .45s ease, visibility 0s; }
.deck-slide:not(.is-on) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, transform .45s ease, visibility 0s .45s; }
.deck-slide.before { transform: translateX(-28px); }
.deck-slide.after { transform: translateX(28px); }
.deck-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 0; cursor: pointer;
  background: none; border: 0; color: var(--plasma); font: 700 16px/1.2 var(--display); letter-spacing: .03em;
}
.deck-link i { font-style: normal; display: inline-block; transition: transform .2s; }
.deck-link:hover i { transform: translateX(4px); }
.deck-link.back:hover i { transform: translateX(-4px); }
.demo-tag { font: 700 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #0B2A1A; background: #3DDC84; border-radius: 999px; padding: 6px 10px; }
.clip { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid rgba(242, 238, 255, .12); background: #0d1120; }
.clip video { display: block; width: 100%; height: auto; aspect-ratio: 1328 / 940; }
.clip-btn {
  position: absolute; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(7, 10, 28, .78); color: var(--starlight); border: 1px solid rgba(242, 238, 255, .25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.clip-btn svg { width: 18px; height: 18px; fill: currentColor; }
.clip-play { left: 10px; }
.clip-expand { right: 10px; }
.clip-expand svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.clip-play .i-pause { display: none; }
.clip-play.playing .i-play { display: none; }
.clip-play.playing .i-pause { display: inline; }
.clip-box {
  width: min(96vw, 1400px); max-height: 94vh; padding: 0; border: 1px solid rgba(242, 238, 255, .2); border-radius: 14px;
  background: #0d1120; color: var(--starlight); overflow: hidden;
}
.clip-box::backdrop { background: rgba(3, 5, 16, .82); backdrop-filter: blur(4px); }
.clip-box video { display: block; width: 100%; max-height: 94vh; }
.clip-close {
  position: absolute; top: 10px; right: 10px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  font: 400 28px/1 var(--serif); color: var(--starlight); background: rgba(7, 10, 28, .8); border: 1px solid rgba(242, 238, 255, .3);
}
@media (prefers-reduced-motion: reduce) { .deck-arrow.pulse { animation: none; } .deck-slide, .deck-slide:not(.is-on) { transition: none; } .deck-slide.before, .deck-slide.after { transform: none; } }
.demo-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.demo-act { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.try-note { font: italic 400 15px/1 var(--serif); color: var(--plasma); white-space: nowrap; transition: opacity .3s; }
.try-note i { display: inline-block; font-style: normal; animation: nudge 1.4s ease-in-out infinite; }
.try-note.gone { opacity: 0; }
@keyframes nudge { 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .try-note i { animation: none; } }
.demo-title { font: 800 20px/1 var(--display); letter-spacing: .03em; }
.btn-small {
  font: 800 15px/1 var(--display); letter-spacing: .03em;
  color: var(--void); background: var(--plasma); border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer;
}
.btn-small:disabled { opacity: .5; cursor: default; }
.demo-foot { margin: 14px 0 0; font-size: 15px; color: var(--dim); font-style: italic; }
.inbox { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inbox li {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 10px; background: rgba(242, 238, 255, .05);
  transition: background-color .4s;
}
.inbox .from { font-weight: 700; font-size: 15px; }
.inbox .subj { display: block; color: var(--dim); font-size: 14px; }
.inbox .tag { opacity: 0; transform: translateX(8px); transition: opacity .35s, transform .35s; }
.inbox li.done .tag { opacity: 1; transform: none; }
.inbox li.human { background: rgba(255, 106, 43, .16); }
@media (max-width: 560px) {                  /* phones: the label sits under the message, so the message keeps the full width */
  .inbox li { grid-template-columns: 1fr; gap: 6px; }
  .inbox .tag { justify-self: start; transform: translateY(-4px); }
}
.tag {
  display: inline-block; font: 700 12px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 999px; background: rgba(127, 227, 255, .16); color: var(--aurora);
}
.tag.human { background: var(--reentry); color: var(--void); }

/* academy */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 22px; }
.chip {
  font: 700 15px/1 var(--display); letter-spacing: .03em;
  color: var(--starlight); background: none; border: 1px solid rgba(242, 238, 255, .22); border-radius: 999px;
  padding: 9px 14px; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.chip:hover { border-color: var(--plasma); }
.chip.is-on { background: var(--plasma); color: var(--void); border-color: var(--plasma); }
.courses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.courses li {
  padding: 18px; border-radius: 14px; border: 1px solid rgba(242, 238, 255, .12); background: rgba(27, 20, 64, .35);
  display: grid; gap: 8px; align-content: start;
  transition: opacity .3s, transform .3s;
}
.courses li.hide { display: none; }
.courses .lvl { font-size: 13px; font-style: italic; color: var(--plasma); }
.courses h3 { margin: 0; font: 800 21px/1.05 var(--display); letter-spacing: .02em; }
.courses p { margin: 0; font-size: 14px; color: var(--dim); line-height: 1.4; }
.courses .len { font-size: 13px; color: var(--dim); }
.courses .bar { height: 3px; background: rgba(242, 238, 255, .12); border-radius: 2px; overflow: hidden; }
.courses .bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--plasma), var(--reentry)); }

/* consulting */
.phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.phase {
  font: 800 15px/1 var(--display); letter-spacing: .03em; color: var(--dim);
  background: rgba(242, 238, 255, .05); border: 1px solid transparent; border-radius: 10px; padding: 12px 6px; cursor: pointer;
  text-align: center;
}
.phase small { display: block; font: italic 400 12px/1.2 var(--serif); margin-top: 6px; }
.phase.is-on { color: var(--void); background: var(--plasma); }
.phase-detail { min-height: 96px; font-size: 15px; line-height: 1.5; color: var(--starlight); }
.phase-detail strong { color: var(--plasma); }
.slider { display: grid; gap: 8px; margin-top: 14px; font-size: 15px; }
.slider input { width: 100%; accent-color: var(--reentry); }

/* human */
.pull {
  margin: 8px auto 28px; max-width: 900px; padding: 0; text-align: center;
}
.pull p {
  margin: 0;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.2; letter-spacing: -.01em;
  color: var(--starlight);
}
.pull::before, .pull::after {               /* short beams above and below, echoing the cross */
  content: ""; display: block; width: 72px; height: 2px; margin: 0 auto 22px;
  background: linear-gradient(90deg, rgba(255,106,43,0), var(--plasma), rgba(255,106,43,0));
}
.pull::after { margin: 22px auto 0; }
.human .split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; }
.human .col { padding: 26px 28px; border-radius: 16px; border: 1px solid rgba(242, 238, 255, .12); }
.human .col:first-child { background: rgba(127, 227, 255, .06); }
.human .col:last-child { background: rgba(255, 106, 43, .1); border-color: rgba(255, 106, 43, .4); }
.human h3 { margin: 0 0 14px; font: 800 24px/1 var(--display); letter-spacing: .02em; }
.human ul { margin: 0; padding-left: 20px; line-height: 1.6; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.card { padding: 24px; border-radius: 16px; border: 1px solid rgba(242, 238, 255, .12); background: rgba(27, 20, 64, .3); }
.card-n { display: inline-block; font: 900 40px/1 var(--display); color: var(--plasma); margin-bottom: 10px; }
.card h3 { margin: 0 0 10px; font: 800 23px/1.05 var(--display); letter-spacing: .02em; }
.card p { margin: 0; color: var(--dim); line-height: 1.5; }
.story .tag { margin-bottom: 12px; }
.story footer { margin-top: 14px; font-style: italic; color: var(--dim); font-size: 14px; }

/* industries and faq */
.industries { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.industries li { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(242, 238, 255, .18); font-size: 15px; }
.faqs details { border-bottom: 1px solid rgba(242, 238, 255, .12); padding: 14px 0; }
.faqs summary { cursor: pointer; font: 800 20px/1.2 var(--display); letter-spacing: .02em; list-style: none; position: relative; padding-right: 28px; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; position: absolute; right: 0; top: 0; color: var(--plasma); font-size: 22px; }
.faqs details[open] summary::after { content: "–"; }
.faqs p { margin: 10px 0 0; color: var(--dim); line-height: 1.55; }

/* booking, back on Earth */
.book { padding-bottom: clamp(220px, 32vh, 360px); overflow: hidden; }
.book .wrap { position: relative; z-index: 1; }
.booking {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  max-width: 820px; margin: 36px auto 0;
  border-radius: 18px; overflow: hidden;
  background: rgba(7, 10, 28, .75);
  border: 1px solid rgba(242, 238, 255, .14);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .45);
}
.cal { padding: 20px; border-right: 1px solid rgba(242, 238, 255, .1); }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 17px; }
.cal-nav { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(242, 238, 255, .2); background: none; color: var(--starlight); font-size: 22px; line-height: 1; cursor: pointer; }
.cal-nav:hover { border-color: var(--plasma); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid .dow { text-align: center; font-size: 12px; color: var(--dim); padding: 6px 0; }
.day { aspect-ratio: 1; border-radius: 8px; border: 0; background: none; color: var(--starlight); font: 600 15px/1 var(--serif); cursor: pointer; }
.day:hover:not(:disabled) { background: rgba(255, 214, 122, .18); }
.day:disabled { color: rgba(242, 238, 255, .22); cursor: default; }
.day.is-on { background: var(--plasma); color: var(--void); }
.day.today { box-shadow: inset 0 0 0 1px var(--aurora); }
.slots { padding: 20px; display: grid; gap: 8px; align-content: start; }
.slots-empty { margin: 0; font-style: italic; color: var(--dim); }
.slots h3 { margin: 0 0 6px; font: 800 20px/1.1 var(--display); letter-spacing: .02em; }
.slot { border: 1px solid rgba(242, 238, 255, .2); background: none; color: var(--starlight); border-radius: 10px; padding: 10px; font: 600 15px/1 var(--serif); cursor: pointer; }
.slot:hover { border-color: var(--plasma); }
.slot.is-on { background: var(--plasma); color: var(--void); border-color: var(--plasma); }
.confirm { display: grid; gap: 8px; margin-top: 6px; }
.confirm input { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(242, 238, 255, .2); background: rgba(242, 238, 255, .06); color: var(--starlight); font: 400 15px var(--serif); }
.confirm p { margin: 0; font-size: 14px; color: var(--dim); }
.booked { color: var(--plasma); font-weight: 700; }

.horizon { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(220px, 30vh, 360px); pointer-events: none; overflow: hidden; }
.horizon .earth {
  position: absolute; left: 50%; top: 48%;
  width: 240vw; height: 240vw; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, #2C6C8C 0%, #16405E 18%, #0E2A48 40%, #07152C 70%);
  box-shadow: 0 -14px 40px rgba(127, 227, 255, .55), 0 -40px 120px rgba(80, 160, 255, .3);
}
.horizon .sun {
  position: absolute; left: 18%; top: 44%;
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; translate: -50% -50%;
  background: radial-gradient(circle, rgba(255, 250, 235, 1) 0%, rgba(255, 214, 122, .8) 5%, rgba(255, 150, 70, .35) 16%, rgba(255, 106, 43, .08) 36%, rgba(255, 106, 43, 0) 60%);
  mix-blend-mode: screen;
}

.foot-region { flex-basis: 100%; font-size: 13px; }
.foot-region a { color: var(--dim); }
.wa { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 22px auto 0; max-width: 820px; }
.wa > span { font-style: italic; color: var(--dim); }
.wa-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 17px/1 var(--display); letter-spacing: .03em;
  color: #0B2A1A; background: #3DDC84; border: 0; border-radius: 999px; padding: 11px 18px; cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.wa-btn:hover { background: #6BE8A3; transform: translateY(-1px); }
.wa-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.wa-note { flex-basis: 100%; margin: 0; text-align: center; font-size: 14px; font-style: italic; color: var(--dim); }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; font-size: 13px; line-height: 1.4; color: var(--dim); }
.consent input { margin-top: 2px; accent-color: var(--reentry); }
.pagefoot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding: 22px clamp(16px, 4vw, 48px);
  background: #07152C; color: var(--dim); font-size: 14px;
}
.foot-mark { font: 800 18px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--starlight); }
.foot-motto { font-style: italic; }
.foot-links a { color: var(--dim); margin-left: 14px; }

/* reveal on scroll */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .rv.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .wrap.two, .wrap.two.wide-demo { grid-template-columns: 1fr; }
  .doors, .cards, .courses { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .pagebar-nav { display: none; }
  .booking { grid-template-columns: 1fr; }
  .cal { border-right: 0; border-bottom: 1px solid rgba(242, 238, 255, .1); }
  .human .split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .doors, .cards, .courses { grid-template-columns: 1fr; }
  .phases { grid-template-columns: 1fr 1fr; }
  .h-display { font-size: clamp(28px, 9.2vw, 52px); }
  .h-display.small { font-size: clamp(24px, 7.2vw, 40px); }
}

.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 8;
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(14px, 2.2vw, 28px) clamp(16px, 2.6vw, 36px);
}
.mark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--starlight);
  text-decoration: none;
}
.intro-toggle {
  font: italic 400 16px/1.2 var(--serif);
  color: var(--dim);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(242, 238, 255, .3);
  padding: 4px 0;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.lang-link {
  font: italic 400 16px/1.2 var(--serif); color: var(--dim); text-decoration: none;
  border-bottom: 1px solid rgba(242, 238, 255, .3); padding: 4px 0; transition: color .2s, border-color .2s;
}
.lang-link:hover { color: var(--starlight); border-color: var(--plasma); }
.lang-link:focus-visible { outline: 2px solid var(--aurora); outline-offset: 4px; border-radius: 2px; }
.topbar-controls { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.topbar-book {
  font: 700 15px/1 var(--display); letter-spacing: .02em; white-space: nowrap;
  color: var(--void); text-decoration: none; border-radius: 999px; padding: 10px 16px;
  background: linear-gradient(180deg, #FFEBB8 0%, var(--plasma) 46%, #F2A33E 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 3px 0 #B5611D, 0 7px 14px rgba(0, 0, 0, .45);
  transition: transform .12s ease, box-shadow .12s ease, filter .2s, opacity .3s;
}
.topbar-book:hover { filter: brightness(1.06); transform: translateY(-1px); }
.topbar-book:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(150, 70, 10, .35), 0 1px 0 #B5611D; }
.topbar-book:focus-visible { outline: 2px solid var(--aurora); outline-offset: 3px; }
.lang-link .short { display: none; }
/* phones: during the intro the bar offers Skip; afterwards it offers Book a call instead of Replay */
@media (max-width: 520px) {
  .topbar-controls { gap: 12px; }
  .lang-link .full { display: none; }
  .lang-link .short { display: inline; font-style: normal; letter-spacing: .06em; }
  html:not(.intro-done) .topbar-book { display: none; }
  .intro-done .intro-toggle { display: none; }
  .mark { font-size: 18px; }
}
@media (max-width: 360px) {
  .topbar-controls { gap: 10px; }
  .mark { font-size: 15px; }
  .topbar-book { font-size: 13px; padding: 8px 11px; }
}
.sound-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font: italic 400 16px/1.2 var(--serif);
  color: var(--dim); background: none; border: 0; padding: 4px 0; cursor: pointer;
  transition: color .2s;
}
.sound-toggle[hidden] { display: none; }
.sound-toggle:hover { color: var(--starlight); }
.sound-toggle[data-state="on"], .sound-toggle[data-state="locked"] { color: var(--plasma); }
.sound-toggle:focus-visible { outline: 2px solid var(--aurora); outline-offset: 4px; border-radius: 2px; }
.sound-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sound-icon .spk { fill: currentColor; stroke: none; }
.sound-icon .wave { display: none; }
.sound-toggle[data-state="on"] .wave { display: inline; }
.sound-toggle[data-state="on"] .mute { display: none; }
.sound-toggle.nudge .sound-icon { animation: sound-nudge 1.8s ease-in-out 2s 3; }
@keyframes sound-nudge { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 6px rgba(255, 210, 122, .95)); } }
@media (max-width: 520px) { .topbar .sound-label { display: none; } }
@media (max-width: 400px) { .topbar-controls { gap: 12px; } .lang-link, .intro-toggle { font-size: 14px; } }
.intro-toggle:hover { color: var(--starlight); border-color: var(--plasma); }
.intro-toggle:focus-visible, .mark:focus-visible { outline: 2px solid var(--aurora); outline-offset: 4px; border-radius: 2px; }

/* Hidden until the intro reveals them (only when JS is running). */
.js .logo .ch, .js .tag-l, .js .tag-r, .js .motto-a, .js .motto-b, .js .portal, .js .mark, .js .veil, .js .word { opacity: 0; }

/* ---------- smaller screens: the destinations become a grid under the motto ---------- */
@media (max-width: 1099px), (max-height: 639px) {
  :root { --cy: 36%; --earth: .14; }
  .portal { top: calc(var(--cy) + min(33vh, 300px)); }
  .portal-label { font-size: 22px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .portal { top: calc(var(--cy) + 38vh); gap: 8px; }
  .portal-ring { width: 46px; height: 46px; }
  .portal-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-ring, .portal-label, .intro-toggle { transition: none; }
  .portal-ring::before { animation: none; }
  .intro-done .logo .ch { animation: none; }
  .sound-toggle.nudge .sound-icon { animation: none; }
  .page { transition: opacity .3s, visibility 0s .3s; transform: none; }
  .page.is-open { transition: opacity .3s; }
}

/* =========================================================================
   Tactile layer: type with a body, buttons with an edge, cards that lean toward you
   ========================================================================= */
.word {
  font-weight: 700; letter-spacing: .02em;
  text-shadow: 0 0 1px rgba(30, 8, 0, .95), var(--x-warm), 0 0 22px rgba(255, 140, 50, .55), 0 0 56px rgba(255, 90, 30, .4);
}
.tagline { font-family: var(--serif); font-size: clamp(16px, 1.55vw, 24px); }
.tag-l, .tag-r { text-shadow: 0 0 3px rgba(7, 10, 28, .9), 0 0 12px rgba(7, 10, 28, .7); }
.motto-a { font-family: var(--serif); font-weight: 400; color: #ECE7FF; text-shadow: 0 2px 24px rgba(7, 10, 28, .9); }
.motto-b { font-family: var(--accent); font-weight: 400; letter-spacing: -.01em; color: #F4F1FF; text-shadow: var(--x-cool), 0 2px 30px rgba(7, 10, 28, .8); }
.portal-label { font-weight: 700; text-shadow: 0 1px 14px rgba(7, 10, 28, .95); }
.portal.charged .portal-label { text-shadow: 0 0 18px rgba(255, 190, 100, .85); }
.mark, .foot-mark, .pagebar-home { font-weight: 700; letter-spacing: .03em; }
.h-display {
  background: none; color: #FFE6B0; -webkit-text-fill-color: currentColor;
  text-shadow: var(--x-warm);
  padding-bottom: .12em;
}
.h-display em { color: #FF9A4D; text-shadow: var(--x-ember); }
.h-chapter { text-shadow: var(--x-cool); padding-bottom: .1em; }
.stats strong { font-weight: 700; color: #FFD58A; text-shadow: var(--x-warm); }
.card-n { font-weight: 700; color: #FFD58A; }
/* small headings stay flat, so the big ones stand out */
.door-t, .demo-title, .card h3, .courses h3, .human h3, .faqs summary, .slots h3 { font-weight: 700; text-shadow: none; }
/* the machine voice: small technical labels */
.chapter-n, .deck-count, .door-n, .demo-tag, .tag, .courses .lvl, .courses .len, .phase small, .card-n {
  font-family: var(--tech); font-style: normal;
}
.chapter-n { font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.door-n { font-size: 13px; letter-spacing: .14em; }
.deck-count { font-size: 14px; letter-spacing: .08em; }
.deck-count b { font-weight: 500; }
.phase small { letter-spacing: .04em; }

/* buttons with a real edge: they sit up off the page and press down */
.pagebar-book, .btn-fill, .btn-small {
  background: linear-gradient(180deg, #FFEBB8 0%, var(--plasma) 46%, #F2A33E 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(150, 70, 10, .22), 0 4px 0 #B5611D, 0 9px 18px rgba(0, 0, 0, .45);
  transition: transform .12s ease, box-shadow .12s ease, filter .2s;
  font-weight: 700;
}
.pagebar-book:hover, .btn-fill:hover, .btn-small:hover:not(:disabled) {
  background: linear-gradient(180deg, #FFEBB8 0%, var(--plasma) 46%, #F2A33E 100%);
  filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(150, 70, 10, .22), 0 5px 0 #B5611D, 0 12px 22px rgba(0, 0, 0, .5);
}
.pagebar-book:active, .btn-fill:active, .btn-small:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 2px 6px rgba(150, 70, 10, .35), 0 1px 0 #B5611D, 0 3px 8px rgba(0, 0, 0, .4);
}
.btn-small:disabled { transform: translateY(3px); box-shadow: inset 0 2px 6px rgba(150, 70, 10, .35), 0 1px 0 #B5611D; }
.wa-btn {
  background: linear-gradient(180deg, #7DF0AE 0%, #3DDC84 50%, #26B866 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 0 #17803F, 0 9px 18px rgba(0, 0, 0, .45);
  transition: transform .12s ease, box-shadow .12s ease;
}
.wa-btn:hover { background: linear-gradient(180deg, #8FF5BB 0%, #4BE08D 50%, #2BC06C 100%); }
.wa-btn:active { transform: translateY(3px); box-shadow: inset 0 2px 6px rgba(10, 70, 30, .35), 0 1px 0 #17803F, 0 3px 8px rgba(0, 0, 0, .4); }
.chip, .deck-arrow, .slot, .phase {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 rgba(3, 5, 16, .75), 0 6px 12px rgba(0, 0, 0, .3);
  transition: transform .12s ease, box-shadow .12s ease, border-color .2s, background-color .2s, opacity .2s;
}
.chip:active, .deck-arrow:active:not(:disabled), .slot:active, .phase:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4), 0 1px 0 rgba(3, 5, 16, .75); }
.chip.is-on, .slot.is-on, .phase.is-on { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 0 #B5611D, 0 6px 12px rgba(0, 0, 0, .3); }
.deck-arrow.pulse { animation: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 rgba(3, 5, 16, .75), 0 0 0 4px rgba(255, 214, 122, .12), 0 0 18px rgba(255, 170, 80, .3); border-color: var(--plasma); }

/* cards: a slab with an edge, leaning toward the pointer, with light that follows it */
.door, .card, .demo, .courses li {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 5px 0 rgba(3, 5, 16, .7), 0 26px 50px rgba(0, 0, 0, .38);
}
.door, .card {
  background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(255, 236, 200, .09), rgba(255, 236, 200, 0) 60%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .2s, background-color .2s, box-shadow .3s;
  will-change: transform;
}
.door.leaning, .card.leaning { transition: transform .08s linear, border-color .2s, background-color .2s, box-shadow .3s; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 9px 0 rgba(3, 5, 16, .6), 0 36px 60px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: reduce) {
  .door, .card { transition: none; }
  .pagebar-book, .btn-fill, .btn-small, .wa-btn, .chip, .deck-arrow, .slot, .phase { transition: none; }
}


/* =========================================================================
   W05 v3 (Bridge, 24 Sep 2026)
   ========================================================================= */
.logo .ghost { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; }
.logo .ghost .g { display: inline-block; color: rgba(255, 222, 170, .09); -webkit-text-fill-color: rgba(255, 222, 170, .09); text-shadow: 0 0 1px rgba(255, 214, 150, .35), 0 0 26px rgba(255, 170, 80, .22); }
.logo .ghost .g.split { margin-right: .08em; }
.logo .ghost .gsp { display: inline-block; width: .26em; }
.tagline { font-size: clamp(17px, 1.75vw, 26px); }
/* The WebGL layer draws the sky, the Earth and the black hole; the 2D canvases become its sources. */
.gl-on #sky, .gl-on #fx { opacity: 0; }
.gl-on .portal-ring { width: 110px; height: 110px; background: none; box-shadow: none; }
.gl-on .portal-ring::before, .gl-on .portal-ring::after { display: none; }
.gl-on .portal-ring.gulp, .gl-on .portal.charged .portal-ring { animation: none; }
.gl-on .portal:hover .portal-ring, .gl-on .portal:focus-visible .portal-ring { box-shadow: none; }
@media (min-width: 1100px) and (min-height: 640px) { .gl-on .portal { top: calc(var(--cy) + min(34vh, 360px)); } }
/* The name and the four words are drawn in 3D; the HTML stays for screen readers, search and the no-WebGL path. */
.gl3 .logo .ch, .gl3 .logo .ghost, .gl3 .word, .gl3 .veil { visibility: hidden; }
.diving .frame main, .diving .veil, .diving .topbar { opacity: 0 !important; transition: opacity .16s linear; }

/* =========================================================================
   W05 v4 (Bridge, 24 Sep 2026)
   ========================================================================= */
/* Frame one, before the 3D name is built: the name as pale stone. */
.logo .ghost .g { color: #a7a39b; -webkit-text-fill-color: #a7a39b; text-shadow: 0 .02em 0 #77736d, 0 .04em 0 #5f5b56, 0 .06em 0 #4a4743, 0 .08em 0 #3a3835, 0 .14em .14em rgba(0, 0, 0, .6); }
/* The still version: a picture of the scene made ahead of time, sized for the screen. */
#stillbg { position: absolute; inset: 0; background: #070A1C 56% 100% / cover no-repeat; }
.tier-still .logo .ghost .g { position: relative; opacity: var(--shell, 1); color: #5f5b56; -webkit-text-fill-color: #5f5b56;
  text-shadow: .014em .014em 0 #6d6964, .028em .028em 0 #5f5b56, .042em .042em 0 #53504b, .056em .056em 0 #474440, .07em .07em 0 #3c3a37, .084em .084em 0 #32302d, .098em .098em 0 #282624, .2em .2em .14em rgba(0, 0, 0, .6); }
.tier-still .logo .ghost .g::before { content: attr(data-c); position: absolute; left: 0; top: 0;
  background: var(--rock-tex) var(--bx, 0) var(--by, 0) / 1.6em auto, linear-gradient(180deg, #ffffff 0%, #ece8e0 45%, #b9b4ab 100%); background-blend-mode: multiply;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
.tier-still .logo .ghost .g::after { content: attr(data-c); position: absolute; left: 0; top: 0;
  background: var(--crack-tex) var(--by, 0) var(--bx, 0) / 1.5em auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
  opacity: calc(clamp(0, (var(--crk-r, 0) - var(--d, 0)) * 4, 1) * var(--crk-i, 0)); filter: drop-shadow(0 0 .04em rgba(255, 150, 60, .95)) drop-shadow(0 0 .12em rgba(255, 120, 40, .6)); }
.tier-still .logo.veins-on .ghost .g::after { background-image: var(--vein-tex); opacity: .9; filter: drop-shadow(0 0 .04em rgba(255, 190, 90, .85)); }
.tier-still.name-veins .logo .ch { visibility: hidden; }
.tier-still .motto, .tier-still .tagline { z-index: 2; }   /* the words stay in front of the hole's disk, as in the full scene */
.still-star { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.still-star::before, .still-star::after, .still-star i { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.still-star::before { width: 5em; height: 5em; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(255, 246, 228, .95) 12%, rgba(255, 214, 150, .45) 32%, rgba(255, 170, 80, 0) 70%); }
.still-star::after { width: 22em; height: .07em; background: linear-gradient(90deg, rgba(255, 248, 232, 0), rgba(255, 248, 232, .95) 50%, rgba(255, 248, 232, 0)); box-shadow: 0 0 .1em rgba(255, 230, 190, .7); }
.still-star i { width: .07em; height: 9em; background: linear-gradient(180deg, rgba(255, 248, 232, 0), rgba(255, 248, 232, .95) 50%, rgba(255, 248, 232, 0)); box-shadow: 0 0 .1em rgba(255, 230, 190, .7); }
/* The still version's black hole: the traced disk, drawn small, inside the portal ring. */
.tier-still.hole-on .portal-ring { width: 110px; height: 110px; background: none; box-shadow: none; }
.tier-still.hole-on .portal-ring::before, .tier-still.hole-on .portal-ring::after { display: none; }
.tier-still.hole-on .portal-ring.gulp, .tier-still.hole-on .portal.charged .portal-ring { animation: none; }
.tier-still.hole-on .portal:hover .portal-ring, .tier-still.hole-on .portal:focus-visible .portal-ring { box-shadow: none; }
.still-hole { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
@media (min-width: 1100px) and (min-height: 640px) { .tier-still.hole-on .portal { top: calc(var(--cy) + min(34vh, 360px)); } }
/* v9: phones. R's bar swaps "Replay intro" for "Book a call" once the intro ends, and a reload gives returning visitors the
   3-second version, so a phone had no way back to the full intro. Book a call stays; Replay comes back as an icon beside it.
   The button keeps its text ("Replay intro") as its accessible name. */
@media (max-width: 520px) {
  html.intro-done .topbar .intro-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin: -10px -6px; padding: 0; border: 0;
    font-size: 0; line-height: 0; color: var(--dim);
  }
  html.intro-done .topbar .intro-toggle::before {
    content: ''; width: 21px; height: 21px; background: currentColor;
    -webkit-mask: var(--replay-icon) center / contain no-repeat; mask: var(--replay-icon) center / contain no-repeat;
  }
  html.intro-done .topbar .intro-toggle:hover, html.intro-done .topbar .intro-toggle:active { color: var(--starlight); }
}
/* v10: the robot. While the pointer is over it the page shows a hand; while it is held, a closed hand. */
html.bot-hover, html.bot-hover * { cursor: grab !important; }
html.bot-held, html.bot-held * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
/* v11.2: "Where people and AI meet" can stand out, to compare by watching: ?tag=ember (white-hot as it arrives, then
   glowing embers that breathe), ?tag=fire (flames licking up the letters), ?tag=red (solid red with a soft glow).
   v11.3: fire is the default (R's pick, 26 Sep); ?tag=gold gives v11.1's tagline. Every look keeps a thin dark edge so the
   italic stays readable on the sky. */
html.tag-ember .tagline, html.tag-fire .tagline, html.tag-red .tagline { letter-spacing: .02em; }
html.tag-ember .tag-l, html.tag-ember .tag-r {
  color: #FF7634;
  text-shadow: 0 0 2px rgba(7, 10, 28, .95), 0 0 3px rgba(7, 10, 28, .8), 0 0 .45em rgba(255, 96, 32, .65), 0 0 1.1em rgba(255, 64, 20, .4);
  animation: tagEmber 4.2s ease-in-out infinite;
}
html.tag-ember.tag-arrive .tag-l, html.tag-ember.tag-arrive .tag-r { animation: tagForge 2.2s ease-out both, tagEmber 4.2s ease-in-out 2.2s infinite; }
@keyframes tagEmber {
  0%, 100% { color: #FF7634; text-shadow: 0 0 2px rgba(7, 10, 28, .95), 0 0 3px rgba(7, 10, 28, .8), 0 0 .45em rgba(255, 96, 32, .6), 0 0 1.1em rgba(255, 64, 20, .36); }
  50% { color: #FF9656; text-shadow: 0 0 2px rgba(7, 10, 28, .95), 0 0 3px rgba(7, 10, 28, .8), 0 0 .5em rgba(255, 130, 45, .85), 0 0 1.3em rgba(255, 70, 20, .55); }
}
@keyframes tagForge {
  0% { color: #FFF9EE; text-shadow: 0 0 2px rgba(7, 10, 28, .9), 0 0 .5em rgba(255, 244, 214, .95), 0 0 1.3em rgba(255, 180, 90, .8), 0 0 2.4em rgba(255, 96, 32, .55); }
  35% { color: #FFD48A; text-shadow: 0 0 2px rgba(7, 10, 28, .9), 0 0 .5em rgba(255, 200, 110, .85), 0 0 1.3em rgba(255, 130, 50, .65), 0 0 2em rgba(255, 70, 25, .4); }
  100% { color: #FF7634; text-shadow: 0 0 2px rgba(7, 10, 28, .95), 0 0 3px rgba(7, 10, 28, .8), 0 0 .45em rgba(255, 96, 32, .6), 0 0 1.1em rgba(255, 64, 20, .36); }
}
html.tag-fire .tag-l, html.tag-fire .tag-r { color: #FFF1C4; animation: tagFire 1.1s linear infinite; }
html.tag-fire .tag-r { animation-delay: -.45s; }
@keyframes tagFire {
  0%, 100% { text-shadow: 0 0 2px rgba(7, 10, 28, .95), 0 0 3px rgba(40, 8, 0, .8), 0 -.02em .12em #FFE27A, 0 -.1em .22em #FFC23A, .03em -.22em .32em #FF9A2E, -.04em -.38em .44em #FF6A1F, .03em -.58em .6em rgba(235, 50, 15, .9), -.02em -.82em .85em rgba(170, 20, 8, .7); }
  25% { text-shadow: 0 0 2px rgba(7, 10, 28, .95), 0 0 3px rgba(40, 8, 0, .8), .01em -.03em .13em #FFE27A, -.02em -.12em .24em #FFC23A, -.03em -.26em .34em #FF9A2E, .05em -.44em .48em #FF6A1F, -.02em -.66em .66em rgba(235, 50, 15, .88), .03em -.92em .9em rgba(170, 20, 8, .66); }
  50% { text-shadow: 0 0 2px rgba(7, 10, 28, .95), 0 0 3px rgba(40, 8, 0, .8), -.01em -.02em .11em #FFE27A, .02em -.09em .2em #FFC23A, .02em -.2em .3em #FF9A2E, -.03em -.34em .42em #FF6A1F, .04em -.54em .58em rgba(235, 50, 15, .92), -.03em -.76em .8em rgba(170, 20, 8, .72); }
  75% { text-shadow: 0 0 2px rgba(7, 10, 28, .95), 0 0 3px rgba(40, 8, 0, .8), .01em -.02em .12em #FFE27A, .01em -.11em .23em #FFC23A, .04em -.24em .33em #FF9A2E, -.05em -.41em .46em #FF6A1F, .01em -.62em .63em rgba(235, 50, 15, .89), .02em -.87em .88em rgba(170, 20, 8, .68); }
}
html.tag-red .tag-l, html.tag-red .tag-r { color: #FF4A3D; text-shadow: 0 0 2px rgba(7, 10, 28, .95), 0 0 3px rgba(7, 10, 28, .8), 0 0 .55em rgba(255, 44, 30, .45); }
@media (prefers-reduced-motion: reduce) { html.tag-ember .tag-l, html.tag-ember .tag-r, html.tag-fire .tag-l, html.tag-fire .tag-r { animation: none !important; } }
:root { --replay-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12.2a7.4 7.4 0 1 0 2.3-5.4'/%3E%3Cpath d='M4.4 3.9v4.3h4.3'/%3E%3C/svg%3E"); }

/* =========================================================================
   W06: the inside (Bridge, 27 Sep 2026): the front door, four doors of three sideways screens, one Start,
   About us, and Stories / Who we work with / FAQ. The live site's own look: void, nebula, starlight, plasma gold,
   re-entry orange, aurora; National Park for display with the lavender extrusion, Crimson Pro, Tektur labels.
   ========================================================================= */
.page.w6 { overflow: hidden; overflow: clip; scroll-behavior: auto; background: var(--void); }
.w6 .page-body { position: absolute; inset: 0; min-height: 0; background: none; z-index: 1; }
.w6-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 1; transition: opacity .5s ease; }
.w6-bg-img { position: absolute; inset: 0; background: center 30% / cover no-repeat; opacity: .32; }
.w6-bgon .w6-bg-img, html:not(.js) .w6-bg-img { background-image: url(../media/still-wide.webp); }
.w6-bg-glow { position: absolute; left: 50%; top: -24vh; width: min(640px, 70vw); height: 46vh; translate: -50% 0; border-radius: 50%; background: rgba(255, 190, 110, .14); filter: blur(70px); }
.w6-bg-arch { position: absolute; inset: 0; width: 100%; height: 100%; }
.w6-bg-arch path { fill: none; stroke: rgba(255, 210, 122, .16); stroke-width: 2; vector-effect: non-scaling-stroke; }
.w6 .page-sky { z-index: 0; opacity: .7; }
.w6[data-view="front"] .w6-bg { opacity: 0; }

/* ---------- the top bar ---------- */
.w6 .w6-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6; height: 66px;
  padding: 0 40px; gap: 18px;
  background: rgba(7, 10, 28, .82);   /* v1.3: a calmer ground under the menu (was .6) */
  border-bottom: 1px solid rgba(242, 238, 255, .07);
}
.w6-bar-l { display: flex; align-items: center; gap: 22px; min-width: 0; }
.w6 .pagebar-home { padding: 12px 0; min-width: 44px; min-height: 44px; justify-content: flex-start; }
.w6 .mini-ring { width: 20px; height: 20px; }
.w6-alldoors { font-style: italic; font-size: 17px; color: rgba(242, 238, 255, .86); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }   /* v1.3: 44 px tall to tap at every size */
.w6-alldoors:hover { color: var(--starlight); }
.w6-nav { position: absolute; left: 50%; top: 0; height: 66px; translate: -50% 0; align-items: center; gap: 28px; }
/* v1.3: the menu reads as a menu: upright, the display font, full-strength, 44 px tall to click, an underline on hover and on the page you're on */
.w6 .pagebar-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font: 400 16px/1 var(--display); font-style: normal; letter-spacing: .02em; color: #F2EEFF; text-decoration: none; white-space: nowrap; }
.w6 .pagebar-nav a[aria-current="page"] { color: var(--plasma); background: linear-gradient(var(--reentry), var(--reentry)) left bottom / 100% 2px no-repeat; }
.w6-steps { position: absolute; left: 50%; top: 0; height: 66px; translate: -50% 0; display: none; align-items: center; gap: 12px; }
.w6-steps a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #F2EEFF; min-height: 44px; }   /* v1.3: full strength (was 75 %, 6.2:1) */
.w6-steps .w6-n { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 400 12px/1 var(--tech); border: 1.5px solid rgba(242, 238, 255, .45); }
.w6-steps .w6-t { font: 700 14px/1 var(--display); letter-spacing: .02em; white-space: nowrap; }
.w6-steps i { width: 34px; height: 1px; background: rgba(242, 238, 255, .3); }
.w6-steps a.is-done { color: var(--plasma); }   /* v1.3: full strength (was 80 %) */
.w6-steps a.is-done .w6-n { border-color: var(--plasma); color: var(--plasma); }
.w6-steps a.is-done + i { background: var(--plasma); }
.w6-steps a[aria-current="step"] { color: var(--plasma); }
.w6-steps a[aria-current="step"] .w6-n { background: var(--plasma); border-color: var(--plasma); color: #1A1206; font-weight: 500; }
.w6-steps a:hover .w6-t { color: var(--starlight); }
.w6-count { display: none; font: 400 12px/1 var(--tech); letter-spacing: .12em; color: rgba(242, 238, 255, .75); }
.w6 .pagebar-right { gap: 18px; }
/* v1.3: About us is a gold outlined button beside Book a call, on every screen and every size; Book a call stays the one filled gold button */
.w6 .w6-bar-about { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--plasma); background: rgba(255, 210, 122, .08); font: 700 16px/1 var(--display); letter-spacing: .02em; color: var(--plasma); text-decoration: none; white-space: nowrap; }
.w6 .w6-bar-about[aria-current="page"] { background: rgba(255, 210, 122, .22); }
.w6 .pagebar-book { box-shadow: 0 3px 0 #D98A2B, 0 8px 24px rgba(255, 170, 80, .28); font-weight: 700; padding: 12px 22px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
.w6 .sound-toggle { min-width: 44px; min-height: 44px; justify-content: center; }
.w6[data-view="door"] .w6-nav, .w6[data-view="start"] .w6-nav { display: none; }
.w6[data-view="door"] .w6-steps { display: flex; }
.w6[data-view="front"] .w6-alldoors { display: none; }
/* v1.3: the menu button, only where the menu doesn't fit across (1000 px and under); it opens without script, and inside.js closes it */
.w6-menu { display: none; position: relative; }
.w6-menu summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; box-sizing: border-box; border-radius: 12px; border: 1.5px solid rgba(242, 238, 255, .35); cursor: pointer; }
.w6-menu summary::-webkit-details-marker { display: none; }
.w6-menu summary svg { width: 22px; height: 22px; fill: none; stroke: #F2EEFF; stroke-width: 2; stroke-linecap: round; }
.w6-menu[open] summary { background: rgba(242, 238, 255, .12); }
@media (hover: hover) {
  .w6 .pagebar-nav a:hover:not([aria-current]) { color: var(--plasma); background: linear-gradient(rgba(255, 210, 122, .6), rgba(255, 210, 122, .6)) left bottom / 100% 2px no-repeat; }
  .w6 .w6-bar-about:hover { background: rgba(255, 210, 122, .18); }
  .w6-menu summary:hover { background: rgba(242, 238, 255, .12); }
}
@media (forced-colors: active) { .w6-menu summary svg { stroke: CanvasText; } }   /* review 1: the icon in high-contrast themes */
.w6-menu-list { position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; padding: 8px; border-radius: 16px; border: 1px solid rgba(255, 210, 122, .3); background: rgba(8, 10, 26, .97); box-shadow: 0 16px 40px rgba(0, 0, 0, .55); display: flex; flex-direction: column; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }
.w6-menu-list a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 10px; font: 400 18px/1 var(--display); letter-spacing: .02em; color: #F2EEFF; text-decoration: none; }
.w6-menu-list a:first-child { font-weight: 700; color: var(--plasma); }
.w6-menu-list a:hover { background: rgba(242, 238, 255, .08); }
.w6-menu-list a[aria-current="page"] { background: rgba(255, 210, 122, .12); box-shadow: inset 3px 0 0 var(--reentry); }
.w6[data-step="2"] .w6-book, .w6[data-view="start"] .w6-book { display: none; }
.w6-wide { display: inline; }
.w6-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.w6-narrow { display: none; }
.w6 a:focus-visible, .w6 button:focus-visible, .w6 input:focus-visible, .w6 textarea:focus-visible, .w6 summary:focus-visible { outline: 2px solid var(--aurora); outline-offset: 3px; }
.w6 [tabindex="-1"]:focus { outline: none; }

/* ---------- screens ---------- */
/* v1.5: the front door laid out ahead, behind the still-closed page (hidden and inert), so the dive lands on a ready page */
.js .page.w6.w6-warm:not(.is-open) #doors { display: block; }
.w6-main { position: absolute; inset: 0; }
.js .w6-scr { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; display: none; }
.js .w6-scr.is-on { display: block; }
.w6-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.w6-scr.w6-entering { z-index: 2; animation: w6In .3s ease .22s both; }
.w6-scr.w6-leaving { z-index: 1; pointer-events: none; animation: w6Out .26s ease both; }
.w6-scr.w6-leaving.w6-push { transform-origin: var(--ox, 50%) var(--oy, 50%); animation: w6Push .3s cubic-bezier(.5, 0, .9, .6) both; }
@keyframes w6In { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes w6Out { from { opacity: 1; } to { opacity: 0; } }
@keyframes w6Push { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.16); } }
@keyframes w6Fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .w6-scr.w6-entering { animation: w6Fade .22s ease .18s both; }
  .w6-scr.w6-leaving, .w6-scr.w6-leaving.w6-push { animation: w6Out .2s ease both; }
}

/* the doors: three screens side by side, one showing */
.js .w6-door { overflow: hidden; overflow: clip; }
.js .w6-track { display: flex; height: 100%; transform: translateX(calc(var(--step, 0) * -100%)); transition: transform .5s cubic-bezier(.22, .72, .2, 1); will-change: transform; }
.js .w6-door.w6-still .w6-track { transition: none; }
.js .w6-step { flex: 0 0 100%; min-width: 0; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; position: relative; touch-action: pan-y pinch-zoom; }
.w6-step.w6-fade { animation: w6Fade .28s ease both; }
.w6-nojs { display: none; }
.w6-startslot > .w6-start { display: block; position: relative; inset: auto; min-height: 100%; overflow: visible; }

/* the page grid inside a screen */
.w6-in { position: relative; max-width: 1040px; margin: 0 auto; padding: 122px 0 84px; }
.w6-two { display: grid; align-items: start; }
.w6-two-answer { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: 50px; }
.w6-two-answer .w6-sizes { margin-top: 28px; }
.w6-two-see { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); column-gap: 40px; }
.w6-two-start { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: 60px; padding-top: 106px; }
.w6-two-start > .w6-col { padding-top: 16px; }
.w6-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.w6-col-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* type */
.w6-disp { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: .02em; color: #F7F4FF; text-shadow: var(--x-cool); }
.w6-h1 { font-size: clamp(40px, 4.45vw, 64px); line-height: 1; }
.w6-h2 { font-size: clamp(34px, 3.35vw, 48px); line-height: 1.04; }
.w6-start-h { font-size: clamp(38px, 3.9vw, 56px); line-height: 1.04; }
.w6-eyebrow { margin: 0; display: flex; align-items: center; gap: 12px; font: 500 13px/1.2 var(--tech); letter-spacing: .16em; text-transform: uppercase; color: var(--plasma); }
.w6-badge { flex: none; width: 26px; height: 34px; border-radius: 13px 13px 4px 4px; border: 1.5px solid var(--plasma); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; font: 500 10px/1 var(--tech); letter-spacing: 0; }
.w6-badge[hidden] { display: none; }
.w6-lead { margin: 0; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.42; color: rgba(242, 238, 255, .88); }
.w6-lead-s { font-size: 19px; line-height: 1.45; color: rgba(242, 238, 255, .86); }
.w6-lead-m { font-size: 21px; line-height: 1.45; }
.w6-label { margin: 6px 0 0; font: 400 12px/1.2 var(--tech); letter-spacing: .16em; text-transform: uppercase; color: rgba(242, 238, 255, .7); }
.w6-label-s { margin: 0; font-size: 11px; }
.w6-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 19px; line-height: 1.35; }
.w6-list li { display: flex; gap: 12px; }
.w6-list li::before { content: "✦"; color: var(--plasma); flex: none; }
.w6-list-m { font-size: 18px; line-height: 1.38; }
.w6-actions { margin: 10px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.w6-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  font: 700 18px/1 var(--display); letter-spacing: .03em; color: #1A1206; text-decoration: none;
  background: var(--plasma); padding: 14px 26px; border-radius: 999px;
  box-shadow: 0 3px 0 #D98A2B, 0 8px 24px rgba(255, 170, 80, .28);
  transition: background-color .2s, transform .2s;
}
.w6-btn:hover { background: #FFE3A6; transform: translateY(-1px); }
.w6-link { font-style: italic; font-size: 18px; color: rgba(242, 238, 255, .86); text-decoration: underline; text-underline-offset: 3px; padding: 12px 0; }
.w6-link:hover { color: var(--starlight); }
.w6-ph { font-family: var(--display); font-weight: 700; font-size: .82em; letter-spacing: .02em; color: var(--plasma); }
.w6-hint { position: relative; margin: -52px 0 0; padding: 0 16px 24px; text-align: center; font-style: italic; font-size: 16px; color: rgba(242, 238, 255, .66); pointer-events: none; }

/* cards and the gold dashed spaces where a real thing will go */
.w6-card { box-sizing: border-box; border-radius: 20px; border: 1px solid rgba(242, 238, 255, .14); background: rgba(16, 14, 44, .82); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.w6-slot { box-sizing: border-box; border-radius: 14px; border: 1.5px dashed rgba(255, 210, 122, .5); }
.w6-slot-k, .w6-res-k { font: 500 12px/1.2 var(--tech); letter-spacing: .16em; text-transform: uppercase; color: var(--plasma); }
.w6-res-k { font-size: 11px; letter-spacing: .14em; }
.w6-slot-d { font-size: 17px; color: rgba(242, 238, 255, .85); text-align: center; }
.w6-slot-video { height: clamp(170px, calc(100vh - 670px), 230px); flex: none; background: rgba(7, 10, 28, .55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; }
.w6-slot-tall { height: clamp(190px, calc(100vh - 650px), 250px); }
.w6-play { width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--plasma); display: flex; align-items: center; justify-content: center; }
.w6-play svg { width: 22px; height: 22px; fill: var(--plasma); margin-left: 3px; }
.w6-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.w6-res { min-height: 118px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; border-color: rgba(255, 210, 122, .45); }
.w6-res-t { font: 700 17px/1.2 var(--display); letter-spacing: .02em; color: #F7F4FF; }
.w6-res-d { font-style: italic; font-size: 14px; color: rgba(242, 238, 255, .7); }

/* the answer: at every size */
.w6-sizes { padding: 28px 30px; display: flex; flex-direction: column; gap: 18px; }
.w6-sizes-head { display: flex; flex-direction: column; gap: 4px; }
.w6-card-t { margin: 0; font: 700 21px/1.2 var(--display); letter-spacing: .02em; color: #F7F4FF; }
.w6-card-sub { margin: 0; font-style: italic; font-size: 16px; color: rgba(242, 238, 255, .74); }
.w6-size-tabs { display: none; }
.w6-size { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid rgba(242, 238, 255, .12); }
.w6-size h3 { margin: 0; font: 700 17px/1.2 var(--display); letter-spacing: .02em; color: var(--plasma); }
.w6-size p { margin: 0; font-size: 18px; line-height: 1.35; }
.w6-size-note { margin: 0; padding-top: 14px; border-top: 1px solid rgba(242, 238, 255, .12); font-style: italic; font-size: 16px; line-height: 1.4; color: rgba(242, 238, 255, .74); }

/* see it: asked first */
.w6-qa { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.w6-qa dt { font: 700 16px/1.3 var(--display); letter-spacing: .02em; color: #F7F4FF; }
.w6-qa dd { margin: 0 0 12px; font-size: 17px; line-height: 1.4; color: rgba(242, 238, 255, .82); }
.w6-qa dd:last-child { margin-bottom: 0; }
.w6-demo-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }

/* door 01: R's catalogue as a list */
.w6-cat-card { gap: 12px; }
.w6-cat-card .w6-slot-video { height: clamp(150px, calc(100vh - 710px), 230px); }
.w6-cat-card .w6-chips { margin: 0; gap: 6px; }
.w6 .chip { font-size: 13px; padding: 8px 12px; min-height: 36px; }
.w6-courses.courses { display: flex; flex-direction: column; gap: 8px; max-height: 188px; overflow-y: auto; overscroll-behavior: contain; padding: 0 4px 18px 0; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
.w6-courses.courses li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lvl len" "t len"; align-items: center; column-gap: 16px; row-gap: 2px; padding: 10px 14px; border-radius: 10px; border: 0; background: rgba(242, 238, 255, .05); }
.w6-courses.courses li.hide { display: none; }
.w6-courses .lvl { grid-area: lvl; font: 400 11px/1.2 var(--tech); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--plasma); }
.w6-courses h3 { grid-area: t; margin: 0; font: 700 17px/1.2 var(--display); letter-spacing: .02em; color: #F7F4FF; }
.w6-courses .len { grid-area: len; white-space: nowrap; font: 400 12px/1 var(--tech); color: rgba(242, 238, 255, .72); }
.w6-courses p, .w6-courses .bar { display: none; }
.w6-fine { margin: auto 0 0; font-style: italic; font-size: 14px; color: rgba(242, 238, 255, .62); }

/* door 02: how a session runs */
.w6-howto { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.w6-howto li { padding: 16px; border-radius: 12px; background: rgba(242, 238, 255, .05); display: flex; flex-direction: column; gap: 8px; }
.w6-howto-n { font: 500 13px/1 var(--tech); color: var(--plasma); }
.w6-howto b { font: 700 17px/1.2 var(--display); letter-spacing: .02em; color: #F7F4FF; }
.w6-howto li > span:last-child { font-size: 15px; line-height: 1.38; color: rgba(242, 238, 255, .78); }

/* door 03: R's phases and estimator */
.w6-rollout { padding: 20px 22px; }
.w6 .w6-phases { margin: 0; gap: 8px; }
.w6 .w6-phases .phase { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 12px; border: 1px solid rgba(242, 238, 255, .22); background: transparent; color: var(--starlight); font: 700 16px/1.1 var(--display); min-height: 48px; }
.w6 .w6-phases .phase small { margin: 0; font: 400 11px/1.2 var(--tech); color: rgba(242, 238, 255, .7); }
.w6 .w6-phases .phase.is-on { border: 1.5px solid var(--plasma); background: rgba(255, 210, 122, .12); color: var(--plasma); }
.w6 .w6-phases .phase.is-on small { color: var(--plasma); }
.w6-phase-detail.phase-detail { min-height: 0; padding: 16px 18px; border-radius: 12px; background: rgba(242, 238, 255, .05); font-size: 17px; line-height: 1.45; color: rgba(242, 238, 255, .88); }
.w6-phase-detail.phase-detail strong { color: #F7F4FF; }
.w6-est { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; border-radius: 12px; border: 1px solid rgba(242, 238, 255, .12); }
.w6-slider.slider { margin: 0; gap: 12px; }
.w6-est-row { display: flex; justify-content: space-between; align-items: baseline; font: 700 16px/1.2 var(--display); letter-spacing: .02em; color: #F7F4FF; }
.w6-est-row output { font-size: 22px; color: var(--plasma); }
.w6-slider input { accent-color: var(--plasma); min-height: 28px; }
.w6-est-foot { margin: 0; font-size: 16px; line-height: 1.4; color: rgba(242, 238, 255, .82); }
.w6-est-foot strong { color: var(--plasma); }
.w6-slot-doc { flex: 1 1 auto; min-height: 70px; background: rgba(7, 10, 28, .55); display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; }
.w6-slot-doc svg { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--plasma); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.w6-slot-doc > span { display: flex; flex-direction: column; gap: 2px; }
.w6-slot-doc .w6-slot-d { font-size: 16px; text-align: left; }

/* door 04: R's demos behind two tabs */
.w6-tabs { display: flex; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid rgba(242, 238, 255, .1); }
.w6-tab { font: 700 14px/1 var(--display); letter-spacing: .02em; color: rgba(242, 238, 255, .85); background: transparent; border: 1px solid rgba(242, 238, 255, .25); border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; }
.w6-tab:hover { border-color: var(--plasma); }
.w6-tab.is-on { color: #1A1206; background: var(--plasma); border-color: var(--plasma); }
.w6 #demoDeck .deck-bar { display: none; }
.w6 #demoDeck .demo { border: 0; background: none; box-shadow: none; padding: 0; }
.w6 #demoDeck .demo-head { margin-bottom: 10px; }
.w6 #demoDeck .demo-title { font: 700 17px/1 var(--display); }
.w6 .inbox { gap: 8px; }
.w6 .inbox li { padding: 9px 14px; }
.w6 .inbox .from { font-size: 16px; }
.w6 .inbox .subj { font-size: 15px; color: rgba(242, 238, 255, .74); }
.w6 .inbox .tag { font: 400 12px/1 var(--tech); letter-spacing: .08em; text-transform: none; white-space: nowrap; color: var(--aurora); border: 1px solid rgba(127, 227, 255, .45); background: rgba(127, 227, 255, .08); padding: 6px 10px; }
.w6 .inbox .tag.wait { color: var(--starlight); border: 1px dashed rgba(242, 238, 255, .55); background: none; }
.w6 .inbox .tag.human { font-weight: 500; color: #1A1206; background: var(--plasma); border-color: var(--plasma); }
.w6 .inbox li.human { background: rgba(255, 210, 122, .1); box-shadow: inset 0 0 0 1.5px var(--plasma), 0 0 22px rgba(255, 190, 100, .25); }
.w6 .demo-foot { font-size: 15px; color: rgba(242, 238, 255, .7); }
.w6 #demoDeck .clip video { max-height: min(300px, 34vh); object-fit: contain; }

/* start: the booking card */
.w6-nextsteps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 19px; line-height: 1.35; }
.w6-nextsteps li { display: flex; gap: 14px; }
.w6-nextsteps span { flex: none; width: 14px; font: 400 16px/1.4 var(--tech); color: var(--plasma); }
.w6-write { margin: 8px 0 0; font-style: italic; font-size: 17px; color: rgba(242, 238, 255, .74); }
.w6-form { padding: 26px 28px; display: flex; flex-direction: column; gap: 16px; background: rgba(16, 14, 44, .88); }
.w6-fs { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.w6-fs legend { padding: 0; margin-bottom: 9px; font: 700 15px/1.2 var(--display); letter-spacing: .02em; color: #F7F4FF; }
.w6-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.w6-pill { font: 700 14px/1 var(--display); letter-spacing: .02em; color: var(--starlight); background: transparent; border: 1.5px solid rgba(242, 238, 255, .3); border-radius: 999px; padding: 9px 15px; min-height: 44px; cursor: pointer; }
.w6-pill:hover { border-color: var(--plasma); }
.w6-pill.is-on { color: #1A1206; background: var(--plasma); border-color: var(--plasma); }
.w6-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.w6-form label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: rgba(242, 238, 255, .82); }
.w6-form input, .w6-form textarea { box-sizing: border-box; width: 100%; padding: 0 12px; height: 44px; border-radius: 10px; border: 1px solid rgba(242, 238, 255, .22); background: rgba(7, 10, 28, .6); color: var(--starlight); font: 400 16px/1.3 var(--serif); }
.w6-form textarea { height: 64px; padding: 10px 12px; resize: none; }
.w6-form input::placeholder, .w6-form textarea::placeholder { color: rgba(242, 238, 255, .5); }
.w6-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.w6-day { height: 52px; border-radius: 10px; border: 1px solid rgba(242, 238, 255, .22); background: transparent; color: var(--starlight); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; }
.w6-dow { font: 400 11px/1 var(--tech); letter-spacing: .1em; color: rgba(242, 238, 255, .7); }
.w6-dnum { font: 700 16px/1 var(--display); }
.w6-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.w6-time { height: 44px; border-radius: 10px; border: 1px solid rgba(242, 238, 255, .22); background: transparent; color: var(--starlight); font: 700 15px/1 var(--display); cursor: pointer; }
.w6-day:hover, .w6-time:hover { border-color: var(--plasma); }
.w6-day.is-on, .w6-time.is-on { border: 1.5px solid var(--plasma); background: rgba(255, 210, 122, .12); color: var(--plasma); }
.w6-day.is-on .w6-dow { color: var(--plasma); }
.w6-submit { min-height: 54px; border: 0; border-radius: 999px; background: var(--plasma); color: #1A1206; font: 700 18px/1.1 var(--display); letter-spacing: .03em; padding: 12px 18px; box-shadow: 0 3px 0 #D98A2B, 0 8px 24px rgba(255, 170, 80, .28); cursor: pointer; }
.w6-submit:hover { background: #FFE3A6; }
.w6-sample { margin: 0; font-style: italic; font-size: 14px; color: rgba(242, 238, 255, .66); text-align: center; }
.w6-formmsg:empty { display: none; }
.w6-formmsg { padding: 12px 14px; border-radius: 12px; font-size: 16px; line-height: 1.4; }
.w6-formmsg.is-miss { border: 1px solid rgba(255, 106, 43, .55); background: rgba(255, 106, 43, .1); }
.w6-formmsg.is-sent { border: 1.5px dashed rgba(255, 210, 122, .6); background: rgba(255, 210, 122, .08); }
.w6-formmsg strong { color: var(--plasma); }

/* the edges: arrows, the next screen's name peeking in, and the phone dock */
.w6-edges[hidden], .w6-dock[hidden] { display: none; }
.w6-edge { position: absolute; top: 50%; z-index: 5; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(7, 10, 28, .6); cursor: pointer; }
.w6-edge svg { width: 18px; height: 18px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.w6-prev { left: 36px; border: 1.5px solid rgba(242, 238, 255, .3); }
.w6-prev svg { stroke: var(--starlight); }
.w6-next { right: 36px; border: 2px solid var(--plasma); box-shadow: 0 0 18px rgba(255, 210, 122, .45); }
.w6-next svg { stroke: var(--plasma); }
.w6-edge:hover { background: rgba(27, 20, 64, .8); }
.w6-edge[hidden] { display: none; }
.w6-ghost { position: absolute; right: 0; bottom: 20%; z-index: 0; transform: translateX(38%); font: 700 56px/1 var(--display); letter-spacing: .02em; color: #F7F4FF; text-shadow: var(--x-cool); opacity: .16; white-space: nowrap; pointer-events: none; }
.w6-dock { display: none; }

/* ---------- the front door ---------- */
.w6-front-in { position: relative; min-height: 100%; box-sizing: border-box; overflow: hidden; overflow: clip; display: flex; flex-direction: column; align-items: center; padding: 96px 24px 36px; }
.w6-front-head { position: relative; z-index: 2; width: min(1000px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
/* v1.2: a soft dark glow behind the words dims the stars there, so the letters don't sit among dots of their own colour */
.w6-front-head::before { content: ""; position: absolute; left: 50%; top: 46%; width: 128%; height: 165%; translate: -50% -50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(5, 7, 20, .72), rgba(5, 7, 20, .5) 55%, rgba(5, 7, 20, 0)); }
.w6-front-h { font-size: clamp(40px, 4.75vw, 68px); line-height: 1.04; text-wrap: balance; }
/* v1.2: the headline's silver face, drawn over a dark steel body (the landing's gold wordmark, in silver). One glint on landing. */
.w6-shine { position: relative; color: #C9CDE6;
  text-shadow: 0 .012em 0 #A9AFCF, 0 .024em 0 #8D93B8, 0 .036em 0 #72799F, 0 .048em 0 #5A6086, 0 .06em 0 #454A6C, 0 .072em 0 #333752, 0 .084em 0 #23263B, 0 .16em .1em rgba(0, 0, 0, .65), 0 0 .5em rgba(4, 6, 18, .75); }
.w6-shine-face { position: absolute; inset: 0 0 -.25em 0; pointer-events: none; user-select: none; -webkit-user-select: none; text-shadow: none; text-wrap: inherit;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 62%) no-repeat,
    linear-gradient(180deg, #FFFFFF 6%, #F1F2FF 30%, #C4C9E4 54%, #E9EBFA 74%, #FFFFFF 96%);
  background-size: 260% 100%, 100% 100%; background-position: 240% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.w6-front-lead { margin: 0; max-width: 820px; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.42; color: #F2EEFF; text-shadow: 0 0 2px rgba(5, 7, 20, .95), 0 1px 3px rgba(5, 7, 20, .9), 0 2px 18px rgba(5, 7, 20, .9); text-wrap: balance; }
.w6 .w6-e-narrow { display: none; }
.w6-portals { --ph: clamp(250px, calc(100vh - 500px), 410px); --txt: 180px; --pw: clamp(200px, 17.4vw, 250px); position: relative; margin-top: auto; padding-top: 30px; display: flex; align-items: flex-end; justify-content: center; gap: 40px; width: 100%; }
.w6-portals-sky { -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent); position: absolute; left: 50%; bottom: calc(-.23 * var(--sh)); --sh: max(100vh + 180px, 50vw + 90px); width: calc(2 * var(--sh)); height: var(--sh); translate: -50% 0; background: center / 100% 100% no-repeat; pointer-events: none; z-index: 0; }
.w6-bgon .w6-portals-sky, html:not(.js) .w6-portals-sky { background-image: url(../media/still-wide.webp); }
.w6-portals-glow { position: absolute; left: 50%; bottom: -40px; width: min(1180px, 96vw); height: 120px; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(255, 200, 120, .28), rgba(255, 150, 70, 0) 70%); filter: blur(14px); pointer-events: none; z-index: 0; opacity: .75; }
.w6-portal {
  --lit: 0;
  position: relative; z-index: 1; flex: 0 0 auto; box-sizing: border-box;
  width: var(--pw); min-height: var(--ph);
  border-radius: calc(var(--pw) / 2) calc(var(--pw) / 2) 18px 18px;
  border: 2px solid transparent;
  overflow: hidden; overflow: clip;               /* v1.2: everything inside keeps to the arch */
  /* v1.2: a lit rim, deeper space at the top, and the light centred about where the icon sits, just above the words */
  --glow: calc(100% - var(--txt) - 50px);
  --rim: linear-gradient(180deg, #FFF1CF, rgba(255, 198, 120, .85) 36%, rgba(170, 160, 255, .5) 78%, rgba(127, 120, 220, .32));
  --spill: 0 30px 26px -20px rgba(255, 214, 150, .55);   /* light spilling onto the ground at the door's foot */
  /* v1.4: the tunnel's end, behind the icon. --vpb is its height above the door's foot: inside.js measures it from the icon;
     without script it's the same estimate --glow makes. Measured from the foot, so a door growing taller when lit doesn't move it. */
  --vpb: calc(var(--txt) + 50px + var(--ph) * .1); --vp: calc(100% - var(--vpb));
  --padx: 22px; --padb: 28px;
  background: radial-gradient(ellipse 85% 58% at 50% var(--glow), #2E2680 0%, #181350 42%, #0A0B24 82%) padding-box, var(--rim) border-box;
  box-shadow: var(--spill), 0 0 22px rgba(255, 186, 96, .3), 0 0 70px rgba(140, 120, 255, .18), inset 0 0 22px rgba(255, 214, 150, .18);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 0 var(--padx) var(--padb); text-align: center; text-decoration: none; color: var(--starlight);
  transition: min-height .28s ease, box-shadow .28s ease;
}
.w6-portal::before {                           /* the lit state, drawn on door 04 in the design */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .28s ease;
  background: radial-gradient(ellipse 80% 42% at 50% var(--glow), rgba(255, 228, 172, .6), rgba(255, 122, 51, .2) 55%, rgba(10, 10, 30, .95) 100%);
}
/* v1.4: the window into deeper space is a tunnel, the portal painting's look drawn in code (3-Web/W06-door-tunnel-mock/):
   arches the door's own shape running back to a light that sits a little above the icon. Lit, the tunnel flows toward you. */
.w6-pwin { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.w6-pwin::before { content: ""; position: absolute; left: 50%; top: var(--vp); width: 170%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;   /* the light at the end */
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, .95) 0 1.4%, rgba(205, 215, 255, .6) 4.5%, rgba(150, 170, 255, .2) 13%, rgba(120, 140, 255, 0) 30%); }
.w6-pwin::after { content: ""; position: absolute; left: 0; top: var(--vp); width: 100%; aspect-ratio: 100 / 160; translate: 0 -50%; transform-origin: 50% 50%;   /* the arches, centred on the light */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160'%3E%3Cg fill='none' stroke='rgb%28196,204,255%29' vector-effect='non-scaling-stroke' stroke-width='1'%3E%3Cpath stroke-opacity='0.150' d='M0 160L50 80M100 160L50 80M0 68L50 80M100 68L50 80' vector-effect='non-scaling-stroke'/%3E%3Cpath stroke-opacity='0.300' d='M10.000 144.000V70.400A40.000 40.000 0 0 1 90.000 70.400V144.000M18.000 131.200V72.320A32.000 32.000 0 0 1 82.000 72.320V131.200M24.400 120.960V73.856A25.600 25.600 0 0 1 75.600 73.856V120.960M29.520 112.768V75.085A20.480 20.480 0 0 1 70.480 75.085V112.768M33.616 106.214V76.068A16.384 16.384 0 0 1 66.384 76.068V106.214M36.893 100.972V76.854A13.107 13.107 0 0 1 63.107 76.854V100.972M39.514 96.777V77.483A10.486 10.486 0 0 1 60.486 77.483V96.777M41.611 93.422V77.987A8.389 8.389 0 0 1 58.389 77.987V93.422M43.289 90.737V78.389A6.711 6.711 0 0 1 56.711 78.389V90.737M44.631 88.590V78.712A5.369 5.369 0 0 1 55.369 78.712V88.590M45.705 86.872V78.969A4.295 4.295 0 0 1 54.295 78.969V86.872M46.564 85.498V79.175A3.436 3.436 0 0 1 53.436 79.175V85.498M47.251 84.398V79.340A2.749 2.749 0 0 1 52.749 79.340V84.398M47.801 83.518V79.472A2.199 2.199 0 0 1 52.199 79.472V83.518' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
/* lit, by keyboard focus, or by a real pointer (a touch screen keeps :hover stuck after a tap, so it doesn't count) */
.w6-portal:focus-visible { --rim: linear-gradient(180deg, #FFF1CF, #FF8A3D); --spill: 0 30px 28px -18px rgba(255, 230, 180, .8);
  min-height: calc(var(--ph) + 14px); box-shadow: var(--spill), 0 0 60px 8px rgba(255, 170, 80, .38), 0 0 70px rgba(140, 120, 255, .12), inset 0 0 22px rgba(255, 214, 150, .18); }
.w6-portal:focus-visible::before { opacity: 1; }
.w6-portal:focus-visible .w6-pwin::before { background: radial-gradient(circle closest-side, #FFFFFF 0 2%, rgba(255, 236, 200, .85) 6%, rgba(255, 200, 130, .32) 16%, rgba(255, 170, 90, 0) 34%); }
.w6-portal:focus-visible .w6-pwin::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160'%3E%3Cg fill='none' stroke='rgb%28255,228,176%29' vector-effect='non-scaling-stroke' stroke-width='1'%3E%3Cpath stroke-opacity='0.230' d='M0 160L50 80M100 160L50 80M0 68L50 80M100 68L50 80' vector-effect='non-scaling-stroke'/%3E%3Cpath stroke-opacity='0.460' d='M10.000 144.000V70.400A40.000 40.000 0 0 1 90.000 70.400V144.000M18.000 131.200V72.320A32.000 32.000 0 0 1 82.000 72.320V131.200M24.400 120.960V73.856A25.600 25.600 0 0 1 75.600 73.856V120.960M29.520 112.768V75.085A20.480 20.480 0 0 1 70.480 75.085V112.768M33.616 106.214V76.068A16.384 16.384 0 0 1 66.384 76.068V106.214M36.893 100.972V76.854A13.107 13.107 0 0 1 63.107 76.854V100.972M39.514 96.777V77.483A10.486 10.486 0 0 1 60.486 77.483V96.777M41.611 93.422V77.987A8.389 8.389 0 0 1 58.389 77.987V93.422M43.289 90.737V78.389A6.711 6.711 0 0 1 56.711 78.389V90.737M44.631 88.590V78.712A5.369 5.369 0 0 1 55.369 78.712V88.590M45.705 86.872V78.969A4.295 4.295 0 0 1 54.295 78.969V86.872M46.564 85.498V79.175A3.436 3.436 0 0 1 53.436 79.175V85.498M47.251 84.398V79.340A2.749 2.749 0 0 1 52.749 79.340V84.398M47.801 83.518V79.472A2.199 2.199 0 0 1 52.199 79.472V83.518' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E"); animation: w6Tunnel 1.6s linear infinite; }
.w6-portal:focus-visible .w6-picon { stroke: #1A1206; stroke-width: 1.8; background: none; box-shadow: none; }   /* lit: the dark icon on the gold light, as in v1.2 */
.w6-portal:focus-visible .w6-pk { color: var(--plasma); }
.w6-portal:focus-visible .w6-pd { color: rgba(242, 238, 255, .92); }
@media (hover: hover) {
  .w6-portal:hover { --rim: linear-gradient(180deg, #FFF1CF, #FF8A3D); --spill: 0 30px 28px -18px rgba(255, 230, 180, .8);
    min-height: calc(var(--ph) + 14px); box-shadow: var(--spill), 0 0 60px 8px rgba(255, 170, 80, .38), 0 0 70px rgba(140, 120, 255, .12), inset 0 0 22px rgba(255, 214, 150, .18); }
  .w6-portal:hover::before { opacity: 1; }
  .w6-portal:hover .w6-pwin::before { background: radial-gradient(circle closest-side, #FFFFFF 0 2%, rgba(255, 236, 200, .85) 6%, rgba(255, 200, 130, .32) 16%, rgba(255, 170, 90, 0) 34%); }
  .w6-portal:hover .w6-pwin::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160'%3E%3Cg fill='none' stroke='rgb%28255,228,176%29' vector-effect='non-scaling-stroke' stroke-width='1'%3E%3Cpath stroke-opacity='0.230' d='M0 160L50 80M100 160L50 80M0 68L50 80M100 68L50 80' vector-effect='non-scaling-stroke'/%3E%3Cpath stroke-opacity='0.460' d='M10.000 144.000V70.400A40.000 40.000 0 0 1 90.000 70.400V144.000M18.000 131.200V72.320A32.000 32.000 0 0 1 82.000 72.320V131.200M24.400 120.960V73.856A25.600 25.600 0 0 1 75.600 73.856V120.960M29.520 112.768V75.085A20.480 20.480 0 0 1 70.480 75.085V112.768M33.616 106.214V76.068A16.384 16.384 0 0 1 66.384 76.068V106.214M36.893 100.972V76.854A13.107 13.107 0 0 1 63.107 76.854V100.972M39.514 96.777V77.483A10.486 10.486 0 0 1 60.486 77.483V96.777M41.611 93.422V77.987A8.389 8.389 0 0 1 58.389 77.987V93.422M43.289 90.737V78.389A6.711 6.711 0 0 1 56.711 78.389V90.737M44.631 88.590V78.712A5.369 5.369 0 0 1 55.369 78.712V88.590M45.705 86.872V78.969A4.295 4.295 0 0 1 54.295 78.969V86.872M46.564 85.498V79.175A3.436 3.436 0 0 1 53.436 79.175V85.498M47.251 84.398V79.340A2.749 2.749 0 0 1 52.749 79.340V84.398M47.801 83.518V79.472A2.199 2.199 0 0 1 52.199 79.472V83.518' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E"); animation: w6Tunnel 1.6s linear infinite; }
  .w6-portal:hover .w6-picon { stroke: #1A1206; stroke-width: 1.8; background: none; box-shadow: none; }
  .w6-portal:hover .w6-pk { color: var(--plasma); }
  .w6-portal:hover .w6-pd { color: rgba(242, 238, 255, .92); }
}
@media (forced-colors: active) { .w6-portal:hover .w6-picon, .w6-portal:focus-visible .w6-picon { stroke: CanvasText; } }
.w6 .w6-portal:focus-visible { outline: 2px solid var(--aurora); outline-offset: 4px; }
/* v1.2: the words' own dark ground; it grows with the words, so they sit on dark at every size, at rest and lit */
.w6-ptext { position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.w6-ptext::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--padx)); right: calc(-1 * var(--padx)); top: -46px; bottom: calc(-1 * var(--padb)); pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 8, 22, 0), rgba(6, 8, 22, .93) 46px); }
.w6-eclipse .w6-picon { border-radius: 50%; background: radial-gradient(circle closest-side, rgba(6, 8, 22, .92) 0 70%, rgba(6, 8, 22, .7)); box-shadow: 0 0 14px 9px rgba(6, 8, 22, .72); }   /* v1.4: a short door's icon eclipses the tunnel's light */
.w6-picon { flex-shrink: 0; width: 54px; height: 54px; margin-bottom: calc(var(--ph) * .092); filter: drop-shadow(0 0 6px rgba(5, 6, 20, .85)); fill: none; stroke: var(--plasma); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .28s; }
.w6-pn { font: 500 13px/1 var(--tech); letter-spacing: .16em; color: var(--plasma); }
.w6-pt { font: 700 25px/1.08 var(--display); letter-spacing: .02em; color: #F7F4FF; text-shadow: var(--x-cool); }
.w6-pd { font-size: 16px; line-height: 1.38; color: rgba(242, 238, 255, .84); }
.w6-pk { margin-top: 4px; font: 400 11px/1 var(--tech); letter-spacing: .16em; text-transform: uppercase; color: rgba(242, 238, 255, .78); }
.w6-every { margin: 2px 0 0; font-style: italic; font-size: clamp(17px, 1.35vw, 19px); color: #F2EEFF; text-shadow: 0 0 2px rgba(5, 7, 20, .95), 0 1px 3px rgba(5, 7, 20, .9), 0 2px 18px rgba(5, 7, 20, .9); text-align: center; text-wrap: balance; }
.w6-every .w6-wide { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.w6-every b { font-weight: 400; font-style: normal; color: var(--plasma); }
.w6-every i { width: 5px; height: 5px; border-radius: 50%; background: var(--plasma); }
/* v1.2: one dark panel under the doors: the review on the left, About us and Talk to a human on the right. Book a call stays the page's only gold button. */
.w6-base { position: relative; z-index: 2; margin-top: 30px; width: min(1120px, 100%); box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 26px;
  padding: 10px 26px 10px 24px; border-radius: 22px; border: 1px solid rgba(255, 210, 122, .26); background: rgba(6, 8, 22, .86); box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.w6-front-foot { align-self: stretch; padding-left: 26px; border-left: 1px solid rgba(255, 210, 122, .2); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.w6-aboutbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-style: italic; font-size: 16px; color: rgba(242, 238, 255, .88); }
.w6-aboutbtn b { font: 700 17px/1 var(--display); letter-spacing: .02em; font-style: normal; color: var(--plasma); }
.w6-aboutbtn:hover b { color: #FFE3A6; }
.w6-aboutbtn:hover span { color: #F2EEFF; }
.w6-human { font: 700 16px/1.2 var(--display); letter-spacing: .02em; color: var(--plasma); text-decoration: none; border-bottom: 2px solid var(--reentry); padding: 8px 0 2px; }
.w6-human:hover { color: #FFE3A6; }
.w6-front-more { display: none; }
/* v1.1: what clients say, right under the doors */
.w6-voices { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "k . nav all" "q q q q"; align-items: center; gap: 0 10px; }
.w6-voices-k { grid-area: k; font: 500 11px/1.2 var(--tech); letter-spacing: .16em; text-transform: uppercase; color: var(--plasma); }
.w6-voice { grid-area: q; min-width: 0; margin: 0; padding: 0 0 6px; display: flex; align-items: baseline; gap: 12px; }
.w6-voice blockquote { margin: 0; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; min-height: 46px; font-style: italic; font-size: 17px; line-height: 1.35; color: rgba(242, 238, 255, .92); }   /* room for two lines, so a longer review never moves the page */
.w6-voice figcaption { flex: none; font-size: 14px; color: rgba(242, 238, 255, .7); white-space: nowrap; }
.w6-voice.is-slot blockquote { font: 700 14px/1.3 var(--display); font-style: normal; letter-spacing: .02em; color: var(--plasma); }
.w6-voices-nav { grid-area: nav; display: flex; align-items: center; gap: 2px; }
.w6-vbtn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.w6-vbtn svg { width: 16px; height: 16px; fill: none; stroke: var(--plasma); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.w6-vbtn:hover { background: rgba(255, 210, 122, .12); }
.w6-vcount { font: 400 12px/1 var(--tech); color: rgba(242, 238, 255, .7); min-width: 34px; text-align: center; }
.w6-voices-all { grid-area: all; display: inline-flex; align-items: center; min-height: 44px; font: 700 15px/1 var(--display); letter-spacing: .02em; color: var(--plasma); text-decoration: none; white-space: nowrap; }
.w6-voices-all:hover { color: #FFE3A6; text-decoration: underline; text-underline-offset: 4px; }
/* v1.1: our work, the reviews, one case study */
.w6-morep { margin: 0; }
.w6-more { display: inline-block; font: 700 15px/1.2 var(--display); letter-spacing: .02em; color: var(--plasma); text-decoration: none; border-bottom: 2px solid var(--reentry); padding: 10px 0 2px; }
.w6-more:hover { color: #FFE3A6; }
.w6-misc .w6-in.w6-work-in, .w6-misc .w6-in.w6-case-in { max-width: 1040px; }
.w6-workfilter { margin: 6px 0 4px; }
.w6-workgrid, .w6-reviewgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.w6-proj { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; min-height: 196px; box-shadow: none; background: rgba(16, 14, 44, .7); }
.w6-proj[hidden], .w6-review[hidden] { display: none; }
.w6-proj-k { font: 500 11px/1.2 var(--tech); letter-spacing: .14em; text-transform: uppercase; color: var(--plasma); }
.w6-proj-t { margin: 0; font: 700 21px/1.15 var(--display); letter-spacing: .02em; color: #F7F4FF; }
.w6-proj-d { margin: 0; font-size: 16px; line-height: 1.42; color: rgba(242, 238, 255, .84); }
.w6-proj-r { margin: 0; font: 700 15px/1.3 var(--display); letter-spacing: .02em; color: var(--plasma); }
.w6-proj.w6-card .w6-proj-r { font: italic 400 15px/1.3 var(--serif); letter-spacing: 0; color: rgba(242, 238, 255, .7); }
.w6-proj-go { margin-top: auto; padding-top: 6px; font: 700 15px/1.2 var(--display); letter-spacing: .02em; color: var(--plasma); text-decoration: none; }
.w6-proj-go:hover { color: #FFE3A6; }
.w6-reviews { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.w6-reviews .w6-label { margin: 0; }
.w6-review { margin: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; background: rgba(16, 14, 44, .6); }
.w6-review blockquote { margin: 0; font-style: italic; font-size: 18px; line-height: 1.4; color: rgba(242, 238, 255, .92); }
.w6-review.w6-slot blockquote { font: 700 15px/1.35 var(--display); font-style: normal; letter-spacing: .02em; color: #F7F4FF; }
.w6-review figcaption { font-style: italic; font-size: 14px; color: rgba(242, 238, 255, .7); }
.w6-case-meta { margin: 4px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.w6-case-meta div { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(242, 238, 255, .12); background: rgba(16, 14, 44, .6); }
.w6-case-meta dt { font: 400 11px/1.2 var(--tech); letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 238, 255, .62); margin-bottom: 6px; }
.w6-case-meta dd { margin: 0; font-size: 15px; }
.w6-case-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 36px; margin-top: 10px; }
.w6-case-text { display: flex; flex-direction: column; gap: 22px; }
.w6-case-text section { display: flex; flex-direction: column; gap: 8px; }
.w6-case-text .w6-label { margin: 0; }
.w6-case-text p { margin: 0; font-size: 18px; line-height: 1.45; color: rgba(242, 238, 255, .88); }
.w6-case-side { display: flex; flex-direction: column; gap: 16px; }
.w6-case-media { height: 220px; }
.w6-arrive .w6-portals-glow { animation: w6Glow 1.4s ease-out both; }
.w6-shine-face.w6-glint { animation: w6Sheen 1.3s cubic-bezier(.3, 0, .3, 1) .1s 1 both; }   /* set on landing from the dive; it ends with the band past the words */
.w6-arrive .w6-portal { animation: w6Rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.w6-arrive .w6-portal:nth-of-type(2) { animation-delay: .07s; }
.w6-arrive .w6-portal:nth-of-type(3) { animation-delay: .14s; }
.w6-arrive .w6-portal:nth-of-type(4) { animation-delay: .21s; }
@keyframes w6Glow { 0% { opacity: 1; transform: scale(1.5); filter: blur(10px) brightness(2.4); } 100% { opacity: .75; transform: none; filter: blur(14px); } }
@keyframes w6Rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes w6Sheen { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }   /* the band enters at the first letter and leaves after the last */
@keyframes w6Tunnel { to { transform: scale(1.25); } }   /* v1.4: 1.25 = 1 / 0.8, so each arch moves onto the one in front of it and the loop has no seam */

/* ---------- about us ---------- */
.w6-about-in { padding-top: 108px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 44px; }
.w6-about-top { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 360px); justify-content: space-between; column-gap: 40px; align-items: start; }
.w6-about-intro { display: flex; flex-direction: column; gap: 14px; }
.w6-about-h { font-size: clamp(38px, 3.75vw, 54px); line-height: 1.04; }
.w6-quote { margin: 0; padding: 22px 24px; border-color: rgba(255, 210, 122, .3); display: flex; flex-direction: column; gap: 10px; }
.w6-quote p { margin: 0; font: 700 21px/1.25 var(--display); letter-spacing: .02em; }
.w6-quote-a { color: #F7F4FF; }
.w6-quote-b { color: #FFE0A6; text-shadow: var(--x-warm); }
.w6 .w6-quote .w6-quote-c { padding-top: 10px; border-top: 1px solid rgba(242, 238, 255, .12); font: italic 400 17px/1.3 var(--serif); letter-spacing: 0; color: rgba(242, 238, 255, .82); }
.w6-about-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.w6-about-row .w6-label { margin: 0; }
.w6-about-every { margin: 0; font-style: italic; font-size: 16px; color: rgba(242, 238, 255, .78); }
.w6-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.w6-tile { min-height: 196px; box-sizing: border-box; border-radius: 60px 60px 14px 14px; border: 1.5px solid transparent; background: linear-gradient(180deg, rgba(46, 38, 104, .78), rgba(7, 10, 28, .94) 80%) padding-box, linear-gradient(180deg, rgba(255, 227, 166, .8), rgba(255, 138, 61, .3) 55%, rgba(127, 120, 220, .25)) border-box; display: flex; flex-direction: column; gap: 6px; padding: 34px 22px 18px; text-decoration: none; color: var(--starlight); transition: box-shadow .25s, transform .25s; }
.w6-tile:hover { box-shadow: 0 0 36px rgba(255, 170, 80, .3); transform: translateY(-2px); }
.w6-tile-k { font: 500 12px/1.2 var(--tech); letter-spacing: .16em; text-transform: uppercase; color: var(--plasma); }
.w6-tile-t { font: 700 23px/1.1 var(--display); letter-spacing: .02em; color: #F7F4FF; text-shadow: var(--x-cool); }
.w6-tile-d { font-size: 16px; line-height: 1.36; color: rgba(242, 238, 255, .84); }
.w6-tile-go { margin-top: auto; padding-top: 8px; font: 700 14px/1 var(--display); letter-spacing: .02em; color: var(--plasma); }
.w6-line-lead { margin: 0 0 18px; max-width: 760px; font-size: 18px; line-height: 1.45; color: rgba(242, 238, 255, .86); }
.w6-line-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.w6-line-col { padding: 22px 26px; border-radius: 16px; border: 1px solid rgba(242, 238, 255, .12); }
.w6-line-ai { background: rgba(127, 227, 255, .06); }
.w6-line-people { background: rgba(255, 106, 43, .1); border-color: rgba(255, 106, 43, .4); }
.w6-line-col h3 { margin: 0 0 12px; font: 700 19px/1.2 var(--display); letter-spacing: .02em; color: #F7F4FF; }
.w6-line-col ul { margin: 0; padding-left: 20px; font-size: 17px; line-height: 1.55; }
.w6-about-sig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.w6-sig-col { display: flex; flex-direction: column; gap: 12px; }
.w6-sig-col .w6-label { margin: 0; }
.w6-story { margin: 0; padding: 14px 16px; border-radius: 12px; font-size: 17px; line-height: 1.42; color: rgba(242, 238, 255, .86); }
.w6-founders { display: flex; flex-wrap: wrap; gap: 16px; }
.w6-founder { display: flex; align-items: center; gap: 10px; }
.w6-founder > span:last-child { display: flex; flex-direction: column; }
.w6-face { width: 50px; height: 50px; box-sizing: border-box; border-radius: 50%; border: 1.5px dashed rgba(255, 210, 122, .6); background: rgba(7, 10, 28, .6); }
.w6-founder .w6-ph { font-size: 15px; }
.w6-role { font-size: 14px; color: rgba(242, 238, 255, .72); }
.w6-where { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 18px; }
.w6-where li { display: flex; align-items: baseline; gap: 10px; }
.w6-where li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--plasma); box-shadow: 0 0 8px rgba(255, 210, 122, .8); transform: translateY(-1px); }
.w6-where b { font: 700 16px/1 var(--display); letter-spacing: .02em; color: #F7F4FF; }
.w6-sig-col .w6-actions { margin-top: 10px; }
.w6-free { margin: 0; font-style: italic; font-size: 15px; color: rgba(242, 238, 255, .72); }
.w6-signoff { margin: 0; text-align: center; font-style: italic; font-size: 15px; color: rgba(242, 238, 255, .6); }
.w6 .w6-about .pagefoot { position: relative; }

/* ---------- stories, who we work with, faq ---------- */
.w6-misc .w6-in { display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
.w6-misc .w6-h2 { max-width: 22ch; }
.w6-story-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.w6-storycard { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; background: rgba(16, 14, 44, .6); }
.w6-storycard h2 { margin: 0; font: 700 21px/1.15 var(--display); letter-spacing: .02em; color: #F7F4FF; }
.w6-storycard p { margin: 0; font-size: 16px; line-height: 1.45; color: rgba(242, 238, 255, .82); }
.w6-storycard footer { margin-top: auto; font-style: italic; font-size: 14px; color: rgba(242, 238, 255, .7); }
.w6-industries.industries { margin: 8px 0 4px; }
.w6-industries li { font-size: 16px; background: rgba(16, 14, 44, .6); }
.w6-faqs { margin-top: 8px; padding: 6px 26px 12px; border-radius: 20px; border: 1px solid rgba(242, 238, 255, .14); background: rgba(16, 14, 44, .82); }
.w6-faqs details:last-child { border-bottom: 0; }
.w6-faqs summary { font-weight: 700; padding: 6px 28px 6px 0; }
.w6-faqs p { font-size: 17px; }
.w6-faqs a { color: var(--plasma); }

/* ---------- smaller laptops and tablets ---------- */
@media (max-width: 1300px) { .w6-ghost { display: none; } }
@media (max-width: 1200px) {
  .w6-in { max-width: calc(100% - 200px); }
  .w6-nav { gap: 20px; }
  /* v1.3: with About us a button, the menu and the steps no longer fit centred on the window here; they sit centred in the space between */
  .w6-nav, .w6-steps { position: static; translate: none; height: auto; margin: 0 auto; }
}
@media (max-width: 1100px) {
  .w6 .w6-bar { padding: 0 24px; }
  .w6-alldoors .w6-wide { display: none; }
  .w6-alldoors .w6-narrow { display: inline; }
  .w6-steps .w6-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* v1.3: still read aloud */
  .w6-steps a[aria-current="step"] .w6-t { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .w6-steps i { width: 22px; }
  .w6-portals { gap: 22px; --ph: clamp(250px, calc(100vh - 480px), 360px); --pw: clamp(190px, 19vw, 230px); }
  .w6-base { width: min(1000px, 100%); }
  .w6-pd { font-size: 15px; }
  .w6-two-answer { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: 36px; }
  .w6-two-see { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); column-gap: 32px; }
  .w6-two-start { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: 36px; }
  .w6-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w6-about-top { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
}
@media (max-width: 1000px) {
  .w6-nav { display: none; }
  .w6-menu { display: block; }                  /* v1.3: the menu moves behind the menu button */
  .w6-front-more { display: flex; gap: 20px; }
  .w6-front-more a { display: inline-flex; align-items: center; min-height: 44px; font-style: italic; font-size: 16px; color: rgba(242, 238, 255, .85); }
  .w6-in { max-width: calc(100% - 150px); }
  .w6-prev { left: 16px; } .w6-next { right: 16px; }
  .w6-two-answer, .w6-two-see, .w6-two-start { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .w6-two-answer .w6-sizes { margin-top: 0; }
  .w6-hint { display: none; }
  .w6-ghost { display: none; }
  .w6-about-sig { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .w6-workgrid, .w6-reviewgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w6-case-grid { grid-template-columns: minmax(0, 1fr); }
  .w6-case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w6-voice figcaption { display: none; }
  .w6-about-top { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .w6-pd { display: none; }
  /* v1.2: four doors always fit across (v1.1 cut the outer two off on a tablet held upright) */
  .w6-portals { --pw: min(190px, calc((100vw - 114px) / 4)); --txt: 130px; }
  .w6-portal { --padx: 12px; }
  .w6-pt { font-size: 22px; }
  /* the panel stacks: the review, then one row of ways forward */
  .w6-base { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .w6-front-foot { margin-top: 4px; padding: 4px 0 0; border-left: 0; border-top: 1px solid rgba(255, 210, 122, .2); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0 26px; }
}
@media (max-width: 860px) {
  .w6-steps a[aria-current="step"] .w6-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* v1.3: the three numbers only, beside the menu button; the labels are still read aloud */
  .w6-steps i { width: 14px; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .w6-in { padding-top: 96px; }
  .w6-two-start { padding-top: 90px; }
  .w6-front-in { padding-top: 84px; }
  .w6-h1 { font-size: clamp(38px, 4vw, 54px); }
  .w6-front-h { font-size: clamp(38px, 4.2vw, 58px); }
  /* v1.2: short laptop windows (a 1080p screen at 125 % leaves about 1536×730) keep the whole front door on screen */
  .w6-front-in { padding-bottom: 18px; }
  .w6-front-head { gap: 8px; }
  .w6-portals { padding-top: 14px; }
  .w6-base { margin-top: 18px; padding-top: 6px; padding-bottom: 6px; }
  .w6-col { gap: 14px; }
  .w6-picon { width: 42px; height: 42px; margin-bottom: 12px; }
  .w6-pd { font-size: 15px; line-height: 1.32; }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .w6 .w6-bar { height: 56px; padding: 0 16px; gap: 10px; }
  .w6-bar-l { gap: 12px; }
  .w6 .mini-ring { width: 18px; height: 18px; }
  .w6-alldoors { font-size: 15px; }
  .w6 .pagebar-right { gap: 10px; }
  .w6 .pagebar-book { font-size: 14px; padding: 10px 14px; min-height: 36px; box-shadow: 0 3px 0 #D98A2B; }
  .w6[data-view="door"] .w6-steps { display: none; }
  /* v1.3: the phone bar is the ring, About us, Book a call and the menu button. The sound button leaves (phones have no hover sounds);
     the step count leaves too (it met the About us button; the dots at the foot of each door say where you are); "← Doors" is the arrow alone */
  .w6 .sound-toggle { display: none; }
  .w6 .w6-bar-about { min-height: 36px; padding: 0 12px; font-size: 14px; position: relative; }
  .w6 .w6-bar-about::after, .w6-menu summary::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; translate: -50% -50%; }
  .w6-menu summary { position: relative; width: 40px; height: 40px; }
  .w6-alldoors .w6-narrow { display: none !important; }
  .w6-alldoors::before { content: "←"; }
  .w6[data-step="2"] .w6-book { display: none; }
  .w6-in { max-width: none; padding: 80px 20px 130px; }
  .w6-two-start { padding-top: 76px; }
  .w6-about-in { padding-bottom: 36px; }
  .w6-edges { display: none; }
  .w6-dock { display: flex; flex-direction: column; align-items: center; gap: 10px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 18px 20px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(7, 10, 28, 0), rgba(7, 10, 28, .88) 38%); pointer-events: none; }
  .w6-dock > * { pointer-events: auto; }
  .w6-dock-btn { width: 100%; max-width: 420px; height: 52px; box-sizing: border-box; font-size: 17px; }
  .w6-dock-btn[hidden] { display: none; }
  .w6-dots { display: flex; gap: 8px; }
  .w6-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(242, 238, 255, .4); transition: width .25s, background-color .25s; }
  .w6-dots i.is-on { width: 22px; background: var(--plasma); }
  .w6-step .w6-actions .w6-btn { display: none; }
  .w6-step .w6-actions { margin-top: 0; }
  .w6-eyebrow { font-size: 11px; }
  .w6-badge { display: none; }
  .w6-h1 { font-size: 44px; }
  .w6-h2, .w6-start-h, .w6-about-h { font-size: 36px; }
  .w6-lead { font-size: 17px; }
  .w6-lead-s, .w6-lead-m { font-size: 17px; }
  .w6-list { font-size: 16px; gap: 10px; }
  .w6-col { gap: 14px; }
  .w6-sizes { padding: 0; border: 0; background: none; box-shadow: none; gap: 12px; }
  .w6-sizes-head .w6-card-t { font: 400 11px/1.2 var(--tech); letter-spacing: .16em; text-transform: uppercase; color: rgba(242, 238, 255, .62); }
  .w6-card-sub { display: none; }
  .w6-size-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: 999px; border: 1px solid rgba(242, 238, 255, .18); background: rgba(7, 10, 28, .6); }
  .w6-size-tabs button { font: 700 13px/1.1 var(--display); letter-spacing: .02em; color: rgba(242, 238, 255, .85); background: transparent; border: 0; border-radius: 999px; min-height: 44px; padding: 4px 6px; cursor: pointer; }
  .w6-size-tabs button[aria-pressed="true"] { color: #1A1206; background: var(--plasma); }
  .w6-size { display: none; padding: 14px 16px; border: 1px solid rgba(242, 238, 255, .14); border-radius: 14px; background: rgba(16, 14, 44, .84); }
  .w6-size h3 { display: none; }
  .w6-size p { font-size: 16px; line-height: 1.4; }
  .w6-sizes[data-size="you"] .w6-size[data-s="you"], .w6-sizes[data-size="team"] .w6-size[data-s="team"], .w6-sizes[data-size="co"] .w6-size[data-s="co"] { display: block; }
  .w6-size-note { border-top: 0; padding-top: 0; font-size: 15px; }
  .w6-demo-card { min-height: 0; padding: 16px; }
  .w6-slot-video { height: 170px; }
  .w6-results { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .w6-res { min-height: 0; }
  .w6-howto { grid-template-columns: minmax(0, 1fr); }
  .w6 .w6-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w6-form { padding: 20px 18px; }
  .w6-fields { grid-template-columns: minmax(0, 1fr); }
  .w6-days { gap: 6px; }
  .w6 .inbox .tag { white-space: normal; }
  .w6-tab { flex: 0 1 auto; white-space: nowrap; font-size: 12px; padding: 8px 10px; }
  .w6-courses.courses { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 0; }
  /* the front door on a phone: a 2 × 2 grid of arches */
  .w6-front-in { padding: 78px 20px calc(24px + env(safe-area-inset-bottom)); }
  .w6-front-head { gap: 10px; }
  .w6 .w6-e-wide { display: none; }
  .w6 .w6-e-narrow { display: flex; font-size: 11px; }
  .w6-front-h { font-size: 38px; line-height: 1.06; }
  .w6-front-lead { font-size: 16px; }
  .w6-wide { display: none !important; }
  .w6-narrow { display: inline !important; }
  .w6-portals { --ph: 186px; --txt: 84px; margin-top: 26px; padding-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 350px; align-items: end; }
  .w6-portals-sky { --sh: max(100vh + 220px, 1060px); bottom: calc(-.23 * var(--sh)); translate: -44% 0; }
  .w6-portal { width: auto; border-radius: 84px 84px 14px 14px; border-width: 1.5px; gap: 5px; --padx: 10px; --padb: 18px; }
  .w6-ptext { gap: 5px; }
  .w6-ptext::before { top: -30px; background: linear-gradient(180deg, rgba(6, 8, 22, 0), rgba(6, 8, 22, .93) 30px); }
  .w6-portal:hover, .w6-portal:focus-visible { min-height: var(--ph); }
  .w6-picon { width: 34px; height: 34px; margin-bottom: 18px; }
  .w6-pn { font-size: 11px; }
  .w6-pt { font-size: 19px; }
  .w6-pd { display: none; }
  .w6-pk { font-size: 10px; letter-spacing: .14em; margin-top: 0; }
  .w6-front-head::before { width: 118%; height: 160%; }
  .w6-every { margin-top: 0; font-size: 15px; line-height: 1.4; }
  .w6-portal { --spill: 0 20px 18px -14px rgba(255, 214, 150, .55); }
  .w6-base { margin-top: 26px; max-width: 350px; grid-template-columns: minmax(0, 1fr); padding: 6px 14px 8px 16px; border-radius: 20px; }
  .w6-front-foot { margin-top: 2px; flex-direction: column; align-items: flex-start; gap: 0; }
  .w6-aboutbtn { font-size: 15px; gap: 8px; }
  .w6-aboutbtn b { font-size: 15px; }
  .w6-human { font-size: 15px; padding: 10px 0 4px; }
  .w6-front-more a { font-size: 15px; }
  .w6-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .w6-tile { min-height: 0; border-radius: 40px 40px 14px 14px; padding: 22px 20px 16px; }
  .w6-line-cols, .w6-story-cards, .w6-workgrid, .w6-reviewgrid { grid-template-columns: minmax(0, 1fr); }
  .w6-proj { min-height: 0; }
  .w6-voices { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k nav" "q q" "all all"; }
  .w6-voice { flex-direction: column; gap: 2px; padding: 0 4px 0 0; }
  .w6-voice blockquote { white-space: normal; font-size: 15px; -webkit-line-clamp: 4; line-clamp: 4; min-height: 41px; }
  .w6-voice.is-slot blockquote { font-size: 13px; }
  .w6-voice figcaption { display: block; font-size: 13px; }
  .w6-voices-all { justify-self: start; font-size: 14px; }
  .w6-quote p { font-size: 19px; }
  .w6-faqs { padding: 4px 18px 10px; }
  .w6 .w6-book, .w6-alldoors, .w6 .chip, .w6-tab, .w6 #triageRun, .w6-human, .w6-front-more a, .w6-link, .w6-proj-go, .w6-more { position: relative; }
  .w6 .pagefoot a { display: inline-block; padding: 14px 0; }
  .w6 .w6-book::after, .w6-alldoors::after, .w6 .chip::after, .w6-tab::after, .w6 #triageRun::after, .w6-human::after, .w6-front-more a::after, .w6-link::after, .w6 .clip-btn::after, .w6-proj-go::after, .w6-more::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; min-width: 44px; translate: 0 -50%; }
  .w6 .chip { min-height: 44px; }
  .w6-tab { min-height: 44px; }
  .w6-slider input { min-height: 44px; }
  .w6-faqs summary { padding: 11px 28px 11px 0; }
  .w6-faqs details { padding: 6px 0; }
}
@media (max-width: 380px) {
  .w6 .pagebar-home span.mini-ring { display: block; }   /* R's bar hid its only child at 360 px, the ring itself */
  /* v1.3: the ring, the arrow, About us, Book a call and the menu button across 320 px */
  .w6 .w6-bar { padding: 0 12px; gap: 8px; }
  .w6-bar-l { gap: 8px; }
  .w6 .pagebar-right { gap: 6px; }
  .w6 .w6-bar-about { padding: 0 9px; font-size: 13px; }
  .w6 .pagebar-book { padding: 10px; font-size: 13px; }
  .w6-menu summary { width: 36px; height: 36px; }
  .w6-size-tabs button { font-size: 12px; }
  .w6-front-h { font-size: 34px; }
  .w6-portals { gap: 12px; --ph: 176px; }
  .w6-pt { font-size: 17px; }
  .w6-h1 { font-size: 38px; }
  .w6-days .w6-dow { font-size: 10px; letter-spacing: .04em; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .w6-track { transition: none; }
  .w6-portal, .w6-portal::before, .w6-tile { transition: none; }
  .w6-arrive .w6-portals-glow, .w6-arrive .w6-portal, .w6-shine-face.w6-glint { animation: none; }
  .w6-portal:hover .w6-pwin::after, .w6-portal:focus-visible .w6-pwin::after { animation: none; }   /* v1.4: the tunnel lights but doesn't move */
}

/* ---------- no JavaScript: every screen, top to bottom ---------- */
html:not(.js) .page.w6 { position: relative; inset: auto; visibility: visible; opacity: 1; transform: none; overflow: visible; }
html:not(.js) .w6 .page-body { position: relative; inset: auto; }
html:not(.js) .w6-bg { position: fixed; }
html:not(.js) .w6 .w6-bar { position: sticky; }
html:not(.js) .w6-steps, html:not(.js) .w6-edges, html:not(.js) .w6-dock, html:not(.js) .w6-alldoors, html:not(.js) .w6-size-tabs, html:not(.js) .w6-hint, html:not(.js) .w6 .sound-toggle { display: none !important; }   /* v1.3: About us stays in the bar without script too */
html:not(.js) .w6-main { position: relative; inset: auto; }
html:not(.js) .w6-scr, html:not(.js) .w6-step { position: relative; }
html:not(.js) .w6-in { padding-top: 60px; padding-bottom: 60px; }
html:not(.js) .w6-front-in { min-height: 100vh; }
html:not(.js) .w6-startslot, html:not(.js) .w6-nojs { display: block; }
html:not(.js) .w6-startslot { padding: 0 24px 40px; text-align: center; }
html:not(.js) .w6-nojs a { font: 700 17px/1.2 var(--display); color: var(--plasma); }
html:not(.js) .w6-form, html:not(.js) .w6-voices-nav, html:not(.js) .w6-workfilter, html:not(.js) .w6-tabs { display: none !important; }
html:not(.js) .w6-size { display: flex !important; }
html:not(.js) .w6-size h3 { display: block !important; }

/* HumanIA W06 v1 (Bridge, 1 Oct 2026): Start keeps the live Spanish page's WhatsApp button where the English has its email
   line (R's answer, ledger 186). The button and its note are the landing stylesheet's own (.wa, .wa-btn, .wa-note);
   here it sits in the left column, under the next steps. */
.w6-wa { justify-content: flex-start; margin: 18px 0 0; max-width: none; }
.w6-wa .wa-note { text-align: left; }

/* HumanIA W06 v1: room for the Spanish words, measured (02-LEDGER.md entry 193). Layout only; no word changes.
   1. The front door: "Obtenga un plan" and "Mándelo a construir" take two lines where the English names take one, so on
      short laptop windows the doors outgrew the screen (cut by 4-33 px at 7 of 119 sizes). The short-window spacing that
      English applies from 760 px tall applies here from 800 px, and the door names on laptops are 23 px (English 25). */
@media (max-height: 800px) and (min-width: 761px) {
  .w6-in { padding-top: 96px; }
  .w6-two-start { padding-top: 90px; }
  .w6-front-in { padding-top: 84px; padding-bottom: 18px; }
  .w6-h1 { font-size: clamp(38px, 4vw, 54px); }
  .w6-front-h { font-size: clamp(38px, 4.2vw, 58px); }
  .w6-front-head { gap: 8px; }
  .w6-portals { padding-top: 14px; }
  .w6-base { margin-top: 18px; padding-top: 6px; padding-bottom: 6px; }
  .w6-col { gap: 14px; }
  .w6-picon { width: 42px; height: 42px; margin-bottom: 12px; }
  .w6-pd { font-size: 15px; line-height: 1.32; }
}
@media (min-width: 1001px) { .w6-pt { font-size: 23px; } }
/* 2. The laptop menu and the door steps: the Spanish menu is wider, so up to 1360 px (English: 1200 px) they sit centred in
      the space between the bar's two sides rather than on the window's centre. */
@media (max-width: 1360px) {
  .w6-nav, .w6-steps { position: static; translate: none; height: auto; margin: 0 auto; }
  .w6-nav { gap: 20px; }
}
/* 3. The bar's gold button: "Agendar" on screens 1200 px and under, "Agendar llamada" wider (R's yes, entry 195). Screen
      readers hear "Agendar llamada" at every size, from the link's aria-label. */
.w6-bar .w6-book-short { display: none; }
@media (max-width: 1200px) {
  .w6-bar .w6-book-full { display: none; }
  .w6-bar .w6-book-short { display: inline; }
}

/* 4. HumanIA W06 v1.1: door 04's demo tabs. On phones English keeps each tab on one line; the Spanish names are longer
      ("De WhatsApp al calendario ▶" ran off a 320-400 px screen), so here the two tabs share the row and wrap their words
      (02-LEDGER.md entry 209). */
@media (max-width: 760px) {
  .w6-tab { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.15; text-align: center; }
}
/* 5. HumanIA W06 v1.1: the times are kept whole ("10:00 a. m." never splits, entry 209), so below 360 px wide they get
      slightly smaller text to fit their buttons. */
@media (max-width: 359px) {
  .w6-time { font-size: 13px; padding: 0 3px; }
}