/* H — F's split hero (the only photo) + G's bold stats strip, F's icon cards
   rebuilt so none carries dead space, G's four-ribbon zone map with a Lucide
   .icowell on every pin, and G's centred close. No custom illustrations: icons
   are Lucide; the tubes (lines.js / tube.js) are the only drawn graphics. */
.panelbg{background:color-mix(in oklab, var(--navy-950) 78%, transparent)}

/* hero (F): copy left, one tall rounded photo right, ribbons crossing behind both */
.ahero{padding:calc(var(--pad-band) + 46px) var(--gut) var(--pad-band)}
.ahero .in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:6fr 5fr;
  gap:var(--gap-lg) var(--gap-xl);align-items:start;position:relative;z-index:1}
/* the title is E's: full width, display-xl, tight — the split sits under it */
/* title + copy stack in the left column; the photo spans both rows on the right.
   The title is sized to its column (cqi), capped at display-xl, so its longest
   line ("opportunity.", ~5.1em wide) can never outgrow the column. */
.ahero .htitle{grid-column:1;grid-row:1;container-type:inline-size}
.ahero .hcopy{grid-column:1;grid-row:2}
.ahero .hshot{grid-column:2;grid-row:1/3;align-self:stretch}
.ahero h1{font-size:min(var(--t-display-xl),19.5cqi);line-height:var(--lh-display-tight);
  letter-spacing:var(--ls-display);max-width:10ch;margin-top:var(--gap-md);text-wrap:balance}
.ahero h1 em{font-style:normal;color:var(--coral)}
.ahero .hcopy{padding-top:var(--gap-md);border-top:1px solid var(--ink-hairline)}
.ahero .lede{margin:0;font-size:var(--t-body-lg);color:var(--ink-90);max-width:44ch}
.ahero .meta{display:flex;flex-wrap:wrap;gap:var(--gap-xs);margin:var(--gap-md) 0 0;padding:0;list-style:none}
/* facts, not buttons: icon and words, no pill (DECISIONS.md, "Pressable things have shape") */
.ahero .meta{gap:10px var(--gap-md)}
.ahero .meta li{display:inline-flex;align-items:center;gap:var(--gap-xs);font-size:14px;font-weight:500;color:var(--ink-90)}
.ahero .meta .ico{--ico:16px;color:var(--accent)}
.ahero .actions{margin-top:var(--gap-lg)}
.hshot{position:relative;display:block;overflow:hidden;height:100%;min-height:420px;
  width:100%;margin:0;justify-self:end;border-radius:var(--r-section);background:var(--navy-700);
  box-shadow:inset 0 0 0 1px var(--ink-hairline),var(--sh-lg)}
.hshot img{display:block;width:100%;height:100%;object-fit:cover}
.hshot .cap{position:absolute;left:var(--gap-sm);bottom:var(--gap-sm);display:inline-flex;align-items:center;
  gap:var(--gap-xs);padding:7px 13px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;
  color:var(--ink-90);background:color-mix(in oklab, var(--navy-950) 72%, transparent);
  box-shadow:inset 0 0 0 1px var(--ink-hairline)}
.hshot .cap .ico{--ico:14px}

/* stats (G): one bold inline strip */
.nums{max-width:var(--maxw);margin:0 auto;position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--gap-sm) var(--gap-lg);
  padding:var(--gap-md) 0;border-top:1px solid var(--ink-hairline);border-bottom:1px solid var(--ink-hairline)}
.nums .n{display:inline-flex;align-items:baseline;gap:var(--gap-xs)}
.nums b{font-family:var(--f-display);font-weight:800;letter-spacing:var(--ls-display);
  font-size:var(--t-display-lg);line-height:1;color:var(--cream)}
.nums span{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  font-weight:700;color:var(--accent)}

/* section heads */
.shead{max-width:var(--maxw);margin:0 auto;position:relative;z-index:1}
.shead h2{max-width:20ch}
.shead p:not(.eyebrow){margin-top:var(--gap-md);font-size:var(--t-body-lg);color:var(--ink-90);max-width:56ch}

/* who you'll meet — F's icon cards. Employers (the only card with a chip list)
   takes the full width on top, copy left and sectors right; the three short
   cards sit in one row below at matching heights — no card is stretched. */
.hmeet{max-width:var(--maxw);margin:var(--gap-xl) auto 0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--gap-sm);position:relative;z-index:1}
.gcard{display:grid;grid-template-columns:auto 1fr;gap:var(--gap-md);align-items:start;padding:var(--gap-lg)}
.gcard .icowell .ico{--ico:26px}
.gcard .k{display:block;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  font-weight:700;color:var(--accent);margin-bottom:var(--gap-xs)}
.gcard h3{line-height:1.05}
.gcard p{margin:var(--gap-sm) 0 0;font-size:var(--t-body);color:var(--ink-84);max-width:44ch}
.gcard .sectors{margin:var(--gap-md) 0 0}
.gwide{grid-column:1/-1}
.gwide .gbody{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--gap-md) var(--gap-xl);align-items:center}
.gwide .sectors{margin:0}

