/* ============================================================
   Thebossmediahouse concept preview. Direction: ledger paper.
   Green-bar rows, red-ink draft flags, monospaced headline (the
   page is a published record), serif body (meant to be read).
   No external fonts, scripts, or requests of any kind.
   Draft figures throughout: see the footer note on every page.
   ============================================================ */

:root{
  --paper:#EDF2F8;
  --paper-2:#E0E9F2;
  --card:#F6F9FC;
  --ink:#12202E;
  --ink-2:#4A5C6E;
  --ink-3:#75879A;
  --rule:#BFCEDE;
  --rule-soft:#D4DFEA;
  --accent:#1D4E7E;
  --accent-ink:#F6F9FC;
  --flag:#A6301E;
  --shadow:0 1px 0 rgba(18,32,46,.06), 0 18px 40px -28px rgba(18,32,46,.5);

  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,"Menlo","Consolas","Liberation Mono",monospace;
  --font-serif:"Iowan Old Style","Charter","Bitstream Charter","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap:1160px;
  --gutter:clamp(1.25rem,4vw,2.75rem);
  --step:clamp(3.5rem,7vw,6.5rem);
}

[data-theme="dark"]{
  --paper:#0C1219;
  --paper-2:#131D28;
  --card:#111A24;
  --ink:#E5EBF2;
  --ink-2:#9CAFC4;
  --ink-3:#7C8FA3;
  --rule:#263749;
  --rule-soft:#1C2938;
  --accent:#6FAEE0;
  --accent-ink:#0C1219;
  --flag:#E4785F;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 18px 40px -28px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-serif);
  font-size:clamp(1.02rem,.35vw + .95rem,1.12rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.08}
p{margin:0}
a{color:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{
  position:absolute;left:.75rem;top:-4rem;z-index:60;
  background:var(--accent);color:var(--accent-ink);
  padding:.7rem 1.1rem;border-radius:2px;
  font-family:var(--font-mono);font-size:.8rem;text-decoration:none;
  transition:top .18s ease;
}
.skip-link:focus{top:.75rem}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- shared label type ---------- */
.kicker{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0;
}

/* ---------- header ---------- */
.masthead{
  position:sticky;top:0;z-index:50;
  padding:.85rem 0 .35rem;
}
.masthead__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:62px;
  width:100%;max-width:100%;
  margin-inline:auto;
  padding-inline:clamp(.9rem,2.5vw,1.5rem);
  border:1px solid color-mix(in srgb,var(--rule) 55%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--card) 58%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 10px 30px -24px rgba(0,0,0,.35);
  transition:
    max-width .5s cubic-bezier(.2,.7,.3,1),
    min-height .5s cubic-bezier(.2,.7,.3,1),
    background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
[data-scrolled] .masthead__inner{
  max-width:66rem;
  min-height:52px;
  border-color:color-mix(in srgb,var(--rule) 88%,transparent);
  background:color-mix(in srgb,var(--card) 86%,transparent);
  box-shadow:var(--shadow);
}
@media (max-width:1100px){
  [data-scrolled] .masthead__inner{max-width:100%}
}
@media (prefers-reduced-motion:reduce){.masthead__inner{transition:none}}
.brand{
  display:inline-flex;align-items:center;
  text-decoration:none;color:var(--ink);
}
.brand__logo{display:block;flex:0 0 auto;height:38px;width:auto}
[data-scrolled] .brand__logo{height:32px}
@media (max-width:620px){.brand__logo,[data-scrolled] .brand__logo{height:30px}}

/* One logo file per theme. The wordmark is a mid blue and the DOLMAG line a
   near navy, neither of which survives on --paper #0C1219, so the dark file is
   the same artwork lifted in value. Swapped here because the site's own theme
   toggle has to win over prefers-color-scheme, which rules out <picture>.
   Qualified with img so these beat .brand__logo and .footer__logo whichever
   order they land in. */
img.logo--dark{display:none}
[data-theme="dark"] img.logo--light{display:none}
[data-theme="dark"] img.logo--dark{display:block}
.masthead__nav{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.75rem)}
.masthead__link{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.02em;
  color:var(--ink-2);text-decoration:none;padding:.35rem 0;
  border-bottom:1px solid transparent;
}
.masthead__link:hover{color:var(--ink);border-bottom-color:var(--accent)}
.masthead__link[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
@media (max-width:620px){.masthead__link{display:none}}

.theme-toggle{
  appearance:none;cursor:pointer;
  background:transparent;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:999px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.44rem .8rem;
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}
.theme-toggle:hover{color:var(--ink);border-color:var(--accent)}

/* ---------- sections ---------- */
.sec{padding-block:var(--step)}
.sec--alt{background:var(--paper-2)}
.sec--rule{border-top:1px solid var(--rule-soft)}

.shead{max-width:44ch;margin-bottom:clamp(2rem,4vw,3rem)}
.shead__title{
  font-family:var(--font-serif);
  font-size:clamp(1.5rem,2.6vw,2.05rem);
  margin-top:.7rem;
}
.shead__dek{margin-top:.9rem;color:var(--ink-2)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3.25rem,8vw,6.5rem) clamp(3rem,6vw,5rem)}
.hero--inner{padding-block:clamp(2.5rem,6vw,4.25rem) clamp(2rem,4vw,3rem);border-bottom:1px solid var(--rule-soft);background:var(--paper-2)}
.hero__grid{
  display:grid;gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:start;
}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}}

