/* =========================================================================
   Ray Grafix — Base layer. Fonts, reset, typography voices, buttons,
   containers, the annotation language (highlight pill, drawn circle, arrows),
   navigation and footer. Everything namespaced rgx- so the portal and any
   other system on this install are never touched.
   ========================================================================= */

/* --- Fonts (self-hosted, variable) ------------------------------------- */
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-var.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
}
@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dmsans-var.woff2") format("woff2");
	font-weight: 100 1000;
	font-display: swap;
}
/* Metric-compatible fallback so the hero doesn't jump on slow loads */
@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial Narrow"), local("Helvetica Neue");
	size-adjust: 96%;
}

/* --- Reset-lite --------------------------------------------------------- */
.rgx-site *, .rgx-site *::before, .rgx-site *::after { box-sizing: border-box; }
.rgx-site {
	margin: 0;
	background: var(--rgx-paper);
	color: var(--rgx-black);
	font-family: var(--rgx-font-body);
	font-size: var(--rgx-text-body);
	font-weight: var(--rgx-weight-body);
	line-height: var(--rgx-leading-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

html {
	overflow-x: clip;
}
.rgx-site img, .rgx-site svg, .rgx-site video { display: block; max-width: 100%; height: auto; }
.rgx-site ::selection { background: var(--rgx-lime); color: var(--rgx-on-lime); }
:where(.rgx-site) a { color: inherit; }
.rgx-site :focus-visible {
	outline: 2.5px solid var(--rgx-purple);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Skip link */
.rgx-skip {
	position: absolute; left: -9999px; top: 0; z-index: calc(var(--rgx-z-nav) + 1);
	background: var(--rgx-black); color: var(--rgx-white);
	padding: 12px 18px; font-weight: var(--rgx-weight-bold);
}
.rgx-skip:focus { left: 12px; top: 12px; }

/* --- Containers ---------------------------------------------------------- */
.rgx-shell { max-width: var(--rgx-shell); margin-inline: auto; padding-inline: var(--rgx-gutter); }
.rgx-section { padding-block: var(--rgx-section); position: relative; }
.rgx-section--dark { background: var(--rgx-black); color: var(--rgx-white); }

/* --- Typography voices ---------------------------------------------------- */
.rgx-hero-line,
.rgx-d1, .rgx-d2 {
	font-family: var(--rgx-font-display);
	font-weight: var(--rgx-weight-display);
	font-stretch: var(--rgx-display-stretch);
	line-height: var(--rgx-leading-flat);
	letter-spacing: var(--rgx-track-display);
	text-transform: uppercase;
	margin: 0;
	text-wrap: balance;
}
.rgx-hero-line { font-size: var(--rgx-text-hero); font-weight: var(--rgx-weight-black); }
.rgx-d1 { font-size: var(--rgx-text-d1); }
.rgx-d2 { font-size: var(--rgx-text-d2); }
.rgx-h3 {
	font-family: var(--rgx-font-display);
	font-weight: var(--rgx-weight-display);
	font-stretch: 105%;
	font-size: var(--rgx-text-h3);
	line-height: var(--rgx-leading-tight);
	letter-spacing: -0.01em;
	margin: 0;
}
.rgx-lead { font-size: var(--rgx-text-lead); line-height: 1.55; max-width: 46ch; }
.rgx-body { max-width: var(--rgx-measure); }
.rgx-sm { font-size: var(--rgx-text-sm); }
.rgx-muted { color: var(--rgx-gray); }
.rgx-section--dark .rgx-muted { color: var(--rgx-gray-dark); }
.rgx-label {
	font-size: var(--rgx-text-label);
	font-weight: var(--rgx-weight-bold);
	letter-spacing: var(--rgx-track-label);
	text-transform: uppercase;
	display: block;
	margin: 0;
}
.rgx-label::before {
	content: "";
	display: inline-block;
	width: 22px; height: 2px;
	background: var(--rgx-purple);
	margin-right: 10px;
	vertical-align: 0.3em;
}

/* --- Annotation language -------------------------------------------------- */
/* Lime pill highlight — a word that becomes an object */
.rgx-hl {
	position: relative;
	display: inline-block;
	padding: 0.02em 0.16em;
	margin-inline: 0.04em;
	color: var(--rgx-on-lime);
	z-index: 1;
	white-space: nowrap;
}
.rgx-hl::before {
	content: "";
	position: absolute; inset: 0.04em -0.06em;
	background: var(--rgx-lime);
	z-index: -1;
	/* --rgx-hl-x lets JS wipe the pill in; static default is fully drawn */
	transform: rotate(var(--rgx-hl-r, -1.6deg)) scaleX(var(--rgx-hl-x, 1));
	transform-origin: left center;
	transition: transform var(--rgx-dur-fast) var(--rgx-ease);
}
.rgx-hl:hover { --rgx-hl-r: 0.8deg; }

/* Purple word accent */
.rgx-accent { color: var(--rgx-purple); }
.rgx-section--dark .rgx-accent { color: var(--rgx-purple-light); }

/* Drawn ellipse around a word (SVG injected inline, path animates) */
.rgx-circled { position: relative; display: inline-block; white-space: nowrap; }
.rgx-circled > svg {
	position: absolute;
	inset: -0.28em -0.34em;
	width: calc(100% + 0.68em);
	height: calc(100% + 0.56em);
	overflow: visible;
	pointer-events: none;
}
.rgx-circled > svg path {
	fill: none;
	stroke: var(--rgx-purple);
	stroke-width: 2.6;
	stroke-linecap: round;
}
.rgx-circled--lime > svg path { stroke: var(--rgx-lime); }

/* Hand-drawn arrow + margin note */
.rgx-note {
	font-family: var(--rgx-font-body);
	font-size: var(--rgx-text-sm);
	font-weight: var(--rgx-weight-medium);
	font-style: italic;
	color: var(--rgx-gray);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.rgx-arrow-svg { overflow: visible; }
.rgx-arrow-svg path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Buttons --------------------------------------------------------------- */
.rgx-btn {
	--_bg: var(--rgx-black);
	--_fg: var(--rgx-white);
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font: inherit;
	font-weight: var(--rgx-weight-bold);
	font-size: 1rem;
	background: var(--_bg);
	color: var(--_fg);
	border: 2px solid var(--_bg);
	border-radius: var(--rgx-radius-pill);
	padding: 16px 30px;
	min-height: 54px;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--rgx-dur-fast) var(--rgx-ease),
		border-color var(--rgx-dur-fast) var(--rgx-ease),
		color var(--rgx-dur-fast) var(--rgx-ease),
		transform var(--rgx-dur-fast) var(--rgx-ease);
}
.rgx-btn:hover { background: var(--rgx-purple); border-color: var(--rgx-purple); color: #fff; transform: translateY(-2px); }
.rgx-btn:active { transform: translateY(0); }
.rgx-btn .rgx-btn-arrow { transition: transform var(--rgx-dur-fast) var(--rgx-ease); }
.rgx-btn:hover .rgx-btn-arrow { transform: translateX(4px); }

.rgx-btn--lime { --_bg: var(--rgx-lime); --_fg: var(--rgx-on-lime); }
.rgx-btn--lime:hover { background: var(--rgx-purple); border-color: var(--rgx-purple); color: #fff; }
.rgx-btn--ghost {
	background: transparent;
	color: var(--rgx-black);
	border-color: var(--rgx-line-strong);
}
.rgx-btn--ghost:hover { background: transparent; border-color: var(--rgx-black); color: var(--rgx-black); }
.rgx-section--dark .rgx-btn--ghost { color: var(--rgx-white); border-color: var(--rgx-line-inverse); }
.rgx-section--dark .rgx-btn--ghost:hover { border-color: var(--rgx-white); color: var(--rgx-white); }

.rgx-textlink {
	font-weight: var(--rgx-weight-bold);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 3px;
	transition: color var(--rgx-dur-fast);
}
.rgx-textlink:hover { color: var(--rgx-purple-deep); }

/* --- Navigation ------------------------------------------------------------- */
.rgx-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: var(--rgx-z-nav);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rgx-s4);
	padding: calc(14px + env(safe-area-inset-top)) var(--rgx-gutter) 14px;
	transition: background var(--rgx-dur-fast) var(--rgx-ease), box-shadow var(--rgx-dur-fast);
}
body.rgx-nav-solid .rgx-nav {
	background: color-mix(in srgb, var(--rgx-paper) 92%, transparent);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 var(--rgx-line);
}
.rgx-nav-brand { display: inline-flex; align-items: center; color: var(--rgx-black); }
.rgx-nav-brand svg { height: 22px; width: auto; }
.rgx-nav-links { display: none; align-items: center; gap: clamp(18px, 2.4vw, 34px); list-style: none; margin: 0; padding: 0; }
.rgx-nav-links a {
	text-decoration: none;
	font-weight: var(--rgx-weight-medium);
	font-size: var(--rgx-text-sm);
	opacity: 0.85;
	transition: opacity var(--rgx-dur-fast);
}
.rgx-nav-links a:hover { opacity: 1; }
.rgx-nav-cta { display: none; }
.rgx-nav .rgx-btn { min-height: 46px; padding: 12px 22px; font-size: var(--rgx-text-sm); }

/* Burger (mobile) */
.rgx-burger {
	appearance: none; background: none; border: 0; cursor: pointer;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	border-radius: var(--rgx-radius-pill);
}
.rgx-burger span {
	display: block; width: 24px; height: 2.5px; background: var(--rgx-black);
	position: relative; transition: transform var(--rgx-dur-fast) var(--rgx-ease), background 0s 0.1s;
}
.rgx-burger span::before, .rgx-burger span::after {
	content: ""; position: absolute; left: 0; width: 24px; height: 2.5px; background: var(--rgx-black);
	transition: transform var(--rgx-dur-fast) var(--rgx-ease), top var(--rgx-dur-fast) var(--rgx-ease);
}
.rgx-burger span::before { top: -8px; }
.rgx-burger span::after { top: 8px; }
body.rgx-menu-open .rgx-burger span { background: transparent; }
body.rgx-menu-open .rgx-burger span::before { top: 0; transform: rotate(45deg); }
body.rgx-menu-open .rgx-burger span::after { top: 0; transform: rotate(-45deg); }

/* Mobile menu overlay */
.rgx-menu {
	position: fixed; inset: 0; z-index: var(--rgx-z-menu);
	background: var(--rgx-black); color: var(--rgx-white);
	display: grid;
	grid-template-rows: auto 1fr auto;
	padding: calc(16px + env(safe-area-inset-top)) var(--rgx-gutter) calc(24px + env(safe-area-inset-bottom));
	transform: translateY(-104%);
	transition: transform var(--rgx-dur) var(--rgx-ease);
	visibility: hidden;
}
body.rgx-menu-open .rgx-menu { transform: none; visibility: visible; }
body.rgx-menu-open { overflow: hidden; }
.rgx-menu-head { display: flex; justify-content: space-between; align-items: center; }
.rgx-menu-head .rgx-nav-brand { color: var(--rgx-white); }
.rgx-menu-head .rgx-burger span, .rgx-menu-head .rgx-burger span::before, .rgx-menu-head .rgx-burger span::after { background: var(--rgx-white); }
body.rgx-menu-open .rgx-menu-head .rgx-burger span { background: transparent; }
.rgx-menu-list { list-style: none; margin: 0; padding: 0; align-self: center; }
.rgx-menu-list a {
	font-family: var(--rgx-font-display);
	font-weight: var(--rgx-weight-black);
	font-stretch: var(--rgx-display-stretch);
	font-size: clamp(2.6rem, 10vw, 4.4rem);
	text-transform: uppercase;
	line-height: 1.16;
	text-decoration: none;
	display: inline-block;
	transition: color var(--rgx-dur-fast);
}
.rgx-menu-list a:hover { color: var(--rgx-lime); }
.rgx-menu-foot { display: flex; flex-wrap: wrap; gap: var(--rgx-s4); justify-content: space-between; align-items: center; color: var(--rgx-gray-dark); font-size: var(--rgx-text-sm); }

@media (min-width: 880px) {
	.rgx-nav-links { display: flex; }
	.rgx-nav-cta { display: inline-flex; }
	.rgx-burger { display: none; }
}

/* --- Footer ------------------------------------------------------------------ */
.rgx-footer { background: var(--rgx-black); color: var(--rgx-white); }
.rgx-footer-inner { padding-block: var(--rgx-s8) var(--rgx-s6); display: grid; gap: var(--rgx-s7); }
.rgx-footer-grid { display: grid; gap: var(--rgx-s6); }
.rgx-footer h2 { margin: 0; }
.rgx-footer-col h3 {
	font-size: var(--rgx-text-label);
	font-weight: var(--rgx-weight-bold);
	letter-spacing: var(--rgx-track-label);
	text-transform: uppercase;
	color: var(--rgx-gray-dark);
	margin: 0 0 var(--rgx-s4);
}
.rgx-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rgx-footer-col a { text-decoration: none; opacity: 0.9; }
.rgx-footer-col a:hover { opacity: 1; color: var(--rgx-lime); }
.rgx-footer-legal {
	display: flex; flex-wrap: wrap; gap: var(--rgx-s4);
	justify-content: space-between; align-items: center;
	border-top: 1px solid var(--rgx-line-inverse);
	padding-block: var(--rgx-s5);
	color: var(--rgx-gray-dark);
	font-size: var(--rgx-text-sm);
}
@media (min-width: 880px) {
	.rgx-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

/* --- Motion primitives -------------------------------------------------------- */
/* Default state is VISIBLE — JS opts elements into animation. Progressive
   enhancement: with no JS or reduced motion, the page is complete. */
.rgx-mask { overflow: clip; display: block; }
.rgx-mask > * { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
	.rgx-site *, .rgx-site *::before, .rgx-site *::after {
		animation-duration: 0.001s !important;
		transition-duration: 0.001s !important;
	}
}

/* --- Curved section transitions ------------------------------------------
   The incoming section's colour sweeps over the previous section. Rendered
   inside the incoming section (which is position:relative), lifted fully
   above its top edge. Part of the annotation language. */
.rgx-section, .rgx-cta-band, .rgx-philosophy { position: relative; }
.rgx-curve {
	position: absolute;
	top: 1px; /* overlap the seam */
	left: 0; right: 0;
	height: clamp(34px, 6.5vw, 92px);
	transform: translateY(-100%);
	pointer-events: none;
	z-index: 2;
}
.rgx-curve svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.rgx-curve-fill { fill: var(--rgx-black); }
.rgx-curve--paper .rgx-curve-fill { fill: var(--rgx-paper); }
.rgx-curve--paper-2 .rgx-curve-fill { fill: var(--rgx-paper-2); }
.rgx-curve-echo {
	fill: none;
	stroke: var(--rgx-lime);
	stroke-width: 5;
	stroke-linecap: round;
}

/* =========================================================================
   Render 4 — mobile-first interaction layer.
   ========================================================================= */

/* Comfortable touch targets: grow the hit area, not the visual. */
.rgx-textlink { position: relative; }
.rgx-textlink::after { content: ""; position: absolute; inset: -12px -8px; }
.rgx-footer-col a, .rgx-menu-foot a, .rgx-footer-legal a { display: inline-block; padding-block: 9px; margin-block: -9px; }
.rgx-nav-links a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.rgx-nav-brand { display: inline-flex; align-items: center; min-height: 44px; }

/* Auto-hiding header on small screens: reading pushes it away, a nudge
   upward brings it back. */
@media (max-width: 879px) {
	.rgx-nav { transition: transform 0.35s var(--rgx-ease), background var(--rgx-dur-fast) var(--rgx-ease), box-shadow var(--rgx-dur-fast); }
	.rgx-nav.rgx-nav-away { transform: translateY(-110%); }
}
@media (prefers-reduced-motion: reduce) {
	.rgx-nav { transition: background var(--rgx-dur-fast) var(--rgx-ease), box-shadow var(--rgx-dur-fast); }
}

/* Sticky start pill: the one action that matters, always a thumb away. */
.rgx-fab {
	position: fixed; z-index: calc(var(--rgx-z-nav) - 1);
	left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--rgx-lime); color: var(--rgx-on-lime);
	border: 2px solid var(--rgx-black); border-radius: 999px;
	padding: 15px 24px;
	font-weight: var(--rgx-weight-bold); font-size: var(--rgx-text-base);
	text-decoration: none; white-space: nowrap;
	box-shadow: 0 12px 30px rgba(14, 14, 16, 0.28);
	opacity: 0; pointer-events: none;
	transform: translate(-50%, calc(100% + 24px + env(safe-area-inset-bottom)));
	transition: transform 0.45s var(--rgx-ease), opacity 0.3s var(--rgx-ease);
}
.rgx-fab.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.rgx-fab:active { transform: translate(-50%, 2px); }
@media (min-width: 880px) { .rgx-fab { display: none; } }
@media (prefers-reduced-motion: reduce) { .rgx-fab { transition: opacity 0.3s var(--rgx-ease); transform: translate(-50%, 0); } }