/* the zone map (G) — four ribbons, a pin per zone, each pin now carries its icon */
.zhead{max-width:var(--maxw);margin:0 auto;position:relative;z-index:1}
.zhead h2{max-width:18ch}
.zhead p{margin-top:var(--gap-md);font-size:var(--t-body-lg);color:var(--ink-90);max-width:56ch}
.zmap{max-width:var(--maxw);margin:var(--gap-xl) auto 0;position:relative;z-index:1;aspect-ratio:1200/680}
.zmap > svg.ribbons{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.zmap .zpins{list-style:none;margin:0;padding:0}
.zone{position:absolute;left:var(--x);width:24%;transform:translateX(-50%);text-align:center}
.zone.up{bottom:calc(100% - var(--y))}
.zone.down{top:var(--y)}
.zone .mini,.zmap > svg.spine{display:none}
.zone .zid{display:flex;align-items:center;justify-content:center;gap:var(--gap-xs)}
.zone .icowell .ico{--ico:20px}
.zone h3{font-size:var(--t-display-sm);line-height:1;margin-top:var(--gap-xs)}
.zone p{margin:var(--gap-xs) auto 0;font-size:var(--t-body);color:var(--ink-84);max-width:24ch}
.zone .ztag{padding:6px 12px}
/* the pin from label to ribbon */
.zone::after{content:"";position:absolute;left:50%;width:2px;height:var(--gap-md);background:var(--accent);
  border-radius:var(--r-pill)}
.zone.up::after{top:100%}
.zone.down::after{bottom:100%}
.zone.up{padding-bottom:var(--gap-md)}
.zone.down{padding-top:var(--gap-md)}

.ribbons path{transition:stroke-dashoffset 1600ms var(--e-scrub)}
.ribbons .over{opacity:0;transition:opacity var(--d-base) var(--e-enter) 1200ms}
.zmap.on .ribbons .over{opacity:1}

/* close (G) */
.gclose{max-width:var(--maxw-text);margin:0 auto;position:relative;z-index:1;text-align:center}
.gclose h2{max-width:16ch;margin:0 auto}
.gclose p{margin-top:var(--gap-md);font-size:var(--t-body-lg);color:var(--ink-90)}
.gclose .actions{margin-top:var(--gap-lg);justify-content:center}

@media (max-width:1100px){
  .hmeet{grid-template-columns:1fr}
  .gwide .gbody{grid-template-columns:1fr;align-items:start}
}
@media (max-width:1000px){
  .zmap{aspect-ratio:auto}
  .zmap > svg.ribbons{display:none}
  /* one continuous ribbon down the left, coral to violet along its length;
     each zone sits beside its own colour. (Four separate mini tubes read as
     squiggles, not as the brand ribbon.) */
  .zmap .zpins{display:grid;gap:var(--gap-lg);padding-left:calc(var(--spine-w) + var(--gap-md))}
  .zmap{--spine-w:44px}
  .zmap > svg.spine{display:block;position:absolute;left:0;top:0;width:var(--spine-w);height:100%;overflow:visible}
  .zone{position:static;width:auto;transform:none;text-align:left;padding:0 !important;display:block}
  .zone::after{display:none}
  /* use the full width: the 24ch cap is for the desktop pins only; hairlines
     make the stack read as one list beside the spine */
  .zone p{max-width:none;margin-left:0}
  .zone .zid{justify-content:flex-start}
  .zone{padding-bottom:var(--gap-lg) !important;border-bottom:1px solid var(--ink-hairline)}
  .zone:last-child{border-bottom:0;padding-bottom:0 !important}
}
@media (min-width:560px) and (max-width:1000px){
  /* wide phones / tablets: name left, line right, one row per zone */
  .zone > div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--gap-lg);align-items:center}
  .zone .zid{grid-column:1;grid-row:1}
  .zone h3{grid-column:1;grid-row:2}
  .zone p{grid-column:2;grid-row:1/3;margin:0}
}
@media (max-width:900px){
  .ahero .in{grid-template-columns:1fr}
  /* phone/tablet: title, then the photo, then copy + CTAs */
  .ahero .htitle,.ahero .hcopy,.ahero .hshot{grid-column:1}
  .ahero .hshot{grid-row:2;height:auto;min-height:0;aspect-ratio:4/3}
  .ahero .hcopy{grid-row:3}
}
@media (max-width:640px){
  /* keep the icon beside the copy — stacking it above made four very tall cards */
  .gcard{grid-template-columns:auto 1fr;gap:var(--gap-sm);padding:var(--gap-md)}
  .gcard .icowell{width:40px;height:40px}
  .gcard .icowell .ico{--ico:20px}
  /* phone: the title fills its column instead of sitting at the token floor (44px) */
  .ahero h1{font-size:19.5cqi}
  .nums{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-md) var(--gap-sm)}
  .nums .n{flex-direction:column;align-items:flex-start;gap:4px}
  .nums b{font-size:clamp(30px,10vw,40px)}
}
@media (max-width:620px){
  /* two short labels fit side by side — base.css stacks .actions here */
  .ahero .actions,.gclose .actions{flex-direction:row;gap:var(--gap-xs)}
  .ahero .actions .pill,.gclose .actions .pill{flex:1 1 0;min-width:0;padding-left:12px;padding-right:12px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .ribbons path,.ribbons .over{transition:none}
}