/* ============================================================
   StratoSense — platform page
   Matched to the reference design language:
   restrained editorial type (regular weight, sentence case),
   100px flow rhythm, asymmetric media bleeds, line reveals,
   marquee, carousel, collapsing nav pill.
   Tokens mirror the reference: --u, --gold, --ink, --bg, --chrome.
   ============================================================ */

.pf{
  --u:1rem;
  --flow:100px;
  --chrome:#E5E5E5;
  --muted:#5A5A5A;
  background:var(--bg);
}

/* ── type: light, sentence case, NOT the heavy uppercase scale ── */
.pf h1,.pf h2,.pf h3,.pf h4{
  font-weight:500;letter-spacing:-.018em;text-transform:none;line-height:1.14;
}
.pf .t-eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:12px;
}
.pf .t-eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.pf .t-eyebrow.plain::before{display:none}
.pf .t-1{font-size:clamp(1.6rem,3.1vw,2.7rem);font-weight:500;letter-spacing:-.024em}
.pf .t-2{font-size:clamp(1.45rem,2.6vw,2.35rem);font-weight:500;letter-spacing:-.022em}
.pf .t-3{font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:500;letter-spacing:-.015em}
.pf .t-lead{font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:400;color:var(--muted);letter-spacing:-.012em;line-height:1.35}
.pf .t-body{font-size:.96rem;color:var(--muted);line-height:1.62}
.pf .t-body + .t-body{margin-top:1.1em}
.pf .t-small{font-size:.8rem;color:var(--muted)}

.pf section{padding-block:var(--flow)}
.pf .center{text-align:center;max-width:860px;margin-inline:auto}
.pf .stack>*+*{margin-top:22px}

/* ── pill buttons with travelling arrow ─────────────────── */
.pf .pill-btn{
  display:inline-flex;align-items:center;gap:14px;padding:16px 30px;border-radius:999px;
  border:1.5px solid var(--chrome);background:#fff;color:var(--ink);font-size:.95rem;font-weight:500;
  transition:border-color .25s var(--ease),background .25s var(--ease);cursor:pointer;
}
.pf .pill-btn:hover{border-color:var(--ink)}
.pf .pill-btn .arw{width:26px;height:8px;flex:none;overflow:hidden;position:relative}
.pf .pill-btn .arw svg{position:absolute;inset:0;transition:transform .32s var(--ease)}
.pf .pill-btn:hover .arw svg{transform:translateX(5px)}
.pf .txt-link{
  display:inline-flex;align-items:center;gap:12px;font-size:.95rem;color:var(--ink);
  border-bottom:1px solid transparent;transition:border-color .25s;
}
.pf .txt-link:hover{border-bottom-color:var(--ink)}
.pf .txt-link .arw svg{transition:transform .32s var(--ease)}
.pf .txt-link:hover .arw svg{transform:translateX(5px)}
.pf .links-row{display:flex;gap:44px;justify-content:center;flex-wrap:wrap}

/* ── asymmetric split: media bleeds to one edge ─────────── */
.pf .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:center}
.pf .split.left-bleed{margin-left:calc((100vw - min(100vw,var(--wrap)))/-2)}
.pf .split .media{background:var(--ink);border-radius:0;overflow:hidden;position:relative}
.pf .split .media img,.pf .split .media svg{width:100%;height:auto;display:block}
.pf .split .copy{max-width:52ch}
.pf .split.flip{direction:rtl}
.pf .split.flip>*{direction:ltr}

/* media tag, like the reference's corner label */
.pf .media-tag{
  position:absolute;left:16px;bottom:14px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);font-weight:600;
}

/* ── three-column build grid ────────────────────────────── */
.pf .cols{display:grid;grid-template-columns:200px repeat(3,1fr);gap:clamp(24px,3vw,46px);align-items:start}
.pf .cols h3{margin-bottom:14px}

/* ── steps rail ─────────────────────────────────────────── */
.pf .rail{display:grid;grid-template-columns:200px 1fr;gap:clamp(24px,3vw,46px);align-items:start}
.pf .rail-list{border-top:1px solid var(--chrome)}
.pf .rail-item{display:grid;grid-template-columns:64px 1fr;gap:28px;padding:30px 0;border-bottom:1px solid var(--chrome);align-items:start}
.pf .rail-n{font-size:.78rem;color:var(--muted);letter-spacing:.1em;padding-top:5px}
.pf .rail-item h3{margin-bottom:8px}

