/* NOBREAKS service pages, 16mm identity (2026-10-20). Same tokens, type and book pill as the homepage (home.css). */
:root {
  --ease: cubic-bezier(.19, 1, .22, 1);
  --snap: cubic-bezier(.52, .01, 0, 1);
  --ink: #0A0A0A;
  --teal: #1A1715;
  --mist: #A8A29B;
  --paper: #F5F3EF;
  --red: #EB4604;
  --slate: #141312;
  --line: rgba(245, 243, 239, .14);
  --line-ink: rgba(9, 13, 14, .14);
  --muted-ink: #57514B;
  --ag: "Questrial", "ITC Avant Garde Gothic Pro", Futura, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gut: 80px;
}
* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 17px/1.6 var(--ag); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; }
a { color: inherit; }
h1, h2, h3, p, ol, ul { margin: 0; }
h2 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.label { color: var(--mist); font: 400 12px/16px var(--mono); letter-spacing: .04em; }
.paper .label { color: var(--muted-ink); }

/* film grain: tile drawn by service.js; moves in the hero only */
.grain { position: absolute; inset: -30%; pointer-events: none; background-image: var(--grain); background-size: 128px; mix-blend-mode: overlay; opacity: .3; z-index: 0; }
.hero > .grain { animation: grain .42s steps(5) infinite; }
.paper > .grain { opacity: .18; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-9%, 5%); } 40% { transform: translate(6%, -7%); } 60% { transform: translate(-4%, 9%); } 80% { transform: translate(8%, 3%); } }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 40; height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gut);
  background: rgba(9, 13, 14, .72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  transition: transform .7s var(--snap), box-shadow .5s ease; }
.top.scrolled { box-shadow: inset 0 -1px 0 var(--line); }
.top.hide { transform: translateY(-100%); }
.top .home img { display: block; width: 118px; height: auto; }
.top nav { display: flex; align-items: center; gap: 22px; }
.nav-link { position: relative; font-size: 15px; line-height: 18px; color: var(--paper); opacity: .85; text-decoration: none; }
.nav-link:hover { opacity: 1; }
.nav-link span { position: relative; }
.nav-link span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--snap); }
.nav-link:hover span::after, .nav-link[aria-current] span::after { transform: scaleX(1); transform-origin: left; }

/* book pill (homepage) */
.bk { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--red); color: var(--paper);
  font-size: 15px; line-height: 1; white-space: nowrap; text-decoration: none; box-shadow: 0 10px 24px -14px rgba(235, 70, 4, .9), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: background .25s, box-shadow .3s, padding .4s var(--ease), scale .15s ease-out; }
.bk:hover { background: #C93C03; box-shadow: 0 14px 30px -12px rgba(235, 70, 4, 1), inset 0 1px 0 rgba(255, 255, 255, .22); padding-left: 16px; }
.bk:active { scale: .97; }
.bk-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); flex: none; }
.bk-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--paper); animation: bk-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes bk-ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
.bk-t .rl { display: inline-flex; overflow: hidden; line-height: 1.25; height: 1.25em; }
.bk-t .ch { display: inline-block; position: relative; white-space: pre; transition: transform .5s var(--ease); transition-delay: calc(var(--i) * 12ms); }
.bk-t .ch::after { content: attr(data-c); position: absolute; left: 0; top: 100%; }
.bk:hover .ch, .bk:focus-visible .ch { transform: translateY(-100%); }
.bk-ic { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); color: var(--ink); overflow: hidden; flex: none; }
.bk-stack { position: absolute; inset: 0; display: flex; flex-direction: column; transition: transform .5s var(--ease); }
.bk-stack svg { flex: none; width: 30px; height: 30px; padding: 7px; }
.bk:hover .bk-stack, .bk:focus-visible .bk-stack { transform: translateY(-30px); }
.bk-lg { font-size: 16px; padding: 8px 8px 8px 20px; gap: 12px; }
.bk-lg:hover { padding-left: 22px; }
.bk-lg .bk-ic { width: 38px; height: 38px; }
.bk-lg .bk-stack svg { width: 38px; height: 38px; padding: 9px; }
.bk-lg:hover .bk-stack, .bk-lg:focus-visible .bk-stack { transform: translateY(-38px); }
.bk:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

.btn { display: inline-flex; align-items: center; border-radius: 999px; padding: 15px 24px; font-size: 15px; line-height: 18px; text-decoration: none; white-space: nowrap; transition: background-color .3s ease, scale .15s ease-out; }
.btn:active { scale: .97; }
.btn.ghost { box-shadow: inset 0 0 0 1px rgba(245, 243, 239, .3); color: var(--paper); }
.btn.ghost:hover { background: rgba(245, 243, 239, .08); }

