/* =========================================================
   Nexusion
   Colours from nexusion.in: purple accent, emerald for status,
   zinc neutrals on a warm cream canvas.
   ========================================================= */

/* Charcoal grey page (purple ribbons behind it) with white text,
   plus white panels that switch back to dark text */
:root {
  --purple: #d2b4fa;
  --purple-strong: #7e22ce;
  --purple-dark: #b98af5;
  --purple-light: rgba(168, 85, 247, .2);
  --purple-line: rgba(210, 180, 250, .42);
  --green: #34d399;

  --bg: #3c3c42;
  --bg-deep: #34343a;
  --solid: #46464d;
  --surface: rgba(255, 255, 255, .07);
  --surface-2: rgba(255, 255, 255, .045);
  --text: #ffffff;
  --text-2: #e4dfec;
  --text-3: #b9b2c6;
  --line: rgba(255, 255, 255, .14);
  --line-2: rgba(255, 255, 255, .26);
  --ink: #ffffff;
  --on-ink: #1c1a22;

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 10px;
  --header-h: 68px;
  color-scheme: dark;
}
/* ---------- Intro (logo video before the site opens) ----------
   The head script adds .show-intro on the first page of a visit; the ::after
   cover hides the page at once, then js/site.js plays the video on top. */
html.show-intro { overflow: hidden; }
html.show-intro::after { content: ""; position: fixed; inset: 0; z-index: 9998; background: #070104; }
.intro-screen { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #070104; transition: opacity .7s ease, visibility .7s; }
.intro-screen.is-done { opacity: 0; visibility: hidden; }
.intro-screen video { width: min(78vmin, 640px); height: auto; aspect-ratio: 1;
  /* soften the square video's edges so it melts into the background */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect; }

/* Hold the header's space until js/site.js renders it, so the page doesn't jump */
#site-header { height: var(--header-h); }

/* ---------- Video background (every page) ---------- */
/* Fixed full-screen video behind the page. The still photo underneath shows
   until the video starts. The shade darkens the top and bottom slightly so
   the header and content stay readable. */
.bg-photo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #000; }
/* The poster is a frame of the same video, so nothing else flashes while it loads */
.bg-image { position: absolute; inset: 0; background: url("../assets/video-poster.webp") center / cover no-repeat; transition: opacity .5s; }
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.bg-photo.has-video .bg-video { opacity: 1; }
.bg-photo.has-video .bg-image { opacity: 0; }
.bg-icons { position: absolute; inset: 0; }
.bg-icon-pos { position: absolute; top: 0; will-change: transform; } /* moved with the scroll by js/site.js */
/* No glow filter on the icons: a filter on an animating element is re-rendered every frame */
.bg-icon { display: block; width: var(--s); height: var(--s); color: #c4a5fa; opacity: .55; transform: translate(-50%, -50%); animation: iconFloat 7s ease-in-out infinite alternate; }
.bg-icon .i { width: 100%; height: 100%; stroke-width: 1.4; }
@keyframes iconFloat {
  from { transform: translate(-50%, -50%) translateY(-9px) rotate(-4deg); opacity: .35; }
  to { transform: translate(-50%, -50%) translateY(9px) rotate(4deg); opacity: .7; }
}
@media (max-width: 640px) { .bg-icon { width: calc(var(--s) * .7); height: calc(var(--s) * .7); } }
.bg-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, .32) 28%, rgba(0, 0, 0, .32) 72%, rgba(0, 0, 0, .6)); }

/* Inner boxes are light glass too (white-tinted, see-through), matching the section panels */
.card, .case-card, .table-wrap, .hero-pillars, .facts, .deliverables, .bench, .ring-card {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--text); -webkit-font-smoothing: antialiased;
  background: #000; }
