/* GSilva Consulting. Brand book 2026-09-07: Deep Navy, Core Gold, Light Gold, Silver, White.
   One theme (navy), one accent (gold), one radius (2px). */

@font-face { font-family: "DM Serif Display"; src: url("/fonts/dm-serif-display-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("/fonts/dm-serif-display-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --navy: #010922;
  --navy-rgb: 1 9 34;
  --navy-2: #040f2e;       /* alternate section tint */
  --surface: #0a1638;      /* raised tiles */
  --line: rgb(199 198 197 / .14);
  --line-strong: rgb(199 198 197 / .28);
  --gold: #c5953d;
  --gold-rgb: 197 149 61;   /* for translucent gold: rgb(var(--gold-rgb) / a) */
  --gold-lt: #efd489;
  --gold-text: #cf9f47; /* small gold text: 7.35:1 or better on every navy step (AAA); fills, icons and big figures keep --gold */
  --silver: #c7c6c5;
  --white: #f4f4f4;
  --muted: #a3a6b1;
  --error: #ffb4a8; /* Error Coral, DESIGN.md */
  --shadow: rgb(0 2 12 / .5); /* navy-tinted, never pure black */
  /* WhatsApp's official brand colours: the one deliberate exception to the palette */
  --wa: #25d366;
  --wa-hover: #1ebe5b;
  --wa-ink: #fff;
  --wa-dark: #0b141a; /* WhatsApp’s own dark UI colour */
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 2px;
  --wrap: 1240px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* section rhythm: generous for the main story, tighter for short supporting sections */
  --section-lg: clamp(5.5rem, 10vw, 9rem);
  --section: clamp(4.5rem, 8vw, 7rem);
  --section-sm: clamp(3.5rem, 6vw, 5.5rem);
  --header-h: 4.5rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--navy); color: var(--white);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 400; overflow-wrap: break-word; hyphens: auto; }
h1, h2 { font-family: var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 1.2rem + 3vw, 3.375rem); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); line-height: 1.1; }
h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
/* Grid items may shrink below their content width, so long words and zoomed text reflow instead of overflowing */
.hero-grid > *, .about-grid > *, .career-grid > *, .edu-grid > *, .contact-grid > *, .comp-grid > *, .metrics-grid > *, .quotes > * { min-width: 0; }
@media (min-width: 768px) { .wrap { padding-inline: 40px; } }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: var(--navy); padding: 8px 14px; }
.skip:focus { left: 8px; }
#top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

.i { width: 1.2em; height: 1.2em; flex: none; fill: currentColor; }
.i-lg { width: 32px; height: 32px; color: var(--gold); }

.eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: 20px; text-wrap: balance;
}
.lead { color: var(--silver); font-size: 1.125rem; max-width: 60ch; margin-top: 18px; }

/* TODO markers: visible gaps, never invented copy */
.todo {
  display: inline-block; border: 1px dashed var(--gold); color: var(--gold-lt);
  background: rgb(var(--gold-rgb) / .08); padding: 2px 8px; border-radius: var(--radius);
  font-size: .95em; max-width: 100%;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: var(--radius);
  font: 600 .95rem/1.2 var(--sans); letter-spacing: .02em; text-align: center;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease);
}
.btn[hidden] { display: none; }
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-line { border-color: var(--line-strong); color: var(--white); background: transparent; }
/* WhatsApp brand green. Dark ink, not white: white on #25D366 is under 2:1 contrast */
.btn-wa { background: var(--wa); color: var(--wa-dark); }
@media (hover: hover) { /* no sticky hover after a tap */
  .btn-gold:hover { background: var(--gold-lt); }
  .btn-line:hover { border-color: var(--gold); color: var(--gold-lt); }
  .btn-wa:hover { background: var(--wa-hover); }
}
@media (min-width: 640px) { .btn { white-space: nowrap; } } /* labels may wrap only on phones / zoomed text */
.btn-sm { min-height: 44px; padding: 0 18px; font-size: .88rem; }
.btn-block { width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 44px;
  color: var(--gold-text); font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: transform .1s ease-out;
}
.link-arrow .i { transition: transform .25s var(--ease); }
.link-arrow:active { transform: scale(.97); }
@media (hover: hover) {
  .link-arrow:hover { color: var(--gold-lt); }
  .link-arrow:hover .i { transform: translateX(3px); }
}

