@font-face {
font-family: "Schibsted Grotesk";
src: url("/static/fonts/schibsted-grotesk-var-latin.woff2") format("woff2");
font-weight: 400 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Schibsted Grotesk";
src: url("/static/fonts/schibsted-grotesk-italic-var-latin.woff2") format("woff2");
font-weight: 400 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Golos Text";
src: url("/static/fonts/golos-text-var-cyrillic.woff2") format("woff2");
font-weight: 400 900;
font-style: normal;
font-display: swap;
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Cairo";
src: url("/static/fonts/cairo-var-arabic.woff2") format("woff2");
font-weight: 400 800;
font-style: normal;
font-display: swap;
unicode-range: U+0600-0603, U+060C-060D, U+061B, U+061F, U+0621-063A,
U+0640-0655, U+0657-0658, U+065E, U+0660-066D, U+0670-0671,
U+06D5, U+06DD-06DE, U+06E0-06E9, U+06F0-06F9;
}
@font-face {
font-family: "Noto Nastaliq Urdu";
src: url("/static/fonts/noto-nastaliq-var-urdu.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0600-0603, U+060C-060D, U+061B, U+061F, U+0621-063A,
U+0640-0655, U+0657-0658, U+065E, U+0660-066D, U+0670,
U+0679, U+067E, U+0686, U+0688, U+0691, U+0698, U+06A9,
U+06AF, U+06BA, U+06BE, U+06C0-06C3, U+06CC, U+06D2-06D5,
U+06DD-06DE, U+06E0-06E9, U+06F0-06F9;
}
:root {
color-scheme: light;
--navy-900: #0A1B33;
--navy-800: #132A52;
--navy-700: #1B3562;
--ink: #1B2431;
--gold: #C9A227;
--gold-lt: #E8C34A;
--gold-dk: #8A6E17;
--gold-sh: #3D2F05;
--cream: #F5EFE0;
--slate: #5B6472;
--grey: #8B93A1;
--white: #FFFFFF;
--navy-900-rgb: 10 27 51;
--gold-rgb: 201 162 39;
--ink-rgb: 27 36 49;
--cream-rgb: 245 239 224;
--transparent: rgb(var(--navy-900-rgb) / 0);
--ground: var(--cream);
--ground-sunk: var(--navy-900);
--ground-panel: var(--navy-800);
--ground-raised: var(--navy-700);
--text: var(--ink);
--text-muted: var(--slate);
--text-on-dark: var(--cream);
--text-muted-on-dark: var(--grey);
--accent: var(--gold);
--accent-hover: var(--gold-lt);
--accent-on-light: var(--gold-dk);
--accent-shadow: var(--gold-sh);
--link: var(--ink);
--link-underline: rgb(var(--gold-rgb) / 0.55);
--link-hover: var(--gold-dk);
--link-on-dark: var(--cream);
--link-on-dark-hover: var(--gold-lt);
--rule: rgb(var(--ink-rgb) / 0.14);
--rule-strong: rgb(var(--ink-rgb) / 0.28);
--rule-gold: rgb(var(--gold-rgb) / 0.60);
--rule-on-dark: rgb(var(--cream-rgb) / 0.18);
--rule-gold-on-dark: rgb(var(--gold-rgb) / 0.75);
--selection-bg: rgb(var(--gold-rgb) / 0.30);
--selection-fg: var(--ink);
--admin-wash:
radial-gradient(120ch 60ch at 12% -10%, rgb(var(--gold-rgb) / 0.055), transparent 70%),
radial-gradient(80ch 50ch at 100% 0%, rgb(var(--cream-rgb) / 0.022), transparent 60%);
--admin-rule: rgb(var(--cream-rgb) / 0.14);
--admin-rule-gold: rgb(var(--gold-rgb) / 0.42);
--admin-entry-hover: rgb(var(--gold-rgb) / 0.045);
--admin-panel: rgb(var(--cream-rgb) / 0.035);
--shadow-s: 0 1px 2px rgb(var(--navy-900-rgb) / 0.06);
--shadow-m: 0 2px 4px rgb(var(--navy-900-rgb) / 0.06),
0 8px 20px rgb(var(--navy-900-rgb) / 0.08);
--shadow-l: 0 4px 8px rgb(var(--navy-900-rgb) / 0.08),
0 18px 48px rgb(var(--navy-900-rgb) / 0.14);
--hero-scrim-ramp-from: 24%;
--hero-scrim-ramp-to: 36%;
--hero-scrim-band: 0.55;
--hero-scrim-wash: linear-gradient(
to bottom,
rgb(var(--navy-900-rgb) / 0.18) 0%,
rgb(var(--navy-900-rgb) / 0.34) 55%,
rgb(var(--navy-900-rgb) / 0.46) 100%
);
--hero-scrim-headline: linear-gradient(
to bottom,
rgb(var(--navy-900-rgb) / 0) var(--hero-scrim-ramp-from),
rgb(var(--navy-900-rgb) / var(--hero-scrim-band)) var(--hero-scrim-ramp-to),
rgb(var(--navy-900-rgb) / var(--hero-scrim-band)) 86%,
rgb(var(--navy-900-rgb) / 1) 100%
);
--font-display: "Schibsted Grotesk", "Golos Text", "Noto Nastaliq Urdu", "Helvetica Neue", Helvetica, "Nimbus Sans", sans-serif;
--font-body: "Schibsted Grotesk", "Golos Text", "Noto Nastaliq Urdu", "Helvetica Neue", Helvetica, "Nimbus Sans", sans-serif;
--fs-hero: clamp(1.875rem, 0.833rem + 4.630vw, 5rem);
--fs-stat: clamp(2.75rem, 1.667rem + 4.815vw, 6rem);
--fs-h1: clamp(2rem, 1.333rem + 2.963vw, 4rem);
--fs-h2: clamp(1.625rem, 1.25rem + 1.667vw, 2.75rem);
--fs-h3: clamp(1.3125rem, 1.125rem + 0.833vw, 1.875rem);
--fs-h4: clamp(1.125rem, 1.042rem + 0.370vw, 1.375rem);
--fs-lead: clamp(1.125rem, 1.042rem + 0.370vw, 1.375rem);
--fs-body: 1.0625rem;
--fs-small: 0.9375rem;
--fs-caption: 0.875rem;
--fs-eyebrow: 0.75rem;
--lh-hero: 0.98;
--lh-heading: 1.12;
--lh-snug: 1.3;
--lh-body: 1.6;
--lh-loose: 1.75;
--tr-hero: -0.035em;
--tr-h1: -0.03em;
--tr-h2: -0.025em;
--tr-heading: -0.025em;
--tr-h3: -0.02em;
--tr-voice: -0.025em;
--tr-h4: -0.012em;
--tr-body: 0em;
--tr-figure: -0.045em;
--tr-caps: 0.06em;
--tr-index: 0.04em;
--tr-eyebrow: 0.16em;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-black: 800;
--fw-display: var(--fw-bold);
--fw-voice: var(--fw-regular);
--fw-figure: var(--fw-black);
--fw-index: var(--fw-bold);
--space-3xs: 0.25rem;
--space-2xs: 0.5rem;
--space-xs: 0.75rem;
--space-s: 1rem;
--space-m: 1.5rem;
--space-l: 2rem;
--space-xl: 3rem;
--space-2xl: 4rem;
--space-3xl: 6rem;
--space-4xl: 8rem;
--radius-0: 0;
--radius-xs: 2px;
--radius-s: 3px;
--radius-m: 6px;
--radius-l: 10px;
--radius-pill: 999px;
--hairline: 1px;
--border-2: 2px;
--border-3: 3px;
--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 160ms;
--dur-base: 260ms;
--dur-slow: 480ms;
--dur-hero: 900ms;
--z-base: 0;
--z-hero-scrim: 1;
--z-hero-text: 2;
--z-header: 100;
--z-skip-link: 200;
--focus-ring-w: 2px;
--focus-ring-offset: 2px;
--focus-ring: 0 0 0 var(--focus-ring-w) var(--gold-lt),
0 0 0 calc(var(--focus-ring-w) * 2) var(--navy-900);
--gutter: var(--space-2xl);
--section-y: var(--space-4xl);
--container: 72rem;
--measure: 34rem;
--grid-gap: var(--space-xl);
--masthead-h: 4.5rem;
--cards-columns: 4;
--reasons-columns: 3;
--stats-columns: 3;
--rail: 5.5rem;
--pair-columns: 2;
--structure-columns: 3;
--serve-columns: 3;
--steps-columns: 5;
--step-rail: var(--space-2xl);
--ledger-columns: minmax(0, 18rem) minmax(0, 1fr);
--hero-h: min(max(56.25vw, 38rem), 50rem);
--hero-lead: 0.36;
--hero-pad-inline: var(--gutter);
--hero-copy-foot: var(--space-2xl);
--hero-measure: 40rem;
--hero-subhead-size: var(--fs-lead);
--hero-headline-case: uppercase;
--tap-target: 2.75rem;
--bp-mobile-max: 639px;
--bp-tablet-min: 640px;
--bp-tablet-max: 1023px;
--bp-desktop-min: 1024px;
}
:root:lang(ur) {
--lh-hero: 1.8;
--lh-heading: 1.8;
--lh-snug: 1.9;
--lh-body: 2;
--lh-loose: 2.2;
--tr-hero: 0em;
--tr-h1: 0em;
--tr-h2: 0em;
--tr-heading: 0em;
--tr-h3: 0em;
--tr-voice: 0em;
--tr-h4: 0em;
--tr-caps: 0em;
--tr-eyebrow: 0em;
}
:root:lang(ar) {
--lh-hero: 1.45;
--lh-heading: 1.5;
--lh-snug: 1.6;
--lh-body: 1.8;
--lh-loose: 1.95;
--tr-hero: 0em;
--tr-h1: 0em;
--tr-h2: 0em;
--tr-heading: 0em;
--tr-h3: 0em;
--tr-voice: 0em;
--tr-h4: 0em;
--tr-caps: 0em;
--tr-eyebrow: 0em;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
display: flex;
flex-direction: column;
background-color: var(--ground);
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
letter-spacing: var(--tr-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
min-height: 100vh;
min-height: 100svh;
counter-reset: section;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-display);
line-height: var(--lh-heading);
letter-spacing: var(--tr-heading);
text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: var(--tr-h1); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--tr-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--tr-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: var(--tr-h4); }
h5, h6 { font-size: var(--fs-body); letter-spacing: var(--tr-body); }
p, ul, ol, dl, blockquote, figure, pre, table {
margin: 0;
}
p {
text-wrap: pretty;
}
strong, b { font-weight: var(--fw-semibold); }
em, i { font-style: italic; }
small {
font-size: var(--fs-caption);
color: var(--text-muted);
}
blockquote {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-voice);
line-height: var(--lh-snug);
letter-spacing: var(--tr-voice);
padding-inline-start: var(--space-m);
border-inline-start: var(--border-2) solid var(--rule-gold);
}
.section--dark blockquote {
border-inline-start-color: var(--rule-gold-on-dark);
}
address {
font-style: normal;
}
a {
color: var(--link);
text-decoration-color: var(--link-underline);
text-decoration-thickness: from-font;
text-underline-offset: 0.18em;
transition: color var(--dur-fast) var(--ease-out),
text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover {
color: var(--link-hover);
text-decoration-color: currentColor;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
img, video {
height: auto;
}
table, time, data {
font-variant-numeric: tabular-nums;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: start;
font-weight: var(--fw-semibold);
}
th, td {
padding: var(--space-xs) var(--space-s);
border-bottom: var(--hairline) solid var(--rule);
}
hr {
height: 0;
margin: var(--space-l) 0;
border: 0;
border-top: var(--hairline) solid var(--rule);
}
input, button, textarea, select, optgroup {
font: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
}
textarea {
resize: vertical;
min-height: 8rem;
}
button {
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
legend {
padding: 0;
}
p, li, dd, td, th, figcaption, blockquote {
overflow-wrap: break-word;
}
::selection {
background-color: var(--selection-bg);
color: var(--selection-fg);
}
.section--dark a:not([class]),
.page-head a:not([class]),
.hero a:not([class]),
.motto a:not([class]) {
color: var(--link-on-dark);
}
.section--dark a:not([class]):hover,
.page-head a:not([class]):hover,
.hero a:not([class]):hover,
.motto a:not([class]):hover {
color: var(--link-on-dark-hover);
}
.masthead ::selection,
.footer ::selection,
.hero ::selection,
.page-head ::selection,
.motto ::selection,
.section--dark ::selection,
.admin ::selection {
color: var(--text-on-dark);
}
:target {
scroll-margin-top: calc(var(--masthead-h) + var(--space-m));
}
:focus-visible {
outline: var(--focus-ring-w) solid var(--transparent);
outline-offset: var(--focus-ring-offset);
box-shadow: var(--focus-ring);
border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) {
outline: none;
}
@media (forced-colors: active) {
:focus-visible {
outline-color: Highlight;
}
}
.visually-hidden:not(:focus):not(:active) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.main {
flex: 1 0 auto;
}
.skip-link {
position: fixed;
inset-block-start: var(--space-2xs);
inset-inline-start: var(--space-2xs);
z-index: var(--z-skip-link);
padding: var(--space-2xs) var(--space-s);
border: var(--border-2) solid var(--accent);
border-radius: var(--radius-xs);
background-color: var(--ground);
color: var(--text);
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
text-decoration: none;
transform: translateY(calc(-100% - var(--space-l)));
transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
transform: translateY(0);
}
.masthead {
position: sticky;
inset-block-start: 0;
z-index: var(--z-header);
background-color: var(--ground-sunk);
border-block-end: var(--hairline) solid var(--rule-gold-on-dark);
color: var(--text-on-dark);
}
.masthead__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: start;
justify-content: space-between;
column-gap: var(--space-m);
row-gap: 0;
max-inline-size: var(--container);
margin-inline: auto;
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
min-block-size: var(--masthead-h);
padding-inline-start: var(--gutter);
color: var(--text-on-dark);
font-family: var(--font-display);
font-size: var(--fs-body);
font-weight: var(--fw-index);
text-transform: uppercase;
letter-spacing: var(--tr-caps);
text-decoration: none;
white-space: nowrap;
}
.brand:hover,
.brand:focus-visible {
color: var(--text-on-dark);
}
.brand__mark {
flex: none;
inline-size: var(--border-3);
block-size: 1.25em;
background-color: var(--accent);
transition: block-size var(--dur-base) var(--ease-out);
}
.brand:hover .brand__mark,
.brand:focus-visible .brand__mark {
block-size: 1.75em;
}
.nav {
padding-inline-end: var(--gutter);
}
.nav__list {
display: flex;
align-items: center;
gap: var(--space-m);
margin: 0;
padding: 0;
list-style: none;
}
.nav__link {
position: relative;
display: block;
padding-block: var(--space-2xs);
color: var(--link-on-dark);
font-size: var(--fs-small);
text-decoration: none;
white-space: nowrap;
transition: color var(--dur-fast) var(--ease-out);
}
.masthead__menus {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-2xs);
}
.langs__list {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--fs-eyebrow);
padding-inline: var(--gutter);
}
.langs__item {
display: inline-flex;
}
.langs__link {
position: relative;
display: inline-flex;
align-items: center;
padding-block: 0.55rem;
padding-inline: 0.25rem;
text-decoration: none;
line-height: 0;
}
.langs__item:first-child .langs__link {
padding-inline-start: 0;
}
.langs__item:last-child .langs__link {
padding-inline-end: 0;
}
.langs__flag {
inline-size: 1.55em;
block-size: 1.085em;
display: block;
border-radius: 1px;
box-shadow: 0 0 0 1px var(--rule-on-dark);
opacity: 0.72;
transition:
opacity var(--dur-fast) var(--ease-out),
filter var(--dur-fast) var(--ease-out);
}
.langs__link:hover .langs__flag,
.langs__link:focus-visible .langs__flag,
.langs__link--current .langs__flag {
opacity: 1;
filter: none;
}
.langs__link::after {
content: "";
position: absolute;
inset: auto 0 0 0;
block-size: var(--border-2);
background-color: var(--accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--dur-fast) var(--ease-out);
}
.langs__link:hover::after,
.langs__link:focus-visible::after,
.langs__link--current::after {
transform: scaleX(1);
}
.langs__link:focus-visible {
outline: var(--focus-ring-width, 2px) solid var(--accent);
outline-offset: 3px;
border-radius: 1px;
}
.langs .visually-hidden {
font-family: sans-serif;
}
.langs__flag--none {
display: inline-block;
inline-size: 1.55em;
block-size: 1.085em;
font-size: var(--fs-eyebrow);
line-height: 1.085em;
text-align: center;
text-transform: uppercase;
color: var(--text-muted-on-dark);
box-shadow: 0 0 0 1px var(--rule-on-dark);
border-radius: 1px;
}
.nav__link::after {
content: "";
position: absolute;
inset: auto 0 0 0;
block-size: var(--border-2);
background-color: var(--accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--dur-fast) var(--ease-out);
}
.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-current="page"] {
color: var(--text-on-dark);
}
.nav__link[aria-current="page"] {
font-weight: var(--fw-medium);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after {
transform: scaleX(1);
}
[dir="rtl"] .nav__link::after,
[dir="rtl"] .langs__link::after {
transform-origin: right center;
}
.nav-toggle {
display: none;
}
.nav-toggle__button {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
min-block-size: var(--tap-target);
padding-inline: var(--space-xs);
border: var(--hairline) solid var(--rule-gold-on-dark);
border-radius: var(--radius-xs);
color: var(--text-on-dark);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
text-transform: uppercase;
letter-spacing: var(--tr-caps);
cursor: pointer;
user-select: none;
list-style: none;
}
.nav-toggle__button::-webkit-details-marker {
display: none;
}
.nav-toggle__word--close {
display: none;
}
.nav-toggle[open] .nav-toggle__word--open {
display: none;
}
.nav-toggle[open] .nav-toggle__word--close {
display: inline;
}
.nav-toggle__glyph {
position: relative;
flex: none;
inline-size: 1rem;
block-size: 0.75rem;
}
.nav-toggle__glyph::before,
.nav-toggle__glyph::after {
content: "";
position: absolute;
inset-inline: 0;
block-size: var(--border-2);
background-color: var(--accent);
transition: transform var(--dur-base) var(--ease-out);
}
.nav-toggle__glyph::before {
inset-block-start: 0;
}
.nav-toggle__glyph::after {
inset-block-end: 0;
}
.nav-toggle[open] .nav-toggle__glyph::before {
transform: translateY(0.3125rem) rotate(45deg);
}
.nav-toggle[open] .nav-toggle__glyph::after {
transform: translateY(-0.3125rem) rotate(-45deg);
}
.footer {
border-block-start: var(--border-3) solid var(--accent);
background-color: var(--ground-sunk);
color: var(--text-on-dark);
padding-block: var(--space-3xl) var(--space-xl);
}
.footer__inner {
max-inline-size: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.footer__lockup {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-m);
padding-block-end: var(--space-l);
border-block-end: var(--hairline) solid var(--rule-on-dark);
}
.footer__wordmark {
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--fw-index);
text-transform: uppercase;
letter-spacing: var(--tr-caps);
}
.footer__tagline {
color: var(--accent-hover);
font-family: var(--font-display);
font-size: var(--fs-caption);
font-weight: var(--fw-index);
text-transform: uppercase;
letter-spacing: var(--tr-eyebrow);
}
.footer__grid {
display: grid;
grid-template-columns:
minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, 0.75fr) minmax(0, 1fr);
gap: var(--grid-gap);
padding-block: var(--space-xl);
}
.footer__label {
margin-block-end: var(--space-2xs);
color: var(--accent);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
text-transform: uppercase;
letter-spacing: var(--tr-eyebrow);
}
.footer__value {
margin: 0;
font-size: var(--fs-small);
line-height: var(--lh-loose);
}
.footer__value address {
font-style: normal;
}
.footer__value ul {
margin: 0;
padding: 0;
list-style: none;
}
.footer__value a {
color: var(--link-on-dark);
text-decoration-color: var(--rule-gold-on-dark);
}
.footer__value a:hover,
.footer__value a:focus-visible {
color: var(--link-on-dark-hover);
}
.footer__value--stack li + li {
margin-block-start: var(--space-3xs);
}
.footer__value--inline ul {
display: flex;
flex-wrap: wrap;
column-gap: var(--space-2xs);
}
.footer__value--inline li:not(:last-child)::after {
content: "·";
margin-inline-start: var(--space-2xs);
color: var(--accent);
}
.footer__legal {
display: grid;
gap: var(--space-2xs);
padding-block-start: var(--space-l);
border-block-start: var(--hairline) solid var(--rule-on-dark);
color: var(--text-muted-on-dark);
font-size: var(--fs-caption);
}
.footer__legal strong {
color: var(--text-on-dark);
font-weight: var(--fw-semibold);
}
.footer__copyright {
margin-block-start: var(--space-2xs);
}
.section {
counter-increment: section;
padding-block: var(--section-y);
}
.section--dark {
background-color: var(--ground-sunk);
color: var(--text-on-dark);
}
.section__inner {
max-inline-size: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section__head {
display: grid;
grid-template-columns: var(--rail) minmax(0, 1fr);
column-gap: var(--grid-gap);
align-items: start;
margin-block-end: var(--space-2xl);
padding-block-start: var(--space-l);
border-block-start: var(--hairline) solid var(--rule-gold);
}
.section__head::before {
content: counter(section, decimal-leading-zero);
grid-column: 1;
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-index);
line-height: 1;
letter-spacing: var(--tr-index);
color: var(--accent-on-light);
font-variant-numeric: tabular-nums;
}
.section--dark .section__head {
border-block-start-color: var(--rule-gold-on-dark);
}
.section--dark .section__head::before {
color: var(--accent);
}
.section__title {
grid-column: 2;
max-inline-size: 20ch;
}
.section__lede {
grid-column: 2;
margin-block-start: var(--space-m);
max-inline-size: var(--measure);
font-size: var(--fs-lead);
line-height: var(--lh-snug);
color: var(--text-muted);
}
.section--dark .section__lede {
color: var(--text-muted-on-dark);
}
.eyebrow {
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
text-transform: uppercase;
letter-spacing: var(--tr-eyebrow);
line-height: var(--lh-snug);
color: var(--text);
}
.section--dark .eyebrow {
color: var(--accent);
}
.lede {
max-inline-size: var(--measure);
font-size: var(--fs-lead);
line-height: var(--lh-snug);
}
.rule-note {
display: flex;
align-items: baseline;
gap: var(--space-xs);
margin-block-end: var(--space-l);
font-size: var(--fs-small);
font-weight: var(--fw-medium);
color: var(--text-muted);
}
.rule-note::before {
content: "";
flex: none;
align-self: center;
inline-size: var(--space-l);
block-size: var(--border-2);
background-color: var(--accent);
}
.section--dark .rule-note {
color: var(--text-muted-on-dark);
}
.prose {
max-inline-size: var(--measure);
}
.prose > * + * {
margin-block-start: var(--space-m);
}
.prose ul,
.prose ol {
padding-inline-start: var(--space-m);
}
.cta {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
min-block-size: var(--tap-target);
padding-inline: var(--space-m);
border: var(--hairline) solid var(--accent);
border-radius: var(--radius-xs);
background-color: var(--transparent);
color: var(--text);
font-size: var(--fs-small);
font-weight: var(--fw-index);
text-transform: uppercase;
letter-spacing: var(--tr-caps);
text-decoration: none;
transition: background-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.cta:hover,
.cta:focus-visible {
border-color: var(--accent);
background-color: var(--accent);
color: var(--ground-sunk);
}
.cta--on-dark {
color: var(--text-on-dark);
}
.cards {
display: grid;
grid-template-columns: repeat(var(--cards-columns), minmax(0, 1fr));
gap: var(--space-l);
margin: 0;
padding: 0;
list-style: none;
}
.card {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-m);
border-block-start: var(--border-2) solid var(--accent);
background-color: var(--ground-panel);
}
.card__title {
font-size: var(--fs-h4);
}
.card__body {
font-size: var(--fs-small);
line-height: var(--lh-loose);
color: var(--text-muted-on-dark);
}
.section:not(.section--dark) .card {
padding-inline: 0;
padding-block-end: 0;
background-color: var(--transparent);
}
.section:not(.section--dark) .card__body {
color: var(--text-muted);
}
.reasons {
display: grid;
grid-template-columns: repeat(var(--reasons-columns), minmax(0, 1fr));
gap: var(--space-2xl) var(--grid-gap);
margin: 0;
padding: 0;
list-style: none;
}
.reason {
padding-block-start: var(--space-m);
border-block-start: var(--hairline) solid var(--rule-strong);
}
.reason::before {
content: counter(list-item, decimal-leading-zero);
display: block;
margin-block-end: var(--space-s);
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: var(--fw-index);
line-height: 1;
letter-spacing: var(--tr-index);
color: var(--accent-on-light);
font-variant-numeric: tabular-nums;
}
.reason__title {
font-size: var(--fs-h4);
}
.reason__body {
margin-block-start: var(--space-2xs);
font-size: var(--fs-small);
line-height: var(--lh-loose);
color: var(--text-muted);
}
.section--dark .reason {
border-block-start-color: var(--rule-on-dark);
}
.section--dark .reason::before {
color: var(--accent);
}
.section--dark .reason__body {
color: var(--text-muted-on-dark);
}
.stats {
display: grid;
grid-template-columns: repeat(var(--stats-columns), minmax(0, 1fr));
gap: var(--grid-gap);
}
.stat {
padding-block-start: var(--space-m);
border-block-start: var(--border-2) solid var(--rule-gold);
}
.stat__figure {
direction: ltr;
unicode-bidi: isolate;
font-family: var(--font-display);
font-size: var(--fs-stat);
font-weight: var(--fw-figure);
line-height: 1;
letter-spacing: var(--tr-figure);
color: var(--accent-on-light);
font-variant-numeric: tabular-nums;
}
.stat__caption {
margin: var(--space-s) 0 0;
max-inline-size: 32ch;
font-size: var(--fs-small);
line-height: var(--lh-loose);
color: var(--text-muted);
}
.section--dark .stat {
border-block-start-color: var(--rule-gold-on-dark);
}
.section--dark .stat__figure {
color: var(--accent);
}
.section--dark .stat__caption {
color: var(--text-muted-on-dark);
}
.page-head {
background-color: var(--ground-sunk);
color: var(--text-on-dark);
padding-block: var(--space-3xl);
}
.page-head__inner {
max-inline-size: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.page-head__eyebrow {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-block-end: var(--space-l);
color: var(--accent);
}
.page-head__eyebrow::before {
content: "";
flex: none;
inline-size: var(--space-l);
block-size: var(--border-2);
background-color: var(--accent);
}
.page-head__lockup {
display: grid;
grid-template-columns: repeat(var(--pair-columns), minmax(0, 1fr));
column-gap: var(--grid-gap);
row-gap: var(--space-l);
align-items: start;
}
.page-head__body {
border-inline-start: var(--hairline) solid var(--rule-gold-on-dark);
padding-inline-start: var(--grid-gap);
font-size: var(--fs-lead);
line-height: var(--lh-snug);
color: var(--text-muted-on-dark);
}
.page-head__body > p:first-child {
color: var(--text-on-dark);
}
.prose {
max-inline-size: var(--measure);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text);
}
.prose > p + p {
margin-block-start: var(--space-s);
}
.section--dark .prose {
color: var(--text-on-dark);
}
.consent {
position: sticky;
inset-block-end: 0;
z-index: 20;
background-color: var(--ground-sunk);
border-block-start: var(--border-3) solid var(--accent);
color: var(--text-on-dark);
}
.consent__inner {
max-inline-size: var(--container);
margin-inline: auto;
padding: var(--space-s) var(--gutter);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-s);
}
.consent__body {
margin: 0;
max-inline-size: 62ch;
font-size: var(--fs-small);
line-height: var(--lh-snug);
color: var(--text-on-dark);
}
.consent__actions {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs);
}
.consent__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-block-size: var(--tap-target);
padding-inline: var(--space-m);
border: var(--hairline) solid var(--rule-on-dark);
border-radius: var(--radius-xs);
font-size: var(--fs-small);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-caps);
text-transform: uppercase;
text-decoration: none;
color: var(--text-on-dark);
white-space: nowrap;
}
.consent__button--accept {
border-color: var(--accent);
color: var(--accent);
}
.consent__button:hover {
border-color: var(--accent-hover);
color: var(--accent-hover);
}
.consent__more {
font-size: var(--fs-small);
color: var(--link-on-dark);
}
.consent__more:hover {
color: var(--link-on-dark-hover);
}
.record {
padding: var(--space-s) var(--space-m);
border: var(--hairline) solid var(--rule);
border-inline-start: var(--border-3) solid var(--accent);
font-size: var(--fs-small);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-caps);
line-height: var(--lh-snug);
font-variant-numeric: tabular-nums;
color: var(--text);
}
.section--dark .record {
border-color: var(--rule-on-dark);
border-inline-start-color: var(--accent);
color: var(--text-on-dark);
}
.card > .record {
margin-block-start: auto;
}
.cards--pair {
--cards-columns: var(--pair-columns);
}
.split {
display: grid;
grid-template-columns: repeat(var(--pair-columns), minmax(0, 1fr));
gap: var(--grid-gap);
align-items: start;
}
.matrix {
display: grid;
grid-template-columns: repeat(var(--pair-columns), minmax(0, 1fr));
gap: var(--hairline);
margin: 0;
padding: var(--hairline);
background-color: var(--rule-strong);
list-style: none;
}
.matrix__cell {
display: flex;
flex-direction: column;
padding: var(--space-xl);
background-color: var(--ground);
}
.matrix__title {
font-size: var(--fs-h3);
}
.matrix__title::before {
content: "";
display: block;
inline-size: var(--space-l);
block-size: var(--border-2);
margin-block-end: var(--space-m);
background-color: var(--accent);
}
.matrix__body {
margin-block-start: var(--space-s);
max-inline-size: 44ch;
line-height: var(--lh-loose);
color: var(--text-muted);
}
.section--dark .matrix {
background-color: var(--rule-on-dark);
}
.section--dark .matrix__cell {
background-color: var(--ground-sunk);
}
.section--dark .matrix__body {
color: var(--text-muted-on-dark);
}
.ledger {
margin: 0;
padding: 0;
border-block-start: var(--hairline) solid var(--rule);
list-style: none;
}
.ledger__item {
display: grid;
grid-template-columns: var(--ledger-columns);
column-gap: var(--grid-gap);
row-gap: var(--space-2xs);
align-items: baseline;
padding-block: var(--space-l);
border-block-end: var(--hairline) solid var(--rule);
}
.ledger__title {
display: flex;
align-items: baseline;
gap: var(--space-xs);
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
letter-spacing: var(--tr-h4);
}
.ledger__title::before {
content: "";
flex: none;
align-self: center;
inline-size: var(--space-s);
block-size: var(--border-2);
background-color: var(--accent);
}
.ledger__body {
max-inline-size: var(--measure);
font-size: var(--fs-small);
line-height: var(--lh-loose);
color: var(--text-muted);
}
.section--dark .ledger,
.section--dark .ledger__item {
border-color: var(--rule-on-dark);
}
.section--dark .ledger__body {
color: var(--text-muted-on-dark);
}
.marks ul {
display: grid;
gap: var(--space-s);
margin: 0;
padding: 0;
list-style: none;
}
.marks li {
position: relative;
padding-inline-start: var(--space-m);
font-size: var(--fs-small);
line-height: var(--lh-snug);
}
.marks li::before {
content: "";
position: absolute;
inset-block-start: 0.6em;
inset-inline-start: 0;
inline-size: var(--space-2xs);
block-size: var(--border-2);
background-color: var(--accent);
}
.stat--credential {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-2xs) var(--space-l);
}
.stat--credential .stat__figure {
font-size: var(--fs-h2);
letter-spacing: var(--tr-heading);
}
.stat--credential .stat__caption {
margin: 0;
max-inline-size: 44ch;
}
.hero {
background-color: var(--ground-sunk);
color: var(--text-on-dark);
}
.hero__stage {
position: relative;
display: grid;
grid-template-rows: minmax(calc(var(--hero-h) * var(--hero-lead)), 1fr) auto;
grid-template-columns: minmax(0, 1fr);
min-block-size: var(--hero-h);
overflow: hidden;
isolation: isolate;
}
.hero__frames {
position: absolute;
inset: 0;
z-index: var(--z-base);
}
.hero__frame {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--dur-hero) var(--ease-in-out);
}
.hero__frame[hidden] {
display: none;
}
.hero__frame[data-hero-active] {
opacity: 1;
}
.hero__frame[data-hero-entering] {
z-index: 1;
}
.hero__frame img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
}
.hero__stage::after {
content: "";
position: absolute;
inset: 0;
z-index: var(--z-hero-scrim);
pointer-events: none;
background-image: var(--hero-scrim-headline), var(--hero-scrim-wash);
}
.hero__copy {
position: relative;
z-index: var(--z-hero-text);
grid-row: 2;
justify-self: center;
inline-size: min(100%, var(--container));
padding-inline: var(--hero-pad-inline);
padding-block-end: var(--hero-copy-foot);
display: grid;
grid-template-columns: minmax(0, var(--hero-measure)) auto;
column-gap: var(--grid-gap);
align-items: end;
}
.hero__eyebrow {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: var(--space-xs);
margin-block-end: var(--space-s);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
text-transform: uppercase;
letter-spacing: var(--tr-eyebrow);
color: var(--text-on-dark);
}
.hero__eyebrow::before {
content: "";
flex: none;
inline-size: var(--space-l);
block-size: var(--border-2);
background-color: var(--accent);
}
.hero__headline {
grid-column: 1 / -1;
margin-block-end: var(--space-m);
font-size: var(--fs-hero);
font-weight: var(--fw-display);
line-height: var(--lh-hero);
letter-spacing: var(--tr-hero);
text-transform: var(--hero-headline-case);
text-wrap: balance;
}
.hero__headline-line {
display: block;
}
.hero__subhead {
grid-column: 1;
font-size: var(--hero-subhead-size);
line-height: var(--lh-snug);
color: var(--text-on-dark);
}
.hero__cta {
grid-column: 2;
justify-self: end;
}
.hero__base {
border-block-start: var(--hairline) solid var(--rule-gold-on-dark);
background-color: var(--ground-sunk);
}
.hero__base-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-s) var(--space-m);
max-inline-size: var(--container);
margin-inline: auto;
padding: var(--space-s) var(--hero-pad-inline);
}
.hero__disciplines {
flex: 1 1 20rem;
min-inline-size: 0;
}
.hero__disciplines ul {
display: flex;
flex-wrap: wrap;
column-gap: var(--space-2xs);
row-gap: var(--space-3xs);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
text-transform: uppercase;
letter-spacing: var(--tr-caps);
color: var(--text-on-dark);
}
.hero__disciplines li:not(:last-child)::after {
content: "·";
margin-inline-start: var(--space-2xs);
color: var(--accent);
}
.hero__controls {
display: none;
align-items: center;
gap: var(--space-s);
}
.hero[data-hero-state="playing"] .hero__controls,
.hero[data-hero-state="paused"] .hero__controls {
display: flex;
}
.hero__progress {
display: flex;
gap: var(--space-3xs);
margin: 0;
}
.hero__tick {
inline-size: var(--space-s);
block-size: var(--border-2);
background-color: var(--rule-on-dark);
transition: background-color var(--dur-base) var(--ease-out);
}
.hero__tick[data-hero-active] {
background-color: var(--accent);
}
.hero__pause {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
min-block-size: var(--tap-target);
padding-inline: var(--space-xs);
border: var(--hairline) solid var(--rule-gold-on-dark);
border-radius: var(--radius-xs);
color: var(--text-on-dark);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
text-transform: uppercase;
letter-spacing: var(--tr-caps);
white-space: nowrap;
transition: border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.hero__pause:hover {
border-color: var(--accent);
color: var(--accent-hover);
}
.hero__pause-glyph {
flex: none;
inline-size: 0.7em;
block-size: 0.85em;
border-inline: 0.24em solid var(--accent);
}
.hero[data-hero-state="paused"] .hero__pause-glyph {
border-inline-width: 0;
background-color: var(--accent);
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.hero__pause-word--play {
display: none;
}
.hero[data-hero-state="paused"] .hero__pause-word--pause {
display: none;
}
.hero[data-hero-state="paused"] .hero__pause-word--play {
display: inline;
}
.problem__close {
margin-block-start: var(--space-2xl);
padding-block-start: var(--space-m);
border-block-start: var(--hairline) solid var(--rule-gold);
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-voice);
line-height: var(--lh-snug);
letter-spacing: var(--tr-voice);
max-inline-size: 40rem;
}
.structure__parent {
position: relative;
max-inline-size: 34rem;
margin-inline: auto;
}
.structure__parent::after {
content: "";
position: absolute;
inset-block-start: 100%;
inset-inline-start: 50%;
inline-size: var(--border-2);
block-size: var(--space-l);
background-color: var(--accent);
transform: translateX(-50%);
}
.structure__children {
position: relative;
display: grid;
grid-template-columns: repeat(var(--structure-columns), minmax(0, 1fr));
gap: var(--grid-gap);
margin: var(--space-2xl) 0 0;
padding: 0;
list-style: none;
}
.structure__children::before {
content: "";
position: absolute;
inset-block-start: calc(var(--space-l) * -1);
inset-inline: calc((100% - 2 * var(--grid-gap)) / 6);
block-size: var(--hairline);
background-color: var(--rule-strong);
}
.structure__child {
position: relative;
}
.structure__child::before {
content: "";
position: absolute;
inset-block-start: calc(var(--space-l) * -1);
inset-inline-start: 50%;
inline-size: var(--hairline);
block-size: var(--space-l);
background-color: var(--rule-strong);
transform: translateX(-50%);
}
.node {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
block-size: 100%;
padding: var(--space-m);
border: var(--hairline) solid var(--rule);
border-block-start: var(--border-2) solid var(--rule-gold);
}
.node__ident {
display: flex;
flex-direction: column;
gap: var(--space-3xs);
}
.node__title {
font-size: var(--fs-h4);
}
.node__meta {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
text-transform: uppercase;
letter-spacing: var(--tr-eyebrow);
color: var(--text);
}
.node__body {
margin-block-start: var(--space-2xs);
font-size: var(--fs-small);
line-height: var(--lh-loose);
color: var(--text-muted);
}
.node--parent {
border: 0;
border-block-start: var(--border-3) solid var(--accent);
background-color: var(--ground-sunk);
color: var(--text-on-dark);
}
.node--parent .node__title {
font-size: var(--fs-h3);
}
.node--parent .node__meta {
color: var(--accent);
}
.node--parent .node__body {
color: var(--text-muted-on-dark);
}
.london__record {
margin-block-start: var(--space-l);
}
.notes {
display: grid;
grid-template-columns: repeat(var(--pair-columns), minmax(0, 1fr));
gap: var(--grid-gap);
margin-block-start: var(--space-2xl);
}
.note {
padding-block-start: var(--space-m);
border-block-start: var(--hairline) solid var(--rule-gold);
}
.note__body {
margin: var(--space-s) 0 0;
max-inline-size: var(--measure);
font-size: var(--fs-small);
line-height: var(--lh-loose);
color: var(--text-muted);
}
.section--dark .note {
border-block-start-color: var(--rule-gold-on-dark);
}
.section--dark .note__body {
color: var(--text-muted-on-dark);
}
.serve__lead {
display: grid;
grid-template-columns: repeat(var(--pair-columns), minmax(0, 1fr));
column-gap: var(--grid-gap);
row-gap: var(--space-s);
align-items: baseline;
margin-block-end: var(--space-2xl);
padding-block-start: var(--space-m);
border-block-start: var(--border-3) solid var(--accent);
}
.serve__lead-title {
font-size: var(--fs-h2);
letter-spacing: var(--tr-heading);
}
.serve__lead-body {
margin: 0;
font-size: var(--fs-lead);
line-height: var(--lh-snug);
color: var(--text-muted);
}
.section--dark .serve__lead-body {
color: var(--text-muted-on-dark);
}
.cards--serve {
--cards-columns: var(--serve-columns);
}
.technology__credentials {
margin-block-start: var(--space-2xl);
}
.process__steps {
display: grid;
grid-template-columns: repeat(var(--steps-columns), minmax(0, 1fr));
gap: var(--space-l);
margin: 0;
padding: 0;
list-style: none;
}
.step {
position: relative;
padding-block-start: var(--space-m);
border-block-start: var(--border-2) solid var(--rule-gold);
}
.step::before {
content: counter(list-item, decimal-leading-zero);
display: block;
margin-block-end: var(--space-s);
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-index);
line-height: 1;
letter-spacing: var(--tr-index);
color: var(--accent-on-light);
font-variant-numeric: tabular-nums;
}
.step:not(:last-child)::after {
content: "›";
position: absolute;
inset-block-start: var(--space-m);
inset-inline-start: 100%;
inline-size: var(--space-l);
text-align: center;
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-index);
line-height: 1;
color: var(--accent-on-light);
}
.step__title {
font-size: var(--fs-h4);
}
.step__body {
margin-block-start: var(--space-2xs);
font-size: var(--fs-small);
line-height: var(--lh-loose);
color: var(--text-muted);
}
.section--dark .step {
border-block-start-color: var(--rule-gold-on-dark);
}
.section--dark .step::before,
.section--dark .step:not(:last-child)::after {
color: var(--accent);
}
.section--dark .step__body {
color: var(--text-muted-on-dark);
}
.page-head__strapline {
margin: var(--space-s) 0 0;
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-voice);
line-height: var(--lh-snug);
letter-spacing: var(--tr-voice);
color: var(--accent);
}
.motto {
background-color: var(--ground-sunk);
color: var(--text-on-dark);
padding-block: var(--section-y);
}
.motto__inner {
max-inline-size: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
text-align: center;
}
.motto__line {
margin: 0;
padding-block-start: var(--space-2xl);
border-block-start: var(--hairline) solid var(--rule-gold-on-dark);
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: var(--fw-voice);
line-height: var(--lh-heading);
letter-spacing: var(--tr-voice);
text-wrap: balance;
}
.contact__invite {
padding-block: var(--space-m) var(--space-2xl);
border-block-start: var(--border-3) solid var(--accent);
border-block-end: var(--hairline) solid var(--rule);
}
.contact__invite > * + * {
margin-block-start: var(--space-m);
}
.contact__details {
--ledger-columns: minmax(0, 1fr);
}
.marks--inline ul {
display: flex;
flex-wrap: wrap;
column-gap: var(--space-m);
row-gap: var(--space-2xs);
}
:where(:lang(ar)),
:where(:lang(ur)) {
font-family: var(--font-body);
}
:lang(ar) {
--font-display: "Schibsted Grotesk", "Golos Text", "Cairo", "Helvetica Neue", Helvetica, "Nimbus Sans", sans-serif;
--font-body: "Schibsted Grotesk", "Golos Text", "Cairo", "Helvetica Neue", Helvetica, "Nimbus Sans", sans-serif;
}
:lang(ur) {
--font-display: "Schibsted Grotesk", "Golos Text", "Noto Nastaliq Urdu", "Helvetica Neue", Helvetica, "Nimbus Sans", sans-serif;
--font-body: "Schibsted Grotesk", "Golos Text", "Noto Nastaliq Urdu", "Helvetica Neue", Helvetica, "Nimbus Sans", sans-serif;
}
@media (max-width: 1023px) {
:root {
--gutter: var(--space-l);
--section-y: var(--space-3xl);
--container: 100%;
--grid-gap: var(--space-l);
--masthead-h: 4rem;
--cards-columns: 2;
--reasons-columns: 2;
--rail: 4rem;
--structure-columns: 1;
--serve-columns: 2;
--steps-columns: 1;
--hero-h: min(max(75vw, 36rem), 48rem);
--hero-copy-foot: var(--space-xl);
--hero-scrim-ramp-from: 22%;
--hero-scrim-ramp-to: 34%;
}
.hero__copy {
grid-template-columns: minmax(0, 1fr);
}
.hero__subhead {
grid-column: 1;
}
.hero__cta {
grid-column: 1;
justify-self: start;
margin-block-start: var(--space-l);
}
.hero__disciplines {
flex-basis: 100%;
}
.nav-toggle {
display: block;
padding-inline-end: var(--gutter);
}
.masthead__menus {
flex-basis: 100%;
}
.langs {
order: -1;
}
.nav {
display: none;
inline-size: 100%;
padding-inline-end: 0;
border-block-start: var(--hairline) solid var(--rule-on-dark);
background-color: var(--ground-panel);
max-block-size: calc(100vh - var(--masthead-h));
max-block-size: calc(100svh - var(--masthead-h));
overflow-y: auto;
overscroll-behavior: contain;
}
.nav-toggle[open] ~ .masthead__menus .nav {
display: block;
}
.nav__list {
display: block;
}
.nav__item + .nav__item {
border-block-start: var(--hairline) solid var(--rule-on-dark);
}
.nav__link {
padding: var(--space-s) var(--gutter);
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-h4);
}
.nav__link[aria-current="page"] {
font-weight: var(--fw-display);
}
.nav__link::after {
inset-block: 0;
inset-inline: 0 auto;
inline-size: var(--border-3);
block-size: auto;
transform: scaleY(0);
transform-origin: center top;
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after {
transform: scaleY(1);
}
.footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-head__lockup {
grid-template-columns: minmax(0, 1fr);
}
.page-head__body {
border-inline-start: 0;
border-block-start: var(--hairline) solid var(--rule-gold-on-dark);
padding-inline-start: 0;
padding-block-start: var(--space-l);
}
.matrix__cell {
padding: var(--space-l);
}
.structure__parent {
max-inline-size: none;
margin-inline: 0;
}
.structure__parent::after {
inset-inline-start: var(--space-l);
inline-size: var(--hairline);
block-size: var(--space-2xl);
background-color: var(--rule-gold);
transform: none;
}
.structure__children {
margin-block-start: var(--space-2xl);
margin-inline-start: var(--space-l);
padding-inline-start: var(--space-l);
border-inline-start: var(--hairline) solid var(--rule-gold);
gap: var(--space-m);
}
.structure__children::before {
display: none;
}
.structure__child::before {
inset-block-start: 0;
inset-inline-start: calc(var(--space-l) * -1);
inline-size: var(--space-l);
block-size: var(--border-2);
background-color: var(--rule-gold);
transform: none;
}
.node {
display: grid;
grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
column-gap: var(--grid-gap);
row-gap: var(--space-s);
align-items: baseline;
}
.node__body {
margin-block-start: 0;
}
.process__steps {
gap: var(--space-xl);
}
.step {
padding-block-start: 0;
padding-inline-start: calc(var(--step-rail) + var(--grid-gap));
border-block-start: 0;
}
.step::before {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: var(--step-rail);
margin-block-end: 0;
text-align: center;
}
.step:not(:last-child)::after {
content: "";
inset-block-start: var(--space-l);
inset-block-end: calc(var(--space-xl) * -1);
inset-inline-start: calc(var(--step-rail) / 2);
inline-size: var(--hairline);
background-color: var(--rule-gold);
}
.section--dark .step:not(:last-child)::after {
background-color: var(--rule-gold-on-dark);
}
}
.enquiry {
margin-block-start: var(--space-xl);
padding-block-start: var(--space-l);
border-block-start: var(--hairline) solid var(--rule);
}
.enquiry__heading {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-display);
letter-spacing: var(--tr-h3);
line-height: var(--lh-heading);
color: var(--text);
margin: 0;
}
.enquiry__intro {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-muted);
max-inline-size: var(--measure);
margin-block: var(--space-2xs) var(--space-l);
}
.enquiry__banner {
background-color: var(--ground-sunk);
color: var(--accent);
font-size: var(--fs-small);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-caps);
text-transform: uppercase;
padding: var(--space-2xs) var(--space-s);
border-radius: var(--radius-xs);
margin-block-end: var(--space-m);
}
.enquiry__notice {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-on-dark);
background-color: var(--ground-panel);
border-inline-start: var(--border-3) solid var(--rule-on-dark);
padding: var(--space-s) var(--space-m);
border-radius: var(--radius-xs);
margin-block-end: var(--space-m);
}
.enquiry__notice--sent {
border-inline-start-color: var(--accent);
}
.field {
margin-block-end: var(--space-m);
}
.field__label {
display: block;
font-size: var(--fs-small);
font-weight: var(--fw-semibold);
letter-spacing: var(--tr-caps);
text-transform: uppercase;
color: var(--text);
margin-block-end: var(--space-3xs);
}
.field__optional {
font-weight: var(--fw-regular);
text-transform: none;
letter-spacing: var(--tr-body);
color: var(--text-muted);
}
.field__input {
inline-size: 100%;
min-block-size: var(--tap-target);
padding: var(--space-2xs) var(--space-s);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text);
background-color: var(--white);
border: var(--hairline) solid var(--rule-strong);
border-radius: var(--radius-xs);
transition: border-color var(--dur-fast) var(--ease-out);
}
.field__input--prose {
min-block-size: calc(var(--tap-target) * 3);
resize: vertical;
}
.field__input:focus-visible {
box-shadow: var(--focus-ring);
outline: var(--focus-ring-w) solid var(--transparent);
outline-offset: var(--focus-ring-offset);
border-color: var(--accent-on-light);
}
.field--error .field__input {
border-color: var(--accent-on-light);
border-inline-start-width: var(--border-3);
}
.field__error {
font-size: var(--fs-small);
line-height: var(--lh-snug);
font-weight: var(--fw-medium);
color: var(--text);
margin-block: 0 var(--space-3xs);
}
.field__hint {
font-size: var(--fs-caption);
line-height: var(--lh-snug);
color: var(--text-muted);
margin-block: var(--space-3xs) 0;
}
.enquiry__submit {
margin-block-start: var(--space-l);
}
.enquiry[data-busy] .cta--submit,
.cta--submit[aria-disabled="true"] {
opacity: 0.6;
cursor: progress;
}
.cta--submit {
font-family: var(--font-body);
font-size: var(--fs-body);
cursor: pointer;
min-block-size: var(--tap-target);
}
.hp {
display: none;
}
.admin {
display: block;
background-color: var(--ground-sunk);
background-image: var(--admin-wash);
background-repeat: no-repeat;
background-attachment: fixed;
color: var(--text-on-dark);
min-block-size: 100vh;
}
.admin a:not(.skip-link) {
color: var(--link-on-dark);
}
.admin a:not(.skip-link):hover {
color: var(--link-on-dark-hover);
}
.admin .cta,
.admin .cta--submit {
color: var(--accent);
border-color: var(--accent);
background-color: var(--transparent);
}
.admin .cta:hover,
.admin .cta--submit:hover {
color: var(--ground-sunk);
background-color: var(--accent);
}
.admin .cta:focus-visible,
.admin .cta--submit:focus-visible {
box-shadow: var(--focus-ring);
outline: var(--focus-ring-w) solid var(--transparent);
outline-offset: var(--focus-ring-offset);
}
.admin__masthead {
position: sticky;
inset-block-start: 0;
z-index: var(--z-header);
background-color: var(--ground-sunk);
border-block-end: var(--hairline) solid var(--admin-rule-gold);
}
.admin__masthead-inner {
max-inline-size: var(--container);
margin-inline: auto;
padding: var(--space-s) var(--gutter);
display: flex;
flex-wrap: wrap;
gap: var(--space-s);
align-items: center;
justify-content: space-between;
}
.admin__brand {
font-family: var(--font-display);
font-weight: var(--fw-index);
letter-spacing: var(--tr-eyebrow);
text-transform: uppercase;
font-size: var(--fs-eyebrow);
color: var(--text-on-dark);
margin: 0;
}
.admin__brand-tag {
color: var(--accent);
margin-inline-start: var(--space-2xs);
}
.admin__nav {
display: flex;
align-items: center;
gap: var(--space-m);
flex-wrap: wrap;
}
.admin__navlink {
color: var(--text-muted-on-dark);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
letter-spacing: var(--tr-caps);
text-transform: uppercase;
text-decoration: none;
min-block-size: var(--tap-target);
display: inline-flex;
align-items: center;
border-block-end: var(--border-2) solid var(--transparent);
transition: color var(--dur-fast) var(--ease-out);
}
.admin__navlink:hover {
color: var(--accent);
}
.admin__navlink[aria-current="page"] {
color: var(--accent);
border-block-end-color: var(--accent);
}
.admin__navlink:focus-visible,
.admin__logout-button:focus-visible {
box-shadow: var(--focus-ring);
outline: var(--focus-ring-w) solid var(--transparent);
outline-offset: var(--focus-ring-offset);
}
.admin__who {
font-size: var(--fs-caption);
color: var(--text-muted-on-dark);
}
.admin__logout {
margin: 0;
}
.admin__logout-button {
background: none;
border: var(--hairline) solid var(--admin-rule);
color: var(--text-on-dark);
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
letter-spacing: var(--tr-caps);
text-transform: uppercase;
padding-inline: var(--space-s);
border-radius: var(--radius-0);
min-block-size: var(--tap-target);
cursor: pointer;
transition:
border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.admin__logout-button:hover {
border-color: var(--accent);
color: var(--accent);
}
.admin__banner {
background-color: var(--navy-800);
border-block-end: var(--hairline) solid var(--admin-rule-gold);
color: var(--accent);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-caps);
text-align: center;
padding: var(--space-2xs) var(--gutter);
margin: 0;
}
.admin__main {
max-inline-size: var(--container);
margin-inline: auto;
padding: var(--space-2xl) var(--gutter) var(--space-4xl);
}
.admin__narrow {
max-inline-size: 44rem;
}
.admin__wide {
max-inline-size: 100%;
}
.admin__title {
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: var(--fw-display);
letter-spacing: var(--tr-h2);
line-height: var(--lh-heading);
color: var(--text-on-dark);
margin-block: 0 var(--space-l);
padding-block-end: var(--space-s);
border-block-end: var(--hairline) solid var(--admin-rule);
}
.admin__crumb {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
letter-spacing: var(--tr-caps);
text-transform: uppercase;
margin-block: 0 var(--space-s);
}
.admin__crumb a {
min-block-size: var(--tap-target);
display: inline-flex;
align-items: center;
}
.admin__key {
font-size: var(--fs-caption);
color: var(--text-muted-on-dark);
margin-block: calc(var(--space-l) * -1) var(--space-l);
overflow-wrap: anywhere;
}
.admin__label-note {
font-size: var(--fs-small);
line-height: var(--lh-body);
color: var(--text-muted-on-dark);
max-inline-size: var(--measure);
margin-block: 0 var(--space-l);
padding-inline-start: var(--space-s);
border-inline-start: var(--hairline) solid var(--admin-rule);
}
.admin__note {
font-size: var(--fs-small);
line-height: var(--lh-body);
color: var(--text-muted-on-dark);
max-inline-size: var(--measure);
margin-block-start: var(--space-l);
}
.admin__cta {
margin-block-start: var(--space-xl);
}
.admin__error {
border-inline-start: var(--border-3) solid var(--accent);
background-color: var(--admin-panel);
color: var(--text-on-dark);
font-weight: var(--fw-medium);
padding: var(--space-s) var(--space-m);
margin-block-end: var(--space-m);
}
.admin__locked {
border-inline-start: var(--border-3) solid var(--admin-rule-gold);
background-color: var(--admin-panel);
color: var(--text-on-dark);
font-size: var(--fs-small);
line-height: var(--lh-body);
padding: var(--space-s) var(--space-m);
margin-block-end: var(--space-l);
}
.admin__form .field__label,
.admin__form .field__hint {
color: var(--text-muted-on-dark);
}
.admin__form .field__label {
font-size: var(--fs-eyebrow);
letter-spacing: var(--tr-eyebrow);
}
.admin__form .field__input {
background-color: var(--admin-panel);
border-color: var(--admin-rule);
border-radius: var(--radius-0);
color: var(--text-on-dark);
}
.admin__form .field__input:focus-visible {
border-color: var(--accent);
}
.admin__submit {
margin-block-start: var(--space-l);
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
align-items: center;
}
.admin__cancel {
font-size: var(--fs-small);
min-block-size: var(--tap-target);
display: inline-flex;
align-items: center;
}
.ledger {
list-style: none;
margin: 0;
padding: 0;
}
.ledger__entry {
border-block-start: var(--hairline) solid var(--admin-rule);
padding-block: var(--space-m);
display: grid;
grid-template-columns: 3.5rem minmax(0, 1fr);
gap: var(--space-s);
transition: background-color var(--dur-fast) var(--ease-out);
}
.ledger__entry:last-child {
border-block-end: var(--hairline) solid var(--admin-rule);
}
.ledger__entry:hover {
background-color: var(--admin-entry-hover);
}
.ledger__index {
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--fw-index);
letter-spacing: var(--tr-index);
font-variant-numeric: tabular-nums;
color: var(--accent);
line-height: 1;
padding-block-start: 0.15em;
}
@keyframes ledger-in {
from {
opacity: 0;
transform: translateY(0.5rem);
}
to {
opacity: 1;
transform: none;
}
}
.ledger__entry,
.content-group {
animation: ledger-in var(--dur-base) var(--ease-out) both;
}
.ledger__entry:nth-child(1), .content-group:nth-child(1) { animation-delay: 0ms; }
.ledger__entry:nth-child(2), .content-group:nth-child(2) { animation-delay: 35ms; }
.ledger__entry:nth-child(3), .content-group:nth-child(3) { animation-delay: 70ms; }
.ledger__entry:nth-child(4), .content-group:nth-child(4) { animation-delay: 105ms; }
.ledger__entry:nth-child(5), .content-group:nth-child(5) { animation-delay: 140ms; }
.ledger__entry:nth-child(6), .content-group:nth-child(6) { animation-delay: 175ms; }
.ledger__entry:nth-child(7), .content-group:nth-child(7) { animation-delay: 210ms; }
.ledger__entry:nth-child(8), .content-group:nth-child(8) { animation-delay: 245ms; }
.ledger__entry:nth-child(n + 9) { animation-delay: 280ms; }
.inbox__views {
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
align-items: baseline;
margin-block-end: var(--space-l);
}
.inbox__view {
color: var(--text-muted-on-dark);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
letter-spacing: var(--tr-caps);
text-transform: uppercase;
text-decoration: none;
min-block-size: var(--tap-target);
display: inline-flex;
align-items: center;
gap: var(--space-3xs);
border-block-end: var(--border-2) solid var(--transparent);
}
.inbox__view:hover {
color: var(--accent);
}
.inbox__view--on {
color: var(--accent);
border-block-end-color: var(--accent);
}
.inbox__view:focus-visible,
.inbox__export:focus-visible {
box-shadow: var(--focus-ring);
outline: var(--focus-ring-w) solid var(--transparent);
outline-offset: var(--focus-ring-offset);
}
.inbox__count {
font-variant-numeric: tabular-nums;
color: var(--text-on-dark);
}
.inbox__export {
margin-inline-start: auto;
color: var(--accent);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
letter-spacing: var(--tr-caps);
text-transform: uppercase;
min-block-size: var(--tap-target);
display: inline-flex;
align-items: center;
}
.enquiry-card__who {
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--fw-display);
letter-spacing: var(--tr-h4);
color: var(--text-on-dark);
margin: 0;
}
.enquiry-card__org {
font-size: var(--fs-small);
font-weight: var(--fw-regular);
letter-spacing: var(--tr-body);
color: var(--text-muted-on-dark);
}
.enquiry-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
font-size: var(--fs-small);
margin-block: var(--space-3xs) var(--space-s);
}
.enquiry-card__when {
color: var(--text-muted-on-dark);
font-variant-numeric: tabular-nums;
}
.enquiry-card__flags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs);
margin-block: 0 var(--space-s);
}
.tag {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
letter-spacing: var(--tr-caps);
text-transform: uppercase;
padding: var(--space-3xs) var(--space-2xs);
border: var(--hairline) solid var(--admin-rule);
color: var(--text-muted-on-dark);
}
.tag--status-new,
.tag--delivery-failed,
.tag--delivery-unknown,
.tag--locked {
color: var(--accent);
border-color: var(--admin-rule-gold);
}
.enquiry-card__error {
font-size: var(--fs-small);
color: var(--accent);
border-inline-start: var(--border-3) solid var(--admin-rule-gold);
padding-inline-start: var(--space-s);
margin-block: 0 var(--space-s);
overflow-wrap: anywhere;
}
.enquiry-card__message {
margin: 0 0 var(--space-m);
padding-inline-start: var(--space-m);
border-inline-start: var(--hairline) solid var(--admin-rule-gold);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-on-dark);
white-space: pre-wrap;
overflow-wrap: anywhere;
max-inline-size: var(--measure);
}
.enquiry-card__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
align-items: flex-end;
}
.enquiry-card__action,
.enquiry-card__note {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs);
align-items: flex-end;
margin: 0;
}
.enquiry-card__action .field__label,
.enquiry-card__note .field__label {
color: var(--text-muted-on-dark);
font-size: var(--fs-eyebrow);
letter-spacing: var(--tr-eyebrow);
flex-basis: 100%;
}
.enquiry-card__action .field__input,
.enquiry-card__note .field__input {
background-color: var(--admin-panel);
border-color: var(--admin-rule);
border-radius: var(--radius-0);
color: var(--text-on-dark);
}
.enquiry-card__action .field__input {
inline-size: auto;
min-inline-size: 9rem;
}
.enquiry-card__note {
margin-block-start: var(--space-m);
padding-block-start: var(--space-s);
border-block-start: var(--hairline) solid var(--admin-rule);
}
.content-group {
margin-block-end: var(--space-2xl);
}
.content-group__title {
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
letter-spacing: var(--tr-eyebrow);
text-transform: uppercase;
color: var(--accent);
border-block-end: var(--hairline) solid var(--admin-rule-gold);
padding-block-end: var(--space-2xs);
margin-block: 0 var(--space-2xs);
display: flex;
flex-wrap: wrap;
gap: var(--space-s);
justify-content: space-between;
align-items: baseline;
}
.content-group__count {
font-size: var(--fs-caption);
font-weight: var(--fw-regular);
text-transform: none;
letter-spacing: var(--tr-body);
color: var(--text-muted-on-dark);
font-variant-numeric: tabular-nums;
}
.content-list {
list-style: none;
margin: 0;
padding: 0;
}
.content-list__item {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs);
align-items: center;
border-block-end: var(--hairline) solid var(--admin-rule);
transition: background-color var(--dur-fast) var(--ease-out);
}
.content-list__item:hover {
background-color: var(--admin-entry-hover);
}
.content-list__link {
flex: 1 1 18rem;
display: flex;
flex-direction: column;
gap: var(--space-3xs);
padding-block: var(--space-2xs);
min-block-size: var(--tap-target);
justify-content: center;
text-decoration: none;
}
.content-list__label {
color: var(--text-on-dark);
font-size: var(--fs-body);
}
.content-list__key {
color: var(--text-muted-on-dark);
font-size: var(--fs-caption);
overflow-wrap: anywhere;
}
.revisions {
margin-block-start: var(--space-3xl);
padding-block-start: var(--space-l);
border-block-start: var(--hairline) solid var(--admin-rule-gold);
}
.revisions__title {
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
letter-spacing: var(--tr-eyebrow);
text-transform: uppercase;
color: var(--accent);
margin-block: 0 var(--space-m);
}
.revisions__list {
list-style: none;
margin: 0;
padding: 0;
}
.revisions__item {
border-block-start: var(--hairline) solid var(--admin-rule);
padding-block: var(--space-m);
}
.revisions__meta {
font-size: var(--fs-caption);
color: var(--text-muted-on-dark);
margin-block: 0 var(--space-2xs);
font-variant-numeric: tabular-nums;
}
.revisions__value {
margin: 0 0 var(--space-s);
padding-inline-start: var(--space-m);
border-inline-start: var(--hairline) solid var(--admin-rule);
color: var(--text-on-dark);
white-space: pre-wrap;
overflow-wrap: anywhere;
max-inline-size: var(--measure);
}
.confirm {
display: grid;
gap: 0;
grid-template-columns: 1fr 1fr;
border-block: var(--border-2) solid var(--admin-rule-gold);
margin-block: var(--space-l) var(--space-xl);
}
.confirm__side {
padding: var(--space-l) var(--space-m);
}
.confirm__side + .confirm__side {
border-inline-start: var(--hairline) solid var(--admin-rule);
}
.confirm__heading {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
letter-spacing: var(--tr-eyebrow);
text-transform: uppercase;
color: var(--text-muted-on-dark);
margin-block: 0 var(--space-s);
}
.confirm__value {
margin: 0;
font-size: var(--fs-lead);
line-height: var(--lh-snug);
color: var(--text-on-dark);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.confirm__value--current {
color: var(--text-muted-on-dark);
}
.confirm__value--next {
color: var(--accent);
}
.admin__stats {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0 var(--space-xl);
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
border-block-start: var(--hairline) solid var(--admin-rule);
}
.admin__stat {
padding: var(--space-l) var(--space-m) var(--space-l) 0;
border-block-end: var(--hairline) solid var(--admin-rule);
}
.admin__stat--warn {
border-block-end-color: var(--admin-rule-gold);
}
.admin__stat-figure {
display: block;
font-family: var(--font-display);
font-size: var(--fs-stat);
font-weight: var(--fw-figure);
letter-spacing: var(--tr-figure);
font-variant-numeric: tabular-nums;
line-height: 0.9;
color: var(--accent);
}
.admin__stat-caption {
display: block;
font-size: var(--fs-eyebrow);
font-weight: var(--fw-index);
letter-spacing: var(--tr-eyebrow);
text-transform: uppercase;
color: var(--text-muted-on-dark);
margin-block-start: var(--space-s);
}
@media (max-width: 639px) {
:root {
--gutter: var(--space-m);
--section-y: var(--space-2xl);
--grid-gap: var(--space-m);
--tr-eyebrow: 0.12em;
--masthead-h: 3.5rem;
--cards-columns: 1;
--reasons-columns: 1;
--stats-columns: 1;
--pair-columns: 1;
--ledger-columns: minmax(0, 1fr);
--serve-columns: 1;
--step-rail: var(--space-xl);
--hero-h: max(125vw, 32rem);
--hero-pad-inline: var(--space-s);
--hero-subhead-size: var(--fs-body);
--hero-copy-foot: var(--space-l);
--hero-scrim-ramp-from: 18%;
--hero-scrim-ramp-to: 30%;
--hero-headline-case: none;
--tr-hero: -0.025em;
}
.section__head {
grid-template-columns: minmax(0, 1fr);
}
.section__head::before {
grid-column: 1;
margin-block-end: var(--space-2xs);
}
.section__title,
.section__lede {
grid-column: 1;
}
.section__lede {
margin-block-start: var(--space-s);
}
.hero__base-inner {
justify-content: flex-start;
}
.footer {
padding-block: var(--space-2xl) var(--space-l);
}
.footer__lockup {
display: block;
}
.footer__tagline {
margin-block-start: var(--space-2xs);
}
.footer__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-l);
}
.page-head {
padding-block: var(--space-2xl);
}
.page-head__body {
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.matrix__cell {
padding: var(--space-m);
}
.structure__parent::after {
inset-inline-start: var(--space-s);
block-size: var(--space-xl);
}
.structure__children {
margin-block-start: var(--space-xl);
margin-inline-start: var(--space-s);
padding-inline-start: var(--space-m);
}
.structure__child::before {
inset-inline-start: calc(var(--space-m) * -1);
inline-size: var(--space-m);
}
.node {
display: flex;
padding: var(--space-s);
}
.node__body {
margin-block-start: var(--space-2xs);
}
.record {
padding: var(--space-s);
}
.process__steps {
gap: var(--space-l);
}
.step:not(:last-child)::after {
inset-block-end: calc(var(--space-l) * -1);
}
.motto__line {
padding-block-start: var(--space-l);
}
.ledger__entry {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2xs);
}
.ledger__index {
font-size: var(--fs-caption);
padding-block-start: 0;
}
.confirm {
grid-template-columns: minmax(0, 1fr);
}
.confirm__side + .confirm__side {
border-inline-start: 0;
border-block-start: var(--hairline) solid var(--admin-rule);
}
.admin__masthead {
position: static;
}
.consent__inner {
flex-direction: column;
align-items: stretch;
}
.consent__actions {
justify-content: flex-start;
}
}