/* ==========================================================================
   QnQ Solutions Ltd — design system
   Palette derived from the QnQ logo: navy #083C76 + hi-vis amber #FEBE01
   Type: Archivo (expanded/heavy display) · IBM Plex Sans · IBM Plex Mono
   ========================================================================== */

:root{
  /* surfaces — navy-black, not neutral black */
  --void:#05090F;
  --deck:#080E16;
  --deck-2:#0A121C;
  --panel:#0E1926;
  --panel-2:#132234;
  --panel-3:#18293D;

  /* brand */
  --navy:#0A4285;
  --navy-lift:#1567C4;
  --navy-deep:#062A55;
  --amber:#FEBE01;
  --amber-deep:#C89600;
  --amber-soft:#FFD861;

  /* ink */
  --paper:#E9F1F9;
  --paper-dim:#C3D3E4;
  --steel:#8DA4BE;
  --steel-dim:#657E9B;
  --steel-faint:#42566E;

  /* lines */
  --line:rgba(141,164,190,.15);
  --line-soft:rgba(141,164,190,.09);
  --line-strong:rgba(141,164,190,.28);

  /* type */
  --display:"Archivo","Archivo Expanded",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* metrics */
  --wrap:1280px;
  --gutter:clamp(20px,5vw,48px);
  --band:clamp(72px,9vw,132px);
  --header-h:74px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;background:var(--void);color:var(--paper-dim);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;color:var(--paper);font-family:var(--display);font-weight:800}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

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

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band);position:relative}
.band--tight{padding-block:clamp(48px,6vw,80px)}
.band--deck{background:var(--deck)}
.band--panel{background:linear-gradient(180deg,var(--deck) 0%,var(--deck-2) 100%)}

/* hairline rule with an amber tick at the left — reads as a load-chart axis */
.rule{height:1px;background:var(--line);position:relative}
.rule::before{content:"";position:absolute;left:0;top:-2px;width:56px;height:5px;background:var(--amber)}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber);
  display:flex;align-items:center;gap:.7em;margin:0 0 1.1rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--amber);flex:none}
.eyebrow--plain{color:var(--steel-dim)}
.eyebrow--plain::before{background:var(--steel-faint)}

h1,.h1{
  font-size:clamp(2.55rem,7vw,5.4rem);
  font-variation-settings:"wdth" 112,"wght" 800;
  line-height:.94;letter-spacing:-.025em;text-wrap:balance;
}
h2,.h2{
  font-size:clamp(1.95rem,4.3vw,3.35rem);
  font-variation-settings:"wdth" 108,"wght" 800;
  line-height:1.0;letter-spacing:-.02em;text-wrap:balance;
}
h3,.h3{
  font-size:clamp(1.1rem,1.7vw,1.4rem);
  font-variation-settings:"wdth" 102,"wght" 700;
  line-height:1.2;letter-spacing:-.01em;
}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.6;color:var(--paper-dim);max-width:56ch}
.body-copy{color:var(--steel);max-width:62ch}
.body-copy + .body-copy{margin-top:1rem}
.amber{color:var(--amber)}

/* mono data readout — the "load chart" voice, used for every spec on the site */
.data{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--steel-dim)}
.data-k{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-faint)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 700;
  font-size:.94rem;letter-spacing:.01em;
  padding:.92em 1.5em;border-radius:2px;
  transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
  border:1px solid transparent;white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn--amber{background:var(--amber);color:#12160C}
.btn--amber:hover{background:var(--amber-soft)}
.btn--ghost{border-color:var(--line-strong);color:var(--paper)}
.btn--ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn--solid{background:var(--panel-2);color:var(--paper);border-color:var(--line)}
.btn--solid:hover{background:var(--panel-3);border-color:var(--line-strong)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* text link with a sliding underline */
.tlink{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 700;
  font-size:.9rem;color:var(--amber);padding-bottom:2px;
  background-image:linear-gradient(var(--amber),var(--amber));
  background-size:0% 1px;background-repeat:no-repeat;background-position:left bottom;
  transition:background-size .35s var(--ease-out);
}
.tlink svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.tlink:hover{background-size:100% 1px}
.tlink:hover svg{transform:translateX(3px)}

/* ==========================================================================
   HEADER
   ========================================================================== */
section[id],div[id]{scroll-margin-top:calc(var(--header-h) + 18px)}
.hdr{
  position:fixed;inset:0 0 auto;z-index:80;height:var(--header-h);
  display:flex;align-items:center;
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{background:rgba(5,9,15,.86);backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:2rem;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.hdr__logo{display:flex;align-items:center;flex:none}
.hdr__logo img{height:52px;width:auto}
.hdr__nav{display:flex;align-items:center;gap:1.9rem;margin-left:auto}
.hdr__nav a{
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 600;
  font-size:.83rem;letter-spacing:.03em;text-transform:uppercase;color:var(--paper-dim);
  position:relative;padding-block:4px;transition:color .25s var(--ease);
}
.hdr__nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--amber);
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease-out);
}
.hdr__nav a:hover,.hdr__nav a[aria-current="page"]{color:var(--paper)}
.hdr__nav a:hover::after,.hdr__nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr__cta{display:flex;align-items:center;gap:.9rem;flex:none}
.hdr__tel{
  display:inline-flex;align-items:center;gap:.55em;white-space:nowrap;
  font-family:var(--mono);font-size:.86rem;font-weight:500;color:var(--paper);
  padding:.6em 1.05em;border:1px solid var(--line-strong);border-radius:2px;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.hdr__tel svg{width:14px;height:14px;color:var(--amber)}
.hdr__tel:hover{border-color:var(--amber);background:rgba(254,190,1,.07)}

.burger{display:none;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:2px;flex:none}
.burger span{display:block;width:17px;height:1.5px;background:var(--paper);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--paper);transition:transform .3s var(--ease)}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
.burger.is-open span{background:transparent}
.burger.is-open span::before{transform:translateY(5.5px) rotate(45deg)}
.burger.is-open span::after{transform:translateY(-5.5px) rotate(-45deg)}

.mnav{
  position:fixed;inset:var(--header-h) 0 0;z-index:79;background:rgba(5,9,15,.985);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;padding:1.6rem var(--gutter) 2.2rem;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  overflow-y:auto;
}
.mnav.is-open{opacity:1;visibility:visible;transform:none}
.mnav__k{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--steel-faint);display:flex;align-items:center;gap:.7em;margin-bottom:.4rem;
}
.mnav__k::after{content:"";height:1px;background:var(--line);flex:1}
.mnav__links{display:flex;flex-direction:column}
.mnav__links a{
  display:flex;align-items:center;gap:1.1rem;padding:1.02rem 0;
  border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.mnav.is-open .mnav__links a{opacity:1;transform:none}
.mnav.is-open .mnav__links a:nth-child(1){transition-delay:.05s}
.mnav.is-open .mnav__links a:nth-child(2){transition-delay:.1s}
.mnav.is-open .mnav__links a:nth-child(3){transition-delay:.15s}
.mnav.is-open .mnav__links a:nth-child(4){transition-delay:.2s}
.mnav.is-open .mnav__links a:nth-child(5){transition-delay:.25s}
.mnav__n{font-family:var(--mono);font-size:.72rem;color:var(--amber);flex:none;width:1.9rem}
.mnav__t{
  font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 700;
  font-size:clamp(1.35rem,5.5vw,1.6rem);color:var(--paper);flex:1;line-height:1.15;
}
.mnav__links a svg{width:18px;height:18px;color:var(--steel-faint);flex:none;transition:transform .3s var(--ease),color .3s}
.mnav__links a:active svg,.mnav__links a:hover svg{color:var(--amber);transform:translateX(3px)}
.mnav__links a[aria-current="page"] .mnav__t{color:var(--amber)}
.mnav__foot{margin-top:auto;padding-top:1.8rem;display:flex;flex-direction:column;gap:.8rem}
.mnav__foot .btn{width:100%;justify-content:center}
.mnav__meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.9rem}
.mnav__addr{font-family:var(--mono);font-size:.63rem;letter-spacing:.06em;color:var(--steel-dim);line-height:1.7}
.mnav__social{display:flex;gap:.5rem}
.mnav__social a{
  width:38px;height:38px;border:1px solid var(--line);border-radius:2px;flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--steel);
}
.mnav__social svg{width:15px;height:15px}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:clamp(600px,94svh,940px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-3}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__scrim{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(5,9,15,.90) 0%,rgba(5,9,15,.42) 26%,rgba(5,9,15,.30) 48%,rgba(5,9,15,.88) 84%,var(--void) 100%),
    linear-gradient(90deg,rgba(5,9,15,.82) 0%,rgba(5,9,15,.34) 52%,rgba(5,9,15,.12) 100%);
}
/* faint working-radius arcs — the crane's geometry, drawn over the real skyline */
.hero__arcs{position:absolute;right:-14%;bottom:-30%;width:min(1000px,105vw);z-index:-1;opacity:.5;pointer-events:none;color:var(--amber)}
.hero__in{width:100%;max-width:var(--wrap);margin-inline:auto;padding:0 var(--gutter) clamp(56px,7vw,96px);position:relative}
.hero h1{max-width:15ch;margin-bottom:1.6rem}
.hero .lede{max-width:52ch;color:var(--paper-dim)}

