/* =========================================================================
   Race Space — page-level components
   Accelerator, Platform, case studies, Contact, About.
   Mobile-first: every block starts single-column and earns its columns.
   ========================================================================= */

/* --- shared: kicker block with hairline (PROOF, NOT PROMISES / RESULTS SO FAR / FAQS) --- */
.rs-kickerblock{margin-bottom:clamp(24px,4vw,40px)}
.rs-kickerblock .rs-kicker{margin:0 0 .9rem;max-width:14ch}
.rs-kickerblock--between{display:grid;gap:.9rem}

/* =========================================================================
   ACCELERATOR
   ========================================================================= */

/* Hero and statement share one photograph, under a single top-down wash.
   The stops are keyed to viewport width rather than a percentage of the band,
   so they always land on the same copy whatever its length; a percentage was
   putting the transition halfway through "...when it works."

   Flat #262324 holds through the headline and stops just above the paragraph
   (25vw = 378px at 1512; the headline ends at 398 with the header at its
   current height). The picture is then open to .76-.64 behind that paragraph,
   which is what puts a subtle but genuinely visible image inside the line of
   the copy, and keeps opening so the swimmers read clearly lower down. White
   copy still clears 7:1 against the brightest splashes at that alpha. */
.rs-accintro{position:relative;overflow:hidden;background:var(--ink)}
.rs-accintro::after{
	content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
	background:linear-gradient(180deg,
		var(--ink) 0,
		var(--ink) clamp(240px,25vw,378px),
		rgba(38,35,36,.76) clamp(285px,29vw,438px),
		rgba(38,35,36,.64) clamp(350px,36vw,544px),
		rgba(38,35,36,.45) clamp(470px,52vw,786px),
		rgba(38,35,36,.18) 100%);
}
.rs-accintro > .rs-hero,.rs-accintro > .rs-band{background:none;position:relative;z-index:1}
/* Feedback: "this line here … it is sitting on top of the pink and looks weird".
   The supplied export (rs-acc-statement.jpg, 1512x788) carries the top four
   rows of the crimson band baked into its own bottom edge, so a mismatched
   crimson hairline drew directly above the real band. Overscanning the picture
   lets .rs-accintro's overflow clip those rows off. Height wins over the
   `inset:0` bottom, which the over-constrained box drops. */
.rs-accintro .rs-media-bg{height:calc(100% + 16px)}
/* ACCELERATOR.png: the headline cap sits 164px below the header hairline and
   breaks after "costs"; the statement heading is 64px on two lines. */
.rs-hero--bare{min-height:auto;overflow:visible;padding-block-start:calc(var(--header-h) + clamp(40px,10.48vw,159px))}
.rs-accintro h1{max-width:min(100%,960px);margin-inline:auto}

/* editorial two-line statement over the same photograph — stacked in the
   design, not two columns. */
.rs-statement{padding-block:clamp(20px,3vw,40px) clamp(56px,9vw,120px)}
.rs-statement h2{max-width:min(100%,940px);font-size:clamp(1.9rem,4.23vw,4rem);line-height:1.05}
.rs-statement .rs-lede{max-width:min(100%,750px);margin-top:clamp(18px,2.6vw,32px)}

/* crimson "growth partner" band. Measured: the heading and its paragraph are
   both ink on crimson and right-aligned to the content edge; PROOF, NOT
   PROMISES is off-white, all caps, and breaks after NOT. */
.rs-partner{color:var(--ink)}
/* 665px in the 1512 frame — a ch-based max-width resolves against the wrapper's
   own 16px here, which is why this block was collapsing to four lines. */
.rs-partner__head{width:min(100%,665px);margin-inline-start:auto;text-align:end}
/* 66px, derived from the rendered width of "A growth partner," in the frame
   (550px) rather than its cap height, which the comma descender distorts. */
