/* Perigon Media. A perigon is the angle of one full turn: 360 degrees.
   The system: ink + paper, one hot accent, degrees as the numbering scheme. */
@property --deg { syntax: '<integer>'; initial-value: 0; inherits: false; }

:root {
  --ink: #0b0b0f; --ink-2: #15151c; --ink-3: #22222c;
  --paper: #f3efe6; --paper-2: #e8e2d4;
  --hot: #ff4f2b; --hot-2: #ff7a3d; --volt: #d8ff3e; --sky: #58c7ff; --violet: #7a6bff;
  --mute-d: #9a9aa8; --mute-l: #5d5a52;
  --line-d: rgba(255,255,255,.12); --line-l: rgba(11,11,15,.14);
  --display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --wrap: 1240px; --gut: clamp(18px, 4vw, 40px); --r: 18px;
  --ease: cubic-bezier(.2,.7,.1,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--hot); color: var(--ink); }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.mono, .eyebrow { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--hot); margin-bottom: 22px; }
.eyebrow::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--hot); }
.display, h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.035em; line-height: .98; text-wrap: balance; }
h1 { font-size: clamp(44px, 7.4vw, 108px); font-weight: 800; }
h2, .display { font-size: clamp(34px, 4.6vw, 64px); }
h3 { font-family: var(--display); font-weight: 600; font-size: 23px; letter-spacing: -.02em; line-height: 1.15; }
.lede { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; max-width: 62ch; }
.hot { color: var(--hot); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--hot); color: var(--ink); padding: 10px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font: 600 15px/1 var(--body); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .25s var(--ease), background .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn span { transition: transform .25s var(--ease); }
.btn:hover span { transform: translateX(4px); }
.btn--hot { background: var(--hot); color: var(--ink); }
.btn--hot:hover { background: var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ghost { border-color: currentColor; background: transparent; color: inherit; }
.btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.sec--paper .btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* logo */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.mark { width: 34px; height: 34px; flex: none; }
.logo__word { font: 800 21px/1 var(--display); letter-spacing: -.04em; }
.logo__word em { font-style: normal; font-weight: 400; opacity: .7; margin-left: .22em; }
.logo:hover .mark__ray { transform-origin: 32px 32px; animation: turn 1s var(--ease); }
@keyframes turn { to { transform: rotate(360deg); } }

/* header */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(11,11,15,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-d); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; }
.nav { display: flex; gap: 4px; }
.nav a { padding: 8px 13px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 500; color: #cfcfd8; transition: color .2s, background .2s; }
.nav a:hover { color: #fff; background: var(--line-d); }
.nav a[aria-current] { color: var(--ink); background: var(--paper); }
.nav .nav__cta { display: none; }
.hdr__right { display: flex; align-items: center; gap: 16px; }
.deg { font: 500 12.5px var(--mono); color: var(--mute-d); min-width: 4ch; text-align: right; }
.hdr__cta { padding: 11px 18px; font-size: 14px; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line-d); border-radius: 50%; background: none; position: relative; cursor: pointer; }
.burger i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--paper); transition: transform .3s var(--ease), top .3s var(--ease); }
.burger i:first-child { top: 17px; } .burger i:last-child { top: 25px; }
.burger[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg); }