/* ---------- spec strip under the hero ---------- */
.specstrip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--deck)}
/* minmax(0,1fr) everywhere, not plain 1fr: a plain 1fr track refuses to go
   narrower than its widest word, so on a 360px phone one long label used to
   push the whole page sideways. minmax(0,…) lets the track shrink. */
.specstrip__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.spec{padding:clamp(24px,3.2vw,40px) clamp(16px,2.4vw,32px);border-left:1px solid var(--line-soft);position:relative}
.spec:first-child{border-left:0}
.spec__v{
  font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 800;
  font-size:clamp(1.5rem,2.75vw,2.2rem);line-height:1;color:var(--paper);letter-spacing:-.02em;
  display:block;margin-bottom:.5rem;
}
.spec__v em{font-style:normal;color:var(--amber)}
.spec__l{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-dim);line-height:1.45;display:block}
/* On a phone these sit two-up, which leaves about 148px of text per box, and
   "Sole ASCOREL" is written as one unbreakable phrase — at the full size it
   ran off the side of the screen. Ease the value type down on narrow screens
   so every word fits; by 430px it is already back to the normal size. */
@media (max-width:430px){
  .spec__v{font-size:clamp(1.05rem,5vw,1.5rem)}
}

/* ---------- client marquee ---------- */
.marquee{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:marq 36s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__seq{display:flex;align-items:center;flex:none}
.marquee__n{
  font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 700;
  font-size:clamp(1.15rem,2.4vw,1.7rem);letter-spacing:.02em;color:var(--steel-dim);
  white-space:nowrap;display:inline-flex;align-items:center;
  transition:color .3s var(--ease);
}
.marquee__n:hover{color:var(--paper-dim)}
.marquee__n::after{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);
  opacity:.55;margin-inline:clamp(1.7rem,4vw,3.4rem);flex:none;
}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- slow radar sweep in hero arc graphics ---------- */
.hero__arcs .sweep,.phero__arcs .sweep{animation:sweep 26s linear infinite;transform-origin:400px 400px}
@keyframes sweep{to{transform:rotate(360deg)}}

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.shead{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-bottom:clamp(2.4rem,4vw,3.6rem);max-width:var(--wrap)}
.shead--split{grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}
.shead p{color:var(--steel);max-width:52ch}

/* ==========================================================================
   PILLAR CARDS — what QnQ supplies
   ========================================================================== */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.pillar{
  background:var(--deck);padding:0;position:relative;display:flex;flex-direction:column;
  transition:background .4s var(--ease);overflow:hidden;
}
.pillar::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.pillar:hover{background:var(--panel)}
.pillar:hover::after{transform:scaleX(1)}
.pillar__img{aspect-ratio:4/3;overflow:hidden;background:var(--panel);position:relative}
.pillar__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out);filter:saturate(.85) contrast(1.05)}
.pillar:hover .pillar__img img{transform:scale(1.06)}
.pillar__body{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1;gap:.7rem}
.pillar__k{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.pillar p{color:var(--steel);font-size:.94rem;line-height:1.6;flex:1}
.pillar .tlink{margin-top:.4rem;align-self:flex-start}

/* ==========================================================================
   SIGNATURE — ASCOREL anti-collision zoning
   ========================================================================== */
.zone{background:linear-gradient(170deg,var(--deck-2) 0%,#07101C 55%,var(--deck) 100%);position:relative;overflow:hidden}
.zone::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 22% 42%,rgba(21,103,196,.16),transparent 68%);
}
.zone__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2rem,5vw,5rem);align-items:center;position:relative}
.zone__stage{
  position:relative;border:1px solid var(--line);background:rgba(5,9,15,.5);
  border-radius:3px;overflow:hidden;
}
/* engineering graph paper behind the diagram */
.zone__stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:34px 34px;opacity:.55;
}
.zone__svg{width:100%;height:auto;display:block;position:relative}
/* live 3D scene — vertical drags must still scroll the page on a phone */
.zone__cv{width:100%;display:block;position:relative;touch-action:pan-y;cursor:grab}
.zone__stage.is-grabbing .zone__cv{cursor:grabbing}
/* what the scene is showing, in words, under the stage */
.zone__key{display:grid;gap:.1rem;margin-top:1.1rem;counter-reset:zk;border-top:1px solid var(--line-soft)}
.zone__key li{
  display:grid;grid-template-columns:16px 1fr;gap:.85rem;align-items:start;
  padding:.72rem .1rem;border-bottom:1px solid var(--line-soft);
  color:var(--steel);font-size:.86rem;line-height:1.5;
}
.zone__key .zone__sw{width:16px;height:9px;margin-top:.42em}
.zone__key b{
  display:block;color:var(--paper);font-family:var(--display);
  font-variation-settings:"wdth" 102,"wght" 700;font-size:.92rem;font-weight:700;
  letter-spacing:-.005em;margin-bottom:.12rem;
}
.zone__hint{
  position:absolute;top:12px;right:14px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel-faint);background:rgba(5,9,15,.6);border:1px solid var(--line-soft);
  border-radius:2px;padding:.36em .6em;transition:opacity .4s var(--ease);
}
.zone__stage.is-grabbing .zone__hint{opacity:0}
/* status sits top-left, legend bottom-right — clear of the in-diagram labels */
.zone__hud{position:absolute;inset:0;pointer-events:none}
.zone__status{
  position:absolute;top:12px;left:14px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.42em .78em;border:1px solid var(--line-strong);border-radius:2px;
  background:rgba(5,9,15,.8);color:var(--steel);transition:color .3s,border-color .3s,background .3s;
}
.zone__status.is-alert{color:#12160C;background:var(--amber);border-color:var(--amber)}
.zone__legend{position:absolute;right:14px;bottom:12px;display:flex;flex-direction:column;gap:.4rem;align-items:flex-end}
.zone__lg{display:flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-dim)}
.zone__sw{width:16px;height:8px;flex:none;border-radius:1px}
.zone__sw--work{background:rgba(21,103,196,.30);border:1px solid rgba(21,103,196,.75)}
.zone__sw--stop{background:repeating-linear-gradient(45deg,var(--amber) 0 3px,rgba(254,190,1,.16) 3px 6px)}
.zone__sw--nofly{background:repeating-linear-gradient(-45deg,rgba(255,90,78,.85) 0 3px,rgba(255,90,78,.16) 3px 6px)}

/* Run the same site with the system on, then off. Presented as a deliberate
   control under the scene rather than a widget floating over it. */
