/* Hallmark · shape: Bento Grid (draw 536d47) · genre: modern-minimal · theme: brand · redesign: full · job: hire
 * paper: oklch(99.2% 0.003 259) · accent: oklch(48.9% 0.170 258) · display: Archivo 800 at 118% width · body: Archivo 400 · hero: Banner (/ and inner pages; swapped from the drawn Corridor, the project photographs must reach the first screen) · nav: floating pill · footer: mast (swapped from letter close: 25 pages need their links, and the original logo anchors it) · signature: the record of shipped projects, photographed, as the first thing under the hero
 * axes: dark/grotesk-heavy/chromatic-amber · posture: full palette (field navy from the logo, signal brand blue, seal amber on the one primary control, ink navy) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: S, a centred type hero could open any studio; it sits on the logo's own navy and hands straight over to photographs of four shipped projects */
/* Hallmark · brand: India Informatics (spec 2026-11-13) · logo: /logo-transparent.png unmodified · copy: owner's words kept; reworded lines listed in the handoff */
/* Hallmark · waive 77 · the two-quote band on service pages holds two owner-written commitments of about 35 words each · scaling these service commitments to section size would set twelve lines of display type for one idea */
/* Hallmark · waive 59 · the home hero and the work bento share one navy field, split into two elements only so the hero stays one screen at 1920 · the 64px seam sits inside one band of navy, not between two sections */
/* Hallmark · dropped cta-title, how-title · ids of two sections on the previous homepage that no script or link reads; those sections were recomposed into the Banner and the closing band */
/* Hallmark · waive 78 · the privacy and terms pages are a Long Document of numbered clauses with inline heads · legal clauses read as a document, so their numbered heads stay at reading size */
/* Hallmark · dismissed F15 · the 1152px width on the legal pages is the 70ch reading measure of .legal inside the one 1440px container, not a second container */
/* Hallmark · waive 49b · index table links are full project names from client records (Sponsorship Relation Information System), two lines at most at 320 · shortening a client's project name would misstate the record */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: calc(72px + 2 * var(--space-sm)); }
@media (max-width: 40rem) { :root { --nav-h: calc(60px + 2 * var(--space-sm)); } }

@font-face { font-family: "Archivo"; src: url("/assets/fonts/Archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

html { scroll-padding-top: var(--space-4xl); }
body { font-size: 1.0625rem; line-height: 1.6; }
h1, h2 { font-stretch: var(--display-stretch); }
h3 { font-weight: 600; letter-spacing: -0.01em; }
strong, b { font-weight: 600; }
a { text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.on-field { background: var(--color-field); color: var(--color-on-field); --color-focus: var(--color-focus-field); }
.on-field a { color: var(--color-on-field); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-seal); color: var(--color-seal-ink); }
.skip:focus-visible { top: var(--space-md); }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-pill); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--seal { background: var(--color-seal); color: var(--color-seal-ink); }
.on-field .btn--seal { color: var(--color-seal-ink); }
.btn--seal:hover { background: var(--color-seal-hover); }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-muted); }
.btn--quiet:hover { border-color: var(--color-ink); background: var(--color-paper-2); }
.on-field .btn--quiet { color: var(--color-on-field); border-color: var(--color-field-rule); }
.on-field .btn--quiet:hover { border-color: var(--color-on-field-2); background: var(--color-field-2); }
.btn svg, .more svg { width: 18px; height: 18px; flex-shrink: 0; }
.more { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 600; text-decoration: underline; text-underline-offset: 0.3em; }
.more:hover { text-decoration-thickness: 2px; }
.more:active { opacity: 0.8; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } }

