/*
 * Homepage — "Story Scroll" redesign (ported from design/siteifyit_final_design.html).
 *
 * The base rules describe the finished, static page: that is what visitors without
 * JavaScript and crawlers get. js/boot.js adds two classes to <html> before paint:
 *   .js      — scripts run; reveal states start hidden and story.js lights them up
 *   .motion  — motion is on (not prefers-reduced-motion, not toggled off), so the
 *              pinned scenes, the flip and the neon power-up are shown
 * Calm mode is .js without .motion (story.js also sets .nomotion).
 *
 * Privacy and 404 load this file too (for tokens, nav, footer) plus pages.css.
 */

:root {
  --bg: #05070c;
  --ink: #f4fbff;
  --ink-2: rgba(244, 251, 255, 0.82);
  --muted: rgba(244, 251, 255, 0.58);
  --line: rgba(244, 251, 255, 0.12);
  --cyan: #5ec8d4;
  --cyan-hi: #8fe3ec;
  --pink: #ff4fd8;
  --gold: #ffb547;
  /* Plus Jakarta Sans ships no Greek subset; Inter covers those glyphs by unicode-range. */
  --font-body: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --neon-text: 0 0 8px rgba(94, 200, 212, 0.8), 0 0 26px rgba(94, 200, 212, 0.4);
  --gutter-l: max(24px, env(safe-area-inset-left, 0px));
  --gutter-r: max(24px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
}

img,
svg,
canvas {
  display: block;
}

a {
  color: inherit;
}

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

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

.label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
}

em {
  font-style: normal;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 0.6em 1em;
  border-radius: 999px;
  background: var(--cyan);
  color: #04131a;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s;
}

.skip-link:focus {
  transform: none;
}

html:not(.js) .js-only {
  display: none !important;
}

.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

main {
  position: relative;
  z-index: 1;
}

main:focus {
  outline: none;
}

section {
  position: relative;
}

/* From lenis/dist/lenis.css */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* --------------------------------------------------------- top nav */

.gnav {
  position: fixed;
  z-index: 7;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: max(16px, env(safe-area-inset-top, 0px)) var(--gutter-r) 0 var(--gutter-l);
  mix-blend-mode: difference;
  color: #fff;
  transition: opacity 0.4s;
}

html.js .gnav:not(.on) {
  opacity: 0;
  pointer-events: none;
}

.gnav a {
  color: #fff;
  text-decoration: none;
}

.gnav a:focus-visible,
.gnav button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.glogo {
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 1.1rem;
  transition: opacity 0.4s;
}

.gnav.inhero .glogo {
  opacity: 0;
  pointer-events: none;
}