/* Header: a translucent layer content scrolls under */
#site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(var(--navy-rgb) / .72); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid transparent; transition: background-color .3s;
}
/* scroll edge: a soft fade where content slides under the header, instead of a hard divider */
#site-header::after {
  content: ""; position: absolute; inset: 100% 0 auto; height: 20px; pointer-events: none;
  background: linear-gradient(rgb(var(--navy-rgb) / .55), transparent); opacity: 0; transition: opacity .3s;
}
#site-header.scrolled { background: rgb(var(--navy-rgb) / .82); }
#site-header.scrolled::after { opacity: 1; }
#site-header:has(.nav-mobile:not([hidden])) { background: var(--navy); } /* open menu needs a solid surface */
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.brand img { height: 2.75rem; width: auto; } /* the brand lockup itself: mark + wordmark, cut from the logo file */
@media (min-width: 768px) { .brand img { height: 3rem; } }
.nav-desktop { display: none; gap: 34px; }
.nav-desktop a { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) { .nav-desktop { gap: 20px; } } /* room for the longer PT labels */
.nav-desktop a, .footer-grid nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: .95rem; color: var(--silver); transition: color .2s; }
.nav-desktop a:hover, .footer-grid nav a:hover { color: var(--gold-lt); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.lang-toggle, .burger {
  height: 44px; min-width: 44px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: transparent; color: var(--white); font: 600 .85rem var(--sans); letter-spacing: .08em; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .1s ease-out, border-color .2s, color .2s;
}
.lang-toggle:active, .burger:active { transform: scale(.95); }
@media (hover: hover) { .lang-toggle:hover, .burger:hover { border-color: var(--gold); color: var(--gold-lt); } }
.burger .i { width: 22px; height: 22px; }
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: inline-flex; } } /* tablets + landscape phones keep "Book a call" in view */
.nav-mobile {
  display: grid; gap: 4px; padding: 8px 20px 24px; border-top: 1px solid var(--line);
  transition: opacity .2s var(--ease), transform .2s var(--ease), display .2s allow-discrete;
}
.nav-mobile[hidden] { display: none; opacity: 0; transform: translateY(-8px); }
@starting-style { .nav-mobile { opacity: 0; transform: translateY(-8px); } } /* enters along the path it exits */
.nav-mobile a:not(.btn) { padding: 14px 0; text-decoration: none; font-size: 1.1rem; border-bottom: 1px solid var(--line); }
.nav-mobile .btn { margin-top: 16px; }
@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  .hide-sm { display: inline-flex; }
  .burger, .nav-mobile { display: none !important; }
}

/* Sections */
section { padding-block: var(--section); }
.s-lg { padding-block: var(--section-lg); }
.s-sm { padding-block: var(--section-sm); }
section:nth-of-type(even) { background: var(--navy-2); }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: 780px; }

/* Hero */
#hero { padding-block: 32px 0; overflow: hidden; background: var(--navy); }
.hero-grid { display: grid; gap: 24px; align-items: center; }
.hero-copy { padding-top: 24px; }
.hero-sub { color: var(--silver); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); max-width: 52ch; margin-top: 24px; }
.hero-list { display: grid; gap: 8px; margin-top: 24px; }
.hero-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .98rem; color: var(--white); }
.hero-list .i { color: var(--gold); margin-top: 3px; }
.hero-copy .cta-row { margin-top: 32px; }
.cta-note { margin-top: 12px; font-size: .88rem; color: var(--muted); }
/* phones: the booking button comes before the service list so it is visible without scrolling */
@media (max-width: 767px) { .hero-copy { display: flex; flex-direction: column; } .hero-list { order: 1; } }
.hero-photo { position: relative; margin-inline: -20px; }
.hero-photo img {
  width: 100%; max-height: 72vh; object-fit: cover; object-position: top center;
  /* fade all four edges so the studio backdrop dissolves into the page navy */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 72%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 72%, transparent);
          mask-composite: intersect;
}
@media (min-width: 900px) {
  #hero { padding-top: 0; }
  .hero-grid { grid-template-columns: 1.3fr .7fr; gap: 48px; min-height: min(calc(100dvh - var(--header-h)), 660px); }
  .hero-copy { padding-block: 48px 64px; }
  .hero-photo { margin: 0; align-self: end; }
  .hero-photo img { max-height: min(calc(100dvh - var(--header-h)), 660px); }
}

/* Opening intro (head script + main.js initIntro): the Flow film (chaos -> engine -> gold), first visit per session
   only, then it fades away into the hero. The film itself has no logo: the real one fades in over its glowing end point,
   so it is always the exact brand mark and stays sharp at any size. The stage is the film's 16:9 box, so the logo's
   position (in %) matches the film on every screen shape. */
.intro { display: none; }
.intro-on .intro {
  position: fixed; inset: 0; z-index: 200; display: block; overflow: hidden;
  background: var(--navy);
  transition: opacity 1s ease-in-out, visibility 0s 1s;
}
.intro-on body { overflow: hidden; }
.intro-video { /* edges dissolve into the page navy, so no letterbox seam shows on any screen shape */
  display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
          mask-composite: intersect;
}
.intro-stage { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; }
/* portrait phones: enlarge the film and let its sides run off-screen; the story and the logo live in the centre */
@media (orientation: portrait) { .intro-stage { width: min(100vw, 100vh); aspect-ratio: 1; } } /* square cut: intro-square.mp4 */
.intro-logo { /* 45.8% tall, centre 4% above the middle: its foot meets the film's glowing point */
  position: absolute; left: 50%; top: 45.8%; height: 45.8%; width: auto;
  transform: translate(-50%, -50%) scale(.96); opacity: 0; filter: blur(6px);
  transition: opacity 1.2s var(--ease), transform 1.6s var(--ease), filter 1.2s var(--ease);
}
.intro.logo-in .intro-logo { opacity: 1; transform: translate(-50%, -50%); filter: none; }
.intro-video { opacity: 0; transition: opacity .5s var(--ease); }
.intro.is-playing .intro-video { opacity: 1; }
.intro.is-leaving { opacity: 0; visibility: hidden; }
.intro-skip {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  min-height: 44px; padding: 0 18px; cursor: pointer; border-radius: var(--radius);
  background: rgb(var(--navy-rgb) / .6); color: var(--white); border: 1px solid var(--line-strong);
  font: 600 .88rem/1 var(--sans); letter-spacing: .04em; transition: border-color .2s, color .2s, transform .1s ease-out;
}
.intro-skip:active { transform: scale(.97); }
@media (hover: hover) { .intro-skip:hover, .intro-sound:hover { border-color: var(--gold); color: var(--gold-lt); } }
/* Sound: the film starts muted (browsers block autoplay with sound); one tap brings in its soundtrack */
.intro-sound {
  position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; cursor: pointer; border-radius: var(--radius);
  background: rgb(var(--navy-rgb) / .6); color: var(--white); border: 1px solid var(--line-strong);
  font: 600 .88rem/1 var(--sans); letter-spacing: .04em; transition: border-color .2s, color .2s, transform .1s ease-out;
}
.intro-sound:active { transform: scale(.97); }
.intro-sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.intro-sound .spk { fill: currentColor; stroke: none; }
.intro-sound[aria-pressed="false"] .on, .intro-sound[aria-pressed="true"] .off { display: none; }
.intro-sound[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-lt); }