/* ---------- Nav: floating pill ---------- */
.site-nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); padding-block: var(--space-sm); pointer-events: none; }
.pill { pointer-events: auto; display: flex; align-items: center; gap: var(--space-lg); min-height: 72px; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); background: var(--color-field); color: var(--color-on-field); border: 1px solid var(--color-field-rule); border-radius: var(--radius-pill); --color-focus: var(--color-focus-field); }
.logo { display: block; flex-shrink: 0; border-radius: var(--radius-card); }
.logo img { height: 60px; width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--space-2xs); margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.nav-links a, .nav-links summary { display: flex; align-items: center; gap: var(--space-2xs); min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); color: var(--color-on-field-2); text-decoration: none; font-weight: 400; cursor: pointer; list-style: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.nav-links summary::-webkit-details-marker { display: none; }
.nav-links a:hover, .nav-links summary:hover, .nav-links a[aria-current="page"], .nav-links .is-current > summary { color: var(--color-on-field); background: var(--color-field-2); }
.nav-links a:active, .nav-links summary:active { opacity: 0.8; }
.caret { width: 12px; height: 12px; transition: transform var(--dur-short) var(--ease-out); }
details[open] > summary .caret { transform: rotate(180deg); }
.dropdown { position: relative; }
.dropdown-panel { color: var(--color-on-field); position: absolute; top: calc(100% + var(--space-md)); left: calc(-1 * var(--space-xl)); width: min(640px, 80vw); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); padding: var(--space-xs); background: var(--color-field); border: 1px solid var(--color-field-rule); border-radius: var(--radius-card); z-index: var(--z-dropdown); }
.dropdown-panel a { display: flex; min-height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-card); color: var(--color-on-field); font-weight: 600; white-space: nowrap; }
.dropdown-panel b, .dropdown-panel-unused { display: block; color: var(--color-on-field); font-weight: 600; }
.dropdown-panel span, .dropdown-panel-unused2 { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); font-weight: 400; color: var(--color-on-field-2); }
.dropdown-panel .all { grid-column: 1 / -1; color: var(--color-on-field); font-weight: 600; }
.pill .btn { margin-left: var(--space-xs); }
.menu { display: none; margin-left: auto; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); background: var(--color-field-2); color: var(--color-on-field); font-weight: 600; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--color-field-rule); }
.menu-panel { color: var(--color-on-field); position: fixed; inset: calc(var(--nav-h) + var(--space-xs)) var(--space-sm) auto; max-height: calc(100dvh - var(--nav-h) - var(--space-lg)); overflow-y: auto; padding: var(--space-md); background: var(--color-field); border: 1px solid var(--color-field-rule); border-radius: var(--radius-card); }
.menu-panel a { white-space: nowrap; display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-sm); border-bottom: 1px solid var(--color-field-rule); color: var(--color-on-field); text-decoration: none; font-size: var(--text-lg); font-weight: 600; }
.menu-panel a.sub { font-size: var(--text-md); font-weight: 400; color: var(--color-on-field-2); padding-left: var(--space-xl); }
.menu-panel .btn { margin-top: var(--space-md); width: 100%; border-bottom: 0; font-size: var(--text-md); }

/* ---------- Hero: Banner with the work bento (home) ---------- */
.banner { padding-block: var(--space-3xl) var(--space-2xl); }
.work-band { padding-bottom: var(--section-gap-s); }
.banner-copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--space-3xl); align-items: end; }
.banner-copy h1 { font-size: clamp(2.75rem, 4.2vw + 0.5rem, 4.75rem); line-height: 1; max-width: 16ch; }
.banner-side .lead { color: var(--color-on-field-2); }
.banner-side .actions { margin-top: var(--space-lg); }
.on-field .tile { outline: 1px solid var(--color-field-rule); outline-offset: -1px; }
.on-field .foot-link .more { color: var(--color-on-field); }
.hero { margin-top: calc(-1 * var(--nav-h)); padding-top: var(--nav-h); }
.corridor { min-height: calc(90dvh - var(--nav-h)); display: grid; place-items: center; text-align: center; padding-block: var(--space-3xl) var(--space-3xl); }
.corridor-inner { max-width: min(100%, 72rem); display: grid; justify-items: center; gap: var(--space-lg); }
.corridor h1 { font-size: clamp(2.75rem, 5vw + 0.5rem, 5.25rem); line-height: 1; max-width: 22ch; }
.corridor .lead { color: var(--color-on-field-2); }
.corridor .actions { justify-content: center; margin-top: var(--space-xs); }

/* ---------- Page head (inner pages): Banner ---------- */
.page-head { padding-block: var(--space-3xl) var(--space-xl); }
.page-head + .section { padding-top: var(--space-xl); }
.hero.page-head { padding-top: calc(var(--nav-h) + var(--space-2xl)); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; padding: 0; margin: 0 0 var(--space-xl); font-size: var(--text-sm); color: var(--color-on-field-2); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--color-field-rule); }
.crumbs a { color: var(--color-on-field-2); }
.page-head h1 { font-size: var(--text-display-s); max-width: 22ch; }
.page-head .lead { margin-top: var(--space-lg); color: var(--color-on-field-2); }
.page-head .actions { margin-top: var(--space-xl); }
.head-logo { height: 56px; width: auto; margin-bottom: var(--space-lg); padding: var(--space-xs) var(--space-sm); background: var(--color-paper); border-radius: var(--radius-card); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-lg) var(--gap-columns); margin: var(--space-2xl) 0 0; padding-top: var(--space-lg); border-top: 1px solid var(--color-field-rule); }
.facts dt { font-size: var(--text-sm); color: var(--color-on-field-2); }
.facts dd { margin: var(--space-2xs) 0 0; font-weight: 600; }
.services-line { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-on-field-2); max-width: 90ch; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-gap); }
.section--s { padding-block: var(--section-gap-s); }
.section--l { padding-block: var(--section-gap-l); }
.band { background: var(--color-paper-2); }
.head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head h2 { grid-column: 1 / 7; }
.head .lead { grid-column: 8 / 13; color: var(--color-ink-2); }
.on-field .head .lead { color: var(--color-on-field-2); }
.head--stack h2, .head--stack .lead { grid-column: 1 / 9; }
.foot-link { margin-top: var(--space-2xl); }

