/**
 * Radiance Digital Transmedia — design system.
 *
 * Rewritten for v1.1.0. Key corrections versus 1.0.0:
 *  - Every display size is fluid with a small enough minimum to fit a 320px
 *    screen. Previously headings had hard minimums (58px hero, 58px case,
 *    55px contact, 50px media title) that were wider than a phone.
 *  - `.rd-home { overflow: hidden }` removed. It was hiding the symptom by
 *    clipping the overflowing text rather than letting it wrap.
 *  - Grid children get `min-width: 0`. CSS grid items default to
 *    `min-width: auto`, so a long word forces the track wider than the screen
 *    and the row overflows. This was the main cause of cut-off text.
 *  - The header is sticky and in flow, so it can never overlap the hero. All
 *    the hard-coded 150px / 125px offsets are gone.
 *  - Tablet range (700–1000px) now has real rules instead of falling into the
 *    desktop layout.
 *  - Hover effects are gated behind `@media (hover: hover)` so they do not
 *    stick after a tap on touch devices.
 *  - Visible keyboard focus, 44px minimum tap targets, and a skip link.
 *
 * @package Radiance_Transmedia
 */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
	/*
	 * v1.4.0 palette — blues and white only, taken from the Ecliptica1 art.
	 * The cream "paper" surface is gone; light sections are now deep navy so
	 * the concept art sits in its own world instead of fighting a warm ground.
	 */
	--rd-ink: #04090E;          /* deepest ground */
	--rd-dark: #071824;         /* dark section */
	--rd-surface: #0A1721;      /* raised surface (was cream) */
	--rd-surface-2: #0D2130;    /* alt band */
	--rd-white: #FFFFFF;
	--rd-blue: #1B6FA8;
	--rd-blue-deep: #0B3651;
	--rd-cyan: #8CECFF;

	/* Text on dark grounds. All clear AA against --rd-surface. */
	--rd-muted: rgba(226, 240, 248, .66);
	--rd-muted-strong: rgba(226, 240, 248, .82);
	--rd-line: rgba(140, 236, 255, .16);
	--rd-line-light: rgba(255, 255, 255, .2);

	/* Legacy alias so any remaining rule keeps working. */
	--rd-paper: var(--rd-surface);

	--rd-serif: Georgia, "Times New Roman", Times, serif;
	--rd-sans: "Helvetica Neue", Arial, Helvetica, system-ui, sans-serif;

	/* Header height is published by navigation.js from the real measured box.
	   This value is only the pre-JS starting point. */
	--rd-header-h: 84px;

	/*
	 * Fluid type. These curves reproduce the v1.0.0 sizes at both ends —
	 * measurement showed the original headings did NOT overflow at 320px, so
	 * the earlier, more timid minimums were shrinking the design for no
	 * reason. The safety now comes from `overflow-wrap` and `minmax(0, …)`
	 * rather than from small type, which means the display sizes can stay
	 * dramatic. The curves are also continuous: v1.0.0 jumped from 78px at
	 * 700px wide down to 58px at 701px, an abrupt shrink mid-layout.
	 */
	--rd-fs-display: clamp(3.5rem, 2.5rem + 5vw, 7rem);        /* 56 → 112 */
	--rd-fs-h2: clamp(2.875rem, 2.06rem + 4.11vw, 5.75rem);    /* 46 → 92  */
	--rd-fs-h2-sm: clamp(3.125rem, 2.375rem + 3.75vw, 5.75rem);/* 50 → 92  */
	--rd-fs-h3: clamp(1.75rem, 1.55rem + 1vw, 2rem);           /* 28 → 32  */
	--rd-fs-body: clamp(0.9375rem, 0.89rem + 0.22vw, 1.0625rem);
	--rd-fs-meta: clamp(0.625rem, 0.6rem + 0.13vw, 0.6875rem);

	/* Fluid gutters replace the old 7vw padding, which produced a 22px gutter
	   on a phone and a 135px gutter on a wide monitor. */
	--rd-gutter: clamp(1.25rem, 0.55rem + 3.5vw, 5.5rem);
	--rd-section-y: clamp(3.5rem, 2rem + 7vw, 6.875rem);
	--rd-radius: 0;
	--rd-tap: 44px;
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* Safety net only. The layout below should never overflow, but `clip`
	   contains any stray third-party embed without breaking position:sticky
	   the way `overflow:hidden` on body would. */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--rd-surface);
	color: #EAF4FA;
	font-family: var(--rd-sans);
	font-size: var(--rd-fs-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

/* Long unbroken words (URLs, "ConocoPhillips", "capabilities") must wrap
   rather than push the layout sideways. */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt, figcaption, blockquote, a, span, strong, small {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration: none;
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img,
svg,
video {
	height: auto;
}

/* Scoped to layout images only — a global `img { display:block }` breaks
   inline images inside post content. */
.rd-brand__mark img,
.rd-featured-image img,
.rd-home img {
	display: block;
}

::selection {
	background: var(--rd-blue);
	color: #fff;
}

/* Visible keyboard focus. The 1.0.0 CSS had none at all. */
:focus-visible {
	outline: 3px solid var(--rd-cyan);
	outline-offset: 3px;
	border-radius: 2px;
}

.rd-skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 999;
	padding: 12px 18px;
	background: var(--rd-cyan);
	color: var(--rd-ink);
	font-size: 0.875rem;
	font-weight: 700;
	transition: top .2s;
}

.rd-skip-link:focus {
	top: 8px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
   3. Shared pieces
   ---------------------------------------------------------------------- */

.rd-section {
	padding: var(--rd-section-y) var(--rd-gutter);
}

.rd-section-label,
.rd-eyebrow,
.rd-eyebrow-sm {
	margin: 0;
	font-size: var(--rd-fs-meta);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-weight: 800;
	line-height: 1.5;
}

.rd-section-label {
	margin-bottom: clamp(1.25rem, 0.5rem + 2vw, 2rem);
	color: var(--rd-muted);
}

.rd-section-label--light {
	color: rgba(255, 255, 255, .68);
}

.rd-eyebrow-sm {
	display: block;
	color: var(--rd-muted);
	letter-spacing: .16em;
}

.rd-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: clamp(1.5rem, 1rem + 1.5vw, 1.75rem);
}

.rd-button {
	min-height: var(--rd-tap);
	padding: 12px 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	max-width: 100%;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 800;
	line-height: 1.3;
	text-align: center;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease;
}

.rd-button--primary {
	background: var(--rd-blue);
	color: #fff;
}

.rd-button--ghost {
	border-color: rgba(255, 255, 255, .32);
	color: #fff;
}

.rd-button--light {
	background: var(--rd-white);
	color: var(--rd-ink);
}

/* An email address is a long unbroken token — let it break instead of
   stretching the button off-screen. */
.rd-button--email {
	text-transform: none;
	letter-spacing: .04em;
}

.rd-button__email {
	overflow-wrap: anywhere;
	word-break: break-all;
}

.rd-underline-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--rd-tap);
	padding: 10px 0;
	border-bottom: 1px solid currentColor;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: .13em;
	font-weight: 700;
}