select option { background: var(--solid); color: var(--text); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
[hidden] { display: none !important; }
::selection { background: var(--purple-strong); color: #fff; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mono { font-family: var(--mono); }
.muted { color: var(--text-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--on-ink); padding: 8px 14px; border-radius: 6px; text-decoration: none; }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .container { padding: 0 16px; } }

.section { padding: 80px 0; }
.section.tight { padding: 48px 0; }
@media (max-width: 760px) { .section { padding: 56px 0; } .section.tight { padding: 32px 0; } }

/* Glass panels: every section except the home hero sits in a tinted, partly see-through box.
   There is deliberately no backdrop blur: blurring the playing video behind several large
   panels has to be redone on every video frame and made the background stutter.
   Sections that only hold the purple CTA band are skipped, since the band is already a box. */
main > section:not(.hero), main > section.section.tight { padding: 8px 0; }
main > section:first-child:not(.hero) { padding-top: 32px; }
main > section:last-child { padding-bottom: 40px; }
main > section:not(.hero) > .container:not(:has(> .cta-band:only-child)) {
  padding: 44px 48px;
  border-radius: 20px;
  background: rgba(18, 14, 28, .52);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
@media (max-width: 1208px) { main > section:not(.hero) > .container:not(:has(> .cta-band:only-child)) { width: calc(100% - 48px); } }
@media (max-width: 640px) {
  main > section:not(.hero) > .container:not(:has(> .cta-band:only-child)) { width: calc(100% - 20px); padding: 26px 16px; border-radius: 16px; }
  main > section:not(.hero), main > section.section.tight { padding: 5px 0; }
  main > section.hero { padding: 40px 0 16px; }
  main > section:first-child:not(.hero) { padding-top: 16px; }
  main > section:last-child { padding-bottom: 28px; }
}

/* A new page's content fades in when it is swapped in (js/site.js, navigate) */
main { animation: page-in .28s ease-out both; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { main { animation: none; } }

/* Text inside the panels needs no shadow (the panel gives contrast) */
main > section:not(.hero) { text-shadow: none; }

/* Phones and tablets: a slightly darker panel and fewer floating icons */
@media (max-width: 900px), (pointer: coarse) {
  main > section:not(.hero) > .container:not(:has(> .cta-band:only-child)) { background: rgba(18, 14, 28, .58); }
  .bg-icon-pos:nth-child(n+8) { display: none; }
}

/* Text sits straight on the video; a soft shadow keeps it crisp over bright ribbon areas */
main { text-shadow: 0 1px 12px rgba(0, 0, 0, .75); }
.btn, .tag, .tile, .card, .case-card, .table-wrap, .bento-tile { text-shadow: none; }

/* ---------- Type ---------- */
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); margin-bottom: 14px; }
h1, .h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.07; letter-spacing: -.03em; font-weight: 800; }
h2, .h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 750; }
h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
.lead { font-size: 1.125rem; color: var(--text-2); max-width: 62ch; }
.accent { color: var(--purple); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px 40px; flex-wrap: wrap; margin-bottom: 44px; }
.section-head h2 { max-width: 20ch; }
.section-head .lead { margin-top: 14px; }
.prose p + p { margin-top: 14px; }
.prose p { color: var(--text-2); }

