/* GENERATED by tools/build.mjs — do not edit this file.
   Source (with full documentation): assets/css/layers/
   Regenerate: node tools/build.mjs */
@layer reset, tokens, base, layout, components, utilities, motion;

@layer reset {

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

html {

-webkit-text-size-adjust: none;
text-size-adjust: none;
tab-size: 2;
}

body,
h1, h2, h3, h4, h5, h6,
p,
figure,
figcaption,
blockquote,
dl,
dd,
ol,
ul,
fieldset,
legend,
hr,
pre {
margin: 0;
}

ol,
ul {
padding-inline-start: 0;
}

img,
picture,
video,
canvas,
svg {
display: block;
max-inline-size: 100%;
}

img,
video {
block-size: auto;
}

button,
input,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
letter-spacing: inherit;
}

button {
background: none;
border: 0;
padding: 0;
text-align: inherit;
}

button,
[type="button"],
[type="submit"],
[type="reset"] {
cursor: pointer;
}

textarea {
resize: block;
}

p,
li,
dt,
dd,
h1, h2, h3, h4, h5, h6,
blockquote,
figcaption,
caption,
td,
th {
overflow-wrap: break-word;
}

hr {
block-size: 0;
color: inherit;
border: 0;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

:focus-visible {
outline-style: solid;
}

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

@font-face {
font-family: "Fraunces";
src: url("/assets/fonts/fraunces-latin.woff2") format("woff2");
font-style: normal;
font-weight: 100 900;
font-display: swap;
}

@font-face {
font-family: "Fraunces";
src: url("/assets/fonts/fraunces-italic-latin.woff2") format("woff2");
font-style: italic;
font-weight: 100 900;
font-display: swap;
}

@font-face {
font-family: "Source Sans 3";
src: url("/assets/fonts/source-sans-3-latin.woff2") format("woff2");
font-style: normal;
font-weight: 200 900;
font-display: swap;
}

@font-face {
font-family: "Fraunces Fallback";
src: local("Georgia");
size-adjust: 116.29%;
ascent-override: 84.1%;
descent-override: 21.93%;
line-gap-override: 0%;
}

@font-face {
font-family: "Source Sans 3 Fallback";
src: local("Arial");
size-adjust: 89.88%;
ascent-override: 111.26%;
descent-override: 36.27%;
line-gap-override: 0%;
}

@layer tokens {
:root {

color-scheme: only light;

--brand-900: oklch(26.00% 0.0691 149.57);
--brand-700: oklch(40.00% 0.1059 149.57);
--brand-500: #009A44;
--brand-50:  oklch(97.50% 0.0383 149.57);

--neutral-0:   oklch(100% 0 0);
--neutral-950: oklch(15% 0.005 149.57);

--interim-cream: #F5F0E4;
--interim-gold:  #A87F2C;

--color-surface:         var(--neutral-0);
--color-surface-sunken:  var(--interim-cream);
--color-surface-deep:    var(--brand-900);

--color-text:            var(--neutral-950);
--color-text-muted:      color-mix(in oklch, var(--color-text) 65%, transparent);
--color-text-accent:     var(--brand-700);

--color-text-inverse:        var(--neutral-0);
--color-text-inverse-muted:  color-mix(in oklch, var(--neutral-0) 78%, var(--brand-900));

--color-logo-ink: var(--brand-500);

--accent-gold: var(--interim-gold);

--border-hairline-width:         1px;
--color-border-hairline:         color-mix(in oklch, var(--color-text) 12%, transparent);
--color-border-hairline-inverse: color-mix(in oklch, var(--interim-cream) 22%, transparent);

--color-link:        var(--color-text-accent);
--color-link-hover:  var(--brand-900);
--color-focus:       var(--brand-700);

--font-display: "Fraunces", "Fraunces Fallback", Georgia, "Iowan Old Style", serif;
--font-body:    "Source Sans 3", "Source Sans 3 Fallback", system-ui, "Segoe UI", Roboto, sans-serif;

--text-xs:      clamp(0.79rem, 0.77rem + 0.10vw, 0.84rem);
--text-sm:      clamp(0.89rem, 0.85rem + 0.18vw, 1.00rem);
--text-base:    clamp(1.00rem, 0.95rem + 0.25vw, 1.15rem);
--text-lead:    clamp(1.15rem, 1.05rem + 0.50vw, 1.45rem);
--text-h3:      clamp(1.30rem, 1.15rem + 0.75vw, 1.85rem);
--text-h2:      clamp(1.55rem, 1.25rem + 1.50vw, 2.60rem);
--text-h1:      clamp(1.95rem, 1.50rem + 2.25vw, 3.25rem);
--text-hero:    clamp(2.40rem, 1.35rem + 5.25vw, 5.25rem);

--text-eyebrow: clamp(0.70rem, 0.67rem + 0.14vw, 0.80rem);

--text-numeral: clamp(2.00rem, 1.20rem + 4.00vw, 4.00rem);

--leading-hero:    0.98;
--leading-disp: 1.14;
--leading-lede:    1.42;
--leading-body:    1.6;

--tracking-hero:    -0.02em;
--tracking-h2:      -0.01em;
--tracking-body:     0;
--tracking-eyebrow:  0.16em;

--measure-hero:      24ch;
--measure-statement: 26ch;
--measure-prose:     62ch;
--measure-ledger:    42ch;
--measure-teaser:    24ch;

--space-3xs: 0.25rem;  --space-2xs: 0.5rem;   --space-xs: 0.75rem;
--space-s:   1rem;     --space-m:   1.5rem;   --space-l:  2.5rem;
--space-xl:  4rem;     --space-2xl: 6rem;     --space-3xl: 9rem;
--space-section: clamp(var(--space-2xl), 10vw, var(--space-3xl));
--space-gutter:  clamp(var(--space-s), 4vw, var(--space-l));

--indent-list: 1.25em;

--width-content: 68rem;
--width-wide:    84rem;
--width-bleed:   calc((var(--width-wide) - var(--width-content)) / 2);

--logo-block-size:   3.5rem;
--header-block-size: calc(var(--logo-block-size) + (var(--space-xs) * 2));
--scroll-offset:     calc(var(--header-block-size) + var(--space-s));

--layer-base:    0;
--layer-sticky:  10;
--layer-skip:    30;

--radius-focus:      0.125rem;
--focus-ring-width:  2px;
--focus-ring-offset: 2px;

--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring:    linear(0, 0.42 12%, 0.9 25%, 1.05 38%, 1 50%, 1);

--dur-instant: 100ms;
--dur-fast:    180ms;
--dur-base:    280ms;
--dur-slow:    500ms;
--dur-reveal:  800ms;
}

@media (prefers-reduced-motion: reduce) {
:root {
--dur-instant: 1ms;
--dur-fast:    1ms;
--dur-base:    1ms;
--dur-slow:    1ms;
--dur-reveal:  1ms;
}
}
}

@layer base {

html {

scroll-padding-block-start: var(--scroll-offset);
}

@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}

body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-body);
letter-spacing: var(--tracking-body);
color: var(--color-text);
background-color: var(--color-surface);

font-synthesis: none;
text-rendering: optimizeLegibility;

hanging-punctuation: first;
}

h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 400;
line-height: var(--leading-disp);
text-wrap: balance;
}

h1 {
font-size: var(--text-h1);
letter-spacing: var(--tracking-hero);
line-height: var(--leading-hero);
}

h2 {
font-size: var(--text-h2);
letter-spacing: var(--tracking-h2);
}

h3 {
font-size: var(--text-h3);
}

h4 {
font-size: var(--text-lead);
}

h5, h6 {
font-family: var(--font-body);
font-size: var(--text-sm);
letter-spacing: var(--tracking-eyebrow);
line-height: var(--leading-body);
text-transform: uppercase;
}

p {

max-inline-size: var(--measure-prose);
text-wrap: pretty;
}

p + p,
p + ul,
p + ol,
p + blockquote {
margin-block-start: var(--space-m);
}

strong, b {
font-weight: 600;
}

em, i {
font-style: italic;
}

small {
font-size: var(--text-sm);
}

a {
color: var(--color-link);
text-decoration-line: underline;
text-decoration-thickness: from-font;
text-underline-offset: 0.18em;
text-decoration-skip-ink: auto;
transition: color var(--dur-fast) var(--ease-out-quart),
text-decoration-color var(--dur-fast) var(--ease-out-quart);
}

a:hover {
color: var(--color-link-hover);
text-decoration-thickness: 2px;
}

:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus);
outline-offset: var(--focus-ring-offset);
border-radius: var(--radius-focus);
}

:where(a, area, button, input, select, textarea, summary, iframe, [tabindex], [id]) {
scroll-margin-block-start: var(--scroll-offset);
}

ul, ol {
padding-inline-start: var(--indent-list);
}

li + li {
margin-block-start: var(--space-2xs);
}

::marker {
color: var(--color-text-muted);
}

dt {
font-family: var(--font-display);
}

dd {
margin-inline-start: 0;
}

blockquote {
font-family: var(--font-display);
font-size: var(--text-lead);
line-height: var(--leading-lede);
max-inline-size: var(--measure-statement);
}

cite {
font-family: var(--font-body);
font-size: var(--text-sm);
font-style: normal;
color: var(--color-text-muted);
}

figcaption {
font-size: var(--text-sm);
line-height: var(--leading-body);
color: var(--color-text-muted);
text-wrap: pretty;
}

hr {
border-block-start: var(--border-hairline-width) solid var(--color-border-hairline);
}