/* ---------- Bento of work ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(300px, auto); gap: var(--gap-columns); }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; border-radius: var(--radius-card); overflow: hidden; background: var(--color-field); color: var(--color-on-field); text-decoration: none; isolation: isolate; transition: transform var(--dur-short) var(--ease-out); }
.tile:hover { transform: translateY(-2px); }
.tile:active { transform: translateY(0); }
.tile:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.tile .pic { position: absolute; inset: 0; z-index: 0; margin: 0; }
.tile .pic img { width: 100%; height: 100%; object-fit: cover; }
.tile .plate { position: relative; z-index: 2; margin: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--color-field); border-radius: var(--radius-card); max-width: 30rem; }
.tile .client { display: block; font-size: var(--text-sm); color: var(--color-on-field-2); }
.tile h3 { margin-top: var(--space-2xs); font-size: var(--text-title); color: var(--color-on-field); }
.tile h3 { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-md); }
.tile h3 svg { width: 24px; height: 24px; flex-shrink: 0; transition: transform var(--dur-short) var(--ease-out); }
.tile:hover h3 svg { transform: translateX(4px); }
.t-8x2 { grid-column: span 8; grid-row: span 2; }
.tile:has(.chattile), .tile:has(.flowtile) { min-height: 400px; }
.t-4 { grid-column: span 4; }
.t-5 { grid-column: span 5; }
.t-7 { grid-column: span 7; }
.t-6 { grid-column: span 6; }
.t-3 { grid-column: span 3; }
.flowtile { position: absolute; inset: 0; z-index: 0; padding: var(--space-xl) var(--space-xl) var(--space-4xl); background: var(--color-field-2); }
.flowtile ol { list-style: none; margin: 0; padding: 0; counter-reset: f; }
.flowtile li { counter-increment: f; display: flex; gap: var(--space-md); align-items: baseline; padding-block: var(--space-xs); border-bottom: 1px solid var(--color-field-rule); font-size: var(--text-lg); font-weight: 600; }
.flowtile li::before { content: counter(f); min-width: 1.5em; color: var(--color-seal); font-variant-numeric: tabular-nums; }
.chattile { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl) var(--space-lg) var(--space-4xl); background: var(--color-chat-ground); color: var(--color-ink); }
.bubble { max-width: 85%; margin: 0; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-chat-them); font-size: var(--text-sm); line-height: 1.4; }
.bubble--me { align-self: flex-end; background: var(--color-chat-me); }
.bubble--wait { color: var(--color-ink-2); }
.credit { position: absolute; right: var(--space-sm); top: var(--space-sm); z-index: 2; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-card); background: var(--color-field); color: var(--color-on-field-2); font-size: var(--text-xs); }

/* ---------- Product split (ContentHub) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.split h2 { font-size: var(--text-section); }
.split .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.checks { list-style: none; margin: var(--space-xl) 0; padding: 0; border-top: 1px solid var(--color-rule); }
.checks li { display: flex; gap: var(--space-sm); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.checks svg { width: 20px; height: 20px; margin-top: var(--space-2xs); flex-shrink: 0; color: var(--color-accent); }
.shot { margin: 0; }
.shot-frame { aspect-ratio: 16 / 10.5; border-radius: var(--radius-card); background: var(--color-paper-3); overflow: hidden; }
.shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top left; outline: 1px solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; }
.shot figcaption, .caption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.on-field .caption { color: var(--color-on-field-2); }
.shots-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.shots-pair .shot-frame { aspect-ratio: 4 / 3; }

/* ---------- Rows (services, capabilities, challenges) ---------- */
.rows { list-style: none; margin: 0; padding: 0; counter-reset: r; border-top: 1px solid var(--color-rule); }
.rows > li { counter-increment: r; border-bottom: 1px solid var(--color-rule); }
.row { display: grid; grid-template-columns: 3rem minmax(0, 5fr) minmax(0, 6fr) 2rem; gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); color: inherit; text-decoration: none; }
.rows--num .row::before { content: counter(r, decimal-leading-zero); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-accent); }
.rows:not(.rows--num) .row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.row h3 { font-size: var(--text-title); }
.row p { color: var(--color-ink-2); }
.row svg { width: 24px; height: 24px; align-self: center; justify-self: end; transition: transform var(--dur-short) var(--ease-out); }
a.row:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a.row:hover svg { transform: translateX(4px); }
a.row:active { opacity: 0.85; }
.on-field .rows, .on-field .rows > li { border-color: var(--color-field-rule); }
.on-field .rows--num .row::before { color: var(--color-seal); }
.on-field .row p { color: var(--color-on-field-2); }