.glinks {
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gright {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gcta {
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1.5px solid #fff;
  border-radius: 999px;
  padding: 0.55em 1em;
  white-space: nowrap;
}

.lang-switch {
  display: flex;
  gap: 2px;
}

.lang-btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #fff;
  background: none;
  border: 0;
  padding: 0.4em 0.35em;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s;
}

.lang-btn:hover,
.lang-btn.is-active {
  opacity: 1;
}

.lang-btn.is-active {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.gmotion {
  font: inherit;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.4em 0.2em;
}

.gmotion i {
  width: 22px;
  height: 12px;
  border-radius: 999px;
  border: 1.5px solid #fff;
  position: relative;
}

.gmotion i::after {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.gmotion[aria-pressed="true"] i::after {
  transform: translateX(10px);
}

/* Full-screen fade used when a nav jump skips more than one chapter */
.veil {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s ease;
}

.veil.on {
  opacity: 1;
  pointer-events: auto;
}

/* Chapter indicator, bottom right */
.hud {
  position: fixed;
  z-index: 5;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  right: max(18px, env(safe-area-inset-right, 0px));
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #dffcff;
  border: 1px solid rgba(94, 200, 212, 0.45);
  background: rgba(5, 10, 16, 0.6);
  border-radius: 999px;
  padding: 0.5em 0.9em;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.grid5 {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s;
  background-image: linear-gradient(rgba(94, 200, 212, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 200, 212, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 40%, transparent 85%);
  mask-image: radial-gradient(120% 90% at 50% 50%, #000 40%, transparent 85%);
}

.grid5.on {
  opacity: 1;
}

/* ---------------------------------------------------------------- hero */

/* The photo is the static fallback: no JS, or WebGL unavailable. The canvas paints over it. */
.hero4 {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #05070c url("../img/hero-acropolis.webp") 35% 60% / cover no-repeat;
}

/* Big or high-density desktop screens: the 3840 original (same query as BIG_HERO in hero-gl.js) */
@media (min-width: 1700px), (min-width: 821px) and (min-resolution: 1.5dppx) {
  .hero4 {
    background-image: url("../img/hero-acropolis-3840.webp");
  }
}

html.js .hero4 {
  position: fixed;
  inset: 0;
  z-index: 4;
  height: auto;
  will-change: opacity;
}

/* With JS the photo is framed exactly like the WebGL scene's first frame, so the
   scene fades in over an identical picture and zooms out from there (no jump).
   From hero-gl.js: the photo (3:2) is scaled --z times its cover size and its
   point P = (35%, 44% from top) sits at the screen target T. Keep in sync with
   P, target() and the intro zoom in hero-gl.js. */
html.js .hero4 {
  /* Units match the canvas: 100vw wide (see below) and the current viewport height */
  --vh: 1vh;
  --z: 1.6;
  --tx: 36vw;
  --ty: calc(27 * var(--vh));
  --w: calc(var(--z) * max(100vw, 150 * var(--vh)));
  --h: calc(var(--w) / 1.5);
  background-size: var(--w) var(--h);
  background-position: calc(var(--tx) - 0.35 * var(--w)) calc(var(--ty) - 0.44 * var(--h));
}

@supports (height: 1dvh) {
  html.js .hero4 {
    --vh: 1dvh;
  }
}

/* Calm mode has no intro zoom: the scene rests at 1.12 */
html.nomotion .hero4 {
  --z: 1.12;
}

/* 100vw, not 100%: hero-gl.js draws at window.innerWidth, which includes a desktop
   scrollbar. At 100% the scene was squeezed by the scrollbar's width; now the
   strip under the scrollbar is simply clipped by .hero4. */
.hero4 canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-out; /* FADE_MS in hero-gl.js */
}

/* hero-gl.js sets this once the scene is ready; until then the CSS photo shows */
.hero4 canvas.is-live {
  opacity: 1;
}

.shade4,
.flash4 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.shade4 {
  background: linear-gradient(180deg, rgba(5, 7, 12, 0.55), transparent 28%, transparent 52%, rgba(5, 7, 12, 0.85));
}

.flash4 {
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, #f4feff 0%, #b8f1f7 22%, rgba(94, 200, 212, 0.75) 45%, rgba(6, 17, 26, 0) 80%);
}

.htop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(18px, env(safe-area-inset-top, 0px)) var(--gutter-r) 0 var(--gutter-l);
}

/* Without JS the fixed nav already carries the logo */
html:not(.js) .htop {
  display: none;
}

.hlogo,
.endlogo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hlogo small,
.endlogo small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  text-align: left;
}

.hlogo i {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--cyan);
  box-shadow: 0 0 12px rgba(94, 200, 212, 0.6);
}

.hbody {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--gutter-r) max(9vh, env(safe-area-inset-bottom, 0px)) var(--gutter-l);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  will-change: opacity, transform, filter;
}

.hbody .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
}

.hbody h1 {
  margin: 14px 0;
  font-size: clamp(2.6rem, 6.6vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
}

.hbody h1 span {
  color: var(--cyan);
}

.hbody p {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 1.02rem;
}

.hhud {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: grid;
  gap: 6px;
  text-align: right;
  border: 1px solid rgba(94, 200, 212, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(5, 10, 16, 0.45);
}

.hhud b {
  color: var(--cyan-hi);
  font-weight: 500;
}

.hhint {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Scroll room for the fixed hero to fade out over */
.intro-spacer {
  display: none;
}

html.js .intro-spacer {
  display: block;
  height: 100vh;
  height: 100svh;
}

/* ------------------------------------------- 2 · the problem (motion only) */

.motion-only {
  display: none;
}

html.motion .motion-only {
  display: block;
}

#problem {
  height: 180vh;
}

.marquee {
  position: absolute;
  left: 0;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
  font-size: clamp(4rem, 14vw, 13rem);
  will-change: transform;
}

.m1 {
  top: 14vh;
  color: var(--ink);
}

.m1 span {
  color: var(--pink);
  text-shadow: 0 0 30px rgba(255, 79, 216, 0.5);
}

.m2 {
  bottom: 12vh;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 79, 216, 0.55);
}

.cap {
  position: absolute;
  left: 50%;
  bottom: 4vh;
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}

/* Full-screen layer; story.js clips it to a card and opens it to the whole screen */
.card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  clip-path: inset(27% 29% 27% 29% round 14px);
}

