/* ==========================================================================
   CAR OS MEDIA — bilsimaging
   Design plan
   ---------------------------------------------------------------------------
   Colour   Obsidian ground with a cyan bias (a car photographed in a dark
            studio), champagne metallic as the single accent — the same
            "champagne silver" the studio's own campaigns name — and a cold
            xenon blue for technical marks. Caliper red is semantic only.
   Light    Not an inversion: the cyclorama press-shot studio. Warm paper,
            the same two accents darkened to hold contrast.
   Type     Bahnschrift / DIN — the industrial face of dashboards, spec
            plates and gauge clusters — for display and labels. A neutral
            UI grotesque for reading. Monospace for anything measured.
   Layout   A cinematic hero with the console dead centre, then the page
            becomes a workshop job card: hairline rules, section codes in
            the gutter, tabular figures.
   ========================================================================== */

/* ---- layout -------------------------------------------------------------
   Bootstrap 5 supplies the grid and utilities (linked in index.html).
   Everything below is Car OS Media's own layer and must load AFTER it.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* ---- tokens ------------------------------------------------------------- */
:root {
  --obsidian:   #0A0C0D;
  --graphite:   #14181A;
  --raised:     #1B2124;
  --steel:      #262D30;
  --steel-soft: #1E2427;
  --champagne:  #D9C39C;
  --champagne-hi: #F2E3C4;
  --xenon:      #7FB2C4;
  --caliper:    #D4553F;
  --paper:      #E8E4DC;
  --muted:      #868F93;
  --glow:       rgba(217, 195, 156, .13);
  --sweep:      rgba(217, 195, 156, .55);

  --font-display: Bahnschrift, "DIN Alternate", "DIN Condensed", "Avenir Next Condensed",
                  "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-data: "Cascadia Mono", Consolas, "SF Mono", Menlo, "Roboto Mono", monospace;

  --rule: 1px solid var(--steel);
  --shadow-lift: 0 24px 60px -28px rgba(0,0,0,.9);
  --plate-alpha: .52;
}

@media (prefers-color-scheme: light) {
  :root {
    --obsidian:   #F1EEE8;
    --graphite:   #FFFFFF;
    --raised:     #FBF9F5;
    --steel:      #DCD6CA;
    --steel-soft: #E8E3D9;
    --champagne:  #8A6A34;
    --champagne-hi: #6B5227;
    --xenon:      #2C5F76;
    --caliper:    #A83A26;
    --paper:      #12171A;
    --muted:      #5E676B;
    --glow:       rgba(138, 106, 52, .10);
    --sweep:      rgba(138, 106, 52, .28);
    --shadow-lift: 0 24px 60px -34px rgba(30, 24, 12, .35);
    --plate-alpha: .20;
  }
}
:root[data-theme="light"] {
  --obsidian: #F1EEE8; --graphite: #FFFFFF; --raised: #FBF9F5;
  --steel: #DCD6CA; --steel-soft: #E8E3D9;
  --champagne: #8A6A34; --champagne-hi: #6B5227; --xenon: #2C5F76; --caliper: #A83A26;
  --paper: #12171A; --muted: #5E676B;
  --glow: rgba(138,106,52,.10); --sweep: rgba(138,106,52,.28);
  --shadow-lift: 0 24px 60px -34px rgba(30,24,12,.35);
  --plate-alpha: .20;
}
:root[data-theme="dark"] {
  --obsidian: #0A0C0D; --graphite: #14181A; --raised: #1B2124;
  --steel: #262D30; --steel-soft: #1E2427;
  --champagne: #D9C39C; --champagne-hi: #F2E3C4; --xenon: #7FB2C4; --caliper: #D4553F;
  --paper: #E8E4DC; --muted: #868F93;
  --glow: rgba(217,195,156,.13); --sweep: rgba(217,195,156,.55);
  --shadow-lift: 0 24px 60px -28px rgba(0,0,0,.9);
  --plate-alpha: .52;
}

/* ---- base --------------------------------------------------------------- */
body {
  margin: 0;
  background: var(--obsidian);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; border-radius: 2px; }

/* language switching: both versions live in the DOM, one is hidden */
html[data-lang="en"] [data-l="fr"] { display: none !important; }
html[data-lang="fr"] [data-l="en"] { display: none !important; }

.eyebrow {
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--champagne); margin: 0;
}
.code { font-family: var(--font-data); font-size: .82em; }
.num { font-variant-numeric: tabular-nums; }
.muted-lead { color: var(--muted); font-size: 1.05rem; }

