@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/fraunces-var-latin.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/inter-var-latin.woff2) format('woff2'); }

@font-face { font-family: 'Fraunces Fallback'; src: local('Georgia'); size-adjust: 106%; ascent-override: 94%; descent-override: 24.5%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 106.7%; ascent-override: 90.8%; descent-override: 22.6%; line-gap-override: 0%; }

:root {
  --ink: #0c0a08;
  --ink-raised: #17130f;
  --ink-raised-2: #1e1811;
  --cream: #f3ede1;
  --cream-dim: #a99e8c;
  --cream-faint: #8f8474;
  --amber: #e2793d;
  --amber-deep: #b85c2a;
  --amber-soft: rgba(226,121,61,0.10);
  --teal: #6b978e;
  --teal-soft: rgba(107,151,142,0.10);
  --border: rgba(243,237,225,0.09);
  --border-strong: rgba(243,237,225,0.17);
  --serif: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }

header.site { position: sticky; top: 0; z-index: 40; background: rgba(12,10,8,0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .loopmark { width: 22px; height: 22px; }
.wordmark { font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; }
.wordmark span { color: var(--amber); }
nav.links { display: flex; align-items: center; gap: 34px; }
nav.links a.navlink { font-size: 14.5px; color: var(--cream-dim); transition: color 0.15s ease; }
nav.links a.navlink:hover, nav.links a.navlink.active { color: var(--cream); }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 3px; font-size: 14.5px; font-weight: 600; border: 1px solid transparent; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; cursor: pointer; }
.btn-primary { background: var(--amber); color: #1a0f07; }
.btn-primary:hover { background: #ee8a4d; }
.btn-ghost { border-color: var(--border-strong); color: var(--cream); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); }
.menu-toggle { display: none; background: none; border: none; color: var(--cream); font-size: 24px; cursor: pointer; }

nav.links .nav-cta-mobile { display: none; }
@media (max-width: 860px) {
  header.site { backdrop-filter: none; background: var(--ink); }
  nav.links { position: fixed; top: 76px; left: 0; right: 0; bottom: 0; background: var(--ink); flex-direction: column; align-items: flex-start; padding: 32px 24px; gap: 24px; transform: translateX(100%); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s; overflow-y: auto; }
  nav.links.open { transform: translateX(0); visibility: visible; transition: transform 0.25s ease; }
  nav.links a.navlink { font-size: 18px; }
  .menu-toggle { display: block; }
  .nav-cta { display: none; }
  nav.links .nav-cta-mobile { display: inline-flex; }
}

.page-hero { padding: 88px 0 64px; border-bottom: 1px solid var(--border); }
.page-hero .eyebrow { font-size: 14.5px; color: var(--teal); font-weight: 600; margin-bottom: 18px; }
.page-hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 20px; max-width: 15.6em; }
.page-hero p.lead { font-size: 17px; color: var(--cream-dim); max-width: 36.6em; margin: 0; }

.hero { padding: 108px 0 96px; position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.eyebrow { font-size: 14.5px; color: var(--teal); font-weight: 600; margin-bottom: 22px; }
h1.hero-head { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -0.01em; margin: 0 0 26px; }
.hero p.lead { font-size: 18px; color: var(--cream-dim); max-width: 34.1em; margin: 0 0 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }
.hero-actions:has(+ .hero-note) { margin-bottom: 14px; }
.hero-note { margin: 0 0 44px; font-size: 14px; color: var(--cream-faint); }
.capabilities { display: flex; flex-wrap: wrap; gap: 10px; }
.cap-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: 20px; font-size: 13px; color: var(--cream-dim); }
.cap-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }

.stats-band { border-bottom: 1px solid var(--border); }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-block: 44px; }
@media (max-width: 780px) { .stats-row { grid-template-columns: 1fr; gap: 26px; } }
.stat-value { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3vw, 36px); color: var(--amber); margin-bottom: 6px; }
.stat-label { font-size: 14px; color: var(--cream-dim); max-width: 20.2em; }

section { padding: 96px 0; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: none; }
.section-head { max-width: 39.1em; margin-bottom: 56px; }
.kicker { font-size: 14px; color: var(--amber); font-weight: 600; margin-bottom: 12px; }
.section-head h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; margin: 0 0 16px; letter-spacing: -0.01em; }
.section-head p { color: var(--cream-dim); font-size: 16.5px; margin: 0; }


.service-detail { padding: 56px 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; }
.service-detail:first-child { border-top: none; }
@media (max-width: 860px) { .service-detail { grid-template-columns: 1fr; gap: 20px; } }
.service-detail h2 { font-family: var(--serif); font-size: 26px; font-weight: 500; margin: 0 0 6px; }
.service-detail .tag { font-size: 13px; color: var(--amber); font-weight: 600; }
.service-detail p { font-size: 15.5px; color: var(--cream-dim); margin: 0 0 14px; max-width: 35.3em; }
.service-detail ul { margin: 0; padding-left: 18px; color: var(--cream-dim); font-size: 14.5px; }
.service-detail li { margin-bottom: 8px; }

.industry-row { display: flex; gap: 0; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
@media (max-width: 780px) { .industry-row { flex-direction: column; } }
.industry-tile { flex: 1; padding: 36px 30px; border-left: 1px solid var(--border-strong); transition: box-shadow 0.25s ease; }
.industry-tile:hover { background-image: linear-gradient(rgba(243,237,225,0.035), rgba(243,237,225,0.035)); box-shadow: inset 0 2px 0 var(--amber), inset 0 40px 50px -40px rgba(226,121,61,0.18); }
.industry-row .industry-tile:first-child { border-left: none; }
@media (max-width: 780px) { .industry-tile { border-left: none; border-top: 1px solid var(--border-strong); } .industry-row .industry-tile:first-child { border-top: none; } }
@media (min-width: 781px) and (max-width: 1080px) {
  .industry-row { flex-wrap: wrap; }
  .industry-tile { flex: 1 1 50%; }
  .industry-row .industry-tile:nth-child(odd) { border-left: none; }
  .industry-row .industry-tile:nth-child(n+3) { border-top: 1px solid var(--border-strong); }
}
.industry-tile:nth-child(1) { background: var(--amber-soft); }
.industry-tile:nth-child(2) { background: var(--teal-soft); }
.industry-tile:nth-child(3) { background: transparent; }
.industry-tile:nth-child(4) { background: var(--amber-soft); }
.industry-tile h3 { font-size: 17px; margin: 0 0 10px; font-weight: 600; }
.industry-tile p { font-size: 14.5px; color: var(--cream-dim); margin: 0; }

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-bottom: 68px; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 32px; } }
.about-grid p.big { font-family: var(--serif); font-size: 23px; line-height: 1.45; color: var(--cream); margin: 0; }

.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 900px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .value-grid { grid-template-columns: 1fr; } }
.value-card { border-top: 2px solid var(--amber-deep); padding-top: 20px; transition: transform 0.25s ease; }
.value-card:nth-child(3n+2) { border-top-color: var(--teal); }
.value-card:nth-child(3n) { border-top-color: var(--amber); }
.value-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 10px; }
.value-card p { font-size: 14.5px; color: var(--cream-dim); margin: 0; }

.enterprise-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .enterprise-wrap { grid-template-columns: 1fr; gap: 36px; } }
.enterprise-wrap h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; margin: 0 0 16px; letter-spacing: -0.01em; }
.side-p { color: var(--cream-dim); font-size: 16px; margin: 0 0 16px; max-width: 29em; }
.side-p:last-child { margin-bottom: 0; }
.enterprise-list { display: flex; flex-direction: column; }
.enterprise-item { display: grid; grid-template-columns: 14px 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid var(--border); }
.enterprise-item:first-child { border-top: none; }
.enterprise-item .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); margin-top: 8px; }
.enterprise-item h3 { font-size: 16.5px; font-weight: 600; margin: 0 0 8px; }
.enterprise-item p { font-size: 14.5px; color: var(--cream-dim); margin: 0; max-width: 29em; }

.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
@media (max-width: 780px) { .process { grid-template-columns: 1fr; gap: 20px; } }
@media (min-width: 781px) { .process::before { content: ""; position: absolute; left: 0; right: 0; top: 54px; height: 1px; background: linear-gradient(90deg, var(--teal), var(--amber)); opacity: 0.55; } }
.process-step { position: relative; background: var(--ink-raised); border: 1px solid var(--border); border-radius: 6px; padding: 28px 26px 30px; box-shadow: 0 1px 0 rgba(243,237,225,0.04) inset, 0 2px 4px rgba(0,0,0,0.35), 0 14px 28px -16px rgba(0,0,0,0.7); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.process-step .num { font-family: var(--serif); font-size: 36px; color: var(--amber-deep); margin-bottom: 14px; display: block; }
.process-step h3 { font-size: 17.5px; margin: 0 0 8px; }
.process-step p { font-size: 14.5px; color: var(--cream-dim); margin: 0; }

.cta-band { background: var(--ink-raised-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-block: 72px; }
.cta-inner h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.2vw, 34px); margin: 0 0 10px; max-width: 19.7em; }
.cta-inner p { color: var(--cream-dim); margin: 0; font-size: 15.5px; max-width: 27.8em; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.contact-grid h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.2vw, 34px); margin: 0 0 18px; }
.contact-grid p.lead2 { color: var(--cream-dim); font-size: 16px; margin: 0 0 30px; max-width: 27.8em; }
.email-link { font-family: var(--serif); font-size: 20px; color: var(--amber); border-bottom: 1px solid var(--amber-deep); padding-bottom: 2px; }
.next-steps { display: flex; flex-direction: column; gap: 22px; }
.next-step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.next-step .n { font-family: var(--serif); color: var(--teal); font-size: 18px; }
.next-step h3 { font-size: 15px; margin: 0 0 4px; }
.next-step p { font-size: 14px; color: var(--cream-dim); margin: 0; }

.contact-form { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--border); }
.contact-form h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 3vw, 30px); margin: 0 0 10px; }
.contact-form > p { color: var(--cream-dim); font-size: 15px; margin: 0 0 32px; max-width: 34.1em; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 13px; color: var(--cream-dim); font-weight: 600; }
.form-group input, .form-group select, .form-group textarea {
  background: var(--ink-raised); border: 1px solid var(--border-strong); border-radius: 3px;
  color: var(--cream); font-family: var(--sans); font-size: 14.5px; padding: 11px 14px;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--amber); }
.form-group textarea { resize: vertical; min-height: 110px; font-family: var(--sans); }
.form-note { font-size: 13px; color: var(--cream-faint); margin: 16px 0 0; }

footer { padding: 72px 0 32px; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--border); }
@media (max-width: 700px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand p { font-size: 14px; color: var(--cream-dim); margin: 16px 0 0; max-width: 20.2em; }
.footer-col .foot-title { font-size: 14px; color: var(--cream); margin: 0 0 16px; font-weight: 600; }
.footer-col a { display: block; font-size: 14px; color: var(--cream-dim); margin-bottom: 12px; }
.footer-col a:hover { color: var(--amber); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 28px; }
.footer-bottom p { margin: 0; font-size: 13px; color: var(--cream-faint); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.text-link { color: var(--amber); border-bottom: 1px solid var(--amber-deep); transition: color 0.15s ease; }
.text-link:hover { color: #ee8a4d; }

.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tools-grid { grid-template-columns: 1fr; } }
.tool-card { background: var(--ink-raised); border: 1px solid var(--border); border-top: 2px solid var(--amber-deep); border-radius: 6px; padding: 26px 22px 24px; box-shadow: 0 1px 0 rgba(243,237,225,0.04) inset, 0 2px 4px rgba(0,0,0,0.35), 0 14px 28px -16px rgba(0,0,0,0.7); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.tool-card:nth-child(even) { border-top-color: var(--teal); }
.tool-card h3 { font-family: var(--serif); font-size: 19px; font-weight: 500; margin: 0 0 8px; }
.tool-card p { font-size: 14.5px; color: var(--cream-dim); margin: 0; }
.tools-foot { color: var(--cream-dim); font-size: 15.5px; max-width: 39.1em; margin: 36px 0 0; }
.tool-note, .service-detail p.tool-note { font-size: 13.5px; color: var(--cream-faint); margin: 18px 0 0; }
.tool-note a { color: var(--cream-dim); border-bottom: 1px solid var(--border-strong); }
.tool-note a:hover { color: var(--amber); border-color: var(--amber-deep); }

.about-grid p.side-note { color: var(--cream-dim); font-size: 15.5px; margin: 0 0 16px; }
.trust-note { font-size: 14px; color: var(--cream-dim); margin: 28px 0 0; max-width: 27.8em; }

.faq { max-width: 780px; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 36px 22px 0; font-family: var(--serif); font-size: 19px; font-weight: 500; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 20px; color: var(--amber); font-family: var(--sans); font-size: 22px; line-height: 1.2; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.faq details p { margin: 0 0 24px; color: var(--cream-dim); font-size: 15.5px; max-width: 39.1em; }

.glance-lead { font-family: var(--serif); font-size: 23px; line-height: 1.45; color: var(--cream); max-width: 40.1em; margin: 0 0 44px; }
.glance { display: grid; grid-template-columns: 190px 1fr; max-width: 900px; margin: 0; border-bottom: 1px solid var(--border); }
.glance dt { padding: 18px 24px 18px 0; border-top: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--amber); }
.glance dd { margin: 0; padding: 18px 0; border-top: 1px solid var(--border); color: var(--cream-dim); font-size: 15.5px; }
@media (max-width: 700px) {
  .glance-lead { font-size: 19px; margin-bottom: 32px; }
  .glance { grid-template-columns: 1fr; }
  .glance dt { padding: 18px 0 0; }
  .glance dd { border-top: none; padding: 4px 0 18px; }
}
.industry-tile p.tile-links { margin-top: 14px; font-size: 13.5px; }

/* Depth effects. CSS only, and only for people who haven't asked for less motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .value-card:hover { transform: perspective(700px) rotateX(1.5deg) translateY(-4px); }
  .tool-card:hover, .process-step:hover { transform: perspective(700px) rotateX(2deg) translateY(-5px); box-shadow: 0 1px 0 rgba(243,237,225,0.06) inset, 0 4px 8px rgba(0,0,0,0.4), 0 26px 40px -18px rgba(0,0,0,0.85); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
  .workbench { transform: perspective(1200px) rotateY(-6deg) rotateX(2deg); }
  @supports (animation-timeline: scroll()) {
    .workbench { animation: hero-drift linear both; animation-timeline: scroll(root block); animation-range: 0 500px; }
    @keyframes hero-drift { to { transform: perspective(1200px) rotateY(-6deg) rotateX(2deg) translateY(34px); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Inner pages: breadcrumbs, long-form reading layout, guides */
.crumbs { font-size: 13.5px; color: var(--cream-faint); margin: 0 0 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.crumbs a { color: var(--cream-dim); border-bottom: 1px solid var(--border-strong); transition: color 0.15s ease; }
.crumbs a:hover { color: var(--amber); }
.crumbs span[aria-hidden] { margin: 0 10px; color: var(--cream-faint); }
.page-body { padding: 48px 0 96px; }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; }
@media (max-width: 960px) { .article-grid { grid-template-columns: 1fr; gap: 48px; } }
.prose { max-width: 720px; }
.prose h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.8vw, 30px); line-height: 1.2; letter-spacing: -0.01em; margin: 56px 0 16px; }
.prose > h2:first-child, .prose > .short-answer + h2 { margin-top: 44px; }
.prose > h2:first-child { margin-top: 0; }
.prose p { color: var(--cream-dim); font-size: 17px; line-height: 1.7; margin: 0 0 18px; }
.prose ul, .prose ol { color: var(--cream-dim); font-size: 16.5px; line-height: 1.65; margin: 0 0 20px; padding-left: 20px; }
.prose li { margin-bottom: 10px; }
.prose strong { color: var(--cream); font-weight: 600; }
.prose a { color: var(--amber); border-bottom: 1px solid var(--amber-deep); transition: color 0.15s ease; }
.prose a:hover { color: #ee8a4d; }
.prose .short-answer { font-size: 18px; color: var(--cream); background: var(--ink-raised); border: 1px solid var(--border-strong); border-left: 3px solid var(--amber); border-radius: 6px; padding: 20px 24px; margin: 0 0 8px; }
.prose .short-answer strong { color: var(--amber); }
.prose .steps { list-style: none; padding: 0; counter-reset: step; }
.prose .steps li { counter-increment: step; position: relative; padding-left: 54px; margin-bottom: 22px; }
.prose .steps li::before { content: counter(step); position: absolute; left: 0; top: -6px; font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--amber-deep); }
.prose .steps li strong { display: block; margin-bottom: 4px; font-size: 17px; }
.prose .faq { margin-top: 8px; }
.side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 960px) { .side { position: static; } }
.side-card { background: var(--ink-raised); border: 1px solid var(--border-strong); border-radius: 8px; padding: 24px; box-shadow: 0 1px 0 rgba(243,237,225,0.04) inset, 0 14px 28px -18px rgba(0,0,0,0.7); }
.side-card p:not(.side-title) { color: var(--cream-dim); font-size: 15px; margin: 0 0 18px; }
.side-title { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--cream); margin: 0 0 12px; }
.side-links { display: flex; flex-direction: column; }
.side-links a { color: var(--cream-dim); font-size: 15px; padding: 11px 0; border-top: 1px solid var(--border); transition: color 0.15s ease; }
.side-links a:hover { color: var(--amber); }
.side-links .side-title { margin-bottom: 6px; }
.service-detail p.more { margin: 18px 0 0; font-size: 15px; }
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 760px) { .card-grid { grid-template-columns: 1fr; } }
.guide-card { display: block; background: var(--ink-raised); border: 1px solid var(--border); border-top: 2px solid var(--amber-deep); border-radius: 6px; padding: 28px 26px; box-shadow: 0 1px 0 rgba(243,237,225,0.04) inset, 0 2px 4px rgba(0,0,0,0.35), 0 14px 28px -16px rgba(0,0,0,0.7); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.guide-card:nth-child(even) { border-top-color: var(--teal); }
.guides-note { margin-top: 64px; }
.about-prose { margin-top: 64px; }
.guide-card h2, .guide-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.25; margin: 0 0 12px; color: var(--cream); }
.guide-card p { color: var(--cream-dim); font-size: 15px; margin: 0 0 16px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .guide-card:hover { transform: perspective(700px) rotateX(2deg) translateY(-5px); box-shadow: 0 1px 0 rgba(243,237,225,0.06) inset, 0 4px 8px rgba(0,0,0,0.4), 0 26px 40px -18px rgba(0,0,0,0.85); }
}