.rd-underline-link--cyan {
	color: var(--rd-cyan);
}

.rd-underline-link--white {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, .55);
}

@media (hover: hover) {
	.rd-button:hover {
		transform: translateY(-2px);
	}
}

/* -------------------------------------------------------------------------
   4. Header + navigation
   ---------------------------------------------------------------------- */

/*
 * Sticky and in flow rather than absolutely positioned. Because the header is
 * no longer taken out of the document, it is structurally impossible for it to
 * overlap the hero — which is what the old `padding-top: 150px` magic numbers
 * were trying (and failing on tablets) to compensate for.
 */
.rd-site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 2vw, 2.5rem);
	min-height: 72px;
	padding: 12px var(--rd-gutter);
	background: var(--rd-ink);
	color: #fff;
	border-bottom: 1px solid var(--rd-line-light);
}

.admin-bar .rd-site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .rd-site-header {
		top: 46px;
	}
}

.rd-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	color: #fff;
	font-size: 0.6875rem;
	letter-spacing: .18em;
	font-weight: 700;
	line-height: 1.2;
}

.rd-brand strong {
	color: inherit;
}

.rd-brand--on-dark,
.rd-brand--on-dark strong {
	color: #fff;
}

.rd-brand__mark {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	background: var(--rd-blue);
}

/*
 * The 1.0.0 asset was a 1922×1082 banner (an exact copy of screenshot.jpg)
 * being cover-cropped into a 42px circle, which sliced the logo mark in half.
 * The bundled asset is now a padded 512×512 square, so `contain` shows the
 * whole mark and the old `transform: scale(1.05)` crop hack is gone.
 */
.rd-brand__mark img,
.rd-brand__mark .custom-logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.rd-brand__word {
	min-width: 0;
	white-space: nowrap;
}

.rd-menu {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rd-main-nav .rd-menu a {
	display: inline-flex;
	align-items: center;
	min-height: var(--rd-tap);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: .13em;
	font-weight: 600;
	opacity: .78;
	transition: opacity .2s;
}

.rd-main-nav .rd-menu a:hover,
.rd-main-nav .rd-menu a:focus-visible,
.rd-main-nav .current-menu-item > a {
	opacity: 1;
}

/*
 * The nav panel is a descendant of the header, so its z-index is resolved
 * inside the header's own stacking context. The toggle must therefore be
 * positioned and stacked above it, or the open panel covers the close button.
 */


.rd-header-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--rd-tap);
	padding: 8px 0;
	border-bottom: 1px solid var(--rd-blue);
	font-size: 0.6875rem;
	font-weight: 700;
	white-space: nowrap;
}

/* Shown only inside the open mobile panel. */
















/* -------------------------------------------------------------------------
   5. Hero
   ---------------------------------------------------------------------- */

.rd-hero {
	display: grid;
	/* minmax(0, …) rather than a bare percentage: without it a grid track
	   refuses to shrink below its longest word and the row overflows. */
	grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
	background: var(--rd-ink);
	color: #fff;
}

.rd-hero > * {
	min-width: 0;
}

.rd-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3rem, 2rem + 5vw, 6.5rem) var(--rd-gutter);
	background:
		radial-gradient(circle at 18% 45%, rgba(20, 86, 125, .3), transparent 42%),
		var(--rd-ink);
}

.rd-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, .72);
}

.rd-eyebrow span {
	flex: 0 0 auto;
	width: 24px;
	height: 2px;
	background: var(--rd-blue);
}

.rd-hero__title {
	max-width: 16ch;
	margin: clamp(1rem, 2vw, 1.5rem) 0 clamp(1rem, 2vw, 1.5rem);
	font-family: var(--rd-serif);
	font-weight: 400;
	font-size: var(--rd-fs-display);
	line-height: .95;
	letter-spacing: -.045em;
}

.rd-hero__intro {
	max-width: 52ch;
	margin: 0;
	color: rgba(255, 255, 255, .78);
	line-height: 1.65;
}

.rd-hero__note {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: clamp(2rem, 4vw, 2.8rem) 0 0;
	color: rgba(255, 255, 255, .55);
	font-size: var(--rd-fs-meta);
	text-transform: uppercase;
	letter-spacing: .14em;
}

.rd-hero__note strong {
	color: var(--rd-cyan);
}

.rd-hero__media {
	position: relative;
	/* Viewport-relative rather than a fixed 700px, so a short phone screen is
	   not filled by a single image. */
	min-height: clamp(20rem, 58vh, 44rem);
	background-position: center;
	background-size: cover;
	background-color: var(--rd-dark);
}

.rd-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent 42%, rgba(0, 0, 0, .85));
}

