/* ============================================================
   Octomatica design language v2: components + section patterns.
   Load after tokens.css. Every value is a token. Class names follow
   references/patterns.md; each pattern comes from a section of the
   live octomatica.ru.

   Composition rule: group content with type scale, space, hairline
   rules, tinted bands and colour fields. A hairline panel (.board,
   .brief) is used at most for a data table and the closing CTA.
   The header and the hero NEVER get a border, an inset or a radius.
   ============================================================ */

/* ── Layout ── */
.shell { width: var(--shell); margin-inline: auto; }
.section { padding-block: var(--section-pad); }
.section-tight { padding-block: calc(var(--section-pad) * 0.6); }
/* Full-bleed tinted band (the site's process band): wrap a .shell inside. */
.band { background: radial-gradient(circle at 10% 18%, var(--accent-faint), transparent 30%), var(--surface-2); }
/* Full-bleed dark field. Headings and text flip to --on-ink. */
.band-ink { background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent-bright) 22%, transparent), transparent 34%), var(--ink-field); color: var(--on-ink); }
.band-ink .muted, .band-ink .lead { color: var(--on-ink-muted); }
.band-ink .eyebrow { color: var(--accent-on-dark); }
.band-ink .rule-list > *, .band-ink .index-list > li, .band-ink .kv > div { border-color: rgba(241, 243, 238, 0.16); }

/* ── Type ── */
.display { font-size: var(--fs-display); font-weight: 600; line-height: 0.94; letter-spacing: var(--tr-display); text-wrap: balance; }
.h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 0.98; letter-spacing: var(--tr-h2); text-wrap: balance; }
.h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: var(--tr-h3); text-wrap: balance; }
.h4 { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.lead { color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; text-wrap: pretty; }
.body-l { font-size: 18px; line-height: 1.55; color: var(--muted-strong); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.eyebrow { display: block; margin-bottom: 18px; color: var(--accent-deep); font-size: var(--fs-micro); font-weight: 800; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; }
.label { color: var(--muted); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.num { font-size: var(--fs-num); font-weight: 700; line-height: 0.9; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.accent { color: var(--accent-deep); }
.text-link { display: inline-flex; gap: 6px; align-items: baseline; font-weight: 600; transition: color 180ms ease; }
.text-link::after { content: "\2192"; transition: transform 180ms var(--ease-out); }
.text-link:hover { color: var(--accent-deep); }
.text-link:hover::after { transform: translateX(3px); }
.legal { margin-top: 16px; color: var(--muted); font-size: var(--fs-small); }
.legal a { border-bottom: 1px solid currentColor; }

/* ── Buttons ── */
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; transition: transform 180ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 220ms ease; }
.button:active { transform: scale(0.97); }
.button-accent { background: var(--accent-bright); color: var(--accent-ink); }
.button-accent:hover { background: var(--accent); transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 28%, transparent); }
.button-dark { background: var(--ink); color: var(--bg); }
.button-dark:hover { transform: translateY(-1px); }
.button-glass { border-color: color-mix(in srgb, var(--ink) 18%, transparent); background: color-mix(in srgb, var(--bg) 56%, transparent); color: var(--ink); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.button-glass:hover { background: color-mix(in srgb, var(--bg) 80%, transparent); }
.button-small { min-height: 40px; padding-inline: 16px; font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 34px; }
@media (max-width: 760px) { .actions-stack { flex-direction: column; align-items: stretch; width: 100%; } }

/* ── Header: full width, no border, no box. Transparent over the hero,
      glass once scrolled (site.js adds .is-scrolled). ── */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--header-height); transition: background-color 220ms var(--ease-out), box-shadow 220ms ease, color 220ms ease; }
.site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 84%, transparent); box-shadow: 0 10px 34px color-mix(in srgb, var(--ink) 6%, transparent); backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%); }
.header-inner { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; color: inherit; font-size: 25px; font-weight: 800; letter-spacing: -0.06em; line-height: 1; }
.wordmark::before { content: ""; width: 1.1em; height: 1.1em; background: var(--brand-mark) center / contain no-repeat; }
.nav-links { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 600; }
.nav-links a { transition: color 180ms ease; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--accent-deep); }
.header-actions { display: flex; align-items: center; gap: 14px; }
/* Over an ink hero before scroll: light text, light mark. */
.site-header.on-ink:not(.is-scrolled) { color: var(--on-ink); }
.site-header.on-ink:not(.is-scrolled) .wordmark::before { background-image: var(--brand-mark-on-dark); }
.site-header.on-ink:not(.is-scrolled) .button-dark { background: var(--on-ink); color: var(--ink-field); }
@media (max-width: 900px) { .nav-links { display: none; } }
@media (max-width: 760px) { .wordmark { font-size: 20px; } }
@supports not (backdrop-filter: blur(4px)) { .site-header.is-scrolled { background: var(--bg); } }

