* { box-sizing: border-box; }
body { margin: 0; font-family: 'Commissioner', 'Inter', system-ui, sans-serif; background: rgb(var(--th-canvas)); color: rgb(var(--th-ink)); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgb(var(--th-accent)); outline-offset: 8px; }
.brand { position: absolute; z-index: 2; top: 36px; left: clamp(24px, 4.5vw, 68px); display: flex; align-items: center; }
.brand img { height: 88px; width: auto; display: block; }
.brand .logo-dark, html.dark .brand .logo-light { display: none; }
html.dark .brand .logo-dark { display: block; }
.atlas {
  --map-water: 237 242 246; --map-land: 250 251 253; --map-road: 208 216 226;
  position: relative; height: 100svh; min-height: 650px; overflow: hidden; isolation: isolate; background: rgb(var(--map-water));
}
html.dark .atlas { --map-water: 15 18 34; --map-land: 25 30 48; --map-road: 48 57 78; }
.map-stage {
  position: absolute; inset: -20px auto 0 0; width: 70%;
  /* Fade both edges: the right one blends the map into the page, the left one
     dissolves the cropped Salamina coastline and the Piraeus route tail. */
  mask-image: linear-gradient(to right, transparent 0%, black 13%, black 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 13%, black 78%, transparent 100%);
}
.attica { display: block; width: 100%; height: 100%; }
.land { fill: rgb(var(--map-land)); stroke: rgb(var(--th-line-strong) / .6); stroke-width: 1; }
/* Region outlines are still generated by landing.js but not shown: the map
   is land, roads and routes only. */
.area { display: none; }
.roads { fill: none; stroke: rgb(var(--map-road)); stroke-width: .7; }
.land, .roads { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
/* Keep normalized dash lengths in the SVG coordinate space while drawing. */
.route { stroke-linejoin: round; stroke-linecap: round; }
/* Routes take the CTA's hue and saturation, so the network reads as the same
   blue-violet as the button rather than an electric accent of its own. Only
   lightness differs: hairline strokes need a few points more than a filled
   button to stay legible on the map. Set on .route-set so any number of
   regions inherits it; the .route-color-N classes the generator emits are no
   longer colour-bearing. */
.route-set { --route-color: var(--th-route); opacity: 0; }
.route { fill: none; stroke: rgb(var(--route-color)); stroke-dasharray: 1; stroke-dashoffset: 1; }
.route-set.is-active { animation: network-reveal 1.6s linear both; }
.route-set.is-active .route { animation: var(--draw) 1.6s linear both; }
.route-halo { stroke-width: 5; opacity: .12; }
.route-core { stroke-width: 1.65; }
.route-origin { fill: rgb(var(--route-color)); stroke: rgb(var(--map-land)); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Finish drawing, hold a beat, then fade out so the next region follows on. */
@keyframes network-reveal {
  0%, 55% { opacity: 1; }
  100% { opacity: 0; }
}
.place-label { fill: rgb(var(--th-ink-muted)); font-size: 16px; font-weight: 500; paint-order: stroke; stroke: rgb(var(--map-land)); stroke-width: 5; stroke-linejoin: round; }
/* The frame is zoomed tight onto the five route networks, so the outlying
   labels and the sea caption now fall outside the viewBox. */
.place-label[data-area="outer-west"], .place-label[data-area="east"] { display: none; }
.sea-label { display: none; }
/* The right-hand column: the M.AI.P.H. logo, the headline, a line of example
   questions typed by ask.js, and the call to action, all on one right edge. */
.entry { position: absolute; top: 50%; right: 3%; transform: translateY(-50%); width: clamp(300px, 42vw, 600px); }
.entry-button { position: relative; display: grid; justify-items: end; text-align: right; padding: 12px; }
/* The ratio is the asset's true 491 / 333. The export carries transparent
   margin on its right, so the box is pushed out by 4% of its OWN width (a plain
   percentage margin would resolve against the wider column and overshoot) to
   line the wordmark's last dot up with the text edge below. */
.maiph-lockup { position: relative; display: block; width: min(100%, 360px); aspect-ratio: 491 / 333; margin-right: calc(min(100%, 360px) * -0.04); }
.maiph-still, .maiph-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.maiph-video { opacity: 0; }
/* Lift the dark export's near-black orb details while preserving its alpha. */
html.dark .maiph-video, html.dark .maiph-still { filter: brightness(1.3) contrast(.75) saturate(1.15); }
.video-ready .maiph-video { opacity: 1; }
.video-ready .maiph-still { opacity: 0; }
.intro-lead { margin: 10px 0 0; font-size: clamp(34px, 3.5vw, 54px); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; color: rgb(var(--th-ink)); text-wrap: balance; }
.intro-lead .hi { color: rgb(var(--th-accent)); }
/* Example questions. Deliberately quiet: the headline and the CTA carry the
   page; this only shows what she can do, one live tool at a time. */
.ask { margin-top: clamp(18px, 2vw, 26px); width: 100%; padding-right: 16px; border-right: 2px solid rgb(var(--th-accent) / .35); }
.ask-label { display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--th-ink-muted)); }
.tool { padding: 2px 8px; border-radius: 999px; letter-spacing: .02em; text-transform: none; font-weight: 600; font-size: 11.5px;
        color: rgb(var(--th-accent)); background: rgb(var(--th-accent-subtle)); transition: opacity .25s ease; }
