/* ==========================================================
   The Path · Raul Bernardelli · v4
   Colours and fonts live here. Change them in one place.
   ========================================================== */
:root {
  /* Ground and ink */
  --white: #FFFFFF;
  --panel: #F3F5F9;        /* cards, soft rows */
  --panel-2: #E8ECF4;      /* the road ahead, hover */
  --navy: #0B1B3A;         /* text, dark panels, line drawings */
  --navy-2: #1B2C4F;       /* pills on navy */
  --muted: #4A5875;        /* secondary text on white */
  --on-navy: #C9D3E8;      /* secondary text on navy */
  --sky: #8FB0FF;          /* blue for small text on navy */
  --line: #9AA6BD;         /* light strokes in drawings */

  /* Finance blue: the path, the flights, the action */
  --blue: #2459FF;
  --blue-dark: #1A45D6;    /* hover */

  /* Type: Geist only, set modestly */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --step-small: 0.875rem;
  --step-body: 1rem;
  --step-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-title: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --step-head: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
  --step-display: clamp(2.5rem, 1.5rem + 3.4vw, 4.25rem);

  /* Space and shape */
  --pad: clamp(20px, 4vw, 48px);
  --radius: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #B8C3D9 transparent; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
p, li, dd { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
strong { font-weight: 650; color: var(--navy); }
::selection { background: var(--sky); color: var(--navy); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.frame { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--pad); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 24px;
  border-radius: 999px;
  font-size: var(--step-body); font-weight: 500;
  text-decoration: none;
  transition: background 200ms, transform 200ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-small { height: 40px; padding: 0 18px; font-size: var(--step-small); }
.btn-blue { background: var(--blue); color: var(--white); }
.btn-blue:hover { background: var(--blue-dark); }
.btn-grey { background: var(--panel); color: var(--navy); }
.btn-grey:hover { background: var(--white); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--blue); }
.link { font-weight: 500; text-decoration: none; }
.link:hover { color: var(--blue); }
.link-arrow { color: var(--blue); text-decoration: underline; }
.link-arrow:hover { color: var(--blue-dark); }

/* ---------- Top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.wordmark { font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.topbar-links { display: flex; align-items: center; gap: 22px; font-size: var(--step-small); }

/* ---------- Hero: who, and the whole route on a turning globe ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding-block: clamp(8px, 1.5vw, 20px) clamp(8px, 1.5vw, 16px);
}

@media (max-width: 1000px) and (min-width: 761px) { .hero { padding-block: 40px 40px; } }

/* ---------- Navy: the top bar, and the results panel under the hero ---------- */
.topbar-wrap { background: var(--navy); color: var(--white); }
.topbar-wrap .wordmark { color: var(--white); }
.topbar-wrap :focus-visible, .results-band :focus-visible, .achievements :focus-visible { outline-color: var(--sky); }
/* the results panel follows the hero closely rather than waiting at the foot of the screen */
.hero-wrap { display: flex; flex-direction: column; }
.results-band { padding-bottom: clamp(24px, 3vw, 40px); }
/* the results sit in one navy panel, the same shape as the "AI is how I work" panel */
.results { padding: clamp(24px, 3.4vw, 40px) clamp(24px, 4vw, 48px); border-radius: var(--radius); background: var(--navy); color: var(--white); }
.results-band strong { color: var(--white); }
.results-band ::selection, .achievements ::selection { background: var(--blue); color: var(--white); }

/* Results band: three results in Raul's own words, each a way into its card further down. A blue pin marks each, like the cities on the path */
.results { display: grid; gap: 16px; }
.results a { display: grid; gap: 8px; align-content: start; text-decoration: none; position: relative; padding-left: 26px; }
.results a::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 50%;
  background: var(--blue); outline: 3px solid var(--navy-2); outline-offset: 0;
}
.results-line { font-size: var(--step-lead); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--white); text-wrap: pretty; }
.results-line strong { font-weight: 650; }
.results-from { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step-small); color: var(--on-navy); }
.results-from svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--ease); }
.results a:hover .results-from { color: var(--sky); }
.results a:hover .results-from svg { transform: translateX(4px); }
/* one row per result: the sentence on the left, where it comes from on the right (stacked on phones) */
@media (min-width: 761px) {
  .results a { grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: baseline; }
}
.hero-name { font-size: var(--step-display); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.hero-title { margin-top: 20px; font-size: var(--step-lead); }
.hero-title .dot { color: var(--blue); }
.where { white-space: nowrap; }
.hero-line { margin-top: 14px; font-size: var(--step-lead); color: var(--muted); max-width: 40ch; }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hero-object { position: relative; display: grid; justify-items: center; gap: 10px; }
.view-hero { width: min(100%, 450px); aspect-ratio: 1; touch-action: pan-y; cursor: grab; }
.view-hero:active { cursor: grabbing; }
.globe-hero { width: min(100%, 520px); aspect-ratio: 1; display: none; }

/* ---------- 3D objects: objects.js puts a canvas in every .view / .obj box ---------- */
.view-canvas { display: block; width: 100%; height: 100%; }
.obj { position: absolute; z-index: 2; width: var(--obj); aspect-ratio: 1; --obj: 280px; }
/* the box always sits inside its own stop, so the path never has to climb back to it */
.stop[data-side="left"] .obj  { left: calc(80% - var(--obj) / 2); top: clamp(0px, calc(58% - var(--obj) / 2), calc(100% - var(--obj))); }
.stop[data-side="right"] .obj { left: calc(20% - var(--obj) / 2); top: clamp(0px, calc(58% - var(--obj) / 2), calc(100% - var(--obj))); }
.stop-big .obj { --obj: 280px; }
html.no3d .view, html.no3d .obj { display: none; }
/* With the 3D objects on, the small path icons step aside: the objects' rings light up instead.
   They stay in the page as the path's anchors on phones, and come back if 3D is unavailable. */
html:not(.no3d) .node { visibility: hidden; }
/* With the objects on, the date and place move into each card, so the path has the empty side to itself */
html:not(.no3d) .ledger { display: none; }
html:not(.no3d) .card .meta { display: flex; }
html.no3d .globe-hero { display: block; }

/* ---------- The journey: a curved path through the career ---------- */
.journey { position: relative; padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(72px, 8vw, 112px); }
.trail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.trail .road { fill: none; stroke: var(--panel-2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; }
.trail .walked { fill: none; stroke: var(--blue); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.trail .fp { fill: var(--blue); opacity: 0; transform-box: fill-box; transform-origin: center; }
.trail .fp.on { opacity: 0.32; animation: stamp 420ms var(--ease) both; }
.trail .fp.fresh { opacity: 0.9; }
@keyframes stamp { from { opacity: 0; transform: scale(1.5); } }

.journey-head { position: relative; z-index: 1; text-align: center; margin-bottom: 56px; }
.section-title { font-size: var(--step-head); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.section-sub { margin-top: 8px; font-size: var(--step-lead); color: var(--muted); }
.steps { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 96px; }

/* City tags sit on the path */
.place-tag { display: flex; justify-content: center; }
.place-tag h2, .place-tag a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--navy); color: var(--white);
  font-size: var(--step-title); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
  text-decoration: none;
  min-width: 19rem; justify-content: center;   /* every city label the same size, whatever its name */
}
.place-when { margin-left: 4px; font-size: var(--step-small); font-weight: 500; color: var(--on-navy); }
.pin { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); outline: 3px solid var(--white); outline-offset: -1px; }
.end-dot { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); outline: 4px solid var(--white); }

