/* ============================================================
   WannaBeee — landing page
   Palette sampled from logo.jpeg. Contrast ratios verified:
     ink  #393536 on white ........ 12.09:1  AA/AAA
     mute #6B6664 on white .........  5.66:1  AA
     orange #F68714 on white .......  2.50:1  ← GRAPHIC ONLY, never text
     orange #F68714 on ink .........  4.83:1  AA  (safe as text on charcoal)
     orange-ink #B1610E on white ...  4.58:1  AA  (orange text on white)
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --paper:      #FFFFFF;
  --paper-warm: #FAF6F1;
  --paper-line: #E7E2DC;

  --ink:        #393536;   /* brand charcoal, straight off the logo */
  --ink-deep:   #201E1E;
  --ink-mute:   #6B6664;

  --orange:     #F68714;   /* brand orange, straight off the logo */
  --orange-ink: #B1610E;   /* AA-safe orange for text on white */
  --orange-wash:#FDF0E2;

  --wa:         #25D366;

  --header-h:   76px;
  --pad:        clamp(20px, 5vw, 64px);
  --maxw:       1280px;
  --gut:        max(var(--pad), (100vw - var(--maxw)) / 2);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--header-h); }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,p,figure,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }

/* keyboard focus — visible everywhere */
:focus-visible{ outline:3px solid var(--orange-ink); outline-offset:3px; border-radius:2px; }

.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{
  position:absolute; left:16px; top:-60px; z-index:200;
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:0 0 6px 6px;
  transition:top .2s var(--ease);
}
.skip:focus{ top:0; }

/* ---------- type ---------- */
.h2{
  font-family:var(--display); font-optical-sizing:auto;
  font-weight:600; font-size:clamp(30px, 4.1vw, 54px); line-height:1.05;
  letter-spacing:-.02em; text-wrap:balance;
}
.h2 em, .hero__h1 em, .purpose__q em{ font-style:italic; font-weight:500; }
.h2--light{ color:#fff; }

.tag{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange-ink); margin-bottom:14px;
}
.tag--light{ color:var(--orange); }

.eyebrow{
  display:flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute);
}
.dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 26px; border-radius:999px;
  font-size:15px; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.btn--orange{ background:var(--orange); color:var(--ink-deep); }
.btn--orange:hover{ background:#E07806; transform:translateY(-2px); }
.btn--ink{ background:var(--ink); color:#fff; }
.btn--ink:hover{ background:var(--ink-deep); transform:translateY(-2px); }
.btn--ghost{ border:1.5px solid currentColor; }
.btn--ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-2px); }