.burger { all: unset; display: none; cursor: pointer; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 6px; padding: 0 9px; box-sizing: border-box; position: relative; z-index: 90; }
.burger i { display: block; height: 2px; background: var(--paper); transition: transform .5s var(--snap); }
.menu-open .burger i:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .burger i:last-child { transform: translateY(-4px) rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: 80; background: var(--ink); display: none; flex-direction: column; justify-content: center; gap: 6px; padding: 0 28px;
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--snap); visibility: hidden; }
.menu-open .sheet { clip-path: inset(0 0 0 0); visibility: visible; }
.sheet a { font-size: 44px; line-height: 54px; letter-spacing: -0.02em; color: var(--paper); text-decoration: none; transform: translateY(24px); opacity: 0;
  transition: transform .8s var(--ease), opacity .6s ease; }
.sheet a.bk { margin-top: 28px; align-self: flex-start; font-size: 16px; line-height: 1; letter-spacing: 0; }
.menu-open .sheet a { transform: none; opacity: 1; }
.menu-open .sheet a:nth-child(2) { transition-delay: .05s; } .menu-open .sheet a:nth-child(3) { transition-delay: .1s; }
.menu-open .top { z-index: 100; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: clip; padding: 48px var(--gut) 104px; color: var(--paper); isolation: isolate;
  background-color: var(--ink); background-image: radial-gradient(70% 90% at 82% 30%, rgba(235, 70, 4, .16), rgba(235, 70, 4, 0) 70%); }
.crumbs { position: relative; z-index: 1; }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font: 400 12px/16px var(--mono); color: var(--mist); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.crumbs a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--paper); }
.hero-copy { position: relative; z-index: 1; max-width: 820px; display: flex; flex-direction: column; gap: 26px; margin-top: 88px; }
h1 { font-size: 72px; line-height: 1.04; font-weight: 400; letter-spacing: -0.025em; text-wrap: balance; }
h1 b, h2 b { font-weight: inherit; }
.lead { max-width: 56ch; font-size: 18px; line-height: 28px; color: var(--mist); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-mark { position: absolute; right: var(--gut); top: 50%; width: 360px; height: 278px; margin-top: -100px; z-index: 1;
  background: url(assets/v3/logo/logomark-white.svg) center / contain no-repeat; opacity: .14; }

/* ---------- sections ---------- */
.sec { position: relative; padding: 120px var(--gut); }
.split { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 80px; align-items: start; }
.head { display: flex; flex-direction: column; gap: 18px; }
h2 { font-size: 52px; line-height: 1.08; font-weight: 400; letter-spacing: -0.025em; }
.intro { font-size: 18px; line-height: 28px; color: var(--mist); max-width: 460px; }
.sec-top { display: flex; justify-content: space-between; align-items: end; gap: 48px; margin-bottom: 56px; }

.fit { list-style: none; padding: 0; counter-reset: fit; }
.fit li { counter-increment: fit; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 26px 0; border-top: 1px solid var(--line);
  font-size: 24px; line-height: 32px; letter-spacing: -0.01em; }
.fit li:last-child { border-bottom: 1px solid var(--line); }
.fit li::before { content: counter(fit, decimal-leading-zero); color: var(--mist); font: 400 12px/32px var(--mono); }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--slate); box-shadow: inset 0 0 0 1px rgba(245, 243, 239, .1); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 12px; min-height: 220px; }
h3 { font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -0.02em; }
.card p { font-size: 16px; line-height: 24px; color: var(--mist); }