/* Keyboard users: jump past the navigation */
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; background: var(--amber); color: #1a0f07; padding: 10px 18px; border-radius: 3px; font-size: 14.5px; font-weight: 600; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* Home page: hero backdrop, workbench samples and the services bento. Everything is HTML, CSS and inline SVG. */
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(243,237,225,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(243,237,225,0.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 75% at 72% 45%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 70% 75% at 72% 45%, #000 15%, transparent 72%); }
.hero::after { content: ""; position: absolute; width: 760px; height: 760px; right: -220px; top: -260px; pointer-events: none; background: radial-gradient(circle, rgba(226,121,61,0.15), rgba(107,151,142,0.05) 45%, transparent 68%); }
.hl { background: linear-gradient(100deg, var(--amber) 0%, #efa06c 55%, var(--cream) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.workbench { position: relative; padding: 74px 0 92px; }
.wb-card { background: var(--ink-raised); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 1px 0 rgba(243,237,225,0.06) inset, 0 4px 10px rgba(0,0,0,0.4), 0 30px 60px -24px rgba(0,0,0,0.9); }
.wb-bar, .wb-head { display: flex; align-items: center; gap: 10px; font: 500 11.5px/1.2 var(--mono); color: var(--cream-dim); }
.wb-bar { padding: 11px 14px; border-bottom: 1px solid var(--border); }
.wb-dots { display: flex; gap: 5px; }
.wb-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(243,237,225,0.16); }
.wb-ok { margin-left: auto; color: var(--teal); }
.wb-ok::before { content: "● "; font-size: 8px; vertical-align: 1px; }
.wb-float { position: absolute; z-index: 2; padding: 13px 15px 14px; }
.wb-head { margin-bottom: 10px; }
.wave { display: flex; align-items: center; gap: 3px; height: 30px; margin-bottom: 10px; }
.wave i { flex: 1; height: 100%; border-radius: 2px; background: linear-gradient(var(--amber), var(--amber-deep)); transform: scaleY(var(--h)); }
.wave.sm { height: 24px; gap: 2px; }
.wave.sm i { background: var(--teal); }
.wb-script { margin: 0 0 2px; font-size: 16px; color: var(--cream); }
.wb-gloss { margin: 0; font-size: 12.5px; color: var(--cream-dim); }
.wb-ner { margin: 0; font-size: 14.5px; line-height: 2.1; color: var(--cream-dim); }
.wb-ner mark, .v-sent mark { color: var(--cream); background: rgba(107,151,142,0.16); border-radius: 4px; padding: 2px 5px; box-shadow: inset 0 -2px 0 var(--teal); }
.wb-ner mark.e-date, .v-sent mark.neg { background: rgba(226,121,61,0.14); box-shadow: inset 0 -2px 0 var(--amber); }
.wb-ner mark b { font: 600 9px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--teal); margin-left: 5px; }
.wb-ner mark.e-date b { color: var(--amber); }
@media (max-width: 900px) {
  .workbench { padding: 0; max-width: 540px; margin-top: 8px; }
  .wb-float { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 88%; margin-top: -20px; }
}

.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1024px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } }
.bento-card { position: relative; display: flex; flex-direction: column; background: var(--ink-raised); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 0 rgba(243,237,225,0.04) inset, 0 2px 4px rgba(0,0,0,0.35), 0 14px 28px -16px rgba(0,0,0,0.7); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.bento-card.wide { grid-column: span 2; }
@media (max-width: 640px) { .bento-card.wide { grid-column: auto; } }
.bento-card:hover { border-color: var(--border-strong); }
.bento-card:focus-within { outline: 2px solid var(--amber); outline-offset: 3px; }
.bento-card h3 { font-family: var(--serif); font-size: 20px; font-weight: 500; margin: 0 0 8px; }
.bento-card h3 a { transition: color 0.15s ease; }
.bento-card h3 a::after { content: ""; position: absolute; inset: 0; }
.bento-card h3 a:focus-visible { outline: none; }
.bento-card:hover h3 a { color: var(--amber); }
.bento-body { padding: 20px 22px 24px; }
.bento-body p { font-size: 14.5px; color: var(--cream-dim); margin: 0; }
.bento-note { margin: 22px 0 0; font-size: 13.5px; color: var(--cream-faint); }

.viz { position: relative; height: 172px; overflow: hidden; padding: 14px 16px; border-bottom: 1px solid var(--border); background: radial-gradient(120% 100% at 0% 0%, rgba(226,121,61,0.07), transparent 60%), #120f0c; font: 12px/1.5 var(--mono); color: var(--cream-dim); }
.viz.v-svg { padding: 0; }
.viz.v-svg svg { width: 100%; height: 100%; }
.viz p { margin: 0; }
.v-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--cream-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.v-live { color: var(--amber); }
.v-live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-right: 6px; vertical-align: 1px; }
.v-rows { list-style: none; margin: 0; padding: 0; }
.v-rows li { display: flex; align-items: center; gap: 10px; height: 30px; border-top: 1px solid var(--border); }
.v-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cream); font-family: var(--sans); font-size: 13px; }
.v-type { flex: none; width: 50px; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 0; border-radius: 4px; }
.t-audio { color: var(--amber); background: var(--amber-soft); }
.t-image { color: var(--teal); background: var(--teal-soft); }
.t-text { color: var(--cream); background: rgba(243,237,225,0.07); }
.t-video { color: #d9a441; background: rgba(217,164,65,0.10); }
.v-st { flex: none; font-size: 11px; color: var(--cream-faint); }
.v-st.ok { color: var(--teal); }
.v-st.ok::before { content: "✓ "; }
.v-sent { font-family: var(--sans); font-size: 14px; line-height: 2; color: var(--cream-dim); margin-bottom: 10px !important; }
.v-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v-chips span { font-size: 10.5px; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 20px; color: var(--cream-dim); }
.v-trans .wave { margin-bottom: 12px; }
.v-line { display: grid; grid-template-columns: 54px 1fr; gap: 4px; margin-bottom: 8px; }
.v-line > span:last-child { font-family: var(--sans); font-size: 13px; color: var(--cream); line-height: 1.4; }
.v-ts { color: var(--cream-faint); font-size: 11px; padding-top: 1px; }
.v-line b { font: 600 10px var(--mono); color: var(--amber); margin-right: 4px; }
.v-line b.s2 { color: var(--teal); }
.v-bub { font-family: var(--sans); font-size: 13px; line-height: 1.4; color: var(--cream); background: rgba(243,237,225,0.07); border-radius: 12px 12px 12px 3px; padding: 7px 10px; width: fit-content; max-width: 88%; margin-bottom: 8px !important; }
.v-bub.bot { margin-left: auto; background: var(--amber-soft); border: 1px solid rgba(226,121,61,0.25); border-radius: 12px 12px 3px 12px; }
.v-metric { margin-bottom: 12px; font-size: 11px; }
.v-metric > span:first-child { display: block; margin-bottom: 5px; }
.v-bar { position: relative; display: block; height: 6px; border-radius: 3px; background: rgba(243,237,225,0.08); }
.v-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 3px; background: var(--amber); transform-origin: left; }
.v-bar i.teal { background: var(--teal); }
.v-bar b { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--cream); }
.v-spark { display: block; width: 100%; height: 22px; }
.v-src { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-family: var(--sans); font-size: 14px; color: var(--cream); }
.v-lang { flex: none; width: 30px; text-align: center; font: 600 10px/1.8 var(--mono); color: var(--amber); background: var(--amber-soft); border-radius: 4px; }
.v-tr .v-rows .v-lang { color: var(--teal); background: var(--teal-soft); }
.v-legend { position: absolute; left: 14px; top: 12px; z-index: 1; display: flex; gap: 14px; font-size: 10.5px; color: var(--cream-dim); }
.v-legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.v-legend .r::before { background: var(--teal); }
.v-legend .g::before { background: var(--amber); }
.tool-type { display: inline-block; margin-bottom: 12px; font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream-faint); padding: 4px 7px; border: 1px solid var(--border); border-radius: 4px; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bento-card:hover { transform: perspective(900px) rotateX(1.5deg) translateY(-4px); box-shadow: 0 1px 0 rgba(243,237,225,0.06) inset, 0 4px 8px rgba(0,0,0,0.4), 0 28px 44px -20px rgba(0,0,0,0.9); }
}
@media (prefers-reduced-motion: no-preference) {
  .wb-float { animation: wb-bob 7s ease-in-out infinite; }
  @keyframes wb-bob { 50% { translate: 0 -8px; } }
  .wb-box, .v-box { transform-box: fill-box; transform-origin: center; animation: wb-box 6s ease-out infinite both; }
  .wb-box.b2, .v-box.d2 { animation-delay: 0.5s; }
  .wb-box.b3, .v-box.d3 { animation-delay: 1s; }
  .v-box.d4 { animation-delay: 1.5s; }
  @keyframes wb-box { 0% { opacity: 0; transform: scale(1.12); } 8%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
  .wave i { animation: wave 1.3s ease-in-out infinite; animation-delay: calc(var(--i) * -85ms); }
  @keyframes wave { 50% { transform: scaleY(calc(var(--h) * 0.35)); } }
  .v-live::before { animation: live 1.6s ease-in-out infinite; }
  @keyframes live { 50% { opacity: 0.25; } }
  .v-bar i { animation: grow 5s ease-out infinite both; }
  @keyframes grow { 0% { transform: scaleX(0); } 25%, 100% { transform: scaleX(1); } }
  .v-syn circle { animation: syn 6s ease-out infinite both; animation-delay: var(--d); }
  @keyframes syn { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
}

/* Home page: interactive pass. CSS does the work; the small script on the home page only feeds pointer positions. */
a.cap-chip { transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
a.cap-chip:hover { border-color: var(--amber); color: var(--cream); background: var(--amber-soft); }
a.cap-chip:focus-visible, .stat:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.stat { position: relative; display: block; padding: 18px 20px; margin: -18px -20px; border-radius: 10px; transition: background 0.2s ease; }
.stat .stat-value { transition: color 0.2s ease; }
.stat::after { content: "→"; position: absolute; right: 20px; top: 22px; color: var(--amber); opacity: 0; transform: translateX(-6px); transition: opacity 0.2s ease, transform 0.2s ease; font-size: 18px; }
.stat:hover { background: rgba(243,237,225,0.035); }
.stat:hover::after, .stat:focus-visible::after { opacity: 1; transform: none; }
.stat:hover .stat-value { color: #f09a62; }

.glow { position: relative; isolation: isolate; }
.glow::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 0.3s ease; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(226,121,61,0.13), transparent 65%); }
.glow:hover::before { opacity: 1; }
.cta-band.glow { overflow: hidden; }
.cta-band.glow::before { background: radial-gradient(520px circle at var(--mx, 80%) var(--my, 50%), rgba(226,121,61,0.14), transparent 65%); }

.wb-tilt { transform: perspective(1200px) rotateY(calc(var(--tx, 0) * 7deg)) rotateX(calc(var(--ty, 0) * -6deg)); transition: transform 0.4s ease-out; transform-style: preserve-3d; }
.wb-tilt .wb-float { transition: transform 0.4s ease-out; transform: translate3d(calc(var(--tx, 0) * 10px), calc(var(--ty, 0) * 8px), 0); }

.tool-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: -24px 0 28px; padding: 0; border: 0; min-width: 0; }
.tool-filter input, .ld-tabs input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tool-filter label, .ld-tabs label { cursor: pointer; font-size: 13.5px; color: var(--cream-dim); padding: 7px 15px; border: 1px solid var(--border-strong); border-radius: 20px; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; user-select: none; }
.tool-filter label:hover, .ld-tabs label:hover { color: var(--cream); border-color: rgba(243,237,225,0.3); }
.tool-filter input:checked + label, .ld-tabs input:checked + label { color: var(--ink); background: var(--amber); border-color: var(--amber); font-weight: 600; }
.tool-filter input:focus-visible + label, .ld-tabs input:focus-visible + label { outline: 2px solid var(--amber); outline-offset: 3px; }
.tool-card { position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease, filter 0.3s ease, border-color 0.3s ease; }
#tools:has(#tf-audio:checked) .tool-card:not([data-type~="audio"]),
#tools:has(#tf-text:checked) .tool-card:not([data-type~="text"]),
#tools:has(#tf-image:checked) .tool-card:not([data-type~="image"]),
#tools:has(#tf-video:checked) .tool-card:not([data-type~="video"]) { opacity: 0.28; filter: saturate(0); }
#tools:has(#tf-audio:checked) .tool-card[data-type~="audio"],
#tools:has(#tf-text:checked) .tool-card[data-type~="text"],
#tools:has(#tf-image:checked) .tool-card[data-type~="image"],
#tools:has(#tf-video:checked) .tool-card[data-type~="video"] { border-color: rgba(226,121,61,0.45); }

.lang-demo { margin-top: 48px; background: var(--ink-raised); border: 1px solid var(--border); border-radius: 12px; padding: 24px 26px 28px; box-shadow: 0 1px 0 rgba(243,237,225,0.04) inset, 0 14px 28px -16px rgba(0,0,0,0.7); }
.ld-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.ld-title { margin: 0; font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream-faint); }
.ld-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ld-tabs input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ld-source, .ld-panel { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ld-source { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed var(--border-strong); }
.ld-name { font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal); }
.ld-source .ld-name { color: var(--amber); }
.ld-source .ld-text { font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); line-height: 1.25; color: var(--cream); }
.ld-panel .ld-text { font-size: clamp(20px, 2.4vw, 27px); line-height: 1.45; color: var(--cream-dim); }
.ld-panel .ld-text[dir="rtl"] { text-align: right; }
.ld-panels { min-height: 84px; margin-bottom: 22px; }
.lang-demo .ld-tabs { border-top: 1px solid var(--border); padding-top: 20px; }
@supports selector(:has(a)) {
  .ld-panel, .sx-panels .sx-panel { display: none; }
  .lang-demo:has(#ld-hi:checked) .ld-panel[data-l="hi"],
  .lang-demo:has(#ld-ta:checked) .ld-panel[data-l="ta"],
  .lang-demo:has(#ld-es:checked) .ld-panel[data-l="es"],
  .lang-demo:has(#ld-fr:checked) .ld-panel[data-l="fr"],
  .lang-demo:has(#ld-de:checked) .ld-panel[data-l="de"],
  .lang-demo:has(#ld-pt:checked) .ld-panel[data-l="pt"],
  .lang-demo:has(#ld-ar:checked) .ld-panel[data-l="ar"],
  .lang-demo:has(#ld-ja:checked) .ld-panel[data-l="ja"],
  .lang-demo:has(#ld-zh:checked) .ld-panel[data-l="zh"],
  .lang-demo:has(#ld-id:checked) .ld-panel[data-l="id"] { display: flex; animation: ld-in 0.35s ease-out; }
  .sx:has(#sx-collection:checked) .sx-panel[data-s="collection"],
  .sx:has(#sx-annotation:checked) .sx-panel[data-s="annotation"],
  .sx:has(#sx-transcription:checked) .sx-panel[data-s="transcription"],
  .sx:has(#sx-conversational:checked) .sx-panel[data-s="conversational"],
  .sx:has(#sx-evaluation:checked) .sx-panel[data-s="evaluation"],
  .sx:has(#sx-vision:checked) .sx-panel[data-s="vision"],
  .sx:has(#sx-translation:checked) .sx-panel[data-s="translation"],
  .sx:has(#sx-synthetic:checked) .sx-panel[data-s="synthetic"] { display: grid; animation: ld-in 0.35s ease-out; }
  @keyframes ld-in { from { opacity: 0; translate: 0 6px; } }
}

.industry-tile { position: relative; }
.ind-icon { width: 26px; height: 26px; color: var(--cream-dim); margin-bottom: 18px; transition: color 0.25s ease, transform 0.25s ease; }
.industry-tile:hover .ind-icon { color: var(--amber); transform: translateY(-2px); }
.pulse-line { stroke-dasharray: 40; stroke-dashoffset: 0; }

.home .enterprise-item .dot { transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; }
.home .enterprise-item:hover .dot { transform: scale(1.35); background: var(--amber); box-shadow: 0 0 0 5px var(--amber-soft); }
.home .enterprise-item h3 { transition: color 0.2s ease; }
.home .enterprise-item:hover h3 { color: #f09a62; }

.glance dt, .glance dd { transition: background 0.2s ease; }
.glance dd:hover, .glance dt:has(+ dd:hover) { background: rgba(243,237,225,0.03); }

.home .guide-card .text-link { display: inline-block; transition: transform 0.2s ease, color 0.2s ease; }
.home .guide-card:hover .text-link { transform: translateX(4px); }

.faq-anim summary::after { transition: transform 0.25s ease; }
.faq-anim details[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq-anim summary:hover { color: #f09a62; }
@supports (interpolate-size: allow-keywords) {
  .faq-anim { interpolate-size: allow-keywords; }
  .faq-anim details::details-content { block-size: 0; overflow: clip; transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete; }
  .faq-anim details[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .industry-tile:hover .pulse-line { animation: pulse-draw 1.2s ease-out; }
  @keyframes pulse-draw { from { stroke-dashoffset: 40; } }
  @supports (animation-timeline: view()) {
    .home .section-head, .home #synthetic-data .enterprise-wrap > div:first-child, .home #security .enterprise-wrap > div:first-child,
    .home .bento-card, .home .tool-card, .home .industry-row, .home .process-step, .home .guide-card, .home .enterprise-item, .home .lang-demo, .home .faq-anim details, .home .record {
      animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
    @keyframes reveal { from { opacity: 0; translate: 0 26px; } }
    .home #security .enterprise-list { position: relative; }
    .home #security .enterprise-list::before, .home #security .enterprise-list::after { content: ""; position: absolute; left: 3.5px; top: 34px; bottom: 34px; width: 2px; border-radius: 1px; }
    .home #security .enterprise-list::before { background: var(--border-strong); }
    .home #security .enterprise-list::after { background: linear-gradient(var(--teal), var(--amber) 35%); box-shadow: 0 0 8px rgba(226,121,61,0.5); transform-origin: top; animation: fill-y linear both; animation-timeline: view(); animation-range: cover 15% cover 60%; }
    @keyframes fill-y { from { transform: scaleY(0); } }
    .home #security .enterprise-item { position: relative; z-index: 1; }
    .home #security .enterprise-item .dot { animation: dot-on linear both; animation-timeline: view(); animation-range: cover 40% cover 50%; }
    @keyframes dot-on { to { background: var(--amber); box-shadow: 0 0 0 5px var(--amber-soft); } }
    @media (min-width: 781px) {
      .process::before { transform-origin: left; animation: fill-x linear both; animation-timeline: view(); animation-range: entry 40% cover 50%; }
      @keyframes fill-x { from { transform: scaleX(0); } }
    }
  }
}

/* Home page: hero translation line, Why IndecalAI, service explorer, use cases */
.wb-gloss { display: flex; align-items: baseline; gap: 8px; }
.wb-tr { flex: none; font: 600 9.5px/1.7 var(--mono); color: var(--teal); background: var(--teal-soft); border-radius: 3px; padding: 0 5px; }

.why-wrap { border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; background: var(--ink-raised); box-shadow: 0 1px 0 rgba(243,237,225,0.04) inset, 0 20px 40px -24px rgba(0,0,0,0.8); }
.why-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.why-table th, .why-table td { text-align: left; vertical-align: top; padding: 18px 22px; border-top: 1px solid var(--border); }
.why-table thead th { border-top: none; padding-block: 16px; font: 600 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream-faint); }
.why-table thead th:last-child { color: var(--amber); }
.why-table tbody th { width: 17%; font-weight: 600; color: var(--cream); font-size: 14.5px; }
.why-table td { color: var(--cream-faint); width: 38%; }
.why-table td:last-child { width: 45%; color: var(--cream); background: rgba(226,121,61,0.06); border-left: 1px solid rgba(226,121,61,0.22); }
.why-table thead th:last-child { background: rgba(226,121,61,0.06); border-left: 1px solid rgba(226,121,61,0.22); }
.why-table td:last-child::before { content: "✓"; color: var(--amber); font-weight: 700; margin-right: 10px; }
.why-table tbody tr { transition: background 0.2s ease; }
.why-table tbody tr:hover { background: rgba(243,237,225,0.03); }
.why-table tbody tr:hover td:last-child { background: rgba(226,121,61,0.12); }
@media (max-width: 720px) {
  .why-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .why-table, .why-table tbody, .why-table tr, .why-table th, .why-table td { display: block; width: auto; }
  .why-table tbody tr { padding: 18px 18px 20px; border-top: 1px solid var(--border); }
  .why-table tbody tr:first-child { border-top: none; }
  .why-table tbody th, .why-table td { padding: 0; border: none; }
  .why-table tbody th, .why-table td, .why-table td:last-child { width: auto; }
  .why-table tbody th { margin-bottom: 10px; }
  .why-table td { font-size: 14px; }
  .why-table td::before { display: block; font: 600 10.5px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream-faint); content: attr(data-label); }
  .why-table td:first-child { margin-bottom: 10px; }
  .why-table td:last-child { background: rgba(226,121,61,0.08); border: 1px solid rgba(226,121,61,0.22); border-radius: 8px; padding: 10px 12px; }
  .why-table td:last-child::before { content: "✓ " attr(data-label); color: var(--amber); margin: 0 0 2px; font-weight: 600; }
}

.sx-tabs { margin-bottom: 24px; }
.sx-panel { grid-template-columns: 1.25fr 0.75fr; gap: 0; background: var(--ink-raised); border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 0 rgba(243,237,225,0.04) inset, 0 20px 40px -24px rgba(0,0,0,0.8); }
.sx-panel { display: grid; }
.sx-panel + .sx-panel { margin-top: 18px; }
@supports selector(:has(a)) { .sx-panel + .sx-panel { margin-top: 0; } }
.sx-main { padding: 34px 36px 36px; }
.sx-side { padding: 34px 30px 36px; background: #120f0c; border-left: 1px solid var(--border); }
@media (max-width: 860px) { .sx-panel { grid-template-columns: 1fr; } .sx-side { border-left: none; border-top: 1px solid var(--border); } .sx-main, .sx-side { padding: 26px 22px 28px; } }
.sx-main h3, .sx-main h4 { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 30px); font-weight: 500; margin: 0 0 10px; }
.sx-lead { color: var(--cream-dim); font-size: 16px; margin: 0 0 24px; max-width: 34em; }
.sx-label { font: 600 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream-faint); margin: 0 0 10px; }
.sx-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
@media (max-width: 640px) { .sx-list { grid-template-columns: 1fr; } }
.sx-list li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--cream); }
.sx-list li::before { content: "✓"; position: absolute; left: 0; color: var(--amber); font-weight: 700; }
.sx-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.sx-quote { margin: 0 0 24px; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--cream); padding-left: 14px; border-left: 2px solid var(--amber); }
.sx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.sx-chips li { font-size: 12.5px; padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: 20px; color: var(--cream-dim); }

.uc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1024px) { .uc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .uc-grid { grid-template-columns: 1fr; } }
.uc-card { display: flex; flex-direction: column; background: var(--ink-raised); border: 1px solid var(--border); border-radius: 12px; padding: 24px 22px 22px; transition: border-color 0.25s ease, transform 0.25s ease; }
.uc-card:hover { border-color: var(--border-strong); }
.uc-card h3 { font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.3; margin: 0 0 10px; }
.uc-card p { font-size: 14.5px; color: var(--cream-dim); margin: 0 0 16px; }
.uc-card p.uc-links { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13.5px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .uc-card:hover { transform: translateY(-4px); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .home .uc-card, .home .why-wrap, .home .sx-panels { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}

/* Home page spacing: tighter gaps between sections than the inner pages use. The services page (.hub) and the service pages (.svcp) share it. */
:is(.home, .hub, .svcp) > section { padding: 64px 0; }
:is(.home, .hub, .svcp) > section.hero { padding: 88px 0 72px; }
:is(.home, .hub, .svcp) .section-head { margin-bottom: 36px; }
:is(.home, .hub, .svcp) .stats-row { padding-block: 36px; }
.home .lang-demo { margin-top: 32px; }
.home .tools-foot { margin-top: 28px; }
.home .tool-filter { margin-top: -14px; }
@media (max-width: 780px) {
  :is(.home, .hub, .svcp) > section { padding: 44px 0; }
  :is(.home, .hub, .svcp) > section.hero { padding: 48px 0 44px; }
  :is(.home, .hub, .svcp) .section-head { margin-bottom: 28px; }
  :is(.home, .hub, .svcp) .stats-row { padding-block: 28px; gap: 20px; }
}

/* Home page layout pass: fill the width instead of leaving empty columns. */
@media (min-width: 901px) {
  /* Section heads: title on the left, intro on the right */
  :is(.home, .hub, .svcp) .section-head:has(> p) { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: end; }
  :is(.home, .hub, .svcp) .section-head:has(> p) > .kicker, :is(.home, .hub, .svcp) .section-head:has(> p) > h2 { grid-column: 1; }
  :is(.home, .hub, .svcp) .section-head:has(> p) > h2 { margin-bottom: 0; }
  :is(.home, .hub, .svcp) .section-head:has(> p) > p { grid-column: 2; grid-row: 1 / span 2; align-self: end; }

  /* Hero: the chips become one row under both columns */
  :is(.home, .hub, .svcp) .hero-grid { row-gap: 40px; }
  :is(.home, .hub, .svcp) .hero-grid > .workbench { grid-column: 2; grid-row: 1; }
  .home .hero-grid > .capabilities { grid-column: 1 / -1; grid-row: 2; padding-top: 28px; border-top: 1px solid var(--border); }
  :is(.home, .hub, .svcp) .hero-actions { margin-bottom: 0; }

  /* FAQ: heading on the left, questions on the right */
  :is(.home, .hub, .svcp) #faq .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 64px; align-items: start; }
  :is(.home, .hub, .svcp) #faq .section-head { display: block; position: sticky; top: 108px; margin-bottom: 0; }
  :is(.home, .hub, .svcp) #faq .section-head > h2 { margin-bottom: 16px; }
  :is(.home, .hub, .svcp) #faq .faq { max-width: none; }
}
@media (max-width: 900px) {
  .home .hero-grid > .capabilities { margin-top: -12px; }
  :is(.home, .hub, .svcp) .hero-actions { margin-bottom: 0; }
}

/* Languages: the notes sit level with the big sentence */
.home .lang-grid { align-items: end; }
.home .lang-grid .section-head { margin-bottom: 24px; }

/* At a glance: use the full width */
.home .glance { max-width: none; grid-template-columns: 220px 1fr; }
@media (max-width: 780px) { .home .glance { grid-template-columns: 1fr; } }

/* Service cards: extra row height goes into the sample, not under the text */
.home .bento-card .viz { flex: 1 0 auto; height: auto; min-height: 172px; display: flex; flex-direction: column; justify-content: center; }
.home .bento-card .viz.v-svg { justify-content: stretch; }
.home .bento-card .viz.v-svg svg { flex: 1; height: auto; min-height: 172px; }

/* Security: a row of five cards on wide screens, two columns on tablets, the vertical list on phones */
.home #security .enterprise-item { position: relative; z-index: 1; }
@media (min-width: 641px) {
  .home .sec-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; position: relative; }
  .home .sec-steps .enterprise-item, .home .sec-steps .enterprise-item:first-child { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px 24px; border: 1px solid var(--border); border-radius: 10px; background: var(--ink-raised); box-shadow: 0 1px 0 rgba(243,237,225,0.04) inset, 0 14px 28px -18px rgba(0,0,0,0.7); }
  .home .sec-steps .enterprise-item { align-content: start; }
  .home .sec-steps .enterprise-item .dot { margin-top: 0; }
  .home .sec-steps .enterprise-item p { max-width: none; }
  .home .sec-steps .enterprise-item:last-child { grid-column: 1 / -1; }
  .home #security .sec-steps::before, .home #security .sec-steps::after { display: none; }
}
@media (min-width: 1025px) {
  .home .sec-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  .home .sec-steps .enterprise-item:last-child { grid-column: auto; }
  .home #security .sec-steps::before, .home #security .sec-steps::after { display: block; content: ""; position: absolute; left: 0; right: 0; top: 27px; bottom: auto; width: auto; height: 2px; z-index: 0; }
  .home #security .sec-steps::before { background: var(--border-strong); }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .home #security .sec-steps::after { background: linear-gradient(90deg, var(--teal), var(--amber) 35%); transform-origin: left; animation: sec-fill-x linear both; animation-timeline: view(); animation-range: cover 20% cover 50%; }
    @keyframes sec-fill-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .home #security .sec-steps .enterprise-item:nth-child(1) .dot { animation-range: cover 22% cover 26%; }
    .home #security .sec-steps .enterprise-item:nth-child(2) .dot { animation-range: cover 28% cover 32%; }
    .home #security .sec-steps .enterprise-item:nth-child(3) .dot { animation-range: cover 34% cover 38%; }
    .home #security .sec-steps .enterprise-item:nth-child(4) .dot { animation-range: cover 40% cover 44%; }
    .home #security .sec-steps .enterprise-item:nth-child(5) .dot { animation-range: cover 46% cover 50%; }
  }
}
@media (min-width: 901px) {
  :is(.home, .hub, .svcp) > section.hero { padding: 56px 0 56px; }
}
/* The floating cards position against .wb-tilt, so the room they hang into belongs on it, not on .workbench */
@media (min-width: 901px) {
  .home .workbench { padding: 0; }
  .home .wb-tilt { padding: 56px 0 64px; }
}
@media (max-width: 900px) { :is(.home, .hub, .svcp) .hero-grid { row-gap: 36px; } }

/* Home page: 8+ pass. Proof stats, brief builder, merged sections, phone swipe rows. */
:is(.home, .hub, .svcp) .stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 900px) { :is(.home, .hub, .svcp) .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; } }
:is(.home, .hub, .svcp) .stat-label { max-width: 16.5em; }

.sx-intro { margin: 56px 0 22px; }
.sx-intro h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; margin: 0 0 8px; letter-spacing: -0.01em; }
.sx-intro p { margin: 0; color: var(--cream-dim); font-size: 15.5px; max-width: 36em; }
@media (min-width: 901px) {
  .sx-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: end; }
  .sx-intro h3 { margin: 0; }
}

.ind-filter { margin: -14px 0 26px; }
.ind-filter label { display: inline-flex; align-items: center; gap: 8px; }
.ind-filter .ind-icon { width: 16px; height: 16px; margin: 0; color: inherit; }
.uc-card { transition: border-color 0.25s ease, transform 0.25s ease, opacity 0.3s ease, filter 0.3s ease; }
#industries:has(#if-automotive:checked) .uc-card:not([data-ind~="automotive"]),
#industries:has(#if-retail:checked) .uc-card:not([data-ind~="retail"]),
#industries:has(#if-healthcare:checked) .uc-card:not([data-ind~="healthcare"]),
#industries:has(#if-banking:checked) .uc-card:not([data-ind~="banking"]) { opacity: 0.28; filter: saturate(0); }
#industries:has(#if-automotive:checked) .uc-card[data-ind~="automotive"],
#industries:has(#if-retail:checked) .uc-card[data-ind~="retail"],
#industries:has(#if-healthcare:checked) .uc-card[data-ind~="healthcare"],
#industries:has(#if-banking:checked) .uc-card[data-ind~="banking"] { border-color: rgba(226,121,61,0.45); }

.swipe-hint { display: none; }
@media (max-width: 640px) {
  .home .bento, .home .uc-grid, .hub .svc-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 4px 20px 14px; scroll-padding: 0 20px; -webkit-overflow-scrolling: touch; }
  .home .bento > .bento-card, .home .uc-grid > .uc-card, .hub .svc-grid > .svc-card { flex: 0 0 86%; scroll-snap-align: start; }
  :is(.home, .hub, .svcp) .swipe-hint { display: block; margin: 6px 0 0; font: 500 11.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream-faint); }
  :is(.home, .hub, .svcp) .swipe-hint::before { content: attr(data-hint); }
  :is(.home, .hub, .svcp) .swipe-hint::after { content: " →"; color: var(--amber); }
  .home .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .home .tool-card { padding: 18px 14px 16px; }
  .home .tool-card h3 { font-size: 16.5px; }
  .home .tool-card p { font-size: 13.5px; }
  .home .tool-type { margin-bottom: 10px; font-size: 9.5px; }
}

@media (min-width: 1025px) {
  .home .glance { grid-template-columns: 150px minmax(0, 1fr) 150px minmax(0, 1fr); }
  .home .glance dd { padding-right: 28px; }
}

@media (max-width: 900px) {
  .home .hero-grid > .workbench { order: 2; }
  .home .hero-grid > .capabilities { order: 3; margin-top: 4px; }
}

:is(.home, .hub, .svcp) .cta-band { padding: 0; }
.brief { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; padding-block: 64px; }
@media (max-width: 900px) { .brief { grid-template-columns: 1fr; gap: 28px; padding-block: 44px; } }
.brief-copy h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.2vw, 34px); margin: 0 0 12px; }
.brief-copy > p { color: var(--cream-dim); margin: 0 0 22px; font-size: 16px; }
.brief-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 12px; }
.brief-steps li { counter-increment: step; position: relative; padding-left: 38px; color: var(--cream); font-size: 15px; line-height: 1.5; }
.brief-steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--mono); color: var(--amber); border: 1px solid rgba(226,121,61,0.45); background: var(--amber-soft); }
.brief-form { background: var(--ink); border: 1px solid var(--border-strong); border-radius: 14px; padding: 24px 24px 22px; box-shadow: 0 1px 0 rgba(243,237,225,0.04) inset, 0 20px 40px -24px rgba(0,0,0,0.8); }
.brief-types { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.brief-types legend { font: 600 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream-faint); margin-bottom: 10px; padding: 0; }
.brief-types label { position: relative; cursor: pointer; font-size: 13.5px; color: var(--cream-dim); padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: 20px; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; user-select: none; }
.brief-types input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.brief-types label:hover { color: var(--cream); border-color: rgba(243,237,225,0.3); }
.brief-types label:has(input:checked) { color: var(--ink); background: var(--amber); border-color: var(--amber); font-weight: 600; }
.brief-types label:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 3px; }
.brief-fields { display: grid; gap: 6px; margin-bottom: 18px; }
.brief-fields label { font: 600 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream-faint); margin-top: 8px; }
.brief-fields label span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.brief-fields input { width: 100%; font: 15px/1.4 var(--sans); color: var(--cream); background: var(--ink-raised); border: 1px solid var(--border-strong); border-radius: 8px; padding: 11px 13px; }
.brief-fields input::placeholder { color: var(--cream-faint); opacity: 1; }
.brief-fields input:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent; }
.brief-send { width: 100%; justify-content: center; }
.brief-note { margin: 12px 0 0; font-size: 13px; color: var(--cream-faint); }
.brief-copy h2 { line-height: 1.2; }
.glance-more { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.glance-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font: 600 14px/1.4 var(--sans); color: var(--amber); }
.glance-more > summary::-webkit-details-marker { display: none; }
.glance-more > summary::after { content: "+"; font-size: 22px; line-height: 1; transition: transform 0.25s ease; }
.glance-more[open] > summary::after { transform: rotate(45deg); }
.glance-more > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.glance-more .glance { border-bottom: none; margin-bottom: 8px; }
.home .glance-lead { margin-bottom: 28px; }
@media (max-width: 640px) {
  .home .sx-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 20px; padding: 2px 20px 8px; scroll-padding: 0 20px; }
  .home .sx-tabs label { flex: none; white-space: nowrap; }
}

/* Services page (.hub): a pipeline sample in the hero, the service finder and cards, the comparison table.
   Layout rules it shares with the home page are written as :is(.home, .hub, .svcp) above. */
@media (min-width: 901px) { :is(.hub, .svcp) .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
:is(.hub-hero, .svcp-hero) .crumbs { margin-bottom: 18px; }
:is(.hub-hero, .svcp-hero) .eyebrow { margin-bottom: 16px; }
:is(.hub-hero, .svcp-hero) h1.hero-head { font-size: clamp(32px, 4.2vw, 52px); margin-bottom: 22px; }
/* "one team" always starts its own line, so the fallback font and the real one break the title in the same place */
:is(.hub-hero, .svcp-hero) .hl { display: block; width: fit-content; }
:is(.hub-hero, .svcp-hero) p.lead { font-size: 17.5px; margin-bottom: 30px; }
:is(.hub, .svcp) .workbench { padding: 0; }
:is(.hub, .svcp) .wb-tilt { padding: 8px 0 34px; }

.trace { position: relative; z-index: 1; overflow: hidden; }
.tr-steps { position: relative; list-style: none; margin: 0; padding: 8px 16px 12px; }
.tr-steps > li { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 56px; padding: 9px 10px 9px 28px; border-radius: 8px; }
.tr-steps > li::before { content: ""; position: absolute; z-index: 1; left: 6px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }
.tr-steps::before, .tr-steps::after { content: ""; position: absolute; left: 26px; top: 40px; bottom: 40px; width: 1px; }
.tr-steps::before { background: var(--border-strong); }
.tr-steps::after { background: linear-gradient(var(--teal), var(--amber)); transform-origin: top; }
.tr-svc { font: 600 10.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream-dim); }
.tr-out { margin: 0; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--cream); }
.tr-out .wave { height: 22px; margin: 0 0 5px; }
.tr-meta { display: block; font: 11px/1.4 var(--mono); color: var(--cream-faint); }
.tr-ts { margin-right: 4px; font: 11px var(--mono); color: var(--cream-faint); }
.tr-out b { margin-right: 5px; font: 600 10px var(--mono); color: var(--amber); }
.tr-out .wb-tr { margin-right: 6px; vertical-align: 1px; }
.tr-chip { display: inline-block; margin: 2px 2px 2px 0; padding: 1px 8px; border-radius: 4px; font: 500 11px/1.6 var(--mono); color: var(--cream); background: rgba(107,151,142,0.16); box-shadow: inset 0 -2px 0 var(--teal); }
.tr-pass { display: inline-block; margin-left: 6px; padding: 0 7px; border: 1px solid rgba(107,151,142,0.45); border-radius: 4px; font: 600 10.5px/1.7 var(--mono); color: var(--teal); }
.tr-pass::before { content: "✓ "; }
.tr-contact { bottom: 0; right: -22px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; }
.tr-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 600 14px/1 var(--serif); color: #1a0f07; background: linear-gradient(135deg, var(--amber), #efa06c); }
.tr-who { font-size: 13px; line-height: 1.3; }
.tr-who b { display: block; font-weight: 600; color: var(--cream); }
.tr-who small { display: block; font: 10.5px/1.4 var(--mono); color: var(--cream-faint); }
@media (max-width: 900px) {
  :is(.hub, .svcp) .workbench { max-width: none; }
  :is(.hub, .svcp) .wb-tilt { padding: 0; }
  .tr-contact { width: fit-content; margin: -16px 16px 0 auto; }
}
@media (max-width: 520px) {
  .tr-steps > li { grid-template-columns: minmax(0, 1fr); row-gap: 3px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tr-steps > li { animation: tr-row 8s ease-in-out infinite both; animation-delay: calc(var(--k) * 0.9s + 0.3s); }
  .tr-steps > li::before { animation: tr-dot 8s ease-in-out infinite both; animation-delay: calc(var(--k) * 0.9s + 0.3s); }
  @keyframes tr-row { 0%, 22%, 100% { background: transparent; } 4%, 14% { background: rgba(226,121,61,0.07); } }
  @keyframes tr-dot { 0%, 22%, 100% { background: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); } 4%, 14% { background: var(--amber); box-shadow: 0 0 0 6px rgba(226,121,61,0.2); } }
  .tr-steps::after { animation: tr-fill 8s linear 0.3s infinite both; }
  @keyframes tr-fill { 0% { transform: scaleY(0); opacity: 1; } 45%, 80% { transform: scaleY(1); opacity: 1; } 92%, 100% { transform: scaleY(1); opacity: 0; } }
}