address {
font-style: normal;
}

time {
font-variant-numeric: oldstyle-nums proportional-nums;
}

abbr[title] {
text-decoration: underline dotted;
text-underline-offset: 0.2em;
cursor: help;
}

table {
inline-size: 100%;
font-variant-numeric: tabular-nums lining-nums;
text-align: start;
}

caption {
font-size: var(--text-sm);
color: var(--color-text-muted);
text-align: start;
padding-block-end: var(--space-2xs);
}

th, td {
padding-block: var(--space-2xs);
padding-inline: 0 var(--space-m);
border-block-end: var(--border-hairline-width) solid var(--color-border-hairline);
text-align: start;
vertical-align: baseline;
}

th {
font-family: var(--font-body);
font-size: var(--text-eyebrow);
font-weight: 600;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}

input, select, textarea {
inline-size: 100%;
max-inline-size: var(--measure-prose);
padding-block: var(--space-2xs);
padding-inline: var(--space-xs);
color: var(--color-text);
background-color: var(--color-surface);
border: var(--border-hairline-width) solid var(--color-border-hairline);
border-radius: 0;
}

label {
display: block;
font-size: var(--text-sm);
}

:user-invalid {
border-color: var(--color-text);
}

fieldset {
padding: 0;
border: 0;
min-inline-size: 0;
}

legend {
padding: 0;
}

summary {
cursor: pointer;
}

::selection {
color: var(--color-text-inverse);
background-color: var(--color-text-accent);
}

@media (forced-colors: active) {
hr,
th, td {
border-color: CanvasText;
border-block-start-width: var(--border-hairline-width);
}

input, select, textarea {
border: var(--border-hairline-width) solid CanvasText;
}

:focus-visible {
outline: var(--focus-ring-width) solid CanvasText;
outline-offset: var(--focus-ring-offset);
}

a {

text-decoration-line: underline;
}
}

@media print {
body {
font-size: 11pt;
line-height: 1.4;
color: #000;
background: none;
}

h1, h2, h3, h4 {
break-after: avoid-page;
}

p, blockquote, figure, table, li {
break-inside: avoid-page;
orphans: 3;
widows: 3;
}

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

a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.85em;
word-break: break-all;
}
}
}

@layer layout {

body {
display: grid;
grid-template-rows: auto 1fr auto;
min-block-size: 100svh;

overflow-x: clip;
}

main {
display: flex;
flex-direction: column;
background-color: var(--color-surface-deep);
}

main > :last-child {
flex-grow: 1;
}

main > .hero:last-child {
flex-grow: 0;
}

.skip-link {
position: fixed;
inset-block-start: var(--space-2xs);
inset-inline-start: var(--space-2xs);
z-index: var(--layer-skip);
padding-block: var(--space-2xs);
padding-inline: var(--space-xs);
color: var(--color-link);
background-color: var(--color-surface);
border: var(--border-hairline-width) solid var(--color-border-hairline);
transform: translateY(-250%);
transition: transform var(--dur-fast) var(--ease-out-expo);
}

.skip-link:focus-visible {
transform: none;
}

.site-header {
position: sticky;
inset-block-start: 0;
z-index: var(--layer-sticky);
min-block-size: var(--header-block-size);
align-items: center;
}

.section {
display: grid;
grid-template-columns:
[full-start] minmax(var(--space-gutter), 1fr)
[wide-start] minmax(0, var(--width-bleed))
[content-start] min(100% - (var(--space-gutter) * 2), var(--width-content)) [content-end]
minmax(0, var(--width-bleed)) [wide-end]
minmax(var(--space-gutter), 1fr) [full-end];
}

:where(.section) > * {
grid-column: content;
}

.section {
--section-lead: var(--space-section);
--section-tail: var(--space-xl);

padding-block: var(--section-lead) var(--section-tail);

container: section / inline-size;
}

.rhythm-bleed {
--section-lead: 0;
--section-tail: var(--space-xl);

min-block-size: min(88svh, 52rem);

align-content: end;
}

.rhythm-shelf    { --section-lead: var(--space-l);   --section-tail: var(--space-xl); }
.rhythm-breath   { --section-lead: var(--space-3xl); --section-tail: var(--space-2xl); }
.rhythm-read     { --section-lead: var(--space-xl);  --section-tail: var(--space-2xl); }
.rhythm-register { --section-lead: var(--space-2xl); --section-tail: var(--space-3xl); }
.rhythm-step     { --section-lead: var(--space-2xl); --section-tail: var(--space-xl); }
.rhythm-stop     { --section-lead: var(--space-2xl); --section-tail: var(--space-2xl); }

.surface-paper {
color: var(--color-text);
background-color: var(--color-surface);
}

.surface-sunken {
color: var(--color-text);
background-color: var(--color-surface-sunken);
}

.surface-deep {

--color-text:            var(--color-text-inverse);
--color-text-muted:      var(--color-text-inverse-muted);
--color-border-hairline: var(--color-border-hairline-inverse);
--color-link:            var(--color-text-inverse);
--color-link-hover:      var(--color-text-inverse);
--color-focus:           var(--color-text-inverse);

color: var(--color-text);
background-color: var(--color-surface-deep);
}

.surface-deep ::selection {
color: var(--color-surface-deep);
background-color: var(--color-text-inverse);
}

.section + .section,
main + .site-footer {
margin-block-start: -1px;
}

@media (forced-colors: active) {

.surface-sunken,
.surface-deep {
border-block: var(--border-hairline-width) solid CanvasText;
}

.site-header {
border-block-end: var(--border-hairline-width) solid CanvasText;
background-color: Canvas;
}

.skip-link {
border-color: CanvasText;
background-color: Canvas;
}
}

@media print {
.skip-link,
.site-header,
.site-footer {
display: none;
}

.section {
display: block;
}

.section {
padding-block: var(--space-s);
container-type: normal;
}

.rhythm-bleed {
min-block-size: 0;
}

.surface-paper,
.surface-sunken,
.surface-deep {
--color-text: #000;
--color-border-hairline: #000;

color: #000;
background: none;
}
}
}

@layer components {

.site-header {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-m);
padding-block: var(--space-xs);
padding-inline: var(--space-gutter);
background-color: var(--color-surface);
border-block-end: var(--border-hairline-width) solid var(--color-border-hairline);
}

.site-logo {
display: inline-flex;
}

.site-logo-mark {
display: block;
block-size: var(--logo-block-size);
inline-size: auto;
}

.site-nav {
justify-self: end;

min-inline-size: 0;
}

.nav-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
min-block-size: var(--space-l);
padding-inline: var(--space-2xs);
color: var(--color-text);

font-family: var(--font-display);
font-weight: 350;
font-size: calc(var(--text-base) * 1.08);
list-style-type: "";
}

.nav-toggle::-webkit-details-marker {
display: none;
}

.nav-toggle::before {
content: "";
inline-size: 1rem;
block-size: 0.7rem;
border-block: 2px solid currentcolor;
background-image: linear-gradient(currentcolor, currentcolor);
background-size: 100% 2px;
background-position: center;
background-repeat: no-repeat;
}

.nav-disclosure[open] > .nav-toggle::after {
rotate: 225deg;
translate: 0 25%;
}

.nav-list {
position: absolute;
inset-inline: 0;
inset-block-start: 100%;
display: flex;
flex-direction: column;
gap: var(--space-3xs);
padding-block: var(--space-s);
padding-inline: var(--space-gutter);
max-block-size: calc(100dvh - var(--header-block-size));
overflow-y: auto;
overscroll-behavior: contain;
background-color: var(--color-surface);
border-block-end: var(--border-hairline-width) solid var(--color-border-hairline);
list-style-type: "";
}

.nav-link {
position: relative;
display: inline-block;
padding-block: var(--space-2xs);
min-block-size: var(--space-m);
color: var(--color-text);
font-family: var(--font-display);

font-weight: 350;
font-size: calc(var(--text-base) * 1.08);
text-decoration: none;
}

.nav-link::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: 0;
block-size: 2px;
background-color: var(--color-text-accent);
scale: 0 1;
transform-origin: 0 50%;
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after {
scale: 1 1;
}

.nav-link[aria-current="page"] {
font-weight: 600;
}

@media (width >= 72rem) {

@supports selector(::details-content) {
.nav-toggle {
display: none;
}

.nav-disclosure::details-content {
content-visibility: visible;
block-size: auto;
overflow: visible;
}

.nav-list {
position: static;
flex-direction: row;

flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: var(--space-m);
padding: 0;
max-block-size: none;
overflow: visible;
background-color: transparent;
border-block-end: 0;
}
}
}

.site-footer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
gap: var(--space-l) var(--space-xl);
padding-block: var(--space-2xl) var(--space-l);
padding-inline: var(--space-gutter);
font-family: var(--font-body);
}

.site-footer::before {
content: "";
grid-column: 1 / -1;
border-block-start: var(--border-hairline-width) solid var(--color-border-hairline);
}

.footer-heading {
margin-block: 0 var(--space-xs);
color: var(--color-text-muted);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.footer-list {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
padding-inline-start: 0;
list-style-type: "";
}

.nav-list > li + li,
.footer-list > li + li {
margin-block-start: 0;
}

.footer-link {
display: inline-block;
min-block-size: var(--space-m);
color: var(--color-link);
font-size: var(--text-sm);
text-decoration-line: underline;
text-decoration-color: transparent;
text-underline-offset: 0.25em;
}

.footer-link:hover,
.footer-link:focus-visible {
text-decoration-color: currentcolor;
}

.footer-baseline {
grid-column: 1 / -1;

max-inline-size: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-2xs) var(--space-l);
margin-block: 0;
padding-block-start: var(--space-m);
border-block-start: var(--border-hairline-width) solid var(--color-border-hairline);
color: var(--color-text-muted);
font-size: var(--text-xs);
}

