@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:block;src:url(/assets/fonts/unbounded.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:block;src:url(/assets/fonts/bricolage-grotesque.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-garamond-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/space-grotesk-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* R97 Media · site stylesheet · built from the brand tokens (14 Sep 2026) */
:root {
  --plum: #2B1846; --plum-950: #140A24; --plum-900: #1E1034; --plum-700: #3B2461; --plum-600: #4E3380; --plum-500: #65479E; --plum-400: #8468B8; --plum-300: #A992CE; --plum-200: #CDBFE3; --plum-100: #E9E2F3; --plum-50: #F5F1FA;
  --tang: #F0532D; --tang-800: #9E2F14; --tang-700: #C23E1C; --tang-600: #DA4823; --tang-400: #F4785A; --tang-300: #F89C86; --tang-200: #FBC4B6; --tang-100: #FDE3DB; --tang-50: #FEF2EE;
  --cream: #FFF3E4; --sand-0: #FFFFFF; --sand-50: #FFF9F2; --sand-200: #F1E7DA; --sand-300: #DED3C6; --sand-400: #B9AFA5; --sand-500: #8F867E; --sand-600: #6B635C; --sand-700: #4A443F; --sand-800: #2E2A27; --graphite: #16141A;
  --success: #1F8A5B; --warning: #D98A0B; --error: #C6312B;
  --ink: var(--plum-900); --ink-2: var(--sand-600); --line: var(--sand-200);
  --font-display: 'Unbounded', 'Arial Black', 'Segoe UI', sans-serif;
  --font-body: 'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --text-display: clamp(2.5rem, 4vw + 1rem, 4rem);
  --text-h2: clamp(1.75rem, 2.2vw + 0.9rem, 2.75rem);
  --text-h3: clamp(1.25rem, 0.6vw + 1rem, 1.5rem);
  --text-lead: clamp(1.125rem, 0.5vw + 1rem, 1.3rem);
  --text-body: 1.0625rem; --text-small: 0.875rem; --text-label: 0.75rem;
  --gutter: clamp(16px, 4vw, 40px);
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --pill: 999px;
  --shadow-card: 0 1px 2px rgba(20,10,36,0.06), 0 8px 24px rgba(20,10,36,0.08);
  --shadow-float: 0 16px 48px rgba(20,10,36,0.22);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --fast: 160ms; --base: 240ms;
  --slash: skewX(-23deg);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); font-size: var(--text-body); line-height: 1.6; color: var(--ink); background: var(--cream); overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--tang-700); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--tang-800); }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: inherit; text-wrap: balance; }
h1 { font-weight: 800; font-size: var(--text-display); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-weight: 700; font-size: var(--text-h2); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-weight: 700; font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--tang-300); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--plum); color: var(--cream); padding: 10px 16px; border-radius: var(--pill); z-index: 100; text-decoration: none; }
.skip:focus { top: 16px; }
.container { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; }
.measure { max-width: 62ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow::before { content: ""; width: 10px; height: 14px; background: var(--tang); transform: var(--slash); border-radius: 1px; flex: none; }
.on-plum .eyebrow { color: var(--plum-200); }
.lead { font-size: var(--text-lead); font-weight: 500; line-height: 1.5; color: var(--ink-2); }
.on-plum .lead { color: var(--plum-200); }
.on-plum { background: var(--plum); color: var(--cream); }
.on-plum a { color: var(--tang-400); }
.on-plum a:hover { color: var(--tang-300); }
.on-tang { background: var(--tang); color: var(--plum); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: var(--pill); font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--tang); color: var(--plum); }
.btn-primary:hover { background: var(--tang-600); color: var(--plum); box-shadow: 0 8px 20px rgba(240,83,45,0.28); }
.btn-secondary { background: transparent; color: var(--plum); border-color: var(--plum); }
.btn-secondary:hover { background: var(--plum); color: var(--cream); }
.on-plum .btn-secondary { color: var(--cream); border-color: var(--cream); }
.on-plum .btn-secondary:hover { background: var(--cream); color: var(--plum); }
.btn-ghost { background: transparent; color: var(--tang-700); padding-inline: 4px; min-height: 0; }
.btn-ghost:hover { color: var(--tang-800); transform: none; }
.btn-ghost svg { transition: transform var(--fast) var(--ease); }
.btn-ghost:hover svg { transform: translateX(3px); }
.on-plum .btn-ghost { color: var(--tang-400); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.brand svg { width: 132px; height: auto; }
.nav-links { display: none; align-items: center; gap: 32px; }
.nav-links a { font-weight: 500; font-size: 15.5px; color: var(--ink); text-decoration: none; position: relative; padding: 6px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tang); transform: var(--slash) scaleX(0); transform-origin: left; transition: transform var(--base) var(--ease); border-radius: 1px; }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: var(--slash) scaleX(1); }
.nav-cta { display: none; }
.burger { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; background: transparent; border-radius: var(--pill); cursor: pointer; color: var(--plum); }
.burger svg { width: 26px; height: 26px; }
@media (min-width: 900px) {
  .nav-links, .nav-cta { display: inline-flex; }
  .burger { display: none; }
}
.menu { position: fixed; inset: 0; z-index: 60; background: var(--plum); color: var(--cream); padding: var(--gutter); display: none; flex-direction: column; gap: 32px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.menu[data-open="true"] { display: flex; }
.menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.menu-top svg.logo { width: 132px; }
.menu-close { width: 48px; height: 48px; border: 0; background: var(--plum-700); color: var(--cream); border-radius: var(--pill); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.menu-close svg { width: 24px; height: 24px; }
.menu-links { display: flex; flex-direction: column; gap: 6px; }
.menu-links a { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 7vw, 2.5rem); letter-spacing: -0.02em; color: var(--cream); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--plum-600); }
.menu-links a[aria-current="page"] { color: var(--tang); }
.menu-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.menu-foot .btn { width: 100%; }
body[data-menu="open"] { overflow: hidden; }

/* hero */
.hero { padding-block: clamp(40px, 7vw, 96px) clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; } }
.hero-copy { display: flex; flex-direction: column; gap: 24px; }
.hero-copy .lead { max-width: 34em; }
.hero-note { font-size: var(--text-small); color: var(--ink-2); }
.hero-panel { position: relative; background: var(--plum); border-radius: var(--radius-xl); padding: clamp(24px, 4vw, 40px); min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; overflow: hidden; color: var(--cream); box-shadow: var(--shadow-float); }
.hero-panel .slashes { position: absolute; right: -40px; top: -40px; display: flex; gap: 22px; opacity: 0.16; pointer-events: none; }
.hero-panel .slashes i { display: block; width: 26px; height: 260px; background: var(--tang); transform: var(--slash); border-radius: 3px; }
.hero-sticker { position: relative; width: min(100%, 300px); }
.checklist { position: relative; display: flex; flex-direction: column; gap: 10px; }
.checklist-title { font-size: var(--text-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--plum-200); margin-bottom: 4px; }
.check { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--plum-700); border: 1px solid var(--plum-600); font-weight: 500; font-size: 15px; transition: background var(--base) var(--ease), border-color var(--base) var(--ease); }
.check .tick { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--plum-400); display: inline-grid; place-items: center; color: var(--plum); transition: background var(--base) var(--ease), border-color var(--base) var(--ease); }
.check .tick svg { width: 12px; height: 12px; opacity: 0; transition: opacity var(--base) var(--ease); }
.check[data-done="true"] { background: var(--plum-600); border-color: var(--plum-500); }
.check[data-done="true"] .tick { background: var(--tang); border-color: var(--tang); }
.check[data-done="true"] .tick svg { opacity: 1; }
.check[data-active="true"] { border-color: var(--tang); }

/* marquee */
.marquee { overflow: hidden; background: var(--plum); color: var(--cream); border-block: 1px solid var(--plum-700); }
.marquee-track { display: flex; gap: 0; width: max-content; animation: marquee 40s linear infinite; }
.marquee-track span { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.25rem); letter-spacing: 0.08em; padding: 16px 28px; white-space: nowrap; display: inline-flex; align-items: center; gap: 28px; }
.marquee-track span::after { content: ""; width: 8px; height: 14px; background: var(--tang); transform: var(--slash); border-radius: 1px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* sections */
.section { padding-block: clamp(56px, 8vw, 112px); }
.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 760px; }
.section-head .lead { max-width: 36em; }
.grid-3 { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid-2 { display: grid; gap: 20px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid-4 { display: grid; gap: 20px; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* cards */
.card { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: var(--radius-lg); background: var(--sand-0); border: 1px solid var(--line); position: relative; transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.card-link { text-decoration: none; color: inherit; }
.card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.card .icon { width: 28px; height: 28px; color: var(--tang); }
.card h3 { margin-top: 4px; }
.card p { color: var(--ink-2); font-size: 15.5px; }
.card .btn-ghost { margin-top: auto; align-self: flex-start; }
.on-plum .card { background: var(--plum-700); border-color: var(--plum-600); color: var(--cream); }
.on-plum .card p { color: var(--plum-200); }
.on-plum .card-link:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.3); }

/* lists */
.tick-list { display: flex; flex-direction: column; gap: 12px; }
.tick-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; }
.tick-list li::before { content: ""; flex: none; width: 10px; height: 16px; margin-top: 6px; background: var(--tang); transform: var(--slash); border-radius: 1px; }
.two-col { display: grid; gap: 32px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } }
.sticky { position: static; }
@media (min-width: 900px) { .sticky { position: sticky; top: 96px; } }

/* steps (a real sequence, so numbered) */
.steps { display: flex; gap: 12px; counter-reset: step; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; }
.steps > .step { flex: 0 0 min(78%, 260px); scroll-snap-align: start; }
@media (min-width: 900px) { .steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; overflow: visible; padding-bottom: 0; } .steps > .step { flex: none; } }
.step { counter-increment: step; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--radius-lg); background: var(--plum-700); border: 1px solid var(--plum-600); }
.step::before { content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--tang); letter-spacing: -0.02em; }
.step h3 { font-size: 1.15rem; }
.step p { color: var(--plum-200); font-size: 15px; }
.steps-long { display: flex; flex-direction: column; gap: 0; counter-reset: step; }
.step-long { counter-increment: step; display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid var(--line); }
.step-long:last-child { border-bottom: 1px solid var(--line); }
.step-long::before { content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; color: var(--tang); letter-spacing: -0.02em; line-height: 1; padding-top: 4px; }
.step-long > div { display: flex; flex-direction: column; gap: 10px; }
.step-long p { color: var(--ink-2); }

/* reasons */
.reasons { display: grid; gap: 28px; }
@media (min-width: 720px) { .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; } }
.reason { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px solid var(--plum); }
.reason h3 { font-size: 1.25rem; }
.reason p { color: var(--ink-2); }