/* ---- nav ---------------------------------------------------------------- */
.topbar {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60;
  border-block-end: 1px solid transparent;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
}
.topbar.is-stuck {
  background: color-mix(in srgb, var(--obsidian) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-block-end-color: var(--steel);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand-mark {
  inline-size: 30px; block-size: 30px; border-radius: 7px; flex: none;
  background: linear-gradient(160deg, var(--champagne-hi), var(--champagne) 42%, #A8916A);
  display: grid; place-items: center;
  color: #10120F;
}
/* 75% of the plate, the same fraction the favicon and the touch icon use. */
.brand-mark svg { inline-size: 75%; display: block; }
.brand-name { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: .1em; text-transform: uppercase; }
.brand-name b { font-weight: 600; }
.brand-name span { color: var(--muted); }

.nav-links { display: none; gap: 1.5rem; }
@media (min-width: 992px) { .nav-links { display: flex; } }
.nav-links a {
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  padding-block: .25rem; border-block-end: 1px solid transparent; transition: color .2s, border-color .2s;
}
.nav-links a:hover { color: var(--paper); border-block-end-color: var(--champagne); }

.nav-tools { display: flex; align-items: center; gap: .5rem; }
.lang-switch { display: flex; border: var(--rule); border-radius: 999px; overflow: hidden; }
.lang-switch button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-size: .74rem; letter-spacing: .14em;
  padding: .34rem .7rem; color: var(--muted); transition: background .2s, color .2s;
}
.lang-switch button[aria-pressed="true"] { background: var(--champagne); color: #0C0E0C; }

/* ---- hero --------------------------------------------------------------- */
.hero { position: relative; min-block-size: 100svh; display: flex; align-items: center; padding-block: 7rem 3rem; }
#bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; z-index: 1; }

/* ---- hero backplate ------------------------------------------------------
   Two frames the studio actually produced, sitting UNDER the canvas light rig
   so the travelling key light sweeps across a real studio floor rather than a
   drawn one. Loaded after the page is interactive; see startPlate() in site.js.
   -------------------------------------------------------------------------- */
.hero-plate { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-plate img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: center 60%;
  background-size: cover; background-position: center 60%;
  filter: saturate(.7) contrast(1.06);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 2.2s cubic-bezier(.4,0,.2,1);
  will-change: opacity;
}
.hero-plate img.on {
  opacity: var(--plate-alpha, .52);
  animation: plate-drift 38s ease-in-out infinite alternate;
}
@keyframes plate-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.15) translate3d(-2%, -1.4%, 0); }
}
.hero-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 42%, transparent 30%, color-mix(in srgb, var(--obsidian) 92%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--obsidian) 70%, transparent) 0%, transparent 22%, transparent 74%, var(--obsidian) 100%);
}
.hero-inner { position: relative; z-index: 3; inline-size: 100%; }

.hero-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  border: var(--rule); border-radius: 999px; padding: .34rem .9rem;
  background: color-mix(in srgb, var(--graphite) 70%, transparent);
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.hero-badge i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--champagne); flex: none; }

