/* ============================================================
   Openhouse — the work is already done.
   Signature: THE ORANGE SQUARE, sharp-cornered, at four scales.
   Display: Bricolage Grotesque · Text: Instrument Sans
   ============================================================ */

:root{
  /* surfaces */
  --paper:#FBFAF9;      /* off-white, faintly warm — the page */
  --mist:#F0F1F0;       /* cool neutral surface 1 */
  --stone:#E1E4E3;      /* cool neutral surface 2 */
  --edge:#D5D8D7;
  --hair:rgba(20,18,15,.12);

  /* ink */
  --ink:#14120F;        /* near-black, warm */
  --ink-soft:#4C4842;   /* body copy on light — 8.71:1 on paper */
  --muted:#6B655C;      /* meta on light — 5.53:1 on paper */

  /* accent — actions + signature only */
  --flame:#E8481C;      /* fills. ink on flame = 4.79:1 */
  --flame-ink:#C33C0D;  /* accent TEXT on light — 5.07:1 on paper */
  --flame-lit:#FF6B3D;  /* accent text on ink — 6.61:1 */

  /* on dark */
  --paper-dim:#CFCCC7;  /* 11.68:1 on ink */
  --paper-mute:#A29D95; /* 6.94:1 on ink */
  --hair-lt:rgba(251,250,249,.17);

  --display:"Bricolage Grotesque","Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --gutter:clamp(20px,4.6vw,56px);
  --wide:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;
  letter-spacing:-.032em;line-height:1.02}
p{margin:0}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
b,strong{font-weight:600}

:focus-visible{outline:2.5px solid var(--flame-ink);outline-offset:3px}
.band :focus-visible,.bill :focus-visible,.foot :focus-visible,
.strip :focus-visible,.door--primary :focus-visible{outline-color:var(--flame-lit)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--ink);color:var(--paper);
  padding:14px 20px;font-size:14px;font-weight:600}
.skip:focus{left:8px;top:8px}

.wrap{max-width:1160px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:var(--wide)}
section[id]{scroll-margin-top:80px}
figure{margin:0}

/* ── icon system — 24×24 grid, 1.75 stroke, currentColor ── */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:24px;height:24px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.ic--arw{width:17px;height:17px;stroke-width:2;margin-left:9px}

/* ══ THE SIGNATURE: the orange square ══════════════════════ */
/* scale 1 — 14px, before every section label and list bullet */
.marker{display:flex;align-items:flex-start;gap:12px;
  font-size:13px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);line-height:1.3}
.marker::before{content:"";width:14px;height:14px;margin-top:2px;background:var(--flame);flex:none}
.marker--lt{color:var(--paper-mute)}

/* scale 2 — 48px, holds a pictogram */
.stamp{width:48px;height:48px;background:var(--flame);color:var(--ink);
  display:grid;place-items:center;flex:none}
/* scale 3 — the step cartouche */
.step__n{font-family:var(--display);font-size:15px;font-weight:700;
  letter-spacing:.1em;color:var(--flame-ink)}
/* scale 4 — the full-bleed band, once per page (.band) */

/* ── buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:2px;
  min-height:54px;padding:15px 28px;max-width:100%;
  text-align:center;overflow-wrap:anywhere;
  font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;border:2px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.btn--solid{background:var(--flame);color:var(--ink);border-color:var(--flame)}
.btn--solid:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--ghost{border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}

/* inline text link with an arrow */
.tlink{display:inline-flex;align-items:center;min-height:44px;
  font-weight:600;color:var(--flame-ink);text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--flame)}
.tlink:hover{background:var(--flame);color:var(--ink);box-shadow:none}
.tlink--lt{color:var(--flame-lit);box-shadow:inset 0 -2px 0 var(--flame)}
.tlink--lt:hover{background:var(--flame);color:var(--ink)}