/* Finder: radio chips light up the cards that fit, and a line under them says why */
.finder-tabs { position: relative; margin: -14px 0 14px; }
.finder-say { min-height: 3.2em; max-width: 54em; margin: 0 0 24px; font-size: 15px; color: var(--cream-dim); }
.finder-say p { margin: 0; }
.finder-say a { color: var(--amber); border-bottom: 1px solid var(--amber-deep); transition: color 0.15s ease; }
.finder-say a:hover { color: #ee8a4d; }
@supports selector(:has(a)) {
  .finder-say p { display: none; }
  #finder:has(#nd-all:checked) .finder-say [data-n="all"],
  #finder:has(#nd-new:checked) .finder-say [data-n="new"],
  #finder:has(#nd-raw:checked) .finder-say [data-n="raw"],
  #finder:has(#nd-lang:checked) .finder-say [data-n="lang"],
  #finder:has(#nd-model:checked) .finder-say [data-n="model"],
  #finder:has(#nd-scarce:checked) .finder-say [data-n="scarce"] { display: block; }
  #finder:has(#nd-new:checked) .svc-card:not([data-need~="new"]),
  #finder:has(#nd-raw:checked) .svc-card:not([data-need~="raw"]),
  #finder:has(#nd-lang:checked) .svc-card:not([data-need~="lang"]),
  #finder:has(#nd-model:checked) .svc-card:not([data-need~="model"]),
  #finder:has(#nd-scarce:checked) .svc-card:not([data-need~="scarce"]) { opacity: 0.3; filter: saturate(0); }
  #finder:has(#nd-new:checked) .svc-card[data-need~="new"],
  #finder:has(#nd-raw:checked) .svc-card[data-need~="raw"],
  #finder:has(#nd-lang:checked) .svc-card[data-need~="lang"],
  #finder:has(#nd-model:checked) .svc-card[data-need~="model"],
  #finder:has(#nd-scarce:checked) .svc-card[data-need~="scarce"] { border-color: rgba(226,121,61,0.55); box-shadow: 0 0 0 1px rgba(226,121,61,0.22), 0 22px 44px -24px rgba(226,121,61,0.4); }
}
@media (prefers-reduced-motion: no-preference) { .finder-say p { animation: say-in 0.6s ease-out; } @keyframes say-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } }
@media (max-width: 640px) {
  .hub .finder-tabs { flex-wrap: nowrap; overflow-x: auto; margin: -10px -20px 12px; padding: 2px 20px 8px; scroll-padding: 0 20px; }
  .hub .finder-tabs label { flex: none; white-space: nowrap; }
}