.lnk{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:15px; color:var(--orange-ink); text-decoration:none;
  border-bottom:1.5px solid var(--orange); padding-bottom:3px;
  transition:gap .18s var(--ease);
}
.lnk svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; }
.lnk:hover{ gap:13px; }
.lnk--sm{ font-size:14px; }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:sticky; top:0; z-index:90; height:var(--header-h);
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--paper-line);
}
.hdr__in{
  height:100%; padding-inline:var(--gut);
  display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.brand__mark{ width:38px; height:38px; }
.brand__word{ width:auto; height:19px; }

.nav{ display:flex; gap:30px; margin-left:auto; }
.nav a{
  position:relative; font-size:14.5px; font-weight:500; text-decoration:none;
  color:var(--ink-mute); padding:6px 0; transition:color .18s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after, .nav a[aria-current="true"]::after{ transform:scaleX(1); }
.nav a[aria-current="true"]{ color:var(--ink); font-weight:600; }

.hdr__cta{ min-height:42px; padding:0 20px; font-size:14px; flex:none; }
.burger{ display:none; padding:8px; margin-left:auto; }
.burger svg{ width:26px; height:26px; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; }

/* ============================================================
   1 · HERO — split: type panel | portrait bleeding to the right edge
   ============================================================ */
.hero{
  display:grid; grid-template-columns:minmax(0,47fr) minmax(0,53fr);
  min-height:calc(100svh - var(--header-h));
}
.hero__text{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:clamp(16px, 2.2vh, 26px);
  padding:clamp(28px,5vh,60px) clamp(32px,4vw,64px) clamp(28px,5vh,60px) var(--gut);
}
/* type block stays optically centred — it lands level with the subject's face
   in the right panel. (Tried eyebrow-pinned-to-top: opened a dead void mid-column.) */
.hero__h1{
  font-family:var(--display); font-optical-sizing:auto; font-weight:600;
  font-size:clamp(40px, 4.9vw, 76px); line-height:.98; letter-spacing:-.032em;
  text-wrap:balance;
}
.hero__h1 em{ color:var(--orange-ink); }
.hero__sub{
  font-size:clamp(16px, 1.25vw, 19.5px); line-height:1.5;
  color:var(--ink-mute); max-width:34ch;
}
.hero__act{ display:flex; flex-wrap:wrap; gap:12px; }
.hero__kick{
  font-family:var(--display); font-style:italic; font-size:16px;
  color:var(--ink-mute); padding-top:2px;
  border-top:1px solid var(--paper-line); width:100%; padding-top:18px; max-width:34ch;
}
.hero__media{ position:relative; overflow:hidden; background:var(--ink-deep); }
/* absolute so the 2:3 portrait can't dictate the grid row height —
   otherwise height:100% falls back to auto and the hero blows past 100vh */
.hero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:52% 28%; }
/* thin brand rule where the panels meet */
.hero__media::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--orange); z-index:2;
}

/* ============================================================
   2 · PURPOSE — full bleed photo, scrim, oversized quote
   ============================================================ */
.purpose{ position:relative; isolation:isolate; padding-block:clamp(84px,13vw,168px); }
.purpose__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 42%; z-index:-2;
}
.purpose::after{ /* scrim — keeps the quote at AA over the photo */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(24,20,18,.90) 0%, rgba(24,20,18,.78) 48%, rgba(24,20,18,.42) 100%);
}
.purpose__in{ padding-inline:var(--gut); max-width:1120px; }
.purpose__q{
  font-family:var(--display); font-optical-sizing:auto; font-weight:500;
  font-size:clamp(26px, 3.5vw, 50px); line-height:1.18; letter-spacing:-.02em;
  color:#fff; text-wrap:balance;
}
.purpose__q em{ color:var(--orange); }
.purpose__by{
  margin-top:26px; font-size:13px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72);
}

/* ============================================================
   3 · OFFER — 2-col numbered index, broken by a full-width photo band
   ============================================================ */
.offer{ padding:clamp(72px,9vw,128px) var(--gut); }
/* NB: measure these in px, not ch — `ch` resolves against the *wrapper's* body
   font, so a 20ch wrapper is ~160px and guillotines a 54px display heading. */
.offer__head{ max-width:min(100%, 620px); margin-bottom:clamp(40px,5vw,64px); }

