/* ==========================================================================
   MESHSENSE design system — shared tokens and components
   One file for the website (and, later, the console): palette from
   AMPD-Theme/theme.json, shape rule and dark theme from the console redesign.

   Shape rule:  round = you press it · square (8 px) = you type into it ·
                10–12 px = containers, which are neither.
   Theme:       follows the OS; [data-theme="light|dark"] on <html> overrides.
   ========================================================================== */

:root{
  /* brand */
  --blue:#3475BB; --blue-600:#2C63A0; --blue-700:#224E80;
  --red:#D2322F; --green:#339044; --orange:#F6881F; --yellow:#FAC02A; --purple:#4D2365;
  --dot-red:#D33030; --dot-blue:#2875BB;          /* logo dots — never theme-shifted */

  /* neutrals — grey biased a few degrees toward AMPD Blue */
  --canvas:#F3F6FA; --surface:#FFFFFF; --surface-2:#EAEFF6;
  --border:#DCE3EC; --border-strong:#C3CEDC;
  --ink:#18212D; --ink-2:#43505F; --muted:#6E7C90;

  /* the dark instrument world — fixed in both themes (plots, contact, footer) */
  --deep:#0E131A; --deep-2:#161E29; --deep-line:#26313F;
  --deep-ink:#E7EDF5; --deep-muted:#93A3B5;

  /* line-drawing inks (technical illustrations) — flip with the theme */
  --draw-bg:#F3F6FA;  --draw-grid:rgba(52,117,187,.075);
  --draw-strong:#27313E; --draw-mid:#566374; --draw-soft:#97A4B6; --draw-faint:#C6D0DC;
  --draw-frame:#3475BB; --draw-label:#18212D;
  --node-a:#2875BB; --node-b:#D33030; --node-c-fill:#F3F6FA; --node-c-ring:#18212D;
  --wave-1:#3475BB; --wave-2:#D2322F;
  --warn:#B96A0C; --ok:#2C7C3B; --tr-4:#6B4A92;

  /* shape */
  --r:12px; --r-field:8px; --r-sm:6px; --pill:100px;

  --shadow:0 10px 40px -16px rgba(18,33,52,.22);
  --ring:0 0 0 3px rgba(52,117,187,.32);
  --ui:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --hdr:72px;
  --sync-period:4s;          /* one synchronised measurement burst */
  color-scheme:light;
}

/* dark values, written once and applied twice (OS preference or explicit choice) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#0F141B; --surface:#161D26; --surface-2:#1D2631;
    --border:#2A3543; --border-strong:#3A4757;
    --ink:#E9EEF5; --ink-2:#B4BFCD; --muted:#8894A5;
    --blue:#5B9BE0; --blue-600:#7BB0E9; --blue-700:#96C1EF;
    --draw-bg:#0B1016; --draw-grid:rgba(91,155,224,.07);
    --draw-strong:#C9D5E3; --draw-mid:#8C9DB2; --draw-soft:#4D5B6D; --draw-faint:#28323F;
    --draw-frame:#5B9BE0; --draw-label:#DCE5EF;
    --node-a:#4B93E0; --node-b:#F0504C; --node-c-fill:#0B1016; --node-c-ring:#E9EEF5;
    --wave-1:#5B9BE0; --wave-2:#F0605B;
    --warn:#E9A44B; --ok:#66C27C; --tr-4:#A98BD0;
    --shadow:0 10px 40px -16px rgba(0,0,0,.7);
    --ring:0 0 0 3px rgba(91,155,224,.36);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --canvas:#0F141B; --surface:#161D26; --surface-2:#1D2631;
  --border:#2A3543; --border-strong:#3A4757;
  --ink:#E9EEF5; --ink-2:#B4BFCD; --muted:#8894A5;
  --blue:#5B9BE0; --blue-600:#7BB0E9; --blue-700:#96C1EF;
  --draw-bg:#0B1016; --draw-grid:rgba(91,155,224,.07);
  --draw-strong:#C9D5E3; --draw-mid:#8C9DB2; --draw-soft:#4D5B6D; --draw-faint:#28323F;
  --draw-frame:#5B9BE0; --draw-label:#DCE5EF;
  --node-a:#4B93E0; --node-b:#F0504C; --node-c-fill:#0B1016; --node-c-ring:#E9EEF5;
  --wave-1:#5B9BE0; --wave-2:#F0605B;
  --warn:#E9A44B; --ok:#66C27C; --tr-4:#A98BD0;
  --shadow:0 10px 40px -16px rgba(0,0,0,.7);
  --ring:0 0 0 3px rgba(91,155,224,.36);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr)}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--ui);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
h1,h2,h3{text-wrap:balance;line-height:1.08;letter-spacing:.004em}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

.wrap{max-width:1250px;margin:0 auto;padding-inline:clamp(1rem,4vw,2rem)}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);display:block;margin-bottom:1rem}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-2);max-width:62ch;line-height:1.55}
.prose p{color:var(--ink-2);max-width:64ch}
.prose p + p{margin-top:1rem}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- logotype (master SVG, letters take currentColor) ---------- */
.logo{display:block;line-height:0;color:var(--ink)}
.logo svg{width:190px;height:auto}
.logo .mark{display:none}