.rs-partner__head h2{margin:0 0 1.15rem auto;color:var(--ink);max-width:min(100%,620px);font-size:clamp(2rem,4.37vw,4.1rem)}
.rs-partner__head p{font-size:clamp(.95rem,1.06vw,1rem);line-height:1.62;color:var(--ink)}
.rs-partner__proof{margin-top:clamp(48px,8vw,90px);color:#F4F4F4}
/* Figma: Inter Extra Bold 84px, uppercase — not the Acumin kicker face. */
.rs-partner__prooftitle{color:#F4F4F4;font-family:var(--font-sans);font-weight:800;font-style:normal;text-transform:uppercase;letter-spacing:-.015em;line-height:.99;font-size:clamp(2.2rem,5.55vw,5.25rem);max-width:9ch;margin:0 0 .38em}
.rs-partner .rs-hairline{background:rgba(255,255,255,.55)}
.rs-partner .rs-btn{margin-top:clamp(28px,4vw,44px)}
/* the four proof figures: 88px Extra Bold in the frame, not a hairline weight */
.rs-partner .rs-stat__fig{font-weight:800;font-size:clamp(2.4rem,5.82vw,5.5rem);line-height:1;letter-spacing:-.035em}
.rs-partner .rs-stat__label{font-size:clamp(.72rem,1.45vw,1.375rem);font-weight:700;letter-spacing:.01em;text-transform:uppercase;opacity:1;margin-top:.55rem}

/* 4-up stat row */
.rs-stats--4{grid-template-columns:repeat(2,1fr)}
@media (min-width:820px){.rs-stats--4{grid-template-columns:repeat(4,1fr)}}

/* how it works: the fee diagram.
   Measured on ACCELERATOR.png (1512 frame): one dashed rule across the content
   column at y3036; a 348px rounded crimson diamond centred on the page with its
   own centre 66px ABOVE the rule; the growth copy above the rule starting at
   x985 (71% across); the baseline label above it at x255; the baseline copy
   below the rule at the same x. The right column carries no label. */
.rs-hiw-band .rs-lede{max-width:min(100%,830px)}
/* deep enough that the top vertex of the diamond clears the lede above it */
.rs-hiw{margin-top:clamp(60px,9vw,140px);position:relative;text-align:start}
.rs-hiw__above{display:grid;gap:clamp(20px,3vw,34px)}
.rs-hiw__rule{
	position:relative;height:1px;margin-block:clamp(14px,2vw,22px) 0;
	background-image:linear-gradient(90deg,rgba(255,255,255,.85) 0 7px,transparent 7px 15px);
	background-size:15px 1px;background-repeat:repeat-x;
}
/* the round cap at each end of the rule */
.rs-hiw__rule::before,.rs-hiw__rule::after{content:"";position:absolute;inset-block-start:50%;width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.9);translate:0 -50%}
.rs-hiw__rule::before{inset-inline-start:-1px}
.rs-hiw__rule::after{inset-inline-end:-1px}
/* --d is the SQUARE's side; rotated 45deg it presents a 348px-wide diamond,
   which is what the frame measures. Its centre sits 66px above the rule. */
.rs-hiw__diamond{
	--d:clamp(86px,16.27vw,246px);
	position:absolute;inset-inline-start:50%;inset-block-start:0;
	/* the frame samples (134,28,56) over the scrimmed photograph, which is
	   #ED1750 at .49 — the diamond is translucent, not solid */
	width:var(--d);height:var(--d);background:rgba(237,23,80,.49);
	border-radius:calc(var(--d) * .1);
	translate:-50% calc(-50% - var(--d) * .268);rotate:45deg;
}
.rs-hiw__label{display:block;font-size:clamp(.72rem,.93vw,.88rem);font-weight:700;letter-spacing:.02em;text-transform:uppercase;line-height:1.3;color:#fff;max-width:17ch}
.rs-hiw p{font-size:clamp(.8rem,.93vw,.88rem);line-height:1.5;margin:0;color:var(--grey-2)}
.rs-hiw__below{margin-block-start:clamp(16px,2.2vw,26px)}
.rs-hiw__below p{max-width:34ch}
.rs-hiw__growth{max-width:34ch}

/* Below 900px the diamond and the horizontal rule stop working, so the two
   halves simply stack with the label above its own paragraph. */
@media (max-width:899px){
	.rs-hiw__diamond{display:none}
	.rs-hiw__growth,.rs-hiw__below p{max-width:none}
}
@media (min-width:900px){
	.rs-hiw{padding-inline:4.2%}
	.rs-hiw__above{grid-template-columns:1fr 1fr;align-items:end;gap:0}
	/* the growth paragraph sits high on the right, the label low on the left */
	.rs-hiw p.rs-hiw__growth{grid-area:1 / 2;align-self:start;margin-inline-start:46%}
	.rs-hiw__label{grid-area:1 / 1;align-self:end}
	.rs-hiw__rule{margin-inline:-4.4%}
	.rs-hiw__below p{margin-block-start:clamp(18px,2.4vw,28px)}
}

/* what we do: pill cloud. Capped at the width the frame uses so the seven
   services break 4 + 3 rather than 5 + 2. */
/* Feedback: the pills sat marooned in a 267px gap. ACCELERATOR.png runs these
   two white sections as one block with 122px between the pills and the next
   heading, so the two full band paddings are replaced by half of one. */
.rs-whatwedo{text-align:center;padding-block-end:clamp(28px,3.44vw,52px)}
.rs-foryou{padding-block-start:clamp(28px,3.44vw,52px)}
.rs-whatwedo .rs-lede{margin-inline:auto;max-width:min(100%,640px)}
.rs-whatwedo .rs-pills{max-width:min(100%,900px);margin-inline:auto}

/* this is for you if… */
.rs-foryou .rs-check li{grid-template-columns:1.4rem 1fr;font-size:clamp(.95rem,1.06vw,1rem)}
.rs-foryou .rs-check svg{color:var(--ink)}
/* 64.6px in the frame — measured from the rendered width of the string, not
   from its cap height, which the ellipsis and the y descender both distort. */
.rs-foryou h2{font-size:clamp(1.9rem,4.27vw,4rem)}
@media (min-width:900px){
	/* the copy holds the left half; the chevron owns the right */
	.rs-foryou .rs-wrap > div{max-width:56%}
}
/* Measured on ACCELERATOR.png: arrow-series-full-red renders at its natural
   643px viewBox width with its right edge flush to the page edge, its top 604px
   below the band top, and 344px of it running past the foot of the band. */
.rs-foryou__deco{
	--rs-arrow-w:clamp(240px,42.5vw,660px);
	position:absolute;inset-inline:auto 0;inset-block-end:calc(var(--rs-arrow-w) * -.535);
	width:var(--rs-arrow-w);z-index:0;pointer-events:none;
}
.rs-foryou__deco>svg{width:100%;height:auto;display:block}
@media (max-width:899px){.rs-foryou__deco{--rs-arrow-w:300px;opacity:.35}}

/* results: marquee */
/* Feedback: the ticker read too small and sat off-centre between its rules.
   ACCELERATOR.png: 108px between the two hairlines with the caps dead centre. */
.rs-marquee{overflow:hidden;border-block:1.5px solid var(--hair-light);padding-block:clamp(14px,2.58vw,39px);margin-block:clamp(20px,3vw,30px)}
.rs-marquee__inner{display:flex;width:max-content}
.rs-marquee__run{display:flex;gap:1.6rem;padding-inline-end:1.6rem;white-space:nowrap}
.rs-marquee.is-running .rs-marquee__inner{animation:rs-scroll 42s linear infinite}
.rs-marquee.is-static{overflow-x:auto}
.rs-marquee.is-static .rs-marquee__inner{width:auto}
/* @keyframes rs-scroll now lives in style.css so the homepage strip can use
   it too — see the note there. */
/* 24.7px regular caps, no tracking — measured off the frame. */
.rs-marquee__item{font-size:clamp(.95rem,1.63vw,1.544rem);font-weight:400;letter-spacing:0;line-height:1.2;text-transform:uppercase}
.rs-marquee__item b{color:var(--crimson);font-weight:700}
.rs-marquee__sep{opacity:.45}

/* results: coverflow carousel */
.rs-coverflow{position:relative;margin-top:clamp(24px,4vw,40px)}
.rs-cf__viewport{display:flex;gap:clamp(14px,2.4vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;padding-block:8px;scrollbar-width:none}
.rs-cf__viewport::-webkit-scrollbar{display:none}
/* The cards are LIGHT in the design, not dark: a paper panel with ink type.
   Measured at 1512: active card 339 wide with a 166px photo above a panel whose
   rows sit on a 35px inset; the inactive cards are 200 wide and washed out. */
.rs-cf__card{
	flex:0 0 min(78vw,339px);scroll-snap-align:center;background:var(--paper);border-radius:20px;
	overflow:hidden;opacity:.55;transform:scale(.9);transition:opacity .35s,transform .35s;color:var(--ink);
}
.rs-cf__card.is-active{opacity:1;transform:scale(1)}
.rs-cf__media{aspect-ratio:2/1}
/* This card pulls the same attachment as the explore cards, which is now a
   clean 900:620 photograph rather than a hero export with a fade baked into
   it. The old top anchor was there to keep that fade out of a 2:1 frame;
   with a clean image it would instead throw away the bottom third of a
   deliberately framed picture, so the crop is centred. */
.rs-cf__media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.rs-cf__rows{padding:.4rem clamp(1.1rem,2.3vw,2.2rem) clamp(1rem,1.6vw,1.5rem)}
/* Feedback: the card rules read too thin. The frame draws them 2px at 50%
   over the #f4f4f4 card — still editorial, but present. */
.rs-cf__row{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;padding-block:.75rem;border-block-end:2px solid rgba(38,35,36,.5)}
.rs-cf__row:last-child{border-block-end:0}
.rs-cf__k{font-family:var(--font-display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:clamp(.62rem,.86vw,.82rem);letter-spacing:.01em;line-height:1.15;color:var(--ink);opacity:.9;max-width:8ch}
/* Feedback: "TrailsPlus Mountain Series" was breaking over three loosely-led
   lines. Tight leading plus room for the value keeps it to
   TRAILSPLUS / MOUNTAIN SERIES. */
.rs-cf__v{font-weight:700;font-size:clamp(.8rem,1.26vw,1.19rem);line-height:1.08;text-align:end;text-transform:uppercase;letter-spacing:-.005em;color:var(--ink);min-width:0;flex:1 1 auto;text-wrap:balance}
.rs-cf__k{flex:0 0 auto}
/* the growth figure is the one big number on the card: 49px in the frame */
.rs-cf__row--growth{align-items:center}
.rs-cf__v--big{font-weight:700;font-size:clamp(1.6rem,3.24vw,3.06rem);line-height:1;letter-spacing:-.03em;text-transform:none}
.rs-cf__more{color:var(--ink);font-family:var(--font-display);font-style:italic;font-weight:700;font-size:clamp(.62rem,.86vw,.82rem);letter-spacing:.01em;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between;width:100%;gap:.4em}
.rs-cf__more svg{width:.8em;height:.8em}
.rs-cf__nav{display:flex;gap:.6rem;justify-content:center;margin-top:1.4rem}
.rs-cf__btn{width:42px;height:42px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);background:none;color:#fff;display:grid;place-items:center;cursor:pointer}
.rs-cf__btn:hover{background:rgba(255,255,255,.12)}
.rs-cf__btn svg{width:16px;height:16px}

/* Results runs into the team band without a seam in the design: the picture
   grades down to #262324 at its foot and the next band picks it back up. */
/* Feedback: "the dark line/space between white section and image section that
   should not be there, close the gap". rs-acc-results.jpg (1518x922) has its
   top 13 rows baked out to flat #1e1e1e by the export, which rendered as a
   ~14px dark rule under the white band. Anchor the picture to the foot of the
   band and overscan the top so those rows are clipped away. */
.rs-results .rs-media-bg{inset-block-start:auto;inset-block-end:0;height:calc(100% + 20px)}
.rs-results::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:min(42%,340px);z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(38,35,36,0) 0%,rgba(38,35,36,.6) 45%,var(--ink) 100%)}
.rs-teamband::after{content:"";position:absolute;inset-inline:0;inset-block-start:0;height:min(38%,360px);z-index:0;pointer-events:none;background:linear-gradient(180deg,var(--ink) 0%,rgba(38,35,36,.6) 55%,rgba(38,35,36,0) 100%)}
.rs-results > .rs-wrap,.rs-teamband > .rs-wrap{z-index:1}
/* With the cards unfilled, the picture behind them carries the contrast. The
   frame keeps this band close to flat ink (measured mean 36 at the edges,
   58 mid-band), so it takes a scrim of its own. z-index 1 is required: a
   ::before is the element's first child and would otherwise paint beneath the
   absolutely-positioned .rs-media-bg. */
.rs-teamband::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(38,35,36,.2)}

/* team */
.rs-team{display:grid;gap:clamp(14px,2.4vw,20px);grid-template-columns:1fr;margin-top:clamp(32px,5vw,52px)}
@media (min-width:560px){.rs-team{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){
	/* Figma runs 1 / 4 / 4 / 1 with rows 1 and 3 offset by half a card, so the
	   block reads as a staggered pyramid. Nine columns, each card spanning two,
	   reproduces it — every position is placed explicitly so nothing reflows. */
	/* The grid is wider than the content column: 1200px in a 1512 frame, cards
	   245 wide on a 271 pitch. */
	/* Feedback: "the card section is not centred, there is too much space on the
	   left". The grid is deliberately wider than the content column, and auto
	   margins clamp to zero once a box overflows its container — so it was
	   pinned to the wrap's left edge and spilled right. Halving the overflow as
	   an explicit margin centres it on the page again. Width and gap now give
	   the frame's 218px card on a 271px pitch. */
	/* The pitch and overall width are left as they were — narrowing the cards to
	   the frame's 218px pushed the role titles onto a third line and made every
	   card ~40px taller than the design, which was worse than the 33px of extra
	   width. Only the centring changes. */
	.rs-team{
		--rs-team-w:min(100vw - var(--gutter) * 2,79.4vw,1360px);
		grid-template-columns:repeat(9,1fr);
		width:var(--rs-team-w);
		margin-inline:calc((100% - var(--rs-team-w)) / 2);
	}
	.rs-team > li{grid-column:span 2}
	/* Bruno sits over the Rob/Daniel pair, not centred in the row. */
	.rs-team > li:nth-child(1){grid-area:1 / 2 / auto / span 2}
	.rs-team > li:nth-child(2){grid-area:2 / 1 / auto / span 2}
	.rs-team > li:nth-child(3){grid-area:2 / 3 / auto / span 2}
	.rs-team > li:nth-child(4){grid-area:2 / 5 / auto / span 2}
	.rs-team > li:nth-child(5){grid-area:2 / 7 / auto / span 2}
	.rs-team > li:nth-child(6){grid-area:3 / 2 / auto / span 2}
	.rs-team > li:nth-child(7){grid-area:3 / 4 / auto / span 2}
	.rs-team > li:nth-child(8){grid-area:3 / 6 / auto / span 2}
	.rs-team > li:nth-child(9){grid-area:3 / 8 / auto / span 2}
	.rs-team > li:nth-child(10){grid-area:4 / 7 / auto / span 2}
}
.rs-team li{list-style:none}
/* Feedback: the cards carry no fill in the design — the photograph runs
   straight through them behind a crimson outline. */
.rs-teamcard{display:flex;gap:.8rem;align-items:center;border:1.5px solid var(--crimson);border-radius:var(--radius-card);padding:.75rem;height:100%;background:none}
.rs-teamcard__pic{width:68px;height:96px;border-radius:12px;overflow:hidden;flex:none;filter:grayscale(1) contrast(1.08)}
.rs-teamcard__pic img{width:100%;height:100%;object-fit:cover}
.rs-teamcard__name{display:block;font-weight:700;font-size:.85rem;line-height:1.2}
.rs-teamcard__rule{width:26px;height:1px;background:var(--crimson);margin:.5rem 0}
.rs-teamcard__blurb{font-size:.72rem;line-height:1.45;color:var(--grey-2);margin:0}
.rs-team-statement{margin-top:clamp(36px,5vw,56px);max-width:26ch;color:var(--crimson);font-size:clamp(1.3rem,3.4vw,1.9rem);font-weight:800;line-height:1.15}
.rs-team-statement + .rs-btn{margin-top:1.4rem}

/* FAQs */
.rs-faq{border-block-start:1px solid rgba(255,255,255,.45)}
.rs-faq__item{border-block-end:1px solid rgba(255,255,255,.45)}
.rs-faq__trigger{
	width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
	background:none;border:0;padding:1.15rem 0;text-align:start;cursor:pointer;color:#fff;
	font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(.8rem,2.2vw,.92rem);line-height:1.35;
}
.rs-faq__icon{flex:none;width:16px;height:16px;transition:transform .25s}
.rs-faq__trigger[aria-expanded="true"] .rs-faq__icon{transform:rotate(90deg)}
/*
 * Answers are black, not white: it separates the answer from the row of
 * questions at a glance, so an open panel reads as a different kind of thing
 * rather than more of the same list.
 *
 * True black rather than --ink, and that is deliberate. On this crimson the
 * three candidates measure 4.84:1 for #000, 4.34:1 for white and only 3.59:1
 * for --ink (#262324) — so black is both what the design asks for and the only
 * one of the three that clears AA for body text. Do not "brand-correct" this
 * to --ink; it would fail contrast.
 */
.rs-faq__panel{padding-block:0 1.4rem;max-width:66ch;font-size:.95rem;line-height:1.6;color:#000}

/* accelerator contact form band */
/* ACCELERATOR.png gives this band 823px overall with 55px between the
   paragraph and "Prefer to talk?" — the build had 124/124 padding and only
   21px, which is what made the button read as sitting too high against the
   copy. The padding lands a little under the frame's 242/195 because the build
   carries a consent row the frame does not, which adds ~107px to the form
   column; 190/150 puts the band back on the frame's total height. */
.rs-tellus{padding-block:clamp(64px,12.57vw,190px) clamp(56px,9.92vw,150px)}
.rs-tellus .rs-wrap{display:grid;gap:clamp(32px,5vw,64px)}
.rs-tellus .rs-lede + .rs-btn,.rs-tellus .rs-lede ~ .rs-btn{margin-block-start:clamp(24px,3.64vw,55px)}
@media (min-width:900px){.rs-tellus .rs-wrap{grid-template-columns:1fr 1fr;align-items:start}}
/* The supplied hillside shot is a raw camera file, not one of the pre-graded
   frame exports, so the band needs its own scrim for the copy and the form to
   read. Same for the finish-arch shot behind How it works. */
.rs-tellus::before,.rs-hiw-band::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(38,35,36,.55)}
/* The hillside shot puts its brightest, busiest area exactly where the form
   sits, so the scrim deepens across to the right — the picture still reads
   behind the heading, and the crimson labels and rules read over it. */
/* The supplied photograph arrives already graded to the frame's mean luma of
   30, so the wash keeps the same left-to-right shape but only a fraction of
   its former strength — just enough behind the form column for the crimson
   field rules to hold. Scrimming a pre-graded picture at the old 42-88% is
   what flattened this band to black. */
.rs-tellus::before{background:linear-gradient(90deg,rgba(38,35,36,.05) 0%,rgba(38,35,36,.1) 42%,rgba(38,35,36,.26) 68%,rgba(38,35,36,.34) 100%)}
/* Feedback: sit the picture on the dark ground and lower its opacity rather
   than scrimming a full-strength photograph, so the fee diagram and its copy
   read cleanly. ACCELERATOR.png keeps this band within a few points of flat
   ink (measured mean 37-42 against ink at 38,35,36). */
.rs-hiw-band{background:var(--ink)}
.rs-hiw-band .rs-media-bg img{opacity:.3}
.rs-hiw-band::before{background:rgba(38,35,36,.35)}
/* the scrim has to sit above the picture and below the copy */
.rs-tellus > .rs-wrap,.rs-hiw-band > .rs-wrap{position:relative;z-index:2}

/* =========================================================================
   FORMS  (two styles from the design)
   ========================================================================= */
/* CONTACT.png and the Accelerator's contact band use the same field: you type
   on a crimson rule and the caption sits UNDER it, so the field is on top of
   its label. Measured in the 1512 frame: column 429 wide, rule 1px crimson,
   single-line field 40px, textarea 70px, label cap 10px below the rule at
   13.5px uppercase with no tracking, 31px from the last label to the button.
   Nothing else in the block draws a rule — the consent row is not a field. */
.rs-form{display:grid;gap:0;width:min(100%,429px)}
.rs-form__field{display:block}
.rs-form__label{display:block;margin-block-start:clamp(4px,.42vw,6.4px);font-size:clamp(.72rem,.89vw,.85rem);font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--crimson);line-height:1.26}
.rs-form__req{color:var(--crimson)}
.rs-form input[type=text],.rs-form input[type=email],.rs-form input[type=url],.rs-form textarea{
	display:block;width:100%;background:transparent;border:0;color:#fff;font:inherit;
	font-size:clamp(.9rem,1.06vw,1rem);line-height:1.2;
	height:clamp(32px,2.65vw,40px);padding:0 0 .3rem;
	border-block-end:1px solid var(--crimson);border-radius:0;
}
.rs-form textarea{resize:vertical;height:clamp(56px,4.63vw,70px);min-height:56px;padding-block-start:.35rem}
.rs-form input:focus,.rs-form textarea:focus{outline:none;border-block-end-color:#fff}
.rs-form input:focus-visible,.rs-form textarea:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.rs-form ::placeholder{color:rgba(255,255,255,.4)}

/* The consent line and the submit button were sitting on the same 1.4rem grid
   gap as the fields, so the checkbox crowded the last input and the button
   crowded the checkbox. Both get their own breathing room. */
.rs-form__consent{font-size:.8rem;line-height:1.5;color:var(--grey-2);margin-block-start:clamp(14px,1.85vw,28px)}
.rs-form__consent label,.rs-form__consent .wpcf7-list-item label{display:grid;grid-template-columns:1.15rem 1fr;gap:.7rem;align-items:start;margin:0;cursor:pointer}
.rs-form__consent .wpcf7-list-item{margin:0;display:block}
.rs-form__consent .wpcf7-list-item-label{display:block}
.rs-form__consent input{margin-top:.25rem;accent-color:var(--crimson);width:1.05rem;height:1.05rem}
.rs-form__consent a{text-decoration:underline;text-underline-offset:3px}
.rs-form__hp{position:absolute!important;left:-9999px}
.rs-form__note{font-size:.78rem;color:var(--grey);margin:0}
.rs-form .rs-btn{justify-self:start;margin-block-start:clamp(18px,2.05vw,31px)}

/* CF7 shims so the plugin's own markup inherits the design. CF7 runs its own
   autop over the form body, so each field arrives wrapped in a <p> with a <br>
   between the control and its caption — both are neutralised here so the
   spacing is the theme's, not the plugin's. */
.rs-form .wpcf7-form-control-wrap{display:block}
.rs-form__field > p,.rs-form__consent > p{margin:0}
.rs-form__field br{display:none}
.rs-form form > p:has(.wpcf7-submit){margin:0}
.rs-form .wpcf7-not-valid-tip{color:#ffd2dc;font-size:.75rem;margin-top:.35rem}
.rs-form .wpcf7-response-output{border:1px solid rgba(255,255,255,.35)!important;border-radius:10px;padding:.9rem 1rem!important;margin:1rem 0 0!important;font-size:.85rem}
.rs-form .wpcf7-spinner{display:inline-block;margin-inline-start:.6rem}

/* =========================================================================
   PLATFORM
   Every number below is measured off PLATFORM.jpg at its 1512 frame width and
   expressed as a vw fraction of it, so the page keeps the design's proportions
   at any width. Type sizes come from rendered string widths, not cap heights.
   ========================================================================= */

/* --- hero: one centred column, held in the middle of the band ----------- */
.rs-hero--plat{min-height:clamp(560px,57.9vw,880px);padding-block-start:calc(var(--header-h) + clamp(30px,6.6vw,100px))}
/* PLATFORM.jpg: the hero photograph does not stop at the foot of the hero — it
   carries on behind the teal band's rounded top so the two corner notches beside
   the arc show the picture, not the page's ink. The photo therefore runs one
   band-radius past the hero box and the hero stops clipping it; the teal band is
   a later sibling with its own stacking context, so it paints over the overlap
   and only the notches let the picture through. */
.rs-hero--plat{overflow:visible}
.rs-hero--plat > .rs-media-bg{inset-block-end:calc(var(--radius-band) * -1);overflow:hidden;border-end-start-radius:0;border-end-end-radius:0}
.rs-hero--plat + .rs-threeways{position:relative;z-index:1}
.rs-hero--plat .rs-hero__grid{gap:clamp(12px,1.75vw,26px)}
.rs-hero--plat .rs-hero__eyebrow{margin-bottom:clamp(16px,2.25vw,34px)}
.rs-hero--plat .rs-hero__aside p{margin-bottom:0}
/* the frame breaks the headline after "interest" and holds the body to 665px */
.rs-hero--plat h1{max-width:min(100%,800px);margin-inline:auto}
.rs-hero--plat .rs-lede{max-width:min(100%,668px);margin-inline:auto}
.rs-hero--plat .rs-hero__aside .rs-btn{margin-top:clamp(24px,3.6vw,55px)}
.rs-hero--plat .rs-scrollcue{margin-top:clamp(22px,3.2vw,48px)}

/* --- THREE WAYS: white uppercase heading on teal, light rules ------------ */
/* frame: band top 875, heading cap 1006, first rule 1296, band foot 1923 */
.rs-threeways{padding-block:clamp(52px,7.94vw,120px) clamp(48px,5.82vw,88px)}
/* Inter Extra Bold 85px, uppercase and off-white — the same treatment as
   PROOF, NOT PROMISES on the Accelerator, not the Acumin kicker face. */
.rs-threeways__title{
	color:#F4F4F4;font-family:var(--font-sans);font-weight:800;text-transform:uppercase;
	letter-spacing:-.015em;line-height:.98;font-size:clamp(2.2rem,5.62vw,5.3rem);
	max-width:min(100%,692px);margin:0 0 clamp(24px,3.44vw,52px);
}
/* rules are white at 48% on the teal, not black */
.rs-numlist{list-style:none;margin:0;padding:0;border-block-start:1.5px solid rgba(255,255,255,.48)}
.rs-numlist li{
	display:grid;grid-template-columns:minmax(0,clamp(48px,8.47vw,128px)) minmax(0,1fr);
	gap:0;align-items:start;padding-block:clamp(18px,2.51vw,38px) clamp(18px,2.38vw,36px);
	border-block-end:1.5px solid rgba(255,255,255,.48);
}
/* 128px Bold; line-height .727 puts the digit's cap on the box top so it
   lines up with the heading beside it. */
.rs-numlist__n{font-size:clamp(2.4rem,8.47vw,8rem);font-weight:700;line-height:.727;color:var(--ink);opacity:1;margin-block-start:.06em;letter-spacing:-.02em}
.rs-numlist h3{margin:0 0 .64em;font-size:clamp(1.15rem,2.38vw,2.25rem);line-height:1;color:var(--ink);letter-spacing:-.02em}
.rs-numlist p{margin:0;color:var(--ink);font-size:clamp(1rem,1.32vw,1.25rem);line-height:1.2;max-width:min(100%,640px)}
@media (max-width:639px){
	.rs-numlist li{grid-template-columns:1fr;gap:.4rem}
	.rs-numlist__n{margin-block-start:0}
}

/* --- RUN YOUR EVENT: centred head, teal icon grid over the photograph ---- */
.rs-adminband{padding-block:clamp(56px,8.93vw,135px) clamp(56px,8.47vw,128px);text-align:center}
.rs-adminband h2{font-size:clamp(1.9rem,4.23vw,4rem);line-height:1.05;max-width:min(100%,760px);margin:0 auto clamp(18px,2.18vw,33px)}
.rs-adminband .rs-lede{max-width:min(100%,470px);margin-inline:auto}
/* five items, three then two, each centred on its own column */
.rs-features{
	list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;
	margin:clamp(34px,5.22vw,79px) 0 0;gap:clamp(34px,4.3vw,65px) clamp(28px,5.95vw,90px);
}
.rs-features li{display:block;width:min(100%,clamp(180px,15.9vw,240px))}
/* the supplied artwork is drawn at 50px in the frame */
.rs-features__icon{width:clamp(34px,3.31vw,50px);height:auto;margin:0 auto clamp(16px,1.65vw,25px)}
.rs-features h3{margin:0 0 clamp(12px,1.45vw,22px);font-size:clamp(.82rem,1.29vw,1.22rem);font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--teal);line-height:1.08}
.rs-features p{margin:0;font-size:clamp(.85rem,1.06vw,1rem);line-height:1.2;color:var(--teal)}

/* --- SWITCHING IS EASIER ------------------------------------------------ */
/* frame: heading cap 2993, quote block right-aligned and 86px below the copy,
   the platform chevron bleeding off the bottom-left corner at 760px wide. */
.rs-switch{padding-block:clamp(56px,9.85vw,149px) clamp(56px,10.25vw,155px)}
.rs-switch .rs-wrap{display:block}
.rs-switch__head{width:min(100%,620px)}
.rs-switch__head h2{font-size:clamp(1.9rem,4.27vw,4.05rem);line-height:1.05;margin:0 0 clamp(20px,2.45vw,37px)}
.rs-switch__head .rs-lede{max-width:min(100%,590px)}
.rs-switch__quote{margin:clamp(40px,5.7vw,86px) 0 0 auto;width:min(100%,460px);text-align:end}
/* 47px Bold, right-ragged, in the brand teal */
.rs-pullquote{color:var(--teal);font-size:clamp(1.3rem,3.11vw,2.94rem);font-weight:700;line-height:1.03;letter-spacing:-.02em;margin:0}
.rs-pullquote cite{display:block;margin-block-start:clamp(20px,2.51vw,38px);font-size:clamp(.82rem,1.3vw,1.22rem);font-weight:700;font-style:normal;letter-spacing:0;text-transform:uppercase}
.rs-quote__by{font-style:normal}
/* the pale chevron watermark: 760 x 703 in the frame, its top-left corner
   72px off the left edge and 203px of it clipped by the foot of the band. */
.rs-switch__wm{--rs-wm:min(50.3vw,760px);position:absolute;width:var(--rs-wm);inset-inline-start:calc(var(--rs-wm) * -.095);inset-block-end:calc(var(--rs-wm) * -.267);z-index:0;pointer-events:none}
.rs-switch__wm>svg{width:100%;height:auto}
@media (max-width:899px){.rs-switch__wm{--rs-wm:120vw;opacity:.7}}

/* --- TRUSTED BY ORGANISERS --------------------------------------------- */
/* frame: off-white heading right-aligned, a hairline above and below the
   quote, and the quote itself ink and left-aligned. */
.rs-trustband{padding-block:clamp(56px,9.66vw,146px) clamp(56px,8.47vw,128px);text-align:start}
.rs-trustband__title{
	color:#F4F4F4;font-size:clamp(1.9rem,4.23vw,4rem);line-height:1.05;
	max-width:min(100%,700px);margin:0 0 clamp(24px,3.5vw,53px) auto;text-align:end;
}
.rs-trustband .rs-hairline{background:rgba(255,255,255,.48);height:1.5px}
/* the quote runs flush to the content edge here, so the slider drops the
   gutter it keeps for the arrows on the homepage. */
.rs-trustband .rs-slider{margin-block:clamp(22px,2.91vw,44px) clamp(14px,1.65vw,25px);padding-inline:0}
.rs-trustband .rs-slider__btn{inset-block-start:auto;inset-block-end:-8px;translate:none}
.rs-trustband .rs-slider__btn--prev{inset-inline-start:auto;inset-inline-end:44px}
.rs-trustband .rs-quote{text-align:start;max-width:min(100%,690px);margin-inline:0;color:var(--ink)}
.rs-trustband .rs-quote__text{font-size:clamp(1rem,1.59vw,1.5rem);line-height:1.21;font-weight:400}
.rs-trustband .rs-quote__by{margin-block-start:clamp(14px,1.39vw,21px);font-size:clamp(.82rem,1.3vw,1.22rem);letter-spacing:0;font-style:normal;color:var(--ink)}

/* --- SEE IT IN ACTION --------------------------------------------------- */
/* frame: the band is 1010px deep so the whole cyclist stays in shot, with the
   copy stacked in the top-left corner rather than centred on the band. */
.rs-cta--plat{min-height:clamp(480px,66.8vw,1010px);align-items:flex-start;padding-block:clamp(64px,12.4vw,187px) clamp(48px,8vw,120px)}
.rs-cta--plat .rs-media-bg img{object-position:50% 45%}
@media (min-width:900px){
	.rs-cta--plat .rs-cta__inner{margin-inline-start:0;max-width:min(100%,430px);text-align:start}
}
.rs-cta--plat h2{font-size:clamp(2.2rem,4.72vw,4.46rem);line-height:.9;max-width:min(100%,340px);margin:0 0 clamp(24px,2.98vw,45px)}
.rs-cta--plat .rs-lede{max-width:min(100%,420px)}
.rs-cta--plat .rs-cta__inner .rs-btn{margin-top:clamp(24px,2.98vw,45px)}

/* =========================================================================
   CASE STUDIES
   ========================================================================= */
/* Every size below is read off the 1512px-wide frames, so the vw term is the
   frame measurement / 1512. */
.rs-cs-hero{position:relative;display:flex;align-items:flex-end;
	min-height:clamp(460px,47.55vw,719px);
	padding-block:calc(var(--header-h) + clamp(40px,8.7vw,132px)) clamp(18px,1.79vw,27px);
	overflow:hidden}
/* The photograph runs full bleed, straight under the transparent header, as
   it does in the frames. Where a subject's head would otherwise be clipped by
   the header, the focal point moves instead — see the "Hero focal point"
   field. 0% is the top of the photograph, 100% the bottom. */
.rs-cs-hero .rs-media-bg img{object-position:50% var(--rs-hero-focus,50%)}
/* The transition into the dark page below comes from the fade baked into each
   hero export, which works only if the hero is tall enough to show the fade
   finishing. Three of the four are: their images are proportionally wider, so
   the hero reaches flat ink before it runs out of picture. Born Survivor's
   export is taller (1512x970 against 1512x862), so the same hero height stops
   at 74.9% of the file, mid-fade, and the photograph ended on a hard edge.

   This closes the last of it in CSS so the page no longer depends on how a
   given export happens to be proportioned. It only covers the bottom 12%,
   where all four are already at or within a couple of levels of the ink, so on
   the three that were already correct it paints ink over ink and changes
   nothing. */
.rs-cs-hero::after{
	content:"";position:absolute;inset-inline:0;inset-block-end:0;height:12%;
	background:linear-gradient(180deg,rgba(38,35,36,0) 0%,var(--ink) 92%);
	z-index:0;pointer-events:none;
}
.rs-cs-hero > .rs-wrap{position:relative;z-index:1}
/* Figma: the kicker is Inter Bold caps at 47px, slightly held back from white;
   the client name is Inter Bold 110px with no tracking. */
.rs-cs-hero__kicker{
	display:block;color:#fff;opacity:.85;margin:0 0 clamp(4px,.53vw,8px);
	font-family:var(--font-sans);font-weight:700;font-style:normal;
	font-size:clamp(1.3rem,3.14vw,2.97rem);
	letter-spacing:0;line-height:1.1;text-transform:uppercase;
}
.rs-cs-hero h1{margin:0 0 clamp(12px,1.65vw,25px);text-transform:uppercase;letter-spacing:0;font-weight:700;font-size:clamp(2.5rem,7.28vw,6.875rem);line-height:1}
.rs-cs-hero__sub{font-style:italic;font-size:clamp(1.05rem,2.34vw,2.21rem);font-weight:400;text-transform:uppercase;letter-spacing:0;line-height:1.14;max-width:min(100%,620px);margin:0 0 clamp(24px,3.7vw,56px)}
.rs-cs-hero__link{color:var(--crimson);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(.75rem,1.22vw,1.16rem);display:inline-flex;align-items:center;gap:.5em}
.rs-cs-hero__link svg{width:.7em;height:.7em}
.rs-cs-hero__link:hover{text-decoration:underline;text-underline-offset:4px}

/* The work: flat composites straight on the ink. No card, no crop, no
   background — they sit at their natural size and shrink together only when
   the row runs out of room. */
/* The composites are exported with their own transparent bleed (roughly 75px
   top and bottom at frame scale), which supplies the band's breathing room. */
.rs-cs-mocksec{padding-block:0}
.rs-cs-mocks{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;
	gap:clamp(10px,2.12vw,32px);margin:0 auto;padding:0;list-style:none;
	width:clamp(0px,85vw,1280px)}
.rs-cs-mocks li{list-style:none;flex:0 1 auto;min-width:0;line-height:0;background:none}
.rs-cs-mocks img{display:block;width:auto;max-width:100%;height:auto;background:none;border:0;border-radius:0;box-shadow:none}
@media (max-width:640px){
	.rs-cs-mocksec{padding-inline:var(--gutter)}
	.rs-cs-mocks{width:100%;flex-wrap:wrap}
	.rs-cs-mocks li{flex:0 0 100%}
	.rs-cs-mocks img{width:100%}
}

/* The story photograph: full page width, natural height, anchored to the top
   of the group.

   It used to be clipped to the story block (inset-block:0), and because the
   image is taller than that block on every case study, it ended in a hard
   horizontal line exactly where the conversions band begins. Figma doesn't do
   that — measured down the left gutter of the Born Survivor frame, the backdrop
   decays from y≈3000 to flat #262324 by y≈3380, with the conversions band
   starting at y≈3248. So the photograph runs about 130px (≈20% of that band's
   height) past the boundary and fades out across roughly 380px.

   Two variables carry that. Note the brief's "20% of the section" and Figma's
   own 132px do not agree once built: our conversions band renders 780px tall
   against Figma's ~673px, so 132px here is only 16%. The brief's 20% wins —
   10.7vw lands at 156px on a 1455px content width, i.e. 20.0% of 780px. The
   fade runs 25vw ≈ 364px, so it starts well above the boundary and finishes
   inside the band, which is the shape Figma shows.

   The fade is a mask to transparent rather than a gradient to a literal colour,
   because body is already #262324 — so it reveals exactly the shade the brief
   asks for, and keeps doing so if that token ever changes. */
.rs-cs-story{
  position:relative;
  --rs-story-bleed:clamp(96px,10.7vw,170px);
  --rs-story-fade:clamp(220px,25vw,400px);
}
.rs-cs-story.has-bg::before{
  content:"";position:absolute;inset-inline:0;inset-block-start:0;
  /* Whichever comes first: the story block plus its bleed, or the foot of the
     photograph itself. See the note in single-case_study.php for why the second
     term matters — without it the fade misses the image entirely on a phone. */
  height:min(calc(100% + var(--rs-story-bleed)), calc(100vw * var(--rs-story-ar,3)));
  background-image:var(--rs-story-img);
  background-size:100% auto;background-position:top center;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--rs-story-fade)),transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--rs-story-fade)),transparent 100%);
  z-index:0;pointer-events:none;
}
.rs-cs-story > *{position:relative;z-index:1}