@media (width >= 64rem) {
.site-footer {

grid-template-columns: 1.25fr 1fr 1fr 1.3fr;
}
}

@media (forced-colors: active) {
.nav-list {
border: var(--border-hairline-width) solid CanvasText;
background-color: Canvas;
}

.nav-link::after {
display: none;
}

.nav-link[aria-current="page"] {
border-block-end: 2px solid CanvasText;
}

.site-footer::before,
.footer-baseline {
border-block-start-color: CanvasText;
}

.footer-link {
text-decoration-color: currentcolor;
}
}
}

@layer motion {
@media (prefers-reduced-motion: no-preference) {

.nav-link::after {
transition: scale var(--dur-fast) var(--ease-out-quart);
}

.nav-toggle::after {
transition: rotate var(--dur-fast) var(--ease-in-out),
translate var(--dur-fast) var(--ease-in-out);
}

.footer-link {
transition: text-decoration-color var(--dur-fast) var(--ease-in-out);
}

@media (width < 72rem) {
.nav-disclosure[open] > .nav-list {
animation: nav-panel-in var(--dur-fast) var(--ease-out-expo) both;
}
}

@keyframes nav-panel-in {
from {
opacity: 0;
translate: 0 calc(var(--space-2xs) * -1);
}
}
}
}

@layer components {

.page-eyebrow {
margin-block-end: var(--space-s);
font-family: var(--font-body);
font-size: var(--text-eyebrow);
line-height: var(--leading-body);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-text-muted);
}

.page-hero {
padding-block-start: var(--space-2xl);
}

.page-hero-title {
max-inline-size: var(--measure-hero);
font-size: var(--text-h1);
}

.page-hero-body {
margin-block-start: var(--space-m);
max-inline-size: var(--measure-prose);
font-size: var(--text-lead);
line-height: var(--leading-lede);
}

.page-hero-cta {
margin-block-start: var(--space-l);
}

.arrow-link {
display: inline-block;
font-family: var(--font-body);
font-size: var(--text-base);
text-decoration-line: underline;
text-decoration-color: color-mix(in oklch, currentcolor 40%, transparent);
text-underline-offset: 0.25em;
}

.arrow-link:hover,
.arrow-link:focus-visible {
text-decoration-color: currentcolor;
}

.pillar-tabs {
display: flex;
flex-wrap: wrap;
column-gap: var(--space-l);
row-gap: var(--space-2xs);
margin-block: var(--space-l) 0;
}

.pillar-tab {
position: relative;
min-block-size: var(--space-m);
font-family: var(--font-body);
font-size: var(--text-sm);
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration-line: none;
color: var(--color-text);
}

.pillar-tab::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: calc(var(--space-2xs) * -1);
block-size: 2px;
background-color: var(--color-text-accent);
scale: 0 1;
transform-origin: 0 50%;
}

.pillar-tab:hover::after,
.pillar-tab:focus-visible::after,
.pillar-tab[aria-current="page"]::after {
scale: 1 1;
}

.pillar-tab[aria-current="page"] {
font-weight: 600;
}

@media (forced-colors: active) {
.pillar-tab::after {
display: none;
}

.pillar-tab[aria-current="page"] {
border-block-end: 2px solid CanvasText;
}
}

@media (width < 48rem) {
.pillar-tabs {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}

.pillar-tabs::-webkit-scrollbar {
display: none;
}

.pillar-tab {
flex: none;
white-space: nowrap;
}
}
}

@layer motion {
@media (prefers-reduced-motion: no-preference) {
.pillar-tab::after {
transition: scale var(--dur-fast) var(--ease-out-quart);
}
}
}

@layer components {

.hero {

position: relative;
grid-template-rows: 1fr auto;
padding-block-end: 0;
}

.hero-field {
position: absolute;
inset: 0;
grid-column: full;
grid-row: 1 / -1;

overflow: clip;
}

.hero-slide {
position: absolute;
inset: 0;
}

.hero-slide:not([data-current]) {
opacity: 0;
visibility: hidden;
}

.hero-image {
inline-size: 100%;
block-size: 100%;

object-fit: cover;

object-position: center var(--focus-y, 50%);
}

.hero {
--scrim-y: 40%;
}

.home-hero {
--focus-y: 64%;

--scrim-k: 0.8;
}

.hero-field::after {
content: "";
position: absolute;
inset: 0;
mix-blend-mode: multiply;

background-image: linear-gradient(
to bottom,
#00000029 0%,
#00000014 calc(var(--scrim-y) - 12%),
calc(var(--scrim-y) + 3%),
color-mix(in oklch, var(--color-surface-deep) calc(85% * var(--scrim-k, 1)), transparent) calc(var(--scrim-y) + 8%),
color-mix(in oklch, var(--color-surface-deep) calc(90% * var(--scrim-k, 1)), transparent) calc(var(--scrim-y) + 26%)
);
}

.hero-lines {
position: relative;
grid-column: full;
grid-row: 2;
padding-inline: var(--space-gutter);
padding-block-end: var(--section-tail);

background-image: linear-gradient(to top, var(--color-surface-deep), transparent 5rem);
}

.hero-eyebrow {
margin-block-end: var(--space-m);
max-inline-size: var(--measure-hero);
font-family: var(--font-body);
font-size: var(--text-eyebrow);
line-height: var(--leading-body);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}

.hero-title {
max-inline-size: var(--measure-hero);
font-size: var(--text-hero);
}

.hero-title::after {
content: "";
display: block;
inline-size: min(100%, var(--measure-hero));
block-size: 2px;
margin-block-start: var(--space-l);
background-color: var(--accent-gold);
}

.hero-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--space-l);
row-gap: var(--space-2xs);
margin-block-start: var(--space-m);
}

.hero-strapline {
margin-block-start: var(--space-m);
max-inline-size: var(--measure-prose);
font-size: var(--text-lead);
line-height: var(--leading-lede);
}

.hero-foot .hero-strapline {
margin-block-start: 0;
}

.hero-pager {
display: none;
}

:root.has-hero-show .hero-pager {
display: flex;
align-items: center;

margin-inline-start: auto;
}

.hero-next {
display: inline-grid;
place-items: center;
min-inline-size: var(--space-m);
min-block-size: var(--space-m);
color: var(--color-text);
font-size: var(--text-h3);
}

@media (forced-colors: active) {
.hero-title::after {
block-size: 0;
border-block-start: 2px solid CanvasText;
background-color: transparent;
}

}

@media print {
.hero-field {
display: none;
}

.hero-lines {
padding-inline: 0;
padding-block-end: 0;
}

.hero-title::after {
display: none;
}

.hero-pager {
display: none;
}
}
}

@layer motion {
@media (prefers-reduced-motion: no-preference) {

@supports (scale: 1) {
.hero-title::after {

transform-origin: 0 50%;
animation: hero-rule-sweep var(--dur-reveal) var(--ease-out-expo) both;
}

:root.has-hero-show .hero:not(.hero-resting)[data-tick="a"] .hero-title::after {
animation: hero-rule-dwell-a 7s linear both;
}

:root.has-hero-show .hero:not(.hero-resting)[data-tick="b"] .hero-title::after {
animation: hero-rule-dwell-b 7s linear both;
}
}
}

@keyframes hero-rule-sweep {
from {
scale: 0 1;
}
}

@keyframes hero-rule-dwell-a {
from {
scale: 0 1;
}
}

@keyframes hero-rule-dwell-b {
from {
scale: 0 1;
}
}
}

@layer motion {
@media (prefers-reduced-motion: no-preference) {

.hero-image {
animation-name: hero-drift;
animation-duration: 26s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}

@keyframes hero-drift {
from {
scale: 1.04;
translate: 1% 0.7%;
}

to {
scale: 1.14;
translate: -1.4% -1%;
}
}
}
}

@layer motion {
@media (prefers-reduced-motion: no-preference) {
.hero-slide {
transition: opacity 0.8s var(--ease-in-out), visibility 0.8s;
}

.hero-slide:not([data-current]) .hero-image {
animation-play-state: paused;
}

.hero-next {
transition: translate var(--dur-fast) var(--ease-out-quart);
}

.hero-next:hover,
.hero-next:focus-visible {
translate: 0.2em 0;
}
}
}