/* ---------- buttons ----------
   .btn-cta  uppercase pill — the commitment on a screen
   .btn      compact sentence-case pill — repeated operations
   .icon-btn circle — secondary tools (theme, menu)                        */
.btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--blue);color:#fff;border:none;border-radius:var(--pill);
  padding:.95rem 2.1rem;font-family:var(--ui);font-size:.875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;text-align:center;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn-cta:hover{background:var(--blue-600);transform:translateY(-2px);
  box-shadow:0 10px 22px -8px rgba(52,117,187,.55);text-decoration:none;color:#fff}
.btn-cta:active{transform:translateY(0)}
.btn-cta.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--border-strong)}
.btn-cta.ghost:hover{background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 2px var(--blue)}
.btn-cta.on-dark{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.42)}
.btn-cta.on-dark:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 2px #fff}
.btns{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}

.btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);color:var(--ink-2);
  border:1px solid var(--border);border-radius:var(--pill);padding:.42rem .95rem;
  font:500 .8125rem var(--ui);cursor:pointer}
.btn:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--ink);text-decoration:none}

.icon-btn{background:none;border:1px solid var(--border);border-radius:50%;
  width:36px;height:36px;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);
  font-size:1rem;line-height:1;padding:0}
.icon-btn:hover{border-color:var(--border-strong);color:var(--ink)}
.icon-btn svg{width:17px;height:17px;display:block}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:100;height:var(--hdr);display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:border-color .25s ease,background .25s ease}
.hdr.stuck{background:color-mix(in srgb,var(--canvas) 86%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--border)}
.hdr .wrap{display:flex;align-items:center;gap:1.5rem;width:100%}
.nav{display:flex;align-items:center;gap:.2rem;margin-left:auto}
.nav a{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);padding:.55rem .7rem;position:relative}
.nav a::after{content:"";position:absolute;left:50%;bottom:.3rem;width:62%;height:3px;border-radius:2px;
  background:var(--blue);transform:translateX(-50%) scaleX(0);transition:transform .25s ease}
.nav a:hover,.nav a[aria-current="true"]{color:var(--blue);text-decoration:none}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:translateX(-50%) scaleX(1)}
.tools{display:flex;align-items:center;gap:.5rem}
.burger{display:none}

/* ---------- sections ---------- */
section{padding-block:clamp(4rem,9vw,7rem)}
section.tint{background:var(--surface)}
h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800;text-transform:uppercase;max-width:18ch}
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.split.narrow-img{grid-template-columns:minmax(320px,1.15fr) minmax(280px,.85fr)}
@media(max-width:860px){.split.narrow-img{grid-template-columns:1fr}}
.shot{border-radius:var(--r);overflow:hidden;border:1px solid var(--border);background:var(--surface-2)}
.shot img{width:100%;height:auto}
.plate-dark{background:#0E131A;border-color:#26313F}
.plate-light{background:#FFFFFF;border-color:#D9E1EC}
.pad{padding:clamp(1rem,3vw,2rem)}
.vid{width:100%;height:auto;display:block;background:#0E131A}

.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:2.5rem}
.card{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem}
section.tint .card{background:var(--surface-2)}
.card h3{font-size:1.05rem;font-weight:700;margin-bottom:.5rem}
.card p{color:var(--ink-2);font-size:.92rem;margin:0}
.card .tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);display:block;margin-bottom:.7rem}