/* Hero typewriter (main.js typeHero): hidden until built, so the full text never flashes before typing */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.js [data-type]:not(.tw-ready) { visibility: hidden; }
.tw-todo { visibility: hidden; } /* the rest of the sentence holds the final line breaks */
.tw-cursor {
  display: inline-block; width: 2px; height: .9em; margin: 0 -1px; vertical-align: -.08em; /* zero net width: never re-wraps */
  background: var(--gold); animation: tw-blink 1s ease-in-out infinite;
}
@keyframes tw-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Metrics: four figures side by side, number over label, hairlines between; the figures count up on scroll */
#metrics { padding-block: clamp(40px, 5vw, 64px); background: var(--navy); }
.metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.metric { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding: 28px 12px; text-align: center; }
.metric:nth-child(even) { border-left: 1px solid var(--line); }
.metric:nth-child(n+3) { border-top: 1px solid var(--line); }
.metric-num { white-space: nowrap; font-family: var(--serif); font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.metric-num .unit { font-size: .55em; margin-left: 2px; }
.metric-num .unit:first-child { margin: 0 2px 0 0; }
.metric-label { font-size: .9rem; color: var(--silver); max-width: 22ch; }
@media (min-width: 900px) {
  .metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metric { padding: 44px 16px; }
  .metric:nth-child(n+3) { border-top: 0; }
  .metric + .metric { border-left: 1px solid var(--line); }
}

/* Services: five cards, one open at a time. The open card fills with gold from the bottom,
   widens, and reveals its detail. Closed-state rules sit under .js so every card reads in full without it. */
.svc { display: grid; gap: 12px; container-type: inline-size; contain: layout; } /* width animation stays inside */
.svc-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--white);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.svc-card::before {
  content: ""; position: absolute; inset: 0; background: var(--gold);
  transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease);
}
.svc-card > * { position: relative; } /* content sits above the gold fill */
.svc-card.is-open { color: var(--navy); border-color: var(--gold); }
.svc-card.is-open::before { transform: scaleY(1); }
.svc-title { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.15; hyphens: manual; }
.svc-head {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 76px; padding: 20px;
  appearance: none; background: none; border: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.svc-head:focus-visible { outline-offset: -4px; }
.svc-card.is-open .svc-head { cursor: default; }
.svc-card.is-open .svc-head:focus-visible { outline-color: var(--navy); }
.svc-card .i-lg { transition: color .4s var(--ease); }
.svc-card.is-open .i-lg { color: var(--navy); }
.svc-more { margin-left: auto; color: var(--gold); transition: opacity .2s; }
.svc-card.is-open .svc-more { opacity: 0; }
.svc-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--ease); }
.svc-clip { min-height: 0; overflow: hidden; }
.svc-body { padding: 0 20px 20px; transition: opacity .35s var(--ease) .12s, transform .45s var(--ease) .12s; }
.svc-body > p { max-width: 52ch; }
.svc-card .checks li { color: inherit; }
.svc-card .checks li::before { background: currentColor; }
.svc-card .link-arrow { color: inherit; font-weight: 700; }
.svc-card.is-open .todo { border-color: var(--navy); color: var(--navy); background: rgb(var(--navy-rgb) / .08); }
.js .svc-card:not(.is-open) .svc-panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .5s var(--ease), visibility 0s .5s; }
.js .svc-card:not(.is-open) .svc-body { opacity: 0; transform: translateY(10px); transition: opacity .15s, transform .15s; }
@media (hover: hover) { .js .svc-card:not(.is-open):hover { border-color: rgb(var(--gold-rgb) / .45); } }
@media (min-width: 1200px) {
  /* a row: closed cards share the width equally, the open one takes three shares */
  .js .svc { display: flex; gap: 16px; min-height: 41rem; --share: calc((100cqi - 64px) / 7); }
  .js .svc-card { flex: 1 1 0; transition: flex-grow .5s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
  .js .svc-card.is-open { flex-grow: 3; }
  .js .svc-title { display: flex; flex: 1; font-size: .95rem; }
  .js .svc-head { flex: 1; flex-direction: column; align-items: flex-start; padding: 28px 16px 18px; }
  /* fixed width, so the title never re-wraps while the card resizes; it scales up instead */
  .js .svc-label { width: calc(var(--share) - 34px); margin-top: auto; transform-origin: left bottom; transition: transform .5s var(--ease); }
  .js .svc-card.is-open .svc-label { transform: scale(1.6); }
  .js .svc-more { display: none; }
  .js .svc-body { width: calc(var(--share) * 3 - 2px); padding: 0 16px 24px; } /* the open width, fixed for the same reason */
}
details summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; margin-top: 8px; font-size: .9rem; font-weight: 600; color: var(--white);
}
details summary::-webkit-details-marker { display: none; }
details summary:active { opacity: .65; }
/* Height animates with the plus icon where supported; elsewhere it opens instantly */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    details::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
    details[open]::details-content { block-size: auto; }
  }
}
details summary .i { color: var(--gold); transition: transform .3s var(--ease); }
details[open] summary .i { transform: rotate(45deg); }
.checks { margin-top: 14px; display: grid; gap: 8px; }
.checks li { position: relative; padding-left: 20px; font-size: .95rem; color: var(--silver); }
.checks li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--gold); }
.unsure { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.unsure p { font-size: 1.1rem; max-width: 60ch; }

/* When to act: each problem opens to the service that fixes it. Hover (mouse) or tap opens one row at a time;
   a gold bar slides down its edge. Closed state lives under .js, so without JS every answer shows. */
.when-list { counter-reset: when; margin-top: 40px; border-top: 1px solid var(--line); }
.when-list li { counter-increment: when; position: relative; border-bottom: 1px solid var(--line); }
.when-list li::after {
  content: ""; position: absolute; left: -14px; top: 18px; bottom: 18px; width: 2px; background: var(--gold);
  transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease);
}
.when-list li.is-open::after { transform: scaleY(1); }
.when-q {
  display: grid; grid-template-columns: 64px 1fr; align-items: baseline; width: 100%; padding: 26px 0;
  appearance: none; background: none; border: 0; margin: 0; color: var(--white); cursor: pointer; text-align: left;
  font: 400 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.5 var(--sans);
}
.when-q::before {
  content: counter(when, decimal-leading-zero); font-family: var(--serif); font-size: 1.2em; color: var(--gold);
  transform-origin: left center; transition: transform .35s var(--ease), color .35s var(--ease);
}
.when-list li.is-open .when-q::before { transform: scale(1.12); color: var(--gold-lt); }
.when-q:focus-visible { outline-offset: -2px; }
.when-q > span { max-width: 58ch; }
.when-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ease); }
.when-a > div { min-height: 0; overflow: hidden; }
.when-a p { padding: 0 0 24px 64px; color: var(--silver); transition: opacity .35s var(--ease) .1s, transform .45s var(--ease) .1s; }
.when-a a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--gold-text); font-weight: 700; text-decoration: none; }
.when-a a .i { transition: transform .25s var(--ease); }
@media (hover: hover) { .when-a a:hover { color: var(--gold-lt); } .when-a a:hover .i { transform: translateX(3px); } }
.js .when-list li:not(.is-open) .when-a { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s var(--ease), visibility 0s .45s; }
.js .when-list li:not(.is-open) .when-a p { opacity: 0; transform: translateY(-6px); transition-delay: 0s; }
@media (min-width: 900px) { .when-q { grid-template-columns: 120px 1fr; } .when-a p { padding-left: 120px; } }