.hero__title{
  font-family:var(--font-serif);
  font-size:clamp(2.15rem,5.4vw,3.9rem);
  line-height:1.05;
  letter-spacing:-.015em;
  margin-top:1rem;
  text-wrap:balance;
}
.hero--inner .hero__title{font-size:clamp(1.85rem,4.2vw,2.9rem)}
.hero__title em{font-style:normal;color:var(--accent)}
.hero__dek{
  margin-top:1.4rem;max-width:46ch;
  font-size:clamp(1.08rem,.5vw + 1rem,1.28rem);
  color:var(--ink-2);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* ---------- breadcrumbs ---------- */
.crumbs{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3);margin-bottom:1.5rem}
.crumbs a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.crumbs__sep{margin-inline:.45rem;color:var(--rule)}
.crumbs__here{color:var(--ink-2)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.01em;
  text-decoration:none;padding:.82rem 1.25rem;border-radius:2px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{transform:translateY(-2px)}
.btn--secondary{border-color:var(--rule);color:var(--ink);background:transparent}
.btn--secondary:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn__arrow{transition:transform .16s ease}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* ---------- signature: the disclosure slip ---------- */
.slip{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:3px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.slip__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.35rem;
  border-bottom:1px solid var(--rule);
  background:linear-gradient(var(--paper-2),var(--paper-2));
}
.slip__title{font-family:var(--font-mono);font-size:.82rem;letter-spacing:-.01em}
.slip__date{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-3);white-space:nowrap}

.slip__row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;gap:1rem;
  padding:1.05rem 1.35rem;
  border-bottom:1px solid var(--rule-soft);
}
.slip__q{font-size:.98rem;line-height:1.35}
.slip__marks{display:flex;align-items:center;gap:.42rem}

.mark{
  width:15px;height:15px;border-radius:50%;
  border:1.5px solid var(--rule);
  background:transparent;
  flex:0 0 auto;
}
.mark--empty{position:relative}
.mark--empty::after{
  content:"";position:absolute;inset:3px;
  border-top:1.5px solid var(--rule);
  transform:rotate(-45deg);transform-origin:center;
}
.mark--divider{
  width:1px;height:18px;border:0;border-radius:0;background:var(--rule);
  margin-inline:.28rem;
}
.mark--filled{
  border-color:var(--accent);background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);
}

.slip__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;
  padding:1rem 1.35rem;
  font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3);
}
.slip__legend{display:flex;align-items:center;gap:.45rem}
.slip__legend .mark{width:11px;height:11px}

