:root{
  --bg:#F4F6F9; --bg-2:#E8EDF4; --ink:#16181E; --ink-2:#4E5664; --muted:#818A99; --line:#D8DFE9;
  --accent:#1E6FB8; --accent-ink:#283E8C; --on-accent:#fff; --dark:#0E1A3A; --dark-ink:#F4F6F9; --dark-muted:#9AA7C4; --dark-line:#24345F;
  --cta:#283E8C; --cta-ink:#fff; --cta-hover:#1E6FB8; --sky:#268FC5;
  --sec:clamp(36px,5vw,72px);
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0F1A; --bg-2:#131B2A; --ink:#F0F3F8; --ink-2:#B1BACA; --muted:#76819A; --line:#212B3F;
    --accent:#4FB0E8; --accent-ink:#8CCDF3; --on-accent:#0A0F1A; --dark:#101B3B; --dark-ink:#F0F3F8; --dark-muted:#93A1C2; --dark-line:#26386A;
    --cta:#4FB0E8; --cta-ink:#0A0F1A; --cta-hover:#8CCDF3; --sky:#4FB0E8;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0F1A; --bg-2:#131B2A; --ink:#F0F3F8; --ink-2:#B1BACA; --muted:#76819A; --line:#212B3F;
  --accent:#4FB0E8; --accent-ink:#8CCDF3; --on-accent:#0A0F1A; --dark:#101B3B; --dark-ink:#F0F3F8; --dark-muted:#93A1C2; --dark-line:#26386A;
  --cta:#4FB0E8; --cta-ink:#0A0F1A; --cta-hover:#8CCDF3; --sky:#4FB0E8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1320px;margin:0 auto;padding-inline:clamp(16px,3.5vw,48px)}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-0.035em;text-wrap:balance}
h2{font-size:clamp(34px,4.6vw,64px);line-height:1;letter-spacing:-0.04em}
p{margin:0}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;flex:0 1 auto;min-width:0}
.logo img{height:34px;width:auto;max-width:100%}
.logo .logo-d{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo .logo-l{display:none}:root:not([data-theme="light"]) .logo .logo-d{display:block}}
:root[data-theme="dark"] .logo .logo-l{display:none}
:root[data-theme="dark"] .logo .logo-d{display:block}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.nav ul a{padding:8px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--ink-2);transition:color .2s,background .2s}
.nav ul a:hover{color:var(--ink)}
.nav ul a.on{color:var(--ink);background:var(--bg-2)}
.nav ul a.solid{background:var(--cta);color:var(--cta-ink);margin-left:8px}
.nav ul a.solid:hover{background:var(--cta-hover);color:var(--cta-ink)}
.logo,.nav ul a{white-space:nowrap}
/* phones: the logo links home, so drop the redundant Home pill and give the logo the room */
@media(max-width:479px){.logo img{height:auto;width:clamp(150px,52vw,230px)}.nav ul li:first-child{display:none}.nav ul a.solid{margin-left:0}}