/* band */
.band { background: var(--tang); color: var(--plum); }
.band .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-block: clamp(40px, 6vw, 72px); }
.band h2 { max-width: 16em; }
.band .btn-primary { background: var(--plum); color: var(--cream); }
.band .btn-primary:hover { background: var(--plum-900); color: var(--cream); box-shadow: 0 8px 20px rgba(43,24,70,0.3); }

/* faq */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-weight: 600; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-weight: 700; color: var(--tang); font-size: 1.4rem; line-height: 1; flex: none; transition: transform var(--base) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 22px; color: var(--ink-2); max-width: 64ch; }
.on-plum .faq { border-color: var(--plum-600); }
.on-plum .faq details { border-color: var(--plum-600); }
.on-plum .faq .answer { color: var(--plum-200); }

/* page hero (inner pages) */
.page-hero { padding-block: clamp(40px, 7vw, 88px) clamp(32px, 5vw, 64px); }
.page-hero .container { display: flex; flex-direction: column; gap: 20px; max-width: 900px; }
.page-hero .lead { max-width: 36em; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--text-small); color: var(--ink-2); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--tang-700); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--sand-400); }

/* forms */
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 15px; }
.field .hint { font-size: var(--text-small); color: var(--ink-2); }
.field input, .field textarea, .field select { font: inherit; font-size: 1rem; min-height: 48px; padding: 12px 14px; border-radius: var(--radius-md); border: 1.5px solid var(--sand-300); background: var(--sand-0); color: var(--ink); width: 100%; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px var(--tang-200); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }
.field .error { display: none; font-size: var(--text-small); color: var(--error); }
.field[data-error="true"] .error { display: block; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: var(--pill); border: 1.5px solid var(--sand-300); background: var(--sand-0); font-weight: 500; transition: all var(--fast) var(--ease); }
.choice input:checked + span { background: var(--plum); color: var(--cream); border-color: var(--plum); }
.choice input:focus-visible + span { outline: 3px solid var(--tang-300); outline-offset: 2px; }
.form-foot { display: flex; flex-direction: column; gap: 12px; }
.form-foot .btn { width: 100%; }
@media (min-width: 640px) { .form-foot .btn { width: auto; } }
.form-note { font-size: var(--text-small); color: var(--ink-2); }
.form-card { background: var(--sand-0); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(22px, 4vw, 36px); }
.contact-ways { display: flex; flex-direction: column; gap: 14px; }
.way { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--plum-700); border: 1px solid var(--plum-600); color: var(--cream); text-decoration: none; transition: transform var(--base) var(--ease); }
.way:hover { transform: translateY(-2px); color: var(--cream); }
.way svg { width: 24px; height: 24px; color: var(--tang); flex: none; }
.way b { display: block; font-weight: 600; }
.way small { color: var(--plum-200); font-size: var(--text-small); }

/* prose (legal) */
.prose { display: flex; flex-direction: column; gap: 18px; }
.prose h2 { font-size: 1.35rem; margin-top: 18px; }
.prose p, .prose li { color: var(--sand-700); max-width: 68ch; }
.prose ul { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; list-style: disc; }

/* founder */
.founder { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .founder { grid-template-columns: 0.8fr 1.2fr; gap: 56px; } }
.portrait { aspect-ratio: 4 / 5; border-radius: var(--radius-xl); background: var(--plum); display: grid; place-items: center; color: var(--plum-300); font-size: var(--text-small); letter-spacing: 0.1em; text-transform: uppercase; position: relative; overflow: hidden; max-width: 100%; }
.portrait .slashes { position: absolute; left: -30px; bottom: -60px; display: flex; gap: 18px; opacity: 0.18; }
.portrait .slashes i { display: block; width: 22px; height: 220px; background: var(--tang); transform: var(--slash); }
.portrait span { position: relative; }
.principles { display: flex; flex-direction: column; gap: 22px; }
.principle { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 2px solid var(--plum); }
.principle h3 { font-size: 1.15rem; }
.principle p { color: var(--ink-2); }

/* footer */
.site-footer { background: var(--plum-950); color: var(--plum-200); padding-block: clamp(48px, 6vw, 72px) 32px; }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } }
.footer-brand { display: flex; flex-direction: column; gap: 18px; }
.footer-brand svg { width: 140px; }
.footer-brand p { max-width: 30em; font-size: 15px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--plum-300); margin-bottom: 6px; }
.footer-col a { color: var(--cream); text-decoration: none; font-size: 15.5px; }
.footer-col a:hover { color: var(--tang-400); }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--plum-700); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: var(--text-small); }
.footer-bottom a { color: var(--plum-200); text-decoration: none; }
.footer-bottom a:hover { color: var(--tang-400); }

/* thanks + 404 */
.centered { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; padding-block: clamp(64px, 10vw, 140px); }
.centered .lead { max-width: 30em; }
.big-mark { width: min(100%, 320px); }

/* motion */
.reveal { transform: translateY(18px); transition: transform 700ms var(--ease); }
.reveal.in { transform: none; }
.hero-copy > * { animation: rise 700ms var(--ease) both; }
.hero-copy > *:nth-child(2) { animation-delay: 60ms; }
.hero-copy > *:nth-child(3) { animation-delay: 120ms; }
.hero-copy > *:nth-child(4) { animation-delay: 180ms; }
.hero-copy > *:nth-child(5) { animation-delay: 240ms; }
.hero-panel { --tilt: 0deg; animation: panelIn 800ms var(--ease) 120ms both; }
@keyframes panelIn { from { transform: translateY(14px) rotate(var(--tilt)); opacity: 0.001; } to { transform: rotate(var(--tilt)); opacity: 1; } }
@keyframes rise { from { transform: translateY(14px); opacity: 0.001; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero-copy > *, .hero-panel { animation: none; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .btn:hover { transform: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- device range: small phones, tablets, large screens, zoomed browsers --- */
@media (max-width: 400px) {
  .hero .actions .btn { width: 100%; }
  .band .btn { width: 100%; }
  .menu-links a { font-size: 1.6rem; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hero-grid { gap: 32px; }
  .hero-panel { max-width: 640px; }
  .two-col { gap: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1600px) {
  .container { width: min(100% - 2 * var(--gutter), 1280px); }
  :root { --text-body: 1.125rem; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-block: 24px; }
  .menu { gap: 16px; }
  .menu-links a { font-size: 1.25rem; padding: 6px 0; }
}
/* cross-document page transitions (progressive enhancement) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms ease-out both vtOut; }
::view-transition-new(root) { animation: 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both vtIn; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ===== R97 motion system ===== */
/* Every animation here proves something the studio does. Reduced motion turns all of it into a still. */

/* --- intro (home, once per session) --- */
.intro { position: fixed; inset: 0; z-index: 200; background: var(--plum); display: grid; place-items: center; overflow: hidden; }
.intro .intro-mark { width: min(60vw, 320px); animation: introSlap 620ms var(--ease) 80ms both; }
.intro .intro-blade { position: absolute; top: -20%; bottom: -20%; width: 45%; left: -70%; background: var(--tang); transform: translateX(0) skewX(-23deg); animation: bladeSweep 520ms cubic-bezier(0.7, 0, 0.2, 1) 820ms both; will-change: transform; }
.intro.out { animation: introOut 420ms var(--ease) 1050ms both; }
@keyframes introSlap { from { transform: scale(1.9) rotate(-14deg); opacity: 0; } 60% { transform: scale(0.96) rotate(-6deg); opacity: 1; } to { transform: scale(1) rotate(-7deg); opacity: 1; } }
@keyframes bladeSweep { from { transform: translateX(0) skewX(-23deg); } to { transform: translateX(470%) skewX(-23deg); } }
@keyframes introOut { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
body[data-intro="on"] .hero-copy > *, body[data-intro="on"] .hero-panel { animation-delay: 1200ms; }

/* --- headline word reveal --- */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.w > span { display: inline-block; transform: translateY(110%); animation: wordUp 720ms var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms + 60ms); }
@keyframes wordUp { to { transform: none; } }
body[data-intro="on"] .w > span { animation-delay: calc(var(--i, 0) * 55ms + 1260ms); }

/* --- hero scene: Audit -> Build -> Launch --- */
.scene { padding: 20px; min-height: 0; gap: 14px; }
.acts { display: flex; gap: 6px; position: relative; z-index: 2; }
.acts li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--pill); background: var(--plum-700); border: 1px solid var(--plum-600); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--plum-300); transition: all var(--base) var(--ease); white-space: nowrap; overflow: hidden; }
.acts li b { font-family: var(--font-display); font-weight: 800; color: var(--plum-200); transition: color var(--base); }
.acts li[data-on="true"] { background: var(--tang); border-color: var(--tang); color: var(--plum); }
.acts li[data-on="true"] b { color: var(--plum); }
.acts li[data-done="true"] { color: var(--cream); }
.acts li[data-done="true"] b { color: var(--tang); }
.frame { position: relative; z-index: 1; background: var(--plum-900); border-radius: 14px; border: 1px solid var(--plum-600); aspect-ratio: 16 / 10.5; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.35); transition: transform var(--base) var(--ease); }
.frame-bar { height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--plum-950); border-bottom: 1px solid var(--plum-700); }
.frame-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--plum-600); }
.frame-bar .url { margin-left: 8px; flex: 1; height: 14px; border-radius: 7px; background: var(--plum-900); font-size: 9px; line-height: 14px; padding: 0 8px; color: var(--plum-300); letter-spacing: 0.04em; font-weight: 500; }
.blocks { position: absolute; inset: 26px 0 0 0; }
.b { position: absolute; border-radius: 4px; border: 1.5px dashed var(--plum-500); background: transparent; opacity: 0.55; transform: scale(0.98); transition: background 520ms var(--ease), border-color 520ms var(--ease), opacity 520ms var(--ease), transform 620ms cubic-bezier(0.2, 1.4, 0.3, 1); transition-delay: var(--d, 0ms); }
.b-nav { left: 4%; top: 6%; width: 92%; height: 7%; }
.b-logo { left: 6%; top: 7.5%; width: 12%; height: 4%; border-radius: 2px; }
.b-h1 { left: 6%; top: 22%; width: 46%; height: 12%; }
.b-h1b { left: 6%; top: 36%; width: 34%; height: 12%; }
.b-sub { left: 6%; top: 52%; width: 40%; height: 5%; }
.b-cta { left: 6%; top: 62%; width: 18%; height: 8%; border-radius: 999px; }
.b-img { left: 56%; top: 20%; width: 38%; height: 50%; border-radius: 8px; }
.b-c1, .b-c2, .b-c3 { top: 78%; width: 28%; height: 16%; border-radius: 6px; }
.b-c1 { left: 6%; } .b-c2 { left: 36%; } .b-c3 { left: 66%; }
.scene[data-act="build"] .b, .scene[data-act="launch"] .b { opacity: 1; transform: none; border-style: solid; border-color: transparent; }
.scene[data-act="build"] .b-nav, .scene[data-act="launch"] .b-nav { background: var(--plum-700); }
.scene[data-act="build"] .b-logo, .scene[data-act="launch"] .b-logo { background: var(--tang); }
.scene[data-act="build"] .b-h1, .scene[data-act="launch"] .b-h1, .scene[data-act="build"] .b-h1b, .scene[data-act="launch"] .b-h1b { background: var(--cream); }
.scene[data-act="build"] .b-sub, .scene[data-act="launch"] .b-sub { background: var(--plum-300); }
.scene[data-act="build"] .b-cta, .scene[data-act="launch"] .b-cta { background: var(--tang); }
.scene[data-act="build"] .b-img, .scene[data-act="launch"] .b-img { background: linear-gradient(135deg, var(--plum-500), var(--plum-300)); }
.scene[data-act="build"] .b-c1, .scene[data-act="launch"] .b-c1, .scene[data-act="build"] .b-c2, .scene[data-act="launch"] .b-c2, .scene[data-act="build"] .b-c3, .scene[data-act="launch"] .b-c3 { background: var(--plum-700); }
.scanline { position: absolute; top: -10%; bottom: -10%; width: 34%; left: -50%; background: linear-gradient(90deg, transparent, rgba(240,83,45,0.35), transparent); transform: translateX(0) skewX(-23deg); opacity: 0; pointer-events: none; will-change: transform; }
.scene[data-act="audit"] .scanline { animation: scan 1.5s cubic-bezier(0.6, 0, 0.3, 1) 2 both; opacity: 1; }
@keyframes scan { from { transform: translateX(0) skewX(-23deg); } to { transform: translateX(500%) skewX(-23deg); } }
.hud { position: absolute; right: 4%; top: 12%; width: 40%; display: flex; flex-direction: column; gap: 5px; z-index: 2; transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
.hud .check { padding: 6px 8px; font-size: 10.5px; gap: 8px; border-radius: 8px; background: rgba(43,24,70,0.92); }
.hud .check .tick { width: 15px; height: 15px; }
.hud .check .tick svg { width: 9px; height: 9px; }
.scene:not([data-act="audit"]) .hud { opacity: 0; transform: translateX(12px); pointer-events: none; }
.live { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--cream); color: var(--plum); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(31,138,91,0.6); animation: pulse 1.4s ease-out infinite; }
.scene[data-act="launch"] .live { opacity: 1; transform: none; }
@keyframes pulse { to { box-shadow: 0 0 0 8px rgba(31,138,91,0); } }
.slap { position: absolute; right: -6px; bottom: -4px; width: 46%; z-index: 4; opacity: 0; transform: scale(1.9) rotate(-14deg); transform-origin: 70% 70%; }
.scene[data-act="launch"] .slap { animation: slapIn 560ms cubic-bezier(0.2, 1.3, 0.3, 1) both; }
@keyframes slapIn { from { opacity: 0; transform: scale(1.9) rotate(-14deg); } 55% { opacity: 1; transform: scale(0.94) rotate(-4deg); } to { opacity: 1; transform: scale(1) rotate(-7deg); } }
.scene[data-act="launch"] .frame { animation: frameKick 420ms var(--ease) 120ms; }
@keyframes frameKick { 30% { transform: scale(0.985) rotate(-0.4deg); } to { transform: none; } }
.burst { position: absolute; right: 14%; bottom: 12%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.burst i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; opacity: 0; }
.burst i svg { width: 14px; height: 14px; }
.scene[data-act="launch"] .burst i { animation: fly 900ms cubic-bezier(0.1, 0.8, 0.3, 1) 140ms both; }
@keyframes fly { from { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(0.4); } 70% { opacity: 1; } to { opacity: 0; transform: rotate(var(--a)) translateX(var(--r, 120px)) scale(1); } }
.scene .slashes { opacity: 0.12; transition: transform 800ms var(--ease); }
.scene[data-act="launch"] .slashes { transform: translateX(-30px); }
@media (min-width: 900px) { .scene { padding: 24px; } }

