/* Obligente — "the paperwork already did itself."
   A warm sunlit working office, not a control room. People-led, big and airy.
   Geist 400/500 only; emphasis is scale and space, never weight.

   Palette is one warm family end to end: paper ground, clay accent, amber CTA,
   olive for verified. The cool blue/navy of the earlier direction is gone —
   every ground now carries daylight rather than screen light. No pure #FFF or
   #000 anywhere (G3); every pair listed here clears WCAG AA on its own ground.
   Motion ceiling: CSS; hidden states armed only under html.js so no-JS renders
   the finished page. */

@font-face{font-family:Geist;src:url(./fonts/geist.woff2)format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(./fonts/geist-mono.woff2)format("woff2");font-weight:400;font-display:swap}

/* Core --role-* names (ground, ink, line, accent, CTA pair) come from the
   vendored kit — house/tokens/*.css, linked before this sheet in index.html.
   The values are byte-identical to obligente's pre-house palette: the house
   ground family was sourced FROM this repo (kit brand.core.css header).
   This block holds only what obligente owns: the rutter-room --role-run-*
   family and the Geist font override (fonts unchanged — declared in the ADR;
   house font unification is PH-4's call, not a vendor step's). */
:root{
  --font-body:Geist,ui-sans-serif,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --role-run-tint:#F7E3D3;   /* clay tint — soft ground for dots, chips, numerals */
  --role-run-deep:#2B211A;   /* warm dark ground — espresso, never blue-black */
  --role-run-deep-2:#4A3626; /* CTA band gradient end */
  --role-run-verified:#5C7A3C;        /* olive — "verified", warm rather than neon */
  --role-run-verified-bright:#A8CC7A; /* the same signal, on dark grounds */
  --role-run-muted-inv:#C9B49E;
  --role-run-card:#FFFCF6;
  --role-run-pad:clamp(20px,5.5vw,88px);
  /* chart-paper dot grid (carrier 2) */
  --role-run-dots:radial-gradient(rgba(36,29,22,.07) 1px,transparent 1px);
  /* hero sky band + ambient glow */
  --role-run-hero-1:#FDF6EC; --role-run-hero-2:#F6DFC4; --role-run-hero-3:#EDC79B;
  --role-run-glow:rgba(255,238,214,.55);
  /* shadows — one warm umber family at five weights */
  --role-run-shadow-deep:rgba(70,48,30,.24); --role-run-shadow-lift:rgba(70,48,30,.22);
  --role-run-shadow-mid:rgba(70,48,30,.15); --role-run-shadow-hover:rgba(70,48,30,.13);
  --role-run-shadow-faint:rgba(70,48,30,.07); --role-run-shadow-cta:rgba(240,169,60,.45);
  /* departures board on the dark ground */
  --role-run-board-track:rgba(250,244,234,.22); --role-run-board-line:rgba(250,244,234,.16);
  --role-run-board-rule:rgba(250,244,234,.1); --role-run-board-dot:rgba(250,244,234,.06);
  --role-run-board-well:rgba(20,14,10,.34); --role-run-board-head:rgba(20,14,10,.5);
  --role-run-flip-tint:rgba(168,204,122,.15); --role-run-flip-line:rgba(168,204,122,.42)
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--role-ground);color:var(--role-ink);font-family:var(--font-body);
  font-weight:400;font-size:17.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--role-accent);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--font-mono)}