.card picture {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card.jit img {
  animation: jit 0.2s steps(3) 1;
}

@keyframes jit {
  0% {
    filter: none;
  }
  33% {
    filter: hue-rotate(80deg) saturate(2.4);
    transform: translateX(8px) scale(1.1);
  }
  66% {
    filter: hue-rotate(-50deg);
    transform: translateX(-6px) scale(1.1);
  }
  100% {
    filter: none;
  }
}

.scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 79, 216, 0.16) 3px 4px);
  mix-blend-mode: screen;
  opacity: 0.35;
}

/* ----------------------------------------- 3 · the turn (motion only) */

#turn {
  height: 360vh;
}

.turn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.tword {
  position: relative;
  display: flex;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-size: clamp(3.4rem, 13vw, 12rem);
  will-change: transform;
}

.tword span {
  display: inline-block;
  will-change: transform, opacity;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: color 0.8s ease, filter 0.8s ease;
}

/* story.js sizes and offsets this so the photo runs across the remaining letters */
/* Below-the-fold photo: applied once the page has loaded (html.bg-ready, story.js), or straight away without JS */
html.bg-ready .tword span:not(.gone) {
  background-image: url("../img/athens-city-night.webp");
  background-image: image-set(url("../img/athens-city-night.avif") type("image/avif"), url("../img/athens-city-night.webp") type("image/webp"));
}

.tword .gone {
  color: var(--pink);
  text-shadow: 0 0 24px rgba(255, 79, 216, 0.6);
}

.tword.filled span {
  color: transparent !important;
  filter: drop-shadow(0 0 1px rgba(143, 227, 236, 0.9)) drop-shadow(0 0 18px rgba(94, 200, 212, 0.45));
}

.temple {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(78vw, 760px);
  transform: translate(-50%, -56%);
  overflow: visible;
}

.temple #templePath {
  fill: none;
  stroke: #bff4fa;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px rgba(94, 200, 212, 1))
    drop-shadow(0 0 22px rgba(94, 200, 212, 0.7)) drop-shadow(0 0 48px rgba(94, 200, 212, 0.4));
  animation: hum 3.2s ease-in-out infinite;
}

.temple .pool {
  opacity: 0;
  transform-origin: 300px 292px;
  transition: opacity 1s ease;
  animation: pool 3.2s ease-in-out infinite;
}

@keyframes hum {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.86;
  }
}

@keyframes pool {
  0%,
  100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.94);
  }
}

.tcap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12vh;
  text-align: center;
  display: grid;
  gap: 10px;
  padding: 0 24px;
}

.tcap .label {
  justify-self: center;
}

.tcap h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.tcap h2 s {
  text-decoration: none;
  color: var(--muted);
  position: relative;
}

.tcap h2 s::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 54%;
  height: 3px;
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink);
  transform-origin: left;
  transform: scaleX(var(--strike, 0));
}

.tcap h2 em {
  color: #dffcff;
  text-shadow: 0 0 8px rgba(94, 200, 212, 0.9), 0 0 28px rgba(94, 200, 212, 0.45);
}

.drop {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 12vh;
  transform: translateX(-50%) scaleY(var(--drop, 0));
  transform-origin: top;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan), 0 0 22px rgba(94, 200, 212, 0.5);
}

/* ------------------------------------------- line sections (4, 5, 6, 7) */

.lsec {
  padding-block: 14vh 0;
}

.lsec .line5 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

.line5 path,
.feed path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(94, 200, 212, 0.9)) drop-shadow(0 0 16px rgba(94, 200, 212, 0.45));
}

.lsec .wrap {
  position: relative;
  z-index: 1;
}

.lhead {
  text-align: center;
  display: grid;
  gap: 12px;
  justify-items: center;
  margin-bottom: 10vh;
}

.lhead h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.6rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 18ch;
  text-wrap: balance;
}

.lhead h2 em,
.p8left h2 em,
.n7txt h2 em {
  color: #dffcff;
  text-shadow: var(--neon-text);
}

/* ---------------------------------------------------- 4 · three pillars */

.sec4 {
  padding-block: 18vh 22vh;
  /* The glow behind the pillars reaches 6vw past them, wider than the page margin on tablets */
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  .sec4 {
    overflow: hidden;
  }
}

.pillars {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  margin-top: calc(16vh + 120px);
}

.pillars::before,
.pillars::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.pillars::before {
  inset: calc(-120px - 6vh) -6vw -10vh;
  background: radial-gradient(60% 55% at 50% 38%, rgba(94, 200, 212, 0.13), transparent 70%);
}