h1.hero-title {
  font-size: clamp(2.9rem, 11vw, 7.5rem);
  line-height: .88; letter-spacing: -.015em; text-transform: uppercase;
  margin-block: 1.4rem .1rem;
}
h1.hero-title .sheen {
  background: linear-gradient(100deg,
    var(--paper) 0%, var(--paper) 34%, var(--champagne-hi) 46%,
    var(--champagne) 52%, var(--paper) 64%, var(--paper) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 7s ease-in-out 1.1s infinite;
}
@keyframes sheen { 0%, 62% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.hero-sub {
  font-family: var(--font-display); font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: .16em; text-transform: uppercase; color: var(--champagne);
  margin-block-end: 1.4rem;
}
.hero-copy { max-inline-size: 60ch; margin-inline: auto; color: var(--muted); }

/* ---- console (the centre chat) ------------------------------------------ */
.console { max-inline-size: 720px; margin: 2.5rem auto 0; }
.console-shell {
  background: color-mix(in srgb, var(--graphite) 92%, transparent);
  border: var(--rule); border-radius: 20px;
  box-shadow: var(--shadow-lift);
  backdrop-filter: blur(20px) saturate(130%);
  overflow: hidden;
}
.thread { max-block-size: 46vh; overflow-y: auto; padding: 1.1rem 1.1rem .4rem; display: none; flex-direction: column; gap: .8rem; }
.thread.is-open { display: flex; }
.msg { max-inline-size: 88%; font-size: .93rem; line-height: 1.6; }
.msg-you {
  align-self: flex-end; background: var(--champagne); color: #0C0E0C;
  border-radius: 14px 14px 4px 14px; padding: .6rem .9rem; font-weight: 500;
}
.msg-ai { align-self: flex-start; display: flex; gap: .7rem; }
.msg-ai .av {
  inline-size: 26px; block-size: 26px; border-radius: 50%; flex: none; margin-block-start: .2rem;
  background: linear-gradient(150deg, var(--xenon), var(--champagne));
  display: grid; place-items: center; font-family: var(--font-display); font-size: .7rem; color: #0C0E0C;
}
.msg-ai .bub {
  background: var(--raised); border: 1px solid var(--steel-soft);
  border-radius: 4px 14px 14px 14px; padding: .7rem .95rem; color: var(--paper);
}
.msg-ai .bub strong { color: var(--champagne); font-weight: 600; }
.msg-ai .bub code { font-family: var(--font-data); font-size: .85em; color: var(--xenon); }
.msg-ai .bub p + p { margin-block-start: .55rem; }
.jump {
  appearance: none; margin-block-start: .6rem; cursor: pointer;
  background: transparent; border: 1px solid var(--champagne); color: var(--champagne);
  border-radius: 999px; padding: .28rem .8rem;
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.jump:hover { background: var(--champagne); color: #0C0E0C; }
.dots { display: inline-flex; gap: 4px; padding-block: .35rem; }
.dots i { inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--muted); animation: blip 1.3s infinite; }
.dots i:nth-child(2) { animation-delay: .18s; } .dots i:nth-child(3) { animation-delay: .36s; }
@keyframes blip { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.composer { padding: 1rem 1rem .9rem; }
.composer-field {
  inline-size: 100%; appearance: none; background: transparent; border: 0; resize: none;
  color: var(--paper); font-family: var(--font-body); font-size: 1.02rem; line-height: 1.5;
  padding: .3rem .35rem .8rem; min-block-size: 2.6rem; max-block-size: 8rem;
}
.composer-field::placeholder { color: var(--muted); }
.composer-field:focus { outline: none; }
.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.model-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  border: var(--rule); border-radius: 999px; padding: .3rem .75rem;
  font-family: var(--font-display); font-size: .78rem; letter-spacing: .1em; color: var(--paper);
  background: color-mix(in srgb, var(--raised) 80%, transparent);
}
.model-chip .pulse {
  inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--xenon); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--xenon) 70%, transparent); animation: pulse 2.6s infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.send {
  appearance: none; border: 0; cursor: pointer; flex: none;
  inline-size: 38px; block-size: 38px; border-radius: 50%;
  background: var(--champagne); color: #0C0E0C;
  display: grid; place-items: center; font-size: 1.05rem;
  transition: transform .18s, box-shadow .18s;
}
.send:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -8px var(--champagne); }

.console-rail {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .7rem 1.1rem; border-block-start: var(--rule);
  background: color-mix(in srgb, var(--obsidian) 55%, transparent);
}
.rail-label {
  font-family: var(--font-display); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-inline-end: .2rem;
}
.chip {
  appearance: none; cursor: pointer; background: transparent;
  border: var(--rule); border-radius: 999px; padding: .3rem .7rem;
  color: var(--muted); font-family: var(--font-body); font-size: .8rem;
  transition: color .2s, border-color .2s, background .2s;
}
.chip:hover { color: var(--paper); border-color: var(--champagne); background: var(--glow); }

.hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-block-start: 2.5rem; }
.hero-stats div { padding: 0 1.4rem; border-inline-start: var(--rule); }
.hero-stats div:first-child { border-inline-start: 0; }
.hero-stats b {
  display: block; font-family: var(--font-display); font-size: 1.65rem;
  font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--paper);
}
.hero-stats span {
  font-family: var(--font-display); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}

/* ---- sections ----------------------------------------------------------- */
.section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; }
.section + .section { border-block-start: var(--rule); }
.section-head { margin-block-end: 3rem; }
.section-code {
  font-family: var(--font-data); font-size: .74rem; letter-spacing: .1em;
  color: var(--champagne); margin-block-end: .7rem;
}
h2.section-title {
  font-size: clamp(1.9rem, 4.6vw, 3.2rem); line-height: 1; text-transform: uppercase;
  letter-spacing: -.01em; margin-block-end: .9rem;
}
.section-intro { color: var(--muted); max-inline-size: 62ch; }