.idx{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(36px,5vw,80px); }
.idx__i{
  display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:18px;
  padding:26px 0; border-top:1px solid var(--paper-line);
  transition:padding-left .25s var(--ease);
}
.idx__i:hover{ padding-left:10px; }
.idx__n{
  font-family:var(--display); font-weight:600; font-size:15px;
  color:var(--orange-ink); letter-spacing:.04em;
}
.idx__ic{ width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.idx__i:hover .idx__ic{ stroke:var(--orange-ink); }
.idx__i h3{
  font-family:var(--display); font-optical-sizing:auto; font-weight:500;
  font-size:clamp(18px,1.6vw,23px); line-height:1.22; letter-spacing:-.01em;
}
/* the photo band breaks the index in half — magazine contents-page move */
.idx__ph{
  grid-column:1 / -1; margin:clamp(30px,4vw,52px) 0 clamp(18px,2.4vw,30px);
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:20px;
}
.idx__ph img{
  grid-column:1 / -1; width:100%; aspect-ratio:21/8; object-fit:cover; object-position:center 40%;
}
.idx__ph figcaption{
  grid-column:1 / -1; font-size:13.5px; color:var(--ink-mute);
  padding-top:12px; border-top:1px solid var(--paper-line);
}

/* ============================================================
   4 · OPPORTUNITIES — bleed KL photo behind a floating white table card
   ============================================================ */
.opps{ position:relative; isolation:isolate; padding:clamp(72px,9vw,120px) var(--gut) clamp(72px,9vw,120px); }
.opps__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 62%; z-index:-2;
}
.opps::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(24,20,18,.74) 0%, rgba(24,20,18,.55) 40%, rgba(24,20,18,.68) 100%);
}
.opps__head{ max-width:min(100%, 660px); margin-bottom:clamp(28px,3.4vw,44px); }
.opps__head .h2{ color:#fff; }
.opps__head .h2 em{ color:var(--orange); }

.opps__card{
  background:var(--paper); padding:clamp(20px,2.6vw,38px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.5);
}
.listing__cap{
  caption-side:top; text-align:left; font-size:13.5px; color:var(--ink-mute);
  padding-bottom:20px; max-width:66ch;
}
.listing thead th{
  text-align:left; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute); padding:0 14px 12px 0; border-bottom:1.5px solid var(--ink);
}
.listing tbody tr{ border-bottom:1px solid var(--paper-line); transition:background-color .18s var(--ease); }
.listing tbody tr:hover{ background:var(--orange-wash); }
.listing tbody th, .listing tbody td{ text-align:left; padding:18px 14px 18px 0; font-size:15px; font-weight:400; color:var(--ink-mute); vertical-align:middle; }
.listing tbody th{
  font-family:var(--display); font-optical-sizing:auto; font-weight:600;
  font-size:clamp(17px,1.4vw,20px); color:var(--ink); letter-spacing:-.01em; padding-right:28px;
}
.listing__go{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:13.5px; font-weight:600; color:var(--orange-ink); text-decoration:none;
  transition:gap .18s var(--ease);
}
.listing__go svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.4; }
.listing__go:hover{ gap:12px; }
.listing td:last-child{ text-align:right; padding-right:0; }
.listing th:last-child{ padding-right:0; }

/* ============================================================
   5 · PROFILES — head block + full-bleed horizontal snap rail
   ============================================================ */
