/* Scipio — product-led visual system */
:root {
  --paper: #f5f3ed;
  --ink: #171817;
  --muted: #686b66;
  --cream: #fff4ec;
  --cream-ink: #fff6ef;
  --blue: #3458e8;
  --blue-dark: #2444c6;
  --night: #0d0e0e;
  --line: rgba(23, 24, 23, .14);
  --white: #fffdf8;
  --lime: #d9ff8a;
  --warn: #a5420f;
  --radius: 24px;
  --gutter: max(5.5vw, calc((100vw - 1440px) / 2 + 5.5vw));
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Manrope, ui-sans-serif, -apple-system, Arial, sans-serif; line-height: 1.6; }
button, textarea, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
button:focus-visible, a:focus-visible, summary:focus-visible, textarea:focus-visible, input:focus-visible { outline: 3px solid #477ef5; outline-offset: 3px; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; background: var(--ink); color: white; padding: 12px 16px; }
.skip-link:focus { top: 16px; }
.sr-only, .hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- header ---------- */
.site-header { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); background: var(--blue); color: #fff8f0; border-bottom: 1px solid rgba(255,255,255,.18); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 25px; letter-spacing: -.055em; }
.brand-mark { width: 28px; height: 31px; display: flex; gap: 3px; align-items: center; transform: skewY(-10deg); color: var(--cream); }
.brand-mark i { display: block; width: 6px; height: 25px; background: currentColor; border-radius: 99px; opacity: .92; }
.brand-mark i:nth-child(2) { height: 31px; }
.brand-mark i:nth-child(3) { height: 20px; }
nav[aria-label="Primary navigation"] { display: flex; align-items: center; gap: 28px; font-size: 13px; font-weight: 600; }
nav[aria-label="Primary navigation"] a:not(.nav-cta) { text-decoration: none; }
nav[aria-label="Primary navigation"] a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
.nav-cta { display: inline-flex; align-items: center; border: 0; border-radius: 999px; background: #fff1e8; color: var(--blue); padding: 13px 20px; cursor: pointer; text-decoration: none; font-weight: 700; }
.nav-cta span { padding-left: 6px; }

/* ---------- off-canvas menu ---------- */
.menu-toggle { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,248,240,.45); border-radius: 999px; background: transparent; color: inherit; padding: 11px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.menu-toggle:hover { border-color: #fff8f0; }
.menu-icon { display: grid; gap: 5px; width: 18px; }
.menu-icon i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.menu-icon i:last-child { width: 12px; }
.drawer { position: fixed; inset: 0 0 0 auto; width: min(440px, 100vw); height: 100dvh; max-width: none; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--blue); color: #fff8f0; overflow: hidden;
  transition: transform .45s var(--easeOutQuart, cubic-bezier(.25,1,.5,1)), overlay .45s allow-discrete, display .45s allow-discrete; transform: translateX(100%); }
.drawer[open] { display: flex; flex-direction: column; transform: none; }
@starting-style { .drawer[open] { transform: translateX(100%); } }
.drawer::backdrop { background: rgba(13,14,14,0); transition: background .45s, overlay .45s allow-discrete, display .45s allow-discrete; }
.drawer[open]::backdrop { background: rgba(13,14,14,.55); }
@starting-style { .drawer[open]::backdrop { background: rgba(13,14,14,0); } }
html:has(.drawer[open]) { overflow: hidden; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: 88px; padding: 0 28px; border-bottom: 1px solid rgba(255,255,255,.18); flex: none; }
.drawer-close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,248,240,.45); background: transparent; color: inherit; cursor: pointer; position: relative; }
.drawer-close span::before, .drawer-close span::after { content: ""; position: absolute; left: 13px; right: 13px; top: 21px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.drawer-close span::after { transform: rotate(-45deg); }
.drawer-close:hover { border-color: #fff8f0; }
.drawer-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 28px 24px; }
.menu-group { border-bottom: 1px solid rgba(255,255,255,.18); }
.menu-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 20px 0; font-size: 24px; font-weight: 800; letter-spacing: -.04em; cursor: pointer; }
.menu-group summary::-webkit-details-marker { display: none; }
.menu-chev { width: 14px; height: 14px; position: relative; flex: none; }
.menu-chev::before, .menu-chev::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--easeOutQuart, ease); }
.menu-chev::after { transform: rotate(90deg); }
.menu-group[open] .menu-chev::after { transform: rotate(0); }
.menu-panel { padding: 0 0 18px; }
.menu-sub { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(255,248,241,.6); margin: 14px 0 4px; }
.menu-list, .drawer-links { list-style: none; padding: 0; margin: 0; }
.menu-list a { display: block; padding: 7px 0; font-size: 15px; font-weight: 600; text-decoration: none; color: rgba(255,248,241,.88); }
.menu-list a:hover, .drawer-links a:hover { color: var(--lime); }
.drawer a[aria-current] { color: var(--lime); }
.drawer-links { padding-top: 14px; }
.drawer-links a { display: block; padding: 10px 0; font-size: 18px; font-weight: 700; text-decoration: none; }
.drawer-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 28px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.18); }
.drawer-foot .button { background: #fff1e8; color: var(--blue); }
.drawer-foot a[href^="mailto"] { font: 500 12px var(--mono); color: rgba(255,248,241,.8); }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer::backdrop, .menu-chev::before, .menu-chev::after { transition: none; } }

