/* ============================================================================
   R-Media — Section layouts (DESKTOP, static resting state)
   ----------------------------------------------------------------------------
   Production stylesheet. Builds the clean UX for each home-page section from
   the desktop specs (assets/MAINPAGE/<nn>/desktop), using the design tokens in
   tokens.css. No animation here — this is the settled/resting layout only;
   GSAP motion lives in main.js.

   Scope note: desktop-first. Mobile breakpoint rules come in a later pass and
   will be appended below a media query, so this file stays the single source.

   Fonts: the three Pangram Pangram faces aren't licensed/self-hosted yet, so
   --font-display / --font-italic / --font-body resolve to fallbacks. The
   italic-accent words use --font-italic so the mixed-typography reads correctly
   even with the fallback serif.
   ========================================================================== */

/* ------------------------------------------------------------ Web fonts --- */
/* The three Pangram Pangram faces were uploaded through Elementor (Site
   Settings → Custom Fonts) and live in the media library at /assets/. Elementor
   only prints their @font-face on pages that contain Elementor widgets, so on
   this hand-coded template we declare them here, pointing at the SAME uploaded
   files (no duplicate download). Only Regular/400 is uploaded so far. */
@font-face {
	font-family: "PPRightGrotesk";
	src: url("/assets/PPRightGroteskMono-Regular.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
	font-family: "PPNeueMontreal";
	src: url("/assets/PPNeueMontreal-Regular.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
	font-family: "PPEditorialNew";
	src: url("/assets/PPEditorialNew-Regular.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: block;
}

/* ----------------------------------------------------------------- Base --- */
/* Scoped (Oct 2026): this file also loads on Elementor pages that embed a
   section via [rmedia_section], so nothing here may restyle the rest of those
   pages. :where() keeps the specificity of the old global selectors (0,0,1 /
   0,0,0), so every section rule still wins exactly as before.
   - page-wide rules -> the home template only (body.page-template-mainpage)
   - element rules   -> inside .rmedia-home only (home + embedded wrappers) */
:where(.rmedia-home), :where(.rmedia-home) *, :where(.rmedia-home) *::before, :where(.rmedia-home) *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body:where(.page-template-mainpage) {
	margin: 0;
	background: var(--bg-body);
	color: var(--fg-solid);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.5;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

:where(.rmedia-home) img, :where(.rmedia-home) svg { display: block; max-width: 100%; border: 0; box-shadow: none; }

:where(.rmedia-home) a { color: inherit; text-decoration: none; }

/* Fluid layout container — FULL WIDTH (client change, Oct 2026; the old
   86vw / 1651px cap is gone). The page fills the viewport edge to edge.

   Two scale units, both "1 design-px" against the 1720px-wide desktop frame
   (Figma exports are 1440x810 = 16:9):

   --fluid  = min(width / 1720, height / 860)   SIZES: type, boxes, images, gaps
            WIDTH LEADS (Oct 19 2026): at a normal 1920 Chrome window
            (~1920x940) this is ~1.09, so type and images grow with the full
            width. The height term (860) is a safety net for short or very wide
            windows, so a section never outgrows the screen height. 860 is set
            by the tallest state on the page: Our Services with all four cards
            docked (fits down to 1366x650 with >= 20px to spare).
            (It was 968 before, which let the height win at 1920 = ~0.97, i.e.
            sizes barely changed after the full-width switch.) No ceiling.
   --fx     = width / 1720                      SPREAD: horizontal offsets that
            should travel with the full width (use per section where a layout
            should stretch rather than stay proportional).

   The type + gutter tokens are re-expressed here so every section follows
   automatically. Scoped to .rmedia-home, so the Elementor header/footer are
   untouched. Heights stay vh/dvh. */
.rmedia-home {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	/* Full width = no side margin to absorb parked/off-screen slides (e.g. the
	   testimonials waiting off to the right) — clip sideways so nothing can
	   ever cause a horizontal scroll. (clip, not hidden: no scroll container.) */
	overflow-x: clip;
	container-type: inline-size;
	--fx:    calc(100cqi / 1720);
	--fluid: min(calc(100cqi / 1720), calc(100dvh / 860));
	--header-h: 64px;   /* real Elementor header height (fixed, not scaled) */

	/* SAFE MARGIN (client, Oct 2026): text, images and buttons never come closer
	   than this to any screen edge (top/right/bottom/left). 10px at the 1920
	   reference, grows with the layout on bigger screens, never below 10px.
	   Backgrounds stay full-bleed. --pad-edge (the design's 16px gutter) can
	   never drop under it. */
	--safe:          max(10px, calc(10 * var(--fluid)));
	--pad-edge:      max(var(--safe), calc(16 * var(--fluid)));

	/* Type: scales with the layout, no ceiling (grows on big screens like the
	   rest of the page), floored so it stays readable on tablet (never below
	   12px; CTA 14px). Floors per FLUID_LAYOUT_PLAN.md — locked. */
	--fs-display:    max(40px, calc(160 * var(--fluid)));
	--fs-h1:         max(32px, calc(64 * var(--fluid)));
	--fs-h1-cta:     max(30px, calc(64 * var(--fluid)));
	--fs-h1-work:    max(28px, calc(64 * var(--fluid)));
	--fs-h2:         max(24px, calc(48 * var(--fluid)));
	--fs-quote:      max(20px, calc(32 * var(--fluid)));
	--fs-cta-lg:     max(16px, calc(24 * var(--fluid)));
	--fs-work-title: max(24px, calc(40 * var(--fluid)));
	--fs-cta:        max(14px, calc(20 * var(--fluid)));
	--fs-body:       max(12px, calc(16 * var(--fluid)));
	--fs-caption:    max(12px, calc(14 * var(--fluid)));
	--fs-label:      max(12px, calc(12 * var(--fluid)));
	--fs-learnmore:  max(12px, calc(10 * var(--fluid)));
	--fs-eyebrow:    max(12px, calc(10 * var(--fluid)));
}

/* EMBEDDED SECTIONS (Oct 2026) — [rmedia_section name="..."] on Elementor
   pages outputs a section inside <div class="rmedia-home rmedia-embed">. The
   wrapper carries the same tokens/scaling as the home page (it IS .rmedia-home)
   and adds what <body> provides on the home template. It breaks out to the
   full screen width even inside a boxed or padded Elementor container. */
.rmedia-home.rmedia-embed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--bg-body);
	color: var(--fg-solid);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* Inside Elementor's content (.elementor) its stylesheet resets every image:
   `.elementor img { height:auto; max-width:100%; border:none; border-radius:0;
   box-shadow:none }`. That out-ranks a few of our image rules, so embedded
   sections restate them here with enough weight (home page unaffected). */
.rmedia-embed img.ph { border-radius: 8px; }
.rmedia-embed .rmedia-hero__bg img.ph,
.rmedia-embed .rmedia-work__bg img.ph { border-radius: 0; }
.rmedia-embed .rmedia-whatwedo__frame > img { width: 100%; height: 100%; max-width: none; }
.rmedia-embed .rmedia-clients__item img {
	width:  calc(var(--lw, 160) * var(--fluid));
	height: calc(var(--lh, 48)  * var(--fluid));
	max-width: none;
}

/* Every section is a full-viewport stage unless its content is taller.
   dvh (not vh) so it matches the REAL visible viewport on tablets/phones with
   dynamic browser chrome — and the scroll controller's window.innerHeight — so
   the bottom of each section isn't pushed under the fold (the "scroll twice"
   bug). On desktops dvh == vh. */
.rmedia-section {
	position: relative;
	width: 100%;
	min-height: 100dvh;
	background: var(--bg-body);
}

/* Shared bits ------------------------------------------------------------- */
.rmedia-eyebrow {
	margin: 0;
	font-size: var(--fs-eyebrow);
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-soft);
}

.ital { font-family: var(--font-italic); font-style: italic; font-weight: 400; }

/* Placeholder image box (swap for real <img> later) */
.ph {
	display: block;
	background: var(--zinc-800);
	border-radius: 8px;
	overflow: hidden;
	object-fit: cover;
}
.ph--cover { position: absolute; inset: 0; border-radius: 0; background: var(--zinc-900); }

/* Generic CTAs (per-section sizing overrides below) */
.rmedia-cta { display: inline-block; font-family: var(--font-body); }
.rmedia-cta--accent { color: var(--red-500); }
.rmedia-cta--underline { text-decoration: underline; text-underline-offset: 4px; }


/* =================================================================== 01 HERO */
/* The Elementor header OVERLAYS the hero (floats on top) instead of pushing it
   down, so the hero fills the whole viewport underneath and the menu sits over
   it. Home-template only (sections.css is enqueued just on this page), so other
   pages keep the normal in-flow header. If the menu ends up behind the hero,
   its wrapper isn't `.elementor-location-header` — tell me the class. */
:where(.page-template-mainpage) .elementor-location-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; } /* home template only */

.rmedia-hero { height: 100dvh; overflow: hidden; color: var(--fg-white); }

.rmedia-hero__bg { position: absolute; inset: 0; }
.rmedia-hero__bg .ph { width: 100%; height: 100%; border-radius: 0; background: var(--zinc-800); }

/* Fill the viewport and distribute vertically (title top / mid row / view-work
   bottom) while keeping the 2-D composition. The middle row (1fr) absorbs the
   slack, so content spreads to any height with no fixed offsets. Top padding
   clears the overlaying header. */
.rmedia-hero__content {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto 1fr auto;
	column-gap: calc(48 * var(--fluid));
	padding: calc(var(--header-h) + 40 * var(--fluid)) var(--pad-edge) calc(40 * var(--fluid));
}

.rmedia-hero__title {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	margin: 0;
	max-width: calc(640 * var(--fluid));
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h1);
	line-height: 1;
	letter-spacing: -0.04em;
}