.tool.is-swap { opacity: 0; }
/* Two lines reserved so the column does not jump as the questions change length. */
.ask-q { margin-top: 8px; min-height: 2.6em; font-size: clamp(17px, 1.35vw, 21px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: rgb(var(--th-ink) / .82); }
.ask-q .q { color: rgb(var(--th-accent) / .7); }
.caret { display: inline-block; width: 2px; height: .95em; margin-left: 3px; vertical-align: -.1em; background: rgb(var(--th-accent)); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ask-a { display: flex; justify-content: flex-end; align-items: center; gap: 10px; min-height: 22px; margin-top: 6px; font-size: 14px; font-weight: 400; color: rgb(var(--th-ink-muted));
         opacity: 0; transform: translateX(6px); transition: opacity .35s ease, transform .35s ease; }
.ask-a.is-on { opacity: 1; transform: none; }
.ask-a .pulse { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--th-accent)); box-shadow: 0 0 0 0 rgb(var(--th-accent) / .5); animation: pulse 1.4s ease-out infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 10px rgb(var(--th-accent) / 0); } }
.intro-cta { display: flex; align-items: center; justify-content: center; justify-self: end; gap: 14px; min-height: 60px; padding: 16px 30px; margin-top: clamp(22px, 2.6vw, 34px); border-radius: 10px; font-size: 19px; font-weight: 700; line-height: 1.4; color: rgb(var(--th-accent-foreground)); background: rgb(var(--th-accent)); box-shadow: 0 10px 30px -10px rgb(var(--th-accent) / .6); transition: background-color 200ms ease; }
.intro-cta:hover, .intro-cta:focus-visible { background: rgb(var(--th-accent-hover)); }
.intro-cta svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms ease; }
.intro-cta:hover svg { transform: translateX(5px); }
@media (max-width: 1023px) { .entry { width: 48vw; } }
.map-credit { position: absolute; bottom: 20px; left: clamp(16px, 3vw, 42px); display: flex; gap: 14px; flex-wrap: wrap; color: rgb(var(--th-ink-muted)); font-size: 10px; }
.map-credit a { text-decoration: underline; text-underline-offset: 3px; }
.atlas.is-paused .route-set, .atlas.is-paused .route, .atlas.is-paused .entry-button, .atlas.is-paused .entry-button::before { animation-play-state: paused; }
.atlas.is-still .route-set { animation: none; opacity: 0; }
.atlas.is-still .route-set.is-active { opacity: 1; }
.atlas.is-still .route { animation: none; stroke-dashoffset: 0; visibility: visible; opacity: .7; }
.atlas.is-still .route-halo { opacity: .08; }
.atlas.is-still .maiph-video { display: none; }
.atlas.is-still .maiph-still { opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.no-script { position: absolute; top: 30%; width: 60%; text-align: center; color: rgb(var(--th-ink-muted)); padding: 20px; }
@media (max-width: 760px) {
  .brand { top: 25px; left: 24px; }
  .brand img { height: 61px; }
  .atlas { min-height: 700px; }
  /* The column is taller than the old headline + logo, so the map takes the
     band between the GOOH logo and the column. */
  .map-stage { inset: 96px 0 auto; width: 100%; height: 40%; mask-image: linear-gradient(to bottom, black 76%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 76%, transparent 100%); }
  .entry { top: auto; right: auto; left: 50%; bottom: 40px; transform: translateX(-50%); width: calc(100vw - 40px); }
  .entry-button { justify-items: center; text-align: center; padding: 0; }
  .maiph-lockup { justify-self: center; width: 191px; height: 130px; margin: 0; }
  .ask { border-right: 0; padding-right: 0; }
  .ask-label, .ask-a { justify-content: center; }
  .intro-cta { justify-self: stretch; }
  .map-credit { bottom: 17px; left: 0; width: 100%; justify-content: center; gap: 10px; font-size: 9px; }
  .place-label { font-size: 19px; }
  .no-script { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .route { stroke-dashoffset: 0; }
  .caret { display: none; }
  .intro-cta:hover svg { transform: none; }
}