/* ── top bar ────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:50;background:rgba(251,250,249,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.bar__in{max-width:var(--wide);margin-inline:auto;padding:10px var(--gutter);
  display:flex;align-items:center;gap:20px}
.mark{display:inline-flex;align-items:center;min-height:44px;gap:11px;
  text-decoration:none;font-family:var(--display);font-size:21px;
  font-weight:700;letter-spacing:-.035em}
.mark__glyph{flex:none}
.mk-sq{fill:#E8481C}.mk-h{fill:#14120F}
.bar__nav{display:none;margin-left:auto;gap:28px}
.bar__nav a{display:inline-flex;align-items:center;min-height:44px;
  font-size:15px;font-weight:500;text-decoration:none;color:var(--ink-soft);
  border-bottom:2px solid transparent}
.bar__nav a:hover{color:var(--ink);border-bottom-color:var(--flame)}
.bar__nav a[aria-current]{color:var(--ink);border-bottom-color:var(--flame)}
.code-btn{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;
  padding:11px 18px;background:var(--flame);color:var(--ink);
  font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background .16s ease,color .16s ease}
.code-btn:hover{background:var(--ink);color:var(--paper)}
@media(min-width:1000px){.bar__nav{display:flex}.code-btn{margin-left:0}}

/* ── hero — tall, asymmetric, image to the edge ─────────── */
.hero{max-width:1520px;margin-inline:auto;padding:48px var(--gutter) 64px;
  display:grid;gap:40px}
.hero__text{max-width:640px}
.hero h1{margin:24px 0 0;font-size:clamp(46px,7.6vw,88px);line-height:.96;
  letter-spacing:-.04em}
.hero h1 em{font-style:normal;color:var(--flame-ink)}
.lede{margin-top:24px;max-width:34em;font-size:clamp(18px,1.5vw,21px);
  line-height:1.5;color:var(--ink-soft)}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
@media(max-width:559px){.hero__acts{display:grid;gap:10px}.hero__acts .btn{width:100%}}
.hero__note{margin-top:20px;font-size:15px;font-weight:500;color:var(--muted)}
.hero__note b{color:var(--ink);font-weight:600}
.shot{background:var(--mist);overflow:hidden;aspect-ratio:16/9}
.shot img{width:100%;height:100%;object-fit:cover;font-size:12px;color:var(--muted)}
.hero__shot{aspect-ratio:16/10}
@media(min-width:1000px){
  .hero{grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:64px;
    align-items:center;padding:88px 0 104px var(--gutter)}
  .hero__shot{aspect-ratio:16/9}
}

/* ── conditions strip — short, dark, four facts ─────────── */
.strip{background:var(--ink);color:var(--paper)}
.strip ul{max-width:var(--wide);margin-inline:auto;padding:8px var(--gutter);
  display:grid}
.strip li{display:flex;align-items:center;gap:14px;padding:20px 0;
  border-top:1px solid var(--hair-lt)}
.strip li:first-child{border-top:0}
.strip .ic{color:var(--flame-lit)}
.strip b{display:block;font-family:var(--display);font-size:19px;
  font-weight:700;letter-spacing:-.02em;line-height:1.15}
.strip span{display:block;font-size:14px;color:var(--paper-mute);margin-top:3px}
@media(min-width:780px){
  .strip ul{grid-template-columns:repeat(4,1fr);padding-block:0;gap:0}
  .strip li{border-top:0;border-left:1px solid var(--hair-lt);
    padding:28px 20px 30px;align-items:flex-start;flex-direction:column;gap:14px}
  .strip li:first-child{border-left:0;padding-left:0}
}

/* ── §01 the inversion — tall ───────────────────────────── */
.inversion{padding:88px 0 0}
.inversion__top{margin-top:28px;display:grid;gap:24px}
.inversion h2{font-size:clamp(32px,4.9vw,56px);letter-spacing:-.035em}
.inversion__top p{color:var(--ink-soft);max-width:38em}
.inversion__top p em{font-style:italic;color:var(--ink)}
@media(min-width:920px){
  .inversion__top{grid-template-columns:1.06fr .94fr;gap:64px;align-items:start}
  .inversion__top p{padding-top:8px}
}
.plate{margin-top:56px;background:var(--mist);overflow:hidden;aspect-ratio:16/9}
.plate img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
@media(min-width:820px){.plate{aspect-ratio:2.4/1}}