.rmedia-hero__lead { grid-column: 1; grid-row: 2; align-self: center; max-width: calc(380 * var(--fluid)); }
.rmedia-hero__subtitle { margin: 0; font-size: var(--fs-body); line-height: 1.5; }
.rmedia-hero__lead .rmedia-cta {
	margin-top: calc(24 * var(--fluid));
	font-size: var(--fs-cta-lg);
	line-height: 1;
}

.rmedia-hero__showreel { grid-column: 2; grid-row: 2; align-self: center; justify-self: end; margin: 0; width: calc(320 * var(--fluid)); }
.rmedia-hero__showreel .ph { width: calc(320 * var(--fluid)); height: calc(180 * var(--fluid)); border: 1px solid rgba(255, 255, 255, 0.24); }
.rmedia-hero__showreel figcaption { margin-top: calc(16 * var(--fluid)); }
.rmedia-showreel__title { display: block; font-size: var(--fs-label); line-height: 1; }
.rmedia-showreel__sub { display: block; margin-top: calc(6 * var(--fluid)); font-size: var(--fs-eyebrow); line-height: 1; color: var(--fg-soft); }

.rmedia-hero__viewwork { grid-column: 1; grid-row: 3; align-self: end; justify-self: start; font-size: var(--fs-label); line-height: 1.3; }


