/* ==========================================================================
   magraft.com - STUDIO NEON / PROPERTY EDITION
   Everything around the property, handled.
   Signature device: THE THREAD - a neon line with square nodes, the job
   running down the life of one building.
   ========================================================================== */

/* ---- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
table{border-collapse:collapse;width:100%}

/* ---- Tokens -------------------------------------------------------------- */
:root{
  --ink:#14161B;
  --ink-2:#22252D;
  --ink-3:#3A3E49;
  --ink-4:#5C6270;
  --paper:#F4F5F7;
  --paper-2:#E9EBEF;
  --white:#FFFFFF;
  --line:#DFE2E8;
  --line-2:#C6CAD3;

  --neon:#0057FF;         /* action, and only action */
  --neon-deep:#003FBF;
  --neon-lift:#7CA8FF;    /* neon for small text on the ink field */
  --neon-soft:#E7EEFF;

  --verified:#0F6337;     /* an earned mark, never decoration */
  --verified-soft:#E3F1E9;
  --warn:#7F5400;
  --warn-soft:#FBF0D8;

  --radius:4px;
  --wrap:1180px;
  --gutter:clamp(18px,5vw,56px);

  --disp:"Barlow Condensed","Oswald","DejaVu Sans Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,"Liberation Sans",Arial,sans-serif;
  --mono:"IBM Plex Mono","DejaVu Sans Mono",ui-monospace,"Courier New",monospace;
}

/* ---- Base ---------------------------------------------------------------- */
body{
  font-family:var(--body);
  background:var(--white);
  color:var(--ink);
  font-size:17px;
  line-height:1.55;
  overflow-x:hidden;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:860px}

/* Headings never break a word in half. The body sets overflow-wrap:break-word
   so long strings in prose cannot overflow; inherited into a heading it
   splits words like TRANSPORTER / S, so headings opt out of it. */
h1,h2,h3,h4,.display{font-family:var(--disp);font-weight:700;line-height:1.02;letter-spacing:-.005em;text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:none}
h1{font-size:clamp(2.4rem,7.4vw,4.6rem);text-transform:uppercase}
h2{font-size:clamp(1.8rem,4.6vw,2.9rem);text-transform:uppercase}
h3{font-size:clamp(1.25rem,2.4vw,1.65rem);text-transform:uppercase}
h4{font-size:1.05rem;text-transform:uppercase;letter-spacing:.03em}
p{margin:0 0 1rem;max-width:68ch}
ul,ol{margin:0 0 1rem;padding-left:1.2rem}
li{margin-bottom:.45rem}
li>ul,li>ol{margin-top:.45rem}
strong{font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:2.2rem 0}
::selection{background:var(--neon);color:#fff}
:focus-visible{outline:3px solid var(--neon);outline-offset:2px;border-radius:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-4)}
.lead{font-size:clamp(1.08rem,1.9vw,1.32rem);line-height:1.5;color:var(--ink-3);max-width:62ch}
.mt0{margin-top:0}.mt1{margin-top:.6rem}.mt2{margin-top:1.2rem}.mt3{margin-top:2rem}
.mb0{margin-bottom:0}
.center{text-align:center}
.skip{position:absolute;left:-9999px;top:0;background:var(--neon);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}

/* ---- The thread (signature device) --------------------------------------- */
.thread{display:flex;align-items:center;gap:0;height:10px;margin:0 0 20px}
.thread i{display:block;height:4px;background:var(--line-2)}
.thread i:first-child{width:46px;height:4px;background:var(--neon)}
.thread i:nth-child(2){width:10px;height:10px;background:var(--neon);margin-inline:6px}
.thread i:nth-child(3){width:22px;background:var(--ink)}
.thread i:nth-child(4){width:8px;height:8px;background:var(--ink);margin-inline:6px}
.thread i:nth-child(5){width:40px}
.sec--ink .thread i:nth-child(3),.sec--ink .thread i:nth-child(4){background:var(--white)}
.sec--ink .thread i{background:var(--ink-3)}
.sec--ink .thread i:first-child,.sec--ink .thread i:nth-child(2){background:var(--neon-lift)}