.rd-hero__media-top {
	position: absolute;
	z-index: 2;
	top: clamp(1.25rem, 3vw, 2.25rem);
	left: clamp(1.25rem, 3vw, 2.5rem);
	right: clamp(1.25rem, 3vw, 2.5rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	font-size: var(--rd-fs-meta);
	text-transform: uppercase;
	letter-spacing: .16em;
}

.rd-hero__media-title {
	position: absolute;
	z-index: 2;
	left: clamp(1.25rem, 3vw, 2.5rem);
	right: clamp(1.25rem, 3vw, 2.5rem);
	bottom: clamp(1.75rem, 4vw, 3.5rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.rd-hero__media-title small {
	color: var(--rd-cyan);
	font-size: var(--rd-fs-meta);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-weight: 700;
}

.rd-hero__media-title strong {
	margin: 10px 0 18px;
	font-family: var(--rd-serif);
	font-weight: 400;
	/* 46 → 98, matching v1.0.0's presence at both ends. */
	font-size: clamp(2.875rem, 1.94rem + 4.64vw, 6.125rem);
	line-height: 1;
	letter-spacing: -.04em;
}

/* -------------------------------------------------------------------------
   6. Signal strip
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   7. Split headings
   ---------------------------------------------------------------------- */

.rd-split-heading {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(1.75rem, 4vw, 5rem);
	align-items: end;
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.rd-split-heading > * {
	min-width: 0;
}

.rd-split-heading h2,
.rd-statement h2,
.rd-contact h2 {
	margin: 0;
	font-family: var(--rd-serif);
	font-weight: 400;
	font-size: var(--rd-fs-h2);
	line-height: .96;
	letter-spacing: -.045em;
}

.rd-split-heading p {
	margin: 0 0 18px;
	max-width: 48ch;
	color: rgba(255, 255, 255, .72);
	line-height: 1.7;
}

.rd-split-heading--dark p {
	color: var(--rd-muted-strong);
}

/* -------------------------------------------------------------------------
   8. Trailer
   ---------------------------------------------------------------------- */

.rd-trailer {
	background: var(--rd-dark);
	color: #fff;
}

.rd-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid rgba(140, 236, 255, .3);
	background: #000;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.rd-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* -------------------------------------------------------------------------
   9. Statement, journey, outcomes
   ---------------------------------------------------------------------- */

.rd-statement__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(1.75rem, 4vw, 5rem);
}

.rd-statement__grid p {
	margin: 0 0 18px;
	max-width: 58ch;
	color: var(--rd-muted-strong);
	line-height: 1.75;
}

.rd-journey {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: clamp(2.5rem, 5vw, 5rem) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rd-line);
	border-bottom: 1px solid var(--rd-line);
}

.rd-journey li {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	min-height: 130px;
	padding: 22px clamp(0.75rem, 1.5vw, 1.5rem);
	border-right: 1px solid var(--rd-line);
}

.rd-journey li:last-child {
	border-right: 0;
}

.rd-journey__num {
	color: var(--rd-muted);
	font-size: var(--rd-fs-meta);
	letter-spacing: .14em;
	font-weight: 800;
}

.rd-journey__label {
	font-family: var(--rd-serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.8125rem); /* 24 → 29 */
	line-height: 1.1;
}

.rd-outcomes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 18px;
	margin-top: clamp(1.5rem, 3vw, 2.2rem);
}

.rd-outcomes article {
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2rem);
	border-top: 3px solid var(--rd-blue);
	background: rgba(255, 255, 255, .045);
	border-inline: 1px solid var(--rd-line);
	border-bottom: 1px solid var(--rd-line);
}

.rd-outcomes h3 {
	margin: clamp(1.5rem, 3vw, 2.2rem) 0 10px;
	font-family: var(--rd-serif);
	font-weight: 400;
	font-size: var(--rd-fs-h3);
	line-height: 1.15;
}

.rd-outcomes p {
	margin: 0;
	color: var(--rd-muted-strong);
	font-size: 0.875rem;
	line-height: 1.65;
}

/* -------------------------------------------------------------------------
   10. Capabilities
   ---------------------------------------------------------------------- */

.rd-capabilities {
	background: var(--rd-surface-2);
}

/*
 * auto-fit + minmax means the grid reflows on its own at every width instead
 * of jumping 3 → 2 → 1 at two hard breakpoints. That removes the squeezed
 * two-column tablet state where the paragraph overflowed the card.
 */
.rd-cap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	border-top: 1px solid var(--rd-line);
	border-left: 1px solid var(--rd-line);
}

.rd-cap-grid article {
	display: flex;
	flex-direction: column;
	min-height: clamp(14rem, 28vw, 19.375rem);
	padding: clamp(1.5rem, 3vw, 2.2rem);
	border-right: 1px solid var(--rd-line);
	border-bottom: 1px solid var(--rd-line);
	transition: background-color .25s ease, color .25s ease;
}

.rd-cap-grid__num {
	color: var(--rd-blue);
	font-size: var(--rd-fs-meta);
	letter-spacing: .15em;
	font-weight: 800;
}

/*
 * `margin-top: auto` pushes the heading to the bottom of whatever space the
 * card actually has. The old fixed `margin: 90px 0 16px` overflowed the card
 * as soon as the grid dropped to two columns.
 */
.rd-cap-grid h3 {
	margin: auto 0 14px;
	padding-top: 2.5rem;
	font-family: var(--rd-serif);
	font-weight: 400;
	font-size: var(--rd-fs-h3);
	line-height: 1.12;
}

.rd-cap-grid p {
	margin: 0;
	color: var(--rd-muted-strong);
	font-size: 0.875rem;
	line-height: 1.65;
}

/*
 * Cap the capability grid at three columns. auto-fit alone produced four
 * columns on a wide monitor, which left the six cards in a ragged 4 + 2 with
 * two empty cells. Three columns divides the six evenly.
 */
@media (min-width: 1180px) {
	.rd-cap-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (hover: hover) {
	.rd-cap-grid article:hover {
		background: rgba(140, 236, 255, .07);
	}

	.rd-cap-grid article:hover .rd-cap-grid__num {
		color: var(--rd-cyan);
	}
}

/* -------------------------------------------------------------------------
   11. Case study
   ---------------------------------------------------------------------- */

.rd-case {
	display: grid;
	grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
	background: #09171b;
	color: #fff;
}

.rd-case > * {
	min-width: 0;
}

.rd-case__image {
	min-height: clamp(16rem, 50vh, 45rem);
	background-position: center;
	background-size: cover;
	background-color: var(--rd-dark);
}

.rd-case__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(2.5rem, 2rem + 5vw, 6.875rem) var(--rd-gutter);
}

.rd-case__copy h2 {
	margin: 0 0 20px;
	font-family: var(--rd-serif);
	font-weight: 400;
	font-size: var(--rd-fs-h2-sm);
	line-height: .95;
	letter-spacing: -.045em;
}

.rd-case__copy > p {
	max-width: 56ch;
	margin: 0 0 14px;
	color: rgba(255, 255, 255, .74);
	line-height: 1.75;
}