.zone__demo{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  margin-top:1rem;padding:1rem 1.15rem;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--deck) 0%,var(--deck-2) 100%);border-radius:2px;
}
.zone__demo__t{display:flex;flex-direction:column;gap:.25rem}
.zone__demo__k{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);
}
.zone__demo__s{color:var(--steel);font-size:.86rem;line-height:1.5;max-width:46ch}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:2px;overflow:hidden;flex:none}
.seg__b{
  padding:.72em 1.15em;font-family:var(--display);
  font-variation-settings:"wdth" 100,"wght" 700;font-size:.82rem;
  color:var(--steel);white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.seg__b + .seg__b{border-left:1px solid var(--line-strong)}
.seg__b:hover{color:var(--paper)}
.seg__b.is-on{background:var(--amber);color:#12160C}
.seg__b.is-off{background:#B83226;color:#fff}
/* the readout when the jibs actually touch — a warning, not a slab of red */
.zone__status.is-hit{
  background:rgba(184,50,38,.16);border-color:#E0503F;color:#FF9182;
}

/* live slew-angle readout, bottom-left of the stage */
.zone__data{
  position:absolute;left:14px;bottom:12px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel-dim);background:rgba(5,9,15,.75);border:1px solid var(--line);
  border-radius:2px;padding:.4em .7em;font-variant-numeric:tabular-nums;
}

/* SVG text inside the diagram */
.zone__lbl{font-family:var(--mono);font-size:11px;fill:var(--steel-dim);letter-spacing:.1em;text-transform:uppercase}
.zone__lbl--red{fill:#FF8A7E}

.zone__facts{display:grid;gap:0;margin-top:2rem;border-top:1px solid var(--line)}
.zone__fact{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.zone__fact dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-faint);flex:none;width:8.5rem}
.zone__fact dd{margin:0;color:var(--paper-dim);font-size:.95rem}

/* badge for the distributor claim */
.badge{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);border:1px solid rgba(254,190,1,.4);background:rgba(254,190,1,.06);
  padding:.5em .85em;border-radius:2px;margin-bottom:1.2rem;
}
.badge svg{width:13px;height:13px}

/* ==========================================================================
   SPLIT FEATURE (Zoomlion / cameras / about)
   ========================================================================== */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--wide-l{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split--wide-r{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.split__media{position:relative}
.split__media img{width:100%;border-radius:3px}
.split__media--frame{border:1px solid var(--line);padding:10px;background:var(--panel)}
.split__tag{
  position:absolute;left:0;bottom:0;transform:translate(-14px,14px);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--amber);color:#12160C;padding:.5em .8em;border-radius:2px;
}
.is-rev{order:2}

/* category list — Zoomlion ranges */
.cats{border-top:1px solid var(--line);margin-top:2rem}
.cat{
  display:flex;align-items:center;gap:1.1rem;padding:1.15rem .4rem;
  border-bottom:1px solid var(--line-soft);transition:padding-left .35s var(--ease),background .35s var(--ease);
}
.cat:hover{padding-left:1rem;background:rgba(21,103,196,.07)}
.cat__n{font-family:var(--mono);font-size:.7rem;color:var(--amber);flex:none;width:2.2rem}
.cat__t{font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 700;font-size:1.02rem;color:var(--paper);flex:1}
.cat__d{color:var(--steel-dim);font-size:.86rem;text-align:right;display:none}
.cat svg{width:15px;height:15px;color:var(--steel-faint);flex:none;transition:transform .3s var(--ease),color .3s}
.cat:hover svg{transform:translateX(4px);color:var(--amber)}

/* floating product shot on dark */
.prodshot{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,3vw,2.5rem)}
.prodshot::before{
  content:"";position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle,rgba(21,103,196,.22),transparent 68%);filter:blur(30px);
}
.prodshot img{position:relative;filter:drop-shadow(0 30px 55px rgba(0,0,0,.65))}

/* spec table */
.spectable{border-top:1px solid var(--line);margin-top:1.8rem}
.spectable div{display:flex;justify-content:space-between;gap:1.5rem;padding:.85rem .2rem;border-bottom:1px solid var(--line-soft);align-items:baseline}
.spectable dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-faint)}
.spectable dd{margin:0;font-family:var(--mono);font-size:.85rem;color:var(--paper-dim);text-align:right}

/* tick list */
.ticks{display:grid;gap:.75rem;margin-top:1.6rem}
.ticks li{display:flex;gap:.8rem;align-items:flex-start;color:var(--steel);font-size:.96rem;line-height:1.55}
.ticks svg{width:15px;height:15px;color:var(--amber);flex:none;margin-top:.32em}

/* ==========================================================================
   ACCESSORY SPEC CARDS
   ========================================================================== */
.kit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,1.6vw,1.4rem)}
.kitcard{
  border:1px solid var(--line);background:var(--deck);padding:clamp(20px,2.2vw,28px);
  display:flex;flex-direction:column;gap:1rem;position:relative;overflow:hidden;
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);
}
.kitcard:hover{border-color:var(--line-strong);background:var(--panel);transform:translateY(-3px)}
.kitcard__ico{width:34px;height:34px;color:var(--amber)}
.kitcard h3{font-size:1.06rem}
.kitcard__specs{display:grid;gap:.45rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--line-soft)}
.kitcard__specs li{font-family:var(--mono);font-size:.76rem;line-height:1.5;color:var(--steel-dim);display:flex;gap:.55em;align-items:flex-start}
.kitcard__specs li::before{content:"";width:4px;height:4px;margin-top:.62em;background:var(--amber);flex:none;border-radius:50%}

.madein{
  display:inline-flex;align-items:center;gap:.7em;margin-top:2.4rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-dim);
}
.madein svg{width:17px;height:17px;flex:none}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(140px,17vw,230px);gap:clamp(.6rem,1vw,1rem)}
.gal figure{margin:0;overflow:hidden;position:relative;background:var(--panel)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out);filter:saturate(.88)}
.gal figure:hover img{transform:scale(1.05)}
.gal figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.gal figcaption{
  position:absolute;left:0;bottom:0;padding:.7rem .9rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);
  background:linear-gradient(0deg,rgba(5,9,15,.9),transparent);width:100%;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.35rem 3rem 1.35rem 0;position:relative;
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 700;
  font-size:clamp(1rem,1.5vw,1.16rem);color:var(--paper);transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--amber)}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:50%;width:12px;height:2px;background:var(--amber);
  transform:translateY(-50%);
}
.faq summary::before{
  content:"";position:absolute;right:.4rem;top:50%;width:12px;height:2px;background:var(--amber);
  transform:translateY(-50%) rotate(90deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::before{transform:translateY(-50%) rotate(0)}
.faq__a{padding:0 3rem 1.5rem 0;color:var(--steel);max-width:70ch}

/* ==========================================================================
   CTA + FORM
   ========================================================================== */
.cta{position:relative;overflow:hidden;background:var(--deck)}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 65% 75% at 78% 30%,rgba(10,66,133,.34),transparent 66%);
}
.cta__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2.4rem,5vw,5rem);position:relative;align-items:start}
.cta h2{margin-bottom:1.2rem}

.contactlines{display:grid;gap:1px;margin-top:2.2rem;background:var(--line-soft);border:1px solid var(--line-soft)}
.cline{display:flex;gap:1rem;align-items:center;padding:1.05rem 1.15rem;background:var(--deck);transition:background .3s var(--ease)}
.cline:hover{background:var(--panel)}
.cline svg{width:17px;height:17px;color:var(--amber);flex:none}
.cline__t{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-faint);margin-bottom:.15rem}
.cline__v{display:block;color:var(--paper);font-size:.97rem;font-family:var(--mono)}

.form{border:1px solid var(--line);background:rgba(8,14,22,.72);padding:clamp(22px,3vw,38px);border-radius:3px}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.05rem}
.field label{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dim)}
.field input,.field textarea,.field select{
  background:var(--void);border:1px solid var(--line);border-radius:2px;
  padding:.8rem .9rem;color:var(--paper);font-size:.95rem;font-family:var(--body);
  transition:border-color .25s var(--ease),background .25s var(--ease);width:100%;
}
.field textarea{resize:vertical;min-height:118px}
/* iOS zooms any focused input under 16px and pans the page sideways to do
   it - the "side scroll" that isn't a layout bug. Phones get 16px inputs. */
@media (max-width:780px){
  .field input,.field textarea,.field select,.tabsel select{font-size:16px}
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--amber);background:#070C13}
.field input::placeholder,.field textarea::placeholder{color:var(--steel-faint)}
.field select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238DA4BE' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .95rem center;background-size:11px;padding-right:2.4rem}
.form .btn{width:100%;justify-content:center;margin-top:.4rem}
.form__note{font-size:.8rem;color:var(--steel-faint);margin-top:1rem;text-align:center;line-height:1.5}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{background:var(--void);border-top:1px solid var(--line);padding-block:clamp(48px,6vw,76px) 2rem}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem)}
.ftr__logo img{height:66px;width:auto;margin-bottom:1.3rem}
.ftr__tag{color:var(--steel-dim);font-size:.92rem;max-width:34ch}
.ftr h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-faint);margin:0 0 1.1rem;font-weight:500}
.ftr__list{display:grid;gap:.72rem}
.ftr__list a,.ftr__list span{color:var(--steel);font-size:.92rem;transition:color .25s var(--ease)}
.ftr__list a:hover{color:var(--amber)}
.ftr__social{display:flex;gap:.6rem;margin-top:1.6rem}
.ftr__social a{
  width:38px;height:38px;border:1px solid var(--line);border-radius:2px;
  display:flex;align-items:center;justify-content:center;color:var(--steel);
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.ftr__social a:hover{border-color:var(--amber);color:var(--amber);background:rgba(254,190,1,.07)}
.ftr__social svg{width:16px;height:16px}
.ftr__base{
  margin-top:clamp(2.4rem,4vw,3.6rem);padding-top:1.6rem;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--steel-faint);
}