/* How we work: four steps on a line. When the list scrolls in, the gold line draws across (down, on phones)
   and each step's circle fills as the line reaches it. Without JS or with reduced motion it shows complete. */
.steps { --step-bg: var(--navy); position: relative; display: grid; gap: 32px; }
section:nth-of-type(even) .steps { --step-bg: var(--navy-2); } /* match whichever tint the section gets */
.steps::before, .steps::after {
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: var(--line-strong);
}
.steps::after { background: var(--gold); transform-origin: top; transition: transform 1.2s var(--ease); }
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; align-content: start; } /* shorter steps must not stretch their rows */
.step-num {
  position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--gold); background: var(--gold); color: var(--navy); font-family: var(--serif); font-size: 1.4rem;
  box-shadow: 0 0 0 6px var(--step-bg); /* a gap between circle and line */
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.step-tag {
  display: inline-block; padding: 4px 10px; border: 1px solid rgb(var(--gold-rgb) / .45); border-radius: var(--radius);
  font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text);
}
.step h3 { margin: 12px 0 8px; font-size: 1.15rem; }
.step p { color: var(--silver); font-size: .98rem; max-width: 34ch; }
.js .steps:not(.in)::after { transform: scaleY(0); }
.js .steps:not(.in) .step-num { background: var(--step-bg); color: var(--gold); }
.js .steps.in .step:nth-child(2) .step-num { transition-delay: .4s; }
.js .steps.in .step:nth-child(3) .step-num { transition-delay: .8s; }
.js .steps.in .step:nth-child(4) .step-num { transition-delay: 1.2s; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
  .steps::before, .steps::after { left: 12.5%; right: 12.5%; top: 27px; bottom: auto; width: auto; height: 2px; }
  .steps::after { transform-origin: left; }
  .js .steps:not(.in)::after { transform: scaleX(0); }
  .step { grid-template-columns: 1fr; justify-items: center; gap: 22px; }
  .step p { margin-inline: auto; }
}