/* sections */
.sec { padding: clamp(72px, 10vw, 140px) 0; position: relative; }
.sec--paper { background: var(--paper); color: var(--ink); }
.sec--paper2 { background: var(--paper-2); color: var(--ink); }
.sec--ink2 { background: var(--ink-2); }
.sec--hot { background: var(--hot); color: var(--ink); }
.sec--tight { padding: clamp(48px, 6vw, 84px) 0; }
.sec__head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px 60px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.sec__head p { color: var(--mute-d); max-width: 52ch; }
.sec--paper .sec__head p, .sec--paper2 .sec__head p { color: var(--mute-l); }
.sec--paper .eyebrow, .sec--paper2 .eyebrow { color: #d43a18; }

/* hero */
.hero { position: relative; padding: clamp(56px, 8vw, 110px) 0 clamp(64px, 9vw, 120px); overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 70% at 85% 30%, rgba(255,79,43,.16), transparent 60%), radial-gradient(40% 50% at 10% 100%, rgba(122,107,255,.14), transparent 60%); pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; position: relative; }
.hero .lede { color: #c9c9d3; margin-top: 28px; }
.hero h1 .rot { display: inline-block; color: var(--hot); min-width: 5ch; transition: opacity .35s, transform .35s var(--ease); }
.hero h1 .rot.out { opacity: 0; transform: translateY(.25em); }
.hero--page { padding-bottom: clamp(56px, 7vw, 96px); }
.hero--page h1 { font-size: clamp(40px, 6.2vw, 88px); max-width: 14ch; }
.hero--page .wrap { position: relative; z-index: 1; }
.hero__glyph { position: absolute; right: -9vw; top: 50%; width: min(40vw, 540px); transform: translateY(-50%); opacity: .5; pointer-events: none; color: var(--ink-3); }
.hero__glyph .mark { width: 100%; height: auto; }
.hero__glyph .mark__ray { transform-origin: 32px 32px; transform: rotate(var(--a, 0deg)); animation: glyph 1.6s var(--ease) both; }
.hero__glyph .mark__ring { transform-origin: 32px 32px; transform: rotate(var(--a, 0deg)); animation: glyph 1.6s var(--ease) both; }
@keyframes glyph { from { transform: rotate(-90deg); } }

/* the dial: hero motion graphic */
.dial { --size: min(520px, 84vw); --rad: calc(var(--size) * .39); position: relative; width: var(--size); aspect-ratio: 1; margin: 0 auto; }
.dial > * { position: absolute; }
.dial__ring { inset: 0; border-radius: 50%; border: 1px solid var(--line-d); }
.dial__ring.r2 { inset: 11%; border-style: dashed; animation: spin 90s linear infinite reverse; }
.dial__ring.r3 { inset: 27%; }
.dial__ticks { inset: 3%; border-radius: 50%; background: repeating-conic-gradient(from -.4deg, rgba(255,255,255,.4) 0 .8deg, transparent .8deg 10deg); -webkit-mask: radial-gradient(closest-side, transparent 95%, #000 95.5%); mask: radial-gradient(closest-side, transparent 95%, #000 95.5%); }
.dial__sweep { inset: 11%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 4deg, rgba(255,79,43,0) 4deg, rgba(255,79,43,.42) 90deg, transparent 90deg); animation: spin 12s linear infinite; }
.dial__ray { left: 50%; top: 50%; width: 39%; height: 3px; margin-top: -1.5px; background: linear-gradient(90deg, var(--hot), var(--hot-2)); border-radius: 3px; transform-origin: 0 50%; animation: spin 12s linear infinite; box-shadow: 0 0 18px rgba(255,79,43,.8); }
.dial__core { left: 50%; top: 50%; width: 27%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; background: var(--ink); border: 1px solid var(--line-d); display: grid; place-items: center; font: 700 clamp(22px, 3.2vw, 38px) var(--display); letter-spacing: -.03em; animation: count 12s linear infinite; counter-reset: d var(--deg); }
.dial__core::after { content: counter(d) '°'; font-variant-numeric: tabular-nums; }
.dial__node { left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--rad)) rotate(calc(var(--a) * -1)); text-decoration: none; }
.dial__node b { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); animation: node 12s linear infinite; animation-delay: calc(var(--i) * 2s); }
.dial__node span { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); white-space: nowrap; font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute-d); padding: 4px 8px; border-radius: 999px; background: rgba(11,11,15,.7); animation: label 12s linear infinite; animation-delay: calc(var(--i) * 2s); }
.dial__node:hover span { color: var(--paper); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes count { to { --deg: 360; } }
@keyframes node { 0% { background: var(--hot); border-color: var(--hot); box-shadow: 0 0 0 0 rgba(255,79,43,.7); transform: scale(1.5); } 12% { box-shadow: 0 0 0 22px rgba(255,79,43,0); } 22%, 100% { background: var(--ink); border-color: var(--paper); transform: scale(1); box-shadow: none; } }
@keyframes label { 0%, 8% { color: var(--paper); } 24%, 100% { color: var(--mute-d); } }

/* marquee */
.mq { border-block: 1px solid var(--line-d); overflow: hidden; padding: 20px 0; background: var(--ink); }
.mq__track { display: flex; gap: 44px; width: max-content; animation: mq 38s linear infinite; font: 600 clamp(22px, 3vw, 38px)/1 var(--display); letter-spacing: -.03em; }
.mq__track span { display: inline-flex; align-items: center; gap: 44px; white-space: nowrap; }
.mq__track span::after { content: ''; width: .5em; height: .5em; border-radius: 50%; border: 3px solid var(--hot); border-right-color: transparent; }
.mq__track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--mute-d); }
@keyframes mq { to { transform: translateX(-50%); } }