.steps{margin-top:40px;display:grid;gap:0;padding-bottom:96px}
.steps li{padding:32px 0;border-top:1px solid var(--hair)}
.steps__hd{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.steps h3{font-size:clamp(23px,2.5vw,28px);letter-spacing:-.03em}
.steps p{margin-top:12px;color:var(--ink-soft);font-size:17px}
@media(min-width:860px){
  .steps{grid-template-columns:repeat(3,1fr);column-gap:48px;margin-top:56px;padding-bottom:112px}
  .steps li{padding:36px 0 0;border-top:2px solid var(--ink)}
}

/* ── the signature at page scale — the flame band ───────── */
.band{background:var(--flame);color:var(--ink);padding:72px 0}
.band p{font-family:var(--display);font-weight:700;
  font-size:clamp(30px,5.2vw,60px);line-height:1.04;letter-spacing:-.04em;
  max-width:17ch}
@media(min-width:900px){.band p{max-width:22ch}}

/* ── §02 evidence — very tall, alternating ──────────────── */
.evidence{background:var(--mist);padding:96px 0 104px}
.evidence__head h2{margin-top:26px;font-size:clamp(34px,5.6vw,64px);
  max-width:15ch;letter-spacing:-.038em}
.evidence__sub{margin-top:22px;max-width:40em;color:var(--ink-soft)}
.lots{margin-top:64px;display:grid;gap:56px}
.lot{display:grid;gap:28px;align-items:center}
.lot__body h3{font-size:clamp(28px,4vw,44px);margin:16px 0 14px;letter-spacing:-.035em}
.lot__body>p{color:var(--ink-soft);max-width:44ch}
.lot__body>p em{font-style:italic;color:var(--ink)}
.lot__tag{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.tag{display:inline-flex;align-items:center;gap:9px;background:var(--ink);
  color:var(--paper);font-size:12.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;padding:7px 12px}
.tag::before{content:"";width:9px;height:9px;background:var(--flame);flex:none}
.lot__demo{font-size:13px;font-weight:500;color:var(--muted)}
.spec{margin:24px 0 28px;display:grid;grid-template-columns:1fr 1fr;
  gap:10px 20px;border-top:1px solid var(--hair);padding-top:20px}
.spec li{position:relative;padding-left:18px;font-size:14.5px;
  font-weight:500;color:var(--ink-soft)}
.spec li::before{content:"";position:absolute;left:0;top:.5em;
  width:8px;height:8px;background:var(--flame)}
.lot .shot img{transition:transform .5s ease}
.lot:hover .shot img{transform:scale(1.025)}
@media(min-width:860px){
  .lots{gap:72px}
  .lot{grid-template-columns:1.32fr 1fr;gap:52px}
  .lot--flip .lot__shot{order:2}
}
.evidence__foot{margin-top:56px;padding-top:28px;border-top:1px solid var(--hair);
  font-size:17px;color:var(--ink-soft)}

/* ── §03 the bill — tall, dark ──────────────────────────── */
.bill{background:var(--ink);color:var(--paper);padding:96px 0 104px}
.bill__grid{margin-top:36px;display:grid;gap:56px}
.bill__fig{font-family:var(--display);font-size:clamp(104px,20vw,196px);
  font-weight:700;line-height:.84;letter-spacing:-.055em}
.bill__fig span{font-size:.42em;vertical-align:.62em;color:var(--flame-lit);
  margin-right:.02em;letter-spacing:-.02em}
.bill__once{margin-top:18px;font-size:15px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--flame-lit)}
.bill__back{margin-top:26px;padding:22px 0 24px 26px;position:relative;
  border-top:1px solid var(--hair-lt);border-bottom:1px solid var(--hair-lt)}
.bill__back::before{content:"";position:absolute;left:0;top:31px;
  width:10px;height:10px;background:var(--flame)}
.bill__back b{display:block;font-family:var(--display);font-size:19px;
  font-weight:700;letter-spacing:-.02em;line-height:1.15}
.bill__back span{display:block;margin-top:6px;color:var(--paper-dim);
  font-size:16.5px;line-height:1.5;max-width:34ch}
.bill__back em{font-style:normal;font-weight:600;color:var(--paper);white-space:nowrap}
.bill__hint{margin-top:16px;font-size:15px;color:var(--paper-mute);max-width:32ch}
.bill__price .btn{margin-top:28px}
.bill__list li{border-top:1px solid var(--hair-lt);padding:20px 0 20px 26px;
  position:relative}
.bill__list li:last-child{border-bottom:1px solid var(--hair-lt)}
.bill__list li::before{content:"";position:absolute;left:0;top:29px;
  width:10px;height:10px;background:var(--flame)}
.bill__list b{display:block;font-family:var(--display);font-size:19px;
  font-weight:700;letter-spacing:-.02em}
.bill__list span{display:block;margin-top:5px;color:var(--paper-dim);
  font-size:16.5px;line-height:1.5;max-width:48ch}
.bill__fine{margin-top:44px;max-width:46em;color:var(--paper-mute);font-size:16.5px}
@media(min-width:920px){
  .bill__grid{grid-template-columns:.76fr 1.24fr;gap:72px;align-items:start}
  .bill__price{position:sticky;top:96px}
}

/* ── §04 the cost of no — short ─────────────────────────── */
.no{padding:88px 0}
.no__grid{margin-top:24px;display:grid;gap:24px;align-items:start}
.no__word{font-family:var(--display);font-size:clamp(64px,13vw,148px);
  font-weight:700;line-height:.86;letter-spacing:-.055em}
.no__word span{color:var(--flame)}
.no__flip{margin-top:26px;padding-top:18px;border-top:2px solid var(--ink);
  max-width:30em;font-size:15.5px;line-height:1.55;color:var(--muted)}
.no__flip b{color:var(--ink);font-weight:600}
.no__body{color:var(--ink-soft);font-size:clamp(18px,1.5vw,20px);max-width:38em}
.no__fine{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px 12px}
.chip{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--edge);
  padding:8px 14px;font-size:14px;font-weight:500;color:var(--ink-soft)}