/* ================================================================ 02 MISSION */
.rmedia-mission { display: flex; align-items: center; justify-content: center; }
.rmedia-mission__media { position: absolute; }
.rmedia-mission__media .ph { border-radius: 8px; }
.rmedia-mission__media--topright { top: var(--pad-edge); right: var(--pad-edge); }
.rmedia-mission__media--topright .ph { width: calc(221 * var(--fluid)); height: calc(124 * var(--fluid)); }
.rmedia-mission__media--midleft { top: calc(324 * var(--fluid)); left: var(--pad-edge); }
.rmedia-mission__media--midleft .ph { width: calc(221 * var(--fluid)); height: calc(294 * var(--fluid)); }

.rmedia-mission__content {
	max-width: calc(620 * var(--fluid));
	padding: var(--pad-edge);
	text-align: center;
}
.rmedia-mission__title {
	margin: calc(24 * var(--fluid)) 0 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h1);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--fg-solid);
}
.rmedia-mission__body { margin: calc(32 * var(--fluid)) 0 0; font-size: var(--fs-body); line-height: 1.5; color: var(--fg-soft); }
.rmedia-mission__body--mobile { display: none; }
.rmedia-mission__content .rmedia-cta { margin-top: calc(40 * var(--fluid)); font-size: var(--fs-cta); line-height: 1.2; }