/* ---------- contact (dark instrument world in both themes) ---------- */
.contact{background:var(--deep);color:#fff}
.contact h2{color:#fff}
.contact .lede{color:#C4D0DE}
.contact .eyebrow{color:#7BB0E9}
form{display:flex;flex-direction:column;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
label{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--deep-muted)}
input,textarea{width:100%;background:rgba(255,255,255,.05);color:#fff;border:1px solid var(--deep-line);
  border-radius:var(--r-field);padding:.8rem .9rem;font-family:var(--ui);font-size:1rem}
input::placeholder,textarea::placeholder{color:#65748A}
input:focus,textarea:focus{outline:none;border-color:#5B9BE0;box-shadow:0 0 0 3px rgba(91,155,224,.28)}
textarea{min-height:140px;resize:vertical}
.consent{flex-direction:row;align-items:flex-start;gap:.6rem}
.consent input{width:16px;height:16px;flex:none;margin-top:.25rem;accent-color:#5B9BE0}
.consent span{font-size:.85rem;color:var(--deep-muted);font-family:var(--ui);letter-spacing:0;text-transform:none}
.formnote{font-size:.85rem;border-radius:var(--r-field);padding:.75rem .9rem;display:none}
.formnote.ok{display:block;background:rgba(79,176,106,.14);color:#8BD6A2}
.formnote.err{display:block;background:rgba(240,115,111,.14);color:#F5A5A2}

footer{background:var(--deep);color:var(--deep-muted);border-top:1px solid var(--deep-line);
  padding-block:2.5rem;font-size:.85rem}
footer .wrap{display:flex;gap:1.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
footer a{color:var(--deep-ink)}

/* ==========================================================================
   HERO — technical drawing of an instrumented tram + synchronised waveform
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--draw-bg);color:var(--ink);
  min-height:min(100svh,1000px);display:flex;flex-direction:column;
  padding-top:var(--hdr)}
/* drawing-sheet grid, faded out toward the edges */
.hero-grid{position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--draw-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--draw-grid) 1px,transparent 1px);
  background-size:48px 48px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 62% 45%,#000 30%,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 75% at 62% 45%,#000 30%,transparent 100%)}

.hero-art{position:absolute;z-index:1;pointer-events:none;
  width:min(80vw,1320px);right:max(-3vw,-60px);top:calc(var(--hdr) + 2%);}
.hero-art svg{display:block;width:100%;height:auto;overflow:visible}

/* scrim: keeps the copy on a calm field without boxing it in */
.hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    var(--draw-bg) 0%,
    color-mix(in srgb,var(--draw-bg) 94%,transparent) 30%,
    color-mix(in srgb,var(--draw-bg) 62%,transparent) 46%,
    transparent 64%)}

.hero > .wrap,.hero-body > .wrap{width:100%}
.hero-body{position:relative;z-index:3;flex:1;display:flex;align-items:center;
  padding-block:clamp(2.5rem,7vh,5rem) clamp(1.5rem,4vh,3rem)}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.8rem);font-weight:800;text-transform:uppercase;
  letter-spacing:.002em;max-width:12ch}
.hero .hero-copy > p{color:var(--ink-2);font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:44ch;
  margin-top:1.4rem;line-height:1.55}

/* figure caption + legend, drawing-sheet style */
.hero-legend{position:absolute;z-index:3;right:clamp(1rem,4vw,2rem);top:calc(var(--hdr) + 1.25rem);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--draw-mid);border:1px solid var(--draw-faint);border-radius:var(--r-sm);
  padding:.7rem .9rem;background:color-mix(in srgb,var(--draw-bg) 80%,transparent);
  display:grid;gap:.38rem;backdrop-filter:blur(4px)}
.hero-legend b{font-weight:500;color:var(--draw-label);letter-spacing:.12em}
.hero-legend span{display:flex;align-items:center;gap:.55rem}
.hero-legend i{width:9px;height:9px;border-radius:50%;flex:none}
.lg-a{background:var(--node-a)} .lg-b{background:var(--node-b)}
.lg-c{background:var(--node-c-fill);box-shadow:inset 0 0 0 2px var(--node-c-ring)}

/* waveform: a block-level canvas in normal flow — full bleed by construction */
.hero-wave{position:relative;z-index:2;display:block;width:100%;height:clamp(84px,11vh,120px);margin-top:auto}

.specs{position:relative;z-index:3;display:flex;gap:clamp(1.5rem,5vw,4rem);flex-wrap:wrap;
  padding-block:1.3rem 1.8rem;border-top:1px solid var(--border)}
.specs div{display:flex;flex-direction:column;gap:.1rem}
.specs b{font-size:clamp(1.05rem,1.8vw,1.35rem);font-weight:700;font-variant-numeric:tabular-nums}
.specs span{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---- tram drawing ---- */
.tram path,.tram line{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tram .t-ground,.tram .t-sleeper,.tram .t-wire{stroke:var(--draw-faint);stroke-width:1}
.tram .t-rail,.tram .t-rail2{stroke:var(--draw-soft);stroke-width:1.2}
.tram .b-far,.tram .b-winfar,.tram .f-far,.tram .f-roof{stroke:var(--draw-soft);stroke-width:.8}
.tram .b-bel,.tram .r-eq,.tram .g-wheelfar{stroke:var(--draw-soft);stroke-width:1}
.tram .g-frame,.tram .g-wheel,.tram .g-spring{stroke:var(--draw-mid);stroke-width:1.25}
.tram .b-long,.tram .b-edge{stroke:var(--draw-strong);stroke-width:1.5}
.tram .b-win{stroke:var(--draw-mid);stroke-width:1.1}
.tram .f-near{stroke:var(--draw-frame);stroke-width:1.1;opacity:.62}
.tram .n-mesh line{stroke:var(--draw-frame);stroke-width:1.1;stroke-dasharray:3 6;
  opacity:.45;animation:ms-link var(--sync-period) linear infinite;animation-delay:var(--sync,0s)}
.tram .n-dot{fill:var(--node-a)}
.tram .n-b .n-dot{fill:var(--node-b)}
.tram .n-c .n-dot{fill:var(--node-c-fill);stroke:var(--node-c-ring);stroke-width:2.2}
.tram .n-glow{fill:var(--node-a);opacity:.1}
.tram .n-b .n-glow{fill:var(--node-b)}
.tram .n-c .n-glow{fill:var(--draw-frame);opacity:.07}
.tram .n-pulse{fill:none;stroke:var(--node-a);stroke-width:1.5;opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation:ms-ping var(--sync-period) cubic-bezier(.15,.6,.3,1) infinite;animation-delay:var(--sync,0s)}
.tram .n-b .n-pulse{stroke:var(--node-b)}
.tram .n-c .n-pulse{stroke:var(--node-c-ring)}
.tram .n-lead{stroke:var(--draw-soft);stroke-width:1}
.tram .n-labels text{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;fill:var(--draw-label)}

/* every node fires at the same instant — that is the product */
@keyframes ms-ping{
  0%  {transform:scale(1);  opacity:.95}
  55% {transform:scale(3.6);opacity:0}
  100%{transform:scale(3.6);opacity:0}
}
@keyframes ms-link{
  0%  {opacity:.95;stroke-dashoffset:0}
  25% {opacity:.45}
  100%{opacity:.45;stroke-dashoffset:-36}
}

@media(max-width:1180px){
  .hero-art{width:90vw;right:-3vw;top:calc(var(--hdr) + 8%)}
  .hero-legend{display:none}
}
@media(max-width:900px){
  :root{--hdr:64px}
  .logo svg{width:150px}
  .burger{display:grid}
  .nav{position:fixed;inset:var(--hdr) 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--canvas);border-bottom:1px solid var(--border);padding:.5rem 1rem 1.2rem;
    margin:0;transform:translateY(-120%);transition:transform .28s ease;box-shadow:var(--shadow)}
  .nav.open{transform:translateY(0)}
  .nav a{padding:.85rem .4rem;border-bottom:1px solid var(--border);font-size:.95rem}
  .nav a::after{display:none}
  .tools{margin-left:auto}
  .hero-legend{display:none}
}
/* phones: drawing moves under the copy, scrim turns vertical */
@media(max-width:720px){
  .hero{min-height:auto}
  .hero-art{width:122vw;right:-4vw;top:auto;bottom:222px}
  .tram .n-labels{display:none}
  .specs{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.5rem}
  .hero-scrim{background:linear-gradient(180deg,
    var(--draw-bg) 0%,color-mix(in srgb,var(--draw-bg) 90%,transparent) 48%,transparent 72%)}
  .hero-body{align-items:flex-start;padding-bottom:58vw}
}
@media(max-width:480px){
  .logo svg{width:auto;height:30px}
  .logo .full{display:none}
  .logo .mark{display:block;width:30px;height:30px}
}

/* ==========================================================================
   Machine drawing (WHAT) — same inks as the tram
   ========================================================================== */
.mach path,.mach line{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mach .fl{stroke:var(--draw-faint);stroke-width:.8;opacity:.7}
.mach .m-hid,.mach .f-hid,.mach .w-hid{stroke:var(--draw-soft);stroke-width:.8;stroke-dasharray:4 4}
.mach .x-vis,.mach .x-hid{stroke:var(--draw-frame);stroke-width:1;opacity:.55}
.mach .d-vis,.mach .p-vis{stroke:var(--draw-mid);stroke-width:1}
.mach .f-vis{stroke:var(--draw-mid);stroke-width:1.3}
.mach .m-vis,.mach .j-vis{stroke:var(--draw-strong);stroke-width:1.7}
.mach .w-vis{stroke:var(--draw-strong);stroke-width:1.2}
.mach .t-vis{stroke:var(--node-b);stroke-width:1.6}
.mach .n-mesh line{stroke:var(--draw-frame);stroke-width:1.1;stroke-dasharray:3 6;
  opacity:.45;animation:ms-link var(--sync-period) linear infinite;animation-delay:var(--sync,0s)}
.mach .n-dot{fill:var(--node-a)}
.mach .n-b .n-dot{fill:var(--node-b)}
.mach .n-c .n-dot{fill:var(--node-c-fill);stroke:var(--node-c-ring);stroke-width:2.2}
.mach .n-w .n-dot{fill:var(--warn)}
.mach .n-glow{fill:var(--node-a);opacity:.1}
.mach .n-b .n-glow{fill:var(--node-b)}
.mach .n-w .n-glow{fill:var(--warn);opacity:.2}
.mach .n-c .n-glow{opacity:.06}
.mach .n-pulse{fill:none;stroke:var(--node-a);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:ms-ping var(--sync-period) cubic-bezier(.15,.6,.3,1) infinite;animation-delay:var(--sync,0s)}
.mach .n-b .n-pulse{stroke:var(--node-b)}
.mach .n-w .n-pulse{stroke:var(--warn);stroke-width:2}
.mach .n-c .n-pulse{stroke:var(--node-c-ring)}
.mach .n-lead{stroke:var(--draw-soft);stroke-width:1}
.mach .n-labels text{font-family:var(--mono);font-size:22px;font-weight:500;letter-spacing:.05em;fill:var(--draw-label)}
.mach .n-labels text.sub{font-size:15px;fill:var(--draw-mid);font-weight:400}
.mach .n-labels text.warn{fill:var(--warn)}
.mach .n-labels text.warn.sub{fill:var(--warn);font-weight:500}
.mach .callout .co-box{fill:color-mix(in srgb,var(--draw-bg) 88%,transparent);stroke:var(--warn);stroke-width:1.2}
.mach .callout .co-lead{stroke:var(--warn);stroke-width:1.2;stroke-dasharray:2 3}
.mach .callout .co-ax{stroke:var(--draw-faint);stroke-width:1}
.mach .callout .co-base{stroke:var(--draw-soft);stroke-width:1.3;stroke-dasharray:4 3}
.mach .callout .co-now{stroke:var(--warn);stroke-width:1.8}
.mach .callout text{font-family:var(--mono);font-size:21px;letter-spacing:.05em}
.mach .callout .co-t{fill:var(--draw-label);font-weight:500}
.mach .callout .co-v{fill:var(--warn);font-weight:600;font-size:23px}
.mach .callout .co-s{fill:var(--draw-mid);font-size:17px}

/* ==========================================================================
   Figures on a drawing sheet
   ========================================================================== */
.fig{margin:0}
figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.sheet{position:relative;background:var(--draw-bg);border:1px solid var(--border);border-radius:var(--r);
  padding:clamp(.75rem,2vw,1.4rem);overflow:hidden;
  background-image:linear-gradient(var(--draw-grid) 1px,transparent 1px),linear-gradient(90deg,var(--draw-grid) 1px,transparent 1px);
  background-size:32px 32px;background-position:-1px -1px}
.sheet svg{display:block;width:100%;height:auto}
.fig figcaption{margin-top:.75rem}
.how-split{grid-template-columns:minmax(300px,.9fr) minmax(340px,1.1fr);align-items:start}
@media(max-width:960px){.how-split{grid-template-columns:1fr}}
.prose strong{color:var(--ink);font-weight:600}

.what-head .lede{margin-top:1.5rem}
.what-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(1.5rem,3vw,2.5rem);
  align-items:start;margin-top:2.5rem}
.what-grid .cards{grid-template-columns:1fr 1fr;margin-top:0}
@media(max-width:960px){.what-grid{grid-template-columns:1fr}.what-grid .fig{order:-1}}
@media(max-width:560px){.what-grid .cards{grid-template-columns:1fr}}
.sheet-mach{padding:clamp(.5rem,2vw,1.5rem) clamp(.5rem,2vw,2rem)}

/* ---- localisation figure (HOW) ---- */
.loc text{font-family:var(--mono)}
.loc .loc-h{font-size:13px;letter-spacing:.12em;fill:var(--draw-mid)}
.loc .loc-clock{fill:var(--draw-frame);font-variant-numeric:tabular-nums}
.loc .loc-plate{fill:color-mix(in srgb,var(--draw-frame) 4%,transparent);stroke:var(--draw-strong);stroke-width:1.5}
.loc .loc-rib{stroke:var(--draw-faint);stroke-width:1;stroke-dasharray:6 6}
.loc .loc-mesh line{stroke:var(--draw-soft);stroke-width:1;opacity:.55}
.loc .loc-front{fill:none;stroke:var(--draw-frame);stroke-width:2}
.loc .tr0{--c:var(--node-a)} .loc .tr1{--c:var(--node-b)} .loc .tr2{--c:var(--warn)} .loc .tr3{--c:var(--tr-4)}
.loc .loc-dot{fill:var(--draw-bg);stroke:var(--draw-soft);stroke-width:1.6;transition:fill .12s,stroke .12s}
.loc .loc-n.hit .loc-dot{fill:var(--node-a);stroke:var(--node-a)}
.loc .loc-n.sel .loc-dot{stroke:var(--c);stroke-width:2.2}
.loc .loc-n.sel.hit .loc-dot{fill:var(--c)}
.loc .loc-ring{fill:none;stroke:var(--c,var(--node-a));stroke-width:1.6;opacity:0}
.loc .loc-tag{font-size:13px;font-weight:600;fill:var(--c)}
.loc .loc-axis{stroke:var(--draw-faint);stroke-width:1}
.loc .loc-trace{fill:none;stroke:var(--c);stroke-width:1.7;stroke-linejoin:round}
.loc .loc-mark{stroke:var(--c);stroke-width:1.2;stroke-dasharray:3 3;opacity:0}
.loc .loc-name{font-size:15px;font-weight:600;fill:var(--c)}
.loc .loc-dt{font-size:13px;fill:var(--draw-mid);font-variant-numeric:tabular-nums}
.loc .loc-cursor{stroke:var(--draw-frame);stroke-width:1.2}
.loc .loc-range circle{fill:none;stroke:var(--c);stroke-width:1.4;stroke-dasharray:5 4}
.loc .loc-burst{fill:none;stroke:var(--warn);stroke-width:2.4;stroke-linecap:round}
.loc .loc-cross circle,.loc .loc-cross path{fill:none;stroke:var(--node-b);stroke-width:2.4;stroke-linecap:round}
.loc .loc-read rect{fill:var(--draw-bg);stroke:var(--node-b);stroke-width:1.3}
.loc .loc-read1{font-size:12px;letter-spacing:.14em;font-weight:600;fill:var(--node-b)}
.loc .loc-read2{font-size:15px;fill:var(--draw-label);font-variant-numeric:tabular-nums}
.loc .loc-burst,.loc .loc-cross,.loc .loc-read,.loc .loc-range{opacity:0}

/* ---- workflow steps with pictograms ---- */
.steps{list-style:none;padding:0;margin:3rem 0 0;display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:s}
.step{position:relative;padding-top:0}
.picto{width:72px;height:72px;display:block;margin-bottom:1.2rem;fill:none;stroke:var(--draw-strong);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.picto .thin{stroke:var(--draw-soft);stroke-width:1.2}
.picto .dash{stroke:var(--draw-soft);stroke-dasharray:3 4}
.picto .fill{fill:var(--draw-strong);stroke:none}
.picto .bg{fill:var(--canvas)}
.picto .acc-b{fill:var(--node-a);stroke:none}
.picto .acc-r{fill:var(--node-b);stroke:none}
.step h3{display:flex;align-items:baseline;gap:.6rem;font-size:1rem;font-weight:700;margin-bottom:.45rem;
  text-transform:uppercase;letter-spacing:.04em}
.step h3::before{counter-increment:s;content:"0" counter(s);font-family:var(--mono);font-size:.85rem;
  font-weight:500;color:var(--blue);letter-spacing:.04em}
.step p{color:var(--ink-2);font-size:.92rem;margin:0}
.step:not(:last-child)::after{content:"";position:absolute;top:36px;left:92px;right:-1rem;height:0;
  border-top:1.5px dashed var(--border-strong)}
@media(max-width:980px){.step::after{display:none}}

/* ---- about ---- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(2rem,5vw,4rem);row-gap:1.5rem;
  grid-template-areas:"head ." "text team";align-items:start}
.about-head{grid-area:head}.about-text{grid-area:text}.about .team{grid-area:team}
@media(max-width:860px){.about{grid-template-columns:1fr;grid-template-areas:"head" "text" "team"}}
.team{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.team figure{margin:0}
.team img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);border:1px solid var(--border);background:var(--surface-2)}
.team figcaption{font-family:var(--ui);text-transform:none;letter-spacing:0;font-size:.82rem;color:var(--muted);margin-top:.6rem;line-height:1.4}
.team figcaption b{display:block;color:var(--ink);font-weight:600;font-size:.95rem}

/* ---- waveform seams between sections ---- */
.seam{height:clamp(44px,6vw,64px);background:linear-gradient(var(--above) 50%,var(--below) 50%)}
.seam canvas{display:block;width:100%;height:100%}

/* ---- contact extras ---- */
.contact-meta{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:1.8rem;color:var(--deep-muted)}
.btn.on-dark{background:rgba(255,255,255,.06);border-color:var(--deep-line);color:var(--deep-ink)}
.btn.on-dark:hover{background:rgba(255,255,255,.12);border-color:#5B9BE0;color:#fff}
.mail-link{color:#9CC4EF;font-weight:500}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-cta:disabled{opacity:.6;cursor:progress;transform:none}
@media(max-width:600px){
  .loc .loc-plan{display:none}
  .loc .loc-h{font-size:19px}
  .loc .loc-tag{font-size:19px}
  .loc .loc-name{font-size:23px}
  .loc .loc-dt{font-size:18px}
  .loc .loc-read1{font-size:16px}
  .loc .loc-read2{font-size:21px}
}