/* ---------- Statements and quotes ---------- */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.quote { margin: 0; padding-top: var(--space-lg); border-top: 3px solid var(--color-seal); }
.quote p { font-size: var(--text-xl); line-height: 1.4; font-weight: 400; max-width: 48ch; }

/* ---------- Features (case studies) ---------- */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3xl); border-top: 1px solid var(--color-rule); }
.feature { padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.feature:last-child:nth-child(odd) { grid-column: 1 / -1; }
.feature:last-child:nth-child(odd) p { max-width: 75ch; }
.feature .ico { width: 24px; height: 24px; color: var(--color-accent); margin-bottom: var(--space-md); }
.feature h3 { margin-bottom: var(--space-sm); }
.feature p { color: var(--color-ink-2); }
.feature p + p { margin-top: var(--space-sm); }
.ticks { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: var(--space-xs); color: var(--color-ink-2); }
.ticks li { position: relative; padding-left: var(--space-lg); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 10px; height: 2px; background: var(--color-accent); }
.on-field .ticks { color: var(--color-on-field-2); }
.on-field .ticks li::before { background: var(--color-seal); }
.prose p { color: var(--color-ink-2); }
.prose p + p { margin-top: var(--space-md); }
.on-field .prose p { color: var(--color-on-field-2); }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-lg) var(--space-3xl); }
.two + .two { margin-top: var(--space-3xl); padding-top: var(--space-3xl); border-top: 1px solid var(--color-rule); }
.wide-photo { margin: 0; }
.wide-photo .frame { aspect-ratio: 21 / 9; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-3); }
.wide-photo img { width: 100%; height: 100%; object-fit: cover; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-xl) var(--gap-columns); counter-reset: s; }
.steps:has(> li:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps li { counter-increment: s; padding-top: var(--space-md); border-top: 2px solid var(--color-ink); }
.steps li::before { content: counter(s); display: block; margin-bottom: var(--space-md); font: 800 var(--text-3xl)/1 var(--font-display); font-stretch: var(--display-stretch); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.steps h3 { margin-bottom: var(--space-xs); }
.steps p { color: var(--color-ink-2); }
.on-field .steps li { border-top-color: var(--color-on-field); }
.on-field .steps li::before { color: var(--color-seal); }
.on-field .steps p { color: var(--color-on-field-2); }
.note { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 70ch; }

/* ---------- Index table ---------- */
.index { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.index th { text-align: left; font-weight: 400; font-size: var(--text-sm); color: var(--color-ink-2); padding: 0 var(--space-md) var(--space-sm) 0; border-bottom: 1px solid var(--color-ink); white-space: nowrap; }
.index td { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: 1px solid var(--color-rule); vertical-align: baseline; color: var(--color-ink-2); }
.index td:first-child { color: var(--color-ink); font-weight: 600; }
.index td a { font-weight: 600; color: var(--color-ink); }
.index .num { white-space: nowrap; }
.tech th { width: 40%; color: var(--color-ink); font-size: var(--text-md); font-weight: 600; border-bottom: 1px solid var(--color-rule); padding-block: var(--space-md); white-space: normal; }

/* ---------- Contact close ---------- */
.close { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--space-3xl); align-items: end; }
.close h2 { font-size: var(--text-display-s); }
.close .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.on-field .close .lead { color: var(--color-on-field-2); }
.contact-list { display: grid; gap: var(--space-lg); margin: 0; }
.contact-list dt { font-size: var(--text-sm); color: var(--color-ink-2); }
.on-field .contact-list dt { color: var(--color-on-field-2); }
.contact-list dd { margin: var(--space-2xs) 0 0; font-size: var(--text-lg); font-weight: 600; }
.contact-list dd a { overflow-wrap: anywhere; }
.close .actions { margin-top: var(--space-xl); }
.close-more { margin-top: var(--space-3xl); }

/* ---------- Related links ---------- */
.related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.related a { display: grid; gap: var(--space-xs); padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); text-decoration: none; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.related a:hover { border-color: var(--color-ink); background: var(--color-paper-2); }
.related a:active { opacity: 0.85; }
.related small { font-size: var(--text-sm); color: var(--color-ink-2); }
.related h3 { display: flex; justify-content: space-between; gap: var(--space-md); align-items: center; }
.related h3 svg { width: 24px; height: 24px; flex-shrink: 0; }
.related p { color: var(--color-ink-2); }

/* ---------- Form ---------- */
.form-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-3xl); align-items: start; }
.form { display: grid; gap: var(--space-lg); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.field { display: grid; gap: var(--space-xs); }
.field label { font-weight: 600; }
.hint { font-size: var(--text-sm); color: var(--color-ink-2); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; }
.field textarea { min-height: 180px; resize: vertical; line-height: 1.5; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -3px; }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.err { min-height: 1lh; font-size: var(--text-sm); color: var(--color-error); font-weight: 600; }
.form-status { min-height: 1lh; font-weight: 600; color: var(--color-ink); }

/* ---------- Legal ---------- */
.legal { max-width: 62ch; }
.legal h2 { font-size: var(--text-xl); margin: var(--space-2xl) 0 var(--space-sm); font-stretch: 100%; }
.legal p { color: var(--color-ink-2); }
.legal h2:first-child { margin-top: 0; }
.legal p + p { margin-top: var(--space-sm); }

/* ---------- Footer: mast ---------- */
.site-footer { padding-block: var(--space-3xl) var(--space-xl); }
.mast { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--space-2xl) var(--gap-columns); padding-bottom: var(--space-2xl); border-bottom: 1px solid var(--color-field-rule); }
.mast-logo img { height: 112px; width: auto; }
.mast-line { margin-top: var(--space-lg); color: var(--color-on-field-2); max-width: 32ch; }
.site-footer h2 { font-size: var(--text-md); font-stretch: 100%; letter-spacing: 0; margin-bottom: var(--space-md); color: var(--color-on-field); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.site-footer a { color: var(--color-on-field-2); text-decoration: none; }
.site-footer a:hover { color: var(--color-on-field); text-decoration: underline; }
.site-footer address { font-style: normal; color: var(--color-on-field-2); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-xl); padding-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-on-field-2); }
.footer-base nav { display: flex; gap: var(--space-lg); }
.credits { font-size: var(--text-xs); }

