/* JAC Autos: one stylesheet for every page. Mobile first (360px), then wider screens. */

/* ---------- fonts (self-hosted) ---------- */
@font-face{font-family:"Archivo Wide";src:url(/assets/fonts/archivo-115-800.woff2?v=028d56f9) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/ibm-plex-sans.woff2?v=d8b4e62d) format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-500.woff2?v=d32f0e07) format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ---------- tokens ----------
   Two themes. Dark is the default (the world of the hero video: graphite, warm light, brass).
   Light is the visitor's choice, saved by the switch in the header (html[data-theme=light]). */
:root{
  --canvas:#111417; --panel:#191D21; --sunken:#0D1012; --graphite:#0B0E10; --graphite-2:#08090B;
  --line:#2B3135; --line-strong:#6B7478; --blueprint:#5E7384;
  --text-primary:#ECEAE4; --text-secondary:#B9BEBA; --text-label:#9AA3A1; --text-on-dark:#ECEAE4; --text-on-dark-2:#B9BEBA;
  --accent:#33C27F; --accent-hover:#5AD898; --accent-muted:rgba(0,168,96,.16); --on-accent:#06301A;
  --gold:#D8B46E; --glow:rgba(214,168,92,.14); --glow-2:rgba(94,115,132,.12);
  --hdr-bg:rgba(13,16,18,.84); --hdr-line:rgba(255,255,255,.08); --bar-bg:rgba(13,16,18,.92);
  --field:#0F1215; --placeholder:#8A9295; --btn-line-bg:rgba(255,255,255,.03); --map-bg:#161A1D;
  --shadow:rgba(0,0,0,.55);
  --logo-gray:#A9ADAD; --logo-green:#00A860; --logo-lime:#54D80C; --logo-red:#E3362C; --logo-pink:#F47A72;
  --focus:#E3362C;
  --steel-1:#F3F5F4; --steel-2:#C6CDCE; --steel-3:#9AA3A6; --steel-4:#6C7578; --rubber:#24282B; --rubber-2:#33393C;
  --brass:#C79C45; --friction:#7A5A43;
  --whatsapp:#25D366; --whatsapp-ink:#06301A;
  --ease-out:cubic-bezier(.22,.8,.24,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --f-display:"Archivo Wide","Arial Black",Arial,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --hdr:64px; --bar:68px; --wrap:1200px;
  color-scheme:dark;
}
:root[data-theme=light]{
  --canvas:#ECEEEB; --panel:#F7F8F5; --sunken:#E3E7E3; --graphite:#1B2023; --graphite-2:#14181A;
  --line:#C5CBC6; --line-strong:#7D8782; --blueprint:#7C91A1;
  --text-primary:#1B2023; --text-secondary:#475055; --text-label:#5E676B; --text-on-dark:#ECEEEB; --text-on-dark-2:#AEB6B1;
  --accent:#0A7444; --accent-hover:#075C36; --accent-muted:rgba(0,168,96,.14); --on-accent:#fff;
  --gold:#7A5A1E; --glow:rgba(199,156,69,.16); --glow-2:rgba(124,145,161,.14);
  --hdr-bg:rgba(236,238,235,.92); --hdr-line:rgba(197,203,198,.85); --bar-bg:rgba(236,238,235,.95);
  --field:#FBFCFA; --placeholder:#6F777B; --btn-line-bg:rgba(247,248,245,.7); --map-bg:#E6EAE6;
  --shadow:rgba(27,32,35,.5);
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);
  font:400 16px/1.55 var(--f-body);padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom));-webkit-font-smoothing:antialiased}
/* the one environment: soft warm light from the upper right and a cool steel glow low on the left,
   drifting very slowly (90 s), like the light in the hero video */
body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 55% 45% at 82% 12%,var(--glow),transparent 70%),radial-gradient(ellipse 50% 45% at 10% 88%,var(--glow-2),transparent 70%);
  animation:env-drift 90s var(--ease-in-out) infinite alternate;animation-delay:-30s}
@keyframes env-drift{from{transform:translate3d(-2%,-1%,0)}to{transform:translate3d(2%,1.5%,0)}}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
main:focus{outline:none}
h1,h2,h3{font-family:var(--f-display);font-weight:800;margin:0;color:var(--text-primary);text-wrap:balance}
h1{font-size:clamp(31px,8.6vw,64px);line-height:1.03;letter-spacing:-.012em}
h2{font-size:clamp(26px,6.2vw,42px);line-height:1.08;letter-spacing:-.008em}
h3{font-size:19px;line-height:1.22;letter-spacing:-.003em}
p{margin:0}
ul,ol{margin:0;padding:0}
[role=list]{list-style:none}
.ico{width:20px;height:20px;flex:none}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-64px;z-index:100;padding:10px 14px;border-radius:10px;background:var(--graphite);color:var(--text-on-dark);font-weight:600;text-decoration:none}
.skip:focus{top:12px;color:var(--text-on-dark)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 16px}
.on-dark{background:radial-gradient(ellipse 70% 80% at 88% 0%,var(--glow),transparent 65%),var(--graphite);color:var(--text-on-dark)}
.on-dark h2,.on-dark h3{color:var(--text-on-dark)}
.on-dark a{color:var(--text-on-dark)}

/* labels and type helpers */
.kicker{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 12px;font:500 12px/1.35 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-label)}
.stripes{display:inline-flex;gap:3px;flex:none}
.stripes b{display:block;width:14px;height:4px;border-radius:2px;background:var(--logo-gray)}
.stripes b:nth-child(2){background:var(--logo-green)}
.stripes b:nth-child(3){background:var(--logo-red)}
.lead{font-size:17px;line-height:1.55;color:var(--text-secondary);max-width:52ch}
.sec{padding:64px 0}
/* sections below the first screen are laid out only when they come near: much less work on page load */
.sec,.prod,.who,.cta,.ftr{content-visibility:auto;contain-intrinsic-size:auto 720px}
.sec-head{margin-bottom:28px}
.sec-head p{margin-top:12px;color:var(--text-secondary);max-width:54ch}
.sec-foot{margin-top:28px}
.mono{font-family:var(--f-mono);font-weight:500}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 20px;border-radius:12px;
  border:1.5px solid transparent;font:600 16px/1.15 var(--f-body);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background-color .25s,border-color .25s,color .25s}
.btn .ico{width:20px;height:20px}
.btn-wa{background:var(--whatsapp);color:var(--whatsapp-ink);box-shadow:0 8px 20px -10px rgba(18,140,70,.75)}
.btn-wa:hover,.btn-wa:focus-visible{background:#33DA74;color:var(--whatsapp-ink);transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(18,140,70,.85)}
.btn-line{color:var(--text-primary);border-color:var(--text-primary);background:var(--btn-line-bg)}
.btn-line:hover,.btn-line:focus-visible{color:var(--text-primary);background:var(--panel);transform:translateY(-2px)}
.on-dark .btn-line{color:var(--text-on-dark);border-color:var(--text-on-dark-2);background:transparent}
.on-dark .btn-line:hover,.on-dark .btn-line:focus-visible{color:var(--text-on-dark);border-color:var(--text-on-dark);background:rgba(236,238,235,.06)}
.btn-sm{min-height:40px;padding:0 14px;font-size:15px;border-radius:10px}
.btn .arr{width:18px;height:18px;transition:transform .3s var(--ease-out)}
.btn:hover .arr{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
@media (pointer:coarse){.btn,.btn-sm,.chip{min-height:48px}.ftr__col a{min-height:44px}.two__item a,.ccard>a{display:inline-flex;align-items:center;min-height:44px}}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--hdr);border-bottom:1px solid transparent;
  transition:background-color .3s,border-color .3s}
.hdr.scrolled,.menu-open .hdr{background:var(--hdr-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--hdr-line)}
.hdr__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text-primary);text-decoration:none;flex:none}
.brand:hover{color:var(--text-primary)}
.brand__logo{width:40px;height:46px}
.brand__name{font:800 19px/1 var(--f-display);letter-spacing:.005em}
.nav{display:none}
.hdr__wa{display:none}
.menu-btn{display:inline-grid;place-items:center;width:48px;height:48px;margin-right:-8px;padding:0;border:0;border-radius:12px;
  background:transparent;color:var(--text-primary);cursor:pointer}