/* one orchestrated moment: the blanks settle, then our answer lands */
@media (prefers-reduced-motion:no-preference){
  .slip__marks .mark{opacity:0;animation:markIn .5s cubic-bezier(.2,.7,.3,1) forwards}
  .slip__row:nth-child(2) .mark{animation-delay:calc(.18s + var(--i,0) * .07s)}
  .slip__row:nth-child(3) .mark{animation-delay:calc(.30s + var(--i,0) * .07s)}
  .slip__row:nth-child(4) .mark{animation-delay:calc(.42s + var(--i,0) * .07s)}
  .mark--filled{animation-name:stampIn;animation-duration:.6s}
}
@keyframes markIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes stampIn{0%{opacity:0;transform:scale(1.7)}60%{opacity:1;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}

/* ---------- what we build ---------- */
.build-grid{
  display:grid;gap:1px;
  background:var(--rule-soft);
  border:1px solid var(--rule-soft);
  border-radius:3px;overflow:hidden;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.build-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:840px){.build-grid,.build-grid--2{grid-template-columns:1fr}}

.build{
  background:var(--paper);
  padding:clamp(1.5rem,2.5vw,2.1rem);
  display:flex;flex-direction:column;gap:.85rem;
  transition:background .18s ease;
}
.build:hover{background:var(--card)}
.build__kicker{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);
}
.build__title{font-family:var(--font-serif);font-size:1.22rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.build__body{color:var(--ink-2);font-size:1rem}
.build__link{
  margin-top:auto;padding-top:.4rem;
  font-family:var(--font-mono);font-size:.78rem;color:var(--accent);
  text-decoration:none;border-bottom:0;
}
.build__link:hover{text-decoration:underline;text-underline-offset:.25em}

/* ---------- findings ---------- */
.findings{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;
  border-top:1px solid var(--rule);
}
.finding{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);
  padding-block:clamp(1.5rem,3vw,2.1rem);
  border-bottom:1px solid var(--rule);
  align-items:start;
}
@media (max-width:620px){
  .finding{grid-template-columns:1fr;gap:.75rem}
}
.finding__count{
  font-family:var(--font-mono);
  font-size:clamp(2.4rem,5vw,3.4rem);
  line-height:.85;
  letter-spacing:-.05em;
  color:var(--flag);
  font-variant-numeric:tabular-nums;
  min-width:2.4ch;
}
.finding__body{max-width:66ch}
.finding__lede{font-size:clamp(1.05rem,.4vw + 1rem,1.18rem)}
.finding__note{
  margin-top:.7rem;color:var(--ink-3);
  font-family:var(--font-ui);font-size:.86rem;line-height:1.55;
}
.finding__label{
  display:block;margin-bottom:.5rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}

.method{
  margin-top:1.75rem;
  font-family:var(--font-mono);font-size:.72rem;line-height:1.7;color:var(--ink-3);
  max-width:62ch;
}

/* ---------- terms table (green-bar ledger) ---------- */
.ledger-shell{
  border:1px solid var(--rule);border-radius:3px;
  background:var(--card);box-shadow:var(--shadow);
  overflow:hidden;
}
.ledger{width:100%;border-collapse:collapse;text-align:left}
.ledger caption{
  caption-side:top;text-align:left;
  padding:1.1rem 1.35rem;
  border-bottom:1px solid var(--rule);
  background:var(--paper-2);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.ledger th,.ledger td{padding:1.15rem 1.35rem;vertical-align:top}
.ledger thead th{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;
  border-bottom:1px solid var(--rule);
  padding-block:.9rem;
}
.ledger tbody tr:nth-child(even){background:color-mix(in srgb,var(--accent) 7%,transparent)}
.ledger tbody tr + tr{border-top:1px solid var(--rule-soft)}
.ledger__q{
  width:26%;
  font-family:var(--font-mono);font-size:.9rem;font-weight:500;
  letter-spacing:-.01em;color:var(--ink);
}
.ledger__a{width:52%;color:var(--ink)}
.ledger__a p{max-width:52ch}
.ledger__link{width:22%;white-space:nowrap}
.ledger__link a{
  font-family:var(--font-mono);font-size:.78rem;color:var(--accent);
  text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  padding-bottom:1px;
}
.ledger__link a:hover{border-bottom-color:var(--accent)}
.ledger--2 .ledger__q{width:32%}
.ledger--2 .ledger__a{width:68%}

.draft{
  display:inline-block;margin-left:.4rem;transform:translateY(-1px);
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--flag);border:1px solid color-mix(in srgb,var(--flag) 45%,transparent);
  border-radius:2px;padding:.1rem .3rem;text-decoration:none;
}
.draft:hover{background:color-mix(in srgb,var(--flag) 12%,transparent)}