.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; color: var(--purple); text-decoration: none; }
.text-link .i { width: 16px; height: 16px; transition: transform .2s; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-link:hover .i { transform: translateX(3px); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 8px; border: 1px solid transparent; font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.btn .i { width: 16px; height: 16px; }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--purple-strong); color: #fff; }
.btn-outline { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn-outline:hover { border-color: var(--text); }
.btn-light { background: #fff; color: #18181b; }
.btn-light:hover { background: #ede4f9; }
.btn:disabled { opacity: .6; cursor: progress; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(12, 10, 18, .88); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; letter-spacing: .1em; text-decoration: none; margin-right: auto; }
.logo img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.main-nav { display: flex; gap: 2px; }
.main-nav a { padding: 8px 11px; border-radius: 6px; font-size: 14.5px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.main-nav a:hover { color: var(--text); background: var(--surface); }
.main-nav a[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.search-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text-3); font-size: 13.5px; font-weight: 600; }
.search-btn:hover { border-color: var(--line-2); }
.search-btn .i { width: 15px; height: 15px; }
kbd { font-family: var(--mono); font-size: 11px; padding: 2px 5px; border-radius: 4px; border: 1px solid var(--line); color: var(--text-3); background: var(--surface-2); }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); text-decoration: none; }
.icon-btn:hover { color: var(--text); border-color: var(--line-2); }
.icon-btn .i { width: 17px; height: 17px; }
.menu-btn { display: none; }

.mobile-menu { border-top: 1px solid var(--line); background: var(--solid); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.mobile-menu nav { display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 24px; }
.mobile-menu nav > a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 700; text-decoration: none; }
.mobile-menu nav > a[aria-current="page"] { color: var(--purple); }
.mobile-menu .btn { margin-top: 20px; }
body.menu-open { overflow: hidden; }

.btn, .search-btn { white-space: nowrap; }
@media (max-width: 1320px) { .search-btn span, .search-btn kbd { display: none; } .search-btn { width: 36px; padding: 0; justify-content: center; } }
@media (max-width: 1080px) { .main-nav { display: none; } .menu-btn { display: grid; } }
@media (max-width: 760px) { .hide-md { display: none; } }
@media (max-width: 420px) { .hide-sm { display: none; } .logo span { font-size: 14px; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: 72px 0 24px; }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { margin-top: 20px; }
@media (max-width: 760px) { .page-hero { padding: 48px 0 16px; } }

/* ---------- Service detail pages ---------- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-3); margin-bottom: 28px; }
.breadcrumb a { color: var(--purple); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.service-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; margin-bottom: 20px; background: rgba(126, 34, 206, .35); border: 1px solid rgba(210, 180, 250, .4); color: #fff; }
.service-icon .i { width: 26px; height: 26px; }
.service-hero .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.service-hero .weeks { font-size: 14px; font-weight: 700; color: var(--text-2); }
.service-hero .tagline { font-size: 1.3rem; font-weight: 600; color: var(--text); }
.service-hero .lead + .lead { margin-top: 14px; }
.service-hero .hero-ctas { margin-top: 32px; }
.step-card .no { display: block; font-family: var(--mono); font-size: 13px; color: var(--purple); margin-bottom: 16px; }
.other-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.other-service { display: flex !important; align-items: center; gap: 14px; padding: 18px 20px !important; }
.other-service span { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.other-service strong { font-size: 15px; }
.other-service small { font-size: 13px; color: var(--text-3); }
.other-service .i:first-child { color: var(--purple); width: 22px; height: 22px; }
.other-service:hover { border-color: var(--purple) !important; }

/* ---------- Home hero ---------- */
.hero { padding: 80px 0 88px; }
.hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: end; }
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: 22px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 22px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
/* Soft shade behind the hero copy so it reads over the bright ribbon loop */
.hero { position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 48% 42% at 50% 42%, rgba(8, 6, 14, .6), transparent 75%); pointer-events: none; }
.hero > .container { position: relative; }
.hero .lead, .hero .status { text-shadow: 0 1px 14px rgba(8, 6, 14, .9); }
.hero-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-center h1 { max-width: none; font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 1.04; }
.hero-center .lead { margin-left: auto; margin-right: auto; }
[data-magnetic] .word { display: inline-block; white-space: nowrap; }
[data-magnetic] .letter { display: inline-block; will-change: transform; }
.hero-center .hero-ctas { justify-content: center; }
.hero-pillars { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; max-width: 900px; margin-top: 64px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.hero-pillars li + li { border-left: 1px solid var(--line); }
.hero-pillars a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; font-weight: 700; font-size: 15px; text-decoration: none; transition: color .15s; }
.hero-pillars a:hover { color: var(--purple); }
.hero-pillars span { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--text-3); }
@media (max-width: 680px) {
  .hero-pillars { grid-template-columns: 1fr 1fr; margin-top: 44px; }
  .hero-pillars li:nth-child(3) { border-left: 0; }
  .hero-pillars li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.hero-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px 24px; }
.hero-panel-title { font-size: 13px; font-weight: 700; color: var(--text-3); padding: 14px 0 6px; }
.hero-panel ol li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 16px 0; border-top: 1px solid var(--line); font-weight: 700; }
.hero-panel ol li:first-child { border-top: 0; }
.hero-panel ol span { font-family: var(--mono); font-size: 12.5px; color: var(--text-3); font-weight: 500; }
.hero-panel ol a { color: var(--text-3); display: grid; }
.hero-panel ol a:hover { color: var(--purple); }
.hero-panel ol .i { width: 16px; height: 16px; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero { padding: 48px 0 64px; } }

/* ---------- Generic grids & cards ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 26px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-2); font-size: 15px; }
a.card { display: block; text-decoration: none; transition: border-color .15s; }
a.card:hover { border-color: var(--line-2); }

.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--purple-light); color: var(--purple); border: 1px solid var(--purple-line); }
.tag.plain { background: var(--surface-2); color: var(--text-2); border-color: var(--line); font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

.checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); font-weight: 600; }
.checklist li:last-child { border-bottom: 1px solid var(--line); }
.checklist .i { color: var(--green); margin-top: 3px; }
.checklist.compact li { padding: 8px 0; font-weight: 500; font-size: 15px; color: var(--text-2); }
.checklist.compact li:last-child { border-bottom: 0; }

/* ---------- Comparison (home + about) ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.compare > div { padding: 26px; }
.compare > div + div { border-left: 1px solid var(--line); background: var(--purple-light); }
.compare h3 { font-size: 15px; margin-bottom: 14px; }
.compare li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--text-2); }
.compare > div + div li { border-color: var(--purple-line); color: var(--text); }
@media (max-width: 560px) { .compare { grid-template-columns: 1fr; } .compare > div + div { border-left: 0; border-top: 1px solid var(--line); } }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); background: var(--surface-2); }
tbody th { font-weight: 700; width: 24%; }
tbody td { color: var(--text-2); }
tbody td:last-child { color: var(--text); font-weight: 600; }
thead th:last-child { color: var(--purple); }
tbody tr:last-child > * { border-bottom: 0; }

/* ---------- Services list (home) ---------- */
.service-rows { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 56px 1.1fr 1.6fr 130px 28px; gap: 24px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color .15s; }
.service-row:hover { background: var(--surface); }
.service-row .num { font-family: var(--mono); font-size: 13px; color: var(--text-3); padding-top: 3px; padding-left: 8px; }
.service-row h3 { font-size: 1.15rem; }
.service-row p { color: var(--text-2); font-size: 15px; }
.service-row .weeks { font-size: 13.5px; font-weight: 600; color: var(--text-2); padding-top: 3px; }
.service-row .arrow { color: var(--text-3); padding-top: 4px; }
.service-row:hover .arrow { color: var(--purple); }
.service-row .tag { margin-top: 8px; }
@media (max-width: 860px) {
  .service-row { grid-template-columns: 40px 1fr 24px; gap: 6px 14px; }
  .service-row .num { padding-left: 0; }
  .service-row p, .service-row .weeks { grid-column: 2; }
  .service-row .arrow { grid-column: 3; grid-row: 1; }
}

