/* ============================================================================
   DELTAQUANT · chat (owner: chat) · revision 2, light theme
   The floating Δ button, the transfer-specialist panel (a white glass dialog
   with ink text and an accent header dot), the consent card, the fallback lead
   form, the shared form components used by the business pages, and the
   REQUEST SAMPLES / CONTACT page. Reuses the tokens and components of site.css
   (.glass, .chip, .btn, .status, .field, .form__status, .hp). The panel keeps
   its own light palette inside every world, so it reads the same over the navy
   dock chapter as over a white section. Figures below are layout values only.
   ============================================================================ */

/* text tones: the core --warn / --ok tints are for dots, badges and borders; text set in them on
   white falls short of 4.5:1 (3.64:1 and 4.37:1), so every warning / success LINE in these
   components uses the deeper pair below (5.9:1 and 5.7:1 on white, ≥ 5.0:1 on --bg-2 and on
   the panel's glass over the navy dock) */
:root { --warn-ink: #8A5A12; --ok-ink: #0E7549; }

/* ------------------------------------------------------------ the Δ button */
.chat-fab {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 70;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1.5px solid rgba(16,88,152,.35); color: var(--accent);
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(11,18,32,.16), 0 1px 3px rgba(11,18,32,.08);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 500ms var(--ease), transform 600ms var(--ease-out), border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
}
.chat-fab.is-ready { opacity: 1; transform: none; pointer-events: auto; }
.chat-fab svg { width: 20px; height: 20px; transition: color var(--t-ui) var(--ease), transform 400ms var(--ease-out); }
.chat-fab:hover { border-color: var(--accent); background: #fff; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(11,18,32,.2), 0 1px 3px rgba(11,18,32,.08); }
.chat-fab[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.chat-fab__dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); border: 2px solid #fff; opacity: 0; transition: opacity 400ms var(--ease), background 400ms var(--ease); }
.chat-fab[data-state="online"] .chat-fab__dot { opacity: 1; background: var(--ok); }
.chat-fab[data-state="demo"] .chat-fab__dot { opacity: 1; background: var(--accent-2); }
html[data-world="navy"] .chat-fab { box-shadow: 0 12px 36px rgba(0,0,0,.45); border-color: rgba(255,255,255,.7); }
/* the chapters' bottom-right readouts make room for the button (chat.js sets html.has-chat):
   they step aside where there is room, and step up above it on narrow screens, so no HUD
   content is ever narrowed by the chat (the widest core card is 86vw at phone widths) */
html.has-chat .hud--br { right: calc(var(--gutter) + 72px); }
@media (max-width: 479.98px) {
  html.has-chat .hud--br { right: var(--gutter); bottom: calc(var(--gutter) + 72px); }
}

/* ------------------------------------------------------------ the panel */
.chat-panel {
  position: fixed; z-index: 80; right: var(--gutter); bottom: calc(var(--gutter) + 72px);
  width: min(430px, calc(100vw - 2 * var(--gutter)));
  height: min(680px, calc(100vh - 2 * var(--gutter) - 72px));
  height: min(680px, calc(100svh - 2 * var(--gutter) - 72px));
  display: flex; flex-direction: column; overflow: hidden;
  /* its own light palette, whatever the world behind it */
  --fg: var(--ink); --fg-2: var(--ink-2); --line: rgba(11,18,32,.12); --line-2: rgba(11,18,32,.07);
  color: var(--ink);
  background: rgba(255,255,255,.94); border: 1px solid rgba(11,18,32,.1); border-radius: 22px;
  backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 30px 80px rgba(11,18,32,.22), 0 2px 6px rgba(11,18,32,.06);
  opacity: 0; transform: translateY(14px) scale(.985); transform-origin: 100% 100%;
  transition: opacity 280ms var(--ease), transform 360ms var(--ease-out);
}
.chat-panel[hidden] { display: none; }
.chat-panel.is-open { opacity: 1; transform: none; }
/* over the navy dock chapter the panel stays white; the world's glass/chip/button overrides are cancelled inside it */
html[data-world="navy"] .chat-panel.glass { background: rgba(255,255,255,.96); border-color: rgba(255,255,255,.55); color: var(--ink); box-shadow: 0 30px 90px rgba(0,0,0,.5); }
html[data-world="navy"] .chat-panel .chip { background: #fff; border-color: var(--accent); color: var(--accent); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-world="navy"] .chat-panel .chip.is-active, html[data-world="navy"] .chat-panel .chip--fill { background: var(--accent); color: var(--on-accent); }
html[data-world="navy"] .chat-panel .btn--ghost { color: var(--accent); border-color: var(--accent); }
html[data-world="navy"] .chat-panel .icon-btn { background: #fff; color: var(--ink); border-color: var(--line); }
html[data-world="navy"] .chat-panel .accent, html[data-world="navy"] .chat-panel .eyebrow { color: var(--accent); }
@media (max-width: 599.98px) {
  .chat-panel { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; transform: translateY(24px); box-shadow: none; background: #fff; }
  .chat-panel.is-open { transform: none; }
  .chat-fab[aria-expanded="true"] { opacity: 0; pointer-events: none; }
  html.chat-open, html.chat-open body { overflow: hidden; }
}

/* header */
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--line-2); flex: 0 0 auto; background: rgba(255,255,255,.6); }
.chat-head__title { display: grid; gap: 7px; min-width: 0; }
.chat-title { margin: 0; font: 650 15px/1.2 var(--font-head); letter-spacing: -.015em; color: var(--ink); display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-title .delta { color: var(--accent); flex: 0 0 auto; width: 14px; height: 14px; display: inline-grid; place-items: center; }
.chat-title .delta svg { width: 14px; height: 14px; }
.chat-title__sep { color: var(--ink-3); font-weight: 400; }
.chat-status { margin: 0; color: var(--ink-2); }
.chat-status[data-state="checking"]::before { background: var(--ink-3); }
.chat-status[data-state="demo"]::before { background: var(--accent-2); }
.chat-status[data-state="offline"]::before { background: var(--warn); }
.chat-close { width: 38px; height: 38px; flex: 0 0 auto; }
.chat-close svg { width: 14px; height: 14px; }

/* body */
.chat-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chat-thread { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chat-thread[hidden] { display: none; }
.chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 8px; display: grid; align-content: start; gap: 16px; -webkit-overflow-scrolling: touch; }

/* messages */
.msg { max-width: 92%; display: grid; gap: 6px; animation: msg-in 360ms var(--ease-out) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg__who { font: 600 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.msg__body { font-size: 15px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.msg__body p { margin: 0; }
.msg__body p + p, .msg__body p + ul, .msg__body p + ol, .msg__body ul + p, .msg__body ol + p { margin-top: .7em; }
.msg__body ul, .msg__body ol { margin: 0; padding-left: 1.2em; }
.msg__body li + li { margin-top: .3em; }
.msg__body strong { font-weight: 650; color: var(--ink); }
.msg__body code { font-family: var(--font-mono); font-size: .9em; letter-spacing: 0; padding: .1em .35em; border-radius: 4px; background: var(--accent-tint); color: var(--accent-hover); }
.msg--bot { justify-self: start; }
.msg--bot .msg__who { color: var(--accent); }
.msg--user { justify-self: end; }
.msg--user .msg__who { text-align: right; }
.msg--user .msg__body { background: var(--accent-tint); border: 1px solid rgba(16,88,152,.16); border-radius: 16px 16px 4px 16px; padding: 10px 14px; white-space: pre-wrap; }
.msg--user .chip { margin-top: 2px; justify-self: end; }
.msg--note { justify-self: stretch; max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 10.5px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.msg--note::before { content: ""; flex: 0 0 14px; height: 1px; background: var(--line); }
.msg--note.is-ok { color: var(--ok-ink); }
.msg--note.is-warn { color: var(--warn-ink); }
.msg--note .mono-keep { text-transform: none; letter-spacing: .04em; color: var(--ink); }
.msg--note__link { text-transform: none; letter-spacing: .02em; font: 600 13px/1.4 var(--font-body); color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.msg--note__link:hover { color: var(--accent-hover); }
.msg[aria-busy="true"] .msg__body:empty { min-height: 1.4em; }

/* typing indicator: three dots, opacity only, never a bounce */
.typing { display: inline-flex; gap: 5px; align-items: center; height: 1.4em; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .25; animation: typing 1.2s var(--ease-in-out) infinite; }
.typing i:nth-child(2) { animation-delay: .18s; } .typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typing { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* starter chips */
.chat-starters { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 20px 14px; flex: 0 0 auto; }
.chat-starters[hidden] { display: none; }
.chat-chip, .chat-starter { text-transform: none; letter-spacing: .02em; font-size: 12.5px; font-weight: 500; font-family: var(--font-body); white-space: normal; text-align: left; line-height: 1.3; }
.chat-starter { cursor: pointer; transition: background var(--t-ui) var(--ease), color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease); }
.chat-starter:hover { background: var(--accent); color: var(--on-accent); transform: translateY(-1px); }

/* consent card */
.consent-card { justify-self: stretch; max-width: none; padding: 16px 18px; gap: 12px; background: #fff; border: 1.5px solid var(--accent); border-radius: 14px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.consent-card .label { color: var(--accent); }
.consent-card__q { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.consent-card__link { font: 600 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.consent-card__actions { display: flex; gap: 8px; }
.consent-card__answer { display: none; }
.consent-card.is-answered .consent-card__actions { display: none; }
.consent-card.is-answered .consent-card__answer { display: block; }

/* composer */
.chat-composer { flex: 0 0 auto; border-top: 1px solid var(--line-2); padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; background: rgba(255,255,255,.7); }
.chat-composer[hidden] { display: none; }
.chat-composer__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-composer__chips[hidden] { display: none; }
.chat-chip { gap: .6em; padding-right: .5em; }
.chat-chip__x { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: inherit; font-size: 15px; line-height: 1; transition: color var(--t-ui), background var(--t-ui); }
.chat-chip__x:hover { color: var(--ink); background: var(--accent-tint); }
.chat-composer textarea { width: 100%; resize: none; min-height: 48px; max-height: 160px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); line-height: 1.45; font-size: 15px; display: block; transition: border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease); }
.chat-composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(16,88,152,.15); outline: none; }
.chat-composer textarea::placeholder { color: var(--ink-2); opacity: 1; }
.chat-composer textarea[disabled] { opacity: .6; }
.chat-composer__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat-composer__meta { display: grid; gap: 4px; min-width: 0; }
.chat-count { font: 500 10px/1 var(--font-mono); letter-spacing: .12em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chat-count.is-near { color: var(--warn-ink); }
.chat-hint { font: 400 10px/1.4 var(--font-mono); letter-spacing: .06em; color: var(--ink-2); }
@media (max-width: 599.98px) { .chat-hint { display: none; } }

/* fallback form */
.chat-form { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 14px; align-content: start; }
.chat-form[hidden] { display: none; }
.chat-form__lede { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.chat-form .field--check label a { color: var(--accent); }
.chat-form .form__status { text-transform: none; letter-spacing: .06em; }
.chat-done { padding: 28px 20px; display: grid; gap: 12px; align-content: start; }
.chat-done[hidden] { display: none; }
.chat-done p { margin: 0; font-size: 15px; line-height: 1.55; }
.chat-done a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* motion preferences */
@media (prefers-reduced-motion: reduce) {
  .chat-fab, .chat-panel, .msg, .chat-starter { transition: none; animation: none; }
  .typing i { animation: none; opacity: .7; }
}
.reduced-motion .chat-fab, .reduced-motion .chat-panel, .reduced-motion .msg { transition: none; animation: none; }

/* ============================================================================
   Shared form + business components (rendered by js/request.js and
   js/business.js). Reuses .field / .form / .chip / .btn / .matrix / .card / .app /
   .docs-list from site.css and only adds what the modules need.
   ============================================================================ */

/* form */
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form legend { padding: 0; }
.form [hidden] { display: none !important; }
.form .form__row { align-items: start; }          /* a field with a note must not stretch its neighbour's control */
.radios { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.field .radio { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 400 15px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-select .chip { cursor: pointer; white-space: normal; text-align: left; line-height: 1.3; min-height: 40px; transition: background var(--t-ui) var(--ease), color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease); }
.chip-select .chip:hover { background: var(--accent-tint); }
.chip-select .chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.chip-select .chip[aria-pressed="true"]::before { content: "✓"; font-weight: 700; }
.chip-select .chip[aria-pressed="true"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.chip-select .chip__kind { font-weight: 500; opacity: .7; letter-spacing: .08em; }
.field input[readonly] { color: var(--ink-2); background: var(--bg-2); }
.field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.field__link { font: 600 11px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.field__link:hover { color: var(--accent-hover); }
.field__note { font: 400 12px/1.5 var(--font-mono); letter-spacing: .04em; color: var(--ink-2); margin: 0; }
.field__optional { font-weight: 500; letter-spacing: .08em; color: var(--ink-2); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.form__status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; text-transform: none; letter-spacing: .04em; font-size: 13px; }
.form__status.is-ok { color: var(--ok-ink); }
.form__status.is-err { color: var(--warn-ink); }
.form__status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form__status .btn { text-decoration: none; }
.form__alt { margin: 0; font: 400 13px/1.5 var(--font-body); color: var(--ink-2); }
.form__alt a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* product cards */
.matrix > div { min-width: 0; }
.matrix__sub { color: var(--ink-2); letter-spacing: .1em; }
.matrix .tbc { margin-left: .35em; color: var(--warn-ink); }
.matrix .tbc abbr { text-decoration: none; }
.card__title { margin: 8px 0 6px; }
.card .lede { font-size: 15px; margin: 0; }
.card__desc { margin: 0; color: var(--ink-2); }
.card__list { display: flex; flex-wrap: wrap; gap: 8px; }
.card__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.card__note { font: 400 12px/1.5 var(--font-mono); letter-spacing: .04em; color: var(--ink-2); margin: 0; }

/* applications grid */
.app__head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.app__name { margin: 0; }
.app__benefit { margin: 0; font-size: 14px; color: var(--ink-2); }
.app__body { display: grid; gap: 10px; }
.app__toggle { display: none; }   /* hover devices reveal on hover / focus; the toggle is the touch affordance */
/* touch screens: a closed card is compact and its content is collapsed and inert
   (no live link under a closed card); the Details button carries aria-expanded */
html.is-touch .app { cursor: pointer; min-height: 0; gap: 0; }
html.is-touch .app__toggle { display: inline-flex; align-items: center; gap: .5em; flex: 0 0 auto; margin: -6px -8px 0 0; padding: 6px 8px; border: 0; background: none; color: var(--accent); font: 600 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
html.is-touch .app__toggle svg { width: 14px; height: 14px; transition: transform 300ms var(--ease); }
html.is-touch .app.is-open .app__toggle { color: var(--ink); }
html.is-touch .app.is-open .app__toggle svg { transform: rotate(180deg); }
html.is-touch .app__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
html.is-touch .app__reveal { grid-template-rows: 0fr; gap: 0; visibility: hidden; pointer-events: none; transition: grid-template-rows 420ms var(--ease), opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s linear 420ms; }
html.is-touch .app__body { min-height: 0; overflow: hidden; padding-top: 0; transition: padding-top 420ms var(--ease); }
html.is-touch .app.is-open .app__reveal { grid-template-rows: 1fr; visibility: visible; pointer-events: auto; transition: grid-template-rows 480ms var(--ease-out), opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s; }
html.is-touch .app.is-open .app__body { padding-top: 16px; }

/* documentation desk and footer */
.docs-list .docs__name { font-size: 15px; }
.footer .stack a { display: block; width: max-content; max-width: 100%; }
.footer .label { display: block; }

/* motion preferences */
@media (prefers-reduced-motion: reduce) {
  html.is-touch .app__reveal, html.is-touch .app__body, html.is-touch .app__toggle svg, .chip-select .chip { transition: none; }
}
.reduced-motion .app__reveal, .reduced-motion .app__body, .reduced-motion .app__toggle svg { transition: none; }

/* ============================================================================
   REQUEST SAMPLES / CONTACT page (site/request.html + js/request.js)
   Opener: a still plate that crossfades in beside the headline; then the form
   (7 columns) and the contact card (5 columns, sticky on wide screens).
   ============================================================================ */
/* request.js fills these after load; their height is reserved so the sections below (and the footer) never jump */
.intents:empty { min-height: 44px; }
.request-form:empty { min-height: 2000px; }
@media (min-width: 900px) { .request-form:empty { min-height: 1500px; } }
.request-hero { padding: clamp(36px, 7vh, 96px) 0 clamp(28px, 5vh, 64px); background: linear-gradient(180deg, #fff 0%, var(--bg-2) 100%); overflow: hidden; }
.request-hero .grid { align-items: center; }
.request-hero__copy { display: grid; gap: 22px; align-content: center; }
.request-hero__copy > * { margin: 0; }
.request-hero__copy .h-display { font-size: clamp(42px, 6.4vw, 100px); }
.request-hero .reveal { transition-delay: calc(var(--i, 0) * 90ms); }
.request-hero__actions { gap: 12px; }
.request-hero__facts { gap: 8px; }
.request-hero__facts { min-height: 32px; } /* the chips render from specs after load: keep their row height reserved so the hero never reflows */
.request-hero__visual { min-width: 0; }
.request-plate { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-3); box-shadow: var(--shadow); view-transition-name: hero-bag; }
.request-plate img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transform: scale(1.04); transition: transform 2400ms var(--ease-out); } /* visible at once (largest paint); only a slow settle on arrival */
.request-plate.is-in img { opacity: 1; transform: none; }
/* arriving through a cross-document view transition: the plate carries view-transition-name: hero-bag
   so the home bag cross-fades into it, which only works when the plate is already opaque when the new
   page is captured. Its entrance is skipped on that one path: :active-view-transition covers the capture
   itself, .is-vt (added by request.js at pagereveal) keeps it shown once the transition is over. Two rules:
   a browser without the pseudo-class drops only the first. */
html:active-view-transition .request-plate, html:active-view-transition .request-plate img { transition: none; opacity: 1; transform: none; }
.request-plate.is-vt, .request-plate.is-vt img { transition: none; opacity: 1; transform: none; }
.request-plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(246,248,251,.28), transparent 38%); }
@media (max-width: 899px) {
  .request-hero { padding-top: clamp(28px, 5vh, 48px); }
  .request-hero__copy .h-display { font-size: clamp(38px, 11vw, 56px); }
  .request-hero__actions .btn { flex: 1 1 100%; }
  .request-plate { aspect-ratio: 16 / 10; }
}

.request { padding-top: clamp(28px, 5vh, 56px); background: var(--bg-2); }
.request__grid { row-gap: 32px; }
.request-card { background: #fff; border: 1px solid var(--line-2); border-radius: 24px; box-shadow: var(--shadow); padding: clamp(22px, 3vw, 44px); display: grid; gap: 28px; min-width: 0; }
/* the two cards enter once request.js has rendered them (they are taller than a viewport, so the
   intersection-based .reveal of the chapters would never show them): opacity + a short rise */
.request-card, .contact-card { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 800ms var(--ease-out); }
.contact-card { transition-delay: 120ms; }
.request-card.is-in, .contact-card.is-in { opacity: 1; transform: none; }
.reduced-motion .request-card, .reduced-motion .contact-card { opacity: 1; transform: none; transition: none; }
.request-card__head { display: grid; gap: 14px; }
.request-card__hint { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); min-height: 1.5em; }
.intents .chip { font-size: 12px; padding: 0 1.25em; min-height: 48px; cursor: pointer; transition: background var(--t-ui) var(--ease), color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease); }
.intents .chip:hover { background: var(--accent-tint); }
.intents .chip[aria-checked="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.intents .chip[aria-checked="true"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.intents .chip:focus-visible { outline-offset: 3px; }
@media (max-width: 599px) { .intents .chip { flex: 1 1 100%; justify-content: center; } }
.request-form .form__row { gap: 18px 20px; }
.request-form .btn--primary { min-height: 56px; padding: 0 2em; font-size: 14px; }
/* sending / sent: the button stays focusable (aria-disabled, see request.js) so keyboard focus is never
   dropped mid-submit; it reads as inactive in ink-2 on --bg-3 (6.7:1) rather than through opacity */
.request-form .btn--primary[disabled], .request-form .btn--primary[aria-disabled="true"] { background: var(--bg-3); border-color: var(--bg-3); color: var(--ink-2); opacity: 1; cursor: default; transform: none; box-shadow: none; }
.request-form .field--check label { font-size: 14px; color: var(--ink); line-height: 1.5; }
.request-form legend.label { margin-bottom: 8px; }
.request__aside { min-width: 0; }
.contact-card { background: #fff; border: 1px solid var(--line-2); border-radius: 24px; box-shadow: var(--shadow); padding: clamp(22px, 3vw, 40px); display: grid; gap: 22px; min-width: 0; }
@media (min-width: 900px) { .contact-card { position: sticky; top: calc(var(--nav-h) + 24px); } }
.contact-card > * { margin: 0; }
.contact-card__mail { display: inline-block; font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em; font-size: clamp(21px, 2vw, 28px); line-height: 1.15; color: var(--accent); overflow-wrap: anywhere; text-decoration: none; }
.contact-card__mail:hover { text-decoration: underline; text-underline-offset: 5px; }
.contact-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 12px 18px; margin: 0; }
.contact-card dt { font: 600 11px/1.6 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.contact-card dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.contact-card dd a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.contact-card__talk { padding-top: 22px; border-top: 1px solid var(--line-2); display: grid; gap: 12px; }
.contact-card__talk p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.contact-card__talk .btn { justify-self: start; }
.contact-card__facts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 480px) { .contact-card dl { grid-template-columns: 1fr; gap: 4px; } .contact-card dd + dt { margin-top: 10px; } }

@media (prefers-reduced-motion: reduce) {
  .request-plate img { transform: none; transition: opacity 400ms var(--ease); }
  .intents .chip, .chip-select .chip { transition: none; }
}
.reduced-motion .request-plate img { transform: none; transition: none; opacity: 1; }