.pillars::after {
  left: 4%;
  right: 4%;
  bottom: -70px;
  height: 80px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(143, 227, 236, 0.28), rgba(94, 200, 212, 0.08) 50%, transparent 75%);
}

.pillars.lit::before,
.pillars.lit::after,
html:not(.js) .pillars::before,
html:not(.js) .pillars::after {
  opacity: 1;
}

.idlabel {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.8rem, 1.3vw, 1.05rem);
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  text-transform: uppercase;
  color: #dffcff;
  text-shadow: 0 0 6px rgba(94, 200, 212, 1), 0 0 18px rgba(94, 200, 212, 0.7), 0 0 36px rgba(94, 200, 212, 0.4);
  opacity: 0;
  transition: opacity 0.6s;
}

.idlabel.on {
  opacity: 1;
  animation: wordflick 0.5s linear 1;
}

.pcard {
  --n2: 94, 200, 212;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 42vh;
  padding: 26px 24px 30px;
  border-radius: 16px;
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.1, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.1, 1);
}

html.js .pcard:not(.on) {
  opacity: 0.2;
  transform: translateY(20px);
}

.pcard .ix {
  align-self: flex-start;
  font-weight: 800;
  font-size: 2.6rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(143, 227, 236, 0.45);
}

.pcard h3 {
  margin: 10px 0 0;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #fff;
}

.pcard p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.pcard .stat {
  margin-top: auto;
  padding-top: 10px;
  min-height: 100px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.pcard .stat b {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #e6fdff;
  text-shadow: 0 0 8px rgba(143, 227, 236, 0.95), 0 0 24px rgba(94, 200, 212, 0.6);
}

.pcard .stat span {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.pcard .stat small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Lit: the card itself disappears and the type glows */
.pcard.on h3,
html:not(.js) .pcard h3 {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.55), 0 0 26px rgba(var(--n2), 0.65), 0 0 52px rgba(var(--n2), 0.3);
}

.pcard.on p,
.pcard.on .stat span,
html:not(.js) .pcard p,
html:not(.js) .pcard .stat span {
  color: #eaf8fb;
  text-shadow: 0 0 8px rgba(var(--n2), 0.9), 0 0 22px rgba(var(--n2), 0.45);
}

.pcard.on .ix,
html:not(.js) .pcard .ix {
  text-shadow: 0 0 6px rgba(var(--n2), 0.55), 0 0 16px rgba(var(--n2), 0.25);
}

.pcard.on .stat b,
html:not(.js) .pcard .stat b {
  filter: drop-shadow(0 0 10px rgba(var(--n2), 0.55));
}

.pcard.on .stat small,
html:not(.js) .pcard .stat small {
  color: rgba(234, 248, 251, 0.7);
}

@keyframes wordflick {
  0% {
    opacity: 0.1;
  }
  20% {
    opacity: 1;
  }
  35% {
    opacity: 0.25;
  }
  55% {
    opacity: 1;
  }
  70% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

/* --------------------------------------------------------- 5 · process */

.sec5 {
  padding-block: 16vh 24vh;
}

.tl {
  list-style: none;
  margin: 16vh 0 0;
  padding: 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.tl li {
  position: relative;
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  transition: opacity 0.5s;
}

html.js .tl li:not(.on) {
  opacity: 0.25;
}

/* Masks the line behind each stage's text */
.tl li::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 28px;
  bottom: -8px;
  width: min(100%, 190px);
  background: var(--bg);
  border-radius: 8px;
  z-index: 1;
}

.tl .tn,
.tl b,
.tl li > span:last-child {
  position: relative;
  z-index: 2;
}

.tl .dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  background: var(--bg);
  margin-bottom: 14px;
  transition: background 0.4s, box-shadow 0.4s;
}

.tl .tn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--cyan);
}

.tl b {
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  letter-spacing: -0.02em;
}

.tl li > span:last-child {
  color: var(--muted);
  font-size: 0.9rem;
}

.tl li.on .dot,
html:not(.js) .tl .dot {
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan), 0 0 30px rgba(94, 200, 212, 0.5);
}

.tl li.on .tn,
html:not(.js) .tl .tn {
  text-shadow: 0 0 8px rgba(94, 200, 212, 0.8);
}

.tl li.on b,
html:not(.js) .tl b {
  text-shadow: 0 0 8px rgba(143, 227, 236, 0.75), 0 0 22px rgba(94, 200, 212, 0.4);
}