/* --- style shifter: any kind of website --- */
.shifter { display: flex; flex-direction: column; gap: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: var(--pill); border: 1.5px solid var(--sand-300); background: var(--sand-0); font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; transition: all var(--fast) var(--ease); }
.chip::before { content: ""; width: 8px; height: 12px; background: var(--sand-300); transform: var(--slash); border-radius: 1px; transition: background var(--fast); }
.chip[aria-selected="true"] { background: var(--plum); color: var(--cream); border-color: var(--plum); }
.chip[aria-selected="true"]::before { background: var(--tang); }
.chip:hover { border-color: var(--plum); }
.device { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-float); background: var(--sand-0); }
.device-bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--sand-200); }
.device-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--sand-400); }
.device-bar .url { margin-left: 10px; flex: 1; max-width: 360px; height: 18px; border-radius: 9px; background: var(--sand-0); font-size: 11px; line-height: 18px; padding: 0 10px; color: var(--sand-600); }
.stage { position: relative; aspect-ratio: 16 / 10; container-type: inline-size; background: var(--st-bg, #fff); color: var(--st-fg, #111); transition: background 700ms var(--ease), color 700ms var(--ease); overflow: hidden; }
.s { position: absolute; transition: left 800ms var(--ease), top 800ms var(--ease), width 800ms var(--ease), height 800ms var(--ease), background 700ms var(--ease), color 700ms var(--ease), border-radius 700ms var(--ease), opacity 500ms var(--ease), transform 800ms var(--ease), border-color 700ms var(--ease); }
.s-text { transition: opacity 260ms var(--ease); }
.stage.swapping .s-text { opacity: 0; }
.s-nav { left: 0; top: 0; width: 100%; height: 9%; border-bottom: 1px solid var(--st-line, rgba(0,0,0,0.08)); background: var(--st-nav, transparent); }
.s-logo { left: 4%; top: 2.2%; height: 4.6%; display: flex; align-items: center; font-family: var(--st-display, inherit); font-weight: 700; font-size: 2.6cqw; letter-spacing: -0.01em; }
.s-menu { right: 4%; top: 2.6%; height: 4%; display: flex; gap: 2.2cqw; align-items: center; font-size: 1.5cqw; font-weight: 500; opacity: 0.85; }
.s-menu i { display: block; width: 6cqw; height: 0.9cqw; border-radius: 1cqw; background: currentColor; opacity: 0.35; }
.s-menu b { display: inline-flex; align-items: center; padding: 0.5cqw 1.6cqw; border-radius: 99cqw; background: var(--st-accent); color: var(--st-on-accent, #fff); font-weight: 600; font-size: 1.4cqw; }
.s-title { font-family: var(--st-display, inherit); font-weight: var(--st-weight, 800); font-size: var(--st-title, 6cqw); line-height: 1.02; letter-spacing: var(--st-track, -0.03em); text-wrap: balance; }
.s-sub { font-size: 1.9cqw; line-height: 1.45; opacity: 0.8; font-weight: 500; }
.s-cta { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.7cqw; padding: 0 3cqw; height: 5.6cqw; border-radius: var(--st-radius, 99cqw); background: var(--st-accent); color: var(--st-on-accent, #fff); white-space: nowrap; }
.s-img { border-radius: var(--st-radius-img, 1.4cqw); background: var(--st-img); overflow: hidden; }
.s-img::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 9px); }
.s-card { border-radius: var(--st-radius-card, 1.2cqw); background: var(--st-card); border: 1px solid var(--st-line, rgba(0,0,0,0.08)); padding: 1.6cqw; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.4cqw; font-size: 1.5cqw; font-weight: 600; }
.s-card small { font-weight: 500; opacity: 0.65; font-size: 1.25cqw; }
.s-card::before { content: ""; width: 2.4cqw; height: 2.4cqw; border-radius: 0.6cqw; background: var(--st-accent); margin-bottom: auto; opacity: 0.9; }
.s-glow { border-radius: 50%; filter: blur(3cqw); opacity: 0; pointer-events: none; background: var(--st-accent); }
.s-foot { left: 0; bottom: 0; width: 100%; height: 4%; opacity: 0.5; border-top: 1px solid var(--st-line, rgba(0,0,0,0.08)); }
/* default positions (venue) and per-theme layouts */
.stage[data-theme="venue"] { --st-bg: #F6F1E8; --st-fg: #1C1A17; --st-accent: #B8945A; --st-on-accent: #1C1A17; --st-card: #FFFDF8; --st-line: rgba(28,26,23,0.12); --st-img: linear-gradient(135deg, #C9B07A 0%, #E8DCC0 55%, #B58E4E 100%); --st-display: 'Cormorant Garamond', Georgia, serif; --st-weight: 600; --st-title: 7cqw; --st-track: -0.01em; --st-radius: 0; --st-radius-img: 0; --st-radius-card: 0; }
.stage[data-theme="venue"] .s-title { left: 15%; top: 20%; width: 70%; text-align: center; }
.stage[data-theme="venue"] .s-sub { left: 25%; top: 43%; width: 50%; text-align: center; }
.stage[data-theme="venue"] .s-cta { left: 41%; top: 54%; width: 18%; }
.stage[data-theme="venue"] .s-img { left: 4%; top: 68%; width: 92%; height: 28%; }
.stage[data-theme="venue"] .s-card { opacity: 0; transform: translateY(10%); top: 100%; width: 28%; height: 10%; }
.stage[data-theme="venue"] .s-c1 { left: 4%; } .stage[data-theme="venue"] .s-c2 { left: 36%; } .stage[data-theme="venue"] .s-c3 { left: 68%; }
.stage[data-theme="venue"] .s-glow { left: 30%; top: 0; width: 40%; height: 30%; opacity: 0; }

.stage[data-theme="d2c"] { --st-bg: #FFE9F0; --st-fg: #1B1B1B; --st-accent: #FF3D7F; --st-on-accent: #FFFFFF; --st-card: #FFFFFF; --st-line: rgba(27,27,27,0.1); --st-img: linear-gradient(160deg, #FF9AC1, #FF3D7F 60%, #FFB84D); --st-display: 'Unbounded', sans-serif; --st-weight: 800; --st-title: 4.9cqw; --st-track: -0.04em; --st-radius: 99cqw; --st-radius-img: 2.4cqw; --st-radius-card: 1.6cqw; }
.stage[data-theme="d2c"] .s-title { left: 5%; top: 15%; width: 50%; text-align: left; text-transform: uppercase; }
.stage[data-theme="d2c"] .s-sub { left: 5%; top: 44%; width: 44%; text-align: left; }
.stage[data-theme="d2c"] .s-cta { left: 5%; top: 56%; width: 24%; }
.stage[data-theme="d2c"] .s-img { left: 60%; top: 13%; width: 35%; height: 44%; }
.stage[data-theme="d2c"] .s-card { opacity: 1; transform: none; top: 66%; width: 28%; height: 27%; }
.stage[data-theme="d2c"] .s-c1 { left: 5%; } .stage[data-theme="d2c"] .s-c2 { left: 36%; } .stage[data-theme="d2c"] .s-c3 { left: 67%; }
.stage[data-theme="d2c"] .s-glow { left: 55%; top: 5%; width: 45%; height: 60%; opacity: 0.25; }

.stage[data-theme="clinic"] { --st-bg: #F2F8F7; --st-fg: #10322F; --st-accent: #1FA08A; --st-on-accent: #FFFFFF; --st-card: #FFFFFF; --st-line: rgba(16,50,47,0.1); --st-img: linear-gradient(150deg, #BFE8DF, #1FA08A 70%, #0E6E5F); --st-display: 'Bricolage Grotesque', sans-serif; --st-weight: 700; --st-title: 5.4cqw; --st-track: -0.02em; --st-radius: 1.2cqw; --st-radius-img: 2.4cqw; --st-radius-card: 99cqw; }
.stage[data-theme="clinic"] .s-title { left: 5%; top: 18%; width: 44%; text-align: left; }
.stage[data-theme="clinic"] .s-sub { left: 5%; top: 44%; width: 40%; text-align: left; }
.stage[data-theme="clinic"] .s-cta { left: 5%; top: 57%; width: 26%; }
.stage[data-theme="clinic"] .s-img { left: 54%; top: 14%; width: 41%; height: 58%; }
.stage[data-theme="clinic"] .s-card { opacity: 1; transform: none; top: 80%; width: 28%; height: 10%; padding: 0 1.6cqw; flex-direction: row; align-items: center; justify-content: flex-start; gap: 1cqw; }
.stage[data-theme="clinic"] .s-card::before { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; margin: 0; }
.stage[data-theme="clinic"] .s-card small { display: none; }
.stage[data-theme="clinic"] .s-c1 { left: 5%; } .stage[data-theme="clinic"] .s-c2 { left: 36%; } .stage[data-theme="clinic"] .s-c3 { left: 67%; }
.stage[data-theme="clinic"] .s-glow { left: 60%; top: 20%; width: 30%; height: 40%; opacity: 0; }

.stage[data-theme="tech"] { --st-bg: #0B0F1A; --st-fg: #E8ECF5; --st-nav: rgba(255,255,255,0.03); --st-accent: #7C5CFF; --st-on-accent: #FFFFFF; --st-card: rgba(255,255,255,0.05); --st-line: rgba(255,255,255,0.1); --st-img: linear-gradient(135deg, #7C5CFF, #22D3EE); --st-display: 'Space Grotesk', sans-serif; --st-weight: 700; --st-title: 6cqw; --st-track: -0.03em; --st-radius: 0.8cqw; --st-radius-img: 1.2cqw; --st-radius-card: 1.2cqw; }
.stage[data-theme="tech"] .s-title { left: 12%; top: 17%; width: 76%; text-align: center; }
.stage[data-theme="tech"] .s-sub { left: 25%; top: 41%; width: 50%; text-align: center; }
.stage[data-theme="tech"] .s-cta { left: 40%; top: 52%; width: 20%; }
.stage[data-theme="tech"] .s-img { left: 30%; top: 62%; width: 40%; height: 4%; opacity: 0.9; border-radius: 99cqw; }
.stage[data-theme="tech"] .s-card { opacity: 1; transform: none; top: 70%; width: 28%; height: 24%; }
.stage[data-theme="tech"] .s-c1 { left: 5%; } .stage[data-theme="tech"] .s-c2 { left: 36%; } .stage[data-theme="tech"] .s-c3 { left: 67%; }
.stage[data-theme="tech"] .s-glow { left: 25%; top: -10%; width: 50%; height: 55%; opacity: 0.55; }

.stage[data-theme="food"] { --st-bg: #1E120C; --st-fg: #F7E7D3; --st-accent: #E0592B; --st-on-accent: #1E120C; --st-card: rgba(247,231,211,0.06); --st-line: rgba(247,231,211,0.14); --st-img: linear-gradient(160deg, #C2410C, #7C2D12 55%, #3B1408); --st-display: 'DM Serif Display', Georgia, serif; --st-weight: 400; --st-title: 6.4cqw; --st-track: -0.01em; --st-radius: 0.6cqw; --st-radius-img: 0; --st-radius-card: 0; }
.stage[data-theme="food"] .s-title { left: 52%; top: 17%; width: 43%; text-align: left; }
.stage[data-theme="food"] .s-sub { left: 52%; top: 44%; width: 40%; text-align: left; }
.stage[data-theme="food"] .s-cta { left: 52%; top: 56%; width: 24%; }
.stage[data-theme="food"] .s-img { left: 0; top: 9%; width: 46%; height: 91%; }
.stage[data-theme="food"] .s-card { opacity: 1; transform: none; left: 52%; width: 43%; height: 7%; padding: 0; flex-direction: row; align-items: center; justify-content: space-between; background: transparent; border-width: 0 0 1px 0; border-radius: 0; }
.stage[data-theme="food"] .s-card::before { display: none; }
.stage[data-theme="food"] .s-card small { opacity: 0.8; }
.stage[data-theme="food"] .s-c1 { top: 70%; } .stage[data-theme="food"] .s-c2 { top: 78%; } .stage[data-theme="food"] .s-c3 { top: 86%; }
.stage[data-theme="food"] .s-glow { left: 50%; top: 60%; width: 40%; height: 40%; opacity: 0.2; }
.shifter-note { font-size: var(--text-small); color: var(--ink-2); }

/* --- section wipe (23-degree blade across plum sections) --- */
.wipe { position: relative; overflow: hidden; }
.wipe::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 38%; left: -60%; background: var(--tang); transform: translateX(0) skewX(-23deg); opacity: 0.9; pointer-events: none; transition: transform 900ms cubic-bezier(0.7, 0, 0.2, 1), opacity 400ms ease 700ms; will-change: transform; }
.wipe.in::before { transform: translateX(555%) skewX(-23deg); opacity: 0; }
.wipe > * { position: relative; }

/* --- icon draw --- */
.card .icon [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.card.in .icon [pathLength] { animation: draw 900ms var(--ease) 120ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* --- steps progress --- */
.steps { position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 3px; background: var(--tang); transform: scaleX(0); transform-origin: left; transition: transform 1400ms cubic-bezier(0.2, 0.8, 0.2, 1); border-radius: 2px; opacity: 0.9; }
.steps.in::before { transform: scaleX(1); }
.steps .step { transition: transform 700ms var(--ease), opacity 700ms var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }

/* --- tilt and magnetic --- */
@media (hover: hover) and (pointer: fine) {
  .tilt { transform-style: preserve-3d; will-change: transform; }
  .tilt.tilting { transition: transform 80ms linear, box-shadow var(--base) var(--ease); }
  .tilt:not(.tilting) { transition: transform 500ms var(--ease), box-shadow var(--base) var(--ease); }
  .btn-primary.magnet { transition: transform 120ms linear, background var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
}

/* --- footer wordmark reveal --- */
.footer-mark { width: 100%; margin-bottom: 40px; clip-path: inset(0 100% 0 0); transition: clip-path 1300ms cubic-bezier(0.7, 0, 0.2, 1); }
.site-footer.in .footer-mark { clip-path: inset(0 0 0 0); }
.footer-mark svg { width: 100%; height: auto; }

/* --- marquee skew on scroll --- */
.marquee-track { transform-origin: center; }
.marquee.skewing .marquee-track { transition: none; }

/* --- preview router page swap --- */
.page.enter { animation: pageIn 520ms var(--ease) both; }
@keyframes pageIn { from { opacity: 0.001; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --- reduced motion: everything becomes a still --- */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .w > span { animation: none; transform: none; }
  .scene .b, .scene .scanline, .scene .slap, .scene .burst i, .scene .live, .scene .frame, .scene .slashes { animation: none !important; transition: none !important; }
  .scene .slap { opacity: 1; transform: rotate(-7deg); }
  .scene .live { opacity: 1; transform: none; }
  .scene .hud { display: none; }
  .s, .stage { transition: none; }
  .wipe::before { display: none; }
  .card .icon [pathLength] { stroke-dashoffset: 0; animation: none; }
  .steps::before { transform: scaleX(1); transition: none; }
  .footer-mark { clip-path: none; transition: none; }
  .page.enter { animation: none; }
  .live::before { animation: none; }
}

@media (max-width: 420px) {
  .acts { gap: 4px; }
  .acts li { padding: 6px 7px; font-size: 10px; gap: 5px; letter-spacing: 0.03em; }
  .hud { width: 46%; }
  .hud .check { font-size: 9.5px; padding: 5px 6px; }
}

/* ===== R97 editorial layer: the parts that make it look made by hand ===== */

/* grain over everything, like print */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 300; opacity: 0.16; background-image: url("data:image/png;base64,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"); background-size: 160px 160px; }

/* hollow word inside a headline */
.hollow { color: transparent; -webkit-text-stroke: 0.045em var(--ink); }
.on-plum .hollow, .hero-title .hollow { -webkit-text-stroke-color: var(--ink); }
.on-plum .hollow { -webkit-text-stroke-color: var(--cream); }
@supports not (-webkit-text-stroke: 1px black) { .hollow { color: var(--tang); } }

/* folio: a magazine page number for each home section */
.folio { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.folio::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.35; }
.on-plum .folio { color: var(--plum-300); }
.sec-top { display: flex; flex-direction: column; gap: 22px; margin-bottom: clamp(28px, 4vw, 52px); }

/* slash rule: a row of 23-degree marks between sections */
.slash-rule { height: 12px; background: repeating-linear-gradient(-67deg, var(--tang) 0 2.5px, transparent 2.5px 22px); opacity: 0.9; }
.on-plum .slash-rule { opacity: 0.7; }

/* hero, editorial composition */
.hero-ed { padding-block: clamp(36px, 6vw, 72px) 0; overflow: hidden; }
.hero-title { font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 0.98; letter-spacing: -0.035em; max-width: 13.5em; }
.hero-row { display: grid; gap: 32px; align-items: end; margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) { .hero-row { grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; } .hero-side { padding-top: 18px; } }
.hero-side { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }
.hero-side .lead { max-width: 30em; }
.avail { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-small); color: var(--ink-2); }
.avail i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(31,138,91,0.5); animation: pulse 1.6s ease-out infinite; }
.hero-stage { position: relative; }
.hero-stage .hero-panel { --tilt: -1.2deg; transform: rotate(var(--tilt)); }
.hero-stage::before { content: ""; position: absolute; inset: 10% -10% 6% 28%; background: var(--plum-100); transform: skewX(-23deg); z-index: 0; border-radius: 6px; }
.hero-stage .hero-panel { position: relative; z-index: 1; }
.hero-foot { margin-top: clamp(28px, 4vw, 48px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 14px; border-top: 1px solid var(--line); font-size: var(--text-small); color: var(--ink-2); }
.hero-foot b { color: var(--ink); font-weight: 600; }

/* ledger: the studio index */
.ledger { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 56px 1fr; gap: 12px 20px; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; position: relative; transition: background var(--base) var(--ease), color var(--base) var(--ease); }
@media (min-width: 900px) { .row { grid-template-columns: 80px 1.1fr 1.3fr 48px; align-items: center; padding: 26px 0; } }
.row .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 2.2vw, 2rem); color: var(--tang); letter-spacing: -0.02em; line-height: 1; }
.row .name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.05; }
.row .what { color: var(--ink-2); font-size: 1rem; line-height: 1.5; grid-column: 2; }
@media (min-width: 900px) { .row .what { grid-column: auto; } }
.row .go { display: none; }
@media (min-width: 900px) { .row .go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); justify-self: end; transition: transform var(--base) var(--ease), background var(--base) var(--ease), color var(--base) var(--ease); } .row .go svg { width: 18px; height: 18px; } }
.row .tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--text-small); color: var(--ink-2); }
@media (min-width: 900px) { .row .tags { grid-column: 3; } }
.row .tags span::before { content: ""; display: inline-block; width: 7px; height: 11px; background: var(--tang); transform: var(--slash); margin-right: 8px; vertical-align: -1px; border-radius: 1px; }
a.row:hover { background: var(--plum); color: var(--cream); }
a.row { padding-inline: 12px; margin-inline: -12px; border-radius: 10px; }
a.row:hover .what, a.row:hover .tags { color: var(--plum-200); }
a.row:hover .go { background: var(--tang); border-color: var(--tang); color: var(--plum); transform: rotate(-23deg); }
.ledger.compact .row { padding: 16px 0; }
@media (min-width: 900px) { .ledger.compact .row { grid-template-columns: 48px 1fr 1.5fr; } }
.ledger.compact .row .name { font-size: 1.2rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.ledger.compact .row .num { font-size: 1rem; color: var(--tang-700); }
.on-plum .ledger.compact .row .num { color: var(--tang-400); }
.on-plum .ledger, .on-plum .row { border-color: var(--plum-600); }
.on-plum .row .what, .on-plum .row .tags { color: var(--plum-200); }
.on-plum .row .go { border-color: var(--cream); }

/* manifesto: big running text with slash highlights */
.manifesto { font-family: var(--font-body); font-weight: 500; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.35; letter-spacing: -0.01em; max-width: 30em; text-wrap: pretty; }
.manifesto p + p { margin-top: 0.9em; }
.hl { padding: 0 0.06em; background-image: linear-gradient(transparent 58%, rgba(240,83,45,0.38) 58%, rgba(240,83,45,0.38) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.on-plum .hl { background-image: linear-gradient(transparent 58%, rgba(240,83,45,0.75) 58%, rgba(240,83,45,0.75) 94%, transparent 94%); }
.refusals { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .refusals { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.refusal { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; font-weight: 500; }
.refusals.plain .refusal::before { display: none; }
.refusal::before { content: "No."; font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--tang-700); flex: none; }
.on-plum .refusal::before { color: var(--tang-400); }
.on-plum .refusals, .on-plum .refusal { border-color: var(--plum-600); }

/* ticket: the audit CTA */
.ticket-wrap { padding-block: clamp(40px, 6vw, 80px); }
.ticket { position: relative; display: grid; background: var(--tang); color: var(--plum); border-radius: 18px; overflow: hidden; transform: rotate(-0.6deg); box-shadow: var(--shadow-float); }
@media (min-width: 900px) { .ticket { grid-template-columns: 1fr 300px; } }
.ticket-main { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 18px; }
.ticket-main h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); max-width: 12em; }
.ticket-main p { max-width: 36em; font-weight: 500; }
.ticket-stub { position: relative; padding: clamp(22px, 3vw, 32px); border-top: 2px dashed rgba(43,24,70,0.45); display: flex; flex-direction: column; gap: 10px; justify-content: space-between; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
@media (min-width: 900px) { .ticket-stub { border-top: 0; border-left: 2px dashed rgba(43,24,70,0.45); } }
.ticket-stub b { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.ticket-stub small { font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 13px; }
.ticket::before, .ticket::after { content: ""; position: absolute; width: 28px; height: 28px; border-radius: 50%; background: var(--cream); z-index: 2; }
@media (min-width: 900px) { .ticket::before { right: 286px; top: -14px; } .ticket::after { right: 286px; bottom: -14px; } }
@media (max-width: 899px) { .ticket::before { left: -14px; bottom: calc(100% - var(--stub-h, 0px)); display: none; } .ticket::after { display: none; } }
.ticket .btn-primary { background: var(--plum); color: var(--cream); align-self: flex-start; }
.ticket .btn-primary:hover { background: var(--plum-900); color: var(--cream); box-shadow: 0 8px 20px rgba(43,24,70,0.3); }
.on-plum .ticket::before, .on-plum .ticket::after { background: var(--plum); }

/* interview FAQ */
.qa { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .qa { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
.qa-item { display: grid; grid-template-columns: 34px 1fr; gap: 6px 12px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.qa-item .q { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: var(--tang-700); letter-spacing: -0.01em; padding-top: 3px; }
.qa-item h3 { font-size: 1.15rem; line-height: 1.25; }
.qa-item p { grid-column: 2; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.on-plum .qa, .on-plum .qa-item { border-color: var(--plum-600); }
.on-plum .qa-item p { color: var(--plum-200); }

/* timeline: the process, drawn on the diagonal */
.timeline { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.tl { display: grid; grid-template-columns: 64px 1fr; gap: 6px 20px; padding: 28px 0; border-bottom: 1px solid var(--line); position: relative; }
@media (min-width: 900px) { .tl { grid-template-columns: 96px 0.9fr 1.4fr 180px; column-gap: 32px; align-items: start; } }
.tl .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.6rem); color: var(--tang); line-height: 1; letter-spacing: -0.03em; }
.tl h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
.tl p { grid-column: 2; color: var(--ink-2); }
@media (min-width: 900px) { .tl p { grid-column: auto; } }
.tl .you { grid-column: 2; font-size: var(--text-small); color: var(--ink); font-weight: 600; display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 900px) { .tl .you { grid-column: auto; } }
.tl .you small { font-weight: 500; color: var(--ink-2); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.on-plum .timeline, .on-plum .tl { border-color: var(--plum-600); }
.on-plum .tl p { color: var(--plum-200); }
.on-plum .tl .you { color: var(--cream); }
.on-plum .tl .you small { color: var(--plum-300); }

/* weekly note: the social deliverable, shown as the thing itself */
.note { background: var(--sand-0); border: 1px solid var(--line); border-radius: 6px; padding: clamp(22px, 3vw, 34px); max-width: 560px; box-shadow: var(--shadow-card); transform: rotate(0.6deg); font-size: 15px; }
.note header { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.note h3 { font-size: 1.15rem; margin-bottom: 12px; }
.note dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; margin: 0; }
.note dt { font-weight: 600; color: var(--tang-700); }
.note dd { margin: 0; color: var(--sand-700); }
.note footer { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--sand-300); font-size: 13px; color: var(--ink-2); }

/* decision list for apps */
.decide { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.decide-item { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 22px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .decide-item { grid-template-columns: 1.1fr 1fr 1fr; gap: 24px; } }
.decide-item h3 { font-size: 1.15rem; }
.decide-item .yes, .decide-item .no { font-size: 15px; color: var(--ink-2); }
.decide-item .yes::before, .decide-item .no::before { display: block; font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.1em; margin-bottom: 4px; }
.decide-item .yes::before { content: "IF YES"; color: var(--success); }
.decide-item .no::before { content: "IF NO"; color: var(--tang-700); }

/* brief sheet forms */
.sheet { counter-reset: q; }
.sheet .field { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.sheet .field input, .sheet .field textarea { min-width: 0; }
.two-col > *, .form-card { min-width: 0; }
.sheet .field::before { counter-increment: q; content: counter(q, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; color: var(--tang-700); font-size: 0.95rem; grid-row: 1 / span 3; padding-top: 3px; }
.sheet .field label { grid-column: 2; }
.sheet .field .hint, .sheet .field .error, .sheet .field input, .sheet .field textarea, .sheet .field .choices { grid-column: 2; }
.sheet .field input, .sheet .field textarea { border-width: 0 0 1.5px 0; border-radius: 0; background: transparent; padding-inline: 0; }
.sheet .field input:focus, .sheet .field textarea:focus { box-shadow: none; border-color: var(--tang); }
.sheet .form-foot { padding-top: 22px; }
.form-card.sheet-card { border-radius: 8px; padding-top: 12px; }
.sheet-head { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); padding: 10px 0 6px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }

/* contact ways, plainer */
.ways-list { display: flex; flex-direction: column; border-top: 1px solid var(--plum-600); }
.ways-list a, .ways-list div { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 18px 0; border-bottom: 1px solid var(--plum-600); color: var(--cream); text-decoration: none; }
.ways-list b { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.ways-list small { color: var(--plum-200); font-size: var(--text-small); }
.ways-list a:hover b { color: var(--tang); }
.ways-list a::after { content: "↗"; font-family: var(--font-display); color: var(--tang); grid-row: 1 / span 2; align-self: center; }

/* nav time and availability */
.nav-meta { display: none; font-size: 12.5px; color: var(--ink-2); gap: 14px; align-items: center; font-variant-numeric: tabular-nums; }
@media (min-width: 1100px) { .nav-meta { display: inline-flex; } }

/* big statement sections */
.statement { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; max-width: 16em; }

/* buttons: diagonal sweep instead of a lift */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::before { content: ""; position: absolute; inset: -2px; background: var(--plum); transform: translateX(-108%) skewX(-23deg); transition: transform 360ms cubic-bezier(0.7, 0, 0.2, 1); z-index: -1; }
.btn-primary:hover::before { transform: translateX(0) skewX(-23deg) scaleX(1.3); }
.btn-primary:hover { color: var(--cream); background: var(--tang); box-shadow: none; }
.ticket .btn-primary::before { background: var(--tang); }
.ticket .btn-primary:hover { color: var(--plum); }
.band .btn-primary::before { background: var(--cream); }
.band .btn-primary:hover { color: var(--plum); }

/* thanks and 404 with a stamp */
.stamp { display: inline-block; padding: 8px 14px; border: 2px solid var(--tang-700); color: var(--tang-700); font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(-6deg); border-radius: 4px; }

/* responsive guards for the editorial pieces */
@media (max-width: 899px) { .hero-stage::before { inset: 14% -24% 2% 40%; } .ticket { transform: none; } .note { transform: none; } }
@media (prefers-reduced-motion: reduce) { .avail i { animation: none; } .btn-primary::before { transition: none; } }

/* ===== R97 signature layer: the moves that make it ours ===== */
/* Variable fonts (Unbounded 200-900, Bricolage 200-800) let weight itself move. Every move here has a still for reduced motion. */

/* --- header: inverts over plum, carries a reading-progress blade --- */
.site-header { transition: background 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease); }
.site-header[data-theme="dark"] { background: rgba(43,24,70,0.92); background: color-mix(in srgb, var(--plum) 90%, transparent); border-bottom-color: var(--plum-700); color: var(--cream); }
.site-header[data-theme="dark"] .nav-links a, .site-header[data-theme="dark"] .burger, .site-header[data-theme="dark"] .nav-meta { color: var(--cream); }
.site-header[data-theme="dark"] .brand svg path[fill="#2B1846"] { fill: var(--cream); }
.site-header .progress { position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: var(--tang); transform: scaleX(var(--sp, 0)); transform-origin: left; pointer-events: none; }
.nav-links a .t { display: inline-block; position: relative; overflow: hidden; line-height: 1.25; vertical-align: top; }
.nav-links a .t > span { display: block; transition: transform 340ms var(--ease); }
.nav-links a .t::after { content: attr(data-t); position: absolute; left: 0; top: 100%; display: block; color: var(--tang); transition: transform 340ms var(--ease); }
.nav-links a:hover .t > span, .nav-links a:hover .t::after { transform: translateY(-100%); }
.site-header[data-theme="dark"] .nav-links a::after { background: var(--tang); }

/* --- cursor trailer: the native arrow stays, a blade follows it --- */
.cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; opacity: 0; transition: opacity 240ms var(--ease); will-change: transform; }
.cursor.on { opacity: 1; }
.cursor .c-blade { position: absolute; left: 14px; top: 16px; width: 6px; height: 18px; background: var(--tang); border-radius: 1px; transform: skewX(-23deg); transition: transform 260ms var(--ease), opacity 200ms var(--ease); }
.cursor.link .c-blade { transform: skewX(-23deg) scaleY(1.5); }
.cursor.down .c-blade { transform: skewX(-23deg) scale(0.7); }
.cursor .c-ring { position: absolute; left: -78px; top: 14px; width: 64px; height: 64px; border-radius: 50%; background: var(--tang); color: var(--plum); display: grid; place-items: center; transform: scale(0); transition: transform 280ms var(--ease); font-family: var(--font-display); font-weight: 800; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
.cursor[data-mode] .c-ring { transform: scale(1); }
.cursor[data-mode] .c-blade { opacity: 0; }

/* --- blade field: a canvas of 23-degree marks that lean toward the pointer --- */
.hero-ed, .page-hero { position: relative; }
.hero-ed > .container, .page-hero > .container { position: relative; z-index: 1; }
.blades { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: block; width: 100%; height: 100%; }
.centered-wrap { position: relative; overflow: hidden; }
.centered-wrap > .container { position: relative; z-index: 1; }
.field-space { height: clamp(200px, 34vh, 360px); }
.centered-wrap .centered { padding-top: 0; }

/* --- home hero, bigger and alive --- */
.hero-title { font-size: clamp(2.6rem, 6.2vw, 6rem); line-height: 0.96; letter-spacing: -0.04em; max-width: 13em; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .hero-title .hollow { color: color-mix(in srgb, var(--ink) calc(var(--fill, 0) * 100%), transparent); transition: color 140ms linear; }
}
.cue { display: inline-flex; align-items: center; gap: 10px; }
.cue i { display: block; width: 6px; height: 16px; background: var(--tang); transform: skewX(-23deg); border-radius: 1px; animation: cueBob 1.8s var(--ease) infinite; }
@keyframes cueBob { 0%, 100% { transform: skewX(-23deg) translateY(0); } 50% { transform: skewX(-23deg) translateY(5px); } }
.hero-panel.tilt { will-change: transform; }

/* --- marquee driven by scroll velocity, alternating solid and hollow --- */
.marquee.js .marquee-track { animation: none; will-change: transform; }
.marquee-track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--cream); }

/* --- peek: a preview that follows the pointer over the index rows --- */
.peek { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; will-change: transform; }
.peek-in { width: 250px; transform: translate(60px, -50%) rotate(-4deg) scale(0.6); opacity: 0; transition: transform 340ms var(--ease), opacity 240ms var(--ease); transform-origin: left center; filter: drop-shadow(0 24px 40px rgba(20,10,36,0.28)); }
.peek.on .peek-in { transform: translate(60px, -50%) rotate(-4deg) scale(1); opacity: 1; }
.mini { position: relative; background: var(--sand-0); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.mini-web { height: 180px; }
.mini-web .mw-bar { height: 16px; background: var(--sand-200); display: flex; align-items: center; gap: 4px; padding: 0 8px; }
.mini-web .mw-bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--sand-400); }
.mini-web .mw-nav { position: absolute; left: 12px; right: 12px; top: 26px; height: 6px; display: flex; justify-content: space-between; }
.mini-web .mw-nav i { display: block; width: 26px; height: 6px; border-radius: 3px; background: var(--plum-200); }
.mini-web .mw-nav i:first-child { background: var(--plum); width: 20px; }
.mini-web .mw-nav i:last-child { background: var(--tang); width: 30px; }
.mini-web .mw-h { position: absolute; left: 12px; top: 48px; height: 14px; border-radius: 3px; background: var(--plum); }
.mini-web .mw-h1 { width: 118px; } .mini-web .mw-h2 { width: 88px; top: 66px; }
.mini-web .mw-p { position: absolute; left: 12px; top: 88px; width: 100px; height: 5px; border-radius: 3px; background: var(--sand-300); }
.mini-web .mw-cta { position: absolute; left: 12px; top: 102px; width: 54px; height: 14px; border-radius: 99px; background: var(--tang); }
.mini-web .mw-img { position: absolute; right: 12px; top: 48px; width: 86px; height: 68px; border-radius: 6px; background: linear-gradient(135deg, var(--plum-500), var(--plum-200)); }
.mini-web .mw-c { position: absolute; bottom: 12px; width: 64px; height: 34px; border-radius: 5px; background: var(--sand-50); border: 1px solid var(--line); }
.mini-web .mw-c::before { content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 2px; background: var(--tang); }
.mini-web .mw-c1 { left: 12px; } .mini-web .mw-c2 { left: 88px; } .mini-web .mw-c3 { left: 164px; }
.mini-app { background: transparent; border: 0; height: 250px; overflow: visible; display: grid; place-items: center; }
.mini-app .ma-phone { width: 122px; height: 240px; border-radius: 22px; background: var(--plum-950); padding: 8px; box-shadow: inset 0 0 0 2px var(--plum-700); position: relative; }
.mini-app .ma-screen { position: absolute; inset: 8px; border-radius: 16px; background: var(--cream); overflow: hidden; }
.mini-app .ma-notch { position: absolute; left: 50%; top: 6px; width: 36px; height: 5px; border-radius: 3px; background: var(--plum-950); transform: translateX(-50%); z-index: 2; }
.mini-app .ma-hd { position: absolute; left: 10px; top: 20px; width: 60px; height: 8px; border-radius: 3px; background: var(--plum); }
.mini-app .ma-search { position: absolute; left: 10px; right: 10px; top: 34px; height: 12px; border-radius: 99px; background: var(--sand-0); border: 1px solid var(--line); }
.mini-app .ma-hero { position: absolute; left: 10px; right: 10px; top: 54px; height: 50px; border-radius: 8px; background: var(--tang); }
.mini-app .ma-hero::after { content: ""; position: absolute; left: 8px; bottom: 8px; width: 40px; height: 6px; border-radius: 3px; background: var(--plum); }
.mini-app .ma-t { position: absolute; width: 40px; height: 40px; border-radius: 8px; background: var(--sand-0); border: 1px solid var(--line); }
.mini-app .ma-t::before { content: ""; position: absolute; left: 6px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--plum-300); }
.mini-app .ma-t1 { left: 10px; top: 112px; } .mini-app .ma-t2 { right: 10px; top: 112px; } .mini-app .ma-t3 { left: 10px; top: 160px; } .mini-app .ma-t4 { right: 10px; top: 160px; }
.mini-app .ma-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: var(--sand-0); border-top: 1px solid var(--line); display: flex; justify-content: space-around; align-items: center; }
.mini-app .ma-tabs i { width: 8px; height: 8px; border-radius: 2px; background: var(--sand-300); }
.mini-app .ma-tabs i:first-child { background: var(--tang); }
.mini-soc { background: transparent; border: 0; height: 230px; overflow: visible; }
.mini-soc .ms-card { position: absolute; left: 30px; top: 0; width: 170px; height: 220px; background: var(--sand-0); border-radius: 10px; border: 1px solid var(--line); overflow: hidden; }
.mini-soc .ms-card.back { left: 52px; top: 10px; transform: rotate(6deg); opacity: 0.7; }
.mini-soc .ms-top { height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 8px; }
.mini-soc .ms-top i { width: 14px; height: 14px; border-radius: 50%; background: var(--tang); }
.mini-soc .ms-top b { width: 56px; height: 5px; border-radius: 3px; background: var(--plum); }
.mini-soc .ms-img { height: 130px; background: linear-gradient(160deg, var(--plum), var(--plum-500)); position: relative; }
.mini-soc .ms-img::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent var(--cream); transform: translate(-40%, -50%); }
.mini-soc .ms-act { height: 22px; display: flex; gap: 6px; align-items: center; padding: 0 8px; }
.mini-soc .ms-act i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--plum); }
.mini-soc .ms-act i:first-child { background: var(--tang); border-color: var(--tang); }
.mini-soc .ms-cap { margin: 0 8px; height: 5px; border-radius: 3px; background: var(--sand-300); }
.mini-soc .ms-cap + .ms-cap { margin-top: 5px; width: 90px; }

/* --- capabilities wall: hollow type that fills in as it enters --- */
.wall { display: flex; flex-wrap: wrap; gap: 0.15em 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.8vw, 2.5rem); line-height: 1.12; letter-spacing: -0.03em; }
.wall li { max-width: 100%; color: transparent; -webkit-text-stroke: 0.028em var(--ink); font-variation-settings: 'wght' 700; transition: color 640ms var(--ease), -webkit-text-stroke-color 640ms var(--ease), font-variation-settings 360ms var(--ease); transition-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms), 0ms; cursor: default; }
.wall li::after { content: ""; display: inline-block; width: 0.16em; height: 0.5em; background: var(--tang); transform: skewX(-23deg); margin: 0 0.36em; vertical-align: 0; border-radius: 1px; }
.wall li:last-child::after { display: none; }
.wall.in li { color: var(--ink); }
.wall.in li:hover { color: var(--tang); -webkit-text-stroke-color: var(--tang); font-variation-settings: 'wght' 900; transition-delay: 0ms; }
.wall-note { margin-top: 24px; font-size: var(--text-small); color: var(--ink-2); max-width: 44em; }

/* --- scroll progress: --p goes 0 to 1 as an element travels through the viewport --- */
.statement[data-progress] { font-variation-settings: 'wght' calc(450 + var(--p, 1) * 400); }
.manifesto[data-progress] .hl { background-size: calc(var(--p, 1) * 100%) 100%; background-repeat: no-repeat; }
.timeline[data-progress] { position: relative; }
.timeline[data-progress]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tang); transform: scaleY(var(--p, 1)); transform-origin: top; border-radius: 2px; }
.timeline[data-progress] .tl { padding-left: 22px; }
.timeline[data-progress] .tl .num { color: var(--sand-500); transition: color 420ms var(--ease); }
.timeline[data-progress] .tl.on .num { color: var(--tang); }
.on-plum .timeline[data-progress] .tl .num { color: var(--plum-500); }
.on-plum .timeline[data-progress] .tl.on .num { color: var(--tang); }