/* grids and cards */
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.split--wide { grid-template-columns: .8fr 1.2fr; }
.stack > * + * { margin-top: 18px; }
.card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: var(--r); border: 1px solid var(--line-d); background: var(--ink-2); text-decoration: none; overflow: hidden; transition: transform .35s var(--ease), border-color .3s, background .3s; }
.sec--paper .card { background: #fbf8f1; border-color: var(--line-l); } .sec--paper2 .card { background: var(--paper); border-color: var(--line-l); }
.card p { color: var(--mute-d); font-size: 16px; } .sec--paper .card p, .sec--paper2 .card p { color: var(--mute-l); }
a.card:hover { transform: translateY(-5px); border-color: var(--hot); }
.card__deg { font: 500 12.5px var(--mono); letter-spacing: .08em; color: var(--hot); display: flex; justify-content: space-between; align-items: center; }
.sec--paper .card__deg, .sec--paper2 .card__deg { color: #d43a18; }
.card__more { margin-top: auto; padding-top: 14px; font: 600 14px var(--body); display: inline-flex; gap: 8px; }
a.card:hover .card__more span { transform: translateX(4px); } .card__more span { transition: transform .25s var(--ease); }
/* sector icon: a pie wedge at the service's angle */
.wedge { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid currentColor; position: relative; opacity: .9; background: conic-gradient(from calc(var(--a, 0deg) + 90deg), var(--hot) 0 60deg, transparent 60deg); transition: transform .6s var(--ease); }
a.card:hover .wedge { transform: rotate(60deg); }

/* big statement */
.manifesto { font: 600 clamp(28px, 4.3vw, 60px)/1.08 var(--display); letter-spacing: -.035em; max-width: 22ch; text-wrap: balance; }
.manifesto span { color: var(--mute-d); } .sec--paper .manifesto span { color: #a39d8f; }
.manifesto--wide { max-width: 26ch; }

/* lists */
.ticks li { position: relative; padding: 16px 0 16px 34px; border-top: 1px solid var(--line-d); }
.sec--paper .ticks li, .sec--paper2 .ticks li { border-color: var(--line-l); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 23px; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--hot); border-right-color: transparent; transform: rotate(-45deg); }
.ticks li b { display: block; font-family: var(--display); font-size: 19px; letter-spacing: -.015em; }
.ticks li span { color: var(--mute-d); font-size: 16px; } .sec--paper .ticks li span, .sec--paper2 .ticks li span { color: var(--mute-l); }
.nots li::before { border: 0; height: 2.5px; width: 16px; top: 29px; background: var(--hot); transform: none; border-radius: 2px; }

/* numbered steps */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line-d); }
.sec--paper .steps, .sec--paper2 .steps { border-color: var(--line-l); }
.steps li { padding: 26px 24px 8px 0; position: relative; }
.steps li::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--hot); }
.steps li em { display: block; font: 500 12.5px var(--mono); font-style: normal; letter-spacing: .08em; color: var(--hot); margin-bottom: 12px; }
.sec--paper .steps li em, .sec--paper2 .steps li em { color: #d43a18; }
.steps li p { margin-top: 8px; font-size: 16px; color: var(--mute-d); } .sec--paper .steps li p, .sec--paper2 .steps li p { color: var(--mute-l); }

/* pipeline: animated flow diagram */
.pipe { position: relative; border: 1px solid var(--line-d); border-radius: var(--r); padding: 34px 28px 28px; background: var(--ink-2); overflow: hidden; }
.sec--paper .pipe { background: var(--ink); color: var(--paper); }
.pipe__cap { font: 500 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute-d); margin-bottom: 30px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pipe ol { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 14px; position: relative; }
.pipe ol::before { content: ''; position: absolute; left: 7px; right: 7px; top: 7px; height: 1px; background: var(--line-d); }
.pipe ol::after { content: ''; position: absolute; top: 3px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 16px 4px rgba(255,79,43,.7); animation: travel 7s linear infinite; }
.pipe li { position: relative; padding-top: 30px; }
.pipe li::before { content: ''; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--ink); border: 2px solid var(--mute-d); animation: stage 7s linear infinite; animation-delay: calc((var(--k) / var(--n, 5)) * 7s); }
.pipe li:nth-child(1) { --k: 0; } .pipe li:nth-child(2) { --k: 1; } .pipe li:nth-child(3) { --k: 2; } .pipe li:nth-child(4) { --k: 3; } .pipe li:nth-child(5) { --k: 4; } .pipe li:nth-child(6) { --k: 5; }
.pipe li b { display: block; font: 600 18px var(--display); letter-spacing: -.015em; }
.pipe li span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--mute-d); }
@keyframes travel { from { left: 0; } to { left: calc(100% - 9px); } }
@keyframes stage { 0% { border-color: var(--hot); background: var(--hot); transform: scale(1.25); } 18%, 100% { border-color: var(--mute-d); background: var(--ink); transform: scale(1); } }

