/* ============================================================
   STEELSPACE, Pop-Up Retail landing page
   Brand system from STEELSPACE 1.0 [BRAND GUIDE]

   TYPOGRAPHY: the licensed brand faces, self-hosted and subset to
   Latin-1 plus the punctuation this page uses. Roughly 10 kB each.
   Display : Alfabet ExtraBold, the only weight the brand ships
   Body    : Neue Haas Grotesk Display, Roman / Medium / Bold
   Fallback: Helvetica Neue, which IS this lineage. Max Miedinger drew
             Neue Haas Grotesk in 1957; it was renamed Helvetica in 1960.
   ============================================================ */
@font-face{
  font-family:"Alfabet";
  src:url("fonts/alfabet-extrabold.woff2") format("woff2");
  font-weight:700 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"NHGDisplay";
  src:url("fonts/nhg-roman.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"NHGDisplay";
  src:url("fonts/nhg-medium.woff2") format("woff2");
  font-weight:500 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"NHGDisplay";
  src:url("fonts/nhg-bold.woff2") format("woff2");
  font-weight:700 900; font-style:normal; font-display:swap;
}
:root{
  --charcoal:#141312;
  --deep:#013B6D;
  --azure:#3AA3FF;
  --steel:#7A7A7A;
  --grey:#F3F3F2;
  --bone:#F7F5F2;
  --white:#FFFFFF;

  --ink:var(--charcoal);
  --ink-2:#4A4746;
  --ink-3:var(--steel);
  --rule:#DCD9D5;
  --rule-2:#EAE7E3;
  --field:var(--bone);

  --ff-display:"Alfabet","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ff-body:"NHGDisplay","Neue Haas Grotesk Display Pro","Helvetica Neue",Helvetica,Arial,sans-serif;

  --pad:clamp(20px,5vw,72px);
  --maxw:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--ff-body);font-size:16px;line-height:1.55;
  font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--azure);color:#fff}

/* ---------- type ---------- */
.h1,.h2,.h3,.stat b{font-family:var(--ff-display);font-weight:700;letter-spacing:-.028em;line-height:.98;text-wrap:balance}
.h1{font-size:clamp(2.35rem,4.1vw,3.5rem)}
.h2{font-size:clamp(1.9rem,3.2vw,2.85rem);line-height:1.02}
.h3{font-size:clamp(1.12rem,1.45vw,1.4rem);letter-spacing:-.02em;line-height:1.15}
.lede{font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.5;color:var(--ink-2);max-width:54ch;text-wrap:pretty}
.lbl{font-size:.685rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.small{font-size:.82rem;line-height:1.5;color:var(--ink-3);max-width:74ch}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.band{border-top:1px solid var(--rule)}
.band-pad{padding-block:clamp(52px,6.4vw,96px)}

/* ---------- skip ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--charcoal);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:100;background:rgba(247,245,242,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.hd{display:flex;align-items:center;gap:clamp(14px,2vw,32px);min-height:66px}
.hd img{height:19px;width:auto}
.hd .sp{margin-left:auto}
.tel{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;text-decoration:none;white-space:nowrap}
.tel svg{width:15px;height:15px;stroke:var(--azure);fill:none;stroke-width:1.9}
.tel .t{border-bottom:1px solid var(--rule)}
.tel:hover .t{border-color:var(--azure)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ff-body);font-size:.95rem;font-weight:700;letter-spacing:-.005em;
  padding:15px 26px;border:1px solid transparent;border-radius:2px;cursor:pointer;
  text-decoration:none;transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.btn-p{background:var(--azure);color:#fff}
.btn-p:hover{background:#1B8DF0}
.btn-p:active{transform:translateY(1px)}
.btn-d{background:var(--charcoal);color:#fff}
.btn-d:hover{background:#2A2725}
.btn-g{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-g:hover{border-color:var(--charcoal)}
.btn-sm{padding:10px 18px;font-size:.85rem}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--azure);outline-offset:2px}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:1000px){.hero{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:stretch}}
.hero-l{padding:clamp(34px,4vw,62px) 0 clamp(34px,3.6vw,56px)}
.hero-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 22px}
.dot{width:6px;height:6px;background:var(--azure);border-radius:50%;flex:none}
.h1 .thin{font-weight:400;letter-spacing:-.028em;font-size:.84em;color:var(--ink-2)}
.hero .lede{margin:18px 0 0;max-width:50ch}
.hero-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* hero visual */
.hero-r{position:relative;min-height:320px;background:var(--grey)}
@media(min-width:1000px){.hero-r{margin-right:calc(-1 * var(--pad))}}
.hero-r>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spec{position:absolute;left:0;bottom:0;background:var(--white);padding:17px 22px 15px;max-width:min(320px,86%);border-top:2px solid var(--azure)}
.spec .lbl{margin-bottom:9px;display:block}
.spec dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 16px;font-size:.83rem}
.spec dt{color:var(--ink-3)}
.spec dd{margin:0;text-align:right;font-weight:600}