.rd-case__lead {
	color: var(--rd-cyan);
	font-family: var(--rd-serif);
	font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.4375rem);
	line-height: 1.3;
}

.rd-case__list {
	width: 100%;
	max-width: 56ch;
	margin: 22px 0 26px;
	padding: 0;
	list-style: none;
}

.rd-case__list li {
	padding: 12px 0;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   12. Work
   ---------------------------------------------------------------------- */

.rd-work-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: 18px;
}

.rd-work-grid > * {
	min-width: 0;
}

.rd-work-feature {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(20rem, 55vh, 38.75rem);
	padding: clamp(1.5rem, 3vw, 2.8rem);
	background-position: center;
	background-size: cover;
	background-color: var(--rd-dark);
	color: #fff;
}

.rd-work-feature::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, .92), transparent 72%);
}

.rd-work-feature > div {
	position: relative;
	z-index: 2;
	width: 100%;
}

.rd-work-feature .rd-eyebrow-sm {
	color: var(--rd-cyan);
}

.rd-work-feature h3 {
	margin: 12px 0;
	font-family: var(--rd-serif);
	font-weight: 400;
	font-size: clamp(2.75rem, 2.57rem + 0.89vw, 3.375rem); /* 44 → 54 */
	line-height: 1.05;
	letter-spacing: -.035em;
}

.rd-work-feature p {
	max-width: 46ch;
	margin: 0;
	color: rgba(255, 255, 255, .76);
}

.rd-work-feature__cta {
	display: inline-block;
	margin-top: 14px;
	font-size: var(--rd-fs-meta);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 800;
}

.rd-work-stack {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 18px;
}

.rd-card {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(13rem, 24vw, 18rem);
	padding: clamp(1.5rem, 3vw, 2.625rem);
}

.rd-card h3 {
	margin: 12px 0;
	font-family: var(--rd-serif);
	font-weight: 400;
	/* "ConocoPhillips" is a 14-character unbroken word. Measurement confirmed
	   36px fits the card at 320px, and overflow-wrap catches anything longer. */
	font-size: clamp(1.875rem, 1.77rem + 0.54vw, 2.25rem); /* 30 → 36 */
	line-height: 1.1;
	letter-spacing: -.03em;
}

.rd-card p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.65;
}

.rd-card--blue {
	background: var(--rd-blue);
	color: #fff;
}

.rd-card--blue .rd-eyebrow-sm {
	color: rgba(255, 255, 255, .78);
}

.rd-card--blue p {
	color: rgba(255, 255, 255, .82);
}

.rd-card--pale {
	background: rgba(140, 236, 255, .1);
	border: 1px solid var(--rd-line);
	color: #EAF4FA;
}

.rd-card--pale p {
	color: var(--rd-muted-strong);
}

/* -------------------------------------------------------------------------
   13. Contact
   ---------------------------------------------------------------------- */

.rd-contact {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(2rem, 5vw, 6rem);
	background: var(--rd-blue-deep);
	color: #fff;
}

.rd-contact > * {
	min-width: 0;
}

.rd-contact > div:last-child {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
}

.rd-contact > div:last-child p {
	max-width: 48ch;
	margin: 0 0 26px;
	line-height: 1.7;
}

/* -------------------------------------------------------------------------
   14. Footer
   ---------------------------------------------------------------------- */

.rd-site-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.25rem, 3vw, 2.2rem);
	padding: clamp(2rem, 4vw, 2.4rem) var(--rd-gutter);
	background: var(--rd-ink);
	color: #fff;
}

.rd-site-footer__brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	min-width: 0;
}

.rd-site-footer__tagline,
.rd-site-footer__legal {
	margin: 0;
	color: rgba(255, 255, 255, .62);
	font-size: var(--rd-fs-meta);
	text-transform: uppercase;
	letter-spacing: .14em;
	line-height: 1.6;
}

.rd-footer-links .rd-menu {
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.rd-footer-links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--rd-tap);
}

@media (hover: hover) {
	.rd-footer-links a:hover {
		color: var(--rd-cyan);
	}
}

/* -------------------------------------------------------------------------
   15. Interior pages
   ---------------------------------------------------------------------- */

.rd-content-shell {
	max-width: 1180px;
	margin: 0 auto;
	/* No more 150px magic number: the sticky header is in flow. */
	padding: clamp(2.5rem, 6vw, 5rem) var(--rd-gutter) clamp(4rem, 8vw, 6.25rem);
}

.rd-page-title,
.rd-archive-title,
.rd-not-found h1 {
	margin: 0 0 1rem;
	font-family: var(--rd-serif);
	font-weight: 400;
	font-size: var(--rd-fs-h2-sm);
	line-height: 1.05;
	letter-spacing: -.035em;
}

.rd-article {
	padding: clamp(1.5rem, 3vw, 2.2rem) 0;
	border-bottom: 1px solid var(--rd-line);
}

.rd-article__title {
	margin: 0 0 6px;
	font-family: var(--rd-serif);
	font-weight: 400;
	font-size: var(--rd-fs-h3);
	line-height: 1.2;
}

.rd-article__meta {
	margin: 0 0 12px;
	color: var(--rd-muted);
	font-size: var(--rd-fs-meta);
	text-transform: uppercase;
	letter-spacing: .14em;
}

.rd-page-content :where(h2, h3, h4) {
	font-family: var(--rd-serif);
	font-weight: 400;
	line-height: 1.2;
}

.rd-page-content :where(p, li) {
	max-width: 70ch;
}

/* Wide media inside post content must not push the page sideways. */
.rd-page-content :where(table, pre, iframe, embed, object) {
	max-width: 100%;
}

.rd-page-content pre {
	overflow-x: auto;
}

.rd-page-content table {
	display: block;
	overflow-x: auto;
	border-collapse: collapse;
}

.rd-featured-image {
	margin: 0 0 1.5rem;
}

.rd-not-found__help {
	max-width: 52ch;
}

.rd-search-form__label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--rd-fs-meta);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 800;
}

.rd-search-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 1.5rem;
}

.rd-search-form__input {
	flex: 1 1 12rem;
	min-width: 0;
	min-height: var(--rd-tap);
	padding: 10px 14px;
	border: 1px solid var(--rd-line);
	background: var(--rd-white);
	font: inherit;
	font-size: 1rem; /* 16px minimum stops iOS Safari zooming on focus. */
}

