/*
Theme Name: Skuridat
Theme URI: https://skuridat.com
Author: Skuridat
Description: Custom block theme for the Skuridat marketing site. Dark only. Eight views, a slab on a darker ground, and a dashed/solid hairline system that is the visual identity. No parent theme, no page builder, no form plugin.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skuridat
Tags: full-site-editing, block-theme, dark
*/

/* ==========================================================================
   1. Tokens
   Colour, line and rhythm values come from design_handoff/README.md.
   Nothing below this file may hand-write a border or a hex value.
   ========================================================================== */

:root {
	/* --- Colour ------------------------------------------------------- */
	--ground:  #0f1e22;
	--page:    #172e34;
	--heading: #f2f2f0;
	--body:    #a8cbcf;
	--muted:   #5b6e74;
	--accent:  #fc561d;

	/* Text and marks use --accent; a filled surface uses --accent-fill. They
	   are the same colour until the AA contrast layer separates them: text
	   wants a lighter orange against the page, a button fill wants a darker
	   one under white. */
	--accent-fill: #fc561d;

	--hero-ground: #132428;

	/* --- Fills (all rgba so they compose over --page) ------------------ */
	--fill-card:    rgba(168, 203, 207, .05);
	--fill-band:    rgba(168, 203, 207, .07);
	--fill-form:    rgba(168, 203, 207, .08);
	--fill-input:   rgba(0, 0, 0, .22);
	--fill-table:   rgba(0, 0, 0, .18);
	--fill-diagram: rgba(168, 203, 207, .32);
	--scrim:        rgba(10, 20, 23, .72);

	/* --- The line system. Dashed = a boundary or something unfilled.
	       Solid = a thing. Never normalise one into the other. ---------- */
	--line-section:  1.2px dashed rgba(168, 203, 207, .24);
	--line-slab:     1.2px solid  rgba(168, 203, 207, .24);
	--line-nav:      1.5px solid  rgba(168, 203, 207, .45);
	--line-box:      1.3px solid  rgba(168, 203, 207, .5);
	--line-soft:     1.3px dashed rgba(168, 203, 207, .3);
	--line-slot:     1.3px dashed rgba(168, 203, 207, .38);
	--line-emph:     1.3px solid  rgba(168, 203, 207, .6);
	--line-form:     1.5px solid  rgba(168, 203, 207, .55);
	--line-field:    1.3px solid  rgba(168, 203, 207, .4);
	--line-foot:     1.2px solid  rgba(168, 203, 207, .25);
	--line-legal:    1px   solid  rgba(168, 203, 207, .2);
	--line-table:    1px   solid  rgba(168, 203, 207, .16);
	--line-table-o:  1px   solid  rgba(168, 203, 207, .34);
	--line-menu:     1px   solid  rgba(168, 203, 207, .14);

	/* --- Type --------------------------------------------------------- */
	--font-display: "Archivo", system-ui, -apple-system, sans-serif;
	--font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono:    ui-monospace, Menlo, Consolas, monospace;

	/* Fluid between the two designed breakpoints, 390 and 1440.
	   No third layout was designed; these interpolate the tablet range. */
	--fs-h2:      clamp(32px, 26.80px + 1.333vw, 46px);
	--fs-h2-cta:  clamp(32px, 24.57px + 1.905vw, 52px);
	--fs-h2-page: clamp(28px, 23.43px + 1.171vw, 36px);
	--fs-h3:      clamp(20px, 19.26px + 0.190vw, 22px);
	--fs-h3-lg:   clamp(22px, 18.29px + 0.952vw, 32px);
	--fs-h4:      clamp(14px, 13.63px + 0.095vw, 15px);
	--fs-body:    clamp(16px, 15.63px + 0.095vw, 17px);
	--fs-lead:    clamp(18px, 16.89px + 0.286vw, 21px);
	--fs-eyebrow: clamp(11px, 10.26px + 0.190vw, 13px);
	--fs-mark:    clamp(16px, 13.77px + 0.571vw, 22px);
	--fs-small:   clamp(13px, 12.63px + 0.095vw, 14px);

	--lh-body: 1.6;

	/* --- Rhythm ------------------------------------------------------- */
	--slab-max:   1440px;
	--gutter:     clamp(20px, 9.60px + 2.667vw, 48px);
	--nav-h:      clamp(56px, 47.09px + 2.286vw, 80px);
	--sec-pad:    clamp(64px, 52.11px + 3.048vw, 96px);
	--cta-pad:    clamp(64px, 55.09px + 2.286vw, 88px);
	--card-pad:   clamp(20px, 15.54px + 1.143vw, 32px);
	--gap-2col:   clamp(24px, 21.03px + 0.762vw, 32px);
	--gap-2wide:  clamp(24px, 9.14px + 3.810vw, 64px);
	--gap-3col:   clamp(12px, 7.54px + 1.143vw, 24px);
	--measure:    34em;

	--radius:     2px;
	--dur:        140ms;
	--ease:       ease-out;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--ground);
	color: var(--body);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: var(--gutter); top: 8px;
	z-index: 200;
	padding: 10px 16px;
	background: var(--page);
	border: var(--line-form);
	color: var(--heading);
	font: 600 14px/1 var(--font-display);
	transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ==========================================================================
   3. The page slab
   The page does not fill the viewport. It is a bounded document on a darker
   ground, with a vertical hairline down each edge running the full height.
   "Full bleed" everywhere in this stylesheet means slab bleed, never
   viewport bleed and never gutter width.
   ========================================================================== */