.ledger-note{
  margin-top:1rem;color:var(--ink-3);
  font-family:var(--font-mono);font-size:.72rem;line-height:1.7;max-width:70ch;
}

@media (max-width:760px){
  .ledger,.ledger tbody,.ledger tr,.ledger td,.ledger th{display:block;width:auto}
  .ledger thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .ledger tbody tr{padding-block:.4rem;border-top:1px solid var(--rule)}
  .ledger th,.ledger td{padding:.5rem 1.1rem}
  .ledger__q{padding-top:1.1rem;color:var(--ink-3)}
  .ledger__link{padding-bottom:1.2rem}
}

/* ---------- q and a ---------- */
.qa{display:grid;gap:.65rem;max-width:52rem;margin:0}
.qa__item{background:var(--card);border:1px solid var(--rule);border-radius:3px}
.qa__item[open]{border-color:var(--accent)}
.qa__q{
  padding:1.05rem 1.35rem;cursor:pointer;list-style:none;
  font-family:var(--font-serif);font-size:1.05rem;font-weight:600;letter-spacing:-.01em;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.qa__q::-webkit-details-marker{display:none}
.qa__q::after{content:"+";font-family:var(--font-mono);color:var(--accent);font-size:1rem}
.qa__item[open] .qa__q::after{content:"\2212"}
.qa__q:hover{color:var(--accent)}
.qa__a{padding:0 1.35rem 1.15rem;color:var(--ink-2);max-width:60ch}

/* ---------- form ---------- */
.form{
  background:var(--card);border:1px solid var(--rule);border-radius:3px;
  box-shadow:var(--shadow);
  padding:clamp(1.5rem,3vw,2.25rem);
  display:grid;gap:1.25rem;
}
.form__row{display:grid;gap:1.25rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){.form__row{grid-template-columns:1fr}}
.fld{display:grid;gap:.45rem}
.fld__label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.fld__input{
  width:100%;min-height:2.9rem;padding:.65rem .85rem;
  font-family:var(--font-ui);font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:2px;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.fld__input:hover{border-color:var(--accent)}
.fld__input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.fld__input--area{min-height:9rem;resize:vertical}
.fld__hint{font-family:var(--font-ui);font-size:.8rem;color:var(--ink-3)}
.contact-grid{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* ---------- closing band ---------- */
.close{
  background:var(--accent);color:var(--accent-ink);
  border-radius:3px;
  padding:clamp(2.25rem,5vw,3.5rem);
  display:grid;gap:1.75rem;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}
@media (max-width:820px){.close{grid-template-columns:1fr}}
.close__title{font-family:var(--font-serif);font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.01em}
.close__dek{margin-top:.85rem;max-width:44ch;opacity:.85}
.close__actions{display:flex;flex-wrap:wrap;gap:.75rem}
.close .btn--primary{background:var(--accent-ink);color:var(--accent)}
.close .btn--secondary{border-color:color-mix(in srgb,var(--accent-ink) 40%,transparent);color:var(--accent-ink)}
.close .btn--secondary:hover{border-color:var(--accent-ink);color:var(--accent-ink)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--rule);padding-block:2.5rem 3.25rem}
.footer__inner{
  display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:baseline;justify-content:space-between;
  font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3);
}
.footer__links{display:flex;flex-wrap:wrap;gap:1.25rem}
.footer__links a{text-decoration:none;color:var(--ink-2)}
.footer__links a:hover{color:var(--accent)}
.footer__demo{
  width:100%;margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--rule);
  color:var(--flag);font-size:.68rem;letter-spacing:.06em;
}

/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
  .reveal.is-in{opacity:1;transform:none}
}