.tl li.on > span:last-child,
html:not(.js) .tl li > span:last-child {
  color: var(--ink-2);
  text-shadow: 0 0 8px rgba(94, 200, 212, 0.45);
}

/* --------------------------------------------------------- 6 · pricing */

.sec8 {
  padding-block: 12vh 16vh;
}

.p8 {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 6vw;
  align-items: start;
}

.p8left {
  position: sticky;
  top: 14vh;
  z-index: 2;
  display: grid;
  gap: 14px;
}

.p8left h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4.6vw, 4.2rem);
  letter-spacing: -0.045em;
  line-height: 1;
}

.p8left p {
  margin: 0;
  color: var(--ink-2);
  max-width: 38ch;
}

.unsure {
  margin-top: 8vh;
  display: grid;
  gap: 12px;
  color: var(--muted);
  font-size: 0.9rem;
}

.unsure a {
  color: var(--ink);
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.02em;
}

.unsure a:hover,
.unsure a:focus-visible {
  color: var(--cyan-hi);
}

.prow {
  display: flex;
  padding-block: 5vh;
}

.prow:nth-child(1) {
  --n2: 94, 200, 212;
}

.prow:nth-child(2) {
  --n2: 146, 128, 255;
}

.prow:nth-child(3) {
  --n2: 255, 190, 92;
}

.prow:nth-child(4) {
  --n2: 110, 230, 170;
}

/* Each plan card is a link to the form; story.js also preselects the plan */
.prow .box {
  position: relative;
  display: block;
  width: 100%;
  padding: 26px 26px 24px;
  border-radius: 18px;
  border: 1px solid rgba(var(--n2), 0);
  background: rgba(6, 11, 18, 0);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.6s, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease,
    border-color 0.35s ease, background 0.35s ease;
}

html.js .prow:not(.on) .box {
  opacity: 0;
  transform: translateY(36px) scale(0.98);
}

.prow.on .box,
html:not(.js) .prow .box {
  border-color: rgba(var(--n2), 0.45);
  background: rgba(6, 11, 18, 0.72);
  box-shadow: 0 0 50px -18px rgba(var(--n2), 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.prow.on .box:hover,
.prow.on .box:focus-visible,
html:not(.js) .prow .box:hover,
html:not(.js) .prow .box:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(var(--n2), 0.85);
  box-shadow: 0 0 70px -14px rgba(var(--n2), 0.95), inset 0 0 22px -10px rgba(var(--n2), 0.6);
  outline: none;
}

.prow.on .box:active {
  transform: translateY(-1px) scale(0.995);
}

.prow .node {
  position: absolute;
  z-index: 2;
  left: -3vw;
  top: 44px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  background: var(--bg);
  transform: translate(-50%, -50%);
  transition: background 0.4s, box-shadow 0.4s;
}

.prow.on .node,
html:not(.js) .prow .node {
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan), 0 0 30px rgba(94, 200, 212, 0.5);
}

.ptop {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.prow h3 {
  margin: 0;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  letter-spacing: -0.045em;
  line-height: 1;
  text-shadow: 0 0 18px rgba(var(--n2), 0.35);
}

.prow.on .box:hover h3,
.prow.on .box:focus-visible h3 {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4), 0 0 28px rgba(var(--n2), 0.7);
}

.badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--n2));
  border: 1px solid rgb(var(--n2));
  border-radius: 999px;
  padding: 0.35em 0.75em;
}

.pdesc {
  margin: 8px 0 16px;
  color: var(--muted);
}

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}

.checks li {
  position: relative;
  padding-left: 26px;
  font-size: 0.95rem;
  color: var(--ink-2);
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid rgb(var(--n2));
}

.checks li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.42em;
  width: 5px;
  height: 3px;
  border-left: 1.5px solid rgb(var(--n2));
  border-bottom: 1.5px solid rgb(var(--n2));
  transform: rotate(-45deg);
}

.price {
  margin-top: 22px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.price small {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.price b {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: -0.045em;
  line-height: 1;
  font-weight: 800;
  color: var(--ink);
  text-shadow: 0 0 26px rgba(var(--n2), 0.35);
}

.price span {
  font-size: 1.4rem;
  color: rgba(244, 251, 255, 0.3);
  font-weight: 700;
}

/* ------------------------------------------------------ 7 · why Athens */

.sec7 {
  padding-top: 0;
}

.n7 {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 4vw;
  align-items: center;
  min-height: 100vh;
  padding-block: 10vh;
}

.n7txt {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
}

.n7txt h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.6rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 14ch;
}

.n7txt p {
  margin: 0;
  color: var(--ink-2);
  max-width: 40ch;
}

.big7 {
  position: relative;
  z-index: 2;
  justify-self: end;
  min-width: 4.2ch;
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.07em;
  line-height: 0.8;
  font-size: clamp(5.5rem, 16vw, 16rem);
  color: transparent;
  /* repeats on purpose: at auto 130% one tile is narrower than the four digits */
  background: 50% 0% / auto 130%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 1px rgba(143, 227, 236, 0.55)) drop-shadow(0 20px 60px rgba(0, 0, 0, 0.6));
  transition: opacity 1s cubic-bezier(0.2, 0.7, 0.1, 1), transform 1.2s cubic-bezier(0.2, 0.7, 0.1, 1);
}