/* ==========================================================================
   SUBPAGE COMPONENTS
   ========================================================================== */

/* ---------- page hero ---------- */
.phero{position:relative;min-height:clamp(430px,58svh,620px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.phero__bg{position:absolute;inset:0;z-index:-3}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.phero__scrim{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(5,9,15,.88) 0%,rgba(5,9,15,.44) 30%,rgba(5,9,15,.55) 62%,var(--void) 100%),
    linear-gradient(90deg,rgba(5,9,15,.8) 0%,rgba(5,9,15,.3) 55%,rgba(5,9,15,.14) 100%);
}
.phero__arcs{position:absolute;right:-18%;bottom:-46%;width:min(780px,100vw);z-index:-1;opacity:.4;color:var(--amber);pointer-events:none}
.phero__in{width:100%;max-width:var(--wrap);margin-inline:auto;padding:calc(var(--header-h) + 48px) var(--gutter) clamp(40px,5.5vw,68px)}
.phero h1{font-size:clamp(2.3rem,5.6vw,4.4rem);max-width:18ch;margin-bottom:1.3rem}
.phero .lede{max-width:56ch}

.crumb{
  display:flex;align-items:center;gap:.9em;flex-wrap:wrap;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-dim);margin-bottom:1.7rem;
}
.crumb a{transition:color .25s var(--ease)}
.crumb a:hover{color:var(--amber)}
.crumb .sep{color:var(--steel-faint)}
.crumb .here{color:var(--amber)}

/* ---------- 3-step strip ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.step{background:var(--deck);padding:clamp(22px,2.6vw,34px);transition:background .35s var(--ease)}
.step:hover{background:var(--panel)}
.step__n{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--amber);display:block;margin-bottom:.9rem}
.step h3{font-size:1.05rem;margin-bottom:.55rem}
.step p{color:var(--steel);font-size:.93rem;line-height:1.6}
.steps--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- camera viewfinder frame (BCS) ---------- */
.vf{position:relative;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--panel)}
.vf img{width:100%;height:100%;object-fit:cover;display:block}
.vf__hud{position:absolute;inset:0;pointer-events:none;font-family:var(--mono);text-transform:uppercase}
.vf__hud svg{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);color:rgba(233,241,249,.75)}
.vf__rec{
  position:absolute;top:20px;left:24px;display:flex;align-items:center;gap:.55em;
  font-size:.64rem;letter-spacing:.16em;color:var(--paper);
  background:rgba(5,9,15,.6);padding:.45em .75em;border-radius:2px;
}
.vf__rec::before{content:"";width:7px;height:7px;border-radius:50%;background:#FF4B3E;animation:vfblink 1.6s steps(2,start) infinite}
.vf__tag{
  position:absolute;bottom:20px;right:24px;
  font-size:.62rem;letter-spacing:.14em;color:var(--paper);
  background:rgba(5,9,15,.6);padding:.45em .75em;border-radius:2px;
}
@keyframes vfblink{50%{opacity:.2}}

/* ---------- blueprint panel (engineering drawing on graph paper) ---------- */
.blueprint{position:relative;border:1px solid var(--line);background:rgba(5,9,15,.5);border-radius:3px;overflow:hidden;padding:clamp(18px,2.4vw,30px)}
.blueprint::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:34px 34px;opacity:.55;
}
.blueprint svg{width:100%;height:auto;display:block;position:relative}
.bp-lbl{font-family:var(--mono);font-size:11px;fill:var(--steel-dim);letter-spacing:.08em;text-transform:uppercase}
.bp-val{font-family:var(--mono);font-size:12px;fill:var(--amber);letter-spacing:.06em}
.blueprint__cap{
  position:relative;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-dim);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}

/* ==========================================================================
   EVERY RENTAL COMES WITH DATUM
   The app is white-label: the contractor's brand sits in the header, and
   "powered by Datum" at the foot. Chrome, colours and type below are taken
   from Datum's own app screenshots (datum/home-assets/real-*.png):
   header #0F172A, accent #E8A33D, page #F5F7FA, green #16A34A, amber #D97706,
   Barlow / Barlow Condensed.
   ========================================================================== */
.dtm{background:linear-gradient(180deg,var(--deck) 0%,#07101C 60%,var(--deck) 100%);position:relative;overflow:hidden}
.dtm::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 78% 40%,rgba(21,103,196,.16),transparent 68%);
}
.dtm__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;position:relative}
@media (max-width:960px){.dtm__grid{grid-template-columns:1fr}}

/* The crane binder, stated plainly in this site's own language.
   NOT a mock of Datum's interface — imitating a real product's UI from
   fragments got it wrong four times, so this describes what is in the binder
   instead of pretending to be the app. Swap in real screenshots when we have
   them. */
.bindercard{
  border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:linear-gradient(180deg,var(--deck) 0%,var(--deck-2) 100%);
  padding:clamp(20px,3vw,30px);
}
.bindercard__k{
  display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber);margin-bottom:.6rem;
}
.bindercard h3{font-size:clamp(1.2rem,2.2vw,1.55rem);margin-bottom:1.3rem}
.binderlist{counter-reset:bl;display:grid;gap:0;border-top:1px solid var(--line-soft)}
.binderlist li{
  counter-increment:bl;display:grid;grid-template-columns:2rem 1fr;gap:.2rem .8rem;
  padding:.85rem .1rem;border-bottom:1px solid var(--line-soft);align-items:baseline;
}
.binderlist li::before{
  content:counter(bl,decimal-leading-zero);grid-row:1/3;
  font-family:var(--mono);font-size:.7rem;color:var(--amber);
}
.binderlist b{
  font-family:var(--display);font-variation-settings:"wdth" 102,"wght" 700;
  font-size:.98rem;color:var(--paper);
}
.binderlist span{grid-column:2;font-size:.86rem;color:var(--steel);line-height:1.5}
.bindercard__f{margin-top:1.2rem;color:var(--steel);font-size:.9rem;line-height:1.6;max-width:48ch}
.bindercard__by{
  display:inline-block;margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--steel-faint);width:100%;
}
.bindercard__by{display:flex;align-items:center;gap:.6rem}
.bindercard__by img{height:13px;width:auto;opacity:.9}

/* ---- the collab lockup ----
   The convention every collaboration uses — two marks, one "×" between them.
   Drawn as two marker strokes rather than the letter x, so it reads as
   something swiped on with a paint pen on a hoarding, not typed. */
.collab{
  display:inline-flex;align-items:center;gap:clamp(.9rem,2.2vw,1.5rem);
  margin-bottom:clamp(1.4rem,3vw,2rem);
  padding:.7rem 1.1rem .7rem .8rem;border:1px solid var(--line);border-radius:2px;
  background:rgba(5,9,15,.4);
}
/* both marks carry the same optical weight, on one baseline */
.collab__m{display:flex;align-items:center;gap:.5rem;flex:none}
.collab__m img{height:clamp(26px,3vw,34px);width:auto}
.collab__m--dtm{
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 800;
  font-size:clamp(.95rem,1.9vw,1.25rem);letter-spacing:.2em;color:var(--paper);
  text-indent:.2em;
}
.collab__m--dtm img{height:clamp(15px,1.7vw,20px);width:auto;border-radius:0;opacity:.96}

/* the × — three overlapping round strokes per diagonal so the middle runs
   fat and the ends taper, the way a paint pen actually lays down. Sized
   under the logos so it joins them instead of competing with them. */