.slab {
	max-width: var(--slab-max);
	margin-inline: auto;
	background: var(--page);
	border-left: var(--line-slab);
	border-right: var(--line-slab);
	min-height: 100vh;
	display: flow-root;
}

/* Below the slab width the edges sit flush against the viewport; below the
   tablet range they are dropped entirely, per the spec. */
@media (max-width: 1200px) {
	.slab { border-left: 0; border-right: 0; }
}

/* The gutter container. The slab edge and the gutter are two different
   boundaries. Do not collapse them. */
.wrap {
	max-width: var(--slab-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ==========================================================================
   4. The section wrapper
   Every section block renders inside this. It carries the dashed divider and
   the optional tint, both full bleed to the slab edge. No block below this
   line re-solves bleed.
   ========================================================================== */

.section {
	position: relative;
	padding-block: var(--sec-pad);
	border-bottom: var(--line-section);
}

.section--tint { background: var(--fill-band); }
.section--flush { padding-block: 0; }
.section--last { border-bottom: 0; }

/* Section washes fade out before the section does.

   A radial wash confined to its own section is still painting colour on the
   first and last row of that section, so where the section meets its
   neighbour there is a horizontal step. On a dark ground that step reads as
   a hard edge, as though the gradient had been given padding.

   The mask forces the wash to zero at both edges whatever the gradient
   inside it is doing. Retuning a radius or moving a centre later cannot
   bring the seam back, which is the reason this is a mask and not four
   hand-balanced gradient stops.

   Applies to the two washes on the site: the closing CTA and the home hero.
   It deliberately does NOT apply to .section--tint, the phase band or the
   footer. Those are flat fills, and a filled band ending at a boundary is
   the line system working, not a seam. */
.closing-cta__wash,
.hero__wash {
	--wash-fade: 24%;
	-webkit-mask-image: linear-gradient(to bottom,
		transparent 0,
		#000 var(--wash-fade),
		#000 calc(100% - var(--wash-fade)),
		transparent 100%);
	mask-image: linear-gradient(to bottom,
		transparent 0,
		#000 var(--wash-fade),
		#000 calc(100% - var(--wash-fade)),
		transparent 100%);
}

/* ==========================================================================
   5. Type
   ========================================================================== */

.eyebrow {
	font: 600 var(--fs-eyebrow) / 1.2 var(--font-display);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 16px;
}
.eyebrow--body { color: var(--body); }

h1, .h1,
h2, .h2 {
	font: 600 var(--fs-h2) / 1.06 var(--font-display);
	letter-spacing: -.03em;
	color: var(--heading);
	max-width: 15em;
	margin-bottom: 24px;
}

.h2--cta {
	font-size: var(--fs-h2-cta);
	max-width: 11em;
}
.h2--page { font-size: var(--fs-h2-page); }

h3, .h3 {
	font: 600 var(--fs-h3) / 1.2 var(--font-display);
	letter-spacing: -.02em;
	color: var(--heading);
}
.h3--lg { font-size: var(--fs-h3-lg); }

h4, .h4 {
	font: 600 var(--fs-h4) / 1.3 var(--font-display);
	letter-spacing: -.01em;
	color: var(--heading);
}

p { max-width: var(--measure); }
p + p { margin-top: 16px; }

.lead {
	font-size: var(--fs-lead);
	max-width: 30em;
	color: var(--body);
}

.caption, .legal {
	font-size: var(--fs-small);
	color: var(--muted);
	max-width: 40em;
}

.mono-label {
	font: 600 12px/1.2 var(--font-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}

.fineprint {
	font-size: var(--fs-small);
	color: var(--muted);
	max-width: 40em;
}

.talk-first {
	font: 400 14px/1.4 var(--font-body);
	color: var(--body);
	max-width: none;
}
.talk-first a { color: var(--accent); }
.talk-first a:hover { filter: brightness(1.15); }

.pull-quote {
	font: 500 clamp(20px, 17.77px + 0.571vw, 26px) / 1.35 var(--font-display);
	color: var(--heading);
	max-width: 20em;
	border-left: 2px solid var(--accent);
	padding: clamp(16px, 10.06px + 1.524vw, 32px);
	margin-block: 32px;
}

/* ==========================================================================
   6. Buttons
   No lift, no shadow. Accent does not change hue on hover.
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: 600 16px/1 var(--font-display);
	padding: 16px 28px;
	border-radius: var(--radius);
	background: var(--accent-fill);
	color: #fff;
	border: 1.3px solid var(--accent-fill);
	transition: filter var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
	cursor: pointer;
	text-align: center;
}
.btn:hover { filter: brightness(1.1); }

.btn--ghost {
	background: transparent;
	color: var(--body);
	border: var(--line-field);
}
.btn--ghost:hover { color: var(--heading); border-color: rgba(168, 203, 207, .6); filter: none; }

/* The optional AA contrast layer. Off unless Settings > Skuridat switches it
   on. Four tokens, nothing else: see inc/accessibility.php for the measured
   ratios and the reasoning. */
body.aa-contrast {
	--muted:       #80959b;   /* 2.66:1 -> 4.53:1 */
	--accent:      #fc5b23;   /* 4.39:1 -> 4.51:1 */
	--accent-fill: #dc3a03;   /* white label 3.24:1 -> 4.52:1 */
	--line-field:  1.3px solid rgba(168, 203, 207, .48);  /* 2.56:1 -> 3.05:1 */
}

.btn--sm { font-size: 14px; padding: 12px 20px; }

.btn--block { width: 100%; }

@media (max-width: 860px) {
	.btn { width: 100%; height: 48px; padding-block: 0; font-size: 15px; }
	.btn--sm { width: auto; height: auto; }
}

/* ==========================================================================
   7. Boxes, cards and placeholder slots
   Solid = a thing. Dashed = a boundary or something not yet filled.
   ========================================================================== */

.box {
	background: var(--fill-card);
	border: var(--line-box);
	border-radius: var(--radius);
	padding: var(--card-pad);
}

.box--soft {
	background: none;
	border: var(--line-soft);
}

.box--emph { border: var(--line-emph); }

.box h3, .box .h3 { margin-bottom: 12px; }

/* The designed treatment for an unfilled image slot. This is not a stand-in
   for something better: it is what an empty slot looks like on this site,
   and it keeps its label so you can see what it is waiting for. */
.slot {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px;
	border: var(--line-slot);
	border-radius: var(--radius);
	background-image: repeating-linear-gradient(135deg,
		rgba(168, 203, 207, .13) 0 8px, transparent 8px 16px);
	font: 400 14px/1.4 var(--font-mono);
	color: var(--body);
}

@media (max-width: 860px) {
	.slot { font: 400 12px/1.4 var(--font-body); color: var(--muted); }
}

/* Three slot sizes. Do not introduce a fourth. */
.slot--feature { height: 480px; }
.slot--inline  { height: 320px; }
.slot--thumb   { height: 180px; }

@media (max-width: 860px) {
	.slot--feature { height: 240px; }
	.slot--inline  { height: 200px; }
	.slot--thumb   { height: 96px; }
}

.slot--pill { height: 56px; padding-inline: 12px; }
.slot--chip { width: 72px; height: 72px; padding: 0; }
.slot--social { width: 36px; height: 36px; padding: 0; font-size: 12px; }
.slot--cred { height: 40px; padding-inline: 12px; font-size: 12px; }

/* ==========================================================================
   8. Grids
   ========================================================================== */

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-2col); }
.grid2--wide { gap: var(--gap-2wide); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-3col); }
.row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