.chip::before{content:"";width:8px;height:8px;background:var(--flame);flex:none}
@media(min-width:900px){
  .no__grid{grid-template-columns:.85fr 1.15fr;gap:64px}
  .no{padding:104px 0}
}

/* ── §05 answers — medium, cool surface ─────────────────── */
.answers{background:var(--stone);padding:88px 0 96px}
.answers h2{margin-top:26px;font-size:clamp(30px,4.4vw,48px);max-width:17ch;
  letter-spacing:-.035em}
.answers__grid{margin-top:48px;display:grid;gap:0}
.answers article{padding:32px 0;border-top:1px solid rgba(20,18,15,.16)}
.answers__hd{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.answers__hd .stamp{width:44px;height:44px}
.answers h3{font-size:clamp(20px,2.2vw,24px);letter-spacing:-.025em}
.answers p{color:var(--ink-soft);max-width:54ch;font-size:17px}
/* on --stone, flame-ink text falls to 4.13:1 — the ink carries the word,
   the flame rule under it carries the accent */
.answers__last .tlink{margin-top:14px;color:var(--ink)}
@media(min-width:880px){
  .answers__grid{grid-template-columns:1fr 1fr;column-gap:64px}
  .answers article:nth-child(2){border-top:1px solid rgba(20,18,15,.16)}
  .answers__last{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;
    grid-template-rows:auto 1fr;column-gap:64px;align-items:start}
  .answers__last .answers__hd{margin-bottom:0;grid-column:1;grid-row:1}
  .answers__last p{grid-column:2;grid-row:1/span 2}
  .answers__last .tlink{grid-column:1;grid-row:2;margin-top:18px;
    justify-self:start;align-self:start}
}

/* ── §06 two doors — tall ───────────────────────────────── */
.doors{padding:88px 0 96px}
.doors__plate{margin-top:28px;background:var(--mist);overflow:hidden;aspect-ratio:16/9}
.doors__plate img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
@media(min-width:820px){.doors__plate{aspect-ratio:2.4/1}}
.doors__grid{margin-top:40px;display:grid;gap:20px}
.door{padding:36px 28px;border:1.5px solid var(--edge);display:flex;
  flex-direction:column;align-items:flex-start;min-width:0}
.door--primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.door__hd{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.door h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.035em}
.door p{color:var(--ink-soft);max-width:36ch}
.door--primary p{color:var(--paper-dim)}
.door__foot{margin-top:auto;padding-top:28px}
.door__note{margin-top:16px;font-size:14.5px;color:var(--muted)}
.door--primary .door__note{color:var(--paper-mute)}
.doors__after{margin-top:32px;font-size:17px;color:var(--ink-soft)}
@media(min-width:860px){
  .doors__grid{grid-template-columns:1fr 1fr;gap:24px}
  .door{padding:44px 40px}
}

/* ── footer ─────────────────────────────────────────────── */
.foot{background:var(--ink);color:var(--paper-dim);padding:72px 0 40px}
.foot__in{display:grid;gap:40px}
.foot .mark{color:var(--paper);margin-bottom:14px}
.foot__col>p{font-size:16px;max-width:34ch;color:var(--paper-mute)}
.foot__label{font-size:13px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--flame-lit);margin-bottom:8px!important}
.foot__col a:not(.mark){display:flex;align-items:center;min-height:44px;
  font-size:15.5px;color:var(--paper-dim);text-decoration:none;padding:9px 0;
  border-bottom:1px solid var(--hair-lt)}
.foot__col a:not(.mark):hover{color:var(--flame-lit)}
.foot__fine{margin-top:56px;padding-top:24px;border-top:1px solid var(--hair-lt);
  font-size:14px;color:var(--paper-mute)}
@media(min-width:860px){.foot__in{grid-template-columns:1.5fr .8fr .9fr;gap:56px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}