/* ---------- shared type ---------- */
.eyebrow, .section-number { font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.section-number { color: var(--muted); }
.status-dot { display: inline-block; width: 8px; height: 8px; background: #b9f176; border-radius: 50%; margin-right: 8px; box-shadow: 0 0 0 5px rgba(185,241,118,.14); }
.button { border: 0; border-radius: 999px; padding: 17px 22px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 24px; text-decoration: none; transition: transform var(--duration-hover) var(--easeOutQuart), box-shadow var(--duration-hover) var(--easeOutQuart); }
/* Hover fill for buttonRollover. Without a default it falls back to currentColor and hides the label. */
.button, .nav-cta { --fill: var(--lime); }
.button-primary { background: var(--cream); color: var(--blue); }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(22,23,19,.12); }
.button-dark { background: var(--ink); color: white; font-size: 16px; }
.button-dark[disabled] { opacity: .5; cursor: progress; }
.text-link { text-underline-offset: 6px; font-size: 14px; font-weight: 700; }
.display-xl { font-size: clamp(48px, 6.4vw, 96px); line-height: .99; letter-spacing: -.065em; margin: 0 0 28px; max-width: 980px; }
.display-lg, .display-md { line-height: 1; letter-spacing: -.06em; margin: 0 0 24px; }
.display-lg { font-size: clamp(40px, 5vw, 78px); }
.display-md { font-size: clamp(32px, 3.6vw, 52px); }
.h3, h3 { font-size: 22px; letter-spacing: -.04em; line-height: 1.15; margin: 0 0 10px; }
.lede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; max-width: 720px; }
.small { font-size: 13px; }
.warn { color: var(--warn); }
.opt { font-weight: 400; color: var(--muted); }

/* ---------- homepage hero ---------- */
.hero { min-height: 760px; padding: 86px var(--gutter) 76px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(390px, .75fr); gap: 7vw; align-items: center; background: var(--blue); color: var(--cream-ink); }
.hero h1 { font-size: clamp(56px, 6.4vw, 96px); line-height: .99; letter-spacing: -.065em; margin: 28px 0 34px; max-width: 850px; }
.hero h1 em { font-style: normal; color: var(--cream-ink); }
.hero .eyebrow { color: rgba(255,248,241,.88); }
.hero-lede { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.5; max-width: 700px; color: rgba(255,248,241,.82); }
.hero-actions { display: flex; align-items: center; gap: 28px; margin: 38px 0 58px; }
.hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; padding: 0; margin: 0; max-width: 690px; border-top: 1px solid rgba(255,255,255,.26); }
.hero-proof li { padding: 19px 18px 0 0; border-right: 1px solid rgba(255,255,255,.26); display: flex; flex-direction: column; gap: 4px; }
.hero-proof li + li { padding-left: 18px; }
.hero-proof li:last-child { border: 0; }
.hero-proof strong { font-size: 17px; }
.hero-proof span { font-size: 11px; color: rgba(255,255,255,.64); }