/* ---------- Responsive ---------- */
@media (max-width: 75rem) {
  .nav-links a, .nav-links summary { padding: 0 var(--space-xs); }
  .t-3 { grid-column: span 4; }
}
@media (max-width: 64rem) {
  .nav-links, .pill > .btn { display: none; }
  .menu { display: block; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-8x2 { grid-column: 1 / -1; grid-row: span 1; min-height: 420px; }
  .t-4, .t-5, .t-7, .t-6, .t-3 { grid-column: span 1; }
  .mast { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mast > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 60rem) {
  .head, .split, .close, .form-grid, .two, .shots-pair { grid-template-columns: minmax(0, 1fr); }
  .head h2, .head .lead, .head--stack h2, .head--stack .lead { grid-column: 1 / -1; }
  .split, .close, .form-grid { gap: var(--space-xl); }
  .row, .rows--num .row { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-xs) var(--space-md); }
  .rows:not(.rows--num) .row { grid-template-columns: minmax(0, 1fr); }
  .row p { grid-column: 2; }
  .rows:not(.rows--num) .row p { grid-column: 1; }
  .row svg { display: none; }
  .features, .quotes, .related { grid-template-columns: minmax(0, 1fr); }
  .steps:has(> li:nth-child(6)) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .banner-copy { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .logo img { height: 40px; }
  .pill { min-height: 60px; padding-left: var(--space-md); }
  .hero.page-head { padding-top: calc(var(--nav-h) + var(--space-xl)); }
  .menu-panel { inset: calc(var(--nav-h) + var(--space-xs)) var(--space-sm) auto; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .t-8x2 { min-height: 360px; }
  .form-row, .mast { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; }
  .index thead { display: none; }
  .index tr { display: grid; padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
  .index td { border: 0; padding: 0; }
}