.prof{ padding:clamp(72px,9vw,128px) 0; background:var(--paper-warm); overflow:hidden; }
.prof__head{
  padding-inline:var(--gut); margin-bottom:clamp(34px,4vw,52px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.prof__note{ font-size:14.5px; color:var(--ink-mute); max-width:32ch; }
.prof__note a{ color:var(--orange-ink); font-weight:600; text-underline-offset:3px; }

.rail{
  display:flex; gap:20px; align-items:stretch;
  padding-inline:var(--gut); padding-bottom:16px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  /* without this the mandatory snap aligns item 1 to the scrollport edge and
     scrolls padding-inline clean away — the rail loses its left gutter on load */
  scroll-padding-inline:var(--gut);
  scrollbar-width:thin; scrollbar-color:var(--paper-line) transparent;
}
.rail > *{ scroll-snap-align:start; flex:none; }
.rail__ph{ width:min(64vw, 380px); display:flex; flex-direction:column; }
.rail__ph img{ width:100%; height:230px; object-fit:cover; object-position:center 34%; }
.rail__ph figcaption{
  font-size:13.5px; color:var(--ink-mute); padding-top:12px; margin-top:12px;
  border-top:1px solid var(--paper-line);
}
.pcard{
  width:min(74vw, 288px); background:var(--paper);
  border:1px solid var(--paper-line); border-top:3px solid var(--orange);
  padding:24px 22px 22px; display:flex; flex-direction:column;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.pcard:hover{ transform:translateY(-5px); box-shadow:0 18px 44px -20px rgba(57,53,54,.4); }
.pcard__id{
  font-size:11.5px; font-weight:600; letter-spacing:.14em; color:var(--ink-mute); margin-bottom:14px;
}
.pcard__id span{ color:var(--orange); }
.pcard h3{
  font-family:var(--display); font-optical-sizing:auto; font-weight:600;
  font-size:22px; line-height:1.14; letter-spacing:-.015em; margin-bottom:18px;
}
.pcard__meta{ display:flex; flex-direction:column; gap:9px; margin-bottom:20px; }
.pcard__meta > div{ display:flex; justify-content:space-between; gap:14px; align-items:baseline; }
.pcard__meta dt{ font-size:12.5px; color:var(--ink-mute); flex:none; }
.pcard__meta dd{ font-size:13.5px; font-weight:600; text-align:right; }
.pcard__tag{
  margin-top:auto; align-self:flex-start;
  font-size:12px; font-weight:600; letter-spacing:.05em;
  background:var(--orange-wash); color:var(--orange-ink); padding:6px 12px; border-radius:999px;
}

/* ============================================================
   6 · START — 2×2 photo tiles → modal
   ============================================================ */
.start{ padding:clamp(72px,9vw,128px) var(--gut); }
.start__head{ margin-bottom:clamp(34px,4vw,52px); max-width:min(100%, 640px); }
.start__sub{ margin-top:14px; font-size:16.5px; color:var(--ink-mute); max-width:46ch; }

.tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.tile{
  position:relative; isolation:isolate; display:block; width:100%; overflow:hidden;
  text-align:left; color:#fff; aspect-ratio:16/11;
}
.tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform .5s var(--ease);
}
.tile::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(24,20,18,.18) 0%, rgba(24,20,18,.56) 52%, rgba(24,20,18,.92) 100%);
  transition:background .3s var(--ease);
}
.tile:hover img{ transform:scale(1.055); }
.tile:hover::after{
  background:linear-gradient(180deg, rgba(24,20,18,.36) 0%, rgba(24,20,18,.7) 52%, rgba(24,20,18,.95) 100%);
}
.tile__body{
  position:absolute; inset:auto 0 0 0; padding:clamp(20px,2.4vw,30px);
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
}
.tile__n{
  font-family:var(--display); font-weight:600; font-size:13px;
  color:var(--orange); letter-spacing:.08em; margin-bottom:2px;
}
.tile__t{
  font-family:var(--display); font-optical-sizing:auto; font-weight:600;
  font-size:clamp(20px,2.1vw,29px); line-height:1.1; letter-spacing:-.02em;
}
.tile__d{ font-size:14.5px; color:rgba(255,255,255,.8); }
.tile__go{
  display:inline-flex; align-items:center; gap:7px; margin-top:10px;
  font-size:13.5px; font-weight:600; color:var(--orange);
  transition:gap .18s var(--ease);
}
.tile__go svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.4; }
.tile:hover .tile__go{ gap:12px; }

/* ============================================================
   7 · FOUNDER — warm panel with an offset, overlapping portrait
   ============================================================ */
.fdr{ padding:clamp(72px,9vw,128px) var(--gut) clamp(96px,11vw,150px); }
.fdr__panel{
  position:relative; background:var(--paper-warm);
  display:grid; grid-template-columns:minmax(0,38fr) minmax(0,62fr);
  gap:clamp(28px,4vw,64px); align-items:center;
  padding:clamp(36px,4.5vw,64px);
}
.fdr__ph{ margin:clamp(-40px,-3.4vw,-24px) 0; }
.fdr__ph img{
  width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 18%;
  box-shadow:0 30px 70px -28px rgba(57,53,54,.55);
}
.fdr__body{ display:flex; flex-direction:column; align-items:flex-start; }
.fdr__lede{ margin-top:20px; font-size:clamp(15.5px,1.15vw,17.5px); color:var(--ink-mute); max-width:52ch; }