.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-4);margin:0 0 12px;display:block
}
.eyebrow b{color:var(--neon);font-weight:700}
.sec--ink .eyebrow{color:#B9BFCC}
.sec--ink .eyebrow b{color:var(--neon-lift)}

/* ---- Header -------------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:90;background:var(--ink);color:var(--white);border-bottom:3px solid var(--neon)}
.topbar__in{max-width:var(--wrap);margin-inline:auto;padding:10px var(--gutter);display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--white)}
.brand__mark{width:38px;height:38px;flex:0 0 38px}
.brand__word{font-family:var(--disp);font-size:1.7rem;font-weight:700;letter-spacing:.01em;line-height:1}
.brand__word span{color:var(--neon-lift)}
.brand__tag{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:#9AA3B4;margin-top:2px}
.nav{display:flex;align-items:center;gap:0;flex-wrap:nowrap;min-width:0}
.nav a{
  font-family:var(--disp);text-transform:uppercase;font-size:.94rem;letter-spacing:.02em;
  color:#E6E8EE;text-decoration:none;padding:8px 9px;border-radius:var(--radius);white-space:nowrap
}
.nav a:hover{background:var(--ink-3);color:#fff}
.nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -3px 0 var(--neon)}
.topbar .btn--cta{padding:9px 15px;font-size:1rem;white-space:nowrap;flex:0 0 auto}
.brand{flex:0 0 auto}
.burger{display:none;background:var(--ink-3);border:1px solid var(--ink-4);color:#fff;border-radius:var(--radius);padding:9px 13px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
.mobilenav{display:none;background:var(--ink-2);border-top:1px solid var(--ink-3)}
.mobilenav.open{display:block}
.mobilenav a{display:block;padding:13px var(--gutter);color:#E6E8EE;text-decoration:none;font-family:var(--disp);text-transform:uppercase;font-size:1.1rem;border-bottom:1px solid var(--ink-3)}
@media (max-width:1240px){
  .nav a{font-size:.88rem;padding:8px 7px}
  .brand__tag{display:none}
}
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:inline-block}
}
@media (max-width:640px){
  /* the call to action lives in the mobile menu below - two of them will not fit a phone bar */
  .topbar .btn--cta{display:none}
}

/* ---- Buttons ------------------------------------------------------------- */
.btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:14px 30px;border-radius:var(--radius);border:2px solid var(--neon);
  font-family:var(--disp);font-size:1.16rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;text-decoration:none;cursor:pointer;background:var(--neon);color:#fff;
  box-shadow:0 2px 0 0 var(--neon-deep);transition:transform .12s ease,box-shadow .12s ease }
.btn:active { transform:translateY(2px);box-shadow:0 0 0 0 var(--neon-deep) }

/* SECOND RANK. A real action, but not the one being asked for. It keeps a
   filled body so it never reads as the same object as the ghost. */
.btn--secondary { background:var(--ink-2);color:#fff;border-color:var(--neon);
  box-shadow:0 2px 0 0 var(--ink) }