/* Industries: six rows. They slide in on scroll; the row under the pointer (on touch, the row crossing
   mid-screen, set by main.js) turns gold with a drawn rule while the rest dim. Rows are not links. */
.sectors { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.sectors li {
  position: relative; display: grid; gap: 4px; min-width: 0; padding: 20px 0;
  border-bottom: 1px solid var(--line); transition: opacity .4s var(--ease);
}
.sectors li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.sector-name {
  font-family: var(--serif); font-size: clamp(1.5rem, 1.05rem + 2vw, 2.6rem); line-height: 1.15; color: var(--silver);
  overflow-wrap: break-word; transition: color .4s var(--ease), transform .4s var(--ease);
}
.sector-note { font-size: .9rem; color: var(--muted); transition: color .4s var(--ease); }
@media (min-width: 768px) {
  .sectors li { grid-template-columns: 1fr auto; align-items: baseline; gap: 32px; padding: 26px 0; }
  .sector-note { text-align: right; }
}
.sectors li.is-active .sector-name { color: var(--gold); transform: translateX(12px); }
.sectors li.is-active .sector-note { color: var(--white); }
.sectors li.is-active::after { transform: scaleX(1); }
.sectors:has(.is-active) li:not(.is-active) .sector-name { opacity: .55; }
@media (hover: hover) {
  .sectors li:hover .sector-name { color: var(--gold); transform: translateX(12px); }
  .sectors li:hover .sector-note { color: var(--white); }
  .sectors li:hover::after { transform: scaleX(1); }
  .sectors:hover li:not(:hover) .sector-name { opacity: .55; }
}
.js .sectors.reveal { opacity: 1; transform: none; } /* the rows animate, not the list */
@media (prefers-reduced-motion: no-preference) {
  .js .sectors:not(.in) li { opacity: 0; }
  .js .sectors.in li { animation: row-in .6s var(--ease) backwards; }
  .js .sectors.in li:nth-child(2) { animation-delay: .07s; }
  .js .sectors.in li:nth-child(3) { animation-delay: .14s; }
  .js .sectors.in li:nth-child(4) { animation-delay: .21s; }
  .js .sectors.in li:nth-child(5) { animation-delay: .28s; }
  .js .sectors.in li:nth-child(6) { animation-delay: .35s; }
}
@keyframes row-in { from { opacity: 0; transform: translateX(-20px); } }

/* About */
.about-grid { display: grid; gap: 48px; }
.about-photo { margin: 0; }
.about-photo img { /* the grey studio backdrop dissolves into the page navy, like the hero */
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center;
  transform: scaleX(-1); /* mirrored so he turns towards the text beside him (Gonçalo's request) */
  -webkit-mask-image: radial-gradient(ellipse 70% 72% at 50% 42%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 72% at 50% 42%, #000 55%, transparent 100%);
}
.prose { display: grid; gap: 18px; margin-top: 28px; color: var(--silver); max-width: 65ch; }
.proof { display: grid; gap: 14px; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); }
.proof li { display: flex; gap: 12px; align-items: flex-start; }
.proof .i { color: var(--gold); margin-top: 4px; }
.proof strong { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--gold-lt); margin-right: 4px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 24px; margin: 36px 0 0; }
.facts dt { display: flex; align-items: center; gap: 8px; color: var(--gold-text); font-size: .85rem; font-weight: 600; }
.facts dd { margin: 6px 0 0; font-size: .95rem; }
.about-cta { margin-top: 40px; padding: 28px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 20px; justify-items: start; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
  .about-photo { position: sticky; top: calc(var(--header-h) + 2rem); }
  .proof { grid-template-columns: 1fr 1fr; }
}

/* Career timeline */
.career-grid { display: grid; gap: 40px; }
.timeline { border-left: 1px solid var(--line-strong); }
.role { position: relative; padding: 0 0 48px 28px; }
.role:last-child { padding-bottom: 0; }
.role::before { content: ""; position: absolute; left: -5px; top: 8px; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }
.role-date { font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--gold-text); }
.role h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin-top: 8px; }
.role-co { margin: 6px 0 14px; font-weight: 600; }
.role-co .muted { font-weight: 400; margin-left: 8px; }
.role-list { margin-top: 0; }
.role-list li { max-width: 60ch; } /* long bullets stay readable on wide screens */
.role > p:not(.role-date):not(.role-co) { color: var(--silver); max-width: 65ch; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tags li { font-size: .8125rem; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--silver); }
.tags-lg li { font-size: .88rem; padding: 8px 12px; }
@media (min-width: 900px) {
  .career-grid { grid-template-columns: 4fr 8fr; gap: 72px; }
  .career-head { position: sticky; top: calc(var(--header-h) + 3rem); align-self: start; }
  .role { padding-left: 44px; }
}