/* track record — numbers carry the panel, not prose */
.stats{
  display:grid; grid-template-columns:repeat(4,auto); gap:clamp(18px,2.4vw,38px);
  margin:30px 0 28px; width:100%;
}
.stats li{ display:flex; flex-direction:column; gap:5px; }
.stats__n{
  font-family:var(--display); font-optical-sizing:auto; font-weight:600;
  font-size:clamp(26px,2.6vw,36px); line-height:1; letter-spacing:-.03em; color:var(--ink);
}
.stats__n i{ font-style:normal; color:var(--orange-ink); }
.stats__l{ font-size:12.5px; line-height:1.35; color:var(--ink-mute); max-width:15ch; }
.fdr__links{ display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; }
.lnk--quiet{ color:var(--ink-mute); border-bottom-color:var(--paper-line); }
.lnk--quiet:hover{ color:var(--orange-ink); border-bottom-color:var(--orange); }

/* CV timeline — big orange years down the left, hairline rows, marker dots.
   Deliberately not the .listing table shape used in Top Opportunities. */
.cv{ margin-top:clamp(48px,6vw,80px); }
.cv__h{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange-ink); margin-bottom:22px;
}
.cv__list{ border-top:1px solid var(--ink); }
.cv__row{
  display:grid; grid-template-columns:minmax(0,140px) minmax(0,260px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,40px); align-items:baseline;
  padding:22px 0 22px 26px; border-bottom:1px solid var(--paper-line);
  position:relative; transition:background-color .18s var(--ease);
}
.cv__row::before{   /* marker on the spine */
  content:""; position:absolute; left:0; top:31px;
  width:8px; height:8px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--paper-line);
}
.cv__row--now::before{ background:var(--orange); border-color:var(--orange); }
.cv__row:hover{ background:var(--paper-warm); }
.cv__yr{
  font-family:var(--display); font-optical-sizing:auto; font-weight:600;
  font-size:clamp(15px,1.3vw,18px); letter-spacing:-.01em; color:var(--orange-ink);
  white-space:nowrap;
}
.cv__co{
  font-family:var(--display); font-optical-sizing:auto; font-weight:600;
  font-size:clamp(16px,1.35vw,19px); line-height:1.2; letter-spacing:-.015em;
}
.cv__role{ font-size:14px; line-height:1.5; color:var(--ink-mute); }

/* ============================================================
   FOOTER
   ============================================================ */
.ft{ background:var(--ink); color:#fff; padding:clamp(56px,7vw,88px) var(--gut) 0; }
.ft__in{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(44px,5vw,72px);
}
.ft__word{ width:180px; height:auto; filter:brightness(0) invert(1); }
.ft__tag{ width:172px; height:auto; margin-top:12px; }
.ft__kick{
  margin-top:24px; font-family:var(--display); font-style:italic;
  font-size:17px; line-height:1.4; color:rgba(255,255,255,.72);
}
.ft__col h2{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); margin-bottom:18px;
}
.ft__soc{ display:flex; flex-direction:column; gap:13px; }
.ft__soc a{
  display:inline-flex; align-items:center; gap:11px;
  font-size:14.5px; color:rgba(255,255,255,.82); text-decoration:none;
  transition:color .18s var(--ease);
}
.ft__soc a:hover{ color:var(--orange); }
.si{ width:17px; height:17px; fill:currentColor; flex:none; }
.ft address{ font-style:normal; font-size:14.5px; line-height:1.75; color:rgba(255,255,255,.82); }
/* .58 not .5 — at 50% white over the footer charcoal this lands on 4.32:1 and
   misses AA body. Minimum passing alpha here is .516; .58 gives 5.24:1. */
.ft__est{ margin-top:14px; font-size:12.5px; color:rgba(255,255,255,.58); }
.ft__lnks{ display:flex; flex-direction:column; gap:11px; align-items:flex-start; }
.ft__btn{
  font-size:14.5px; text-align:left; color:rgba(255,255,255,.82); padding:2px 0;
  border-bottom:1px solid transparent; transition:color .18s var(--ease), border-color .18s var(--ease);
}
.ft__btn:hover{ color:var(--orange); border-color:var(--orange); }

