/*
Theme Name: Race Space
Theme URI: https://race-space.com
Author: Race Space
Description: Hand-coded custom theme for Race Space, built from the RaceSpace Figma. Classic template hierarchy, mobile-first, no page builder.
Version: 0.26.4
Requires at least: 6.4
Requires PHP: 7.4
License: Proprietary
Text Domain: race-space
Tags: custom
*/

/* =========================================================================
   1. FONTS
   Body and headings: Inter, self-hosted (OFL) — the woff2 files below are the
   real Inter, declared under their own name so the stack reads honestly in
   DevTools. A @font-face src of url() always wins over a font of the same
   name installed on the visitor's machine, so rendering stays identical
   everywhere.
   Display: Acumin VF Condensed Bold Italic — confirmed from the Figma
   inspector. Team roles use a second cut, Acumin Pro ExtraCondensed
   Semibold Italic.

   Acumin Pro Condensed (Adobe, v1.011) is now self-hosted in the two faces
   below, supplied by Race Space. Two caveats, both deliberate:

   - The supplied pack is roman only — there is no italic cut in it. The
     display rules ask for italic, so the browser synthesises the oblique.
     Measured against HOMEPAGE.png the result is within 0.5% on width and
     the slant matches, so this is the right trade against shipping upright.
   - The pack is Condensed (usWidthClass 3), not ExtraCondensed, so the ten
     team roles render very slightly wider than the design.

   The stack still names the Adobe Fonts families first: paste a kit ID into
   Customizer -> Race Space -> Custom scripts and the real italic and the
   ExtraCondensed cut take over from these automatically, with no other
   change.
   ========================================================================= */
/* font-stretch 75% is the font's own usWidthClass, so `font-stretch:condensed`
   and the extra-condensed request both resolve here. */
@font-face{font-family:"Acumin Pro Condensed";src:url(assets/fonts/acumin-pro-cond-700-normal.woff2)format("woff2");font-weight:700;font-style:normal;font-stretch:75%;font-display:swap}
@font-face{font-family:"Acumin Pro Condensed";src:url(assets/fonts/acumin-pro-cond-600-normal.woff2)format("woff2");font-weight:600;font-style:normal;font-stretch:75%;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-400-normal.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-400-italic.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-500-normal.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-600-normal.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-700-normal.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-700-italic.woff2)format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-800-normal.woff2)format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-800-italic.woff2)format("woff2");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-900-normal.woff2)format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-900-italic.woff2)format("woff2");font-weight:900;font-style:italic;font-display:swap}

/* =========================================================================
   2. TOKENS
   ========================================================================= */
:root{
  /* colour */
  --ink:#262324;
  --ink-2:#252525;
  --ink-3:#2A2A2A;
  --crimson:#ED1750;
  --crimson-deep:#D21044;
  --crimson-bright:#FF2E64;
  /* Sampled off the flat Platform bands in PLATFORM.jpg: the brand teal is a
     saturated cyan, not the softer #54C4C9 (that shade only ever shows up as
     the 16% watermark tint and as logo antialiasing). */
  --teal:#00C8CB;
  --teal-soft:#54C4C9;
  --teal-nav:#66AFAF;
  --lime:#A7C239;
  --paper:#F4F4F4;
  --paper-2:#F5F5F5;
  --grey:#B7B7B7;
  --grey-2:#D8D8D8;
  --white:#fff;
  --heading:#F4F4F4;   /* headings are off-white in the design, not pure white */

  --hair-light:rgba(255,255,255,.32);
  --hair-dark:rgba(0,0,0,.14);

  /* type */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"acumin-variable","Acumin Variable Concept","Acumin Pro Condensed","Inter",system-ui,sans-serif;
  --font-display-xc:"acumin-pro-extra-condensed","Acumin Pro ExtraCondensed",var(--font-display);

  /* rhythm */
  /* Measured from the Figma hairlines: content runs x=210 -> x=1280 in a
     1512 frame — 1070px, 70.8% of the viewport. Holding that ratio keeps
     the proportions of the design on wider screens, up to a sane cap.
     Section heads on the inner pages measure 1093; the homepage client strip
     is the one outlier at 1070 and keeps its own width below. */
  --wrap:min(1420px, max(72.3vw, min(92vw, 1093px)));
  --wrap-wide:min(1560px, max(86.8vw, min(94vw, 1312px)));   /* nav: x=100 -> 1412 */
  --wrap-mid:min(1480px, max(81.5vw, min(94vw, 1232px)));    /* footer: x=166 -> 1398 */
  --gutter:clamp(20px,5vw,56px);
  --band-y:clamp(56px,9vw,124px);
  /* measured on PLATFORM.jpg: the teal band's top corner arc is 85px at 1512 */
  --radius-band:clamp(24px,5.6vw,85px);
  --radius-card:18px;
  --radius-btn:10px;   /* measured: 171x44 button, 10px radius — not a pill */

  /* header
     15px of air above and below the tallest thing in the bar — the burger on
     small screens, the Race Space lockup from 900px up. --header-h is derived
     from that rather than fixed, because every hero offsets its top padding
     by this token. */
  --header-rule:15px;
  --header-h:calc(max(clamp(28px,4.23vw,64px), 34px) + var(--header-rule) * 2);
}
@media (min-width:900px){:root{--header-h:calc(clamp(28px,4.23vw,64px) + var(--header-rule) * 2)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--white);
  font-family:var(--font-sans);font-weight:400;font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--crimson);color:#fff}

/* focus — visible everywhere, never removed */
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}