.rs-case-study .rs-hairline{background:rgba(255,255,255,.49);height:1.5px}
.rs-cs-section{padding-block:clamp(36px,5.03vw,76px);position:relative;overflow:hidden}
.rs-sechead__icon--cs-icon-approach{height:clamp(26px,2.31vw,35px)}
.rs-sechead__icon--cs-icon-quote{height:clamp(20px,1.85vw,28px)}
.rs-sechead__icon--cs-icon-conversions{height:clamp(38px,3.64vw,55px)}

/* Body copy sits in the right-hand column, 563px wide in the frame. */
.rs-cs-body{max-width:min(100%,563px);font-size:clamp(.95rem,1.32vw,1.25rem);line-height:1.35;margin-top:clamp(18px,2.31vw,35px)}
@media (min-width:900px){.rs-cs-body{margin-inline-start:auto}}
.rs-cs-body p{margin-bottom:.85em}
.rs-cs-body p:last-child{margin-bottom:0}
.rs-cs-body strong{font-weight:700}

.rs-cs-stats{display:flex;flex-wrap:wrap;justify-content:flex-end;text-align:end;
	gap:clamp(20px,2.5vw,38px) clamp(36px,5.95vw,90px);margin-top:clamp(20px,2.58vw,39px)}
.rs-cs-stats .rs-stat__fig{font-weight:500;font-size:clamp(2.6rem,5.42vw,5.125rem);line-height:1.05;letter-spacing:-.03em}
.rs-cs-stats .rs-stat__label{font-weight:400;font-size:clamp(.85rem,1.31vw,1.24rem);letter-spacing:0;text-transform:uppercase;line-height:1.2;opacity:1;margin-top:clamp(11px,1.52vw,23px)}