/* doors: two large link panels */
.door { display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; padding: clamp(28px, 4vw, 48px); border-radius: 26px; text-decoration: none; position: relative; overflow: hidden; transition: transform .4s var(--ease); }
.door:hover { transform: translateY(-6px); }
.door h3 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 700; letter-spacing: -.035em; line-height: 1; margin: 14px 0; }
.door p { max-width: 40ch; }
.door--a { background: var(--ink); color: var(--paper); } .door--a p { color: #c9c9d3; }
.door--b { background: var(--hot); color: var(--ink); }
.door::after { content: ''; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; border: 40px solid currentColor; opacity: .08; transition: transform .8s var(--ease); }
.door:hover::after { transform: scale(1.25); }

/* faq */
.faq details { border-top: 1px solid var(--line-d); } .faq details:last-child { border-bottom: 1px solid var(--line-d); }
.sec--paper .faq details, .sec--paper2 .faq details { border-color: var(--line-l); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative; font: 600 clamp(19px, 2vw, 23px)/1.25 var(--display); letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font: 400 30px/1 var(--display); color: var(--hot); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; max-width: 68ch; color: var(--mute-d); } .sec--paper .faq details p, .sec--paper2 .faq details p { color: var(--mute-l); }

/* cta */
.cta__in { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: end; }
.cta p { margin-bottom: 26px; font-size: 19px; max-width: 44ch; }

/* prose (articles, legal) */
.prose { max-width: 720px; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 1.9em; letter-spacing: -.03em; line-height: 1.08; }
.prose h3 { margin-top: 1.6em; }
.prose p, .prose li { font-size: 18.5px; line-height: 1.68; }
.prose ul, .prose ol { padding-left: 1.2em; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li + li { margin-top: .5em; }
.prose a { color: #d43a18; text-underline-offset: 3px; }
.prose blockquote { margin: 1.8em 0; padding: 4px 0 4px 26px; border-left: 4px solid var(--hot); font: 600 clamp(22px, 2.6vw, 30px)/1.2 var(--display); letter-spacing: -.025em; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prose th, .prose td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line-l); vertical-align: top; }
.prose th { font: 500 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute-l); }
.meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute-d); margin-top: 30px; }
.post { display: grid; grid-template-columns: 180px 1fr auto; gap: 14px 40px; align-items: baseline; padding: 30px 0; border-top: 1px solid var(--line-l); text-decoration: none; transition: padding .35s var(--ease); }
.post:last-child { border-bottom: 1px solid var(--line-l); }
.post:hover { padding-left: 14px; }
.post h3 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.post p { margin-top: 10px; color: var(--mute-l); max-width: 60ch; }
.post .mono { color: #d43a18; } .post i { font: 400 30px var(--display); font-style: normal; color: #d43a18; }

/* form */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .full { grid-column: 1 / -1; }
.form label, .form legend { display: block; font: 500 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute-l); margin-bottom: 8px; padding: 0; }
.form input[type=text], .form input[type=email], .form select, .form textarea { width: 100%; padding: 15px 16px; border-radius: 12px; border: 1.5px solid var(--line-l); background: #fbf8f1; color: var(--ink); font: 400 17px var(--body); transition: border-color .2s, box-shadow .2s; }
.form textarea { min-height: 170px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--hot); box-shadow: 0 0 0 4px rgba(255,79,43,.18); }
.form fieldset { border: 0; padding: 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { margin: 0; cursor: pointer; }
.chips input { position: absolute; opacity: 0; }
.chips span { display: inline-block; padding: 10px 15px; border-radius: 999px; border: 1.5px solid var(--line-l); font: 500 14.5px var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); transition: background .2s, color .2s, border-color .2s; }
.chips input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 2px solid var(--hot); outline-offset: 2px; }
.hp { position: absolute !important; left: -9999px; }
.form__note { font-size: 14px; color: var(--mute-l); }
.form__status { font-weight: 600; min-height: 1.6em; } .form__status.err { color: #b3260a; }
.form__done { padding: 40px; border-radius: var(--r); background: var(--ink); color: var(--paper); }
.form__done h3 { font-size: 32px; margin-bottom: 10px; }

/* footer */
.ftr { background: var(--ink); border-top: 1px solid var(--line-d); padding: 72px 0 28px; overflow: hidden; }
.ftr__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.ftr__brand p { color: var(--mute-d); max-width: 38ch; margin-top: 18px; font-size: 16px; }
.ftr h3 { font: 500 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute-d); margin-bottom: 16px; }
.ftr__top a:not(.logo) { display: block; padding: 5px 0; text-decoration: none; color: #d6d6de; }
.ftr__top a:not(.logo):hover { color: var(--hot); }
.ftr__top a .mono { color: var(--mute-d); margin-right: 6px; }
.ftr__word { font: 800 clamp(90px, 23vw, 340px)/1 var(--display); padding-bottom: .08em; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px var(--ink-3); margin: 40px 0 10px -.04em; user-select: none; background: linear-gradient(100deg, var(--ink-3) 40%, var(--hot) 50%, var(--ink-3) 60%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; animation: shine 9s linear infinite; }
@keyframes shine { from { background-position: 120% 0; } to { background-position: -60% 0; } }
.ftr__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--mute-d); border-top: 1px solid var(--line-d); padding-top: 22px; }
.ftr__base a { text-decoration: none; } .ftr__base a:hover { color: var(--hot); }