.collab__x{
  width:clamp(20px,2.4vw,28px);height:clamp(20px,2.4vw,28px);flex:none;overflow:visible;
  transform:rotate(-4deg);
}
.collab__x line{stroke:var(--amber);stroke-linecap:round;fill:none}
.collab__x .s1{stroke-width:5}
.collab__x .s2{stroke-width:8}
.collab__x .s3{stroke-width:10}
.collab__x g{
  stroke-dasharray:90;stroke-dashoffset:90;
}
.rv.in .collab__x g{animation:swipe .42s var(--ease-out) forwards}
.rv.in .collab__x g:nth-child(2){animation-delay:.13s}
@keyframes swipe{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.collab__x g{stroke-dashoffset:0;animation:none}}

/* ---- the live demo: with Datum / without ---- */
.phone--live{max-width:none;width:100%}
.phone--live .phone__scr{min-height:452px}
/* app chrome: the bottom bar Datum actually has */
.phone--live .phone__scr{display:flex;flex-direction:column}
.phone--live .phone__body{flex:1}




/* Datum's own typeface — Barlow and Barlow Condensed, as used in the app.
   Everything inside a Datum mockup is set in it so the screens read as
   Datum's, not as this site's. */
.collab__m--dtm{font-variation-settings:normal;font-weight:700;letter-spacing:.18em}

/* what comes with the crane */
.kitrow{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);margin-top:clamp(2rem,4vw,3rem);border-radius:2px;overflow:hidden;
}
.kitrow div{background:var(--deck);padding:clamp(14px,2vw,22px);text-align:center}
.kitrow b{
  display:block;font-family:var(--display);font-variation-settings:"wdth" 102,"wght" 700;
  font-size:.95rem;color:var(--paper);margin-bottom:.3rem;
}
.kitrow span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-dim)}
@media (max-width:760px){.kitrow{grid-template-columns:repeat(2,minmax(0,1fr))}}



/* ==========================================================================
   Paperwork — the everything-else pitch on the rentals page
   ========================================================================== */
.pw{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.2rem;align-items:start}
@media (max-width:860px){.pw{grid-template-columns:1fr}}
.pw__c{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:clamp(20px,3vw,30px)}
.pw__c--hot{border-color:rgba(254,190,1,.34);
  background:linear-gradient(180deg,rgba(254,190,1,.05),transparent),var(--panel)}
.pw__c h3{font-size:1.12rem;margin-bottom:1.1rem;color:var(--paper)}
.pw__c ul{list-style:none;margin:0;padding:0}
.pw__c li{position:relative;padding:0 0 .8rem 1.6rem;color:var(--steel);
  font-size:.95rem;line-height:1.65}
.pw__c li:last-child{padding-bottom:0}
.pw__c li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--steel-dim)}
.pw__c--hot li::before{background:var(--amber)}
.pw__c li b{color:var(--paper-dim)}

/* the cost, said once and impossible to skim past */
.pw__cost{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  margin-top:1.4rem;background:var(--panel-2);border:1px solid rgba(254,190,1,.3);
  border-radius:12px;padding:1.2rem 1.4rem}
.pw__cost b{display:block;color:var(--paper);font-size:1.02rem;margin-bottom:.25rem}
.pw__cost span{display:block;color:var(--steel);font-size:.92rem;line-height:1.6}
.pw__from{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.1rem}
.pw__from div{font-size:.88rem;color:var(--steel)}
.pw__from em{display:block;font-style:normal;font-family:var(--display);
  font-variation-settings:"wdth" 104,"wght" 700;font-size:1.15rem;color:var(--amber);margin-top:.15rem}
.pw__how{margin-top:1.4rem;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:clamp(20px,3vw,30px)}
.pw__how h3{font-size:1.12rem;margin-bottom:1.3rem;color:var(--paper)}
.pw__how__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.3rem}
.pw__how__g b{display:block;color:var(--amber);font-size:.95rem;margin-bottom:.4rem}
.pw__how__g span{display:block;color:var(--steel);font-size:.9rem;line-height:1.65}
.pw__note{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.9rem;line-height:1.65;color:var(--steel-dim)}
.pw__also{margin-top:1.1rem;font-size:.92rem;line-height:1.65;color:var(--paper-dim)}
.pw__who{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.88rem;line-height:1.65;color:var(--steel-dim)}

/* ==========================================================================
   Availability — what is free, from the office's own hire dates
   ========================================================================== */
.avail{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:3px;
  overflow:hidden;margin-top:2rem}