.pagination .nav-links,
.rd-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 2rem;
}

.pagination .page-numbers,
.rd-page-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--rd-tap);
	min-height: var(--rd-tap);
	padding: 0 12px;
	border: 1px solid var(--rd-line);
	font-size: 0.8125rem;
}

.pagination .page-numbers.current {
	background: var(--rd-blue);
	border-color: var(--rd-blue);
	color: #fff;
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 18px;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--rd-line);
}

.rd-elementor-content {
	/* Elementor supplies its own spacing; just guarantee containment. */
	max-width: 100%;
}

/* -------------------------------------------------------------------------
   16. Responsive
   ---------------------------------------------------------------------- */

/* Large tablet / small laptop. */
@media (max-width: 1100px) {
	.rd-split-heading,
	.rd-statement__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.25rem, 3vw, 2rem);
		align-items: start;
	}
}

/* Tablet and below: the navigation becomes a disclosure panel. */
@media (max-width: 999.98px) {
	.rd-hero,
	.rd-case,
	.rd-contact,
	.rd-work-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.rd-work-stack {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
		grid-template-rows: none;
	}

	.rd-hero__copy {
		order: 1;
	}

	.rd-hero__media {
		order: 2;
		min-height: clamp(18rem, 46vh, 30rem);
	}

	.rd-case__image {
		min-height: clamp(15rem, 38vh, 26rem);
	}
}

/* Phones. */
@media (max-width: 599.98px) {
	.rd-brand__mark {
		width: 38px;
		height: 38px;
	}

	.rd-brand__word {
		font-size: 0.625rem;
		letter-spacing: .16em;
	}

	.rd-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.rd-actions .rd-button,
	.rd-actions .rd-underline-link {
		width: 100%;
	}

	.rd-actions .rd-underline-link {
		justify-content: center;
	}

	/* Stacked rows read better than five squeezed columns. */
	.rd-journey {
		grid-template-columns: minmax(0, 1fr);
	}

	.rd-journey li {
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start;
		gap: 16px;
		min-height: 0;
		padding: 14px 0;
		border-right: 0;
		border-bottom: 1px solid var(--rd-line);
	}

	.rd-journey li:last-child {
		border-bottom: 0;
	}

	.rd-site-footer {
		flex-direction: column;
		align-items: flex-start;
	}

	.rd-site-footer__brand {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

/* Very small phones (320–380px) and large accessibility text settings. */
@media (max-width: 380px) {
	.rd-brand__word {
		/* Allow the wordmark to wrap rather than push the toggle off-screen. */
		white-space: normal;
	}

	.rd-hero__title {
		letter-spacing: -.03em;
	}
}

/* -------------------------------------------------------------------------
   17. Motion, print, forced colors
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	.rd-button,
	
}

@media print {
	.rd-site-header,
	.rd-video {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* =========================================================================
   18. v1.2.0 — VISUAL SYSTEM
   Always-visible top navigation, plus the atmospheric layer: ring motif,
   film grain, HUD rules, marquee, and scroll reveals. Every effect degrades
   to a plain readable page if CSS animation or JS is unavailable, and all of
   it is switched off under prefers-reduced-motion.
   ====================================================================== */

:root {
	--rd-glow: 0 0 0 1px rgba(140, 236, 255, .18), 0 24px 70px rgba(20, 86, 125, .35);
	--rd-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------- 18.1 Header */

.rd-site-header {
	display: block;
	padding: 0;
	background:
		linear-gradient(180deg, rgba(20, 86, 125, .22), transparent 70%),
		rgba(8, 12, 16, .88);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid rgba(140, 236, 255, .16);
}

.rd-header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 2vw, 2.5rem);
	min-height: 72px;
	padding: 10px var(--rd-gutter);
}

/* Hairline that fills as the reader scrolls the page. */
.rd-header-progress {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: var(--rd-progress, 0%);
	will-change: width;
	background: linear-gradient(90deg, var(--rd-blue), var(--rd-cyan));
	box-shadow: 0 0 12px rgba(140, 236, 255, .7);
	transition: width .1s linear;
}

.rd-brand__mark {
	position: relative;
	overflow: visible;
	border-color: rgba(140, 236, 255, .45);
	box-shadow: 0 0 0 4px rgba(140, 236, 255, .06);
	transition: box-shadow .4s var(--rd-ease);
}

/* Slow orbit ring around the logo — the brand mark is concentric circles, so
   the motion is drawn from the identity rather than bolted on. */
.rd-brand__mark::after {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	border: 1px solid rgba(140, 236, 255, .3);
	border-top-color: transparent;
	border-left-color: transparent;
	animation: rd-orbit 9s linear infinite;
}

@keyframes rd-orbit {
	to { transform: rotate(360deg); }
}

/* Inline nav: desktop. Animated cyan underline on hover and for the
   current section. */


.rd-main-nav .rd-menu a {
	position: relative;
	opacity: .8;
}

.rd-main-nav--inline .rd-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	height: 1px;
	background: var(--rd-cyan);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--rd-ease);
}

.rd-main-nav--inline .rd-menu a:hover::after,
.rd-main-nav--inline .rd-menu a:focus-visible::after,
.rd-main-nav--inline .current-menu-item > a::after,
.rd-main-nav--inline .rd-menu a[aria-current="true"]::after {
	transform: scaleX(1);
}

.rd-main-nav .rd-menu a[aria-current="true"] { opacity: 1; color: var(--rd-cyan); }

/*
 * Strip nav: tablet and phone. This replaces the v1.1.0 slide-out panel so the
 * menu is permanently on screen. It scrolls horizontally when there are more
 * links than fit, with a fade at the right edge hinting there is more.
 */
.rd-main-nav--strip {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.rd-main-nav--strip::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 42px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(8, 12, 16, .95));
}

.rd-nav-strip__track {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
}

.rd-nav-strip__track::-webkit-scrollbar { display: none; }

.rd-main-nav--strip .rd-menu {
	width: max-content;
	gap: 0;
	padding: 0 var(--rd-gutter);
}