@media (max-width: 860px) {
	.grid2, .grid3 { grid-template-columns: 1fr; gap: 12px; }
	.row { gap: 12px; }
}

/* ==========================================================================
   9. Top bar
   The nav rule is the heaviest line on the page. It sits on the full-bleed
   band, slab edge to slab edge, never on the gutter container.
   ========================================================================== */

.navband {
	border-bottom: var(--line-nav);
	background: var(--page);
	position: relative;
	z-index: 60;
}

.nav {
	display: flex;
	align-items: center;
	height: var(--nav-h);
	gap: 12px;
}

.wordmark {
	font: 700 var(--fs-mark) / 1 var(--font-display);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--heading);
	white-space: nowrap;
}
.wordmark--foot { font-size: 20px; letter-spacing: .14em; }

.nav__links {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-left: auto;
}
.nav__links a {
	font: 400 15px/1 var(--font-body);
	color: var(--body);
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	transition: color var(--dur) var(--ease);
}
.nav__links a:hover { color: var(--heading); }
.nav__links a[aria-current="page"] { color: var(--heading); border-bottom-color: var(--accent); }

.nav .btn--sm { margin-left: 24px; }

/* Language switcher. A two-letter locale code, not a drawn flag: a CSS flag
   does not survive translation and flags are a poor proxy for language. */
.lang {
	position: relative;
}
.lang__toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	font: 600 12px/1 var(--font-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--body);
	padding: 6px 8px;
	border: var(--line-field);
	border-radius: var(--radius);
}
.lang__toggle span { color: var(--muted); font-size: 10px; }
.lang__list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 160px;
	background: var(--page);
	border: var(--line-field);
	border-radius: var(--radius);
	padding: 4px;
	z-index: 70;
}
.lang__list a {
	display: block;
	padding: 8px 12px;
	font-size: 14px;
	color: var(--body);
}
.lang__list a:hover { color: var(--heading); }
.lang__list[hidden] { display: none; }

/* Mobile bar: current page name, burger, no language switcher. */
.nav__current {
	margin-left: auto;
	font: 400 14px/1 var(--font-body);
	color: var(--heading);
	border-bottom: 2px solid var(--accent);
	padding-bottom: 3px;
}