.btn--secondary:hover { background:var(--ink);color:#fff;border-color:var(--neon-lift) }
.hero .btn--secondary,.sec--ink .btn--secondary { background:transparent;border-color:var(--neon-lift);color:#fff }
.hero .btn--secondary:hover,.sec--ink .btn--secondary:hover { background:var(--neon);border-color:var(--neon);color:#fff }

/* FOURTH RANK. No box. For the link that must be reachable but must not
   compete - "read the charter", "see all cities". */
.btn--text { min-height:0;padding:4px 0;background:none;border:0;box-shadow:none;
  color:var(--neon);text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:2px;font-size:1.04rem;letter-spacing:.05em }
.btn--text:hover { background:none;color:var(--neon-deep);text-decoration-thickness:3px }
.hero .btn--text,.sec--ink .btn--text { color:var(--neon-lift) }
.hero .btn--text:hover,.sec--ink .btn--text:hover { background:none;color:#fff }
.btn:hover{background:var(--neon-deep);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2);border-width:2px;
  box-shadow:none;font-weight:500}
.btn--ghost:hover{border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.sec--ink .btn--ghost,.hero .btn--ghost{color:#EDEFF3;border-color:var(--ink-4);background:transparent;box-shadow:none}
.sec--ink .btn--ghost:hover,.hero .btn--ghost:hover{background:transparent;border-color:var(--neon-lift);color:#fff}
.btn--cta{background:var(--neon);color:#fff}
.btn--small{min-height:40px;padding:8px 17px;font-size:.98rem;box-shadow:none}
.btn--install.installed{display:none}
.btn--install { background:transparent;border-color:var(--line-2);color:var(--ink);
  box-shadow:none;font-weight:500;font-size:1.02rem;min-height:46px;padding:11px 22px }
.btn--install:hover { background:transparent;border-color:var(--ink);color:var(--ink) }
.hero .btn--install,.sec--ink .btn--install { color:#B9BFCC;border-color:var(--ink-3) }
.hero .btn--install:hover,.sec--ink .btn--install:hover { color:#fff;border-color:var(--ink-4);background:transparent }
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* ---- Sections ------------------------------------------------------------ */
.sec{padding:clamp(30px,4.2vw,52px) 0}
.sec--paper{background:var(--paper)}
.sec--ink{background:var(--ink);color:#EDEFF3}
.sec--ink h1,.sec--ink h2,.sec--ink h3,.sec--ink h4{color:#fff}
.sec--ink p{color:#D3D7E0}
.sec--ink .lead{color:#C4CAD6}
.sec--ink a:not(.btn){color:var(--neon-lift)}
.sec--tight{padding:clamp(20px,2.6vw,32px) 0}
.sechead{max-width:64ch;margin-bottom:22px}
.sechead h2{margin-bottom:10px}
.sechead .lead{margin-bottom:0}

/* ---- Hero ---------------------------------------------------------------- */
.hero{background:var(--ink);color:#fff;padding:clamp(32px,4.6vw,60px) 0 clamp(30px,4.2vw,52px);border-bottom:1px solid var(--ink-3)}
/* The headline column carries more of the width than the artwork, so a two or
   three word headline sits on one line instead of stranding a word. */
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(24px,4vw,56px);align-items:center}
.hero__grid>:first-child>:first-child{margin-top:0}
.hero h1{color:#fff;margin-bottom:16px;font-size:clamp(2.2rem,5.2vw,4.1rem)}
/* A long headline drops a step rather than running to a third line. */
.hero--long h1{font-size:clamp(1.95rem,4.1vw,3.15rem)}
.hero--xlong h1{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.hero p{color:#C9CEDA}
.hero .lead{color:#C9CEDA}
.hero__art{width:100%;align-self:start;margin-top:2px}
/* The artwork is sized to the column it sits in, so it neither overhangs
   the text beside it nor leaves dead space under it. */
.hero__art--balanced{max-width:none;margin-left:auto}
@media (max-width:900px){.hero__art--balanced{max-width:none;margin-inline:auto}}
.hero__art svg{width:100%;height:auto}
@media (max-width:900px){.hero__grid{grid-template-columns:minmax(0,1fr)}}

.crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#9AA3B4;margin-bottom:16px}
.crumbs a{color:#C9CEDA}
.crumbs span{color:#6C7484;padding:0 6px}


/* ---- The split (a section headline that shares its line with the art) -----
   The heading lives INSIDE the left column, so the figure, table or form in
   the right column starts on the same top line as the first line of the
   headline instead of below the whole heading block.
   -------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(22px,3.6vw,48px);align-items:start}
.split--wide{grid-template-columns:minmax(0,1fr) minmax(0,1.18fr)}
.split__main,.split__side{min-width:0}
.split__main>.sechead{margin-bottom:20px;max-width:none}
.split__main>:last-child{margin-bottom:0}
.split__side>:first-child{margin-top:0}
.split__side .tablewrap:last-child,.split__side .figwrap:last-child{margin-bottom:0}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}

/* ---- Grids and cards ----------------------------------------------------- */
/* Columns start on the same top line. Cards that need equal height opt back in
   with .grid--even, so a row of doors still squares up. */
.grid{display:grid;gap:18px;align-items:start}
.grid--even{align-items:stretch}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.grid--board{grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.grid--doors{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
@media (min-width:1000px){.grid--doors{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1000px){.grid--doors .door{padding:20px}.grid--doors .door p{font-size:.95rem}}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card h3{margin-bottom:8px}
.card p:last-child{margin-bottom:0}
.card__ico{width:64px;height:64px;margin-bottom:16px}
.sec--ink .card{background:var(--ink-2);border-color:var(--ink-3)}
.sec--ink .card h3{color:#fff}
.sec--ink .card p{color:#C7CCD8}
.card--action{border-left:5px solid var(--neon)}
.grid--even .card{display:flex;flex-direction:column}
.grid--even .card p{flex:1}
.grid--even .card .btnrow{margin-top:14px}
.golist{list-style:none;padding:0;margin:14px 0 0}
.golist li{margin:0;border-top:1px solid var(--line)}
.golist a{display:block;padding:10px 0 10px 20px;position:relative;font-size:.96rem;text-decoration:none;color:var(--neon-deep)}
.golist a::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-4px;background:var(--neon)}
.golist a:hover{text-decoration:underline}
.sec--ink .golist li{border-top-color:var(--ink-3)}

.door{background:var(--white);border:1px solid var(--line);border-top:5px solid var(--neon);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column}
.door .num{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--neon-deep);text-transform:uppercase;margin-bottom:10px}
.door h3{margin-bottom:10px}
.door p{flex:1}
.door .btn{align-self:flex-start;margin-top:12px}
.sec--ink .door{background:var(--ink-2);border-color:var(--ink-3);border-top-color:var(--neon-lift)}
.sec--ink .door p{color:#C7CCD8}
.sec--ink .door .num{color:var(--neon-lift)}

/* ---- Router rows ---------------------------------------------------------
   Each audience gets a full width band with the label on the left and the
   places it can go on the right, rather than five squeezed columns.
   -------------------------------------------------------------------------- */
.router{display:grid;gap:0}
.router__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(18px,3vw,42px);
  align-items:start;padding:20px 0;border-top:1px solid var(--line)}
.router__row:last-child{border-bottom:1px solid var(--line)}
.router__row h3{margin-bottom:8px}
.router__row p{margin-bottom:0}
.router__row .golist{margin-top:0}
.router__row .golist li:first-child{border-top:0}
.sec--ink .router__row{border-top-color:var(--ink-3)}
.sec--ink .router__row:last-child{border-bottom-color:var(--ink-3)}
@media (max-width:820px){.router__row{grid-template-columns:minmax(0,1fr);gap:14px}
  .router__row .golist li:first-child{border-top:1px solid var(--line)}}

/* ---- Pillar list --------------------------------------------------------- */
.pillar{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,2.6vw,34px);align-items:center;padding:28px 0;border-top:1px solid var(--line)}
.pillar:last-child{border-bottom:1px solid var(--line)}
.pillar__ico{width:100%;max-width:300px}
.pillar__ico svg{display:block;width:100%;height:auto}
.pillar h3{margin-bottom:6px}
.pillar .tags{margin-top:8px}

.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;background:var(--paper-2);border:1px solid var(--line);border-radius:2px;padding:4px 8px;color:var(--ink-3)}
.sec--ink .tag{background:var(--ink-3);border-color:var(--ink-4);color:#DDE1E9}

/* ---- Door picker ---------------------------------------------------------
   Four doors shown together, the one you are standing in marked as current and
   the other three plainly clickable.
   -------------------------------------------------------------------------- */
.picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:12px;align-items:stretch}
@media (min-width:1000px){.picker{grid-template-columns:repeat(4,minmax(0,1fr))}}
.picker__door{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;
  background:var(--white);border:1px solid var(--line-2);border-top:5px solid var(--line-2);
  border-radius:var(--radius);padding:16px 16px 18px}
.picker__door h3{font-size:1.12rem;margin:0}
.picker__door p{font-size:.92rem;color:var(--ink-4);margin:0;flex:1}
.picker__door .go{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--neon-deep)}
a.picker__door:hover{border-color:var(--neon);border-top-color:var(--neon)}
a.picker__door:hover .go{text-decoration:underline}
.picker__door--here{border-top-color:var(--neon);border-color:var(--neon);background:var(--neon-soft);cursor:default}
.picker__door--here .go{color:var(--ink-4)}
.sec--ink .picker__door{background:var(--ink-2);border-color:var(--ink-3);border-top-color:var(--ink-4)}
.sec--ink .picker__door p{color:#B9BFCC}
.sec--ink .picker__door .go{color:var(--neon-lift)}
.sec--ink .picker__door--here{background:var(--ink-3);border-color:var(--neon-lift);border-top-color:var(--neon-lift)}
.hero .picker{margin-top:6px}

/* ---- Stamps (trust marks) ------------------------------------------------ */
.stamp{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:2px;padding:4px 9px;background:var(--paper);color:var(--ink-3)
}
.stamp .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-4);flex:0 0 8px}
.stamp--verified{background:var(--verified-soft);border-color:#9EC7B0;color:var(--verified)}
.stamp--verified .dot{background:var(--verified)}
.stamp--listed{background:var(--neon-soft);border-color:#A8C4FF;color:var(--neon-deep)}
.stamp--listed .dot{background:var(--neon-deep)}
.stamp--confirmed{background:var(--warn-soft);border-color:#E0C489;color:var(--warn)}
.stamp--confirmed .dot{background:var(--warn)}
.stamp--pending{background:var(--paper-2);border-color:var(--line-2);color:var(--ink-4)}

/* ---- Tables -------------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);margin:0 0 22px}
.tablewrap:focus-visible{outline:3px solid var(--neon)}
table.data{min-width:430px;background:var(--white);color:var(--ink)}
table.data caption{text-align:left;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);padding:14px 16px 0}
table.data th,table.data td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:.96rem;color:var(--ink)}
table.data thead th{background:var(--ink);color:#fff;font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;font-size:1rem;border-bottom:0}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:nth-child(even) td{background:var(--paper)}
.sec--ink .tablewrap{border-color:var(--ink-3)}

/* ---- Steps --------------------------------------------------------------- */
ol.steps{list-style:none;padding:0;margin:0;counter-reset:step}
ol.steps li{
  counter-increment:step;position:relative;padding:0 0 22px 56px;margin:0;
  border-left:3px solid var(--line);margin-left:16px
}
ol.steps li::before{
  content:counter(step,decimal-leading-zero);position:absolute;left:-19px;top:0;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:var(--neon);color:#fff;font-family:var(--mono);font-size:.8rem;border-radius:2px
}
ol.steps li:last-child{border-left-color:transparent;padding-bottom:0}
ol.steps li h3,ol.steps li h4{margin-bottom:5px}
ol.steps li p{margin-bottom:0}
.sec--ink ol.steps li{border-left-color:var(--ink-3)}

/* ---- Board (the register) ------------------------------------------------ */
/* ---- Fields, filters and forms ------------------------------------------
   One control system for the whole site. The register filter bar and every
   public form are built from the same field, so an input, a select and a
   textarea are the same height, the same border and the same type.
   -------------------------------------------------------------------------- */
.filters{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:14px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:22px;align-items:start
}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label,.field>span.lab{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.35;display:flex;flex-wrap:wrap;align-items:baseline;gap:7px
}
.field .req{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--neon-deep);background:var(--neon-soft);border:1px solid #C3D5FF;
  border-radius:2px;padding:1px 5px;line-height:1.5
}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;line-height:1.4;color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--radius);background:var(--white);
  padding:12px 13px;min-height:50px;width:100%;max-width:100%
}
.field input::placeholder,.field textarea::placeholder{color:#8E95A4;opacity:1}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-4)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--neon);box-shadow:0 0 0 3px rgba(0,87,255,.16)
}
.field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2314161B' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px
}
.field textarea{min-height:132px;resize:vertical;line-height:1.5}
.field .hint{font-size:.85rem;line-height:1.4;color:var(--ink-4)}
.field--wide{grid-column:1/-1}

.checkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:8px}
.checkgrid label{display:flex;align-items:flex-start;gap:8px;font-family:var(--body);font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--ink-2);background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;cursor:pointer}
.checkgrid input{width:18px;height:18px;min-height:0;margin-top:3px;flex:0 0 18px}

/* The form card ------------------------------------------------------------ */
.form{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,3vw,32px)
}
.form__intro{
  border-left:5px solid var(--neon);background:var(--white);border-radius:var(--radius);
  padding:16px 18px;margin:0 0 26px
}
.form__intro p:last-child{margin-bottom:0}
.form__group{border:0;padding:0;margin:0 0 30px;min-width:0}
.form__group:last-of-type{margin-bottom:0}
.form__legend{
  display:block;width:100%;padding:0 0 10px;margin:0 0 18px;
  border-bottom:1px solid var(--line-2);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4)
}
.form__legend b{color:var(--neon);font-weight:700;margin-right:8px}
.form__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 22px;align-items:start}
.form__foot{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-2)}
.form__foot .btnrow{margin-top:0}
.form__foot p{font-size:.9rem;color:var(--ink-4);margin:0 0 14px;max-width:70ch}
.form [data-gate-notice]:empty{display:none}
@media (max-width:760px){.form__fields{grid-template-columns:minmax(0,1fr);gap:18px}}
.sec--ink .form{background:var(--ink-2);border-color:var(--ink-3)}
.sec--ink .form__legend{color:#AEB5C4;border-bottom-color:var(--ink-4)}
.sec--ink .field label,.sec--ink .field>span.lab{color:#C7CCD8}

.boardmeta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:16px}
.count{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}

.listing{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:10px}
.listing__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.listing h3{font-size:1.25rem;margin:0}
.listing__pid{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink-4);text-transform:uppercase}
.listing__meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.9rem;color:var(--ink-3)}
.listing p{margin:0;font-size:.96rem;color:var(--ink-3)}
.listing__foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.picked{outline:3px solid var(--neon);outline-offset:-1px}

.tray{position:sticky;bottom:0;z-index:70;background:var(--ink);color:#fff;border-top:3px solid var(--neon);padding:12px var(--gutter);display:none}
.tray.on{display:block}
.tray__in{max-width:var(--wrap);margin-inline:auto;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.tray__list{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:#C9CEDA}

.picklist{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px}
.picklist li{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px}
.picklist .who{font-size:.96rem}
.picklist .pid{font-family:var(--mono);font-size:.7rem;color:var(--ink-4);display:block}
.linkbtn{background:none;border:0;color:var(--neon-deep);text-decoration:underline;cursor:pointer;font-size:.9rem;padding:6px}

/* ---- Channel strip -------------------------------------------------------
   The desk's addresses as one short band under the form, not a column of
   headline-sized numbers beside it.
   -------------------------------------------------------------------------- */
.channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:14px 26px;
  background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--neon);
  border-radius:var(--radius);padding:18px 20px}
.channels div{min-width:0}
.channels .k{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.channels .v{display:block;font-size:1.02rem;line-height:1.4;overflow-wrap:normal}
.channels a{color:var(--neon-deep)}

/* ---- Notices ------------------------------------------------------------- */
.notice{border-left:5px solid var(--neon);background:var(--neon-soft);padding:16px 18px;border-radius:var(--radius);margin:0 0 22px}
.notice--warn{border-left-color:var(--warn);background:var(--warn-soft)}
.notice p:last-child{margin-bottom:0}
.sec--ink .notice{background:var(--ink-2);border-left-color:var(--neon-lift)}

/* ---- Property passport --------------------------------------------------- */
.passport{background:var(--white);border:1px solid var(--line);border-top:6px solid var(--neon);border-radius:var(--radius);padding:24px}
.passport__head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}
.passport dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:14px;margin:0 0 18px}
.passport dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.passport dd{margin:0;font-size:1rem}

/* ---- Footer -------------------------------------------------------------- */
.foot{background:var(--ink);color:#C3C9D6;padding:40px 0 22px;border-top:3px solid var(--neon)}
.foot h2{color:#fff;margin-bottom:12px;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;font-family:var(--disp)}
.foot a{color:#C3C9D6;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:30px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:8px;font-size:.95rem}
.foot__base{margin-top:36px;padding-top:20px;border-top:1px solid var(--ink-3);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.86rem;color:#8B93A3}
.foot__base a{color:#8B93A3}

/* ---- Modal --------------------------------------------------------------- */
.modal{position:fixed;inset:0;background:rgba(10,12,16,.72);display:none;align-items:center;justify-content:center;padding:20px;z-index:120}
.modal.on{display:flex}
.modal__box{background:var(--white);border-radius:var(--radius);max-width:620px;width:100%;max-height:88vh;overflow:auto;padding:26px;border-top:6px solid var(--neon)}
.modal__box h3{margin-bottom:12px}
.modal__close{float:right;background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--ink-4);padding:4px 8px}

/* ---- Forms output -------------------------------------------------------- */
.formout{margin-top:18px}
.formout .ok{border-left:5px solid var(--verified);background:var(--verified-soft);padding:16px 18px;border-radius:var(--radius)}
.formout .bad{border-left:5px solid #A3231A;background:#FBE9E7;padding:16px 18px;border-radius:var(--radius)}
.codebox{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.codebox input{max-width:190px;letter-spacing:.4em;font-family:var(--mono)}

/* ---- Misc ---------------------------------------------------------------- */
.figwrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.sec--ink .figwrap{background:var(--ink-2);border-color:var(--ink-3)}
.figwrap svg{width:100%;height:auto}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:16px;margin:0 0 20px}
.kv div{border-left:4px solid var(--neon);padding-left:14px}
.kv dt,.kv .k{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-bottom:4px}
.kv dd,.kv .v{display:block}
/* A channel is an address, not a headline number - it keeps the body face. */
.kv dd,.kv .v{margin:0;font-family:var(--disp);font-size:1.8rem;text-transform:uppercase;line-height:1.05}
/* A channel is an address, not a headline number - it keeps the body face. */
.kv--plain .v{font-family:var(--body);font-size:1.08rem;text-transform:none;line-height:1.45;letter-spacing:0;overflow-wrap:normal}
.sec--ink .kv .v{color:#fff}

details.faq{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);padding:0;margin-bottom:10px}
details.faq summary{cursor:pointer;padding:16px 18px;font-family:var(--disp);font-size:1.15rem;text-transform:uppercase;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";float:right;color:var(--neon);font-family:var(--mono)}
details.faq[open] summary::after{content:"-"}
details.faq .a{padding:0 18px 18px}
details.faq .a p:last-child{margin-bottom:0}

@media (max-width:640px){
  .pillar{grid-template-columns:1fr;gap:12px}
  .pillar__ico{width:76px;height:76px}
}
@media (max-width:560px){
  body{font-size:16px}
  .brand__word{font-size:1.45rem}
  .listing__head{flex-direction:column}
}
@media (max-width:380px){
  .brand__word{font-size:1.28rem}
  .brand__mark{width:32px;height:32px;flex:0 0 32px}
  .burger{padding:9px 10px}
}

/* ---- Additions for batch two -------------------------------------------- */
/* A section that needs only its eyebrow and thread, because the cards below
   already say what the section is. */
.sechead--bare{margin-bottom:14px}
/* The door picker heading sits tight above the doors it introduces. */
.pickhead{font-size:clamp(1.2rem,2.2vw,1.6rem);color:#fff;margin:20px 0 12px}
.hero .pickhead{color:#fff}
/* The picker on the ink hero field takes the same treatment as on an ink section. */
.hero .picker__door{background:var(--ink-2);border-color:var(--ink-3);border-top-color:var(--ink-4)}
.hero .picker__door h3{color:#fff}
.hero .picker__door p{color:#B9BFCC}
.hero .picker__door .go{color:var(--neon-lift)}
.hero a.picker__door:hover{border-color:var(--neon-lift);border-top-color:var(--neon-lift)}
.hero .picker__door--here{background:var(--ink-3);border-color:var(--neon-lift);border-top-color:var(--neon-lift)}
.hero .picker__door--here .go{color:#9AA3B4}

/* ---- Additions for batch three ------------------------------------------ */

/* ---- The search band -----------------------------------------------------
   A slim strip directly under the hero on every page. One input for the trade
   or the service, the city beside it, and the action. It goes straight into the
   list already filtered, so nobody has to scroll to find a filter bar.
   -------------------------------------------------------------------------- */
.searchband{background:var(--paper-2);border-bottom:1px solid var(--line)}
.searchband__in{max-width:var(--wrap);margin-inline:auto;padding:12px var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,205px) auto;gap:10px;align-items:center}
.searchband label{display:block;min-width:0;position:relative}
.searchband .lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.searchband input,.searchband select{
  font-family:var(--body);font-size:1rem;line-height:1.4;color:var(--ink);width:100%;
  border:1px solid var(--line-2);border-radius:var(--radius);background:var(--white);
  padding:9px 12px;min-height:44px
}
.searchband input{padding-left:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg fill='none' stroke='%235C6270' stroke-width='2'%3E%3Ccircle cx='7.5' cy='7.5' r='5.5'/%3E%3Cpath d='M11.6 11.6L16 16'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 12px center;background-size:16px 16px}
.searchband select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2314161B' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}
.searchband input:hover,.searchband select:hover{border-color:var(--ink-4)}
.searchband input:focus,.searchband select:focus{outline:none;border-color:var(--neon);box-shadow:0 0 0 3px rgba(0,87,255,.16)}
.searchband .btn{min-height:44px;padding:9px 20px;white-space:nowrap}
@media (max-width:760px){
  .searchband__in{grid-template-columns:minmax(0,1fr);gap:8px;padding:10px var(--gutter)}
  .searchband .btn{width:100%}
}

/* ---- The currency bar ----------------------------------------------------
   Four markets, four currencies. Every published amount re-prices when the
   currency changes, so nobody has to convert in their head.
   -------------------------------------------------------------------------- */
.fxbar{background:var(--ink-2);border-bottom:1px solid var(--ink-3)}
.fxbar__in{max-width:var(--wrap);margin-inline:auto;padding:6px var(--gutter);
  display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.fxbar .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#9AA3B4}
.fxbar__set{display:flex;gap:4px}
.fxbar button{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  background:transparent;color:#C9CEDA;border:1px solid var(--ink-4);border-radius:2px;padding:4px 9px;min-height:30px
}
.fxbar button:hover{border-color:var(--neon-lift);color:#fff}
.fxbar button[aria-pressed="true"]{background:var(--neon);border-color:var(--neon);color:#fff}
.fxbar button:focus-visible{outline:2px solid var(--neon-lift);outline-offset:2px}
.fxbar .note{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:#6C7484}
@media (max-width:620px){.fxbar__in{justify-content:space-between}.fxbar .note{display:none}}

/* ---- Picker cards --------------------------------------------------------
   The card is no longer a link with a small caption pretending to be one. It is
   a card carrying the same button the doors above it carry.
   -------------------------------------------------------------------------- */
.picker__door{gap:8px}
.picker__door .btn{align-self:flex-start;margin-top:6px}
.picker__now{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin-top:6px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--neon-deep);background:var(--white);border:1px solid #A8C4FF;border-radius:2px;padding:7px 11px
}
.picker__now::before{content:"";width:8px;height:8px;background:var(--neon);flex:0 0 8px}
.sec--ink .picker__now,.hero .picker__now{background:var(--ink);border-color:var(--neon-lift);color:var(--neon-lift)}
.sec--ink .picker__now::before,.hero .picker__now::before{background:var(--neon-lift)}
.picker__door--here{cursor:default}

/* ---- Pillar-driven sign-up ----------------------------------------------
   The pillar is the first question. Ticking it opens the trades inside it, and a
   provider who lays bricks, paves and welds ticks all three rather than being
   made to choose one.
   -------------------------------------------------------------------------- */
.pillarpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));gap:8px;margin:0 0 6px}
.pillarpick label{
  display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:.95rem;line-height:1.35;
  background:var(--white);border:1px solid var(--line-2);border-top:4px solid var(--line-2);
  border-radius:var(--radius);padding:11px 12px
}
.pillarpick label:hover{border-color:var(--neon);border-top-color:var(--neon)}
.pillarpick input{width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:var(--neon)}
.pillarpick input:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.pillarpick label:has(input:checked){border-color:var(--neon);border-top-color:var(--neon);background:var(--neon-soft)}

.tradebox[hidden]{display:none}
.tradeset{border:1px solid var(--line-2);border-radius:var(--radius);background:var(--white);padding:14px 16px;margin:0 0 12px}
.tradeset[hidden]{display:none}
.tradeset__head{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.tradeset__head h4{font-family:var(--disp);font-size:1.05rem;text-transform:uppercase;margin:0}
.tradeset__head .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.tradeset .checkgrid label{border-color:var(--line);padding:8px 11px;font-size:.92rem}
.tradeset .checkgrid label:has(input:checked){border-color:var(--neon);background:var(--neon-soft)}
.tradeset .checkgrid input{accent-color:var(--neon)}
.pickcount{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin:0 0 14px}
.pickcount b{color:var(--neon-deep)}

/* A rate is a number and a basis together - one without the other tells the
   owner nothing, so the two controls sit on one line as a single answer. */
.rateline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px}
@media (max-width:520px){.rateline{grid-template-columns:minmax(0,1fr)}}
.field input[disabled],.field select[disabled]{background:var(--paper-2);color:var(--ink-4);cursor:not-allowed}

/* ---- The money band ------------------------------------------------------
   How the platform earns, stated in the open rather than buried in prose.
   -------------------------------------------------------------------------- */
.money{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:18px}
.money div{background:var(--white);border:1px solid var(--line);border-top:5px solid var(--neon);border-radius:var(--radius);padding:18px 20px}
.money .k{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:6px}
.money .v{display:block;font-family:var(--disp);font-size:1.9rem;line-height:1.05;text-transform:uppercase;margin-bottom:6px}
.money p{font-size:.93rem;color:var(--ink-3);margin:0}
.sec--ink .money div{background:var(--ink-2);border-color:var(--ink-3);border-top-color:var(--neon-lift)}
.sec--ink .money .v{color:#fff}
.sec--ink .money p{color:#C7CCD8}
.fx-alt{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--ink-4);display:block;margin-top:2px}
.sec--ink .fx-alt{color:#9AA3B4}

.listing__declared{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-4);margin:0}
.listing__declared .tag{background:var(--paper-2);color:var(--ink-3)}

/* A hero that also carries the door picker still owes the artwork real weight,
   so the vector holds its own column rather than shrinking to fit. */
.hero--picker .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero--picker .hero__art{max-width:none}
@media (max-width:900px){.hero--picker .hero__grid{grid-template-columns:minmax(0,1fr)}}


/* --- Musika handoff ------------------------------------------------------
   Materials and Supply left magraft for Musika. A handoff is a full section,
   not a footnote: the art gets its own column and the button carries the same
   weight as any door CTA. --------------------------------------------------- */
.handoff{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center}
.handoff__body>h1,.handoff__body>h2{margin:.2em 0 .5em}
.handoff__body .lede{font-size:clamp(17px,1.5vw,21px);line-height:1.5}
.handoff__cta{display:flex;flex-wrap:wrap;gap:12px;margin:1.4em 0 .8em}
.handoff__art{display:block}
.handoff__svg{width:100%;max-width:none;height:auto;display:block;margin-inline:auto}
.handoff--band{align-items:start}
.handoff--band .handoff__svg{max-width:none}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px)}
.halfcard{border:2px solid var(--ink);padding:clamp(20px,2.4vw,30px);background:var(--paper)}
.halfcard>h3{margin:0 0 .3em}
.halfcard__line{font-size:17px;margin:0 0 .8em}
.sec--ink .halfcard{background:transparent;border-color:currentColor}
@media (max-width:760px){
  .handoff{grid-template-columns:1fr}
  .handoff__art{order:-1}
  .handoff__svg{max-width:220px}
  .split2{grid-template-columns:1fr}
}


/* ======================================================= section scenes
   The standing rule on these builds: a scene gets its OWN column beside the
   text and real weight against the headline. Never stacked underneath, never
   a spot graphic in a corner, and never on a row that carries listings - those
   cards keep the full width. */
.scene { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(26px,3.6vw,54px);align-items:center;margin-top:26px }
.scene--flip > .scene__art { order:-1 }
.scene__art { width:100%;align-self:center }
.scene__art svg { display:block;width:100%;height:auto }
.scene__body > :first-child { margin-top:0 }
.scene__body > :last-child { margin-bottom:0 }
.scene__body .lead { max-width:none }
@media (max-width:820px){
  .scene { grid-template-columns:minmax(0,1fr);gap:22px }
  .scene--flip > .scene__art { order:0 }
}