/* ============================================================= 03 WHAT WE DO */
.rmedia-whatwedo { display: grid; place-items: center; height: 100dvh; }
.rmedia-whatwedo__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(40 * var(--fluid));
	margin: 0;
	padding: 0 var(--pad-edge);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-display);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--fg-white);
	white-space: nowrap;
}
.rmedia-whatwedo__box { position: relative; display: inline-block; flex: 0 0 auto; width: calc(360 * var(--fluid)); height: calc(190 * var(--fluid)); }
.rmedia-whatwedo__frame { position: absolute; inset: 0; border-radius: 8px; opacity: 0; background: var(--zinc-800); }
.rmedia-whatwedo__frame:nth-child(1) { background: #27272a; }
.rmedia-whatwedo__frame:nth-child(2) { background: #3f3f47; }
.rmedia-whatwedo__frame:nth-child(3) { background: #52525b; }
.rmedia-whatwedo__frame:nth-child(4) { background: #45454d; }
.rmedia-whatwedo__frame:nth-child(5) { background: #5c5c66; }
.rmedia-whatwedo__frame:nth-child(6) { background: #34343a; }
.rmedia-whatwedo__frame:first-child { opacity: 1; }
/* Real media inside a frame: an <img> or <video> fills it, cropped to cover. */
.rmedia-whatwedo__frame { overflow: hidden; }
.rmedia-whatwedo__frame > img,
.rmedia-whatwedo__frame > video { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ============================================================ 04 OUR SERVICES */
.rmedia-services { height: 100dvh; display: flex; flex-direction: column; padding-bottom: var(--safe); } /* list (overflow:hidden) stops at the safe margin */

.rmedia-services__head {
	display: grid;
	grid-template-columns: 1fr calc(380 * var(--fluid));
	column-gap: calc(48 * var(--fluid));
	padding: var(--pad-edge);
}
.rmedia-services__head .rmedia-eyebrow { grid-column: 1; }
.rmedia-services__title {
	grid-column: 1;
	margin: calc(48 * var(--fluid)) 0 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h1);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--fg-solid);
}
.rmedia-services__intro {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--fg-soft);
}

.rmedia-rule { width: 100%; height: 1px; border: 0; margin: 0; background: var(--zinc-800); }
.rmedia-services__rule { margin-top: calc(48 * var(--fluid)); }

.rmedia-services__list { list-style: none; margin: 0; padding: 0; position: relative; flex: 1 1 auto; overflow: hidden; }

.rmedia-services__slide {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: flex-start;
	padding: calc(24 * var(--fluid)) var(--pad-edge) 0;
	background: var(--bg-body);
	border-top: 1px solid var(--zinc-800);
}
.rmedia-services__num { flex: 0 0 auto; font-size: var(--fs-eyebrow); letter-spacing: 0.04em; color: var(--fg-soft); }
.rmedia-services__thumb { flex: 0 0 calc(220 * var(--fluid)); margin-left: calc(108 * var(--fluid)); }
/* --thumb-k: set by main.js (initServices) to shrink the thumbnails just enough
   for the 4-card stack to fit above the bottom safe margin; 1 = design size. */
.rmedia-services__thumb .ph { width: calc(220 * var(--fluid) * var(--thumb-k, 1)); height: calc(307 * var(--fluid) * var(--thumb-k, 1)); }
.rmedia-services__text { flex: 1 1 auto; margin-left: calc(134 * var(--fluid)); max-width: calc(480 * var(--fluid)); }
.rmedia-services__name {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h2);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--fg-solid);
}
.rmedia-services__desc { margin: calc(24 * var(--fluid)) 0 0; font-size: var(--fs-body); line-height: 1.5; color: var(--fg-soft); }
.rmedia-services__more { position: absolute; top: calc(32 * var(--fluid)); right: var(--pad-edge); font-size: var(--fs-eyebrow); letter-spacing: 0.04em; line-height: 0.8; color: var(--red-500); }

.rmedia-services__slide-rule { margin: calc(24 * var(--fluid)) var(--pad-edge); width: auto; }

.rmedia-services__slide--pending { opacity: 0.4; }
.rmedia-services__pending-label { flex: 0 0 auto; margin-left: calc(108 * var(--fluid)); font-size: var(--fs-body); color: var(--fg-subtle); font-style: italic; }


/* ============================================================= 05 OUR PROCESS */
.rmedia-process { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.rmedia-process__head { padding: var(--pad-edge); flex: 0 0 auto; }
.rmedia-process__title {
	margin: calc(24 * var(--fluid)) 0 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h1);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--fg-solid);
}

.rmedia-process__viewport { position: relative; flex: 1 1 auto; overflow: hidden; }
.rmedia-process__track { display: flex; height: 100%; }
.rmedia-process__slide { flex: 0 0 50%; display: flex; gap: calc(32 * var(--fluid)); padding: calc(32 * var(--fluid)) var(--pad-edge) var(--pad-edge); } /* bottom pad: CTA (margin-top:auto) stays off the screen edge */
.rmedia-process__img { flex: 0 0 calc(400 * var(--fluid)); }
.rmedia-process__img .ph { width: calc(400 * var(--fluid)); height: calc(583 * var(--fluid)); border-radius: 8px; opacity: 0.8; }
.rmedia-process__text { flex: 1 1 auto; display: flex; flex-direction: column; }
.rmedia-process__name {
	margin: calc(48 * var(--fluid)) 0 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h2);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--fg-solid);
}
.rmedia-process__step { margin-top: calc(8 * var(--fluid)); }
.rmedia-process__desc { margin: calc(56 * var(--fluid)) 0 0; font-size: var(--fs-body); line-height: 1.5; color: var(--fg-soft); }
.rmedia-process__text .rmedia-cta { margin-top: auto; font-size: var(--fs-cta); line-height: 1.2; }
.rmedia-process__nav { display: none; }