/* Career globe (main.js initGlobe): sits under the sticky Career heading, so it stays in view beside the timeline */
.globe { margin: 32px 0 0; width: min(100%, 340px, 44vh); }
.globe[hidden] { display: none; }
.globe-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.globe-label { margin-top: 14px; min-height: 1.5em; text-align: center; font-size: .85rem; font-weight: 600; letter-spacing: .08em; color: var(--gold-text); }
@media (max-width: 899px) { .globe { width: min(80%, 320px); margin-inline: auto; } }

/* Competencies */
.section-title { max-width: 820px; }
/* Four cards. On scroll the gold rule draws and the lines arrive in turn; with a mouse, a gold light
   follows the cursor along the borders. They are not clickable, so nothing lifts or presses. */
.comp-grid { display: grid; gap: 16px; margin-top: 56px; }
.comp { position: relative; padding: 28px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.comp::before { /* the light: a radial gradient at the cursor, masked down to the 1px border */
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), var(--gold), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .4s var(--ease);
}
.comp h3 { position: relative; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; padding-bottom: 14px; margin-bottom: 16px; }
.comp h3::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(.4); transform-origin: left; transition: transform .6s var(--ease);
}
.comp ul { display: grid; gap: 10px; color: var(--silver); }
.comp li { position: relative; padding-left: 20px; } /* same gold dash as the service and career bullets */
.comp li::before { content: ""; position: absolute; left: 0; top: .78em; width: 8px; height: 1px; background: var(--gold); }
@media (hover: hover) {
  .comp-grid:hover .comp::before { opacity: 1; }
  .comp:hover h3::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .comp:not(.in) h3::after { transform: scaleX(0); }
  .js .comp li { transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .js .comp:not(.in) li { opacity: 0; transform: translateY(8px); }
  .js .comp.in li:nth-child(1) { transition-delay: .15s; }
  .js .comp.in li:nth-child(2) { transition-delay: .22s; }
  .js .comp.in li:nth-child(3) { transition-delay: .29s; }
  .js .comp.in li:nth-child(4) { transition-delay: .36s; }
  .js .comp.in li:nth-child(5) { transition-delay: .43s; }
}
@media (prefers-reduced-motion: reduce) { .comp::before { display: none; } }
@media (min-width: 768px) { .comp-grid { grid-template-columns: 1fr 1fr; } .comp { padding: 36px 32px; } }

/* Tech stack: a still row. The one moving strip on the page is the recommendations. */
.stack-strip { margin-top: clamp(64px, 8vw, 104px); border-block: 1px solid var(--line); padding: 26px 20px; }
.stack-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px clamp(28px, 4vw, 56px); max-width: var(--wrap); margin-inline: auto; }
.stack-list li { font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.9rem); color: var(--silver); white-space: nowrap; }
.stack-list li:nth-child(odd) { color: var(--gold); }

/* Education */
.edu-grid { display: grid; gap: 48px; }
.edu-main { display: grid; gap: 14px; align-content: start; }
.edu-main h2 { margin-bottom: 14px; }
.edu-degree { font-family: var(--serif); font-size: 1.6rem; color: var(--gold-lt); }
.edu-degree .todo { font-family: var(--sans); font-size: .8rem; vertical-align: middle; }
.edu-main > p:last-child { color: var(--silver); max-width: 55ch; }
.edu-side h3 { font-size: 1rem; margin-bottom: 4px; }
.edu-side h3 + .langs, .edu-side .cert-group + h3 { margin-top: 32px; }
.edu-count { margin-top: 8px; color: var(--silver); font-size: .95rem; }
.cert-group h4 { margin: 22px 0 0; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--gold-text); }
.cert-group .tags { margin-top: 10px; }
.cert-group .tags-lg li { font-size: .82rem; padding: 6px 10px; } /* 23 tags: denser than the single list was */
.langs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 10px; margin-top: 14px; color: var(--silver); }
@media (min-width: 900px) { .edu-grid { grid-template-columns: 5fr 7fr; gap: 72px; } }

/* Quotes */
/* Without JS or with reduced motion: a static grid. Otherwise main.js adds .is-moving and the cards
   slide in a slow seamless loop, pausing on hover, on press, or with the button. */