.panel {
  background: var(--graphite); border: var(--rule); border-radius: 14px;
  padding: 1.6rem; block-size: 100%;
}
.panel h3 { font-size: 1.28rem; letter-spacing: .01em; margin-block-end: .55rem; }
.panel p { color: var(--muted); font-size: .95rem; }
.panel-tag {
  font-family: var(--font-data); font-size: .72rem; color: var(--xenon);
  display: block; margin-block-end: .8rem;
}

/* pipeline rail */
.rail { position: relative; padding-inline-start: 2.6rem; }
.rail::before {
  content: ""; position: absolute; inset-block: .8rem; inset-inline-start: 9px;
  inline-size: 1px; background: var(--steel);
}
.rail-fill {
  position: absolute; inset-block-start: .8rem; inset-inline-start: 9px;
  inline-size: 1px; background: linear-gradient(var(--champagne), var(--xenon));
  block-size: 0; transition: block-size .25s linear;
}
.stage { position: relative; padding-block: 1.15rem; }
.stage + .stage { border-block-start: 1px dashed var(--steel-soft); }
.stage::before {
  content: ""; position: absolute; inset-inline-start: -2.6rem; inset-block-start: 1.75rem;
  inline-size: 19px; block-size: 19px; border-radius: 50%;
  border: 1px solid var(--steel); background: var(--obsidian);
  transition: border-color .35s, background .35s, box-shadow .35s;
}
.stage.on::before { border-color: var(--champagne); background: var(--champagne); box-shadow: 0 0 0 5px var(--glow); }
.stage-n {
  font-family: var(--font-data); font-size: .72rem; color: var(--champagne);
  letter-spacing: .08em;
}
.stage h3 { font-size: 1.35rem; margin-block: .15rem .35rem; }
.stage p { color: var(--muted); font-size: .95rem; max-inline-size: 60ch; }
.stage .meta {
  font-family: var(--font-data); font-size: .74rem; color: var(--xenon);
  margin-block-start: .45rem;
}

/* crew */
.crew-item { display: flex; gap: 1rem; padding-block: 1.15rem; border-block-end: 1px dashed var(--steel-soft); }
.crew-idx {
  font-family: var(--font-data); font-size: .74rem; color: var(--champagne);
  flex: none; inline-size: 2.6rem; padding-block-start: .3rem;
}
.crew-item h3 { font-size: 1.18rem; margin-block-end: .25rem; }
.crew-item p { color: var(--muted); font-size: .93rem; }

/* archetypes */
.arch {
  border: var(--rule); border-radius: 12px; padding: 1.2rem; block-size: 100%;
  background: linear-gradient(160deg, var(--graphite), color-mix(in srgb, var(--graphite) 40%, transparent));
  transition: border-color .3s, transform .3s, background .3s;
}
.arch:hover { border-color: var(--champagne); transform: translateY(-3px); }
.arch b { display: block; font-family: var(--font-display); font-size: 1.08rem; letter-spacing: .02em; margin-block-end: .3rem; }
.arch span { color: var(--muted); font-size: .89rem; }

/* code slab */
.slab {
  background: var(--obsidian); border: var(--rule); border-radius: 12px;
  padding: 1.15rem 1.25rem; overflow-x: auto;
  font-family: var(--font-data); font-size: .82rem; line-height: 1.75; color: var(--muted);
  white-space: pre; tab-size: 2;
}
.slab .k { color: var(--champagne); }
.slab .c { color: var(--xenon); }
.slab .x { color: var(--caliper); }

/* table */
.table-wrap { overflow-x: auto; border: var(--rule); border-radius: 12px; }
table { inline-size: 100%; border-collapse: collapse; min-inline-size: 560px; }
th, td { padding: .85rem 1.1rem; text-align: left; border-block-end: 1px solid var(--steel-soft); font-size: .92rem; }
th {
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); background: color-mix(in srgb, var(--graphite) 70%, transparent);
}
td.num, th.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-block-end: 0; }
tbody tr:hover td { background: var(--glow); }

/* steps */
.step { display: flex; gap: 1.2rem; padding-block: 1.4rem; border-block-start: var(--rule); }
.step-n {
  flex: none; inline-size: 42px; block-size: 42px; border-radius: 50%;
  border: 1px solid var(--champagne); color: var(--champagne);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.2rem; margin-block-end: .35rem; }
.step p { color: var(--muted); font-size: .95rem; }
.step .hint {
  margin-block-start: .5rem; font-family: var(--font-data); font-size: .78rem;
  color: var(--xenon); background: var(--glow); border-radius: 6px;
  padding: .4rem .6rem; display: inline-block;
}