/* Stops: a card on one side, an icon node on the path */
.stop { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.stop[data-side="left"] .card  { grid-column: 1 / 7; }
.stop[data-side="right"] .card { grid-column: 7 / 13; }
.node {
  position: absolute; top: 18px; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); color: var(--line);
  border: 2.5px solid var(--panel-2);
  transform: translateX(-50%);
  transition: background 400ms, color 400ms, border-color 400ms, transform 400ms var(--ease);
}
.stop[data-side="left"] .node  { left: calc(50% + 48px); }
.stop[data-side="right"] .node { left: calc(50% - 48px); }
.node .icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.node.on { background: var(--blue); color: var(--white); border-color: var(--blue); }

.card {
  color: var(--muted);
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--radius);
  background: var(--panel);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.card h3 { color: var(--navy); font-size: var(--step-title); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--step-small); }
.when { color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; }
.place { color: var(--muted); }
.role { margin-top: 4px; font-size: var(--step-small); color: var(--muted); }
.intro { margin-top: 16px; }
.card ul { margin-top: 14px; display: grid; gap: 10px; }
.card li { position: relative; padding-left: 18px; }
.card li::before {
  content: ""; position: absolute; left: 0; top: 0.66em;
  width: 6px; height: 6px; border-radius: 2px;
  background: var(--blue);
}