.quotes-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.icon-btn {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--silver); border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: transform .1s ease-out, border-color .2s, color .2s;
}
.icon-btn[hidden] { display: none; }
.icon-btn:active { transform: scale(.95); }
.icon-btn:disabled { opacity: .35; cursor: default; }
@media (hover: hover) { .icon-btn:not(:disabled):hover { color: var(--gold-lt); border-color: var(--gold); } }
.quote-marquee { margin-top: 40px; }
.quote-marquee:not(.is-moving) { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.quotes { display: grid; gap: 20px; }
.quote { display: flex; flex-direction: column; margin: 0; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.quote::before { content: "\201C"; display: block; font-family: var(--serif); font-size: 4.5rem; line-height: .7; color: var(--gold); margin-bottom: 8px; }
.quote blockquote { margin: 0 0 24px; font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; }
.quote figcaption { display: grid; gap: 2px; margin-top: auto; font-size: .88rem; color: var(--muted); }
.quote figcaption strong { font-size: 1rem; color: var(--white); }
@media (min-width: 768px) { .quote-marquee:not(.is-moving) { padding-inline: 40px; } }
@media (min-width: 900px) { .quote-marquee:not(.is-moving) .quotes { grid-template-columns: 1fr 1fr; } }
.quote-marquee.is-moving {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
/* gap + equal leading padding make the doubled track exactly two identical halves, so -50% loops seamlessly */
.is-moving .quotes { display: flex; width: max-content; padding-left: 20px; animation: marquee 75s linear infinite; }
.is-moving .quote { flex: none; width: min(82vw, 430px); }
/* :is() lifts these above both rows’ animation shorthands, wherever those sit in the file */
:is(.quote-marquee, .scroller).is-moving:is(.paused, :active, :focus-within) > * { animation-play-state: paused; }
@media (hover: hover) { :is(.quote-marquee, .scroller).is-moving:hover > * { animation-play-state: paused; } }
:is(.quote-marquee, .scroller).is-moving.offscreen > * { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Insights scroller */
/* Without JS or with reduced motion: a row you swipe or scroll. Otherwise main.js adds .is-moving and the
   cards drift left to right (the recommendations go the other way), pausing on hover, press, focus or the button. */
.scroller {
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
  padding: 4px 20px 16px; scrollbar-width: thin; scrollbar-color: var(--gold) transparent;
}
.scroller-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 360px); gap: 16px; width: max-content; }
@media (min-width: 768px) { .scroller:not(.is-moving) { padding-inline: max(40px, calc((100vw - var(--wrap)) / 2 + 40px)); scroll-padding-inline: max(40px, calc((100vw - var(--wrap)) / 2 + 40px)); } }
.scroller.is-moving {
  overflow: hidden; padding-inline: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.is-moving .scroller-track { padding-left: 16px; animation: marquee 90s linear infinite reverse; }
.insights-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 32px; }
.scroller-nav { display: flex; gap: 10px; margin-bottom: clamp(24px, 5vw, 64px); }
/* the row itself stays put; its cards arrive one after another */
.js .scroller.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .scroller:not(.in) .post { opacity: 0; }
  .js .scroller.in .post { animation: post-in .6s var(--ease) backwards; }
  .js .scroller.in .post:nth-child(2) { animation-delay: .07s; }
  .js .scroller.in .post:nth-child(3) { animation-delay: .14s; }
  .js .scroller.in .post:nth-child(4) { animation-delay: .21s; }
  .js .scroller.in .post:nth-child(n+5) { animation-delay: .28s; }
}
@keyframes post-in { from { opacity: 0; transform: translateY(18px); } }
.post {
  position: relative; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start;
  padding: 30px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
/* the whole card is the link, so the hover lift tells the truth */
.post .link-arrow::after { content: ""; position: absolute; inset: 0; }
.post .link-arrow:active { transform: none; }
.post:active { transform: scale(.98); transition-duration: .1s; }
@media (hover: hover) { .post:hover { border-color: rgb(var(--gold-rgb) / .45); transform: translateY(-3px); } }
.post-cat { font-size: .85rem; font-weight: 600; color: var(--gold-text); }
.post h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; margin: 14px 0 12px; }
.post > p:not(.post-cat) { color: var(--silver); font-size: .98rem; }
.post .link-arrow { margin-top: auto; padding-top: 12px; }
.follow { margin-top: 20px; }

/* FAQ */
.faq-wrap { max-width: 900px; }
.faq { margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 8px 0; }
.faq summary { display: flex; justify-content: space-between; width: 100%; gap: 20px; font-size: 1.1rem; margin: 0; padding: 16px 0; }
.faq summary .i { width: 22px; height: 22px; }
.faq details p { padding: 0 0 20px; color: var(--silver); max-width: 62ch; }

/* Contact */
.contact-grid { display: grid; gap: 48px; }
.channels { display: grid; gap: 0; margin-top: 28px; }
.channels li { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--silver); }
.channels .i { color: var(--gold); }
.channels a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; overflow-wrap: anywhere; }
.channels a:hover { color: var(--gold-lt); }
.form { display: grid; gap: 20px; padding: 32px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.field-row { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .9rem; font-weight: 600; color: var(--white); }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 1rem/1.5 var(--sans); color: var(--white);
  background: var(--navy); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 13px 14px;
  transition: border-color .2s;
}
.field textarea { resize: vertical; min-height: 140px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--silver); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / .25); }
.err { display: none; font-size: .85rem; color: var(--error); }
.field.invalid input, .field.invalid textarea { border-color: var(--error); }
.field.invalid .err { display: block; }
.hp { position: absolute; left: -9999px; }
.form-status { font-size: .95rem; min-height: 1.5em; }
.form-status.ok { color: var(--gold-lt); }
.form-status.fail { color: var(--error); }
.form.sending button { opacity: .6; pointer-events: none; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } .form { padding: 40px; } }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } }

