/* Hallmark · shape: Desk hero · genre: modern-minimal · theme: coral (General Sans, Geist Mono, cotton on felt; ink pressed in green for software, coral for the agency) · redesign: full
 * paper: oklch(97% 0.006 55) · accent: oklch(74% 0.125 30) · display: General Sans · body: General Sans · hero: Desk hero, stationery built in CSS · nav: wordmark, links, one letterpress card · footer: wordmark and three link columns · signature: the invoice, the reminder and the reply on the desk, then the word Paid pressed in
 * axes: light/grotesk-sans/chromatic-coral · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
@font-face { font-family: "General Sans"; font-weight: 400; font-display: swap; src: url(/fonts/generalsans-regular.woff) format("woff"); }
@font-face { font-family: "General Sans"; font-weight: 500; font-display: swap; src: url(/fonts/generalsans-medium.woff) format("woff"); }
@font-face { font-family: "General Sans"; font-weight: 600; font-display: swap; src: url(/fonts/generalsans-semibold.woff) format("woff"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-display: swap; src: url(/fonts/geistmono-regular.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-display: swap; src: url(/fonts/geistmono-medium.woff2) format("woff2"); }

body { color: var(--color-ink); }
.skip { position: absolute; left: var(--space-md); top: -80px; z-index: var(--z-modal); padding: var(--space-sm) var(--space-md); background: var(--color-board); color: var(--color-board-type); border-radius: var(--radius-stock); }
.skip:focus { top: var(--space-md); }
a { text-decoration-color: var(--color-rule-2); }
a:hover { text-decoration-color: var(--color-accent-2); }
.ic { width: 1.1em; height: 1.1em; flex: none; }
.num, .fig { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }

/* Surfaces */
.desk { background-color: var(--color-desk); background-image: radial-gradient(90% 120% at 0% 30%, var(--color-cotton), transparent 62%), var(--tex-desk); }
.stock { background-color: var(--color-cotton); background-image: linear-gradient(100deg, var(--color-cotton), transparent 45%), var(--tex-cotton); color: var(--color-print); border-radius: var(--radius-stock); box-shadow: var(--edge-stock), var(--cast-stock); }
.board { background: var(--color-board); color: var(--color-board-type); }

/* Controls: letterpress cards */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font: 500 var(--text-md) var(--font-body); text-decoration: none; cursor: pointer; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn--card { background-color: var(--color-cotton); background-image: var(--tex-cotton); color: var(--color-print); text-shadow: 0.5px 0.75px 0 var(--color-cotton); box-shadow: var(--edge-stock), var(--cast-stock); }
.btn--ink { background: var(--color-board); color: var(--color-board-type); text-shadow: 0 -0.75px 0 var(--color-ink); box-shadow: var(--cast-stock); }
html[data-theme="dark"] .btn--ink { background: var(--color-board-type); color: var(--color-board); text-shadow: none; }
.btn:hover { transform: translateY(-1px); }
.btn--card:hover { box-shadow: var(--edge-stock), var(--cast-stock-lift); }
.btn--ink:hover { box-shadow: var(--cast-stock-lift); }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn .ic { transition: transform var(--dur-short) var(--ease-out); }
.btn:hover .ic { transform: translateX(3px); }
.btn:disabled, .btn[aria-disabled="true"] { color: var(--color-muted); box-shadow: var(--edge-stock); cursor: not-allowed; }
.text-link { font-weight: 500; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--color-accent); }
.text-link:hover { text-decoration-thickness: 2px; }
input[type="email"], input[type="text"] { min-height: 48px; padding-inline: var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-cotton); color: var(--color-print); font: 400 var(--text-md) var(--font-body); min-width: 0; }
input:hover { border-color: var(--color-ink); }
input:disabled { background: var(--color-paper-2); color: var(--color-muted); border-color: var(--color-rule-2); cursor: not-allowed; }
input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Groove: a choice pressed into the stock */
.groove { display: inline-flex; padding: var(--space-2xs); gap: var(--space-3xs); border-radius: 12px; background-color: var(--color-paper-2); box-shadow: var(--press-groove); }
.groove button { min-height: 40px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-input); background: transparent; color: var(--color-muted); font: 500 var(--text-sm) var(--font-body); cursor: pointer; transition: color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.groove button:hover { color: var(--color-ink); }
.groove button[aria-pressed="true"] { background-color: var(--color-cotton); background-image: var(--tex-cotton); color: var(--color-print); box-shadow: var(--edge-stock), var(--cast-stock); }