/* ── Hero: edge to edge. No margin, no border, no radius, no card.
      .hero          = full-bleed image scene + wash, centred copy (the site's hero)
      .hero-left     = same scene, copy aligned left in the shell
      .hero-field    = no image: a CSS wash with folded light (use when no image fits)
      .hero-ink      = dark field; pair with .site-header.on-ink
      .hero-compact  = shorter, for sub-pages and offers ── */
.hero { position: relative; display: grid; min-height: min(860px, 100svh); place-items: center; overflow: hidden; isolation: isolate; padding-top: var(--header-height); background: var(--surface-2); }
.hero-compact { min-height: min(700px, 92svh); }
.hero-media, .hero-wash { position: absolute; inset: 0; z-index: -2; }
.hero-media { overflow: hidden; }
/* The site mutes any hero image into its sage-grey palette; keep this filter so a
   generated or client image reads as part of the language. */
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; filter: var(--hero-filter, saturate(0.26) contrast(0.92) brightness(1.02) sepia(0.08) hue-rotate(62deg)); transform: scale(1.035); }
.hero-wash { z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 78%, transparent), color-mix(in srgb, var(--surface-2) 30%, transparent) 42%, color-mix(in srgb, var(--surface-2) 70%, transparent)), radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--bg) 93%, transparent), transparent 58%); }
.hero-content { display: grid; width: min(940px, calc(100% - 48px)); justify-items: center; padding-block: 70px; text-align: center; }
.hero-content .lead { max-width: 660px; margin-top: 28px; color: var(--muted-strong); text-wrap: balance; }
.hero-left { place-items: end start; }
.hero-left .hero-content { width: var(--shell); margin-inline: auto; justify-items: start; padding-block: 90px 80px; text-align: left; }
.hero-left .hero-wash { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 45%, transparent 80%), linear-gradient(0deg, color-mix(in srgb, var(--bg) 60%, transparent), transparent 40%); }
.hero-field { background:
  radial-gradient(ellipse 70% 55% at 50% 45%, var(--bg), transparent 70%),
  radial-gradient(circle at 12% 88%, var(--accent-soft), transparent 36%),
  radial-gradient(circle at 92% 8%, var(--accent-faint), transparent 30%),
  repeating-linear-gradient(115deg, transparent 0 46px, color-mix(in srgb, var(--ink) 4%, transparent) 46px 47px),
  var(--surface-2); }