.skip{position:absolute;left:-9999px;top:0;background:var(--role-run-cta);color:var(--role-ink);padding:12px 18px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- type ---------- */
.d1{font-size:clamp(44px,7.5vw,88px);font-weight:500;letter-spacing:-.02em;line-height:1.05;margin:0 0 24px}
.d2{font-size:clamp(30px,4.4vw,54px);font-weight:500;letter-spacing:-.02em;line-height:1.08;margin:0 0 18px}
.d2--inv{color:var(--role-accent-ink)}
.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.55;margin:0 0 20px;max-width:58ch;color:var(--role-ink)}
.lede--inv{color:var(--role-run-muted-inv)}
.body{font-size:17px;line-height:1.65;color:var(--role-ink-muted);margin:0 0 16px;max-width:52ch}
.eyebrow{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--role-accent);margin:0 0 18px}
.eyebrow--inv{color:var(--role-run-cta)}
.head{max-width:900px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:26px;
  padding:14px var(--role-run-pad);background:color-mix(in srgb,var(--role-ground) 86%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent}
.nav.is-stuck{border-bottom-color:var(--role-line)}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:500;font-size:19px;letter-spacing:-.02em}
.nav nav{display:none;gap:24px;margin-left:auto;font-size:15px;color:var(--role-ink-muted)}
.nav nav a{text-decoration:none}
.nav nav a:hover{color:var(--role-accent)}
@media(min-width:700px){.nav nav{display:flex}}
@media(max-width:699.9px){.nav .pill{margin-left:auto}}

/* ---------- pills (motion 6: micro hover) ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 24px;
  font-size:15.5px;font-weight:500;text-decoration:none;border:1.5px solid var(--role-line);
  color:var(--role-ink);background:transparent;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),background-color .2s,border-color .2s,box-shadow .2s}
.pill:hover{transform:translateY(-2px)}
.pill--sun{background:var(--role-run-cta);border-color:var(--role-run-cta);color:var(--role-ink)}
.pill--sun:hover{box-shadow:0 8px 22px var(--role-run-shadow-cta)}
.pill--ghost{border-color:currentColor;background:transparent}
.cta .pill--ghost,.pill--ghost:where(.cta *){color:var(--role-accent-ink)}
.pill--lg{padding:15px 30px;font-size:17px}
.row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.row--center{justify-content:center}

/* ---------- boarding-pass scroll indicator (motion 5) ---------- */
.pass{position:fixed;right:22px;bottom:22px;z-index:45;display:none;align-items:center;gap:10px;
  padding:9px 14px;border-radius:999px;background:color-mix(in srgb,var(--role-run-deep) 92%,transparent);
  color:var(--role-accent-ink);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  box-shadow:0 6px 20px var(--role-run-shadow-deep)}
@media(min-width:1100px){.pass{display:flex}}
.pass__track{position:relative;width:88px;height:4px;border-radius:2px;background:var(--role-run-board-track);overflow:hidden}
.pass__track i{position:absolute;inset:0;background:var(--role-run-cta);transform:scaleX(0);transform-origin:left;
  transition:transform .1s linear}

/* ---------- hero (sky gradient band, full-bleed cinema) ---------- */
.hero{background:linear-gradient(168deg,var(--role-run-hero-1) 0%,var(--role-run-hero-2) 52%,var(--role-run-hero-3) 100%);
  background-image:var(--role-run-dots),linear-gradient(168deg,var(--role-run-hero-1) 0%,var(--role-run-hero-2) 52%,var(--role-run-hero-3) 100%);
  background-size:22px 22px,auto;padding:clamp(120px,16vh,170px) var(--role-run-pad) clamp(56px,8vh,96px)}
.hero__inner{display:grid;gap:clamp(28px,4vw,64px);max-width:1320px;margin:0 auto;align-items:center}
@media(min-width:900px){.hero__inner{grid-template-columns:1.05fr .95fr}}
.hero__inner>*{min-width:0}
.hero__media{margin:0}
.hero__media img{width:100%;border-radius:24px;box-shadow:0 24px 60px var(--role-run-shadow-lift)}
.hero__chip{margin:30px 0 0;font-size:12px;color:var(--role-ink);letter-spacing:.03em;opacity:.85}
.hero__chip b{font-weight:400;color:var(--role-run-deep)}

/* ---------- anti-superlative banner ---------- */
.banner{position:relative;overflow:hidden;text-align:center;background:var(--role-ground);
  padding:clamp(72px,11vh,130px) var(--role-run-pad);border-bottom:1px solid var(--role-line)}