/* ---------- proof bar ---------- */
.proof{background:var(--charcoal);color:#fff}
.proof-in{display:grid;gap:24px;padding-block:30px;grid-template-columns:1fr}
/* Quatre statistiques reparties sur toute la largeur. Le 1fr d'origine
   servait a pousser une liste de clients contre le bord droit ; cette
   liste a ete retiree, et la 4e statistique heritait de la colonne
   elastique en restant collee a gauche. */
@media(min-width:820px){.proof-in{grid-template-columns:repeat(2,auto);justify-content:space-between;align-items:center;gap:26px clamp(24px,4vw,54px)}}
@media(min-width:1020px){.proof-in{grid-template-columns:repeat(4,auto)}}
.stat b{display:block;font-size:1.8rem;line-height:1;color:#fff}
.stat span{display:block;font-size:.71rem;letter-spacing:.12em;text-transform:uppercase;color:#8F8B87;margin-top:7px}
.proof-cli{margin:0;font-size:.88rem;color:#A9A5A1;line-height:1.5;max-width:44ch}
@media(min-width:820px){.proof-cli{text-align:right;justify-self:end}}
.proof-cli b{color:#fff;font-weight:600}

/* ---------- form fields (shared) ---------- */
.f-lbl{display:block;font-size:.79rem;font-weight:600;margin-bottom:7px;color:var(--ink)}
.f-lbl .req{color:var(--azure)}
input,textarea{
  width:100%;font-family:var(--ff-body);font-size:.94rem;color:var(--ink);
  background:var(--field);border:1px solid var(--rule);border-radius:2px;padding:12px 13px;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
input:hover,textarea:hover{border-color:#C9C5C0}
input:focus,textarea:focus{background:var(--white);border-color:var(--azure)}

/* ---------- section head ---------- */
.shead{display:grid;gap:16px;margin-bottom:clamp(28px,3.6vw,48px)}
/* Le chapeau etait aligne en bas : avec un chapeau court, il flottait au milieu
   de la colonne et se lisait comme un decalage. Aligne en haut, avec un leger
   decalage optique pour tomber sur la premiere ligne du titre. */
/* Le titre porte 37,8px de marge haute par defaut, que align-items:start rendait
   visible : le chapeau se retrouvait 29px AU-DESSUS du titre. On annule la marge
   du titre, la respiration appartient au padding de section, et on cale le
   chapeau a 10px pour un alignement optique sur la premiere ligne. */
@media(min-width:920px){.shead{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,5vw,76px);align-items:start}
  .shead>h2,.shead>h3{margin-top:0}
  .shead>.lede{margin-top:10px}}

/* ---------- value proposition ---------- */
.vp{display:grid;gap:clamp(26px,3.4vw,56px)}
@media(min-width:940px){.vp{grid-template-columns:1.08fr .92fr;align-items:start}}
.vp-h{font-family:var(--ff-display);font-weight:700;letter-spacing:-.026em;line-height:1.03;font-size:clamp(1.75rem,3vw,2.6rem);margin:0;text-wrap:balance}
.vp-l p{margin:20px 0 0;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.58;color:var(--ink-2);max-width:52ch}
.vp-l p strong{color:var(--ink);font-weight:600}
.vp-card{background:var(--white);border:1px solid var(--rule);padding:clamp(22px,2.5vw,30px)}
.vp-card .lbl{display:block;margin-bottom:16px}
.vp-card ul{margin:0;padding:0}
.vp-card li{list-style:none;display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--rule-2);font-size:.9rem;line-height:1.45}
.vp-card li:first-child{border-top:0;padding-top:0}
.vp-card svg{width:14px;height:14px;stroke:var(--azure);fill:none;stroke-width:2.6;flex:none;margin-top:4px}
.vp-strip{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(28px,3.4vw,44px)}
@media(min-width:680px){.vp-strip{grid-template-columns:repeat(3,1fr)}}
.vp-strip div{background:var(--bone);padding:20px clamp(16px,1.8vw,24px)}
.vp-strip b{display:block;font-family:var(--ff-display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:5px}
.vp-strip span{font-size:.86rem;color:var(--ink-2);line-height:1.45}

/* ---------- benefits ---------- */
.ben{display:grid;gap:1px;background:var(--rule);margin:0;padding:0}
@media(min-width:760px){.ben{grid-template-columns:1fr 1fr}}
@media(min-width:1120px){
  .ben{grid-template-columns:1.32fr 1fr 1fr}
  .ben>li:nth-child(1){grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between}
  .ben>li:nth-child(1) .ben-img{display:block}
  /* 3 cols x 2 rows = 6 cells, item 1 takes 2 of them, so the last item
     spans the remaining two. Without this the bottom-right cell is empty. */
  .ben>li:nth-child(4){grid-column:span 2}
  .ben>li:nth-child(4) p{max-width:62ch}
}
.ben>li{list-style:none;background:var(--bone);padding:clamp(22px,2.5vw,32px);min-width:0}
.ben h3{margin:0 0 10px}
.ben p{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink-2);max-width:38ch}
.ben-img{display:none;margin-top:26px;aspect-ratio:16/9;overflow:hidden;background:var(--grey)}
.ben-img img{width:100%;height:100%;object-fit:cover}

/* ---------- mid cta band ---------- */
.midcta{background:var(--deep);color:#fff}
.midcta-in{display:grid;gap:22px;padding-block:clamp(34px,4vw,52px)}
@media(min-width:820px){.midcta-in{grid-template-columns:1fr auto;align-items:center;gap:40px}}
.midcta h2{font-family:var(--ff-display);font-weight:700;letter-spacing:-.026em;line-height:1.04;font-size:clamp(1.5rem,2.4vw,2.05rem);margin:0;color:#fff;text-wrap:balance}
.midcta p{margin:10px 0 0;color:#9EC5E6;font-size:.95rem;max-width:54ch}
.midcta-act{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.midcta .btn-g{color:#fff;border-color:rgba(255,255,255,.34)}
.midcta .btn-g:hover{border-color:#fff}

/* ---------- footprints ---------- */
.units{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.units>*{background:var(--white);padding:15px clamp(14px,1.6vw,22px)}
.units .uhead{background:var(--grey);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
@media(min-width:720px){.units{grid-template-columns:1.05fr 1fr 1fr 1fr 1.5fr}}
@media(max-width:719px){
  .units{grid-template-columns:1fr 1fr}
  .units .uhead{display:none}
  .units .uc::before{content:attr(data-l);display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
  .units .un{grid-column:1/-1;background:var(--bone)}
}
.units .un{font-family:var(--ff-display);font-weight:800;font-size:.98rem;letter-spacing:-.01em}
.units .uc{font-size:.9rem;font-weight:600;font-variant-numeric:tabular-nums}
.units .uc.txt{font-weight:400;color:var(--ink-2)}

/* ---------- how it runs ---------- */
.proc{counter-reset:s;display:grid;gap:clamp(28px,3.2vw,46px);margin:clamp(30px,4vw,50px) 0 0;padding:0}
/* Header for the process block. It deliberately does NOT reuse .shead, which
   is a two-column title/lede grid above 920px: putting an eyebrow and a title
   in it split them into separate columns, bottom-aligned. */
.phead{margin:clamp(46px,5.6vw,78px) 0 clamp(24px,2.8vw,38px)}
.phead .lbl{margin:0 0 15px}
.phead .h2{margin:0;max-width:40ch}

/* Four steps: Scope, Design, Build, Deploy. 2x2 then a single row, so no cell
   is ever left empty and no span rule is needed. No rules and no chevrons:
   the columns are separated by space alone, and carry no inner padding so the
   first one aligns on the same left edge as the eyebrow and the title. */
@media(min-width:620px){.proc{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.proc{grid-template-columns:repeat(4,1fr)}}
.proc>li{list-style:none;counter-increment:s;display:flex;flex-direction:column;min-width:0}
.proc-h{display:flex;align-items:baseline;gap:11px;padding:0 0 13px}
.proc-h::before{content:"0" counter(s);font-family:var(--ff-display);font-weight:700;font-size:.74rem;letter-spacing:.03em;color:var(--azure)}
.proc-h h3{margin:0;font-size:.95rem;min-width:0}
.proc p{margin:0;padding:0;font-size:.86rem;color:var(--ink-2);line-height:1.5}
.proc p+p{margin-top:11px}

/* ---------- credibility ---------- */
/* Client logo wall, files supplied by the client. Each PNG was trimmed and
   re-centred inside an identical 420x150 canvas, scaled so the marks carry
   comparable optical weight despite ratios running from 1.5 to 19. A fixed
   render height therefore balances them with no per-logo tuning.
   Eleven logos: the last cell spans two columns so 12 units divide evenly
   into 2, 4 and 6 columns and no cell is left empty. */
.logos{display:grid;grid-template-columns:repeat(2,1fr);align-items:center;
  gap:clamp(14px,2vw,24px) clamp(16px,2.4vw,32px);
  margin:0 0 clamp(26px,3vw,38px);padding:0;list-style:none}
@media(min-width:560px){.logos{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.logos{grid-template-columns:repeat(6,1fr)}}
.logos>li{display:flex;align-items:center;justify-content:center;min-width:0}
.logos>li:last-child{grid-column:span 2}
.logos img{display:block;height:clamp(34px,3.4vw,46px);width:auto;opacity:.72}
.work{display:grid;gap:18px}
@media(min-width:700px){.work{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){
  .work{grid-template-columns:repeat(4,1fr)}
  .work>figure:nth-child(1){grid-column:span 2;grid-row:span 2}
  .work>figure:nth-child(1) .wimg{aspect-ratio:auto;flex:1;min-height:320px}
}
.work figure{margin:0;background:var(--white);border:1px solid var(--rule);display:flex;flex-direction:column}
.wimg{aspect-ratio:4/3;overflow:hidden;background:var(--grey)}
.wimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.work figure:hover .wimg img{transform:scale(1.028)}
.work figcaption{padding:14px 16px 16px}
.work .cli{font-family:var(--ff-display);font-weight:800;font-size:.95rem;letter-spacing:-.005em;display:block}
.work .ctx{font-size:.79rem;color:var(--ink-3);margin-top:4px;display:block}

/* ---------- form ---------- */
.fwrap{background:var(--charcoal);color:#fff}
.fgrid{display:grid;gap:clamp(30px,4vw,60px)}
@media(min-width:980px){.fgrid{grid-template-columns:.8fr 1.2fr;align-items:start}}
.fside .h2{color:#fff}
.fside .lede{color:#A9A5A1}
.fside-list{margin:26px 0 0;padding:0}
.fside-list li{list-style:none;display:flex;gap:12px;padding:13px 0;border-top:1px solid rgba(255,255,255,.13);font-size:.88rem;color:#CFCBC7;line-height:1.45}
.fside-list svg{width:15px;height:15px;stroke:var(--azure);fill:none;stroke-width:2.4;flex:none;margin-top:3px}
.fside-list a{color:#fff;font-weight:600}
.fcard{background:var(--white);color:var(--ink);padding:clamp(22px,2.8vw,36px)}
.frow{display:grid;gap:16px;margin-bottom:16px}
@media(min-width:560px){.frow.two{grid-template-columns:1fr 1fr}}
textarea{min-height:112px;resize:vertical}
.err{border-color:#C4302B !important}
.errmsg{display:none;font-size:.75rem;color:#C4302B;margin:6px 0 0}
.errmsg.on{display:block}

/* budget slider, matching the current Gravity Form control */
.rng{margin-bottom:18px}
.rng-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.rng-out{font-family:var(--ff-display);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;padding:0;background:transparent;border:0;cursor:pointer}
input[type=range]:hover{border:0}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--rule);border-radius:2px}
input[type=range]::-moz-range-track{height:4px;background:var(--rule);border-radius:2px}
input[type=range]::-moz-range-progress{height:4px;background:var(--azure);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:var(--white);border:2px solid var(--azure);box-shadow:0 1px 3px rgba(20,19,18,.2)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--white);border:2px solid var(--azure);box-shadow:0 1px 3px rgba(20,19,18,.2)}
input[type=range]:focus-visible{outline:2px solid var(--azure);outline-offset:4px}
.rng-scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--ink-3);margin-top:9px;font-variant-numeric:tabular-nums}

.consent{display:flex;gap:11px;align-items:flex-start;margin-top:2px;font-size:.79rem;color:var(--ink-2);line-height:1.45}
.consent input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--azure)}
.captcha{margin-top:18px;padding:13px 15px;background:var(--grey);border:1px dashed var(--rule);font-size:.76rem;color:var(--ink-3)}
.fsend{margin-top:22px}
.fsend .btn{width:100%}
.fnote{font-size:.75rem;color:var(--ink-3);margin:12px 0 0;text-align:center}

/* ---------- faq ---------- */
.faq{max-width:920px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:19px 44px 19px 0;position:relative;font-weight:600;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;margin-top:-7px;border-right:1.8px solid var(--azure);border-bottom:1.8px solid var(--azure);transform:rotate(45deg);transition:transform .22s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 8% 22px 0;color:var(--ink-2);font-size:.94rem;line-height:1.6}
.faq .a p{margin:0 0 10px}
.faq .a p:last-child{margin:0}

/* ---------- footer ---------- */
footer{background:var(--charcoal);color:#8F8B87;font-size:.85rem}
.fcols{display:grid;gap:30px;padding-block:clamp(38px,4.6vw,58px)}
@media(min-width:720px){.fcols{grid-template-columns:1.6fr 1fr 1fr}}
footer img{height:17px;width:auto;opacity:.9;filter:invert(1) brightness(2.4)}
footer .lbl{color:#6E6A66;display:block;margin-bottom:13px}
footer ul{margin:0;padding:0}
footer li{list-style:none;margin-bottom:8px}
footer a{color:#C6C2BE;text-decoration:none}
footer a:hover{color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.11);padding-block:18px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.76rem}
.fbot .sp{margin-left:auto}

/* ---------- sticky mobile cta (PL-09) ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:1px;background:var(--rule);border-top:1px solid var(--rule);box-shadow:0 -6px 22px rgba(20,19,18,.09)}
.sticky a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 10px;font-size:.9rem;font-weight:700;text-decoration:none;background:var(--white);color:var(--ink)}
.sticky a.p{background:var(--azure);color:#fff}
.sticky svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}
@media(max-width:767px){
  .sticky{display:flex}
  body{padding-bottom:57px}
  header .tel .t{display:none}
}

/* ---------- reveal ----------
   Content is VISIBLE by default. The fade-up is opt-in: JS adds .js-anim to
   <html> only when it can drive it. No JS, inert observer, prerender or
   webview: the page still renders in full. */
.rv{opacity:1;transform:none}
.js-anim .rv{opacity:0;transform:translateY(14px)}
.js-anim .rv.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.js-anim .rv,.js-anim .rv.in{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================
   Text wordmark in place of the logo image.
   The favicon itself is the STEEL SPACE wordmark, so setting the header
   in type rather than an image keeps the two consistent.
   ============================================================ */
.wordmark{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:clamp(1rem,1.5vw,1.15rem);
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
}
a.wordmark:hover{color:var(--azure)}
a.wordmark:focus-visible{outline:2px solid var(--azure);outline-offset:3px}
/* Footer: the real vector lockup, inlined so it takes currentColor and
   stays crisp at any size. Client request: "vectoriel true to brand". */
.fmark-l{display:inline-block;color:#fff;line-height:0}
.fmark-l:hover{color:var(--azure)}
.fmark-l:focus-visible{outline:2px solid var(--azure);outline-offset:4px}
/* Logotype only, the logomark was pulled at the client's request. It is a
   flatter ratio than the lockup (1259x144 vs 1080x144), so the width has to
   grow to keep the rendered height clear of the 16px floor in the guide. */
.fmark{display:block;width:clamp(178px,18vw,212px);height:auto}

/* ============================================================
   Third-party overlays are suppressed on the landing pages.

   The cookie banner (CookieYes, injected through GTM) and any chat widget
   cover the form and the sticky call bar on mobile, and the banner was
   pushing ad_storage:denied into the dataLayer, which crippled the Google
   Ads conversion signal this page exists to produce.

   NOTE: this removes the consent gate on these two pages only. Quebec's
   Law 25 and the GDPR both require consent before setting tracking
   cookies, so this is a compliance decision the client owns, not a
   technical default.
   ============================================================ */
[class*="cky-"],
#cookieyes,
.cky-overlay,
.cky-consent-container,
.cky-modal,
.cky-btn-revisit-wrapper{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
/* common chat widget containers, blocked pre-emptively */
#intercom-container,#intercom-frame,.intercom-lightweight-app,
#drift-widget,#drift-frame-controller,
#tidio-chat,#crisp-chatbox,#tawkchat-container,
#hubspot-messages-iframe-container,
#chat-widget-container,#livechat-eye-catcher,
.lc-widget,.crisp-client{
  display:none !important;
  pointer-events:none !important;
}

/* Zoho SalesIQ, the chat widget that loads late through GTM.
   Broad attribute matches because Zoho renames its containers between
   releases; none of these prefixes collide with the page's own classes. */
[class*="zsiq"],[id*="zsiq"],
[class*="zls-"],[id*="zls-"],
[class*="siqembed"],#siqiframe,.siq_bR,.zsiq_theme1,
[class*="zsiq_floatmain"]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ============================================================
   Studio content.
   The brand guide's channel rule asks for roughly 80% studio material on
   the web: workshop, fabrication, craft, construction detail. The finished
   installation shots alone were the wrong balance.
   ============================================================ */
.vp-img{
  margin:clamp(28px,3.4vw,44px) 0 0;
  border:1px solid var(--rule);
  background:var(--white);
}
.vp-img img{width:100%;height:auto;display:block;aspect-ratio:16/7;object-fit:cover}
.vp-img figcaption{
  padding:13px clamp(16px,1.8vw,22px);
  font-size:.83rem;
  color:var(--ink-2);
  border-top:1px solid var(--rule-2);
  line-height:1.45;
}
/* the strip follows the image, so it loses its own top margin */
.vp-img + .vp-strip{margin-top:0;border-top:0}

/* six work items instead of five: keep the feature tile, tile the rest */
@media(min-width:1080px){
  .work>figure:nth-child(1){grid-column:span 2;grid-row:span 2}
}

/* ============================================================
   The Ready fleet.
   Replaces the invented spec table. Real unit names from the client's
   Discovery Deck; no dimensions are published that cannot be sourced.
   ============================================================ */
/* Dark tiles carrying the unit renders from the client's own Discovery Deck.
   The renders are light line-work on transparency, so they only read on a
   dark ground; that also matches how the deck presents the fleet.
   Five models since management pulled POP-UP XP and POP-UP XL from the
   offer. Five divides badly, so the last cell spans two columns at 2 and
   3 columns (6 units, both exact) and reverts to one at 5 columns. */
.fleet{display:grid;gap:10px;margin:0;padding:0;list-style:none}
@media(min-width:520px){.fleet{grid-template-columns:repeat(2,1fr)}
  .fleet>li:last-child{grid-column:span 2}}
@media(min-width:820px){.fleet{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1120px){.fleet{grid-template-columns:repeat(5,1fr)}
  .fleet>li:last-child{grid-column:auto}}
.fleet>li{display:flex;flex-direction:column;min-width:0;background:var(--charcoal);overflow:hidden}
.fu-n{display:block;padding:13px 16px;font-size:.76rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(255,255,255,.14)}
.fu-i{display:block;padding:10px 12px 14px}
.fu-i img{display:block;width:100%;height:auto}


/* the fourth proof-bar figure is a dimension, so it needs tighter type */
.proof-in .stat:nth-child(4) b{font-size:1.2rem;letter-spacing:-.01em}

/* lead line inside the value-prop card */
.vp-card-lead{
  margin:0 0 16px;font-size:.92rem;line-height:1.5;color:var(--ink);
  padding-bottom:14px;border-bottom:1px solid var(--rule-2);
}

/* Light variant of the form section, used where the form sits right under the dark proof bar */
.fwrap-light{background:var(--grey);color:var(--ink)}
.fwrap-light .fside .h2{color:var(--ink)}
.fwrap-light .fside .lede{color:var(--ink-2)}
.fwrap-light .fside-list li{color:var(--ink-2);border-top-color:var(--rule)}
.fwrap-light .fside-list a{color:var(--ink)}
.fwrap-light .fcard{border:1px solid var(--rule)}

/* ============================================================
   Trade-show review, 2026-10-09. Scoped classes, other pages untouched.
   ============================================================ */
/* hero selling points (desktop: fills the space under the buttons) */
.hero-usp{margin:34px 0 0;padding:0;list-style:none;max-width:52ch}
.hero-usp li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--rule);font-size:.92rem;color:var(--ink-2);line-height:1.45}
.hero-usp li:last-child{border-bottom:1px solid var(--rule)}
.hero-usp b{color:var(--ink);font-weight:600}
.hero-usp svg{width:15px;height:15px;stroke:var(--azure);fill:none;stroke-width:2.4;flex:none;margin-top:3px}

/* client logo strip: one line, scrolling, pauses on hover */
.lstrip{background:var(--white);border-block:1px solid var(--rule);overflow:hidden;padding-block:clamp(16px,2vw,22px)}
.lstrip-track{display:flex;width:max-content;animation:lstrip 40s linear infinite}
.lstrip ul{display:flex;align-items:center;gap:clamp(40px,5vw,76px);margin:0;padding:0 clamp(20px,2.5vw,38px);list-style:none;flex:none}
.lstrip li{flex:none}
.lstrip img{display:block;height:clamp(30px,3vw,40px);width:auto;opacity:.72}
.lstrip:hover .lstrip-track{animation-play-state:paused}
@keyframes lstrip{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .lstrip-track{animation:none !important;width:auto;justify-content:center}
  .lstrip ul{flex-wrap:wrap;justify-content:center;row-gap:18px}
  .lstrip ul[aria-hidden]{display:none}
}

/* hero with the quote form (trade-show, 2026-10-09) */
.hero2{position:relative;isolation:isolate;background:var(--charcoal);color:#fff;overflow:hidden}
.hero2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%;z-index:-2}
.hero2::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(20,19,18,.88) 0%,rgba(20,19,18,.74) 48%,rgba(20,19,18,.5) 100%)}
.hero2-in{display:grid;gap:26px;padding-block:32px 34px}
@media(min-width:1000px){.hero2-in{grid-template-columns:minmax(0,1fr) minmax(440px,520px);gap:clamp(40px,5vw,84px);align-items:start;padding-block:clamp(44px,4.6vw,68px)}
  .hero2-l{position:sticky;top:110px;padding-top:clamp(8px,2vw,30px)}}
.hero2 .h1{color:#fff}
.hero2 .lbl{color:rgba(255,255,255,.78)}
.hero2 .lede{color:rgba(255,255,255,.88);margin:18px 0 0}
.hero2 .hero-usp li{color:rgba(255,255,255,.84);border-color:rgba(255,255,255,.18)}
.hero2 .hero-usp b{color:#fff}
.hero2-credit{margin:22px 0 0;font-size:.78rem;line-height:1.5;color:rgba(255,255,255,.6)}
.hero2-credit b{color:rgba(255,255,255,.88);font-weight:600}
.hero2-form{scroll-margin-top:84px}
.hero2 .fcard{box-shadow:0 20px 60px rgba(0,0,0,.32)}
.hero2-fh{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.35rem,1.8vw,1.6rem);letter-spacing:-.02em;line-height:1.05;margin:0;color:var(--ink)}
.hero2-fsub{margin:8px 0 20px;font-size:.88rem;color:var(--ink-2);line-height:1.45}
@media(max-width:999px){
  .hero2::before{background:linear-gradient(180deg,rgba(20,19,18,.6) 0%,rgba(20,19,18,.9) 55%)}
  .hero2 .hero-usp,.hero2-credit{display:none}
}

/* mobile order: the form comes after the proof (lp.js moves it into .mform-slot) */
.mform-slot{display:none}
.mform-slot.on{display:block;background:var(--grey);border-top:1px solid var(--rule);padding-block:34px 38px}
.mform-slot .fcard{border:1px solid var(--rule)}
@media(max-width:999px){.hero2-in{padding-block:32px 36px}}
/* projects as a swipe row on phones, so the form is not five tiles away */
@media(max-width:699px){
  .work-swipe{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scroll-padding-inline:var(--pad);scrollbar-width:none}
  .work-swipe::-webkit-scrollbar{display:none}
  .work-swipe>figure{flex:0 0 84%;scroll-snap-align:start}
}
.mform-slot{scroll-margin-top:70px}

/* logos more visible (2026-10-09) */
.lstrip{padding-block:20px 22px}
.lstrip-lbl{text-align:center;margin:0 0 14px;color:var(--ink-2)}
.lstrip img{height:clamp(36px,9vw,44px);opacity:.9}
.lstrip ul{gap:clamp(44px,6vw,80px)}
.hero2-logos{display:none}
@media(min-width:1000px){
  .lstrip{display:none}
  .hero2-logos{display:block;margin-top:26px}
  .hero2-logos .lbl{margin:0 0 12px;color:rgba(255,255,255,.7)}
  .hero2-logos ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 26px;align-items:center}
  .hero2-logos li{display:flex;align-items:center;justify-content:center}
  .hero2-logos img{display:block;width:100%;max-width:110px;height:auto;filter:brightness(0) invert(1);opacity:.92}
}
@media(min-width:1000px){.hero2 .hero-usp{margin-top:26px}.hero2-l{padding-top:0}}

/* bigger logos and selling points on desktop (trial on trade-show, 2026-10-10) */
@media(min-width:1000px){
  .hero2-xl .hero2-logos{margin-top:30px}
  .hero2-xl .hero2-logos ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 30px}
  .hero2-xl .hero2-logos img{max-width:168px;opacity:1}
  .hero2-xl .hero-usp{margin-top:30px;max-width:none}
  .hero2-xl .hero-usp li{font-size:1.06rem;gap:14px;padding:15px 0;color:rgba(255,255,255,.86)}
  .hero2-xl .hero-usp b{font-size:1.12rem}
  .hero2-xl .hero-usp svg{width:19px;height:19px;margin-top:3px}
}
@media(min-width:1000px){
  .hero2-xl .hero2-in{padding-top:clamp(30px,3vw,46px)}
  .hero2-xl .hero2-logos{margin-top:24px}
  .hero2-xl .hero2-logos .lbl{margin-bottom:6px}
  .hero2-xl .hero2-logos ul{row-gap:0}
  .hero2-xl .hero-usp{margin-top:20px}
  .hero2-xl .hero-usp li{padding:12px 0}
}

/* CTA card (trade-show, 2026-10-10): contained in the content width, charcoal,
   azure button for contrast, reassurance line under it. Square corners like the
   rest of the brand system. */
.ctaband{padding-block:clamp(26px,3.4vw,48px)}
.ctacard{background:var(--charcoal);color:#fff;display:grid;gap:22px;padding:clamp(26px,3.2vw,44px) clamp(22px,3.4vw,48px)}
@media(min-width:900px){.ctacard{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px}}
.ctacard-h{font-family:var(--ff-display);font-weight:700;letter-spacing:-.026em;line-height:1.04;font-size:clamp(1.5rem,2.3vw,2.05rem);margin:0;color:#fff;text-wrap:balance}
.ctacard-p{margin:10px 0 0;color:#B9B5B1;font-size:.98rem;line-height:1.5;max-width:56ch}
.ctacard-act{display:flex;flex-direction:column;gap:12px}
@media(min-width:900px){.ctacard-act{align-items:center}}
.ctacard-btns{display:flex;flex-wrap:wrap;gap:12px}
.ctacard .btn-lg{padding:16px 28px;font-size:1rem}
.ctacard .btn-p{box-shadow:0 8px 24px rgba(58,163,255,.28)}
.ctacard .btn-g{color:#fff;border-color:rgba(255,255,255,.34)}
.ctacard .btn-g:hover{border-color:#fff}
.ctacard-note{display:flex;align-items:center;gap:8px;margin:0;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#CFCBC7}
.ctacard-note svg{width:14px;height:14px;stroke:var(--azure);fill:none;stroke-width:2.6;flex:none}
.ctacard-desk{display:none;margin-top:clamp(28px,3vw,40px)}
@media(min-width:1000px){.ctacard-desk{display:grid}}

/* FAQ centred + copy of the quote form under it (2026-10-16) */
.faq-sec .shead{grid-template-columns:1fr;justify-items:center;text-align:center;max-width:760px;margin-inline:auto}
.faq-sec .shead>.lede{margin-top:0}
.faq-sec .faq{margin-inline:auto}
.faq-form{max-width:760px;margin:clamp(40px,4.6vw,64px) auto 0;scroll-margin-top:84px}
.faq-form .fcard{border:1px solid var(--rule)}
.faq-sec .shead{gap:12px}.faq-sec .shead>h2{margin:0}.faq-sec .shead>.lede{margin:0}