.rs-skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--white);color:var(--ink);padding:.8em 1.2em;font-weight:700}
.rs-skip:focus{left:8px;top:8px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* =========================================================================
   3. TYPE SCALE
   ========================================================================= */
h1,h2,h3,h4{margin:0 0 .6em;font-weight:700;line-height:1.02;letter-spacing:-.015em;color:var(--heading)}
h1{font-size:clamp(2.75rem,8.2vw,7.5rem);line-height:.87}
h2{font-size:clamp(2rem,5vw,4.25rem);line-height:.92}
h3{font-size:clamp(1.35rem,3.4vw,2rem)}
h4{font-size:clamp(1.05rem,2vw,1.25rem)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* the recurring "one italic word" emphasis inside headings */
h1 em,h2 em,h3 em,.rs-em{font-style:italic;font-weight:900}

/* Measured across HOMEPAGE / ACCELERATOR / PLATFORM: body copy is 20px on a
   1512 frame with 24px leading, not the 18px this was clamped to. */
.rs-lede{font-size:clamp(1rem,1.32vw,1.25rem);line-height:1.22;max-width:46ch}
.rs-body-sm{font-size:.95rem;line-height:1.6}

/* display / kicker face */
.rs-eyebrow,.rs-kicker,.rs-sectitle,.rs-wordmark{
  font-family:var(--font-display);font-weight:700;font-style:italic;
  font-stretch:condensed;font-variation-settings:"wdth" 75;
  text-transform:uppercase;letter-spacing:0;line-height:1.2;
}
/* Team roles are the ExtraCondensed Semibold Italic cut. */
.rs-role{
  font-family:var(--font-display-xc);font-weight:600;font-style:italic;
  font-stretch:extra-condensed;font-variation-settings:"wdth" 62.5;
  text-transform:uppercase;line-height:1.2;
}
/* Sizes from the Figma inspector: small labels 15px, RESULTS SO FAR / FAQS
   40px, section titles and EXPLORE MORE 36px. They were all guessed while the
   display face was falling back to Inter; with the real Acumin loaded the
   rendered widths now land within 0.5% of the frame exports. */
.rs-eyebrow{font-size:clamp(.8rem,.99vw,.94rem)}
.rs-kicker{font-size:clamp(1.4rem,2.65vw,2.5rem)}
.rs-sectitle{font-size:clamp(1.25rem,2.38vw,2.25rem)}
/* Figma: 16px. It was .66rem while this fell back to Inter. */
.rs-role{font-size:clamp(.72rem,1.06vw,1rem);color:var(--crimson);letter-spacing:.02em;line-height:1.15;display:block;margin:.15rem 0 .3rem}

.rs-caps{text-transform:uppercase;font-weight:700;letter-spacing:.08em;font-size:.78rem}

/* =========================================================================
   4. LAYOUT
   ========================================================================= */
.rs-wrap{width:min(100% - var(--gutter) * 2, var(--wrap));margin-inline:auto;position:relative;z-index:1}
.rs-band{padding-block:var(--band-y);position:relative;overflow:hidden}
.rs-band--ink{background:var(--ink)}
.rs-band--crimson{background:var(--crimson)}
.rs-band--teal{background:var(--teal)}
.rs-band--paper{background:var(--paper);color:var(--ink)}
.rs-r-bottom{border-end-start-radius:var(--radius-band);border-end-end-radius:var(--radius-band)}
.rs-r-top{border-start-start-radius:var(--radius-band);border-start-end-radius:var(--radius-band)}
.rs-band--paper h2,.rs-band--paper h3{color:var(--ink)}

.rs-grid{display:grid;gap:clamp(28px,5vw,64px)}
@media (min-width:900px){.rs-2col{grid-template-columns:1fr 1fr;align-items:center}}

.rs-hairline{height:1px;background:var(--hair-light);border:0;margin:0}
.rs-band--paper .rs-hairline{background:var(--hair-dark)}

/* media with a dark scrim, used for every photographic band */
.rs-media-bg{position:absolute;inset:0;z-index:0}
.rs-media-bg img,.rs-media-bg video{width:100%;height:100%;object-fit:cover}
.rs-media-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,16,.72),rgba(20,14,16,.55) 45%,rgba(20,14,16,.85))}
/* Measured against the frame exports: the design's photography is already
   graded for legibility — the XNRG hero band reads 0.26 mean in Figma and the
   source file is 0.243, i.e. no overlay at all. Any scrim we add on top is
   double-darkening, so real images get none. The placeholder scrim above
   stays for the art-directed empty state. */
.rs-media-bg:not(.rs-ph)::after{content:none}
/* media backgrounds always sit behind content */
.rs-media-bg{z-index:0}