/* Below-the-fold photo: applied once the page has loaded (html.bg-ready, story.js), or straight away without JS */
html.bg-ready .big7,
html:not(.js) .big7 {
  background-image: url("../img/athens-lycabettus.webp");
  background-image: image-set(url("../img/athens-lycabettus.avif") type("image/avif"), url("../img/athens-lycabettus.webp") type("image/webp"));
}

html.js .big7:not(.on) {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
}

/* ------------------------------------------------- 8 · dawn and contact */

#contact {
  height: 230vh;
}

html.nomotion #contact {
  height: 100vh;
  height: 100svh;
}

.dawn5,
.neon {
  position: absolute;
  inset: 0;
}

.dawn5 svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#dawnSvg path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 calc(6px * var(--g, 1)) rgba(94, 200, 212, 0.9))
    drop-shadow(0 0 calc(16px * var(--g, 1)) rgba(94, 200, 212, 0.45));
}

#dawnSvg.off path {
  stroke: rgba(150, 190, 200, 0.16);
  filter: none;
}

.dawnglow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(90% 60% at 50% 100%, rgba(255, 170, 80, 0.35), transparent 70%);
}

.neon.flick {
  animation: neonflick 1.15s linear 1;
}

.neon.flick .site5 {
  animation: neonjit 1.15s steps(1, end) 1;
}

@keyframes neonflick {
  0% {
    opacity: 1;
    filter: brightness(1.8);
  }
  5% {
    opacity: 0.08;
  }
  9% {
    opacity: 1;
    filter: brightness(1.5);
  }
  13% {
    opacity: 0.15;
  }
  17% {
    opacity: 0.95;
  }
  21% {
    opacity: 0.05;
  }
  33% {
    opacity: 0.05;
  }
  37% {
    opacity: 1;
    filter: brightness(1.3);
  }
  46% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
  62% {
    opacity: 0.8;
  }
  66%,
  100% {
    opacity: 1;
    filter: none;
  }
}

@keyframes neonjit {
  0% {
    transform: none;
  }
  9% {
    transform: translateX(6px);
    filter: hue-rotate(60deg) saturate(1.8);
  }
  13% {
    transform: translateX(-4px);
    filter: none;
  }
  37% {
    transform: translateX(3px);
    filter: hue-rotate(-40deg);
  }
  50% {
    transform: none;
    filter: none;
  }
}

/* story.js sizes and places the flip box */
.flipbox {
  position: absolute;
  z-index: 2;
  perspective: 1800px;
}

.flipin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 12px;
}

.flipin.framed .face {
  outline: 2px solid #8fe3ec;
  outline-offset: 0;
  box-shadow: 0 0 0 1px rgba(94, 200, 212, 0.5), 0 0 18px rgba(94, 200, 212, 0.8), 0 0 50px rgba(94, 200, 212, 0.35) !important;
}

/* Front face: the "your site" mock-up that powers on */
.site5 {
  overflow: hidden;
  opacity: 0;
}

.site5 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.2s linear;
}

.sbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: rgba(5, 7, 12, 0.75);
}

.sbar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(244, 251, 255, 0.35);
}

.sbar span {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
}

.shero {
  position: absolute;
  left: 6%;
  bottom: 12%;
  max-width: 70%;
}

