/* ==========================================================================
   MOCKUP: frosted glass over the hero plate
   The sharp image is the bottom layer; .hero-glass-frost is a canvas holding
   a frosted copy of it, and hero-glass.js wipes clear patches out of that
   canvas under the cursor which fog back over after a moment.
   ========================================================================== */
/* ---- layout: image column at 59%, text takes the rest ---- */
.flight-hero-sticky-viewport {
  gap: 4vw;
  /* Line the hero up with the header above it: the text starts at the left
     edge of the SJ logo, and the glass card ends at the right edge of the
     menu button. The header's ends are --cap-inset in, then the logo sits
     half the bar's height in from the curve (see the bar's padding in
     styles.css) and the buttons sit 12px padding + 1px border in. */
  padding-left: calc(var(--cap-inset) + var(--cap-h) / 2 - var(--logo-h) * 0.3027);
  padding-right: calc(var(--cap-inset) + 13px);
}

.hero-text-col {
  width: 36%;
  gap: 1.6rem;
}

.hero-headline {
  font-size: clamp(2.6rem, 4.6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 11ch;
}

.hero-art-col { width: 59%; }

/* ---- headline: only "AI" takes colour, a rust tone, lifted a step in dark
   mode so it holds contrast on the near-black ground. ---- */
.hero-headline .accent { color: #b0472a; }
[data-theme="dark"] .hero-headline .accent { color: #d9774f; }

/* ---- "Say hi" pill, inverted per theme: near-black with white
   text on the light page, white with near-black text on the dark page. ---- */
.hero-pill {
  background: #1d1d1f;
  color: #ffffff;
  border: 1px solid #1d1d1f;
  box-shadow: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.hero-pill:hover {
  background: #3a3a3d;
  border-color: #3a3a3d;
  transform: translateY(-1px);
}
.hero-pill:active { transform: translateY(0) scale(0.98); }
.hero-pill:focus-visible { outline: 2px solid #1d1d1f; outline-offset: 3px; }
.hero-pill svg { transition: transform 0.2s ease; }
.hero-pill:hover svg { transform: translate(2px, -2px); }

[data-theme="dark"] .hero-pill {
  background: #ffffff;
  color: #1d1d1f;
  border-color: #ffffff;
}
[data-theme="dark"] .hero-pill:hover { background: #e4e4e7; border-color: #e4e4e7; }
[data-theme="dark"] .hero-pill:focus-visible { outline-color: #ffffff; }

.hero-cta-row { gap: 1.6rem; }

/* ---- Book a call stays a quiet text link. The base rule (styles.css) is
   hard-coded white from the old dark video hero and vanishes on the light
   page, so follow the theme ink instead. ---- */
.hero-text-link {
  color: var(--text-primary);
  border-bottom-color: var(--hero-accent-dim);
}
.hero-text-link:hover { border-color: var(--text-primary); }
.hero-text-link:focus-visible { outline-color: var(--text-primary); }

/* ---- phones: the art is hidden, so the text takes the full width. The
   36% column above is the desktop split and must not apply here (it
   squeezed the headline to one word a line and pushed it right). ---- */
@media (max-width: 768px) {
  .flight-hero-sticky-viewport { align-items: stretch; padding-inline: clamp(1.25rem, 5vw, 2rem); }
  .hero-text-col { width: 100%; max-width: 34rem; gap: 1.4rem; }
  .hero-kicker { white-space: nowrap; }
  .hero-headline {
    max-width: 12ch;
    font-size: clamp(2.6rem, 11.5vw, 3.6rem);
    line-height: 1.04;
    text-wrap: balance;
  }
  .hero-cta-row { flex-wrap: nowrap; align-items: center; gap: 1.4rem; }
  .hero-cta-row > * { white-space: nowrap; flex-shrink: 0; }
}

.hero-glass {
  cursor: crosshair;
  /* Soft, rounded pane to match the menu islands; scales down on narrower
     screens so the curve stays in proportion. */
  border-radius: clamp(24px, 2.8vw, 40px);
  box-shadow: none;
}

.hero-glass-img {
  object-position: center;
}

.hero-glass-frost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Soft sheen across the pane, above the frost, so the glass has a surface
   even where it has been wiped clear. */
.hero-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.02) 32%,
    rgba(255, 255, 255, 0) 55%,
    rgba(255, 255, 255, 0.05) 100%);
}

.hero-glass-hint {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.5s ease;
}

.hero-glass.is-touched .hero-glass-hint { opacity: 0; }

/* Canvas never ran (no JS, or it bailed): fall back to a CSS frost so the
   pane still looks like glass, just without the wipe. */
.hero-glass:not(.is-live) .hero-glass-frost {
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  background: rgba(235, 238, 242, 0.14);
}

/* ==========================================================================
   My Work: heading and company tabs on one row, then one entry per company:
   visual left, story right, a rule between entries.
   ========================================================================== */
:root { --rust: #b0472a; }
[data-theme="dark"] { --rust: #d9774f; }

.work-section {
  position: relative;
  background: var(--bg-primary);
  padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 4vw, 4rem) clamp(4rem, 8vw, 7rem);
}

.work-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.work-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-primary);
}

.work-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem 2rem;
}

.work-tab {
  position: relative;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.3rem 0;
  transition: color 0.2s ease;
}

/* Underline draws in from the left on hover, and stays on the entry in view. */
.work-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.work-tab:hover,
.work-tab:focus-visible,
.work-tab.is-active { color: var(--text-primary); }

.work-tab:hover::after,
.work-tab:focus-visible::after,
.work-tab.is-active::after { transform: scaleX(1); }

.work-tab:focus-visible { outline: none; }

/* Text and device share one height: the logo lines up with the top of the
   bezel and "Learn more" with the bottom, the auto margins below sharing out
   any spare height. From 1200px the device may also grow a little past 16:10
   when the text is the taller of the two; narrower than that it keeps 16:10
   and centres against the text instead, so it never turns portrait. */
.work-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: stretch;
  scroll-margin-top: 6rem;
}
.work-entry > .work-media { align-self: center; }
@media (min-width: 1200px) {
  .work-entry > .work-media {
    align-self: stretch;
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 10;
  }
  .work-entry > .work-media > .work-media-inner {
    flex: 1;
    aspect-ratio: auto;
  }
}

.work-rule {
  border: 0;
  height: 1px;
  background: var(--border-subtle);
  margin: clamp(3.5rem, 7vw, 6rem) 0;
}

/* ---- visual: a device screen in a black bezel ----
   Fixed colours, not theme tokens: the bezel is hardware and must look the
   same in light and dark mode. The thin lighter ring stands in for the
   device's machined edge, so it still separates from a dark page. The camera,
   notch and buttons are drawn in styles.css ("Device hardware"). */
.work-media {
  --bezel: clamp(6px, 0.7vw, 9px);
  border-radius: clamp(16px, 2vw, 26px);
  padding: var(--bezel);
  background: #0c0c0e;
  box-shadow:
    0 0 0 1px #47474c,
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 24px 48px -20px rgba(0, 0, 0, 0.45);
}

.work-media-inner {
  aspect-ratio: 16 / 10;
  border-radius: clamp(10px, 1.3vw, 17px);
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(176, 71, 42, 0.07), transparent 60%),
    var(--bg-card-solid);
}