.rs-cs-quote{max-width:min(100%,563px);font-size:clamp(1.25rem,2.3vw,2.175rem);font-weight:700;text-transform:uppercase;line-height:1.15;letter-spacing:0;margin:clamp(26px,3.44vw,52px) 0 0}
@media (min-width:900px){.rs-cs-quote{margin-inline-start:auto}}
.rs-cs-quote cite{display:block;margin-top:clamp(14px,1.85vw,28px);font-size:clamp(.85rem,1.34vw,1.27rem);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}

/* mobile: a snap-scrolling row so each reel is big enough to read.
   From 700px up it becomes the three-across row from the design. */
.rs-reels{display:flex;gap:14px;margin-top:clamp(24px,4vw,40px);list-style:none;padding:0 0 6px;
	overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
	margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
.rs-reels::-webkit-scrollbar{display:none}
.rs-reels li{list-style:none;flex:0 0 62vw;scroll-snap-align:center}
@media (min-width:700px){
	.rs-reels{display:grid;gap:clamp(12px,1.85vw,28px);grid-template-columns:repeat(3,1fr);
		overflow:visible;margin-inline:0;padding-inline:0}
	.rs-reels li{flex:none}
}
.rs-reel{aspect-ratio:235/448;border-radius:clamp(12px,1.6vw,24px);overflow:hidden;background:var(--ink-3);border:2px solid rgba(255,255,255,.14)}
.rs-reel video,.rs-reel img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){
	.rs-conv .rs-wrap{display:grid;grid-template-columns:minmax(0,760fr) minmax(0,270fr);column-gap:clamp(28px,4.16vw,63px);row-gap:clamp(40px,5.95vw,90px);align-items:center}
	.rs-conv .rs-reels{margin-top:0}
	/* Case study with no conversion stats. The two-track grid above leaves the
	   270fr column empty, so the reels sit left of centre with a hole beside
	   them. Collapse to one track and centre the group at the width it already
	   had — the reels keep their size, they just stop being off-axis. The width
	   is the old 760fr share written out, so it stays in step if the gap or the
	   ratio above ever changes. */
	.rs-conv--nostats .rs-wrap{grid-template-columns:minmax(0,1fr)}
	.rs-conv--nostats .rs-reels{
		width:min(100%, calc((100% - clamp(28px,4.16vw,63px)) * 760 / 1030));
		margin-inline:auto;
	}
}
.rs-conv__stats{display:grid;gap:clamp(20px,2.71vw,41px);margin-top:clamp(24px,4vw,36px)}
@media (min-width:900px){.rs-conv__stats{margin-top:0}}
.rs-conv__stats .rs-stat__fig{font-weight:400;font-size:clamp(2rem,3.44vw,3.25rem);line-height:1.05;letter-spacing:-.02em}
.rs-conv__stats .rs-stat__label{font-weight:400;font-size:clamp(.85rem,1.31vw,1.24rem);letter-spacing:0;text-transform:uppercase;line-height:1.2;opacity:1;margin-top:clamp(5px,.66vw,10px)}