/* Service cards: a sample of the work, then what the service covers */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .svc-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.svc-card { display: flex; flex-direction: column; background: var(--ink-raised); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 0 rgba(243,237,225,0.04) inset, 0 2px 4px rgba(0,0,0,0.35), 0 14px 28px -16px rgba(0,0,0,0.7); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.3s ease, opacity 0.3s ease, filter 0.3s ease; }
.svc-card:hover { border-color: var(--border-strong); }
.svc-card .viz { flex: 1 0 auto; height: auto; min-height: 136px; display: flex; flex-direction: column; justify-content: center; }
.svc-card .viz.v-svg { justify-content: stretch; }
.svc-card .viz.v-svg svg { flex: 1; height: auto; min-height: 136px; }
.svc-card .viz .v-note { margin: 0 0 10px; padding-left: 10px; border-left: 2px solid var(--amber); font: 13.5px/1.45 var(--sans); color: var(--cream); }
.svc-body { flex: none; display: flex; flex-direction: column; padding: 22px 26px 22px; }
.svc-meta { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font: 600 11px/1.3 var(--mono); letter-spacing: 0.06em; }
.svc-num { color: var(--amber); }
.svc-stage { display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream-faint); }
.svc-stage::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cream-faint); }
.st-get::before { background: var(--amber); }
.st-prep::before { background: var(--teal); }
.st-check::before { background: var(--cream); }
.svc-card h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 25px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.svc-card h3 a { transition: color 0.15s ease; }
.svc-card h3 a:hover { color: var(--amber); }
.svc-body > p:not([class]) { margin: 0 0 16px; font-size: 15px; color: var(--cream-dim); }
.svc-inc { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 0 0 16px; padding: 0; }
.svc-inc li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.4; color: var(--cream); }
.svc-inc li::before { content: "✓"; position: absolute; left: 0; color: var(--amber); font-weight: 700; }
.svc-inc a { border-bottom: 1px solid var(--border-strong); transition: color 0.15s ease; }
.svc-inc a:hover { color: var(--amber); }
.svc-body .tool-note { margin: 0 0 16px; }
.svc-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14.5px; }
.svc-ask { padding: 6px 13px; border: 1px solid rgba(226,121,61,0.45); border-radius: 20px; font-size: 13.5px; font-weight: 600; color: var(--cream); background: var(--amber-soft); white-space: nowrap; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; }
.svc-ask:hover { color: #1a0f07; background: var(--amber); border-color: var(--amber); }
.svc-ask:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.svc-note { margin: 22px 0 0; font-size: 13.5px; color: var(--cream-faint); }
@media (max-width: 640px) {
  .svc-body { padding: 20px 20px 20px; }
  .svc-card h3 { font-size: 23px; }
  .svc-inc { grid-template-columns: minmax(0, 1fr); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .svc-card:hover { transform: perspective(900px) rotateX(1.5deg) translateY(-4px); box-shadow: 0 1px 0 rgba(243,237,225,0.06) inset, 0 4px 8px rgba(0,0,0,0.4), 0 28px 44px -20px rgba(0,0,0,0.9); }
}

/* Comparison table: a real table for crawlers and screen readers, stacked rows on phones */
.cmp-wrap { border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; background: var(--ink-raised); box-shadow: 0 1px 0 rgba(243,237,225,0.04) inset, 0 20px 40px -24px rgba(0,0,0,0.8); }
.cmp { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cmp th, .cmp td { padding: 15px 20px; border-top: 1px solid var(--border); text-align: left; vertical-align: middle; }
.cmp thead th { padding-block: 14px; border-top: none; background: #120f0c; font: 600 11.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream-faint); }
.cmp tbody th { width: 27%; font-weight: 600; }
.cmp tbody th a { color: var(--cream); border-bottom: 1px solid var(--border-strong); transition: color 0.15s ease, border-color 0.15s ease; }
.cmp tbody th a:hover { color: var(--amber); border-color: var(--amber-deep); }
.cmp .cmp-stage { width: 16%; white-space: nowrap; }
.cmp .cmp-types { width: 25%; }
.cmp td:last-child { color: var(--cream-dim); }
.cmp .ty { display: inline-block; margin: 2px 2px 2px 0; padding: 1px 7px; border-radius: 4px; font: 500 10.5px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; }
.cmp-into { font-size: 13.5px; color: var(--cream-dim); }
.cmp tbody tr { transition: background 0.2s ease; }
.cmp tbody tr:hover { background: rgba(243,237,225,0.03); }
@media (max-width: 720px) {
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .cmp, .cmp tbody, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 16px 18px 18px; border-top: 1px solid var(--border); }
  .cmp tbody tr:first-child { border-top: none; }
  .cmp tbody th, .cmp td, .cmp .cmp-stage, .cmp .cmp-types { width: auto; padding: 0; border: none; }
  .cmp tbody th { grid-column: 1; font-size: 15.5px; }
  .cmp .cmp-stage { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
  .cmp .cmp-types, .cmp td:last-child { grid-column: 1 / -1; }
  .cmp td:last-child { font-size: 14px; }
  .cmp td:last-child::before { content: attr(data-label) ": "; font: 600 10.5px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream-faint); }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hub .section-head, .hub .cmp-wrap, .hub .faq-anim details { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    /* The cards are link targets (#annotation and so on), so they fade in without moving: a card that is still
       sliding when the page jumps to it would land 26px off. */
    .hub .svc-card { animation: fade-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes fade-in { from { opacity: 0; } }
  }
}
:is(.hub, .svcp) .brief { align-items: center; }

/* Service samples act out their work: one animation per service, on the home page and the services page.
   Every animation sits inside prefers-reduced-motion: no-preference, and each sample's resting state is the
   finished result, so nothing is missing without motion. Movement is transform, opacity and clip-path, plus a few tiny paints. */
.v-collect .v-rows li { position: relative; overflow: hidden; }
.v-collect .v-rows li::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent 0%, rgba(226,121,61,0.14) 75%, rgba(226,121,61,0.55) 99%, transparent 100%); transform: translateX(-100%); }
.v-annot .v-sent mark { position: relative; box-shadow: none; background: linear-gradient(rgba(107,151,142,0.16), rgba(107,151,142,0.16)) left center / 100% 100% no-repeat; }
.v-annot .v-sent mark.neg { background-image: linear-gradient(rgba(226,121,61,0.14), rgba(226,121,61,0.14)); }
.v-annot .v-sent mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 0 0 4px 4px; background: var(--teal); transform-origin: left; }
.v-annot .v-sent mark.neg::after { background: var(--amber); }
.v-trans .wave { position: relative; overflow: hidden; }
.v-trans .wave::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(226,121,61,0.12), rgba(226,121,61,0.12) calc(100% - 2px), var(--amber) calc(100% - 2px)); transform: translateX(-100%); }
.v-chat .v-bub { transform-origin: 0 100%; }
.v-chat .v-bub.bot { position: relative; transform-origin: 100% 100%; }
.v-chat .v-bub.bot::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background-image: radial-gradient(circle, var(--amber) 0 2.4px, transparent 3px), radial-gradient(circle, var(--amber) 0 2.4px, transparent 3px), radial-gradient(circle, var(--amber) 0 2.4px, transparent 3px); background-repeat: no-repeat; background-size: 8px 8px; background-position: calc(50% - 11px) 50%, 50% 50%, calc(50% + 11px) 50%; }
.v-flag { display: inline-block; margin-left: 8px; padding: 0 5px; border: 1px solid rgba(226,121,61,0.45); border-radius: 3px; font: 600 9px/1.6 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: 0.05em; color: var(--amber); vertical-align: 1px; }
.v-cv .v-scanx { opacity: 0; }
.v-chips .v-ok { color: var(--teal); border-color: rgba(107,151,142,0.55); }
.v-synth .v-chips .v-ok { transform: rotate(-3deg); }