/* faq */
details.faq { border-block-end: var(--rule); }
details.faq summary {
  cursor: pointer; list-style: none; padding-block: 1.1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-display); font-size: 1.12rem; letter-spacing: .01em;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--champagne); font-size: 1.3rem; flex: none; transition: transform .25s; }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq .faq-body { padding-block-end: 1.2rem; color: var(--muted); max-inline-size: 68ch; }

/* buttons */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  appearance: none; cursor: pointer; text-decoration: none;
  border-radius: 999px; padding: .7rem 1.5rem; border: 1px solid transparent;
  font-family: var(--font-display); font-size: .84rem; letter-spacing: .14em; text-transform: uppercase;
  transition: transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.cta-primary { background: var(--champagne); color: #0C0E0C; }
.cta-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -12px var(--champagne); }
.cta-outline { border-color: var(--steel); color: var(--paper); background: transparent; }
.cta-outline:hover { border-color: var(--champagne); color: var(--champagne); }

/* commission band --------------------------------------------------------
   Deliberately unnumbered. The 01-09 eyebrows track the reading order of the
   documentation; this is an offer, not the tenth chapter of it. */
.commission {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--raised), var(--graphite) 62%);
  border: var(--rule); border-radius: 18px;
  padding: clamp(1.7rem, 4vw, 3rem);
}
.commission::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne), transparent);
}
.commission::after {
  content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%;
  inline-size: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 68%);
  pointer-events: none;
}
.commission > * { position: relative; z-index: 1; }
.commission-tag {
  display: block; font-family: var(--font-data); font-size: .72rem;
  letter-spacing: .12em; color: var(--champagne); margin-block-end: .85rem;
}
.commission h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.02;
  text-transform: uppercase; letter-spacing: -.01em; margin-block-end: .9rem;
}
.commission > .row > div > p { color: var(--muted); max-inline-size: 56ch; }
.commission ul { list-style: none; padding: 0; margin-block: 1.3rem 0; display: grid; gap: .55rem; }
.commission li { position: relative; padding-inline-start: 1.4rem; font-size: .95rem; }
.commission li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .68em;
  inline-size: .55rem; block-size: 1px; background: var(--champagne);
}
.commission-act {
  border-inline-start: var(--rule); padding-inline-start: clamp(0px, 3vw, 2rem);
}
.commission-lead { color: var(--paper); font-size: 1.02rem; margin-block-end: 1.3rem; }
@media (max-width: 991.98px) {
  .commission-act { border-inline-start: 0; padding-inline-start: 0; border-block-start: var(--rule); padding-block-start: 1.6rem; }
}

/* footer */
footer { border-block-start: var(--rule); padding-block: 4rem 2.5rem; background: var(--graphite); }
.foot-brand { display: flex; align-items: center; gap: .7rem; margin-block-end: 1rem; }
.foot-links { display: flex; flex-direction: column; gap: .5rem; }
.foot-links a, .foot-links span { color: var(--muted); text-decoration: none; font-size: .93rem; transition: color .2s; }
.foot-links a:hover { color: var(--champagne); }
.foot-head {
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--paper); margin-block-end: .9rem;
}
.foot-rule { border-block-start: var(--rule); margin-block-start: 2.5rem; padding-block-start: 1.5rem; }
.foot-note { color: var(--muted); font-size: .84rem; }

/* launcher */
.launcher {
  position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; z-index: 55;
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--champagne); color: #0C0E0C; border: 0; border-radius: 999px;
  padding: .7rem 1.1rem; cursor: pointer;
  font-family: var(--font-display); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.8);
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .35s, transform .35s;
}
.launcher.show { opacity: 1; transform: none; pointer-events: auto; }

/* reveal */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rv { opacity: 1; transform: none; }
}

/* ---- theme toggle (standalone site only) --------------------------------- */
.theme-toggle {
  appearance: none; cursor: pointer; flex: none;
  inline-size: 34px; block-size: 34px; border-radius: 50%;
  border: var(--rule); background: transparent; color: var(--muted);
  display: grid; place-items: center; font-size: .95rem;
  transition: color .2s, border-color .2s;
}
.theme-toggle:hover { color: var(--champagne); border-color: var(--champagne); }

/* ---- partner calls to action --------------------------------------------- */
.nav-cta { display: none; padding: .5rem 1rem; font-size: .74rem; }
@media (min-width: 992px) { .nav-cta { display: inline-flex; } }

.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-block-start: 2.2rem; }

.partner-note {
  font-family: var(--font-data); font-size: .74rem; color: var(--muted);
  margin-block-start: 1rem;
}
.partner-note a { color: var(--champagne); text-decoration: none; }
.partner-note a:hover { text-decoration: underline; }

.hint a { color: var(--xenon); }