/* The settled state, pressed into the stock */
.pressed { display: inline-block; font-family: var(--font-display); font-weight: 600; color: var(--color-paid); filter: url(#press); transform: rotate(-6deg); letter-spacing: -0.02em; line-height: 1; }

/* Header */
.topbar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); height: 72px; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.brand { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; }
.logo { --logo-color: var(--color-ink); }
.nav-inner .logo { height: 34px; }
.brand-word { padding-left: var(--space-sm); border-left: 1px solid var(--color-rule-2); font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: var(--space-lg); font-size: var(--text-sm); font-weight: 500; }
.nav-links a { text-decoration: none; padding-block: var(--space-xs); border-bottom: 1px solid transparent; transition: border-color var(--dur-micro) var(--ease-out); }
.nav-links a:hover { border-color: var(--color-muted); }
.nav-links a[aria-current="page"] { border-color: var(--color-accent); }
.nav-right { display: flex; align-items: center; gap: var(--space-md); }
.nav-login { font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.nav-login:hover { text-decoration: underline; text-decoration-color: var(--color-accent-2); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: var(--radius-stock); background-color: var(--color-cotton); background-image: var(--tex-cotton); color: var(--color-print); font-size: var(--text-xl); cursor: pointer; box-shadow: var(--edge-stock), var(--cast-stock); }
.menu-toggle:active { transform: translateY(1px); }
.topbar.plain .nav-inner { justify-content: center; }

/* Hero: the desk */
.hero { border-bottom: 1px solid var(--color-rule); overflow: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; max-width: var(--container); margin-inline: auto; padding: var(--space-3xl) var(--gutter); }
.hero-text { display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }
.hero h1 { max-width: 12ch; font-size: var(--text-display); line-height: 1.02; }
.hero .lead { max-width: 34ch; color: var(--color-ink-2); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.small { font-size: var(--text-sm); color: var(--color-muted); }

/* Stationery built in CSS, sized from one unit */
.stage { position: relative; container-type: inline-size; width: 100%; max-width: 600px; margin-inline: auto; aspect-ratio: 1 / 1; }
.stage-in { position: absolute; inset: 0; font-size: 2.55cqw; color: var(--color-print); font-family: var(--font-body); line-height: 1.35; }
.sheet, .env, .note { position: absolute; background-color: var(--color-cotton); background-image: linear-gradient(100deg, var(--color-cotton), transparent 45%), var(--tex-cotton); box-shadow: inset 1px 1px 0 oklch(var(--lit) / 0.9), inset -1px -1px 0 oklch(var(--shade) / 0.09), 0 0 0 0.5px oklch(var(--shade) / 0.22), 6px 5px 10px -6px oklch(var(--shade) / 0.35); border-radius: 2px; }
.sheet { left: 36%; top: 3%; width: 52%; aspect-ratio: 0.72; padding: 2.2em 2em; transform: rotate(3deg); display: flex; flex-direction: column; gap: 0.7em; }
.sheet .from { font-weight: 600; font-size: 0.95em; }
.sheet .addr { font-size: 0.75em; color: var(--color-muted); }
.sheet .title { font-size: 1.25em; font-weight: 600; margin-top: 0.5em; }
.sheet .title .fig { font-weight: 400; margin-left: 0.3em; }
.sheet .dates { display: flex; gap: 1.2em; font-size: 0.7em; color: var(--color-muted); }
.sheet .dates .fig { color: var(--color-print); }
.sheet .lines { margin: 0.4em 0 0; padding: 0; list-style: none; border-top: 1.5px solid var(--color-print); font-size: 0.72em; }
.sheet .lines li { display: flex; justify-content: space-between; gap: 1em; padding-block: 0.55em; border-bottom: 1px solid var(--color-rule-2); }
.sheet .lines li.total { font-weight: 600; border-bottom: 0; }
.sheet .stamp { position: absolute; right: 8%; bottom: 14%; font-size: 2.1em; }
.sheet .mark { position: absolute; right: 1.6em; top: 1.6em; width: 2.6em; height: 1.2em; opacity: 0.16; }
.sheet .mark .logo { height: 100%; --logo-color: var(--color-print); }
.env { left: 0; bottom: 6%; width: 64%; aspect-ratio: 1.62; transform: rotate(-6deg); }
.env::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 58%; background: linear-gradient(180deg, oklch(var(--shade) / 0.07), transparent); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.env .win { position: absolute; left: 9%; bottom: 14%; width: 52%; height: 36%; padding: 0.6em 0.8em; font-size: 0.7em; color: var(--color-muted); background: oklch(var(--shade) / 0.05); box-shadow: inset 0 0 0 1px oklch(var(--shade) / 0.12); }
.env .tag { position: absolute; right: 7%; top: 14%; padding: 0.4em 0.7em; font-size: 0.65em; font-weight: 500; border: 1px solid var(--color-print); line-height: 1.25; }
.note { right: 0; bottom: 14%; width: 38%; aspect-ratio: 1.45; transform: rotate(7deg); padding: 1.1em 1.2em; font-size: 0.85em; display: flex; flex-direction: column; justify-content: space-between; }
.note small { font-size: 0.7em; color: var(--color-muted); }

/* Sections */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--section-gap-s); }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.sec-head h2 { max-width: 20ch; }
.sec-head p { margin-top: var(--space-sm); max-width: 48ch; color: var(--color-ink-2); }
.alt { background: var(--color-paper-2); }
.receive { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg); align-items: start; }
.mail { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.mail h3 { font-size: var(--text-lg); }
.mail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-lg); font-size: var(--text-sm); }
.mail dt { color: var(--color-muted); } .mail dd { margin: 0; }
.mail hr { border: 0; border-top: 1px solid var(--color-rule); margin: 0; }
.mail .foot { font-size: var(--text-xs); color: var(--color-muted); }
.doc { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.doc header { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-lg); font-weight: 600; }
.chip { padding: var(--space-3xs) var(--space-sm); border: 1px solid var(--color-print); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 500; }
.doc dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
.doc dt { color: var(--color-muted); font-size: var(--text-xs); } .doc dd { margin: 0 0 var(--space-xs); font-weight: 500; }
.doc ul { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--color-print); font-size: var(--text-sm); }
.doc li { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.doc li:last-child { font-weight: 600; border-bottom: 0; }
.doc .pressed { align-self: flex-end; font-size: var(--text-3xl); }
.panel[hidden] { display: none; }

/* Records as an index */
.index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); padding-top: var(--space-md); }
.card { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); padding-top: var(--space-xl); min-width: 0; }
.card .tab { position: absolute; left: var(--space-md); top: -14px; padding: var(--space-2xs) var(--space-sm); background-color: var(--color-cotton); background-image: var(--tex-cotton); border-radius: 4px 4px 0 0; box-shadow: inset 1px 1px 0 oklch(var(--lit) / 0.9), 0 0 0 0.5px oklch(var(--shade) / 0.22); font: 500 var(--text-xs) var(--font-outlier); color: var(--color-ink-2); }
.card:nth-child(3n+2) .tab { left: 36%; } .card:nth-child(3n) .tab { left: 68%; }
.card h3 { font-size: var(--text-lg); line-height: 1.2; }
.card p { color: var(--color-ink-2); font-size: var(--text-sm); }
.card .more { margin-top: auto; padding-top: var(--space-xs); display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 500; font-size: var(--text-sm); text-decoration: none; }
.card .more .ic { transition: transform var(--dur-short) var(--ease-out); }
a.card { text-decoration: none; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
a.card:hover { transform: translateY(-1px); box-shadow: var(--edge-stock), var(--cast-stock-lift); }
a.card:hover .more .ic { transform: translateX(3px); }
a.card:active { transform: translateY(1px); }
.ico { display: grid; place-items: center; width: 40px; height: 40px; color: var(--color-ink); }
.ico svg { width: 28px; height: 28px; }

/* Statement */
.statement { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; }
.statement .copy { display: flex; flex-direction: column; gap: var(--space-md); }
.statement .copy p { color: var(--color-ink-2); }
.ticks { list-style: none; margin: var(--space-sm) 0 0; padding: 0; border-top: 1px solid var(--color-rule-2); }
.ticks li { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); font-weight: 500; }
.ticks li span { display: block; font-weight: 400; color: var(--color-ink-2); font-size: var(--text-sm); }
.sheet-flat { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); transform: rotate(-1deg); }
.sheet-flat h3 { font-size: var(--text-lg); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
.sheet-flat h3 small { font: 400 var(--text-xs) var(--font-outlier); color: var(--color-muted); }
.sheet-flat table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.sheet-flat td { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.sheet-flat td:last-child { text-align: right; font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.sheet-flat tr.sum td { font-weight: 600; border-top: 1.5px solid var(--color-print); border-bottom: 0; }

/* The price on the board */
.price { padding-block: var(--section-gap-s); }
.price-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.price-fig { font-size: clamp(5rem, 14vw, 12rem); font-weight: 600; letter-spacing: -0.05em; line-height: 0.85; display: flex; align-items: baseline; gap: var(--space-sm); }
.price-fig small { font-size: var(--text-title); font-weight: 500; letter-spacing: 0; color: var(--color-board-muted); }
.price p.lead { margin-top: var(--space-md); color: var(--color-board-muted); max-width: 30ch; }
.plan-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-board-rule); }
.plan-list li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: var(--space-md); align-items: baseline; padding-block: var(--space-md); border-bottom: 1px solid var(--color-board-rule); }
.plan-list h3 { font-size: var(--text-title); }
.plan-list p { color: var(--color-board-muted); }
.plan-list .amt { font: 400 var(--text-xl) var(--font-outlier); }
.plan-list .amt small { font-size: var(--text-sm); color: var(--color-board-muted); }
.price .after { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.price .after p { color: var(--color-board-muted); }
.price .btn--card { text-shadow: 0.5px 0.75px 0 var(--color-cotton); box-shadow: var(--edge-stock), 6px 5px 10px -6px oklch(var(--deep) / 0.6); }
.board .text-link { text-decoration-color: var(--color-board-muted); }

/* Closing */
.closing { border-top: 1px solid var(--color-rule); }
.closing-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); align-items: end; max-width: var(--container); margin-inline: auto; padding: var(--section-gap-s) var(--gutter); }
.closing .sec-lead { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 40ch; }
.form { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.form input { flex: 1 1 220px; }

/* Footer */
.footer { background: var(--color-paper); border-top: 1px solid var(--color-rule); }
.footer-main { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: var(--gap-columns); padding-block: var(--space-2xl); max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.footer .logo { height: 34px; }
.footer-brand p { margin-top: var(--space-sm); color: var(--color-ink-2); }
.footer-col { display: flex; flex-direction: column; gap: var(--space-sm); font-size: var(--text-sm); }
.footer-col .label { font-weight: 600; margin-bottom: var(--space-xs); }
.footer-col a, .footer-brand a { text-decoration-color: var(--color-rule-2); }
.footer-col a:hover { text-decoration-color: var(--color-accent-2); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); font-size: var(--text-sm); color: var(--color-muted); }
#theme-toggle { position: fixed; left: var(--space-md); bottom: var(--space-md); z-index: var(--z-toast); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--radius-stock); background-color: var(--color-cotton); background-image: var(--tex-cotton); color: var(--color-print); cursor: pointer; padding: 0; box-shadow: var(--edge-stock), var(--cast-stock); }
#theme-toggle:active { transform: translateY(1px); }

/* Start page: two sides */
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: calc(100svh - 72px); }
.side { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-lg); padding: clamp(var(--space-xl), 12svh, 120px) var(--space-xl) var(--space-2xl); min-width: 0; }
.side .mk { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); width: 100%; padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule-2); }
.side .mk .logo { height: 80px; }
.side .mk svg { width: 178px; height: 38px; overflow: visible; fill: currentColor; font: 600 30px var(--font-display); }
.side h2 { font-size: var(--text-section); max-width: 16ch; min-height: 3.15em; }
.side p { max-width: 36ch; min-height: 3.2em; color: var(--color-ink-2); }
.side .btn { margin-top: var(--space-md); }
.side.board { color: var(--color-board-type); }
.side.board .mk { border-color: var(--color-board-rule); }
.side.board .mk .logo { --logo-color: var(--color-board-type); }
.side.board p { color: var(--color-board-muted); }

/* Agency pages */
.sub-hero .hero-grid { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-3xl); }
.sub-hero h1 { max-width: 16ch; }
.sub-hero .lead { max-width: 44ch; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-rule-2); }
.rows li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 6fr); grid-template-areas: "tag title text"; gap: var(--gap-columns); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); align-items: baseline; }
.rows h3 { grid-area: title; } .rows p { grid-area: text; color: var(--color-ink-2); } .rows .tag { grid-area: tag; font: 500 var(--text-sm) var(--font-outlier); color: var(--color-accent-2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
.steps li { display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-rule-2); }
.steps .n { font: 500 var(--text-sm) var(--font-outlier); color: var(--color-accent-2); }
.steps p { color: var(--color-ink-2); }
.cta-band { padding-block: var(--space-2xl); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xl); max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.cta-inner h2 { max-width: 20ch; font-size: var(--text-section); }
.cta-inner p { margin-top: var(--space-sm); color: var(--color-board-muted); }
.cta-band .btn--card { box-shadow: var(--edge-stock), 6px 5px 10px -6px oklch(var(--deep) / 0.6); }
.partner { display: inline-block; line-height: 0; border-radius: var(--radius-stock); overflow: hidden; box-shadow: var(--edge-stock), var(--cast-stock); transition: transform var(--dur-short) var(--ease-out); }
.partner:hover { transform: translateY(-1px); }
.partner img { width: 240px; max-width: 100%; height: auto; }
.partners-h { font-size: var(--text-title); margin-bottom: var(--space-lg); }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); padding-top: var(--space-md); }
.contact-grid h3 { overflow-wrap: anywhere; }
.contact-grid h3 a { text-decoration-color: var(--color-accent); }