@media (prefers-reduced-motion: no-preference) {
  /* 01 collection: each incoming item gets checked in turn */
  .v-collect .v-rows li::after { animation: vc-scan 4s ease-in-out infinite; }
  .v-collect .v-st { animation: vc-st 4s ease-out infinite; }
  .v-collect .v-rows li:nth-child(2)::after, .v-collect .v-rows li:nth-child(2) .v-st { animation-delay: 1s; }
  .v-collect .v-rows li:nth-child(3)::after, .v-collect .v-rows li:nth-child(3) .v-st { animation-delay: 2s; }
  .v-collect .v-rows li:nth-child(4)::after, .v-collect .v-rows li:nth-child(4) .v-st { animation-delay: 3s; }
  @keyframes vc-scan { 0% { transform: translateX(-100%); opacity: 1; } 22% { transform: translateX(100%); opacity: 1; } 23%, 100% { transform: translateX(100%); opacity: 0; } }
  @keyframes vc-st { 0%, 20% { transform: none; } 25% { transform: scale(1.2); } 32%, 100% { transform: none; } }

  /* 02 annotation: labels get painted onto the sentence, then the tags appear */
  .v-annot .v-sent mark { animation: va-hl 7s ease-in-out infinite both; }
  .v-annot .v-sent mark::after { animation: va-line 7s ease-in-out infinite both; }
  .v-annot .v-sent mark:nth-of-type(2), .v-annot .v-sent mark:nth-of-type(2)::after { animation-delay: 0.9s; }
  .v-annot .v-chips span { animation: va-chip 7s ease-out infinite both; }
  .v-annot .v-chips span + span { animation-name: va-chip2; }
  @keyframes va-hl { 0%, 6% { background-size: 0% 100%; background-position: left center; } 18%, 84% { background-size: 100% 100%; background-position: left center; } 85% { background-size: 100% 100%; background-position: right center; } 94%, 100% { background-size: 0% 100%; background-position: right center; } }
  @keyframes va-line { 0%, 12% { transform: scaleX(0); transform-origin: left; } 24%, 84% { transform: scaleX(1); transform-origin: left; } 85% { transform: scaleX(1); transform-origin: right; } 94%, 100% { transform: scaleX(0); transform-origin: right; } }
  @keyframes va-chip { 0%, 30% { opacity: 0; transform: translateY(5px) scale(0.92); } 36%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
  @keyframes va-chip2 { 0%, 36% { opacity: 0; transform: translateY(5px) scale(0.92); } 42%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }

  /* 03 transcription: a playhead runs over the audio and the transcript writes itself behind it */
  .v-trans .wave::after { animation: vt-play 8s linear infinite both; }
  .v-trans .wave + .v-line > span:last-child { animation: vt-l1 8s steps(26, end) infinite both; }
  .v-trans .v-line + .v-line > span:last-child { animation: vt-l2 8s steps(26, end) infinite both; }
  .v-trans .wave + .v-line:last-child > span:last-child { animation-name: vt-solo; }
  .v-trans .wave + .v-line .v-ts { animation: vt-ts1 8s ease-out infinite both; }
  .v-trans .v-line + .v-line .v-ts { animation: vt-ts2 8s ease-out infinite both; }
  @keyframes vt-play { 0% { transform: translateX(-100%); opacity: 1; } 72%, 86% { transform: translateX(0); opacity: 1; } 94%, 100% { transform: translateX(0); opacity: 0; } }
  @keyframes vt-l1 { 0%, 4% { clip-path: inset(0 100% 0 0); opacity: 1; } 34%, 88% { clip-path: inset(0 0 0 0); opacity: 1; } 96%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
  @keyframes vt-l2 { 0%, 38% { clip-path: inset(0 100% 0 0); opacity: 1; } 68%, 88% { clip-path: inset(0 0 0 0); opacity: 1; } 96%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
  @keyframes vt-solo { 0%, 6% { clip-path: inset(0 100% 0 0); opacity: 1; } 64%, 88% { clip-path: inset(0 0 0 0); opacity: 1; } 96%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
  @keyframes vt-ts1 { 0%, 2% { opacity: 0; } 6%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
  @keyframes vt-ts2 { 0%, 36% { opacity: 0; } 40%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }

  /* 04 conversational: the caller speaks, the bot types, then answers */
  .v-chat .v-bub:not(.bot) { animation: vch-user 9s ease-out infinite both; }
  .v-chat .v-bub.bot { animation: vch-bot 9s ease-out infinite both; }
  .v-chat .v-bub.bot::after { animation: vch-dots 9s linear infinite both; }
  .v-chat .v-chips { animation: vch-chips 9s ease-out infinite both; }
  @keyframes vch-user { 0% { opacity: 0; transform: translateY(6px) scale(0.94); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
  @keyframes vch-bot { 0%, 13% { opacity: 0; transform: translateY(6px) scale(0.94); color: transparent; } 18%, 38% { opacity: 1; transform: none; color: transparent; } 43%, 88% { opacity: 1; transform: none; color: var(--cream); } 96%, 100% { opacity: 0; transform: none; color: var(--cream); } }
  @keyframes vch-dots {
    0%, 16% { opacity: 0; background-position: calc(50% - 11px) 50%, 50% 50%, calc(50% + 11px) 50%; }
    19% { opacity: 1; background-position: calc(50% - 11px) 50%, 50% 50%, calc(50% + 11px) 50%; }
    22% { background-position: calc(50% - 11px) 20%, 50% 50%, calc(50% + 11px) 50%; }
    25% { background-position: calc(50% - 11px) 50%, 50% 20%, calc(50% + 11px) 50%; }
    28% { background-position: calc(50% - 11px) 50%, 50% 50%, calc(50% + 11px) 20%; }
    31% { background-position: calc(50% - 11px) 20%, 50% 50%, calc(50% + 11px) 50%; }
    34% { background-position: calc(50% - 11px) 50%, 50% 20%, calc(50% + 11px) 50%; }
    37% { opacity: 1; background-position: calc(50% - 11px) 50%, 50% 50%, calc(50% + 11px) 20%; }
    40%, 100% { opacity: 0; background-position: calc(50% - 11px) 50%, 50% 50%, calc(50% + 11px) 50%; }
  }
  @keyframes vch-chips { 0%, 46% { opacity: 0; transform: translateY(4px); } 52%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }

  /* 05 evaluation: scores fill toward the target line, and a gap gets flagged */
  .v-eval .v-bar i { animation: ve-grow 7s cubic-bezier(0.2, 0.7, 0.2, 1) infinite both; }
  .v-eval .v-bar b { animation: ve-mark 7s ease-out infinite both; }
  .v-eval .v-flag { animation: ve-flag 7s ease-out infinite both; }
  .v-eval .v-spark path { stroke-dasharray: 100; animation: ve-spark 7s ease-out infinite both; }
  @keyframes ve-grow { 0%, 4% { transform: scaleX(0); opacity: 1; } 32%, 88% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(1); opacity: 0; } }
  @keyframes ve-mark { 0%, 22% { transform: none; } 27% { transform: scaleY(1.6); } 34%, 100% { transform: none; } }
  @keyframes ve-flag { 0%, 34% { opacity: 0; transform: translateX(-4px); } 40%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
  @keyframes ve-spark { 0%, 12% { stroke-dashoffset: 100; opacity: 1; } 60%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }

  /* 06 computer vision: a detection pass sweeps the frame and the labels appear where it has been */
  .v-cv .v-scanx { animation: cv-scan 6s linear infinite both; }
  .v-cv .v-box { animation-delay: 1.1s; }
  .v-cv .v-box.d2 { animation-delay: 1.4s; }
  .v-cv .v-box.d3 { animation-delay: 1.8s; }
  .v-cv .v-box.d4 { animation-delay: 1.2s; }
  .v-cv .v-mask { animation: cv-mask 6s ease-in-out 1.3s infinite both; }
  @keyframes cv-scan { 0% { transform: translateX(0); opacity: 0; } 3% { opacity: 1; } 42% { transform: translateX(1020px); opacity: 1; } 43%, 100% { transform: translateX(1020px); opacity: 0; } }
  @keyframes cv-mask { 0% { fill-opacity: 0; stroke-opacity: 0; } 10%, 84% { fill-opacity: 0.2; stroke-opacity: 0.7; } 100% { fill-opacity: 0; stroke-opacity: 0; } }

  /* 07 translation: the English line arrives, each translation follows and gets verified */
  .v-tr .v-src { animation: vtr-src 8s ease-out infinite both; }
  .v-tr .v-rows li { animation: vtr-r1 8s ease-out infinite both; }
  .v-tr .v-rows li:nth-child(2) { animation-name: vtr-r2; }
  .v-tr .v-rows li:nth-child(3) { animation-name: vtr-r3; }
  .v-tr .v-rows li .v-st { animation: vtr-k1 8s ease-out infinite both; }
  .v-tr .v-rows li:nth-child(2) .v-st { animation-name: vtr-k2; }
  .v-tr .v-rows li:nth-child(3) .v-st { animation-name: vtr-k3; }
  @keyframes vtr-src { 0% { opacity: 0; transform: translateY(4px); } 5%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
  @keyframes vtr-r1 { 0%, 9% { opacity: 0; transform: translateX(-10px); } 15%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
  @keyframes vtr-r2 { 0%, 23% { opacity: 0; transform: translateX(-10px); } 29%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
  @keyframes vtr-r3 { 0%, 37% { opacity: 0; transform: translateX(-10px); } 43%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
  @keyframes vtr-k1 { 0%, 17% { opacity: 0; transform: scale(0.6); } 21% { opacity: 1; transform: scale(1.15); } 25%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
  @keyframes vtr-k2 { 0%, 31% { opacity: 0; transform: scale(0.6); } 35% { opacity: 1; transform: scale(1.15); } 39%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
  @keyframes vtr-k3 { 0%, 45% { opacity: 0; transform: scale(0.6); } 49% { opacity: 1; transform: scale(1.15); } 53%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }

  /* 08 synthetic: a record gets written, marked synthetic, then signed off by a person */
  .v-synth .v-note { animation: vs-type 9s steps(36, end) infinite both; }
  .v-synth .v-chips span { animation: vs-c1 9s ease-out infinite both; }
  .v-synth .v-chips span:nth-child(2) { animation-name: vs-c2; }
  .v-synth .v-chips .v-ok { animation-name: vs-ok; }
  @keyframes vs-type { 0%, 4% { clip-path: inset(0 100% 0 0); opacity: 1; } 40%, 90% { clip-path: inset(0 0 0 0); opacity: 1; } 97%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
  @keyframes vs-c1 { 0%, 42% { opacity: 0; transform: translateY(4px); } 47%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
  @keyframes vs-c2 { 0%, 47% { opacity: 0; transform: translateY(4px); } 52%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
  @keyframes vs-ok { 0%, 58% { opacity: 0; transform: scale(1.35) rotate(-8deg); } 63%, 90% { opacity: 1; transform: rotate(-3deg); } 97%, 100% { opacity: 0; transform: rotate(-3deg); } }
}

/* Stats: a small moving glyph after each number. No text inside, hidden from assistive tech, and the number itself never moves. */
.stat-art { display: inline-block; width: 48px; height: 24px; margin-left: 12px; vertical-align: middle; color: var(--cream-faint); fill: currentColor; overflow: visible; }
.stat-art circle, .stat-art rect { transform-box: fill-box; transform-origin: center; }
.sa-bars rect { transform-origin: 50% 100%; }
.sa-bars rect:last-child, .sa-grid rect:first-child, .sa-tiles rect:first-child { fill: var(--amber); }
.sa-net circle:nth-of-type(4) { fill: var(--amber); }
.sa-one .sa-me, .sa-time .sa-now { fill: var(--amber); }
.sa-one .sa-ring { stroke: var(--amber); }
.sa-one .sa-lines { stroke-width: 1.6; }
@media (max-width: 560px) { .stat-art { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .sa-net circle { animation: sa-ping 2.8s ease-in-out infinite; }
  .sa-net circle:nth-of-type(2), .sa-net circle:nth-of-type(3) { animation-delay: 0.35s; }
  .sa-net circle:nth-of-type(4) { animation-delay: 0.7s; }
  .sa-net circle:nth-of-type(5), .sa-net circle:nth-of-type(6) { animation-delay: 1.05s; }
  .sa-net circle:nth-of-type(7) { animation-delay: 1.4s; }
  @keyframes sa-ping { 0%, 30%, 100% { fill: var(--cream-faint); transform: none; } 10% { fill: var(--amber); transform: scale(1.35); } }
  .sa-bars rect { animation: sa-rise 3.2s ease-in-out infinite; }
  .sa-bars rect:nth-child(2) { animation-delay: 0.12s; }
  .sa-bars rect:nth-child(3) { animation-delay: 0.24s; }
  .sa-bars rect:nth-child(4) { animation-delay: 0.36s; }
  .sa-bars rect:nth-child(5) { animation-delay: 0.48s; }
  .sa-bars rect:nth-child(6) { animation-delay: 0.6s; }
  @keyframes sa-rise { 0%, 100% { transform: scaleY(0.35); } 30%, 70% { transform: scaleY(1); } }
  .sa-grid rect, .sa-tiles rect { animation: sa-light 3.2s ease-in-out infinite; }
  .sa-grid rect:nth-child(2) { animation-delay: 0.2s; } .sa-grid rect:nth-child(3) { animation-delay: 0.4s; } .sa-grid rect:nth-child(4) { animation-delay: 0.6s; }
  .sa-grid rect:nth-child(5) { animation-delay: 0.8s; } .sa-grid rect:nth-child(6) { animation-delay: 1s; } .sa-grid rect:nth-child(7) { animation-delay: 1.2s; } .sa-grid rect:nth-child(8) { animation-delay: 1.4s; }
  .sa-tiles rect:nth-child(2) { animation-delay: 0.14s; } .sa-tiles rect:nth-child(3) { animation-delay: 0.28s; } .sa-tiles rect:nth-child(4) { animation-delay: 0.42s; }
  .sa-tiles rect:nth-child(5) { animation-delay: 0.56s; } .sa-tiles rect:nth-child(6) { animation-delay: 0.7s; } .sa-tiles rect:nth-child(7) { animation-delay: 0.84s; } .sa-tiles rect:nth-child(8) { animation-delay: 0.98s; }
  .sa-tiles rect:nth-child(9) { animation-delay: 1.12s; } .sa-tiles rect:nth-child(10) { animation-delay: 1.26s; } .sa-tiles rect:nth-child(11) { animation-delay: 1.4s; } .sa-tiles rect:nth-child(12) { animation-delay: 1.54s; }
  @keyframes sa-light { 0%, 40%, 100% { fill: var(--cream-faint); } 12%, 24% { fill: var(--amber); } }
  .sa-one .sa-ring { animation: sa-ripple 2.4s ease-out infinite; }
  .sa-one .sa-lines { animation: sa-msg 2.4s ease-in-out infinite; }
  @keyframes sa-ripple { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(1.9); opacity: 0; } }
  @keyframes sa-msg { 0%, 15% { opacity: 0.15; } 40%, 85% { opacity: 1; } 100% { opacity: 0.15; } }
  .sa-time .sa-now { animation: sa-move 4s ease-in-out infinite; }
  @keyframes sa-move { 0%, 8% { transform: translateX(0); opacity: 1; } 78%, 88% { transform: translateX(36px); opacity: 1; } 96%, 100% { transform: translateX(36px); opacity: 0; } }
}

/* Finder: cards that fit get a light pass across them when a starting point is picked */
.svc-card::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 30%, rgba(226,121,61,0.16) 48%, rgba(243,237,225,0.1) 52%, transparent 70%); transform: translateX(-100%); }
@media (prefers-reduced-motion: no-preference) {
  #finder:has(#nd-new:checked) .svc-card[data-need~="new"]::after,
  #finder:has(#nd-raw:checked) .svc-card[data-need~="raw"]::after,
  #finder:has(#nd-lang:checked) .svc-card[data-need~="lang"]::after,
  #finder:has(#nd-model:checked) .svc-card[data-need~="model"]::after,
  #finder:has(#nd-scarce:checked) .svc-card[data-need~="scarce"]::after { animation: card-pass 1.1s ease-out 0.05s both; }
  @keyframes card-pass { 0% { transform: translateX(-100%); opacity: 1; } 100% { transform: translateX(100%); opacity: 1; } }
}

/* Comparison table and the home comparison: rows arrive as they scroll in, and the stage dots pulse in project order */
@media (prefers-reduced-motion: no-preference) {
  .cmp .svc-stage::before { animation: stage-pulse 3.6s ease-in-out infinite; }
  .cmp .st-prep::before { animation-delay: 1.2s; }
  .cmp .st-check::before { animation-delay: 2.4s; }
  @keyframes stage-pulse { 0%, 30%, 100% { transform: none; } 12% { transform: scale(1.8); } }
  @supports (animation-timeline: view()) {
    .hub .cmp tbody tr, .home .why-table tbody tr { animation: row-in linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
    @keyframes row-in { from { opacity: 0; transform: translateY(12px); } }
  }
}

/* FAQ: an accent line grows beside the open answer */
.faq-anim details { position: relative; }
.faq-anim details::before { content: ""; position: absolute; left: -18px; top: 20px; bottom: 20px; width: 2px; border-radius: 1px; background: linear-gradient(var(--amber), var(--teal)); transform: scaleY(0); transform-origin: top; transition: transform 0.35s ease; }
.faq-anim details[open]::before { transform: scaleY(1); }
@media (max-width: 640px) { .faq-anim details::before { left: -11px; } }

/* Brief: the three steps light up in turn as they scroll in, and the send button catches the light now and then */
.brief-steps li::before { z-index: 1; background: linear-gradient(var(--amber-soft), var(--amber-soft)), var(--ink-raised-2); }
.brief-steps li:not(:last-child)::after { content: ""; position: absolute; left: 12.5px; top: 25px; width: 1px; height: calc(100% - 13px); background: linear-gradient(var(--amber), rgba(226,121,61,0.25)); transform-origin: top; }
.brief-send { position: relative; overflow: hidden; }
.brief-send::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.4) 50%, transparent 65%); transform: translateX(-100%); }
@media (prefers-reduced-motion: no-preference) {
  .brief-send::after { animation: send-shine 4.5s ease-in-out 1s infinite; }
  @keyframes send-shine { 0% { transform: translateX(-100%); } 22%, 100% { transform: translateX(100%); } }
  @supports (animation-timeline: view()) {
    .brief-steps li { view-timeline: --step block; }
    .brief-steps li::before { animation: step-lit linear both; animation-timeline: --step; animation-range: cover 30% cover 40%; }
    .brief-steps li::after { animation: step-line linear both; animation-timeline: --step; animation-range: cover 38% cover 58%; }
    @keyframes step-lit { to { color: #1a0f07; border-color: var(--amber); background: var(--amber); } }
    @keyframes step-line { from { transform: scaleY(0); } }
  }
}
/* overflow: clip cuts off like hidden, but doesn't turn the box into a scroll container, so the scroll-driven
   animations inside (table rows, brief steps) follow the page scroll. Browsers without clip keep hidden. */
.cmp-wrap, .why-wrap, .cta-band.glow { overflow: clip; }
/* The pages' small observer marks samples that are off screen, and their animations are switched off there. Switched off,
   not paused: a paused animation still keeps its own compositor layer, and thirty of those made every frame slower.
   Each sample then starts from its first frame when it scrolls into view. */
.anim-off, .anim-off::before, .anim-off::after, .anim-off *, .anim-off *::before, .anim-off *::after { animation: none !important; }

/* Service pages (.svcp): the services page layout, plus color-coded data types, cards with a moving sample,
   decision cards, a process line, a language marquee and next-step cards. Each page keeps the animations of
   its own samples in a <style> block in its head, so this file doesn't grow with every service page. */
.c-audio { --c: #e2793d; --c-soft: rgba(226,121,61,0.14); --c-line: rgba(226,121,61,0.45); }
.c-text { --c: #a48be6; --c-soft: rgba(164,139,230,0.14); --c-line: rgba(164,139,230,0.45); }
.c-image { --c: #5fb3a2; --c-soft: rgba(95,179,162,0.14); --c-line: rgba(95,179,162,0.45); }
.c-video { --c: #e3b341; --c-soft: rgba(227,179,65,0.14); --c-line: rgba(227,179,65,0.45); }
.c-multi { --c: #e27396; --c-soft: rgba(226,115,150,0.14); --c-line: rgba(226,115,150,0.45); }
.c-corp { --c: #6fa6e0; --c-soft: rgba(111,166,224,0.14); --c-line: rgba(111,166,224,0.45); }
.svcp-hero::after { background: radial-gradient(circle, rgba(226,121,61,0.15), rgba(164,139,230,0.07) 45%, transparent 68%); }
.svcp-hero .hero-grid::before { content: ""; position: absolute; left: -260px; bottom: -300px; z-index: -1; width: 620px; height: 620px; pointer-events: none; background: radial-gradient(circle, var(--c-soft, rgba(95,179,162,0.1)), transparent 70%); filter: blur(10px); }
.ds-hero-glow { position: absolute; right: -160px; top: -120px; z-index: -1; width: 480px; height: 480px; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, var(--c-soft, transparent), transparent 70%); }
.svcp .glow:not(.cta-band)::before { background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--c-soft, rgba(226,121,61,0.13)), transparent 65%); }

/* Cards: a sample of the data on top, then what it is and what it's for */
.sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1024px) { .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--ink-raised); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 0 rgba(243,237,225,0.04) inset, 0 2px 4px rgba(0,0,0,0.35), 0 14px 28px -16px rgba(0,0,0,0.7); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.3s ease; }
.sp-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 2px; background: linear-gradient(90deg, var(--c), transparent 85%); }
.sp-card:hover { border-color: var(--c-line); }
.sp-card .viz { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; height: auto; min-height: 184px; background: radial-gradient(120% 100% at 0% 0%, var(--c-soft), transparent 62%), #120f0c; }
.sp-card .viz.v-svg { justify-content: stretch; }
.sp-card .viz.v-svg svg { flex: 1; height: auto; min-height: 184px; }
.sp-body { flex: none; display: flex; flex-direction: column; padding: 20px 22px 18px; }
.sp-card h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.sp-card h3::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--c-soft); vertical-align: 3px; }
.sp-body > p:not([class]) { margin: 0 0 14px; font-size: 14.5px; color: var(--cream-dim); }
.sp-for { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--cream); }
.sp-for span { display: inline-block; margin-right: 8px; padding: 0 7px; border-radius: 4px; font: 600 10px/1.8 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c); background: var(--c-soft); vertical-align: 1px; }
.sp-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.sp-links .tool-note { margin: 0; }
.sp-links .svc-ask { margin-left: auto; border-color: var(--c-line); background: var(--c-soft); }
.sp-links .svc-ask:hover { color: #1a0f07; background: var(--c); border-color: var(--c); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sp-card:hover { transform: perspective(900px) rotateX(1.5deg) translateY(-4px); box-shadow: 0 1px 0 rgba(243,237,225,0.06) inset, 0 4px 8px rgba(0,0,0,0.4), 0 28px 44px -20px rgba(0,0,0,0.9); }
}
@media (max-width: 640px) {
  .svcp :is(.sp-grid, .sp-fit, .sp-next) { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 4px 20px 14px; scroll-padding: 0 20px; -webkit-overflow-scrolling: touch; }
  .svcp .sp-grid > .sp-card, .svcp .sp-fit > .sp-fcard { flex: 0 0 86%; scroll-snap-align: start; }
  .svcp .sp-next > .sp-ncard { flex: 0 0 64%; scroll-snap-align: start; }
  .svcp .sp-fit > .sp-fcard { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; }
  .sp-body { padding: 18px 18px 16px; }
}

/* Decision cards: a small moving picture next to each choice */
.sp-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .sp-fit { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.sp-fcard { position: relative; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px 24px 20px 20px; background: var(--ink-raised); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 0 rgba(243,237,225,0.04) inset, 0 14px 28px -18px rgba(0,0,0,0.7); transition: border-color 0.3s ease; }
.sp-fcard:hover { border-color: var(--c-line); }
.sp-fviz { position: relative; display: flex; flex-direction: column; justify-content: center; height: 140px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: radial-gradient(120% 100% at 0% 0%, var(--c-soft), transparent 65%), #120f0c; }
.sp-ftext h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.25; }
.sp-ftext p { margin: 0; font-size: 14.5px; color: var(--cream-dim); }
@media (min-width: 761px) and (max-width: 1080px), (max-width: 440px) { .sp-fcard { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* Copy on one side, a picture on the other */
.sp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
@media (max-width: 900px) { .sp-split { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.sp-copy h2 { margin: 0 0 18px; font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; letter-spacing: -0.01em; }
.sp-copy p { margin: 0 0 14px; font-size: 16px; color: var(--cream-dim); }
.sp-copy p:last-child { margin-bottom: 0; }

/* Process: numbered steps on a colored line, with data moving along it on wide screens */
.sp-flow { position: relative; }
.sp-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: sp; }
.sp-steps li { position: relative; padding-top: 54px; counter-increment: sp; }
.sp-steps li::before { content: counter(sp, decimal-leading-zero); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 600 12px/1 var(--mono); color: var(--c); border: 1px solid var(--c); background: linear-gradient(var(--c-soft), var(--c-soft)), var(--ink); box-shadow: 0 0 0 6px var(--ink); }
.sp-steps h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.sp-steps p { margin: 0; font-size: 14px; color: var(--cream-dim); }
.sp-flow-line { position: absolute; left: 18px; right: 18px; top: 17px; height: 2px; background: var(--border-strong); }
.sp-flow-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #e2793d, #e3b341 20%, #5fb3a2 40%, #6fa6e0 60%, #a48be6 80%, #e27396); }
.sp-packets { display: none; }
@media (max-width: 1024px) {
  .sp-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sp-steps li { padding: 6px 0 24px 58px; }
  .sp-steps li:last-child { padding-bottom: 0; }
  .sp-flow-line { left: 17px; right: auto; top: 18px; bottom: 30px; width: 2px; height: auto; }
  .sp-flow-line::after { background: linear-gradient(180deg, #e2793d, #e3b341 20%, #5fb3a2 40%, #6fa6e0 60%, #a48be6 80%, #e27396); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1025px) {
  .sp-packets { display: block; position: absolute; left: 18px; right: 18px; top: 8px; height: 20px; overflow: hidden; pointer-events: none; }
  .sp-packets i { position: absolute; inset: 0; opacity: 0; animation: sp-run 9s linear infinite; }
  .sp-packets i::after { content: ""; position: absolute; right: 0; top: 6px; width: 8px; height: 8px; border-radius: 2px; background: var(--c); box-shadow: 0 0 10px var(--c); }
  .sp-packets i:nth-child(2) { animation-delay: -1.5s; }
  .sp-packets i:nth-child(3) { animation-delay: -3s; }
  .sp-packets i:nth-child(4) { animation-delay: -4.5s; }
  .sp-packets i:nth-child(5) { animation-delay: -6s; }
  .sp-packets i:nth-child(6) { animation-delay: -7.5s; }
  @keyframes sp-run { 0% { transform: translateX(-100%); opacity: 0; } 5%, 92% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
}

/* Languages: two rows of greetings drifting in opposite directions. The greetings use scripts the page fonts don't have,
   and finding system fonts for them made the first layout about 200ms slower on a throttled phone. content-visibility
   skips that until the marquee is near the screen; the placeholder height is the real one, so nothing moves. */
.sp-marquee { display: grid; gap: 12px; margin-top: 8px; overflow: hidden; content-visibility: auto; contain-intrinsic-size: auto 106.5px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sp-mq-track { display: flex; width: max-content; }
.sp-mq-set { display: flex; gap: 12px; padding-right: 12px; }
.sp-mq-chip { display: inline-flex; align-items: baseline; gap: 10px; padding: 9px 18px 10px; border: 1px solid var(--c-line); border-radius: 40px; background: var(--c-soft); white-space: nowrap; }
.sp-mq-chip b { font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.25; color: var(--c); }
.sp-mq-chip span { font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cream-dim); }
@media (prefers-reduced-motion: no-preference) {
  .sp-mq-track { animation: sp-mq 48s linear infinite; }
  .sp-mq-row.rev .sp-mq-track { animation-direction: reverse; animation-duration: 56s; }
  @keyframes sp-mq { to { transform: translateX(-50%); } }
}

/* Next steps: the services the data can go on to */
.sp-next { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .sp-next { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .sp-next { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 440px) { .sp-next { grid-template-columns: minmax(0, 1fr); } }
.sp-ncard { position: relative; display: flex; flex-direction: column; gap: 10px; overflow: hidden; padding: 20px 18px 16px; background: var(--ink-raised); border: 1px solid var(--border); border-radius: 12px; transition: border-color 0.25s ease, transform 0.25s ease; }
.sp-ncard::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--c), transparent 80%); }
.sp-nic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--c); background: var(--c-soft); }
.sp-nic svg { width: 20px; height: 20px; }
.sp-ncard h3 { margin: 0; font-family: var(--serif); font-size: 18.5px; font-weight: 500; line-height: 1.25; transition: color 0.2s ease; }
.sp-ncard h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sp-ncard h3 a:focus-visible { outline: none; }
.sp-ncard:focus-within { outline: 2px solid var(--c); outline-offset: 3px; }
.sp-ncard p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--cream-dim); }
.sp-go { margin-top: auto; font-size: 18px; line-height: 1; color: var(--c); transition: transform 0.2s ease; }
.sp-ncard:hover { border-color: var(--c-line); }
.sp-ncard:hover h3 { color: var(--c); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sp-ncard:hover { transform: translateY(-4px); }
  .sp-ncard:hover .sp-go { transform: translateX(5px); }
}

/* The short answer: a plain definition beside a fact sheet, written to be quoted */
.sp-copy p.sp-answer { font-family: var(--serif); font-size: clamp(18px, 4.6vw, 21px); line-height: 1.5; color: var(--cream); }
.sp-facts { position: relative; overflow: hidden; padding: 26px 28px 12px; background: var(--ink-raised); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 0 rgba(243,237,225,0.04) inset, 0 14px 28px -18px rgba(0,0,0,0.7); }
.sp-facts::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #a48be6, #5fb3a2, #e3b341, #e2793d, #e27396, #6fa6e0); }
.sp-facts h3 { margin: 0 0 12px; font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.25; }
.sp-facts dl { margin: 0; }
.sp-facts dl > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); border-top: 1px solid var(--border); }
.sp-facts dt { padding: 11px 14px 11px 0; font: 600 10.5px/1.9 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c, var(--amber)); }
.sp-facts dt::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--c, var(--amber)); vertical-align: 1px; }
.sp-facts dd { margin: 0; padding: 10px 0; font-size: 14.5px; line-height: 1.5; color: var(--cream-dim); }
@media (max-width: 560px) {
  .sp-facts { padding: 22px 20px 8px; }
  .sp-facts dl > div { display: block; padding: 9px 0 10px; }
  .sp-facts dt { display: inline; padding: 0 6px 0 0; }
  .sp-facts dd { display: inline; padding: 0; font-size: 14px; }
}

/* Where the work gets used */
.sp-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1024px) { .sp-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-use { position: relative; display: flex; flex-direction: column; gap: 10px; overflow: hidden; padding: 22px 22px 20px; background: var(--ink-raised); border: 1px solid var(--border); border-radius: 12px; transition: border-color 0.25s ease; }
.sp-use::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--c), transparent 80%); }
.sp-use:hover { border-color: var(--c-line); }
.sp-use h3 { margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.25; }
.sp-use p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--cream-dim); }
.sp-use .sp-use-by { margin-top: auto; padding-top: 4px; font-size: 13px; }
.sp-use-by a { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border: 1px solid var(--c-line); border-radius: 20px; font: 600 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--c); background: var(--c-soft); text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
.sp-use-by a::after { content: "\2192"; transition: transform 0.2s ease; }
.sp-use-by a:hover { color: #1a0f07; background: var(--c); }
.sp-use-by a:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .sp-use-by a:hover::after { transform: translateX(3px); } }
@media (max-width: 640px) {
  .svcp .sp-uses { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 4px 20px 14px; scroll-padding: 0 20px; -webkit-overflow-scrolling: touch; }
  .svcp .sp-uses > .sp-use { flex: 0 0 78%; scroll-snap-align: start; }
}

/* Glossary: the terms the page uses, in plain words */
.sp-terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; }
.sp-terms.terms-5 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
@media (max-width: 1100px) { .sp-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .svcp .sp-terms { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 4px 20px 14px; scroll-padding: 0 20px; -webkit-overflow-scrolling: touch; }
  .svcp .sp-terms > div { flex: 0 0 72%; scroll-snap-align: start; }
}
.sp-terms > div { padding: 20px 20px 18px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(160deg, var(--c-soft), transparent 55%), var(--ink-raised); }
.sp-terms dt { margin: 0 0 8px; font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--cream); }
.sp-terms dt::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--c-soft); vertical-align: 2px; }
.sp-terms dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--cream-dim); }