/* art-direction placeholder, used wherever a real photo is still missing */
.rs-ph{
  position:relative;background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 14px,transparent 14px 34px),
    radial-gradient(120% 90% at 20% 0%,#4a2230 0%,#241a1f 55%,#1b1518 100%);
}
.rs-ph--teal{background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 14px,transparent 14px 34px),
    radial-gradient(120% 90% at 20% 0%,#1d4e52 0%,#1b2a2c 55%,#151d1e 100%);
}
.rs-ph--grey{background:
    repeating-linear-gradient(115deg,rgba(0,0,0,.05) 0 14px,transparent 14px 34px),
    radial-gradient(120% 90% at 20% 0%,#dcdcdc 0%,#c9c9c9 60%,#bcbcbc 100%);
}
.rs-ph__tag{
  position:absolute;inset-block-end:10px;inset-inline-start:12px;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.5);
}
.rs-ph--grey .rs-ph__tag{color:rgba(0,0,0,.42)}
/* when a placeholder IS the band background it must stay absolutely positioned */
.rs-media-bg.rs-ph{position:absolute}
.rs-ph__tag{max-width:min(70vw,42ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* =========================================================================
   5. BUTTONS
   ========================================================================= */
.rs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  /* Feedback: the outline buttons read "too thick" — the frames draw the rule
     at 1.5px, not 2px. */
  padding:.63em 1.75em;border-radius:var(--radius-btn);border:1.5px solid transparent;
  font-weight:700;font-size:clamp(.8rem,1.1vw,1.04rem);letter-spacing:.09em;text-transform:uppercase;
  line-height:1.15;text-align:center;cursor:pointer;background:none;
  transition:background-color .2s,color .2s,border-color .2s,transform .2s;
}
.rs-btn:hover{transform:translateY(-1px)}
.rs-btn svg{width:.7em;height:.7em;flex:none}
.rs-btn--crimson{border-color:var(--crimson);color:var(--crimson)}
.rs-btn--crimson:hover{background:var(--crimson);color:#fff}
.rs-btn--crimson-solid{background:var(--crimson);border-color:var(--crimson);color:#fff}
.rs-btn--crimson-solid:hover{background:var(--crimson-deep);border-color:var(--crimson-deep)}
.rs-btn--lime-solid{background:var(--lime);border-color:var(--lime);color:#262324}
.rs-btn--lime-solid:hover{background:#B7D34A;border-color:#B7D34A}
.rs-btn--teal{border-color:var(--teal);color:var(--teal)}
.rs-btn--teal:hover{background:var(--teal);color:var(--ink)}
.rs-btn--teal-solid{background:var(--teal);border-color:var(--teal);color:var(--ink)}
.rs-btn--teal-solid:hover{filter:brightness(1.08)}
.rs-btn--white{border-color:#fff;color:#fff}
.rs-btn--white:hover{background:#fff;color:var(--ink)}
.rs-btn--ink-solid{background:var(--ink);border-color:var(--ink);color:#fff}
.rs-btn--ink-solid:hover{background:#000;border-color:#000}
.rs-btn--block{width:100%}
@media (min-width:560px){.rs-btn--block{width:auto}}

/* scroll cue */
.rs-scrollcue{display:inline-flex;margin-top:1.6rem;color:var(--crimson);animation:rs-bob 2.4s ease-in-out infinite}
.rs-scrollcue--teal{color:var(--teal)}
@keyframes rs-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* =========================================================================
   6. LOGO LOCKUPS
   ========================================================================= */
/* Real brand artwork: the span carries the height, the SVG keeps its ratio. */
.rs-art{display:inline-flex;line-height:0;flex:none}
.rs-art>svg{display:block;height:100%;width:auto;max-width:100%}

.rs-logo{display:inline-flex;align-items:center;color:#fff}
/* header lockup: 227 x 64 in the 1512 frame */
.rs-logo__art{height:clamp(28px,4.23vw,64px)}
/* HOMEPAGE.png footer draws the lockup at 551 x 153; held 20% under that. */
.rs-logo--lg .rs-logo__art{height:clamp(42px,8.08vw,122px)}
.rs-logo__word{font-weight:800;letter-spacing:.02em;text-transform:uppercase;font-size:clamp(1.05rem,3.2vw,1.4rem);line-height:1}
.rs-logo__mark{width:1.85em;height:1.85em;flex:none;color:var(--crimson)}
.rs-logo--lg .rs-logo__word{font-size:clamp(1.6rem,5vw,2.75rem)}

.rs-sublogo{display:inline-flex;align-items:center;gap:.6em;color:#fff}
/* header sub-brand lockup: 51px tall in the frame. The footer row is larger
   (70px) and overrides this below. */
.rs-sublogo__art{height:clamp(28px,3.37vw,51px)}
.rs-sublogo__mark{width:2.1em;height:2.1em;flex:none}
.rs-sublogo__text{display:flex;flex-direction:column;line-height:1}
.rs-sublogo__over{font-size:.5rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.rs-sublogo__wordmark{font-family:var(--font-display);font-weight:900;font-style:italic;text-transform:uppercase;font-size:1.05rem;letter-spacing:.01em}
.rs-sublogo--accelerator .rs-sublogo__mark{color:var(--crimson)}
.rs-sublogo--platform .rs-sublogo__mark{color:var(--teal)}
.rs-sublogo--racecheck .rs-sublogo__mark{color:var(--lime)}
.rs-band--paper .rs-sublogo,.rs-band--paper .rs-sublogo__over{color:var(--ink)}

/* =========================================================================
   7. HEADER + NAV
   ========================================================================= */
.rs-header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:90;
  height:var(--header-h);padding-block:var(--header-rule);display:flex;align-items:center;
  background:transparent;border-block-end:1px solid var(--hair-light);
  transition:background-color .25s,border-color .25s;
}
.rs-header.is-scrolled{background:var(--ink);border-block-end-color:rgba(255,255,255,.12)}
/* keep clear of the WordPress admin bar for logged-in users */
body.admin-bar .rs-header{top:46px}
body.admin-bar .rs-mpanel{top:46px}
@media (min-width:783px){body.admin-bar .rs-header,body.admin-bar .rs-mpanel{top:32px}}
.rs-header__inner{width:min(100% - var(--gutter) * 2, var(--wrap-wide));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}

.rs-nav{display:none}
@media (min-width:1080px){
  .rs-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px)}
  .rs-nav__list{display:flex;align-items:center;gap:clamp(12px,1.7vw,28px);list-style:none;margin:0;padding:0}
  .rs-nav__list li{list-style:none}
  /* HOMEPAGE.png: 15px Inter Bold, uppercase, no tracking (cap height 11px
     and the rendered string width agree on both counts). */
  .rs-nav a{font-size:clamp(.78rem,.98vw,.93rem);font-weight:700;letter-spacing:0;text-transform:uppercase;color:#fff;padding:.4em 0;border-block-end:1px solid transparent;white-space:nowrap}
  .rs-nav a:hover,.rs-nav a[aria-current="page"]{border-block-end-color:var(--crimson)}
  .rs-nav--section a:hover{border-block-end-color:#fff}
}
/* Before the header picks up its solid ink background the links sit straight
   on the hero photograph, so they carry a shadow to hold their contrast. */
.rs-header:not(.is-scrolled) .rs-nav a,
.rs-header:not(.is-scrolled) .rs-logo,
.rs-header:not(.is-scrolled) .rs-sublogo{text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 10px rgba(0,0,0,.35)}
.rs-header.is-scrolled .rs-nav a,
.rs-header.is-scrolled .rs-logo,
.rs-header.is-scrolled .rs-sublogo{text-shadow:none}
.rs-nav-cta{display:none}
/* HOMEPAGE.png: a 202 x 44 button with the 10px button radius — not a pill —
   holding the 25 x 23 chevron mark, 10px of gap, then the label. */
@media (min-width:1080px){.rs-nav-cta{
  display:inline-flex;align-items:center;gap:clamp(6px,.66vw,10px);
  background:var(--teal-nav);border-color:var(--teal-nav);color:#fff;
  border-radius:var(--radius-btn);letter-spacing:0;font-size:clamp(.78rem,.98vw,.93rem);
  padding:clamp(6px,.56vw,8.5px) clamp(13px,1.32vw,20px) clamp(6px,.56vw,8.5px) clamp(11px,1.06vw,16px);
  white-space:nowrap;flex:none;
}
.rs-nav-cta:hover{background:var(--teal);border-color:var(--teal);color:var(--ink)}}
.rs-nav-cta__icon{height:clamp(16px,1.52vw,23px);width:auto}
.rs-nav-cta__icon>svg{height:100%;width:auto;display:block}
.rs-mpanel__cta .rs-nav-cta__icon{height:20px}

.rs-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer}
.rs-burger span{display:block;height:1.5px;background:#fff;border-radius:2px}
@media (min-width:1080px){.rs-burger{display:none}}

/* mobile panel */
.rs-mpanel{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:95;
  background:var(--ink);color:#fff;
  border-end-start-radius:28px;border-end-end-radius:28px;
  padding:1rem var(--gutter) 1.75rem;
  transform:translateY(-102%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow:0 24px 60px rgba(0,0,0,.35);max-height:100svh;overflow-y:auto;
}
.rs-mpanel.is-open{transform:translateY(0)}
.rs-mpanel__top{display:flex;justify-content:flex-end;align-items:center;height:var(--header-h)}
.rs-mpanel__close{width:34px;height:34px;border:0;background:none;cursor:pointer;color:#fff}
.rs-mpanel__list{list-style:none;margin:0;padding:0}
.rs-mpanel__list li{list-style:none}
.rs-mpanel__list a{display:block;padding:1.05rem 0;font-weight:700;text-transform:uppercase;letter-spacing:0;font-size:.9rem;color:#fff;border-block-end:1px solid rgba(255,255,255,.16)}
.rs-mpanel__list a:hover,.rs-mpanel__list a[aria-current="page"]{color:var(--crimson)}
.rs-mpanel__cta{margin-top:1.5rem}
.rs-scrim{position:fixed;inset:0;z-index:94;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.rs-scrim.is-open{opacity:1;visibility:visible}
body.rs-nav-open{overflow:hidden}

/* =========================================================================
   8. HERO
   ========================================================================= */
.rs-hero{position:relative;display:flex;align-items:stretch;min-height:clamp(560px,94svh,940px);padding-block:calc(var(--header-h) + clamp(30px,3vw,46px)) clamp(24px,2.1vw,32px);overflow:hidden}
/* The hero is a column: the headline sits under the header and the client
   strip is pushed to the foot by an auto margin, so the logos land on the
   bottom edge whatever the viewport height happens to be. */
.rs-hero > .rs-wrap{display:flex;flex-direction:column;flex:0 1 auto}
/* Figma fades the foot of the photograph the whole way down to the ink of the
   band beneath, so the seam between the two is invisible. */
.rs-hero:not(.rs-hero--center)::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:min(56%,430px);z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(38,35,36,0) 0%,rgba(38,35,36,.55) 42%,rgba(38,35,36,.88) 74%,var(--ink) 100%)}
.rs-hero__grid{display:grid;gap:clamp(24px,5vw,48px);width:100%}
@media (min-width:900px){.rs-hero__grid{grid-template-columns:minmax(0,674px) minmax(0,1fr);align-items:end;gap:clamp(24px,3vw,40px)}}
.rs-hero h1{margin:0}
.rs-hero__aside{text-align:right}
@media (min-width:900px){.rs-hero__aside{text-align:left;padding-bottom:.6rem}}
.rs-hero__aside p{margin-left:auto;max-width:34ch}
@media (min-width:900px){.rs-hero__aside p{margin-left:0}}
.rs-hero__aside .rs-btn{margin-top:1.4rem}

/* --- homepage hero -------------------------------------------------------
   HOMEPAGE.png, 1512 frame: the band runs 0 -> 1293 (85.5vw), the headline's
   cap line sits 148px below the header hairline, the body/button block starts
   133px BELOW the foot of the headline rather than sharing its baseline, and
   the client strip is pushed to the bottom edge by the auto margin above.
   Sized off the viewport width, not its height, so the first screen holds the
   headline alone exactly as the design intends. */
.rs-hero--home{min-height:clamp(600px,85.5vw,1300px);padding-block-start:calc(var(--header-h) + clamp(34px,9.23vw,140px))}
/* HOMEPAGE.png carries a deep oxblood wash over the top of the hero — sampled
   at rgb(55,19,18) off the shadows in that frame. The homepage runs a video
   rather than a still, and its brightest frames put white nav links on a pale
   sky at about 2:1, so the wash is doing real work here: it holds the header
   items and the headline at 5:1 or better whatever frame is on screen, then
   clears the crowd below. z-index 1 keeps it above the video (which sits at 0)
   and below .rs-wrap. */
.rs-hero--home::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;
  height:min(78%,980px);z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(55,19,18,.68) 0,
    rgba(55,19,18,.60) calc(var(--header-h) + 1.5rem),
    rgba(55,19,18,.42) 40%,
    rgba(55,19,18,.20) 66%,
    rgba(55,19,18,0) 100%);
}
@media (min-width:900px){
  .rs-hero--home .rs-hero__grid{grid-template-columns:minmax(0,1fr);align-items:start;gap:0}
  .rs-hero--home .rs-hero__grid h1{max-width:min(100%,700px)}
  .rs-hero--home .rs-hero__aside{width:min(100%,412px);margin-inline-start:auto;margin-block-start:clamp(40px,9.06vw,137px);padding-bottom:0}
  .rs-hero--home .rs-hero__aside p{max-width:none;margin-bottom:0}
  .rs-hero--home .rs-hero__aside .rs-btn{margin-top:clamp(18px,1.98vw,30px)}
}

/* the centred heroes hold their column in the middle of the band */
.rs-hero--center{text-align:center;align-items:center}
.rs-hero--center > .rs-wrap{margin-block:auto}
.rs-hero--center .rs-hero__grid{grid-template-columns:1fr;justify-items:center}
/* Figma: the centred heroes are 84px, not the homepage's 120px. */
.rs-hero--center h1{font-size:clamp(2.2rem,5.62vw,5.3rem);line-height:.86;letter-spacing:-.028em}
/* Figma centres the whole column on these heroes — body copy, button and the
   scroll cue alike. Without this the aside kept the split-hero left alignment. */
.rs-hero--center .rs-hero__aside{text-align:center;display:grid;justify-items:center}
.rs-hero--center .rs-hero__aside p{margin-inline:auto}
.rs-hero--center .rs-hero__aside .rs-btn{justify-self:center}
.rs-hero--center .rs-scrollcue{margin-inline:auto}
.rs-hero--center p{margin-inline:auto;max-width:62ch}
/* PLATFORM.jpg: the hero eyebrow is 23px, near-tracked — not a micro label. */
.rs-hero__eyebrow{color:var(--teal);display:block;margin-bottom:clamp(14px,1.9vw,29px);font-size:clamp(.8rem,1.55vw,1.46rem);font-weight:700;letter-spacing:.015em;text-transform:uppercase;line-height:1.2}

/* =========================================================================
   9. TRUSTED-BY STRIP
   ========================================================================= */
/* The strip sits at the foot of the hero, over the photograph, exactly as the
   design has it — not on a band of its own. */
/* margin-block-start:auto is what pins the strip to the foot of the hero. */
/* Figma runs the strip's rules to x=1279 rather than the content column's
   1302 — 1070px wide, left-aligned on the content margin. */
.rs-trusted{margin-block-start:auto;padding-block-start:clamp(36px,6vw,74px);width:min(100%,var(--wrap-trusted));--wrap-trusted:min(1390px,max(70.8vw,min(92vw,1070px)))}
.rs-trusted__eyebrow{display:block;padding-block:0 clamp(16px,2.9vw,44px);border-block-end:1px solid var(--hair-light);font-size:clamp(1rem,2.65vw,2.5rem);line-height:1}
.rs-trusted__logos{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;align-items:center;gap:clamp(16px,3vw,30px);padding-block:clamp(14px,1.7vw,26px);border-block-end:1px solid var(--hair-light);margin:0;padding-inline:0}
.rs-trusted__logos li{list-style:none;flex:0 0 auto}
.rs-trusted__logos img{height:clamp(26px,5.4vw,44px);width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.92}
/* Figma draws each client mark at its own natural size rather than trimming
   them all to one height, so each gets the height of its own artboard. */
.rs-trusted__art{height:var(--rs-mark-h,clamp(26px,4vw,61px));width:auto;opacity:.92}
.rs-trusted__art--total-warrior{--rs-mark-h:clamp(34px,5.36vw,81px)}
.rs-trusted__art--g{--rs-mark-h:clamp(26px,4.03vw,61px)}
.rs-trusted__art--big-bear-events{--rs-mark-h:clamp(30px,4.7vw,71px)}
.rs-trusted__art--maverick-race{--rs-mark-h:clamp(21px,3.24vw,49px)}
.rs-trusted__art--born-survivor{--rs-mark-h:clamp(24px,3.7vw,56px)}
.rs-trusted__art--atw{--rs-mark-h:clamp(28px,4.43vw,67px)}
@media (min-width:760px){
  .rs-trusted__logos{grid-template-columns:repeat(6,1fr);gap:clamp(12px,2vw,28px)}
}
.rs-trusted__ph{height:clamp(26px,5.4vw,44px);width:clamp(72px,16vw,118px);border:1px dashed rgba(255,255,255,.3);border-radius:6px;display:grid;place-items:center;font-size:.5rem;letter-spacing:.1em;color:rgba(255,255,255,.45);text-transform:uppercase;font-weight:700}

/* =========================================================================
   10. CHECKLIST / PILLS / STATS
   ========================================================================= */
.rs-check{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1rem}
.rs-check li{display:grid;grid-template-columns:1.5rem 1fr;gap:.85rem;align-items:start;font-size:.98rem;line-height:1.5}
.rs-check svg{width:1.2rem;height:1.2rem;margin-top:.18rem;flex:none}
.rs-check__icon{height:1.4rem;margin-top:.05rem}
.rs-check .rs-art>svg{width:auto;height:100%}

/* ACCELERATOR.png: 19px between pill rows, 49px from the paragraph above. */
.rs-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.7rem,1.26vw,19px);margin-top:clamp(24px,3.24vw,49px)}
/* Measured on ACCELERATOR.png: 159 x 43 with a 6px corner, not a pill. */
/* Feedback: match the hero button's corner rounding — 6px read too sharp. */
.rs-pill{border:1.5px solid var(--crimson);color:var(--crimson);border-radius:var(--radius-btn);padding:1em 1.8em;line-height:1;font-size:clamp(.7rem,.93vw,.88rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase}

.rs-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,4vw,40px);margin-top:2rem}
@media (min-width:900px){.rs-stats--4{grid-template-columns:repeat(4,1fr)}}
.rs-stat__fig{display:block;font-weight:300;font-size:clamp(2.6rem,9vw,4.6rem);line-height:.95;letter-spacing:-.03em}
.rs-stat__label{display:block;margin-top:.5rem;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;opacity:.92}

/* =========================================================================
   11. QUOTES / SLIDER
   ========================================================================= */
.rs-quote{text-align:center;max-width:44ch;margin-inline:auto}
/* The supplied artwork carries its own crimson and photographic fill, so it is
   sized rather than tinted: 173x141 in HOMEPAGE.png, 138x112 on the phone. */
.rs-quote__mark{width:clamp(138px,11.44vw,173px);margin:0 auto clamp(18px,2vw,30px)}
.rs-quote__mark .rs-art{width:100%}
.rs-quote__mark svg{width:100%;height:auto}
.rs-quote__text{font-size:clamp(1rem,2.4vw,1.35rem);line-height:1.5;font-weight:600}
.rs-quote__by{display:block;margin-top:1.2rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--crimson)}
.rs-band--teal .rs-quote__by,.rs-band--teal .rs-quote__mark{color:var(--ink)}

.rs-slider{position:relative;padding-inline:clamp(0px,6vw,64px)}
.rs-slider__viewport{overflow:hidden}
.rs-slider__track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.rs-slider__slide{flex:0 0 100%;min-width:0}
.rs-slider__btn{position:absolute;inset-block-start:50%;translate:0 -50%;width:44px;height:44px;border-radius:999px;border:0;background:none;color:var(--crimson);display:none;cursor:pointer}
@media (min-width:760px){.rs-slider__btn{display:grid;place-items:center}}
.rs-slider__btn:hover{background:rgba(255,255,255,.08)}
.rs-slider__btn--prev{inset-inline-start:0}
.rs-slider__btn--next{inset-inline-end:0}
.rs-band--teal .rs-slider__btn{color:var(--ink)}
.rs-slider__dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.6rem}
.rs-slider__dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.35);cursor:pointer}
.rs-slider__dot[aria-selected="true"]{background:var(--crimson);width:22px}
.rs-band--teal .rs-slider__dot{background:rgba(0,0,0,.3)}
.rs-band--teal .rs-slider__dot[aria-selected="true"]{background:var(--ink)}

/* =========================================================================
   12. CTA BAND
   ========================================================================= */
/* HOMEPAGE.png gives the closing CTA 799px of height. */
.rs-cta{position:relative;min-height:clamp(400px,52.84vw,799px);display:flex;align-items:center;overflow:hidden}
.rs-cta h2{max-width:20ch}
.rs-cta p{max-width:42ch}
.rs-deco-chev>svg{width:100%;height:auto}
.rs-deco-chev{position:absolute;inset-block-end:-6%;inset-inline-start:-4%;width:clamp(150px,26vw,340px);opacity:.92;z-index:0;pointer-events:none}
/* The mark is the nested three-chevron artwork on a 707:816 artboard, and the
   design runs it OFF the band's bottom-right corner rather than sitting it
   inside: on the desktop frame roughly half the artwork is cropped away.
   Measured off the band by matching the artwork's own geometry — a 148-unit arm
   renders 165px wide in the supplied capture, which pins the scale, and the
   artwork's topmost point (unit x=328.5, y=0) pins the offset. That fit
   reproduces the capture at IoU 0.965.

   Both offsets are expressed as fractions of the mark's OWN width, not as vw,
   so the crop stays identical at every viewport instead of drifting: at any
   size the same share of the artwork is visible.
     desktop  694.5px wide, 20.7px past the right edge, 336.9px past the bottom
     mobile   300.9px wide, 75.1px past the right, 78.4px past the bottom
   The two frames crop it differently — desktop takes most of it off the bottom,
   mobile takes an even bite off both — so the fractions are per breakpoint. */
.rs-deco-chev--right{
  --rs-chev-w:clamp(340px,45.93vw,694px);
  --rs-chev-bleed-x:.0298;
  --rs-chev-bleed-y:.4851;
  width:var(--rs-chev-w);
  inset-inline:auto calc(var(--rs-chev-w) * var(--rs-chev-bleed-x) * -1);
  inset-block-start:auto;
  inset-block-end:calc(var(--rs-chev-w) * var(--rs-chev-bleed-y) * -1);
  translate:none;opacity:1;
}

/* =========================================================================
   13. FOOTER
   ========================================================================= */
.rs-footer{background:var(--ink-2);padding-block:clamp(48px,7vw,80px) clamp(24px,3vw,32px)}
.rs-footer__top{display:grid;gap:clamp(32px,5vw,48px)}
@media (min-width:820px){.rs-footer__top{grid-template-columns:1.6fr .63fr .55fr;align-items:start}}
/* the footer link set is the same 15px, untracked treatment as the header nav,
   on a 26px rhythm in the 1512 frame */
.rs-footer__links{list-style:none;margin:0;padding:0;display:grid;gap:clamp(8px,.99vw,15px)}
.rs-footer__links a{font-size:clamp(.78rem,.98vw,.93rem);font-weight:700;letter-spacing:0;text-transform:uppercase}
.rs-footer__links a:hover{color:var(--crimson)}
.rs-footer__head{font-size:clamp(.78rem,.98vw,.93rem);font-weight:700;letter-spacing:0;text-transform:uppercase;margin:0 0 clamp(8px,1.12vw,17px)}
.rs-footer__email{color:var(--grey);font-size:clamp(.85rem,.98vw,.93rem)}
.rs-footer__email:hover{color:#fff}
/* Supplied Icons/ artwork, drawn 1:1 in the frame: the Instagram and Facebook
   glyphs are 33px tall, LinkedIn 35px, with ~17px of air between them. The
   viewBoxes are cropped to the glyph so the optical gaps stay even. */
.rs-social{display:flex;align-items:center;gap:clamp(14px,1.13vw,17px);margin-top:clamp(18px,2.2vw,32px);color:#fff}
.rs-social a,.rs-social span{display:inline-flex;color:#fff;transition:color .18s}
.rs-social .rs-art{height:clamp(24px,2.18vw,33px)}
.rs-social .rs-art--linkedin{height:clamp(26px,2.32vw,35px)}
.rs-social a:hover,.rs-social a:focus-visible{color:var(--crimson)}
.rs-footer__rule{margin-block:clamp(32px,5vw,48px);height:1px;background:rgba(255,255,255,.18);border:0}
.rs-footer__brands{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(24px,5vw,48px)}
/* HOMEPAGE.png: the footer brand row is drawn at 70px, taller than the header's */
.rs-footer__brands .rs-sublogo__art{height:clamp(30px,4.63vw,70px)}
.rs-footer__legal{margin-top:clamp(28px,4vw,40px);padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between;font-size:.72rem;color:var(--grey)}
.rs-footer__legal ul{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;list-style:none;margin:0;padding:0}
.rs-footer__legal a:hover{color:#fff}

/* =========================================================================
   14. MOTION PREFERENCES
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rs-scrollcue{animation:none}
}

/* =========================================================================
   15. HOMEPAGE SUB-BRAND BLOCKS
   ========================================================================= */
/* dark centred intro that introduces the Accelerator band */
/* Feedback: the paragraph sat too close to the crimson band. HOMEPAGE.png puts
   114px between the last line of copy and the top of the pink. */
.rs-intro{padding-block:clamp(48px,7vw,96px) clamp(40px,7.4vw,112px)}
.rs-intro__inner{display:grid;justify-items:center;text-align:center;gap:clamp(20px,3vw,30px)}
.rs-intro__heading{color:var(--crimson);margin:0;max-width:22ch}
.rs-intro__body{color:var(--crimson);margin:0;max-width:62ch;font-size:clamp(.85rem,1.5vw,.95rem);line-height:1.55}

/* crimson benefits band */
/* HOMEPAGE.png rounds only the top corners of this band — the bottom runs
   square into the paper band below. Padding is pinned to the frame (123/143)
   rather than inherited from --band-y. */
.rs-benefits{
  color:#fff;
  border-start-start-radius:var(--radius-band);border-start-end-radius:var(--radius-band);
  border-end-start-radius:0;border-end-end-radius:0;
  padding-block:clamp(56px,8.13vw,123px) clamp(56px,9.46vw,143px);
  /* The chevron mark is drawn to run off the bottom-right corner, so the band
     has to be the thing that crops it — hence its own containing block and a
     clip. The clip follows the rounded top corners for free. */
  position:relative;overflow:hidden;
}
/* Figma: the copy starts at the content margin, not centred, and the opening
   line is a 46px Extra Bold statement rather than body copy. */
.rs-benefits__inner{max-width:none}
.rs-benefits__inner > div{max-width:min(100%,604px)}
.rs-benefits__statement{
  font-family:var(--font-sans);font-weight:800;font-style:normal;text-transform:none;
  font-size:clamp(1.45rem,3.1vw,2.875rem);line-height:1.14;letter-spacing:-.01em;
  color:#fff;margin:0 0 clamp(1.8rem,5.2vw,4.9rem);
}
.rs-benefits .rs-check li{grid-template-columns:1.75rem 1fr}
.rs-benefits .rs-check svg{color:#fff;opacity:.95}
.rs-benefits .rs-btn{margin-top:clamp(2rem,4.76vw,4.5rem)}
.rs-benefits .rs-deco-chev{color:rgba(255,255,255,.92)}
/* MOBILE HOME.png draws this mark at full strength, 301px wide on the 402
   frame, taking an even ~25% bite off both the right edge and the bottom —
   a different crop from the desktop frame, and not the faded 28% the build
   had been carrying. */
@media (max-width:899px){
  .rs-benefits .rs-deco-chev--right{
    --rs-chev-w:min(74.85vw,301px);
    --rs-chev-bleed-x:.2496;
    --rs-chev-bleed-y:.2606;
    opacity:1;
  }
}

/* generic sub-brand block */
/* Figma sets 42-44px between the sub-logo, heading and body copy in these
   blocks — the build had ~30, which read tight. */
.rs-brand__col{display:grid;gap:clamp(1.1rem,1.96vw,1.85rem);max-width:56ch}
.rs-brand__col h2{margin:clamp(.4rem,.53vw,.6rem) 0 0}
.rs-brand__col .rs-btn{margin-top:1.1rem;justify-self:start}
/* Figma: the Platform block is left-aligned and offset to x=610 in the 1512
   frame — not centred. Below 900px it simply runs full width. */
@media (min-width:900px){
  .rs-brand--center .rs-brand__col{margin-inline-start:36.6%;max-width:766px}
}
/* HOMEPAGE.png: 172px above the sub-logo and 143px below the button, so the
   band reads as a section rather than a banner. */
.rs-brand--center{padding-block:clamp(64px,11.38vw,172px) clamp(60px,9.46vw,143px)}
.rs-brand--center .rs-sublogo{justify-self:start}
/* Figma "Group 51": the chevron mark bleeds off the left edge of the band. */
/* Figma: 599px wide in the 1512 frame, starting 112px off the left edge and
   206px below the top of the band. The artwork carries its own 16% tint, so
   it is drawn at full opacity rather than faded a second time. */
.rs-plat-chev{--rs-plat-w:clamp(300px,39.6vw,640px);position:absolute;inset-block-start:auto;inset-block-end:calc(var(--rs-plat-w) * .023);inset-inline-start:calc(var(--rs-plat-w) * -.187);width:var(--rs-plat-w);opacity:1;z-index:0;pointer-events:none}
.rs-plat-chev>svg{width:100%;height:auto}
@media (max-width:899px){.rs-plat-chev{--rs-plat-w:300px;opacity:.6}}
/* HOMEPAGE.png gives the Racecheck band 860px — the 640px build read as a
   banner strip rather than a full section. */
.rs-brand--photo{min-height:clamp(460px,56.88vw,860px);display:flex;align-items:center}
.rs-brand--photo .rs-brand__col{color:#fff}
.rs-brand--photo h2{max-width:734px}
.rs-brand--photo .rs-brand__col{max-width:734px}
.rs-band--paper .rs-lede{color:#3a3335}

/* =========================================================================
   16. TESTIMONIAL SECTION
   ========================================================================= */
.rs-quotes{text-align:center}
/* Figma sets this in Acumin at 48px — larger than the generic kicker. */
.rs-quotes__label{color:var(--crimson);margin:0 0 1.6rem;font-family:var(--font-display);font-size:clamp(1.5rem,3.17vw,3rem)}
.rs-band--teal .rs-quotes__label{color:var(--ink)}

/* =========================================================================
   17. CLOSING CTA
   ========================================================================= */
.rs-cta__inner{max-width:44ch}
/* The two-tone chevron mark, placed as in the design: left half, vertically centred. */
.rs-cta__chev{position:absolute;inset-block-start:50%;translate:0 -50%;inset-inline-start:clamp(4%,12vw,18%);width:clamp(120px,19vw,270px);z-index:0;pointer-events:none}
.rs-cta__chev>svg{width:100%;height:auto}
@media (max-width:899px){.rs-cta__chev{width:130px;opacity:.5;inset-inline-start:4%}}
.rs-cta .rs-deco-chev{width:clamp(120px,17vw,230px);inset-inline-start:6%;inset-block-end:14%;opacity:.9}
@media (max-width:899px){.rs-cta .rs-deco-chev{width:110px;opacity:.35;inset-block-end:6%}}
.rs-cta__inner .rs-btn{margin-top:1.7rem}
@media (min-width:900px){.rs-cta__inner{margin-inline-start:49.4%;max-width:586px;text-align:left}}

/* =========================================================================
   18. SECTION HEAD (icon left, italic caps title right, hairline under)
   ========================================================================= */
.rs-sechead{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block-end:clamp(10px,1.26vw,19px)}
.rs-sechead--bare{justify-content:flex-end}
.rs-sechead__icon{flex:none;color:#fff;display:inline-flex;align-items:center;height:clamp(26px,2.38vw,36px)}
.rs-sechead__icon .rs-art{height:100%}
.rs-sechead__icon svg{height:100%;width:auto}
.rs-sechead h2{margin:0;text-align:end}
.rs-band--paper .rs-sechead__icon{color:var(--ink)}

.rs-header__brand{display:inline-flex;align-items:center}

/* generic single-column page (privacy policy, etc.) */
.rs-page{padding-block:calc(var(--header-h) + clamp(48px,8vw,96px)) clamp(56px,9vw,110px)}
.rs-page__body{max-width:70ch}
.rs-page__body h2,.rs-page__body h3{margin-top:2em}
.rs-page__body a{color:var(--crimson);text-decoration:underline;text-underline-offset:3px}
.rs-page__body ul,.rs-page__body ol{padding-inline-start:1.4em}
.rs-page__body li{margin-bottom:.5em}

/* Footer content runs x=166 -> 1398 in the design. */
.rs-footer .rs-wrap{width:min(100% - var(--gutter) * 2, var(--wrap-mid))}

/* =========================================================================
   26. MOBILE
   Measured against the 402px-wide frames in "Mobile Version". Everything
   below lives inside this query, so the desktop and tablet rendering
   defined above is untouched. Each vw term is the frame measurement / 402.
   ========================================================================= */
@media (max-width:640px){

  :root{
    /* --gutter is not set here: it steps by device width in section 27. */
    --header-rule:27px;
    --header-h:104px;
    --band-y:clamp(56px,22.4vw,90px);
  }

  /* The desktop band rhythm was retuned to the 1512 frames in the feedback
     pass. The phone keeps the values the mobile frames were matched to, so
     nothing on the mobile build moves. */
  .rs-intro{padding-block:clamp(48px,7vw,96px) clamp(32px,5vw,56px)}
  .rs-benefits{padding-block:var(--band-y)}
  .rs-benefits__statement{margin:0 0 1.6rem}
  .rs-brand--center{padding-block:var(--band-y)}
  .rs-brand--photo{min-height:clamp(420px,58vw,640px)}
  .rs-pills{margin-top:2rem}

  /* header: a bigger lockup, and the burger is two bars, not three */
  .rs-logo__art{height:clamp(38px,12.44vw,50px)}
  .rs-burger{width:37px;height:37px;gap:4px}
  .rs-burger span{height:3px}
  .rs-burger span:nth-child(2){display:none}

  /* hero */
  .rs-hero--home{min-height:min(96svh,880px);padding-block-start:calc(var(--header-h) + clamp(60px,27.6vw,111px))}
  .rs-hero--home h1{font-size:clamp(2.3rem,11.94vw,3rem);line-height:.875;letter-spacing:-.022em}
  .rs-hero--home .rs-hero__aside{margin-block-start:clamp(30px,10.7vw,43px)}
  .rs-hero__aside p{font-size:clamp(.78rem,3.43vw,.875rem);line-height:1.42;max-width:19ch}
  .rs-hero__aside .rs-btn{margin-top:clamp(22px,8.7vw,35px)}
  .rs-btn{font-size:clamp(.78rem,3.6vw,.906rem);padding:.8em 1.75em}
  /* the client strip sits on flat ink in the phone frame, so the foot of the
     photograph resolves sooner than it does on the desktop hero */
  .rs-hero--home:not(.rs-hero--center)::after{height:min(66%,560px);background:linear-gradient(180deg,rgba(38,35,36,0) 0%,rgba(38,35,36,.7) 30%,var(--ink) 58%)}

  /* trusted strip: two-line eyebrow, marks in one scrolling row */
  .rs-trusted{margin-block-start:clamp(40px,17.4vw,70px);padding-block-start:clamp(30px,13.9vw,56px)}
  .rs-trusted__eyebrow{font-size:clamp(1.05rem,5.72vw,1.44rem);max-width:22ch;padding-block-end:clamp(12px,4vw,16px)}
  .rs-trusted__logos{display:flex;gap:clamp(16px,6.4vw,26px);overflow-x:auto;scrollbar-width:none;padding-block:clamp(20px,7.5vw,30px)}
  .rs-trusted__logos::-webkit-scrollbar{display:none}
  .rs-trusted__logos li{flex:0 0 auto}

  /* display type, measured line by line off MOBILE HOME.png */
  .rs-intro__heading{font-size:clamp(1.7rem,8.96vw,2.25rem);line-height:.95;max-width:none}
  .rs-intro__body{font-size:clamp(.85rem,3.73vw,.94rem);line-height:1.5}
  .rs-benefits__statement{font-size:clamp(1.25rem,5.82vw,1.5rem);line-height:1.18}
  .rs-benefits__inner > div{max-width:min(100%,250px)}
  .rs-brand__col h2{font-size:clamp(2rem,10.95vw,2.75rem);line-height:.95}
  .rs-brand--photo .rs-brand__col h2{font-size:clamp(1.75rem,9.2vw,2.31rem)}

  /* MOBILE HOME.png centres the whole Platform block */
  .rs-brand--center .rs-brand__col{text-align:center;justify-items:center;margin-inline:auto}
  .rs-brand--center .rs-brand__col .rs-btn{justify-self:center}
  .rs-brand--center .rs-sublogo{margin-inline:auto}

  /* closing CTA: a tall photo band with the copy sitting low, as drawn. The
     arrow series is not in the phone frame, and the button needs air under it
     so it never sits against the footer. */
  .rs-cta{min-height:min(76svh,640px);display:flex;align-items:flex-end;
    padding-block-end:clamp(48px,17.9vw,72px)}
  .rs-cta__chev{display:none}
  .rs-cta h2{font-size:clamp(1.9rem,9.95vw,2.5rem);line-height:.95;max-width:none}

  /* footer: the marque, then the brand lockups beside the links */
  .rs-logo--lg .rs-logo__art{height:clamp(56px,20.6vw,83px)}
  .rs-footer .rs-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(12px,4.5vw,18px);row-gap:clamp(22px,7.5vw,30px);align-items:start}
  .rs-footer__top{display:contents}
  .rs-footer__top > div:first-child{grid-column:1/-1;justify-self:center;margin-block-end:clamp(10px,4vw,16px)}
  .rs-footer__brands{grid-column:1;grid-row:2;display:grid;gap:clamp(12px,4.5vw,18px);justify-items:start;margin:0}
  .rs-footer__top > nav{grid-column:2;grid-row:2}
  .rs-footer__top > div:last-child{grid-column:2;grid-row:3}
  .rs-footer__rule{display:none}
  .rs-footer__legal{grid-column:1/-1}
  /* the three brand links repeat the lockups sitting next to them, so the
     phone footer drops them exactly as the frame does */
  .rs-footer__links .rs-dup-brand{display:none}
  .rs-footer__email{white-space:nowrap}
}

/* =========================================================================
   27. GUTTER STEPS
   The side margin is the one token that wants real breakpoints rather than a
   fluid ramp — Race Space set these against handsets. Largest window first so
   the narrower ones win on source order. Nothing else lives in here, and
   nothing applies from 768px up.
   ========================================================================= */
@media (max-width:767px){ :root{ --gutter:40px } }
@media (max-width:374px){ :root{ --gutter:30px } }
@media (max-width:320px){ :root{ --gutter:20px } }


/* =========================================================================
   28. SCROLL REVEALS
   The motion brief lives in the Figma comments rather than in a prototype:
   pinned notes asking for copy to arrive line by line, stats and cards to pop
   in one after another, and sections to slide in from left or right. They all
   reduce to four primitives plus a stagger, so the whole brief is expressed
   through one attribute.

   Nothing hides until the JS has confirmed it is running (html.rs-js), so a
   failed or blocked script leaves every word on the page.
   ========================================================================= */
.rs-js [data-rs-reveal]{
  opacity:0;
  transition:opacity .68s cubic-bezier(.22,.61,.36,1),
             translate .68s cubic-bezier(.22,.61,.36,1),
             scale .68s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--rs-d,0ms);
  will-change:opacity,translate;
}
.rs-js [data-rs-reveal="up"]{translate:0 30px}
.rs-js [data-rs-reveal="right"]{translate:44px 0}
.rs-js [data-rs-reveal="left"]{translate:-44px 0}
.rs-js [data-rs-reveal="pop"]{translate:0 18px;scale:.965}
.rs-js [data-rs-reveal].is-in{opacity:1;translate:none;scale:none;will-change:auto}

/* "Text appear line by line" — rs_lines() splits the heading on its own line
   breaks and the stagger walks them. */
.rs-line{display:block}

@media (prefers-reduced-motion:reduce){
  .rs-js [data-rs-reveal]{opacity:1;translate:none;scale:none;transition:none}
}

/* -------------------------------------------------------------------------
   Masked marquees.
   Two notes ask for the same thing in different places: "slow smooth movement
   from right to left, [text|logos] start and appear only where the lines start
   and end — masked effect". The rules that bracket each strip are the mask
   edges, so the content fades in and out against them rather than being cut.
   ------------------------------------------------------------------------- */
.rs-marquee,
.rs-trusted__logos{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}

/* The homepage client strip runs as a marquee between its two hairlines. It
   keeps its grid on the phone, where the strip already scrolls by touch. */
@media (min-width:641px){
  .rs-trusted__logos.is-marquee{
    display:flex;flex-wrap:nowrap;width:max-content;min-width:100%;
    gap:clamp(28px,4.6vw,70px);grid-template-columns:none;
  }
  .rs-trusted__logos.is-marquee > li{flex:0 0 auto}
  .rs-trusted{overflow:hidden}
  .rs-trusted__track{overflow:hidden;border-block-end:1px solid var(--hair-light)}
  .rs-trusted__track .rs-trusted__logos{border-block-end:0}
  .rs-trusted__logos.is-marquee.is-running{animation:rs-scroll 46s linear infinite}
  .rs-trusted__track:hover .rs-trusted__logos.is-running{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .rs-trusted__logos.is-marquee.is-running{animation:none}
}

/* The header keeps the charcoal slightly open once it sticks, as the note on
   the nav asks, rather than going fully solid. */
.rs-header.is-scrolled{background:rgba(38,35,36,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@supports not (backdrop-filter:blur(2px)){
  .rs-header.is-scrolled{background:rgba(38,35,36,.96)}
}

/* Case-study cards in the Accelerator carousel lift on hover, as note #2 asks;
   the click-through already exists. */
.rs-cf__card{transition:opacity .45s,transform .45s,box-shadow .45s}
.rs-cf__card.is-active:hover{transform:scale(1.03);box-shadow:0 18px 46px rgba(0,0,0,.42)}
@media (prefers-reduced-motion:reduce){
  .rs-cf__card.is-active:hover{transform:none}
}