@layer components {

.timeline {

--timeline-dot: var(--space-2xs);

--timeline-node-min: 9rem;
}

.timeline-title {
grid-column: full;
margin-block-end: var(--space-l);
padding-inline: var(--space-gutter);
font-family: var(--font-body);
font-size: var(--text-eyebrow);
line-height: var(--leading-body);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}

.timeline-track {
grid-column: full;
display: grid;

grid-template-columns: repeat(7, minmax(max-content, 1fr));
column-gap: var(--space-l);
padding-inline: var(--space-gutter);
list-style-type: "";

overflow-x: auto;

overflow-y: clip;

scrollbar-width: none;
overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory;
scroll-padding-inline: var(--space-gutter);
}

.timeline-track > li + li {
margin-block-start: 0;
}

.timeline-track::before {
content: "";
grid-row: 1;
grid-column: 1 / 6;
align-self: start;
block-size: var(--border-hairline-width);
margin-block-start: calc((var(--timeline-dot) - var(--border-hairline-width)) / 2);

margin-inline-end: calc(var(--space-l) * -1);
background-color: var(--color-border-hairline);
}

.timeline-track::after {
content: "";
grid-row: 1;
grid-column: 6 / -1;
align-self: start;
block-size: var(--border-hairline-width);
margin-block-start: calc((var(--timeline-dot) - var(--border-hairline-width)) / 2);
background-image: repeating-linear-gradient(
to right,
var(--color-border-hairline) 0 6px,
transparent 6px 14px
);
mask-image: linear-gradient(to right, #000 0 62%, transparent 100%);
}

.timeline {
position: relative;
}

@media (width < 48rem) {
.timeline {
--section-lead: var(--space-m);
--section-tail: var(--space-l);
}
}

@media (width <= 64rem) {
.timeline::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline-end: 0;
inline-size: var(--space-2xl);
background-image: linear-gradient(to right, transparent, var(--color-surface-sunken));
pointer-events: none;
}
}

.timeline-node:nth-child(1) { grid-column: 1; --n: 0; }
.timeline-node:nth-child(2) { grid-column: 2; --n: 1; }
.timeline-node:nth-child(3) { grid-column: 3; --n: 2; }
.timeline-node:nth-child(4) { grid-column: 4; --n: 3; }
.timeline-node:nth-child(5) { grid-column: 5; --n: 4; }
.timeline-node:nth-child(6) { grid-column: 6; --n: 5; }
.timeline-node:nth-child(7) { grid-column: 7; --n: 6; }

.timeline-node {
grid-row: 1;

min-inline-size: 0;

padding-inline-end: var(--space-m);
scroll-snap-align: start;
}

.timeline-node::before {
content: "";
display: block;
inline-size: var(--timeline-dot);
block-size: var(--timeline-dot);
margin-block-end: var(--space-s);
background-color: var(--color-text-accent);
clip-path: circle(50%);
}

.timeline-node:last-child::before {
background-color: transparent;
background-image: radial-gradient(
circle closest-side,
transparent 0 46%,
var(--color-text-accent) 50%
);
}

.timeline-term {
font-family: var(--font-display);
font-size: var(--text-h2);
line-height: var(--leading-disp);
letter-spacing: var(--tracking-h2);
font-variant-numeric: oldstyle-nums proportional-nums;
}

.timeline-link {
color: inherit;
text-decoration-line: none;
}

.timeline-link .timeline-label {
text-decoration-line: underline;
text-decoration-color: color-mix(in oklch, currentcolor 40%, transparent);
text-underline-offset: .25em;
}

.timeline-link:hover .timeline-label,
.timeline-link:focus-visible .timeline-label {
text-decoration-color: currentcolor;
}

.timeline-dash {
color: var(--color-text-muted);
}

.timeline-decade {
display: block;
color: var(--color-text-muted);
font-size: var(--text-sm);
line-height: var(--leading-body);
font-variant-numeric: oldstyle-nums proportional-nums;
}

.timeline-label {
display: block;
font-size: var(--text-sm);
line-height: var(--leading-body);

overflow-wrap: normal;
}

.timeline-term ~ .timeline-label {
margin-block-start: var(--space-3xs);
}

.timeline-node:last-child {
font-size: var(--text-sm);
line-height: var(--leading-body);
}

.timeline-future {
color: var(--color-text-accent);
white-space: nowrap;
}

.timeline-node:last-child {
padding-inline-end: 0;
}

.timeline-node:last-child .timeline-label {
text-wrap: nowrap;
}

@container section (inline-size > 64rem) {
.timeline-track {

grid-template-columns: minmax(max-content, 1.15fr) minmax(max-content, 0.72fr) minmax(max-content, 0.72fr) minmax(max-content, 0.72fr) minmax(max-content, 0.72fr) minmax(max-content, 1.42fr) minmax(max-content, 1.55fr);
overflow: visible;
scroll-snap-type: none;
}

}

@media (forced-colors: active) {
.timeline-track::before {
background-color: CanvasText;
}

.timeline-track::after {
block-size: 0;
background-image: none;
border-block-start: var(--border-hairline-width) dotted CanvasText;
mask-image: none;
}

.timeline-node::before {
background-color: CanvasText;
background-image: none;
}

.timeline-node:last-child::before {
background-color: Canvas;
border: 2px solid CanvasText;
}
}

@media print {
.timeline-title {
padding-inline: 0;
}

.timeline-track {
display: block;
overflow: visible;
padding-inline: 0;
}

.timeline-track::before,
.timeline-node::before {
display: none;
}

.timeline-node {
padding-inline-end: 0;
}

.timeline-node + .timeline-node {
margin-block-start: var(--space-2xs);
}
}
}

@layer motion {
@media (prefers-reduced-motion: no-preference) {

.is-inview .timeline-track::before {
transform-origin: 0 50%;
animation: timeline-draw var(--dur-reveal) var(--ease-out-expo) both;
}

.is-inview .timeline-node {
animation: timeline-node-arrive var(--dur-slow) var(--ease-out-quart) both;
animation-delay: calc(var(--dur-base) + (var(--n) * 90ms));
}

.timeline-node:last-child::before {
animation: timeline-pulse 2.8s var(--ease-in-out) infinite alternate;
}

}

@keyframes timeline-draw {
from {
scale: 0 1;
}
}

@keyframes timeline-node-arrive {
from {
opacity: 0;
translate: 0 var(--space-2xs);
}
}

@keyframes timeline-pulse {
to {
scale: 1.3;
}
}
}

@layer components {

.throughline {

row-gap: var(--space-m);
}

@media (width < 48rem) {
.throughline {
--section-lead: var(--space-xl);
}
}

.throughline-statement {
max-inline-size: var(--measure-statement);
}

.throughline-emphasis {
color: var(--color-text-accent);
}

.throughline-cta {
margin-block: 0;
}

.throughline-link {
font-size: var(--text-lead);
text-underline-offset: 0.3em;
}

.throughline-portrait {
inline-size: min(11rem, 55%);
}

.throughline-portrait-image {
display: block;
inline-size: 100%;
block-size: auto;
border: var(--border-hairline-width) solid var(--color-border-hairline);
}

@container section (inline-size >= 50rem) {

.throughline-statement {
grid-row: 1;
}

.throughline-cta {
grid-row: 2;
}

.throughline-portrait {
grid-row: 1 / 3;
justify-self: end;
align-self: center;
inline-size: 13rem;
}

}
}

@layer components {

.intro-columns {
display: grid;
}

.intro-heading {
margin-block-end: var(--space-m);
}

.intro-thesis {
margin-block-start: var(--space-l);
max-inline-size: var(--measure-ledger);
font-family: var(--font-display);
font-size: var(--text-lead);
line-height: var(--leading-lede);
}

.intro-attribution {

--intro-portrait-size: calc(var(--space-l) + var(--space-s));

display: grid;
grid-template-columns: auto 1fr;
column-gap: var(--space-s);
margin-block-start: var(--space-m);
}

.intro-portrait {
grid-row: 1 / 3;
align-self: center;
inline-size: var(--intro-portrait-size);
}

.intro-portrait-image {
clip-path: circle(50%);
}

.intro-attribution-name {
align-self: end;
font-size: var(--text-base);
color: var(--color-text);
}

.intro-attribution-role {
align-self: start;
margin-block-start: 0;
font-size: var(--text-eyebrow);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}

@container section (inline-size >= 50rem) {
.intro-columns {
grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
column-gap: var(--space-xl);
}

.intro-heading {
grid-column: 1;
grid-row: 1;
align-self: start;
margin-block-end: 0;
}

.intro-columns > p {
grid-column: 2;
}

.intro-figure {
grid-column: 2;
}

.intro-columns > p:first-of-type {
margin-block-start: var(--space-s);
}
}

@media (forced-colors: active) {
.intro {
border-block-start-color: CanvasText;
}
}
}

@layer components {

.pillars-lede {
max-inline-size: var(--measure-ledger);
margin-block-end: var(--space-l);
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lede);
letter-spacing: var(--tracking-body);
}

.pillars-ledger {
padding-inline-start: 0;
list-style-type: "";
}

.pillars-entry {

position: relative;
z-index: 0;
margin-block-start: 0;
padding-block: var(--space-l);

}

.pillars-name {
position: relative;
}

.pillars-number {
display: block;
color: var(--accent-gold);
font-size: var(--text-numeral);
line-height: var(--leading-hero);
letter-spacing: var(--tracking-hero);
font-variant-numeric: oldstyle-nums proportional-nums;
white-space: nowrap;
}

.pillars-entry .pillars-number {
position: absolute;
inset-block-start: var(--space-s);
inset-inline-end: 0;
z-index: -1;
font-size: calc(var(--text-numeral) * 3);
opacity: 0.22;
}

.pillars-sector {
margin-block-start: var(--space-2xs);
font-size: var(--text-eyebrow);
line-height: var(--leading-body);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}

.pillars-body {
max-inline-size: var(--measure-ledger);
margin-block-start: var(--space-xs);
}

.pillars-plate {
max-inline-size: var(--measure-ledger);
margin-block-start: var(--space-m);
border: var(--border-hairline-width) solid var(--color-border-hairline);
}

.pillars-image {
inline-size: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}

@container section (inline-size >= 64rem) {
.pillars-ledger {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-2xl);
}
}