.burger {
	display: none;
	width: 22px;
	height: 16px;
	flex-direction: column;
	justify-content: space-between;
	margin-left: 16px;
}
.burger i {
	display: block;
	width: 22px;
	height: 1.6px;
	background: var(--heading);
}

@media (max-width: 860px) {
	.nav__links, .nav .btn--sm, .nav .lang { display: none; }
	.burger { display: flex; }
	.wordmark { letter-spacing: .15em; }
}
@media (min-width: 861px) {
	.nav__current { display: none; }
}

/* ==========================================================================
   10. Mobile menu
   A full-viewport sheet that replaces the page, not an overlay.
   ========================================================================== */

.mobile-menu {
	position: fixed;
	inset: var(--nav-h) 0 0;
	z-index: 90;
	background: var(--page);
	padding: 32px var(--gutter) 32px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }

.mobile-menu__links a {
	display: block;
	font: 500 24px/1.2 var(--font-display);
	letter-spacing: -.02em;
	color: var(--body);
	padding-block: 16px;
	border-bottom: var(--line-menu);
}
.mobile-menu__links a[aria-current="page"] {
	color: var(--heading);
	border-bottom: 2px solid var(--accent);
}

.mobile-menu__bottom { margin-top: auto; padding-top: 32px; display: grid; gap: 20px; }
.mobile-menu__lang { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--heading); }
.mobile-menu__lang em { font-style: normal; color: var(--muted); }
.mobile-menu__util { display: flex; gap: 16px; font-size: 14px; color: var(--muted); }

@media (min-width: 861px) {
	.mobile-menu { display: none !important; }
}

/* ==========================================================================
   11. Footer
   The fill and the top rule bleed to the slab edge. The legal baseline is
   the one deliberate exception: it is inset to the gutter.
   ========================================================================== */

.site-footer {
	background: var(--fill-input);
	border-top: var(--line-foot);
	padding-top: 80px;
	padding-bottom: 32px;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
	gap: 40px;
}

.site-footer p { font-size: 15px; }

.footer-head {
	font: 600 12px/1 var(--font-display);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 16px;
}

.site-footer__links a { display: block; line-height: 2; color: var(--body); font-size: 15px; }
.site-footer__links a:hover { color: var(--heading); }

.site-footer__creds { display: flex; flex-wrap: wrap; gap: 10px; filter: grayscale(1); opacity: .7; }

.site-footer__legal {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
	padding-top: 22px;
	border-top: var(--line-legal);
	font: 400 13px/1.4 var(--font-body);
	color: var(--muted);
}

@media (max-width: 860px) {
	.site-footer { padding-top: 40px; padding-bottom: 28px; background: rgba(0, 0, 0, .28); }
	.site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
	.site-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
	.site-footer__creds { display: grid; grid-template-columns: 1fr 1fr; }
	.site-footer__creds .slot--cred { height: 36px; }
	.site-footer__legal { flex-direction: column; gap: 6px; margin-top: 32px; font-size: 12px; }
}

/* ==========================================================================
   12. Motion
   ========================================================================== */

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

/* ==========================================================================
   13. Closing CTA
   Full bleed, two radial washes behind, an artefact table on the right.
   The same component on all eight views.
   ========================================================================== */

.closing-cta {
	position: relative;
	overflow: hidden;
}

.closing-cta__wash {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 90% at 12% 50%, rgba(252, 86, 29, .10), transparent 60%),
		radial-gradient(72% 100% at 88% 45%, rgba(168, 203, 207, .26), transparent 62%);
	pointer-events: none;
}

.closing-cta__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 480px;
	gap: clamp(32px, 17.14px + 3.81vw, 72px);
	align-items: center;
	padding: var(--cta-pad) var(--gutter);
	max-width: var(--slab-max);
	margin-inline: auto;
}

.closing-cta__actions { margin-top: 40px; gap: 20px; }
.closing-cta .fineprint { margin-top: 24px; }

.artefact__caption { margin-bottom: 14px; letter-spacing: .12em; font-weight: 500; }

.artefact {
	border: var(--line-table-o);
	border-radius: var(--radius);
	background: var(--fill-table);
}

.artefact__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 13px 18px;
	border-top: var(--line-table);
	font: 400 14px/1.3 var(--font-mono);
	color: var(--body);
}
.artefact__row:first-child { border-top: 0; }