.hero-ink { background: var(--ink-field); color: var(--on-ink); }
.hero-ink .hero-wash { background: linear-gradient(180deg, rgba(17, 20, 22, 0.72), rgba(17, 20, 22, 0.34) 46%, rgba(17, 20, 22, 0.82)), radial-gradient(circle at 50% 42%, rgba(32, 38, 41, 0.5), transparent 58%); }
.hero-ink .hero-media img { filter: saturate(0.26) contrast(0.9) brightness(0.62) hue-rotate(62deg); }
.hero-ink .hero-content .lead { color: var(--on-ink-muted); }
.hero-ink .eyebrow { color: var(--accent-on-dark); }
.hero-ink .button-glass { border-color: rgba(241, 243, 238, 0.22); background: rgba(17, 20, 22, 0.44); color: var(--on-ink); }
.hero-stamp { position: absolute; right: 24px; bottom: 24px; z-index: 2; display: grid; width: 78px; height: 78px; place-items: center; border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.28)), rgba(242, 243, 240, 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 18px 44px rgba(35, 39, 38, 0.12); backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%); }
.hero-stamp::before { content: ""; width: 46px; height: 46px; background: var(--brand-mark) center / contain no-repeat; }
.hero-ink .hero-stamp::before { background-image: var(--brand-mark-on-dark); }
.hero-ink .hero-stamp { background: linear-gradient(145deg, rgba(241, 243, 238, 0.12), rgba(241, 243, 238, 0.035)), rgba(17, 20, 22, 0.42); box-shadow: inset 0 1px 0 rgba(241, 243, 238, 0.16); }
@media (max-width: 760px) {
  .hero { min-height: 100svh; }
  .hero-content { width: calc(100% - 32px); padding-block: 50px; }
  .hero .display { font-size: clamp(40px, 11vw, 48px); line-height: 0.97; }
  .hero-content .lead { margin-top: 22px; font-size: 16px; }
  .hero-stamp { right: 14px; bottom: 14px; width: 54px; height: 54px; border-radius: 16px; }
  .hero-stamp::before { width: 32px; height: 32px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero:not(.hero-ink) .hero-wash { background: linear-gradient(180deg, rgba(17, 20, 22, 0.72), rgba(17, 20, 22, 0.34) 46%, rgba(17, 20, 22, 0.78)), radial-gradient(circle at 50% 42%, rgba(32, 38, 41, 0.52), transparent 58%); }
  :root:not([data-theme="light"]) .hero:not(.hero-ink) .hero-media img { filter: saturate(0.26) contrast(0.9) brightness(0.62) hue-rotate(62deg); }
  :root:not([data-theme="light"]) .hero-stamp { background: rgba(17, 20, 22, 0.42); box-shadow: inset 0 1px 0 rgba(241, 243, 238, 0.16); }
}
:root[data-theme="dark"] .hero:not(.hero-ink) .hero-wash { background: linear-gradient(180deg, rgba(17, 20, 22, 0.72), rgba(17, 20, 22, 0.34) 46%, rgba(17, 20, 22, 0.78)), radial-gradient(circle at 50% 42%, rgba(32, 38, 41, 0.52), transparent 58%); }
:root[data-theme="dark"] .hero:not(.hero-ink) .hero-media img { filter: saturate(0.26) contrast(0.9) brightness(0.62) hue-rotate(62deg); }

/* ── Section intros ── */
/* .split: big heading column + content column (compare, FAQ, context). */
.split { display: grid; grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr); align-items: start; gap: clamp(44px, 8vw, 120px); }
.split > :first-child .lead { margin-top: 22px; max-width: 460px; }
.split-sticky > :first-child { position: sticky; top: calc(var(--header-height) + 32px); }
/* .intro-row: heading left, a short paragraph + link bottom-right (the learning block). */
.intro-row { display: grid; grid-template-columns: 1fr 0.6fr; align-items: end; gap: 60px; margin-bottom: 44px; }
.intro-row > :last-child { display: grid; gap: 16px; }
/* .intro: heading + lead stacked, left aligned. */
.intro { max-width: 820px; margin-bottom: 48px; }
.intro .lead { margin-top: 22px; max-width: 640px; }
@media (max-width: 1100px) { .split, .intro-row { grid-template-columns: 1fr; gap: 28px; } .split-sticky > :first-child { position: static; } }