/* --- inner page heroes: two columns, bigger type --- */
.page-hero .container { max-width: none; display: grid; gap: 18px 56px; }
.page-hero .ph-main { display: flex; flex-direction: column; gap: 18px; }
.page-hero .ph-side { display: flex; flex-direction: column; gap: 22px; }
.page-hero h1 { font-size: clamp(2.4rem, 5.8vw, 5.4rem); letter-spacing: -0.04em; line-height: 0.98; max-width: 11em; }
.page-hero .lead { max-width: 30em; }
@media (min-width: 900px) {
  .page-hero .container { grid-template-columns: 1.2fr 0.8fr; align-items: end; }
  .page-hero .crumbs { grid-column: 1 / -1; }
  .page-hero .ph-side { padding-bottom: 8px; }
}

/* --- compare: drag the blade between a template and a proper build --- */
.compare { display: flex; flex-direction: column; gap: 14px; }
.cmp-frame { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--sand-0); container-type: inline-size; box-shadow: var(--shadow-float); outline: 3px solid transparent; outline-offset: 4px; transition: outline-color var(--fast); }
.cmp-frame:has(.cmp-range:focus-visible) { outline-color: var(--tang-300); }
.cmp-side { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.cmp-after { z-index: 1; }
.cmp-after { clip-path: inset(0 0 0 calc(var(--x, 50) * 1%)); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: calc(var(--x, 50) * 1%); width: 0; z-index: 3; pointer-events: none; }
.cmp-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--cream); box-shadow: 0 0 0 1px rgba(43,24,70,0.25); }
.cmp-handle i { position: absolute; left: -24px; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: var(--plum); box-shadow: 0 8px 24px rgba(20,10,36,0.35); display: grid; place-items: center; }
.cmp-handle i::before { content: ""; width: 6px; height: 20px; background: var(--tang); transform: skewX(-23deg); border-radius: 1px; }
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 4; pointer-events: none; -webkit-appearance: none; appearance: none; }
.cmp-frame { cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cmp-tag { position: absolute; top: 4cqw; z-index: 2; padding: 0.9cqw 1.6cqw; border-radius: 99px; font-family: var(--font-display); font-weight: 800; font-size: max(9px, 1.4cqw); letter-spacing: 0.1em; text-transform: uppercase; }
.cmp-before .cmp-tag { left: 4cqw; background: #4B5563; color: #fff; }
.cmp-after .cmp-tag { right: 4cqw; background: var(--tang); color: var(--plum); }
.cmp-labels { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-small); color: var(--plum-200); }
.cmp-labels span:first-child::before, .cmp-labels span:last-child::after { content: ""; display: inline-block; width: 7px; height: 11px; background: var(--plum-400); transform: skewX(-23deg); margin: 0 8px; vertical-align: -1px; }
.cmp-labels span:last-child::after { background: var(--tang); }
/* the template (left) */
.tpl { background: #EEF1F5; color: #6B7280; font-family: Arial, Helvetica, sans-serif; }
.tpl .t-nav { position: absolute; left: 0; right: 0; top: 0; height: 8%; background: #fff; border-bottom: 1px solid #D1D5DB; display: flex; align-items: center; gap: 2.2cqw; padding: 0 3cqw; }
.tpl .t-nav i { display: block; width: 6cqw; height: 1cqw; background: #9CA3AF; border-radius: 1cqw; }
.tpl .t-nav b { width: 9cqw; height: 2.2cqw; background: #2563EB; border-radius: 0.4cqw; margin-left: auto; }
.tpl .t-hero { position: absolute; left: 0; right: 0; top: 8%; height: 46%; background: linear-gradient(180deg, #CBD5E1, #94A3B8); }
.tpl .t-hero::before { content: ""; position: absolute; left: 50%; top: 22%; width: 0; height: 0; border-left: 9cqw solid transparent; border-right: 9cqw solid transparent; border-bottom: 12cqw solid rgba(255,255,255,0.45); transform: translateX(-70%); }
.tpl .t-hero::after { content: ""; position: absolute; left: 62%; top: 30%; width: 0; height: 0; border-left: 6cqw solid transparent; border-right: 6cqw solid transparent; border-bottom: 8cqw solid rgba(255,255,255,0.4); }
.tpl .t-hero .t-h { position: absolute; left: 30%; width: 40%; height: 3cqw; background: rgba(255,255,255,0.85); border-radius: 0.4cqw; top: 58%; }
.tpl .t-hero .t-h2 { top: 68%; left: 36%; width: 28%; height: 2cqw; opacity: 0.7; }
.tpl .t-hero .t-b { position: absolute; left: 42%; top: 78%; width: 16%; height: 4.5cqw; background: #2563EB; border-radius: 0.4cqw; }
.tpl .t-cols { position: absolute; left: 4%; right: 4%; top: 58%; height: 30%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; }
.tpl .t-col { background: #fff; border: 1px solid #E5E7EB; border-radius: 0.6cqw; position: relative; }
.tpl .t-col::before { content: ""; position: absolute; left: 50%; top: 14%; width: 7cqw; height: 7cqw; border-radius: 50%; background: #DBEAFE; transform: translateX(-50%); }
.tpl .t-col::after { content: ""; position: absolute; left: 20%; right: 20%; top: 62%; height: 1.4cqw; background: #D1D5DB; border-radius: 1cqw; box-shadow: 0 2.6cqw 0 -0.2cqw #E5E7EB, 0 5cqw 0 -0.2cqw #E5E7EB; }
.tpl .t-pop { position: absolute; left: 30%; top: 30%; width: 40%; height: 34%; background: #fff; border-radius: 0.8cqw; box-shadow: 0 2cqw 6cqw rgba(0,0,0,0.25); z-index: 2; }
.tpl .t-pop::before { content: ""; position: absolute; left: 12%; right: 12%; top: 22%; height: 2.4cqw; background: #111827; border-radius: 0.4cqw; box-shadow: 0 4.4cqw 0 -0.6cqw #9CA3AF, 0 8cqw 0 -0.4cqw #2563EB; }
.tpl .t-pop::after { content: "×"; position: absolute; right: 6%; top: 3%; font-size: 3cqw; color: #9CA3AF; }
.tpl .t-cookie { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: #111827; z-index: 2; }
.tpl .t-cookie::before { content: ""; position: absolute; left: 3%; top: 38%; width: 46%; height: 1.4cqw; background: #6B7280; border-radius: 1cqw; }
.tpl .t-cookie::after { content: ""; position: absolute; right: 3%; top: 26%; width: 12%; height: 3.6cqw; background: #2563EB; border-radius: 0.4cqw; }
.tpl .t-chat { position: absolute; right: 3%; bottom: 12%; width: 7cqw; height: 7cqw; border-radius: 50%; background: #2563EB; z-index: 2; }
/* the proper build (right) */
.r97m { background: var(--cream); color: var(--plum); }
.r97m .r-nav { position: absolute; left: 0; right: 0; top: 0; height: 8%; display: flex; align-items: center; gap: 2.2cqw; padding: 0 4cqw; }
.r97m .r-nav b { width: 8cqw; height: 2.2cqw; background: var(--plum); border-radius: 0.3cqw; }
.r97m .r-nav i { display: block; width: 5cqw; height: 1cqw; background: var(--plum-300); border-radius: 1cqw; }
.r97m .r-nav i:first-of-type { margin-left: auto; }
.r97m .r-nav em { width: 10cqw; height: 3.4cqw; border-radius: 99cqw; background: var(--tang); margin-left: 1cqw; }
.r97m .r-h { position: absolute; left: 4%; top: 16%; width: 44%; height: 6cqw; background: var(--plum); border-radius: 0.5cqw; }
.r97m .r-h2 { top: 27%; width: 34%; }
.r97m .r-p { position: absolute; left: 4%; top: 40%; width: 36%; height: 1.4cqw; background: var(--plum-300); border-radius: 1cqw; box-shadow: 0 3cqw 0 0 var(--plum-200); }
.r97m .r-cta { position: absolute; left: 4%; top: 52%; width: 16%; height: 5cqw; border-radius: 99cqw; background: var(--tang); }
.r97m .r-wa { position: absolute; left: 22%; top: 52%; width: 16%; height: 5cqw; border-radius: 99cqw; border: 0.3cqw solid var(--plum); }
.r97m .r-img { position: absolute; left: 54%; top: 14%; width: 42%; height: 50%; border-radius: 1.2cqw; background: linear-gradient(135deg, var(--plum), var(--plum-500) 60%, var(--plum-300)); }
.r97m .r-img::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 9px); }
.r97m .r-row { position: absolute; left: 4%; right: 4%; top: 72%; height: 20%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.r97m .r-row i { display: block; border-top: 0.3cqw solid var(--plum); position: relative; }
.r97m .r-row i::before { content: ""; position: absolute; left: 0; top: 2cqw; width: 60%; height: 1.6cqw; background: var(--plum); border-radius: 0.3cqw; }
.r97m .r-row i::after { content: ""; position: absolute; left: 0; top: 5.2cqw; width: 85%; height: 1cqw; background: var(--plum-300); border-radius: 1cqw; box-shadow: 0 2cqw 0 0 var(--plum-200); }
.r97m .r-map { position: absolute; right: 4%; bottom: 6%; width: 16%; height: 8cqw; border-radius: 0.8cqw; background: var(--sand-0); border: 1px solid var(--line); }
.r97m .r-map::before { content: ""; position: absolute; left: 8%; top: 22%; width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--tang); }
.r97m .r-map::after { content: ""; position: absolute; left: 32%; right: 8%; top: 32%; height: 1.2cqw; background: var(--plum-200); border-radius: 1cqw; box-shadow: 0 2.4cqw 0 0 var(--plum-100); }

/* --- app story: a phone that turns its screens as you read --- */
.as-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .as-grid { grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; } .as-phone-wrap { position: sticky; top: 100px; } }
.as-phone-wrap { display: grid; place-items: center; }
.phone { position: relative; width: min(100%, 250px); aspect-ratio: 9 / 19; border-radius: 36px; background: var(--plum-950); padding: 10px; box-shadow: inset 0 0 0 2px var(--plum-700), 0 30px 60px rgba(20,10,36,0.35); container-type: inline-size; }
.ph-notch { position: absolute; left: 50%; top: 14px; width: 30%; height: 10px; border-radius: 6px; background: var(--plum-950); transform: translateX(-50%); z-index: 3; }
.ph-screens { position: absolute; inset: 10px; border-radius: 28px; overflow: hidden; background: var(--cream); display: flex; }
.ph-strip { display: flex; width: 100%; height: 100%; transform: translateX(calc(var(--s, 0) * -100%)); transition: transform 640ms var(--ease); }
.ph-screen { flex: 0 0 100%; height: 100%; position: relative; font-family: var(--font-body); color: var(--plum); }
.ph-top { position: absolute; left: 0; right: 0; top: 0; height: 12cqw; }
.ph-h { position: absolute; left: 7cqw; top: 14cqw; font-family: var(--font-display); font-weight: 800; font-size: 6.4cqw; letter-spacing: -0.03em; line-height: 1.05; }
.ph-sub { position: absolute; left: 7cqw; right: 7cqw; top: 23cqw; font-size: 3.6cqw; color: var(--ink-2); }
.ph-pill { position: absolute; left: 7cqw; right: 7cqw; height: 10cqw; border-radius: 99cqw; background: var(--sand-0); border: 1px solid var(--line); display: flex; align-items: center; padding: 0 4cqw; font-size: 3.6cqw; color: var(--sand-500); }
.ph-card { position: absolute; border-radius: 4cqw; background: var(--sand-0); border: 1px solid var(--line); }
.ph-card.tang { background: var(--tang); border-color: var(--tang); color: var(--plum); }
.ph-card .lbl { position: absolute; left: 4cqw; bottom: 4cqw; font-weight: 600; font-size: 3.6cqw; }
.ph-card .dot { position: absolute; left: 4cqw; top: 4cqw; width: 6cqw; height: 6cqw; border-radius: 2cqw; background: var(--plum-200); }
.ph-card.tang .dot { background: var(--plum); }
.ph-btn { position: absolute; left: 7cqw; right: 7cqw; height: 12cqw; border-radius: 99cqw; background: var(--tang); color: var(--plum); font-weight: 700; font-size: 4cqw; display: grid; place-items: center; }
.ph-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 14cqw; background: var(--sand-0); border-top: 1px solid var(--line); display: flex; justify-content: space-around; align-items: center; }
.ph-tabs i { width: 5cqw; height: 5cqw; border-radius: 1.6cqw; background: var(--sand-300); }
.ph-tabs i.on { background: var(--tang); }
.ph-row { position: absolute; left: 7cqw; right: 7cqw; height: 14cqw; display: grid; grid-template-columns: 12cqw 1fr auto; align-items: center; gap: 3cqw; border-bottom: 1px solid var(--line); font-size: 3.6cqw; font-weight: 600; }
.ph-row i { width: 12cqw; height: 12cqw; border-radius: 3cqw; background: var(--plum-100); }
.ph-row .q { display: inline-flex; align-items: center; gap: 2cqw; font-family: var(--font-display); font-weight: 800; font-size: 3.2cqw; }
.ph-row .q b { width: 6cqw; height: 6cqw; border-radius: 50%; border: 1px solid var(--plum); display: grid; place-items: center; font-weight: 400; }
.ph-total { position: absolute; left: 7cqw; right: 7cqw; display: flex; justify-content: space-between; font-weight: 700; font-size: 4cqw; }
.ph-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; border-radius: 6cqw 6cqw 0 0; background: var(--sand-0); box-shadow: 0 -4cqw 12cqw rgba(20,10,36,0.18); }
.ph-sheet::before { content: ""; position: absolute; left: 50%; top: 2.4cqw; width: 12cqw; height: 1.2cqw; border-radius: 1cqw; background: var(--sand-300); transform: translateX(-50%); }
.ph-opt { position: absolute; left: 7cqw; right: 7cqw; height: 13cqw; border-radius: 3cqw; border: 1px solid var(--line); display: flex; align-items: center; gap: 3cqw; padding: 0 4cqw; font-size: 3.6cqw; font-weight: 600; }
.ph-opt i { width: 5cqw; height: 5cqw; border-radius: 50%; border: 1.5px solid var(--plum-300); }
.ph-opt.on { border-color: var(--plum); }
.ph-opt.on i { border-color: var(--tang); background: var(--tang); box-shadow: inset 0 0 0 1.2cqw var(--sand-0); }
.ph-map { position: absolute; left: 7cqw; right: 7cqw; top: 30cqw; height: 46cqw; border-radius: 4cqw; background: var(--plum-100); overflow: hidden; }
.ph-map::before { content: ""; position: absolute; left: 12%; top: 70%; width: 76%; height: 0; border-top: 0.9cqw dashed var(--plum-500); transform: rotate(-32deg); transform-origin: left; }
.ph-map i { position: absolute; width: 5cqw; height: 5cqw; border-radius: 50%; background: var(--tang); border: 0.8cqw solid var(--sand-0); }
.ph-map i.a { left: 12%; top: 68%; } .ph-map i.b { left: 74%; top: 28%; background: var(--plum); }
.ph-steps { position: absolute; left: 7cqw; right: 7cqw; top: 82cqw; display: flex; flex-direction: column; gap: 2.8cqw; font-size: 3.6cqw; font-weight: 600; }
.ph-steps span { display: flex; align-items: center; gap: 3cqw; color: var(--sand-500); }
.ph-steps span::before { content: ""; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; border: 1.5px solid var(--sand-400); }
.ph-steps span.done { color: var(--plum); }
.ph-steps span.done::before { background: var(--success); border-color: var(--success); }
.ph-steps span.now { color: var(--plum); }
.ph-steps span.now::before { border-color: var(--tang); background: var(--tang); }
.as-steps { display: flex; flex-direction: column; counter-reset: as; }
.as-step { display: grid; grid-template-columns: 56px 1fr; gap: 8px 18px; padding: 26px 0; border-top: 1px solid var(--line); transition: opacity 400ms var(--ease); }
@media (min-width: 900px) { .as-step { min-height: 52vh; align-content: center; padding: 32px 0; opacity: 0.35; } .as-step[data-on="true"] { opacity: 1; } }
.as-step .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.2rem); color: var(--tang); line-height: 1; letter-spacing: -0.03em; }
.as-step h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); }
.as-step p { grid-column: 2; color: var(--ink-2); max-width: 30em; }
@media (max-width: 899px) {
  .as-steps { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; scrollbar-width: thin; }
  .as-step { flex: 0 0 min(82%, 300px); scroll-snap-align: center; border: 1px solid var(--line); border-radius: 14px; padding: 18px; grid-template-columns: 1fr; gap: 8px; background: var(--sand-0); }
  .as-step p { grid-column: 1; font-size: 15px; }
  .as-step[data-on="true"] { border-color: var(--plum); }
}

/* --- specimen: what the audit report looks like --- */
.specimen { position: relative; background: var(--sand-0); border: 1px solid var(--line); border-radius: 6px; padding: clamp(20px, 3vw, 30px); box-shadow: var(--shadow-card); transform: rotate(0.8deg); font-size: 15px; max-width: 520px; }
.specimen header { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 14px; }
.specimen h3 { font-size: 1.1rem; margin-bottom: 14px; }
.findings { display: flex; flex-direction: column; counter-reset: f; }
.finding { display: grid; grid-template-columns: 26px 1fr; gap: 3px 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.finding::before { counter-increment: f; content: counter(f); font-family: var(--font-display); font-weight: 800; font-size: 12px; color: var(--tang-700); padding-top: 3px; grid-row: 1 / span 3; }
.finding b { font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.finding .sev { grid-column: 2; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.finding .sev i { display: block; width: 90px; height: 5px; border-radius: 3px; background: var(--sand-200); position: relative; overflow: hidden; }
.finding .sev i::after { content: ""; position: absolute; inset: 0; background: var(--tang); transform: scaleX(var(--v, 0.5)); transform-origin: left; transition: transform 900ms var(--ease) 200ms; }
.finding small { grid-column: 2; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.specimen footer { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--sand-300); font-size: 13px; color: var(--ink-2); }
.specimen .stamp { position: absolute; right: 18px; bottom: -14px; transform: rotate(-6deg); background: var(--sand-0); }

/* --- colophon: the honest facts about this page --- */
.colophon { padding-block: clamp(48px, 7vw, 96px); border-top: 1px solid var(--line); }
.colo-grid { display: grid; gap: 24px; margin-top: 22px; }
@media (min-width: 900px) { .colo-grid { grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: start; } }
.colo-text { font-family: var(--font-body); font-weight: 500; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.4; letter-spacing: -0.01em; max-width: 30em; text-wrap: pretty; }
.colo-facts { display: grid; grid-template-columns: auto 1fr; gap: 0 24px; margin: 0; border-top: 1px solid var(--ink); font-size: 15px; align-self: end; }
.colo-facts dt { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); padding: 12px 0; border-bottom: 1px solid var(--line); }
.colo-facts dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* --- footer: back to top --- */
.totop { display: inline-flex; align-items: center; gap: 10px; color: var(--plum-200); text-decoration: none; font-size: var(--text-small); }
.totop i { display: block; width: 6px; height: 16px; background: var(--tang); transform: skewX(-23deg); border-radius: 1px; transition: transform 300ms var(--ease); }
.totop:hover { color: var(--cream); }
.totop:hover i { transform: skewX(-23deg) translateY(-4px); }

/* --- reduced motion: every move becomes a still --- */
@media (prefers-reduced-motion: reduce) {
  .cursor, .peek { display: none; }
  .cue i { animation: none; }
  .wall li { color: var(--ink); transition: none; }
  .nav-links a .t > span, .nav-links a .t::after { transition: none; }
  .ph-strip { transition: none; }
  .finding .sev i::after { transition: none; }
  .site-header { transition: none; }
}
@media (max-width: 899px) {
  .specimen { transform: none; max-width: none; }
  .phone { width: min(100%, 220px); }
}
@media (max-width: 400px) {
  .wall { font-size: 1.25rem; }
  .colo-facts { grid-template-columns: 1fr 1fr; }
  .finding .sev i { width: 60px; }
}

/* --- render only what is near the viewport; sticky sections opt out --- */
.section:not(.hero), .colophon, .ticket-wrap { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.section:has(.sticky), [data-appstory], .section:has(.as-phone-wrap) { content-visibility: visible; }