/* =====================================================================
   PRECISION  ·  JMS Performance  ·  system.css   (the ONE stylesheet of the whole site; pages sit at the site root, assets in assets/)
   The garage as an instrument. One family of parts:
     dial (radial)  ·  scale / rail (linear)  ·  plate (specimen)  ·  bracket (lock)  ·  dimension line  ·  title block (drawing footer)
   Motion rule: machined and exact. Two curves and neither overshoots: --ease (fast in, long soft settle) and --ease-io (scans, route drive).
   Nothing animates layout: transform and opacity carry the motion. The hero needle is the one physical object (a servo: damped spring,
   ratio .9, hard stops, no rebound). Type rule: ONE formal upright Arabic sans (IBM Plex Sans Arabic, self-hosted, 400-700), nothing under
   12px, labels in Arabic first, Latin only for brand names / numerals. Copy never appears before the script: with JS off every page is complete.

   INDEX  (every component is documented with its HTML in _kit/COMPONENTS.md)
    0 tokens & fonts        1 base                     2 primitives: brk dl btn chips section-head tb plate
    3 chrome: header nav idx-panel · footer · wa-fab · page gauge (pgd)
    4 home: hero+dial · tape · readouts · ways · bench · proof(ba) · gal · voices · hours+where · cta
    5 equipment page (asnu template)        6 contact: tap3 · soc-row · site photo · route sheet · map frame
    7 shared page kit: pb (page banner) · place · hrs-mini · hrs2 (hours) · addr-tiles · feat · steps · svc · pkg · gg · doc · split
    8 reveal                9 reduced motion
   ===================================================================== */

