/* Generated by tools/assemble.mjs from the stylesheets named below. Edit those, then rebuild. */
/* tokens.css */
@font-face {
font-family: 'Montserrat';
src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
font-weight: 300 700; font-style: normal; font-display: swap;
unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
font-family: 'Montserrat';
src: url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2');
font-weight: 300 700; font-style: normal; font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Montserrat Fallback';
src: local('Arial');
size-adjust: 112.5%; ascent-override: 85%; descent-override: 22%; line-gap-override: 0%;
}
:root {
--c-black: #0A0A0A;
--c-red: #C51622;
--c-gold: #F2B705;
--c-white: #FFFFFF;
--c-canvas: #F7F7F5;
--c-muted: #6C6C6C;
--c-border: #D4D4D4;
--c-white-80: rgba(255,255,255,.80);
--c-white-72: rgba(255,255,255,.72);
--c-white-36: rgba(255,255,255,.36);
--c-white-14: rgba(255,255,255,.14);
--c-panel: #111111;
--c-panel-2: #161616;
--font: 'Montserrat', 'Montserrat Fallback', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
--fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 7.5rem);
--fs-h2: clamp(2rem, 1.3rem + 3.2vw, 4.25rem);
--fs-kicker: clamp(1.5rem, 1rem + 2vw, 2.5rem);
--fs-h3: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
--fs-lead: clamp(1.125rem, 1rem + .6vw, 1.5rem);
--fs-body: clamp(1rem, .96rem + .2vw, 1.0625rem);
--fs-small: .875rem;
--fs-legal: .8125rem;
--fs-label: .75rem;
--fs-stat: clamp(3.5rem, 2rem + 6vw, 8rem);
--fs-step: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
--s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
--s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 176px;
--gutter: clamp(16px, 5vw, 80px);
--gap: clamp(16px, 2vw, 32px);
--container: 1440px;
--section-pad: clamp(88px, 11vw, 176px);
--header-h: 72px;
--r-0: 0;
--r-1: 2px;
--f2: 83ms; --f4: 167ms; --f8: 333ms; --f12: 500ms; --f16: 667ms; --f24: 1000ms;
--ease-control: cubic-bezier(.2, 0, 0, 1);
--ease-dolly: cubic-bezier(.65, 0, .35, 1);
--ease-land: cubic-bezier(.22, 1, .36, 1);
--z-hero-canvas: 0; --z-hero-scrim: 1; --z-hero-hud: 2; --z-hero-copy: 3;
--z-float: 40; --z-header: 50; --z-menu: 100;
}
@media (max-width: 767px) { :root { --header-h: 64px; } }
.surface-dark, .surface-media {
--bg: var(--c-black); --fg: var(--c-white); --fg-2: var(--c-white-72);
--rule: var(--c-white-14); --field: var(--c-white-36); --focus: var(--c-white);
background: var(--bg); color: var(--fg); color-scheme: dark;
}
.surface-light {
--bg: var(--c-canvas); --fg: var(--c-black); --fg-2: var(--c-muted);
--rule: var(--c-border); --field: var(--c-muted); --focus: var(--c-black);
background: var(--bg); color: var(--fg); color-scheme: light;
}
:root {
--c-white-45: rgba(255,255,255,.45);
--c-white-40: rgba(255,255,255,.40);
--c-white-35: rgba(255,255,255,.35);
--c-white-20: rgba(255,255,255,.20);
--c-white-12: rgba(255,255,255,.12);
--c-white-10: rgba(255,255,255,.10);
--c-white-08: rgba(255,255,255,.08);
--c-black-92: rgba(10,10,10,.92);
--c-black-72: rgba(10,10,10,.72);
--c-black-08: rgba(10,10,10,.08);
--z-skip: 60;
--bg: var(--c-black); --fg: var(--c-white); --fg-2: var(--c-white-72);
--rule: var(--c-white-14); --field: var(--c-white-36); --focus: var(--c-white);
--hover-fill: var(--c-white-08); --field-bg: transparent; --lead-weight: 300;
--career-border: var(--c-white-36);
}
@media (orientation: landscape) and (max-height: 500px) { :root { --header-h: 56px; } }
.surface-dark, .surface-media {
--hover-fill: var(--c-white-08); --field-bg: transparent; --lead-weight: 300;
--career-border: var(--c-white-36);
}
.surface-light {
--hover-fill: var(--c-black-08); --field-bg: var(--c-white); --lead-weight: 400;
--career-border: var(--c-border);
}
/* base.css */
*, *::before, *::after { box-sizing: border-box; }
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
font-kerning: normal;
background: var(--c-black);
scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (min-width: 2000px) { html { font-size: clamp(16px, .8vw, 20px); } }
@media (prefers-reduced-motion: no-preference) {
html.motion-on { scroll-behavior: smooth; }
}
html.menu-open { overflow: hidden; }
body {
margin: 0;
min-height: 100vh;
min-height: 100svh;
background: var(--c-black);
color: var(--c-white);
font-family: var(--font);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.65;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, pre, fieldset, legend { margin: 0; }
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: 600;
line-height: 1.2;
overflow-wrap: break-word;
text-wrap: pretty;
}
p { max-width: 68ch; text-wrap: pretty; }
li, dt, dd, td, th, figcaption, legend, caption, blockquote { text-wrap: pretty; }
ol[class], ul[class] { list-style: none; padding: 0; }
img, picture, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: .2em;
}
@media (hover: hover) {
a:hover { text-decoration-thickness: 2px; }
}
button, input, select, textarea {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
cursor: pointer;
text-align: inherit;
}
table { border-collapse: collapse; }
pre { font: inherit; }
time { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
::selection { background: var(--c-white); color: var(--c-black); }
.surface-light ::selection { background: var(--c-black); color: var(--c-white); }
.surface-light :is(.surface-dark, .surface-media) ::selection { background: var(--c-white); color: var(--c-black); }
.container {
width: 100%;
max-width: calc(var(--container) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.grid {
--cols: 4;
display: grid;
column-gap: var(--gap);
grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}
@media (min-width: 768px) { .grid { --cols: 8; } }
@media (min-width: 1024px) { .grid { --cols: 12; } }
.section {
position: relative;
width: 100%;
padding-block: var(--section-pad);
}
.section:is(.surface-dark, .surface-media):has(+ .section:is(.surface-dark, .surface-media)),
.section.surface-light:has(+ .section.surface-light) { padding-bottom: calc(var(--section-pad) / 2); }
.section:is(.surface-dark, .surface-media) + .section:is(.surface-dark, .surface-media),
.section.surface-light + .section.surface-light {
padding-top: calc(var(--section-pad) / 2);
border-top: 1px solid var(--rule);
}
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
:where(main, h1, h2, h3)[tabindex="-1"]:focus { outline: none; }
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
.skip-link {
position: fixed;
top: 16px;
left: 16px;
z-index: var(--z-skip);
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 16px;
border-radius: var(--r-1);
background: var(--c-white);
color: var(--c-black);
font: 600 1rem/1 var(--font);
text-decoration: none;
transform: translateY(calc(-100% - 32px));
}
.skip-link:focus { transform: none; }
.skip-link:focus-visible { outline-color: var(--c-white); }
html.motion-off { scroll-behavior: auto; }
html.motion-off *, html.motion-off *::before, html.motion-off *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important; scroll-behavior: auto !important;
animation-delay: 0s !important; transition-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
html:not(.js) *, html:not(.js) *::before, html:not(.js) *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important; scroll-behavior: auto !important;
animation-delay: 0s !important; transition-delay: 0s !important;
}
}
@media (forced-colors: active) {
:focus-visible { outline-color: Highlight; }
.skip-link { border: 1px solid CanvasText; }
}
@media print {
.site-header, .skip-link, .menu, .motion-toggle { display: none !important; }
body, .surface-dark, .surface-media {
--bg: var(--c-white); --fg: var(--c-black); --fg-2: var(--c-muted);
--rule: var(--c-border); --field: var(--c-muted);
background: none;
color: var(--c-black);
}
}
/* components.css */
.h1 {
font-size: clamp(2.75rem, 11.5vh, var(--fs-display));
font-size: clamp(2.75rem, 11.5svh, var(--fs-display));
font-weight: 600;
line-height: .98;
letter-spacing: -.025em;
text-wrap: balance;
overflow-wrap: break-word;
}
.h2 {
font-size: var(--fs-h2);
font-weight: 600;
line-height: 1.04;
letter-spacing: -.02em;
text-wrap: balance;
overflow-wrap: break-word;
}
.kicker {
font-size: var(--fs-kicker);
font-weight: 300;
line-height: 1.25;
letter-spacing: 0;
max-width: none;
}
.h3 {
font-size: var(--fs-h3);
font-weight: 600;
line-height: 1.2;
letter-spacing: -.01em;
overflow-wrap: break-word;
}
.lead {
font-size: var(--fs-lead);
font-weight: var(--lead-weight, 300);
line-height: 1.5;
max-width: 60ch;
}
.body {
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.65;
max-width: 68ch;
text-wrap: pretty;
}
.small {
font-size: var(--fs-small);
font-weight: 500;
line-height: 1.5;
}
.legal {
font-size: var(--fs-legal);
font-weight: 400;
line-height: 1.5;
color: var(--fg-2);
}
.eyebrow, .section-num {
font-size: var(--fs-label);
font-weight: 600;
line-height: 1.33;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--fg-2);
max-width: none;
}
.hud, .umd, .tc {
font-size: var(--fs-label);
font-weight: 600;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.stat {
font-size: var(--fs-stat);
font-weight: 600;
line-height: .9;
letter-spacing: -.03em;
font-variant-numeric: tabular-nums;
}
.step {
font-size: var(--fs-step);
font-weight: 600;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
}
.section-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
margin-bottom: 32px;
}
.section-num { text-align: right; }
@media (max-width: 479px) {
.section-head .section-num { display: none; }
}
.bar-red {
display: block;
width: 96px;
height: 4px;
margin: 20px 0 32px;
background: var(--c-red);
transform-origin: left;
}
@media (max-width: 767px) { .bar-red { width: 64px; } }
.icon {
display: inline-block;
width: 1em;
height: 1em;
flex: none;
fill: currentColor;
vertical-align: -.125em;
pointer-events: none;
}
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 24px;
border: 1px solid transparent;
border-radius: var(--r-1);
background: transparent;
color: var(--fg);
font: 600 1rem/1 var(--font);
letter-spacing: .02em;
text-align: center;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition:
background-color var(--f4) var(--ease-control),
border-color var(--f4) var(--ease-control),
color var(--f4) var(--ease-control),
filter var(--f4) var(--ease-control),
text-decoration-color var(--f4) var(--ease-control);
}
.btn .icon { width: 16px; height: 16px; }
.btn--primary { background: var(--fg); color: var(--bg); }
.btn--outline { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn--gold { background: var(--c-gold); color: var(--c-black); }
.btn--text {
min-height: 44px;
padding: 0;
border: 0;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
}
.btn--sm {
min-height: 40px;
padding: 0 16px;
font-size: .875rem;
}
.btn--icon {
width: 44px;
height: 44px;
min-height: 44px;
padding: 0;
}
@media (hover: hover) {
.btn--primary:hover, .btn--gold:hover { filter: brightness(.92); }
.btn--outline:hover { background: var(--hover-fill); }
.btn--text:hover { text-decoration-thickness: 2px; }
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
opacity: .4;
cursor: not-allowed;
filter: none;
transform: none;
}
.tag {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 calc(8px - .14em) 0 8px;
border: 1px solid var(--rule);
border-radius: var(--r-1);
color: var(--fg);
font: 600 .6875rem/1 var(--font);
letter-spacing: .14em;
text-transform: uppercase;
white-space: nowrap;
vertical-align: middle;
}
.tag--career { border-color: var(--career-border, var(--rule)); }
.award {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
column-gap: 12px;
align-items: start;
color: var(--fg);
font-size: var(--fs-small);
font-weight: 600;
line-height: 1.5;
}
.award::before {
content: '';
height: 3px;
margin-top: calc(.75em - 1.5px);
background: var(--c-red);
}
.choice {
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 16px;
border: 1px solid var(--field);
border-radius: var(--r-1);
color: var(--fg);
font-size: .9375rem;
font-weight: 500;
line-height: 1.25;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition:
background-color var(--f4) var(--ease-control),
border-color var(--f4) var(--ease-control),
color var(--f4) var(--ease-control);
}
.choice > input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: inherit;
appearance: none;
}
.choice > span { display: inline-flex; align-items: center; padding-block: 10px; }
.choice > span::before {
content: '';
flex: none;
width: 0;
height: 2px;
background: var(--c-red);
}
.choice > input:checked + span::before { width: 8px; margin-right: 8px; }
.choice:has(> input:checked) {
background: var(--fg);
border-color: var(--fg);
color: var(--bg);
}
.choice:has(> input:focus-visible) {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
.choice:has(> input:disabled) { opacity: .4; cursor: not-allowed; }
@media (hover: hover) {
.choice:hover { border-color: var(--fg); }
}
fieldset { min-width: 0; padding: 0; border: 0; }
legend {
padding: 0;
font-size: var(--fs-h3);
font-weight: 600;
line-height: 1.2;
letter-spacing: -.01em;
}
.field {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.field__label {
color: var(--fg);
font-size: .8125rem;
font-weight: 600;
line-height: 1.4;
}
.field__hint {
margin-top: -4px;
color: var(--fg-2);
font-size: .8125rem;
font-weight: 400;
line-height: 1.5;
}
.input, .select, .textarea {
display: block;
width: 100%;
min-height: 48px;
padding: 12px;
border: 1px solid var(--field);
border-radius: var(--r-1);
background-color: var(--field-bg, transparent);
color: var(--fg);
font: 400 1rem/1.5 var(--font);
letter-spacing: 0;
-webkit-appearance: none;
appearance: none;
transition: border-color var(--f4) var(--ease-control);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-2); opacity: 1; }
.textarea { min-height: 144px; line-height: 1.6; resize: vertical; }
.select {
padding-right: 44px;
cursor: pointer;
background-image:
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.select option { background-color: var(--bg); color: var(--fg); }
@media (hover: hover) {
.input:hover, .select:hover, .textarea:hover { border-color: var(--fg); }
}
.input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--fg);
-webkit-box-shadow: 0 0 0 1000px var(--field-bg, var(--bg)) inset;
box-shadow: 0 0 0 1000px var(--field-bg, var(--bg)) inset;
}
.surface-dark .input:-webkit-autofill, .surface-media .input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--c-panel) inset;
box-shadow: 0 0 0 1000px var(--c-panel) inset;
}
.status {
display: inline-block;
min-height: 1.5em;
color: var(--fg-2);
font-size: .8125rem;
font-weight: 500;
line-height: 1.5;
}
.ext .icon {
width: .8em;
height: .8em;
margin-left: .3em;
vertical-align: -.02em;
}
.frame, .monitor {
position: relative;
overflow: hidden;
border-radius: 0;
background: var(--c-black);
}
:is(.frame, .monitor) > :is(img, video),
:is(.frame, .monitor) > picture > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
:is(.frame, .monitor) > picture { display: block; width: 100%; height: 100%; }
.monitor { border: 1px solid var(--c-white-14); }
.monitor::after {
content: '';
position: absolute;
inset: 5%;
z-index: 2;
border: 1px solid var(--c-white-12);
pointer-events: none;
}
.monitor__umd {
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.monitor__tc {
position: absolute;
top: 0;
right: 0;
z-index: 3;
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 8px;
background: var(--c-black);
color: var(--c-white);
}
.umd {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 calc(8px - .14em) 0 8px;
background: var(--c-black);
color: var(--c-white);
white-space: nowrap;
}
.umd--live { background: var(--c-red); }
.tally {
display: block;
height: 4px;
background: transparent;
}
.is-live > .tally { background: var(--c-red); }
.hud { color: var(--c-white); text-shadow: none; }
.tc { white-space: nowrap; }
.tc__d {
display: inline-block;
width: .68em;
letter-spacing: 0;
text-align: center;
}
.tc__s { display: inline-block; padding-inline: .06em; letter-spacing: 0; }
.brackets {
position: absolute;
inset: var(--bk-t, 0) var(--bk-r, 0) var(--bk-b, 0) var(--bk-l, 0);
pointer-events: none;
}
.brackets > i {
position: absolute;
width: 18px;
height: 18px;
border: 0 solid var(--bk-colour, var(--c-white));
}
.brackets > i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.brackets > i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.brackets > i:nth-child(3) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.brackets > i:nth-child(4) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.video-btn {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--c-white-36);
border-radius: var(--r-1);
background: var(--c-black-72);
color: var(--c-white);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
background-color var(--f4) var(--ease-control),
border-color var(--f4) var(--ease-control);
}
.video-btn .icon { width: 16px; height: 16px; }
.video-btn:focus-visible { outline-color: var(--c-white); }
@media (hover: hover) {
.video-btn:hover { background: var(--c-black); border-color: var(--c-white); }
}
.motion-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 8px;
border-radius: var(--r-1);
color: var(--c-white-80);
font: 500 .875rem/1 var(--font);
letter-spacing: .01em;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition: color var(--f4) var(--ease-control);
}
.motion-toggle .icon { width: 16px; height: 16px; }
.motion-toggle__state {
display: inline-flex;
align-items: center;
min-width: 3.375rem;
height: 22px;
padding: 0 calc(7px - .09625rem) 0 7px;
border: 1px solid var(--c-white-36);
border-radius: var(--r-1);
color: var(--c-white);
font-size: 0;
font-weight: 600;
text-transform: uppercase;
}
.motion-toggle__state::after {
content: 'On';
font-size: .6875rem;
line-height: 1;
letter-spacing: .14em;
}
html.motion-off .motion-toggle__state::after { content: 'Off'; }
.motion-toggle__state::before {
content: '';
flex: none;
width: 6px;
height: 6px;
margin-right: 6px;
background: var(--c-red);
}
html.motion-off .motion-toggle__state { border-color: var(--c-white-14); color: var(--c-white-72); }
html.motion-off .motion-toggle__state::before {
background: transparent;
box-shadow: inset 0 0 0 1px var(--c-white-45);
}
@media (hover: hover) {
.motion-toggle:hover { color: var(--c-white); }
}
html:not(.js) .motion-toggle { display: none; }
@media (forced-colors: active) {
.motion-toggle__state::before { forced-color-adjust: none; background: CanvasText; }
html.motion-off .motion-toggle__state::before { background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
.choice:has(> input:checked) { outline: 2px solid Highlight; }
}
/* sections/header.css */
.site-header {
--bg: var(--c-black); --fg: var(--c-white); --fg-2: var(--c-white-72);
--rule: var(--c-white-14); --field: var(--c-white-36); --focus: var(--c-white);
--hover-fill: var(--c-white-08);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-header);
height: var(--header-h);
color: var(--c-white);
background-color: transparent;
transition: background-color var(--f4) var(--ease-control);
}
.site-header::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(var(--c-black) 0%, rgba(10,10,10,0) 100%);
pointer-events: none;
transition: opacity var(--f4) var(--ease-control);
}
.site-header.is-solid,
body:not(.page-home) .site-header,
html:not(.js) .site-header {
background-color: var(--c-black-92);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.site-header.is-solid::before,
body:not(.page-home) .site-header::before,
html:not(.js) .site-header::before { opacity: 0; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header.is-solid, body:not(.page-home) .site-header,
html:not(.js) .site-header { background-color: var(--c-black); }
}
@media (prefers-reduced-transparency: reduce) {
.site-header.is-solid, body:not(.page-home) .site-header,
html:not(.js) .site-header {
background-color: var(--c-black);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
.site-header__inner {
display: flex;
align-items: center;
gap: 32px;
height: 100%;
}
.site-header__logo {
display: block;
flex: none;
margin-right: auto;
border-radius: var(--r-1);
}
.site-header__logo img { width: 132px; height: auto; }
.site-header__logo { opacity: var(--brand-vis, 1); }
html.brand-yield .site-header__logo { pointer-events: none; }
html.brand-gone .site-header__logo { visibility: hidden; }
@media (max-width: 399px) {
.site-header__logo img { width: 120px; }
}
.site-nav { display: none; }
@media (min-width: 1280px) {
.site-nav { display: block; }
}
.site-nav__list {
display: flex;
align-items: center;
gap: 28px;
}
.site-nav__link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: 4px;
margin-inline: -4px;
border-radius: var(--r-1);
line-height: 1;
color: var(--c-white-80);
font-size: .875rem;
font-weight: 500;
letter-spacing: .01em;
text-decoration: underline;
text-decoration-color: transparent;
text-decoration-thickness: 2px;
text-underline-offset: 6px;
transition:
color var(--f4) var(--ease-control),
text-decoration-color var(--f4) var(--ease-control);
}
.site-nav__link[aria-current="true"],
.site-nav__link[aria-current="page"] {
color: var(--c-white);
text-decoration-color: var(--c-white);
}
@media (hover: hover) {
.site-nav__link:hover { color: var(--c-white); text-decoration-color: var(--c-white); }
}
.site-header__actions {
display: flex;
align-items: center;
gap: 16px;
margin-right: -8px;
}
.site-header__contact,
.site-header .motion-toggle { display: none; }
@media (min-width: 1024px) {
.site-header__contact { display: inline-flex; }
html.js .site-header .motion-toggle { display: inline-flex; }
}
.site-header__menu {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 44px;
min-height: 44px;
padding: 0 8px;
border-radius: var(--r-1);
color: var(--c-white);
font-size: .875rem;
font-weight: 600;
letter-spacing: .02em;
-webkit-tap-highlight-color: transparent;
}
.site-header__menu .icon { width: 16px; height: 16px; }
@media (min-width: 1280px) {
.site-header__menu { display: none; }
}
html:not(.js) .site-header__menu { display: none; }
.menu {
position: fixed;
inset: 0;
z-index: var(--z-menu);
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}
.menu::backdrop { background: transparent; }
.menu[open] {
display: block;
animation: menu-wipe var(--f4) var(--ease-control);
}
@keyframes menu-wipe {
from { clip-path: inset(0 0 100% 0); }
to   { clip-path: inset(0); }
}
.menu__inner {
display: flex;
flex-direction: column;
min-height: 100%;
padding-bottom: 40px;
}
.menu__bar {
position: sticky;
top: 0;
z-index: 1;
display: flex;
flex: none;
align-items: center;
justify-content: space-between;
gap: 16px;
height: var(--header-h);
margin-inline: calc(-1 * var(--gutter));
padding-inline: var(--gutter);
background: var(--bg);
}
.menu__close {
gap: 10px;
margin-right: -8px;
padding: 0 8px;
font-size: .875rem;
}
.menu__close .icon { width: 16px; height: 16px; }
.menu__body {
display: grid;
flex: 1;
align-content: start;
gap: 48px;
padding-top: 8px;
}
@media (min-width: 768px) {
.menu__body {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
column-gap: var(--gap);
align-items: end;
padding-top: 24px;
}
}
.menu__list { border-top: 1px solid var(--rule); }
.menu__list > li { border-bottom: 1px solid var(--rule); }
.menu__link {
display: flex;
align-items: baseline;
gap: 16px;
min-height: 56px;
padding: 14px 0;
color: var(--c-white);
font-size: 1.5rem;
font-weight: 600;
line-height: 1.15;
letter-spacing: -.01em;
text-decoration: none;
}
.menu__num {
flex: none;
width: 1.75rem;
color: var(--c-white-72);
font-size: .75rem;
font-weight: 600;
letter-spacing: .06em;
font-variant-numeric: tabular-nums;
}
.menu__label {
text-decoration: underline;
text-decoration-color: transparent;
text-decoration-thickness: 2px;
text-underline-offset: 6px;
transition: text-decoration-color var(--f4) var(--ease-control);
}
.menu__arrow {
align-self: center;
margin-left: auto;
width: 16px;
height: 16px;
color: var(--c-white-36);
transition: color var(--f4) var(--ease-control);
}
.menu__link[aria-current="true"] .menu__num { color: var(--c-white); }
.menu__link[aria-current="true"] .menu__label { text-decoration-color: var(--c-white); }
.menu__link:focus-visible .menu__arrow { color: var(--c-white); }
@media (hover: hover) {
.menu__link:hover .menu__arrow { color: var(--c-white); }
.menu__link:hover .menu__label { text-decoration-color: var(--c-white); }
}
.menu__meta {
display: grid;
gap: 20px;
justify-items: start;
}
.menu__email {
font-size: 1rem;
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
overflow-wrap: anywhere;
}
.menu__clocks {
color: var(--c-white-72);
font-size: .8125rem;
font-weight: 500;
line-height: 1.5;
}
.menu__clocks time { color: var(--c-white); font-weight: 600; }
.menu__social {
display: flex;
flex-wrap: wrap;
gap: 0 24px;
}
.menu__social a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: .875rem;
font-weight: 500;
text-decoration: underline;
text-decoration-color: var(--c-white-36);
text-underline-offset: 5px;
}
@media (hover: hover) {
.menu__social a:hover { text-decoration-color: var(--c-white); }
}
.menu__meta .motion-toggle { margin-left: -8px; }
.menu:focus-visible { outline: none; }
.menu:focus-visible::after {
content: '';
position: fixed;
inset: 2px;
z-index: 2;
border: 2px solid var(--focus);
pointer-events: none;
}
@media (forced-colors: active) {
.menu:focus-visible::after { border-color: Highlight; }
}
@media (orientation: landscape) and (max-height: 500px) {
.menu__inner { padding-bottom: 16px; }
.menu__body {
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 16px;
padding-top: 0;
}
.menu__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(5, auto);
grid-auto-flow: column;
column-gap: var(--gap);
border-top: 0;
}
.menu__list > li:nth-child(5n + 1) { border-top: 1px solid var(--rule); }
.menu__link {
min-height: 44px;
padding: 8px 0;
font-size: 1.25rem;
}
.menu__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 24px;
}
}
/* sections/hero.css */
#top {
--hero-cw: 100cqw;
--hero-ml: calc(var(--hero-cw) * .07);
--hero-mw: min(calc(var(--hero-cw) * .82), 1800px);
--hero-mt: calc(var(--header-h) + 13svh);
--hero-mh: calc(var(--hero-mw) * 47 / 507);
--hero-bk: 24px;
--hero-pitch: 5px;
position: relative;
isolation: isolate;
overflow: clip;
min-height: max(600px, 100vh);
min-height: max(600px, 100svh);
container-type: inline-size;
touch-action: manipulation;
}
@supports not (width: 1cqw) { #top { --hero-cw: 100vw; } }
@media (max-width: 1023px) {
#top { --hero-ml: var(--gutter); --hero-mw: calc(var(--hero-cw) - 2 * var(--gutter)); --hero-mt: calc(var(--header-h) + 72px); }
}
@media (max-width: 767px) {
#top { --hero-mt: calc(var(--header-h) + 80px); --hero-bk: min(24px, calc(var(--gutter) - 6px)); --hero-pitch: 4px; }
}
#top .hero__fallback, #top .hero__wall, #top .hero__scrim, #top .hero__hud {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
#top .hero__fallback { z-index: var(--z-hero-canvas); }
#top .hero__wall { z-index: var(--z-hero-canvas); opacity: 0; }
#top .hero__scrim {
z-index: var(--z-hero-scrim);
background: linear-gradient(to top, var(--c-black-92) 0%, rgba(10, 10, 10, .6) 38%, rgba(10, 10, 10, 0) 62%);
}
#top .hero__hud { z-index: var(--z-hero-hud); display: none; overflow: visible; }
#top .hero__emitters {
position: absolute;
inset: 0;
background: radial-gradient(circle, rgba(255, 255, 255, .035) 0 1px, transparent 1.5px) 0 0 / var(--hero-pitch) var(--hero-pitch), var(--c-black);
}
#top .hero__motif {
position: absolute;
top: var(--hero-mt);
left: var(--hero-ml);
width: var(--hero-mw);
max-width: none;
height: auto;
aspect-ratio: 507 / 47;
}
#top .hero__fallback-brackets {
--bk-t: calc(var(--hero-mt) - var(--hero-bk));
--bk-l: calc(var(--hero-ml) + var(--hero-mw) / 2 - var(--hero-bk));
--bk-r: calc(var(--hero-cw) - var(--hero-ml) - var(--hero-mw) - var(--hero-bk));
--bk-b: auto;
height: calc(var(--hero-mh) + 2 * var(--hero-bk));
}
#top.is-live .hero__wall { opacity: 1; }
#top.is-live .hero__hud { display: block; }
#top.is-in .hero__fallback { visibility: hidden; }
#top .hero__hud-bk { fill: none; stroke: var(--c-white); stroke-width: 1.5; stroke-linecap: square; }
#top .hero__hud-strip { fill: var(--c-black-72); }
#top .hero__hud-tally { fill: var(--c-red); }
#top .hero__hud text { fill: var(--c-white); font: 600 12px var(--font); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
#top .hero__hud-check { color: var(--c-white); }
#top .hero__inner {
position: relative;
z-index: var(--z-hero-copy);
display: flex;
flex-direction: column;
min-height: max(600px, 100vh);
min-height: max(600px, 100svh);
padding-top: calc(var(--header-h) + 24px);
}
#top .hero__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; }
#top .hero__tag { flex: none; text-align: right; }
@media (max-width: 479px) { #top .hero__tag { display: none; } }
@media (max-width: 1023px) {
#top .hero__sep { display: none; }
#top .hero__region { display: block; }
}
#top .hero__band { flex: none; height: calc(var(--hero-mh) + 80px); }
#top .hero__copy { padding-bottom: 40px; }
@media (min-width: 640px) {
#top .hero__copy .h1 {
max-width: 12.25em;
font-size: min(clamp(2.75rem, min(7.65vh, max(5.65vh, 11.35vh - 43px)), var(--fs-display)), calc(min(var(--hero-cw) - 2 * var(--gutter), var(--container)) / 12));
font-size: min(clamp(2.75rem, min(7.65svh, max(5.65svh, 11.35svh - 43px)), var(--fs-display)), calc(min(var(--hero-cw) - 2 * var(--gutter), var(--container)) / 12));
}
#top .hero__keep { white-space: nowrap; }
}
@media (min-width: 1024px) {
#top .hero__copy .h1 {
max-width: 17.5em;
font-size: min(clamp(2.75rem, min(11.5vh, max(8.5vh, 17vh - 64px)), var(--fs-display)), calc(min(var(--hero-cw) - 2 * var(--gutter), var(--container)) / 17.15));
font-size: min(clamp(2.75rem, min(11.5svh, max(8.5svh, 17svh - 64px)), var(--fs-display)), calc(min(var(--hero-cw) - 2 * var(--gutter), var(--container)) / 17.15));
}
}
#top .hero__copy .lead { max-width: 46ch; margin-top: clamp(20px, 1.2rem + .6vw, 32px); }
#top .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 479px) {
#top .hero__ctas { flex-direction: column; }
#top .hero__ctas .btn { width: 100%; }
}
#top .hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
#top .hero__founder {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 48px;
border-radius: var(--r-1);
color: var(--fg);
text-decoration: none;
}
#top .hero__founder-img { flex: none; width: 48px; height: 48px; border-radius: var(--r-1); background: var(--c-panel); object-fit: cover; }
#top .hero__founder-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#top .hero__founder-name {
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
text-decoration: underline 1px transparent;
text-underline-offset: 4px;
transition: text-decoration-color var(--f4) var(--ease-control);
}
#top .hero__founder-role { color: var(--fg-2); font-size: var(--fs-legal); font-weight: 500; line-height: 1.4; }
#top .hero__email { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
#top .hero__mail {
display: inline-flex;
align-items: center;
min-height: 44px;
border-radius: var(--r-1);
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
}
#top .hero__copy-address { color: var(--fg-2); font-size: .875rem; }
#top .hero__copy-address .icon { width: 14px; height: 14px; }
@media (hover: hover) {
#top .hero__founder:hover .hero__founder-name { text-decoration-color: currentColor; }
#top .hero__copy-address:hover { color: var(--fg); }
}
#top .hero__status { position: absolute; top: 100%; left: 0; white-space: nowrap; }
#top .hero__foot {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: auto;
padding-block: 16px;
border-top: 1px solid var(--rule);
}
#top .hero__credits { max-width: none; color: var(--fg-2); font-size: var(--fs-legal); font-weight: 500; line-height: 1.5; }
#top .hero__credits > span { color: var(--fg); font-weight: 600; white-space: nowrap; }
#top .hero__controls { display: none; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
#top:where(.js.motion-on *):not(.is-static) .hero__controls { display: flex; visibility: hidden; }
#top.is-live:where(.js.motion-on *) .hero__controls { visibility: visible; }
#top .hero__lens { display: flex; align-items: center; gap: 6px; }
#top .hero__lens-label {
margin-right: 8px;
color: var(--fg-2);
font-size: var(--fs-label);
font-weight: 600;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
}
#top .hero__lens-opt {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 8px;
border: 1px solid var(--field);
border-radius: var(--r-1);
color: var(--fg-2);
font-size: .8125rem;
font-weight: 600;
line-height: 1;
letter-spacing: .04em;
font-variant-numeric: tabular-nums;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--f4) var(--ease-control), border-color var(--f4) var(--ease-control), color var(--f4) var(--ease-control);
}
#top .hero__lens-opt[aria-checked="true"] { border-color: var(--fg); background: var(--fg); color: var(--bg); }
@media (hover: hover) {
#top .hero__lens-opt:hover { border-color: var(--fg); color: var(--fg); }
#top .hero__lens-opt[aria-checked="true"]:hover { color: var(--bg); }
}
#top .hero__hint {
max-width: none;
color: var(--fg-2);
font-size: var(--fs-label);
font-weight: 500;
line-height: 1.33;
letter-spacing: .02em;
transition: opacity var(--f4) var(--ease-control);
}
#top .hero__hint-touch { display: none; }
@media (pointer: coarse) {
#top .hero__hint-fine { display: none; }
#top .hero__hint-touch { display: inline; }
}
#top.is-hinted .hero__hint { opacity: 0; }
#top .hero__sentinel { position: absolute; top: 24px; left: 0; width: 1px; height: 1px; pointer-events: none; }
@media (min-width: 768px) {
#top .hero__band { height: calc(var(--hero-mh) + 96px); }
#top .hero__foot { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px 40px; min-height: 77px; }
#top .hero__credits { flex: 1 1 auto; min-width: 0; }
#top .hero__controls { flex: none; flex-wrap: nowrap; }
}
@media (min-width: 1024px) {
#top .hero__band { height: max(0px, calc(13vh + var(--hero-mh) - 8px)); height: max(0px, calc(13svh + var(--hero-mh) - 8px)); }
#top .hero__copy { margin-top: auto; padding-bottom: clamp(24px, 12vh - 90px, 72px); padding-bottom: clamp(24px, 12svh - 90px, 72px); }
#top .hero__ctas, #top .hero__proof { margin-top: clamp(24px, 4vh - 8px, 32px); margin-top: clamp(24px, 4svh - 8px, 32px); }
#top .hero__copy .lead { max-width: min(46ch, 820px); }
#top .hero__foot { margin-top: 0; }
}
@media (max-width: 767px), (max-height: 500px) {
#top .hero__controls, #top:where(.js.motion-on *):not(.is-static) .hero__controls { display: none; }
}
@media (forced-colors: active) {
#top .hero__wall, #top .hero__hud, #top.is-live .hero__hud { display: none; }
#top .hero__fallback, #top.is-in .hero__fallback { visibility: visible; }
#top .hero__lens-opt[aria-checked="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}
/* sections/signal.css */
#signal { --sig-span: calc((100% - 11 * var(--gap)) / 12); }
#signal > .container { container-type: inline-size; }
@media (min-width: 1024px) {
#signal .h2 { max-width: calc(var(--sig-span) * 9 + 8 * var(--gap)); }
#signal .sig__lead { max-width: min(60ch, calc(var(--sig-span) * 7 + 6 * var(--gap))); }
}
#signal .sig__tools { display: flex; flex-wrap: wrap; column-gap: var(--s-5); }
#signal .sig__tools > .btn { font-size: .9375rem; }
#signal .sig__list { margin-top: var(--s-7); }
#signal .sig__item { position: relative; padding: 0 0 var(--s-7) 36px; }
#signal .sig__item:last-child { padding-bottom: 0; }
#signal .sig__item:not(:last-child)::before {
content: '';
position: absolute;
left: 4.25px;
top: calc(.6 * var(--fs-h3));
bottom: calc(-.6 * var(--fs-h3));
width: 1.5px;
background: var(--c-black);
}
#signal .sig__item > dt {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2) var(--s-3);
font-size: var(--fs-h3);
font-weight: 600;
line-height: 1.2;
letter-spacing: -.01em;
}
#signal .sig__item > dt::before {
content: '';
position: absolute;
left: -36px;
top: calc(.6em - 5px);
width: 10px;
height: 10px;
border: 1.5px solid var(--c-black);
border-radius: 50%;
background: var(--c-canvas);
}
#signal :is(.sig__tag, .sig__type, .sig__label) {
font-size: .6875rem;
font-weight: 600;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
}
#signal .sig__tag {
order: 1;
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 6px 0 7px;
border: 1px solid var(--c-border);
border-radius: var(--r-1);
color: var(--fg-2);
}
#signal .sig__label { display: block; margin-bottom: var(--s-1); color: var(--fg-2); font-size: var(--fs-label); line-height: 1.33; letter-spacing: .2em; }
#signal .sig__item > dd { margin-top: var(--s-4); max-width: 62ch; }
#signal .sig__tool { font-weight: 600; text-underline-offset: 4px; }
#signal .is-folded .sig__item:not(.is-open) > dd { display: none; }
#signal .is-folded .sig__item:not(.is-open, :last-child) { padding-bottom: var(--s-5); }
#signal .is-folded .sig__item > dt { padding-right: 32px; }
#signal .sig__open { -webkit-tap-highlight-color: transparent; }
#signal .sig__open::after { content: ''; position: absolute; inset: -10px 0; }
#signal .is-folded .sig__item > dt::after {
content: '';
position: absolute;
top: calc(.6em - 7px);
right: 0;
width: 14px;
height: 14px;
color: var(--fg-2);
background: linear-gradient(currentColor 0 0) 50% / 14px 1.5px no-repeat, linear-gradient(currentColor 0 0) 50% / 1.5px 14px no-repeat;
pointer-events: none;
}
#signal .is-folded .is-open > dt::after { color: var(--fg); background-size: 14px 1.5px, 0 0; }
@media (hover: hover) {
#signal .is-folded .sig__item > dt:hover::after { color: var(--fg); }
}
@media (width < 1024px) {
#signal .is-folded .is-open > dt::before { background: var(--c-black); }
}
@media (min-width: 768px) {
#signal .sig__item { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); padding-left: 44px; }
#signal .sig__item > dt, #signal .sig__item > [data-row="tool"] { grid-column: 1 / -1; }
#signal .sig__item > dt::before { left: -44px; }
}
@media (min-width: 1024px) {
#signal .sig__item { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#signal .sig__item > dt { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
#signal .sig__item > dd { margin-top: 0; }
#signal .sig__item > [data-row="tool"] { grid-column: 2 / -1; margin-top: var(--s-4); }
}
#signal .sig__stage {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gap);
margin-top: var(--s-7);
}
#signal .sig__grid {
grid-area: 1 / 1 / 2 / -1;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(44px, 3.6vw, 60px) clamp(32px, 3.4vw, 56px);
padding: clamp(24px, 2.4vw, 40px);
border: 1px solid var(--c-border);
border-radius: var(--r-1);
background: var(--c-canvas) -1px -1px / 24px 24px;
background-image:
linear-gradient(to right, color-mix(in srgb, var(--c-border) 60%, transparent) 1px, transparent 1px),
linear-gradient(color-mix(in srgb, var(--c-border) 60%, transparent) 1px, transparent 1px);
}
#signal .sig__links { position: absolute; z-index: 0; grid-area: 1 / 1 / 2 / -1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#signal .sig__legend {
grid-area: 2 / 1 / 3 / -1;
justify-self: start;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2) var(--s-5);
min-height: 56px;
padding-top: var(--s-3);
font-size: var(--fs-label);
font-weight: 600;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
}
#signal .sig__key { display: inline-flex; align-items: center; gap: var(--s-3); }
#signal .sig__sample { display: block; overflow: visible; }
#signal .sig__stage > .sig__tools { grid-area: 2 / 1 / 3 / -1; justify-self: end; align-self: start; padding-top: var(--s-1); }
#signal .sig__panel {
grid-area: 3 / 1 / 4 / -1;
display: grid;
margin-top: var(--s-5);
padding: var(--s-6);
border: 1px solid var(--c-black);
border-radius: var(--r-1);
background: var(--c-white);
}
@container (width >= 81rem) {
#signal :is(.sig__grid, .sig__links, .sig__legend, .sig__stage > .sig__tools) { grid-column: 1 / 9; }
#signal .sig__panel { position: sticky; top: calc(var(--header-h) + 32px); grid-area: 1 / 9 / 3 / 13; align-self: start; margin-top: 0; }
}
#signal .sig__line { fill: none; stroke: var(--c-black); stroke-width: 1.5; }
#signal .sig__line[data-type="sync"] { stroke-dasharray: 4 4; }
#signal .sig__line:is([data-type="data"], [data-type="dmx"]) { stroke-dasharray: 1 5; stroke-linecap: round; }
#signal .sig__links .sig__line { stroke-opacity: .35; }
#signal .sig__links .sig__line.is-active { stroke-opacity: 1; stroke-width: 2.5; }
#signal .sig__packet:not(.is-live) { display: none; }
#signal .sig__node {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
grid-template-rows: auto 1fr;
gap: var(--s-3) var(--s-2);
min-height: 64px;
padding: var(--s-3);
border: 1.5px solid;
border-radius: var(--r-1);
background: var(--c-canvas);
color: var(--c-muted);
font-size: .875rem;
font-weight: 600;
line-height: 1.25;
-webkit-tap-highlight-color: transparent;
}
#signal .sig__node.is-active { color: var(--c-black); }
#signal .sig__node[aria-pressed="true"] { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
@media (hover: hover) {
#signal .sig__node:not([aria-pressed="true"]):hover { background: var(--c-white); color: var(--c-black); }
}
#signal .sig__icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#signal .sig__type { justify-self: end; padding-top: 2px; font-size: .75rem; }
#signal .sig__name { grid-column: 1 / -1; align-self: end; }
#signal [data-node="sync"] { grid-area: 1 / 2 / 2 / 5; }
#signal .sig__node[data-node="sync"] { grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-rows: none; align-items: center; }
#signal .sig__node[data-node="sync"] .sig__name { grid-area: 1 / 2; align-self: center; }
#signal .sig__node[data-node="sync"] .sig__type { grid-area: 1 / 3; padding: 0; }
#signal [data-node="tracking"] { grid-area: 2 / 1; }
#signal [data-node="render"] { grid-area: 2 / 2; }
#signal [data-node="routing"] { grid-area: 2 / 3; }
#signal [data-node="processing"] { grid-area: 2 / 4; }
#signal [data-node="wall"] { grid-area: 2 / 5; }
#signal [data-node="monitor"] { grid-area: 3 / 2; }
#signal [data-node="media"] { grid-area: 3 / 3; }
#signal [data-node="lighting"] { grid-area: 3 / 5; }
#signal .sig__panel > * { grid-area: 1 / 1; min-width: 0; }
#signal .sig__ghost { visibility: hidden; }
#signal .sig__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-5); }
#signal .sig__rows { display: grid; gap: var(--s-5); }
#signal .sig__rows dd { line-height: 1.6; }
#signal .sig__note { display: block; color: var(--fg-2); font-size: var(--fs-small); line-height: 1.5; }
#signal .sig__rows a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@container (width < 81rem) {
#signal .sig__rows { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
}
#signal .sig__close { margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid var(--c-border); }
@media (forced-colors: active) {
#signal .sig__packets { display: none; }
#signal .sig__line { stroke: CanvasText; }
#signal .sig__node[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: 2px; }
#signal .sig__item:not(:last-child)::before { forced-color-adjust: none; background: CanvasText; }
#signal .is-folded .sig__item > dt::after { forced-color-adjust: none; color: CanvasText; }
}
/* sections/services.css */
#services {
--svc-col: calc((100% - 11 * var(--gap)) / 12);
--svc-run: 7;
--svc-scrim: rgba(10, 10, 10, .86);
--svc-scrim-mid: rgba(10, 10, 10, .58);
--svc-scrim-0: rgba(10, 10, 10, 0);
}
@media (min-width: 1024px) {
#services .svc__title-main { max-width: calc(var(--svc-col) * 8 + var(--gap) * 7); }
#services .svc__intro { max-width: min(60ch, calc(var(--svc-col) * 6 + var(--gap) * 5)); }
}
#services .svc-film {
margin-top: clamp(48px, 3vw + 32px, 88px);
}
#services .svc-film__stage {
width: 100%;
max-width: calc(var(--container) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
#services .svc-film__screen {
position: relative;
aspect-ratio: 16 / 9;
max-height: 72vh;
overflow: hidden;
background: var(--c-black);
}
#services .svc-film__film,
#services .svc-film__nojs {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
#services .svc-film__film { display: block; }
#services .svc-film__nojs { object-fit: cover; }
#services :is(.svc-film__hud, .svc-film__hint, .svc-film__progress) { display: none; }
#services .svc-film__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s-7) var(--gap);
margin-top: var(--s-8);
}
#services .svc-beat__inner {
padding-top: var(--s-5);
border-top: 1px solid var(--rule);
}
#services .svc-beat__num {
color: var(--fg-2);
font-size: var(--fs-label);
font-weight: 600;
line-height: 1.33;
letter-spacing: .2em;
font-variant-numeric: tabular-nums;
}
#services .svc-beat__num span { color: var(--c-white-45); }
#services .svc-beat__title {
margin-top: var(--s-3);
font-size: var(--fs-h3);
font-weight: 600;
line-height: 1.15;
letter-spacing: -.01em;
text-wrap: balance;
}
#services .svc-beat__one {
margin-top: var(--s-2);
font-size: 1.0625rem;
font-weight: 500;
line-height: 1.45;
}
#services .svc-beat__details {
margin-top: var(--s-4);
color: var(--c-white-80);
font-size: .9375rem;
line-height: 1.6;
}
#services .svc-beat__proof {
margin-top: var(--s-4);
color: var(--fg-2);
font-size: var(--fs-legal);
font-weight: 500;
line-height: 1.5;
}
#services .svc-beat__proof .tag { margin-right: 10px; vertical-align: 1px; }
#services .svc-beat__cta { margin-top: var(--s-3); }
#services .svc-beat--close { margin-top: clamp(56px, 3vw + 40px, 96px); }
#services .svc-beat--close .svc-beat__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s-5);
padding-top: 0;
border-top: 0;
}
#services .svc-beat__close-line {
max-width: 34ch;
font-size: var(--fs-h3);
font-weight: 300;
line-height: 1.3;
}
@media (min-width: 768px) {
#services .svc-film__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
#services .svc-film__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
html.js.motion-on #services:not(.svc-static) .svc-film {
height: calc((var(--svc-run) + 1) * 100vh);
height: calc((var(--svc-run) + 1) * 100svh);
}
html.js.motion-on #services:not(.svc-static) .svc-film__stage {
position: sticky;
top: var(--header-h);
display: grid;
grid-template: "screen" minmax(0, 1fr) / minmax(0, 1fr);
max-width: none;
height: calc(100vh - var(--header-h));
height: calc(100svh - var(--header-h));
padding: 0;
overflow: hidden;
background: var(--c-black);
}
html.js.motion-on #services:not(.svc-static) .svc-film__screen {
grid-area: screen;
aspect-ratio: auto;
max-height: none;
min-height: 0;
}
html.js.motion-on #services:not(.svc-static) .svc-film__beats {
grid-area: screen;
position: relative;
z-index: 1;
min-height: 0;
pointer-events: none;
}
html.js.motion-on #services:not(.svc-static) .svc-film__list { display: contents; }
html.js.motion-on #services:not(.svc-static) .svc-beat {
--vis: 0;
--clear: 1;
position: absolute;
inset: 0;
display: flex;
padding: clamp(24px, 4vh, 56px) var(--gutter);
opacity: calc(var(--vis) * var(--clear));
}
html.js.motion-on #services:not(.svc-static) #svc-led { --vis: 1; }
html.js.motion-on #services:not(.svc-static) .svc-beat--left { justify-content: flex-start; }
html.js.motion-on #services:not(.svc-static) .svc-beat--right { justify-content: flex-end; }
html.js.motion-on #services:not(.svc-static) .svc-beat--middle { align-items: center; }
html.js.motion-on #services:not(.svc-static) .svc-beat--bottom { align-items: flex-end; }
html.js.motion-on #services:not(.svc-static) .svc-beat::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, var(--svc-scrim) 0%, var(--svc-scrim-mid) 30%, var(--svc-scrim-0) 58%);
pointer-events: none;
}
html.js.motion-on #services:not(.svc-static) .svc-beat--right::before {
background: linear-gradient(270deg, var(--svc-scrim) 0%, var(--svc-scrim-mid) 30%, var(--svc-scrim-0) 58%);
}
html.js.motion-on #services:not(.svc-static) .svc-beat--left.svc-beat--bottom::before {
background: radial-gradient(120% 100% at 0% 100%, var(--svc-scrim) 0%, var(--svc-scrim-mid) 36%, var(--svc-scrim-0) 64%);
}
html.js.motion-on #services:not(.svc-static) .svc-beat--right.svc-beat--bottom::before {
background: radial-gradient(120% 100% at 100% 100%, var(--svc-scrim) 0%, var(--svc-scrim-mid) 36%, var(--svc-scrim-0) 64%);
}
html.js.motion-on #services:not(.svc-static) .svc-beat.is-off::before { display: none; }
html.js.motion-on #services:not(.svc-static) .svc-beat__inner {
position: relative;
width: min(100%, 30rem);
padding: 0;
border: 0;
pointer-events: auto;
}
html.js.motion-on #services:not(.svc-static) .svc-beat.is-inert .svc-beat__inner { pointer-events: none; }
html.js.motion-on #services:not(.svc-static) .svc-beat__num span { color: var(--c-white-72); }
html.js.motion-on #services:not(.svc-static) .svc-beat__title {
margin-top: var(--s-3);
font-size: clamp(1.75rem, 1.15rem + 1.5vw, 2.75rem);
line-height: 1.04;
letter-spacing: -.02em;
}
html.js.motion-on #services:not(.svc-static) .svc-beat__one { font-size: clamp(1rem, .92rem + .3vw, 1.1875rem); }
html.js.motion-on #services:not(.svc-static) .svc-beat__details { margin-top: var(--s-3); color: var(--c-white-80); }
html.js.motion-on #services:not(.svc-static) .svc-beat__proof { margin-top: var(--s-3); color: var(--c-white-72); }
html.js.motion-on #services:not(.svc-static) .svc-beat--close { margin-top: 0; }
html.js.motion-on #services:not(.svc-static) .svc-beat--close::before {
background: linear-gradient(0deg, var(--svc-scrim) 0%, var(--svc-scrim-mid) 22%, var(--svc-scrim-0) 44%);
}
html.js.motion-on #services:not(.svc-static) .svc-beat--close .svc-beat__inner { width: min(100%, 36rem); }
html.js.motion-on #services:not(.svc-static) .svc-beat.is-compact .svc-beat__title { font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); }
html.js.motion-on #services:not(.svc-static) .svc-beat.is-compact :is(.svc-beat__details, .svc-beat__one) { font-size: .875rem; line-height: 1.5; }
html.js.motion-on #services:not(.svc-static) .svc-beat.is-compact .svc-beat__proof { display: none; }
html.js.motion-on #services:not(.svc-static) .svc-beat.is-bar { align-items: flex-end; justify-content: stretch; }
html.js.motion-on #services:not(.svc-static) .svc-beat.is-bar::before {
background: linear-gradient(0deg, var(--svc-scrim) 0%, var(--svc-scrim-mid) 24%, var(--svc-scrim-0) 46%);
}
html.js.motion-on #services:not(.svc-static) .svc-beat.is-bar .svc-beat__inner {
display: grid;
grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
column-gap: var(--s-7);
align-items: end;
width: 100%;
}
html.js.motion-on #services:not(.svc-static) .svc-beat.is-bar .svc-beat__inner > * { grid-column: 1; }
html.js.motion-on #services:not(.svc-static) .svc-beat.is-bar .svc-beat__details {
grid-column: 2;
grid-row: 1 / span 4;
align-self: end;
max-width: 40rem;
margin: 0;
}
html.js.motion-on #services:not(.svc-static) .svc-beat.is-bar .svc-beat__proof { display: none; }
html.js.motion-on #services:not(.svc-static) .svc-beat--close.is-bar .svc-beat__inner { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
html.js.motion-on #services:not(.svc-static) .svc-film__hud {
--svc-hud-h: 32px;
position: absolute;
top: clamp(12px, 2vh, 20px);
left: var(--gutter);
z-index: 3;
display: flex;
align-items: center;
gap: 8px;
}
@media (pointer: coarse) { html.js.motion-on #services:not(.svc-static) .svc-film__hud { --svc-hud-h: 40px; } }
html.js.motion-on #services:not(.svc-static) .svc-film__hud { opacity: var(--svc-hud-clear, 1); }
html.js.motion-on #services:not(.svc-static) .svc-film__hud.is-inert { pointer-events: none; }
html.js.motion-on #services:not(.svc-static) .svc-film__hud:has(:focus-visible) { opacity: 1; pointer-events: auto; }
html.js.motion-on #services:not(.svc-static) .svc-film__umd {
display: inline-flex;
align-items: center;
gap: 8px;
height: var(--svc-hud-h);
margin: 0;
max-width: none;
padding: 0 10px 0 8px;
border: 1px solid var(--c-white-14);
opacity: var(--svc-umd, 0);
font-variant-numeric: tabular-nums;
}
html.js.motion-on #services:not(.svc-static) .svc-film__tally { width: 6px; height: 6px; background: var(--c-red); }
html.js.motion-on #services:not(.svc-static) .svc-film__nav { display: flex; gap: 8px; }
html.js.motion-on #services:not(.svc-static) .svc-film__step {
position: relative;
display: inline-grid;
place-items: center;
width: var(--svc-hud-h);
height: var(--svc-hud-h);
padding: 0;
border: 1px solid var(--c-white-36);
border-radius: var(--r-1);
background: rgba(10, 10, 10, .72);
color: var(--c-white);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color var(--f4) var(--ease-control), opacity var(--f4) var(--ease-control);
}
html.js.motion-on #services:not(.svc-static) .svc-film__step .icon { width: 16px; height: 16px; }
html.js.motion-on #services:not(.svc-static) .svc-film__step[data-step="1"] .icon { transform: rotate(180deg); }
html.js.motion-on #services:not(.svc-static) .svc-film__step[aria-disabled="true"] { opacity: .35; cursor: default; }
@media (hover: hover) {
html.js.motion-on #services:not(.svc-static) .svc-film__step:not([aria-disabled="true"]):hover { border-color: var(--c-white); }
}
@media (pointer: coarse) {
html.js.motion-on #services:not(.svc-static) .svc-film__step::after { content: ''; position: absolute; inset: -2px; }
}
html.js.motion-on #services:not(.svc-static) .svc-film__hint {
position: absolute;
bottom: clamp(20px, 4vh, 40px);
left: 50%;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
max-width: none;
padding: 8px 14px;
border: 1px solid var(--c-white-36);
background: rgba(10, 10, 10, .72);
color: var(--c-white);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
transform: translateX(-50%);
opacity: var(--svc-hint, 1);
}
html.js.motion-on #services:not(.svc-static) .svc-film__hint .icon { transform: rotate(90deg); }
html.js.motion-on #services:not(.svc-static) .svc-film__progress {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
display: block;
height: 2px;
background: var(--c-white-14);
}
html.js.motion-on #services:not(.svc-static) .svc-film__progress > i {
position: absolute;
inset: 0;
background: var(--c-red);
transform: scaleX(var(--svc-p, 0));
transform-origin: left;
}
@media (max-width: 767px), (max-aspect-ratio: 4 / 5) {
#services { --svc-band: clamp(15.5rem, 44%, 25rem); }
html.js.motion-on #services:not(.svc-static) .svc-film__stage {
grid-template: "screen" minmax(0, 1fr) "band" var(--svc-band) / minmax(0, 1fr);
}
html.js.motion-on #services:not(.svc-static) .svc-film__beats { grid-area: band; }
html.js.motion-on #services:not(.svc-static) .svc-beat {
align-items: flex-start;
justify-content: flex-start;
padding: var(--s-5) var(--gutter) var(--s-4);
}
html.js.motion-on #services:not(.svc-static) .svc-beat::before { display: none; }
html.js.motion-on #services:not(.svc-static) .svc-beat__inner { width: 100%; max-width: 36rem; }
html.js.motion-on #services:not(.svc-static) .svc-beat__title { margin-top: var(--s-2); font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem); }
html.js.motion-on #services:not(.svc-static) .svc-beat__one { margin-top: 6px; }
html.js.motion-on #services:not(.svc-static) .svc-beat__details { font-size: .875rem; line-height: 1.5; }
html.js.motion-on #services:not(.svc-static) .svc-beat__proof { margin-top: var(--s-2); font-size: .75rem; }
html.js.motion-on #services:not(.svc-static) .svc-beat--close .svc-beat__inner { gap: var(--s-4); }
html.js.motion-on #services:not(.svc-static) .svc-beat.is-compact .svc-beat__proof { display: none; }
html.js.motion-on #services:not(.svc-static) .svc-beat.is-tight .svc-beat__details { display: none; }
}
@media (min-width: 768px) and (min-aspect-ratio: 4 / 5) and (max-height: 620px) {
html.js.motion-on #services:not(.svc-static) .svc-beat__title { font-size: clamp(1.4rem, 1rem + 1.4vw, 1.9rem); }
html.js.motion-on #services:not(.svc-static) .svc-beat__details { font-size: .875rem; line-height: 1.5; }
html.js.motion-on #services:not(.svc-static) .svc-beat__proof { display: none; }
}
@media (forced-colors: active) {
#services .svc-beat::before { display: none; }
#services .svc-film__tally,
#services .svc-film__progress > i { forced-color-adjust: none; background: CanvasText; }
}
/* sections/software.css */
#software { --mv-span: calc((100% - 11 * var(--gap)) / 12); }
@media (min-width: 1024px) {
#software .h2 { max-width: calc(var(--mv-span) * 8 + 7 * var(--gap)); }
#software .mv__lead { max-width: min(60ch, calc(var(--mv-span) * 8 + 7 * var(--gap))); }
}
#software .mv {
--mv-g: 12px;
--mv-umd-h: 24px;
--mv-ratio: .625;
position: relative;
display: grid;
gap: var(--s-6) var(--gap);
margin-top: var(--s-7);
}
#software .mv[data-live="magic"] { --mv-ratio: calc(939 / 1616); }
#software .mv[data-live="led"] { --mv-ratio: calc(1132 / 1920); }
#software .mv__sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mv-g); }
#software .mv__tile--wide { grid-column: 1 / -1; }
@media (max-width: 767px) {
#software .mv { --mv-g: 8px; --mv-umd-h: 20px; }
}
@media (width >= 1024px), (width >= 600px) and (orientation: landscape) {
#software .mv { container-type: inline-size; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
#software .mv__pgm { grid-column: 1 / 9; }
#software .mv__sources {
grid-column: 9 / 13;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, minmax(0, 1fr));
height: calc(((100cqw - 11 * var(--gap)) / 12 * 8 + 7 * var(--gap)) * var(--mv-ratio));
}
#software .mv__tile > img { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
}
@media (width < 600px), (width < 1024px) and (orientation: portrait) {
#software .mv.is-in > .mv__sources { position: absolute; inset: 0 0 auto; margin-top: calc(var(--mv-ratio) * 100% + 16px); }
#software .mv.is-in .mv__shot { margin-bottom: calc(3 * ((100% - 2 * var(--mv-g)) / 3 * .625 + 4px + var(--mv-umd-h)) + 2 * var(--mv-g) + 16px); }
#software .mv__sources { container-type: inline-size; }
#software .mv__sources > .mv__tile--wide > img { aspect-ratio: auto; height: calc((100cqw - 2 * var(--mv-g)) / 3 * .625); }
}
#software .mv__pgm { border: 0; background: none; overflow: visible; }
#software .mv__pgm::after { content: none; }
#software .mv__pgm > .monitor__umd {
display: block;
max-width: calc(100% - 8.5rem);
overflow: hidden;
text-overflow: ellipsis;
line-height: 24px;
background: var(--c-red);
}
html:not(.js) #software .mv__pgm > :is(.monitor__umd, .monitor__tc) { display: none; }
@media (max-width: 479px) {
#software .mv__pgm > :is(.umd, .tc) { font-size: .625rem; letter-spacing: .1em; padding-inline: 6px; }
}
#software .mv__shot { position: relative; margin: 0; aspect-ratio: 16 / 10; background: var(--c-black); }
#software #mv-magic .mv__shot { aspect-ratio: 1616 / 939; }
#software #mv-led .mv__shot { aspect-ratio: 1920 / 1132; }
#software .mv__shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#software .mv__shot::before,
#software .mv__shot::after { content: ''; position: absolute; z-index: 1; inset: 0; border: 1px solid var(--c-white-14); pointer-events: none; }
#software .mv__shot::after { inset: 5%; border-color: var(--c-white-12); }
#software .mv__pgm.is-waiting .mv__shot > * { visibility: hidden; }
#software .mv__callout {
position: absolute;
z-index: 3;
left: var(--x);
top: var(--y);
display: grid;
place-items: center;
width: 24px;
height: 24px;
margin: -12px 0 0 -12px;
border-radius: 50%;
background: var(--c-white);
box-shadow: 0 0 0 2px var(--c-black);
color: var(--c-black);
font-size: .75rem;
font-weight: 600;
line-height: 1;
-webkit-tap-highlight-color: transparent;
transition: box-shadow var(--f4) var(--ease-control), opacity var(--f4) var(--ease-control);
}
#software .mv__callout::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
#software .mv__callout.is-hot { box-shadow: 0 0 0 2px var(--c-black), 0 0 0 4px var(--c-white); }
#software .mv__region {
position: absolute;
z-index: 2;
inset: 0;
opacity: 0;
pointer-events: none;
background: var(--c-black-72);
clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--x1, 0) var(--y1, 0), var(--x1, 0) var(--y2, 0), var(--x2, 0) var(--y2, 0), var(--x2, 0) var(--y1, 0), var(--x1, 0) var(--y1, 0));
transition: opacity var(--f4) var(--ease-control);
}
#software .mv__region::after {
content: '';
position: absolute;
left: var(--x1, 0);
top: var(--y1, 0);
width: calc(var(--x2, 0%) - var(--x1, 0%));
height: calc(var(--y2, 0%) - var(--y1, 0%));
outline: 1px solid var(--c-white-72);
}
#software .mv__region.is-hot { opacity: 1; }
#software .mv__cap { display: none; }
@media (width < 1280px), (hover: none) {
#software .mv__cap {
position: absolute;
z-index: 4;
inset: auto 1px 1px;
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
column-gap: var(--s-3);
align-items: center;
padding: var(--s-2) var(--s-3);
background: var(--c-black);
color: var(--c-white);
font-size: var(--fs-small);
line-height: 1.45;
visibility: hidden;
opacity: 0;
transition: opacity var(--f4) var(--ease-control), visibility 0s var(--f4);
}
#software .mv__cap.is-top { inset: 24px 1px auto; }
#software .has-hot > .mv__callout:not(.is-hot) { opacity: 0; pointer-events: none; }
#software .mv__cap.is-hot { visibility: visible; opacity: 1; transition-delay: 0s; }
#software .mv__cap::before {
content: attr(data-n);
display: grid;
place-items: center;
height: 24px;
border-radius: 50%;
background: var(--c-white);
color: var(--c-black);
font-size: .75rem;
font-weight: 600;
line-height: 1;
}
}
@media (width < 480px) {
#software .mv__cap { font-size: .8125rem; line-height: 1.4; padding-inline: var(--s-2); column-gap: var(--s-2); }
}
#software .mv__text { display: grid; gap: var(--s-6); padding-top: var(--s-6); }
@media (min-width: 1280px) {
#software .mv__text { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-7); }
}
#software .mv__copy > * + * { margin-top: var(--s-4); }
#software .mv__copy > .h3 { margin-top: var(--s-2); }
#software .mv__copy > .lead { margin-top: var(--s-3); }
#software .mv__demo { font-weight: 600; }
#software :is(.mv__demo, .sw__more) a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 5px; }
#software .mv__callouts { counter-reset: mv; display: grid; gap: var(--s-3); }
#software :is(.mv__callouts, .mv__bullets) > li { font-size: .9375rem; line-height: 1.6; }
#software .mv__callouts > li {
counter-increment: mv;
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
column-gap: var(--s-3);
color: var(--fg-2);
transition: color var(--f4) var(--ease-control);
}
#software .mv__callouts > li::before {
content: counter(mv);
display: grid;
place-items: center;
height: 24px;
border: 1px solid var(--c-white-36);
border-radius: 50%;
color: var(--fg);
font-size: .75rem;
font-weight: 600;
line-height: 1;
}
#software .mv__callouts > li.is-hot { color: var(--fg); }
#software .mv__callouts > li.is-hot::before { background: var(--c-white); border-color: var(--c-white); color: var(--c-black); }
#software .mv__callouts + .mv__bullets { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
#software .mv__bullets { display: grid; gap: var(--s-2); }
#software .mv__bullets > li { position: relative; padding-left: 24px; }
#software .mv__bullets > li::before { content: ''; position: absolute; left: 0; top: calc(.8em - 1px); width: 12px; height: 2px; background: var(--c-red); }
#software .mv:not(.is-in) .mv__program + .mv__program { margin-top: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--rule); }
html:not(.js) #software .mv__sources { display: none; }
#software .mv__tile { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--c-black); -webkit-tap-highlight-color: transparent; }
#software .mv__tile::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--c-white-14); pointer-events: none; transition: border-color var(--f4) var(--ease-control); }
#software .mv__tile > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; opacity: .62; transition: opacity var(--f4) var(--ease-control); }
#software .mv__tile > .umd { display: block; height: var(--mv-umd-h); overflow: hidden; text-overflow: ellipsis; line-height: var(--mv-umd-h); }
#software .mv__tile.is-live > .umd { background: var(--c-red); }
#software .mv__tile:is(.is-live, :focus-visible) > img { opacity: 1; }
#software .mv__tile.is-live::after { border-color: var(--c-white-45); }
@media (hover: hover) {
#software .mv__tile:hover > img { opacity: 1; }
#software .mv__tile:hover::after { border-color: var(--c-white-45); }
}
@media (max-width: 767px) {
#software .mv__tile > .umd { font-size: .625rem; letter-spacing: .12em; padding-inline: 6px; }
}
@media (width < 768px), (width < 1280px) and (orientation: landscape), (1024px <= width < 1280px) {
#software .mv__brand { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
#software .mv__flip { position: fixed; z-index: var(--z-float); left: var(--l); top: var(--t); width: var(--w); height: var(--h); object-fit: cover; transform-origin: 0 0; pointer-events: none; }
#software .sw__open { margin-top: var(--s-9); padding-top: var(--s-7); border-top: 1px solid var(--rule); }
#software .sw__cards { display: grid; gap: var(--gap); margin-top: var(--s-6); }
@media (min-width: 768px) { #software .sw__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#software .sw__card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-2);
padding: var(--s-5);
border: 1px solid var(--rule);
border-radius: var(--r-1);
transition: border-color var(--f4) var(--ease-control);
}
#software .sw__name { font-size: 1.0625rem; line-height: 1.3; }
#software .sw__line { flex: 1 0 auto; color: var(--fg-2); font-size: var(--fs-small); line-height: 1.55; }
#software .sw__link { align-self: flex-start; min-height: 32px; margin-top: var(--s-2); font-size: .9375rem; font-weight: 600; text-underline-offset: 5px; }
#software .sw__link::after { content: ''; position: absolute; inset: 0; }
@media (hover: hover) {
#software .sw__card:hover { border-color: var(--c-white-45); }
#software .sw__card:hover .sw__link { text-decoration-thickness: 2px; }
}
#software .sw__more { margin-top: var(--s-6); }
#software .calc {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: var(--s-6);
margin-top: var(--s-9);
padding-top: clamp(48px, 2vw + 40px, 80px);
border-top: 1px solid var(--rule);
}
#software .calc__lede { margin-top: var(--s-3); max-width: 44ch; color: var(--fg-2); }
#software .calc__fields,
#software .calc__custom {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-5) var(--gap);
align-items: end;
}
#software .calc__panel { grid-column: 1 / -1; }
#software .calc__custom {
grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
margin-top: var(--s-5);
}
#software .calc__form .input { font-variant-numeric: tabular-nums; }
#software .calc__form .input:-moz-ui-invalid { box-shadow: none; }
#software .calc__preview {
container: calc-view / size;
display: grid;
place-items: center;
height: clamp(160px, 18vw, 300px);
padding: var(--s-5);
border: 1px solid var(--rule);
background: var(--c-black);
}
#software .calc__wall {
container: calc-wall / size;
position: relative;
aspect-ratio: var(--calc-ar, 3);
width: min(100cqw, 100cqh * var(--calc-ar, 3));
}
#software .calc__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
#software .calc__bg { fill: var(--c-panel); }
#software .calc__seams {
fill: none;
stroke: var(--c-white);
stroke-opacity: .18;
stroke-width: 1;
shape-rendering: crispEdges;
}
#software .calc__cross,
#software .calc__ring { fill: none; stroke: var(--c-white-12); stroke-width: 1; }
#software .calc__edge { fill: none; stroke: var(--c-white-45); stroke-width: 1; shape-rendering: crispEdges; }
#software .calc__corner {
position: absolute;
color: var(--c-white-45);
font-size: .625rem;
line-height: 1;
pointer-events: none;
}
#software .calc__corner:nth-of-type(1) { top: 6px; left: 7px; }
#software .calc__corner:nth-of-type(2) { top: 6px; right: 6px; }
#software .calc__corner:nth-of-type(3) { bottom: 6px; left: 7px; }
#software .calc__corner:nth-of-type(4) { bottom: 6px; right: 6px; }
@container calc-wall (max-width: 96px) or (max-height: 44px) {
#software .calc__corner { display: none; }
}
#software .calc__out {
container-type: inline-size;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-5) var(--gap);
margin-top: var(--s-6);
}
#software .calc__cell { min-width: 0; padding-top: var(--s-3); border-top: 1px solid var(--rule); }
#software .calc__out dt {
color: var(--fg-2);
font-size: var(--fs-label);
font-weight: 600;
line-height: 1.33;
letter-spacing: .14em;
text-transform: uppercase;
}
#software .calc__out dd {
margin: 6px 0 0;
font-size: clamp(1rem, 3.2cqi, 1.25rem);
font-weight: 600;
line-height: 1.25;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
#software .calc__u { color: var(--fg-2); font-size: .875rem; font-weight: 500; }
#software .calc__summary { margin-top: var(--s-6); max-width: 60ch; }
#software .calc__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3) var(--s-5);
margin-top: var(--s-5);
}
#software .calc__note { max-width: 60ch; color: var(--fg-2); }
#software .calc__tail { white-space: nowrap; }
@media (min-width: 768px) {
#software .calc__out { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
#software .calc {
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: auto auto 1fr;
column-gap: var(--gap);
}
#software :is(.calc__intro, .calc__form, .calc__note) { grid-column: 1 / span 5; }
#software .calc__result { grid-column: 6 / span 7; grid-row: 1 / span 3; }
#software .calc__note { align-self: end; }
}
@media (min-width: 1440px) {
#software :is(.calc__intro, .calc__form, .calc__note) { grid-column: 1 / span 4; }
}
html:not(.js) #software :is(.calc__form, .calc__actions) { display: none; }
@media (forced-colors: active) {
#software .mv__tile.is-live::after { border: 3px solid Highlight; }
#software .mv__callout { border: 2px solid CanvasText; }
#software .mv__region::after { outline-color: Highlight; }
#software .calc__preview { forced-color-adjust: none; }
}
/* sections/method.css */
#method {
--col: calc((100% - 11 * var(--gap)) / 12);
--band-above: 80px;
--step-pt: var(--s-5);
--num-h: 18px;
--key-gap: var(--s-5);
--cue-gap: var(--s-5);
--wave-y: calc(var(--step-pt) + var(--num-h) / 2 + 3px);
--band-h: calc(var(--band-above) + var(--step-pt) + var(--num-h) + var(--key-gap) + var(--fs-step) + var(--cue-gap));
}
@media (max-width: 767px) {
#method {
--wave-y: calc(var(--step-pt) * .75);
--band-h: calc(var(--band-above) + var(--step-pt) + var(--num-h) + var(--key-gap) / 2);
}
}
@media (min-width: 1024px) {
#method .method__title { max-width: calc(var(--col) * 9 + 8 * var(--gap)); }
#method .method__lead { max-width: min(60ch, calc(var(--col) * 7 + 6 * var(--gap))); }
}
#method .method__flow {
position: relative;
isolation: isolate;
margin-top: var(--s-6);
padding-top: var(--band-above);
touch-action: manipulation;
}
#method .method__band {
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--band-h);
container-type: inline-size;
pointer-events: none;
}
#method .method__wall, #method .method__hud {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
#method .method__wall { opacity: 0; }
#method .method__hud { display: none; overflow: visible; }
#method .method__flow.is-live .method__wall { opacity: 1; }
#method .method__flow.is-live .method__hud { display: block; }
#method .method__band.is-in .method__motif { visibility: hidden; }
#method .method__hud-bk { fill: none; stroke: var(--c-black); stroke-width: 1.5; stroke-linecap: square; }
#method .method__hud-strip { fill: var(--c-black); }
#method .method__hud-tally { fill: var(--c-red); }
#method .method__hud text { fill: var(--c-white); font: 600 12px var(--font); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
#method .method__hud-check { color: var(--c-white); }
#method .method__hint {
position: absolute;
top: -14px;
left: 0;
z-index: 2;
max-width: none;
color: var(--fg-2);
font-size: var(--fs-label);
font-weight: 600;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
visibility: hidden;
pointer-events: none;
transition: opacity var(--f4) var(--ease-control);
}
#method .method__flow.is-live .method__hint { visibility: visible; }
#method .method__flow.is-hinted .method__hint { opacity: 0; }
#method .method__hint-touch { display: none; }
@media (pointer: coarse) {
#method .method__hint-fine { display: none; }
#method .method__hint-touch { display: inline; }
}
#method .method__motif {
position: absolute;
top: calc(var(--band-above) + var(--wave-y) - 100cqw * 19.5 / 507);
left: 0;
width: 100%;
aspect-ratio: 507 / 47;
}
@supports not (width: 1cqw) {
#method .method__motif { top: calc(var(--band-above) + var(--wave-y) - 3.5vw); }
}
#method .method__clip {
position: absolute;
inset: 0;
clip-path: inset(0 calc(100% - var(--p, 1) * 100%) 0 0);
}
#method .method__flow.is-revealing .method__clip {
-webkit-mask-image: linear-gradient(90deg, var(--c-black) calc(var(--p, 1) * 100% - 3%), transparent calc(var(--p, 1) * 100%));
mask-image: linear-gradient(90deg, var(--c-black) calc(var(--p, 1) * 100% - 3%), transparent calc(var(--p, 1) * 100%));
}
#method .method__ribbon,
#method .method__point {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
#method .method__dot {
transform-box: fill-box;
transform-origin: center;
transform: scale(var(--method-dot, 1));
}
#method .method__steps {
position: relative;
z-index: 1;
display: grid;
}
#method .method__step {
min-width: 0;
padding: var(--step-pt) 0 var(--s-7);
border-top: 1px solid var(--fg);
transition: border-color var(--f4) var(--ease-control), box-shadow var(--f4) var(--ease-control);
}
#method .method__step:last-child { padding-bottom: 0; }
@media (min-width: 768px) {
#method .method__steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--gap);
}
#method .method__step { padding-bottom: 0; }
#method .method__flow.is-live .method__step[data-framed] { border-top-color: var(--c-red); box-shadow: 0 -1px 0 var(--c-red); }
}
#method .method__key {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--key-gap);
max-width: none;
}
#method .method__num {
padding: 3px 5px 3px 6px;
background: var(--c-black);
color: var(--c-white);
font-size: var(--fs-label);
font-weight: 600;
line-height: 1;
letter-spacing: .14em;
font-variant-numeric: tabular-nums;
}
#method .method__key .step { overflow-wrap: break-word; }
#method .method__cue { margin-top: var(--cue-gap); }
#method .method__line { margin-top: var(--s-3); text-wrap: balance; }
#method .method__body { margin-top: var(--s-4); }
#method .method__get-label { margin-top: var(--s-6); }
#method .method__get {
margin-top: var(--s-3);
border-bottom: 1px solid var(--rule);
}
#method .method__get > li {
padding: 11px 0 12px;
border-top: 1px solid var(--rule);
font-size: var(--fs-small);
font-weight: 600;
line-height: 1.5;
}
#method .method__ways { margin-top: var(--s-9); }
#method .method__ways-list {
display: grid;
margin-top: var(--s-6);
border-bottom: 1px solid var(--rule);
}
#method .method__way {
min-width: 0;
padding: var(--s-5) 0 var(--s-6);
border-top: 1px solid var(--rule);
}
@media (min-width: 768px) {
#method .method__ways-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--gap);
border-bottom: 0;
}
#method .method__way { padding-bottom: 0; }
}
#method .method__way-title {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -.005em;
}
#method .method__way-text {
margin-top: var(--s-2);
color: var(--fg-2);
}
#method .method__close {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-6);
margin-top: var(--s-10);
text-align: center;
}
#method .method__close-line {
max-width: 24em;
font-weight: 600;
letter-spacing: -.01em;
text-wrap: balance;
}
@media (max-width: 767px) {
#method .method__ways { margin-top: var(--s-8); }
#method .method__close { margin-top: var(--s-9); }
}
@media (forced-colors: active) {
#method .method__wall, #method .method__hud, #method .method__flow.is-live .method__hud, #method .method__hint { display: none; }
#method .method__band.is-in .method__motif { visibility: visible; }
#method .method__flow.is-live .method__step[data-framed] { border-top-color: CanvasText; box-shadow: none; }
}
/* sections/contact.css */
#contact {
--col: calc((100% - 11 * var(--gap)) / 12);
}
@media (min-width: 1024px) {
#contact .contact__title { max-width: calc(var(--col) * 8 + 7 * var(--gap)); }
#contact .contact__lead { max-width: min(60ch, calc(var(--col) * 7 + 6 * var(--gap))); }
}
#contact .contact__picked { display: block; margin-top: var(--s-4); }
#contact .contact__direct {
display: grid;
gap: var(--s-6) var(--gap);
margin-top: var(--s-7);
padding-top: var(--s-6);
border-top: 1px solid var(--rule);
}
#contact .contact__line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-1) var(--s-5);
min-width: 0;
}
#contact .contact__email {
display: inline-flex;
align-items: center;
min-height: 44px;
max-width: 100%;
border-radius: var(--r-1);
color: var(--c-black);
font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: -.01em;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 6px;
overflow-wrap: anywhere;
}
@media (hover: hover) {
#contact .contact__email:hover { text-decoration-thickness: 3px; }
}
#contact .contact__copy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 var(--s-4);
}
#contact .contact__working {
flex-basis: 100%;
margin-top: var(--s-3);
color: var(--fg-2);
}
#contact .contact__clocks { display: flex; }
#contact .contact__clock { padding-right: var(--s-6); }
#contact .contact__clock + .contact__clock {
padding-left: var(--s-6);
border-left: 1px solid var(--rule);
}
#contact .contact__clock dt {
color: var(--fg-2);
font-size: var(--fs-label);
font-weight: 600;
line-height: 1.33;
letter-spacing: .2em;
text-transform: uppercase;
}
#contact .contact__clock dd {
margin: var(--s-2) 0 0;
font-size: var(--fs-h3);
font-weight: 600;
line-height: 1;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
}
#contact .contact__clock-cap {
margin-top: var(--s-3);
color: var(--fg-2);
font-size: var(--fs-legal);
font-weight: 500;
line-height: 1.5;
}
@media (min-width: 1024px) {
#contact .contact__direct { grid-template-columns: repeat(12, minmax(0, 1fr)); }
#contact .contact__line { grid-column: 1 / 8; }
#contact .contact__time { grid-column: 8 / -1; }
}
#contact .brief__builder {
display: grid;
gap: var(--s-7);
margin-top: var(--s-8);
}
@media (min-width: 1024px) {
#contact .brief__builder {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gap);
align-items: start;
}
#contact .brief { grid-column: 1 / 8; padding-right: var(--gap); }
#contact .brief__card {
grid-column: 8 / -1;
position: sticky;
top: calc(var(--header-h) + 24px);
}
}
#contact .brief { display: grid; gap: var(--s-7); min-width: 0; }
#contact .brief__set {
min-width: 0;
padding-top: var(--s-5);
border-top: 1px solid var(--fg);
}
#contact .brief__legend,
#contact .brief__qlabel {
float: left;
width: 100%;
padding: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: normal;
}
#contact .brief__legend + *,
#contact .brief__qlabel + * { clear: both; }
#contact .brief__legend { margin-bottom: var(--s-6); }
#contact .brief__step {
display: block;
color: var(--fg-2);
font-size: var(--fs-label);
font-weight: 600;
line-height: 1.33;
letter-spacing: .2em;
text-transform: uppercase;
}
#contact .brief__title {
display: flex;
align-items: center;
gap: var(--s-4);
margin-top: var(--s-2);
font-size: var(--fs-h3);
font-weight: 600;
line-height: 1.2;
letter-spacing: -.01em;
}
#contact .brief__dot {
flex: none;
width: 6px;
height: 6px;
margin-left: auto;
border: 1.5px solid var(--c-black);
border-radius: 50%;
}
#contact .brief__set[data-answered] .brief__dot { background: var(--c-black); }
#contact .brief__set > :not(legend) + :not(legend) { margin-top: 28px; }
#contact .brief__q { min-width: 0; }
#contact .brief__qlabel {
margin-bottom: var(--s-3);
color: var(--fg);
font-size: .8125rem;
font-weight: 600;
line-height: 1.4;
}
#contact .brief__q:has(> .brief__qhint) > .brief__qlabel { margin-bottom: var(--s-1); }
#contact .brief__qhint { margin: 0 0 var(--s-3); }
#contact .brief__chips {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
}
#contact .brief__count { align-self: flex-end; margin-top: calc(-1 * var(--s-1)); }
#contact .brief__pair { display: grid; gap: 28px; }
@media (min-width: 640px) {
#contact .brief__pair {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--gap);
}
}
#contact .brief__card {
min-width: 0;
padding: var(--s-5);
border-radius: var(--r-1);
}
@media (min-width: 768px) {
#contact .brief__card { padding: var(--s-6); }
}
#contact .brief__to {
display: flex;
align-items: center;
gap: var(--s-3);
max-width: none;
margin-top: var(--s-4);
padding: var(--s-4) 0;
border-top: 1px solid var(--rule);
font-size: var(--fs-small);
line-height: 1.4;
overflow-wrap: anywhere;
}
#contact .brief__avatar {
flex: none;
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 0;
}
#contact .brief__addr { display: inline-block; max-width: 100%; }
#contact .brief__label { font-weight: 600; }
#contact .brief__to .brief__label { color: var(--fg-2); }
#contact .brief__subject-row {
max-width: none;
padding: var(--s-4) 0;
border-block: 1px solid var(--rule);
font-size: var(--fs-small);
line-height: 1.5;
overflow-wrap: anywhere;
}
#contact .brief__body {
margin-top: var(--s-5);
color: var(--c-white-80);
font: 400 var(--fs-small)/1.6 var(--font);
font-variant-numeric: tabular-nums;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
@media (min-width: 1024px) {
#contact .brief__body {
max-height: max(9.6em, calc(100vh - var(--header-h) - 31rem));
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--c-white-36) transparent;
}
}
#contact .brief__actions {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
margin-top: var(--s-5);
padding-top: var(--s-5);
border-top: 1px solid var(--rule);
}
@media (max-width: 479px) {
#contact .brief__actions > .btn { flex: 1 1 100%; }
}
#contact .brief__status {
display: block;
min-height: 3em;
margin-top: var(--s-3);
}
#contact .brief__privacy { margin-top: var(--s-2); color: var(--fg-2); }
#contact .brief__privacy a { color: var(--fg); }
#contact .brief__send {
--seed-x: 14px;
isolation: isolate;
}
#contact .brief__seed {
position: absolute;
top: 50%;
left: calc(var(--seed-x) - 5px);
width: 8px;
height: 8px;
margin-top: -4px;
border-radius: 50%;
background: var(--c-gold);
}
#contact .brief__ink {
position: absolute;
inset: -1px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 25px;
border-radius: inherit;
background: var(--c-gold);
color: var(--c-black);
pointer-events: none;
}
#contact .brief__send.is-waiting {
background: transparent;
border-color: var(--c-white);
color: var(--c-white);
}
#contact .brief__send.is-waiting .brief__ink { clip-path: circle(0% at var(--seed-x) 50%); }
#contact .brief__send.is-waiting.is-in .brief__ink {
clip-path: circle(150% at var(--seed-x) 50%);
transition: clip-path 420ms var(--ease-land);
}
#contact .brief__nojs {
margin-top: var(--s-8);
padding-top: var(--s-5);
border-top: 1px solid var(--fg);
}
html.js #contact .brief__nojs { display: none; }
html:not(.js) #contact .brief__builder,
html:not(.js) #contact .contact__copy,
html:not(.js) #contact .contact__time { display: none; }
#contact .brief__nojs-email {
display: inline-flex;
align-items: center;
min-height: 44px;
max-width: 100%;
border-radius: var(--r-1);
margin-top: var(--s-4);
color: var(--c-black);
font-size: var(--fs-kicker);
font-weight: 600;
line-height: 1.25;
letter-spacing: -.01em;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 6px;
overflow-wrap: anywhere;
}
#contact .brief__nojs-lead { margin-top: var(--s-6); font-weight: 600; }
#contact .brief__nojs-list {
max-width: 40rem;
margin-top: var(--s-3);
border-bottom: 1px solid var(--rule);
}
#contact .brief__nojs-list > li {
padding: 11px 0 12px;
border-top: 1px solid var(--rule);
}
@media (forced-colors: active) {
#contact .brief__card { border: 1px solid CanvasText; }
#contact .brief__ink, #contact .brief__seed { display: none; }
#contact .brief__dot { border-color: CanvasText; }
#contact .brief__set[data-answered] .brief__dot { background: CanvasText; }
}
/* sections/footer.css */
.site-footer {
border-top: 1px solid var(--rule);
padding-block: 64px;
}
@media (max-width: 767px) {
.site-footer { padding-block: 48px; }
}
.site-footer__top {
display: grid;
gap: 40px;
}
@media (min-width: 768px) {
.site-footer__top {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gap);
align-items: start;
}
.site-footer__brand { grid-column: 1 / 6; }
.site-footer__aside { grid-column: 7 / 13; }
}
.site-footer__brand { --lockup-w: 200px; }
@media (min-width: 768px) {
.site-footer__brand { --lockup-w: 240px; }
}
.site-footer__lockup {
width: var(--lockup-w);
height: auto;
margin-left: calc(var(--lockup-w) * -32 / 480);
}
.site-footer__aside {
display: grid;
gap: 20px;
justify-items: start;
}
.site-footer__tag { max-width: none; }
.site-footer__links {
display: flex;
flex-wrap: wrap;
gap: 0 32px;
}
.site-footer__links a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: 1rem;
font-weight: 500;
text-decoration: underline;
text-decoration-color: var(--c-white-36);
text-decoration-thickness: 1px;
text-underline-offset: 5px;
transition: text-decoration-color var(--f4) var(--ease-control);
}
.site-footer__links .ext .icon { margin-left: .4em; }
@media (hover: hover) {
.site-footer__links a:hover { text-decoration-color: var(--c-white); text-decoration-thickness: 2px; }
}
.site-footer__legal {
max-width: none;
margin-top: 56px;
padding-top: 24px;
border-top: 1px solid var(--rule);
}
.site-footer__base {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-top: 16px;
}
.site-footer__copy { max-width: 68ch; }
.site-footer__controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 24px;
margin-left: -8px;
}
.site-footer__back {
gap: 8px;
padding: 0 8px;
font-size: .875rem;
}
@media (min-width: 1024px) {
.site-footer__base {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
column-gap: 32px;
}
.site-footer__copy { flex: 0 1 68ch; }
.site-footer__controls { margin-left: auto; margin-right: -8px; }
}