/* Explore more: three cards, label near the top with a rule under it. */
.rs-explore{display:grid;gap:clamp(14px,2.31vw,35px);margin:clamp(26px,3.5vw,53px) 0 0;padding:0;list-style:none}
@media (min-width:700px){.rs-explore{grid-template-columns:repeat(3,1fr)}}
.rs-explore li{list-style:none}
.rs-explore a{display:block;position:relative;border-radius:clamp(10px,1.19vw,18px);overflow:hidden;aspect-ratio:342/243;background:var(--ink-3)}
/* The card image is its own attachment now, cropped to 900:620 — the exact
   ratio of the rs-card derivative — so the card crops it no further and all
   four frame identically.

   This used to draw the image at 185% of the card height and let the clip
   throw the bottom away. That was a workaround for the fade baked into the
   old hero exports, which the cards were reusing: the photograph was gone by
   ~55% of the file and flat ink by 73-82%, so at card size the lower half
   went dead black. With clean card images there is nothing to hide, and the
   overscan would only throw away the bottom third of a photograph that was
   framed on purpose. Back to 100%, which is what the Figma cards show.

   The heroes still use the original gradient-baked exports, pinned per case
   study in rs_hero_image, and are unaffected by this. */
.rs-explore img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .4s}
/* No scrim over the card. The Figma cards put the label straight onto the
   photograph — measured down one of them, the luma follows the picture (sky
   ~148, ground ~55) with no monotonic darkening at the top, so the overlay
   that used to live here was ours, not the design’s. Removed on Mikayla’s
   note: "remove the gradient effect on the actual card ... make sure the
   cards aren’t overlaid with gradients". The label keeps its own hairline
   rule, which is what separates it in the design. */