/* ---------- 0. tokens ---------- */
:root{
  --bg:#0d0d0d; --bg-2:#131313; --card:#161616; --card-2:#1b1e20;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17); --line-c:rgba(79,200,232,.34);
  --cyan:#4FC8E8; --cyan-d:#2A8FB0; --ice:#d6f4ff;
  --text:#f2f2f2; --dim:#a4aab0; --mute:#8a9298; --soft:#d3d8db;
  --wa:#25D366;
  /* ONE formal upright Kufi for everything (owner choice D, 2026-10-01: «رسمي حيل», like government signage). Self-hosted, no third-party requests:
     assets/NotoKufiArabic-arabic.woff2 and -latin.woff2 are variable files (weights 400 to 700); the latin file also carries the digits and the English words. */
  --f:'Noto Kufi Arabic','Segoe UI',Tahoma,system-ui,-apple-system,sans-serif;
  --f-ar:var(--f); --f-data:var(--f);
  /* disciplined type scale (ratio ~1.2), nothing below 12px */
  --fs-1:12px; --fs-2:14px; --fs-3:16px; --fs-4:18px; --fs-5:clamp(19px,1.5vw,22px); --fs-6:clamp(22px,2vw,27px);
  --fs-7:clamp(27px,2.8vw,36px); --fs-8:clamp(32px,3.7vw,50px); --fs-9:clamp(40px,4.8vw,68px);
  /* motion: one curve for everything (fast in, long soft settle, never overshoots) */
  --ease:cubic-bezier(.2,.8,.1,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --gutter:clamp(16px,4vw,40px);
  --maxw:1200px; --maxw-w:1360px;
  --hdr:72px;
  --carbon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='4' height='4' fill='url(%23a)'/%3E%3Crect x='4' y='4' width='4' height='4' fill='url(%23a)'/%3E%3Crect x='4' width='4' height='4' fill='url(%23b)'/%3E%3Crect y='4' width='4' height='4' fill='url(%23b)'/%3E%3C/svg%3E");
}

@font-face{font-family:'Noto Kufi Arabic';src:url(assets/NotoKufiArabic-arabic.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Noto Kufi Arabic';src:url(assets/NotoKufiArabic-latin.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 1. base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f);font-size:var(--fs-4);font-weight:400;line-height:1.85;font-synthesis:none;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd,dt{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
::selection{background:rgba(79,200,232,.35);color:#fff}
.wrap{width:min(100% - 2 * var(--gutter),var(--maxw));margin-inline:auto}
.wrap-w{width:min(100% - 2 * var(--gutter),var(--maxw-w));margin-inline:auto}
.lat{font-family:var(--f-data);letter-spacing:.14em;text-transform:uppercase;direction:ltr;unicode-bidi:isolate}
.mono{font-family:var(--f-data);font-variant-numeric:tabular-nums;letter-spacing:.06em;direction:ltr;unicode-bidi:isolate}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:400;background:var(--cyan);color:#06181e;font-weight:700;padding:10px 16px;border-radius:3px;transform:translateY(-200%)}
.skip:focus{transform:none}
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gl{flex:none;width:1.4em;height:1.4em}

/* ---------- 2. primitives ---------- */
/* 2a. registration brackets: four corners */
.brk{position:relative;--bc:rgba(79,200,232,.6);--bs:12px}
.brk::before{content:'';position:absolute;inset:-1px;pointer-events:none;z-index:2;
  background:
    linear-gradient(var(--bc),var(--bc)) left top/var(--bs) 1px no-repeat,
    linear-gradient(var(--bc),var(--bc)) left top/1px var(--bs) no-repeat,
    linear-gradient(var(--bc),var(--bc)) right top/var(--bs) 1px no-repeat,
    linear-gradient(var(--bc),var(--bc)) right top/1px var(--bs) no-repeat,
    linear-gradient(var(--bc),var(--bc)) left bottom/var(--bs) 1px no-repeat,
    linear-gradient(var(--bc),var(--bc)) left bottom/1px var(--bs) no-repeat,
    linear-gradient(var(--bc),var(--bc)) right bottom/var(--bs) 1px no-repeat,
    linear-gradient(var(--bc),var(--bc)) right bottom/1px var(--bs) no-repeat}

/* 2b. dimension line: extension ticks at both ends; draws in when it enters */
.dl{display:block;height:9px;position:relative;color:var(--line-2);transform-origin:100% 50%}
.dl::before{content:'';position:absolute;inset-inline:0;top:4px;height:1px;background:currentColor}
.dl::after{content:'';position:absolute;inset:0;
  background:linear-gradient(currentColor,currentColor) left/1px 100% no-repeat,linear-gradient(currentColor,currentColor) right/1px 100% no-repeat}

/* 2c. buttons: flat, square-shouldered, no glow */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 26px;border-radius:3px;
  font-weight:600;font-size:16px;line-height:1.2;white-space:nowrap;position:relative;isolation:isolate;
  transition:transform .2s var(--ease),background-color .25s,border-color .25s,color .25s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn-p{background:var(--cyan);color:#06181e}
.btn-p:hover{background:#86def5}
.btn-g{border:1px solid rgba(79,200,232,.5);color:var(--cyan)}
.btn-g:hover{background:rgba(79,200,232,.09);border-color:var(--cyan)}
.btn-wa .gl{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px #06181e}
.btn-lg{min-height:58px;padding:0 34px;font-size:17px}
.btn > .gl{width:28px;height:28px}
.btn-wa > .gl{margin-inline-start:-6px}
.btn-sm{min-height:44px;padding:0 18px;font-size:15px;gap:10px}
.btn-sm > .gl{width:24px;height:24px}
.btn .ic{width:20px;height:20px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
@media (max-width:560px){.cta-row.cta-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cta-row.cta-2 .btn{padding:0 12px;gap:8px;font-size:15px}.cta-row.cta-2 .btn > .gl{width:24px;height:24px}}
@media (max-width:560px){.cta-row.cta-3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cta-row.cta-3 .btn:first-child{grid-column:1/-1}.cta-row.cta-3 .btn{padding:0 12px;gap:8px;font-size:15px}.cta-row.cta-3 .btn > .gl{width:24px;height:24px}}

/* 2d. chips */
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 12px;border:1px solid var(--line-c);
  background:rgba(79,200,232,.06);color:var(--cyan);font-size:15px;font-weight:600;line-height:1.7;width:fit-content}
.eyebrow .ic{width:16px;height:16px;stroke-width:2}
.badge{display:inline-flex;align-items:center;gap:8px;padding:3px 14px 3px 10px;border:1px solid rgba(79,200,232,.45);
  color:var(--cyan);font-weight:600;font-size:14px;line-height:1.8;background:rgba(79,200,232,.07)}
.badge .ic{width:16px;height:16px;stroke-width:2.2}
/* the day off, as a chip (hatched, so it reads as «closed» without a colour code) */
.chip-off{display:inline-flex;align-items:center;padding:0 12px;border:1px solid var(--line-2);color:#e8ecee;font-weight:600;font-size:var(--fs-2);line-height:2;white-space:nowrap;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.09) 0 2px,transparent 2px 7px)}
/* a clock time: «9:00 ص». The digits are always left-to-right and tabular; ص / م is the marker. */
.tm{display:inline-flex;align-items:baseline;gap:5px;direction:rtl;unicode-bidi:isolate;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:0;white-space:nowrap}
.tm i{font-style:normal;font-weight:600;font-size:.82em;color:var(--cyan)}
/* a time range: reads right to left, «from ← to» */
.tr{display:inline-flex;align-items:center;gap:8px;direction:rtl;white-space:nowrap}
.tr .ic{width:1em;height:1em;color:var(--cyan);flex:none;opacity:.9}

/* 2e. section head: number, dimension line, tag, title */
.sec{position:relative;padding:clamp(64px,7.4vw,108px) 0}
.sec-alt{background:var(--bg-2);border-block:1px solid var(--line);isolation:isolate}
.sec-alt::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--carbon);background-size:8px 8px;opacity:.32;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 55%,#000);mask-image:linear-gradient(180deg,#000,transparent 55%,#000)}
.sh{display:grid;gap:16px;margin-bottom:clamp(36px,5vw,64px)}
.sh-top{display:flex;align-items:center;gap:16px}
.sh-n{font-family:var(--f-data);font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--cyan);direction:ltr}
.sh-top .dl{flex:1}
.sh-tag{font-size:15px;font-weight:600;color:var(--soft);white-space:nowrap}
.sh-h{font-size:var(--fs-8);line-height:1.35;font-weight:700;letter-spacing:0;text-wrap:balance}
.sh-sub{color:var(--soft);font-size:var(--fs-5);max-width:58ch}

/* 2e2. title block: the drawing-sheet footer used by the equipment plate and the route sheet */
.tb{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,auto);border:1px solid var(--line-2);border-top:0;direction:rtl;background:rgba(255,255,255,.015)}
.tb > div{padding:10px 14px;min-width:0}
.tb > div + div{border-inline-start:1px solid var(--line-2)}
.tb small{display:block;font:400 12.5px/1.2 var(--f);letter-spacing:0;color:var(--dim);margin-bottom:5px;text-align:start}
.tb b{display:block;font-weight:400;font-size:14.5px;line-height:1.6;color:#e0e4e6}
.tb b.lat,.tb b.mono{color:var(--cyan);font-weight:600;font-size:13px;letter-spacing:.1em;direction:ltr;text-align:right;white-space:nowrap}

/* 2f. specimen plate: the white-background product shots sit in a lit spot on a graph sheet. The lamp is bright in the middle and
   falls to the page's own black at the edges, so the plate joins the dark page instead of glaring. The product is multiplied
   into the sheet (its white ground takes the light), never stretched. */
.plate{position:relative;isolation:isolate;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;overflow:hidden;--ann:rgba(79,200,232,.72);--bc:rgba(79,200,232,.85);--bs:16px;
  background:
    linear-gradient(rgba(79,200,232,.12) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,rgba(79,200,232,.12) 1px,transparent 1px) 0 0/24px 24px,
    radial-gradient(76% 74% at 50% 47%,#b2c0c7 0%,#8899a2 34%,#46535a 66%,#12181b 100%)}
.plate img{position:relative;z-index:1;width:auto;height:auto;max-width:calc(100% - 56px);max-height:calc(100% - 56px);mix-blend-mode:multiply;filter:saturate(1.16) contrast(1.05) brightness(1.16)}
/* cropped studio shots: the image is sized by height ONLY (its aspect ratio is never touched) and clipped by the plate */
.plate-crop img,.plate.plate-crop img,.plate.mini.plate-crop img,.eq-plate .plate.plate-crop img{position:absolute;max-width:none;max-height:none;height:min(calc(var(--zh,100) * 1%),var(--nh,9999px));width:auto;left:50%;top:50%;transform:translate(calc(var(--cx,50) * -1%),-50%)}
/* --nh = the photo's natural pixel height: the picture is never shown larger than it really is (the lit pool simply shows around it) */
.plate-photo{background:#101214;--ann:rgba(79,200,232,.7);--bc:rgba(79,200,232,.7)}
.plate-photo img{mix-blend-mode:normal;filter:none;max-width:calc(100% - 44px);max-height:calc(100% - 64px);box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.plate::after{content:'';position:absolute;inset:8px;z-index:2;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,var(--ann) 0 1px,transparent 1px 12px) left bottom/100% 5px no-repeat,
    repeating-linear-gradient(0deg,var(--ann) 0 1px,transparent 1px 12px) left top/5px 100% no-repeat;
  opacity:.5}
.plate-idx{position:absolute;z-index:3;inset-block-start:14px;inset-inline-start:18px;font:600 12.5px/1 var(--f-data);letter-spacing:.14em;color:#bfeefc;direction:ltr}
.plate-x{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(var(--ann),var(--ann)) 50% 0/1px 100% no-repeat,linear-gradient(var(--ann),var(--ann)) 0 50%/100% 1px no-repeat;opacity:.13}
/* thumbnails of the seven machines: dimmed until lit (used by the home selector and the equipment rail) */
.plate.mini{aspect-ratio:1.1/1;--bs:9px;--bc:rgba(79,200,232,0);filter:grayscale(.75) brightness(.66);transition:filter .5s var(--ease),outline-color .3s;outline:1px solid var(--line)}
.plate.mini::after,.plate.mini .plate-x{display:none}
.plate.mini img{max-width:calc(100% - 18px);max-height:calc(100% - 18px)}
.plate-photo.mini img{max-width:calc(100% - 12px);max-height:calc(100% - 12px)}

/* ---------- 3. chrome ---------- */
/* the bar is solid by default (JavaScript off: content scrolls under it and must stay legible);
   with JavaScript it starts transparent over the hero and condenses into the calibrated bar on scroll */
.hdr{position:fixed;inset:0 0 auto 0;z-index:200;height:var(--hdr);background:rgba(13,13,13,.95);transition:background-color .35s}
.hdr::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,13,.9),rgba(13,13,13,0));pointer-events:none;opacity:0;transition:opacity .35s}
html.js .hdr{background:transparent}
html.js .hdr::before{opacity:1}
.hdr.is-cond,.hdr.is-open,html.js .hdr.is-cond,html.js .hdr.is-open{background:rgba(13,13,13,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hdr.is-cond::before,.hdr.is-open::before,html.js .hdr.is-cond::before,html.js .hdr.is-open::before{opacity:0}
.hdr-in{height:100%;display:flex;align-items:center;gap:22px;width:min(100% - 2 * var(--gutter),1320px);margin-inline:auto}
.brand{display:block;flex:none;line-height:0}
.brand img{height:36px;width:auto;transform-origin:100% 50%;transition:transform .35s var(--ease)}
.hdr.is-cond .brand img{transform:scale(.89)}
.nav{display:none;align-items:center;gap:2px;margin-inline-start:10px}
.nav a{position:relative;padding:8px 13px;font-weight:400;font-size:15px;color:#c7ccd0;transition:color .2s;white-space:nowrap}
.nav a::after{content:'';position:absolute;inset-inline:13px;bottom:1px;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:100% 50%;transition:transform .35s var(--ease)}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a[aria-current=page]::after,.nav a[data-here]::after{transform:scaleX(1)}
.nav a[aria-current=page],.nav a[data-here]{color:var(--cyan)}
.hdr-act{margin-inline-start:auto;display:flex;align-items:center;gap:12px}
.hdr-tel{display:none;align-items:center;gap:9px;font:600 15px/1 var(--f-data);letter-spacing:.06em;direction:ltr;color:#dfe3e6;padding:0 4px}
.hdr-tel:hover{color:var(--cyan)}
.hdr-tel .gl{width:26px;height:26px}
.hdr .btn{min-height:44px;padding:0 20px;font-size:15px}
.hdr .btn-wa .gl{width:26px;height:26px}
.hdr-rule{position:absolute;inset:auto 0 0 0;height:7px;pointer-events:none;opacity:0;transition:opacity .35s}
.hdr.is-cond .hdr-rule,.hdr.is-open .hdr-rule{opacity:1}
.hdr-rule::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 8px) bottom/100% 3px no-repeat,
             repeating-linear-gradient(90deg,rgba(79,200,232,.5) 0 1px,transparent 1px 64px) bottom/100% 7px no-repeat;
  border-bottom:1px solid var(--line)}
.hdr-rule i{position:absolute;inset:auto 0 0 0;height:2px;background:linear-gradient(270deg,var(--cyan),#dff7ff);transform-origin:100% 50%;transform:scaleX(var(--p,0));box-shadow:0 0 10px rgba(79,200,232,.55)}

/* index panel (native <details>: works with JS off) */
.idx{position:static}
.idx summary{list-style:none;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:3px;
  font-weight:700;font-size:14px;cursor:pointer;user-select:none;transition:border-color .2s,background-color .2s}
.idx summary::-webkit-details-marker{display:none}
.idx summary:hover,.idx[open] summary{border-color:var(--cyan)}
.idx-ico{position:relative;width:18px;height:12px;display:block;flex:none}
.idx-ico i{position:absolute;inset-inline:0;height:1.5px;background:currentColor;transition:transform .35s var(--ease),opacity .2s}
.idx-ico i:nth-child(1){top:0}.idx-ico i:nth-child(2){top:5.25px;inset-inline-start:34%}.idx-ico i:nth-child(3){bottom:0}
.idx[open] .idx-ico i:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
.idx[open] .idx-ico i:nth-child(2){opacity:0}
.idx[open] .idx-ico i:nth-child(3){transform:translateY(-5.25px) rotate(-45deg)}
.idx-panel{position:absolute;top:100%;inset-inline:0;max-height:calc(100vh - var(--hdr));overflow:auto;background:#0d0d0d;
  border-bottom:1px solid var(--line-c);padding:34px 0 44px}
.idx[open] .idx-panel{animation:panelIn .45s var(--ease)}
.idx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);width:min(100% - 2 * var(--gutter),var(--maxw));margin-inline:auto}
.idx-col .idx-h{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;line-height:1.85;color:var(--cyan);margin-bottom:8px}
.idx-col .idx-h span{font-family:var(--f-data);letter-spacing:.14em}
.idx-col .idx-h::after{content:'';flex:1;height:1px;background:var(--line-c)}
.idx-col a{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:17px;transition:color .2s,transform .3s var(--ease)}
.idx-col a small{font:400 12px/1 var(--f-data);letter-spacing:.1em;color:var(--mute);min-width:24px;direction:ltr}
.idx-col a em{margin-inline-start:auto;font-style:normal;font-weight:400;font-size:14px;color:var(--dim)}
.idx-col a:hover{color:var(--cyan);transform:translateX(-8px)}
.idx-col a[aria-current=page]{color:var(--cyan)}
@keyframes panelIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

@media (min-width:1100px){
  .nav{display:flex}
  .hdr-tel{display:inline-flex}
}
@media (max-width:820px){
  .idx-grid{grid-template-columns:minmax(0,1fr)}
  .idx-panel{padding-top:24px}
}
@media (max-width:560px){
  :root{--hdr:64px}
  .hdr-in{gap:12px}
  .brand img{height:32px}
  .hdr .btn-wa{padding:0;width:44px;min-height:44px;background:none}
  .hdr .btn-wa span{display:none}
  .hdr .btn-wa .gl{margin:0;box-shadow:none;width:38px;height:38px}
}

/* footer */
.ftr{position:relative;background:var(--bg-2);border-top:1px solid var(--line);padding:clamp(48px,6vw,80px) 0 28px;overflow:clip}
.ftr::before{content:'';position:absolute;inset:0 0 auto 0;height:9px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 8px) top/100% 4px no-repeat,
             repeating-linear-gradient(90deg,rgba(79,200,232,.55) 0 1px,transparent 1px 64px) top/100% 9px no-repeat}
.ftr-top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);padding-bottom:44px;border-bottom:1px solid var(--line)}
.ftr-brand img{height:44px;width:auto;margin-bottom:22px}
.ftr-addr{color:var(--soft);font-size:16px;line-height:1.85;max-width:36ch}
.ftr-addr b{color:var(--text);font-weight:700}
.ftr-hrs{display:grid;gap:0}
.ftr-hrs span{display:block}
.ftr-tel{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:14px;font-size:16px;letter-spacing:0;direction:rtl}
.ftr-tel a{color:#e0e4e6;transition:color .2s;direction:ltr;unicode-bidi:isolate}
.ftr-tel a:hover{color:var(--cyan)}
.soc{display:flex;gap:12px;margin-top:22px}
.soc a{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line-2);border-radius:3px;transition:border-color .25s,transform .25s var(--ease),background-color .25s}
.soc a:hover{border-color:var(--cyan);transform:translateY(-2px);background:rgba(79,200,232,.06)}
.soc .gl{width:28px;height:28px}
.ftr-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.ftr-col h3{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;color:var(--cyan);margin-bottom:10px}
.ftr-col h3::after{content:'';flex:1;height:1px;background:var(--line-c)}
.ftr-col a{display:block;padding:5px 0;color:#d3d8db;font-size:16px;font-weight:400;transition:color .2s}
.ftr-col a:hover,.ftr-col a[aria-current=page]{color:var(--cyan)}
.ftr-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:22px;color:var(--dim);font-size:14px}
.ftr-bot a{color:var(--soft);text-decoration:underline;text-underline-offset:3px}
.ftr-bot .mono{font-size:12px;letter-spacing:.14em}
@media (max-width:900px){.ftr-top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.ftr-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ftr-col:last-child{grid-column:1/-1}}

/* whatsapp float (small screens; the header carries it on desktop) */
.wa-fab{position:fixed;z-index:150;inset-block-end:16px;inset-inline-start:16px;width:56px;height:56px;border-radius:50%;background:#0d0d0d;display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 10px 26px rgba(0,0,0,.55);transition:transform .4s var(--ease),opacity .3s}
/* visible by default (JS off: nothing else would show it); with the script on it stays hidden until the reader has scrolled, then system.js adds .on.
   If system.js never starts, the head block adds html.rv-all after 4.5 s and the button shows anyway. */
html.js .wa-fab:not(.on){opacity:0;visibility:hidden;transform:translateY(10px);transition:transform .4s var(--ease),opacity .3s,visibility 0s .4s}
html.rv-all .wa-fab:not(.on){opacity:1;visibility:visible;transform:none}
.wa-fab .gl{width:48px;height:48px}
.wa-fab:hover{transform:translateY(-2px)}
@media (min-width:1100px){.wa-fab{display:none}}

/* page gauge (built by system.js): a selector dial in the corner, wide screens only */
.pgd{position:fixed;z-index:120;left:18px;bottom:18px;width:92px;height:78px;display:none;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .5s}
.pgd.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease)}
@media (min-width:1560px){.pgd{display:block}}
.pgd svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pgd .arc{fill:none;stroke:rgba(255,255,255,.16);stroke-width:.9}
.pgd .mn{stroke:rgba(255,255,255,.14);stroke-width:.7}
.pgd .tk{stroke:rgba(255,255,255,.38);stroke-width:1.2;transition:stroke .4s,stroke-width .4s}
.pgd .tk.on{stroke:var(--cyan);stroke-width:2}
.pgd .nd{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;transform-origin:50px 52px;transition:transform .9s var(--ease);filter:drop-shadow(0 0 3px rgba(79,200,232,.9))}
.pgd .hub{fill:var(--cyan)}
.pgd .pg-name{position:absolute;left:96px;bottom:6px;white-space:nowrap;font-weight:600;font-size:13px;line-height:1.4;color:var(--dim);padding:2px 10px;border:1px solid var(--line-2);background:rgba(13,13,13,.86);transition:color .3s}
.pgd .pg-name:empty{display:none}
.pgd a{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%}
.pgd a:hover{background:rgba(79,200,232,.16)}

/* ---------- 4. home ---------- */
/* 4a. hero: the dial wakes up. Headline, lead, buttons and the facts bar are ordinary content: they paint in the first frame
   (no script gate, no opacity animation), so the page reads at once even on a slow phone. Only the instrument wakes up:
   canvases, needle, logo sheen and the four registration corners. */
.hero{position:relative;isolation:isolate;overflow:clip;min-height:min(100svh,940px);display:flex;flex-direction:column;padding:calc(var(--hdr) + 22px) 0 22px}
.hero-ground{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* the photograph is the retouched assets/hero-drag.jpg (the foreign event lettering on the barrier is painted out); phones get the 900px copy */
.hg-photo{position:absolute;inset:0;opacity:.34;
  background:url("assets/hero-drag.jpg") 20% 64%/cover no-repeat;filter:grayscale(1) sepia(1) hue-rotate(158deg) saturate(1.8) brightness(.78) contrast(1.15);
  -webkit-mask-image:linear-gradient(270deg,transparent 6%,rgba(0,0,0,.55) 40%,#000 72%),linear-gradient(180deg,transparent 4%,#000 32%,#000 78%,transparent 98%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(270deg,transparent 6%,rgba(0,0,0,.55) 40%,#000 72%),linear-gradient(180deg,transparent 4%,#000 32%,#000 78%,transparent 98%);mask-composite:intersect}
@media (max-width:899px){.hg-photo{background-image:url("assets/hero-drag-m.jpg")}}
.hg-glow{position:absolute;inset:0;
  background:
    radial-gradient(34% 56% at 31% 52%,rgba(79,200,232,.17),rgba(79,200,232,.05) 52%,transparent 76%),
    radial-gradient(26% 32% at 94% 8%,rgba(79,200,232,.06),transparent 70%);
  animation:breathe 8s ease-in-out infinite}
.hg-rev{position:absolute;inset:0;opacity:0;background:radial-gradient(28% 46% at 31% 52%,rgba(79,200,232,.3),rgba(79,200,232,.08) 56%,transparent 80%)}
.hg-carbon{position:absolute;inset:0;opacity:.85;
  background-image:var(--carbon);
  background-size:8px 8px;
  -webkit-mask-image:radial-gradient(54% 74% at 31% 52%,#000,rgba(0,0,0,.5) 46%,transparent 86%);mask-image:radial-gradient(54% 74% at 31% 52%,#000,rgba(0,0,0,.5) 46%,transparent 86%)}
.hg-grid{position:absolute;inset:0;opacity:.5;
  background:linear-gradient(rgba(79,200,232,.05) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,rgba(79,200,232,.05) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:radial-gradient(80% 90% at 68% 40%,#000,transparent 78%);mask-image:radial-gradient(80% 90% at 68% 40%,#000,transparent 78%)}
.hg-vig{position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 44%,transparent 52%,rgba(13,13,13,.8) 100%),linear-gradient(180deg,rgba(13,13,13,.55),transparent 16%,transparent 84%,var(--bg))}
@keyframes breathe{0%,100%{opacity:.85}50%{opacity:1}}

/* four registration corners (decorative). The information that used to sit in them now lives in the facts bar, at reading size. */
.hud{display:none;position:absolute;z-index:1;inset:calc(var(--hdr) + 8px) max(20px,calc(50% - 680px)) 14px;pointer-events:none}
.hud i{position:absolute;width:22px;height:22px;border:0 solid rgba(79,200,232,.55);transition:width .9s var(--ease),height .9s var(--ease),border-color .9s}
html.js .hero:not(.is-ready) .hud i{width:64px;height:64px;border-color:rgba(214,244,255,.85)}
.hud .c1{left:0;top:0;border-top-width:1px;border-left-width:1px}
.hud .c2{right:0;top:0;border-top-width:1px;border-right-width:1px}
.hud .c3,.hud .c4{display:none}   /* the facts bar carries its own brackets at the bottom */
@media (min-width:1100px){.hud{display:block}}

.hero-grid{flex:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,48px);align-items:center;width:min(100% - 2 * var(--gutter),var(--maxw-w));margin-inline:auto}
.hero-copy{display:grid;justify-items:start;gap:0;position:relative;z-index:2}
.hero-copy .eyebrow{margin-bottom:24px}
.hero-h1{font-size:var(--fs-9);line-height:1.32;font-weight:700;letter-spacing:0}
.hero-h1 .ln{display:block}
.hero-h1 .w{display:inline-block}
.hero-h1 .acc{color:var(--cyan)}
.lead{text-wrap:pretty;color:var(--soft);font-size:var(--fs-4);line-height:1.95;max-width:46ch;margin:24px 0 30px}
.hero-inst{container-type:inline-size;position:relative;z-index:1;min-width:0}
.dial{--R:min(43cqw,calc((100vh - var(--hdr) - 250px) / 1.8),420px);position:relative;width:calc(var(--R) * 2.3);height:calc(var(--R) * 1.8);margin-inline:auto}
@supports (height:100svh){.dial{--R:min(43cqw,calc((100svh - var(--hdr) - 250px) / 1.8),420px)}}
.dial-probe{position:absolute;left:0;top:0;width:var(--R);height:0;visibility:hidden;pointer-events:none}
.dial-cv{position:absolute;left:0;top:0;width:100%;height:100%}
/* JS off: the same dial drawn as plain SVG (needle at idle). With JS the canvases take over. */
.dial-static{position:absolute;inset:0;width:100%;height:100%}
.dial-static path{fill:none;stroke-linecap:butt}
.dial-static .a1{stroke:rgba(255,255,255,.09);stroke-width:.25}.dial-static .a2{stroke:rgba(255,255,255,.05);stroke-width:.25}
.dial-static .a3{stroke:rgba(79,200,232,.45);stroke-width:.5}.dial-static .a4{stroke:rgba(236,249,255,.6);stroke-width:.9}
.dial-static .t1{stroke:rgba(255,255,255,.18);stroke-width:.25}.dial-static .t2{stroke:rgba(255,255,255,.34);stroke-width:.4}.dial-static .t3{stroke:rgba(255,255,255,.6);stroke-width:.6}.dial-static .t4{stroke:rgba(255,255,255,.2);stroke-width:.25}
.dial-static .nm text{fill:rgba(242,242,242,.55);font:600 6.2px var(--f-data);text-anchor:middle;dominant-baseline:central}
.dial-static .nd{stroke:#fff;stroke-width:.8;stroke-linecap:round}
html.js .dial-static{display:none}
.dial-brand{position:absolute;left:50%;top:calc(var(--R) * .84);width:calc(var(--R) * 1.02);aspect-ratio:3352/1050;transform:translate(-50%,-50%)}
.dial-brand img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.dial-sheen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.dial-dim{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.dial-dim path{fill:none;stroke:rgba(79,200,232,.8);stroke-width:1;vector-effect:non-scaling-stroke}
.dial-ro{position:absolute;left:50%;top:calc(var(--R) * 1.47);transform:translate(-50%,-50%);display:grid;justify-items:center;align-items:center;gap:9px;direction:ltr;white-space:nowrap;min-width:calc(var(--R) * .9)}
.ro-val{grid-area:1/1;transition:opacity .35s var(--ease);display:inline-flex;font:600 clamp(26px,calc(var(--R) * .115),46px)/1 var(--f-data);color:var(--text);text-shadow:0 0 18px rgba(79,200,232,.4);letter-spacing:0}
.ro-val .d{display:inline-block;width:.62em;text-align:center}
.ro-val .d.z{opacity:.28}
.ro-unit{grid-area:2/1;transition:opacity .35s var(--ease);font:400 13px/1 var(--f);letter-spacing:0;color:var(--dim)}
/* start states exist only when JS is present (the safety timer in <head> lifts them) */
html.js .dial:not(.is-on) .dial-cv,html.js .dial:not(.is-on) .dial-brand,html.js .dial:not(.is-on) .dial-ro{opacity:0}
html.js .dial.is-on .dial-cv{transition:opacity 1.1s var(--ease)}
html.js .dial.is-on .dial-brand{transition:opacity 1.2s var(--ease) .25s}
html.js .dial.is-on .dial-ro{transition:opacity 1s var(--ease) .5s}
/* the copy settles into place with a transform only: it is visible from the first frame (LCP), never faded in */
@keyframes settle{from{transform:translate3d(0,.32em,0)}to{transform:none}}
.up{animation:settle .9s var(--ease) both;animation-delay:var(--d,0s)}
.hero-h1 .w{animation:settle .9s var(--ease) both;animation-delay:calc(.04s + var(--i,0) * .09s)}
/* the drafted frame around the logo: draws in once, then rests at low contrast */
html.js .dial-dim path{stroke-dasharray:1;stroke-dashoffset:1}
html.js .hero.is-go .dial-dim path{stroke-dashoffset:0;opacity:.42;transition:stroke-dashoffset .9s var(--ease-io) 1.2s,opacity 1.6s var(--ease) 2.4s}

/* facts bar (also reused on inner pages): where, when, how to call. Real reading size, full contrast, on every screen size. */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(14px,2vw,26px);border:1px solid var(--line-2);background:rgba(13,13,13,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);--bc:rgba(79,200,232,.7);--bs:12px}
.hero > .facts{width:min(100% - 2 * var(--gutter),var(--maxw-w));margin-inline:auto;position:relative;z-index:2}
.fact{display:flex;align-items:center;gap:14px;padding:14px 20px;min-width:0}
.fact + .fact{border-inline-start:1px solid var(--line)}
.fact > .ic{width:28px;height:28px;color:var(--cyan);stroke-width:1.5}
.fact-b{display:grid;gap:3px;min-width:0}
.fact-b b{font-size:var(--fs-4);font-weight:600;line-height:1.5;color:var(--text)}
.fact-b > span,.fact-b a{font-size:var(--fs-3);line-height:1.5;color:var(--soft);font-weight:400}
.fact-b > .mono{font-size:14px;letter-spacing:.08em;color:var(--dim)}
.fact-b a:hover{color:var(--cyan)}
.fact-hr{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;font-size:19px!important}
.fact-hr .tm{font-family:var(--f-data);color:var(--text)}
.fact-hr .tr + .tr{padding-inline-start:16px;border-inline-start:1px solid var(--line-2)}
.fact-tel{display:flex;flex-wrap:wrap;gap:0 18px}
.fact-tel a{font-family:var(--f-data);letter-spacing:.04em;direction:ltr;unicode-bidi:isolate;color:var(--text);font-weight:600}
@media (max-width:900px){.facts{grid-template-columns:minmax(0,1fr)}.fact + .fact{border-inline-start:0;border-top:1px solid var(--line)}.fact{padding:12px 16px}.fact-hr{flex-direction:column;align-items:flex-start;gap:0}.fact-hr .tr + .tr{padding:0;border:0}}

@media (max-width:899px){
  .hero{min-height:0;padding:calc(var(--hdr) + 4px) 0 28px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:8px;flex:none}
  .hero-inst{order:-1}
  .dial{--R:min(40cqw,200px);margin-bottom:2px}
  .dial-brand{width:calc(var(--R) * 1.04)}
  .hero-copy{justify-items:center;text-align:center}
  .hero-copy .eyebrow{margin-bottom:12px;font-size:14px}
  .lead{margin:14px 0 18px;font-size:17px;line-height:1.85}
  .fact:nth-child(2){order:-1}
  .cta-row{justify-content:center}
}
@media (max-width:560px){
  .hero-h1{font-size:38px}
  .cta-row{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .cta-row .btn{width:100%}
}
@media (min-width:900px) and (max-height:760px){
  .lead{margin:18px 0 22px}
  .hero-copy .eyebrow{margin-bottom:16px}
}

/* 4b. tape: a slow measuring tape of the equipment names */
.tape{position:relative;height:66px;border-block:1px solid var(--line);background:var(--bg);overflow:clip;direction:ltr}
.tape::before,.tape::after{content:'';position:absolute;inset-block:0;width:14%;z-index:2;pointer-events:none}
.tape::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.tape::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.tape-track{display:flex;width:max-content;height:100%;animation:tape 150s linear infinite;will-change:transform;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 10px) left bottom/100% 5px no-repeat,
    repeating-linear-gradient(90deg,rgba(79,200,232,.6) 0 1px,transparent 1px 50px) left bottom/100% 12px no-repeat}
.tape-set{display:flex;flex:none}
.tape-set li{flex:none;width:250px;display:grid;place-items:center;padding-bottom:12px;position:relative}
.tape-set li::before{content:'';position:absolute;left:0;bottom:0;width:1px;height:20px;background:var(--cyan);opacity:.8}
.tape-set .lat{font-weight:600;font-size:14px;letter-spacing:.28em;margin-right:-.28em;color:rgba(242,242,242,.62);transition:color .25s}
.tape-set li:hover .lat{color:#fff}
.tape:hover .tape-track,.tape.is-paused .tape-track{animation-play-state:paused}
@keyframes tape{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* 4c. readouts: three instrument cells */
.rd{padding:clamp(48px,6vw,88px) 0 0}
.rd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.005))}
.rd-cell{position:relative;display:flex;align-items:center;gap:clamp(16px,2vw,28px);padding:clamp(22px,3vw,38px) clamp(18px,2.6vw,40px)}
.rd-cell + .rd-cell{border-inline-start:1px solid var(--line)}
.rd-g{width:clamp(56px,6vw,84px);height:clamp(56px,6vw,84px);flex:none;overflow:visible}
.rd-g .bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:3}
.rd-g .fg{fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:butt}
.rd-g .tk{stroke:rgba(255,255,255,.28);stroke-width:1}
.rd-g .tube{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.2}
.rd-g .lvl{fill:var(--cyan);opacity:.9;transform-box:fill-box;transform-origin:50% 100%}
.rd-txt{display:grid;gap:2px;min-width:0}
.rd-num{font:600 clamp(38px,4.6vw,64px)/1 var(--f-data);color:var(--cyan);text-shadow:0 0 28px rgba(79,200,232,.26);display:inline-flex;direction:ltr;letter-spacing:0;justify-self:start}
.rd-num .drum{display:inline-block;height:1em;overflow:hidden;line-height:1}
.rd-num .strip{display:flex;flex-direction:column;transition:transform 1.4s var(--ease) var(--dd,0s)}
.rd-num .strip i{display:block;height:1em;font-style:normal;line-height:1}
.rd-lbl{color:var(--soft);font-size:clamp(15px,1.3vw,18px);line-height:1.6}
html.js .rd-g .seg{opacity:.18;transition:opacity .35s var(--ease) calc(var(--k) * .12s + .2s)}
html.js .rd-cell.in .rd-g .seg{opacity:1}
.rd-g .ring{stroke-dasharray:100;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50% 50%}
html.js .rd-g .ring{stroke-dashoffset:100;transition:stroke-dashoffset 1.5s var(--ease) .25s}
html.js .rd-cell.in .rd-g .ring{stroke-dashoffset:0}
html.js .rd-g .lvl{transform:scaleY(.04);transition:transform 1.3s var(--ease) calc(var(--k) * .09s + .2s)}
html.js .rd-cell.in .rd-g .lvl{transform:scaleY(1)}
@media (max-width:760px){
  .rd-grid{grid-template-columns:minmax(0,1fr)}
  .rd-cell + .rd-cell{border-inline-start:0;border-top:1px solid var(--line)}
  .rd-cell{padding:20px 22px}
}

/* 4d. six ways in: hairline index grid */
.ways-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.way{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;gap:0 16px;min-height:240px;padding:26px 28px 24px;background:var(--bg);isolation:isolate;transition:background-color .3s}
.way::before{content:'';position:absolute;inset:10px;pointer-events:none;opacity:0;transform:scale(1.04);transition:transform .5s var(--ease),opacity .3s;--bc:var(--cyan);
  background:
    linear-gradient(var(--bc),var(--bc)) left top/12px 1px no-repeat,linear-gradient(var(--bc),var(--bc)) left top/1px 12px no-repeat,
    linear-gradient(var(--bc),var(--bc)) right top/12px 1px no-repeat,linear-gradient(var(--bc),var(--bc)) right top/1px 12px no-repeat,
    linear-gradient(var(--bc),var(--bc)) left bottom/12px 1px no-repeat,linear-gradient(var(--bc),var(--bc)) left bottom/1px 12px no-repeat,
    linear-gradient(var(--bc),var(--bc)) right bottom/12px 1px no-repeat,linear-gradient(var(--bc),var(--bc)) right bottom/1px 12px no-repeat}
.way-ph{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#0d0d0d}
.way-ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.7);opacity:.55;transform:scale(1.04);transition:opacity .6s var(--ease),transform 1.2s var(--ease),filter .6s}
.way-ph::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,13,.5),rgba(13,13,13,.2) 34%,rgba(13,13,13,.9) 78%)}
.way:hover .way-ph img,.way:focus-visible .way-ph img{opacity:.7;transform:scale(1.09);filter:grayscale(.35) contrast(1.05) brightness(.75)}
.way:hover,.way:focus-visible{background:var(--card)}
.way:hover::before,.way:focus-visible::before{opacity:1;transform:none}
.way:focus-visible{outline-offset:-4px}
.way-n{grid-column:1;grid-row:1;font:600 13px/1 var(--f-data);letter-spacing:.16em;color:var(--dim);direction:ltr;justify-self:start}
.way-ic{grid-column:2;grid-row:1;width:34px;height:34px;color:var(--cyan);stroke-width:1.5;transition:transform .5s var(--ease)}
.way:hover .way-ic{transform:translateY(-2px)}
.way-t{grid-column:1/-1;grid-row:2;align-self:end;font-size:var(--fs-7);font-weight:700;line-height:1.3;margin-top:28px}
.way-s{grid-column:1/-1;grid-row:3;color:#dde1e4;font-size:var(--fs-3);margin-top:6px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.way-go{position:absolute;inset-block-start:24px;inset-inline-end:74px;width:22px;height:22px;color:var(--cyan);opacity:0;transform:translateX(8px);transition:opacity .3s,transform .5s var(--ease)}
.way:hover .way-go,.way:focus-visible .way-go{opacity:1;transform:none}
@media (max-width:900px){.ways-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .ways-grid{grid-template-columns:minmax(0,1fr)}
  .way{min-height:0;padding:18px 22px 20px;grid-template-rows:auto auto auto}
  .way-t{margin-top:2px;font-size:24px}
  .way-ic{width:30px;height:30px}
}

/* 4e. equipment bench: a rail of seven stations, one plate at a time */
.bench-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.stn{display:grid;gap:18px;padding:18px;background:var(--bg);align-content:start;border:1px solid var(--line)}
.stn .plate{aspect-ratio:1/1.05;min-height:0}
.stn-body{display:grid;gap:8px;align-content:start;position:relative}
.stn-cat{color:var(--cyan);font-weight:600;font-size:var(--fs-3);line-height:1.5}
.stn-name{font-size:var(--fs-7);line-height:1.2;font-weight:600;direction:ltr;text-align:right;unicode-bidi:isolate}
.stn-line{color:#e0e4e6;font-size:var(--fs-4);line-height:1.9;max-width:46ch}
.stn-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.stn-body .badge{width:fit-content}
.rail{display:none}
.bench-all{display:grid;place-content:center;justify-items:center;gap:14px;min-height:200px;border:1px dashed var(--line-c);color:var(--cyan);font-weight:600;font-size:var(--fs-5);transition:background-color .3s,border-color .3s}
.bench-all .ic{width:34px;height:34px}
.bench-all:hover{background:rgba(79,200,232,.07);border-color:var(--cyan)}
.bench.is-tabs .bench-all{display:none}
.bench.is-tabs .rail{display:block;position:relative;margin-bottom:clamp(28px,4vw,52px)}
.rail-tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(6px,1vw,14px);direction:rtl}
.rail-tabs button{position:relative;display:grid;justify-items:center;align-content:start;gap:6px;padding:0 0 14px;color:var(--mute);transition:color .25s;min-width:0}
.rail-tabs .plate.mini{width:100%}
.rail-tabs button:hover .plate.mini,.rail-tabs button:focus-visible .plate.mini{filter:none}
.rail-tabs button[aria-selected=true] .plate.mini{filter:none;outline-color:var(--cyan)}
.rail-tabs button .mono{font-weight:600;font-size:12px;letter-spacing:.16em}
.rail-tabs button .lat{font-weight:600;font-size:clamp(12px,1.1vw,13.5px);letter-spacing:.1em;white-space:nowrap}
.rail-tabs button:hover{color:#fff}
.rail-tabs button[aria-selected=true]{color:var(--cyan)}
.rail-rule{position:relative;height:16px;direction:ltr;border-top:1px solid var(--line-2);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 8px) left top/100% 6px no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 1px,transparent 1px calc(100% / 7)) left top/100% 14px no-repeat}
.rail-car{position:absolute;left:0;top:-1px;height:16px;width:calc(100% / 7);transform:translateX(var(--x,0));transition:transform .7s var(--ease);will-change:transform}
.rail-car::before{content:'';position:absolute;inset-inline:22%;top:0;height:3px;background:var(--cyan);box-shadow:0 0 12px rgba(79,200,232,.7)}
.rail-car::after{content:'';position:absolute;left:50%;top:5px;width:9px;height:9px;margin-left:-4.5px;background:var(--cyan);clip-path:polygon(50% 0,100% 100%,0 100%)}
.bench.is-tabs .bench-list{display:block;background:none;border:0}
.bench.is-tabs .stn{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,80px);padding:0;background:none;border:0;align-items:center}
.bench.is-tabs .stn[hidden]{display:none}
.bench.is-tabs .stn .plate{aspect-ratio:auto;height:clamp(360px,44vw,520px)}
.bench.is-tabs .stn-body{gap:14px}
.stn-ghost{display:none}
.bench.is-tabs .stn-ghost{display:block;position:absolute;inset-inline-start:-6px;bottom:-34px;z-index:-1;font:700 clamp(150px,19vw,280px)/.8 var(--f-data);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(79,200,232,.11);direction:ltr;pointer-events:none;user-select:none}
.bench.is-tabs .stn-name{font-size:var(--fs-9);line-height:1.12}
.bench.is-tabs .stn-line{padding-block:16px;border-block:1px solid var(--line)}
.bench.is-tabs .stn.is-active .plate{animation:plateIn .8s var(--ease)}
.bench.is-tabs .stn.is-active .stn-body>*{animation:bodyIn .7s var(--ease) both}
.bench.is-tabs .stn.is-active .stn-body>*:nth-child(2){animation-delay:.05s}
.bench.is-tabs .stn.is-active .stn-body>*:nth-child(3){animation-delay:.1s}
.bench.is-tabs .stn.is-active .stn-body>*:nth-child(4){animation-delay:.15s}
.bench.is-tabs .stn.is-active .stn-body>*:nth-child(5){animation-delay:.2s}
@keyframes plateIn{from{opacity:.2;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes bodyIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .bench.is-tabs .stn{grid-template-columns:minmax(0,1fr)}
  .bench.is-tabs .stn .plate{height:clamp(320px,80vw,460px)}
  .rail-tabs{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
  .rail-tabs::-webkit-scrollbar{display:none}
  .rail-tabs{gap:8px}
  .rail-tabs button{flex:0 0 92px;scroll-snap-align:center}
  .rail-rule{display:none}
  .rail-tabs button[aria-selected=true]::after{content:'';position:absolute;inset-inline:18%;bottom:0;height:3px;background:var(--cyan);box-shadow:0 0 10px rgba(79,200,232,.6)}
}

/* 4f. proof: before / after with a measuring reticle */
.proof-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.proof-copy{display:grid;gap:18px;justify-items:start}
.proof-copy p{color:#dde1e4;font-size:clamp(17px,1.4vw,20px);line-height:1.95;max-width:46ch}
.proof-hint{display:flex;align-items:center;gap:12px;color:var(--cyan);font-weight:700;font-size:15px}
.proof-hint .dl{width:56px;color:var(--line-c)}
.ba{--x:50;--s:1.25;--ax:.47;--ay:.36;--hr:1;position:relative;width:100%;margin-inline:auto;aspect-ratio:4/5;overflow:hidden;background:#090909;
  border:1px solid var(--line-c);touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:ew-resize;container-type:inline-size;direction:ltr}
@media (min-width:700px){.ba{aspect-ratio:5/4;--s:1.2;--ax:.47;--ay:.5;--hr:1.5625}}
.ba-pane{position:absolute;inset:0}
.ba-pane img{position:absolute;display:block;max-width:none;height:auto;pointer-events:none;-webkit-user-drag:none;width:calc(var(--s) * 100%);
  left:calc((var(--ax) - var(--px) * var(--s)) * 100%);top:calc((var(--ay) - var(--py) * var(--s) * var(--hr)) * 100%)}
.ba-before img{--px:.455;--py:.416}
.ba-after img{--px:.39;--py:.292}
.ba-before{clip-path:inset(0 0 0 calc(var(--x) * 1%))}
.ba::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 -90px 90px -70px rgba(0,0,0,.6)}
.ba-scale{position:absolute;inset-inline:0;z-index:2;height:18px;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 2%) left/100% 6px no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 1px,transparent 1px 10%) left/100% 13px no-repeat}
.ba-scale.t{top:0}
.ba-scale.b{bottom:0;transform:scaleY(-1)}
.ba-chip{position:absolute;top:26px;z-index:3;padding:2px 14px 3px;background:rgba(13,13,13,.78);border:1px solid rgba(79,200,232,.45);color:var(--cyan);
  font-weight:600;font-size:15px;line-height:1.7;pointer-events:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:opacity .3s,transform .3s var(--ease)}
.ba-chip-b{right:16px}.ba-chip-a{left:16px}
.ba.hide-b .ba-chip-b,.ba.hide-a .ba-chip-a{opacity:0;transform:translateY(-6px)}
.ba-handle{position:absolute;top:0;bottom:0;left:calc(var(--x) * 1%);width:60px;margin-left:-30px;z-index:4;cursor:ew-resize;outline:none;touch-action:pan-y pinch-zoom}
.ba-handle::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(180deg,rgba(255,255,255,.4),#fff 18%,#fff 82%,rgba(255,255,255,.4));box-shadow:0 0 12px rgba(79,200,232,.75),0 0 2px rgba(0,0,0,.6)}
.ba-knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;display:grid;place-items:center;color:var(--cyan);
  background:rgba(13,13,13,.8);border:1.5px solid var(--cyan);border-radius:50%;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 12px 30px rgba(0,0,0,.55);transition:transform .25s var(--ease);
  translate:calc(max(0px,38px - var(--x) * 1cqw) - max(0px,var(--x) * 1cqw - (100cqw - 38px))) 0}
.ba-knob::before{content:'';position:absolute;inset:-9px;border-radius:50%;border:1px dashed rgba(79,200,232,.45)}
.ba-knob svg{width:24px;height:24px}
.ba:hover .ba-knob{transform:scale(1.05)}
.ba.is-drag{cursor:grabbing}
.ba.is-drag .ba-knob{transform:scale(.94)}
.ba-handle:focus-visible .ba-knob{outline:2px solid #fff;outline-offset:6px}
@media (max-width:899px){.proof-grid{grid-template-columns:minmax(0,1fr)}}

/* 4f2. gallery: a contact sheet, four real photos on one baseline */
.gal{position:relative;display:flex;gap:14px;padding-block:22px}
.gal::before,.gal::after{content:'';position:absolute;inset-inline:0;height:9px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 8px) left/100% 5px no-repeat,repeating-linear-gradient(90deg,rgba(79,200,232,.55) 0 1px,transparent 1px 64px) left/100% 9px no-repeat}
.gal::before{top:0}.gal::after{bottom:0;transform:scaleY(-1)}
.gal-i{position:relative;flex:var(--ar) 1 0;aspect-ratio:var(--ar);min-width:0;overflow:hidden;background:#101214;--bc:rgba(79,200,232,.7);--bs:14px;display:block}
.gal-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.gal-i:hover img,.gal-i:focus-visible img{transform:scale(1.035)}
.gal-i::before{opacity:0;transition:opacity .4s}
.gal-i:hover::before,.gal-i:focus-visible::before{opacity:1}
.gal-n{position:absolute;z-index:3;inset-block-start:10px;inset-inline-start:12px;font:600 12px/1 var(--f-data);letter-spacing:.16em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8);direction:ltr}
.gal-more{margin-top:28px;display:flex;justify-content:center}
@media (max-width:760px){
  .gal{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .gal-i{flex:none;aspect-ratio:4/5}
}

/* 4g. voices */
.v-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.vq{position:relative;display:grid;align-content:space-between;gap:26px;padding:clamp(24px,3vw,40px);background:var(--card);border-top:1px solid var(--line-c)}
.vq::before{content:'';position:absolute;top:-1px;inset-inline-start:0;width:64px;height:3px;background:var(--cyan)}
.vq-1{grid-column:span 7}
.vq-2{grid-column:span 5}
.vq-3{grid-column:span 12}
.vq-n{font:600 13px/1 var(--f-data);letter-spacing:.18em;color:var(--dim);direction:ltr}
.vq blockquote p{font-size:var(--fs-6);line-height:1.9;font-weight:400;color:#f0f2f3}
.vq-2 blockquote p{font-size:var(--fs-7);line-height:1.7;font-weight:600}
.vq-3 blockquote p{max-width:58ch}
.vq-src{display:flex;align-items:center;gap:10px;color:var(--soft);font-size:var(--fs-3);font-weight:400}
.vq-src .ic{width:20px;height:20px;color:var(--cyan)}
.vq-src::after{content:'';flex:1;height:1px;background:var(--line)}
@media (max-width:900px){.vq-1,.vq-2,.vq-3{grid-column:1/-1}}

/* 4h. hours + location. Home and contact use the same parts: .hrs2 (hours as signage), .addr-tiles (the address in four tiles), .rstrip (the route in five stops) */
.where-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2.4vw,32px);align-items:stretch}
.card{position:relative;padding:clamp(22px,2.8vw,38px);background:var(--card);border:1px solid var(--line);display:grid;gap:22px;align-content:start}
.card h3{font-size:var(--fs-5);font-weight:600;display:flex;align-items:center;gap:12px}
.card h3 .ic{color:var(--cyan);width:26px;height:26px}
.card.hrs{grid-template-rows:auto minmax(0,1fr)}
.card.hrs .hrs2{grid-template-rows:minmax(0,1fr) auto auto}   /* the two shifts take the spare height, the timeline and the day-off block keep theirs */

/* hours as signage: the two shifts at display size with ص / م markers, a day-timeline bar, «الجمعة إجازة» as its own block */
.hrs2{container-type:inline-size;display:grid;gap:18px;min-height:100%}
.hrs2-blocks{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.hrs2-b{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding:clamp(16px,2vw,24px) clamp(16px,2vw,26px);background:var(--card-2);min-width:0}
.hrs2-t{display:flex;align-items:center;gap:clamp(10px,1.4cqw,20px);direction:rtl;color:var(--text)}
.hrs2 .tm{font-size:clamp(34px,7.4cqw,54px);line-height:1;font-family:var(--f-data)}
.hrs2-t .ic{width:clamp(22px,4cqw,34px);height:clamp(22px,4cqw,34px);color:var(--cyan);flex:none;stroke-width:1.6}
.hrs2-s{color:var(--soft);font-size:var(--fs-3);font-weight:400;line-height:1.6;margin-inline-start:auto}
.hrs2-off{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(14px,1.8vw,20px) clamp(16px,2vw,26px);border:1px solid var(--line-2);font-weight:700;font-size:clamp(22px,4.6cqw,30px);line-height:1.4;color:#f0f3f4;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 2px,transparent 2px 9px)}
@container (min-width:640px){.hrs2-blocks{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hrs2 .tm{font-size:clamp(34px,5.6cqw,54px)}}
.hs{direction:rtl;display:grid;gap:8px}
.hs-track{position:relative;height:34px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.hs-band{position:absolute;top:-1px;bottom:-1px;right:calc(var(--a) * 100% / 12);width:calc((var(--b) - var(--a)) * 100% / 12);background:rgba(79,200,232,.85);transform-origin:100% 50%;
  background-image:linear-gradient(90deg,rgba(6,24,30,.3) 1px,transparent 1px);background-size:calc(100% / (var(--b) - var(--a))) 100%}
.hs-gap{position:absolute;top:0;bottom:0;right:calc(var(--a) * 100% / 12);width:calc((var(--b) - var(--a)) * 100% / 12);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.1) 0 1px,transparent 1px 7px)}
.hs-ticks{position:relative;height:34px}
.hs-ticks span{position:absolute;top:0;right:calc(var(--k) * 100% / 12);transform:translateX(50%);display:grid;justify-items:center;gap:4px;font:400 12px/1 var(--f-data);color:var(--dim)}
.hs-ticks b{font-weight:inherit;white-space:nowrap}
.hs-ticks span::before{content:'';display:block;width:1px;height:8px;background:var(--line-2)}
.hs-ticks span.mj{color:var(--text);font-weight:600}
.hs-ticks b i{font-style:normal;color:var(--cyan);margin-inline-start:3px}
.hs-ticks span.mj::before{height:14px;background:var(--cyan)}
html.js .hs .hs-band{transform:scaleX(0);transition:transform 1.1s var(--ease) var(--dd,0s)}
html.js .hs.in .hs-band{transform:none}

.addr{font-size:var(--fs-5);line-height:1.9;font-weight:400;color:var(--text)}
/* the address in four tiles: قطعة ج / شارع 33 / قسيمة 98 / محل 24 */
.addr-tiles{direction:rtl;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.addr-tiles li{display:grid;justify-items:center;gap:0;padding:12px 6px 10px;background:var(--card-2);text-align:center}
.addr-tiles small{font-size:var(--fs-2);color:var(--soft);font-weight:600}
.addr-tiles b{font:700 clamp(30px,3.4vw,46px)/1.15 var(--f-data);color:var(--cyan);text-shadow:0 0 24px rgba(79,200,232,.25)}
.coords{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font:400 14px/1.5 var(--f-data);letter-spacing:.08em;color:var(--soft);direction:ltr;text-align:left;padding-top:16px;border-top:1px solid var(--line)}
.coords b{color:var(--cyan);font-weight:600;letter-spacing:0}
/* the route in five stops (home): a hairline with numbered stops; a plain list on phones */
.rstrip{direction:rtl;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative;padding-top:6px}
.rstrip::before{content:'';position:absolute;inset-inline:10%;top:22px;height:1px;background:var(--line-c)}
.rstrip li{position:relative;display:grid;justify-items:center;align-content:start;gap:10px;text-align:center;font-size:15px;font-weight:600;line-height:1.5;color:#e0e4e6}
.rstrip li i{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--cyan);border-radius:50%;background:var(--card);color:var(--text);font:700 13px/1 var(--f-data);font-style:normal}
.rstrip li:last-child i{background:var(--cyan);color:#06181e}
.rstrip li small{display:block;color:var(--dim);font-size:13.5px;font-weight:400}
.where-tel{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.where-tel a{display:grid;gap:4px;padding:12px 14px;background:var(--card);transition:background-color .25s}
.where-tel a:hover{background:#1b1f22}
.where-tel small{font-size:var(--fs-2);color:var(--soft);font-weight:400}
.where-tel .mono{font-size:17px;font-weight:600;color:var(--cyan);letter-spacing:.05em;text-align:right}
.where-act{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:1100px){.where-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .hs-ticks span:nth-child(even):not(.mj){display:none}
  .rstrip{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:0}
  .rstrip::before{inset-inline:auto;inset-inline-start:15px;top:14px;bottom:14px;width:1px;height:auto}
  .rstrip li{grid-template-columns:32px minmax(0,1fr);justify-items:start;align-items:center;gap:6px 14px;text-align:start;font-size:16px}
  .rstrip li > span{display:grid}
  .where-tel{grid-template-columns:1fr}
}

/* 4i. call to action */
.cta{position:relative;isolation:isolate;overflow:clip;padding:clamp(80px,10vw,150px) 0;border-top:1px solid var(--line);text-align:center}
.cta-bg{position:absolute;inset:0;z-index:-2;background:#0b0c0d}
/* the photograph is fetched only when the band is about to come into view (system.js adds .has-bg); with no JS it simply loads */
.cta-bg::before{content:'';position:absolute;inset:0;background:center 42%/cover no-repeat;filter:grayscale(1) contrast(1.15) brightness(.8);opacity:.7}
/* the band's own grey copies of the photograph (assets/cta-bg.jpg 1024px / cta-bg-m.jpg 640px, about 45 / 22 KB): under this much dark glaze the full 207 / 69 KB
   hero files added nothing the eye can see, and every page loads this band. The home page reuses its hero photograph instead (page-index.css): already in cache there. */
html:not(.js) .cta-bg::before,.cta.has-bg .cta-bg::before{background-image:url("assets/cta-bg-m.jpg")}
@media (min-width:900px){html:not(.js) .cta-bg::before,.cta.has-bg .cta-bg::before{background-image:url("assets/cta-bg.jpg")}}
.cta-bg::after{content:'';position:absolute;inset:0;
  background:
    radial-gradient(60% 80% at 50% 50%,rgba(13,13,13,.5),rgba(13,13,13,.92) 80%),
    linear-gradient(180deg,var(--bg),transparent 30%,transparent 70%,var(--bg)),
    linear-gradient(rgba(79,200,232,.12),rgba(79,200,232,.12))}
.cta-grid{position:absolute;inset:0;z-index:-1;opacity:.55;
  background:linear-gradient(rgba(79,200,232,.07) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,rgba(79,200,232,.07) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:radial-gradient(70% 80% at 50% 50%,#000,transparent 80%);mask-image:radial-gradient(70% 80% at 50% 50%,#000,transparent 80%)}
.cta-in{display:grid;justify-items:center;gap:18px}
.cta-in .dl{width:min(240px,50%)}
.cta h2{font-size:var(--fs-9);line-height:1.35;font-weight:700;text-wrap:balance}
.cta p{color:#dde1e4;font-size:var(--fs-5);max-width:52ch}
.cta .btn{margin-top:14px}

/* ---------- 5. equipment page (template for the seven) ---------- */
.eq{position:relative;isolation:isolate;padding-top:calc(var(--hdr) + 22px)}
.eq-bg{position:absolute;inset:0 0 auto 0;height:min(1000px,120vh);z-index:-1;pointer-events:none;
  background:radial-gradient(38% 52% at 30% 46%,rgba(79,200,232,.11),transparent 72%),
    linear-gradient(rgba(79,200,232,.045) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,rgba(79,200,232,.045) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--mute);padding:10px 0 26px}
.crumbs a:hover{color:var(--cyan)}
.crumbs .ic{width:14px;height:14px;opacity:.6}
.crumbs [aria-current]{color:var(--text)}
.eq-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center;padding-bottom:clamp(40px,6vw,80px)}
.eq-copy{display:grid;justify-items:start;gap:18px}
.eq-name{font-size:var(--fs-9);line-height:1.1;font-weight:600;letter-spacing:0;direction:ltr;text-align:right;unicode-bidi:isolate;overflow-wrap:anywhere}
.eq-name.big{font-size:clamp(46px,6.4vw,92px);line-height:1.02}
.eq-line{color:#dfe3e5;font-size:var(--fs-6);line-height:1.85;font-weight:400;max-width:26em}
.eq-copy .cta-row{margin-top:10px}
.eq-plate{position:relative;min-width:0}
.eq-plate .plate{aspect-ratio:1.24/1;width:100%;min-height:0}
.eq-plate .plate-idx{display:none}
.eq-plate .plate:not(.plate-crop) img{max-width:calc(100% - 96px);max-height:calc(100% - 96px)}
.eq-dim{position:absolute;pointer-events:none;color:var(--line-c)}
.eq-dim-h{inset-inline:0;top:-26px}
.eq-dim-v{inset-block:0;inset-inline-end:-26px;width:9px;height:auto}
.eq-dim-v::before{inset:0 auto 0 4px;width:1px;height:auto;top:0}
.eq-dim-v::after{background:linear-gradient(currentColor,currentColor) top/100% 1px no-repeat,linear-gradient(currentColor,currentColor) bottom/100% 1px no-repeat}
.zn{position:absolute;z-index:5;display:flex;pointer-events:none;font:600 12px/1 var(--f-data);letter-spacing:.12em;color:rgba(214,244,255,.62);direction:ltr}
.zn i{flex:1;text-align:center;font-style:normal}
.zn-t{inset-inline:0;top:10px}
.zn-l{inset-block:0;left:9px;flex-direction:column}
.zn-l i{display:grid;place-items:center}
.eq-scan{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.eq-scan::before{content:'';position:absolute;inset:0;opacity:0;transform:translateY(-100%);
  background:linear-gradient(180deg,transparent 0 84%,rgba(79,200,232,.22) 94%,rgba(79,200,232,.95) 99.4%,rgba(214,244,255,1) 100%)}
html.js .eq-plate.in .eq-scan::before{animation:scan 2s var(--ease-io) .6s 1 both}
@keyframes scan{0%{opacity:1;transform:translateY(-100%)}90%{opacity:1}100%{opacity:0;transform:translateY(0)}}
.eq-sheet{position:relative}
.eq-plate .tb{grid-template-columns:auto auto auto minmax(0,1fr);margin-top:0}
.eq-rail{border-block:1px solid var(--line);background:var(--bg-2);padding:clamp(26px,3.4vw,44px) 0}
.eq-rail-h{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.eq-rail-h b{font-size:15px;font-weight:700;color:var(--dim)}
.eq-rail-h .mono{font-size:13px;letter-spacing:.14em;color:var(--cyan);font-weight:600}
.eq-rail-h .dl{flex:1}
.eq-stations{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1.2vw,16px);padding-top:6px}
.eq-stations a{position:relative;display:grid;gap:10px;color:var(--mute);min-width:0;transition:color .25s}
.eq-stations a:hover .plate.mini{filter:none}
.eq-stations a[aria-current=page] .plate.mini{filter:none;outline-color:var(--cyan)}
.eq-stations .lbl{display:flex;flex-direction:column;align-items:center;gap:5px;padding-bottom:14px}
.eq-stations a .mono{font-weight:600;font-size:12px;letter-spacing:.16em}
.eq-stations a .lat{font-weight:600;font-size:clamp(12px,1vw,13px);letter-spacing:.1em;white-space:nowrap}
.eq-stations a:hover{color:#fff}
.eq-stations a[aria-current=page]{color:var(--cyan)}
.eq-rule{position:relative;height:16px;direction:ltr;border-top:1px solid var(--line-2);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 8px) left top/100% 6px no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 1px,transparent 1px calc(100% / 7)) left top/100% 14px no-repeat}
.eq-rule .rail-car{transition:none;transform:translateX(calc(var(--pos,0) * 100%))}
html.js .eq-rule .rail-car{animation:carIn 1.3s var(--ease) .3s both}
@keyframes carIn{from{transform:translateX(calc(3 * 100%))}to{transform:translateX(calc(var(--pos,0) * 100%))}}
.eq-pn{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.eq-pn a{display:grid;gap:6px;padding:clamp(22px,3vw,40px) 0;transition:color .3s}
.eq-pn a small{font:400 13px/1.3 var(--f);color:var(--mute);display:block}
.eq-pn a b{font-size:var(--fs-7);font-weight:600;line-height:1.25;display:flex;align-items:center;gap:14px;direction:ltr}
.eq-pn a .ic{color:var(--cyan);width:26px;height:26px;transition:transform .4s var(--ease)}
.eq-pn a:hover b{color:var(--cyan)}
.eq-pn .prev{text-align:right;padding-inline-end:24px}
.eq-pn .prev b{justify-content:flex-end}
.eq-pn .next{text-align:left;padding-inline-start:24px;border-inline-start:1px solid var(--line)}
.eq-pn .prev:hover .ic{transform:translateX(6px)}
.eq-pn .next:hover .ic{transform:translateX(-6px)}
@media (max-width:899px){
  .eq-hero{grid-template-columns:minmax(0,1fr)}
  .eq-plate{padding-top:34px}   /* phones and tablets: the copy comes first (name, booking button, place, hours), the plate follows: the same on all seven machine pages */
  .eq-plate .plate{aspect-ratio:1.1/1}
  .eq-dim-v{display:none}
  .eq-stations{display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
  .eq-stations::-webkit-scrollbar{display:none}
  .eq-stations a{flex:0 0 132px;scroll-snap-align:center}
  .eq-rule{display:none}
  .eq-stations a[aria-current=page]::after{content:'';position:absolute;inset-inline:18%;bottom:0;height:3px;background:var(--cyan)}
}

@media (max-width:640px){
  .crumbs{padding:2px 0 8px}
  .eq{padding-top:calc(var(--hdr) + 8px)}
  .eq-plate{padding-top:28px}
  .eq-dim-h{top:6px}
  .eq-plate .plate{aspect-ratio:1.38/1}
  .eq-hero{gap:16px;padding-bottom:36px}
  .eq-copy{gap:12px}
  .eq-name.big{font-size:54px}
  .eq-line{font-size:var(--fs-5)}
}

/* ---------- 6. contact page ---------- */
/* 6a. hero: the first screen answers «how do I reach you, where are you, when are you open» with no scrolling:
   three giant tap targets (WhatsApp, mobile, landline), the two social channels, the hours line with the Friday chip, the place line,
   and the real workshop photograph on a title block, as tall as the copy beside it. */
.c-hero{position:relative;isolation:isolate;overflow:clip;padding:calc(var(--hdr) + 28px) 0 clamp(36px,5vw,64px)}
.c-hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 70% at 22% 42%,rgba(79,200,232,.13),transparent 72%),
    linear-gradient(rgba(79,200,232,.05) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,rgba(79,200,232,.05) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.c-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:stretch}
.c-copy{display:grid;gap:18px;align-content:start;justify-items:stretch;min-width:0}
.c-copy .eyebrow{justify-self:start}
.c-copy h1{font-size:var(--fs-9);line-height:1.25;font-weight:700}
.c-copy .lead{margin:0;max-width:44ch}
.tap3{display:grid;gap:12px;width:100%}
.tap{position:relative;isolation:isolate;display:flex;align-items:center;gap:clamp(14px,2vw,22px);min-height:clamp(76px,7.4vw,90px);padding:0 clamp(16px,2vw,26px);
  border:1px solid var(--line-c);background:rgba(79,200,232,.045);color:var(--text);transition:background-color .25s,border-color .25s,transform .2s var(--ease)}
.tap:hover{background:rgba(79,200,232,.11);border-color:var(--cyan);transform:translateY(-1px)}
.tap > .gl{width:clamp(40px,4.2vw,52px);height:clamp(40px,4.2vw,52px);flex:none}
.tap-t{display:grid;gap:2px;min-width:0;flex:1}
.tap-t small{font-size:var(--fs-3);font-weight:600;color:var(--soft);line-height:1.5}
.tap-t b{font:600 clamp(23px,2.7vw,34px)/1.2 var(--f-data);letter-spacing:.03em;direction:ltr;text-align:right;unicode-bidi:isolate;white-space:nowrap}
.tap > .ic{width:26px;height:26px;color:var(--cyan);flex:none;transition:transform .35s var(--ease)}
.tap:hover > .ic{transform:translateX(-4px)}
.tap-wa{background:var(--cyan);border-color:var(--cyan);color:#06181e}
.tap-wa:hover{background:#86def5;border-color:#86def5}
.tap-wa .tap-t small{color:#0a2e39}
.tap-wa > .gl{border-radius:50%;box-shadow:0 0 0 2px #06181e}
.tap-wa > .ic{color:#06181e}
.soc-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.soc-row a{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 16px;border:1px solid var(--line-2);transition:border-color .25s,background-color .25s;min-width:0}
.soc-row a:hover{border-color:var(--cyan);background:rgba(79,200,232,.06)}
.soc-row .gl{width:36px;height:36px;flex:none}
.soc-row span{display:grid;gap:0;min-width:0;line-height:1.45}
.soc-row small{font-size:var(--fs-2);font-weight:600;color:var(--soft)}
.soc-row b{font:600 16px/1.4 var(--f-data);letter-spacing:.03em;direction:ltr;text-align:right;unicode-bidi:isolate;overflow-wrap:anywhere}
.site{position:relative;justify-self:stretch;width:100%;margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0}
.site-box{position:relative;min-height:340px;overflow:hidden;background:#101214;border:1px solid var(--line-2);--bc:rgba(79,200,232,.85);--bs:16px}
.site-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.site-box::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(13,13,13,.32),transparent 30%,transparent 62%,rgba(13,13,13,.78))}
.site-x{position:absolute;inset:0;z-index:2;pointer-events:none}
.site-x i{position:absolute;background:rgba(79,200,232,.5)}
.site-x i:first-child{left:50%;top:0;bottom:0;width:1px}
.site-x i:last-child{top:50%;left:0;right:0;height:1px}
.site-scan{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.site-scan::before{content:'';position:absolute;inset:0;opacity:0;transform:translateY(-100%);background:linear-gradient(180deg,transparent 0 84%,rgba(79,200,232,.22) 94%,rgba(79,200,232,.95) 99.4%,rgba(214,244,255,1) 100%)}
html.js .site.in .site-scan::before{animation:scan 2.2s var(--ease-io) .5s 1 both}
.site-tag{position:absolute;z-index:4;inset-inline-start:14px;inset-block-end:12px;font-weight:600;font-size:15px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.85)}
.site .tb{grid-template-columns:minmax(0,1fr) auto}
.site .tb b.mono{white-space:nowrap}
.site-box.brk::before,.gm-box.brk::before{inset:0}
/* the hours line with the Friday chip (compact: the full signage is in #where) */
.hrs-mini{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0;color:var(--soft);font-size:var(--fs-3)}
.hrs-mini > .ic{width:22px;height:22px;color:var(--cyan)}
.hrs-mini .tm{color:var(--text);font-size:17px;font-family:var(--f-data)}
@media (max-width:640px){.site .tb{grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}.site .tb > div + div{border-inline-start:0;border-top:1px solid var(--line-2)}.site .tb b.mono{white-space:nowrap}}
html.js .site .site-x i:first-child{transform:scaleY(0);transform-origin:50% 0;transition:transform 1.2s var(--ease-io) .3s}
html.js .site .site-x i:last-child{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s var(--ease-io) .5s}
html.js .site.in .site-x i{transform:none}
@media (max-width:900px){.c-hero-grid{grid-template-columns:minmax(0,1fr)}.site-box{min-height:0;aspect-ratio:4/3}}
@media (max-width:520px){.soc-row{grid-template-columns:minmax(0,1fr)}.tap-t b{font-size:clamp(22px,7vw,28px)}}

/* route sheet: a to-scale survey drawing (real street geometry, heading-up: the driver's left is the sheet's left) */
.rt{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:center}
.rt-left{min-width:0}
.rt-sheet{container-type:inline-size;position:relative;width:100%;max-width:440px;aspect-ratio:400/716;margin-inline:auto;background:#0a0b0c;border:1px solid var(--line-2);overflow:hidden;direction:ltr}
.rt-sheet::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 1px,transparent 1px 13px) left top/100% 5px no-repeat,
    repeating-linear-gradient(0deg,rgba(255,255,255,.3) 0 1px,transparent 1px 13px) left top/5px 100% no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 1px,transparent 1px 13px) left bottom/100% 5px no-repeat,
    repeating-linear-gradient(0deg,rgba(255,255,255,.3) 0 1px,transparent 1px 13px) right top/5px 100% no-repeat}
.rt-svg{position:absolute;inset:0;width:100%;height:100%}
.rt-tags{position:absolute;inset:0;z-index:2;pointer-events:none}
.rt-tag{position:absolute;transform:translate(-100%,-50%);display:flex;align-items:center;gap:8px;padding:4px 11px 4px 9px;
  background:rgba(14,17,19,.96);border:1px solid rgba(79,200,232,.4);direction:rtl;white-space:nowrap;
  font-size:clamp(12.5px,3.3cqw,15px);line-height:1.5;transition:border-color .3s,background-color .3s}
.rt-tag.r{transform:translate(0,-50%)}
.rt-tag .ic{width:1.35em;height:1.35em;color:var(--cyan);stroke-width:1.9}
.rt-tag b{font-weight:600}
.rt-tag.hot{border-color:var(--cyan);background:rgba(18,46,56,.97)}
.rt-tag.g{width:31%;white-space:normal;display:grid;grid-template-columns:1fr;gap:0;padding:7px 10px;border-color:var(--cyan);background:rgba(18,46,56,.94)}
.rt-tag.g .ic{display:none}
.rt-tag .nw{white-space:nowrap}
.rt-tag.g b{color:#fff;font-size:1em;line-height:1.5}
.rt-tag.g em{font-style:normal;color:var(--dim);font-size:max(12px,.86em);line-height:1.5}
.rt-from{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;color:var(--dim);font-size:clamp(12px,2.9cqw,13.5px);font-weight:400;direction:rtl;white-space:nowrap}
.rt-from .ic{width:1.4em;height:1.4em;color:var(--cyan)}
.rt-sc,.rt-nl{position:absolute;z-index:2;font-size:clamp(12px,2.9cqw,13px);color:var(--dim);font-weight:400;line-height:1;transform:translateX(-50%);direction:rtl;pointer-events:none}
.rt-sc{left:16.3%;top:91.8%}
.rt-nl{left:24.5%;top:6.4%;transform:translate(-50%,-50%)}   /* beside the compass, clear of the tags below it */
.rt-attr{position:absolute;z-index:4;right:10px;bottom:6px;font-size:12px;line-height:1.2;color:var(--mute);direction:rtl;text-decoration:underline;text-underline-offset:2px}
.rt-attr:hover{color:var(--cyan)}
.tb-rt{grid-template-columns:1fr 1.7fr 1.3fr;max-width:440px;margin-inline:auto}
.rt-base{fill:none;stroke:rgba(79,200,232,.3);stroke-width:2.4;stroke-dasharray:3 7;stroke-linecap:round}
.rt-path{fill:none;stroke:var(--cyan);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.rt-node circle.c{fill:#0a0b0c;stroke:var(--cyan);stroke-width:2.2}
.rt-node text{fill:var(--text);font:600 14px var(--f-data);text-anchor:middle;dominant-baseline:central}
.rt-node.end circle.c{fill:var(--cyan)}
.rt-node.end text{fill:#06181e;font-weight:700}
.rt-node .ping{fill:none;stroke:var(--cyan);stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0}
.rt-lead{fill:none;stroke:rgba(79,200,232,.55);stroke-width:1}
.rt-cur .a{fill:none;stroke:#fff;stroke-width:2}
.rt-cur .b{stroke:var(--cyan);stroke-width:1.5}
.rt-compass .ring{fill:rgba(10,11,12,.92);stroke:rgba(255,255,255,.22);stroke-width:1}
.rt-compass .tk path{stroke:rgba(255,255,255,.42);stroke-width:1}
.rt-compass .nd{fill:var(--cyan)}
.rt-compass .hub{fill:#0a0b0c;stroke:var(--cyan);stroke-width:1}
.rt-scale path{stroke:var(--dim);stroke-width:1.4;fill:none}
.rt-callout circle:first-child{fill:none;stroke:rgba(79,200,232,.55);stroke-width:1.2;stroke-dasharray:5 4}
.rt-callout .lb circle{fill:#0a0b0c;stroke:var(--cyan);stroke-width:1.2}
.rt-callout .lb text{fill:var(--cyan);font:600 14px var(--f-data);text-anchor:middle;dominant-baseline:central}
.rt-cur{display:none}
.rt.driving .rt-cur{display:block}
.rt-tag.now,.rt-tag.hot,.rt-tag.pin{border-color:var(--cyan);background:rgba(18,46,56,.97)}
.rt-node{transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease)}
.rt-node.now,.rt-node.pin{transform:scale(1.22)}
.rt-lead.now{stroke:var(--cyan);stroke-width:1.6}
.rt-callout{transition:opacity .4s}
.rt.done .rt-node.end .ping{animation:ping 2.2s var(--ease) 2 both}
@keyframes ping{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.8)}}
.rt-steps{display:grid;gap:0}
.rt-steps li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;padding:15px 6px;border-bottom:1px solid var(--line);font-size:var(--fs-5);font-weight:400;line-height:1.7;position:relative;transition:background-color .4s var(--ease)}
.rt-steps li:first-child{border-top:1px solid var(--line-c)}
.rt-steps .n{display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--cyan);border-radius:50%;color:var(--cyan);font:600 15px/1 var(--f-data)}
.rt-steps li:last-child .n{background:var(--cyan);color:#06181e}
.rt-steps .tg{font-size:12.5px;color:var(--dim);font-weight:400;border:1px solid var(--line-2);padding:0 10px;white-space:nowrap}
.rt-steps .nw{white-space:nowrap}
.rt-steps li.hot,.rt-steps li.now,.rt-steps li.pin{background:rgba(79,200,232,.08)}
.rt-steps li{cursor:pointer}
.rt-steps li::before{content:'';position:absolute;inset-block:0;inset-inline-start:-2px;width:3px;background:var(--cyan);transform:scaleY(0);transition:transform .45s var(--ease)}
.rt-steps li.now::before,.rt-steps li.pin::before{transform:scaleY(1)}
.rt-steps li.now .n,.rt-steps li.pin .n{background:var(--cyan);color:#06181e}
.rt-right{display:grid;gap:28px;align-content:start;min-width:0}
/* DETAIL A: the same geometry, larger, names in clear space */
.ins{margin:0;min-width:0}
.ins-box{position:relative;container-type:inline-size;aspect-ratio:2/1;overflow:hidden;background:#0a0b0c;border:1px solid var(--line-2);direction:ltr;--bc:rgba(79,200,232,.75);--bs:14px}
.ins-svg{position:absolute;inset:0;width:100%;height:100%}
.ins-base{fill:none;stroke:rgba(79,200,232,.3);stroke-width:1.1;stroke-dasharray:1.4 2.6;stroke-linecap:round}
.ins-route{fill:none;stroke:var(--cyan);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(79,200,232,.7))}
.ins-leads path{fill:none;stroke:rgba(79,200,232,.6);stroke-width:1;vector-effect:non-scaling-stroke}
.ins-ov{position:absolute;inset:0;z-index:2;pointer-events:none}
.ins-node{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--cyan);background:#0a0b0c;color:var(--text);font:600 13px/1 var(--f-data)}
.ins-node.end{background:var(--cyan);color:#06181e;font-weight:700}
.ins .rt-tag{font-size:clamp(12px,2.35cqw,15px)}
.ins .rt-tag.g{width:26%}
.ins .rt-tag{max-width:none}
.ins-a{position:absolute;z-index:3;inset-block-start:10px;inset-inline-start:10px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#0a0b0c;border:1.2px solid var(--cyan);color:var(--cyan);font:600 12px/1 var(--f-data)}
.tb-ins{grid-template-columns:1.6fr 1fr}
/* phones: same 2:1 frame (the overlay positions are exact), tags tucked inside it: the shop tag hangs from the left edge, the right-hand tag from the right edge */
@media (max-width:640px){.ins-box{aspect-ratio:2/1}.ins .rt-tag{padding:3px 8px 3px 7px;gap:5px;font-size:12px}.ins .rt-tag .ic{display:none}
  .ins .rt-tag.g{left:2%!important;transform:translate(0,-50%);width:auto;max-width:37%}.ins .rt-tag.g em{display:none}
  .ins .rt-tag.r{left:auto!important;right:1.5%;transform:translate(0,-50%)}.ins-node{width:22px;height:22px;font-size:12px}}
.rt-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px}
.rt-replay{display:none;align-items:center;gap:8px;color:var(--cyan);font-weight:600;font-size:15px;padding:10px 14px;border:1px solid rgba(79,200,232,.5);border-radius:3px;min-height:44px;transition:background-color .25s,border-color .25s}
.rt-replay:hover{background:rgba(79,200,232,.09);border-color:var(--cyan);text-decoration:none}
.rt-replay .ic{width:18px;height:18px}
html.js .rt-replay{display:inline-flex}
/* steerable route: a slider that drives the car along the road (the drive is an overlay, the drawing is always complete) */
.rt-scrub{display:none;flex:1 1 260px;min-width:0;gap:2px;direction:rtl}
html.js .rt-scrub{display:grid}
.rt-scrub label{font-size:var(--fs-2);font-weight:600;color:var(--soft)}
.rt-scrub input{-webkit-appearance:none;appearance:none;width:100%;height:32px;margin:0;background:transparent;cursor:ew-resize;direction:rtl}
.rt-scrub input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,rgba(79,200,232,.25),var(--cyan))}
.rt-scrub input::-moz-range-track{height:2px;background:linear-gradient(90deg,rgba(79,200,232,.25),var(--cyan))}
.rt-scrub input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:#0a0b0c;border:2px solid var(--cyan);box-shadow:0 0 0 4px rgba(79,200,232,.16)}
.rt-scrub input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#0a0b0c;border:2px solid var(--cyan);box-shadow:0 0 0 4px rgba(79,200,232,.16)}
.rt-scrub input:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:2px}
.rt-scrub-t{position:relative;height:20px;margin-inline:11px;direction:rtl}
.rt-scrub-t i{position:absolute;top:0;right:calc(var(--p) * 100%);transform:translateX(50%);font:600 12px/1 var(--f-data);font-style:normal;color:var(--dim)}
.rt-scrub-t i.now{color:var(--cyan)}
@media (max-width:900px){.rt{grid-template-columns:minmax(0,1fr)}}
/* the live Google map, in the same frame language as the drawn map. Before its tiles arrive (or if the frame is blocked) it is a finished
   survey sheet: graph, range rings, crosshair, pin, the place name and the coordinates. The live frame fades in over it once it has loaded. */
.gm{margin:clamp(40px,5vw,72px) 0 0}
.gm-box{position:relative;width:100%;height:clamp(340px,32vw,460px);overflow:hidden;background:#0a0b0c;border:1px solid var(--line-2);--bc:rgba(79,200,232,.85);--bs:16px;isolation:isolate}
.gm-box iframe{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;background:#0a0b0c;filter:invert(.92) hue-rotate(180deg) saturate(.7) brightness(.9) contrast(.95);transition:opacity .9s var(--ease)}
html.js .gm-box:not(.is-loaded) iframe{opacity:0}
.gm-fb{position:absolute;inset:0;z-index:0;
  background:
    repeating-radial-gradient(circle at 50% 50%,transparent 0 63px,rgba(79,200,232,.13) 63px 64px),
    radial-gradient(40% 55% at 50% 50%,rgba(79,200,232,.13),transparent 72%),
    linear-gradient(rgba(79,200,232,.07) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(79,200,232,.07) 1px,transparent 1px) 0 0/48px 48px}
.gm-fb::before,.gm-fb::after{content:'';position:absolute;background:rgba(79,200,232,.34)}
.gm-fb::before{left:50%;top:0;bottom:0;width:1px}
.gm-fb::after{top:50%;left:0;right:0;height:1px}
.gm-fb i{position:absolute;z-index:1;left:50%;top:50%;width:28px;height:28px;transform:translate(-50%,-50%);border:2px solid var(--cyan);border-radius:50%;background:#0a0b0c;box-shadow:0 0 0 9px rgba(79,200,232,.14),0 0 30px rgba(79,200,232,.4)}
.gm-fb i::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--cyan)}
.gm-fb b{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(79,200,232,.8),transparent);opacity:.7;animation:gmscan 3.6s linear infinite}
.gm-box.is-loaded .gm-fb b,.gm.is-paused .gm-fb b{animation-play-state:paused;opacity:0}
@keyframes gmscan{from{transform:translateY(0)}to{transform:translateY(460px)}}
/* a survey overlay above the live frame: a hairline graph and a target ring around the pin. The frame is never a bare grey slab, before or after its tiles load. */
.gm-ov{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(rgba(79,200,232,.06) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(79,200,232,.06) 1px,transparent 1px) 0 0/48px 48px}
.gm-ov::after{content:'';position:absolute;left:50%;top:50%;width:72px;height:72px;transform:translate(-50%,-50%);border:1.5px dashed rgba(79,200,232,.75);border-radius:50%}
.gm-chip{position:absolute;z-index:4;inset-block-start:14px;inset-inline-start:14px;display:flex;align-items:center;gap:12px;padding:9px 16px;background:rgba(10,11,12,.94);border:1px solid var(--line-c);pointer-events:none;color:var(--text);font-size:var(--fs-3);max-width:calc(100% - 28px)}
.gm-chip .ic{width:22px;height:22px;color:var(--cyan)}
.gm-chip b{font-weight:600}
.gm-chip .mono{color:var(--cyan);font-size:14px;font-weight:600}
.gm-cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:14px 18px;border:1px solid var(--line-2);border-top:0;background:rgba(255,255,255,.015)}
.gm-src{display:inline-flex;align-items:center;gap:10px;color:var(--soft);font-weight:400;font-size:var(--fs-3)}
.gm-src .ic{color:var(--cyan);width:20px;height:20px}
.gm-cap .btn{min-height:46px}
@media (max-width:640px){.gm-chip .mono{display:none}.gm-box{height:340px}.gm-cap{flex-direction:column;align-items:stretch}.gm-cap .btn{width:100%}}

/* ---------- 7. shared page kit: every inner page is built from these (see _kit/COMPONENTS.md for the HTML) ---------- */
/* 7a. page banner .pb: the first screen of every inner page (folio, h1, lead, place line, hours line). Never fewer than these. */
.pb{position:relative;isolation:isolate;overflow:clip;padding:calc(var(--hdr) + 34px) 0 clamp(28px,4vw,52px)}
.pb-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:radial-gradient(40% 70% at 22% 42%,rgba(79,200,232,.13),transparent 72%),
    linear-gradient(rgba(79,200,232,.05) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,rgba(79,200,232,.05) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
/* the instrument behind the banner: dial rings at the far side, and the page folio as a giant outlined numeral (data-n on the section) */
.pb-bg::before{content:'';position:absolute;inset:-10% 40% -10% -6%;
  background:repeating-radial-gradient(circle at 46% 52%,transparent 0 71px,rgba(79,200,232,.14) 71px 72px);
  -webkit-mask-image:radial-gradient(60% 70% at 46% 52%,#000,transparent 78%);mask-image:radial-gradient(60% 70% at 46% 52%,#000,transparent 78%)}
.pb-bg::after{content:attr(data-n);position:absolute;left:max(20px,calc(50% - 600px));top:50%;transform:translateY(-46%);font:700 clamp(150px,24vw,360px)/.8 var(--f-data);letter-spacing:-.04em;direction:ltr;
  color:transparent;-webkit-text-stroke:1px rgba(79,200,232,.22);white-space:nowrap}
@media (max-width:640px){.pb-bg::after{font-size:150px;left:auto;right:8px;top:36%;opacity:.7}}
.pb-in{display:grid;gap:clamp(16px,2vw,24px);justify-items:start}
.pb h1{font-size:var(--fs-9);line-height:1.28;font-weight:700;text-wrap:balance;max-width:22ch}
.pb .lead{margin:0;max-width:56ch;font-size:var(--fs-5);line-height:1.9}
.pb-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px;width:100%;margin-top:clamp(6px,1.2vw,14px);padding-top:18px;border-top:1px solid var(--line)}
.folio,.eq-idx{display:flex;align-items:center;gap:14px}
.folio .n,.eq-idx .n{font:600 13px/1 var(--f-data);letter-spacing:.16em;color:var(--cyan);direction:ltr}
.folio .dl,.eq-idx .dl{width:48px;color:var(--line-c)}
.folio .t,.eq-idx .t{color:var(--cyan);font-weight:600;font-size:var(--fs-4)}

/* 7b. place line + hours line: on the first screen of every page */
.place{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:var(--fs-3);font-weight:600;color:var(--text);line-height:1.6}
.place > .ic{width:22px;height:22px;color:var(--cyan)}
.place .mono{font-size:14px;color:var(--dim);font-weight:400;letter-spacing:.08em}

/* 7c. feature grid .feat: hairline cells, each with an icon plate, a title and a short text (about, why-us, six ways, machine facts) */
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.feat-i{position:relative;display:grid;gap:12px;align-content:start;padding:clamp(22px,2.4vw,34px);background:var(--bg);min-width:0;transition:background-color .3s}
@media (hover:hover){a.feat-i:hover{background:var(--card)}}
.feat-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.feat-ic{position:relative;display:grid;place-items:center;width:54px;height:54px;color:var(--cyan);border:1px solid var(--line-c);--bc:rgba(79,200,232,.9);--bs:8px}
.feat-ic .ic{width:28px;height:28px;stroke-width:1.5}
.feat-n{font:600 13px/1 var(--f-data);letter-spacing:.16em;color:var(--dim);direction:ltr}
.feat-i h3{font-size:var(--fs-6);font-weight:700;line-height:1.35}
.feat-i p{color:var(--soft);font-size:var(--fs-3);line-height:1.9}
.feat.feat-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.feat.feat-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.feat.feat-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.feat.feat-3,.feat.feat-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.feat.feat-2,.feat.feat-3,.feat.feat-4{grid-template-columns:minmax(0,1fr)}}

/* 7d. numbered steps .steps (a plain ordered list: how it works, what to bring) */
.steps{display:grid;border-top:1px solid var(--line-c)}
.steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start;padding:18px 4px;border-bottom:1px solid var(--line)}
.steps .n{display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--cyan);border-radius:50%;color:var(--cyan);font:600 16px/1 var(--f-data)}
.steps li:last-child .n{background:var(--cyan);color:#06181e}
.steps h3{font-size:var(--fs-5);font-weight:600;line-height:1.5}
.steps p{color:var(--soft);font-size:var(--fs-3);line-height:1.85}

/* 7e. service rows .svc: native <details>, works with no JS. Icon plate, title, one line, the machine tag; the long text opens below. */
.svc-list{display:grid;border-top:1px solid var(--line-c)}
.svc{border-bottom:1px solid var(--line);background:var(--bg);transition:background-color .3s}
.svc:hover,.svc[open]{background:var(--card)}
.svc summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(14px,2vw,28px);padding:clamp(16px,2vw,26px) clamp(10px,1.6vw,24px);cursor:pointer;min-height:72px;user-select:none}
.svc summary::-webkit-details-marker{display:none}
.svc summary:focus-visible{outline-offset:-3px}
.svc-ic{position:relative;display:grid;place-items:center;width:56px;height:56px;color:var(--cyan);border:1px solid var(--line-c);--bc:rgba(79,200,232,.9);--bs:8px}
.svc-ic .ic{width:30px;height:30px;stroke-width:1.5}
.svc-t{display:grid;gap:4px;min-width:0}
.svc-t b{font-size:var(--fs-6);font-weight:700;line-height:1.4}
.svc-t em{font-style:normal;color:var(--soft);font-size:var(--fs-3);line-height:1.75}
.svc-tag{justify-self:start;margin-top:4px;padding:1px 10px;border:1px solid var(--line-c);color:var(--cyan);font-size:13px;font-weight:600;letter-spacing:.12em;font-style:normal;direction:ltr;unicode-bidi:isolate}
.svc-x{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-2);border-radius:50%;color:var(--cyan);transition:transform .45s var(--ease),background-color .25s,border-color .25s}
.svc-x .ic{width:20px;height:20px}
.svc:hover .svc-x{border-color:var(--cyan)}
.svc[open] .svc-x{transform:rotate(180deg);background:rgba(79,200,232,.1);border-color:var(--cyan)}
.svc-b{padding:0 clamp(10px,1.6vw,24px) clamp(22px,2.6vw,32px);margin-inline-start:calc(56px + clamp(14px,2vw,28px))}
.svc-b p{max-width:64ch;color:#e6eaec;font-size:var(--fs-4);line-height:1.95}
.svc[open] .svc-b{animation:bodyIn .6s var(--ease) both}
@media (max-width:640px){.svc-ic{width:46px;height:46px}.svc-ic .ic{width:24px;height:24px}.svc-b{margin-inline-start:0}.svc summary{gap:12px}.svc-t b{font-size:20px}}

/* 7f. package cards .pkg (no prices: the button asks for the price on WhatsApp with the package's own pre-filled message) */
.pkg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,30px);align-items:stretch;padding-top:14px}
.pkg{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:18px;padding:clamp(24px,2.6vw,36px);background:var(--card);border:1px solid var(--line-2);--bc:rgba(79,200,232,.55);--bs:14px}
.pkg.is-top{border-color:var(--cyan);background:linear-gradient(180deg,rgba(79,200,232,.1),var(--card) 46%);--bc:rgba(79,200,232,1)}
.pkg-badge{position:absolute;inset-block-start:-15px;inset-inline-start:24px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:3px 14px;background:var(--cyan);color:#06181e;font-weight:700;font-size:var(--fs-2);line-height:1.8}
.pkg-badge .ic{width:16px;height:16px;stroke-width:2.4}
.pkg-head{display:grid;gap:8px}
.pkg-n{font:600 13px/1 var(--f-data);letter-spacing:.16em;color:var(--dim);direction:ltr}
.pkg h3{font-size:var(--fs-7);font-weight:700;line-height:1.25}
.pkg-d{color:var(--soft);font-size:var(--fs-4);line-height:1.8}
.pkg-l{display:grid;gap:13px;align-content:start;padding-top:18px;border-top:1px solid var(--line-2)}
.pkg-l li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-4);line-height:1.7;color:#e6eaec}
.pkg-l .ic{width:22px;height:22px;color:var(--cyan);stroke-width:2.2;margin-top:3px;flex:none}
.pkg .btn{width:100%}
@media (max-width:1000px){.pkg-grid{grid-template-columns:minmax(0,1fr);gap:26px}}
.note{display:flex;gap:16px;align-items:flex-start;padding:clamp(16px,2vw,24px);border:1px solid var(--line-c);background:rgba(79,200,232,.05);color:#e6eaec;font-size:var(--fs-4);line-height:1.9}
.note > .ic{width:26px;height:26px;color:var(--cyan);flex:none;margin-top:2px}

/* 7g. gallery prints .gg: the photographs at (never above) their real size on a shared baseline, like a contact sheet */
.gg{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(16px,2.2vw,32px)}
.gg-i{position:relative;display:block;flex:0 1 var(--w,380px);max-width:min(100%,var(--w,380px));aspect-ratio:var(--ar,1);background:#101214;overflow:hidden;--bc:rgba(79,200,232,.75);--bs:14px}
.gg-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gg-i:hover img{transform:scale(1.035)}
.gg-i .gal-n{inset-inline-start:14px;inset-block-start:12px}
.gg-i::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(13,13,13,.4),transparent 26%,transparent 76%,rgba(13,13,13,.3))}

/* 7h. long text .doc (privacy policy): one measured column, quiet headings with a cyan tab */
.doc{max-width:76ch;margin-inline:auto}
.doc > * + *{margin-top:1.1em}
.doc h2{font-size:var(--fs-6);font-weight:700;line-height:1.4;margin-top:2.2em;padding-top:1em;border-top:1px solid var(--line);position:relative}
.doc h2::before{content:'';position:absolute;top:-1px;inset-inline-start:0;width:48px;height:3px;background:var(--cyan)}
.doc p,.doc li{font-size:var(--fs-4);line-height:2;color:#dde1e4}
.doc ul{display:grid;gap:8px}
.doc ul li{position:relative;padding-inline-start:26px}
.doc ul li::before{content:'';position:absolute;inset-inline-start:2px;top:.95em;width:8px;height:8px;background:var(--cyan)}
.doc a{color:var(--cyan);text-decoration:underline;text-underline-offset:4px}
.doc .meta{color:var(--dim);font-size:var(--fs-2)}
.doc bdi,.doc .mono{font-family:var(--f-data)}

/* 7i. split: text beside a framed photograph (about intro, machine detail). Photographs are framed as plates, never stretched. */
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center}
.split.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split-copy{display:grid;gap:18px;justify-items:start;min-width:0}
.split-copy p{color:#e0e4e6;font-size:var(--fs-4);line-height:1.95;max-width:56ch}
.split-media{position:relative;min-width:0}
.split-media .plate{aspect-ratio:1/1.05;width:100%}
@media (max-width:900px){.split,.split.flip{grid-template-columns:minmax(0,1fr)}.split-media{order:-1}}
/* the equipment page: long descriptions (bmrs, engine flush, walnut valve) sit in the same slot as the one-liner, one step smaller */
.eq-line.long{font-size:var(--fs-5);line-height:1.95;font-weight:400;color:#e6eaec;max-width:34em}
.eq-copy .place{margin-top:4px}

/* ---------- 8. reveal ---------- */
html.js .rv{opacity:0;transform:translate3d(0,16px,0)}
html.js .rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
html.js .dl.rv{opacity:1;transform:scaleX(0)}
html.js .dl.rv.in{transform:none;transition:transform 1.1s var(--ease) var(--d,0s)}
html.rv-all .rv{opacity:1!important;transform:none!important}
html.tab-hidden *,html.tab-hidden *::before,html.tab-hidden *::after{animation-play-state:paused!important}
.hero.is-paused .hg-glow{animation-play-state:paused}

/* ---------- 9. reduced motion: a still, complete page ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
  html.js .rv,html.js .dl.rv{opacity:1;transform:none}
  html.js .hero .rv,html.js .hero .w{opacity:1;transform:none}
  html.js .dial .dial-cv,html.js .dial .dial-brand,html.js .dial .dial-ro{opacity:1}
  html.js .dial-dim path{stroke-dashoffset:0;opacity:.42}
  .hg-glow{animation:none}
  .tape-track{animation:none;width:100%;justify-content:center;background:none}
  .tape{height:auto;padding:16px 0}
  .tape::before,.tape::after{display:none}
  .tape-set + .tape-set{display:none}
  .tape-set{flex-wrap:wrap;justify-content:center}
  .tape-set li{width:auto;padding:6px 22px}
  .tape-set li::before{display:none}
  html.js .rd-g .seg{opacity:1}
  html.js .rd-g .ring{stroke-dashoffset:0}
  html.js .rd-g .lvl{transform:none}
  html.js .hs .hs-band{transform:none}
  .rt.done .rt-node.end .ping{animation:none}
  .eq-scan{display:none}
  .rt-replay{display:none!important}
  .gm-fb b{display:none}
  .bench.is-tabs .stn.is-active .plate,.bench.is-tabs .stn.is-active .stn-body>*{animation:none}
}

/* =====================================================================
   SITE-WIDE FIXES (links / structure pass). Appended last on purpose: same specificity, later wins.
   ===================================================================== */
/* touch targets of at least 44px in the shared chrome; the text keeps its size, only the tappable box grows */
.brand{display:flex;align-items:center;min-height:44px}
.nav a{display:inline-flex;align-items:center;min-height:44px}
.hdr-tel{min-height:44px}
.ftr-tel a{display:inline-flex;align-items:center;min-height:44px}
.ftr-col a{display:flex;align-items:center;min-height:44px;padding:0;text-wrap:balance}
.ftr-bot a{display:inline-block;padding-block:12px;margin-block:-12px;white-space:nowrap}
.fact-tel a{display:inline-flex;align-items:center;min-height:44px}
.crumbs a{padding-block:10px;margin-block:-10px}

/* the strip of seven machines on tablets and phones: every tab measures the same, so number and name sit on one line */
@media (max-width:900px){.rail-tabs .plate.mini{width:92px;max-width:100%;height:84px;aspect-ratio:auto;overflow:hidden}}

/* the outlined ghost numeral behind each machine (z-index:-1) needs its parent to be its own stacking context, or the section background paints over it */
.bench.is-tabs .stn-body{isolation:isolate}

/* three cards on two columns: the odd last card takes the whole row instead of leaving an empty tile */
@media (min-width:621px) and (max-width:1000px){.feat.feat-3>.feat-i:last-child:nth-child(odd){grid-column:1/-1}}

/* previous / next machine: two long names side by side overflow a 320px phone, so they stack */
@media (max-width:400px){
  .eq-pn{grid-template-columns:minmax(0,1fr)}
  .eq-pn .prev{padding-inline-end:0}
  .eq-pn .next{padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--line)}
}

/* =====================================================================
   CONSISTENCY / PERFORMANCE PASS (site-wide). Appended last on purpose.
   ===================================================================== */
/* the scrim behind the bar (.hdr::before, a positioned pseudo-element) painted OVER the unpositioned logo, phone icon and «القائمة» label,
   so at the top of every page they read at about half brightness and only lit up once the bar condensed. The scrim now sits behind the content
   (the bar is its own stacking context: z-index:200 + fixed). It stays a child of the bar, so the index panel keeps the bar as its containing block. */
.hdr::before{z-index:-1}

/* =====================================================================
   ROOT-CAUSE FIXES from the links / structure pass (2026-09-30). Appended last on purpose.
   ===================================================================== */
/* header phone: the number never wraps. 1100-1199 px is too narrow for the nav plus the number, so there only the glyph link shows
   (it keeps its aria-label «اتصال 6999 9344» and a 44 px box); from 1200 px the number shows on one line */
.hdr-tel{flex:none}
.hdr-tel span{white-space:nowrap}
@media (min-width:1100px) and (max-width:1199px){.hdr-tel span{display:none}.hdr-tel{min-width:44px;justify-content:center;padding:0}}

/* .feat: the hairlines belong to the cells, not to a grey slab behind them. While a cell waits for its scroll reveal (opacity 0) the slab used to
   show through as a grey block; now an unrevealed cell is simply empty. Every cell draws its end and bottom line, the grid draws the top and start. */
.feat{gap:0;background:none;border:0;border-top:1px solid var(--line-2);border-inline-start:1px solid var(--line-2)}
.feat-i{border-bottom:1px solid var(--line-2);border-inline-end:1px solid var(--line-2)}

/* footer: the copyright line and the privacy link are two flex items separated by a gap (no separator dot to strand at the end or the start of a wrapped line); both numbers say what they are */
.ftr-legal{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
.ftr-col a{line-height:1.4}
.ftr-tel a{display:grid;align-content:center;justify-items:start;gap:0;direction:rtl;unicode-bidi:normal;line-height:1.4;padding-block:4px}
.ftr-tel small{font-size:13px;color:var(--dim);letter-spacing:0}
.ftr-tel .mono{font-size:16px;letter-spacing:.05em;color:#e0e4e6;transition:color .2s}
.ftr-tel a:hover .mono{color:var(--cyan)}

/* machine facts bar with two labelled numbers (.facts.facts-t, used by the machine pages; dpf, texa and liqui-moly carry the same rules under their own page class).
   From 900 px up the hero corner already gives the place and the hours, so the bar carries only what is not there: «واتساب · اتصال» and «هاتف الكراج».
   One column at 900 px and below: the hero above already says where we are, so the place cell steps aside. */
.facts-t .fact-tel{gap:0 22px}
@media (max-width:900px){
  .facts-t .fact:first-child{display:none}
  .facts-t .fact:nth-child(2){border-top:0}
}
@media (min-width:900px){
  .facts-t .fact:nth-child(-n+2){display:none}
  .facts-t .fact:nth-child(3){border-inline-start:0;border-top:0}
}
@media (min-width:901px){.facts-t{grid-template-columns:repeat(2,minmax(0,1fr))}}
.facts-t .fact-t .fact-b b{font-size:var(--fs-3);font-weight:600;color:var(--soft)}
.facts-t .fact-t .fact-tel a{font-size:var(--fs-5);letter-spacing:.03em}

/* ---------- Noto Kufi Arabic tuning (2026-10-01): Kufi is wider and taller than the old face, so the scale steps down a little, headings are
   semibold (government signage, not poster-bold), and on a wide screen headings and short leads stay on ONE line (owner request). ---------- */
:root{--fs-4:16.5px;--fs-5:clamp(17px,1.35vw,20px);--fs-6:clamp(20px,1.8vw,24px);--fs-7:clamp(24px,2.5vw,32px);--fs-8:clamp(28px,3.2vw,42px);--fs-9:clamp(32px,4vw,56px)}
h1,h2,h3,.sh-h,.pb h1{font-weight:600}
.btn{font-size:15.5px;padding-inline:22px}
.lead{max-width:50ch}
@media (min-width:1100px){
  .pb h1,.sh-h,.pb .lead,.sh-sub{white-space:nowrap;text-wrap:nowrap;max-width:none}
}

/* ---------- more customer voices (home) ---------- */
.vq-4,.vq-5,.vq-6{grid-column:span 4}
.vq-4 blockquote p,.vq-5 blockquote p,.vq-6 blockquote p{font-size:var(--fs-6);line-height:1.85}
.vq-6 blockquote p{text-align:left}
.v-more{grid-column:1/-1;display:flex;margin-top:6px}
@media (max-width:900px){.vq-4,.vq-5,.vq-6{grid-column:1/-1}}

/* ---------- request form (contact): builds a ready WhatsApp message, stores nothing ---------- */
.rq{display:grid;gap:24px;padding:clamp(22px,3vw,38px)}
.rq-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.rq-f{display:grid;gap:8px;align-content:start;font-size:var(--fs-3);font-weight:600;color:var(--soft)}
.rq-f small{font-weight:400;color:var(--dim)}
.rq-svc,.rq-note{grid-column:span 6}
.rq-make,.rq-model,.rq-year{grid-column:span 2}
.rq-f input,.rq-f select,.rq-f textarea{width:100%;min-height:52px;padding:12px 16px;background:#0f1214;color:var(--text);border:1px solid var(--line-2);border-radius:3px;font:400 var(--fs-4)/1.5 var(--f)}
.rq-f textarea{min-height:104px;resize:vertical}
.rq-f select{appearance:none;-webkit-appearance:none;padding-left:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FC8E8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center;background-size:20px}
.rq-f input::placeholder,.rq-f textarea::placeholder{color:var(--mute)}
.rq-f input:focus,.rq-f select:focus,.rq-f textarea:focus{outline:2px solid var(--cyan);outline-offset:2px;border-color:var(--cyan)}
.rq-f [aria-invalid="true"]{border-color:#ff8f86}
.rq-err{margin:0;color:#ffb4ae;font-weight:600;font-size:var(--fs-3)}
.rq-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.rq-act .note{margin:0;flex:1 1 280px}
@media (max-width:700px){.rq-grid{grid-template-columns:minmax(0,1fr)}.rq-svc,.rq-note,.rq-make,.rq-model,.rq-year{grid-column:auto}.rq-act .btn{width:100%}}

/* ---------- the language switch in the top bar: every page, every width (the site opens in English; one tap gives the Arabic page, and the Arabic page has the same tap back) ---------- */
.hdr-lang{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:38px;padding:0 14px;border:1px solid rgba(79,200,232,.58);border-radius:3px;color:#e8eef1;font-weight:600;font-size:14.5px;line-height:1.25;letter-spacing:0;white-space:nowrap;transition:color .2s,border-color .2s,background-color .2s}
.hdr-lang:hover,.hdr-lang:focus-visible{color:#06181e;background:var(--cyan);border-color:var(--cyan)}
@media (min-width:1100px) and (max-width:1229px){.hdr-tel{display:none}}   /* room for the switch between the menu links and the Book button: the phone stays in the menu panel and the footer */
@media (min-width:1230px) and (max-width:1339px){.hdr-tel span{display:none}}   /* icon only */
@media (min-width:1100px) and (max-width:1199px){.hdr-in{gap:12px}.nav{margin-inline-start:0}.nav a{padding:8px 8px;font-size:14.5px}.hdr-act{gap:8px}}
@media (max-width:560px){.hdr-lang{min-height:36px;padding:0 10px;font-size:13.5px}}
@media (max-width:390px){.hdr-in{gap:8px}.hdr-act{gap:6px}.brand img{height:28px}.hdr-lang{padding:0 8px;font-size:13px}.hdr .btn-wa .gl{width:34px;height:34px}.hdr .btn-wa{width:38px}.idx summary{padding:0 10px;gap:8px}}
@media (max-width:339px){.idx summary>span:not(.idx-ico){display:none}}   /* the smallest phones: the menu button keeps its icon and its aria-label, the word «Menu» steps aside */

/* ---------- the reviews button on the home page is longer than a phone screen: it may wrap (it made the page scroll sideways at 320-414 px) ---------- */
@media (max-width:560px){.v-more .btn{white-space:normal;text-align:center;line-height:1.25;min-height:48px}}