/* process: a lifted dark band with a faint orange glow, like "Two ways to start" on the homepage */
.dark { position: relative; overflow: clip; isolation: isolate; padding: 112px var(--gut); }
.dark.paper { background: radial-gradient(70% 60% at 50% 0%, rgba(235, 70, 4, .10), rgba(235, 70, 4, 0) 70%), #0F0E0D; color: var(--paper); }
.dark.paper .label { color: var(--mist); }
.dark.paper .steps li { border-top-color: var(--line); }
.dark.paper .steps p { color: var(--mist); }
.dark .sec-top, .dark .steps { position: relative; z-index: 1; }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps li { border-top: 1px solid var(--line-ink); padding-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.steps .n { font: 400 13px/16px var(--mono); color: var(--red); }
.steps p { font-size: 16px; line-height: 24px; color: var(--muted-ink); max-width: 360px; }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0;
  font-size: 22px; line-height: 28px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 30px; color: var(--mist); transition: transform .6s var(--snap); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline-offset: 4px; border-radius: 6px; }
.faq details p { max-width: 620px; padding-bottom: 26px; margin-top: -10px; font-size: 17px; line-height: 26px; color: var(--mist); }

/* ---------- closing CTA + footer ---------- */
.end { position: relative; border-top: 1px solid var(--line); background: var(--ink) radial-gradient(60% 80% at 50% 0%, rgba(235, 70, 4, .12), rgba(235, 70, 4, 0) 70%);
  color: var(--paper); padding: 112px var(--gut) 32px; display: flex; flex-direction: column; gap: 72px; }
.cta { display: flex; flex-direction: column; gap: 26px; }
.cta h2 { font-size: 76px; line-height: 1.02; max-width: 900px; }
.cta p { max-width: 560px; font-size: 18px; line-height: 28px; color: var(--mist); }
.cta .actions { gap: 20px; }
.cta .mail { color: var(--mist); font-size: 15px; line-height: 18px; }
.foot { display: flex; justify-content: space-between; align-items: start; gap: 48px; border-top: 1px solid var(--line); padding-top: 40px; }
.foot img { display: block; width: 160px; height: auto; flex-shrink: 0; }
.cols { display: flex; gap: 80px; }
.col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 18px; color: var(--paper); }
.col .label { margin-bottom: 4px; }
.col a { text-decoration: none; opacity: .85; }
.col a:hover, .col a[aria-current] { opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal { color: var(--mist); font-size: 12px; line-height: 16px; }
.end a.underline, .legal a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.end a.underline:hover, .legal a:hover { color: var(--paper); }

/* ---------- motion ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; pointer-events: none; }
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease) var(--d, 0s), transform 1.2s var(--ease) var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.rise { animation: rise 1.2s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.hero.rise { animation-name: fade; animation-duration: .9s; }
@keyframes fade { from { opacity: 0; } }

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
  :root { --gut: 56px; }
  .hero-mark { width: 240px; height: 185px; margin-top: -40px; opacity: .08; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .cta h2 { font-size: 62px; }
  .foot { flex-direction: column; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  :root { --gut: 20px; }
  .top { height: 68px; }
  .top .home img { width: 96px; }
  .top nav { display: none; }
  .burger { display: flex; }
  .sheet { display: flex; }
  .hero { padding: 28px 20px 64px; background-image: radial-gradient(100% 70% at 80% 85%, rgba(235, 70, 4, .14), rgba(235, 70, 4, 0) 70%); }
  .hero-mark { display: none; }
  .hero-copy { margin-top: 48px; gap: 22px; }
  h1 { font-size: 44px; }
  .lead { font-size: 17px; line-height: 26px; }
  .sec { padding: 72px 20px; }
  .sec-top { flex-direction: column; align-items: start; gap: 16px; margin-bottom: 32px; }
  .split { gap: 28px; }
  h2 { font-size: 38px; }
  .intro { font-size: 17px; line-height: 26px; }
  .fit li { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; font-size: 20px; line-height: 28px; }
  .fit li::before { line-height: 16px; }
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 24px; min-height: 0; gap: 10px; }
  h3 { font-size: 25px; line-height: 31px; }
  .dark { padding: 72px 20px; }
  .faq summary { font-size: 19px; line-height: 26px; padding: 22px 0; }
  .end { padding: 72px 20px 24px; gap: 48px; }
  .cta { gap: 22px; }
  .cta h2 { font-size: 44px; }
  .cta p { font-size: 17px; line-height: 26px; }
  .cta .actions { flex-direction: column; align-items: start; gap: 18px; }
  .foot { gap: 28px; padding-top: 28px; }
  .cols { flex-direction: column; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* ---------- one system with the homepage: arrow-fill primary, dash secondary ---------- */
/* After Arrow Fill Button by hyperiux and Dash Button by kevingirelli (21st.dev, MIT). */
.bk { isolation: isolate; overflow: hidden; }
.bk::before { content: ""; position: absolute; z-index: -1; right: 6px; top: 50%; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); translate: 0 -50%; scale: 0; transition: scale .55s var(--ease); }
.bk-lg::before { width: 38px; height: 38px; right: 8px; }
.bk:hover::before, .bk:focus-visible::before { scale: 14; }
.bk:hover, .bk:focus-visible { background: var(--red); color: var(--ink); }
.bk:hover .bk-dot, .bk:hover .bk-dot::after, .bk:focus-visible .bk-dot, .bk:focus-visible .bk-dot::after { background: var(--red); }
.bk:hover .bk-ic, .bk:focus-visible .bk-ic { background: var(--red); color: var(--paper); }
.dash { position: relative; display: inline-flex; align-items: center; padding: 14px 22px; border-radius: 999px; background: #1A1816; color: var(--paper); font-size: 15px; line-height: 1; text-decoration: none; white-space: nowrap; transition: background .25s; }
.dash svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dash rect { fill: none; stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 6 6; opacity: 0; transition: opacity .2s; animation: march .6s linear infinite paused; }
.dash:hover, .dash:focus-visible { background: transparent; outline: none; }
.dash:hover rect, .dash:focus-visible rect { opacity: 1; animation-play-state: running; }
@keyframes march { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) { .bk::before { transition: none; } }