@media (forced-colors: active) {
.pillars-ledger,
.pillars-entry,
.pillars-plate {
border-color: CanvasText;
}
}
}

@layer components {

.teasers-shelf {
display: grid;
row-gap: var(--space-xl);
padding-inline-start: 0;
list-style-type: "";
}

.teasers-entry {

position: relative;
margin-block-start: 0;
}

.teasers-plate {
border: var(--border-hairline-width) solid var(--color-border-hairline);
transition: border-color var(--dur-fast) var(--ease-out-quart);
}

.teasers-image {
inline-size: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}

.teasers-term {
max-inline-size: var(--measure-teaser);
margin-block-start: var(--space-s);
padding-block-start: var(--space-s);
border-block-start: var(--border-hairline-width) solid var(--color-border-hairline);
font-size: var(--text-eyebrow);
line-height: var(--leading-body);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}

.teasers-dash {
color: var(--color-text-muted);
}

.teasers-line {

max-inline-size: var(--measure-teaser);
margin-block-start: var(--space-2xs);
font-size: var(--text-lead);
line-height: var(--leading-lede);
}

.teasers-line a::after {
content: "";
position: absolute;
inset: 0;
}

.teasers-entry:hover .teasers-plate,
.teasers-entry:has(a:focus-visible) .teasers-plate {
border-color: var(--color-text);
}

@container section (inline-size >= 52rem) {
.teasers-shelf {

grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr);
grid-template-rows: auto auto auto auto;
column-gap: var(--space-l);
row-gap: 0;
}

.teasers-entry {
display: grid;
grid-row: 1 / span 4;
grid-template-rows: subgrid;
}

.teasers-entry:nth-child(1) { grid-column: 1; }
.teasers-entry:nth-child(2) { grid-column: 2; }
.teasers-entry:nth-child(3) { grid-column: 3; }

.teasers-plate {
grid-row: 1;
align-self: end;
}

.teasers-term {
grid-row: 3;
margin-block-start: 0;
border-block-start: 0;
}

.teasers-line {
grid-row: 4;
}

.teasers-shelf::after {
content: "";
grid-row: 2;
grid-column: 1 / -1;
border-block-start: var(--border-hairline-width) solid var(--color-border-hairline);
}
}

@container section (inline-size >= 89rem) {
.teasers-shelf::after {
margin-inline-end: calc(-1 * var(--width-bleed));
}
}

@media (forced-colors: active) {
.teasers-plate {
border-color: CanvasText;
}

.teasers-term,
.teasers-shelf::after {
border-block-start-color: CanvasText;
}
}

@media print {
.teasers-entry {
break-inside: avoid-page;
}
}
}

@layer components {

.footprint-plate {
display: grid;
grid-column: wide;
grid-template-rows: auto auto auto;
padding: var(--space-m);

overflow: clip;
}

.footprint-map {
grid-row: 1;
}

.footprint-image {
inline-size: 100%;
}

.footprint-lines {
grid-row: 2;
max-inline-size: var(--measure-statement);
margin-block-start: var(--space-m);

position: relative;
}

.footprint-eyebrow {
margin-block-end: var(--space-xs);
font-size: var(--text-eyebrow);
line-height: var(--leading-body);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}

.footprint-legend {
grid-row: 3;
position: relative;
padding-block-start: var(--space-m);
color: var(--color-text);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}

.footprint-legend::before {
content: "";
display: block;
inline-size: var(--space-l);
block-size: var(--border-hairline-width);
margin-block-end: var(--space-2xs);
background-color: var(--accent-gold);
}

@container section (inline-size >= 52rem) {
.footprint-plate {
grid-template-rows: auto auto;
padding: var(--space-l);
}

.footprint-map,
.footprint-lines {
grid-row: 1;
grid-column: 1;
}

.footprint-lines {
justify-self: start;
align-self: start;
margin-block-start: 12%;
margin-inline-start: 28%;
}

.footprint-legend {
grid-row: 2;
}
}

@media (forced-colors: active) {
.footprint-plate {
border: var(--border-hairline-width) solid CanvasText;
}

.footprint-legend::before {
border-block-start: var(--border-hairline-width) solid CanvasText;
}
}

@media print {
.footprint-plate {
break-inside: avoid-page;
}
}
}

@layer motion {
@media (prefers-reduced-motion: no-preference) {
.footprint-map {
scale: 1.06;
animation-name: footprint-drift;
animation-duration: 64s;
animation-timing-function: var(--ease-in-out);
animation-iteration-count: infinite;
animation-direction: alternate;
}

@keyframes footprint-drift {
from {
translate: -2.4% 0;
}

to {
translate: 2.4% 0;
}
}
}
}