/* Show more: each card leads with one key line; the rest opens in place */
.more { display: grid; grid-template-rows: 1fr; }
.more-inner { min-height: 0; overflow: hidden; }
.more-inner > :first-child { margin-top: 14px; }
.more-inner ul { margin-top: 12px; }
html.js .more { grid-template-rows: 0fr; transition: grid-template-rows 520ms var(--ease); }
html.js .more .more-inner { visibility: hidden; transition: visibility 0s 520ms; }
html.js .more.open { grid-template-rows: 1fr; }
html.js .more.open .more-inner { visibility: visible; transition-delay: 0s; }
.more-toggle {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 16px 0 18px; border: 0; border-radius: 999px;
  background: var(--white); color: var(--navy);
  font: 500 var(--step-small) / 1 var(--font); cursor: pointer;
  transition: background 200ms, color 200ms, transform 200ms var(--ease);
}
.more-toggle:hover { background: var(--blue); color: var(--white); }
.more-toggle:active { transform: scale(0.97); }
.more-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 320ms var(--ease); }
.more-toggle[aria-expanded="true"] .more-icon { transform: rotate(180deg); }
.card-big .more-toggle { background: var(--navy-2); color: var(--white); }
.card-big .more-toggle:hover { background: var(--blue); }
html:not(.js) .more-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { html.js .more, html.js .more .more-inner { transition: none; } }

/* With the objects on, a stop is always tall enough for its object */
@media (min-width: 761px) { html:not(.no3d) .stop { min-height: 330px; } }

/* Ledger: dates and place on the empty side of the path */
.ledger { grid-row: 1; padding-top: 26px; font-variant-numeric: tabular-nums; }
.stop[data-side="left"] .ledger  { grid-column: 9 / 13; }
.stop[data-side="right"] .ledger { grid-column: 1 / 5; text-align: right; }
.ledger-when { font-size: var(--step-title); font-weight: 600; letter-spacing: -0.01em; color: var(--navy); }
.ledger-place { margin-top: 2px; font-size: var(--step-small); color: var(--muted); }
.stop .card { grid-row: 1; }
.card .meta { display: none; }

/* Achievements: navy cards, result first */
.card-big { background: var(--navy); color: var(--on-navy); }
.card-big .big-line { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--white); }
.big-topic { margin-top: 6px; font-size: var(--step-small); color: var(--on-navy); }
.card-big strong { color: var(--white); }
.card-big li::before { background: var(--sky); }
.card-big :focus-visible { outline-color: var(--sky); }

