/* ══════════════════════════════════════════════════════════════════
   motorsport.css — the Motorsport world (Figma frame 31:4).

   A pit-wall world: #111 ground with a carbon-fibre weave showing through,
   orange used harder than anywhere else on the site (racing stripes,
   telemetry, HUD chrome), and Big Shoulders Display doing the shouting
   against JetBrains Mono readouts.

   The design's own motion note asks for "fast attack, smooth settle like a
   car braking into a corner" — that is --ms-ease, and it drives every
   transition on the page.

   Scoped to `.ms`.
   ══════════════════════════════════════════════════════════════════ */

.ms{
  --ms-ease:cubic-bezier(0, .85, .15, 1);       /* the design's racing easing */
  --ms-gutter:clamp(20px,5.5vw,80px);
  --ms-panel:#242e3d;
  --ms-line:#2f4560;

  background:var(--ink-000);
  color:var(--paper-100);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* carbon fibre: two 45° weaves offset from each other, per the annotation */
.ms::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.022) 0 1px, transparent 1px 4px);
}
.ms main, .ms-foot{position:relative;z-index:1;}

.ms main{display:flex;flex-direction:column;}
.ms-header, .ms-archive, .ms-colour, .ms-arsenal, .ms-clients, .ms-close{
  padding-inline:var(--ms-gutter);
  max-width:1600px;margin-inline:auto;width:100%;
}
.ms-archive, .ms-colour, .ms-arsenal{padding-block:clamp(48px,6vw,88px);}
.ms-clients{padding-block:clamp(48px,6vw,96px);}
.ms-close{padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(64px,8vw,120px);}

/* ── reveal ──
   The annotation asks for a slide from the left "mimicking speed lines", with
   children staggered 100–120ms. --i is set per block by motorsport.js. */
[data-ms]{
  opacity:0;transform:translateX(-80px);
  transition:opacity .7s var(--ms-ease), transform .7s var(--ms-ease);
  transition-delay:calc(var(--i, 0) * 110ms);
}
[data-ms].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  [data-ms]{opacity:1;transform:none;transition:none;}
}

/* ── header ── */
.ms-header{padding-top:clamp(28px,3.4vw,48px);padding-bottom:clamp(28px,3.4vw,40px);
  display:flex;flex-direction:column;gap:clamp(24px,3vw,48px);}

.ms-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.ms-mark{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:700;font-size:clamp(14px,1.4vw,18px);
  letter-spacing:.02em;color:#fff;
}
.ms-mark:hover{color:var(--accent);}
.ms-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 10px rgba(255,145,36,.9);}
.ms-mark-sub{font-family:var(--font-mono);font-weight:400;font-size:.62em;
  letter-spacing:.16em;color:rgba(229,229,229,.55);}