/* ================================================================ 06 OUR WORK */
.rmedia-work { height: 100dvh; overflow: hidden; }
.rmedia-work__bg { position: absolute; inset: 0; }
.rmedia-work__bg .ph { width: 100%; height: 100%; border-radius: 0; }
.rmedia-work__bg:nth-of-type(1) .ph { background: #27272a; }
.rmedia-work__bg:nth-of-type(2) .ph { background: #1f1f23; }
.rmedia-work__bg:nth-of-type(3) .ph { background: #2e2e34; }
.rmedia-work__bg:nth-of-type(4) .ph { background: #3a3a41; }

.rmedia-work__title {
	position: absolute;
	bottom: var(--pad-edge);
	left: var(--pad-edge);
	right: var(--pad-edge);
	margin: 0;
	display: flex;
	justify-content: space-between;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h1);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--fg-solid);
	pointer-events: none;
	z-index: 10;
}

.rmedia-work__card {
	position: absolute;
	inset: 0;
	margin: auto;
	width: calc(696 * var(--fluid));
	height: calc(240 * var(--fluid));
	background: var(--glass-bg);
	border: 1px solid var(--glass-line);
	border-radius: 16px;
	overflow: hidden;
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	z-index: 5;
}
.rmedia-work__contents { position: absolute; inset: 0; }
.rmedia-work__count { position: absolute; top: calc(28 * var(--fluid)); right: calc(32 * var(--fluid)); font-size: var(--fs-eyebrow); letter-spacing: 0.08em; line-height: 1; color: var(--fg-soft); }

/* Each changing element sits in a clipped slot; its values stack in a roll that
   slides up one item per work, swapping in place. */
.rmedia-work__slot { position: absolute; overflow: hidden; }
.rmedia-work__slot--index { top: calc(28 * var(--fluid)); left: calc(32 * var(--fluid)); height: calc(14 * var(--fluid)); }
.rmedia-work__slot--thumb { top: calc(16 * var(--fluid)); left: 50%; transform: translateX(-50%); width: calc(139 * var(--fluid)); height: calc(208 * var(--fluid)); }
.rmedia-work__slot--name { left: calc(32 * var(--fluid)); bottom: calc(24 * var(--fluid)); height: calc(56 * var(--fluid)); }
.rmedia-work__slot--desc { top: calc(96 * var(--fluid)); left: calc(50% + 100 * var(--fluid)); right: calc(32 * var(--fluid)); height: calc(72 * var(--fluid)); }

.rmedia-work__index { display: flex; align-items: center; height: calc(14 * var(--fluid)); margin: 0; font-size: var(--fs-eyebrow); letter-spacing: 0.08em; line-height: 1; color: var(--fg-soft); }
.rmedia-work__thumb { height: calc(208 * var(--fluid)); }
.rmedia-work__thumb .ph { width: calc(139 * var(--fluid)); height: calc(208 * var(--fluid)); }
.rmedia-work__slot--thumb .rmedia-work__thumb:nth-child(1) .ph { background: #2f2f34; }
.rmedia-work__slot--thumb .rmedia-work__thumb:nth-child(2) .ph { background: #26262b; }
.rmedia-work__slot--thumb .rmedia-work__thumb:nth-child(3) .ph { background: #38383f; }
.rmedia-work__slot--thumb .rmedia-work__thumb:nth-child(4) .ph { background: #42424a; }
.rmedia-work__name { display: flex; align-items: center; height: calc(56 * var(--fluid)); margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-work-title); line-height: 1; letter-spacing: -0.02em; color: var(--fg-solid); }
.rmedia-work__desc { height: calc(72 * var(--fluid)); margin: 0; font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-white); }


/* 07 MARQUEE: removed (Oct 2026) — the brand bounce moved to the footer logo
   (.rmedia-footer-brand in style.css, site-wide). */


/* ============================================================ 08 TESTIMONIALS */
.rmedia-testimonials__media { position: absolute; top: var(--pad-edge); left: var(--pad-edge); }
.rmedia-testimonials__media .ph { width: calc(223 * var(--fluid)); height: calc(297 * var(--fluid)); }

.rmedia-testimonials__panel {
	--panel-left: calc(490 * var(--fluid));
	position: absolute; top: var(--pad-edge); left: var(--panel-left); right: var(--pad-edge); bottom: var(--pad-edge);
	display: flex; flex-direction: column;
	/* Client-logo loop (below the quotes). Each logo's size (--lw/--lh, design
	   px) is computed per logo in mainpage.php (equal-area optical sizing); here:
	   the fixed GAP between logos (equal whatever the shape), the row height
	   (= tallest allowed logo), and the zone = minimum band reserved under the
	   quotes; main.js centres the strip between the tallest quote and the bottom. */
	--logo-gap:     calc(88 * var(--fluid));
	--logo-row-h:   calc(84 * var(--fluid));
	--logo-box-w:   calc(200 * var(--fluid));   /* name placeholder width */
	--logo-zone:    calc(180 * var(--fluid));
}

.rmedia-testimonials__head { display: flex; align-items: center; gap: calc(108 * var(--fluid)); flex: 0 0 auto; }
.rmedia-testimonials__count { font-size: var(--fs-eyebrow); letter-spacing: 0.08em; color: var(--fg-soft); }
.rmedia-testimonials__nav { display: flex; align-items: center; gap: calc(24 * var(--fluid)); }
.rmedia-arrow {
	width: calc(24 * var(--fluid)); height: calc(24 * var(--fluid)); padding: 0;
	background: none; border: 0; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--fg-solid);
}
.rmedia-arrow svg { width: calc(24 * var(--fluid)); height: calc(24 * var(--fluid)); display: block; }
.rmedia-testimonials__total { margin-left: auto; font-size: var(--fs-eyebrow); letter-spacing: 0.08em; color: var(--fg-soft); }

/* The quote area fills the space between the header and the bottom-anchored
   logo band (margin-bottom), so the arrangement fits any height. Slides are
   absolutely stacked (JS slider); the quote is auto-sized by JS to fill the
   slide (see initTestimonials). */
.rmedia-testimonials__track { position: relative; flex: 1 1 auto; margin-top: calc(72 * var(--fluid)); margin-bottom: var(--logo-zone); }

.rmedia-testimonials__slide { margin: 0; }
/* No-JS / pre-init fallback: only the first testimonial, in normal flow. */
.rmedia-testimonials__slide:not(.is-active) { display: none; }
/* JS slider active: each slide is an absolutely-stacked flex column (quote top,
   author bottom); GSAP cross-slides them, visibility via autoAlpha in main.js. */
.rmedia-testimonials--ready .rmedia-testimonials__slide { display: flex; flex-direction: column; position: absolute; inset: 0; }

.rmedia-testimonials__quote {
	flex: 0 0 auto;
	margin: 0;
	max-width: calc(700 * var(--fluid));
	font-size: var(--fs-quote);   /* fallback only — JS auto-fits each quote (see main.js) */
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--fg-solid);
}
.rmedia-testimonials__quote::before { content: "\201C"; display: block; margin-bottom: calc(24 * var(--fluid)); font-size: 1em; line-height: 1; color: var(--fg-solid); }

/* CLIENT LOGOS — infinite loop under the quotes (Oct 2026; replaced the
   avatar + name). Positioned in the panel's bottom band; main.js sets `top` so
   the strip sits midway between the tallest quote and the panel bottom.
   Desktop: runs EDGE TO EDGE across the whole screen (breaks out of the panel
   on both sides); like the footer logo, the moving strip is exempt from the
   10px safe margin. Soft fade at both ends so logos glide in/out. */
.rmedia-testimonials__clients {
	position: absolute; bottom: 0;
	left: calc(-1 * var(--panel-left));
	right: calc(-1 * var(--pad-edge));
	height: var(--logo-zone);
	display: flex; align-items: center;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.rmedia-clients__track { display: flex; margin: 0; padding: 0; list-style: none; will-change: transform; }
/* Desktop: each item is as wide as its own logo + the fixed gap, so the
   spacing between logos is identical for square and wide ones. */
.rmedia-clients__item {
	flex: 0 0 auto;
	padding-right: var(--logo-gap);
	height: var(--logo-row-h);
	display: flex; align-items: center; justify-content: center;
}
.rmedia-clients__item img {
	display: block;
	width:  calc(var(--lw, 160) * var(--fluid));
	height: calc(var(--lh, 48)  * var(--fluid));
	max-width: none;
	object-fit: contain;
	opacity: 0.85;
}
/* Fallback until a logo file exists: the client's name. */
.rmedia-clients__name {
	max-width: var(--logo-box-w);
	font-size: var(--fs-caption); line-height: 1.2; text-align: center;
	letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-soft);
}


/* ======================================================================= 09 CTA */
/* Full-screen section of its own (Oct 2026: no longer shares the screen with
   the footer — the Elementor footer follows as a standalone section). */
.rmedia-cta-section { display: flex; align-items: center; justify-content: center; height: 100dvh; text-align: center; }
.rmedia-cta-section__inner { max-width: calc(640 * var(--fluid)); padding: 0 var(--pad-edge); }
.rmedia-cta-section__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h1-cta);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--fg-solid);
}
.rmedia-cta-section__body { max-width: calc(480 * var(--fluid)); margin: calc(32 * var(--fluid)) auto 0; font-size: var(--fs-body); line-height: 1.5; color: var(--fg-soft); }
.rmedia-cta-section .rmedia-cta { margin-top: calc(48 * var(--fluid)); font-size: var(--fs-cta); line-height: 1.2; }