.work-media-inner .work-logo {
  height: clamp(2.2rem, 3.4vw, 3.2rem);
  font-size: clamp(2rem, 3.2vw, 3rem);
  opacity: 0.9;
}

/* ---- story ---- */
.work-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.work-body > .work-link,
.work-body > .work-stat,
.work-body > .work-more { margin-top: auto; }
.work-body > .work-link { padding-top: 1.2rem; }
.work-body > .work-stat,
.work-body > .work-more { padding-top: 1.5rem; }

.work-logo {
  display: inline-flex;
  align-items: center;
  height: 2.1rem;
  width: auto;
  color: var(--text-primary);
}

.work-logo-ytm { gap: 0.4em; font-family: var(--font-sans); font-weight: 700; font-size: 1.75rem; letter-spacing: -0.03em; }
.work-logo-ytm svg { height: 100%; width: auto; }
.work-logo-gcloud { height: 1.9rem; }
.work-logo-wellsense { height: 2.4rem; }
.work-logo-text {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.85rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
.work-logo-serif {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.01em;
}

.work-role {
  margin: 0.9rem 0 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--text-secondary);
}

.work-headline {
  margin: 1.6rem 0 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.9rem, 2.7vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  max-width: 20ch;
}

.work-desc {
  margin: 1rem 0 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 48ch;
}