.menu-btn__icon{position:relative;width:26px;height:18px}
.menu-btn__icon::before,.menu-btn__icon::after,.menu-btn__icon i{content:"";position:absolute;left:0;right:0;height:3px;border-radius:3px;background:currentColor;transition:transform .3s var(--ease-out),opacity .2s}
.menu-btn__icon::before{top:0}.menu-btn__icon i{top:7.5px}.menu-btn__icon::after{bottom:0}
.menu-btn[aria-expanded=true] .menu-btn__icon::before{transform:translateY(7.5px) rotate(45deg)}
.menu-btn[aria-expanded=true] .menu-btn__icon::after{transform:translateY(-7.5px) rotate(-45deg)}
.menu-btn[aria-expanded=true] .menu-btn__icon i{opacity:0}
/* the theme switch: the logo's red, a sun in the dark theme (switch to light), a moon in the light theme */
.theme-btn{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;margin-left:auto;padding:0;border:0;border-radius:12px;
  background:var(--logo-red);color:#fff;cursor:pointer;box-shadow:0 8px 18px -12px rgba(227,54,44,.9);transition:transform .3s var(--ease-out),background-color .25s}
.theme-btn:hover{background:#EC4A40;transform:translateY(-1px)}
.theme-btn .ico{width:22px;height:22px;stroke-width:2}
.theme-btn .ico--moon{display:none}
[data-theme=light] .theme-btn .ico--moon{display:block}
[data-theme=light] .theme-btn .ico--sun{display:none}
@media (pointer:coarse){.theme-btn{width:48px;height:48px}}
/* over the dark hero video the header always uses light text, in both themes */
.hdr.over-hero{--text-primary:#F1EEE7}
.hdr.over-hero.scrolled{background:rgba(10,12,14,.55);border-bottom-color:rgba(255,255,255,.06)}

/* phone menu panel */
.mpanel{position:fixed;inset:var(--hdr) 0 0 0;z-index:49;overflow-y:auto;overscroll-behavior:contain;background:var(--canvas);
  padding:8px 16px calc(28px + env(safe-area-inset-bottom));opacity:0;transform:translateY(-10px);transition:opacity .25s var(--ease-out),transform .35s var(--ease-out)}
.mpanel.open{opacity:1;transform:none}
.mpanel[hidden]{display:none}
.mpanel__nav a{display:flex;align-items:center;min-height:60px;border-bottom:1px solid var(--line);font:800 25px/1.1 var(--f-display);color:var(--text-primary);text-decoration:none}
.mpanel__nav a[aria-current]{color:var(--accent)}
.mpanel__nav a[aria-current]::after{content:"";width:8px;height:8px;margin-left:12px;border-radius:50%;background:var(--logo-green)}
.mpanel__btns{display:grid;gap:10px;margin:24px 0}
body.menu-open{overflow:hidden}

/* ---------- WeChat ---------- */
.wechat{display:grid;gap:12px;justify-items:start;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.wechat__h{display:flex;align-items:center;gap:8px;font-weight:600}
.wechat__id{display:flex;align-items:center;gap:8px;color:var(--text-secondary)}
.wechat__id strong{color:var(--text-primary);font-family:var(--f-mono);font-weight:500;letter-spacing:.02em}
.wechat__qr img{width:180px;height:180px;border-radius:10px;border:1px solid var(--line);background:#fff;padding:6px}
.wechat__hint{font-size:15px;color:var(--text-secondary);max-width:40ch}
.wechat--mini{padding:16px}

/* ---------- phone contact bar + laptop floating button ---------- */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--bar-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.cbar .btn{flex:1;min-height:48px}
.fwa{display:none}

/* ---------- signature: the running belt divider ---------- */
.belt-div{position:relative;height:34px;width:calc(100% - 32px);max-width:calc(var(--wrap) - 80px);margin:0 auto;border:5px solid var(--rubber);border-radius:17px}
.belt-div__tex{position:absolute;left:12px;right:12px;height:5px;overflow:hidden}
.belt-div__tex--top{top:-5px}
.belt-div__tex--bot{bottom:-5px}
.belt-div__tex::before{content:"";position:absolute;top:0;bottom:0;left:-12px;right:-12px;
  background:repeating-linear-gradient(90deg,#4F565A 0 1.6px,transparent 1.6px 12px);animation:belt-run 4s linear infinite paused}
.belt-div__tex--bot::before{animation-direction:reverse}
.belt-div__pul{position:absolute;top:-5px;width:34px;height:34px;animation:spin 30s linear infinite paused}
.belt-div__pul:first-of-type{left:-5px}
.belt-div__pul:last-of-type{right:-5px;animation-delay:-11s}
.belt-div.live .belt-div__tex::before,.belt-div.live .belt-div__pul{animation-play-state:running}
@keyframes belt-run{from{transform:translateX(-12px)}to{transform:translateX(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- the product strip: a JAC belt running right to left under the hero ----------
   The page script fills the belt with copies so one set is wider than the screen, then moves the
   track by exactly half its width: the loop point is invisible. It runs only while on screen. */
.strip{position:relative;background:#16191C;color:#ECEAE4;border-top:1px solid #2A2F33;border-bottom:1px solid #050607;box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;z-index:1;height:9px;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px)}
.strip::before{top:0}
.strip::after{bottom:0}
.strip__view{overflow:hidden}
.strip__track{display:flex;width:max-content}
.strip__set{display:flex;align-items:center;flex:none}
.strip__item{display:flex;align-items:center;flex:none;white-space:nowrap}
.strip__name{padding:22px 22px;font:800 clamp(20px,3vw,38px)/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.strip__chev{display:flex;gap:2px;flex:none}
.strip__chev i{display:block;width:10px;height:16px;background:#A9ADAD;clip-path:polygon(100% 0,55% 0,0 50%,55% 100%,100% 100%,45% 50%)}
.strip__chev i:nth-child(2){background:var(--logo-green)}
.strip__chev i:nth-child(3){background:var(--logo-red)}
.strip__btn{position:absolute;z-index:2;right:10px;top:50%;width:40px;height:40px;margin-top:-20px;display:none;place-items:center;padding:0;border:1px solid #3A4045;border-radius:50%;background:rgba(13,16,18,.88);color:#ECEAE4;cursor:pointer}
.strip__btn .ico{width:18px;height:18px}
.strip__btn .ico--play,.strip.is-paused .strip__btn .ico--pause{display:none}
.strip.is-paused .strip__btn .ico--play{display:block}
/* still band (no JavaScript yet, or reduced motion): one set of names, wrapped to fit */
.strip:not(.strip--ready) .strip__track{width:auto}
.strip:not(.strip--ready) .strip__set{flex-wrap:wrap;justify-content:center;width:100%;padding:10px 12px}
.strip:not(.strip--ready) .strip__name{padding:12px 14px;font-size:clamp(16px,2vw,24px)}
/* moving belt */
.strip--ready .strip__view{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 92%,transparent)}
.strip--ready .strip__btn{display:grid}
.strip--ready .strip__track{animation:strip-run var(--strip-dur,60s) linear infinite;animation-delay:calc(var(--strip-dur,60s) * -.37);animation-play-state:paused}
.strip--ready.live .strip__track{animation-play-state:running}
.strip--ready.live.is-paused .strip__track{animation-play-state:paused}
@media (hover:hover) and (pointer:fine){.strip--ready.live:hover .strip__track{animation-play-state:paused}}
@media (pointer:coarse){.strip__btn{width:48px;height:48px;margin-top:-24px;right:6px}}
@keyframes strip-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- entrances (only when JavaScript runs) ---------- */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .8s var(--ease-out)}
.js .rv.in{opacity:1;transform:none}
.js .rv-stagger>*{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
.js .rv-stagger.in>*{opacity:1;transform:none}
.js .rv-stagger.in>:nth-child(2){transition-delay:.08s}
.js .rv-stagger.in>:nth-child(3){transition-delay:.16s}
.js .rv-stagger.in>:nth-child(4){transition-delay:.24s}
.js .rv-stagger.in>:nth-child(5){transition-delay:.32s}
.js .rv-stagger.in>:nth-child(6){transition-delay:.4s}
.js .rv-stagger.in>:nth-child(7){transition-delay:.48s}
.js .rv-stagger.in>:nth-child(8){transition-delay:.56s}
/* after the entrance, delays retire so hovers respond at once (specificity beats the nth-child rules) */
.js .rv-stagger.in.done>:nth-child(n){transition-delay:0s}

/* ---------- HOME: hero ----------
   Laptops: the scroll video (main.js turns it on with .hero-scrub on <html> when none of the five static-hero gates match).
   Phones, portrait tablets, landscape phones, reduced motion, and no JavaScript: a still from the same video. */
:root{--tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8)}
.hero{position:relative;background:#0B0D0F;color:#F1EEE7}
.stage{position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-img,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-img{object-position:50% 72%}
.hero-video{opacity:0;transform:translateZ(0);transition:opacity .6s var(--ease-out)}
.video-ready .hero-video{opacity:1}
.video-failed .hero-video{display:none}
/* light motion over the still: a very slow push-in */
.hero-static .hero-img{animation:hero-push 26s var(--ease-in-out) infinite alternate;animation-delay:-7s}
@keyframes hero-push{from{transform:scale(1)}to{transform:scale(1.06)}}
/* legibility, layer 1: the base scrim, always on (phones: darker at the top, where the words are) */
.hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.6) 100%),linear-gradient(180deg,rgba(8,9,12,.82) 0%,rgba(8,9,12,.5) 36%,rgba(8,9,12,0) 60%)}
.bands{position:relative;z-index:2;padding:calc(var(--hdr) + 18px) 16px 0}
.band{position:relative;max-width:34rem;text-shadow:var(--tshadow)}
.band .btn{text-shadow:none}
.band-2,.band-3{display:none}
.hero .kicker{color:#CDD2CE}
.hero .kicker .stripes b:first-child{background:#C9CDCD}
.hero-h1{max-width:13ch;margin-bottom:12px;color:#F4F1EA}
.hero-h1 .w{display:inline-block}
.js .hero-h1 .w{animation:word-lock .7s var(--ease-out) both}
.js .hero-h1 .w:nth-child(2){animation-delay:.07s}
.js .hero-h1 .w:nth-child(3){animation-delay:.14s}
.js .hero-h1 .w:nth-child(4){animation-delay:.21s}
.js .hero-h1 .w:nth-child(5){animation-delay:.28s}
@keyframes word-lock{from{opacity:0;transform:translateY(.32em)}to{opacity:1;transform:none}}
.hero-sub{max-width:44ch;margin-bottom:16px;color:#D6DAD6}
.hero-btns .btn{flex:1 1 0;padding:0 12px}
.hero-trust{display:flex;align-items:center;gap:8px;margin:14px 0 0;font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#DCDFDA}
.hero-trust .ico{width:18px;height:18px;flex:none;color:#D8B46E}
.hero .btn-line{color:#F4F1EA;border-color:rgba(244,241,234,.72);background:rgba(10,12,14,.28)}
.hero .btn-line:hover,.hero .btn-line:focus-visible{color:#F4F1EA;background:rgba(244,241,234,.1)}
.cap-t{font:600 clamp(21px,2.3vw,32px)/1.24 var(--f-body);color:#F4F1EA;max-width:21ch}
.cap-t .w{display:inline-block}
/* the loading ring: fills while the video downloads, then fades away */
.hero-ring{position:absolute;z-index:3;right:32px;bottom:32px;width:40px;height:40px;color:rgba(241,238,231,.8);opacity:0;transition:opacity .4s;pointer-events:none}
.hero-ring circle{transform:rotate(-90deg);transform-origin:center}
.hero-scrub .hero-ring{opacity:1}
.video-ready .hero-ring,.video-failed .hero-ring{opacity:0}
@media (max-width:899px) and (max-height:700px){.hero .kicker{display:none}}

/* the scroll story (laptops): a tall pinned hero; progress through it drives the video */
.hero-scrub .hero{height:450vh}
.hero-scrub .stage{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
.hero-scrub .hero-img{object-position:50% 50%}
.hero-scrub .hero-scrim{background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 38%,rgba(10,10,18,.55) 100%),linear-gradient(90deg,rgba(8,9,12,.62) 0%,rgba(8,9,12,.34) 34%,rgba(8,9,12,0) 54%)}
.hero-scrub .bands{position:absolute;inset:0;padding:0}
.hero-scrub .band{position:absolute;top:50%;left:max(40px,calc((100% - var(--wrap)) / 2 + 40px));width:min(44%,560px);max-width:none;transform:translateY(-46%);opacity:0}
.hero-scrub .band-1{opacity:1}
.hero-scrub .band-2,.hero-scrub .band-3{display:block}
/* legibility, layer 2: each band's own scrim, deepening while its words are on */
.hero-scrub .band::before{content:"";position:absolute;inset:-22% -16%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75 * var(--k,1));
  background:radial-gradient(ellipse 74% 62% at 42% 50%,rgba(5,5,10,.64) 0%,rgba(5,5,10,.42) 46%,rgba(5,5,10,0) 76%)}
/* entrances that echo the footage: words rise as the parts rise; the brand line arrives from depth as the ring settles */
.hero-scrub .band-2 .cap-t .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * 26px))}
.hero-scrub .band-3 .cap-t{opacity:clamp(0,var(--k,0) * 1.6,1);transform:scale(calc(.88 + .12 * var(--k,0)));transform-origin:0 50%}
/* phones and narrow screens (owner, 2026-10-08: phones get the scroll story too): the words sit at the top over a dark
   fade, as on the phone still, full width; the loading ring sits above the contact bar */
@media (max-width:899px){
  .hero-scrub .hero-scrim{background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.6) 100%),linear-gradient(180deg,rgba(8,9,12,.84) 0%,rgba(8,9,12,.52) 38%,rgba(8,9,12,0) 62%)}
  .hero-scrub .band{top:calc(var(--hdr) + 18px);left:16px;right:16px;width:auto;transform:none}
  .hero-scrub .band::before{inset:-12% -6%}
  .hero-ring{right:20px;bottom:calc(92px + env(safe-area-inset-bottom))}
}
.hero-scrub .band-3 .hero-btns{opacity:clamp(0,(var(--k,0) - .55) * 3,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .55) * 3,1)) * 14px))}

/* the drawing */
.drive .cl{fill:none;stroke:var(--blueprint);stroke-width:.8;stroke-dasharray:10 3 2 3}
.drive .pul{transform-box:fill-box;transform-origin:center}
.drive .belt{fill:none;stroke:var(--rubber);stroke-width:12;stroke-linejoin:round}
.drive .belt-tex{fill:none;stroke:var(--rubber-2);stroke-width:7;stroke-dasharray:2 6}
.drive .belt-print{font:500 7.5px var(--f-mono);letter-spacing:1.4px;fill:#A3ABAE}
.drive .seal{fill:none;stroke:var(--logo-red);stroke-width:2.4;stroke-dasharray:5 3.5;transform-box:fill-box;transform-origin:center}
.drive .lead{fill:none;stroke:var(--text-primary);stroke-width:1}
.drive .dot{fill:var(--text-primary)}
.drive .dot-red{fill:var(--logo-red)}
.drive .hlbl{font:500 15px var(--f-mono);letter-spacing:.06em;fill:var(--text-primary)}
.drive .hminor text{font:500 12px var(--f-mono);letter-spacing:.08em;fill:var(--text-label)}
@media (max-width:899px){.drive .hlbl{font-size:24px}.drive .hminor{display:none}}
.js .drive .hl,.js .drive .hminor,.js .drive .seal{opacity:0}

/* ---------- HOME: two services ---------- */
.svc-grid{display:grid;gap:14px}
.svc{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px 22px;border:1px solid var(--line);border-radius:20px;background:var(--panel);overflow:hidden}
.svc h3{font-size:22px}
.svc p{color:var(--text-secondary);max-width:44ch}
.svc .btn{align-self:flex-start;margin-top:6px}
.svc__fig{position:relative;height:120px;margin:-4px -4px 6px}
.svc__fig img{position:absolute;width:104px;height:104px;transition:transform .6s var(--ease-out)}
.svc__fig img:nth-child(1){left:0;top:8px}
.svc__fig img:nth-child(2){left:78px;top:0;transform:rotate(-14deg)}
.svc__fig img:nth-child(3){left:160px;top:12px}
.svc:hover .svc__fig img:nth-child(2){transform:rotate(16deg)}
.svc__globe{position:absolute;left:0;top:0;width:118px;height:118px}
.svc__arc{position:absolute;left:96px;top:14px;width:150px;height:90px}
.svc__arc path{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-dasharray:5 5}
.svc__arc circle{fill:var(--accent)}

/* ---------- HOME: product cards ---------- */
.pgrid{display:grid;gap:10px}
.pgrid>li{display:flex}.pgrid>li>.pcard{flex:1 1 auto} /* every card in a row as tall as the tallest */
.pcard{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:center;padding:10px 14px 10px 10px;border:1px solid var(--line);border-radius:16px;
  background:var(--panel);color:var(--text-primary);text-decoration:none;transition:transform .35s var(--ease-out),border-color .25s,box-shadow .35s var(--ease-out)}
.pcard:hover{color:var(--text-primary);transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 14px 30px -22px var(--shadow)}
.pcard__fig{display:block;aspect-ratio:1;border-radius:12px;background:var(--canvas)}
.pcard__fig img{width:100%;height:100%;transition:transform .6s var(--ease-out)}
.pcard:hover .pcard__fig img{transform:rotate(10deg) scale(1.04)}
.pcard__fig--photo{overflow:hidden;background:#121518}
.pcard__fig--photo picture{display:block;width:100%;height:100%}
.pcard__fig--photo img{object-fit:cover}
.pcard:hover .pcard__fig--photo img{transform:scale(1.06)}
.pcard__txt{display:grid;gap:3px}
.pcard__no{font:500 12px var(--f-mono);color:var(--text-label);letter-spacing:.06em}
.pcard__name{font:800 17px/1.2 var(--f-display)}
.pcard__line{font-size:15px;line-height:1.45;color:var(--text-secondary)}

/* ---------- find your part fast + PK reader ---------- */
.find__in{display:grid;gap:32px}
.steps{list-style:none;display:grid;gap:0;margin:24px 0 26px;counter-reset:none}
.step{position:relative;display:grid;grid-template-columns:52px 1fr;gap:14px;padding-bottom:22px}
.step:not(:last-child)::before{content:"";position:absolute;left:21px;top:46px;bottom:4px;width:2px;background:repeating-linear-gradient(var(--line-strong) 0 6px,transparent 6px 11px)}
.step__no{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--text-primary);background:var(--panel);font:500 15px var(--f-mono)}
.step h3{margin:9px 0 4px}
.step p{color:var(--text-secondary);max-width:42ch}

.pkr{display:grid;gap:16px;padding:22px 18px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.pkr__title{font:800 20px/1.2 var(--f-display)}
.pkr__ui{display:grid;gap:14px}
.fld{display:grid;gap:6px}
.fld__l{font-weight:600;font-size:15px}
.fld__i{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--field);color:var(--text-primary);font:400 16px/1.4 var(--f-body)}
.fld__i:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--text-primary)}
textarea.fld__i{min-height:96px;resize:vertical}
select.fld__i{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-primary) 50%),linear-gradient(135deg,var(--text-primary) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.fld__i::placeholder{color:var(--placeholder)}
.pkr__code{font:500 20px var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.pkr__steppers{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stepper{display:grid;grid-template-columns:48px 1fr 48px;grid-template-rows:auto 48px;align-items:center;gap:6px 0}
.stepper__l{grid-column:1/-1;font-weight:600;font-size:15px}
.stepper__b{display:grid;place-items:center;width:48px;height:48px;border:1.5px solid var(--line-strong);background:var(--field);color:var(--text-primary);cursor:pointer;transition:background-color .2s}
.stepper__b:first-of-type{border-radius:10px 0 0 10px}
.stepper__b:last-of-type{border-radius:0 10px 10px 0}
.stepper__b:hover{background:var(--sunken)}
.stepper__b .ico{width:18px;height:18px}
.stepper__v{display:grid;place-items:center;height:48px;border-top:1.5px solid var(--line-strong);border-bottom:1.5px solid var(--line-strong);background:var(--field);font:500 17px var(--f-mono)}
.pkr__xsec{width:100%;height:auto;max-width:360px;margin:0 auto}
.pkr__belt{fill:var(--rubber);stroke:#111;stroke-width:.6;stroke-linejoin:round;transition:d .35s var(--ease-out)}
.pkr__cord{stroke:var(--blueprint);stroke-width:.8;stroke-dasharray:10 3 2 3}
.pkr__len{height:10px;border-radius:5px;background:var(--sunken);overflow:hidden}
.pkr__len span{display:block;height:100%;width:100%;border-radius:5px;background:repeating-linear-gradient(90deg,var(--rubber) 0 10px,#3A4044 10px 12px);transform-origin:left;transform:scaleX(var(--len,.4));transition:transform .4s var(--ease-out)}
.pkr__read{font-size:17px}
.pkr__read strong{font-family:var(--f-mono);font-weight:500;letter-spacing:.04em}
.pkr .btn{justify-self:start}
.js .pkr__nojs{display:none}
.pkr__ui,.pkr__xsec,.pkr__len{display:none}
.js .pkr__ui{display:grid}
.js .pkr__xsec{display:block}
.js .pkr__len{display:block}

/* ---------- why JAC Autos ---------- */
.why__grid{display:grid;gap:28px;margin-top:28px}
.why__big{position:relative;padding:22px 20px 24px;border-radius:20px;background:radial-gradient(ellipse 90% 70% at 90% 0%,var(--glow),transparent 70%),var(--graphite);border:1px solid var(--line);color:var(--text-on-dark);overflow:hidden}
.why__big h3{display:flex;align-items:flex-end;gap:12px;color:var(--text-on-dark);line-height:.9}
.why__num{font:800 112px/0.82 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
/* big real numbers that count up once when they come into view */
.stats{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:16px 36px}
.stat{display:grid;gap:6px;align-content:start}
.stat__n{font:800 clamp(44px,8vw,68px)/.86 var(--f-display);letter-spacing:-.03em;color:var(--text-primary);font-variant-numeric:tabular-nums}
.stat__k{font:500 12px/1.35 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-label);max-width:17ch}
.why__unit{font:500 15px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-dark-2);padding-bottom:4px}
.why__big p{margin-top:16px;color:var(--text-on-dark-2);max-width:34ch}
.why__dim{position:absolute;left:20px;right:20px;top:20px;width:auto;height:24px;opacity:.75}
.why__dim path{fill:none;stroke:var(--blueprint);stroke-width:1.2;vector-effect:non-scaling-stroke}
.why__dim text{font:500 10px var(--f-mono);letter-spacing:.14em;fill:var(--text-on-dark-2)}
.why__list{list-style:none;display:grid;gap:12px}
.why__item{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.why__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent-muted);color:var(--accent)}
.why__item h3{font-size:18px;margin:2px 0 4px}
.why__item p{color:var(--text-secondary)}
/* each point shows its own picture; the ring gets a measuring line that draws itself */
.why__pic{grid-column:1/-1;position:relative;display:block;margin:-16px -16px 2px;aspect-ratio:16/10;overflow:hidden;border-radius:15px 15px 0 0;background:#121518}
.why__pic picture,.why__pic img{display:block;width:100%;height:100%;object-fit:cover}
.why__pic img{transition:transform .9s var(--ease-out)}
.why__item:hover .why__pic img{transform:scale(1.05)}
.why__measure{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.why__measure .h{fill:none;stroke:rgba(241,238,231,.6);stroke-width:2.4}
.why__measure .dm{fill:none;stroke:#E2BF78;stroke-width:3.6}
.why__measure .ar{fill:#E2BF78}
.why__measure .t{fill:#F4F1EA;font:500 34px var(--f-mono);paint-order:stroke;stroke:rgba(8,9,12,.7);stroke-width:6px}
.js .why__measure .h,.js .why__measure .dm{stroke-dasharray:1 1;stroke-dashoffset:1}
.js .why__measure .ar,.js .why__measure .t{opacity:0}
.js .why__list.in .why__measure .h{stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--ease-out) .7s}
.js .why__list.in .why__measure .dm{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease-out) 1s}
.js .why__list.in .why__measure .ar,.js .why__list.in .why__measure .t{opacity:1;transition:opacity .5s 1.7s}

/* ---------- who we supply ---------- */
.who{padding:28px 0;background:var(--sunken);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.who__in{display:grid;gap:14px}
.who__h{font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-label)}
.who__list{list-style:none;display:grid;gap:10px}
.who__list li{display:flex;align-items:center;gap:10px;font-weight:600}
.who__list .ico{color:var(--accent)}
.who__note{color:var(--text-secondary)}

/* ---------- sourcing teaser ---------- */
.teaser__card{display:grid;gap:12px;padding:24px 20px;border:1px solid var(--line);border-radius:24px;background:var(--panel);overflow:hidden}
.teaser__txt{display:grid;gap:12px;justify-items:start}
.teaser__txt p{color:var(--text-secondary);max-width:46ch}
.teaser__fig{margin:0 -8px -10px}

/* ---------- route drawing (Trading & Sourcing) ---------- */
.route{width:100%;height:auto;overflow:visible}
.route .r-base{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-dasharray:6 7}
.route .r-prog{fill:none;stroke:var(--accent);stroke-width:3.2;stroke-linecap:round}
.route .r-ring{fill:none;stroke:var(--blueprint);stroke-width:1;stroke-dasharray:10 3 2 3;opacity:.8}
.route .r-dot{fill:var(--panel);stroke:var(--line-strong);stroke-width:2;transition:fill .4s,stroke .4s}
.route .r-dot.on{fill:var(--accent);stroke:var(--accent)}
.route .r-node{stroke:var(--canvas);stroke-width:3}
.route .r-lbl{font:500 13px var(--f-mono);letter-spacing:.12em;fill:var(--text-primary)}
.route--live .r-prog{transition:stroke-dashoffset .8s var(--ease-out)}
.js .route--draw .r-prog{stroke-dasharray:var(--rl,1000);stroke-dashoffset:var(--rl,1000)}
.js .route--draw.in .r-prog{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease-in-out) .3s}

/* ---------- closing call to action ---------- */
.cta{padding:64px 0;position:relative;overflow:hidden}
.cta__in{display:grid;gap:16px;justify-items:start}
/* closing boxes (owner, 2026-10-08): the owner's real part photos instead of the faint drawings (About: oil seal, Home: clutch plate, Products: synchronizer ring), tucked into the corner under the words */
.cta__in{position:relative;z-index:1}
.cta .cta__deco--real{width:200px;right:-96px;bottom:-104px;opacity:.38;transform:rotate(-14deg);filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
@media (min-width:900px){.cta .cta__deco--real{width:400px;right:40px;bottom:-110px;opacity:.55}}
/* Products closing box (owner): the product-list synchronizer ring picture, its studio edges faded into the dark box */
.cta .cta__deco--photo{width:190px;right:-62px;bottom:-48px;opacity:.6;-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,transparent 100%)}
@media (min-width:900px){.cta .cta__deco--photo{width:380px;right:40px;bottom:-40px;opacity:.95}}
.cta p{color:var(--text-on-dark-2);max-width:46ch}
.cta .btn-row{margin-top:6px}
.cta__hours{display:flex;align-items:center;gap:8px;font:500 14px var(--f-mono);letter-spacing:.04em}
.cta__deco{position:absolute;right:-60px;bottom:-80px;width:280px;opacity:.14;pointer-events:none}

/* ---------- footer ---------- */
.ftr{background:var(--graphite-2);padding:48px 0 calc(28px + var(--bar) + env(safe-area-inset-bottom));border-top:1px solid #2A3135}
.ftr__top{display:grid;gap:32px}
.ftr__brand img{width:220px;height:auto}
.ftr__brand p{margin-top:14px;color:var(--text-on-dark-2);max-width:34ch}
.ftr__col{display:grid;gap:8px;align-content:start}
.ftr__h{font:500 12px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-dark-2);margin-bottom:4px}
.ftr__col a,.ftr__col p{color:var(--text-on-dark);text-decoration:none}
.ftr__col a{min-height:32px;display:inline-flex;align-items:center}
.ftr__col p a{display:inline;min-height:0}
.ftr__col a:hover{text-decoration:underline}
.ftr__col a[aria-current]{color:#7EE2A8}
.ftr__legal{margin-top:36px;padding-top:20px;border-top:1px solid #2A3135;font-size:14px;color:var(--text-on-dark-2)}

/* ---------- inner page header ---------- */
.phead{padding:calc(var(--hdr) + 36px) 0 36px}
.phead__in{display:grid;gap:24px;align-items:center}
.phead__txt{display:grid;gap:14px;justify-items:start}
.phead h1{max-width:18ch}
.phead__fig{max-width:340px;width:100%;justify-self:center}
.phead--contact .phead__txt{gap:16px}
/* a page header over a photograph (Trading & Sourcing): light text on a dark scrim in both themes */
.phead--photo{position:relative;isolation:isolate;overflow:hidden;background:#0B0D0F;--text-primary:#F1EEE7;--text-secondary:#D9DCD7;--text-label:#CDD2CE;color:var(--text-primary)}
.phead__bg{position:absolute;inset:0;z-index:-2}
.phead__bg img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
/* the crane video (Trading & Sourcing): laptops only. The header pins while the visitor scrolls and the scroll drives the video
   (the crane lowers the container, the vehicles roll); then the page moves on. Phones keep the still. */
.pscrub.is-scrub,.pre-scrub [data-pscrub]{height:260vh}
.pscrub.is-scrub>.phead--photo,.pre-scrub [data-pscrub]>.phead--photo{position:sticky;top:0;height:100vh;height:100svh;min-height:0}

/* ---------- Products header: the real JAC box in CSS 3D (140 x 90 x 90 mm; --u = px per mm) ----------
   Laptops: the header pins and the scroll turns the box once, opens the lid and flaps, and the real pouch rises out.
   Default (phones, reduced motion, no script): the finished scene. Only transform and opacity move. */
.pscrub--box.is-scrub{height:330vh}
.pscrub.is-scrub>.phead--box{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--hdr);padding-bottom:12px}
.phead__fig--box{max-width:none;justify-self:stretch}
.box3d{--u:1.5px;--W:calc(var(--u)*140);--H:calc(var(--u)*90);--D:calc(var(--u)*90);--F:calc(var(--u)*40);--T:calc(var(--u)*15);--P:calc(var(--u)*60);--PH:calc(var(--u)*76.6);
  --ry:-28deg;--lid:14deg;--tuck:-35deg;--flap:-38deg;--rise:1;--fwd:1;--dk0:.29;--dk1:.09;--dk2:.5;--dk3:.5;
  position:relative;width:100%;height:calc(var(--u)*205);margin:0 auto;pointer-events:none}
/* soft blue studio light behind the box, like the product pictures (owner), a faint floor shine and a floor line */
.box3d{--glow-a:rgba(92,118,178,.42);--glow-b:rgba(52,70,118,.22);--floor:rgba(120,140,190,.16);--floor-line:rgba(160,180,220,.22);--floor-shadow:rgba(0,0,0,.7)}
:root[data-theme=light] .box3d{--glow-a:rgba(255,255,255,.95);--glow-b:rgba(196,210,234,.5);--floor:rgba(150,168,205,.22);--floor-line:rgba(120,138,170,.3);--floor-shadow:rgba(27,32,35,.42)}
.box3d__glow{position:absolute;left:58%;top:40%;width:calc(var(--u)*380);height:calc(var(--u)*300);transform:translate(-50%,-50%);background:radial-gradient(closest-side,var(--glow-a),var(--glow-b) 55%,rgba(52,70,118,0));opacity:.5}
/* the spotlight stage (owner, 2026-10-09): a dark stage, a soft beam of light from above onto the box and a bright pool
   on the floor; the light theme gets a white studio version. It never moves: only the box does. The header fades into
   the page colour at its bottom edge. */
.phead--box{background:linear-gradient(180deg,rgba(17,20,23,0) 90%,var(--canvas)),radial-gradient(ellipse 120% 50% at 50% 62%,#151b26 0%,#0a0d12 60%,#06080b 100%)}
:root[data-theme=light] .phead--box{background:linear-gradient(180deg,rgba(236,238,235,0) 90%,var(--canvas)),radial-gradient(ellipse 120% 50% at 50% 62%,#fff 0%,#e8ecf1 60%,#d6dce3 100%)}
.box3d__beam{position:absolute;left:50%;bottom:calc(var(--u)*8);width:calc(var(--u)*400);height:calc(var(--u)*560);transform:translateX(-50%);filter:blur(calc(var(--u)*10));pointer-events:none}
.box3d__beam i{position:absolute;inset:0;clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(205,222,255,0) 0%,rgba(205,222,255,.06) 30%,rgba(205,222,255,.22) 100%)}
:root[data-theme=light] .box3d__beam i{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 40%,rgba(255,255,255,.95) 100%)}
.box3d__pool{position:absolute;left:50%;bottom:calc(var(--u)*-16);width:calc(var(--u)*500);height:calc(var(--u)*84);transform:translateX(-50%);background:radial-gradient(closest-side,rgba(210,226,255,.5),rgba(120,150,220,.14) 60%,rgba(120,150,220,0))}
:root[data-theme=light] .box3d__pool{background:radial-gradient(closest-side,#fff,rgba(255,255,255,.5) 60%,rgba(255,255,255,0))}
/* the words and the product chips sit above the light, so it never washes them out */
.phead--box .phead__txt,.phead--box .chips{position:relative;z-index:1}
@media (min-width:900px){
  .phead--box{background:linear-gradient(180deg,rgba(17,20,23,0) 82%,var(--canvas)),radial-gradient(ellipse 48% 62% at 70% 64%,#151b26 0%,#0a0d12 58%,#050608 100%)}
  :root[data-theme=light] .phead--box{background:linear-gradient(180deg,rgba(236,238,235,0) 82%,var(--canvas)),radial-gradient(ellipse 48% 62% at 70% 60%,#fff 0%,#e8ecf1 58%,#d3d9e0 100%)}
}
.box3d::before{content:"";position:absolute;left:50%;bottom:calc(var(--u)*-6);width:calc(var(--u)*420);height:calc(var(--u)*80);transform:translateX(-50%);background:radial-gradient(closest-side,var(--floor),rgba(120,140,190,0))}
.box3d::after{content:"";position:absolute;left:50%;bottom:calc(var(--u)*17);width:calc(var(--u)*360);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(160,180,220,0),var(--floor-line),rgba(160,180,220,0))}
.box3d__shadow{position:absolute;left:50%;bottom:calc(var(--u)*6);width:calc(var(--u)*230);height:calc(var(--u)*34);transform:translateX(-50%);background:radial-gradient(closest-side,var(--floor-shadow),rgba(0,0,0,0))}
/* the box waits, hidden, until its pictures have loaded (the page script adds .is-ready), so it never shows as a plain white box */
.js .box3d:not(.is-ready) .box3d__scene,.js .box3d:not(.is-ready) .box3d__shadow{opacity:0}
.box3d__scene,.box3d__shadow{transition:opacity .45s var(--ease-out)}
.box3d__scene{position:absolute;left:50%;bottom:calc(var(--u)*16);width:var(--W);height:var(--H);margin-left:calc(var(--W)/-2);perspective:calc(var(--u)*900);perspective-origin:50% 30%}
.box3d__box{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-17deg) rotateY(var(--ry))}
.box3d .bx{position:absolute;left:50%;top:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.bx--front,.bx--back,.bx--in-front,.bx--in-back{width:var(--W);height:var(--H);margin:calc(var(--H)/-2) 0 0 calc(var(--W)/-2)}
.bx--left,.bx--right,.bx--in-left,.bx--in-right{width:var(--D);height:var(--H);margin:calc(var(--H)/-2) 0 0 calc(var(--D)/-2)}
.bx--bottom,.bx--contents,.bx-lid{width:var(--W);height:var(--D);margin:calc(var(--D)/-2) 0 0 calc(var(--W)/-2)}
.bx-flap{width:var(--D);height:var(--F);margin:calc(var(--F)/-2) 0 0 calc(var(--D)/-2)}
.bx--front{transform:translateZ(calc(var(--D)/2))}
.bx--back{transform:rotateY(180deg) translateZ(calc(var(--D)/2))}
.bx--right{transform:rotateY(90deg) translateZ(calc(var(--W)/2))}
.bx--left{transform:rotateY(-90deg) translateZ(calc(var(--W)/2))}
.bx--bottom{transform:rotateX(-90deg) translateZ(calc(var(--H)/2));background:#3a3b3c}
.bx--front,.bx--back{background:#c9cccd url(/assets/img/box/long.webp?v=fcab56f5) center/100% 100%}
.bx--left{background:#c9cccd url(/assets/img/box/end.webp?v=44b4a8d0) center/100% 100%}
.bx--right{background:#c9cccd url(/assets/img/box/end-label.webp?v=1e82e40e) center/100% 100%}
.bx--side::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.1)),rgba(6,8,10,var(--dk,.3))}
.bx--front::after{--dk:var(--dk0)}.bx--right::after{--dk:var(--dk1)}.bx--back::after{--dk:var(--dk2)}.bx--left::after{--dk:var(--dk3)}
/* inside: brown board walls (darker toward the bottom) and the real pouches packed inside */
.bx--in-front,.bx--in-back,.bx--in-left,.bx--in-right{background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.55)),#9a7a55 url(/assets/img/box/kraft.webp?v=7742d9fb) center/cover}
.bx--in-front{transform:rotateY(180deg) translateZ(calc(var(--D)/-2 + 1px))}
.bx--in-back{transform:translateZ(calc(var(--D)/-2 + 1px))}
.bx--in-left{transform:rotateY(90deg) translateZ(calc(var(--W)/-2 + 1px))}
.bx--in-right{transform:rotateY(-90deg) translateZ(calc(var(--W)/-2 + 1px))}
.bx--contents{background:#6d7471 url(/assets/img/box/contents.webp?v=09227004) center/100% 100%;transform:rotateX(90deg) translateZ(calc(var(--H)/2 - var(--u)*8))}
.bx--contents::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.08) 40%,rgba(0,0,0,.2))}
/* the lid (hinged at the back top edge, tuck flap at its free edge) and the two dust flaps */
.box3d .bx-lid,.box3d .bx-flap,.box3d .bx-tuck{transform-style:preserve-3d;-webkit-backface-visibility:visible;backface-visibility:visible}
.bx-lid{transform:translateY(calc(var(--H)/-2)) translateZ(calc(var(--D)/-2)) rotateX(var(--lid)) translateY(calc(var(--D)/-2))}
.bx-tuck{position:absolute;left:calc(var(--u)*3);right:calc(var(--u)*3);top:calc(var(--T)*-1);height:var(--T);transform-origin:50% 100%;transform:rotateX(var(--tuck))}
.bx-flap--l{transform:rotateY(-90deg) translateZ(calc(var(--W)/2)) translateY(calc(var(--H)/-2)) rotateX(var(--flap)) translateY(calc(var(--F)/-2))}
.bx-flap--r{transform:rotateY(90deg) translateZ(calc(var(--W)/2)) translateY(calc(var(--H)/-2)) rotateX(var(--flap)) translateY(calc(var(--F)/-2))}
.bxl{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.bxl--b{transform:rotateY(180deg)}
.bxl--kraft{background:linear-gradient(180deg,rgba(255,240,215,.08),rgba(0,0,0,.18)),#a3825b url(/assets/img/box/kraft.webp?v=7742d9fb) center/cover}
.bxl--print{background:#c9cccd url(/assets/img/box/long.webp?v=fcab56f5) center/100% 100%}
.bx-tuck .bxl--kraft{background:linear-gradient(0deg,rgba(0,0,0,.28),rgba(0,0,0,.05)),#a3825b url(/assets/img/box/kraft.webp?v=7742d9fb) center/cover}
/* side flaps (owner): printed JAC pattern outside, the same brown board as the lid inside */
.bx-flap .bxl--print{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.16)),#c9cccd url(/assets/img/box/end.webp?v=44b4a8d0) center/cover}
/* the real pouch: starts inside under the packed pouches, rises out, then comes forward to face the visitor.
   Inside a 3D scene the browser draws an element at its layout size, so growing it with scale() stretches a small
   drawing and blurs it. So it is laid out at twice its final size and only ever shrunk (1/2 inside the box, 1.3/2 in front). */
.bx-pouch{width:calc(var(--P)*2);height:calc(var(--PH)*2);margin:calc(var(--PH)*-1) 0 0 calc(var(--P)*-1);
  transform:translateY(calc(var(--u)*2.3 - var(--rise)*var(--u)*87.6 - var(--fwd)*var(--u)*8)) translateZ(calc(var(--fwd)*var(--D)*.62)) rotateY(calc(var(--fwd)*28deg)) scale(calc((1 + var(--fwd)*.3)/2))}
.bx-pouch img{display:block;width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
/* phones (owner: phones get the box animation too): the words scroll away as usual, and the box stays in the middle of
   the screen for a little more than one screen of scrolling while it turns and opens */
.pscrub--box.is-scrub-m .phead__fig--box{height:calc(307.5px + 120vh);height:calc(307.5px + 120svh)}
.pscrub--box.is-scrub-m .box3d{position:-webkit-sticky;position:sticky;top:calc(var(--hdr) + 8px);top:max(calc(var(--hdr) + 8px),calc(50svh - var(--u)*102.5))}
@media (min-width:900px){.box3d{--u:2px}.pscrub--box.is-scrub-m .phead__fig--box{height:calc(410px + 120vh);height:calc(410px + 120svh)}}
@media (min-width:900px) and (max-height:760px){.box3d{--u:1.7px}}
.phead__vid{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:0;transition:opacity .9s var(--ease-out);pointer-events:none}
.phead__vid.on{opacity:1}
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){.phead__vid{display:none}}
/* portrait phones (owner: phones get the scroll video too): a tall cut of the picture and the video, centred on the crane.
   While the header is pinned the words sit at the bottom, so the crane and the container stay in clear view. */
@media (orientation:portrait) and (max-width:720px){
  [data-pscrub] .phead__bg img,[data-pscrub] .phead__vid{object-position:50% 50%}
  .pscrub.is-scrub>.phead--photo,.pre-scrub [data-pscrub]>.phead--photo{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .pscrub.is-scrub>.phead--photo::before,.pre-scrub [data-pscrub]>.phead--photo::before{background:linear-gradient(180deg,rgba(8,9,12,.42) 0%,rgba(8,9,12,.12) 30%,rgba(8,9,12,.5) 52%,rgba(8,9,12,.86) 72%,rgba(8,9,12,.92) 100%)}
  /* About Us: the phone cut of the warehouse is wider, so it is shifted to keep the truck in the middle of the screen */
  .phead--about .phead__bg img,.phead--about .phead__vid{object-position:60% 50%}
}
.phead--photo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(8,9,12,.8) 0%,rgba(8,9,12,.62) 55%,rgba(8,9,12,.82) 100%)}
.phead--photo .phead__fig{display:none}
.phead--photo .phead__txt{text-shadow:var(--tshadow)}
.phead--photo .btn{text-shadow:none}
.phead--photo .btn-line{color:#F4F1EA;border-color:rgba(244,241,234,.72);background:rgba(10,12,14,.28)}
.phead--photo .btn-line:hover,.phead--photo .btn-line:focus-visible{color:#F4F1EA;background:rgba(244,241,234,.1)}
.sync-fig{width:100%;height:auto}
.sync-fig .ring{transform-box:fill-box;transform-origin:center;animation:spin 60s linear infinite paused}
.live .sync-fig .ring,.sync-fig.live .ring{animation-play-state:running}
.sync-fig .cl{fill:none;stroke:var(--blueprint);stroke-width:.8;stroke-dasharray:10 3 2 3}
.sync-fig .o{fill:none;stroke:#8E6B27;stroke-width:1.4}
.sync-fig .o2{fill:none;stroke:#B48A3A;stroke-width:1}
.sync-fig .lbl{font:500 9px var(--f-mono);letter-spacing:.12em;fill:var(--text-label)}
.sync-fig .lead{fill:none;stroke:var(--text-primary);stroke-width:.8}

/* chips */
.chips{margin-top:28px}
.chips ul{list-style:none;display:flex;gap:8px;overflow-x:auto;padding:2px 16px 10px;margin:0 -16px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:var(--panel);color:var(--text-primary);text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap;transition:background-color .2s,border-color .2s}
.chip:hover{background:var(--sunken);color:var(--text-primary)}

/* ---------- PRODUCTS: one section per group ---------- */
.prod{padding:36px 0;border-top:1px solid var(--line)}
.prod__in{display:grid;gap:22px;align-items:center}
.prod__fig{margin:0;max-width:300px;width:100%;aspect-ratio:1;border-radius:24px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.prod__fig img{width:92%;height:auto;transition:transform .8s var(--ease-out)}
.prod__fig:hover img{transform:rotate(12deg)}
/* photographs instead of drawings: full bleed, a slow push on hover */
.prod__fig--photo{background:#121518;border-color:rgba(255,255,255,.06)}
.prod__fig--photo picture{display:block;width:100%;height:100%}
.prod__fig--photo img{width:100%;height:100%;object-fit:cover}
.prod__fig--photo:hover img{transform:scale(1.05)}
.prod__txt{display:grid;gap:12px;justify-items:start}
.prod__no{font:500 12px var(--f-mono);letter-spacing:.1em;color:var(--text-label);min-height:1.35em}
.prod__aka{font-style:italic;color:var(--text-secondary);margin-top:-4px}
.prod__does{font-size:17px;max-width:52ch}
.prod__row{display:grid;gap:2px;max-width:52ch}
.prod__k{font:500 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-label)}
.prod__fits{display:flex;align-items:center;gap:8px;color:var(--text-secondary)}
.prod__fits .ico{color:var(--accent)}
.prod__cert{display:flex;align-items:flex-start;gap:10px;max-width:52ch;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px;background:var(--panel)}
.prod__cert .ico{width:20px;height:20px;flex:none;margin-top:1px;color:var(--gold)}
.prod__cert strong{font-weight:600}
.prod__extra{margin-top:28px}
.prod__extra .pkr{max-width:640px}
/* spec card: a technical drawing that draws itself when it comes into view, and what to measure */
.spec{display:grid;gap:12px;width:100%;max-width:520px;padding:16px 16px 18px;border:1px solid var(--line);border-radius:20px;
  background:radial-gradient(ellipse 80% 60% at 100% 0%,var(--glow),transparent 70%),var(--panel)}
.spec__k{margin:0;font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-label)}
.spec__svg{width:100%;height:auto;overflow:visible}
.spec .o{fill:none;stroke:var(--text-primary);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.spec .h{fill:none;stroke:var(--text-label);stroke-width:1}
.spec .c{fill:none;stroke:var(--blueprint);stroke-width:1;stroke-dasharray:10 3 2 3}
.spec .dm{fill:none;stroke:var(--gold);stroke-width:1.1}
.spec .ar{fill:var(--gold)}
.spec .t{fill:var(--gold);font:500 12px var(--f-mono);letter-spacing:.04em}
.spec__list{display:grid;gap:8px;margin:0}
.spec__row{display:grid;grid-template-columns:78px 1fr;gap:10px}
.spec__row dt{font:500 11px/1.75 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-label)}
.spec__row dd{margin:0;font-size:15px;line-height:1.5;color:var(--text-secondary)}
.js .spec .o,.js .spec .h,.js .spec .dm{stroke-dasharray:1 1;stroke-dashoffset:1}
.js .spec .c,.js .spec .ar,.js .spec .t{opacity:0}
.js .spec.in .o{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease-out) .2s}
.js .spec.in .h{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease-out) .5s}
.js .spec.in .dm{stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--ease-out) 1.1s}
.js .spec.in .c{opacity:1;transition:opacity .6s .2s}
.js .spec.in .ar,.js .spec.in .t{opacity:1;transition:opacity .5s 1.5s}

/* ---------- FAQ ---------- */
.faq__list{display:grid;gap:10px;max-width:820px}
.faq__item{border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 18px;cursor:pointer;list-style:none;font-weight:600;font-size:17px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary .ico{transition:transform .35s var(--ease-out);color:var(--accent)}
.faq__item[open] summary .ico{transform:rotate(45deg)}
.faq__a{padding:0 18px 18px;color:var(--text-secondary);max-width:64ch}

/* ---------- TRADING & SOURCING ---------- */
.tiles{list-style:none;display:grid;gap:10px}
.tile{display:flex;align-items:center;gap:14px;min-height:72px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--panel);font:800 19px/1.2 var(--f-display)}
.tile .ico{width:26px;height:26px;color:var(--accent)}
.tiles-note{margin-top:16px;color:var(--text-secondary)}
.how__in{display:grid;gap:28px}
.how__vis{display:none}
/* the sourcing globe (canvas, drawn by the page script); without the script the drawn route stays */
.globe{display:none;position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:1;
  --g-body1:#1F252A;--g-body2:#0B0E10;--g-dot:#9AA6AB;--g-hot1:#E3362C;--g-hot2:#33C27F;--g-arc:#D8B46E;--g-rim:rgba(216,180,110,.38);--g-text:#ECEAE4}
:root[data-theme=light] .globe{--g-body1:#FBFCFA;--g-body2:#D9DFDB;--g-dot:#4F585C;--g-hot2:#0A7444;--g-arc:#8A5E14;--g-rim:rgba(122,90,30,.4);--g-text:#1B2023}
.globe canvas{display:block;width:100%;height:100%}
.js .globe{display:block}
.js .how__vis{display:block;margin-bottom:8px}
.js .how__vis .route--live{display:none}
.tl{list-style:none;position:relative;display:grid;gap:0}
.tl__step{position:relative;display:grid;grid-template-columns:44px 1fr;gap:16px;padding-bottom:26px}
.tl__step::before{content:"";position:absolute;left:21px;top:44px;bottom:2px;width:2px;background:var(--line);}
.tl__step:last-child::before{display:none}
.tl__step::after{content:"";position:absolute;left:21px;top:44px;width:2px;height:calc(100% - 46px);background:var(--accent);transform-origin:top;transform:scaleY(0);transition:transform .8s var(--ease-out)}
.tl__step:last-child::after{display:none}
.tl__step.on::after{transform:scaleY(1)}
.tl__no{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--line-strong);background:var(--panel);font:500 14px var(--f-mono);transition:background-color .4s,border-color .4s,color .4s}
.tl__step.on .tl__no{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tl__step h3{margin:9px 0 4px}
.tl__step p{color:var(--text-secondary);max-width:44ch}
.handle__grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.handle__item{display:grid;gap:10px;align-content:start;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel);font-weight:600;line-height:1.3}
.handle__item .ico{width:26px;height:26px;color:var(--accent)}
.handle__note{margin-top:18px;color:var(--text-secondary)}
.charge{display:grid;gap:14px;justify-items:start;padding:26px 22px;border-radius:24px;background:radial-gradient(ellipse 90% 70% at 90% 0%,var(--glow),transparent 70%),var(--graphite);border:1px solid var(--line);color:var(--text-on-dark)}
.charge h2{color:var(--text-on-dark)}
.charge p{color:var(--text-on-dark-2);max-width:48ch}
.req__in{display:grid;gap:24px;align-items:start}
.form{display:grid;gap:16px;padding:22px 18px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.form__grid{display:grid;gap:14px}
.form__note{color:var(--text-secondary)}
.form .btn{justify-self:start}
.form__fine{font-size:14px;color:var(--text-label)}

/* ---------- ABOUT ---------- */
.story{display:grid;gap:16px;max-width:62ch}
.story p{font-size:18px;line-height:1.6}
.values{list-style:none;display:grid;gap:12px}
.value{padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--panel);display:grid;gap:8px}
.value .ico{width:28px;height:28px;color:var(--accent)}
.value p{color:var(--text-secondary)}
.restfig{padding:12px;border:1px solid var(--line);border-radius:24px;background:var(--panel)}
.restfig .drive{width:100%;height:auto}
.two{list-style:none;display:grid;gap:12px}
.two__item{display:grid;gap:8px;justify-items:start;padding:20px;border-left:3px solid var(--logo-green);background:var(--panel);border-radius:0 16px 16px 0}
.two__item:nth-child(2){border-left-color:var(--logo-red)}
.two__item h3{font-size:20px}
.two__item p{color:var(--text-secondary)}
.two__item a{font-weight:600}

/* ---------- CONTACT ---------- */
.ccards{list-style:none;display:grid;gap:12px}
.ccard{display:grid;gap:8px;align-content:start;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.ccard__k{display:flex;align-items:center;gap:8px;font:500 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-label)}
.ccard__k .ico{width:18px;height:18px;color:var(--accent)}
.ccard__v{font-size:18px;font-weight:600;word-break:break-word}
.ccard__v a{color:var(--text-primary)}
.ccard .wechat{padding:0;border:0;background:none}
/* live clocks: open now (Contact) and Peshawar / China time (Trading & Sourcing); shown only when the script runs */
[data-open][hidden],[data-clocks][hidden]{display:none!important}
.openst{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:2px 0 0;font-size:15px;color:var(--text-secondary)}
.openst__dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--text-label)}
.openst.is-open .openst__dot{background:var(--accent);box-shadow:0 0 0 4px var(--accent-muted)}
.openst.is-open [data-open-text]{color:var(--text-primary);font-weight:600}
.openst__time{font:500 12px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-label)}
.openst__time b{font-weight:500;color:var(--text-secondary)}
.tzrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;margin-top:4px;font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-label)}
.tzrow p{margin:0}
.tzrow__item{display:flex;align-items:baseline;gap:9px}
.tzrow__v{font:800 22px/1 var(--f-display);letter-spacing:0;text-transform:none;color:var(--text-primary);font-variant-numeric:tabular-nums}
.tabs__list{display:none}
.js .tabs__list{display:flex;gap:6px;padding:5px;border-radius:14px;background:var(--sunken);margin-bottom:14px;max-width:520px}
.tabs__btn{flex:1;min-height:48px;border:0;border-radius:10px;background:transparent;color:var(--text-secondary);font:600 15px var(--f-body);cursor:pointer;transition:background-color .25s,color .25s,box-shadow .25s}
.tabs__btn[aria-selected=true]{background:var(--panel);color:var(--text-primary);box-shadow:0 2px 8px -4px rgba(27,32,35,.35)}
.tabs__panel+.tabs__panel{margin-top:16px}
.js .tabs__panel+.tabs__panel{margin-top:0}
.tabs__panel h3{margin-bottom:12px}
.js .tabs__panel h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mapcard{display:grid;border:1px solid var(--line);border-radius:20px;background:var(--panel);overflow:hidden}
.mapcard svg{width:100%;height:auto;background:var(--map-bg)}
.mapcard__b{display:grid;gap:10px;justify-items:start;padding:18px}
.mapcard__t{font:800 19px var(--f-display)}

/* ---------- 404 ---------- */
.nf{min-height:calc(100svh - var(--bar));display:grid;align-content:center;gap:18px;justify-items:start;padding-top:calc(var(--hdr) + 32px);padding-bottom:48px}
/* the big 404: the zero is the owner's real oil seal (cut from the top-view photo; its moulded markings untouched) */
.n404{display:flex;align-items:center;gap:.04em;margin-bottom:-6px;font:800 clamp(120px,24vw,250px)/1 var(--f-display);letter-spacing:-.02em;color:var(--text-primary)}
.n404 img{width:auto;height:.8em;margin:0 .02em;filter:drop-shadow(0 14px 24px rgba(0,0,0,.45))}

/* ---------- page to page: a soft fade where the browser supports it ---------- */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}

/* ---------- pause everything on hidden tabs ---------- */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* =====================================================================
   Wider screens
   ===================================================================== */
@media (min-width:600px){
  .pgrid{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:repeat(2,1fr)} /* two tiles since the owner removed car decoration */
  .tile{flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:132px}
  .ccards{grid-template-columns:1fr 1fr}
  .values{grid-template-columns:repeat(3,1fr)}
  .form__grid{grid-template-columns:1fr 1fr}
  .fld--wide{grid-column:1/-1}
  .who__list{grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 32px}
  .two{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  body{padding-bottom:0}
  .wrap{padding:0 40px}
  h3{font-size:21px}
  .lead{font-size:18px}
  .sec{padding:96px 0}
  .sec-head{margin-bottom:36px}
  .hdr__in{gap:24px}
  .nav{display:flex;gap:26px;margin-left:auto}
  .nav a{position:relative;padding:8px 0;color:var(--text-primary);text-decoration:none;font-weight:600;font-size:15px}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--logo-green);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
  .nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
  .hdr__wa{display:inline-flex}
  .theme-btn{margin-left:0}
  .menu-btn,.mpanel{display:none!important}
  .cbar{display:none}
  .fwa{display:grid;place-items:center;position:fixed;right:24px;bottom:24px;z-index:45;width:58px;height:58px;border-radius:50%;
    background:var(--whatsapp);color:var(--whatsapp-ink);box-shadow:0 12px 28px -12px rgba(18,140,70,.9);transition:transform .3s var(--ease-out)}
  .fwa .ico{width:28px;height:28px}
  .fwa:hover{transform:translateY(-3px) scale(1.04);color:var(--whatsapp-ink)}
  .belt-div{width:calc(100% - 80px)}

  .hero-img{object-position:68% 50%}
  .hero-scrim{background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 38%,rgba(10,10,18,.55) 100%),linear-gradient(90deg,rgba(8,9,12,.66) 0%,rgba(8,9,12,.36) 36%,rgba(8,9,12,0) 56%)}
  .bands{display:flex;align-items:center;height:100%;max-width:var(--wrap);margin:0 auto;padding:calc(var(--hdr) + 24px) 40px 40px}
  .band{width:min(46%,560px);max-width:none}
  .hero-btns .btn{flex:none;padding:0 22px}
  .hero-sub{font-size:18px}

  .svc-grid{grid-template-columns:1fr 1fr;gap:18px}
  .svc{padding:30px 30px 32px}
  .pgrid{grid-template-columns:repeat(5,1fr);gap:14px} /* ten product groups: two even rows of five */
  .pcard{grid-template-columns:1fr;gap:12px;padding:12px 12px 18px;align-items:start;align-content:start}
  .pcard__txt{padding:0 6px}
  .find__in{grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .why__grid{grid-template-columns:5fr 7fr;gap:20px}
  .why__big{padding:34px 32px;display:flex;flex-direction:column;justify-content:flex-end;min-height:360px}
  .why__num{font-size:180px}
  .why__list{grid-template-columns:1fr 1fr}
  .who__in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px}
  .who__list{display:flex;flex-wrap:wrap;gap:12px 32px}
  .teaser__card{grid-template-columns:1fr 1fr;align-items:center;padding:40px 44px;gap:32px}
  .teaser__fig{margin:0}
  .cta{padding:96px 0}
  .cta__deco{width:420px;right:-40px;bottom:-120px}
  .ftr{padding-bottom:32px}
  .ftr__top{grid-template-columns:2fr 1fr 1.6fr;gap:48px}

  .phead{padding:calc(var(--hdr) + 64px) 0 48px}
  .phead__in{grid-template-columns:1.25fr 1fr;gap:48px}
  .phead__fig{max-width:420px}
  .phead--photo{min-height:min(76vh,700px);display:flex;align-items:center}
  .phead--photo::before{background:linear-gradient(90deg,rgba(8,9,12,.88) 0%,rgba(8,9,12,.62) 40%,rgba(8,9,12,.08) 74%),linear-gradient(0deg,rgba(8,9,12,.5),rgba(8,9,12,0) 30%)}
  .phead--photo .phead__txt{max-width:600px}
  .chips ul{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
  .prod{padding:64px 0}
  .prod__in{grid-template-columns:5fr 7fr;grid-template-areas:"fig txt" "spec txt";gap:24px 56px}
  .prod:nth-of-type(even) .prod__in{grid-template-columns:7fr 5fr;grid-template-areas:"txt fig" "txt spec"}
  .prod__fig{grid-area:fig;max-width:400px;justify-self:center}
  .prod__txt{grid-area:txt;align-self:center}
  .spec{grid-area:spec;max-width:400px;justify-self:center}
  .prod__extra{margin-top:40px}

  .how__in{grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .how__vis{display:block;position:sticky;top:calc(var(--hdr) + 40px)}
  .handle__grid{grid-template-columns:repeat(4,1fr);gap:14px}
  .handle__item{padding:20px}
  .charge{grid-template-columns:1fr auto;align-items:center;padding:40px 44px;gap:24px 48px}
  .charge>div{display:grid;gap:12px}
  .req__in{grid-template-columns:7fr 4fr;gap:32px}
  .form{padding:30px}

  .ccards{grid-template-columns:repeat(3,1fr)}
  .ccard--wide{grid-column:span 2}
  .mapcard{grid-template-columns:1.4fr 1fr;align-items:center}
  .nf{min-height:100svh}
}
@media (min-width:1200px){
  .ccards{grid-template-columns:repeat(3,1fr)}
}
/* decorations step aside on short screens */
@media (max-height:520px) and (min-width:900px){.cta__deco,.why__dim{display:none}}

/* =====================================================================
   Reduced motion: everything in its final state, nothing moves
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv,.js .rv-stagger>*{opacity:1;transform:none}
  .js .drive .hl,.js .drive .hminor,.js .drive .seal{opacity:1}
  .js .route--draw .r-prog{stroke-dashoffset:0}
  .js .spec .o,.js .spec .h,.js .spec .dm{stroke-dashoffset:0}
  .js .spec .c,.js .spec .ar,.js .spec .t{opacity:1}
  .js .why__measure .h,.js .why__measure .dm{stroke-dashoffset:0}
  .js .why__measure .ar,.js .why__measure .t{opacity:1}
  .strip--ready .strip__track{width:auto}
  .strip--ready .strip__set{flex-wrap:wrap;justify-content:center;width:100%;padding:10px 12px}
  .strip--ready .strip__name{padding:12px 14px;font-size:clamp(16px,2vw,24px)}
  .strip--ready .strip__view{-webkit-mask-image:none;mask-image:none}
  .strip__dup,.strip__set--dup,.strip--ready .strip__btn{display:none!important}
}

/* ---------- spacing and small fixes that used to be inline style="" attributes (moved here so the security policy can block inline styles) ----------
   !important keeps the same strength an inline style had. */
.u-pt0{padding-top:0!important}.u-pt8{padding-top:8px!important}.u-pt24{padding-top:24px!important}.u-pb0{padding-bottom:0!important}
.u-mt22{margin-top:22px!important}.u-mt24{margin-top:24px!important}.u-mb24{margin-bottom:24px!important}.u-mb28{margin-bottom:28px!important}
.u-rot90{transform:rotate(90deg)!important}
.hero-ring__bar{stroke-dashoffset:var(--ld,126)!important}
[data-pk-bar]{--len:.43}

/* ---------- CONTACT: photo header (the WhatsApp glow picture, owner 2026-10-10), the same dark look in both themes ---------- */
.phead--contact{position:relative;isolation:isolate;overflow:clip;background:#111417;--text-primary:#F1EEE7;--text-secondary:#D9DCD7;--text-label:#CDD2CE;color:var(--text-primary)}
.phead--contact .btn-line{color:#F4F1EA;border-color:rgba(244,241,234,.72);background:rgba(10,12,14,.28)}
.phead--contact .btn-line:hover,.phead--contact .btn-line:focus-visible{color:#F4F1EA;background:rgba(244,241,234,.1)}
.phead__pic{position:absolute;z-index:-1;top:0;left:0;right:0;height:calc(var(--hdr) + 340px)}
.phead__pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.phead__pic::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#111417 0%,rgba(17,20,23,.55) 30%,rgba(17,20,23,0) 60%),linear-gradient(180deg,rgba(17,20,23,.75) 0%,rgba(17,20,23,0) 30%)}
@media (max-width:899px){.phead--contact{padding-top:calc(var(--hdr) + 270px)}}
@media (min-width:600px) and (max-width:899px){.phead__pic img{object-position:80% 45%}.ccard:nth-child(5){grid-column:1 / -1}}
@media (min-width:900px){
  .phead--contact{min-height:600px;display:flex;align-items:center;padding-bottom:64px}
  .phead__pic{left:auto;bottom:0;width:66%;height:auto}
  .phead__pic img{object-position:80% 50%}
  .phead__pic::after{background:linear-gradient(90deg,#111417 0%,rgba(17,20,23,.82) 22%,rgba(17,20,23,.2) 52%,rgba(17,20,23,0) 70%),linear-gradient(0deg,#111417 0%,rgba(17,20,23,0) 22%),linear-gradient(180deg,rgba(17,20,23,.7) 0%,rgba(17,20,23,0) 26%)}
  .ccards{grid-template-columns:repeat(6,1fr)}.ccard{grid-column:span 2}.ccard:nth-child(n+4){grid-column:span 3}
}