.rs-explore a:hover img{transform:scale(1.04)}
/* The label carries its own contrast instead of a scrim over the photograph.
   drop-shadow on the label rather than text-shadow on the two spans, because
   it follows the rendered alpha of everything inside — the glyphs *and* the
   hairline rule, which is the element's own bottom border and which
   text-shadow would leave floating unshadowed on a bright sky.

   Three layers on purpose: a tight nearly-opaque one that draws a hard edge
   around each stroke, a mid one that thickens it, and a wide soft one that
   lifts the whole label off a blown-out background. Measured as glyph core vs
   the 3px ring around it, on the rendered page:

     card          no shadow   two layers   these three
     XNRG             1.58:1       2.86:1        4.45:1
     TrailsPlus       3.11:1       4.95:1        6.65:1
     KP Events        2.77:1       4.43:1        6.18:1

   XNRG is the floor because its whole label band is pale overcast sky; two
   layers left it under 3:1, which is why this is not the obvious light touch.
   The photographs stay untouched, which is what amend 1 asked for. */
.rs-explore__label{position:absolute;z-index:1;inset-inline:8.8%;inset-block-start:13.2%;
	display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
	padding-block-end:clamp(4px,.6vw,9px);border-block-end:1px solid rgba(255,255,255,.85);
	filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.9)) drop-shadow(0 0 3px rgba(0,0,0,.75)) drop-shadow(0 0 11px rgba(0,0,0,.5))}