/* ── marquee ────────────────────────────────────────────── */
.pf .marquee{overflow:hidden;padding-block:26px;--speed:34s}
.pf .marquee-track{display:flex;width:max-content;animation:mq var(--speed) linear infinite}
.pf .marquee-track > span{
  display:flex;align-items:center;gap:clamp(30px,4vw,64px);padding-right:clamp(30px,4vw,64px);
  font-size:clamp(2.6rem,6vw,5rem);font-weight:500;letter-spacing:-.03em;white-space:nowrap;
}
.pf .marquee i{width:10px;height:10px;border-radius:50%;background:var(--gold);flex:none}
.pf .marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── carousel ───────────────────────────────────────────── */
.pf .carousel{position:relative}
.pf .slide{display:none}
.pf .slide.on{display:block;animation:fadeUp .55s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pf .quote{font-size:clamp(1.4rem,3vw,2.3rem);font-weight:500;letter-spacing:-.022em;line-height:1.26}
.pf .attrib{margin-top:24px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pf .dots{display:flex;gap:10px;justify-content:center;margin-top:26px}
.pf .dots button{width:9px;height:9px;border-radius:50%;border:0;background:var(--chrome);cursor:pointer;padding:0;transition:background .25s}
.pf .dots button[aria-selected=true]{background:var(--ink)}

/* ── partner placeholder grid ───────────────────────────── */
.pf .partners{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pf .partner{
  aspect-ratio:16/7;border-radius:10px;background:var(--ink);display:grid;place-items:center;
  color:#6E6E6E;font-size:.9rem;border:1px solid #2A2A2A;
}

/* ── full-bleed band ────────────────────────────────────── */
.pf .bleed{width:100vw;margin-left:calc(50% - 50vw);background:var(--ink)}
.pf .bleed-in{max-width:var(--wrap);margin-inline:auto;padding:0}

/* ── reveals (mirrors the reference's data-reveal system) ── */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-lines] .ln{display:block;overflow:hidden}
[data-reveal-lines] .ln > span{display:block;transform:translateY(105%);transition:transform .82s var(--ease)}
[data-reveal-lines].in .ln > span{transform:none}
[data-reveal-lines].in .ln:nth-child(2) > span{transition-delay:.08s}
[data-reveal-lines].in .ln:nth-child(3) > span{transition-delay:.16s}
[data-stagger] > *{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-stagger].in > *{opacity:1;transform:none}
[data-stagger].in > *:nth-child(2){transition-delay:.09s}
[data-stagger].in > *:nth-child(3){transition-delay:.18s}
[data-stagger].in > *:nth-child(4){transition-delay:.27s}
[data-stagger].in > *:nth-child(5){transition-delay:.36s}
[data-stagger].in > *:nth-child(6){transition-delay:.45s}

/* ── collapsing nav pill (the reference's data-scrolled) ── */
.pf-nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:120;
  display:flex;align-items:center;gap:22px;padding:8px 8px 8px 20px;border-radius:999px;
  background:rgba(245,245,245,.9);backdrop-filter:blur(14px);
  transition:gap .45s var(--ease),padding .45s var(--ease),box-shadow .35s,background .35s;
}
.pf-nav.small{gap:6px;padding:6px;background:rgba(245,245,245,.96);box-shadow:0 6px 24px rgba(11,11,11,.09)}
.pf-nav .n-brand{display:flex;align-items:center;gap:11px;flex:none;text-decoration:none}
.pf-nav .n-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#fff;flex:none;
  box-shadow:0 1px 3px rgba(11,11,11,.07)}
.pf-nav .n-mark svg{width:26px;height:24px}
.pf-nav .n-word{display:flex;align-items:baseline;line-height:1;white-space:nowrap;
  max-width:190px;opacity:1;overflow:hidden;transition:max-width .45s var(--ease),opacity .3s var(--ease)}
.pf-nav .n-word b{font-weight:800;font-size:1.06rem;letter-spacing:-.012em;color:var(--ink)}
.pf-nav .n-word i{font-style:normal;font-weight:800;font-size:1.06rem;letter-spacing:-.012em;color:var(--gold-2)}
.pf-nav.small .n-word{max-width:0;opacity:0}
.pf-nav .n-links{display:flex;gap:26px;font-size:.9rem;color:var(--ink);white-space:nowrap;
  max-width:460px;opacity:1;overflow:hidden;transition:max-width .45s var(--ease),opacity .3s var(--ease)}