.banner__kicker{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--role-accent);margin:0 0 14px}
.banner__h{font-size:clamp(44px,8vw,96px);font-weight:500;letter-spacing:-.02em;line-height:1.02;margin:0 0 18px}
.banner__sub{font-size:clamp(18px,1.8vw,23px);max-width:44ch;margin:0 auto;color:var(--role-ink-muted)}
.banner__sub em{font-style:normal;color:var(--role-run-verified)}
.banner__confetti{position:absolute;inset:0;pointer-events:none}
.banner__confetti i{position:absolute;width:10px;height:16px;border-radius:3px;opacity:.55}
.banner__confetti i:nth-child(1){left:6%;top:18%;background:var(--role-run-cta);transform:rotate(18deg)}
.banner__confetti i:nth-child(2){left:14%;top:64%;background:var(--role-accent);transform:rotate(-24deg)}
.banner__confetti i:nth-child(3){left:24%;top:32%;background:var(--role-run-verified);transform:rotate(40deg)}
.banner__confetti i:nth-child(4){right:6%;top:24%;background:var(--role-run-verified);transform:rotate(-14deg)}
.banner__confetti i:nth-child(5){right:15%;top:60%;background:var(--role-run-cta);transform:rotate(30deg)}
.banner__confetti i:nth-child(6){right:25%;top:34%;background:var(--role-accent);transform:rotate(-38deg)}
.banner__confetti i:nth-child(7){left:38%;top:12%;background:var(--role-run-cta);transform:rotate(8deg)}
.banner__confetti i:nth-child(8){right:38%;top:78%;background:var(--role-accent);transform:rotate(52deg)}

/* ---------- relief stories ---------- */
.stories{padding:clamp(64px,9vh,110px) var(--role-run-pad);max-width:1320px;margin:0 auto}
.stories__label{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--role-accent);
  margin:0 0 clamp(40px,6vh,70px);text-align:center}
.story{display:grid;gap:clamp(24px,4vw,72px);align-items:center;margin-bottom:clamp(56px,9vh,110px)}
.story:last-child{margin-bottom:0}
@media(min-width:820px){
  .story{grid-template-columns:.9fr 1.1fr}
  .story--rev .story__media{order:2}
}
.story>*{min-width:0}
.story__media{margin:0;overflow:hidden;border-radius:24px;box-shadow:0 18px 48px var(--role-run-shadow-mid)}
.story__media img{width:100%;will-change:transform}
.chip{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:10px 0 0;padding:10px 16px;
  border-radius:12px;background:var(--role-run-tint);border:1px solid var(--role-line);font-size:12.5px;color:var(--role-run-deep)}
.chip span{color:var(--role-accent);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px}
.chip b{font-weight:400;color:var(--role-run-verified)}

/* ---------- departures board ---------- */
.boardband{background:var(--role-run-deep);background-image:radial-gradient(var(--role-run-board-dot) 1px,transparent 1px);
  background-size:22px 22px;color:var(--role-accent-ink);padding:clamp(72px,11vh,130px) var(--role-run-pad)}
.boardband .head{margin:0 auto 44px;max-width:1100px}
.board{max-width:1100px;margin:0 auto;border:1px solid var(--role-run-board-line);border-radius:16px;
  overflow:hidden;font-family:var(--font-mono);background:var(--role-run-board-well)}
.board__row{display:grid;grid-template-columns:1fr 1.4fr auto;gap:14px;align-items:center;
  padding:16px 22px;border-top:1px solid var(--role-run-board-rule);font-size:14px}
.board__row--head{border-top:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--role-run-muted-inv);background:var(--role-run-board-head)}
.board__row .mono{color:var(--role-run-muted-inv);font-size:12.5px;overflow-wrap:anywhere}
.flip{display:inline-block;perspective:400px}
.flip__card{display:inline-block;padding:5px 12px;border-radius:8px;background:var(--role-run-flip-tint);
  color:var(--role-run-verified-bright);border:1px solid var(--role-run-flip-line);font-size:12.5px;letter-spacing:.06em;white-space:nowrap}