/* HUD chips — the design's LAP // 01 / SECTOR 3 / POS P1 readout */
.ms-hud-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ms-chip{
  display:inline-flex;align-items:baseline;gap:6px;
  font-family:var(--font-mono);font-size:clamp(9px,.85vw,11px);letter-spacing:.1em;
  padding:5px 10px;border-radius:4px;
  background:rgba(255,255,255,.05);border:1px solid var(--ms-line);
  color:rgba(229,229,229,.75);
}
.ms-chip b{color:#fff;font-weight:700;}
.ms-chip-hot{background:var(--accent);border-color:var(--accent);color:var(--ink-000);}
.ms-chip-hot b{color:var(--ink-000);}

/* ── title ── */
.ms-title-block{display:flex;flex-direction:column;gap:12px;}
.ms-title-row{display:flex;align-items:center;gap:clamp(14px,2.4vw,24px);}
.ms-title{
  font-family:var(--font-display);font-weight:900;
  /* 160px on the 1440 canvas */
  font-size:clamp(44px,11.1vw,160px);
  line-height:.85;color:#fff;margin:0;letter-spacing:-.01em;
  white-space:nowrap;
}
/* speed streaks: four rules that fade out to the right, longest on top */
.ms-streaks{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;height:32px;
  justify-content:center;}
.ms-streaks i{
  display:block;height:2px;border-radius:1px;
  background:linear-gradient(90deg, var(--accent), rgba(255,145,36,0));
}
.ms-streaks i:nth-child(1){width:100%;}
.ms-streaks i:nth-child(2){width:72%;}
.ms-streaks i:nth-child(3){width:88%;opacity:.6;}
.ms-streaks i:nth-child(4){width:54%;opacity:.4;}

.ms-kicker{
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(10px,1vw,14px);letter-spacing:.06em;
  color:var(--paper-100);margin:0;
}

/* full-bleed racing stripe, as in the design */
.ms-stripe{
  height:4px;background:var(--accent);
  margin-inline:calc(var(--ms-gutter) * -1);
}

/* ── hero film ── */
.ms-hero{
  position:relative;border-radius:12px;overflow:hidden;
  aspect-ratio:1280/560;min-height:280px;
  background:#0c0c0e;cursor:pointer;
  display:grid;place-items:center;
}
.ms-hero video, .ms-hero > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.ms-hero-scrim{position:absolute;inset:0;background:rgba(17,17,17,.28);}

/* telemetry panel, bottom-left, bordered in accent */
.ms-telemetry{
  position:absolute;left:clamp(14px,2.2vw,32px);bottom:clamp(38px,4.4vw,56px);
  width:min(280px,52vw);
  display:flex;flex-direction:column;gap:6px;
  padding:16px;border-radius:6px;
  background:rgba(17,17,17,.8);border:1px solid var(--accent);
  font-family:var(--font-mono);font-size:clamp(9px,.85vw,11px);
}
.ms-telemetry div{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ms-telemetry dt{color:rgba(229,229,229,.7);margin:0;}
.ms-telemetry dd{color:var(--accent);font-weight:700;margin:0;}

.ms-play{
  position:relative;z-index:1;
  width:72px;height:72px;border-radius:36px;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(17,17,17,.7);border:1px solid var(--accent);
  color:#fff;
  transition:transform .35s var(--ms-ease), background-color .35s var(--ms-ease);
}
.ms-hero:hover .ms-play{transform:scale(1.12);background:rgba(255,145,36,.35);}
.ms-play:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.ms-play svg{width:26px;height:26px;}

/* scrub track along the bottom edge */
.ms-track-wrap{position:absolute;left:0;right:0;bottom:0;padding:16px;}
.ms-track{position:relative;height:4px;border-radius:2px;background:rgba(255,255,255,.3);}
.ms-track-fill{height:100%;border-radius:2px;background:var(--accent);width:30%;}
.ms-track i{
  position:absolute;top:50%;translate:-50% -50%;
  width:8px;height:8px;border-radius:50%;background:#fff;
}

.ms-caption{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:clamp(10px,.95vw,13px);
  margin:0;
}
.ms-caption span:first-child{color:var(--paper-100);}
.ms-caption span:last-child{color:var(--accent);}

/* ── section heads ── */
.ms-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(24px,3vw,40px);}
.ms-h2{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(28px,3.4vw,48px);line-height:1;color:#fff;margin:0;
}
.ms-h2-lg{font-size:clamp(32px,4.4vw,64px);}
.ms-h2-sm{font-size:clamp(24px,2.6vw,36px);}
.ms-rule{display:block;height:2px;width:160px;background:var(--accent);}
.ms-code{font-family:var(--font-mono);font-size:clamp(10px,.95vw,13px);
  letter-spacing:.08em;color:rgba(229,229,229,.6);margin:0;}
.ms-code-accent{color:var(--accent);}
.ms-lede{font-size:clamp(14px,1.4vw,18px);color:var(--paper-100);margin:0;max-width:56ch;}

/* ── archive grid ──
   The design runs three rows of different heights (819+wide / 3-up / full).
   Rather than pin those pixel widths, cards carry a --span and the grid is
   12-column, so the same rhythm survives any viewport. */
.ms-grid{
  display:grid;gap:clamp(12px,1.6vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  align-items:start;
}
.ms-card{display:flex;flex-direction:column;gap:14px;min-width:0;}
.ms-card-media{
  position:relative;border-radius:8px;overflow:hidden;
  aspect-ratio:var(--ar, 16/9);
  background:#0c0c0e;cursor:pointer;
  border:1px solid transparent;
  transition:border-color .35s var(--ms-ease), transform .35s var(--ms-ease);
}
.ms-card-media:hover{border-color:var(--accent);transform:translateY(-3px);}
.ms-card-media:focus-within{outline:2px solid var(--accent);outline-offset:2px;}
.ms-card-media video, .ms-card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* runtime badge, top-right */
.ms-dur{
  position:absolute;right:10px;top:10px;margin:0;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  color:#fff;background:rgba(17,17,17,.9);
  padding:4px 7px;border-radius:4px;
}
.ms-tag{
  display:inline-block;margin:0;align-self:flex-start;
  font-family:var(--font-mono);font-weight:700;font-size:10px;letter-spacing:.1em;
  color:var(--ink-000);background:var(--accent);
  padding:4px 8px;border-radius:3px;
}
.ms-card-t{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(18px,1.9vw,24px);line-height:1;color:#fff;margin:0;
}
.ms-card-c{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:rgba(229,229,229,.55);margin:0;}

/* ── colour split ── */
.ms-colour-head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(24px,3vw,40px);}
.ms-split{
  position:relative;display:flex;align-items:stretch;
  border-radius:12px;overflow:hidden;
  aspect-ratio:1280/480;min-height:260px;
  background:#0c0c0e;
}
.ms-split-side{position:relative;flex:1;min-width:0;display:flex;align-items:flex-end;padding:24px;}
.ms-split-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ms-split-side p{
  position:relative;z-index:1;margin:0;
  font-family:var(--font-mono);font-size:clamp(9px,.9vw,11px);letter-spacing:.08em;
  padding:8px 12px;border-radius:4px;
  background:rgba(17,17,17,.85);
}
.ms-split-side:first-child p{color:var(--paper-100);}
.ms-split-side:last-child p{color:var(--ink-000);background:var(--accent);font-weight:700;}
.ms-divider{
  width:2px;background:var(--accent);flex:none;
  display:grid;place-items:center;position:relative;z-index:2;
}
.ms-grip{
  width:28px;height:28px;border-radius:50%;
  background:var(--accent);color:var(--ink-000);
  display:grid;place-items:center;
}
.ms-grip svg{width:14px;height:14px;}

/* ── capability cards ── */
.ms-arsenal-head{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(24px,3vw,40px);
}
.ms-cards{
  display:grid;gap:clamp(12px,1.6vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  margin-bottom:clamp(16px,2vw,28px);
}
.ms-cardk{
  position:relative;
  background:var(--ms-panel);border:1px solid var(--ms-line);border-radius:8px;
  padding:24px;
  display:flex;flex-direction:column;gap:16px;
  transition:border-color .35s var(--ms-ease), transform .35s var(--ms-ease);
}
.ms-cardk:hover{border-color:var(--accent);transform:translateY(-3px);}
/* the design's 3px accent cap, bleeding over the border */
.ms-cardk::before{
  content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:3px;
  background:var(--accent);border-radius:8px 8px 0 0;
}
.ms-cardk-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ms-cardk-ico{color:var(--accent);display:grid;place-items:center;}
.ms-cardk-ico svg{width:22px;height:22px;}
.ms-cardk-role{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  color:rgba(229,229,229,.6);margin:0;}
.ms-cardk-t{font-family:var(--font-display);font-weight:900;
  font-size:clamp(18px,1.8vw,22px);line-height:1;color:#fff;margin:0;}
.ms-cardk-s{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:var(--accent);margin:6px 0 0;}
.ms-cardk-d{font-size:13px;line-height:1.5;color:var(--paper-100);margin:0;}

.ms-specs{
  background:var(--ms-panel);border:1px solid var(--ms-line);border-radius:8px;
  padding:clamp(20px,2.4vw,32px);
  display:flex;gap:clamp(24px,4vw,48px);flex-wrap:wrap;
}
.ms-spec{display:flex;flex-direction:column;gap:8px;min-width:0;}
.ms-spec-l{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  color:rgba(229,229,229,.6);margin:0;}
.ms-spec-v{font-family:var(--font-mono);font-weight:700;
  font-size:clamp(13px,1.4vw,18px);letter-spacing:.04em;color:#fff;margin:0;}

/* ── clients ── */
.ms-clients-head{display:flex;flex-direction:column;gap:8px;align-items:center;
  text-align:center;margin-bottom:clamp(24px,3vw,40px);}
.ms-teams{
  display:grid;gap:clamp(12px,1.6vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
}
.ms-team{
  background:var(--ms-panel);border:1px solid var(--ms-line);border-radius:8px;
  padding:clamp(20px,2.4vw,32px);
  display:flex;flex-direction:column;align-items:center;gap:20px;
  transition:border-color .35s var(--ms-ease), transform .35s var(--ms-ease);
}
.ms-team:hover{border-color:var(--accent);transform:translateY(-3px);}
.ms-team-badge{
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,145,36,.1);border:1px solid var(--accent);
  font-family:var(--font-display);font-weight:900;font-size:26px;
  color:var(--accent);
}
.ms-team-n{font-family:var(--font-mono);font-weight:700;font-size:11px;
  letter-spacing:.1em;color:#fff;margin:0;text-align:center;}
.ms-team-c{font-family:var(--font-mono);font-size:10px;color:rgba(229,229,229,.5);
  margin:0;text-align:center;}

/* ── stats + cta ── */
.ms-close{display:flex;flex-direction:column;gap:clamp(40px,6vw,80px);}
.ms-stats{display:flex;gap:clamp(16px,3vw,32px);flex-wrap:wrap;}
.ms-stat{
  flex:1 1 160px;min-width:0;
  display:flex;flex-direction:column;gap:12px;
  padding-left:clamp(14px,1.6vw,20px);
  border-left:3px solid var(--accent);
}
.ms-stat-n{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(38px,5.5vw,80px);line-height:.9;color:#fff;margin:0;
}
.ms-stat-l{font-family:var(--font-mono);font-weight:700;font-size:clamp(10px,1vw,13px);
  letter-spacing:.1em;text-transform:uppercase;color:var(--paper-100);margin:0;}

.ms-cta{
  background:var(--ms-panel);border:1px solid var(--ms-line);border-radius:16px;
  padding:clamp(32px,5vw,64px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3vw,32px);
  text-align:center;
}
.ms-cta-t{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(28px,4vw,56px);line-height:1;color:#fff;margin:0;
}
.ms-cta-s{font-size:clamp(14px,1.4vw,17px);color:var(--paper-100);margin:0;max-width:58ch;}
.ms-cta-btn{
  background:var(--accent);color:var(--ink-000);
  font-family:var(--font-mono);font-weight:700;font-size:clamp(11px,1.1vw,14px);
  letter-spacing:.1em;
  padding:18px 40px;border-radius:32px;
  transition:transform .35s var(--ms-ease), filter .35s var(--ms-ease);
}
.ms-cta-btn:hover{transform:translateY(-2px);filter:brightness(1.08);}

/* ── footer ── */
.ms-foot{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(32px,4vw,56px) var(--ms-gutter);
  border-top:1px solid var(--ms-line);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
}
.ms-foot-link{color:var(--accent);}
.ms-foot-link:hover{color:#fff;}
.ms-foot-mark{color:rgba(229,229,229,.5);margin:0;}

/* ── narrow ── */
@media (max-width: 900px){
  .ms-title-row{flex-direction:column;align-items:flex-start;gap:10px;}
  .ms-title{white-space:normal;}
  .ms-streaks{width:100%;flex:none;height:20px;}
  .ms-split{aspect-ratio:auto;flex-direction:column;}
  .ms-split-side{aspect-ratio:16/9;}
  .ms-divider{width:100%;height:2px;}
}
@media (max-width: 560px){
  .ms-foot{flex-direction:column;align-items:flex-start;gap:12px;}
  .ms-hero{aspect-ratio:4/3;}
  .ms-telemetry{width:auto;right:clamp(14px,2.2vw,32px);}
}

/* ── vertical strip ──
   Race-day cuts shot for the feed. Kept out of the landscape grid so neither
   orientation has to compromise its ratio, and labelled so the split reads as
   a deliberate delivery format rather than a layout accident. */
.ms-verticals{margin-top:clamp(32px,4vw,56px);display:flex;flex-direction:column;gap:16px;}
.ms-vgrid{
  display:grid;gap:clamp(12px,1.6vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));
}
/* the longest film gets the full-width row, per the design's row-3 */
.ms-card-wide{grid-column:1 / -1;}