.ft__base{
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14); padding-block:24px 28px;
  font-size:13px; color:rgba(255,255,255,.62);   /* 5.74:1 on the footer charcoal */
}
.ft__sig a{ color:var(--orange); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; }
.ft__sig a:hover{ border-color:var(--orange); }

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wa-float{
  position:fixed; right:clamp(16px,2.4vw,28px); bottom:clamp(16px,2.4vw,28px); z-index:80;
  width:58px; height:58px; border-radius:50%; background:var(--wa);
  display:grid; place-items:center; box-shadow:0 10px 30px -6px rgba(37,211,102,.55);
  transition:transform .2s var(--ease);
}
.wa-float svg{ width:29px; height:29px; fill:#fff; position:relative; z-index:1; }
.wa-float:hover{ transform:scale(1.08); }
.wa-float__p{
  position:absolute; inset:0; border-radius:50%; background:var(--wa);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{ 0%{ transform:scale(1); opacity:.55 } 70%,100%{ transform:scale(1.75); opacity:0 } }

/* ============================================================
   MODAL — Google Form
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:clamp(10px,2.4vw,28px); }
.modal[hidden]{ display:none; }
.modal__scrim{ position:absolute; inset:0; background:rgba(24,20,18,.72); backdrop-filter:blur(3px); animation:fade .22s var(--ease); }
.modal__box{
  position:relative; width:min(720px,100%); max-height:min(92svh,900px);
  background:var(--paper); display:flex; flex-direction:column;
  box-shadow:0 40px 90px -24px rgba(0,0,0,.6); animation:rise .26s var(--ease);
}
@keyframes fade{ from{ opacity:0 } }
@keyframes rise{ from{ opacity:0; transform:translateY(16px) } }

.modal__hd{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:22px clamp(18px,2.4vw,28px); border-bottom:1px solid var(--paper-line);
  border-top:4px solid var(--orange);
}
.modal__eyebrow{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-ink); }
.modal__t{ font-family:var(--display); font-optical-sizing:auto; font-weight:600; font-size:clamp(20px,2.2vw,26px); line-height:1.14; letter-spacing:-.02em; margin-top:5px; }
.modal__x{ padding:8px; margin:-8px -6px 0 0; border-radius:50%; flex:none; transition:background-color .18s var(--ease); }
.modal__x svg{ width:21px; height:21px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; }
.modal__x:hover{ background:var(--paper-warm); }

.modal__body{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.modal__hint{
  font-size:13.5px; color:var(--ink-mute); background:var(--orange-wash);
  padding:11px clamp(18px,2.4vw,28px); border-bottom:1px solid var(--paper-line);
}
.modal__hint strong{ color:var(--orange-ink); }
.modal__frame{ flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; background:#fff; }
.modal__frame iframe{ width:100%; height:100%; min-height:460px; border:0; display:block; }
.modal__fallback{ padding:28px; text-align:center; }

.modal__ft{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px clamp(18px,2.4vw,28px); border-top:1px solid var(--paper-line); background:var(--paper-warm);
  font-size:13.5px; color:var(--ink-mute);
}
body.is-locked{ overflow:hidden; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-rv]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-rv].in{ opacity:1; transform:none; }

/* ============================================================
   TABLET  ≤1024px
   ============================================================ */
@media (max-width:1024px){
  .nav{ gap:22px; }
  .nav a{ font-size:13.5px; }
  .hero{ grid-template-columns:minmax(0,52fr) minmax(0,48fr); }
  .idx{ column-gap:36px; }
  .fdr__panel{ grid-template-columns:minmax(0,42fr) minmax(0,58fr); }
  .stats{ grid-template-columns:repeat(2,auto); gap:20px 28px; }
  .cv__row{ grid-template-columns:minmax(0,110px) minmax(0,1fr); }
  .cv__role{ grid-column:2; }
  .ft__in{ grid-template-columns:1fr 1fr; row-gap:44px; }
}

/* ============================================================
   MOBILE  ≤767px
   ============================================================ */
@media (max-width:767px){
  :root{ --header-h:64px; }
  body{ font-size:16px; }

  /* nav collapses into a sheet under the header */
  .nav{
    position:fixed; left:0; right:0; top:var(--header-h);
    flex-direction:column; gap:0; margin:0;
    background:var(--paper); border-bottom:1px solid var(--paper-line);
    padding:8px var(--pad) 20px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .22s var(--ease), transform .22s var(--ease);
    box-shadow:0 24px 40px -24px rgba(0,0,0,.35);
  }
  .nav.open{ opacity:1; transform:none; pointer-events:auto; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--paper-line); font-size:16px; }
  .nav a::after{ display:none; }
  .nav a[aria-current="true"]{ color:var(--orange-ink); }
  .burger{ display:block; }
  .hdr__cta{ display:none; }
  .brand__mark{ width:34px; height:34px; }
  .brand__word{ height:17px; }

  /* hero → photo behind, scrim over, type on top (still one full viewport) */
  .hero{ display:block; position:relative; isolation:isolate; }
  .hero__media{ position:absolute; inset:0; z-index:-2; }
  .hero__media::before{ display:none; }
  .hero__media img{ object-position:56% 22%; }
  .hero::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(24,20,18,.62) 0%, rgba(24,20,18,.80) 55%, rgba(24,20,18,.93) 100%);
  }
  .hero__text{
    min-height:calc(100svh - var(--header-h)); justify-content:flex-end;
    padding:40px var(--pad) 44px; gap:15px;
  }
  .hero__text .eyebrow{ color:rgba(255,255,255,.82); }
  .hero__h1{ color:#fff; font-size:clamp(36px,10.5vw,52px); }
  .hero__h1 em{ color:var(--orange); }
  .hero__sub{ color:rgba(255,255,255,.86); }
  .hero__kick{ color:rgba(255,255,255,.7); border-top-color:rgba(255,255,255,.22); padding-top:15px; }
  .btn--ghost{ color:#fff; }
  .btn--ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }

  .idx{ grid-template-columns:1fr; }
  .idx__ph img{ aspect-ratio:16/10; }
  .idx__i{ gap:14px; padding:20px 0; }

  /* listing table → stacked cards, no horizontal scroll */
  .opps__card{ padding:18px 16px; }
  .listing thead{ display:none; }
  .listing tbody tr{ display:block; padding:16px 0; }
  .listing tbody th{ display:block; padding:0 0 10px; font-size:19px; }
  .listing tbody td{ display:inline-block; padding:0 14px 0 0; font-size:13.5px; }
  .listing tbody td:last-child{ display:block; text-align:left; padding:12px 0 0; }

  .tiles{ grid-template-columns:1fr; gap:14px; }
  .tile{ aspect-ratio:5/4; }

  .fdr{ padding-bottom:clamp(64px,12vw,90px); }
  .fdr__panel{ grid-template-columns:1fr; padding:0 0 30px; gap:24px; }
  .fdr__ph{ margin:0; }
  .fdr__ph img{ aspect-ratio:4/3; object-position:center 16%; }
  .fdr__body{ padding-inline:22px; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:20px 16px; margin:26px 0 24px; }
  .stats__l{ max-width:none; }
  /* CV stacks: year + company on one line, the roles beneath */
  .cv__row{ grid-template-columns:1fr; gap:5px; padding:18px 0 18px 22px; }
  .cv__row::before{ top:24px; }
  .cv__yr{ font-size:13px; letter-spacing:.02em; }
  .cv__co{ font-size:18px; }
  .cv__role{ grid-column:1; font-size:13.5px; }

  .prof__head{ flex-direction:column; align-items:flex-start; gap:16px; }
  .ft__in{ grid-template-columns:1fr; row-gap:38px; }
  .ft__base{ flex-direction:column; align-items:flex-start; gap:8px; }
  .wa-float{ width:52px; height:52px; }
  .wa-float svg{ width:26px; height:26px; }
  .modal__box{ max-height:94svh; width:100%; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-rv]{ opacity:1; transform:none; }
  .wa-float__p{ display:none; }
  .tile:hover img{ transform:none; }
}