/* Data type pages (speech, image, video, text): a 3D stack in the hero and a sample switcher (added 2026-09-28) */
.dt-scene { position: relative; height: 430px; }
.dt-stack { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateY(46px) rotateX(56deg) rotateZ(-36deg); }
.dt-layer { position: absolute; left: 50%; top: 50%; width: 320px; height: 200px; margin: -100px 0 0 -160px; padding: 14px 16px; overflow: hidden; border-radius: 16px; border: 1px solid var(--c-line); background: radial-gradient(120% 110% at 0% 0%, var(--c-soft), transparent 60%), #17130f; box-shadow: 0 1px 0 rgba(243,237,225,0.06) inset, 0 40px 60px -30px rgba(0,0,0,0.9); transform: translateZ(var(--z)); }
.dt-layer:nth-child(1) { --z: 0px; }
.dt-layer:nth-child(2) { --z: 105px; }
.dt-layer:nth-child(3) { --z: 210px; }
.dt-tag { position: absolute; right: 12px; bottom: 10px; padding: 1px 8px; border-radius: 4px; font: 600 10px/1.7 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: #1a0f07; background: var(--c); }
.dt-beam { position: absolute; left: 50%; top: 50%; width: 340px; height: 220px; margin: -110px 0 0 -170px; border-radius: 18px; pointer-events: none; background: linear-gradient(135deg, transparent 30%, rgba(243,237,225,0.14) 50%, transparent 70%); border: 1px solid rgba(243,237,225,0.18); opacity: 0; transform: translateZ(0); }
.dt-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; }
.dt-float b { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--cream); }
.dt-float small { display: block; font: 10.5px/1.4 var(--mono); color: var(--cream-faint); }
.dt-float .dt-tk { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 14px/1 var(--sans); color: #0c0a08; background: linear-gradient(135deg, var(--c), #f3ede1); }
.dt-rec .dt-tk::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #1a0f07; }
.dt-f1 { right: 0; bottom: 18px; }
.dt-f2 { left: -8px; top: 64%; }
@media (max-width: 1100px) { .dt-scene { height: 380px; } .dt-layer { width: 270px; height: 172px; margin: -86px 0 0 -135px; } .dt-beam { width: 290px; height: 190px; margin: -95px 0 0 -145px; } }
@media (max-width: 900px) { .dt-scene { height: 380px; overflow: clip; } .dt-stack { transform: translateY(64px) rotateX(56deg) rotateZ(-36deg); } .dt-f2 { left: 0; top: 0; } }
@media (max-width: 420px) { .dt-scene { height: 330px; } .dt-layer:nth-child(2) { --z: 80px; } .dt-layer:nth-child(3) { --z: 160px; } .dt-layer { width: 230px; height: 150px; margin: -75px 0 0 -115px; padding: 10px 12px; } .dt-beam { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .dt-layer { animation: dt-spread 8s ease-in-out infinite both; }
  @keyframes dt-spread { 0%, 100% { transform: translateZ(calc(var(--z) * 0.8)); } 50% { transform: translateZ(calc(var(--z) * 1.08)); } }
  .dt-beam { animation: dt-beam 8s ease-in-out infinite both; }
  @keyframes dt-beam { 0% { transform: translateZ(-20px); opacity: 0; } 10% { opacity: 1; } 80% { transform: translateZ(230px); opacity: 1; } 90%, 100% { transform: translateZ(250px); opacity: 0; } }
  .dt-float .dt-tk { animation: dt-tk 4.5s ease-out infinite; }
  @keyframes dt-tk { 0%, 8% { transform: scale(0.6); opacity: 0.4; } 14% { transform: scale(1.12); opacity: 1; } 20%, 100% { transform: none; opacity: 1; } }
}

.ds-related { position: relative; padding-top: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ds-related::before { content: ""; position: absolute; top: 27px; left: 6%; right: 6%; height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong) 12%, var(--border-strong) 88%, transparent); z-index: 0; }
.ds-related .sp-ncard { background: linear-gradient(175deg, var(--ink-raised), var(--ink) 130%); z-index: 1; }
.ds-related .sp-nic { position: relative; box-shadow: 0 0 0 5px var(--ink), 0 0 18px -5px var(--c); }
@media (max-width: 720px) { .ds-related::before { display: none; } }

/* Decision cards on dataset pages: a topic icon instead of a repeated-text placeholder */
.ds-fviz { display: flex; align-items: center; justify-content: center; }
.ds-fviz::before { content: attr(data-n); position: absolute; top: 10px; right: 16px; font: 600 32px/1 var(--serif); color: var(--c-line); opacity: 0.55; }
.ds-fviz .dfi { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; color: var(--c); background: var(--c-soft); box-shadow: 0 0 0 1px var(--c-line) inset, 0 0 24px -8px var(--c); }
.ds-fviz .dfi svg { width: 26px; height: 26px; }
.sp-next.dt-types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .sp-next.dt-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .sp-next.dt-types { grid-template-columns: minmax(0, 1fr); } }

