/* =============================================================================
   ABOUT US — v1
   A second page in the valley system, not a second system. Every token, the type
   ramp, the nav/footer/button/pill components and the .aura ring are lifted
   VERBATIM from valley-lander-src.html. Nothing here is a new design decision
   except the founder card, which is a frame for supplied artwork.

   THE FOUNDER CARD. The supplied PNG already IS a card: a green rounded plate
   with the subject cut out and their head breaking above its top edge. So it
   gets no container chrome — wrapping it in another card would double-frame it.
   The artwork was cropped to its measured alpha bounds (x 1046 w 2899, y 960
   h 3917 of the 5000x6000 original), which is why --plate-top below is an exact
   number: 13.79% is where the green plate starts inside the cropped image. The
   .aura ring is pinned to THAT box, 2px proud, so the light traces the card and
   passes behind the head. Re-crop the source and this number must change.

   FONTS ARE TRIAL CUTS — same ship-blocker as the lander.
   ============================================================================= */
@font-face{font-family:'Greed';font-weight:700;font-style:normal;src:url("fonts/greed-Bold.woff2") format("woff2");font-display:block}
@font-face{font-family:'Greed';font-weight:600;font-style:normal;src:url("fonts/greed-SemiBold.woff2") format("woff2");font-display:block}
@font-face{font-family:'Saans';font-weight:100 900;font-style:normal;src:url("fonts/saans-VF.woff2") format("woff2");font-display:block}

/* ---- tokens: verbatim from the lander ---- */
:root{
  --bg:#0B0E09; --bg-deep:#070906;
  --ink:#F2F2E9; --ink-2:#B7BCAC; --ink-3:#7E8476;
  --accent:#AAF988; --accent-hover:#BDFBA0; --accent-ink:#15200E;
  --p-pink:#F895C5; --p-purple:#B495F8; --p-cyan:#98EDFE; --p-green:#CEFC97;
  --line:rgba(244,243,236,.12); --line-soft:rgba(244,243,236,.07);
  --display:'Greed',ui-sans-serif,system-ui,sans-serif;
  --body:'Saans',ui-sans-serif,system-ui,sans-serif;
  --container:1280px; --pad:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.2,.6,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:400;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(170,249,136,.25)}
img{max-width:100%}
a{color:inherit}

.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ NAV — floating glass pill (CANONICAL — keep these three pages identical) ====
   One component, every page. It is a FIXED-WIDTH GRID, not a shrink-to-fit flex row: that is
   what stops the pill resizing and the wordmark sliding as you click between pages. Before
   28 Sep the lander was grid-620px with the mark centred while company/about were flex, so
   navigating moved the mark ~170px and changed the pill width by ~90px.
   Three slots, always all three even when a page fills only two — the empty 1fr is what holds
   three-slot (26 Oct Dylan): grid `1fr auto 1fr` — .nav-left wordmark LEFT, 'How it works'
   CENTRE (direct <a>, naturally centred by the 1fr flanks), .nav-right CTA RIGHT.
   Wordmark hrefs home.
   Verify with `node qa/navcheck.mjs <base-url>` — it fails if the pages disagree. ======== */
nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;
  width:min(720px,calc(100% - 40px));padding:7px 10px;border-radius:999px;
  background:linear-gradient(155deg,rgba(244,243,236,.09),rgba(244,243,236,.03) 42%,rgba(244,243,236,.012));
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(244,243,236,.15);
  box-shadow:0 24px 48px -32px rgba(0,0,0,.55),inset 0 1px 0 rgba(244,243,236,.14)}
.nav-left{justify-self:start;display:inline-flex;align-items:center;gap:14px}
.nav-wordmark{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;
  color:inherit;text-decoration:none}
.nav-right{justify-self:end;display:inline-flex;align-items:center;gap:2px}
.nav-mascot{height:26px;width:auto;display:block}
.foot-mascot{height:36px;width:auto;display:block}
.nav-link{font-size:14px;color:var(--ink-2);text-decoration:none;padding:8px 12px;border-radius:999px;transition:color .2s;white-space:nowrap}
.nav-link:hover{color:var(--ink)}
.nav-link[aria-current="page"]{color:var(--ink)}
.nav-cta{font-size:14px;font-weight:500;color:var(--accent-ink);background:var(--accent);
  text-decoration:none;padding:9px 18px;border-radius:999px;transition:background .2s,box-shadow .2s}
.nav-cta:hover{background:var(--accent-hover);box-shadow:0 0 24px rgba(170,249,136,.25)}