/* Footer */
#site-footer { border-top: 1px solid var(--line); background: var(--navy); }
.footer-cta { padding-block: 56px 8px; }
/* Closing banner: a gold panel with grain; the line arrives word by word when it scrolls into view */
.footer-banner {
  position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px;
  min-height: clamp(220px, 26vw, 320px); padding: clamp(28px, 5vw, 64px);
  background: var(--gold); color: var(--navy); border-radius: var(--radius);
}
.footer-banner::before { /* static grain, rasterised once */
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .4;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.footer-banner > * { position: relative; }
.footer-line { font-family: var(--serif); font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); max-width: 20ch; line-height: 1.1; letter-spacing: -0.01em; }
.footer-line .w { display: inline-block; }
.footer-banner .btn { background: var(--navy); color: var(--white); }
.footer-banner .btn:focus-visible { outline-color: var(--navy); }
@media (hover: hover) { .footer-banner .btn:hover { background: var(--surface); } }
@media (prefers-reduced-motion: no-preference) {
  .js .footer-line .w { transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 55ms + .15s); }
  .js .footer-banner:not(.in) .w { opacity: 0; transform: translateY(.5em); }
}
.footer-grid { display: grid; gap: 28px; padding-block: 48px; align-items: center; }
.footer-grid img { width: 120px; }
.footer-grid nav { display: flex; flex-wrap: wrap; gap: 0 28px; }
@media (max-width: 767px) { .footer-grid { padding-bottom: 96px; } } /* keep the last line clear of the floating WhatsApp button */
@media (min-width: 900px) { .footer-grid { grid-template-columns: auto 1fr auto; gap: 56px; } .footer-grid p { text-align: right; } }

/* Phones in landscape: slimmer sticky header so it doesn't eat the short viewport */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --header-h: 3.75rem; }
  .hero-photo img { max-height: 80vh; }
}

/* Floating WhatsApp: official brand look (green #25D366, white glyph), always visible.
   Motion: the ring pulses three times and the glyph nudges twice after load, then it rests. */
.wa-float {
  position: fixed; z-index: 40;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--wa); color: var(--wa-ink); border-radius: 50%;
  box-shadow: 0 8px 24px var(--shadow);
  transition: transform .2s var(--ease), background-color .2s, opacity .25s var(--ease), visibility 0s;
}
.wa-float.is-away { opacity: 0; visibility: hidden; transform: scale(.85); pointer-events: none; transition: transform .2s var(--ease), opacity .2s var(--ease), visibility 0s .2s; }
.wa-float:hover { background: var(--wa-hover); transform: scale(1.06); }
.wa-float:active { transform: scale(.96); }
.wa-glyph { width: 29px; height: 29px; fill: currentColor; }
.wa-float::before, .wa-float::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--wa); opacity: 0; pointer-events: none;
}
@media (min-width: 768px) { .wa-float { right: 28px; bottom: 28px; width: 64px; height: 64px; } .wa-glyph { width: 35px; height: 35px; } }
@media (prefers-reduced-motion: no-preference) {
  .wa-float { animation: wa-in .6s var(--ease) .8s backwards; }
  .wa-float::before { animation: wa-ring 3s ease-out 1.6s 3; }
  .wa-float::after { animation: wa-ring 3s ease-out 2.1s 3; }
  .wa-glyph { animation: wa-nudge 6s ease-in-out 2s 2; }
  .wa-float:hover::before, .wa-float:hover::after, .wa-float:hover .wa-glyph { animation-play-state: paused; }
}
@keyframes wa-in { from { opacity: 0; transform: translateY(20px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes wa-ring { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes wa-nudge {
  0%, 84%, 100% { transform: rotate(0); }
  87% { transform: rotate(-14deg); } 90% { transform: rotate(12deg); }
  93% { transform: rotate(-8deg); } 96% { transform: rotate(4deg); }
}

/* Scroll reveal: only when JS runs and motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
}
/* .stagger: the block stays put and its items rise one after another (order set in main.js as --i).
   Titles inside keep their own slide from the left. */
@media (prefers-reduced-motion: no-preference) {
  .js .stagger.reveal { opacity: 1; transform: none; }
  .js .stagger > :not(h2) { transition: opacity .65s var(--ease), transform .65s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .js .stagger:not(.in) > :not(h2) { opacity: 0; transform: translateY(28px); }
}
/* Section titles: a one-time slide in from the left as their block enters the viewport */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal h2, .js h2.reveal { opacity: 0; transform: translateX(-36px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
  .js .reveal.in h2, .js h2.reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  #site-header, #site-header.scrolled { background: var(--navy); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --line: rgb(199 198 197 / .5); --line-strong: rgb(199 198 197 / .85); --muted: var(--silver); }
  #site-header, #site-header.scrolled { background: var(--navy); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--line-strong); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Phones: shorter page. Career shows the two latest roles until "Show earlier roles"; the competency cards
   show their titles and open on tap (main.js initPhoneFolds). Desktop is unchanged. */
.more-roles { display: none; }
@media (max-width: 899px) {
  .js .timeline:not(.show-all) > .role:nth-child(n+3) { display: none; }
  .js .timeline:not(.show-all) + .more-roles { display: inline-flex; margin-top: 8px; }
  .comp.fold { padding-block: 0; }
  .comp.fold h3 { margin: 0; padding: 0; }
  .comp.fold h3::after { bottom: 14px; }
  .comp-toggle {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; min-height: 64px;
    padding: 20px 0 28px; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer;
  }
  .comp-toggle::after { content: "+"; font-family: var(--sans); font-size: 1.6rem; line-height: 1; color: var(--gold-text); transition: transform .25s var(--ease); }
  .comp.open .comp-toggle::after { transform: rotate(45deg); }
  .comp.fold ul { display: none; }
  .comp.fold.open ul { display: grid; padding-bottom: 24px; }
}