.dt-show { padding: 18px; border: 1px solid var(--border-strong); border-radius: 18px; background: radial-gradient(90% 120% at 100% 0%, rgba(164,139,230,0.08), transparent 60%), var(--ink-raised); }
.dt-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; }
.dt-tabs legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dt-tabs label { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border: 1px solid var(--border-strong); border-radius: 30px; font-size: 14px; color: var(--cream-dim); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.dt-tabs label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.dt-tabs input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.dt-tabs label:hover { border-color: var(--c-line); color: var(--cream); }
.dt-tabs label:has(input:checked) { color: #1a0f07; background: var(--c); border-color: var(--c); }
.dt-tabs label:has(input:checked)::before { background: #1a0f07; }
.dt-tabs label:has(input:focus-visible) { outline: 2px solid var(--c); outline-offset: 3px; }
.dt-pane { display: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 28px; align-items: center; }
.dt-show:has(.dt-tabs label:nth-of-type(1) input:checked) .dt-pane:nth-child(1),
.dt-show:has(.dt-tabs label:nth-of-type(2) input:checked) .dt-pane:nth-child(2),
.dt-show:has(.dt-tabs label:nth-of-type(3) input:checked) .dt-pane:nth-child(3),
.dt-show:has(.dt-tabs label:nth-of-type(4) input:checked) .dt-pane:nth-child(4) { display: grid; }
@supports not selector(:has(*)) { .dt-tabs { display: none; } .dt-pane { display: grid; margin-bottom: 28px; } }
.dt-stage { position: relative; min-height: 300px; overflow: hidden; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: radial-gradient(120% 100% at 0% 0%, var(--c-soft), transparent 60%), #120f0c; font: 12px/1.5 var(--mono); color: var(--cream-dim); }
.dt-stage p { margin: 0; }
.dt-copy h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.2; }
.dt-copy > p { margin: 0 0 16px; font-size: 15.5px; color: var(--cream-dim); }
.dt-spec { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.dt-spec li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; color: var(--cream-dim); }
.dt-spec b { font: 600 10.5px/1.9 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c); }
@media (max-width: 860px) { .dt-pane { grid-template-columns: minmax(0, 1fr); gap: 20px; } .dt-stage { min-height: 260px; } }
@media (max-width: 440px) { .dt-show { padding: 12px; } .dt-spec li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Brief: each kind of data keeps its color in the picker */
.svcp .brief-types label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--c, var(--amber)); vertical-align: 1px; }
.svcp .brief-types label:has(input:checked) { color: #1a0f07; background: var(--c, var(--amber)); border-color: var(--c, var(--amber)); }
.svcp .brief-types label:has(input:checked)::before { background: #1a0f07; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Text rises without fading: a block caught halfway through a fade at the edge of the screen reads as low
       contrast to Lighthouse, and to people. The data cards are link targets (#speech and so on), so they can't
       move either; they wipe in from the top instead. */
    .svcp .section-head, .svcp .faq-anim details, .svcp .sp-fcard, .svcp .sp-split > div, .svcp .sp-ncard, .svcp .sp-steps li, .svcp .sp-marquee, .svcp .sp-use, .svcp .sp-terms > div, .svcp .dt-show { animation: sp-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes sp-rise { from { translate: 0 26px; } }
    .svcp .sp-card { animation: sp-wipe linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes sp-wipe { from { clip-path: inset(0 0 100% 0 round 14px); } to { clip-path: inset(-40px -40px -60px -40px round 14px); } }
    .svcp .sp-flow-line::after { transform-origin: left; animation: sp-fill-x linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
    @keyframes sp-fill-x { from { transform: scaleX(0); } }
    @keyframes sp-fill-y { from { transform: scaleY(0); } }
    @media (max-width: 1024px) { .svcp .sp-flow-line::after { transform-origin: top; animation-name: sp-fill-y; animation-range: cover 5% cover 60%; } }
  }
}

/* Guides (2026-09-27): the hub and the long-form guides use the .svcp layout with main.svcp.guide.
   A short-answer card, a sticky contents list beside the article, figures between sections, and "How we answer"
   callouts. The h2s are link targets from the contents list, so they never move on scroll. */
.g-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 8px; padding: 0; list-style: none; font: 12px/1.5 var(--mono); color: var(--cream-faint); }
.g-meta li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--teal); vertical-align: 1px; }
.g-answer { position: relative; padding: 28px 32px; border-radius: 20px; border: 1px solid rgba(226,121,61,0.35); background: radial-gradient(90% 120% at 0% 0%, rgba(226,121,61,0.14), transparent 60%), var(--ink-raised); box-shadow: 0 30px 60px -40px rgba(226,121,61,0.5); }
.g-answer .kicker { margin-bottom: 10px; }
.g-answer p { margin: 0; max-width: 46em; font: 400 clamp(19px, 2vw, 23px)/1.5 var(--serif); color: var(--cream); }
@media (max-width: 560px) { .g-answer { padding: 22px 20px; } }
.g-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.g-toc { position: sticky; top: 100px; display: grid; gap: 18px; }
.g-toc nav { display: grid; gap: 2px; padding-left: 14px; border-left: 1px solid var(--border-strong); }
.g-toc nav p { margin: 0 0 8px; font: 600 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cream-faint); }
.g-toc nav a { display: block; padding: 5px 0; font-size: 14px; line-height: 1.4; color: var(--cream-dim); text-decoration: none; transition: color 0.2s; }
.g-toc nav a:hover { color: var(--amber); }
.g-talk { padding: 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--ink-raised); }
.g-talk p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--cream-dim); }
.g-talk b { display: block; margin-bottom: 6px; font: 500 17px/1.3 var(--serif); color: var(--cream); }
@media (max-width: 960px) { .g-body { grid-template-columns: minmax(0, 1fr); gap: 32px; } .g-toc { position: static; } }
.guide .prose { max-width: 740px; }