/* hero */
.hero{padding-block:clamp(16px,2.5vw,32px) 0}
.hero-bg{position:relative;border-radius:18px;overflow:hidden;background:#EDE9E2;min-height:clamp(380px,min(33vw,calc(100vh - 130px)),520px);min-height:clamp(380px,min(33vw,calc(100svh - 130px)),520px);display:flex;align-items:center}
.hero-bg>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 55%}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(245,243,238,.96) 0%,rgba(245,243,238,.88) 36%,rgba(245,243,238,.45) 64%,rgba(245,243,238,0) 100%)}
.hero-text{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(22px,3.6vw,52px) clamp(24px,5vw,72px);max-width:700px;color:#16181E}
.hero-text .label{color:#1E6FB8}
.hero h1{font-size:clamp(36px,3.9vw,58px);line-height:.98;letter-spacing:-0.045em;margin-top:14px;color:#16181E}
.hero h1 span{color:#283E8C}
.hero-text p{font-size:clamp(15px,1.2vw,18px);line-height:1.45;color:#3B4252;max-width:46ch;margin-top:16px}
.hero-text .go{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:500;font-size:15px;border:0;cursor:pointer;font-family:inherit;background:var(--cta);color:var(--cta-ink);transition:background .2s,color .2s,transform .2s}
.btn:hover{background:var(--cta-hover);color:var(--cta-ink)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.line:hover{background:var(--bg-2);color:var(--ink)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-text .btn{background:#283E8C;color:#FFFFFF}
.hero-text .btn:hover{background:#1E6FB8;color:#fff}
.hero-text .btn.line{background:rgba(255,255,255,.35);color:#16181E;box-shadow:inset 0 0 0 1px rgba(40,62,140,.4)}
.hero-text .btn.line:hover{background:rgba(255,255,255,.7);color:#283E8C}
.hero-bg .cap{position:absolute;right:20px;bottom:20px;z-index:2;display:none;gap:8px;flex-wrap:wrap}
@media(min-width:900px){.hero-bg .cap{display:flex}}
/* same composition on every screen: text left over the photo. Below 900px the box height follows the text, and text scales with screen width */
@media(max-width:899px){
  .hero-bg{min-height:0}
  .hero-bg>img{object-position:84% 55%}
  .hero-bg::before{background:linear-gradient(90deg,rgba(245,243,238,.97) 0%,rgba(245,243,238,.92) 50%,rgba(245,243,238,.4) 82%,rgba(245,243,238,0) 100%)}
  .hero-text{max-width:min(100%,540px);padding:clamp(18px,5vw,40px) clamp(18px,5.5vw,44px)}
  .hero-text .label{font-size:clamp(11px,2.8vw,12px)}
  .hero h1{font-size:clamp(28px,7.6vw,52px);margin-top:clamp(8px,2.2vw,14px)}
  .hero-text p{font-size:clamp(15px,3.6vw,17px);margin-top:clamp(10px,2.6vw,16px)}
  .hero-text .go{margin-top:clamp(14px,3.6vw,22px);gap:10px}
  .hero-text .btn{padding:clamp(12px,2.8vw,13px) clamp(16px,4.2vw,21px);font-size:clamp(14px,3.5vw,15px)}
}
@media(max-width:599px){.hero-bg::before{background:linear-gradient(90deg,rgba(245,243,238,.96) 0%,rgba(245,243,238,.9) 55%,rgba(245,243,238,.62) 100%)}}
.hero-bg .cap span{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.7);color:#111214;backdrop-filter:blur(8px);border:1px solid rgba(17,18,20,.12)}

/* marquee */
.marquee{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;padding-block:16px}
.marquee div{display:inline-flex;gap:0;animation:slide 40s linear infinite}
.marquee span{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);padding-inline:28px;border-right:1px solid var(--line)}
@keyframes slide{to{transform:translateX(-50%)}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 24px;padding-block:clamp(30px,4vw,52px)}
@media(min-width:860px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats b{display:block;font-size:clamp(44px,5.6vw,80px);font-weight:500;letter-spacing:-0.05em;line-height:.95;font-variant-numeric:tabular-nums}
.stats b sup{font-size:.45em;vertical-align:top;color:var(--accent);margin-left:2px;top:.25em;position:relative}
.stats span{display:block;margin-top:12px;color:var(--ink-2);font-size:15px;max-width:20ch}

/* process */
.process{padding-block:var(--sec);border-top:1px solid var(--line)}
.pgrid{display:grid;gap:28px}
@media(min-width:960px){.pgrid{grid-template-columns:1fr 1.4fr;gap:80px}}
.sticky{align-self:start}
/* only pin the heading block when it sits beside the list (2-column layout); on phones/tablets it stacks above it */
@media(min-width:960px){.sticky{position:sticky;top:96px}}
.sticky h2{margin-top:16px}
.sticky p{margin-top:20px;color:var(--ink-2);max-width:36ch;font-size:17px}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start;transition:padding-left .25s}
@media(min-width:640px){.rows li{grid-template-columns:72px 1.1fr 1fr;gap:24px;padding:30px 0}}
.rows li:hover{padding-left:8px}
.rows .num{font-family:var(--mono);font-size:13px;color:var(--muted);padding-top:6px}
.rows h3{font-size:clamp(20px,2.2vw,28px);letter-spacing:-0.03em;line-height:1.1}
.rows p{color:var(--ink-2);font-size:15.5px;line-height:1.5;grid-column:2}
@media(min-width:640px){.rows p{grid-column:auto;padding-top:5px}}
.rows .tag{margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--accent);letter-spacing:.02em}

/* full-bleed dark */
.dark{background:var(--dark);color:var(--dark-ink);padding-block:var(--sec)}
.dark .label{color:var(--dark-muted)}
.dgrid{display:grid;gap:28px}
@media(min-width:960px){.dgrid{grid-template-columns:1.1fr .9fr;gap:72px;align-items:center}}
.dark h2{margin-top:16px;max-width:14ch}
.dark p.big{margin-top:24px;font-size:clamp(17px,1.5vw,20px);color:var(--dark-muted);max-width:44ch;line-height:1.45}
.dark .facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:36px;border-top:1px solid var(--dark-line)}
.dark .facts div{padding:18px 0;border-bottom:1px solid var(--dark-line)}
.dark .facts div:nth-child(odd){padding-right:16px}
.dark .facts div:nth-child(even){padding-left:16px;border-left:1px solid var(--dark-line)}
.dark .facts b{display:block;font-weight:500;font-size:20px;letter-spacing:-0.02em}
.dark .facts span{display:block;font-size:13.5px;color:var(--dark-muted);margin-top:2px}
.dark .phs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:960px){.dark .phs{grid-template-columns:1fr;gap:14px}}
.dark .ph{border-radius:14px;overflow:hidden;position:relative}
.dark .ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.dark .ph.wide img{aspect-ratio:16/10;object-position:50% 40%}
.dark .ph.tall img{aspect-ratio:16/10;object-position:65% 50%}
.dark .models{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.dark .models span{font-family:var(--mono);font-size:12px;padding:8px 12px;border-radius:999px;border:1px solid var(--dark-line);color:var(--dark-ink)}

/* machines strip */
.machines{padding-block:var(--sec)}
.mhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.mhead h2{margin-top:16px;max-width:14ch}
.mhead p{color:var(--ink-2);max-width:36ch}
.strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-block:24px 8px;margin-inline:calc(-1 * clamp(16px,3.5vw,48px));padding-inline:clamp(16px,3.5vw,48px);scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip figure{margin:0;flex:0 0 min(78vw,300px);scroll-snap-align:start;background:var(--bg-2);border-radius:14px;overflow:hidden}
.strip .ph{aspect-ratio:1;background:#F0F0EE;padding:22px;display:grid;place-items:center}
.strip .ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .4s}
.strip figure:hover .ph img{transform:scale(1.04)}
.strip figcaption{padding:16px 18px 20px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}
.strip h3{font-size:16px;letter-spacing:-0.02em}
.strip small{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.strip .idx{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* team */
.team{padding-block:0 var(--sec)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
@media(min-width:760px){.tgrid{gap:20px}}
.tgrid figure{margin:0}
.tgrid .ph{aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--bg-2)}
.tgrid img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform:scale(1.06);filter:grayscale(1);transition:filter .4s,transform .6s}
.tgrid figure:hover img{filter:grayscale(0);transform:scale(1.1)}
.tgrid h3{margin-top:14px;font-size:16px;letter-spacing:-0.02em}
.tgrid span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:2px}

/* catalogues */
.cats{padding-block:var(--sec);border-top:1px solid var(--line)}
.cats-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cats-head h2{margin-top:16px;max-width:14ch}
.cats-head p{color:var(--ink-2);max-width:36ch}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px;margin-top:26px}
.cat{display:block;background:var(--bg-2);border-radius:14px;overflow:hidden;transition:transform .25s}
.cat:hover{transform:translateY(-4px)}
.cat .ph{position:relative;aspect-ratio:3/2;overflow:hidden;background:#EDE9E2}
.cat .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat:hover .ph img{transform:scale(1.05)}
.cat .dl{position:absolute;right:12px;bottom:12px;width:42px;height:42px;border-radius:50%;background:var(--cta);color:var(--cta-ink);display:grid;place-items:center;box-shadow:0 4px 14px rgba(14,26,58,.25);transition:background .2s,transform .2s}
.cat:hover .dl{background:var(--cta-hover);transform:translateY(2px)}
.cat .dl svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cat-info{padding:16px 18px 20px}
.cat-info h3{font-size:17px;letter-spacing:-0.02em}
.cat-info small{display:block;font-size:13.5px;color:var(--ink-2);margin-top:4px;line-height:1.4}
.cat-info .meta{display:block;margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--accent)}

/* closing */
.close{border-top:1px solid var(--line);padding-block:clamp(44px,6vw,88px)}
.close h2{font-size:clamp(40px,7vw,104px);letter-spacing:-0.05em;line-height:.95}
.close h2 a{display:inline-flex;align-items:center;gap:.2em;color:var(--accent);transition:color .2s}
.close h2 a:hover{color:var(--accent-ink)}
.close h2 a svg{width:.7em;height:.7em;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.close h2 a:hover svg{transform:translate(4px,-4px)}
.close p{margin-top:24px;color:var(--ink-2);max-width:44ch;font-size:17px}

/* contact page */
.contact{padding-block:clamp(32px,5vw,72px)}
.contact h1{font-size:clamp(44px,8vw,120px);line-height:.94;letter-spacing:-0.05em;margin-top:16px}
.contact h1 span{color:var(--muted)}
.cgrid{display:grid;gap:32px;margin-top:clamp(26px,3.5vw,48px)}
@media(min-width:900px){.cgrid{grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}}
.clist{display:grid;border-top:1px solid var(--line)}
.clist a,.clist div{display:grid;grid-template-columns:80px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);font-size:17px}
.clist span{font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--muted);padding-top:4px}
.clist a b{font-weight:500}
.clist a:hover b{color:var(--accent)}
.clist em{font-style:normal;font-weight:400;font-size:13px;color:var(--muted);margin-left:10px;white-space:nowrap}
.clist a:hover em{color:var(--accent)}
.contact .ph{margin-top:28px;border-radius:14px;overflow:hidden}
.contact .ph img{width:100%;object-fit:cover;aspect-ratio:4/3;object-position:60% 50%}
form{display:grid;gap:22px}
.f2{display:grid;gap:22px}
@media(min-width:560px){.f2{grid-template-columns:1fr 1fr}}
label{display:grid;gap:8px;font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--muted)}
input,textarea{font-family:var(--sans);font-size:17px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0;width:100%;transition:border-color .2s}
input:focus,textarea:focus{border-color:var(--ink);outline:none}
textarea{min-height:120px;resize:vertical}
form .btn{justify-self:start;margin-top:8px}
.note{font-size:13px;color:var(--muted)}

footer{border-top:1px solid var(--line);padding-block:28px 40px;font-size:13.5px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between}

/* accessibility + SEO additions */
.skip{position:absolute;left:-9999px;top:8px;background:var(--cta);color:var(--cta-ink);padding:10px 16px;border-radius:8px;z-index:50}
.skip:focus{left:8px}
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-hidden]{margin-inline:8px}

/* faq */
.faq{padding-block:var(--sec);border-top:1px solid var(--line)}
.faq h2{margin-top:16px;max-width:16ch}
.faq-list{margin-top:26px;border-top:1px solid var(--line);max-width:920px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:clamp(17px,1.6vw,20px);font-weight:500;letter-spacing:-0.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:22px;color:var(--accent);flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--ink-2);font-size:16px;max-width:68ch}
.faq details p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* footer links */
footer .flinks{display:flex;flex-wrap:wrap;gap:8px 20px}
footer a:hover{color:var(--ink)}

/* contact intro */
.contact .intro{margin-top:18px;max-width:64ch;color:var(--ink-2);font-size:clamp(16px,1.3vw,18px);line-height:1.5}

/* manufacturing models (OEM / ODM / SKD / CKD / BOT) for brands */
.capmodels{padding-block:var(--sec) 0}
.capmodels h2{margin-top:16px;max-width:20ch}
.capmodels .cm-intro{margin-top:18px;color:var(--ink-2);font-size:clamp(16px,1.3vw,18px);max-width:64ch;line-height:1.5}
.capgrid{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px}
.capgrid li{background:var(--bg-2);border-radius:14px;padding:20px 20px 22px}
.capgrid b{display:block;font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:.02em;color:var(--accent)}
.capgrid small{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.02em}
.capgrid p{margin-top:12px;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.cm-cta{margin-top:24px;font-size:15px;color:var(--ink-2)}
.cm-cta a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.cm-cta a:hover{color:var(--accent-ink)}

/* journey timeline */
.journey{padding-block:var(--sec) 0}
.journey h2{margin-top:16px;max-width:18ch}
.journey .jintro{margin-top:18px;color:var(--ink-2);font-size:clamp(16px,1.3vw,18px);max-width:64ch}
.timeline{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:600px){.timeline{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.timeline{grid-template-columns:repeat(3,1fr)}}
.timeline li{background:var(--bg-2);border-radius:14px;padding:18px 20px 20px;border-top:3px solid var(--line)}
.timeline li.now{border-top-color:var(--accent)}
.timeline li.next{border-top-style:dashed;border-top-color:var(--accent)}
.timeline b{display:block;font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.02em;color:var(--accent)}
.timeline li.next b::after{content:" · planned";color:var(--muted)}
.timeline li.now b::after{content:" · now";color:var(--muted)}
.timeline p{margin-top:8px;color:var(--ink-2);font-size:15px;line-height:1.5}

/* team qualifications */
.tgrid em{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--accent);margin-top:6px}
/* hero photo: zoomed out. On tablet/desktop the photo is fitted to the box (more of the product wall visible),
   anchored right, and its left edge fades into the hero background behind the text. Phones keep the full-cover crop. */
@media(min-width:600px){
  .hero-bg>img{inset:auto;top:50%;right:0;height:var(--hero-zoom,124%);width:auto;max-width:none;transform:translateY(-47%);object-fit:fill;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
}
@media(min-width:600px) and (max-width:899px){.hero-bg{--hero-zoom:116%}}
@media(min-width:900px) and (max-width:1199px){.hero-bg{--hero-zoom:108%}}
@media(min-width:900px) and (max-width:1199px){.hero-text{max-width:540px}}

/* ==========================================================================
   Mobile & tablet UX (under 960px), mobile-first:
   - Phone  (max-width:599px):  one column, generous type, large tap targets.
   - Tablet (600px-959px):      a light two-column layout where the extra
                                  width allows it, still comfortable to read.
   Desktop (960px+) is untouched. Nothing here renders body copy smaller than
   ~13-14px, and every tap target (nav links, buttons, cards) stays close to
   or above the ~44px finger-target guideline.
   ========================================================================== */
@media(max-width:959px){
  h2{font-size:clamp(28px,7vw,52px)}

  /* bigger, easier-to-hit nav links -- tablets are touchscreens too */
  .nav ul a{padding:11px 16px}

  /* stats keep the base 2-column stack (set outside this block); just add room */
  .stats{gap:24px 20px}

  /* hover never fires on a touchscreen -- give taps a visible press state instead */
  .btn:active{transform:scale(.97)}
  .cat:active{transform:scale(.99)}
}

/* ---- phone: one thing at a time, full width, roomy tap targets ---- */
@media(max-width:599px){
  /* how we build: heading first, then the list, both full width */
  .sticky h2{font-size:clamp(26px,7.5vw,36px);margin-top:12px}
  .sticky p{font-size:16px;margin-top:12px;max-width:none}
  .rows li{grid-template-columns:36px 1fr;gap:4px 12px;padding:20px 0}
  .rows li:hover{padding-left:0}
  .rows .num{font-size:13px;padding-top:4px}
  .rows h3{font-size:19px}
  .rows p{font-size:14.5px;line-height:1.5}
  .rows .tag{font-size:12px;margin-top:8px}

  /* factory band: text first, the two photos side by side below it */
  .dgrid{grid-template-columns:1fr;gap:24px}
  .dark .phs{grid-template-columns:1fr 1fr;gap:10px}
  .dark h2{font-size:clamp(26px,7.5vw,36px);margin-top:12px;max-width:none}
  .dark p.big{font-size:15px;margin-top:12px;max-width:none}
  .dark .facts{margin-top:20px}
  .dark .facts b{font-size:18px}
  .dark .facts span{font-size:12.5px}
  .dark .models span{font-size:12px}

  /* our own machines: keep the horizontal swipe strip (a natural touch pattern) */
  .mhead{flex-direction:column;align-items:flex-start;gap:8px}
  .mhead h2{max-width:none}
  .mhead p{max-width:none}

  /* journey: one era per row -- easy to read and to scroll past */
  .journey .jintro{font-size:15px;max-width:none}
  .timeline{grid-template-columns:1fr;gap:12px;margin-top:20px}
  .timeline li{padding:16px 18px}
  .timeline b{font-size:13px}
  .timeline p{font-size:14.5px;line-height:1.5;margin-top:6px}

  /* team: a compact row per person -- photo on the left, details on the right */
  .tgrid{grid-template-columns:1fr;gap:14px;margin-top:20px}
  .tgrid figure{display:grid;grid-template-columns:88px 1fr;column-gap:14px;align-items:start}
  .tgrid .ph{aspect-ratio:1/1;grid-row:1/4}
  .tgrid h3{margin-top:0;font-size:16.5px}
  .tgrid span{font-size:14px}
  .tgrid em{font-size:12px}

  /* catalogues: the grid already goes full-width below ~630px on its own;
     this just gives each card room to breathe */
  .cats-head{flex-direction:column;align-items:flex-start;gap:10px}
  .cats-head h2{max-width:none}
  .cats-head p{max-width:none}
  .catgrid{margin-top:20px}
  .cat-info{padding:14px 16px 16px}
  .cat-info h3{font-size:17px}
  .cat-info small{font-size:14px}

  /* FAQ: readable questions, full-width tap rows */
  .faq h2{max-width:none}
  .faq summary{font-size:16.5px;padding:18px 0}
  .faq details p{font-size:15px;padding-bottom:20px}

  /* closing call to action */
  .close h2{font-size:clamp(30px,9vw,56px)}
  .close p{font-size:15px;margin-top:14px}

  /* contact page: one column, roomy fields, a thumb-width primary button */
  .contact h1{font-size:clamp(34px,11vw,56px)}
  .contact .intro{font-size:15px}
  .cgrid{grid-template-columns:1fr;gap:28px}
  .clist a,.clist div{grid-template-columns:1fr;gap:4px;padding:16px 0;font-size:16px}
  .clist span{font-size:12px}
  .clist b{overflow-wrap:break-word}
  .clist em{display:block;margin:2px 0 0;white-space:normal;font-size:13px}
  .contact .ph{margin-top:20px}
  .f2{grid-template-columns:1fr}
  form{gap:18px}
  label{font-size:12px}
  input,textarea{font-size:16px}   /* 16px stops iOS zooming the page on focus */
  form .btn{width:100%;justify-content:center;margin-top:4px}
  .note{font-size:13px}
  .crumbs{font-size:12px}

  footer{font-size:13px}
  footer .wrap{gap:10px 24px}

  /* blog */
  .blog-hero p{max-width:none}
  .blog-list{margin-top:22px}
  .post-body{max-width:none}
  .post-cta{padding:22px}
}

/* ---- tablet: enough width for a light two-column layout ---- */
@media(min-width:600px) and (max-width:959px){
  .pgrid{grid-template-columns:1fr 1.3fr;gap:36px}
  .sticky h2{font-size:clamp(30px,5vw,44px)}
  .sticky p{font-size:16px}

  .dgrid{grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
  .dark .phs{grid-template-columns:1fr;gap:12px}

  .timeline{grid-template-columns:repeat(2,1fr);gap:14px}

  .cgrid{grid-template-columns:1fr 1fr;gap:40px;align-items:start}
}

/* ==========================================================================
   Blog: listing page and article
   ========================================================================== */
.blog-hero{padding-block:clamp(32px,5vw,72px) 0}
.blog-hero h1{margin-top:16px}
.blog-hero p{margin-top:18px;color:var(--ink-2);font-size:clamp(16px,1.3vw,18px);max-width:64ch}
.blog-list{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:20px;padding-bottom:var(--sec)}
.blog-list li{background:var(--bg-2);border-radius:14px;overflow:hidden;transition:transform .25s}
.blog-list li:hover{transform:translateY(-4px)}
.blog-list a{display:block}
.blog-list .ph{aspect-ratio:16/10;overflow:hidden;background:#EDE9E2}
.blog-list .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.blog-list li:hover .ph img{transform:scale(1.05)}
.blog-list .bl-info{padding:20px 22px 24px}
.blog-list time,.blog-list .svc-tag{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.blog-list h2{margin-top:10px;font-size:22px;letter-spacing:-0.02em;line-height:1.15}
.blog-list p{margin-top:10px;color:var(--ink-2);font-size:15px;line-height:1.5}

/* article */
.post{padding-block:clamp(32px,5vw,72px) var(--sec)}
.post-head{max-width:72ch}
.post time{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.post h1{margin-top:14px;font-size:clamp(32px,5vw,56px);line-height:1.05;letter-spacing:-0.03em}
.post .lead{margin-top:20px;color:var(--ink-2);font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:60ch}
.post .ph{margin-top:32px;border-radius:14px;overflow:hidden}
.post .ph img{width:100%;object-fit:cover;aspect-ratio:16/9}
.post-body{margin-top:40px;max-width:68ch}
.post-body h2{font-size:clamp(24px,3vw,32px);letter-spacing:-0.02em;margin-top:48px;line-height:1.15}
.post-body h2:first-child{margin-top:0}
.post-body h3{font-size:19px;letter-spacing:-0.01em;margin-top:28px}
.post-body p{margin-top:16px;color:var(--ink-2);font-size:16.5px;line-height:1.65}
.post-body ul,.post-body ol{margin-top:16px;padding-left:22px;color:var(--ink-2);font-size:16.5px;line-height:1.65}
.post-body li+li{margin-top:8px}
.post-body p a,.post-body li a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.post-body strong{color:var(--ink);font-weight:600}
.post-table-wrap{margin-top:24px;overflow-x:auto}
.post-table{width:100%;min-width:460px;border-collapse:collapse;font-size:15px}
.post-table th,.post-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.post-table th{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;color:var(--muted);font-weight:500}
.post-table td{color:var(--ink-2)}
.post-table td:first-child,.post-table th:first-child{color:var(--ink);font-weight:500;padding-left:0}
.post-cta{margin-top:48px;padding:32px;background:var(--bg-2);border-radius:16px}
.post-cta h3{font-size:22px;letter-spacing:-0.02em}
.post-cta p{margin-top:10px;color:var(--ink-2);font-size:15.5px;max-width:52ch}
.post-cta .btn{margin-top:20px}
.post-back{display:inline-flex;align-items:center;gap:6px;margin-top:40px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.post-back:hover{color:var(--accent)}