.avail__c{background:var(--deck);padding:1.4rem 1.5rem}
.avail__c h3{font-size:1rem;margin-bottom:.7rem;color:var(--paper)}
.avail__s{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--steel)}
.avail__s::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--steel-dim);flex:none}
.avail__c.is-free .avail__s{color:#5FD08A}
.avail__c.is-free .avail__s::before{background:#5FD08A;box-shadow:0 0 0 3px rgba(95,208,138,.18)}
.avail__c.is-service .avail__s{color:var(--amber)}
.avail__c.is-service .avail__s::before{background:var(--amber)}
.avail__note{margin-top:1.1rem;font-size:.86rem;color:var(--steel-dim);line-height:1.65}

/* ==========================================================================
   MC 603 — the real unit. Yellow touchscreen, blue icons, five chevron keys.
   The palette is the same one drawMC603() in qnq-crane3d.js uses, because the
   panel further up this page is the same machine. Change a colour in one and
   change it in the other.
   ========================================================================== */
.mc{
  --mc-case:#5C6066; --mc-pod:#666A70; --mc-key:#E8D48A; --mc-key-ink:#3A3A30;
  --mc-screen:#F0DE8A; --mc-strip:#DCD4AE; --mc-strip-ink:#4A4630;
  --mc-pane:#F7F2DA; --mc-soft:#F2CE22; --mc-blue:#1E63B8; --mc-ink:#23231C;
  --mc-hair:rgba(74,70,48,.30); --mc-ok:#1B7A2F; --mc-ko:#C8281C;
  max-width:min(560px,100%);margin-inline:auto;
}
.mc__bez{
  position:relative;border-radius:14px;padding:20px 11px 11px;
  background:linear-gradient(160deg,#6A6E75 0%,var(--mc-case) 45%,#4A4E54 100%);
  box-shadow:0 26px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18),
             inset 0 -2px 6px rgba(0,0,0,.5);
  display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:9px;
}
.mc__brand{
  position:absolute;top:5px;left:calc(50% - 23px);transform:translateX(-50%);
  background:#C9CCD1;border-radius:2px;padding:1px 12px;
  font-family:var(--mono);font-weight:700;font-size:.5rem;letter-spacing:.2em;
  color:#2B2B2B;text-indent:.2em;
}

/* ---- the screen ---- */
.mc__screen{
  background:var(--mc-screen);border-radius:3px;overflow:hidden;
  box-shadow:inset 0 0 0 2px #3F4248;
  display:flex;flex-direction:column;min-height:250px;min-width:0;
  font-family:var(--mono);color:var(--mc-ink);
}
.mcs__bar--plain{justify-content:flex-start}
.mcs__bar{
  flex:0 0 auto;background:var(--mc-strip);color:var(--mc-strip-ink);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.28rem .45rem;font-size:.56rem;
}
.mcs__crumb{display:flex;align-items:center;gap:.32rem;min-width:0}
.mcs__crumb .mci{width:11px;height:11px;color:var(--mc-blue);flex:none}
.mcs__crumb b{font-weight:600;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcs__clock{font-variant-numeric:tabular-nums;white-space:nowrap;
  overflow:hidden;text-overflow:clip}
.mcs__body{flex:1 1 auto;display:flex;min-height:0;min-width:0}

/* the icon set — outline by default, like the unit */
.mci{width:18px;height:18px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---- user page: sensor column, plan view, function access ---- */
.mcs__left{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.mcs__cols{flex:1 1 auto;min-height:0;min-width:0;display:flex}
.mcs__vals{flex:0 0 30%;min-width:0;display:flex;flex-direction:column;
  border-right:1px solid var(--mc-hair)}
.mcs__val{
  flex:1 1 0;display:flex;align-items:center;justify-content:space-between;gap:.3rem;
  padding:0 .4rem;border-bottom:1px solid var(--mc-hair);min-height:0;
}
.mcs__val:last-child{border-bottom:0}
.mcs__val .mci{width:21px;height:21px;color:var(--mc-ink);flex:none;stroke-width:1.5}
.mcs__val b{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.mcs__val i{font-style:normal;font-size:.66rem;font-weight:500;margin-left:.06em}
.mcs__view{flex:1 1 auto;background:var(--mc-pane);display:flex;min-width:0}
.mcs__plan{width:100%;height:auto;margin:auto 0}
/* the movement indications along the foot of the user page (s15) */
.mcs__move{flex:0 0 auto;background:var(--mc-strip);display:flex;padding:2px 0}
.mcs__move i{
  flex:1 1 0;height:9px;
  -webkit-mask:no-repeat center/7px 9px; mask:no-repeat center/7px 9px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M3.5 0 7 4H5v5H2V4H0z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M3.5 0 7 4H5v5H2V4H0z' fill='%23000'/%3E%3C/svg%3E");
  background:rgba(74,70,48,.34);
}

/* ---- the five soft keys, and the tiles ---- */
.mcs__soft{
  flex:0 0 30px;background:var(--mc-soft);border-left:1px solid var(--mc-hair);
  display:flex;flex-direction:column;
}
.mcs__sk .mci[data-i="tick"]{stroke-width:3}
.mcs__sk{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;
  color:var(--mc-blue);border-bottom:1px solid rgba(74,70,48,.22);
  transition:background .15s var(--ease);
}
.mcs__sk:last-child{border-bottom:0}
.mcs__sk:not(:disabled):hover{background:#FFDE55}
.mcs__sk.is-idle{opacity:1;cursor:default}
.mcs__sk.is-empty{flex:1 1 0;border-bottom:1px solid rgba(74,70,48,.22)}

.mcs__grid{
  flex:1 1 auto;background:var(--mc-soft);min-width:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:7px;
  align-content:start;
}
.mcs__grid--3{grid-template-columns:repeat(3,1fr)}
.mcs__tile{
  aspect-ratio:1.18;background:#FFD11A;border:1px solid rgba(74,70,48,.24);
  border-radius:2px;color:var(--mc-blue);display:flex;align-items:center;
  justify-content:center;transition:background .15s var(--ease);
}
.mcs__tile .mci{width:62%;height:62%;stroke-width:1.5}
.mcs__tile:not(:disabled):hover{background:#FFE066}
.mcs__tile.is-idle{cursor:default}

/* ---- the consistency check table ---- */
.mcs__pane{flex:1 1 auto;background:var(--mc-pane);padding:.5rem .55rem;min-width:0;
  display:flex;flex-direction:column;justify-content:center}
.mcs__tab{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.6rem}
.mcs__tab th{
  font-size:.44rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mc-blue);text-align:right;padding:0 .25rem .3rem;
  border-bottom:1px solid var(--mc-hair);
}
.mcs__tab th:first-child{text-align:left}
.mcs__tab td{
  text-align:right;padding:.3rem .25rem;font-variant-numeric:tabular-nums;
  border-bottom:1px solid rgba(74,70,48,.16);
}
.mcs__tab td:first-child{text-align:left;font-weight:600}
.mcs__tab i{font-style:normal;font-size:.44rem;margin-left:.12em}
.mcs__tab .is-ok{color:var(--mc-ok);font-weight:700}
.mcs__tab .is-ko{color:var(--mc-ko);font-weight:700}

/* ---- the case: five chevron keys and the two indicator lamps ---- */
.mc__pod{
  background:var(--mc-pod);border-radius:5px;padding:14px 5px 5px;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.10),0 0 0 1px rgba(0,0,0,.30);
  display:flex;flex-direction:column;gap:6px;position:relative;
}
.mc__leds{position:absolute;top:5px;left:0;right:0;display:flex;justify-content:center;gap:9px}
.mc__led{width:5px;height:5px;border-radius:50%}
.mc__led--amber{background:#6B5A18}
.mc__led--red{background:#6B2018}
.mc__key{
  flex:1 1 0;border-radius:5px;background:var(--mc-key);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 0 0 1px rgba(0,0,0,.28),
             0 2px 3px rgba(0,0,0,.35);
  font-family:var(--mono);font-size:.62rem;color:var(--mc-key-ink);
  transition:background .15s var(--ease),transform .08s var(--ease);
}
.mc__key:hover{background:#F6E7A8}
.mc__key:active{transform:translateY(1px)}

.mc .mc__cite{white-space:normal}
.mc__note{
  font-size:.78rem;line-height:1.55;color:var(--paper-dim);
  border-left:2px solid var(--amber);padding-left:.7rem;
}
.mc__demo{
  align-self:flex-start;margin-top:.15rem;padding:.45em .8em;border-radius:4px;
  border:1px solid rgba(141,164,190,.4);background:transparent;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--steel);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.mc__demo:hover{background:rgba(141,164,190,.12);color:var(--paper)}

@media (max-width:560px){
  .mc__bez{grid-template-columns:minmax(0,1fr) 38px;padding:18px 8px 8px}
  .mcs__soft{flex-basis:26px}
  .mcs__grid{grid-template-columns:repeat(3,1fr)}
  .mcs__val b{font-size:.95rem}
}
.mc__cap{
  margin-top:.9rem;display:flex;justify-content:space-between;align-items:center;
  gap:.8rem;flex-wrap:wrap;
}
.mc__cap span{font-size:.8rem;color:var(--steel);line-height:1.5}
.mc__cite{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;white-space:nowrap;
  color:var(--amber);border:1px solid rgba(254,190,1,.4);background:rgba(254,190,1,.07);
  padding:.32em .6em;border-radius:2px;
}

/* caption under a manufacturer image, so its source is never ambiguous */
.figcap{
  margin-top:.7rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  color:var(--steel-faint);text-align:center;
}

/* ---------- light product card (for supplier sheets shot on white) ---------- */
.lightcard{background:#F2F5F9;border-radius:3px;padding:clamp(16px,2.2vw,30px);border:1px solid var(--line)}
.lightcard img{width:100%;display:block;mix-blend-mode:multiply}

/* ---------- end-of-page CTA ---------- */
.endcta{position:relative;overflow:hidden;background:var(--deck);border-top:1px solid var(--line);text-align:center}
.endcta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(10,66,133,.30),transparent 68%);
}
.endcta .wrap{position:relative;max-width:820px}
.endcta h2{margin-bottom:1rem}
.endcta p{color:var(--steel);max-width:52ch;margin-inline:auto}
.endcta .btn-row{justify-content:center}

/* ---------- next-page pager ---------- */
.pager{border-top:1px solid var(--line);background:var(--void)}
.pager__in{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding-block:clamp(26px,4vw,42px)}
.pager__back{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-dim);display:inline-flex;align-items:center;gap:.6em;transition:color .25s}
.pager__back:hover{color:var(--amber)}
.pager__back svg{width:13px;height:13px;transform:rotate(180deg)}
.pager__next{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;text-align:right}
.pager__k{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-faint)}
.pager__t{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 700;
  font-size:clamp(1.15rem,2.4vw,1.6rem);color:var(--paper);transition:color .25s var(--ease);
}
.pager__t svg{width:18px;height:18px;color:var(--amber);transition:transform .3s var(--ease)}
.pager__next:hover .pager__t{color:var(--amber)}
.pager__next:hover .pager__t svg{transform:translateX(4px)}

/* ---------- subpage responsive ---------- */
@media (max-width:620px){
  .steps,.steps--2{grid-template-columns:1fr}
  .phero{min-height:clamp(380px,52svh,520px)}
  .pager__in{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .pager__next{align-items:flex-start;text-align:left}
}

/* ---------- thumb-sized tap targets on phones ----------
   Footer links and the pager's "Back to home" link are about 24px tall —
   fine for a mouse, too small for a thumb (the guideline is 44px). On small
   screens the gap between footer links comes off and the same space goes on
   as padding INSIDE each link, so the tappable box clears 40px while the
   spacing on screen barely moves. Desktop is left exactly as it was, and the
   social icons already have their own 38px box. */
@media (max-width:900px){
  .ftr__list{gap:0}
  .ftr__list > a,.ftr__list > span{display:block;min-height:40px;padding-block:.45rem}
  .pager__back{min-height:40px}
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
/* Sections start hidden and fade up as they scroll into view — but ONLY when
   JavaScript is there to reveal them again. qnq.js puts the "js" class on
   <html> on its very first line; without it (JavaScript off, or the script
   blocked or failed to load) none of this applies and the page just shows,
   instead of rendering as thousands of pixels of blank. */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
html.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* iPads and small laptops: the full nav plus the phone pill is a tight fit,
   and the pill is the first thing to fall off the right edge. Tighter gaps
   and slightly smaller type keep every item, phone number included. */
@media (max-width:1280px) and (min-width:901px){
  .hdr__in{gap:1.1rem}
  .hdr__logo img{height:44px}
  .hdr__nav{gap:1.05rem}
  .hdr__nav a{font-size:.76rem;letter-spacing:.02em}
  .hdr__tel{font-size:.78rem;padding:.55em .7em}
}
@media (max-width:1080px){
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--header-h:66px}
  .hdr__logo img{height:42px}
  .hdr__nav{display:none}
  .hdr__tel{display:none}
  .burger{display:flex}
  /* .hdr__nav normally pushes everything right; it's hidden here, so the
     cta block must carry its own margin or the burger hugs the logo */
  .hdr__cta{margin-left:auto}
  .hdr__in{gap:1rem}
  .zone__grid{grid-template-columns:1fr}
  .split,.split--wide-l,.split--wide-r{grid-template-columns:1fr;gap:2.2rem}
  .is-rev{order:0}
  .shead--split{grid-template-columns:1fr;align-items:start}
  .cta__grid{grid-template-columns:1fr}
  .specstrip__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec:nth-child(3){border-left:0}
  .spec:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(130px,26vw,190px)}
  .gal figure:nth-child(1){grid-column:span 2;grid-row:span 1}
}
/* the diagram's in-SVG labels scale with the viewBox and stop being legible
   on a phone — drop them and shrink the readout so nothing collides */
@media (max-width:700px){
  .zone__lbl{display:none}
  .zone__data{font-size:.52rem;left:10px;bottom:10px;padding:.32em .55em}
  .zone__hint{display:none}
  .zone__demo{padding:.9rem 1rem;gap:.9rem}
  .seg{width:100%}
  .seg__b{flex:1;text-align:center;padding:.7em .5em;font-size:.78rem}
  .zone__status{font-size:.58rem;letter-spacing:.1em;padding:.36em .62em;top:10px;left:10px}
  .zone__legend{right:10px;bottom:10px;gap:.3rem}
  .zone__lg{font-size:.55rem;letter-spacing:.08em}
  .zone__sw{width:13px;height:7px}
}
@media (max-width:620px){
  .pillars{grid-template-columns:1fr}
  .kit{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr;gap:2.2rem}
  .form__row{grid-template-columns:1fr;gap:0}
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 90px)}
  .hero__in{padding-bottom:56px}
  .zone__fact{flex-direction:column;gap:.25rem}
  .zone__fact dt{width:auto}
  .clients{justify-content:flex-start;gap:1.2rem}
  .btn-row .btn{width:100%;justify-content:center}
  .ftr__base{flex-direction:column;gap:.5rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  /* has to carry the same weight as the html.js rule above or it loses to it */
  html.js .rv,.rv{opacity:1;transform:none}
}

/* plain-English glossary — the jargon on the left, what it means for the job
   on the right. The reader is a site super, not a crane engineer. */
.plain{border-top:1px solid var(--line);max-width:920px;margin-top:.4rem}
.plain > div{
  display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);gap:.4rem 2rem;
  padding:1.15rem .1rem;border-bottom:1px solid var(--line-soft);align-items:baseline;
}
.plain dt{
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 700;
  font-size:1rem;color:var(--amber);margin:0;
}
.plain dd{margin:0;color:var(--steel);font-size:.95rem;line-height:1.6}
@media (max-width:700px){
  .plain > div{grid-template-columns:1fr;gap:.3rem}
  .plain dt{font-size:.95rem}
}

/* reference copy that shouldn't cost anyone a screen of scrolling */
.gloss{max-width:920px;margin-top:clamp(2rem,3.5vw,3rem);border-top:1px solid var(--line)}
.gloss summary{
  display:flex;align-items:center;gap:.7rem;cursor:pointer;list-style:none;
  padding:1.15rem .1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber);
}
.gloss summary::-webkit-details-marker{display:none}
.gloss summary::after{
  content:"";width:9px;height:9px;margin-left:auto;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s;
}
.gloss[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.gloss summary:hover{color:var(--amber-soft)}
.gloss .plain{border-top:0;margin-top:0}

/* the three crane types, rendered in 3D inside their cards */
.ctype{
  margin:-.4rem 0 1rem;border:1px solid var(--line-soft);border-radius:2px;
  background:radial-gradient(ellipse 70% 60% at 50% 55%,rgba(21,103,196,.13),transparent 70%),
             linear-gradient(180deg,#070D16,#0A121C);
  overflow:hidden;
}
.ctype canvas{width:100%;display:block}
/* the hydraulic machine is the one worth pointing at */
.step--hero{background:linear-gradient(180deg,var(--panel) 0%,var(--deck) 100%)}
.step--hero .ctype{border-color:rgba(254,190,1,.28)}
.tag{
  display:inline-block;font-style:normal;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.14em;text-transform:uppercase;color:#12160C;background:var(--amber);
  padding:.28em .5em;border-radius:2px;margin-left:.5rem;vertical-align:middle;
}

/* the hydraulic luffer showpiece */
.luffer{
  position:relative;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:linear-gradient(180deg,#060B13 0%,#0A121E 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.luffer canvas{width:100%;display:block;touch-action:pan-y;cursor:grab}
.luffer.is-grabbing canvas{cursor:grabbing}
.luffer__hud{position:absolute;left:16px;bottom:14px;right:16px;pointer-events:none}
.luffer__mode{
  display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);background:rgba(5,9,15,.8);
  border:1px solid var(--line-strong);border-radius:2px;padding:.42em .7em;
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.luffer.is-luffed .luffer__mode{
  color:#12160C;background:var(--amber);border-color:var(--amber);
}
.luffer__note{
  display:block;margin-top:.55rem;max-width:42ch;font-size:.8rem;line-height:1.5;
  color:var(--steel-dim);text-shadow:0 1px 6px rgba(5,9,15,.9);
}
.luffer__hint{
  position:absolute;top:14px;right:16px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel-faint);
  background:rgba(5,9,15,.55);border:1px solid var(--line-soft);border-radius:2px;
  padding:.34em .58em;transition:opacity .4s var(--ease);
}
.luffer.is-grabbing .luffer__hint{opacity:0}
@media (max-width:620px){
  .luffer__hint{display:none}
  .luffer__hud{left:12px;right:12px;bottom:11px}
  .luffer__mode{font-size:.58rem}
  .luffer__note{font-size:.74rem}
}

/* the range table */
.rangetbl{border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--deck)}
.rangetbl__head,.rangetbl__r{
  display:grid;grid-template-columns:1.1fr .9fr .7fr .6fr 1.9fr;gap:1rem;
  padding:.85rem 1.1rem;align-items:baseline;
}
.rangetbl__head{
  background:var(--panel-2);font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel-dim);
}
.rangetbl__r{border-top:1px solid var(--line-soft);font-size:.9rem;color:var(--steel)}
.rangetbl__r .m{
  font-family:var(--display);font-variation-settings:"wdth" 102,"wght" 700;color:var(--paper);
}
.rangetbl__r.is-flag{background:rgba(254,190,1,.05)}
.rangetbl__r.is-flag .m{color:var(--amber)}
.rangetbl__src{margin-top:.9rem;font-size:.78rem;color:var(--steel-faint);line-height:1.6}
@media (max-width:860px){
  .rangetbl__head{display:none}
  .rangetbl__r{grid-template-columns:1fr 1fr;gap:.3rem .8rem;padding:1rem 1.1rem}
  .rangetbl__r .m{grid-column:1/-1;font-size:1rem}
  .rangetbl__r span:nth-child(5){grid-column:1/-1;color:var(--steel-dim);font-size:.84rem}
}

/* send-me-the-range capture */
.getrange{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,3rem);
  align-items:center;margin-top:clamp(2rem,4vw,3rem);padding:clamp(20px,3vw,32px);
  border:1px solid var(--line);border-radius:2px;
  background:linear-gradient(180deg,var(--panel) 0%,var(--deck) 100%);
}
.getrange h3{font-size:1.25rem;margin-bottom:.5rem}
.getrange p{color:var(--steel);font-size:.92rem;line-height:1.6;max-width:44ch}
.getrange__f{display:grid;gap:.7rem}
.getrange__f input{
  background:var(--void);border:1px solid var(--line);border-radius:2px;
  padding:.85rem .9rem;color:var(--paper);font-size:.95rem;width:100%;
}
.getrange__f input:focus{outline:none;border-color:var(--amber);background:#070C13}
.getrange__f input::placeholder{color:var(--steel-faint)}
.getrange__f .btn{justify-content:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:800px){.getrange{grid-template-columns:1fr}}

/* a real app screenshot, framed as a device */
.shot{
  max-width:290px;margin-inline:auto;border-radius:26px;padding:7px;
  background:linear-gradient(160deg,#2C333B,#151A20);
  box-shadow:0 30px 65px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14);
}
.shot img{width:100%;display:block;border-radius:20px}
.shot__cap{
  margin-top:.9rem;text-align:center;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel-faint);
}

/* the differentiator block — specifics, not comparisons */
.edge{margin-top:1.8rem;border-left:2px solid var(--amber);padding:.2rem 0 .2rem 1.2rem}
.edge__k{
  display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber);margin-bottom:.6rem;
}
.edge p{color:var(--steel);font-size:.94rem;line-height:1.65;max-width:56ch}
.edge__row{
  display:grid;grid-template-columns:repeat(3,auto);gap:1.6rem;margin-top:1.2rem;
  justify-content:start;
}
.edge__row b{
  display:block;font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 800;
  font-size:1.4rem;color:var(--paper);line-height:1;
}
.edge__row span{
  display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel-dim);margin-top:.35rem;max-width:14ch;line-height:1.5;
}
@media (max-width:620px){.edge__row{grid-template-columns:1fr 1fr;gap:1.1rem}}

/* On a phone the section rhythm was doing more scrolling than the words were.
   Tighten the vertical spacing there without touching the desktop layout. */
@media (max-width:620px){
  :root{--band:clamp(44px,11vw,64px)}
  .band--tight{padding-block:clamp(32px,8vw,46px)}
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 64px)}
  .hero__in{padding-bottom:40px}
  .phero{min-height:clamp(300px,44svh,400px)}
  .phero__in{padding-top:calc(var(--header-h) + 32px);padding-bottom:32px}
  .shead{margin-bottom:1.5rem}
  .btn-row{margin-top:1.4rem}
  .steps .step{padding:18px}
  .split,.split--wide-l,.split--wide-r{gap:1.5rem}
  .ctype{margin-bottom:.7rem}
  .binderlist li{padding:.7rem .1rem}
  .plain > div{padding:.85rem .1rem}
  .rangetbl__r{padding:.8rem 1rem}
}