/* scroll reveal */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js .rv.in { opacity: 1; transform: none; }

/* responsive */
@media (max-width: 1080px) {
  .hdr__cta, .deg { display: none; }
  .burger { display: block; }
  .nav { position: absolute; top: 68px; left: 0; right: 0; height: calc(100dvh - 68px); background: var(--ink); flex-direction: column; gap: 0; padding: 20px var(--gut) 40px; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity .3s, transform .3s var(--ease), visibility .3s; overflow-y: auto; }
  .nav.open { opacity: 1; transform: none; visibility: visible; }
  .nav a { font: 700 34px/1.1 var(--display); letter-spacing: -.03em; padding: 16px 0; border-radius: 0; border-bottom: 1px solid var(--line-d); color: var(--paper); }
  .nav a[aria-current] { background: none; color: var(--hot); }
  .nav .nav__cta { display: inline-flex; align-self: flex-start; margin-top: 28px; font: 600 16px var(--body); letter-spacing: 0; padding: 16px 24px; border-radius: 999px; border: 0; color: var(--ink); }
}
@media (max-width: 900px) {
  .hero__grid, .split, .split--wide, .sec__head, .cta__in { grid-template-columns: 1fr; }
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .hero__glyph { opacity: .28; width: 80vw; right: -30vw; }
  .ftr__top { grid-template-columns: 1fr 1fr; } .ftr__brand { grid-column: 1 / -1; }
  .post { grid-template-columns: 1fr; gap: 8px; } .post i { display: none; }
  .pipe ol { grid-template-columns: 1fr; gap: 22px; }
  .pipe ol::before { left: 7px; right: auto; top: 7px; bottom: 7px; width: 1px; height: auto; }
  .pipe ol::after { animation-name: travel-y; left: 3px; }
  .pipe li { padding: 0 0 0 34px; }
  @keyframes travel-y { from { top: 0; } to { top: calc(100% - 9px); } }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .g2, .g3, .g4, .steps, .form { grid-template-columns: 1fr; }
  .door { min-height: 300px; }
  .dial__node span { font-size: 9.5px; padding: 3px 6px; }
  .ftr__top { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
  .dial__core { --deg: 360; }
}

/* additions */
.mark--mono .mark__ray { stroke: currentColor; } .mark--mono .mark__dot { fill: currentColor; }
.card .ticks li { padding: 12px 0 12px 30px; } .card .ticks li::before { top: 18px; } .card .ticks.nots li::before { top: 23px; }
.card .ticks li:first-child { border-top: 0; }
.card p b { color: inherit; font-weight: 600; }
.sec--paper .lede, .sec--paper2 .lede { color: var(--ink); }
.form__note a { color: #d43a18; }
.hero__glyph .mark__ray, .hero__glyph .mark__dot { opacity: .22; }
.card > div > .mark { width: 100%; height: auto; }