.rd-main-nav--strip .rd-menu a {
	scroll-snap-align: start;
	min-height: 46px;
	padding: 0 16px;
	font-size: 0.6875rem;
	white-space: nowrap;
	opacity: .85;
	border-bottom: 2px solid transparent;
}

.rd-main-nav--strip .rd-menu a[aria-current="true"],
.rd-main-nav--strip .current-menu-item > a {
	color: var(--rd-cyan);
	border-bottom-color: var(--rd-cyan);
	opacity: 1;
}

.rd-header-cta {
	position: relative;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(140, 236, 255, .55);
	white-space: nowrap;
}

.rd-header-cta__icon { transition: transform .35s var(--rd-ease); }

@media (hover: hover) {
	.rd-header-cta:hover .rd-header-cta__icon { transform: translate(3px, -3px); }
}

@media (max-width: 599.98px) {
	.rd-header-cta__text {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.rd-header-cta {
		width: 44px; height: 44px;
		justify-content: center;
		border: 1px solid rgba(140, 236, 255, .45);
		border-radius: 50%;
	}

	.rd-header-cta__icon { font-size: 1.1rem; }
}

/* ------------------------------------------------------ 18.2 Atmosphere */

/* Film grain over the dark sections. Tiny tiled PNG, no performance cost. */
.rd-hero,
.rd-trailer,
.rd-case,
.rd-contact,
.rd-site-footer { position: relative; }

.rd-hero::before,
.rd-trailer::before,
.rd-case::before,
.rd-contact::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: url("../images/grain.png");
	background-size: 180px 180px;
	opacity: .5;
	mix-blend-mode: overlay;
}

.rd-hero > *,
.rd-trailer > *,
.rd-case > *,
.rd-contact > * { position: relative; z-index: 2; }

/* ----------------------------------------------------------- 18.3 Hero */

.rd-hero__copy {
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 8% 30%, rgba(20, 86, 125, .42), transparent 60%),
		radial-gradient(80% 60% at 90% 90%, rgba(140, 236, 255, .1), transparent 60%),
		var(--rd-ink);
}

/* Concentric ring motif echoing the logo, drawn in pure CSS. */
.rd-hero__copy::after {
	content: "";
	position: absolute;
	right: -18%;
	top: 50%;
	width: min(46rem, 90vw);
	aspect-ratio: 1;
	translate: 0 -50%;
	border-radius: 50%;
	pointer-events: none;
	background:
		radial-gradient(circle, transparent 61%, rgba(140, 236, 255, .16) 61.5%, transparent 63%),
		radial-gradient(circle, transparent 44%, rgba(140, 236, 255, .12) 44.5%, transparent 46%),
		radial-gradient(circle, transparent 29%, rgba(20, 86, 125, .5) 29.5%, transparent 31%);
	animation: rd-drift 26s ease-in-out infinite alternate;
}

@keyframes rd-drift {
	from { transform: rotate(0deg) scale(1); }
	to   { transform: rotate(14deg) scale(1.07); }
}

.rd-eyebrow span {
	background: linear-gradient(90deg, var(--rd-cyan), var(--rd-blue));
	animation: rd-sweep 3.4s ease-in-out infinite;
}

@keyframes rd-sweep {
	0%, 100% { width: 24px; opacity: .7; }
	50%      { width: 44px; opacity: 1; }
}