/* Flights: the globe turns and the plane flies to the next city */
.flight { height: 125vh; }
.flight-stage {
  position: sticky; top: 3vh; height: 94vh;
  display: grid; place-items: center; align-content: center; gap: 16px;
  /* white so the path passes behind the globe, fading at the top and bottom so the line melts in rather than stopping dead */
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), var(--white) 120px, var(--white) calc(100% - 120px), rgb(255 255 255 / 0)); /* taste-skill-ignore: white-on-white edge fade so the path melts into the globe stage, not a visible gradient */
}
.flight .globe { width: min(80vh, 92vw, 760px); aspect-ratio: 1; display: block; }
.flight-label {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--step-head); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2;
}
.flight-label svg { width: 0.9em; height: 0.9em; fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.flight-label span:last-child { color: var(--blue); }

/* Achievements: their own navy section, no path. White cards with Show more; the 3D objects stand beside them */
.achievements { background: var(--navy); color: var(--white); padding-block: clamp(64px, 8vw, 112px); }
.ach-title { margin-bottom: clamp(28px, 3.5vw, 44px); }
/* four cards in a 2 x 2 grid; each card carries its 3D object in its top corner */
.ach-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.achievements .stop.stop-big { display: block; min-height: 0; }
.achievements .stop .obj, .achievements .stop[data-side] .obj { --obj: 136px; left: auto; right: 8px; top: 4px; margin: 0; }
.achievements .card-big .big-line, .achievements .card-big .big-topic { padding-right: 128px; }
.achievements .card-big { display: flex; flex-direction: column; align-items: flex-start; min-height: var(--ach-h, 0); }
.achievements .card-big .more { align-self: stretch; margin-bottom: 16px; }
@media (max-width: 1000px) and (min-width: 761px) { .achievements .card-big .big-line { min-height: 80px; } }   /* one-line titles here: keep opened text under the corner object */
.achievements .card-big .more-inner > :first-child { margin-top: 28px; }   /* opened text starts below the corner object */
.achievements .card-big .more-toggle { margin-top: auto; }   /* the buttons line up along the cards' foot */
.achievements .section-title { color: var(--white); }
.achievements .node { display: none; }
.achievements .card-big { background: var(--white); color: var(--muted); }
.achievements .card-big .big-line { color: var(--navy); }
.achievements .card-big .big-topic { color: var(--muted); }
.achievements .card-big strong { color: var(--navy); }
.achievements .card-big li::before { background: var(--blue); }
.achievements .card-big :focus-visible { outline-color: var(--blue); }
.achievements .card-big .more-toggle { background: var(--panel); color: var(--navy); }
.achievements .card-big .more-toggle:hover { background: var(--blue); color: var(--white); }

/* The laptop that flips open into the achievements */
.laptop-scene {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center;
  min-height: 70vh;
}
.laptop-copy { grid-column: 1 / 6; }
.laptop { grid-column: 7 / 13; perspective: 1600px; display: grid; place-items: center; padding-block: 24px; }
.view-laptop { width: min(100%, 560px); aspect-ratio: 1.15; }
html:not(.no3d) .laptop-rig { display: none; }
.laptop-rig {
  --p: 0;
  width: min(100%, 460px);
  display: grid; justify-items: center;
  transform-style: preserve-3d;
  transform: rotateY(calc((1 - var(--p)) * -38deg)) rotateX(calc((1 - var(--p)) * 22deg)) scale(calc(0.86 + var(--p) * 0.14));
}
.laptop svg { overflow: visible; }
.laptop-lid {
  width: 72.5%; display: block; aspect-ratio: 400 / 260;
  transform-origin: 50% 100%;
  transform: rotateX(calc((1 - var(--p)) * 86deg));
}
.laptop-base { width: 100%; display: block; aspect-ratio: 480 / 116; margin-top: -8px; }
.laptop .outline { fill: var(--white); stroke: var(--navy); stroke-width: 3.5; stroke-linejoin: round; }
.laptop .screen { fill: var(--panel); stroke: var(--navy); stroke-width: 2.5; }
.laptop .keys { fill: none; stroke: var(--line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.laptop .scr-title { font: 600 15px var(--font); fill: var(--navy); }
.laptop .scr-label { font: 600 12px var(--font); fill: var(--muted); text-anchor: middle; }
.laptop .axis { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; }
.laptop .bar { fill: var(--blue); fill-opacity: 0.18; stroke: var(--blue); stroke-width: 2.5; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--draw, 0)); }
.laptop .bar-end { fill-opacity: 1; }
.laptop .link { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: var(--draw, 0); }

/* Revealed as you reach them (only when the script runs) */
html.js .stop:not(.reached) .card { opacity: 0.15; transform: translateY(28px); }

/* ---------- AI ---------- */
.ai { padding-top: clamp(80px, 10vw, 140px); }
.ai-panel {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 56px;
  padding: clamp(28px, 4.5vw, 56px);
  border-radius: var(--radius);
  background: var(--navy); color: var(--white);
}
.ai-title { font-size: var(--step-head); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.ai-lead { margin-top: 12px; color: var(--on-navy); max-width: 36ch; }
.ai-lead strong { color: var(--white); }
.platforms { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.platforms li { padding: 5px 12px; border-radius: 999px; background: var(--navy-2); font-size: var(--step-small); font-weight: 500; }
.platforms .platforms-more { background: transparent; color: var(--on-navy); padding-left: 4px; }
.ai-list { display: grid; gap: 28px; }
.ai-item h3 { font-size: var(--step-title); font-weight: 600; letter-spacing: -0.01em; }
.ai-item p { margin-top: 6px; color: var(--on-navy); }
.ai-item .proof { margin-top: 8px; }
.ai-item .proof a { color: var(--white); font-weight: 600; text-decoration-color: var(--sky); }
.ai-item .proof a:hover { color: var(--sky); }
.ai :focus-visible { outline-color: var(--sky); }

/* ---------- Next step ---------- */
.next { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(56px, 7vw, 96px); }
.next-title { font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.next-line { margin-top: 14px; font-size: var(--step-lead); color: var(--muted); max-width: 44ch; }
.contact-rows { margin-top: clamp(32px, 4vw, 56px); display: grid; gap: 10px; }
.row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px;
  min-height: clamp(88px, 9vw, 120px);
  padding: 0 clamp(20px, 3vw, 36px);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
  transition: background 200ms;
}
.row:hover { background: var(--panel-2); }
.row-blue { background: var(--blue); color: var(--white); }
.row-blue:hover { background: var(--blue-dark); }
.row-big { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.row-small { font-size: var(--step-small); }
.arrow {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: var(--white);
  transition: transform 300ms var(--ease);
}
.row-blue .arrow { background: var(--white); color: var(--blue); }
.arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.row:hover .arrow { transform: translateX(5px); }
.row-blue:focus-visible { outline-color: var(--navy); }

/* ---------- Footer ---------- */
.foot { padding-bottom: 32px; }
.foot-title { font-size: var(--step-title); font-weight: 600; }
.skills { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.skills dt { font-weight: 600; font-size: var(--step-small); }
.skills dd { margin-top: 6px; color: var(--muted); font-size: var(--step-small); }
.imprint { margin-top: 56px; font-size: var(--step-small); color: var(--muted); }

/* ---------- Opening screen: the name, huge, on finance blue; the blue opens and the name moves into the page ---------- */
.opening { display: none; }
html.opening-on { overflow: hidden; }
html.opening-on .opening { display: block; position: fixed; inset: 0; z-index: 100; cursor: pointer; }
.opening-bg { position: absolute; inset: 0; background: var(--blue); }
/* The one place type goes past the display step (Raul's request); scripts size it to the screen width */
.opening-name {
  position: absolute; left: 0; top: 0; margin: 0;
  font-size: 100px; font-weight: 600; letter-spacing: -0.035em; line-height: 1;
  color: var(--white); white-space: nowrap; visibility: hidden;
  transform-origin: 0 0; will-change: transform;
}
/* Two copies move together: white inside the blue, navy beneath it, so each letter turns navy as the blue uncovers it */
.opening-ink { color: var(--navy); }
html.opening-on .hero-name { opacity: 0; }
html.opening-played .hero-name { animation: none; }
html.js.opening-on .hero-title, html.js.opening-on .hero-line, html.js.opening-on .hero-actions, html.js.opening-on .results li { animation-play-state: paused; }

/* ---------- Entrances ---------- */
html.js .hero-name, html.js .hero-title, html.js .hero-line, html.js .hero-actions, html.js .results li {
  animation: rise 900ms var(--ease) both;
}
html.js .results li:nth-child(1) { animation-delay: 360ms; }
html.js .results li:nth-child(2) { animation-delay: 440ms; }
html.js .results li:nth-child(3) { animation-delay: 520ms; }
html.js .hero-title { animation-delay: 80ms; }
html.js .hero-line { animation-delay: 160ms; }
html.js .hero-actions { animation-delay: 240ms; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .ach-steps { grid-template-columns: 1fr; }
  .ai-panel { grid-template-columns: 1fr; }
  .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Contact rows: the address moves under the rows, so no small text sits above a big word */
@media (max-width: 900px) {
  .row { grid-template-columns: 1fr auto; padding: 20px 24px; }
  .row-small { display: none; }
  .row:not(.row-blue) .row-small { display: block; grid-column: 1; grid-row: 2; margin-top: 6px; }   /* the address sits under "Email me" */
  .row { row-gap: 0; padding-block: 18px; }
  .row .row-big { grid-column: 1; grid-row: 1; }
  .row .arrow { grid-column: 2; grid-row: 1 / span 2; }
  .row-blue .arrow { grid-row: 1; }
}

/* ---------- Phone: the path becomes a rail on the left ---------- */
@media (max-width: 760px) {
  .topbar { height: 60px; }
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 8px; padding-top: 8px; padding-bottom: 36px; }
  .hero-object { order: -1; }
  .view-hero { width: min(100%, 340px); }
  .globe-hero { width: min(100%, 340px); }
  .ach-steps { grid-template-columns: 1fr; gap: 16px; }
  .achievements .stop.stop-big { padding-left: 0; }
  .achievements .stop .obj, .achievements .stop[data-side] .obj { position: absolute; --obj: 96px; left: auto; right: 4px; top: 4px; margin: 0; }
  .achievements .card-big .big-line, .achievements .card-big .big-topic { padding-right: 76px; }
  .journey-head { text-align: left; padding-left: 64px; }
  .steps { gap: 40px; }
  .stop { display: block; padding-left: 64px; }
  .stop .node, .stop[data-side] .node { left: 26px; top: 10px; width: 40px; height: 40px; }
  .ledger { display: none; }
  .obj, .stop[data-side] .obj, .stop-big .obj { position: relative; left: auto; top: auto; --obj: 104px; margin: -4px 0 8px -70px; }
  .card .meta { display: flex; }
  .card-big .big-line { font-size: 1.1875rem; }
  .node .icon { width: 20px; height: 20px; }
  .place-tag { justify-content: flex-start; }
  .place-tag h2, .place-tag a { padding: 8px 14px; justify-content: flex-start; }   /* the pin stays on the rail */
  .flight { height: 140vh; }
  .flight-stage { top: 10vh; height: 80vh; }
  .laptop-scene { display: block; padding-left: 64px; min-height: 0; }
  .laptop { padding-top: 16px; }
  .view-laptop { width: min(100%, 380px); }
  .arrow { width: 44px; height: 44px; }
}
@media (max-width: 520px) {
  .where { display: block; }
  .where .dot { display: none; }
  .skills { grid-template-columns: 1fr; gap: 20px; }
  .topbar-links { gap: 14px; }
}

/* No script: no drawn path or globes, every stop shown */
html:not(.js) .globe, html:not(.js) .flight { display: none; }

/* ---------- Reduce motion: everything shown, nothing travels on its own ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .stop:not(.reached) .card { opacity: 1; transform: none; }
}