.artefact__row--head {
	font: 600 12px/1.2 var(--font-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	padding-block: 14px;
}

.artefact__row.is-accent { color: var(--accent); }
.artefact__row.is-muted  { color: var(--muted); }
.artefact__state { letter-spacing: .04em; text-align: right; }

.artefact__disclaimer { margin-top: 14px; }

@media (max-width: 980px) {
	.closing-cta__grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	.closing-cta__actions { flex-direction: column; align-items: stretch; gap: 16px; }
	.talk-first--centred, .closing-cta__actions .talk-first { text-align: center; }

	/* Rows become two lines: the name on top, the state beneath. */
	.artefact__row {
		display: block;
		color: var(--heading);
	}
	.artefact__row.is-accent { color: var(--accent); }
	.artefact__state {
		display: block;
		text-align: left;
		margin-top: 4px;
		font-size: 13px;
		color: var(--muted);
	}
	.artefact__row--head { display: flex; }
}

/* ==========================================================================
   14. The request modal
   Desktop dialog, mobile sheet. Same markup, same form.
   ========================================================================== */

.modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.modal[hidden] { display: none; }

.modal__scrim {
	position: absolute;
	inset: 0;
	background: var(--scrim);
}

.modal__dialog {
	position: relative;
	width: min(1040px, 100%);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	background: var(--page);
	border: var(--line-form);
	border-radius: var(--radius);
	box-shadow: 0 32px 80px rgba(0, 0, 0, .55);
}

.modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 28px 40px;
	border-bottom: var(--line-table);
}
.modal__head .eyebrow { margin-bottom: 6px; }
.modal__subline { font-size: 15px; color: var(--body); }

.modal__close {
	font-size: 24px;
	line-height: 1;
	color: var(--body);
	padding: 4px 8px;
	transition: color var(--dur) var(--ease);
}
.modal__close:hover { color: var(--heading); }

.modal__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	padding: 40px;
}

.modal__scope { display: grid; gap: 24px; align-content: start; }
.modal__scope-mobile { display: none; }

.scope-item { display: grid; grid-template-columns: 32px 1fr; gap: 16px; }
.scope-item__n {
	font: 400 14px/1.4 var(--font-mono);
	color: var(--accent);
}
.scope-item h4 { margin-bottom: 6px; }
.scope-item p { font-size: 15px; }

/* --- Form --------------------------------------------------------------- */

.form-panel {
	background: var(--fill-form);
	border: var(--line-form);
	border-radius: 3px;
	padding: 32px;
	display: grid;
	gap: 18px;
	align-content: start;
}

.field input,
.field textarea {
	width: 100%;
	background: var(--fill-input);
	border: var(--line-field);
	border-radius: var(--radius);
	color: var(--heading);
	font: 400 15px/1.4 var(--font-body);
	padding: 0 16px;
	height: 48px;
	transition: border-color var(--dur) var(--ease);
}
.field textarea { height: 84px; padding: 14px 16px; resize: vertical; }

/* Placeholder as label. The asterisks are muted, deliberately, not accent. */
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 1; }

.field input:hover,
.field textarea:hover { border-color: rgba(168, 203, 207, .55); }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--accent); }

.field-honey {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.field-consent {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 12px;
	align-items: start;
	font-size: 13px;
	color: var(--muted);
}
.field-consent input { margin-top: 3px; accent-color: var(--accent); }
.field-consent a { color: var(--accent); }

.form-error {
	font-size: 14px;
	color: var(--accent);
	margin: 0;
}
.form-error[hidden] { display: none; }

.form-success {
	grid-column: 1 / -1;
	border: var(--line-form);
	background: var(--fill-form);
	border-radius: 3px;
	padding: 32px;
	color: var(--heading);
}
.form-success[hidden] { display: none; }

.form-panel .btn[disabled] { opacity: .6; cursor: progress; }

@media (max-width: 980px) {
	.modal__body { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 860px) {
	/* A full-screen sheet, not a dialog. The top bar stays visible above it. */
	.modal { padding: 0; align-items: flex-end; }
	.modal__dialog {
		position: fixed;
		inset: var(--nav-h) 0 0;
		width: 100%;
		max-height: none;
		border-radius: 12px 12px 0 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		box-shadow: none;
	}
	.modal__head { padding: 20px var(--gutter); }
	.modal__body { padding: 20px var(--gutter) 40px; }
	.modal__scope { display: none; }
	.modal__scope-mobile { display: block; }
	.form-panel { padding: 0; background: none; border: 0; }
}

/* ==========================================================================
   15. Prose
   The article measure. Used by the prose block and the utility pages.
   ========================================================================== */

.prose { max-width: var(--measure); }

/* A policy or a privacy statement is a long document with real structure,
   so prose gets both heading levels. h2 at the page-heading size rather
   than the section size: 46px section headings inside a legal document
   read as shouting. */
.prose h2 {
	font-size: var(--fs-h2-page);
	max-width: none;
	margin-top: 56px;
	margin-bottom: 16px;
}
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 40px; margin-bottom: 12px; }
.prose h4 { margin-top: 28px; margin-bottom: 8px; }
.prose ol { margin: 16px 0; padding-left: 20px; list-style: decimal; }
.prose table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 12px 16px; border-top: var(--line-table); vertical-align: top; }
.prose thead th { border-top: 0; font: 600 12px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.prose code { font: 400 .92em var(--font-mono); color: var(--heading); }
.prose p + p { margin-top: 16px; }
.prose ul { margin: 16px 0; padding-left: 20px; list-style: disc; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--accent); }

/* Utility that a few components share. */
.talk-first--centred { text-align: center; margin-inline: auto; }