@layer components {

.story-hero {
position: relative;
}

.story-narrative {
--section-lead: var(--space-xl);
}

.story-portrait {
grid-column: full;
justify-self: end;
margin-block-end: var(--space-l);
inline-size: min(90%, 32rem);
}

@media (width < 60rem) {
.story-hero {
padding-block-start: 0;
}
}

.story-portrait-image {
display: block;
inline-size: 100%;
block-size: auto;
mask-image:
linear-gradient(to left, #000 70%, #0000008c 85%, transparent 99%),
linear-gradient(to bottom, #000 70%, #0000008c 85%, transparent 99%);
mask-composite: intersect;
}

.story-portrait-caption {
margin-block-start: var(--space-2xs);
padding-inline-end: var(--space-s);
text-align: end;
color: var(--color-text);
font-size: var(--text-eyebrow);
line-height: var(--leading-body);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}

@container section (inline-size > 64rem) {

.story-hero > .page-eyebrow,
.story-hero > .page-hero-title {
margin-inline-end: 50%;
}

.story-portrait {
position: absolute;

grid-column: full;
inset-block-start: 0;
inset-inline-end: 0;
margin: 0;

inline-size: min(50%, 46rem);
max-inline-size: none;
}
}

.story-statement {
max-inline-size: var(--measure-statement);
font-size: var(--text-lead);
line-height: var(--leading-lede);
}

.spine {

--sp-dot: 0.875rem;

--sp-th: 2px;

--sp-ch: var(--space-3xl);

--sp-top: calc(var(--text-h3) * var(--leading-disp) / 2);
--sp-in: var(--space-l);

position: relative;
margin-block-start: var(--space-3xl);
padding-inline-start: var(--sp-in);
list-style-type: "";
}

.spine::before {
content: "";
position: absolute;

inset-block-start: var(--sp-top);
inset-block-end: 0;
inset-inline-start: calc((var(--sp-dot) - var(--sp-th)) / 2);
inline-size: var(--sp-th);
background-color: var(--accent-gold);
mask-image: linear-gradient(to bottom, #000 0 calc(100% - var(--space-2xl)), transparent 100%);
}

.spine-era + .spine-era {
margin-block-start: var(--space-2xl);
}

.spine-rail {
position: absolute;
inset-block-start: calc(var(--sp-top) - var(--sp-dot));
inset-block-end: 0;
inset-inline-start: 0;
margin: 0;
inline-size: var(--sp-dot);
pointer-events: none;
}

.spine-brand {
margin-block-start: var(--space-m);
}

@container section (inline-size <= 64rem) {
.spine-era-branded {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--space-m);
align-items: start;
}

.spine-era-branded > .spine-entry {
display: contents;
}

.spine-era-branded .spine-label {
grid-column: 1;
grid-row: 1;
}

.spine-era-branded .spine-heading {
grid-column: 1;
grid-row: 2;
min-inline-size: 0;
}

.spine-era-branded > .spine-brand {
grid-column: 2;
grid-row: 1 / span 2;
align-self: start;
margin-block-start: 0;
}

.spine-era-branded .spine-body {
grid-column: 1 / -1;
grid-row: 3;
max-inline-size: none;
}

.spine-era-branded .spine-figure {
grid-column: 1 / -1;
grid-row: 4;
}
}

.spine-brand-image {
display: block;
inline-size: auto;
block-size: auto;
max-inline-size: 7rem;
max-block-size: 5.5rem;
}

:root.has-spine-progress .spine-era {
opacity: 0.8;
}

:root.has-spine-progress .spine-era.is-reached {
opacity: 1;
}

.spine-bead {
position: absolute;
inset-block-start: 0;
display: block;
inline-size: calc(var(--sp-dot) * 2);
block-size: calc(var(--sp-dot) * 2);
margin-inline-start: calc(var(--sp-dot) / -2);
will-change: transform;
background-image: radial-gradient(
circle closest-side,
var(--color-text-accent) 0 48%,
color-mix(in srgb, var(--color-text-accent) 30%, transparent) 56%,
transparent 100%
);
}

:root.has-spine-progress .spine-era:not(.is-reached) .spine-label::before {
background-color: var(--color-border-hairline);
}

:root.has-spine-progress .spine-era:not(.is-reached) .spine-brand-image {
filter: grayscale(1);
opacity: 0.6;
}

.spine-brand-sketch .spine-brand-image {
opacity: 0.75;
}

:root.has-spine-progress .spine-era:not(.is-reached) .spine-brand-sketch .spine-brand-image {
opacity: 0.35;
}

@media (prefers-reduced-motion: no-preference) {
:root.has-spine-progress .spine-era {
transition: opacity var(--dur-fast) var(--ease-in-out);
}

:root.has-spine-progress .spine-label::before {
transition: background-color var(--dur-fast) var(--ease-in-out);
}

:root.has-spine-progress .spine-brand-image {
transition:
filter var(--dur-slow) var(--ease-in-out),
opacity var(--dur-slow) var(--ease-in-out);
}

:root.has-spine-progress .spine-era.is-reached .spine-label::before {
animation: spine-ignite 0.5s var(--ease-out-quart);
}

@keyframes spine-ignite {
50% {
scale: 1.4;
}
}
}

.spine-label {
position: relative;
max-inline-size: none;
font-family: var(--font-display);
font-size: var(--text-h3);
line-height: var(--leading-disp);
font-variant-numeric: oldstyle-nums proportional-nums;
}

.spine-term {
color: var(--accent-gold);
font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
letter-spacing: var(--tracking-h2);
}

.spine-label::before {
content: "";
position: absolute;
inset-block-start: calc((1lh - var(--sp-dot)) / 2);
inset-inline-start: calc(var(--sp-in) * -1);
inline-size: var(--sp-dot);
block-size: var(--sp-dot);

background-color: var(--accent-gold);
clip-path: circle(50%);
}

.spine-dash {
color: var(--color-text-muted);
}

.spine-name {
font-family: var(--font-body);
font-size: var(--text-eyebrow);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-text-muted);
}

.spine-heading {
margin-block-start: var(--space-2xs);
}

.spine-body {
margin-block-start: var(--space-s);
max-inline-size: var(--measure-ledger);
}

.spine-plate {
margin-block-start: var(--space-m);
}

.spine-caption {
margin-block-start: var(--space-2xs);
text-align: end;
}

.spine-carousel {
position: relative;
margin-block-start: var(--space-m);
}

.spine-slides {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
column-gap: var(--space-xs);
overflow-x: auto;
overflow-y: clip;
scroll-snap-type: inline mandatory;
}

.spine-slide {
scroll-snap-align: start;
}

.spine-carousel .spine-plate {
margin-block-start: 0;
}

.spine-carousel .spine-caption {
margin-inline-start: 7rem;
}

.spine-carousel-bar {
display: none;
}

:root.has-carousel .spine-slides {
scrollbar-width: none;
}

:root.has-carousel .spine-carousel-bar {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
display: flex;
align-items: center;
}

.spine-dot {
display: inline-grid;
place-items: center;
inline-size: var(--space-m);
block-size: var(--space-m);
}

.spine-dot::before {
content: "";
inline-size: 0.5rem;
block-size: 0.5rem;
clip-path: circle(50%);
background-color: var(--color-border-hairline);
}

.spine-dot[aria-current="true"]::before {
background-color: var(--color-text-accent);
}

.spine-next {
display: inline-grid;
place-items: center;
min-inline-size: var(--space-m);
min-block-size: var(--space-m);
color: var(--color-text-accent);
font-size: var(--text-base);
}

@container section (inline-size > 64rem) {
.spine {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--sp-ch) minmax(0, 1fr);
row-gap: var(--space-2xl);
padding-inline-start: 0;
}

.spine::before {
inset-inline-start: calc(50% - (var(--sp-th) / 2));
}

.spine-era + .spine-era {
margin-block-start: 0;
}

.spine-rail {
inset-inline-start: calc(50% - var(--sp-dot) / 2);
}

.spine-era:nth-child(1) { grid-row: 1; grid-column: 1; --n: 0; }
.spine-era:nth-child(2) { grid-row: 2; grid-column: 3; --n: 1; }
.spine-era:nth-child(3) { grid-row: 3; grid-column: 1; --n: 2; }
.spine-era:nth-child(4) { grid-row: 4; grid-column: 3; --n: 3; }
.spine-era:nth-child(5) { grid-row: 5; grid-column: 1; --n: 4; }
.spine-era:nth-child(6) { grid-row: 6; grid-column: 3; --n: 5; }

.spine-era.spine-era-branded {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;

column-gap: normal;
align-items: normal;
}

.spine-era-branded > .spine-entry {
grid-row: 1;
grid-column: 1;
}

.spine-era-branded > .spine-brand {
grid-row: 1;
grid-column: 3;
align-self: center;
justify-self: center;
margin-block-start: 0;
}

.spine-era-branded > .spine-brand .spine-brand-image {
block-size: 12rem;
max-inline-size: none;
max-block-size: none;
}

.spine-era-branded > .spine-brand-sketch {
inline-size: min(24rem, 85%);
}

.spine-era-branded > .spine-brand-sketch .spine-brand-image {
block-size: auto;
inline-size: 100%;
max-inline-size: none;
max-block-size: none;
}

.spine-era:nth-child(even).spine-era-branded > .spine-entry {
grid-column: 3;
}

.spine-era:nth-child(even).spine-era-branded > .spine-brand {
grid-column: 1;
}

.spine-era:nth-child(odd) .spine-label::before {
inset-inline-start: auto;
inset-inline-end: calc((var(--sp-ch) + var(--sp-dot)) / -2);
}

.spine-era:nth-child(even) .spine-label::before {
inset-inline-start: calc((var(--sp-ch) + var(--sp-dot)) / -2);
}
}

.generations-columns {
display: grid;
}

.generations-heading {
margin-block-end: var(--space-m);
}

.generations-figure {
position: relative;
max-inline-size: min(100%, 58rem);
margin-block-start: var(--space-xl);
margin-inline: auto;
padding-block-start: var(--space-xl);
}

.generations-figure::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: calc(50% - 1px);
inline-size: 2px;
block-size: var(--space-xl);
background-color: var(--accent-gold);
}

.generations-figure::after {
content: "";
position: absolute;
inset-block-start: calc(-1 * var(--space-2xs) / 2);
inset-inline-start: calc(50% - (var(--space-2xs) / 2));
inline-size: var(--space-2xs);
block-size: var(--space-2xs);
clip-path: circle(50%);
background-color: var(--accent-gold);
}

.generations-image {
display: block;
inline-size: 100%;
block-size: auto;
border: var(--border-hairline-width) solid var(--color-border-hairline);
}

.generations-gallery {
display: grid;
gap: var(--space-xs);
}

@container section (inline-size >= 50rem) {
.generations-gallery {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.1fr);
grid-template-rows: auto auto;
}

.generations-main {
grid-column: 1 / 3;
grid-row: 1;
}

.generations-tall {
grid-column: 3;
grid-row: 1 / 3;
}

.generations-tall .generations-image {
block-size: 100%;
object-fit: cover;
}

.generations-under {
grid-column: 2;
grid-row: 2;
}

.generations-corner {
grid-column: 1;
grid-row: 2;
}

.generations-corner .generations-image {
block-size: 100%;
object-fit: cover;
}
}

@container section (inline-size >= 50rem) {
.generations-columns {
grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
column-gap: var(--space-xl);
}

.generations-heading {
grid-column: 1;
grid-row: 1;
align-self: start;
margin-block-end: 0;
}

.generations-columns > p {
grid-column: 2;
}

.generations-columns > p:first-of-type {
margin-block-start: var(--space-s);
}
}

@media (forced-colors: active) {
.spine::before {
background-color: CanvasText;
mask-image: none;
}

.spine-label::before {
background-color: CanvasText;
}

.generations-figure::before,
.generations-figure::after {
background-color: CanvasText;
}

.generations-image {
border-color: CanvasText;
}

.spine-dot::before {
border: var(--border-hairline-width) solid ButtonText;
background-color: Canvas;
}

.spine-dot[aria-current="true"]::before {
background-color: ButtonText;
}
}

@media print {
.spine {
padding-inline-start: 0;
}

.spine-slides {
display: block;
overflow: visible;
}

.spine-slide + .spine-slide {
margin-block-start: var(--space-m);
}

.spine-carousel-bar {
display: none;
}

.spine::before,
.spine-label::before,
.generations-figure::before,
.generations-figure::after {
display: none;
}

.spine-rail {
display: none;
}
}
}

@layer motion {
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
@container section (inline-size > 64rem) {

.spine::before {
transform-origin: 50% 0;
animation-name: spine-draw;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: view();
animation-range: cover 0% cover 85%;
}
}
}
}

@keyframes spine-draw {
from {
scale: 1 0;
}
}
}

@layer components {

.lead-hero {
--focus-y: 70%;

--scrim-y: 48%;
--scrim-k: 0.7;
}

.governance-columns {
display: grid;
}

.governance-heading {
margin-block-end: var(--space-m);
}

.governance-lede {
max-inline-size: var(--measure-ledger);
font-family: var(--font-display);
font-size: var(--text-lead);
line-height: var(--leading-lede);
}

.governance-body,
.governance-close {
max-inline-size: var(--measure-prose);
}

@container section (inline-size >= 50rem) {
.governance-columns {
grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
column-gap: var(--space-xl);
}

.governance-heading {
grid-column: 1;
grid-row: 1;
align-self: start;
margin-block-end: 0;
}

.governance-columns > p {
grid-column: 2;
}

.governance-columns > p:first-of-type {
margin-block-start: var(--space-s);
}
}

.board-heading {
margin-block-end: var(--space-l);
}

.board-register {
display: grid;
row-gap: var(--space-xl);
padding-inline-start: 0;
list-style-type: "";
}

.board-entry,
.mgmt-entry {

margin-block-start: 0;
}

.person-portrait {
display: block;
position: relative;
max-inline-size: 18rem;
overflow: clip;
}

.person-portrait::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(
115deg,
transparent 38%,
#ffffff47 50%,
transparent 62%
);
translate: -140% 0;
pointer-events: none;
}

.person-image {
inline-size: 100%;
block-size: auto;
}