.guide .prose h2:first-child { margin-top: 0; }
.guide .prose a { color: var(--amber); text-decoration: underline; text-decoration-color: var(--amber-deep); text-underline-offset: 3px; }
.g-num { counter-reset: q; }
.g-num h2 { counter-increment: q; }
.g-num h2::before { content: counter(q, decimal-leading-zero); display: block; margin-bottom: 8px; font: 600 12px/1 var(--mono); letter-spacing: 0.08em; color: var(--amber); }
.g-num h2.g-plain::before { content: none; }
.g-we { margin: 4px 0 22px; padding: 16px 20px 16px 18px; border-radius: 14px; border-left: 3px solid var(--teal); background: rgba(95,179,162,0.07); }
.g-we > b { display: block; margin-bottom: 6px; font: 600 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal); }
.prose .g-we p { margin: 0; color: var(--cream); font-size: 16px; }
.g-fig { margin: 28px 0 34px; padding: 22px; border-radius: 18px; border: 1px solid var(--border); background: #120f0c; }
.g-fig figcaption { margin-top: 14px; font: 12px/1.5 var(--mono); color: var(--cream-faint); }
.prose .g-checks { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 10px; }
.prose .g-checks li { position: relative; margin: 0; padding: 14px 16px 14px 48px; border-radius: 12px; border: 1px solid var(--border); background: var(--ink-raised); color: var(--cream); font-size: 16px; line-height: 1.55; }
.prose .g-checks li::before { content: "\2713"; position: absolute; left: 16px; top: 14px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 700 11px/1 var(--sans); color: #0c0a08; background: var(--teal); }
.g-warn { margin: 0 0 22px; padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(226,115,150,0.35); background: rgba(226,115,150,0.07); }
.prose .g-warn p { margin: 0; color: var(--cream); }
/* guides hub cards */
.g-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.g-card { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 20px; border: 1px solid var(--border); background: var(--ink-raised); transition: transform 0.3s, border-color 0.3s; }
.g-card:hover { transform: translateY(-4px); border-color: var(--c-line); }
.g-card:has(a:focus-visible) { outline: 2px solid var(--c); outline-offset: 3px; }
.g-card .g-viz { height: 210px; padding: 22px; border-bottom: 1px solid var(--border); background: radial-gradient(100% 120% at 0% 0%, var(--c-soft), transparent 60%), #120f0c; }
.g-card .g-txt { display: grid; align-content: start; gap: 10px; padding: 24px; }
.g-card h3 { margin: 0; font: 500 clamp(21px, 2.2vw, 26px)/1.25 var(--serif); }
.g-card h3 a { color: var(--cream); text-decoration: none; }
.g-card h3 a::after { content: ""; position: absolute; inset: 0; }
.g-card h3 a:focus-visible { outline: none; }
.g-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--cream-dim); }
.g-card .g-go { font: 600 13px/1 var(--sans); color: var(--c); }
@media (max-width: 860px) { .g-cards { grid-template-columns: minmax(0, 1fr); } }

/* Hero upgrade for the language, About, Contact and guide pages (2026-09-27): a row of fact links under the buttons,
   and a slow orbit of data points behind the 3D stack. The orbit is decoration inside the hero's role="img". */
.hx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.hx-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(243,237,225,0.03); font: 500 13px/1.25 var(--sans); color: var(--cream-dim); text-decoration: none; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.hx-chips a::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--teal)); box-shadow: 0 0 8px var(--c, var(--teal)); }
.hx-chips a:hover { color: var(--cream); border-color: var(--c, var(--amber)); background: var(--c-soft, rgba(226,121,61,0.08)); }
.dt-orbit { position: absolute; left: 50%; top: 54%; width: 520px; height: 520px; margin: -260px 0 0 -260px; transform: scaleY(0.4); pointer-events: none; }
.dt-orbit::before { content: ""; position: absolute; inset: 60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(226,121,61,0.18), transparent); }
.dt-orbit > div { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(243,237,225,0.1); }
.dt-orbit > div + div { inset: 70px; border-color: rgba(95,179,162,0.14); }
.dt-orbit i { position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); transform-origin: 4px calc(260px + 4px); transform: rotate(var(--a)); }
.dt-orbit > div + div i { transform-origin: 4px calc(190px + 4px); }
@media (max-width: 1100px) { .dt-orbit { width: 420px; height: 420px; margin: -210px 0 0 -210px; } .dt-orbit i { transform-origin: 4px calc(210px + 4px); } .dt-orbit > div + div i { transform-origin: 4px calc(140px + 4px); } }
@media (max-width: 420px) { .dt-orbit { width: 320px; height: 320px; margin: -160px 0 0 -160px; } .dt-orbit i { transform-origin: 4px calc(160px + 4px); } .dt-orbit > div + div { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .dt-orbit > div { animation: dt-orbit 38s linear infinite; }
  .dt-orbit > div + div { animation-duration: 26s; animation-direction: reverse; }
  @keyframes dt-orbit { to { rotate: 360deg; } }
}
@media (max-width: 700px) { .hx-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -20px; padding-right: 20px; scrollbar-width: none; } .hx-chips::-webkit-scrollbar { display: none; } .hx-chips li { flex: none; } }
.hero-grid > div:first-child:has(.hx-chips) { min-width: 0; }

/* Header menus: Services, Datasets and Resources. Each opens on click, and on hover where there's a mouse; a panel under
   the header on desktop, an accordion inside the slide-out menu on phones. */
.nav-row { position: relative; }
@media (max-width: 1180px) and (min-width: 861px) { nav.links { gap: 22px; } .nav-cta { padding: 10px 16px; } }
.nav-dd-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; font-size: 14.5px; color: var(--cream-dim); cursor: pointer; transition: color 0.15s ease; }
.nav-dd-btn:hover, .nav-dd.open .nav-dd-btn, .nav-dd-btn.active { color: var(--cream); }
.nav-dd-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 2px; }
.nav-dd-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.nav-dd.open .nav-dd-chev { transform: rotate(180deg); }
.dd-panel { position: absolute; top: calc(100% - 6px); left: 50%; z-index: 50; width: min(1040px, calc(100vw - 48px)); max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 18px; border-radius: 22px; border: 1px solid transparent; background: linear-gradient(180deg, #1d1712, #110e0b) padding-box, linear-gradient(135deg, rgba(226,121,61,0.6), rgba(243,237,225,0.08) 40%, rgba(243,237,225,0.08) 60%, rgba(164,139,230,0.45)) border-box; box-shadow: 0 50px 100px -30px rgba(0,0,0,0.95), 0 30px 80px -40px rgba(226,121,61,0.45); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; }
.dd-panel.dd-mid { width: min(760px, calc(100vw - 48px)); }
.dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.nav-dd.open .dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.18s ease, transform 0.18s ease; }
.dd-grid { display: grid; gap: 18px; }
.dd-g-ds { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 1.1fr); }
.dd-g-svc { grid-template-columns: minmax(0, 2.1fr) minmax(0, 0.9fr); }
.dd-g-res { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.dd-feature { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 16px; background: radial-gradient(90% 80% at 100% 0%, rgba(226,121,61,0.32), transparent 60%), radial-gradient(80% 70% at 0% 100%, rgba(164,139,230,0.24), transparent 60%), #17120e; box-shadow: inset 0 0 0 1px rgba(226,121,61,0.3); }
.dd-feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(243,237,225,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(243,237,225,0.05) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(80% 80% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(80% 80% at 100% 0%, #000, transparent 70%); }
.dd-f-svc { background: radial-gradient(90% 80% at 100% 0%, rgba(95,179,162,0.26), transparent 60%), radial-gradient(80% 70% at 0% 100%, rgba(226,121,61,0.24), transparent 60%), #17120e; box-shadow: inset 0 0 0 1px rgba(95,179,162,0.3); }
.dd-pill { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #7fd0bd; background: rgba(95,179,162,0.12); box-shadow: inset 0 0 0 1px rgba(95,179,162,0.35); }
.dd-pill i { width: 7px; height: 7px; border-radius: 50%; background: #5fb3a2; box-shadow: 0 0 0 3px rgba(95,179,162,0.2); }
.dd-title { font: 500 22px/1.2 var(--serif); color: var(--cream); }
.dd-text { font-size: 13.5px; line-height: 1.5; color: var(--cream-dim); }
.dd-bars { display: flex; align-items: flex-end; gap: 3px; height: 64px; margin: 6px 0 4px; }
.dd-bars i { flex: 1; height: var(--h); border-radius: 2px; background: linear-gradient(180deg, #f0a172, #e2793d 45%, #c9637f); opacity: 0.85; }
.dd-stats { display: flex; gap: 22px; margin-top: 2px; font: 11.5px/1.3 var(--mono); color: var(--cream-faint); }
.dd-stats b { display: block; font: 600 24px/1.1 var(--serif); background: linear-gradient(100deg, #e2793d, #ec8f6b 40%, #e27396 70%, #a48be6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dd-go { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: #f2a678; }
.dd-feature:focus-visible, .dd-panel a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.dd-col { padding: 6px 4px; }
.dd-h { margin: 0 0 10px; padding: 0 8px; font: 600 10.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-faint); }
.dd-langs, .dd-types, .dd-posts { margin: 0; padding: 0; list-style: none; }
.dd-langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
.dd-langs a { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 8px; border-radius: 9px; font-size: 14px; color: var(--cream); transition: background 0.15s ease; }
.dd-langs small { flex: none; white-space: nowrap; font: 11px/1 var(--mono); color: var(--cream-faint); }
.dd-more { display: inline-flex; gap: 6px; margin: 8px 0 0 8px; font-size: 13.5px; font-weight: 600; color: #f2a678; }
.dd-read { display: block; margin: 18px 8px 0 0; padding: 14px 16px; border-radius: 12px; background: linear-gradient(100deg, rgba(164,139,230,0.12), rgba(226,121,61,0.08)); box-shadow: inset 0 0 0 1px rgba(164,139,230,0.28); }
.dd-read small { display: block; margin-bottom: 4px; font: 600 10.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #c3b0f2; }
.dd-read b { font: 500 15px/1.35 var(--serif); color: var(--cream); }
.dd-types { display: grid; gap: 2px; }
.dd-types.dd-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
.dd-types a { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; transition: background 0.15s ease; }
.dd-types svg, .dd-foot svg { width: 18px; height: 18px; fill: none; stroke: #f2a678; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dd-types svg { box-sizing: content-box; padding: 6px; border-radius: 9px; background: rgba(226,121,61,0.1); box-shadow: inset 0 0 0 1px rgba(226,121,61,0.22); }
.dd-types b { display: block; font-size: 14px; font-weight: 600; color: var(--cream); }
.dd-types small { display: block; font-size: 12px; line-height: 1.35; color: var(--cream-faint); }
.dd-posts { display: grid; gap: 8px; }
.dd-posts a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(243,237,225,0.03); box-shadow: inset 0 0 0 1px rgba(243,237,225,0.08); transition: background 0.15s ease; }
.dd-posts img { width: 112px; height: auto; aspect-ratio: 1200 / 630; border-radius: 8px; box-shadow: 0 0 0 1px rgba(243,237,225,0.12); }
.dd-posts b { display: block; font: 500 14.5px/1.3 var(--serif); color: var(--cream); }
.dd-posts small { display: block; margin-top: 4px; font: 11px/1.4 var(--mono); color: var(--cream-faint); }
.dd-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 14px; padding: 14px 8px 2px; border-top: 1px solid rgba(243,237,225,0.08); }
.dd-foot a { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--cream-dim); }
.dd-foot .dd-cta { margin-left: auto; font-weight: 600; color: #f2a678; }
@media (hover: hover) { .dd-langs a:hover, .dd-types a:hover, .dd-posts a:hover { background: rgba(243,237,225,0.06); } .dd-foot a:hover { color: var(--cream); } .dd-feature:hover .dd-go span { margin-left: 4px; } }
@media (max-width: 1080px) and (min-width: 861px) { .dd-g-ds { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dd-g-ds .dd-feature { grid-column: 1 / -1; } .dd-g-ds .dd-bars, .dd-g-ds .dd-read { display: none; } .dd-g-svc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .nav-dd { width: 100%; }
  .nav-dd-btn { font-size: 18px; width: 100%; justify-content: space-between; }
  .nav-dd-chev { width: 16px; height: 16px; }
  .dd-panel, .dd-panel.dd-mid { position: static; display: none; width: auto; max-height: none; overflow: visible; margin-top: 14px; padding: 12px; transform: none; opacity: 1; visibility: visible; box-shadow: none; transition: none; }
  .dd-panel::before { content: none; }
  .nav-dd.open .dd-panel { display: block; transform: none; }
  .dd-g-ds, .dd-g-svc, .dd-g-res { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dd-types.dd-2col { grid-template-columns: minmax(0, 1fr); }
  .dd-feature { padding: 16px; }
  .dd-text, .dd-bars, .dd-read { display: none; }
  .dd-col { padding: 4px 0; }
  .dd-posts a { grid-template-columns: 84px minmax(0, 1fr); }
  .dd-posts img { width: 84px; }
  .dd-foot { flex-direction: column; align-items: flex-start; }
  .dd-foot .dd-cta { margin-left: 0; }
}