.board__note{max-width:1100px;margin:22px auto 0;font-size:12px;color:var(--role-run-muted-inv)}
.board__note a{color:var(--role-run-cta)}
@media(max-width:680px){
  .board__row{grid-template-columns:1fr auto}
  .board__row .mono{grid-column:1 / -1}
  .board__row--head span:nth-child(2){display:none}
}

/* ---------- the loop ---------- */
.loopband{padding:clamp(72px,11vh,130px) var(--role-run-pad);max-width:1320px;margin:0 auto}
.cards{list-style:none;display:grid;gap:22px;padding:0;margin:34px 0 0}
@media(min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--role-run-card);border:1px solid var(--role-line);border-radius:20px;padding:30px 28px;
  box-shadow:0 8px 26px var(--role-run-shadow-faint);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 38px var(--role-run-shadow-hover)}
.card h3{margin:16px 0 8px;font-size:21px;font-weight:500;letter-spacing:-.01em}
.card p{margin:0;color:var(--role-ink-muted);font-size:16px;line-height:1.6}
.card__dot{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:var(--role-run-tint);color:var(--role-accent);font-weight:500;font-size:16px}
.admit{margin-top:30px}
.admit b{color:var(--role-run-verified)}

/* ---------- who it is for (the human band) ---------- */
.who{display:grid;gap:clamp(26px,4vw,64px);align-items:center;max-width:1320px;
  margin:0 auto;padding:clamp(64px,9vh,110px) var(--role-run-pad)}
@media(min-width:900px){.who{grid-template-columns:1.05fr .95fr}}
.who>*{min-width:0}
.who__media{margin:0;overflow:hidden;border-radius:24px;box-shadow:0 18px 48px var(--role-run-shadow-mid)}
.who__media img{width:100%}
.who__copy .chip{margin-top:20px}

/* ---------- limits (QUIET) ---------- */
.limits{background:var(--role-ground-sunk);border-top:1px solid var(--role-line);border-bottom:1px solid var(--role-line);
  padding:clamp(64px,9vh,110px) var(--role-run-pad)}
.limits .head,.limits__list{max-width:900px;margin-left:auto;margin-right:auto}
.limits__list{margin-top:30px}
.limits__list dt{font-size:clamp(20px,2vw,25px);font-weight:500;letter-spacing:-.01em;margin:26px 0 8px}
.limits__list dd{margin:0;color:var(--role-ink-muted);max-width:64ch}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(160deg,var(--role-run-deep) 0%,var(--role-run-deep-2) 100%);color:var(--role-accent-ink);
  text-align:center;padding:clamp(80px,12vh,150px) var(--role-run-pad)}
.cta .lede{margin-left:auto;margin-right:auto}
.cta .pill--ghost{color:var(--role-accent-ink)}
.cta__cross{margin:34px 0 0;font-size:15px;color:var(--role-run-muted-inv)}
.cta__cross a{color:var(--role-run-cta)}

/* ---------- footer (QUIET) ---------- */
.foot{padding:44px var(--role-run-pad) 56px;text-align:center;color:var(--role-ink-muted);font-size:15px}
.foot svg{margin:0 auto 12px}
.foot p{margin:6px 0}
.fine{font-size:13px;max-width:64ch;margin-left:auto!important;margin-right:auto!important}

/* =========================================================================
   Motion — armed ONLY when JS adds .js to <html>. No-JS: everything visible.
   transform/opacity only. */
html.js .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
html.js .reveal.on{opacity:1;transform:none}

/* Hero entrance — fires on LOAD, not on scroll. Nothing has scrolled when a
   visitor first lands, so a scroll-driven reveal can never animate the one
   moment the page most needs to come alive. 110ms between siblings; the
   keyframe states both ends explicitly so fill-mode can't resolve the end
   state to a hidden underlying value. */