.work-stat {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 2.2rem;
}

.work-stat-num {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(2rem, 2.9vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}

/* One accent per entry, set on the article: a slate blue, a sage green or
   a dusk plum, each dark enough for AA on the light page and lifted for dark.
   The stat, "Learn more" and the headline's hover colour all read it. */
.work-entry               { --work-accent: #2f5f8a; }
.work-entry.accent-green  { --work-accent: #3d6b4c; }
.work-entry.accent-purple { --work-accent: #6a4c8c; }
[data-theme="dark"] .work-entry               { --work-accent: #8fb4dc; }
[data-theme="dark"] .work-entry.accent-green  { --work-accent: #8fc09f; }
[data-theme="dark"] .work-entry.accent-purple { --work-accent: #b59bd8; }
.work-stat-num { color: var(--work-accent); }

.work-stat-note p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--text-primary);
  max-width: 24ch;
}

.work-stat-note .work-stat-sub {
  margin-top: 0.3rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.work-more {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--work-accent);
  text-decoration: none;
}

.work-more-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.work-more-icon svg { transition: transform 0.2s ease; }
.work-more:hover .work-more-icon { background: var(--work-accent); color: var(--bg-primary); }
.work-more:hover .work-more-icon svg { transform: translate(2px, -2px); }
.work-more:hover span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.work-more:focus-visible { outline: 2px solid var(--work-accent); outline-offset: 4px; border-radius: 4px; }

/* Headline + description are one link to the case study. They keep their
   own colours; the headline takes the entry's accent while either link is
   hovered or focused. */
.work-link { display: block; color: inherit; text-decoration: none; }
.work-link .work-headline { margin-top: 0; }
.work-headline { transition: color 0.2s ease; }
.work-link:hover .work-headline,
.work-link:focus-visible .work-headline,
.work-entry:has(.work-more:hover) .work-headline,
.work-entry:has(.work-more:focus-visible) .work-headline { color: var(--work-accent); }
.work-link:focus-visible { outline: 2px solid var(--work-accent); outline-offset: 6px; border-radius: 6px; }

/* An entry whose case study is not written yet. "Coming soon" takes the place
   of "Learn more": same row, but not a link, and painted in a gradient of the
   entry's blue so it reads as a state rather than an action. Both ends of
   the gradient hold AA contrast against the page in their theme. */
.work-entry { --soon-from: #1f4468; --soon-to: #3a72a6; }
[data-theme="dark"] .work-entry { --soon-from: #6f9bd0; --soon-to: #cfe3fb; }
.work-soon { margin-bottom: 0; cursor: default; }
.work-soon span:first-child {
  background: linear-gradient(90deg, var(--soon-from), var(--soon-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.work-soon .work-more-icon {
  border: 0;
  background: linear-gradient(135deg, var(--soon-from), var(--soon-to));
  color: var(--bg-primary);
}
.work-soon:hover span:first-child { text-decoration: none; }
.work-soon:hover .work-more-icon { background: linear-gradient(135deg, var(--soon-from), var(--soon-to)); }
.work-soon:hover .work-more-icon svg { transform: none; }
/* With no page to open, the headline stops reacting to the pointer. */
.work-link.is-static:hover .work-headline { color: inherit; }

/* Real visuals: screenshot on a white ground, or the looping campaign video
   filling the frame edge to edge. */
.work-media--shot .work-media-inner { overflow: hidden; }
.work-media--shot.is-light .work-media-inner { background: #ffffff; padding: 4%; box-sizing: border-box; }
.work-media--shot img,
.work-media--shot video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.work-media--shot video { object-fit: cover; }

@media (max-width: 900px) {
  .work-head { flex-direction: column; align-items: flex-start; }
  .work-tabs { justify-content: flex-start; gap: 0.4rem 1.4rem; }
  .work-entry { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .work-tab::after,
  .work-more-icon,
  .work-more-icon svg,
  .work-headline { transition: none; }
}

/* WellChat is a mobile prototype, so it sits in a portrait phone rather than
   the 16:10 tablet. Same hardware colours as the tablet bezel; a thicker
   rim, rounder corners, a machined band and a notch read as a phone. The screen
   ratio matches the recording (540x1164). Beats the 1200px+ rule that
   stretches every device to the text height. */
.work-entry > .work-media--phone,
.work-media--phone {
  position: relative;
  align-self: center;
  justify-self: center;
  display: block;
  --bezel: clamp(8px, 0.9vw, 11px);
  width: clamp(220px, 22vw, 290px);
  aspect-ratio: auto;
  padding: var(--bezel);
  border-radius: clamp(34px, 3.6vw, 46px);
  box-shadow:
    0 0 0 1px #47474c,
    inset 0 0 0 2px #1b1b1f,
    inset 0 0 0 3px rgba(255, 255, 255, 0.09),
    0 24px 48px -20px rgba(0, 0, 0, 0.45);
}
.work-entry > .work-media--phone > .work-media-inner,
.work-media--phone .work-media-inner {
  aspect-ratio: 540 / 1164;
  border-radius: clamp(26px, 2.8vw, 36px);
  background: #ffffff;
}
@media (max-width: 900px) {
  .work-entry > .work-media--phone { width: min(260px, 68vw); }
}

/* YouTube sits in an iPhone 17 Pro turned on its side: the screen keeps the
   phone's 2622x1206 ratio, so the frame is wider and shorter than the tablet.
   Same hardware colours as the other frames; the island and buttons are in
   styles.css ("Device hardware"). Beats the 1200px+ rule that stretches every
   device to the text height. */
.work-entry > .work-media--phone-land,
.work-media--phone-land {
  align-self: center;
  display: block;
  --bezel: clamp(6px, 0.75vw, 10px);
  width: 100%;
  aspect-ratio: auto;
  border-radius: clamp(26px, 4.2vw, 56px);
  box-shadow:
    0 0 0 1px #47474c,
    inset 0 0 0 2px #1b1b1f,
    inset 0 0 0 3px rgba(255, 255, 255, 0.09),
    0 24px 48px -20px rgba(0, 0, 0, 0.45);
}
.work-entry > .work-media--phone-land > .work-media-inner,
.work-media--phone-land .work-media-inner {
  aspect-ratio: 2622 / 1206;
  border-radius: clamp(20px, 3.5vw, 47px);
}
/* Google Cloud sits in a MacBook that is a single transparent image (lid,
   screen and base), so the CSS bezel, camera and buttons are all switched
   off and the picture keeps its own ratio. The thin lighter outline does the
   job of the other frames' machined ring: it keeps the black body readable
   on a dark page. Beats the 1200px+ rule that stretches every device to the
   text height. */
.work-entry > .work-media--laptop,
.work-media--laptop {
  align-self: center;
  display: block;
  width: 100%;
  aspect-ratio: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.work-media.work-media--laptop::before,
.work-media.work-media--laptop::after { content: none; }
.work-media--laptop img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 0.5px #6a6a70)
    drop-shadow(0 18px 22px rgba(0, 0, 0, 0.3));
}

/* YouTube's official logo, one file per theme: almost-black text for light
   grounds, white text for dark ones. Only sized here, never recoloured or
   reshaped. The screen behind it follows the theme too. */
.logo-on-dark { display: none; }
[data-theme="dark"] .logo-on-dark { display: block; }
[data-theme="dark"] .logo-on-light { display: none; }

.work-entry > .work-media--phone-land > .work-media-inner,
.work-media--phone-land .work-media-inner { background: #ffffff; }
[data-theme="dark"] .work-entry > .work-media--phone-land > .work-media-inner,
[data-theme="dark"] .work-media--phone-land .work-media-inner { background: #0f0f0f; }
.work-screen-logo { display: block; width: 52%; }
.work-screen-logo-img { width: 100%; height: auto; }

/* The same logo above the role line. Each file is 1705x573 with the logo
   itself in the middle (204px in from the left, about half the height), so
   the image is drawn at twice the row height and pulled left by its own
   clear space to line the play button up with the text below. */
.work-logo-youtube { --img-h: 3.6rem; height: 1.85rem; }
.work-logo-youtube-img {
  flex-shrink: 0;
  height: var(--img-h);
  width: auto;
  margin-left: calc(var(--img-h) * -0.356);
}

/* ==========================================================================
   Impact: one-line lede with rust accents, three cards, and a cursor-reactive
   dot grid behind them (hero-glass.js). The dots are desktop/tablet only.
   ========================================================================== */
.impact-section {
  position: relative;
  overflow: hidden;
  /* Generous room above the lede and below the cards so the dot grid has
     open space to play with; trimmed on phones, where there are no dots. */
  padding: clamp(6rem, 12vw, 11rem) 0 clamp(10rem, 18vw, 17rem);
}
.impact-section > .container { position: relative; z-index: 1; }

.impact-dots-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, black 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, black 40%, transparent 100%);
}

.impact-header { max-width: 820px; }

.impact-lede {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
}

.impact-header { margin-bottom: clamp(4.5rem, 7vw, 6.5rem); }

/* Crisp rust gradient on the two key words: deep rust into a warm ember,
   brighter in dark mode so it holds contrast on black. */
.impact-accent {
  background: linear-gradient(100deg, #8f2f12 0%, #b0472a 45%, #dc6a35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
[data-theme="dark"] .impact-accent {
  background-image: linear-gradient(100deg, #d9653a 0%, #e8804f 50%, #f5a66f 100%);
}

/* Rust spotlight and hover glow in place of the blue. */
.impact-section .stat-card:hover {
  border-color: rgba(176, 71, 42, 0.4);
  box-shadow: var(--shadow-lg), 0 0 35px rgba(176, 71, 42, 0.18);
}

.impact-section .stat-card::before {
  background: radial-gradient(
    circle 260px at var(--mx, 50%) var(--my, 50%),
    rgba(176, 71, 42, 0.26) 0%,
    rgba(176, 71, 42, 0.13) 32%,
    rgba(176, 71, 42, 0.05) 55%,
    transparent 72%);
}

[data-theme="dark"] .impact-section .stat-card:hover {
  border-color: rgba(217, 119, 79, 0.45);
  box-shadow: var(--shadow-lg), 0 0 45px rgba(217, 119, 79, 0.26);
}

[data-theme="dark"] .impact-section .stat-card::before {
  background: radial-gradient(
    circle 260px at var(--mx, 50%) var(--my, 50%),
    rgba(217, 119, 79, 0.4) 0%,
    rgba(217, 119, 79, 0.2) 32%,
    rgba(217, 119, 79, 0.07) 55%,
    transparent 72%);
}

@media (max-width: 768px) {
  .impact-section { padding: 4rem 0 6rem; }
  .impact-header { margin-bottom: 3rem; }
  .impact-dots-canvas { display: none; }
}

/* Hero name kicker: dark chocolate on the light plate, warm sand on dark. */
.hero-kicker { color: #4a2c1d; }
[data-theme="dark"] .hero-kicker { color: #d8c09a; }

/* ==========================================================================
   About (michaeltsirakis.com layout): route map + stops on the left in place
   of a photo, a short intro on the right that expands in place. Rides on
   .intro-section for the ground colour and the curved rise-in.
   ========================================================================== */
.about-section { padding-block: clamp(6rem, 10vw, 9rem); }

.about-grid {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: clamp(4.5rem, 9vw, 9rem);
  align-items: center;
}

/* ---- map card: sits where the photo does, same rounded frame ---- */
.route-map {
  border-radius: 22px;
  padding: 1.25rem 1rem;
  background:
    radial-gradient(120% 90% at 40% 30%, rgba(176, 71, 42, 0.06), transparent 60%),
    var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
}
/* The waving Lego avatar stands on the card's lower right corner, over the
   Bay of Bengal where the map is empty. He steps a little past the frame so
   he reads as beside the map, not in it. */
/* The card ends above his floor line, so he stands in front of the map on
   lower ground. The margin keeps the stops below clear of his boots. */
.route-stage { position: relative; margin-bottom: 3.75rem; }
.route-presenter {
  position: absolute;
  right: -2rem;
  bottom: -2.1rem;
  width: auto;
  height: 42%;
  max-height: 230px;
  z-index: 1;
  pointer-events: none;
  /* Light theme only: the off-white trousers sit on a near-white ground, so
     a hairline warm shadow gives the cutout an edge. Dark theme needs none. */
  filter: drop-shadow(0 1px 1.5px rgba(46, 34, 26, 0.3)) drop-shadow(0 6px 10px rgba(46, 34, 26, 0.1));
}
[data-theme="dark"] .route-presenter { filter: none; }
/* Studio floor, lit from the upper left like a product photo: dense contact
   shadow under the boots, a softer cast shadow drifting right, and a wide
   ambient falloff. Dark theme adds a pool of light on the floor so the
   shadow has something to fall on. */
.route-stage::after {
  content: "";
  position: absolute;
  right: -4.45rem;
  bottom: -3rem;
  width: 13rem;
  height: 2.2rem;
  background:
    radial-gradient(22% 26% at 50% 46%, rgba(46, 34, 26, 0.62) 0%, transparent 100%),
    radial-gradient(40% 44% at 62% 52%, rgba(46, 34, 26, 0.3) 0%, transparent 100%),
    radial-gradient(50% 50% at 56% 50%, rgba(46, 34, 26, 0.13) 0%, rgba(46, 34, 26, 0.04) 55%, transparent 100%);
  filter: blur(2px);
  pointer-events: none;
}
[data-theme="dark"] .route-stage::after {
  background:
    radial-gradient(20% 24% at 50% 46%, rgba(0, 0, 0, 0.85) 0%, transparent 100%),
    radial-gradient(36% 40% at 61% 52%, rgba(0, 0, 0, 0.55) 0%, transparent 100%),
    radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 55%, transparent 100%);
}

.route-map svg { display: block; width: 100%; height: auto; max-height: 520px; overflow: visible; }

.route-state {
  fill: #e4ded5;
  stroke: var(--bg-primary);
  stroke-width: 1.2;
  stroke-linejoin: round;
  transition: fill 0.3s ease;
}
.route-state.is-route { fill: rgba(176, 71, 42, 0.26); cursor: pointer; }
.route-state.is-route:hover { fill: rgba(176, 71, 42, 0.42); }
.route-state.is-active,
.route-state.is-active:hover { fill: var(--rust); }

[data-theme="dark"] .route-state { fill: #26262a; }
[data-theme="dark"] .route-state.is-route { fill: rgba(217, 119, 79, 0.3); }
[data-theme="dark"] .route-state.is-route:hover { fill: rgba(217, 119, 79, 0.48); }
[data-theme="dark"] .route-state.is-active { fill: var(--rust); }

.route-pin { cursor: pointer; }
.route-pin-halo { fill: var(--rust); opacity: 0; transition: opacity 0.3s ease; }
.route-pin-dot {
  fill: var(--bg-primary);
  stroke: var(--rust);
  stroke-width: 2.5;
  transition: fill 0.3s ease;
}
.route-pin-label {
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 600;
  fill: var(--text-muted);
  paint-order: stroke;
  stroke: var(--bg-primary);
  stroke-width: 4px;
  stroke-linejoin: round;
  transition: fill 0.3s ease;
}
.route-pin.is-active .route-pin-halo { opacity: 0.22; }
.route-pin.is-active .route-pin-dot { fill: var(--rust); stroke: var(--bg-primary); }
.route-pin.is-active .route-pin-label { fill: var(--text-primary); font-weight: 700; }

/* ---- "My route here" stops: city over a small caption, thin rules between,
   the chosen stop underlined in rust ---- */
.route-eyebrow {
  margin: 1.4rem 0 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.route-stops { display: flex; align-items: flex-start; gap: 0.4rem; }

.route-stop {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0 0 0.55rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s ease;
}
.route-stop:last-child { align-items: flex-end; text-align: right; }
.route-city { font-size: 0.92rem; font-weight: 500; color: var(--text-muted); transition: color 0.2s ease; }
.route-sub { font-size: 0.74rem; color: var(--text-secondary); }
.route-stop:hover .route-city,
.route-stop[aria-selected="true"] .route-city { color: var(--text-primary); }
.route-stop[aria-selected="true"] { border-bottom-color: var(--rust); }
.route-stop:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 3px; }

.route-line {
  flex: 1 1 0;
  min-width: 6px;
  height: 1px;
  margin-top: 0.65rem;
  background: var(--border-subtle);
  background: color-mix(in srgb, var(--text-secondary) 45%, transparent);
}

.route-note {
  margin: 1rem 0 0;
  min-height: 3.2em;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---- copy ---- */
.about-kicker {
  margin: 0 0 1.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.about-headline {
  margin: 0 0 2rem;
  font-family: var(--font-sans);
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--text-primary);
}

.about-short p {
  margin: 0 0 1.4rem;
  max-width: 34rem;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.about-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.8rem;
  padding-bottom: 3px;
  border-bottom: 1.5px solid currentColor;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: gap 0.2s ease;
}
/* "The longer version" and "Download resume" side by side; the second is a
   button (it opens the resume form in place) wearing the same link style. */
.about-more-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.8rem; }
button.about-more {
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1.5px solid currentColor;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.about-more svg { transition: transform 0.2s ease; }
.about-more:hover { gap: 0.55rem; }
.about-more:hover svg { transform: translate(2px, -2px); }
button.about-more:hover svg { transform: translateY(2px); }
.about-more:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
  .about-route { max-width: 440px; }
  /* Single column: keep him inside the frame so nothing overflows sideways. */
  .route-presenter { right: -0.4rem; height: 40%; }
  .route-stage::after { right: -0.45rem; width: 8rem; }
}

@media (max-width: 480px) {
  .about-section { padding-block: 5rem; }
  /* Five stops only fit a phone without the connecting rules. */
  .route-stops { justify-content: space-between; gap: 0.5rem; }
  .route-line { display: none; }
  .route-city { font-size: 0.8rem; }
  .route-sub { font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .route-state, .route-pin-halo, .route-pin-dot, .route-pin-label { transition: none; }
}

/* ==========================================================================
   Core Strategic Competencies on the home page. Key words and the hover
   border keep the base stylesheet's blue (styles.css).
   ========================================================================== */
.home-competencies {
  background: var(--bg-primary);
  padding-block: clamp(4rem, 8vw, 6.5rem);
}