@media (max-width: 60rem) {
  .nav-inner { height: 64px; }
  .menu-toggle { display: inline-grid; place-items: center; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: flex-start; gap: 0; padding: var(--space-sm) var(--gutter) var(--space-md); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
  .nav-links.open { display: flex; }
  .nav-links a { padding-block: var(--space-sm); width: 100%; }
  .nav-login, .brand-word { display: none; }
  .hero-grid, .receive, .statement, .price-grid, .closing-inner, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { padding-block: var(--space-2xl); gap: var(--space-xl); }
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rows li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tag" "title" "text"; gap: var(--space-xs); }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; }
  .sides { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .side { padding: var(--space-xl) var(--gutter); } .side h2, .side p { min-height: 0; }
}
@media (max-width: 40rem) { .index, .steps { grid-template-columns: minmax(0, 1fr); } .plan-list li { grid-template-columns: minmax(0, 1fr) auto; } .plan-list p { grid-column: 1 / -1; grid-row: 2; } .card:nth-child(n) .tab { left: var(--space-md); } }

/* Motion: the job plays once on the desk, transforms and opacity only */
@keyframes slide-sheet { from { opacity: 0; transform: translateY(40px) rotate(8deg); } to { opacity: 1; transform: rotate(3deg); } }
@keyframes slide-env { from { opacity: 0; transform: translateX(-60px) rotate(-12deg); } to { opacity: 1; transform: rotate(-6deg); } }
@keyframes slide-note { from { opacity: 0; transform: translateY(50px) rotate(14deg); } to { opacity: 1; transform: rotate(7deg); } }
@keyframes press { 0% { opacity: 0; transform: rotate(-6deg) scale(1.6); } 60% { opacity: 1; transform: rotate(-6deg) scale(0.94); } 100% { opacity: 1; transform: rotate(-6deg) scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.sk-lock) .sheet { animation: slide-sheet 0.9s var(--ease-out) 0.2s both; }
  html:not(.sk-lock) .env { animation: slide-env 0.9s var(--ease-out) 1.1s both; }
  html:not(.sk-lock) .note { animation: slide-note 0.9s var(--ease-out) 2s both; }
  html:not(.sk-lock) .sheet .stamp { animation: press 0.5s var(--ease-out) 3s both; }
  html:not(.sk-lock) .hero h1, html:not(.sk-lock) .hero .lead, html:not(.sk-lock) .hero-actions, html:not(.sk-lock) .hero .small { animation: rise 0.8s var(--ease-out) both; }
  html:not(.sk-lock) .hero .lead { animation-delay: 0.1s; } html:not(.sk-lock) .hero-actions { animation-delay: 0.2s; } html:not(.sk-lock) .hero .small { animation-delay: 0.3s; }
  html:not(.sk-lock) .side { animation: fade 0.7s var(--ease-out) both; }
  html:not(.sk-lock) .side + .side { animation-delay: 0.12s; }
  html:not(.sk-lock) .side .mk .logo { animation: wipe 0.9s var(--ease-in-out) 0.25s both; }
  html:not(.sk-lock) .side .mk svg { animation: rise 0.6s var(--ease-out) 0.55s both; }
  html:not(.sk-lock) .side h2 .nb { display: inline-block; animation: rise 0.7s var(--ease-out) both; }
  html:not(.sk-lock) .side h2 .nb:nth-child(1) { animation-delay: 0.6s; } html:not(.sk-lock) .side h2 .nb:nth-child(3) { animation-delay: 0.72s; } html:not(.sk-lock) .side h2 .nb:nth-child(5) { animation-delay: 0.84s; }
  html:not(.sk-lock) .side p { animation: rise 0.7s var(--ease-out) 1s both; }
  html:not(.sk-lock) .side .btn { animation: rise 0.7s var(--ease-out) 1.15s both; }
}
.nb { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .btn, a.card, .partner { transition: none; } }
.groove.on-board { margin-bottom: var(--space-lg); }
.sheet .stamp { top: 61%; bottom: auto; right: 7%; }
.env { bottom: -2%; }
.note { bottom: 4%; }
html[data-theme="dark"] .desk { background-image: radial-gradient(90% 120% at 0% 30%, var(--color-paper-3), transparent 62%), var(--tex-desk); }
/* Start page: software is green and black, agency is black and white */
.side.green { background: oklch(24% 0.05 155); color: oklch(96% 0.012 150); }
.side.green .mk { border-color: oklch(40% 0.06 155); }
.side.green .mk .logo { --logo-color: oklch(78% 0.15 155); }
.side.green p { color: oklch(82% 0.03 155); }
.side.black { background: oklch(10% 0 0); color: oklch(100% 0 0); }
.side.black .mk { border-color: oklch(32% 0 0); }
.side.black .mk .logo { --logo-color: oklch(100% 0 0); }
.side.black p { color: oklch(78% 0 0); }
.btn--green { background: oklch(76% 0.16 155); color: oklch(16% 0.03 155); text-shadow: none; box-shadow: var(--cast-stock); }
.btn--green:hover { box-shadow: var(--cast-stock-lift); }
.side.black .btn--card { background: oklch(100% 0 0); background-image: none; color: oklch(10% 0 0); text-shadow: none; }
/* One sentence per line: let a one-line sentence stay on one line */
.hero .lead, .sec-head p, .side p, .cta-inner p, .sub-hero .lead, .closing .sec-lead, .price p.lead { max-width: none; }
.side h2 { max-width: none; }
.hero .lead { font-size: clamp(1rem, 1.25vw, 1.25rem); white-space: nowrap; }
@media (max-width: 40rem) { .hero .lead { white-space: normal; } }
/* Start page: logo, divider, word */
.side .mk { flex-direction: row; justify-content: center; align-items: center; gap: var(--space-lg); padding-bottom: var(--space-lg); }
.side .mk .logo { height: 72px; }
.side .mk .mk-word { padding-left: var(--space-lg); border-left: 1px solid currentColor; font: 500 var(--text-2xl) var(--font-display); line-height: 1.5; }
.side.green .mk .mk-word { border-color: oklch(55% 0.08 155); }
.side.black .mk .mk-word { border-color: oklch(45% 0 0); }
@media (max-width: 40rem) { .side .mk .logo { height: 56px; } .side .mk .mk-word { font-size: var(--text-xl); } }
/* Agency: black on white */
html.agency { --color-paper: oklch(100% 0 0); --color-paper-2: oklch(97% 0 0); --color-paper-3: oklch(94% 0 0); --color-ink: oklch(12% 0 0); --color-ink-2: oklch(26% 0 0); --color-muted: oklch(45% 0 0); --color-rule: oklch(91% 0 0); --color-rule-2: oklch(82% 0 0); --color-accent: oklch(12% 0 0); --color-accent-ink: oklch(100% 0 0); --color-accent-2: oklch(12% 0 0); --color-focus: oklch(12% 0 0); --color-paid: oklch(12% 0 0); --color-cotton: oklch(100% 0 0); --color-desk: oklch(96.5% 0 0); --color-print: oklch(12% 0 0); --color-board: oklch(10% 0 0); --color-board-type: oklch(100% 0 0); --color-board-muted: oklch(78% 0 0); --color-board-rule: oklch(32% 0 0); --tex-cotton: none; --tex-desk: none; --shade: 20% 0 0; --lit: 100% 0 0; --deep: 5% 0 0; --color-board-accent: oklch(100% 0 0); }
/* Start page: black text on white, both sides */
.side.green, .side.black { background: oklch(100% 0 0); color: oklch(12% 0 0); }
.side + .side { border-left: 1px solid oklch(88% 0 0); }
.side.green .mk, .side.black .mk { border-color: oklch(88% 0 0); }
.side.green .mk .logo { --logo-color: oklch(50% 0.125 155); }
.side.black .mk .logo { --logo-color: oklch(12% 0 0); }
.side.green .mk .mk-word, .side.black .mk .mk-word { border-color: oklch(75% 0 0); }
.side.green p, .side.black p { color: oklch(32% 0 0); }
.side .btn--ink { background: oklch(12% 0 0); color: oklch(100% 0 0); text-shadow: none; box-shadow: 6px 5px 10px -6px oklch(0% 0 0 / 0.4); }
/* Start page: black text on white, software logo green */
html.start { --color-paper: oklch(100% 0 0); --color-paper-2: oklch(97% 0 0); --color-ink: oklch(12% 0 0); --color-ink-2: oklch(26% 0 0); --color-muted: oklch(45% 0 0); --color-rule: oklch(91% 0 0); --color-rule-2: oklch(86% 0 0); --color-board: oklch(10% 0 0); --color-board-type: oklch(100% 0 0); --shade: 20% 0 0; --lit: 100% 0 0; }
.side.light { background: oklch(100% 0 0); color: oklch(12% 0 0); justify-content: center; gap: var(--space-xl); padding: var(--space-xl) var(--space-xl); }
.side.light + .side.light { border-left: 1px solid var(--color-rule-2); }
.side.light .mk { border-color: var(--color-rule-2); padding-bottom: var(--space-md); }
.side.light .mk .logo { height: 48px; --logo-color: oklch(12% 0 0); }
.side.light.sw .mk .logo { --logo-color: oklch(50% 0.15 155); }
.side.light .mk .mk-word { font-size: var(--text-xl); border-color: oklch(70% 0 0); padding-left: var(--space-md); }
.side.light h2 { font-size: clamp(3.25rem, 7vw, 7rem); line-height: 0.98; max-width: none; min-height: 0; }
.side.light p { font-size: var(--text-lead); min-height: 0; color: oklch(30% 0 0); max-width: none; }
.side.light .btn { min-height: 56px; padding-inline: var(--space-xl); font-size: var(--text-lg); margin-top: var(--space-sm); }
@media (max-width: 60rem) { .side.light + .side.light { border-left: 0; border-top: 1px solid var(--color-rule-2); } .side.light h2 { font-size: clamp(2.75rem, 11vw, 4.5rem); } }
.side.light { justify-content: flex-start; padding: clamp(var(--space-xl), 9svh, 96px) var(--space-xl) var(--space-xl); }
.side.light h2 { font-size: clamp(2.75rem, 5.4vw, 6rem); }
.side.light .btn--ink { background: oklch(10% 0 0); color: oklch(100% 0 0); }
/* Start page: the side under the cursor grows a little */
@media (min-width: 60.01rem) {
  .sides { display: flex; }
  .side { flex: 1 1 0; min-width: 0; transition: flex-grow var(--dur-long) var(--ease-out); }
  .side:has(.btn:hover), .side:has(.btn:focus-visible) { flex-grow: 1.14; }
  .side .btn { position: relative; }
  .side .btn::after { content: ""; position: absolute; inset: -24px; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }
/* Start page: a slim header so the two cards lead */
.topbar.plain .nav-inner { height: 44px; }
.topbar.plain .logo { height: 24px; }
.sides { min-height: calc(100svh - 44px); }
@media (max-width: 60rem) { .topbar.plain .nav-inner { height: 44px; } .sides { min-height: 0; } }
/* Start page on phones: smaller type so both sides fit on one screen */
@media (max-width: 60rem) {
  .sides { display: grid; grid-template-rows: 1fr 1fr; min-height: calc(100svh - 44px); }
  .side.light { justify-content: center; gap: var(--space-sm); padding: var(--space-md) var(--gutter); }
  .side.light .mk { padding-bottom: var(--space-xs); }
  .side.light .mk .logo { height: 32px; }
  .side.light .mk .mk-word { font-size: var(--text-md); padding-left: var(--space-sm); }
  .side.light h2 { font-size: clamp(1.75rem, 8vw, 2.5rem); line-height: 1; }
  .side.light p { font-size: var(--text-sm); line-height: 1.35; }
  .side.light .btn { min-height: 44px; padding-inline: var(--space-lg); font-size: var(--text-md); margin-top: var(--space-2xs); }
}
/* Agency on phones: smaller type, tighter spacing */
@media (max-width: 40rem) {
  html.agency { --text-display: 2.5rem; --text-section: 1.75rem; --text-title: 1.125rem; --text-lead: 1rem; --section-gap-s: 48px; }
  html.agency body { font-size: 0.9375rem; }
  html.agency .hero-grid { padding-block: var(--space-xl); }
  html.agency .btn { min-height: 44px; font-size: var(--text-sm); }
}
/* Partners: centred, square-cornered logos, revealed once in view */
.partners { text-align: center; }
.partners .partners-h { margin-bottom: var(--space-lg); }
.partner { border-radius: 0; overflow: visible; }
.partner img { border-radius: 0; margin-inline: auto; }
.partners.pre .partners-h, .partners.pre .partner { opacity: 0; transform: translateY(24px); }
.partners .partners-h, .partners .partner { transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.partners.in .partners-h, .partners.in .partner { opacity: 1; transform: none; }
.partners.in .partner { transition-delay: 0.15s, 0.15s, 0s; }
.partners .partner:hover { transform: translateY(-3px) scale(1.04); transition-delay: 0s; }
.partners .partners-h { margin-inline: auto; max-width: none; text-align: center; }
.partners .container { display: flex; flex-direction: column; align-items: center; }
/* What we can build: icon grid, staggered reveal, icon motion */
.builds { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.build { padding: var(--space-lg); border: 1px solid var(--color-line, rgba(0,0,0,.12)); background: #fff; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), box-shadow var(--dur-short) var(--ease-out); transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms; }
.build h3 { margin: var(--space-md) 0 var(--space-xs); }
.bico { display: grid; place-items: center; width: 56px; height: 56px; background: #000; color: #fff; }
.bico svg { width: 28px; height: 28px; transition: transform .5s var(--ease-out); }
.build:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.12); transition-delay: 0ms; }
.build:hover .bico svg { transform: scale(1.18) rotate(-6deg); }
.builds.pre .build { opacity: 0; transform: translateY(28px); }
.builds.in .build { opacity: 1; transform: none; }
.builds-note { margin-top: var(--space-xl); }
@media (max-width: 60rem) { .builds { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .builds { grid-template-columns: 1fr; } }
/* Platforms strip */
.plats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.plat { position: relative; padding: var(--space-lg); background: #fff; border: 1px solid rgba(0,0,0,.12); overflow: hidden; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), box-shadow var(--dur-short) var(--ease-out); transition-delay: var(--d,0ms), var(--d,0ms), 0ms; }
.plat::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: #000; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.plat:hover::before { transform: scaleX(1); }
.plat:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.12); transition-delay: 0ms; }
.pico { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid #000; }
.pico svg { width: 24px; height: 24px; transition: transform .5s var(--ease-out); }
.plat:hover .pico svg { transform: scale(1.15) rotate(-6deg); }
.pname { display: block; margin-top: var(--space-md); font-family: var(--font-mono, monospace); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.plat h3 { margin: var(--space-xs) 0; }
.plats.pre .plat { opacity: 0; transform: translateY(28px); }
.plats.in .plat { opacity: 1; transform: none; }
.plats-note { margin-top: var(--space-lg); font-size: .8rem; opacity: .6; }
@media (max-width: 60rem) { .plats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .plats { grid-template-columns: 1fr; } }
/* Platforms: official marks in a row, brand colour on hover */
.plats { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid rgba(0,0,0,.12); background: #fff; }
.plats .plat { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-sm); border-left: 1px solid rgba(0,0,0,.12); text-align: center; color: #000; position: relative; overflow: hidden; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), color .35s var(--ease-out), background .35s var(--ease-out); transition-delay: var(--d,0ms), var(--d,0ms), 0ms, 0ms; }
.plats .plat:first-child { border-left: 0; }
.plats .plat::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.plats .plat:hover { color: var(--brand); transition-delay: 0ms; }
.plats .plat:hover::after { transform: scaleX(1); }
.plogo { width: 48px; height: 48px; transition: transform .5s var(--ease-out); animation: plfloat 5s ease-in-out infinite; animation-delay: var(--d,0ms); }
.plats .plat:hover .plogo { transform: scale(1.18) rotate(-5deg); }
.pcap { font-size: .9rem; color: #000; white-space: nowrap; }
@keyframes plfloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.plats.pre .plat { opacity: 0; transform: translateY(24px); }
.plats.in .plat { opacity: 1; transform: none; }
@media (max-width: 60rem) { .plats { grid-template-columns: repeat(3, 1fr); } .plats .plat { border-top: 1px solid rgba(0,0,0,.12); } .pcap { white-space: normal; } }
@media (max-width: 40rem) { .plats { grid-template-columns: repeat(2, 1fr); } }
/* builds: one line per sentence, tighter */
.build p, .build h3 { white-space: nowrap; }
.build { padding: var(--space-md) var(--space-lg); }
.builds { gap: var(--space-md); }
@media (max-width: 60rem) { .build p, .build h3 { white-space: normal; } }
/* use space wisely */
html.agency { --section-gap-s: 48px; --section-gap: 64px; --section-gap-l: 80px; }
.builds-note { margin-top: var(--space-md); }
/* one sentence, one line (desktop) */
@media (min-width: 64rem) { html.agency p, html.agency .rows li h3, html.agency .steps li h3 { white-space: nowrap; max-width: none; } }
/* generic scroll reveal */
.rv { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--rd, 0ms); }
.rv.pre { opacity: 0; transform: translateY(22px); }
.rv.in { opacity: 1; transform: none; }
/* hero lockups */
.from { display: flex; align-items: center; gap: 8px; }
.from .logo { height: 22px; }
.from .mk-word { font-size: 14px; font-weight: 600; }
.tag .tg { display: inline-flex; align-items: center; gap: 4px; }
.tag .tg .logo { height: 12px; }
.tag .tg b { font-weight: 600; }
/* steps as rows, headings on one line */
@media (min-width: 64rem) {
  html.agency h2 { max-width: none; white-space: nowrap; }
  html.agency .steps { display: block; }
  html.agency .steps li { display: grid; grid-template-columns: 56px 130px 1fr; align-items: baseline; gap: var(--space-md); padding: var(--space-md) 0; }
  html.agency .steps li .n { margin: 0; }
  html.agency .steps li h3, html.agency .steps li p { margin: 0; }
}
/* Agency: everything centred */
html.agency .hero-text, html.agency .sec-head, html.agency .sec-head > div, html.agency .subhero, html.agency .sub-hero, html.agency .statement,
html.agency .stock.card, html.agency .build, html.agency .contact-grid .card, html.agency .cta-inner, html.agency .footer-main { text-align: center; }
html.agency h1, html.agency h2, html.agency h3, html.agency p, html.agency .lead { margin-inline: auto; text-align: center; max-width: none; }
html.agency .hero-actions, html.agency .sec-head, html.agency .sub-hero .container, html.agency .subhero .container { justify-content: center; align-items: center; }
html.agency .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
html.agency .sec-head { display: flex; flex-direction: column; align-items: center; }
html.agency .stock.card, html.agency .build, html.agency .plat { display: flex; flex-direction: column; align-items: center; }
html.agency .ico, html.agency .bico { margin-inline: auto; }
html.agency .more, html.agency .text-link { justify-content: center; }
html.agency p:has(> .text-link) { text-align: center; }
html.agency .rows li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-xs); }
html.agency .rows li > * { margin-inline: auto; }
html.agency .steps li { display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: var(--space-xs); }
html.agency .cta-inner { flex-direction: column; align-items: center; gap: var(--space-md); }
html.agency .footer-main, html.agency .footer-brand, html.agency .footer-bottom { align-items: center; justify-items: center; text-align: center; }
html.agency .footer-main { display: flex; flex-direction: column; gap: var(--space-lg); }
html.agency .footer nav, html.agency .footer-links, html.agency .footer-cols { justify-content: center; text-align: center; }
/* Agency footer: brand on top, three columns in a row, all centred */
html.agency .footer-main { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); justify-content: center; justify-items: center; gap: var(--space-lg) var(--space-2xl); text-align: center; }
html.agency .footer-brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; }
html.agency .footer-col { align-items: center; text-align: center; }
html.agency .footer-bottom { justify-content: center; text-align: center; }
html.agency .footer .logo { margin-inline: auto; }
@media (max-width: 40rem) { html.agency .footer-main { grid-template-columns: 1fr; } }
html.agency .footer-main { align-items: start; }
html.agency .builds-note { margin-top: var(--space-lg); }
/* Footer back to the normal left layout */
html.agency .footer-main { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); justify-content: stretch; justify-items: stretch; align-items: start; text-align: left; gap: var(--gap-columns); }
html.agency .footer-brand { grid-column: auto; display: block; text-align: left; }
html.agency .footer-brand p { margin-inline: 0; text-align: left; }
html.agency .footer .logo { margin-inline: 0; }
html.agency .footer-col { align-items: flex-start; text-align: left; }
html.agency .footer-bottom { justify-content: space-between; text-align: left; }
@media (max-width: 60rem) { html.agency .footer-main { grid-template-columns: 1fr 1fr; } html.agency .footer-brand { grid-column: 1 / -1; } }
/* Plats: icons only, bigger */
.plats .plat { padding: var(--space-xl) var(--space-sm); }
.plogo { width: 56px; height: 56px; }
.plats-sec .sec-head p { margin-bottom: 0; }
/* Domains: four across */
.builds.b4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 60rem) { .builds.b4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .builds.b4 { grid-template-columns: 1fr; } }
/* Banner under the header */
.banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-sm) var(--space-md); padding: 10px var(--gutter); background: #000; color: #fff; font-size: var(--text-sm); text-align: center; }
.banner p, .banner span { margin: 0; }
.banner-a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: #fff; color: #000; font-weight: 600; text-decoration: none; overflow: hidden; transition: transform .25s var(--ease-out); }
.banner-a:hover { transform: translateY(-1px); }
.banner-a .ic { width: 16px; height: 16px; transition: transform .25s var(--ease-out); animation: nudge 1.8s ease-in-out infinite; }
.banner-a:hover .ic { animation: none; transform: translateX(4px); }
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@media (max-width: 40rem) { .banner-t { display: none; } .banner { padding: 8px var(--gutter); } }
/* Button motion */
.btn { position: relative; overflow: hidden; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.btn::before { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); pointer-events: none; transition: none; }
.btn:hover::before { left: 130%; transition: left .7s var(--ease-out); }
.btn--card::before { background: linear-gradient(100deg, transparent, rgba(0,0,0,.08), transparent); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn--ink { animation: ctapulse 3.2s ease-in-out infinite; }
.btn--ink:hover { animation: none; }
@keyframes ctapulse { 0%,100% { box-shadow: var(--cast-stock), 0 0 0 0 rgba(0,0,0,.25); } 55% { box-shadow: var(--cast-stock), 0 0 0 10px rgba(0,0,0,0); } }
@media (prefers-reduced-motion: reduce) { .btn--ink, .banner-a .ic { animation: none; } }
html.agency .footer-brand { display: flex; flex-direction: column; align-items: flex-start; justify-items: start; text-align: left; }
html.agency .footer-brand > * { align-self: flex-start; margin-inline: 0; text-align: left; }
/* Software page: locked until Q1 2027 */
.soon { min-height: calc(100svh - 44px); display: grid; place-items: center; padding: var(--space-xl) var(--gutter); }
.soon-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-md); }
.soon-mk { display: flex; align-items: center; gap: var(--space-sm); }
.soon-mk .logo { height: 64px; --logo-color: oklch(50% 0.15 155); }
.soon-lock { display: grid; place-items: center; width: 72px; height: 72px; border: 1.5px solid #000; animation: soonfloat 3.5s ease-in-out infinite; }
.soon-lock svg { width: 34px; height: 34px; }
.soon h1 { max-width: none; font-size: clamp(2rem, 6vw, 4.5rem); }
.soon p { max-width: none; font-size: var(--text-lead, 1.25rem); }
.soon-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-top: var(--space-sm); }
.soon-in > * { animation: soonin .8s var(--ease-out) both; }
.soon-in > *:nth-child(2) { animation-delay: .1s; } .soon-in > *:nth-child(3) { animation-delay: .2s; } .soon-in > *:nth-child(4) { animation-delay: .3s; } .soon-in > *:nth-child(5) { animation-delay: .4s; } .soon-in > *:nth-child(6) { animation-delay: .5s; }
@keyframes soonin { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes soonfloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.soon-mk { gap: var(--space-md); }
.soon-mk .mk-word { font-size: 2rem; font-weight: 500; padding-left: var(--space-md); border-left: 1px solid rgba(0,0,0,.3); line-height: 64px; }
@media (max-width: 40rem) { .soon-mk .logo { height: 48px; } .soon-mk .mk-word { font-size: 1.4rem; line-height: 48px; } }
/* Header + call to action stay visible while scrolling */
.sticky-top { position: sticky; top: 0; z-index: var(--z-sticky-nav); }
.sticky-top .topbar { position: static; }
.partner-url { margin-top: var(--space-sm); font-size: var(--text-sm); color: #000; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.35); transition: border-color .25s var(--ease-out), transform .25s var(--ease-out); }
.partner-url:hover { border-color: #000; transform: translateY(-1px); }
.partners.pre .partner-url { opacity: 0; } .partners .partner-url { transition: opacity .8s var(--ease-out) .3s, border-color .25s, transform .25s; } .partners.in .partner-url { opacity: 1; }
/* Mobile: zoom out so pages feel less cramped and less long */
@media (max-width: 40rem) {
  html.agency, html.start { zoom: 0.92; --section-gap: 36px; --section-gap-s: 32px; --section-gap-l: 56px; --gutter: 18px; }
  .sides { min-height: calc((100svh - 44px) / 0.92); }
  .soon { min-height: calc((100svh - 44px) / 0.92); }
  html.agency .hero { padding-block: var(--space-xl); }
  html.agency h1 { font-size: clamp(2.2rem, 11vw, 3rem); }
  html.agency h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); white-space: normal; }
  html.agency p, html.agency .lead { font-size: 0.95rem; }
  html.agency .builds, html.agency .builds.b4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  html.agency .build { padding: 14px 10px; }
  html.agency .build h3 { font-size: 1rem; white-space: normal; }
  html.agency .build p { font-size: 0.85rem; white-space: normal; }
  html.agency .bico { width: 44px; height: 44px; } html.agency .bico svg { width: 22px; height: 22px; }
  html.agency .plats { grid-template-columns: repeat(3, 1fr); }
  html.agency .plats .plat { padding: 18px 6px; }
  html.agency .plogo { width: 38px; height: 38px; }
  html.agency .index { gap: 12px; }
  html.agency .stock.card { padding: 16px; }
  html.agency .steps li, html.agency .rows li { padding-block: 12px; }
  html.agency .cta-inner, html.agency .cta-band { padding-block: var(--space-xl); }
  html.agency .banner { padding: 6px var(--gutter); }
}
@media (max-width: 40rem) {
  html.agency .plats { grid-template-columns: repeat(5, 1fr); }
  html.agency .plats .plat { padding: 16px 4px; border-top: 0; }
  html.agency .plogo { width: 30px; height: 30px; }
  html.agency .stage { zoom: 0.6; margin-block: -10px; }
}
/* Mobile: each section fills one screen and centres its content */
@media (max-width: 40rem) {
  html.agency .sec, html.agency .partners { min-height: calc((100svh - 108px) / 0.92); display: flex; flex-direction: column; justify-content: center; padding-block: 20px; }
  html.agency .hero { min-height: calc((100svh - 108px) / 0.92); display: flex; flex-direction: column; justify-content: center; padding-block: 16px; }
  html.agency .sec .sec-head { margin-bottom: 14px; }
  html.agency .cta-band { min-height: calc((100svh - 108px) / 0.92); display: flex; align-items: center; }
  html.agency .builds-note { margin-top: 10px; }
}
@media (max-width: 40rem) and (max-height: 780px) {
  html.agency h1 { font-size: clamp(1.9rem, 9.5vw, 2.5rem); }
  html.agency .stage { zoom: 0.5; margin-block: -20px; }
  html.agency .sec, html.agency .partners { padding-block: 12px; }
  html.agency .build { padding: 10px 8px; } html.agency .bico { width: 36px; height: 36px; }
  html.agency .stock.card { padding: 12px; }
  html.agency .rows li, html.agency .steps li { padding-block: 8px; }
}
@media (max-width: 40rem) {
  html.agency #domains .build { padding: 28px 10px; gap: 4px; }
  html.agency #domains .bico { width: 52px; height: 52px; } html.agency #domains .bico svg { width: 26px; height: 26px; }
  html.agency #domains .build h3 { font-size: 1.1rem; }
  html.agency #plats .plat { padding: 34px 4px; } html.agency #plats .plogo { width: 36px; height: 36px; }
}
/* Mobile fix: no empty full-screen sections, and a platform row that cannot overflow */
@media (max-width: 40rem) {
  html.agency .sec, html.agency .partners { min-height: 0; display: block; padding-block: 28px; }
  html.agency .cta-band { min-height: 0; padding-block: 28px; }
  html.agency .hero { min-height: 0; padding-block: 20px; }
  html.agency .plats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
  html.agency .plats .plat { min-width: 0; width: auto; display: grid; place-items: center; padding: 22px 0; }
  html.agency .plats .plogo { width: 32px; height: 32px; margin: 0 auto; display: block; }
  html.agency #plats .plat { padding: 22px 0; } html.agency #plats .plogo { width: 32px; height: 32px; }
  html.agency #domains .build { padding: 18px 10px; }
}
@media (max-width: 40rem) {
  html.agency .plats .plat { justify-self: stretch; align-self: stretch; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
  html.agency .plats .plogo { flex: 0 0 auto; margin: 0; }
}
@media (max-width: 40rem) {
  html.agency .plats { display: flex; flex-wrap: nowrap; }
  html.agency .plats .plat { flex: 1 1 0; min-width: 0; width: auto; }
}
.plats { gap: 0 !important; }
/* Start page: software heading and text fit their half, one sentence per line */
@media (min-width: 40rem) {
  .side.sw h2, .side.ag h2 { font-size: clamp(2rem, 5.4vw, 6rem); }
  .side p { white-space: nowrap; font-size: clamp(0.9rem, 1.45vw, 1.25rem); }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.sk-lock) .side h2 .nb:nth-child(7) { animation-delay: 0.96s; }
  html:not(.sk-lock) .side p { animation-delay: 1.15s; }
  html:not(.sk-lock) .side .btn { animation-delay: 1.3s; }
}
/* Agency hero: slow drifting smoke, rendered in light grey on white */
html.agency .hero { position: relative; }
.smoke { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.6s ease; pointer-events: none; }
.smoke.on { opacity: 1; }
html.agency .hero .hero-grid { position: relative; z-index: 1; }
/* Agency home hero: header and text centred, no stationery */
html.agency .hero:not(.sub-hero) .hero-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
html.agency .hero:not(.sub-hero) .hero-text { align-items: center; text-align: center; }
html.agency .hero:not(.sub-hero) h1 { max-width: none; }
html.agency .cta-band { position: relative; overflow: clip; }
html.agency .cta-band .cta-inner { position: relative; z-index: 1; }
/* Ecosystem lifecycle row */
.eco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); position: relative; counter-reset: e; }
.eco li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; position: relative; }
.eco li:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: calc(50% + 40px); width: calc(100% - 80px + var(--space-lg)); border-top: 1.5px dashed oklch(0% 0 0 / .25); }
.eco .eico { width: 56px; height: 56px; display: grid; place-items: center; background: #000; color: #fff; transition: transform .35s var(--ease-out); }
.eco .eico svg { width: 26px; height: 26px; }
.eco li:hover .eico { transform: translateY(-4px) rotate(-4deg); }
.eco h3 { margin: 6px 0 0; }
.eco p { color: var(--color-ink-2); margin: 0; }
@media (max-width: 40rem) {
  .eco { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .eco li::after { display: none; }
  .eco .eico { width: 44px; height: 44px; } .eco .eico svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: no-preference) { .eco li:not(:last-child)::after { transform-origin: left; animation: ecoline 1.2s var(--ease-out) both; } @keyframes ecoline { from { transform: scaleX(0); } } }
/* Build carousel: endless, pauses on hover, edges fade */
.car { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); padding-block: 14px; }
.car-track { display: flex; width: max-content; gap: 18px; animation: carmove 38s linear infinite; }
.car:hover .car-track, .car:focus-within .car-track { animation-play-state: paused; }
.car-sep { flex: 0 0 0; }
.car .build { flex: 0 0 264px; position: relative; overflow: hidden; animation: carfloat 5s ease-in-out infinite; }
.car .build:nth-child(2n) { animation-delay: -1.7s; } .car .build:nth-child(3n) { animation-delay: -3.2s; }
.car .build::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(0,0,0,.06) 50%, transparent 65%); transform: translateX(-120%); transition: transform .9s var(--ease-out); pointer-events: none; }
.car .build:hover::after { transform: translateX(120%); }
.car .build:hover { animation-play-state: paused; }
.car .bico { transition: transform .45s var(--ease-out), background .3s; } .car .build:hover .bico { transform: scale(1.1) rotate(-6deg); }
.car .build h3, .car .build p { white-space: normal; }
@keyframes carmove { to { transform: translateX(calc(-50% - 9px)); } }
@keyframes carfloat { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .car { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .car-track { animation: none; } .car .build { animation: none; } .car .build[aria-hidden] { display: none; } }
@media (max-width: 40rem) { .car .build { flex-basis: 200px; } .car-track { animation-duration: 30s; gap: 12px; } }
/* Ecosystem: steps light up in turn, rings pulse */
.eco .eico { position: relative; animation: eact 6.4s ease-in-out infinite; }
.eco li:nth-child(2) .eico { animation-delay: 1.6s; } .eco li:nth-child(3) .eico { animation-delay: 3.2s; } .eco li:nth-child(4) .eico { animation-delay: 4.8s; }
.eco .eico::after { content: ""; position: absolute; inset: 0; border: 1.5px solid #000; opacity: 0; animation: ering 6.4s ease-out infinite; animation-delay: inherit; }
.eco li:nth-child(2) .eico::after { animation-delay: 1.6s; } .eco li:nth-child(3) .eico::after { animation-delay: 3.2s; } .eco li:nth-child(4) .eico::after { animation-delay: 4.8s; }
@keyframes eact { 0%, 28%, 100% { background: #000; color: #fff; transform: none; } 6%, 20% { background: #fff; color: #000; box-shadow: inset 0 0 0 1.5px #000, 0 8px 22px rgba(0,0,0,.18); transform: translateY(-5px); } }
@keyframes ering { 0% { opacity: .5; transform: scale(1); } 22%, 100% { opacity: 0; transform: scale(1.7); } }
.eco .eico svg { transition: transform .4s var(--ease-out); } .eco li:hover .eico svg { transform: scale(1.15); }
/* Software coming callout */
.soon-cta { margin: var(--space-xl) auto 0; max-width: 44rem; display: flex; align-items: center; gap: 24px; padding: 22px 28px; background: #000; color: #fff; text-align: left; position: relative; overflow: hidden; }
.soon-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%); transform: translateX(-120%); animation: soonshine 5s ease-in-out infinite; }
.soon-cta > * { position: relative; }
.soon-cta h3 { margin: 0 0 4px; color: #fff; } .soon-cta p { margin: 0; color: rgba(255,255,255,.78); } .soon-cta b { color: #fff; }
.soon-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid #fff; font: 600 1rem var(--font-outlier, monospace); letter-spacing: .04em; }
.soon-badge i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: soondot 1.6s ease-in-out infinite; }
@keyframes soonshine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes soondot { 50% { transform: scale(1.8); opacity: .3; } }
@media (max-width: 40rem) { .soon-cta { flex-direction: column; text-align: center; gap: 12px; padding: 18px 14px; } }
@media (prefers-reduced-motion: reduce) { .eco .eico, .eco .eico::after, .soon-cta::before, .soon-badge i { animation: none; } }
/* Scroll progress bar under the header */
.sprog { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: #000; transform-origin: left; transform: scaleX(0); z-index: 60; pointer-events: none; }
html.agency .soon-cta { max-width: 56rem; }
html.agency .soon-cta > div { text-align: left; min-width: 0; }
html.agency .soon-cta p, html.agency .soon-cta h3 { white-space: normal; text-align: left; }
@media (max-width: 40rem) { html.agency .soon-cta > div, html.agency .soon-cta p, html.agency .soon-cta h3 { text-align: center; } }
.soon-cta p:last-child { margin-top: 8px; font-size: 1.15rem; color: #fff; }
/* Software panel: stacked, centred, with smoke */
html.agency .soon-cta { flex-direction: column; justify-content: center; text-align: center; gap: 14px; padding: 36px 24px; max-width: 40rem; }
html.agency .soon-cta > :not(canvas) { position: relative; z-index: 2; }
html.agency .soon-cta > canvas.smoke { position: absolute; z-index: 0; }
.soon-cta::before { z-index: 1; }
html.agency .soon-cta > div, html.agency .soon-cta p, html.agency .soon-cta h3 { text-align: center; }
html.agency .soon-cta h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
/* Buttons: drifting soft glows and lit edges, after consulting.com */
.btn.btn--ink:not(#_) {
  background-image: radial-gradient(closest-side, rgba(255,255,255,.34), transparent), radial-gradient(closest-side, rgba(255,255,255,.22), transparent);
  background-size: 84px 130%, 100px 130%; background-repeat: no-repeat; background-position: -10% 50%, 110% 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(255,255,255,.14), 0 1px 9px rgba(0,0,0,.18);
  animation: btnglow 5s ease-in-out infinite alternate, ctapulse 3.2s ease-in-out infinite;
}
.btn.btn--ink:not(#_):hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.22), 0 6px 26px rgba(0,0,0,.35); animation: btnglow 2.2s ease-in-out infinite alternate; }
.btn.btn--card:not(#_), .btn.btn--green:not(#_) {
  background-image: radial-gradient(closest-side, rgba(0,0,0,.09), transparent), radial-gradient(closest-side, rgba(0,0,0,.06), transparent), var(--tex-cotton, none);
  background-size: 84px 130%, 100px 130%, auto; background-repeat: no-repeat, no-repeat, repeat; background-position: -10% 50%, 110% 50%, 0 0;
  animation: btnglow2 5s ease-in-out infinite alternate;
}
.btn.btn--card:not(#_):hover { box-shadow: var(--edge-stock), 0 6px 26px rgba(0,0,0,.2); animation-duration: 2.2s; }
.cta-band .btn.btn--card:not(#_):hover, .banner .btn.btn--card:not(#_):hover, .soon-cta .btn:not(#_):hover { box-shadow: 0 0 28px rgba(255,255,255,.5); }
.side.black .btn.btn--card:not(#_) { background-image: radial-gradient(closest-side, rgba(0,0,0,.09), transparent), radial-gradient(closest-side, rgba(0,0,0,.06), transparent); }
@keyframes btnglow { to { background-position: 105% 50%, -5% 50%; } }
@keyframes btnglow2 { to { background-position: 105% 50%, -5% 50%, 0 0; } }
@media (prefers-reduced-motion: reduce) { .btn.btn--ink:not(#_), .btn.btn--card:not(#_), .btn.btn--green:not(#_) { animation: none; } }
/* softer glow blobs */
.btn.btn--ink:not(#_) { background-image: radial-gradient(closest-side, rgba(255,255,255,.2), transparent), radial-gradient(closest-side, rgba(255,255,255,.13), transparent); background-size: 96px 120%, 120px 120%; }
/* Cards: corner rings with twinkling dots, drifting glow and a lit edge, after consulting.com */
html.agency .stock.card, html.agency .build, html.agency .contact-grid .card { position: relative; isolation: isolate; }
html.agency .stock.card::before, html.agency .build::before, html.agency .contact-grid .card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: .8; transition: opacity .4s;
  background: radial-gradient(circle, rgba(0,0,0,.4) 0 1px, transparent 1.6px) 0 0 / 13px 13px, repeating-radial-gradient(circle at 100% 0, transparent 0 19px, rgba(0,0,0,.06) 19px 20px);
  -webkit-mask: radial-gradient(circle at 100% 0, #000 0, transparent 170px); mask: radial-gradient(circle at 100% 0, #000 0, transparent 170px);
  animation: cardtwinkle 7s ease-in-out infinite alternate;
}
html.agency .stock.card:hover::before, html.agency .build:hover::before, html.agency .contact-grid .card:hover::before { opacity: 1; animation-duration: 2.5s; }
@keyframes cardtwinkle { to { background-position: 6px 4px, 0 0; opacity: .45; } }
html.agency .stock.card::after, html.agency .builds .build::after, html.agency .contact-grid .card::after {
  content: ""; position: absolute; top: 0; left: 12%; width: 64px; height: 2px; background: #000; opacity: .5; filter: blur(.6px); pointer-events: none; transition: width .5s var(--ease-out), opacity .4s, left .5s var(--ease-out);
}
html.agency .stock.card:hover::after, html.agency .builds .build:hover::after, html.agency .contact-grid .card:hover::after { width: 140px; opacity: .9; left: 6%; }
html.agency .stock.card { background-image: radial-gradient(closest-side, rgba(0,0,0,.05), transparent), linear-gradient(100deg, var(--color-cotton), transparent 45%), var(--tex-cotton); background-size: 220px 140%, auto, auto; background-repeat: no-repeat, repeat, repeat; background-position: -10% 50%, 0 0, 0 0; animation: cardglow 8s ease-in-out infinite alternate; }
html.agency .builds .build, html.agency .car .build { background-image: radial-gradient(closest-side, rgba(0,0,0,.05), transparent); background-size: 220px 140%; background-repeat: no-repeat; background-position: -10% 50%; }
html.agency .builds .build { animation: cardglow1 8s ease-in-out infinite alternate; }
@keyframes cardglow { to { background-position: 110% 50%, 0 0, 0 0; } }
@keyframes cardglow1 { to { background-position: 110% 50%; } }
@media (prefers-reduced-motion: reduce) { html.agency .stock.card, html.agency .builds .build, html.agency .stock.card::before, html.agency .build::before { animation: none; } }
html.agency .stock.card::after { top: auto; bottom: 0; left: 12%; }
html.agency .stock.card:hover::after { left: 6%; }
html.agency .stock.card::before, html.agency .build::before, html.agency .contact-grid .card::before { background: radial-gradient(circle, rgba(0,0,0,.26) 0 1px, transparent 1.6px) 0 0 / 13px 13px, repeating-radial-gradient(circle at 100% 0, transparent 0 19px, rgba(0,0,0,.05) 19px 20px); }
/* Agency legal pages */
.legal { max-width: 46rem; margin-inline: auto; text-align: left; }
html.agency .legal p, html.agency .legal li { white-space: normal; max-width: none; text-align: left; margin: 10px 0; line-height: 1.65; }
.legal h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 34px 0 4px; text-align: left; }
.legal ul { padding-left: 22px; }
.legal a { text-decoration-color: rgba(0,0,0,.4); }
.legal-note { padding: 14px 18px; border: 1px solid rgba(0,0,0,.2); background: #fff; }
/* Agency footer: all centred */
html.agency .footer-main { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; justify-items: center; align-items: start; text-align: center; gap: var(--space-lg) var(--space-2xl); }
html.agency .footer-brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; }
html.agency .footer-brand > *, html.agency .footer-brand p { align-self: center; text-align: center; margin-inline: auto; }
html.agency .footer .logo { margin-inline: auto; }
html.agency .footer-col { align-items: center; text-align: center; }
html.agency .footer-bottom { justify-content: center; text-align: center; }
@media (max-width: 40rem) { html.agency .footer-main { grid-template-columns: minmax(0, 1fr); } }
html.agency .legal h2 { text-align: left; }
html.agency .cta-inner h2, html.agency .cta-inner p { max-width: none; text-align: center; }
html.agency .cta-inner > div { display: flex; flex-direction: column; align-items: center; }

/* Pricing options: Starter (light smoke) and Pro (dark smoke) */
html.agency .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 920px; margin: 0 auto; }
html.agency .plan { position: relative; overflow: hidden; border: 1px solid #000; border-radius: 4px; text-align: center; isolation: isolate; }
html.agency .plan--light { background: #fff; color: #000; }
html.agency .plan--dark { background: #000; color: #fff; border-color: #000; }
html.agency .plan > canvas.smoke { position: absolute; inset: 0; z-index: 0; }
html.agency .plan-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px); height: 100%; }
html.agency .plan h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -.02em; }
html.agency .plan p { white-space: normal; margin: 0; }
html.agency .plan-for { opacity: .75; max-width: 28ch; }
html.agency .plan-price { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 6px 0 4px; }
html.agency .plan-price b { font-size: clamp(2.6rem, 5vw, 3.6rem); letter-spacing: -.04em; line-height: 1; font-weight: 600; }
html.agency .plan-price .from, html.agency .plan-price .per { opacity: .7; font-size: .95rem; }
html.agency .plan ul { list-style: none; padding: 0; margin: 8px 0 14px; width: 100%; display: flex; flex-direction: column; flex: 1; }
html.agency .plan li { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 0; border-top: 1px solid rgba(0,0,0,.14); white-space: normal; }
html.agency .plan--dark li { border-top-color: rgba(255,255,255,.2); }
html.agency .plan li svg { flex: none; }
html.agency .plan .btn { margin-top: auto; }
html.agency .plans-note { text-align: center; opacity: .6; margin-top: 18px; font-size: .9rem; white-space: normal; }
@media (max-width: 47.99rem) { html.agency .plans { grid-template-columns: minmax(0, 1fr); } }

/* Portfolio */
html.agency .folio { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: center; gap: 24px; }
html.agency .folio-card { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 36px 24px 28px; border: 1px solid #000; border-radius: 4px; background: #fff; color: #000; text-decoration: none; text-align: center; transition: box-shadow .25s ease, transform .25s ease; }
html.agency .folio-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(0,0,0,.35); }
html.agency .folio-logo { display: flex; align-items: center; justify-content: center; min-height: 110px; }
html.agency .folio-logo img { max-width: 220px; height: auto; }
html.agency .folio-card h3 { white-space: normal; }
html.agency .folio-card .more { font-weight: 600; }

/* Footer now has two link columns */
html.agency .footer-main { grid-template-columns: repeat(2, minmax(0, 220px)); }
@media (max-width: 40rem) { html.agency .footer-main { grid-template-columns: minmax(0, 1fr); } }
html.agency .folio-card .more { white-space: nowrap; font-size: .95rem; display: inline-flex; gap: 8px; align-items: center; }

/* Portfolio card: hero smoke, Visit / name / arrow */
html.agency .folio-card { position: relative; overflow: hidden; isolation: isolate; padding: 0; }
html.agency .folio-card > canvas.smoke { position: absolute; inset: 0; z-index: 0; }
html.agency .folio-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 24px 30px; }
html.agency .folio-logo { margin-bottom: 14px; }
html.agency .folio-visit { opacity: .65; font-size: .95rem; }
html.agency .folio-name { font-size: 1.35rem; letter-spacing: -.02em; font-weight: 600; }
html.agency .folio-arrow { display: inline-flex; margin-top: 10px; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 999px; background: #000; color: #fff; transition: transform .25s ease; }
html.agency .folio-card:hover .folio-arrow { transform: translateY(4px); }
html.agency .folio-arrow svg { width: 18px; height: 18px; transform: rotate(90deg); }

/* Portfolio card: hero smoke, visit text, arrow at the bottom */
html.agency .folio-card { position: relative; overflow: hidden; isolation: isolate; padding: 0; }
html.agency .folio-card > canvas.smoke { position: absolute; inset: 0; z-index: 0; }
html.agency .folio-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 24px 28px; width: 100%; }
html.agency .folio-card .visit { font-weight: 600; line-height: 1.35; opacity: .85; white-space: nowrap; }
html.agency .folio-card .arr { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #000; color: #fff; margin-top: 6px; transition: transform .25s ease; }
html.agency .folio-card:hover .arr { transform: translateY(3px); }
html.agency .folio-card .arr svg { width: 18px; height: 18px; transform: rotate(90deg); }

/* Pricing cards: every sentence on one line on desktop */
html.agency .plans { max-width: 1000px; }
@media (min-width: 48rem) { html.agency .plan p, html.agency .plan li span, html.agency .plan-for { white-space: nowrap; max-width: none; } }

/* Portfolio v3: two horizontal client cards, work type tag, Kuya "live soon" */
html.agency .folio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 900px; margin: 0 auto; justify-content: stretch; }
html.agency .folio-card { display: flex; flex-direction: column; text-align: center; padding: 0; }
html.agency .folio-in { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 22px 24px 28px; height: 100%; width: 100%; }
html.agency .folio-tag { align-self: center; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border: 1px solid #000; background: #fff; }
html.agency .folio-logo { display: flex; align-items: center; justify-content: center; min-height: 140px; margin: 22px 0 12px; }
html.agency .folio-logo img { max-width: 220px; height: auto; }
html.agency .folio-logo img.sq { width: 120px; max-width: 120px; height: 120px; border-radius: 0; }
html.agency .folio-name { font-size: 1.35rem; letter-spacing: -.02em; font-weight: 600; white-space: nowrap; }
html.agency .folio-foot { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 84px; justify-content: flex-end; }
html.agency .folio-visit { opacity: .65; font-size: .95rem; order: -1; }
html.agency .folio-live { display: inline-block; font-size: .85rem; font-weight: 600; padding: 8px 16px; background: #000; color: #fff; }
html.agency .folio-soon { cursor: default; }
html.agency .folio-soon:hover { transform: none; box-shadow: none; }
@media (max-width: 47.99rem) { html.agency .folio { grid-template-columns: minmax(0, 1fr); } }

/* Portfolio: one standard logo box for every client */
html.agency .folio-logo { width: 100%; height: 130px; min-height: 0; margin: 22px 0 14px; }
html.agency .folio-logo img, html.agency .folio-logo img.sq { width: auto; height: auto; max-width: 200px; max-height: 100px; object-fit: contain; }
html.agency .folio-logo img.sq { width: 100px; height: 100px; max-width: 100px; max-height: 100px; }

/* Partners: standard logo box, two partners side by side */
.partners .partner-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--space-xl) clamp(40px, 8vw, 96px); }
.partners .partner-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.partners .partner { display: flex; align-items: center; justify-content: center; width: 200px; height: 100px; line-height: 0; }
.partners .partner img { width: auto; height: auto; max-width: 200px; max-height: 100px; object-fit: contain; margin: 0; }
.partners .partner img.sq { width: 100px; height: 100px; }
.partners span.partner:hover { transform: none; }
.partners .partner-item .partner-url, .partners .partner-soon { margin-top: 0; font-size: var(--text-sm); }
.partners .partner-soon { opacity: .65; }
.partners.pre .partner-soon { opacity: 0; } .partners .partner-soon { transition: opacity .8s var(--ease-out) .3s; } .partners.in .partner-soon { opacity: .65; }
.partners .partner { box-shadow: none; background: transparent; }
.partners .partner img { box-shadow: none; }

/* Partners: logos at their own natural size (no standard box) */
.partners .partner-row { align-items: flex-end; }
.partners .partner { width: auto; height: auto; }
.partners .partner img { width: 240px; height: auto; max-width: 100%; max-height: none; }
.partners .partner img.sq { width: 120px; height: 120px; }

/* Dhow logo has a white background: let the smoke show through */
html.agency img.mx { mix-blend-mode: multiply; }
/* Three portfolio cards on wide screens */
@media (min-width: 64rem) { html.agency .folio { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; } }
@media (min-width: 48rem) and (max-width: 63.99rem) { html.agency .folio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html.agency img.mx { mix-blend-mode: normal; }
.partners .partner img.dh { width: 200px; }