/* ── Rule list: items separated by a top hairline, never boxed. --cols sets columns. ── */
.rule-list { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0 30px; }
.rule-list > * { display: flex; flex-direction: column; gap: 14px; padding-block: 26px 30px; border-top: 1px solid var(--line-strong); }
.rule-list .tag { color: var(--accent-deep); font-size: 13px; font-weight: 600; }
.rule-list p { color: var(--muted); }
@media (max-width: 900px) { .rule-list { grid-template-columns: 1fr; } }

/* ── Index list: numbered rows with a big numeral (plan, next steps, stages). ── */
.index-list { counter-reset: idx; }
.index-list > li { display: grid; grid-template-columns: 120px minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px 32px; align-items: baseline; padding-block: 30px; border-top: 1px solid var(--line-strong); }
.index-list > li:last-child { border-bottom: 1px solid var(--line-strong); }
.index-list > li::before { counter-increment: idx; content: counter(idx, decimal-leading-zero); font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -0.06em; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.index-list p { color: var(--muted); }
.index-list .chip { margin-top: 12px; }
@media (max-width: 760px) { .index-list > li { grid-template-columns: 1fr; gap: 10px; padding-block: 24px; } .index-list > li::before { font-size: 32px; } }

/* ── Flight: steps joined by 1px gaps in one rounded panel (the site's process). ── */
.flight { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: var(--radius); background: var(--line); box-shadow: var(--shadow-soft); }
.flight > * { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 300px; padding: clamp(26px, 3.2vw, 44px); background: color-mix(in srgb, var(--surface) 96%, transparent); }
.flight > :last-child { background: linear-gradient(160deg, var(--accent-faint), var(--surface) 70%); }
.flight p { color: var(--muted); }
.symbol { display: grid; width: 56px; height: 56px; place-items: center; margin-bottom: 30px; border: 1px solid var(--line-strong); border-radius: 15px; background: var(--surface); font-size: 17px; font-weight: 800; box-shadow: var(--shadow-soft); font-variant-numeric: tabular-nums; }
.flight > :last-child .symbol { border-color: transparent; background: var(--accent-bright); color: var(--accent-ink); }
@media (max-width: 900px) { .flight { grid-template-columns: 1fr; } .flight > * { min-height: 0; } }

/* ── Colour fields: colour-blocked panels (the site's solutions). No border. ── */
.fields { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.field { position: relative; display: flex; min-height: 420px; flex-direction: column; justify-content: space-between; gap: 28px; overflow: hidden; padding: clamp(28px, 3.5vw, 48px); border-radius: var(--radius); color: var(--on-field); grid-column: span var(--span, 4); isolation: isolate; }
.field::after { content: ""; position: absolute; right: -80px; bottom: -100px; z-index: -1; width: 310px; height: 310px; border-radius: 50%; opacity: 0.45; filter: blur(4px); background: var(--spot, transparent); }
.field p { color: color-mix(in srgb, var(--on-field) 72%, transparent); }
.field .label { color: color-mix(in srgb, var(--on-field) 70%, transparent); }
.field-sand { background: var(--field-sand); --spot: var(--field-sand-spot); }
.field-rose { background: var(--field-rose); --spot: var(--field-rose-spot); }
.field-sky  { background: var(--field-sky);  --spot: var(--field-sky-spot); }
.field-mint { background: var(--field-mint); --spot: var(--field-mint-spot); }
.field-ink  { background: var(--ink-field); color: var(--on-ink); }
.field-ink p, .field-ink .label { color: var(--on-ink-muted); }
.field-image { background: var(--ink-field); color: var(--on-ink); }
.field-image > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.field-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 12, 14, 0.82), rgba(10, 12, 14, 0.2) 70%); }
.field-image p { color: var(--on-ink-muted); }
.proof { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; }
.proof strong { font-weight: 800; }
.proof span { opacity: 0.72; font-size: 13px; }
@media (max-width: 900px) { .fields { grid-template-columns: 1fr; } .field { grid-column: auto; min-height: 340px; } }