/* ---- shared: verbatim ---- */
.container{max-width:var(--container);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
h1,h2,h3{text-wrap:balance}
.h1{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(38px,5vw,68px);line-height:.98;letter-spacing:-.015em;max-width:14ch;margin:0 auto}
.hero-sub{margin:26px auto 0;max-width:34em;color:var(--ink-2);font-size:clamp(16px,1.9vw,19px);line-height:1.55}
.btn{display:inline-block;font-family:var(--body);font-weight:500;font-size:16px;color:var(--accent-ink);
  background:var(--accent);border:none;border-radius:999px;padding:15px 30px;text-decoration:none;cursor:pointer;
  transition:background .2s,box-shadow .2s,transform .1s}
.btn:hover{background:var(--accent-hover);box-shadow:0 0 24px rgba(170,249,136,.25)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.nav-cta:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- aura: verbatim from the lander (25 Sep) ---- */
@property --aura{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes aura-spin{to{--aura:360deg}}
.aura{position:relative}
.aura::before,.aura::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;padding:var(--aura-w,1px);
  background:conic-gradient(from var(--aura) at 50% 50%,
    transparent 0turn,
    transparent calc(1turn - var(--aura-beam,.34turn)),
    rgba(248,149,197,0)  calc(1turn - var(--aura-beam,.34turn)),
    var(--p-pink)        calc(1turn - var(--aura-beam,.34turn) * .72),
    var(--p-purple)      calc(1turn - var(--aura-beam,.34turn) * .50),
    var(--p-cyan)        calc(1turn - var(--aura-beam,.34turn) * .28),
    var(--p-green)       calc(1turn - var(--aura-beam,.34turn) * .10),
    rgba(206,252,151,0)  1turn);
  -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,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:var(--aura-op,.85);
  animation:aura-spin var(--aura-dur,7.5s) linear infinite var(--aura-delay,0s)}
.aura::after{inset:-1px;padding:calc(var(--aura-w,1px) + 2px);
  filter:blur(6px);opacity:calc(var(--aura-op,.85) * .6)}
@media (prefers-reduced-motion:reduce){
  .aura::before,.aura::after{animation:none;--aura:212deg}
}

/* ---- reveals: verbatim ---- */
.rv{opacity:1;transform:none}
.motion-ready .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.motion-ready .rv.in{opacity:1;transform:none}

/* ============ ABOUT HERO ============
   The lander's sky, minus the stars and the product composition. Same horizon
   light, lower and softer, so this reads as the same valley at a quieter hour. */
/* Bottom padding is deliberately larger than the hero needs on its own: the founder grid is
   pulled up ~240px into it so the crest crosses the portraits, and this is the sky that lift
   eats. Shrink it and the heads climb into "pointed it at your pipeline". */
.about-hero{position:relative;overflow:hidden;background:#05060A;
  padding:clamp(150px,20vh,210px) 0 clamp(200px,28vw,380px);text-align:center}
.about-hero .sky{position:absolute;inset:0;
  background:
    radial-gradient(78% 40% at 50% 100%, rgba(206,252,151,.20) 0%, rgba(152,237,254,.11) 40%, transparent 72%),
    radial-gradient(120% 62% at 50% 108%, rgba(152,237,254,.09) 0%, rgba(180,149,248,.10) 38%, rgba(248,149,197,.06) 60%, transparent 78%),
    linear-gradient(180deg,#04050A 0%,#060810 34%,#0B0D14 62%,#0E1016 84%,#080A07 100%)}
.about-hero .container{position:relative;z-index:2}

/* the ridge the team stands in front of — fore path lifted from the lander */
/* height is CONSTRAINED, not auto: at full width the source viewBox renders ~330px
   tall and its crest climbs into the body copy. preserveAspectRatio="none" lets it
   squash, which is how the lander scales the same paths. */
.ridge{position:absolute;left:0;right:0;bottom:-1px;z-index:1;pointer-events:none}
.ridge svg{display:block;width:100%;height:clamp(120px,13vw,200px)}

/* ============ FOUNDERS ============ */
/* flow-root is load-bearing. The grid's negative margin-top has nothing between it and this
   section's top edge, so without a BFC it COLLAPSES out and drags the section — and its opaque
   background — up with the cards, cutting a hard horizontal line across the ridge and hiding
   the wave the cards are supposed to be standing in. With the BFC the section box stays put at
   the hero's bottom edge, the grid alone rises out of it, and the ridge stays visible between
   the portraits. The seam is invisible because --bg-deep and the ridge fill are both #070906. */
.founders{position:relative;display:flow-root;background:var(--bg-deep);padding:0 0 clamp(96px,12vw,140px)}
/* the colour source the green cards sit in. No blur filter — blurring a box this
   large washes the hue out to grey and costs a compositor pass for nothing; a
   radial is already smooth. */
.founders::before{content:"";position:absolute;left:50%;top:-6%;transform:translateX(-50%);
  width:min(1240px,100%);height:clamp(380px,46vw,600px);pointer-events:none;
  background:radial-gradient(50% 56% at 50% 46%, rgba(206,252,151,.20) 0%, rgba(152,237,254,.11) 40%, rgba(180,149,248,.08) 64%, transparent 80%)}
.founders .container{position:relative;z-index:1}

/* The team straddles the skyline: the ridge crest is meant to cross each portrait at roughly
   its own half-height, heads in the sky, plates in the dark. That lift is two terms, and both
   have to keep their own scaling or the registration drifts as the viewport moves:
     -15.7%  = half a card. A PERCENTAGE margin resolves against the container's width, and
               card height is a fixed ratio of that width, so this half stays exactly half.
     the clamp = the crest's own height above the hero's bottom edge. The ridge is 13vw tall
               and the crest averages ~40% up it, so this term is vw — but it carries the SAME
               120px/200px bounds the ridge does. Leave it as a bare 5.2vw and past ~1540px the
               ridge stops growing while the term does not: measured 0.60 of the way down the
               card at 1920 instead of 0.50.
   Clearance to the hero copy is bought back by .about-hero's bottom padding — see there. */
.founder-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.2vw,26px);
  margin-top:calc(-15.7% - clamp(48px,5.2vw,75px))}
.fcard{margin:0}
.fcard-media{position:relative}
/* the green plate inside the artwork starts at exactly 13.79% of the cropped
   image height; the ring sits 2px proud of it so it reads round the card edge
   and passes BEHIND the head that breaks the top. */
.fcard-plate{position:absolute;left:-2px;right:-2px;bottom:-2px;top:calc(13.79% - 2px);
  border-radius:17px;z-index:0}
.fcard-media img{display:block;width:100%;height:auto;position:relative;z-index:1;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.5))}
/* Name and role read as ONE line — "Jack · Co-founded Wayflyer in 2019." — not a name with a
   caption stacked underneath. Both are inline so the role sits beside the name and wraps under
   it only when it runs out of room, which at four-up it always will; the separator is what keeps
   the two readable as a single run. */