/* ---------- product screen (hero visual) ---------- */
.screen{background:var(--card);border:1px solid var(--rule);border-radius:6px;box-shadow:var(--shadow);overflow:hidden}
.screen__bar{display:flex;align-items:center;gap:.42rem;padding:.72rem 1.1rem;border-bottom:1px solid var(--rule);background:var(--paper-2);font-family:var(--font-mono);font-size:.68rem;color:var(--ink-3)}
.screen__dot{width:.52rem;height:.52rem;border-radius:50%;background:var(--rule);flex:0 0 auto}
.screen__dot--go{background:var(--accent)}
.screen__name{margin-left:.45rem}
.screen__body{padding:1.25rem 1.3rem;display:grid;gap:1.1rem}
.screen__row{display:grid;gap:.4rem}
.screen__label{display:flex;justify-content:space-between;gap:1rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;color:var(--ink-2)}
.screen__val{color:var(--ink);font-weight:600;white-space:nowrap}
.screen__track{height:6px;border-radius:3px;background:var(--rule-soft);overflow:hidden}
.screen__fill{display:block;height:100%;border-radius:3px;background:var(--accent)}
.screen__foot{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1.3rem;border-top:1px solid var(--rule);font-family:var(--font-mono);font-size:.66rem;color:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){
  .screen__fill{transform-origin:left;animation:fillIn .9s cubic-bezier(.2,.7,.3,1) backwards}
  .screen__row:nth-child(2) .screen__fill{animation-delay:.15s}
  .screen__row:nth-child(3) .screen__fill{animation-delay:.3s}
}
@keyframes fillIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft);border-radius:3px;overflow:hidden;margin:0;padding:0;list-style:none;counter-reset:step}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--paper);padding:clamp(1.4rem,2.2vw,1.9rem);display:flex;flex-direction:column;gap:.55rem;counter-increment:step}
.step::before{content:"0" counter(step);font-family:var(--font-mono);font-size:.74rem;color:var(--accent);letter-spacing:.08em}
.step__title{font-family:var(--font-serif);font-size:1.14rem;font-weight:600;margin:0}
.step__body{color:var(--ink-2);font-size:.95rem;margin:0}

/* ---------- language switch ---------- */
.lang-switch{display:inline-flex;align-items:center;gap:.15rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.lang-switch a{color:var(--ink-3);text-decoration:none;padding:.44rem .3rem;border-bottom:1px solid transparent}
.lang-switch a:hover{color:var(--accent)}
.lang-switch a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.lang-switch__sep{color:var(--rule)}

/* ---------- centered hero (home) ---------- */
.hero--center{position:relative;overflow:hidden;padding-block:clamp(3.5rem,8vw,6rem) clamp(3rem,6vw,5rem)}
.hero--center::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(64rem 26rem at 50% -12%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 65%),
    repeating-linear-gradient(180deg,transparent 0,transparent 2.4rem,color-mix(in srgb,var(--rule-soft) 60%,transparent) 2.4rem,color-mix(in srgb,var(--rule-soft) 60%,transparent) calc(2.4rem + 1px));
  -webkit-mask-image:radial-gradient(90rem 46rem at 50% 0,#000 25%,transparent 78%);
  mask-image:radial-gradient(90rem 46rem at 50% 0,#000 25%,transparent 78%);
}
.hero__center{position:relative;display:grid;justify-items:center;max-width:56rem;margin-inline:auto;text-align:center}
.hero__badge{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.5rem 1rem;border:1px solid var(--rule);border-radius:999px;
  background:color-mix(in srgb,var(--card) 85%,transparent);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  box-shadow:0 1px 0 rgba(18,32,46,.05);
}
.hero__badge .mark{width:.95rem;height:1.32rem;color:var(--accent)}
.hero--center .hero__title{font-size:clamp(2.4rem,5.6vw,4.2rem);margin-top:1.2rem}
.hero--center .hero__dek{margin-inline:auto}
.hero--center .hero__actions{justify-content:center}
.hero__trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 1.7rem;
  margin:2.3rem 0 0;padding:0;list-style:none;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.02em;color:var(--ink-2);
}
.hero__trust li{display:inline-flex;align-items:center;gap:.5rem}
.hero__trust svg{width:.9rem;height:.9rem;color:var(--accent);flex:0 0 auto}
.screen--wide{max-width:52rem;margin:clamp(2.5rem,5vw,3.75rem) auto 0}
@media (prefers-reduced-motion:no-preference){
  .hero__center > *{opacity:0;transform:translateY(12px);animation:heroIn .7s cubic-bezier(.2,.7,.3,1) forwards}
  .hero__center > :nth-child(2){animation-delay:.08s}
  .hero__center > :nth-child(3){animation-delay:.16s}
  .hero__center > :nth-child(4){animation-delay:.24s}
  .hero__center > :nth-child(5){animation-delay:.32s}
}
@keyframes heroIn{to{opacity:1;transform:none}}

/* ---------- iconography ---------- */
.build__icon{display:inline-flex;align-items:center;justify-content:center;width:2.7rem;height:2.7rem;border:1px solid var(--rule);border-radius:9px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent)}
.build__icon svg{width:1.35rem;height:1.35rem}
.row-ico{width:1.05rem;height:1.05rem;color:var(--accent);vertical-align:-2.5px;margin-inline-end:.55rem}