.person-role {
margin-block-start: var(--space-s);
font-size: var(--text-eyebrow);
line-height: var(--leading-body);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-text-accent);
}

.person-name {
margin-block-start: var(--space-2xs);
}

.person-more {
position: relative;
display: block;
inline-size: 100%;
max-inline-size: 18rem;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: inherit;
}

.has-dialog .person-more {
cursor: pointer;
}

.person-more-label {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
padding: var(--space-l) var(--space-s) var(--space-xs);
background-image: linear-gradient(to top, #000000a6, transparent);
color: var(--color-text-inverse);
font-size: var(--text-eyebrow);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
text-align: start;
opacity: 0;
}

.has-dialog .person-more:hover .person-more-label,
.has-dialog .person-more:focus-visible .person-more-label {
opacity: 1;
}

@media (hover: none) {
.has-dialog .person-more-label {
opacity: 1;
}
}

:root:not(.has-dialog) .person-more-label {
display: none;
}

.person-dialog {
inline-size: min(34rem, 90vw);
padding: var(--space-l);
border: var(--border-hairline-width) solid var(--color-border-hairline);
background-color: var(--color-surface);
}

.person-dialog::backdrop {
background-color: #022d10cc;
}

.person-dialog-close {
position: absolute;
inset-block-start: var(--space-s);
inset-inline-end: var(--space-s);
padding: var(--space-2xs) var(--space-xs);
border: 0;
background: none;
color: inherit;
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: 1;
cursor: pointer;
}

.person-dialog-portrait {
display: block;
max-inline-size: 10rem;
}

.person-dialog-image {
inline-size: 100%;
block-size: auto;
}

.person-dialog .person-role {
margin-block-start: var(--space-m);
}

.person-dialog-name {
margin-block-start: var(--space-2xs);
font-family: var(--font-display);
font-size: var(--text-h3);
line-height: var(--leading-disp);
}

.person-dialog .person-bio {
margin-block-start: var(--space-s);
}

:root:not(.has-dialog) .person-dialog {
display: block;
position: static;
inline-size: auto;
margin-block-start: var(--space-s);
padding: 0;
border: 0;
}

:root:not(.has-dialog) .person-dialog-close,
:root:not(.has-dialog) .person-dialog-portrait {
display: none;
}

@container section (inline-size >= 36rem) {
.board-register {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-l);
}
}

@container section (inline-size >= 64rem) {
.board-register {
grid-template-columns: repeat(4, minmax(0, 1fr));
row-gap: var(--space-2xl);
}
}

.mgmt-heading {
margin-block-end: var(--space-l);
}

.mgmt-grid {
display: grid;
row-gap: var(--space-xl);
padding-inline-start: 0;
list-style-type: "";
}

@container section (inline-size >= 36rem) {
.mgmt-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-l);
}
}

@container section (inline-size >= 64rem) {
.mgmt-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}

@media print {
.person-dialog {
display: block;
position: static;
inline-size: auto;
margin-block-start: var(--space-s);
padding: 0;
border: 0;
}

.person-dialog-close,
.person-dialog-portrait,
.person-more-label {
display: none;
}
}

.principles-heading {
max-inline-size: var(--measure-ledger);
margin-block-end: var(--space-xl);
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lede);
letter-spacing: var(--tracking-body);
}

.principles-steps {
padding-inline-start: 0;
list-style-type: "";
}

.principles-line {
margin-block-start: 0;
padding-block: var(--space-m);
max-inline-size: var(--measure-ledger);
font-family: var(--font-display);
font-size: var(--text-h3);
line-height: var(--leading-lede);
}

.principles-numeral {
font-family: var(--font-body);
font-size: var(--text-lead);
font-variant-numeric: oldstyle-nums proportional-nums;
}

.principles-dash {
color: var(--color-text-muted);
}

@container section (inline-size >= 64rem) {
.principles-line {
margin-inline-start: calc(var(--space-l) * var(--step, 0));
}

.principles-line:nth-child(2) { --step: 1; }
.principles-line:nth-child(3) { --step: 2; }
.principles-line:nth-child(4) { --step: 3; }
.principles-line:nth-child(5) { --step: 4; }
.principles-line:nth-child(6) { --step: 5; }
}

@media (forced-colors: active) {
.person-dialog {
border-color: CanvasText;
}
}
}

@layer motion {
@media (prefers-reduced-motion: no-preference) {
@media (hover: hover) {
.person-more-label {
transition: opacity var(--dur-fast) var(--ease-out-quart);
}

.person-image {
transition: scale 600ms var(--ease-out-quart);
}

.board-entry:hover .person-image,
.mgmt-entry:hover .person-image,
.board-entry:focus-within .person-image,
.mgmt-entry:focus-within .person-image {
scale: 1.05;
}

.board-entry:hover .person-portrait::after,
.mgmt-entry:hover .person-portrait::after,
.board-entry:focus-within .person-portrait::after,
.mgmt-entry:focus-within .person-portrait::after {
animation: person-sheen 850ms var(--ease-out-quart) forwards;
}

@keyframes person-sheen {
to {
translate: 140% 0;
}
}
}
}
}

@layer components {

.pillars-index-hero {
--scrim-y: 60%;
}

.pillars-index-hero .hero-field::after,
.pillar-hero .hero-field::after {
mix-blend-mode: normal;
}

@media (width < 48rem) {
.pillar-hero .hero-field::after {
mix-blend-mode: multiply;
}
}

.taproot {
--tap-rule: 1.5px;
--tap-in: clamp(3rem, 8vw, 6.5rem);
--tap-x: calc(var(--tap-in) / 3);
--tap-y: calc(var(--space-l) + (var(--text-numeral) * var(--leading-hero) / 2));
}

.taproot-heading {
margin-block-end: var(--space-m);
}

.taproot-lede {
max-inline-size: var(--measure-prose);
font-size: var(--text-lead);
line-height: var(--leading-lede);
}

.taproot-tree {
margin-block-start: var(--space-xl);
}

.taproot-origin-plate {
position: relative;
max-inline-size: 36rem;
padding: var(--space-l);
background-color: var(--color-surface-sunken);
}

.taproot-origin-plate::after {
content: "";
position: absolute;
inset-block-start: 100%;
inset-inline-start: var(--tap-x);
inline-size: var(--tap-rule);
block-size: var(--space-l);
background-color: var(--accent-gold);
}

.taproot-kicker {
font-family: var(--font-body);
font-size: var(--text-eyebrow);
line-height: var(--leading-body);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-text-accent);
}

.taproot-origin-title {
margin-block-start: var(--space-xs);
font-size: var(--text-h2);
line-height: var(--leading-disp);
letter-spacing: var(--tracking-h2);
}

.taproot-origin-body {
margin-block-start: var(--space-s);
max-inline-size: var(--measure-ledger);
}

.taproot-dash {
color: var(--color-text-muted);
}

.taproot-kicker .taproot-dash {
color: inherit;
}

.taproot-growth {
margin-block-start: var(--space-l);
}

.taproot-bridge {
position: relative;
margin: 0;
padding-block: var(--space-m);
padding-inline-start: var(--tap-in);
max-inline-size: calc(var(--measure-ledger) + var(--tap-in));
font-size: var(--text-lead);
line-height: var(--leading-lede);
}

.taproot-bridge::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: var(--tap-x);
inline-size: var(--tap-rule);
background-color: var(--accent-gold);
}

.taproot-branches {
position: relative;
display: grid;
row-gap: var(--space-m);
margin-block-start: 0;
padding-inline-start: 0;
list-style-type: "";
}

.taproot-branches::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: var(--tap-x);
block-size: var(--tap-y);
inline-size: var(--tap-rule);
background-color: var(--accent-gold);
}

.taproot-branch {
position: relative;

isolation: isolate;
margin-block-start: 0;
padding-block-start: var(--space-l);
padding-inline-start: var(--tap-in);
}

.taproot-branch::before {
content: "";
position: absolute;
inset-inline-start: var(--tap-x);
inset-block-start: var(--tap-y);
inline-size: calc(var(--tap-in) - var(--tap-x) - var(--space-s));
block-size: var(--tap-rule);
background-color: var(--accent-gold);
}

.taproot-branch:not(:last-child)::after {
content: "";
position: absolute;
inset-inline-start: var(--tap-x);
inset-block-start: var(--tap-y);
inset-block-end: calc(-1 * (var(--space-m) + var(--tap-y)));
inline-size: var(--tap-rule);
background-color: var(--accent-gold);
}

.taproot-name {

position: relative;
font-size: var(--text-h3);
line-height: var(--leading-disp);
}

.taproot-name .pillars-number {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
z-index: -1;
font-size: calc(var(--text-numeral) * 3);
opacity: 0.22;
}

.taproot-tagline {
display: block;
margin-block-start: var(--space-2xs);
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: var(--text-lead);
line-height: var(--leading-lede);
letter-spacing: var(--tracking-body);
}

.pillars-cta {
margin-block-start: var(--space-m);
}

.taproot-plate {
margin-block-start: var(--space-m);
max-inline-size: var(--measure-ledger);
border: var(--border-hairline-width) solid var(--color-border-hairline);
overflow: clip;
}

.taproot-plate-image {
display: block;
inline-size: 100%;
block-size: auto;
}

@container section (inline-size >= 56rem) {
.taproot-branch {
display: grid;

grid-template-columns: minmax(0, 1fr) clamp(18rem, 27cqi, 27rem);
column-gap: var(--space-xl);
}

.taproot-branch > * {
grid-column: 1;
}

.taproot-plate {
grid-column: 2;
grid-row: 1 / span 8;
align-self: start;
margin-block-start: 0;
max-inline-size: none;
}
}