/* ================================================= Animation initial states */
/* The hero itself is NOT animated. A solid overlay covers it and its centre
   opens outward (a growing box) to reveal the static hero beneath — see
   main.js initHero(). The overlay exists only when JS runs (gated on .js-anim,
   added by an inline <head> script), so the hero shows normally if JS is off.
   main.js removes .js-anim if the libraries fail to load. */
.rmedia-hero__reveal {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 5;
	background: var(--bg-body);
	pointer-events: none;
}
.js-anim .rmedia-hero__reveal { display: block; }


/* ==========================================================================
   MOBILE  (≤ 767px)
   --------------------------------------------------------------------------
   Independent mobile layouts, built per section from the mobile specs
   (assets/MAINPAGE/<nn>/mobile). Desktop values are never reused here.
   Breakpoint aligns with Elementor's mobile breakpoint / the 390px design.
   The hero reveal animation is viewport-based, so it works unchanged here.
   ========================================================================== */
@media (max-width: 767px) {

  /* Mobile re-base: the page scales with width against the 390 design. Container
     is full-width; --fluid re-bases to 390; the type/gutter tokens take their
     mobile design sizes, floored (max(12px, ...)) so small text never drops below
     12px on narrow phones. Same fit-in-viewport model as desktop (100dvh from the
     base rule + distribution + these fluid tokens). */
  .rmedia-home {
    width: 100%;
    max-width: none;
    --fluid: calc(100cqi / 390);
    --fx:    calc(100cqi / 390);
    --header-h: 48px;
    --safe:          max(10px, calc(10 * var(--fluid)));
    --pad-edge:      max(var(--safe), calc(16 * var(--fluid)));
    --fs-display:    max(40px, calc(96 * var(--fluid)));
    --fs-h1:         max(28px, calc(48 * var(--fluid)));
    --fs-h1-cta:     max(28px, calc(40 * var(--fluid)));
    --fs-h1-work:    max(24px, calc(32 * var(--fluid)));
    --fs-h2:         max(22px, calc(32 * var(--fluid)));
    --fs-quote:      max(18px, calc(24 * var(--fluid)));
    --fs-cta-lg:     max(14px, calc(20 * var(--fluid)));
    --fs-work-title: max(24px, calc(40 * var(--fluid)));
    --fs-cta:        max(14px, calc(20 * var(--fluid)));
    --fs-body:       max(12px, calc(16 * var(--fluid)));
    --fs-caption:    max(12px, calc(14 * var(--fluid)));
    --fs-label:      max(12px, calc(12 * var(--fluid)));
    --fs-learnmore:  max(12px, calc(20 * var(--fluid)));
    --fs-eyebrow:    max(12px, calc(10 * var(--fluid)));
  }

  /* 01 — HERO: single column (title / showreel / lead) distributed to fill,
     header offset on top. */
  .rmedia-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: calc(var(--header-h) + 24 * var(--fluid)) var(--pad-edge) calc(32 * var(--fluid));
  }
  .rmedia-hero__title,
  .rmedia-hero__lead,
  .rmedia-hero__showreel { position: static; inset: auto; align-self: auto; justify-self: auto; }
  .rmedia-hero__title { order: 1; max-width: none; margin: 0; line-height: 0.9; letter-spacing: -0.02em; }
  .rmedia-hero__showreel { order: 2; width: 100%; margin: 0; }
  .rmedia-hero__showreel .ph { width: 100%; height: auto; aspect-ratio: 358 / 200; }
  .rmedia-hero__showreel figcaption { margin-top: calc(12 * var(--fluid)); padding-left: calc(4 * var(--fluid)); }
  .rmedia-hero__lead { order: 3; max-width: none; margin: 0; }
  .rmedia-hero__lead .rmedia-cta { margin-top: calc(16 * var(--fluid)); }
  .rmedia-hero__viewwork { display: none; }

  /* 02 — MISSION: centred text (mobile copy) framed by top-right + bottom-left
     images. (Section is flex-centred from the desktop rule.) */
  .rmedia-mission__media--topright { top: var(--pad-edge); right: var(--pad-edge); left: auto; }
  .rmedia-mission__media--topright .ph { width: calc(102 * var(--fluid)); height: calc(136 * var(--fluid)); }
  .rmedia-mission__media--midleft { top: auto; bottom: var(--pad-edge); left: var(--pad-edge); }
  .rmedia-mission__media--midleft .ph { width: calc(160 * var(--fluid)); height: calc(120 * var(--fluid)); }
  .rmedia-mission__content { max-width: none; padding: var(--pad-edge); }
  .rmedia-mission__title { line-height: 0.9; }
  .rmedia-mission__body { margin-top: calc(24 * var(--fluid)); }
  .rmedia-mission__body--desktop { display: none; }
  .rmedia-mission__body--mobile { display: block; }
  .rmedia-mission__content .rmedia-cta { margin-top: calc(24 * var(--fluid)); }

  /* 03 — WHAT WE DO: stacked (What / box / we do.), centred in the viewport. */
  .rmedia-whatwedo { display: grid; place-items: center; height: 100dvh; }
  .rmedia-whatwedo__title {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: calc(12 * var(--fluid));
    padding: 0 var(--pad-edge);
    letter-spacing: -0.02em;
    white-space: normal;
  }
  .rmedia-whatwedo__word:first-child { text-align: left; }
  .rmedia-whatwedo__word:last-child { text-align: right; }
  .rmedia-whatwedo__box { align-self: center; width: calc(224 * var(--fluid)); height: calc(126 * var(--fluid)); }

  /* 04 — OUR SERVICES: vertical scroll-through list (no stacking on mobile). */
  .rmedia-services { height: auto; display: block; }
  .rmedia-services__list { position: static; overflow: visible; }
  .rmedia-services__head { display: flex; flex-direction: column; padding: var(--pad-edge); }
  .rmedia-services__head .rmedia-eyebrow { order: 1; }
  .rmedia-services__intro { order: 2; margin-top: calc(32 * var(--fluid)); }
  .rmedia-services__title { order: 3; margin-top: calc(48 * var(--fluid)); line-height: 0.9; }
  .rmedia-services__slide {
    position: static;
    min-height: 0;
    top: auto;
    display: grid;
    grid-template-columns: calc(160 * var(--fluid)) 1fr;
    column-gap: var(--pad-edge);
    padding: var(--pad-edge);
    border-top: none;
  }
  .rmedia-services__thumb { grid-area: 1 / 1 / 2 / 2; margin-left: 0; }
  .rmedia-services__thumb .ph { width: calc(160 * var(--fluid) * var(--thumb-k, 1)); height: calc(240 * var(--fluid) * var(--thumb-k, 1)); }

  /* Stepped mode (main.js → initServicesMobile adds the class): the section is
     one fixed screen; eyebrow + intro stay, the title and the services are
     animated one clean state per scroll gesture. The list starts just below the
     intro (JS sets its `top`); services are stacked on top of each other. */
  .rmedia-services.rmedia-services--mstep { height: 100dvh; overflow: hidden; }
  .rmedia-services--mstep .rmedia-services__list { position: absolute; left: 0; right: 0; top: 0; bottom: var(--safe); }
  .rmedia-services--mstep .rmedia-services__slide { position: absolute; top: 0; left: 0; right: 0; padding-top: 0; }
  .rmedia-services__num { grid-area: 1 / 2 / 2 / 3; justify-self: end; }
  .rmedia-services__text { grid-area: 2 / 1 / 3 / 3; margin-left: 0; max-width: none; margin-top: calc(32 * var(--fluid)); }
  .rmedia-services__name { font-size: var(--fs-h2); line-height: 1.2; }
  .rmedia-services__desc { margin-top: calc(16 * var(--fluid)); }
  .rmedia-services__more { position: static; grid-area: 3 / 1 / 4 / 3; margin-top: calc(24 * var(--fluid)); font-size: var(--fs-learnmore); line-height: 1.2; }

  /* 05 — OUR PROCESS: autoplay carousel, one slide fills the viewport. */
  .rmedia-process__title { font-size: var(--fs-h1); line-height: 0.9; }
  .rmedia-process__slide {
    flex: 0 0 100%;
    width: 100%;
    display: block;
    position: relative;
    padding: calc(48 * var(--fluid)) var(--pad-edge) 0;
  }
  .rmedia-process__step { position: absolute; top: calc(48 * var(--fluid)); left: var(--pad-edge); margin: 0; }
  .rmedia-process__img { position: absolute; top: calc(48 * var(--fluid)); right: var(--pad-edge); flex: none; }
  .rmedia-process__img .ph { width: calc(192 * var(--fluid)); height: calc(128 * var(--fluid)); }
  .rmedia-process__text { display: block; padding-top: calc(192 * var(--fluid)); }
  .rmedia-process__name { margin: 0; font-size: var(--fs-h2); line-height: 1.2; }
  .rmedia-process__desc { margin: calc(24 * var(--fluid)) 0 0; }
  .rmedia-process__text .rmedia-cta { margin-top: calc(32 * var(--fluid)); }
  .rmedia-process__nav { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 0 var(--pad-edge) calc(52 * var(--fluid)); }
  .rmedia-process__arrows { display: flex; gap: calc(16 * var(--fluid)); }
  .rmedia-process__counter { font-size: var(--fs-eyebrow); letter-spacing: 0.08em; color: var(--fg-soft); }

  /* 06 — OUR WORK: bigger card, no description. */
  .rmedia-work__title { font-size: var(--fs-h1-work); }
  .rmedia-work__card { width: calc(358 * var(--fluid)); height: calc(480 * var(--fluid)); }
  .rmedia-work__count { top: calc(24 * var(--fluid)); right: calc(24 * var(--fluid)); }
  .rmedia-work__slot--index { top: calc(24 * var(--fluid)); left: calc(24 * var(--fluid)); }
  .rmedia-work__slot--thumb { width: calc(192 * var(--fluid)); height: calc(256 * var(--fluid)); }
  .rmedia-work__thumb { height: calc(256 * var(--fluid)); }
  .rmedia-work__thumb .ph { width: calc(192 * var(--fluid)); height: calc(256 * var(--fluid)); }
  .rmedia-work__slot--name { left: calc(24 * var(--fluid)); bottom: calc(24 * var(--fluid)); }
  .rmedia-work__slot--desc { display: none; }

  /* 08 — TESTIMONIALS: no top image; full-width quote; avatar + name bottom-left,
     circular arrows bottom-right. Same flex arrangement + slider JS as desktop. */
  .rmedia-testimonials__media { display: none; }
  .rmedia-testimonials__panel { top: var(--pad-edge); left: var(--pad-edge); right: var(--pad-edge); bottom: var(--pad-edge); }
  .rmedia-testimonials__head { gap: 0; }
  .rmedia-testimonials__head .rmedia-eyebrow { margin-right: auto; }
  .rmedia-testimonials__count { margin-left: auto; }
  .rmedia-testimonials__total { margin-left: auto; }

  /* Logos: ONE visible at a time (slot = full panel width), stepping. The arrows
     sit bottom-right just above the logo band; the quote area stops above both. */
  .rmedia-testimonials__panel {
    --logo-box-w:   calc(200 * var(--fluid));
    --logo-row-h:   calc(84 * var(--fluid));
    --logo-slot:    calc(100cqi - 2 * var(--pad-edge));
    --logo-zone:    calc(130 * var(--fluid));
  }
  .rmedia-testimonials__clients { left: 0; right: 0; } /* mobile: one logo, inside the margins */
  /* one logo per full-width slot, centred (same equal-area sizes as desktop) */
  .rmedia-clients__item { flex: 0 0 var(--logo-slot); padding-right: 0; }
  .rmedia-testimonials__nav { position: absolute; right: 0; bottom: var(--logo-zone); gap: calc(8 * var(--fluid)); }
  .rmedia-testimonials__nav .rmedia-arrow {
    width: calc(56 * var(--fluid)); height: calc(56 * var(--fluid)); border: 1px solid var(--zinc-700); border-radius: 50%;
    color: var(--fg-solid);
  }
  .rmedia-testimonials__nav .rmedia-arrow--prev { color: var(--fg-subtle); border-color: var(--zinc-800); }
  .rmedia-testimonials__nav .rmedia-arrow svg { width: calc(20 * var(--fluid)); height: calc(20 * var(--fluid)); }

  .rmedia-testimonials__track { margin-top: calc(24 * var(--fluid)); margin-bottom: calc(var(--logo-zone) + 72 * var(--fluid)); }
  .rmedia-testimonials__quote { max-width: none; }
}