/* ---------- hero spot illustration ---------- */
.hero__grid2{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(2rem,5vw,4.5rem)}
.hero__copy2{min-width:0}
.hero__art{margin:0;width:clamp(220px,24vw,320px)}
.hero__art svg{display:block;width:100%;height:auto}
@media (max-width:900px){.hero__art{display:none}}
@media (prefers-reduced-motion:no-preference){
  .hero__art{opacity:0;transform:translateY(10px) scale(.98);animation:heroIn .8s .25s cubic-bezier(.2,.7,.3,1) forwards}
}

/* ---------- close band watermark ---------- */
.close{position:relative;overflow:hidden}
/* The new figure is portrait where the old mark was landscape, and it is drawn
   in thin strokes, so it sits narrower, higher and a little more opaque. */
.close__mark{position:absolute;inset-inline-end:-1.25rem;inset-block-end:-2.25rem;width:9rem;height:12.55rem;color:var(--accent-ink);opacity:.13;pointer-events:none}
.close > div{position:relative;z-index:1}
.close__actions{position:relative;z-index:1}

/* ---------- footer brand line ---------- */
.footer__brandline{display:inline-flex;align-items:center}
.footer__logo{display:block;height:30px;width:auto}

/* ---------- brand figure as a mask ---------- */
/* mark.png is a white silhouette, so background-color:currentColor gives the
   figure the same theme colours the old inline SVG got from fill. */
.mark{
  display:inline-block;flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask:url("/assets/mark.png?v=6") no-repeat center/contain;
  mask:url("/assets/mark.png?v=6") no-repeat center/contain;
}

/* ---------- contact form: honeypot and result notes ---------- */
/* The trap field is off screen rather than display:none, which bots skip, and
   out of the tab order. A human never sees or reaches it; anything that fills
   it in is not a human. */
.fld--trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Result notes are hidden until the endpoint sends the visitor back to the
   matching fragment. :target does the whole job, so success and failure both
   work with JavaScript switched off, like everything else here. */
/* scroll-margin-top keeps the sticky masthead off the note when the browser
   jumps to the fragment. Without it the message lands under the header and
   the visitor sees nothing. */
.form__note{display:none;scroll-margin-top:7rem;margin-bottom:1.25rem;padding:.9rem 1.1rem;border-radius:3px;border:1px solid var(--rule);font-family:var(--font-mono);font-size:.82rem;line-height:1.5}
.form__note:target{display:block}
.form__note--ok{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--ink)}
.form__note--bad{border-color:var(--flag);background:color-mix(in srgb,var(--flag) 10%,transparent);color:var(--ink)}
.form__consent{display:flex;gap:.6rem;align-items:flex-start;margin-top:1.1rem;font-size:.92rem;line-height:1.45;color:var(--ink-2)}
.form__consent input{margin-top:.28rem;flex:0 0 auto;accent-color:var(--accent)}

/* ---------- phone field with country chooser ---------- */
/* The flags are emoji from the reader's own system font, so this costs no
   download and keeps the site's no external requests property. Windows ships
   no flag glyphs and falls back to the two letters, which still reads. */
.fld__opt{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-left:.5rem}
.phone-row{display:flex;gap:.5rem}
.phone-row select{flex:0 0 auto;max-width:11.5rem}
.phone-row input{flex:1 1 auto;min-width:0}
@media (max-width:520px){.phone-row{flex-direction:column}.phone-row select{max-width:100%}}