/* ---------- Service detail blocks (services page) ---------- */
.service-block { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; padding: 56px 0; border-top: 1px solid var(--line); }
.service-block:first-child { border-top: 0; padding-top: 0; }
.service-block .meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.service-block .weeks { font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.service-block .tagline { margin-top: 12px; font-size: 1.1rem; font-weight: 600; color: var(--text); }
.service-block .prose { margin-top: 0; }
.deliverables { margin-top: 24px; padding: 20px 22px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.deliverables h4 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
@media (max-width: 860px) { .service-block { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- Service ring (services page) ---------- */
.ring-section { padding-top: 32px; overflow: hidden; border-top: 0; }
.ring-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; }
.ring-card { max-width: 480px; padding: 32px; border-radius: 16px; background: #fff; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6); }
@media (max-width: 560px) { .ring-card { padding: 24px; } }
.ring-count { font-size: 13px; color: var(--text-3); margin-bottom: 20px; }
.ring-count span { color: var(--purple); font-weight: 700; }
.ring-card-body { min-height: 280px; }
.ring-card-body .meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ring-card-body .weeks { font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.ring-card-body .tagline { margin: 12px 0 10px; font-size: 1.1rem; font-weight: 600; }
.ring-card-body.swap { animation: cardIn .45s ease; }
.ring-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ring-nav { display: flex; gap: 8px; }

.ring-stage { --tw: 170px; --th: 124px; position: relative; height: 480px; display: grid; place-items: center; perspective: 1200px; }
.ring-scene { position: relative; width: var(--tw); height: var(--th); transform-style: preserve-3d; transform: rotateX(-16deg); }
.ring { position: absolute; inset: 0; transform-style: preserve-3d; }
.tile { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transform: rotateY(calc(var(--i) * -60deg)) translateZ(calc(var(--tw) * 1.05)); }
.tile:focus-visible { outline: none; }
.face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; border-radius: 16px; text-align: left; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: var(--shade, 0); pointer-events: none; }
.face.back { transform: rotateY(180deg); }
.face .i { width: 24px; height: 24px; }
.face strong { font-size: 15px; line-height: 1.25; }
.face small { font-size: 12px; font-weight: 600; opacity: .75; }
.tile-0 .face { background-color: #7e22ce; color: #fff; }
.tile-1 .face { background-color: #1a1029; color: #fff; border: 1px solid rgba(196, 161, 242, .35); }
.tile-2 .face { background-color: #fff; color: #18181b; }
.tile-2 .face .i { color: #7e22ce; }
.tile.is-front .front { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--purple), 0 18px 30px -12px rgba(24, 24, 27, .45); }
.tile:focus-visible .front { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px #fff; }
.ring-floor { position: absolute; left: 50%; top: 66%; width: 72%; height: 70px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(168, 85, 247, .28), transparent); pointer-events: none; }
.ring-hint { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 13px; color: var(--text-3); }
@media (max-width: 900px) {
  .ring-grid { grid-template-columns: 1fr; gap: 8px; }
  .ring-stage { order: -1; height: 380px; --tw: 140px; --th: 104px; }
  .ring-card { max-width: none; }
  .ring-card-body { min-height: 0; }
}
@media (max-width: 480px) {
  .ring-stage { height: 290px; --tw: 100px; --th: 78px; }
  .face { padding: 10px; border-radius: 12px; }
  .face .i { width: 18px; height: 18px; }
  .face strong { font-size: 11.5px; }
  .face small { display: none; }
}

@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Moving bento (work page) ---------- */
.moving-bento { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 1000px; aspect-ratio: 16 / 10; margin: 0 auto 72px; }
@media (max-width: 1023px) { .moving-bento { aspect-ratio: 4 / 3; } }
@media (max-width: 639px) { .moving-bento { grid-template-columns: repeat(2, 1fr); aspect-ratio: 3 / 4; gap: 10px; } }
.bento-tile { container-type: size; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: 0; padding: 16px; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .6); }
.bento-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, .1) 55%, transparent); pointer-events: none; }
.bento-tile:hover, .bento-tile:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.tone-0 { background: #7e22ce; }
.tone-1 { background: #1c1a22; border: 1px solid rgba(255, 255, 255, .12); }
.tone-2 { background: #f6f1fd; color: #1c1a22; }
.tone-2::after { background: none; }
.tone-3 { background: #4c1d95; }
.tone-4 { background: #26262b; border: 1px solid rgba(255, 255, 255, .12); }
.tone-5 { background: #9333ea; }
/* Tiles with a screenshot: image fills the tile, text sits on a dark fade (as in the MovingBento component) */
.bento-tile.has-img { background-color: #111; background-size: cover; background-position: top center; border: 1px solid rgba(255, 255, 255, .12); color: #fff; }
.bento-tile.has-img::after { background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .2) 55%, transparent); }
.bento-tile.has-img .bento-client { display: none; }
.bento-tile.has-img .bento-tags em { background: rgba(255, 255, 255, .16); color: #fff; }
.bento-client { position: absolute; top: 14px; left: 16px; right: 16px; z-index: 1; font-size: clamp(15px, 12cqw, 46px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.bento-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.bento-text strong { font-size: 13.5px; line-height: 1.3; }
.bento-desc { font-size: 12.5px; line-height: 1.45; opacity: .8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bento-tags { display: none; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bento-tags em { font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.tone-2 .bento-tags em { background: rgba(126, 34, 206, .12); color: #6b21a8; }
.is-center .bento-client { font-size: clamp(22px, 9cqw, 56px); }
.is-center .bento-text strong { font-size: clamp(16px, 4cqw, 22px); }
.is-center .bento-desc { font-size: 14px; -webkit-line-clamp: 3; }
.is-center .bento-tags { display: flex; }
@container (max-height: 150px) { .bento-desc { display: none; } }
/* Small phone tiles: show only the client name */
@container (max-height: 170px) and (max-width: 220px) { .bento-text { display: none; } }
.case-card:target { outline: 3px solid var(--purple); outline-offset: 4px; }

/* ---------- Case studies ---------- */
.case-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
/* Project screenshot with the client name and year on a dark strip along the bottom */
.case-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; color: #fff; background: #111; border-bottom: 1px solid var(--line); }
.case-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s ease; }
.case-card:hover .case-cover img { transform: scale(1.03); }
.case-cover .row { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 28px 18px 12px; font-size: 13px; font-weight: 600; background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.case-body { padding: 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.case-body p { color: var(--text-2); font-size: 15px; }
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 10px; margin-top: auto; }
.case-stats > div { padding: 12px 14px; }
.case-stats > div + div { border-left: 1px solid var(--line); }
.case-stats dt { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.case-stats dd { font-weight: 800; }
.case-stats dd.sub { font-weight: 500; font-size: 13px; color: var(--text-2); }

/* Work page on phones: case studies three to a row as small tiles (cover + title).
   A tapped tile opens across the full width with its full details (js/site.js, workFilter). */
.work-tap-hint { display: none; }
.case-card.has-site { cursor: pointer; transition: border-color .2s; }
.case-card.has-site:hover, .case-card.has-site:focus-visible { border-color: var(--purple) !important; }
.case-visit { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: var(--purple); font-weight: 700; text-decoration: none; }
.case-visit:hover { text-decoration: underline; }
.case-visit .i { width: 15px; height: 15px; }
@media (max-width: 639px) {
  .work-cases { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .work-cases .case-card { cursor: pointer; border-radius: 10px; }
  .work-cases .case-card:not(.is-open) .case-cover { aspect-ratio: 1 / 1; border-bottom: 0; }
  .work-cases .case-card:not(.is-open) .case-cover .row,
  .work-cases .case-card:not(.is-open) .case-body > :not(h3) { display: none; }
  .work-cases .case-card:not(.is-open) .case-body { padding: 8px 8px 10px; gap: 0; }
  .work-cases .case-card:not(.is-open) h3 { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .work-cases .case-card.is-open { grid-column: 1 / -1; outline: 2px solid var(--purple); outline-offset: 2px; }
  .work-cases .case-card.is-open .case-body { padding: 18px; }
  .work-cases .case-card.is-open .case-stats > div { padding: 10px; }
  .work-tap-hint { display: block; margin: -18px 0 14px; font-size: 13px; color: var(--text-3); }
  #workFilter { flex-wrap: nowrap; gap: 6px; }
  #workFilter button { padding: 7px 10px; font-size: 13px; white-space: nowrap; }
}
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filter-bar button, .tablist button { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--text-2); }
.filter-bar button:hover, .tablist button:hover { border-color: var(--line-2); color: var(--text); }
.filter-bar button[aria-pressed="true"], .tablist button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }

/* ---------- Solutions ---------- */
.solution { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; }
.solution h2 { margin-bottom: 12px; }
.solution .lead { margin-bottom: 24px; }
.solution h4 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 28px 0 8px; }
.solution .btn { white-space: normal; }
.solution aside { display: flex; flex-direction: column; gap: 20px; }
.bench { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.bench > div { padding: 14px 16px; }
.bench > div + div { border-left: 1px solid var(--line); }
.bench dt { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.bench dd { font-weight: 800; font-size: 15px; }
.problems li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-weight: 600; }
.problems li::before { content: "—"; color: var(--text-3); }
.modules { display: flex; flex-wrap: wrap; gap: 8px; }
.modules li { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--purple-line); background: var(--purple-light); color: var(--purple); font-size: 14px; font-weight: 600; }
@media (max-width: 900px) { .solution { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Process ---------- */
.stages { counter-reset: stage; }
.stage { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 32px; padding: 36px 0; border-top: 1px solid var(--line); }
.stage:last-child { border-bottom: 1px solid var(--line); }
.stage .when { font-size: 14px; font-weight: 700; color: var(--purple); }
.stage .no { font-family: var(--mono); font-size: 13px; color: var(--text-3); display: block; margin-bottom: 4px; }
.stage h3 { margin-bottom: 8px; }
.stage p { color: var(--text-2); }
.stage .artifacts h4 { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
@media (max-width: 860px) { .stage { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; } }

/* ---------- Team ---------- */
/* Cards in a 6-column grid: the two founders (.person--lead) share the first row,
   the other three members share the second. */
.team-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.person { grid-column: span 2; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 20px; text-align: center;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; background: rgba(255, 255, 255, .05); }
.person--lead { grid-column: span 3; }
.person > div { flex: 1; display: flex; flex-direction: column; align-items: center; }
.person--lead > div { max-width: 380px; }
.person img { width: 140px; flex: none; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.person--lead img { width: 150px; }
.person h2.h2 { font-size: 1.35rem !important; line-height: 1.25; }
.person .role { color: var(--purple); font-weight: 700; margin: 4px 0 2px; }
.person .loc { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-3); margin-bottom: 10px; }
.person .loc .i { width: 15px; height: 15px; }
.person p { color: var(--text-2); }
.person > div > p:not(.role):not(.loc) { font-size: 14.5px; line-height: 1.6; }
/* Phones: compact cards, the founders two to the first row and the others three to the
   next. The full bio is on each profile page. */
@media (max-width: 639px) {
  .team-list { gap: 10px; }
  .person { gap: 8px; padding: 8px 6px 12px; border-radius: 12px; }
  .person img, .person--lead img { width: 100%; border-radius: 8px; }
  .person--lead img { max-width: 130px; }
  .person h2.h2 { font-size: 1rem !important; }
  .person .role { font-size: 11.5px; line-height: 1.3; margin: 3px 0 0; }
  .person .loc, .person > div > p:not(.role) { display: none; }
  .person .profile-link { padding-top: 6px; font-size: 12px; gap: 3px; }
  .person .profile-link .i { width: 13px; height: 13px; }
}
.person h2 a { color: inherit; text-decoration: none; }
.person h2 a:hover { color: var(--purple); }
.person .profile-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; color: var(--purple); font-weight: 700; text-decoration: none; }
.person .profile-link:hover { text-decoration: underline; }
.person .profile-link .i { width: 16px; height: 16px; }

/* Team member profile pages (team-*.html) */
.member-hero { display: grid; grid-template-columns: 180px 1fr; gap: 36px; align-items: center; }
.member-hero img { width: 180px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.member-hero h1 { max-width: none; font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-bottom: 6px; }
.member-role { color: var(--purple); font-weight: 700; font-size: 1.1rem; }
.member-loc { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-3); margin: 4px 0 14px; }
.member-loc .i { width: 15px; height: 15px; }
.other-service__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; }
@media (max-width: 640px) { .member-hero { grid-template-columns: 1fr; gap: 24px; } .member-hero img { width: 160px; } }

/* ---------- Card shelf (resources.html) ----------
   Guide cards that slide like the books on ThreeUI's Complete Shelf page.
   js/site.js positions each card with transforms; without JS the cards form a grid. */
.card-shelf { --ease-out: cubic-bezier(.2, .72, .24, 1); position: relative; color: #fff; }
.card-shelf__stage { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
/* Fixed heights leave room for the front card's lift and scale (about 1.1x),
   so no card is ever cut at the top or bottom. */
.card-shelf.is-shelf { --card-w: min(290px, 72vw); --card-h: 360px; --controls-h: 110px; height: calc(var(--card-h) * 1.1 + 90px + var(--controls-h)); }
.card-shelf.is-shelf .card-shelf__stage { position: absolute; inset: 0 0 var(--controls-h); display: block; overflow: hidden; perspective: 1400px; perspective-origin: 50% 45%;
  /* side cards fade out softly at the edges instead of being cut off */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.card-shelf.is-shelf .shelf-card { position: absolute; top: 50%; left: 50%; width: var(--card-w); height: var(--card-h); margin: calc(var(--card-h) / -2 + 10px) 0 0 calc(var(--card-w) / -2); opacity: 0; will-change: transform, opacity; transform-origin: 50% 100%; }
.card.shelf-card { background: rgba(22, 16, 34, .92) !important; }
.shelf-card { display: flex !important; flex-direction: column; gap: 12px; padding: 26px !important; text-decoration: none; color: #fff; }
.shelf-card .meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.shelf-card h3 { font-size: 1.35rem; line-height: 1.25; }
.shelf-card p { font-size: 14.5px; color: var(--text-2); display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.shelf-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 14px; font-weight: 700; color: var(--purple); }
.shelf-card__more .i { width: 16px; height: 16px; transition: transform .2s; }
.shelf-card.is-current { border-color: rgba(210, 180, 250, .6) !important; box-shadow: 0 30px 60px -28px rgba(126, 34, 206, .7); }
.shelf-card:hover .shelf-card__more .i { transform: translateX(3px); }

.browse-ui { display: none; }
.card-shelf.is-shelf .browse-ui { position: absolute; right: 0; bottom: 8px; left: 0; z-index: 200; display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr); align-items: end; gap: 26px; }
.selection { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 13px; min-width: 0; }
.counter { padding-top: 6px; color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.selection__copy { min-width: 0; }
.selection__title { margin: 0; font-size: clamp(1.3rem, 2vw, 1.9rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.browse-actions { display: flex; align-items: center; justify-content: center; gap: 6px; padding-bottom: 4px; }
.round-button, .card-shelf .text-button { display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .38); background: rgba(12, 10, 18, .45); color: #fff; cursor: pointer; text-decoration: none; transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease; }
.round-button { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.card-shelf .text-button { min-height: 40px; padding: 0 20px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.round-button:hover, .card-shelf .text-button:hover { border-color: #fff; background: #fff; color: #1c1a22; }
.round-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; }
.index-nav { display: grid; justify-items: end; gap: 8px; padding-bottom: 7px; }
.markers { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.marker { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.marker::before { position: absolute; top: 50%; left: 50%; width: 15px; height: 1px; background: rgba(255, 255, 255, .35); content: ""; transform: translate(-50%, -50%); transition: width 260ms var(--ease-out), background-color 220ms ease; }
.marker:hover::before { background: #fff; }
.marker[aria-current="true"]::before { width: 24px; height: 2px; background: var(--purple); }
.card-shelf .microcopy { margin: 0; color: var(--text-3); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; text-align: right; }
@media (max-width: 880px) {
  .card-shelf.is-shelf .browse-ui { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; }
  .selection { grid-column: 1 / -1; }
  .browse-actions { justify-content: flex-start; }
  .card-shelf .microcopy { display: none; }
  .card-shelf.is-shelf { --controls-h: 150px; }
}

/* ---------- Guide pages ---------- */
.guide-column { max-width: 780px; }
.guide-hero h1 { max-width: none; font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.guide-meta { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.guide-meta dt { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.guide-meta dd { margin: 2px 0 0; font-weight: 600; }
.guide-body { display: grid; gap: 18px; }
.guide-section { padding: 26px 28px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .06); }
.guide-section .no { display: block; font-family: var(--mono); font-size: 13px; color: var(--purple); margin-bottom: 10px; }
.guide-section h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: 10px; }
.guide-section p { color: var(--text-2); font-size: 1.05rem; line-height: 1.7; }
.guide-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; }
.guide-tags li { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--purple-line); background: var(--purple-light); color: var(--purple); font-size: 13.5px; font-weight: 600; }
.other-service small + strong { margin-top: 2px; }
/* ---------- Resources ---------- */
.article { display: flex; flex-direction: column; gap: 10px; }
.article .meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); font-weight: 600; }
.article .by { font-size: 13px; color: var(--text-3); margin-top: auto; padding-top: 8px; }
.glossary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.glossary div { padding: 18px 0; border-top: 1px solid var(--line); }
.glossary dt { font-weight: 800; margin-bottom: 4px; }
.glossary dd { color: var(--text-2); font-size: 15px; }
@media (max-width: 680px) { .glossary { grid-template-columns: 1fr; } }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 700; font-size: 1.05rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { transition: transform .2s; color: var(--text-3); }
.faq details[open] summary .i { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--text-2); max-width: 70ch; }

/* ---------- About metrics ---------- */
.facts { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px 24px; }
.facts-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.facts-head .status { margin: 0; text-transform: none; letter-spacing: 0; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.facts dt { color: var(--text-2); }
.facts dd { font-weight: 700; text-align: right; }

.principles { counter-reset: p; }
.principles .card .no { font-family: var(--mono); font-size: 13px; color: var(--purple); display: block; margin-bottom: 18px; }

/* ---------- CTA band ---------- */
.cta-band { background: rgba(76, 29, 149, .55); border: 1px solid rgba(210, 180, 250, .35); color: #fff; text-shadow: 0 1px 10px rgba(8, 6, 14, .6); border-radius: 16px; padding: 48px; display: flex; justify-content: space-between; align-items: center; gap: 24px 48px; flex-wrap: wrap; }
.cta-band h2 { max-width: 22ch; }
.cta-band p { color: var(--text-2); margin-top: 10px; max-width: 52ch; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-band .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .4); }
.cta-band .btn-outline:hover { border-color: #fff; }
@media (max-width: 560px) { .cta-band { padding: 32px 24px; } }

/* ---------- Footer ---------- */
/* Light footer so it clearly separates from the charcoal page */
/* Darker, more solid glass than the sections so the footer clearly stands apart */
.site-footer { background: rgba(14, 9, 26, .94); border-top: 3px solid var(--purple-strong); color: var(--text-2); padding: 64px 0 28px; margin-top: 56px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--purple); }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; padding: 40px; border-radius: 16px; background: #2e1065; color: #fff; }
.footer-top .eyebrow { color: #d8b4fe; }
.footer-top h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); max-width: 24ch; }
.footer-top .muted { color: #e2d6f7; margin-top: 10px; }
.subscribe label { display: block; color: #fff; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.subscribe-row { display: flex; gap: 8px; }
.subscribe input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; }
.subscribe input::placeholder { color: #cbbbe8; }
.subscribe input:focus { outline: 2px solid #fff; outline-offset: 0; border-color: transparent; }
.fine { font-size: 13px; margin-top: 10px; color: #d6c8f0; }
.fine a { text-decoration: underline !important; text-underline-offset: 3px; }
.footer-top .fine a:hover { color: #fff; }
.footer-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding: 52px 0 44px; }
.footer-brand .logo { color: var(--text); margin-bottom: 14px; }
.footer-brand p { font-size: 14.5px; max-width: 30ch; }
.contact { margin-top: 18px; display: grid; gap: 8px; font-size: 14px; }
.contact li { display: flex; align-items: center; gap: 10px; }
.contact .i { width: 16px; height: 16px; color: var(--purple); }
.crm-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--text); }
.crm-link:hover { border-color: var(--purple); }
.crm-link span { display: flex; flex-direction: column; line-height: 1.3; }
.crm-link strong { font-size: 14px; color: var(--text); }
.crm-link small { font-size: 12.5px; color: var(--text-3); }
.crm-link .i { width: 18px; height: 18px; color: var(--purple); }
.crm-link .i:last-child { width: 15px; height: 15px; color: var(--text-3); }
.footer-cols nav { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.footer-cols h3 { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin-bottom: 4px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--line-2); font-size: 13px; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 18px; }
@media (max-width: 1000px) { .footer-cols { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr; padding: 28px 22px; } }
@media (max-width: 480px) { .footer-cols { grid-template-columns: 1fr; } .subscribe-row { flex-direction: column; } }

/* ---------- Search palette ---------- */
.palette { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.palette-backdrop { position: absolute; inset: 0; background: rgba(17, 17, 19, .45); }
.palette-box { position: relative; width: 100%; max-width: 560px; background: var(--solid); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .4); overflow: hidden; }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--text-3); }
.palette-input input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; color: var(--text); }
.palette-list { max-height: 52vh; overflow: auto; padding: 6px; }
.palette-group { padding: 10px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.palette-item { padding: 9px 10px; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; }
.palette-item[aria-selected="true"] { background: var(--purple-light); color: var(--purple); }
.palette-empty { padding: 20px; text-align: center; color: var(--text-3); }

/* ---------- Motion (kept small on purpose) ---------- */
.fade { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.fade.in { opacity: 1; transform: none; }
@keyframes fadeIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}