/* ── Facts: big numerals over hairlines (price, timeline, scope at a glance). ── */
.facts { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0 30px; }
.facts > div { display: grid; align-content: start; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.facts strong { font-size: clamp(34px, 4vw, 56px); font-weight: 600; line-height: 1; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.facts span { color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr 1fr; gap: 24px 20px; } }

/* ── Board: the one bordered surface, for tables and comparisons. ── */
.board { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); }
.board table { width: 100%; border-collapse: collapse; }
.board th { padding: 22px 24px; background: var(--surface-2); color: var(--muted); font-size: var(--fs-small); font-weight: 600; text-align: left; vertical-align: bottom; }
.board td { padding: 24px; border-top: 1px solid var(--line); font-size: 15px; vertical-align: top; }
.board td:first-child { font-weight: 700; }
.board td + td, .board th + th { border-left: 1px solid var(--line); }
.board .col-hl { background: linear-gradient(90deg, color-mix(in srgb, var(--accent-faint) 80%, transparent), transparent 90%); }
.board th.col-hl { background: var(--accent-faint); color: var(--ink); }
.board .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .board-stack table, .board-stack tbody, .board-stack tr, .board-stack td { display: block; }
  .board-stack thead { display: none; }
  .board-stack tr { padding: 18px 20px; border-top: 1px solid var(--line); }
  .board-stack tr:first-child { border-top: 0; }
  .board-stack td { padding: 4px 0; border: 0 !important; }
  .board-stack td[data-label]::before { content: attr(data-label); display: block; margin: 10px 0 2px; color: var(--muted); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
}

/* ── Key/value rows (facts, specs, terms). ── */
.kv > div { display: grid; grid-template-columns: minmax(160px, 0.4fr) 1fr; gap: 24px; padding-block: 22px; border-top: 1px solid var(--line-strong); }
.kv > div:last-child { border-bottom: 1px solid var(--line-strong); }
.kv dt { color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.kv dd { font-size: 17px; }
@media (max-width: 760px) { .kv > div { grid-template-columns: 1fr; gap: 4px; } }

/* ── Callout: accent tile + statement on a faint wash (the site's "you confirm" strip). ── */
.callout { display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start; padding: 28px clamp(22px, 3vw, 36px); border-radius: var(--radius); background: linear-gradient(90deg, var(--accent-faint), transparent 80%); }
.callout::before { content: "\2713"; display: grid; width: 52px; height: 52px; place-items: center; border-radius: 13px; background: var(--accent); color: var(--accent-ink); font-size: 22px; font-weight: 800; box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 28%, transparent); }
.callout p { margin-top: 8px; color: var(--muted); }

/* ── Chip: small status text, no box by default. ── */
.chip { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-deep); font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-faint); }

/* ── Pricing ── */
/* .receipt: explanation left, tinted receipt right with the big number (the site's calculator). */
.receipt { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.75fr); overflow: hidden; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); }
.receipt > :first-child { padding: clamp(30px, 4.4vw, 64px); }
.receipt > :last-child { display: flex; flex-direction: column; padding: clamp(30px, 4vw, 48px); background: radial-gradient(circle at 100% 0, var(--accent-soft), transparent 38%), var(--surface-2); }
.receipt-rows > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 14px; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.receipt-rows > div > :first-child { color: var(--muted); }
.receipt-rows > div > :last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .receipt { grid-template-columns: 1fr; } }
/* .tiers: columns divided by rules; the recommended tier sits on a mint field. */
.tiers { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.tiers > * { display: flex; flex-direction: column; gap: 16px; padding: 34px clamp(20px, 2.6vw, 36px) 38px; border-left: 1px solid var(--line-strong); }
.tiers > :first-child { border-left: 0; }
.tiers .recommended { border-left-color: transparent; border-radius: var(--radius); background: radial-gradient(circle at 100% 0, var(--accent-soft), transparent 45%), var(--surface-2); }
.tiers .recommended + * { border-left-color: transparent; }
.checks, .tiers ul { display: grid; gap: 10px; color: var(--muted-strong); font-size: 15px; }
.checks li::before, .tiers li::before { content: "\2713"; margin-right: 10px; color: var(--accent); font-weight: 800; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } .tiers > * { border-left: 0; border-top: 1px solid var(--line-strong); } .tiers > :first-child { border-top: 0; } }