.pillar-answer {
max-inline-size: var(--measure-prose);
}

.pillar-hero {
grid-template-rows: auto 1fr auto;
}

.pillar-hero .hero-lines {
grid-row: 3;
}

.hero-tabs {
position: relative;
grid-column: full;
grid-row: 1;
margin-block: 0;
padding-inline: var(--space-gutter);
padding-block: var(--space-m) var(--space-l);
background-image: linear-gradient(
to bottom,
color-mix(in oklch, var(--color-surface-deep) 85%, transparent),
color-mix(in oklch, var(--color-surface-deep) 55%, transparent) 72%,
transparent
);
}

.hero-tabs .pillar-tab::after {
background-color: var(--color-text);
}

@media (forced-colors: active) {

.taproot-origin-plate {
border: var(--border-hairline-width) solid CanvasText;
}

.taproot-origin-plate::after,
.taproot-bridge::before,
.taproot-branches::before,
.taproot-branch::before,
.taproot-branch:not(:last-child)::after {
background-color: CanvasText;
}
}

@media print {
.taproot-origin-plate::after,
.taproot-bridge::before,
.taproot-branches::before,
.taproot-branch::before,
.taproot-branch:not(:last-child)::after {
display: none;
}
}
}

@layer motion {
@media (prefers-reduced-motion: no-preference) {
.taproot-plate-image {
animation: taproot-drift 52s var(--ease-in-out) infinite alternate;
}

.taproot-branch:nth-child(even) .taproot-plate-image {
animation-duration: 64s;
animation-delay: -26s;
}

@keyframes taproot-drift {
from {
scale: 1.05;
translate: 0.8% 0.5%;
}

to {
scale: 1.12;
translate: -1% -0.8%;
}
}
}
}

@layer components {

.lula-sub {
margin-block-start: var(--space-2xs);
font-family: var(--font-display);
font-style: italic;
font-size: var(--text-lead);
line-height: var(--leading-lede);
}

.lula-frames {
display: grid;
row-gap: var(--space-m);
margin-block-start: var(--space-l);
}

.lula-frame {
border: var(--border-hairline-width) solid var(--color-border-hairline);
}

.lula-image {
display: block;
inline-size: 100%;
block-size: auto;
}

.lula-prose {
margin-block-start: var(--space-l);
max-inline-size: var(--measure-prose);
}

.lula-cta {
margin-block-start: var(--space-l);
}

.lula-arrow {
display: inline-block;
}

@container section (inline-size >= 50rem) {

.lula-prose {
display: flex;
align-items: last baseline;
justify-content: space-between;
gap: var(--space-xl);
max-inline-size: none;
}

.lula-prose > p {
max-inline-size: var(--measure-prose);
}

.lula-cta {
margin-block-start: 0;
white-space: nowrap;
}
}

@container section (inline-size >= 56rem) {
.lula-frames {
grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) minmax(0, 6fr);
column-gap: var(--space-l);
align-items: start;
}

.lula-frame-hands {
margin-block-start: var(--space-2xl);
}

.lula-frame-honours {
margin-block-start: var(--space-l);
}
}

@media (forced-colors: active) {
.lula-frame {
border-color: CanvasText;
}
}

.closing-title {
margin-block-end: var(--space-m);
font-family: var(--font-body);
font-size: var(--text-eyebrow);
font-weight: 400;
line-height: var(--leading-body);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-text-muted);
}

.closing-statement {
max-inline-size: var(--measure-ledger);
font-family: var(--font-display);
font-size: var(--text-h3);
line-height: var(--leading-lede);
}
}

@media (prefers-reduced-motion: no-preference) {
@layer motion {
.lula-arrow {
transition: translate var(--dur-fast) var(--ease-out-quart);
}

.arrow-link:hover .lula-arrow,
.arrow-link:focus-visible .lula-arrow {
translate: 0.25em 0;
}
}
}

@layer components {

.careers-hero {
--scrim-y: 56%;

--scrim-k: 0.7;
}

.build-columns {
display: grid;
}

.build-heading {
margin-block-end: var(--space-m);
}

@container section (inline-size >= 50rem) {
.build-columns {
grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
column-gap: var(--space-xl);
}

.build-heading {
grid-column: 1;
grid-row: 1;
align-self: start;
margin-block-end: 0;
}

.build-columns > p {
grid-column: 2;
}

.build-columns > p:first-of-type {
margin-block-start: var(--space-s);
}
}

.why-heading {
margin-block-end: var(--space-m);
}

.why-prose {
display: flow-root;
max-inline-size: var(--measure-prose);
}

.why-figure {
margin-block-end: var(--space-m);
}

.why-image {
inline-size: 100%;
block-size: auto;
}

@container section (inline-size >= 40rem) {
.why-figure {
float: inline-start;
inline-size: min(18rem, 44%);
margin-inline-end: var(--space-l);
margin-block-end: var(--space-s);
}
}

.life-columns {
display: grid;
}

.life-heading {
margin-block-end: var(--space-m);
}

.life-pull {
margin-block-start: var(--space-l);
max-inline-size: var(--measure-ledger);
font-family: var(--font-display);
font-style: italic;
font-size: var(--text-lead);
line-height: var(--leading-lede);
}

@container section (inline-size >= 50rem) {
.life-columns {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
column-gap: var(--space-xl);
}

.life-heading {
grid-column: 1;
align-self: start;
position: sticky;
inset-block-start: var(--scroll-offset);
margin-block-end: 0;
}

.life-prose {
grid-column: 2;
margin-block-start: var(--space-s);
}
}

.roles-heading {
margin-block-end: var(--space-l);
}

.roles-placeholder {
padding-block: var(--space-m);
border-block: var(--border-hairline-width) solid var(--color-border-hairline);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
}

@media (forced-colors: active) {
.roles-placeholder {
border-block-color: CanvasText;
}
}
}

@layer components {

.enquiry-columns {
display: grid;
}

.enquiry-heading {
margin-block-end: var(--space-m);
}

.enquiry-form {
max-inline-size: var(--measure-prose);
}

.enquiry-field + .enquiry-field {
margin-block-start: var(--space-m);
}

.enquiry-field > label {
margin-block-end: var(--space-2xs);
}

@supports (field-sizing: content) {
.enquiry-field > textarea {
field-sizing: content;
min-block-size: 6lh;
}
}

.enquiry-actions {
margin-block-start: var(--space-l);
}

.enquiry-submit {
padding-block: var(--space-xs);
padding-inline: var(--space-l);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-body);
color: var(--color-text-inverse);
background-color: var(--color-surface-deep);
border: var(--border-hairline-width) solid var(--color-surface-deep);
border-radius: 0;
cursor: pointer;
}

.enquiry-submit:hover {
background-color: color-mix(in oklch, var(--color-surface-deep) 78%, var(--color-text));
border-color: color-mix(in oklch, var(--color-surface-deep) 78%, var(--color-text));
}

@container section (inline-size >= 50rem) {
.enquiry-columns {
grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
column-gap: var(--space-xl);
}

.enquiry-heading {
grid-column: 1;
grid-row: 1;
align-self: start;
margin-block-end: 0;
}

.enquiry-form {
grid-column: 2;
margin-block-start: var(--space-s);
}
}

.offices-heading {
margin-block-end: var(--space-l);
}

.offices-grid {
display: grid;
row-gap: var(--space-l);
}

.office {
padding-block-start: var(--space-m);
border-block-start: var(--border-hairline-width) solid var(--color-border-hairline);
}

.office-name {
max-inline-size: var(--measure-ledger);
}

.office-contact {
margin-block-start: var(--space-s);
}

.office-contact > p + p {
margin-block-start: var(--space-2xs);
}

.office-entity {
font-weight: 600;
}

@container section (inline-size >= 50rem) {
.offices-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-xl);
}

.offices-grid > .office:last-child {
margin-block-start: var(--space-2xl);
}
}

.footprint-note {
margin-block-start: var(--space-s);
}

@media (forced-colors: active) {
.office {
border-block-start-color: CanvasText;
}
}
}

@layer components {

.share-hero {
--scrim-y: 26%;

--focus-y: 72%;
--scrim-k: 0.65;
}

.share-hero-cta {
margin-block-start: var(--space-l);
}

.share-gateway {
display: inline-flex;
align-items: baseline;
gap: var(--space-2xs);
padding: var(--space-m) var(--space-l);
border: var(--border-hairline-width) solid var(--color-border-hairline);
color: var(--color-link);
font-family: var(--font-body);
font-size: var(--text-lead);
text-decoration-line: none;
}

.share-gateway:hover,
.share-gateway:focus-visible {
border-color: var(--color-text);
background-color: color-mix(in oklch, var(--color-text-inverse) 8%, transparent);
}

.share-gateway-arrow {
display: inline-block;
}
}

@layer motion {
@media (prefers-reduced-motion: no-preference) {
.share-gateway {
transition:
border-color var(--dur-fast) var(--ease-out-quart),
background-color var(--dur-fast) var(--ease-out-quart);
}

.share-gateway-arrow {
transition: translate var(--dur-fast) var(--ease-out-quart);
}

.share-gateway:hover .share-gateway-arrow,
.share-gateway:focus-visible .share-gateway-arrow {
translate: 0.25em 0;
}
}
}