.fcard-cap{margin-top:18px;text-align:center;font-size:13px;line-height:1.5;
  max-width:26ch;margin-left:auto;margin-right:auto;text-wrap:pretty}
.fcard-name{font-family:var(--display);font-weight:600;
  font-size:clamp(15px,1.5vw,17px);letter-spacing:-.005em;color:var(--ink)}
.fcard-sep{color:var(--ink-3);font-weight:500;padding:0 .18em}
.fcard-role{color:var(--ink-3)}

.founders-cta{margin-top:clamp(56px,7vw,80px);display:flex;flex-direction:column;
  align-items:center;gap:15px;text-align:center}

/* ---- footer: verbatim ---- */
footer{background:var(--bg-deep);padding:56px 0 44px}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot-links{display:flex;gap:26px}
.foot-links a{font-size:14px;color:var(--ink-3);text-decoration:none}
.foot-links a:hover{color:var(--ink)}
/* Bottom rule: legal tag left, social out-links right. Same component on every page. */
.foot-tag{margin-top:34px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--body);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.foot-social{display:flex;align-items:center;gap:6px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:999px;color:var(--ink-3);transition:color .2s,background .2s}
.foot-social a:hover{color:var(--ink);background:rgba(244,243,236,.06)}
.foot-social svg{width:18px;height:18px;display:block}

@media (max-width:920px){
  .nav-link{display:none}
  /* Two-up, so a card is ~half the container wide and ~540px tall at this breakpoint — more
     than twice its four-up height. Carrying the four-up ratio across would need ~430px of hero
     padding just to keep the heads off the copy, which is an absurd hero on a small screen.
     Cross the portraits at their upper quarter instead: the heads still clear the skyline,
     which is the whole read, at a lift the layout can actually afford. */
  .founder-grid{grid-template-columns:repeat(2,1fr);gap:clamp(16px,4vw,28px);
    margin-top:calc(-16.3% - clamp(48px,5.2vw,75px))}
  .about-hero{padding-top:clamp(128px,18vh,170px)}
}
@media (max-width:540px){
  /* nav shrink: verbatim from the lander's own 540px block — without it the
     wordmark and the CTA collide inside the pill. */
  /* Phone: the links are hidden, so a symmetric 1fr auto 1fr reserves an empty left column
     and squeezes the CTA (measured 95px against a 111px natural width — the label wrapped).
     Collapse the empty cell instead and let the CTA keep its own size. */
  nav{width:calc(100% - 20px);padding:6px 8px;gap:2px;grid-template-columns:auto 1fr auto}
  .nav-wordmark{font-size:15px;gap:6px}
  .nav-cta{font-size:13px;padding:9px 13px}
  .nav-mascot{height:22px}
  .founder-grid{gap:16px}
  .fcard-cap{margin-top:13px}
}
@media (prefers-reduced-motion:reduce){
  .motion-ready .rv{opacity:1;transform:none;transition:none}
}