/* ── FAQ: rows with hairlines, a plus that turns into a cross. ── */
.faq details { border-top: 1px solid var(--line-strong); }
.faq details:last-of-type { border-bottom: 1px solid var(--line-strong); }
.faq summary { display: flex; justify-content: space-between; gap: 24px; padding-block: 30px; cursor: pointer; list-style: none; font-size: clamp(20px, 2vw, 27px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-deep); font-weight: 500; transition: transform 220ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { max-width: 680px; padding-bottom: 30px; color: var(--muted); }

/* ── Brief: the closing CTA panel (the site's contact brief / final CTA). ── */
.brief { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) auto; align-items: center; gap: 60px; min-height: 320px; padding: clamp(40px, 6vw, 84px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 92% 10%, var(--accent-soft), transparent 34%), var(--surface); }
.brief .lead { margin-top: 20px; max-width: 620px; }
.brief-actions { display: grid; gap: 12px; justify-items: stretch; min-width: 260px; }
.brief-actions .muted { text-align: center; font-size: var(--fs-small); }
@media (max-width: 900px) { .brief { grid-template-columns: 1fr; gap: 32px; padding: 34px 24px; } }

/* ── Media panel: an image with a caption over a dark gradient (cases). ── */
.media-panel { position: relative; min-height: 360px; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); isolation: isolate; }
.media-panel > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.media-panel figcaption { position: absolute; inset: auto 0 0 0; padding: clamp(22px, 3vw, 36px); background: linear-gradient(0deg, rgba(10, 12, 14, 0.78), transparent); color: var(--on-ink); }
.media-panel:hover > img { transform: scale(1.03); }

/* ── Footer: a tinted band with columns, uppercase column labels. ── */
.site-footer { padding-block: clamp(52px, 6vw, 82px); background: color-mix(in srgb, var(--surface-2) 58%, var(--bg)); color: var(--muted); font-size: 13px; }
.footer-inner { display: grid; grid-template-columns: minmax(190px, 0.58fr) minmax(0, 2fr); gap: clamp(40px, 7vw, 110px); }
.footer-inner .wordmark { color: var(--ink); font-size: 22px; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 34px; }
.footer-cols > div { display: grid; align-content: start; gap: 11px; }
.footer-cols strong { margin-bottom: 5px; color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.footer-cols a:hover { color: var(--accent-deep); }
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr; } }

/* ── Motion: reveal on scroll with --delay stagger (site.js adds .is-visible). ── */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-visible { opacity: 1; transform: none; transition: opacity 560ms var(--ease-out) var(--delay, 0ms), transform 680ms var(--ease-out) var(--delay, 0ms); }
.reveal-clip { opacity: 0; clip-path: inset(12% 0 0 0 round var(--radius)); transform: translateY(24px) scale(0.985); }
.reveal-clip.is-visible { opacity: 1; clip-path: inset(0 0 0 0 round var(--radius)); transform: none; transition: opacity 560ms var(--ease-out) var(--delay, 0ms), transform 820ms var(--ease-out) var(--delay, 0ms), clip-path 820ms var(--ease-out) var(--delay, 0ms); }
.no-js .reveal, .no-js .reveal-clip { opacity: 1; transform: none; clip-path: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-clip { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .media-panel > img { transition: none; }
}