.shero b {
  display: block;
  font-size: clamp(1.2rem, 2.6vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.shero b span {
  opacity: 0.12;
  transition: opacity 0.25s, text-shadow 0.35s;
}

.shero b span.on {
  opacity: 1;
  text-shadow: 0 0 6px rgba(255, 236, 206, 0.95), 0 0 18px rgba(255, 181, 71, 0.7), 0 0 40px rgba(255, 150, 60, 0.4);
  animation: wordflick 0.45s linear 1;
}

.shero small {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffe9c7;
  opacity: 0;
  transition: opacity 0.5s;
}

.site5.lit .shero small {
  opacity: 1;
}

/* Back face: the brief form */
.back {
  transform: rotateY(180deg);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(18px, 3vw, 36px);
  overflow: auto;
  background: linear-gradient(160deg, rgba(10, 22, 30, 0.97), rgba(5, 9, 14, 0.98));
  pointer-events: none;
}

.back.live {
  pointer-events: auto;
}

.flipin.fade .back {
  transform: none;
}

/* With motion on, the heading sits above the card (.end5) instead */
html.motion .back h3,
html.motion .back .fl .label {
  display: none;
}

.fl {
  display: grid;
  gap: 12px;
  align-content: center;
}

.back h3 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.back h3 em,
.end5 .q2wrap em {
  color: #ffe9c7;
  text-shadow: 0 0 22px rgba(255, 181, 71, 0.55);
}

.fl p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95rem;
  max-width: 34ch;
}

.fl .mail {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--cyan-hi);
  text-decoration: none;
  justify-self: start;
}

.fl .mail:hover {
  text-decoration: underline;
}

.ff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  align-content: center;
}

.ff .wide {
  grid-column: 1 / -1;
}

.ff label:not(.hp-field) {
  min-width: 0;
  display: grid;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.ff input,
.ff select,
.ff textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: rgba(244, 251, 255, 0.05);
  border: 1px solid rgba(94, 200, 212, 0.28);
  border-radius: 10px;
  padding: 0.65em 0.8em;
  resize: none;
}

.ff input::placeholder,
.ff textarea::placeholder {
  color: rgba(244, 251, 255, 0.4);
}

.ff input:focus,
.ff select:focus,
.ff textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(94, 200, 212, 0.18);
}

.ff select option {
  background: #0a141c;
}

.ff button {
  justify-self: start;
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: #05070c;
  border: 1.5px solid #fff;
  border-radius: 999px;
  padding: 0.85em 1.3em;
  cursor: pointer;
  transition: background 0.35s, box-shadow 0.35s, border-color 0.35s;
}

.ff button:hover {
  background: linear-gradient(120deg, rgba(255, 236, 206, 0.1), rgba(170, 200, 255, 0.1) 45%, rgba(220, 180, 255, 0.1) 75%, rgba(160, 240, 225, 0.1)),
    #05070c;
  box-shadow: 0 0 18px -6px rgba(220, 225, 255, 0.55);
  border-color: #f3f1ff;
}

.ff button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.ff button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.form-note {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted);
}

.form-note a {
  color: var(--cyan-hi);
}

.form-status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-2);
}

.form-status.is-success {
  color: var(--cyan-hi);
}

.form-status.is-error {
  color: #ff9db8;
}

/* Thin line that feeds down from the previous section into the card */
.feed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.end5 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7vh;
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 0 24px;
  text-align: center;
  opacity: 0;
}

.end5 .q2wrap {
  margin: 0;
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  letter-spacing: -0.045em;
  line-height: 1;
}

.q2wrap {
  display: grid;
}

.q2wrap .qa,
.q2wrap .qb {
  grid-area: 1 / 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.q2wrap .qb {
  opacity: 0;
  transform: translateY(10px);
}

.q2wrap.swap .qa {
  opacity: 0;
  transform: translateY(-10px);
}

.q2wrap.swap .qb {
  opacity: 1;
  transform: none;
}

.endlogo {
  gap: 12px;
  font-size: 1.25rem;
  color: var(--ink);
  margin-top: 6px;
}

.endlogo i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1.5px solid var(--cyan);
  box-shadow: 0 0 14px rgba(94, 200, 212, 0.7), inset 0 0 8px rgba(94, 200, 212, 0.35);
}

.endlogo small {
  letter-spacing: 0.26em;
}

/* --------------------------------------------------------------- footer */

.sfoot {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding-block: 16vh 0;
  background: linear-gradient(180deg, rgba(5, 7, 12, 0), #05070c 18%);
}

.fcols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4vw;
}

.fcol {
  display: grid;
  gap: 10px;
  align-content: start;
}