.rs-explore__k{font-family:var(--font-display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:clamp(.6rem,.99vw,.94rem);letter-spacing:0;line-height:1.2}
/* Right aligned, which only shows on a name long enough to wrap: the flex
   row already pushes a single line to the right edge, so "TrailsPlus Mountain
   Series" was the one card that gave itself away with a ragged right. */
.rs-explore__n{font-weight:700;text-transform:uppercase;font-size:clamp(.8rem,1.32vw,1.25rem);letter-spacing:0;line-height:1.2;text-align:end}

/* case study index */
.rs-archive{padding-block:calc(var(--header-h) + clamp(48px,8vw,96px)) clamp(56px,9vw,110px)}
.rs-archive__grid{display:grid;gap:clamp(18px,3vw,28px);margin-top:clamp(32px,5vw,52px)}
@media (min-width:640px){.rs-archive__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.rs-archive__grid{grid-template-columns:repeat(3,1fr)}}
.rs-archive__grid li{list-style:none}

/* =========================================================================
   CONTACT
   ========================================================================= */
/* Feedback: "the current one all looks a bit squished, keep it as original
   design". CONTACT.png gives this band 1195px with the headline at 152px and
   62/36/87/19 between the headline, copy, address and the two buttons. */
/* Measured off CONTACT.png at its 1512 frame: the headline cap sits 270px down
   the band (266px to its box, with the header at 94px), the form column is
   429px wide starting at x850, and there are 149px between the foot of the
   form and the band's bottom edge. Vertical position is set by padding rather
   than by centring, because the frame does not centre the pair. */
.rs-contact{position:relative;min-height:clamp(600px,77.91vw,1178px);padding-block:calc(var(--header-h) + clamp(48px,11.38vw,172px)) clamp(48px,9.85vw,149px);overflow:hidden}
.rs-contact .rs-wrap{display:grid;row-gap:0;column-gap:clamp(28px,4.23vw,64px)}
.rs-contact__form{margin-block-start:clamp(36px,6vw,64px)}
@media (min-width:900px){
	/* 577/452 of the 1093px content column puts the form's left edge on the
	   frame's x850 without moving the shared --wrap. */
	.rs-contact .rs-wrap{grid-template-columns:minmax(0,577fr) minmax(0,452fr);align-items:start}
	.rs-contact__intro{grid-area:1 / 1}
	.rs-contact__ctas{grid-area:2 / 1}
	/* The form shares the CTA row, so its top tracks the first button however
	   the paragraph above wraps. The first field rule is drawn at the FOOT of
	   its input, so the column starts one input-height higher for the rule to
	   land level with the button — which is how the frame has it. */
	.rs-contact__form{grid-area:2 / 2;margin-block-start:calc(-1 * clamp(32px,2.65vw,40px))}
}
.rs-contact h1{margin:0 0 clamp(1.2rem,3.13vw,2.96rem);font-size:clamp(2.75rem,10.05vw,9.5rem);line-height:.862}
/* the frame sets this measure at 487px, which breaks the line after "in one," */
.rs-contact .rs-lede{max-width:min(100%,500px)}
.rs-contact__email{display:inline-block;margin:0 0 clamp(1.8rem,5.28vw,4.99rem);color:var(--crimson);font-weight:700;font-style:italic;font-size:clamp(1rem,2.4vw,1.25rem)}
.rs-contact__ctas{display:grid;gap:clamp(.8rem,1.19vw,1.11rem);justify-items:start}

/* =========================================================================
   ABOUT
   ========================================================================= */
.rs-about-hero{padding-block:calc(var(--header-h) + clamp(56px,9vw,110px)) clamp(48px,7vw,90px);position:relative;overflow:hidden}
.rs-about-hero h1{max-width:16ch}
.rs-brandcards{display:grid;gap:clamp(16px,3vw,26px);margin-top:clamp(32px,5vw,52px)}
@media (min-width:760px){.rs-brandcards{grid-template-columns:repeat(3,1fr)}}
.rs-brandcard{list-style:none;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-card);padding:clamp(20px,3vw,28px);display:grid;gap:.9rem;align-content:start}
.rs-brandcard p{margin:0;font-size:.92rem;color:var(--grey-2)}
.rs-brandcard .rs-btn{justify-self:start;margin-top:.4rem}