html.js .hero__copy{opacity:1;transform:none;transition:none}
html.js .hero__copy>*{animation:obl-rise .68s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(120ms + var(--role-run-he,0) * 110ms)}
html.js .hero__copy>*:nth-child(1){--role-run-he:0}
html.js .hero__copy>*:nth-child(2){--role-run-he:1}
html.js .hero__copy>*:nth-child(3){--role-run-he:2}
html.js .hero__copy>*:nth-child(4){--role-run-he:3}
html.js .hero__copy>*:nth-child(5){--role-run-he:4}
html.js .hero__media{animation:obl-settle .9s cubic-bezier(.16,1,.3,1) 280ms both}
@keyframes obl-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes obl-settle{from{opacity:0;transform:translateY(30px) scale(.975)}to{opacity:1;transform:none}}

/* Story photographs uncover rather than fade — the record being revealed, not
   a slide arriving. Copy staggers behind at 130ms, the authored interval. */
html.js .story__media{clip-path:inset(0 0 100% 0);
  transition:clip-path .82s cubic-bezier(.16,1,.3,1)}
html.js .story.on .story__media{clip-path:inset(0 0 0 0)}
html.js .story__copy>*{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1)}
html.js .story.on .story__copy>*{opacity:1;transform:none;
  transition-delay:calc(180ms + var(--role-run-sc,0) * 130ms)}
html.js .story__copy>*:nth-child(1){--role-run-sc:0}
html.js .story__copy>*:nth-child(2){--role-run-sc:1}
html.js .story__copy>*:nth-child(3){--role-run-sc:2}
html.js .who__media{clip-path:inset(0 0 100% 0);transition:clip-path .82s cubic-bezier(.16,1,.3,1)}
html.js .who.on .who__media{clip-path:inset(0 0 0 0)}

/* One ambient loop, and only one: the light on the hero drifts as if the sun
   were moving across the room. 47s against the 31s dot drift — coprime, so the
   pair never lands on a visible repeat. */
@media(prefers-reduced-motion:no-preference){
  .hero{animation:obl-sun 47s ease-in-out infinite alternate}
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(60% 50% at 78% 18%,var(--role-run-glow),transparent 70%);
    animation:obl-glow 31s ease-in-out infinite alternate}
}
.hero{position:relative}
@keyframes obl-sun{from{background-position:0 0,0 0}to{background-position:26px 22px,0 0}}
@keyframes obl-glow{from{opacity:.35;transform:translate3d(0,0,0)}to{opacity:.7;transform:translate3d(-3%,2%,0)}}
html.js .cards .card{opacity:0;transform:translateY(26px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
html.js .cards.on .card{opacity:1;transform:none}
html.js .cards.on .card:nth-child(2){transition-delay:.12s}
html.js .cards.on .card:nth-child(3){transition-delay:.24s}

/* departures flip (motion 2) */
html.js .flip__card{transform:rotateX(90deg);opacity:0;
  transition:transform .55s cubic-bezier(.2,.7,.3,1),opacity .3s ease}
html.js .board.on .flip__card{transform:rotateX(0);opacity:1}
html.js .board.on .board__row:nth-of-type(3) .flip__card{transition-delay:.15s}
html.js .board.on .board__row:nth-of-type(4) .flip__card{transition-delay:.3s}
html.js .board.on .board__row:nth-of-type(5) .flip__card{transition-delay:.45s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important}
  html.js .story__media,html.js .who__media{clip-path:none}
  html.js .story__copy>*,html.js .hero__copy>*{opacity:1;transform:none}
}

/* =========================================================================
   PH-8 §C — the house line. One ruled object in the footer (G10: chrome is
   designed), tokens only, a plain href to the sibling room, no request. */
.house{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 18px;
  max-width:64ch;margin:30px auto 0;padding-top:18px;border-top:1px solid var(--role-line)}
.house__kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--role-ink-muted)}
.house__link{color:var(--role-accent);text-decoration:none;border-bottom:1px solid var(--role-accent-tint);padding-bottom:1px}
.house__link:hover{border-bottom-color:var(--role-accent)}
.house__link:focus-visible{outline:2px solid var(--role-focus);outline-offset:3px}