.flab {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.fcol a {
  width: max-content;
  max-width: 100%;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s, text-shadow 0.2s;
}

.fcol a:hover,
.fcol a:focus-visible {
  color: #dffcff;
  text-shadow: 0 0 10px rgba(94, 200, 212, 0.9), 0 0 28px rgba(94, 200, 212, 0.45);
  outline: none;
}

.fcol .fmail {
  color: var(--cyan-hi);
  overflow-wrap: anywhere;
}

.fplain {
  color: var(--ink-2);
  font-size: 1rem;
}

.fplain b {
  color: var(--cyan-hi);
  font-weight: 500;
  font-family: var(--font-mono);
}

.fbottom {
  display: flex;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-top: 12vh;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.fbottom a {
  color: var(--ink-2);
  text-decoration: none;
}

.fbottom a:hover,
.fbottom a:focus-visible {
  color: #dffcff;
}

/* Business details line; email stays lowercase */
.fbiz a {
  text-transform: none;
  letter-spacing: 0.06em;
}

.fwordwrap {
  -webkit-mask-image: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, 0.3) 100%);
  mask-image: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, 0.3) 100%);
}

.fword {
  margin: 7vh -1vw 0;
  text-align: center;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.74;
  font-size: clamp(4rem, 23.5vw, 24rem);
  color: transparent;
  background: 50% 62% / cover no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transform: translateY(14%);
}

/* Below-the-fold photo: applied once the page has loaded (html.bg-ready, story.js), or straight away without JS (same file the contact mock-up already fetched) */
html.bg-ready .fword,
html:not(.js) .fword {
  background-image: url("../img/athens-dawn-grid.webp");
  background-image: image-set(url("../img/athens-dawn-grid.avif") type("image/avif"), url("../img/athens-dawn-grid.webp") type("image/webp"));
}

/* -------------------------------------------------- calm mode and no-JS */

html:not(.motion) *,
html:not(.motion) *::before,
html:not(.motion) *::after {
  animation: none !important;
}

html:not(.motion) .end5,
html:not(.motion) .site5 {
  display: none !important;
}

html.nomotion .prow .box {
  transition: box-shadow 0.2s, border-color 0.2s;
}

html.nomotion .prow.on .box:hover {
  transform: none;
}

/* No JS: the contact section is a plain block with the form open */
html:not(.js) #contact {
  height: auto;
  padding-block: 14vh 4vh;
}

html:not(.js) #contact .pin,
html:not(.js) .dawn5,
html:not(.js) .neon,
html:not(.js) .flipbox,
html:not(.js) .flipin,
html:not(.js) .back {
  position: relative;
  inset: auto;
  height: auto;
  overflow: visible;
}

html:not(.js) .flipbox {
  width: min(980px, 100% - 48px);
  margin: 0 auto;
}

html:not(.js) .back {
  transform: none;
  pointer-events: auto;
  outline: 2px solid #8fe3ec;
  box-shadow: 0 0 0 1px rgba(94, 200, 212, 0.5), 0 0 18px rgba(94, 200, 212, 0.8), 0 0 50px rgba(94, 200, 212, 0.35);
}

html:not(.js) .dawn5 svg,
html:not(.js) .feed {
  display: none;
}

/* ------------------------------------------------------------ responsive */

/* The Greek link labels run ~25% longer and would meet the right-hand controls */
@media (max-width: 960px) {
  html[lang="el"] .glinks {
    display: none;
  }
}

@media (max-width: 820px) {
  .glinks,
  .hhud {
    display: none;
  }

  /* hero-gl.js target() on narrow screens: (50%, 62% from the bottom) */
  html.js .hero4 {
    --tx: 50vw;
    --ty: calc(38 * var(--vh));
  }

  .cap {
    width: calc(100% - 48px);
    white-space: normal;
    line-height: 1.7;
  }

  .hbody {
    padding-bottom: 12vh;
  }

  .pillars {
    grid-template-columns: 1fr;
    margin-top: 8vh;
  }

  .pcard {
    min-height: 0;
  }

  .idlabel {
    display: none;
  }

  .tl {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 8vh;
  }

  .p8,
  .n7 {
    grid-template-columns: 1fr;
  }

  .p8left {
    position: relative;
    top: 0;
  }

  .unsure {
    margin-top: 2vh;
  }

  .end5 .q2wrap {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
  }

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

  .prow .node {
    display: none;
  }

  .back,
  .ff {
    grid-template-columns: 1fr;
  }

  .back {
    align-content: start;
  }

  .fl p {
    display: none;
  }

  .fcols {
    grid-template-columns: 1fr;
    gap: 8vh;
  }
}

@media (max-width: 480px) {
  .gright {
    gap: 8px;
  }

  /* Keep the switch, drop its word, so the bar fits a 375px phone */
  .gmotion span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .gcta {
    padding: 0.5em 0.8em;
    font-size: 0.74rem;
  }
}

@media (hover: none) {
  .prow.on .box:hover {
    transform: none;
  }
}