/* The Platform hero carries no watermark in the frame; the chevron artwork
   lives in the "Switching is easier" band (see .rs-switch__wm above). */

/* =========================================================================
   MOBILE
   Measured against the 402px frames in "Mobile Version". Inside the query
   only, so the desktop and tablet rules above are untouched.
   ========================================================================= */
@media (max-width:640px){

  /* The desktop Get-in-touch band is now sized off the frame's 1178px rather
     than the viewport, so the phone keeps its own svh-based floor. */
  .rs-contact{min-height:min(92svh,900px);padding-block:calc(var(--header-h) + clamp(48px,8vw,90px)) clamp(48px,7vw,80px)}
  .rs-contact h1{line-height:.87}
  /* the two Accelerator contact-band paddings stay at the phone's band rhythm */
  .rs-tellus{padding-block:var(--band-y)}
  .rs-tellus .rs-lede ~ .rs-btn{margin-block-start:0}
  /* The phone band is 0.45 wide-to-tall against the picture's 1.84, so a
     centred cover crop keeps only a 25% column — and on this frame that column
     is empty hillside. MOBILE ACCELERATOR.png crops left of centre to hold the
     lead runner in shot, which is what 34% does here. */
  .rs-tellus .rs-media-bg img{object-position:34% 50%}
  .rs-contact__email{margin-block-start:.4rem}
  /* the ticker was enlarged to the 1512 frame; the phone keeps its own size */
  .rs-marquee{padding-block:.9rem;border-block-width:1px}
  .rs-marquee__item{font-size:.8rem;font-weight:700;letter-spacing:.08em;line-height:1.65}
  /* "What we do" / "This is for you if" keep the phone's own band rhythm —
     the desktop pair was closed up to match the 1512 frame. */
  .rs-whatwedo{padding-block-end:var(--band-y)}
  .rs-foryou{padding-block-start:var(--band-y)}

  /* ---- case studies ---- */
  .rs-cs-hero{min-height:min(88svh,720px)}
  .rs-cs-hero__kicker{font-size:clamp(1.15rem,5.97vw,1.5rem)}
  .rs-cs-hero h1{font-size:clamp(2.4rem,12.94vw,3.25rem);line-height:.98}
  .rs-cs-hero__sub{font-size:clamp(.95rem,3.98vw,1rem);line-height:1.22}
  .rs-sectitle{font-size:clamp(1.15rem,5.37vw,1.35rem)}
  .rs-sechead__icon{height:clamp(18px,5.47vw,22px)}
  .rs-sechead__icon--cs-icon-conversions{height:clamp(26px,8.2vw,33px)}
  .rs-sechead__icon--cs-icon-quote{height:clamp(14px,4.2vw,17px)}
  .rs-sechead__icon--cs-icon-approach{height:clamp(18px,5.2vw,21px)}
  .rs-cs-stats .rs-stat__fig{font-size:clamp(2.4rem,12.19vw,3.06rem)}
  .rs-cs-stats .rs-stat__label{font-size:clamp(.85rem,3.73vw,.94rem)}
  .rs-cs-quote{font-size:clamp(1.15rem,5.72vw,1.44rem)}

  /* the phone frames put the figures above the reels, and stack the reels */
  .rs-conv .rs-wrap{display:flex;flex-direction:column}
  .rs-conv__stats{order:1;margin-top:clamp(24px,8vw,32px)}
  .rs-reels{order:2;display:grid;grid-template-columns:1fr;
    gap:clamp(20px,7.5vw,30px);overflow:visible;
    margin-inline:0;padding-inline:0;padding-block:0;
    margin-top:clamp(28px,10vw,40px)}
  .rs-reels li{flex:none;width:min(100%,215px);margin-inline:auto}

  /* ---- Accelerator ---- */
  /* MOBILE ACCELERATOR.png runs the hero copy nearly edge to edge */
  .rs-accintro .rs-lede,.rs-hero--bare .rs-lede{max-width:none}

  /* "How it works": the growth note sits right-aligned above the diamond and
     the baseline label drops below it. display:contents lets the two children
     of __above take their own place in the column without touching markup. */
  .rs-hiw{display:flex;flex-direction:column}
  .rs-hiw__above{display:contents}
  .rs-hiw__growth{order:1;text-align:end;margin-inline-start:auto;max-width:30ch}
  /* the rule needs the diamond's above-the-line reach plus air, so the
     artwork never rides up into the growth note */
  .rs-hiw__rule{order:2;margin-block:clamp(110px,40.5vw,163px) 0}
  /* the phone frame keeps the diamond that the 899px rule above drops */
  .rs-hiw__diamond{display:block;--d:clamp(110px,33.3vw,134px)}
  .rs-hiw__label{order:3;max-width:14ch}
  .rs-hiw__below{order:4;margin-block-start:clamp(10px,3.5vw,14px)}

  /* "We lead with people": no card on the phone, and a heavier wash so the
     portraits read against the photograph */
  .rs-teamcard{border-color:transparent;background:none;backdrop-filter:none;padding:0;gap:1rem;align-items:flex-start}
  .rs-teamband::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:rgba(38,35,36,.42)}   /* z-index 1 clears the photo, .rs-wrap is later in the DOM.
                                        Retuned from .72 now the band carries the design's own
                                        pre-graded photograph rather than the bright trail shot. */

  /* ---- Platform ---- */
  /* "Run your event": two columns, with the odd one out centred underneath */
  .rs-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(28px,8.5vw,34px) clamp(16px,5vw,20px)}
  .rs-features li{width:auto}
  .rs-features > li:last-child:nth-child(odd){grid-column:1/-1;width:min(100%,calc(50% - 10px));margin-inline:auto}
}