/* a plain list of what we sell — one line each, no card, no paragraph.
   Breaks the three-card rhythm that every other section was using. */
.lineup{border-top:1px solid var(--line)}
.lineup__i{
  display:grid;grid-template-columns:2.4rem 1fr auto 18px;gap:.2rem 1rem;align-items:baseline;
  padding:1.25rem .2rem;border-bottom:1px solid var(--line-soft);
  transition:padding-left .35s var(--ease),background .35s var(--ease);
}
.lineup__i:hover{padding-left:1rem;background:rgba(21,103,196,.06)}
.lineup__n{font-family:var(--mono);font-size:.7rem;color:var(--amber)}
.lineup__t{
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 700;
  font-size:clamp(1.05rem,2vw,1.35rem);color:var(--paper);
}
.lineup__d{color:var(--steel-dim);font-size:.86rem;text-align:right}
.lineup__i svg{width:16px;height:16px;color:var(--steel-faint);align-self:center;transition:transform .3s var(--ease),color .3s}
.lineup__i:hover svg{transform:translateX(4px);color:var(--amber)}
@media (max-width:700px){
  .lineup__i{grid-template-columns:2rem 1fr 16px;padding:1rem .2rem}
  .lineup__d{grid-column:2;text-align:left;font-size:.8rem}
}