/* ==========================================================================
   16. Hero
   Static. Both washes at full opacity, because the rest state of the
   designed mechanic is "both sides visible".
   ========================================================================== */

.hero__stage {
	position: relative;
	overflow: hidden;
	background: var(--hero-ground);
}

.hero__wash { position: absolute; inset: 0; pointer-events: none; }
.hero__wash--left  { background: radial-gradient(70% 78% at 0% 34%, rgba(252, 86, 29, .22), transparent 62%); }
.hero__wash--right { background: radial-gradient(70% 78% at 100% 34%, rgba(168, 203, 207, .24), transparent 62%); }

.hero__cols {
	position: relative;
	display: grid;
	grid-template-columns: 36% 1fr 36%;
	align-items: center;
	min-height: 520px;
	padding: 72px 56px;
	gap: 24px;
}

.hero__col { display: flex; flex-direction: column; gap: 14px; }
.hero__col--left { align-items: flex-start; }
.hero__col--right { align-items: flex-end; text-align: right; }

.hero__tag {
	border: var(--line-slot);
	border-radius: var(--radius);
	padding: 10px 16px;
	font-size: 13px;
	color: var(--body);
	background-image: repeating-linear-gradient(135deg,
		rgba(168, 203, 207, .13) 0 8px, transparent 8px 16px);
}
.hero__tag--attack { border-color: rgba(252, 86, 29, .55); color: var(--accent); }

.hero__question { max-width: 14em; font-size: 16px; margin-top: 8px; }
.hero__question--attack { color: var(--accent); }

.hero__figure { display: flex; justify-content: center; }
.hero__figure-slot { width: 210px; height: 320px; }

.hero__headline { position: relative; text-align: center; padding-bottom: 88px; padding-top: 8px; }
.hero__headline h1 { margin: 0 auto 16px; max-width: 20em; }
.hero__headline p { margin: 0 auto 24px; max-width: 38em; }
.hero__actions { justify-content: center; }