/* The last line of the hero headline picks up the cyan — one accent, not ten. */
.rd-hero__title em {
	font-style: normal;
	background: linear-gradient(100deg, var(--rd-cyan), #ffffff 55%, #7fd4f5);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.rd-hero__media {
	box-shadow: inset 0 0 140px rgba(0, 0, 0, .6);
}

/* HUD framing on the media panel. */
.rd-hero__media::before {
	content: "";
	position: absolute;
	inset: clamp(12px, 2vw, 22px);
	z-index: 2;
	pointer-events: none;
	border: 1px solid rgba(140, 236, 255, .22);
	-webkit-mask:
		linear-gradient(#000 0 0) top left / 34px 1px no-repeat,
		linear-gradient(#000 0 0) top left / 1px 34px no-repeat,
		linear-gradient(#000 0 0) top right / 34px 1px no-repeat,
		linear-gradient(#000 0 0) top right / 1px 34px no-repeat,
		linear-gradient(#000 0 0) bottom left / 34px 1px no-repeat,
		linear-gradient(#000 0 0) bottom left / 1px 34px no-repeat,
		linear-gradient(#000 0 0) bottom right / 34px 1px no-repeat,
		linear-gradient(#000 0 0) bottom right / 1px 34px no-repeat;
	mask:
		linear-gradient(#000 0 0) top left / 34px 1px no-repeat,
		linear-gradient(#000 0 0) top left / 1px 34px no-repeat,
		linear-gradient(#000 0 0) top right / 34px 1px no-repeat,
		linear-gradient(#000 0 0) top right / 1px 34px no-repeat,
		linear-gradient(#000 0 0) bottom left / 34px 1px no-repeat,
		linear-gradient(#000 0 0) bottom left / 1px 34px no-repeat,
		linear-gradient(#000 0 0) bottom right / 34px 1px no-repeat,
		linear-gradient(#000 0 0) bottom right / 1px 34px no-repeat;
}

.rd-hero__media-title strong {
	text-shadow: 0 0 60px rgba(140, 236, 255, .35);
}

/* --------------------------------------------------------- 18.4 Buttons */

.rd-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Light sweep across the primary button on hover. */
.rd-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: translateX(-101%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
	transition: transform .6s var(--rd-ease);
}

.rd-button--primary {
	background: linear-gradient(120deg, var(--rd-blue), #1d6f9e);
	box-shadow: 0 14px 34px rgba(20, 86, 125, .42);
}

@media (hover: hover) {
	.rd-button:hover::before { transform: translateX(101%); }
	.rd-button--ghost:hover { border-color: var(--rd-cyan); color: var(--rd-cyan); }
}

.rd-underline-link {
	position: relative;
	border-bottom-color: transparent;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	transition: background-size .4s var(--rd-ease);
}

@media (hover: hover) {
	.rd-underline-link:hover { background-size: 40% 1px; }
}

/* ---------------------------------------------------- 18.6 Section chrome */

.rd-section-label {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rd-section-label::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: .7;
}

.rd-hero,
.rd-case,
.rd-work-feature,
.rd-outcomes article {
	overflow: hidden;
}

.rd-statement,
.rd-work {
	background-color: var(--rd-surface);
	background-image: url("../images/grid.png");
	background-size: 48px 48px;
}

/* Cards lift and reveal a cyan edge. */
.rd-outcomes article {
	position: relative;
	transition: transform .4s var(--rd-ease), box-shadow .4s var(--rd-ease);
}

@media (hover: hover) {
	.rd-outcomes article:hover {
		transform: translateY(-6px);
		box-shadow: var(--rd-glow);
	}
}

.rd-cap-grid article {
	position: relative;
	overflow: hidden;
}

/* Oversized watermark number, revealed on hover. */
.rd-cap-grid article::before {
	content: "";
	position: absolute;
	inset: auto -30% -40% auto;
	width: 15rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(20, 86, 125, .16), transparent 62%);
	opacity: 0;
	transition: opacity .4s var(--rd-ease);
}

@media (hover: hover) {
	.rd-cap-grid article:hover::before { opacity: 1; }
	.rd-cap-grid article:hover .rd-cap-grid__num { color: var(--rd-cyan); }
}

.rd-journey li { position: relative; transition: background-color .3s var(--rd-ease); }

.rd-journey li::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 0;
	height: 2px;
	background: var(--rd-blue);
	transition: width .5s var(--rd-ease);
}

@media (hover: hover) {
	.rd-journey li:hover::after { width: 100%; }
}

/* --------------------------------------------------------- 18.7 Case + work */

.rd-case__image,
.rd-work-feature {
	position: relative;
	overflow: hidden;
}

.rd-case__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 60%, #09171b);
	opacity: .9;
}

@media (min-width: 1000px) {
	.rd-case__image { border-right: 1px solid rgba(140, 236, 255, .2); }
}

.rd-case__list li {
	position: relative;
	padding-left: 22px;
	transition: color .3s var(--rd-ease), padding-left .3s var(--rd-ease);
}

.rd-case__list li::before {
	content: "\25B8";
	position: absolute;
	left: 0;
	color: var(--rd-cyan);
}

@media (hover: hover) {
	.rd-case__list li:hover { color: var(--rd-cyan); padding-left: 28px; }
}

.rd-work-feature {
	transition: transform .5s var(--rd-ease);
}

.rd-work-feature::before {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;
	background-size: cover;
	background-position: center;
	transition: transform .8s var(--rd-ease);
}

@media (hover: hover) {
	.rd-work-feature:hover { transform: translateY(-4px); }
	.rd-work-feature:hover .rd-work-feature__cta { color: var(--rd-cyan); }
}

.rd-work-feature__cta { transition: color .3s var(--rd-ease); }

.rd-card {
	position: relative;
	overflow: hidden;
	transition: transform .4s var(--rd-ease);
}

.rd-card::after {
	content: "";
	position: absolute;
	inset: auto auto -45% -25%;
	width: 16rem;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid currentColor;
	opacity: .12;
	pointer-events: none;
}

@media (hover: hover) {
	.rd-card:hover { transform: translateY(-5px); }
}

/* ------------------------------------------------------- 18.8 Contact */

.rd-contact {
	/* The decorative ring below is positioned outside the box, so the section
	   must clip it or it adds horizontal scroll to the whole document. */
	overflow: hidden;
	background:
		radial-gradient(90% 120% at 15% 0%, rgba(20, 86, 125, .55), transparent 60%),
		var(--rd-blue-deep);
}

.rd-contact::after {
	content: "";
	position: absolute;
	right: -12%;
	bottom: -55%;
	width: min(40rem, 85vw);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(140, 236, 255, .2);
	box-shadow: inset 0 0 0 1px rgba(140, 236, 255, .1);
	pointer-events: none;
}

/* -------------------------------------------------------- 18.9 Footer */

.rd-site-footer {
	background:
		linear-gradient(180deg, rgba(20, 86, 125, .18), transparent 55%),
		var(--rd-ink);
	border-top: 1px solid rgba(140, 236, 255, .18);
}

/* --------------------------------------------------- 18.10 Scroll reveal */

/*
 * Applied by motion.js only. If JS never runs the class is never added, so
 * content stays visible — content is never hidden by CSS alone.
 */
.rd-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--rd-ease), transform .7s var(--rd-ease);
}

.rd-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------- 18.11 Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.rd-brand__mark::after,
	.rd-hero__copy::after,
	.rd-eyebrow span,
	.rd-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}


/* -------------------------------------------------------------------------
   19. Navigation visibility — single source of truth

   Declared last so no earlier rule can override it. The menu is visible at
   every width: inline in the header bar on desktop, and as a scrollable strip
   on its own row below 1000px.
   ---------------------------------------------------------------------- */

.rd-main-nav--inline { display: none; }
.rd-main-nav--strip  { display: block; }

@media (min-width: 1000px) {
	.rd-main-nav--inline { display: block; }
	.rd-main-nav--strip  { display: none; }
}


/* =========================================================================
   20. v1.3.0 — Tagline, Ecliptica1 project showcase
   ====================================================================== */

/*
 * The scrolling ticker is gone. This is a single static line: quieter, easier
 * to read, and it does not compete with the hero for attention.
 */
.rd-tagline {
	margin: 0;
	padding: 18px var(--rd-gutter);
	background: var(--rd-blue-deep);
	color: rgba(255, 255, 255, .9);
	font-size: var(--rd-fs-meta);
	text-transform: uppercase;
	letter-spacing: .2em;
	font-weight: 700;
	line-height: 1.8;
	text-align: center;
	text-wrap: balance;
	border-block: 1px solid rgba(140, 236, 255, .26);
}

/* ------------------------------------------------ Case study badge */

.rd-case__badge {
	position: absolute;
	z-index: 3;
	top: clamp(1.25rem, 3vw, 2.25rem);
	left: clamp(1.25rem, 3vw, 2.25rem);
	right: clamp(1.25rem, 3vw, 2.25rem);
	color: var(--rd-cyan);
	font-size: var(--rd-fs-meta);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-weight: 800;
}

/* ------------------------------------------- Engagement loop section */

.rd-loop {
	background:
		radial-gradient(80% 100% at 80% 0%, rgba(20, 86, 125, .4), transparent 62%),
		var(--rd-dark);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.rd-loop-grid {
	display: grid;
	/*
	 * Seven explicit columns on desktop so the loop reads as one continuous
	 * sequence, Watch through Return. auto-fit gave six columns at 1440px,
	 * which pushed "Return" onto its own row and left a large empty cell.
	 */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: rgba(140, 236, 255, .18);
	border: 1px solid rgba(140, 236, 255, .18);
}

.rd-loop-grid li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: #07161b;
	transition: background-color .35s var(--rd-ease);
}

.rd-loop-grid__num {
	color: var(--rd-cyan);
	font-size: var(--rd-fs-meta);
	letter-spacing: .16em;
	font-weight: 800;
}

.rd-loop-grid h3 {
	margin: 4px 0 0;
	font-family: var(--rd-serif);
	font-weight: 400;
	font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
	line-height: 1.1;
}

.rd-loop-grid p {
	margin: 0;
	color: rgba(255, 255, 255, .68);
	font-size: 0.8125rem;
	line-height: 1.55;
}

@media (min-width: 640px) {
	.rd-loop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1240px) {
	.rd-loop-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (hover: hover) {
	.rd-loop-grid li:hover { background: #0b2530; }
}

/* ------------------------------------------------------- Metrics band */

.rd-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-top: clamp(2rem, 4vw, 3.25rem);
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	border-top: 1px solid rgba(140, 236, 255, .22);
}

.rd-metrics div {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.rd-metrics strong {
	font-family: var(--rd-serif);
	font-weight: 400;
	font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);
	line-height: .95;
	letter-spacing: -.04em;
	color: var(--rd-cyan);
}

.rd-metrics span {
	color: rgba(255, 255, 255, .66);
	font-size: var(--rd-fs-meta);
	text-transform: uppercase;
	letter-spacing: .15em;
	line-height: 1.5;
}

/* =========================================================================
   21. v1.4.0 — Real Ecliptica1 media
   ====================================================================== */

/* ------------------------------------------------------ Hero video */

.rd-hero__media {
	background-color: #04090E;
}

.rd-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Cool the footage very slightly so it sits with the blue/white palette. */
	filter: saturate(1.05) contrast(1.04);
}

/*
 * Reduced motion and small screens keep the poster still. On a phone the
 * video is mostly wasted bytes behind an overlay, and autoplay is unreliable.
 */
@media (prefers-reduced-motion: reduce) {
	.rd-hero__video { display: none; }
}

.rd-hero__media::after { z-index: 1; }
.rd-hero__media::before { z-index: 3; }
.rd-hero__media-top,
.rd-hero__media-title { z-index: 4; }

/* --------------------------------------------------- Storyworld gallery */

.rd-gallery {
	background:
		radial-gradient(70% 90% at 15% 0%, rgba(27, 111, 168, .28), transparent 60%),
		var(--rd-ink);
	color: #fff;
}

.rd-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(10px, 1.4vw, 18px);
}

@media (min-width: 900px) {
	.rd-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rd-plate--wide { grid-column: span 2; }
	/* Full-bleed closing plate: no empty cell at the end of the grid. */
	.rd-plate--full { grid-column: 1 / -1; aspect-ratio: 32 / 9; }
}

@media (min-width: 561px) and (max-width: 899.98px) {
	.rd-plate--wide,
	.rd-plate--full { grid-column: span 2; }
}

@media (max-width: 560px) {
	.rd-gallery-grid { grid-template-columns: minmax(0, 1fr); }
}

.rd-plate {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--rd-line);
	background: #04090E;
	aspect-ratio: 16 / 9;
}

.rd-plate img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .8s var(--rd-ease), filter .5s var(--rd-ease);
}

.rd-plate figcaption {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: clamp(.85rem, 2vw, 1.4rem);
	background: linear-gradient(0deg, rgba(4, 9, 14, .94), transparent);
}

.rd-plate figcaption strong {
	font-size: var(--rd-fs-meta);
	text-transform: uppercase;
	letter-spacing: .16em;
	font-weight: 800;
	color: var(--rd-cyan);
}

.rd-plate figcaption span {
	font-family: var(--rd-serif);
	font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
	line-height: 1.25;
	color: #fff;
}

/* Corner ticks — the classified-file motif from the Ecliptica1 site. */
.rd-plate::before {
	content: "";
	position: absolute;
	inset: 10px;
	z-index: 3;
	pointer-events: none;
	border: 1px solid rgba(140, 236, 255, .3);
	opacity: 0;
	transition: opacity .4s var(--rd-ease);
	-webkit-mask:
		linear-gradient(#000 0 0) top left / 26px 1px no-repeat,
		linear-gradient(#000 0 0) top left / 1px 26px no-repeat,
		linear-gradient(#000 0 0) bottom right / 26px 1px no-repeat,
		linear-gradient(#000 0 0) bottom right / 1px 26px no-repeat;
	mask:
		linear-gradient(#000 0 0) top left / 26px 1px no-repeat,
		linear-gradient(#000 0 0) top left / 1px 26px no-repeat,
		linear-gradient(#000 0 0) bottom right / 26px 1px no-repeat,
		linear-gradient(#000 0 0) bottom right / 1px 26px no-repeat;
}

@media (hover: hover) {
	.rd-plate:hover img { transform: scale(1.05); }
	.rd-plate:hover::before { opacity: 1; }
}

/* --------------------------------------- Case + work art treatment */

.rd-case__image,
.rd-work-feature {
	background-color: #04090E;
}

/* The concept art is already dark; soften the old heavy scrim so it reads. */
.rd-case__image::after {
	background: linear-gradient(90deg, transparent 45%, rgba(4, 12, 18, .92));
	opacity: 1;
}

.rd-work-feature::after {
	background: linear-gradient(0deg, rgba(4, 9, 14, .95), transparent 62%);
}

/*
 * Narrow-desktop band: the inline nav switches on at 1000px, which leaves the
 * header tight between 1000 and 1140px and squeezed the wordmark by ~4px.
 * Easing the tracking and size reclaims the space without a layout change.
 */
@media (min-width: 1000px) and (max-width: 1140px) {
	.rd-brand__word {
		font-size: 0.625rem;
		letter-spacing: .13em;
	}

	.rd-main-nav--inline .rd-menu {
		gap: 1rem;
	}
}