/* the sign-in playing out over the real screenshot */
.shot{position:relative}
.shot__code{
  position:absolute;left:9%;right:9%;top:65.6%;text-align:center;
  background:#0B0E13;padding:.35em 0;border-radius:8px;
  font-family:var(--mono);font-size:clamp(.9rem,2.4vw,1.15rem);letter-spacing:.42em;
  color:#E8EEF6;text-indent:.42em;pointer-events:none;
}
.shot__btn{
  position:absolute;left:9%;right:9%;top:71.4%;height:6.2%;border-radius:10px;
  box-shadow:0 0 0 0 rgba(59,130,246,0);pointer-events:none;transition:box-shadow .25s var(--ease);
}
.shot[data-signin].is-pressed .shot__btn{box-shadow:0 0 26px 6px rgba(59,130,246,.55)}
.shot__ok{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.9);
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 800;
  font-size:1.05rem;color:#fff;background:rgba(6,10,18,.86);border:1px solid rgba(59,130,246,.7);
  border-radius:3px;padding:.55em 1.1em;opacity:0;transition:opacity .35s var(--ease),transform .35s var(--ease);
  pointer-events:none;
}
.shot[data-signin].is-done .shot__ok{opacity:1;transform:translate(-50%,-50%) scale(1)}
.shot__cap b{color:var(--amber);font-weight:500;font-variant-numeric:tabular-nums}

/* ── The Datum walkthrough ────────────────────────────────────────────────
   Real screens from the app, cross-fading. Nothing here is a mockup: the
   images are Datum's own published product screenshots, with the demo tenant's
   lockup replaced by Datum's wordmark and the demo fleet swapped for QnQ's
   ZOOMLION machines. */
.walk{max-width:320px;margin-inline:auto}
.walk__frame{
  position:relative;aspect-ratio:780/1688;border-radius:22px;overflow:hidden;
  border:1px solid var(--line-strong);background:#F4F6FA;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75);
}
.walk__s{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top center;opacity:0;transition:opacity .5s ease;
}
.walk__s.is-on{opacity:1}
.walk__cap{display:block;margin-top:1.1rem;min-height:4.4em}
.walk__t{
  display:block;font-family:var(--display);font-weight:700;color:var(--paper);
  font-size:1.02rem;line-height:1.3;
}
.walk__d{display:block;margin-top:.3rem;color:var(--steel);font-size:.9rem;line-height:1.5}
.walk__dots{display:flex;gap:.5rem;margin-top:1rem}
.walk__dot{
  flex:1;height:3px;border:0;padding:0;cursor:pointer;border-radius:2px;
  background:var(--line-strong);transition:background .3s;
}
.walk__dot[aria-selected="true"]{background:var(--amber)}
.walk__dot:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.walk__s{transition:none}}

/* ── The cab readout, out of the scene ────────────────────────────────────
   Tucked into a corner of the canvas it was decoration. Below the scene at
   full width you can actually watch the bearing close and the alarm bar trip
   as the jibs converge — which is the entire point of the demo. */
.cab{margin-top:.9rem}
.cab__k{
  display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel);
}
.cab__k::before{content:"";width:18px;height:2px;background:var(--amber);flex:none}
.cab__cv{display:block;width:100%;height:auto;border-radius:6px}

/* Staff sign-in. Quiet on purpose — it's for two people, not for customers. */
.ftr__ops{
  color:var(--steel-dim);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.ftr__ops:hover{color:var(--amber);border-bottom-color:var(--amber)}

/* Slowing is a warning, not an alarm — amber, not red. */
.zone__status.is-warn{border-color:rgba(254,190,1,.6);color:#FEBE01;background:rgba(254,190,1,.10)}

/* ── FAQ ──────────────────────────────────────────────────────────────────
   Collapsed by default. The answers are worth having and worth indexing, but
   nobody should have to scroll past eight of them to reach the phone number. */
.faq{max-width:920px;border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{
  display:flex;align-items:center;gap:1rem;cursor:pointer;list-style:none;
  padding:1.15rem .1rem;font-family:var(--display);font-weight:700;
  font-size:1.02rem;color:var(--paper);line-height:1.35;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{
  content:"";width:10px;height:10px;margin-left:auto;flex:none;
  border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s;
}
.faq__i[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq__i summary:hover{color:var(--amber)}
.faq__i p{margin:0 0 1.2rem;color:var(--steel);line-height:1.65;max-width:74ch}