@media (max-width: 980px) {
	.hero__cols {
		grid-template-columns: 1fr;
		min-height: 0;
		padding: 40px var(--gutter);
		gap: 20px;
	}
	.hero__figure { order: 2; }
	.hero__col--right { order: 3; }
	.hero__tag--extra { display: none; }
	.hero__figure-slot { width: 150px; height: 210px; }
	.hero__headline { text-align: left; padding-bottom: 48px; }
	.hero__headline h1, .hero__headline p { margin-inline: 0; }
	.hero__actions { justify-content: stretch; flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   17. Bandwidth diagram
   Drawn in CSS: a lit band between two dark zones.
   ========================================================================== */

.band {
	position: relative;
	height: 230px;
	border: var(--line-box);
	border-radius: var(--radius);
	background: linear-gradient(
		transparent 0 34%,
		rgba(168, 203, 207, .55) 34% 74%,
		transparent 74% 100%
	);
}

.band__label {
	position: absolute;
	left: 16px;
	right: 16px;
	font-size: 15px;
	color: var(--heading);
}
.band__label--top { top: 14px; }
.band__label--mid { top: 104px; color: var(--page); font-weight: 600; }
.band__label--bottom { bottom: 14px; }

@media (max-width: 860px) {
	.band { height: 180px; }
	.band__label { font-size: 13px; }
	.band__label--mid { top: 78px; }
}

/* ==========================================================================
   18. Phase row
   Five cells on desktop, a horizontal scroller of pills on mobile.
   ========================================================================== */

.phase-band { position: relative; }

/* The tint on its own is translucent, which is right for a band sitting in
   the flow: the page colour behind it is the same colour anyway. */
.phase-band--tint { background: var(--fill-band); padding-block: 32px; }

/* Sticky is different. A translucent background lets the sections scroll
   *through* the bar instead of behind it, which reads as broken. So the
   sticky variant paints the same designed tint over an opaque page colour:
   background-color is the slab, background-image is the tint as a flat
   gradient. Same value, same token, no transparency. */
.phase-band.phase-band--sticky {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: var(--line-section);
	background-color: var(--page);
	background-image: linear-gradient(var(--fill-band), var(--fill-band));
}

/* Past the last phase the bar has done its job. It slides up and out rather
   than following you into the architecture section and the closing CTA.
   theme.js adds this class; see "Phase nav release" there. */
.phase-band.phase-band--sticky.is-released {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}


.phase-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

.phase-cell {
	border: var(--line-emph);
	border-radius: var(--radius);
	padding: 20px 12px;
	text-align: center;
	font: 600 15px/1.2 var(--font-display);
	color: var(--body);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a.phase-cell:hover { color: var(--heading); }
.phase-cell.is-current { color: var(--heading); border-color: var(--accent); }

.payoff {
	font: 600 15px/1.4 var(--font-display);
	color: var(--accent);
	margin-top: 14px;
}

@media (max-width: 860px) {
	.phase-row {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.phase-row::-webkit-scrollbar { display: none; }
	.phase-cell {
		flex: 0 0 auto;
		height: 38px;
		display: flex;
		align-items: center;
		padding: 0 16px;
		border-radius: 19px;
		font-size: 14px;
	}
	.phase-band--tint { padding-block: 20px; }
}

/* ==========================================================================
   19. Pyramid and diamond
   Bar widths come from the block, not from here. They are the argument.
   ========================================================================== */

.shape { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; align-items: center; }
.shape i { display: block; height: 24px; background: var(--fill-diagram); border: var(--line-emph); border-radius: 1px; }
.shape--left { align-items: flex-start; }

/* ==========================================================================
   20. Cards, pills, logos
   ========================================================================== */

.box--accent { border-color: var(--accent); }
.box--span { grid-column: 1 / -1; }
.box--span p { max-width: 50em; }

a.box { display: block; transition: border-color var(--dur) var(--ease); }
a.box:hover { border-color: rgba(168, 203, 207, .75); }

.cred-row { margin-top: 24px; }
.cred-row--grey .row { filter: grayscale(1); opacity: .7; }
.cred-pill-image { height: 40px; width: auto; }

.logo-strip { display: flex; gap: 28px; margin-top: 20px; filter: grayscale(1); opacity: .62; transition: opacity var(--dur) var(--ease); }
.logo-strip:hover { filter: none; opacity: 1; }
.logo-strip__item { flex: 1; display: flex; align-items: center; justify-content: center; height: 56px; border: var(--line-box); border-radius: var(--radius); background: var(--fill-card); }
.logo-strip__item--text { font: 600 14px/1 var(--font-display); letter-spacing: .08em; color: var(--body); }

.founder h3 { margin-bottom: 8px; }

.rule-lines { display: grid; gap: 10px; margin: 16px 0; }
.rule-lines i { display: block; height: 1px; background: rgba(168, 203, 207, .24); }

@media (max-width: 860px) {
	.is-mobile-hidden { display: none; }
	.logo-strip { flex-wrap: wrap; }
	.logo-strip__item { flex: 1 1 40%; }
}

/* ==========================================================================
   21. Articles
   ========================================================================== */

.filters { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.filter-pill {
	height: 40px;
	display: inline-flex;
	align-items: center;
	padding: 0 18px;
	border: var(--line-field);
	border-radius: var(--radius);
	font-size: 13px;
	color: var(--body);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
	cursor: pointer;
}
.filter-pill:hover { color: var(--heading); }
.filter-pill[aria-pressed="true"] { color: var(--heading); border-color: var(--accent); }

.article-grid { align-items: start; }
.article-card[hidden] { display: none; }
.article-card__title { margin: 16px 0 8px; font-size: 19px; }
.article-card__dek { margin: 0; font-size: 15px; }
.article-card__meta { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

.byline { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.byline__avatar { width: 40px; height: 40px; padding: 0; border-radius: 50%; flex: 0 0 auto; }
.byline__avatar--lg { width: 48px; height: 48px; }
.byline__share { display: flex; gap: 8px; margin-left: auto; }

.breadcrumb { margin-bottom: 24px; }
.breadcrumb a:hover { color: var(--heading); }

.article-header h1 { margin-bottom: 16px; }
.article-header .lead { margin-bottom: 8px; }

/* The measure is exactly 720px, with the contents rail beside it. */
.article-layout {
	display: grid;
	grid-template-columns: 240px 720px 1fr;
	gap: 64px;
	align-items: start;
}

.article-body { max-width: 720px; }
.article-body h3 { font-size: clamp(22px, 18.29px + 0.952vw, 28px); margin: 40px 0 12px; }
.article-body p { max-width: none; }
.article-body p + p { margin-top: 16px; }
.article-body ul { margin: 16px 0; padding-left: 20px; list-style: disc; }
.article-body li { margin-bottom: 8px; }

.contents { position: sticky; top: 32px; }
.contents__mobile { display: none; }
.contents__desktop .contents__list {
	display: grid;
	gap: 10px;
	border-left: var(--line-table);
	padding-left: 20px;
	margin-top: 12px;
}
.contents__list a { font-size: 14px; color: var(--body); }
.contents__list a:hover { color: var(--heading); }
.contents__list a.is-current {
	color: var(--heading);
	box-shadow: -21px 0 0 -20px var(--accent);
}
.contents__share { margin-top: 32px; padding-top: 20px; border-top: var(--line-table); }

.article-figure { margin: 28px 0; }
.article-figure figcaption { margin-top: 12px; }

.in-short { margin: 28px 0; }
.in-short h4 { margin-bottom: 8px; }

.case-card h3 { margin-bottom: 8px; }
.case-card[hidden] { display: none; }

@media (max-width: 1100px) {
	.article-layout { grid-template-columns: 1fr; gap: 32px; }
	.article-body { max-width: var(--measure); }
	.contents { position: static; }
	.contents__desktop { display: none; }
	.contents__mobile { display: block; background: var(--fill-band); padding: 16px var(--gutter); margin-inline: calc(var(--gutter) * -1); }
	.contents__summary { cursor: pointer; font-size: 15px; color: var(--heading); list-style: none; }
	.contents__summary::-webkit-details-marker { display: none; }
	.contents__summary::after { content: " ⌄"; color: var(--muted); }
	.contents__mobile .contents__list { display: grid; gap: 12px; margin-top: 16px; }
}

@media (max-width: 860px) {
	/* Article figures go beyond the gutter to the slab edge, with the caption
	   inset back to it. The one place a figure crosses the gutter. */
	.article-figure { margin: 28px calc(var(--gutter) * -1); }
	.article-figure .slot,
	.article-figure img { border-left: 0; border-right: 0; border-radius: 0; }
	.article-figure figcaption { padding-inline: var(--gutter); }
	.article-card--related { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
	.article-card--related .slot { height: 72px; }
	.article-card--related .article-card__title { margin: 0 0 4px; font-size: 17px; }
}

/* ==========================================================================
   22. Document download
   A policy and its downloadable copy, side by side. Solid card, because it
   is a thing rather than a boundary.
   ========================================================================== */

.doc-download {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-2col);
	flex-wrap: wrap;
	background: var(--fill-card);
	border: var(--line-box);
	border-radius: var(--radius);
	padding: var(--card-pad);
	margin: 40px 0;
	max-width: none;
}

.doc-download__text { flex: 1 1 20em; }
.doc-download__heading { margin-bottom: 6px; }
.doc-download__body { margin: 0; font-size: 15px; max-width: 34em; }
.doc-download__meta { margin-top: 12px; letter-spacing: .1em; }

.doc-download__btn { flex: 0 0 auto; }
.doc-download__icon { font-size: 1.1em; line-height: 1; }

@media (max-width: 860px) {
	.doc-download { display: block; }
	.doc-download__btn { margin-top: 20px; width: 100%; }
}

/* Inside prose the card should not inherit the reading measure. */
.prose .doc-download { max-width: none; }

/* ==========================================================================
   23. Hero media
   Full bleed to the slab edge, parallax on desktop, brand wash on top.

   Two deliberate departures from the handoff, both requested:
   the 8px radius (the spec says 2px everywhere), and the fixed-attachment
   parallax (the spec says no decorative motion). Recorded in the handoff
   README under "Amendments, as built".
   ========================================================================== */

.hero-media {
	position: relative;

	/* Aligned to the text column, not bled to the slab edge. The figure sits
	   inside .wrap and takes no negative margin, so its left and right edges
	   line up with the headline above it at every width. */
	border-radius: var(--hero-radius, 8px);
	overflow: hidden;

	/* Small source by default. The desktop file is only fetched above the
	   breakpoint, so a phone never downloads the 1440px image. */
	background-image: var(--hero-img-sm);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--hero-ground);
}

/* The wash. Page colour on the left, accent on the right.

   The two colours are fixed: page and accent, the only two the brand has.
   The two opacities are a named choice on the block, not a free control,
   so an editor can dial the wash back on a photograph that needs to be
   read without being able to introduce a third colour. */
.hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(23, 46, 52, var(--hero-wash-start, .30)) 0%,
		rgba(252, 86, 29, var(--hero-wash-end, .70)) 100%
	);
	pointer-events: none;
}

/* The four named strengths. Specificity is doubled on purpose: source order
   must not be able to break these quietly the way it did the phase band. */
.hero-media.hero-media--wash-full   { --hero-wash-start: .30; --hero-wash-end: .70; }
.hero-media.hero-media--wash-medium { --hero-wash-start: .26; --hero-wash-end: .52; }
.hero-media.hero-media--wash-light  { --hero-wash-start: .22; --hero-wash-end: .34; }
.hero-media.hero-media--wash-none::after { display: none; }

.hero-media--feature { height: 480px; }
.hero-media--inline  { height: 320px; }

@media (max-width: 860px) {
	.hero-media--feature { height: 240px; }
	.hero-media--inline  { height: 200px; }
}

/* Parallax, desktop only.

   background-attachment: fixed is broken on iOS Safari and janky on most
   touch devices, which is why it is scoped to the desktop breakpoint rather
   than switched off for phones as an afterthought.

   Maintenance trap: a transform, filter or will-change on ANY ancestor makes
   the background fix to that ancestor instead of the viewport, and the
   effect silently dies. If parallax ever stops working, look up the tree
   before looking here. */
@media (min-width: 861px) {
	.hero-media {
		background-image: var(--hero-img);
		background-attachment: fixed;
	}
}

/* Parallax off, per block. Doubled specificity so it wins over the desktop
   rule above wherever this ends up in the file.

   A fixed background is sized against the viewport rather than the element,
   so switching this off also changes the crop: a still image fills its own
   box, a parallax one shows a window onto a viewport-sized image. That is
   inherent to background-attachment, not a bug in the toggle. */
.hero-media.hero-media--still { background-attachment: scroll; }

/* Parallax is a known vestibular trigger. Anyone who has asked their system
   to stop moving things gets a still image. This has to stay last: it
   overrides the block's own choice, and that is the correct precedence. */
@media (prefers-reduced-motion: reduce) {
	.hero-media,
	.hero-media.hero-media--parallax { background-attachment: scroll; }
}