/*
Purpose: Provide the global layout, typography, navigation, and accessibility foundation.
Rationale: The site needs a fast, durable baseline that works without JavaScript.
Notes: Motion is removed when a visitor requests reduced motion.
*/
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: 6rem; }
html[data-theme="dark"] { color-scheme: dark; }
body { background: var(--paper); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; margin: 0; min-width: 320px; overflow-x: hidden; }
img { display: block; height: auto; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.shell { margin-inline: auto; max-width: var(--shell); padding-inline: var(--gutter); width: 100%; }
.skip-link { background: var(--surface); border: 1px solid var(--text); left: 1rem; padding: .75rem 1rem; position: fixed; top: -5rem; z-index: 100; }
.skip-link:focus { top: 1rem; }
.site-header { background: var(--header); border-bottom: 1px solid transparent; backdrop-filter: blur(18px); position: sticky; top: 0; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; z-index: 20; }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 30px var(--header-shadow); }
.nav-shell { align-items: center; display: flex; justify-content: space-between; min-height: 5.25rem; }
.brand { align-items: center; display: inline-flex; gap: .8rem; text-decoration: none; }
.brand-mark { height: 2rem; position: relative; transform: rotate(45deg); width: 2rem; }
.brand-mark::before, .brand-mark::after { background: var(--orange); border-radius: .12rem; content: ""; inset: .78rem 0; position: absolute; }
.brand-mark::after { transform: rotate(90deg); }
.brand-name { font-size: .96rem; font-weight: 760; letter-spacing: -.02em; line-height: 1; }
.brand-name span { color: var(--text-muted); font-weight: 500; }
.primary-nav { align-items: center; display: flex; gap: clamp(1rem, 2.5vw, 2.2rem); }
.primary-nav a { font-size: .85rem; font-weight: 650; text-decoration: none; }
.primary-nav a:not(.nav-cta) { padding-block: .5rem; position: relative; }
.primary-nav a:not(.nav-cta)::after { background: var(--orange); bottom: .2rem; content: ""; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: right; transition: transform .2s ease; width: 100%; }
.primary-nav a:not(.nav-cta):hover::after, .primary-nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.eyebrow { align-items: center; display: flex; font-size: .76rem; font-weight: 720; gap: .65rem; letter-spacing: .08em; margin: 0 0 1.3rem; text-transform: uppercase; }
.eyebrow::before { background: var(--orange); content: ""; height: .55rem; width: .55rem; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.045em; line-height: .98; }
h1, h2 { font-weight: 650; }
h2 { font-size: clamp(3rem, 6vw, 5.75rem); }
.section-intro { color: var(--text-soft); font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.65; max-width: 39rem; }
.theme-toggle { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--text); cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 2.15rem; justify-content: center; padding: 0; transition: background .2s ease, border-color .2s ease, color .2s ease; width: 2.15rem; }
.theme-toggle:hover { background: var(--surface); border-color: var(--text-muted); }
.theme-toggle svg { display: block; height: 1rem; width: 1rem; }
.theme-toggle .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
.button { align-items: center; border: 1px solid var(--text); border-radius: .3rem; cursor: pointer; display: inline-flex; font-size: .88rem; font-weight: 700; gap: 1.4rem; justify-content: space-between; min-height: 3.2rem; padding: .8rem 1.15rem; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--orange); border-color: var(--orange); color: var(--white); }
.button-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.button-dark { background: var(--ink); border-color: var(--ink); color: var(--white); }
.button-dark:hover { background: var(--orange); border-color: var(--orange); }
.button-light { background: var(--white); border-color: var(--white); color: var(--ink); }
.button-light:hover { background: var(--orange-soft); border-color: var(--orange-soft); }
.arrow { font-size: 1.15rem; line-height: 1; }
.text-link { align-items: center; display: inline-flex; font-size: .88rem; font-weight: 720; gap: .55rem; text-decoration-thickness: 1px; text-underline-offset: .28rem; }
.text-link .arrow { transition: transform .2s ease; }
.text-link:hover .arrow { transform: translateX(4px); }
.site-footer { background: var(--ink); color: var(--white); padding-block: 4rem 2rem; }
.footer-main { align-items: end; display: flex; justify-content: space-between; padding-bottom: 4rem; }
.footer-main h2 { font-size: clamp(2.6rem, 5vw, 4.75rem); margin: 1rem 0 0; max-width: 12ch; }
.footer-main .eyebrow { color: #bbb9b5; }
.footer-bottom { align-items: center; border-top: 1px solid var(--line-dark); display: flex; font-size: .76rem; justify-content: space-between; padding-top: 1.5rem; }
.footer-bottom p { color: #bbb9b5; margin: 0; }
.footer-bottom a { text-decoration: none; }
[data-reveal] { opacity: 1; transform: none; }
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
html[data-theme="dark"] .button-dark { background: var(--white); border-color: var(--white); color: var(--ink); }
html[data-theme="dark"] .button-dark:hover { background: var(--orange-soft); border-color: var(--orange-soft); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } .js [data-reveal] { opacity: 1; transform: none; } .marquee-track { animation: none; width: 100%; }.marquee-group:first-child { flex: 0 0 auto; margin-inline: auto; padding-right: 0; }.marquee-group[aria-hidden="true"] { display: none; } }
@media (max-width: 720px) { .nav-shell { min-height: 4.5rem; }.primary-nav a:nth-child(2), .primary-nav a:nth-child(3) { display: none; }.primary-nav { gap: .65rem; }.brand-name span { display: none; }.footer-main { align-items: start; flex-direction: column; gap: 2rem; }.footer-bottom { align-items: flex-start; gap: 1rem; }.footer-bottom p { max-width: 24ch; } }
@media (max-width: 390px) { .primary-nav a:not(.nav-cta) { display: none; } }