.pf-nav.small .n-links{max-width:0;opacity:0}
.pf-nav .n-links a{padding:4px 0;border-bottom:1.5px solid transparent;transition:border-color .22s}
.pf-nav .n-links a:hover,.pf-nav .n-links a[aria-current=page]{border-bottom-color:var(--gold)}
.pf-nav .n-cta{padding:11px 22px;border-radius:999px;background:var(--gold);color:var(--ink);font-weight:600;
  font-size:.9rem;white-space:nowrap;max-width:200px;opacity:1;overflow:hidden;
  transition:max-width .45s var(--ease),opacity .3s var(--ease),padding .45s var(--ease)}
.pf-nav.small .n-cta{max-width:0;opacity:0;padding-inline:0}
.pf-nav .n-burger{width:34px;height:34px;border-radius:50%;background:#fff;border:0;cursor:pointer;
  display:grid;place-items:center;gap:4px;flex:none}
.pf-nav .n-burger span{display:block;width:13px;height:1.5px;background:var(--ink);border-radius:2px;transition:.25s}
.pf-nav .n-burger[aria-expanded=true] span:first-child{transform:translateY(2.75px) rotate(45deg)}
.pf-nav .n-burger[aria-expanded=true] span:last-child{transform:translateY(-2.75px) rotate(-45deg)}

.pf-menu{position:fixed;inset:0;z-index:119;background:var(--bg);display:none;
  place-items:center;opacity:0;transition:opacity .35s var(--ease)}
.pf-menu.open{display:grid;opacity:1}
.pf-menu ul{list-style:none;text-align:center}
.pf-menu li{overflow:hidden}
.pf-menu a{display:block;padding:10px 0;font-size:clamp(1.6rem,4vw,2.6rem);font-weight:500;letter-spacing:-.02em}
.pf-menu a:hover{color:var(--gold-2)}

/* ── footer cover ───────────────────────────────────────── */
.pf-foot{background:var(--ink);color:#fff;padding-block:70px 34px}
.pf-foot a{color:#B9B9B9}
.pf-foot a:hover{color:var(--gold)}
.pf-foot .f-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.pf-foot h4{font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;color:#7A7A7A;margin-bottom:14px;font-weight:600}
.pf-foot .f-link{display:block;padding:6px 0;font-size:.92rem}
.pf-foot .f-bot{margin-top:52px;padding-top:22px;border-top:1px solid #262626;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:#7A7A7A}
.pf-foot .f-word{font-size:clamp(3rem,13vw,10rem);font-weight:600;letter-spacing:-.05em;line-height:.9;
  color:#161616;margin-top:46px;user-select:none}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width:1100px){
  .pf{--flow:74px}
  .pf .split{grid-template-columns:1fr;gap:34px}
  .pf .split.left-bleed{margin-left:0}
  .pf .split.flip{direction:ltr}
  .pf .cols{grid-template-columns:1fr 1fr;gap:30px}
  .pf .cols > .t-eyebrow{grid-column:1/-1}
  .pf .rail{grid-template-columns:1fr}
  .pf .partners{grid-template-columns:repeat(2,1fr)}
  .pf-foot .f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .pf{--flow:58px}
  .pf .cols{grid-template-columns:1fr}
  .pf .partners{grid-template-columns:1fr}
  .pf .links-row{gap:22px;flex-direction:column;align-items:center}
  .pf .rail-item{grid-template-columns:44px 1fr;gap:16px}
  .pf-nav{gap:10px;padding:6px 6px 6px 14px;width:calc(100% - 24px);justify-content:space-between}
  .pf-nav .n-links{display:none}
  .pf-nav .n-word{max-width:170px}
  .pf-foot .f-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-stagger] > *{opacity:1;transform:none}
  [data-reveal-lines] .ln > span{transform:none}
  .pf .marquee-track{animation:none}
  .pf .slide.on{animation:none}
}

/* replay: let the map sit at its natural height instead of stretching */
.pf .rec{align-items:start}
.pf .rec-map{align-self:start}