/* ---------- agent card ---------- */
.agent-card { background: #f4f4f1; background-clip: padding-box; border: 9px solid var(--night); color: var(--ink); border-radius: 46px; min-height: 610px; box-shadow: 0 22px 60px rgba(7,17,70,.25); overflow: hidden; display: flex; flex-direction: column; position: relative; scroll-margin: 120px; }
.agent-card.attention { animation: nudge .5s ease; }
@keyframes nudge { 50% { transform: rotate(-1deg) scale(1.015); } }
.agent-bar { min-height: 78px; padding: 19px 18px; background: #fff; border-bottom: 1px solid #e9e9e5; border-radius: 36px 36px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agent-bar > div { display: flex; align-items: center; gap: 12px; }
.agent-avatar { width: 43px; height: 43px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: white; font-weight: 800; flex: none; }
.agent-bar strong, .agent-bar small { display: block; line-height: 1.3; }
.agent-bar strong { font-size: 14px; }
.agent-bar small { font-size: 10px; color: #767a74; margin-top: 2px; }
.agent-bar small i { display: inline-block; width: 6px; height: 6px; background: #68d040; border-radius: 50%; margin-right: 5px; }
.agent-meta { font: 400 10px var(--mono); color: #767a74; white-space: nowrap; }
.chat { background: #f4f4f1; padding: 32px 22px 12px; flex: 1; min-height: 300px; max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
.message { max-width: 87%; font-size: 14px; line-height: 1.48; animation: messageIn .24s ease-out; }
@keyframes messageIn { from { opacity: 0; transform: translateY(8px); } }
.message > span { display: block; border-radius: 16px; padding: 13px 15px; white-space: pre-line; overflow-wrap: anywhere; }
.message small { display: block; font-size: 9px; color: #83877e; margin-top: 4px; }
.agent-message { align-self: flex-start; }
.agent-message > span { background: white; color: var(--ink); border: 1px solid #e1e1dd; border-bottom-left-radius: 3px; }
.user-message { align-self: flex-end; text-align: right; }
.user-message > span { background: var(--blue); color: white; border-bottom-right-radius: 3px; text-align: left; }
.typing > span { display: flex; gap: 4px; padding: 15px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #9a9d96; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .25; } }
.quick-replies { background: #f4f4f1; padding: 8px 22px 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.quick-replies:empty { padding: 0; }
.quick-replies button { border: 1px solid #d2d3cf; background: white; color: var(--ink); min-height: 44px; padding: 10px 16px; border-radius: 999px; font-size: 14px; line-height: 1.3; cursor: pointer; }
.quick-replies button:hover { background: var(--blue); border-color: var(--blue); color: white; }
.agent-input { margin: 0; padding: 8px 18px 4px; background: #f4f4f1; display: flex; align-items: center; }
.agent-input[hidden] { display: none; }
.agent-input textarea { width: 100%; resize: none; border: 0; outline: 0; color: var(--ink); font-size: 14px; line-height: 1.4; background: white; border-radius: 15px 0 0 15px; padding: 10px 14px; min-height: 52px; }
.agent-input button { flex: 0 0 auto; border: 0; background: var(--blue); color: white; width: 52px; height: 52px; border-radius: 0 15px 15px 0; cursor: pointer; font-size: 18px; }
.agent-note { background: #f4f4f1; color: #6c6f68; text-align: center; font-size: 12px; margin: 0; padding: 6px 18px 18px; border-radius: 0 0 36px 36px; }
.agent-note a { color: var(--blue); }
.summary-card { background: var(--white); color: var(--ink); padding: 17px; border-radius: 15px; font-size: 12px; line-height: 1.55; border: 1px solid #e1e1dd; animation: messageIn .24s ease-out; }
.summary-card strong { font-size: 15px; display: block; margin-bottom: 8px; }
.summary-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; }
.summary-card dt { color: var(--muted); }
.summary-card dd { margin: 0; overflow-wrap: anywhere; }
.summary-rec { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed #d2d3cf; font-weight: 700; }
.summary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.summary-actions button { border: 0; min-height: 44px; padding: 11px 18px; border-radius: 999px; background: var(--blue); color: white; font-size: 14px; font-weight: 700; cursor: pointer; }
.summary-actions button.ghost { background: transparent; color: var(--ink); border: 1px solid #d2d3cf; }
.summary-actions button[disabled] { opacity: .6; cursor: progress; }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; background: var(--cream); color: var(--blue); padding: 15px 0; white-space: nowrap; font: 500 11px var(--mono); letter-spacing: .08em; }
.ticker div { display: inline-block; animation: ticker 32s linear infinite; }
.ticker b { margin: 0 24px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- homepage sections ---------- */
/* Every container uses the header's --gutter, which already centres a 1440px column on wide screens. */
.section { padding: 110px var(--gutter); }
.section-heading { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: end; gap: 4vw; margin-bottom: 56px; }
.section-heading h2, .fit-panel h2, .final-cta h2 { font-size: clamp(42px, 5vw, 78px); line-height: 1; letter-spacing: -.06em; margin: 0; }
.section-heading > p:last-child { color: var(--muted); line-height: 1.65; font-size: 14px; }
.section-heading .section-number { align-self: start; }
.section-heading.compact { grid-template-columns: 1fr 3fr; }

.jobs { padding-top: 130px; }
.job-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.job-card { min-height: 500px; padding: 28px; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); transition: transform var(--duration-hover) var(--easeOutQuart), box-shadow var(--duration-hover) var(--easeOutQuart); }
.job-card:hover { transform: translateY(-5px); box-shadow: 0 22px 55px rgba(24,27,25,.09); }
.job-icon { font-size: 36px; color: var(--blue); line-height: 1; }
.tag { font: 500 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; margin: 24px 0 40px; }
.job-card h3 { font-size: 27px; margin: 0 0 12px; }
.job-card h3 a { text-decoration: none; }
.job-card h3 a:hover { text-decoration: underline; text-underline-offset: 5px; }
.job-card > p:not(.tag) { color: #55574f; font-size: 13px; line-height: 1.6; margin: 0; }
.job-card ul { list-style: none; padding: 0; margin: 22px 0; font-size: 11px; line-height: 2; }
.job-card li::before { content: "— "; }
.job-card button { margin-top: auto; border: 0; border-top: 1px solid var(--line); padding: 16px 0 0; background: transparent; text-align: left; cursor: pointer; font-size: 12px; font-weight: 700; display: flex; justify-content: space-between; width: 100%; }
.accent-card, .accent-card:hover { background: var(--blue); color: white; }
.accent-card > p:not(.tag) { color: rgba(255,255,255,.75); }
.accent-card button { border-color: rgba(255,255,255,.28); }
.accent-card .job-icon { color: white; }

.fit-section { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; padding-top: 0; padding-bottom: 0; }
.fit-panel { padding: 70px; min-height: 520px; border-radius: 28px; }
.yes-panel { background: var(--blue); color: white; }
.yes-panel .section-number, .yes-panel li span { color: var(--lime); }
.yes-panel ul { list-style: none; padding: 0; margin: 48px 0 0; border-top: 1px solid rgba(255,255,255,.16); }
.yes-panel li { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 13px; }
.yes-panel li span { margin-right: 10px; }
.no-panel { background: #e8e6df; display: flex; flex-direction: column; justify-content: space-between; }
.no-panel h2 { font-size: clamp(34px, 4vw, 58px); }
.no-panel > p:last-child { max-width: 430px; font-size: 13px; line-height: 1.7; color: var(--muted); }

.process-list { list-style: none; padding: 0; margin: 0 0 0 25%; border-top: 1px solid var(--line); }
.process-list li { display: grid; grid-template-columns: 70px 1fr auto; gap: 30px; padding: 35px 0; border-bottom: 1px solid var(--line); align-items: start; }
.process-list > li > span { font: 500 11px var(--mono); color: var(--blue); }
.process-list h3 { margin: 0 0 8px; font-size: 25px; }
.process-list p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 650px; }
.process-list small { font: 400 10px var(--mono); color: var(--muted); }

.promise { max-width: none; background: var(--blue); color: #fff7ef; padding-left: var(--gutter); padding-right: var(--gutter); text-align: center; }
.promise .section-number { color: rgba(255,255,255,.7); }
.promise blockquote { font-size: clamp(38px, 6.5vw, 95px); line-height: .98; letter-spacing: -.07em; max-width: 1200px; margin: 46px auto 76px; font-weight: 700; }
.promise-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.28); border-bottom: 1px solid rgba(255,255,255,.28); }
.promise-row span { padding: 17px; border-right: 1px solid rgba(255,255,255,.28); font: 500 10px var(--mono); text-transform: uppercase; }
.promise-row span:last-child { border: 0; }

.faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: 7vw; }
.faq .section-heading { display: block; }
.faq .section-heading h2 { margin-top: 34px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; font-weight: 700; padding: 24px 0; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { font-size: 22px; font-weight: 400; transition: transform var(--duration-micro) var(--easeInOutQuart); }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { color: var(--muted); line-height: 1.7; margin: -4px 50px 25px 0; font-size: 14px; }

.final-cta { max-width: none; background: #131414; color: #fff8f0; text-align: center; padding-top: 130px; padding-bottom: 130px; }
.final-cta h2 { font-size: clamp(55px, 8vw, 120px); margin: 32px auto 46px; }
.final-cta .button-dark { background: var(--cream); color: var(--blue); }
.final-cta > p:last-child { font-size: 12px; margin-top: 24px; }

/* ---------- inner pages ---------- */
.wrap { width: 100%; padding: 0 var(--gutter); }
.narrow { max-width: calc(860px + 2 * var(--gutter)); margin-left: 0; }
.page-hero { background: var(--blue); color: var(--cream-ink); padding: 96px 0 96px; }
.page-hero a:not(.button) { color: var(--cream-ink); }
.page-hero .eyebrow { color: rgba(255,248,241,.8); margin-bottom: 20px; }
.page-hero .lede { color: rgba(255,248,241,.82); }
.page-hero .hero-actions { margin: 32px 0 0; }
.crumbs-bar { border-bottom: 1px solid var(--line); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 16px 0; margin: 0; font: 400 11px var(--mono); letter-spacing: .04em; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.crumbs a { color: var(--ink); }
.crumbs a:hover { color: var(--blue); }

.band { padding: 100px 0; }
.band-stone { background: #e8e6df; }
.band-dark { background: #131414; color: #fff8f0; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.panel { background: #fff; border-radius: var(--radius); padding: 36px; }
.band-stone .panel { background: var(--white); }
.prose h2 { font-size: 26px; letter-spacing: -.04em; margin-top: 1.6em; }
.prose p, .two-col p { max-width: 680px; }
.prose { font-size: 17px; line-height: 1.7; }
.prose ul, .prose ol { max-width: 680px; padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin: 0 0 .5em; }
.prose code { font: 500 .88em var(--mono); background: #e8e6df; padding: .12em .36em; border-radius: 6px; word-break: break-word; }
.prose a { color: var(--blue); }
.prose .note { max-width: 680px; padding: 18px 22px; border-left: 3px solid var(--blue); background: #fff; border-radius: 0 12px 12px 0; font-size: 15px; }
.article-meta { font: 400 11px var(--mono); letter-spacing: .04em; color: rgba(255,248,241,.7); margin: 28px 0 0; }
.post-cards .card-meta { margin-bottom: 14px; }

/* ---------- case studies ---------- */
.hero-shot img { border-radius: 18px; box-shadow: 0 30px 70px rgba(7,17,70,.35); }
.case-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 56px 0 0; border-top: 1px solid rgba(255,248,241,.25); }
.case-facts div { padding: 18px 20px 0 0; }
.case-facts dt { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(255,248,241,.7); margin-bottom: 6px; }
.case-facts dd { margin: 0; font-size: 15px; font-weight: 600; }
.case-prose figure { margin: 40px 0; }
.case-prose figcaption { font-size: 14px; color: var(--muted); margin-top: 12px; max-width: 680px; }
.compare { width: min(1240px, calc(100vw - 2 * var(--gutter))); }
.compare-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-mobile { width: auto; max-width: 620px; }
.compare-pair > div { position: relative; }
.compare-pair img, .shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.compare-tag { position: absolute; bottom: 12px; left: 12px; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 6px 10px; border-radius: 99px; background: var(--night, #0d0e0e); color: #fff8f0; }
.compare-after { background: var(--blue); }
.shot { width: min(1240px, calc(100vw - 2 * var(--gutter))); }
.shot-mobile { width: auto; max-width: 320px; }
.case-cards .card-art { background: #e8e6df; }
.case-cards .card-art img { object-position: top left; }
.case-cards .card-meta { margin-bottom: 14px; }
@media (max-width: 1000px) {
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .compare-pair { grid-template-columns: 1fr; }
  .compare-mobile .compare-pair { grid-template-columns: 1fr 1fr; }
}
.post-cards .card h3 { font-size: 23px; line-height: 1.15; }

.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card a { display: flex; flex-direction: column; height: 100%; min-height: 260px; padding: 28px; background: #fff; border-radius: var(--radius); text-decoration: none; transition: transform var(--duration-hover) var(--easeOutQuart), box-shadow var(--duration-hover) var(--easeOutQuart); }
.card a:hover { transform: translateY(-5px); box-shadow: 0 22px 55px rgba(24,27,25,.09); }
.card h3 { font-size: 27px; }
.card p { color: var(--muted); font-size: 14px; flex: 1; }
.card-meta { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--blue); }

.ticks, .crosses, .link-list { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li, .crosses li { padding: 13px 0 13px 28px; border-bottom: 1px solid var(--line); position: relative; font-size: 15px; }
.ticks li::before, .crosses li::before { position: absolute; left: 0; top: 13px; font-weight: 700; }
.ticks li::before { content: "✓"; color: var(--blue); }
.crosses li::before { content: "—"; color: var(--muted); }
.link-list li { border-bottom: 1px solid var(--line); }
.link-list a { display: block; padding: 13px 0; font-weight: 700; text-decoration: none; }
.link-list a:hover { color: var(--blue); }
.inline-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.inline-links a { display: inline-block; padding: 10px 16px; border-radius: 999px; background: var(--white); text-decoration: none; font-size: 13px; font-weight: 700; }
.inline-links a:hover { background: var(--blue); color: white; }
.numbered li { margin-bottom: .6em; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps li { padding: 28px 0 0; border-top: 1px solid var(--ink); }
.step-n { display: block; font: 500 11px var(--mono); color: var(--blue); margin-bottom: 20px; }
.steps p { color: var(--muted); font-size: 14px; }

.facts { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 16px; }
.facts > div { padding: 28px; border-radius: var(--radius); background: #fff; min-width: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font: 500 11px var(--mono); padding: 5px 10px; border-radius: 999px; background: var(--paper); }

.table-wrap { overflow-x: auto; border-radius: var(--radius); background: #fff; }
.price-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.price-table th, .price-table td { text-align: left; padding: 20px 24px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
.price-table thead th { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.price-table th a { font-weight: 700; }
.price-table tr:last-child > * { border-bottom: 0; }

.hero-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 5vw; align-items: center; }
.hero-art img { width: 100%; height: auto; }
.art-cards .card a { padding: 0 0 28px; overflow: hidden; }
.art-cards .card a > :not(.card-art) { margin-left: 28px; margin-right: 28px; }
.card-art { display: block; background: var(--blue); margin-bottom: 24px; aspect-ratio: 4 / 3; }
.card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-hover) var(--easeOutQuart); }
.card a:hover .card-art img { transform: scale(1.03); }
.band-stone .card a { background: var(--white); }
.group-head { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 4vw; align-items: end; margin-bottom: 40px; }
.group-head .section-number { align-self: start; }
.group-head h2 { margin: 0; }
.group-head > p:last-child { color: var(--muted); font-size: 14px; margin: 0; }
.job-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.job-list li { padding: 24px 0 0; border-top: 1px solid var(--ink); }
.job-list h3 { font-size: 19px; }
.job-list p { color: var(--muted); font-size: 14px; margin: 0; }
.panel .job-list { grid-template-columns: 1fr; gap: 0; }
.panel .job-list li { padding: 14px 0; border-top: 0; border-bottom: 1px solid var(--line); }
.section-lede { color: var(--muted); max-width: 640px; margin: -8px 0 32px; }
.facts-2 { grid-template-columns: 1fr 1fr; }
.facts-2 .inline-links a { background: var(--paper); }
/* Link pills and platform tags side by side: same size and height, different roles (link vs label). */
.facts-2 .inline-links a, .facts-2 .tags span { font-size: 13px; line-height: 1.3; padding: 10px 16px; }
.facts-2 .tags span { font-family: inherit; font-weight: 500; letter-spacing: 0; }
.facts-2 .tags { gap: 8px; margin: 0; }
.h3.spaced { margin-top: 32px; }
.reading-list { max-width: 760px; }
.reading-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.reading-list small { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.spaced-lg { margin-top: 96px; }

.work-band { background: #fff; padding: 48px 0; }
/* Scrollable row by default; the marquee takes over overflow and movement when it runs. */
.work-marquee { overflow-x: auto; scrollbar-width: none; }
.work-marquee::-webkit-scrollbar { display: none; }
/* Fixed tile width, so the marquee can measure one loop before the images arrive. The trailing
   padding equals the gap, so the seam between copies is the same as the space between tiles. */
.work-row { list-style: none; margin: 0; padding: 0 8px 0 0; display: flex; gap: 8px; flex-shrink: 0; }
.work-marquee:not([style]) .work-row { padding-left: var(--gutter); }
.work-row li { flex: 0 0 auto; width: clamp(220px, 22vw, 340px); }
.work-row img { width: 100%; height: auto; border-radius: 18px; display: block; }

/* ---------- landing page ---------- */
.lp-header nav { display: flex; align-items: center; gap: 28px; }
.lp-header-link { font-weight: 700; text-decoration: none; font-size: 14px; }
.lp-badge { display: inline-flex; align-items: center; gap: 12px; background: #fff; color: var(--ink); padding: 10px 18px 10px 12px; border-radius: 10px; font-size: 14px; margin: 0 0 4px; }
.lp-badge-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--blue); }
.lp-badge-mark .brand-mark { width: 16px; height: 18px; gap: 2px; color: #fff; }
.lp-badge-mark .brand-mark i { width: 3.5px; height: 14px; }
.lp-badge-mark .brand-mark i:nth-child(2) { height: 18px; }
.lp-badge-mark .brand-mark i:nth-child(3) { height: 11px; }
.lp-actions { gap: 14px; }
.lp-btn-solid { background: #fff; color: var(--blue); border-radius: 12px; --fill: var(--lime); }
.lp-btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.85); border-radius: 12px; --fill: rgba(255,255,255,.14); }
.lp-subline { margin: 18px 0 0; font-size: 13px; color: rgba(255,248,241,.72); }
.lp-form { background: #fff; color: var(--ink); border-radius: 20px; padding: 26px 26px 22px; box-shadow: 0 30px 70px rgba(7,17,70,.3); gap: 13px; scroll-margin: 110px; max-width: 420px; width: 100%; justify-self: end; }
.lp-profile { display: flex; gap: 18px; align-items: center; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.lp-avatar { width: 76px; height: 76px; border-radius: 50%; flex: none; object-fit: cover; box-shadow: 0 0 0 6px #fff, 0 0 0 12px rgba(52,88,232,.12); }
.lp-avatar-mark { display: grid; place-items: center; background: var(--blue); }
.lp-avatar-mark .brand-mark { color: #fff; }
.lp-profile p { margin: 0; line-height: 1.35; }
.lp-profile-name { font-size: 22px; font-weight: 700; letter-spacing: -.04em; }
.lp-profile-role { color: var(--blue); font-weight: 700; font-size: 14px; }
.lp-profile-meta { color: var(--muted); font-size: 12px; }
.lp-chip { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 700; background: #fff6d6; color: #6b4e00; padding: 3px 9px; border-radius: 999px; }
.lp-form label { font-size: 13px; gap: 6px; }
.lp-form .req { color: var(--blue); }
.lp-form input, .lp-form textarea { padding: 11px 13px; font-size: 15px; background: #fff; border-radius: 8px; }
.lp-submit { background: var(--blue); color: #fff; justify-content: center; gap: 12px; width: 100%; border-radius: 10px; margin-top: 4px; --fill: var(--ink); }
.lp-form-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.lp-hero h1 { font-size: clamp(48px, 5.4vw, 84px); }
.lp-ticks { list-style: none; padding: 0; margin: -6px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; max-width: 700px; font-size: 14px; color: rgba(255,248,241,.88); }
.lp-ticks li::before { content: "✓"; color: var(--lime); font-weight: 700; margin-right: 10px; }
.lp-hero .hero-actions { margin: 36px 0 0; }
.lp-hero .text-link { color: var(--cream-ink); font-weight: 600; }
.lp-crms { background: var(--cream); color: var(--blue); padding: 28px 0; }
.lp-crms-inner { display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; }
.lp-crms .section-number { color: var(--blue); margin: 0; }
.lp-crms ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.lp-crms a { display: inline-block; padding: 9px 16px; border-radius: 999px; background: #fff; font-weight: 700; font-size: 14px; text-decoration: none; letter-spacing: -.01em; transition: background var(--duration-hover) var(--easeOutQuart), color var(--duration-hover) var(--easeOutQuart); }
.lp-crms a:hover { background: var(--blue); color: #fff; }
.lp-note { margin: 0; font-size: 11px; color: rgba(52,88,232,.75); }
.lp-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-grid li { background: #fff; border-radius: var(--radius); padding: 28px; }
.lp-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--blue); color: #fff; margin-bottom: 22px; }
.lp-grid h3 { font-size: 20px; }
.lp-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.lp-cta-row { margin-top: 40px; }
.lp-why { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 6vw; align-items: center; }
.lp-why-art img { width: 100%; height: auto; border-radius: var(--radius); }
.lp-lead { font-size: 19px; line-height: 1.55; max-width: 620px; }
.lp-why-list { margin: 32px 0 0; border-top: 1px solid var(--line); }
.lp-why-list div { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.lp-why-list dt { font-weight: 800; letter-spacing: -.02em; }
.lp-why-list dd { margin: 0; color: var(--muted); font-size: 14px; }
.lp-reviews { background: #fff; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review { margin: 0; padding: 28px; border-radius: var(--radius); background: var(--paper); display: flex; flex-direction: column; }
.stars { color: #f5b301; letter-spacing: 2px; font-size: 14px; }
.review blockquote { margin: 16px 0 24px; font-size: 16px; line-height: 1.55; flex: 1; }
.review figcaption { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.review figcaption > span:not(.avatar) { display: flex; flex-direction: column; }
.review figcaption small { color: var(--muted); }
.review-source { margin-left: auto; font: 500 10px var(--mono); text-transform: uppercase; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; }
.lp-local { display: grid; grid-template-columns: 1.2fr .8fr; gap: 6vw; align-items: end; }
.lp-local p:not(.section-number) { color: var(--muted); max-width: 620px; }
.lp-facts { margin: 0; display: grid; gap: 12px; }
.lp-facts div { background: #fff; border-radius: 18px; padding: 18px 22px; }
.lp-facts dt { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.lp-facts dd { margin: 4px 0 0; font-weight: 700; }
.lp-ticker { background: #131414; color: #fff8f0; border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; }
.lp-ticker-track { overflow-x: auto; scrollbar-width: none; }
.lp-ticker-track ul { list-style: none; margin: 0; padding: 0 40px 0 0; display: flex; gap: 40px; flex-shrink: 0; white-space: nowrap; font-size: 14px; }
.lp-ticker-track b { color: rgba(255,248,241,.6); font-weight: 600; margin-left: 6px; }
.lp-ticker 
.empty { text-align: center; padding: 56px 28px; border: 1.5px dashed var(--line); border-radius: var(--radius); }

.agent-band { background: #e8e6df; }
.agent-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 7vw; align-items: center; }
.agent-copy .section-number { margin-bottom: 24px; }
.agent-copy > p { color: var(--muted); max-width: 460px; }
.agent-layout .agent-card { max-width: 560px; width: 100%; justify-self: end; }

/* forms */
.contact-form { display: grid; gap: 16px; }
label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
input, textarea, select { font-weight: 400; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; width: 100%; }
input:focus, textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(52,88,232,.18); }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
label.check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--blue); }
.contact-form .button { justify-self: start; }
.form-status:empty { display: none; }

/* ---------- footer ---------- */
.site-footer { padding: 54px var(--gutter) 96px; font-size: 11px; line-height: 1.7; }
.footer-main { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: end; }
.footer-main p { margin: 0; }
.footer-meta { text-align: right; color: var(--muted); }
.site-footer .brand-mark { color: var(--blue); }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links a { text-decoration: none; color: var(--muted); font-size: 12px; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- floating agent ---------- */
.floating-agent { position: fixed; right: 22px; bottom: 22px; z-index: 50; display: flex; align-items: center; gap: 10px; min-width: 142px; padding: 8px 14px 8px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: #111212; color: white; box-shadow: 0 14px 36px rgba(0,0,0,.22); cursor: pointer; text-align: left; text-decoration: none; transition: transform var(--duration-micro) var(--easeOutQuart), opacity var(--duration-micro) var(--easeOutQuart); }
.floating-agent:hover { transform: translateY(-2px); }
.floating-agent.is-hidden { opacity: 0; pointer-events: none; transform: translateY(12px); }
.floating-agent-mark { width: 37px; height: 37px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); font-weight: 800; }
.floating-agent-copy { display: flex; flex-direction: column; line-height: 1.1; }
.floating-agent-copy strong { font-size: 11px; }
.floating-agent-copy small { margin-top: 4px; color: #aeb1aa; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.floating-agent-copy i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #9be35e; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero .agent-card, .agent-layout .agent-card { max-width: 580px; width: 100%; justify-self: center; }
  .section-heading { grid-template-columns: 1fr 2fr; }
  .section-heading > p:last-child { grid-column: 2; }
  .job-grid, .cards { grid-template-columns: repeat(2, 1fr); }
  .fit-section, .faq, .two-col, .agent-layout { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts > div:last-child { grid-column: 1 / -1; }
  .hero-split { grid-template-columns: minmax(0, 1fr); }
  .lp-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: 1fr 1fr; }
  .lp-why, .lp-local { grid-template-columns: minmax(0, 1fr); }
  .hero-art { max-width: 520px; }
  .group-head { grid-template-columns: 1fr 2fr; }
  .group-head > p:last-child { grid-column: 2; }
}

@media (max-width: 680px) {
  :root { --gutter: 16px; }
  .site-header { height: 72px; }
  nav[aria-label="Primary navigation"] a:not(.nav-cta) { display: none; }
  .nav-cta { padding: 10px 14px; }
  .menu-toggle { padding: 10px 12px; }
  .menu-label { display: none; }
  .drawer-head { height: 72px; padding: 0 var(--gutter); }
  .drawer-nav, .drawer-foot { padding-left: var(--gutter); padding-right: var(--gutter); }
  .brand { font-size: 22px; }
  .hero { padding-top: 54px; gap: 54px; }
  .hero h1 { font-size: clamp(44px, 13vw, 68px); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .hero-proof { grid-template-columns: 1fr; }
  .hero-proof li, .hero-proof li + li { padding: 13px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.26); }
  .agent-card { min-height: 580px; border-radius: 36px; border-width: 7px; }
  .agent-bar { border-radius: 29px 29px 0 0; padding: 14px; }
  .agent-note { border-radius: 0 0 29px 29px; }
  .chat { padding: 22px 14px 10px; }
  .quick-replies { padding: 8px 14px 14px; }
  /* Under 16px, iOS Safari zooms the page when the field is focused. */
  .agent-input textarea { font-size: 16px; }
  .agent-input { padding: 8px 12px 4px; }
  .section { padding: 80px 16px; }
  .section-heading, .section-heading.compact { grid-template-columns: 1fr; }
  .section-heading > p:last-child { grid-column: 1; }
  .job-grid, .cards, .steps, .facts { grid-template-columns: 1fr; gap: 12px; }
  .facts > div:last-child { grid-column: auto; }
  .facts-2 { grid-template-columns: 1fr; }
  .lp-ticks, .lp-grid, .review-grid { grid-template-columns: 1fr; }
  .lp-form { padding: 20px; max-width: none; }
  .lp-header-link { display: none; }
  .lp-form input, .lp-form textarea { font-size: 16px; }
  .lp-why-list div { grid-template-columns: 1fr; gap: 4px; }
  .group-head { grid-template-columns: 1fr; gap: 12px; }
  .group-head > p:last-child { grid-column: 1; }
  .hero-art { max-width: none; }
  .job-card { min-height: 0; }
  .tag { margin: 20px 0 24px; }
  .fit-section { padding: 0; gap: 0; }
  .fit-panel { padding: 55px 16px; min-height: 0; border-radius: 0; }
  .yes-panel ul { margin-top: 32px; }
  .no-panel h2 { margin-bottom: 32px; }
  .process-list { margin-left: 0; }
  .process-list li { grid-template-columns: 40px 1fr; gap: 14px; }
  .process-list small { grid-column: 2; }
  .promise { padding-left: 16px; padding-right: 16px; }
  .promise-row { grid-template-columns: repeat(2, 1fr); }
  .promise-row span:nth-child(2) { border-right: 0; }
  .promise-row span:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.28); }
  .faq-list details p { margin-right: 0; }
  .final-cta { padding: 96px 16px; }
  .final-cta h2 { font-size: clamp(42px, 12vw, 64px); }
  .band { padding: 72px 0; }
  .page-hero { padding: 64px 0 72px; }
  .panel { padding: 24px; }
  .footer-main, .footer-links { grid-template-columns: 1fr; gap: 20px; }
  .footer-meta { text-align: left; }
  .floating-agent { min-width: 0; padding: 7px; right: 14px; bottom: 14px; }
  .floating-agent-copy { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- motion (Atollon Motion, wired in src/motion/site.ts) ---------- */
/* Direction-aware fill colours for buttonRollover. One accent per surface. */
.button-primary, .nav-cta, .final-cta .button-dark { --fill: var(--lime); }
.button-dark { --fill: var(--blue); }
/* The marquee recipe takes over the ticker; the CSS keyframe stays as the no-JS fallback. */
.motion-ready .ticker div { animation: none; }