/* Archivo variable font, self-hosted (weight 100–900, width 62–125%) */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations"),url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20C0,U+2113,U+A720-A7FF}
/* ETHAR® Products — main stylesheet */
:root{
  --ink:#0F1D31; --ink-2:#172A44; --ink-3:#24395A;
  --orange:#EE7A1E; --orange-dk:#D4650C;
  --steel:#A3AEBD; --steel-lt:#D6DCE4;
  /* supporting shades of the two brand colours */
  --navy-50:#EEF2F8; --navy-100:#DDE5F0; --navy-400:#4A6890; --navy-500:#2E4A70;
  --orange-50:#FFF5EC; --orange-100:#FDE4CD; --orange-300:#F5A866;
  --steel-grad:linear-gradient(100deg,#8D98A8 0%,#EEF1F5 40%,#A9B3C1 70%,#DCE1E8 100%);
  --bg:#F2F4F7; --surface:#FFFFFF; --text:#0F1D31; --muted:#56637A; --line:#DDE2E9;
  --on-ink:#FFFFFF; --on-ink-muted:#AEB9C9;
  --tooth:22px; --head-h:74px;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#0C1626;--surface:#13213A;--text:#E8EDF4;--muted:#9AA7BA;--line:#24344F;--navy-50:#122039;--navy-100:#1A2C4A;--orange-50:#2A1E14;--orange-100:#3A2816;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#0C1626;--surface:#13213A;--text:#E8EDF4;--muted:#9AA7BA;--line:#24344F;--navy-50:#122039;--navy-100:#1A2C4A;--orange-50:#2A1E14;--orange-100:#3A2816;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--head-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
h1,h2,h3{font-stretch:118%;line-height:1.08;margin:0;letter-spacing:-.01em}
h2{font-size:clamp(30px,4vw,46px);font-weight:800}
h3{font-size:22px;font-weight:750}
p{margin:0}
.skip{position:absolute;left:-999px;top:0;background:var(--orange);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:10px;top:10px}

/* the catalogue's short orange rule */
.rule::after{content:"";display:block;width:56px;height:4px;background:var(--orange);margin-top:18px}

/* zigzag edge */
.zz-bottom{position:relative}
.zz-bottom::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--tooth);background:var(--bg);z-index:2;
  -webkit-mask:conic-gradient(from 135deg at 50% 0,#000 90deg,transparent 0) 0 0/calc(var(--tooth)*2) var(--tooth) repeat-x;
          mask:conic-gradient(from 135deg at 50% 0,#000 90deg,transparent 0) 0 0/calc(var(--tooth)*2) var(--tooth) repeat-x}

/* buttons — corners clipped like the logo's cuts */
.btn{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:650;font-size:15.5px;padding:14px 26px;border:0;cursor:pointer;text-decoration:none;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));transition:background .2s,color .2s}
.btn-orange{background:var(--orange);color:#fff}.btn-orange:hover{background:var(--orange-dk)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:var(--ink-3)}
.btn-sm{padding:10px 18px;font-size:14.5px}
.chip{display:inline-block;font-size:13px;font-weight:600;padding:4px 12px;background:color-mix(in srgb,var(--orange) 12%,transparent);color:var(--orange-dk);margin-bottom:12px}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.07)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--head-h);gap:24px}
.brand img{height:30px;width:auto}
nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
nav a{color:var(--on-ink-muted);text-decoration:none;font-size:15.5px;font-weight:500;padding:6px 0}
nav a:hover,nav a[aria-current]{color:#fff}
nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--orange)}
.top-actions{display:flex;align-items:center;gap:18px}
.top-call{color:#fff;text-decoration:none;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.menu{display:none;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;font:inherit;font-weight:600;cursor:pointer;padding:7px 14px}

/* hero */
.hero{background:var(--ink);color:var(--on-ink);overflow:hidden;position:relative}
.hero-photo{position:absolute;top:0;right:0;bottom:0;width:60%;background-size:cover;background-position:center 40%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.hero .wrap{position:relative;z-index:1;min-height:min(78vh,680px);display:flex;align-items:center;padding:72px 0 110px}
.hero-copy{max-width:580px}
.hero h1{font-size:clamp(40px,5.8vw,76px);font-weight:850;font-stretch:122%}
.hero h1 span{display:block;color:var(--steel)}
.hero .lede{margin-top:26px;font-size:19px;color:var(--on-ink-muted);max-width:40ch}
.cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}

/* highlights */
.facts{padding:72px 0 60px}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:4px 26px 4px 22px;border-left:3px solid var(--line)}
.fact:first-child{border-left-color:var(--orange)}
.fact h3{font-size:18px;font-stretch:110%}
.fact p{margin-top:8px;color:var(--muted);font-size:15.5px}

/* about */
.about{padding:48px 0 110px}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:center}
.about-photo{margin:0;height:100%;max-height:620px;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 48px),calc(100% - 48px) 100%,0 100%)}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-text p{color:var(--muted);margin-top:18px;max-width:60ch}
.about-text p.first{color:var(--text);font-size:20px;margin-top:28px}
.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:20px 52px;margin:40px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.stats dt{font-size:36px;font-weight:850;font-stretch:118%;line-height:1}
.stats dd{margin:8px 0 0;color:var(--muted);font-size:14.5px}

/* range — zigzag rows joined by a route line */
.range{background:var(--surface);padding:104px 0 96px;border-block:1px solid var(--line)}
.range .head{max-width:620px;margin-bottom:56px}
.range .head p{margin-top:18px;color:var(--muted)}
.zig{position:relative}
.zig .route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.route path{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-dasharray:9 9;stroke-linecap:round;opacity:.8}
.route circle{fill:var(--surface);stroke:var(--orange);stroke-width:3}
.row{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:1}
.row + .row{margin-top:64px}
.row:nth-of-type(even) .pic{order:2;justify-self:end}
.pic{display:block;width:100%;max-width:470px;aspect-ratio:1/1;overflow:hidden;background:var(--ink);
  clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,32px 100%,0 calc(100% - 32px))}
.pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pic:hover img{transform:scale(1.04)}
.txt h3{font-size:clamp(24px,2.6vw,32px)}
.txt h3 a,.prow h3 a{text-decoration:none}
.txt p{margin-top:14px;color:var(--muted);max-width:44ch}
.txt .price,.pd-info .price{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.more{display:inline-block;margin-top:20px;color:var(--orange-dk);font-weight:650;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.range-all{margin-top:72px;text-align:center}

/* photo band */
.band{background-color:var(--ink);background-size:cover;background-position:center 55%;position:relative;color:#fff;padding:120px 0}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,29,49,.94) 0%,rgba(15,29,49,.7) 55%,rgba(15,29,49,.35) 100%)}
.band .wrap{position:relative}
.band-line{font-size:clamp(30px,4.4vw,54px);font-weight:850;font-stretch:120%;line-height:1.08;max-width:15ch}

/* tables */
.tablebox{overflow-x:auto;background:var(--surface);border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:15.5px}
th,td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
thead th{background:var(--ink);color:#fff;font-weight:600;font-size:14px}
thead th.rate{background:var(--orange)}
td.rate{color:var(--orange-dk);font-weight:750;background:color-mix(in srgb,var(--orange) 7%,transparent)}
td.size{font-weight:750;font-stretch:112%}
.num{text-align:right}
tbody tr:hover{background:color-mix(in srgb,var(--steel) 10%,transparent)}
.ask{color:var(--orange-dk);font-weight:600}
.note{margin-top:14px;font-size:14px;color:var(--muted)}

/* page head */
.pagehead{background:var(--ink);color:#fff;padding:72px 0 92px}
.pagehead h1{font-size:clamp(38px,5vw,64px);font-weight:850}
.pagehead p{margin-top:14px;color:var(--on-ink-muted);max-width:54ch;font-size:18px}
.pagehead a{color:#fff}
.catnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.catnav a{color:#fff;text-decoration:none;font-size:14.5px;font-weight:600;padding:8px 16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.catnav a:hover{background:var(--orange);box-shadow:none}

/* catalogue */
.catalog{padding:40px 0 100px}
.cat{padding-top:56px}
.cat h2{margin-bottom:40px}
.prow{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:start;padding:36px 0;border-top:1px solid var(--line)}
.prow:nth-of-type(even){grid-template-columns:1fr 320px}
.prow:nth-of-type(even) .pic{order:2}
.prow .pic{max-width:none}
.prow h3{font-size:clamp(22px,2.4vw,28px)}
.prow .sum{margin:10px 0 22px;color:var(--muted);max-width:62ch}
.prow .more{margin-top:16px}

/* product detail */
.pdetail{padding:40px 0 90px}
.crumbs{font-size:14.5px;color:var(--muted);margin-bottom:28px}
.crumbs a{color:var(--muted)}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.pd-photo{margin:0;background:var(--ink);aspect-ratio:1/1;overflow:hidden;clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,40px 100%,0 calc(100% - 40px))}
.pd-photo img{width:100%;height:100%;object-fit:cover}
.pd-info h1{font-size:clamp(32px,4vw,52px);font-weight:850}
.pd-info .sum{margin-top:16px;color:var(--muted);font-size:18px;max-width:46ch}
.speclist{margin:28px 0 0;border-top:1px solid var(--line)}
.speclist div{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.speclist dt{color:var(--muted)}
.speclist dd{margin:0;font-weight:600}
.pd-info .price{margin-top:24px;font-size:20px}
.pd-h{margin:80px 0 32px}

.related{padding:0 0 100px}
.related h2{margin-bottom:36px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);padding:0 0 24px}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:18px}
.card .chip,.card h3,.card p{margin-left:22px;margin-right:22px}
.card h3{font-size:20px}
.card p{margin-top:8px;color:var(--muted);font-size:15px}
.card:hover h3{color:var(--orange-dk)}

/* contact */
.quote{background:var(--ink);color:#fff;padding:104px 0 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.quote .lede{color:var(--on-ink-muted);margin-top:22px;max-width:42ch}
.contact-lines{display:grid;gap:4px;margin-top:36px}
.cline{display:flex;gap:16px;align-items:baseline;text-decoration:none;font-size:22px;font-weight:700;font-stretch:110%;padding:8px 0;font-variant-numeric:tabular-nums}
.cline span{font-size:14px;font-weight:500;color:var(--on-ink-muted);width:84px;font-stretch:100%}
.cline:hover{color:var(--orange)}
.addr{margin-top:28px;border-left:3px solid var(--orange);padding-left:20px;font-style:normal;color:var(--steel-lt);line-height:1.7;max-width:40ch}
.addr b{display:block;color:#fff;font-stretch:112%;margin-bottom:4px}
.maplink{display:inline-block;margin-top:16px;color:#fff;font-weight:600}
.qform{background:var(--ink-2);padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:18px;
  clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%)}
.qform label{display:grid;gap:7px;font-size:14px;color:var(--on-ink-muted);font-weight:500}
.qform label.full{grid-column:1/-1}
.qform input,.qform select,.qform textarea{font:inherit;font-size:16px;color:#fff;background:var(--ink);border:1px solid var(--ink-3);padding:12px 14px;border-radius:0;width:100%}
.qform input:focus,.qform select:focus,.qform textarea:focus{border-color:var(--orange);outline:none}
.qform textarea{min-height:110px;resize:vertical}
.qform .btn{grid-column:1/-1;justify-self:start}
.hp{position:absolute;left:-9999px}
.status{grid-column:1/-1;padding:12px 16px;font-size:15px}
.status.ok{background:rgba(110,200,130,.15);color:#A8E2B4}
.status.err{background:rgba(240,120,100,.15);color:#F6B8AA}
.map{margin-top:88px}
.map iframe{display:block;width:100%;height:340px;border:0;filter:grayscale(.6) contrast(1.05)}

/* footer */
.foot{background:#0A1424;color:#8592A6;padding:64px 0 40px;font-size:14.5px}
.foot .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.fbrand > img{height:26px;width:auto;margin-bottom:16px}
.fbrand p{max-width:34ch}
.maker{margin-top:26px;display:flex;align-items:center;gap:14px}
.maker span{font-size:13px}
.maker img{height:44px;width:auto}
.foot h4{color:#fff;font-size:15px;margin:0 0 14px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none}.foot a:hover{color:#fff}
.legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.08);padding-top:22px;margin-top:8px;font-size:13px}
.fab{display:none}

@media (max-width:1040px){
  .top-call{display:none}
  .row,.about-grid,.split,.pd-grid{grid-template-columns:1fr;gap:36px}
  .row:nth-of-type(even) .pic{order:0;justify-self:start}
  .zig .route{display:none}
  .about-photo{max-height:300px}
  .facts .wrap{grid-template-columns:1fr 1fr;gap:32px 0}
  .prow,.prow:nth-of-type(even){grid-template-columns:1fr;gap:24px}
  .prow:nth-of-type(even) .pic{order:0}
  .prow .pic{max-width:420px}
  .cards{grid-template-columns:1fr 1fr}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .hero-photo{width:75%;opacity:.55}
}
@media (max-width:760px){
  :root{--head-h:64px}
  nav{display:none;position:absolute;top:var(--head-h);left:0;right:0;background:var(--ink);padding:8px 20px 22px;border-top:1px solid rgba(255,255,255,.08)}
  nav.open{display:block}
  nav ul{flex-direction:column;gap:2px}
  nav a{display:block;padding:12px 0;font-size:17px}
  nav a[aria-current]{box-shadow:none;color:var(--orange)}
  .menu{display:block}
  .top-actions .btn{display:none}
  .brand img{height:26px}
  .hero .wrap{min-height:0;padding:300px 0 92px;align-items:flex-end}
  .hero-photo{width:100%;height:340px;bottom:auto;opacity:1;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
  .facts .wrap{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(3,1fr);gap:16px}
  .stats dt{font-size:26px}
  .qform{grid-template-columns:1fr;padding:26px}
  .cards{grid-template-columns:1fr}
  .speclist div{grid-template-columns:130px 1fr}
  .foot .wrap{grid-template-columns:1fr}
  .band{padding:84px 0}
  .fab{display:flex;position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;width:60px;height:60px;border-radius:50%;
    background:var(--orange);color:#fff;font-weight:700;font-size:14px;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.25)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* =========================================================
   Motion layer (v3) — smooth scroll, reveals, marquee,
   pinned showcase, preloader, cursor
   ========================================================= */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* preloader: the E assembles, then lifts away */
.preloader{display:none}
.js .preloader{display:grid;place-items:center;position:fixed;inset:0;z-index:200;background:var(--ink);
  animation:pl-failsafe 0s 3.2s forwards}
.preloader.done{transform:translateY(-100%);transition:transform .8s cubic-bezier(.7,0,.2,1)}
.preloader.skip{display:none!important}
@keyframes pl-failsafe{to{visibility:hidden;opacity:0}}
.pl-mark{position:relative;width:72px;height:78px}
.pl-mark i{position:absolute;left:0;background:linear-gradient(100deg,#8590a0,#eef1f5 45%,#9aa5b4);transform-origin:left;animation:pl-bar .7s cubic-bezier(.2,.8,.2,1) both}
.pl-mark i:nth-child(1){top:0;width:100%;height:19%}
.pl-mark i:nth-child(2){top:41%;width:100%;height:19%;animation-delay:.12s}
.pl-mark i:nth-child(3){top:41%;width:21%;height:59%;animation-delay:.24s;animation-name:pl-drop;transform-origin:top}
.pl-mark i:nth-child(4){bottom:0;width:100%;height:19%;animation-delay:.36s;background:var(--orange)}
@keyframes pl-bar{from{transform:scaleX(0)}}
@keyframes pl-drop{from{transform:scaleY(0)}}

/* header hides while reading, returns when scrolling up */
.top{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.top.hide{transform:translateY(calc(-100% - env(safe-area-inset-top,0px)))}

/* hero headline in masked lines */
.hero-title .ln{display:block;overflow:hidden;padding-bottom:.04em;color:#fff}
.hero-title .ln > span{display:inline-block;color:inherit}
.hero-title .ln.steel{color:var(--steel)}
.hero .hero-title span.ln{display:block}
.scroll-cue{position:absolute;left:max(20px,calc((100% - 1200px)/2));bottom:56px;z-index:3;width:26px;height:42px;border:2px solid rgba(255,255,255,.4);border-radius:14px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--orange);animation:cue 1.8s infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* orange rule draws in */
.js .rule::after{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1) .15s}
.js .rule.in::after,.no-motion .rule::after{transform:none}

/* marquee */
.marquee{background:var(--orange);color:#fff;overflow:hidden;padding:22px 0;position:relative}
.mq-track{display:flex;width:max-content;will-change:transform}
.mq-set{display:flex;align-items:center;flex:none}
.mq-set span{font-size:clamp(26px,3.4vw,44px);font-weight:850;font-stretch:122%;white-space:nowrap;padding:0 28px;line-height:1.1}
.mq-e{position:relative;width:22px;height:24px;flex:none;opacity:.85}
.mq-e::before,.mq-e::after{content:"";position:absolute;left:0;right:0;height:5px;background:#fff}
.mq-e::before{top:0;box-shadow:0 9px 0 #fff,0 19px 0 #fff}
.mq-e::after{top:9px;width:5px;height:15px}
.no-gsap .mq-track{animation:mq 40s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}

/* zigzag route that draws as you scroll */
.route .r-base{fill:none;stroke:var(--line);stroke-width:2.5;stroke-dasharray:9 9}
.route .r-draw{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round}
.route path:not(.r-base):not(.r-draw){display:none}

/* pinned horizontal showcase */
.hscroll{background:var(--ink);color:#fff;overflow:hidden}
.hs-pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:96px 0 80px}
.hs-head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:48px}
.hs-head p{color:var(--on-ink-muted);max-width:40ch}
.hs-track{display:flex;gap:28px;padding-left:max(20px,calc((100% - 1200px)/2));padding-right:40px;width:max-content;will-change:transform}
.hs-card{flex:none;width:min(360px,78vw);text-decoration:none;color:#fff;position:relative}
.hs-img{aspect-ratio:4/5;overflow:hidden;background:var(--ink-2);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px))}
.hs-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.hs-card:hover .hs-img img{transform:scale(1)}
.hs-no{position:absolute;top:14px;left:16px;z-index:2;font-weight:800;font-stretch:120%;font-size:14px;background:var(--orange);padding:3px 10px}
.hs-card h3{margin-top:18px;font-size:22px}
.hs-card p{margin-top:6px;color:var(--on-ink-muted);font-size:15px}
.hs-card:hover h3{color:var(--orange)}

/* split words in the photo band */
.band-line .w{display:inline-block;will-change:opacity}

/* custom cursor (mouse only) */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .js .cursor{display:block;position:fixed;left:0;top:0;z-index:150;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--orange);border-radius:50%;pointer-events:none;
    transition:width .25s,height .25s,margin .25s,background .25s,opacity .25s;opacity:0}
  .cursor.on{opacity:1}
  .cursor.big{width:72px;height:72px;margin:-36px 0 0 -36px;background:color-mix(in srgb,var(--orange) 18%,transparent);border-color:transparent}
}

/* back to top with scroll progress */
.totop{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:40;width:48px;height:48px;display:grid;place-items:center;
  background:var(--ink);color:#fff;border-radius:50%;text-decoration:none;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s,transform .3s;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.totop circle{fill:none;stroke:rgba(255,255,255,.15);stroke-width:2.5}
.totop .tt-p{stroke:var(--orange);stroke-dasharray:125.66;stroke-dashoffset:125.66}
.totop span{position:relative;font-weight:700}

@media (max-width:1040px){
  .hs-pin{min-height:0}
  .hs-track{overflow-x:auto;width:auto;scroll-snap-type:x mandatory;padding-bottom:12px;-webkit-overflow-scrolling:touch}
  .hs-card{scroll-snap-align:start}
  .scroll-cue{display:none}
}
@media (max-width:760px){
  .totop{bottom:calc(92px + env(safe-area-inset-bottom,0px));right:24px;width:44px;height:44px}
  .marquee{padding:16px 0}
}
@media (prefers-reduced-motion:reduce){
  .js .preloader{display:none}
  .js .rule::after{transform:none}
}

/* =========================================================
   v4 — supporting shades + more scroll motion
   ========================================================= */
/* top scroll progress */
.progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:3px;z-index:70;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--orange-300),var(--orange));transform:scaleX(0);transform-origin:left}

/* hero: soft orange glow and steel depth */
.hero{background:radial-gradient(70% 90% at 0% 100%,rgba(46,74,112,.55),transparent 60%),radial-gradient(40% 50% at 30% 10%,rgba(238,122,30,.10),transparent 70%),var(--ink)}
.hero-frame{position:absolute;inset:0;overflow:hidden}

/* highlights as soft cards */
.facts .wrap{gap:18px}
.fact{border-left:0;background:var(--surface);padding:26px 24px 28px;border-top:3px solid var(--navy-100);transition:border-color .3s,background .3s,transform .3s}
.fact:first-child{border-top-color:var(--orange)}
.fact:hover{border-top-color:var(--orange);background:var(--orange-50);transform:translateY(-4px)}

/* about stats on a tinted plate */
.stats{background:var(--navy-50);border-top:0;padding:24px 28px;gap:20px 48px}

/* range: gentle tint + giant outline word drifting behind */
.range{background:linear-gradient(180deg,var(--surface) 0%,var(--navy-50) 100%);position:relative;overflow:hidden}
.ghost-word{position:absolute;left:0;top:120px;white-space:nowrap;font-size:clamp(140px,22vw,340px);font-weight:900;font-stretch:125%;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--navy-100);pointer-events:none;z-index:0;user-select:none}
.range .wrap{position:relative;z-index:1}
.chip{background:var(--orange-50);color:var(--orange-dk)}
.pic{background:var(--navy-500)}
.txt .more:hover,.more:hover{color:var(--orange)}

/* showcase: navy depth with a warm corner */
.hscroll{background:radial-gradient(50% 60% at 100% 0%,rgba(238,122,30,.12),transparent 70%),linear-gradient(180deg,var(--ink) 0%,#13284A 100%)}
.hs-card .hs-img{background:var(--navy-500)}

/* second marquee: outlined, opposite direction */
.marquee.alt{background:var(--navy-50);color:var(--ink);border-block:1px solid var(--navy-100)}
.marquee.alt .mq-set span{color:transparent;-webkit-text-stroke:1.5px var(--navy-400)}
.marquee.alt .mq-set span:nth-child(4n+1){color:var(--ink);-webkit-text-stroke:0}
.marquee.alt .mq-e::before,.marquee.alt .mq-e::after{background:var(--orange)}
.marquee.alt .mq-e::before{box-shadow:0 9px 0 var(--orange),0 19px 0 var(--orange)}

/* tables: navy tint stripes */
tbody tr:nth-child(even){background:var(--navy-50)}
tbody tr:hover{background:var(--orange-50)}

/* contact: deeper navy blend */
.quote{background:radial-gradient(60% 70% at 100% 100%,rgba(46,74,112,.45),transparent 70%),var(--ink)}
.qform{background:linear-gradient(160deg,var(--ink-2),#1B3354)}

/* heading words rise from a mask */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.wm > span{display:inline-block;will-change:transform}

/* 3D tilt on photos (mouse only) */
@media (hover:hover) and (pointer:fine){
  .tilt{transform-style:preserve-3d;will-change:transform}
}

/* footer revealed from under the page (desktop) */
@media (min-width:1041px){
  .reveal-foot main{position:relative;z-index:1;background:var(--bg);box-shadow:0 30px 60px rgba(15,29,49,.18)}
  .reveal-foot .foot{position:fixed;left:0;right:0;bottom:0;z-index:0}
}

/* =========================================================
   v5 — site sequence: About · Products · Applications ·
   Why ETHAR · Gallery · Reviews · Contact
   ========================================================= */
nav a{font-size:15px}
nav a[aria-current="true"]{color:#fff;box-shadow:inset 0 -2px 0 var(--orange)}
@media (max-width:1320px){ .top-call{display:none} }
@media (max-width:1120px) and (min-width:761px){ nav ul{gap:16px} nav a{font-size:14px} }

.kicker{display:flex;align-items:center;gap:12px;color:var(--orange-dk);font-weight:650;font-size:15px;margin-bottom:16px}
.kicker::before{content:"";width:26px;height:2px;background:currentColor}
.apps .kicker,.gallery .kicker,.hscroll .kicker{color:var(--orange-300)}

/* zigzag teeth grow in */
.js .zz-bottom::after{transform:scaleY(0);transform-origin:bottom;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.js .zz-bottom.teeth::after,.no-motion .zz-bottom::after,.js .hero.zz-bottom::after{transform:none}

/* ---------- Applications: stacking cards ---------- */
.apps{background:radial-gradient(60% 50% at 0% 0%,rgba(46,74,112,.55),transparent 70%),radial-gradient(40% 40% at 100% 100%,rgba(238,122,30,.10),transparent 70%),var(--ink);color:#fff;padding:120px 0 130px}
.apps-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
.apps-head{position:sticky;top:calc(var(--head-h) + 48px)}
.apps-head p:not(.kicker){color:var(--on-ink-muted);margin:20px 0 32px;max-width:36ch}
.stack{display:grid;gap:26px}
.scard{position:sticky;top:calc(var(--head-h) + 48px + var(--i) * 16px);min-height:300px;padding:40px 40px 36px;
  background:linear-gradient(150deg,#1D3658 0%,#152B48 60%,#12253F 100%);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 -24px 50px -24px rgba(0,0,0,.55);will-change:transform;
  clip-path:polygon(0 0,calc(100% - 36px) 0,100% 36px,100% 100%,0 100%)}
.scard-no{position:absolute;right:40px;top:28px;font-size:64px;font-weight:900;font-stretch:125%;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(163,174,189,.35)}
.scard-ic{width:54px;height:54px;fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scard h3{margin:26px 0 10px;font-size:clamp(22px,2.2vw,28px)}
.scard p{color:var(--on-ink-muted);max-width:48ch}
.scard-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.scard-links a{font-size:14px;font-weight:600;color:#fff;text-decoration:none;padding:7px 14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:background .25s,box-shadow .25s}
.scard-links a:hover{background:var(--orange);box-shadow:none}

/* ---------- Why ETHAR ---------- */
.why{background:linear-gradient(180deg,var(--navy-50) 0%,var(--bg) 100%);padding:120px 0 140px}
.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.why-head{position:sticky;top:calc(var(--head-h) + 48px)}
.why-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:44px 0 0}
.why-stats div{background:var(--surface);padding:22px 20px;border-top:3px solid var(--orange);box-shadow:0 18px 40px -26px rgba(15,29,49,.35)}
.why-stats dt{font-size:clamp(32px,3.4vw,46px);font-weight:850;font-stretch:120%;line-height:1;color:var(--ink)}
.why-stats dd{margin:10px 0 0;color:var(--muted);font-size:14px}
.why-list{list-style:none;margin:0;padding:0 0 0 46px;position:relative}
.why-line{position:absolute;left:12px;top:34px;bottom:34px;width:3px;background:var(--navy-100)}
.why-line i{display:block;width:100%;height:100%;background:linear-gradient(180deg,var(--orange-300),var(--orange));transform:scaleY(0);transform-origin:top}
.why-item{display:grid;grid-template-columns:58px 1fr;gap:16px;padding:30px 0;border-bottom:1px solid var(--navy-100);position:relative;transition:opacity .5s}
.why-item::before{content:"";position:absolute;left:-40px;top:40px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:3px solid var(--navy-100);transition:border-color .4s,background .4s}
.why-item b{font-size:22px;font-weight:850;font-stretch:120%;color:var(--orange)}
.why-item h3{font-size:clamp(20px,2vw,24px)}
.why-item p{margin-top:8px;color:var(--muted);max-width:52ch}
.js .why-item{opacity:.35}
.js .why-item.on,.no-motion .why-item{opacity:1}
.why-item.on::before{border-color:var(--orange);background:var(--orange)}
.no-motion .why-line i{transform:none}

/* ---------- Gallery (pinned horizontal) ---------- */
.gallery .hs-track{align-items:center}
.gal-card{flex:none;width:min(460px,82vw);margin:0}
.gal-card.tall{width:min(330px,70vw)}
.gal-img{aspect-ratio:4/3;overflow:hidden;background:var(--navy-500);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px))}
.gal-card.tall .gal-img{aspect-ratio:3/4}
.gal-img img{width:116%;max-width:none;height:100%;margin-left:-8%;object-fit:cover}
.gal-card figcaption{margin-top:16px;color:var(--on-ink-muted);font-size:15px;display:flex;align-items:center;gap:12px}
.gal-card figcaption span{background:var(--orange);color:#fff;font-size:12.5px;font-weight:700;padding:3px 10px}

/* ---------- Reviews ---------- */
.reviews{background:var(--surface);padding:110px 0 100px;overflow:hidden}
.rev-head{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap;margin-bottom:48px}
.rev-actions{display:flex;gap:12px;flex-wrap:wrap}
.rev-rows{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rev-row + .rev-row{margin-top:24px}
.rev-track{display:flex;gap:22px;width:max-content}
.rcard{flex:none;width:min(390px,80vw);margin:0;padding:28px 28px 24px;background:var(--navy-50);border-top:3px solid var(--orange);box-shadow:0 18px 40px -28px rgba(15,29,49,.4)}
.stars{color:var(--orange);letter-spacing:2px;font-size:17px}
.stars span{color:var(--navy-100)}
.rcard p{margin-top:14px;color:var(--text)}
.rcard footer{margin-top:18px;color:var(--muted);font-size:14.5px}
.rcard footer b{display:block;color:var(--text)}
.no-gsap .rev-track,.no-motion .rev-track{overflow-x:auto;width:auto}
.rev-empty{background:var(--navy-50);border:1.5px dashed var(--navy-100);padding:32px;max-width:720px}
.rev-empty p{color:var(--muted);font-size:18px}
.rev-flash{padding:12px 16px;margin-bottom:24px;max-width:720px}
.rev-flash.ok{background:#E3F4EA;color:#14653A}.rev-flash.err{background:#FBE6E2;color:#9A2E1F}
.rev-form{margin-top:44px}
.rev-form summary{cursor:pointer;font-weight:650;color:var(--orange-dk);display:inline-block;padding:4px 0;border-bottom:2px solid currentColor;list-style:none}
.rev-form summary::-webkit-details-marker{display:none}
.rev-form form{margin-top:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:var(--navy-50);padding:28px}
.rev-form label{display:grid;gap:6px;font-size:14px;color:var(--muted);font-weight:500}
.rev-form label.full{grid-column:1/-1}
.rev-form input,.rev-form select,.rev-form textarea{font:inherit;font-size:16px;padding:11px 13px;border:1px solid var(--navy-100);background:var(--surface);color:var(--text);border-radius:0;width:100%}
.rev-form input:focus,.rev-form select:focus,.rev-form textarea:focus{outline:2px solid var(--orange);outline-offset:-1px}
.rev-form .btn{justify-self:start}

/* depth: soft navy shadows on light-section cards */
.fact,.card,.tablebox{box-shadow:0 18px 40px -30px rgba(15,29,49,.45)}
.btn-orange{box-shadow:0 12px 26px -12px rgba(238,122,30,.65)}

@media (max-width:1040px){
  .apps-grid,.why-grid{grid-template-columns:1fr;gap:44px}
  .apps-head,.why-head{position:static}
  .scard{position:relative;top:auto;min-height:0}
  .why-stats{grid-template-columns:repeat(3,1fr)}
  .rev-form form{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  nav ul{gap:0}
  .apps,.why{padding:84px 0 96px}
  .scard{padding:30px 24px}
  .scard-no{font-size:44px;right:22px}
  .why-stats{grid-template-columns:1fr 1fr 1fr;gap:10px}
  .why-stats div{padding:16px 12px}
  .why-list{padding-left:36px}
  .why-item{grid-template-columns:44px 1fr}
  .why-item::before{left:-30px}
  .why-line{left:8px}
  .rev-form form{grid-template-columns:1fr;padding:20px}
}

/* =========================================================
   v6 — premium layer: depth, glass header, fullscreen menu,
   spotlight cards, page transitions, all screen sizes
   ========================================================= */
:root{
  /* layered shadows tinted with the brand navy */
  --sh-1:0 1px 2px rgba(15,29,49,.06),0 2px 6px rgba(15,29,49,.05);
  --sh-2:0 2px 4px rgba(15,29,49,.04),0 10px 20px -6px rgba(15,29,49,.10),0 28px 56px -20px rgba(15,29,49,.20);
  --sh-3:0 4px 8px rgba(15,29,49,.05),0 18px 36px -10px rgba(15,29,49,.16),0 56px 110px -30px rgba(15,29,49,.34);
  --sh-dark:inset 0 1px 0 rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.2),0 34px 70px -24px rgba(0,0,0,.6);
  --glow:0 0 0 1px rgba(238,122,30,.35),0 10px 30px -8px rgba(238,122,30,.6),0 2px 6px rgba(238,122,30,.3);
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- page transitions (Chrome/Edge/Safari 18+) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .45s var(--ease) both}
::view-transition-new(root){animation:vt-in .6s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-24px) scale(.985)}}
@keyframes vt-in{from{opacity:0;clip-path:inset(100% 0 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ---------- glass header that peeks in when the mouse reaches the top ---------- */
.top{background:rgba(15,29,49,.78);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px -18px rgba(0,0,0,.6);
  transition:transform .6s var(--ease),background .4s,box-shadow .4s}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--orange) 30%,var(--orange-300) 50%,var(--orange) 70%,transparent);
  transform:scaleX(0);transform-origin:center;transition:transform .9s var(--ease)}
.top.peek{transition:transform .7s cubic-bezier(.16,1.3,.3,1)}
.top.peek::after{transform:scaleX(1)}
.top.peek nav li{animation:peek-in .6s var(--ease) both;animation-delay:calc(var(--n,0) * 45ms + 80ms)}
.top.peek .brand,.top.peek .top-actions{animation:peek-in .6s var(--ease) both}
@keyframes peek-in{from{opacity:0;transform:translateY(-14px)}}
.peek-zone{position:fixed;left:0;right:0;top:0;height:16px;z-index:49}
.peek-hint{position:fixed;left:50%;top:0;z-index:49;width:120px;height:4px;margin-left:-60px;border-radius:0 0 4px 4px;background:var(--orange);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s;pointer-events:none}
.peek-hint.show{opacity:.85;transform:none}
@media (hover:none){.peek-zone,.peek-hint{display:none}}

/* nav link underline slides from the left */
nav a{position:relative;box-shadow:none!important}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
nav a:hover::after,nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}

/* ---------- buttons: sheen sweep + glow ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:background .3s,color .3s,box-shadow .4s,transform .4s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn:hover::before{transform:translateX(120%)}
.btn-orange{box-shadow:var(--glow)}
.btn-orange:hover{box-shadow:0 0 0 1px rgba(238,122,30,.5),0 16px 40px -8px rgba(238,122,30,.75)}
.btn-dark{box-shadow:var(--sh-2)}

/* ---------- depth on cards ---------- */
.fact,.card,.why-stats div,.rcard,.rev-empty,.stats{box-shadow:var(--sh-2);transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.fact:hover,.card:hover,.why-stats div:hover,.rcard:hover{box-shadow:var(--sh-3);transform:translateY(-6px)}
.tablebox{box-shadow:var(--sh-2)}
.qform{box-shadow:var(--sh-dark)}
.scard{box-shadow:var(--sh-dark)}
.hs-card .hs-img,.gal-img{transition:transform .6s var(--ease)}

/* spotlight: a soft light follows the mouse across cards */
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(238,122,30,.16),transparent 45%)}
.spot:hover::before{opacity:1}
.scard.spot::before{background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(238,122,30,.22),transparent 45%)}

/* hero: light follows the mouse, photo drifts against it */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(600px circle at var(--hx,30%) var(--hy,40%),rgba(238,122,30,.10),transparent 60%)}
.hero-photo{transition:translate 1.2s var(--ease)}

/* zigzag route: a glowing bead travels the line */
.route .bead{fill:var(--orange);filter:drop-shadow(0 0 6px rgba(238,122,30,.9))}

/* custom cursor label over photos */
.cursor span{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;opacity:0;transition:opacity .25s}
.cursor.view{width:86px;height:86px;margin:-43px 0 0 -43px;background:var(--orange);border-color:transparent;mix-blend-mode:normal}
.cursor.view span{opacity:1}

/* ---------- featured review ---------- */
.rev-feature{display:grid;gap:28px}
.rq{margin:0;max-width:980px;background:linear-gradient(150deg,var(--surface) 0%,var(--navy-50) 100%);padding:clamp(32px,5vw,64px);
  box-shadow:var(--sh-3);border-top:4px solid var(--orange);overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 44px) 0,100% 44px,100% 100%,0 100%)}
.rq-mark{position:absolute;right:clamp(24px,4vw,56px);top:clamp(24px,4vw,48px);width:clamp(60px,8vw,110px);fill:var(--orange-100);z-index:-1}
.rq .stars{font-size:20px}
.rq-text{margin-top:22px;font-size:clamp(22px,2.6vw,36px);font-weight:700;font-stretch:108%;line-height:1.3;color:var(--ink);max-width:28ch}
.rq footer{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px;color:var(--muted)}
.rq footer b{display:block;color:var(--text);font-size:17px}
.rq-av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:800;font-size:20px;box-shadow:var(--sh-2)}
.rq-badge{margin-left:auto;font-size:13px;font-weight:650;color:#14653A;background:#E3F4EA;padding:5px 12px}

/* ---------- footer wordmark ---------- */
.foot-mark{grid-column:1/-1;margin-top:28px;overflow:hidden}
.foot-mark img{width:100%;height:auto;opacity:.07;transform-origin:bottom}

/* ---------- fullscreen menu (tablets and phones) ---------- */
@media (max-width:1180px){
  .top-call{display:none}
  .menu{display:inline-flex;align-items:center;gap:10px;position:relative;z-index:3}
  .menu::after{content:"";width:18px;height:10px;border-block:2px solid currentColor;transition:transform .4s var(--ease)}
  .menu[aria-expanded="true"]::after{transform:rotate(90deg)}
  nav{display:block!important;position:fixed;inset:0;z-index:2;background:radial-gradient(70% 60% at 100% 0%,rgba(238,122,30,.14),transparent 60%),var(--ink);
    padding:calc(var(--head-h) + env(safe-area-inset-top,0px) + 24px) 24px 40px;overflow-y:auto;
    clip-path:circle(0% at calc(100% - 48px) 36px);transition:clip-path .8s cubic-bezier(.7,0,.2,1);visibility:hidden}
  nav.open{clip-path:circle(150% at calc(100% - 48px) 36px);visibility:visible}
  nav ul{flex-direction:column;gap:0;max-width:640px;margin:0 auto}
  nav li{border-bottom:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(30px);transition:opacity .5s,transform .6s var(--ease)}
  nav.open li{opacity:1;transform:none;transition-delay:calc(var(--n,0) * 55ms + 250ms)}
  nav a{display:block;padding:16px 0;font-size:clamp(26px,5vw,40px);font-weight:800;font-stretch:118%;color:#fff}
  nav a::after{bottom:10px}
  nav a[aria-current]{color:var(--orange)}
  .top-actions .btn{display:none}
  .top.hide{transform:translateY(calc(-100% - env(safe-area-inset-top,0px)))}
  body.menu-open{overflow:hidden}
}
@media (min-width:761px) and (max-width:1180px){ .top-actions .btn{display:inline-flex} }

/* ---------- every screen size ---------- */
img,svg,video{max-width:100%}
@media (max-width:380px){
  .wrap{width:calc(100% - 28px)}
  .hero h1{font-size:34px}
  h2{font-size:28px}
  .btn{padding:12px 18px;font-size:14.5px}
  .why-stats{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
}
@media (min-width:761px) and (max-width:1040px){
  .hero .wrap{min-height:560px}
  .facts .wrap{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:1fr 1fr;gap:40px}
  .row:nth-of-type(even) .pic{order:2}
  .cards{grid-template-columns:1fr 1fr}
  .why-stats{max-width:620px}
}
@media (min-width:1600px){
  .wrap{width:min(1440px,100% - 96px)}
  body{font-size:18px}
  .hero h1{font-size:clamp(76px,5vw,96px)}
  h2{font-size:clamp(46px,3vw,58px)}
  .pic{max-width:560px}
  .hs-card{width:400px}.gal-card{width:520px}.gal-card.tall{width:380px}
}
@media (min-width:2200px){
  :root{--head-h:92px}
  .wrap{width:min(1760px,100% - 160px)}
  body{font-size:20px}
  .brand img{height:38px}
  nav a{font-size:17px}
  nav ul{gap:34px}
  .hero h1{font-size:clamp(96px,4.6vw,132px)}
  h2{font-size:clamp(58px,2.8vw,76px)}
  .btn{font-size:18px;padding:18px 34px}
  .pic{max-width:680px}
  .scard{min-height:360px;padding:52px}
  .hs-card{width:480px}.gal-card{width:640px}.gal-card.tall{width:460px}
  .rcard{width:460px}
  .rq{max-width:1200px}
}

@media (max-width:1180px){ body.menu-open .top{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--ink);transform:none} }

/* =========================================================
   v7 — no clipped letters, pro hero, engineering motion,
   stacked application cards
   ========================================================= */

/* masks never cut letters sideways: only the vertical edge clips */
.hero-title .ln,.wm{overflow:visible;clip-path:inset(-0.02em -0.6em -0.14em -0.6em)}
.wm{padding-right:.04em}

/* ---------- hero ---------- */
.hero{min-height:max(660px,100svh);display:flex;flex-direction:column;padding:0}
.hero .wrap.hero-inner{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px;min-height:0;padding:calc(var(--head-h) * .6) 0 40px}
.hero-copy{max-width:none;width:min(760px,100%);container-type:inline-size}
.hero .hero-title{font-size:clamp(34px,11.6cqi,104px);font-stretch:118%;letter-spacing:-.015em;line-height:1.02}
.hero-kicker{display:inline-flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600;color:var(--steel-lt);padding:8px 16px 8px 12px;margin-bottom:28px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hk-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(238,122,30,.6);animation:hk 2s infinite}
@keyframes hk{70%{box-shadow:0 0 0 10px rgba(238,122,30,0)}100%{box-shadow:0 0 0 0 rgba(238,122,30,0)}}
.hero .lede{max-width:52ch;font-size:clamp(16px,1.25vw,20px)}
.hero-photo{width:62%}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,29,49,.35),transparent 30%,transparent 65%,rgba(15,29,49,.85))}
.hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 80% at 20% 40%,#000,transparent);mask-image:radial-gradient(70% 80% at 20% 40%,#000,transparent)}
.hero-bp{position:absolute;right:max(24px,calc((100% - 1200px)/2 - 20px));top:calc(var(--head-h) + 24px);width:clamp(120px,11vw,200px);z-index:1;color:rgba(255,255,255,.55);pointer-events:none}
.hero-inner{position:relative;z-index:2}
.hero-badge{position:relative;width:clamp(120px,10vw,170px);aspect-ratio:1;display:grid;place-items:center;align-self:end;margin-bottom:30px;text-decoration:none;
  border-radius:50%;background:rgba(15,29,49,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 20px 50px -20px rgba(0,0,0,.6)}
.hero-badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.hero-badge text{fill:#fff;font-size:13.5px;font-weight:700;letter-spacing:2.6px}
.hero-badge img{width:34%;border-radius:22%;transition:transform .5s var(--ease)}
.hero-badge:hover img{transform:scale(1.12) rotate(-8deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-strip{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.1);background:rgba(10,20,36,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hs-strip{display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:center;padding:22px 0 calc(22px + var(--tooth))}
.hst{padding:0 22px;border-left:1px solid rgba(255,255,255,.12)}
.hst:first-child{padding-left:0;border-left:0}
.hst b{display:block;font-variant-numeric:tabular-nums;font-size:clamp(20px,1.8vw,28px);font-weight:850;font-stretch:118%;line-height:1.1;color:#fff}
.hst span{font-size:13.5px;color:var(--on-ink-muted)}
.maker-mini{display:flex;align-items:center;gap:12px}
.maker-mini img{height:40px;width:auto}
.scroll-cue{display:none}

/* ---------- blueprint drawings ---------- */
.bp{width:100%;height:auto;stroke:currentColor;stroke-width:1.2;overflow:visible}
.bp *{vector-effect:non-scaling-stroke}
.bp .bp-c{stroke-dasharray:6 4;opacity:.6}
.bp .bp-d{stroke:var(--orange)}
.bp text{fill:currentColor;stroke:none;font-size:11px;font-weight:600;letter-spacing:.06em;font-family:inherit}
.js .bp :is(line,rect,path){stroke-dasharray:1;stroke-dashoffset:1}
.js .bp .bp-c{stroke-dasharray:1}
.js .bp text{opacity:0}
.no-motion .bp :is(line,rect,path){stroke-dashoffset:0}
.no-motion .bp text{opacity:1}
.head-bp{position:relative;max-width:none!important;display:grid;grid-template-columns:minmax(0,620px) 1fr;gap:40px}
.side-bp{color:var(--navy-400);width:clamp(140px,14vw,210px);justify-self:end;align-self:start;margin-top:-10px}
.why-bp{justify-self:start;margin-top:40px;color:var(--navy-400)}

/* ---------- pipe dividers: draw left to right with a sliding nut ---------- */
.pipe-div{position:relative;height:64px;background:var(--bg);overflow:hidden}
.pipe-div::before,.pd-fill{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px}
.pipe-div::before{background:repeating-linear-gradient(90deg,var(--navy-100) 0 14px,transparent 14px 20px)}
.pd-fill{background:linear-gradient(90deg,var(--steel-lt),var(--steel),var(--orange));transform:scaleX(0);transform-origin:left}
.pd-nut{position:absolute;top:50%;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;color:var(--orange)}
.nut{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.5}
.nut polygon{fill:var(--bg)}
.no-motion .pd-fill{transform:none}.no-motion .pd-nut{left:100%;display:none}

/* floating nuts in empty space */
.nuts{position:relative;height:200px;margin-top:40px}
.nuts .nut{position:absolute;color:rgba(163,174,189,.4);stroke-width:1.5}
.nuts .nut polygon{fill:transparent}
.nuts .nut:nth-child(1){width:110px;height:110px;left:0;top:10px}
.nuts .nut:nth-child(2){width:64px;height:64px;left:140px;top:90px;color:rgba(238,122,30,.55)}
.nuts .nut:nth-child(3){width:40px;height:40px;left:96px;top:0}

/* ---------- side rail: section joints, top to bottom ---------- */
.rail{position:fixed;left:clamp(14px,1.4vw,28px);top:50%;z-index:30;height:min(56vh,520px);transform:translateY(-50%);width:20px;opacity:0;transition:opacity .5s}
.rail.show{opacity:1}
.rail::before,.rail i{content:"";position:absolute;left:8px;top:0;bottom:0;width:4px;border-radius:2px}
.rail::before{background:rgba(163,174,189,.28)}
.rail i{background:linear-gradient(180deg,var(--orange-300),var(--orange));transform:scaleY(0);transform-origin:top}
.rail a{position:absolute;left:0;width:20px;height:20px;margin-top:-10px;text-decoration:none}
.rail a svg{width:20px;height:20px;fill:var(--bg);stroke:var(--navy-400);stroke-width:3;transition:transform .5s var(--ease),stroke .3s}
.rail a.on svg{stroke:var(--orange);transform:rotate(90deg) scale(1.25)}
.rail a span{position:absolute;left:30px;top:50%;transform:translate(-6px,-50%);white-space:nowrap;font-size:13px;font-weight:650;color:var(--text);background:var(--surface);padding:4px 10px;box-shadow:var(--sh-2);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.rail a:hover span{opacity:1;transform:translate(0,-50%)}
.rail.dark a span{background:var(--ink-2);color:#fff}
@media (max-width:1359px){.rail{display:none}}

/* ---------- applications: pinned stack, every title stays visible ---------- */
.scard{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:var(--tab,76px) auto auto;column-gap:18px;align-items:center;padding:0 34px 32px}
.scard-ic{grid-column:1;grid-row:1;width:40px;height:40px}
.scard h3{grid-column:2;grid-row:1;margin:0;font-size:clamp(19px,1.7vw,24px)}
.scard-no{position:static;grid-column:3;grid-row:1;font-size:15px;-webkit-text-stroke:0;color:var(--orange-300);font-weight:800}
.scard p{grid-column:1/-1;grid-row:2;align-self:start;margin-top:8px}
.scard-links{grid-column:1/-1;grid-row:3}
.scard::after{content:"";position:absolute;left:34px;right:34px;top:var(--tab,76px);height:1px;background:rgba(255,255,255,.08)}
@media (min-width:761px){
  .apps.stacked .apps-head{position:relative;top:auto}
  .apps.stacked .stack{position:relative;display:block;height:calc(var(--card-h) + (var(--n) - 1) * var(--tab))}
  .apps.stacked .scard{position:absolute;left:0;right:0;top:calc(var(--i) * var(--tab));height:var(--card-h);min-height:0;margin:0}
  .apps.stacked .apps-grid{align-items:center}
}
@media (max-width:1040px) and (min-width:761px){ .apps-grid{grid-template-columns:1fr} .nuts{display:none} }
@media (max-width:760px){ .nuts,.side-bp{display:none} .head-bp{grid-template-columns:1fr} }

/* hero on smaller screens */
@media (max-width:1040px){
  .hero .wrap.hero-inner{grid-template-columns:1fr}
  .hero-badge{position:absolute;right:0;bottom:10px;width:110px;margin:0}
  .hs-strip{grid-template-columns:repeat(2,1fr);gap:16px 0}
  .hst{padding:0 16px}.hst:nth-child(odd){padding-left:0;border-left:0}
  .maker-mini{grid-column:1/-1;border-left:0;padding-left:0}
  .hero-bp{display:none}
}
@media (max-width:760px){
  .hero{min-height:0}
  .hero .wrap.hero-inner{padding:300px 0 28px}
  .hero-photo{width:100%}
  .hero-badge{display:none}
  .hero-kicker{font-size:13px;margin-bottom:20px}
}
@media (min-width:2200px){
  .hero-copy{width:min(1000px,100%)}
  .hero .hero-title{font-size:clamp(34px,11.6cqi,132px)}
  .hst span{font-size:16px}
  .hero-kicker{font-size:17px}
}
.hero-strip{z-index:1}
.hero .wrap.hs-strip{min-height:0;display:grid;padding:22px 0 calc(22px + var(--tooth));align-items:center}
@media (max-width:760px){ .hero .wrap.hs-strip{padding:18px 0 calc(18px + var(--tooth))} }
.hero{min-height:100svh}
.hero .hero-title{font-size:min(clamp(34px,11.6cqi,104px),10.5svh)}
@media (max-width:1040px){
  .hero-photo::after{background:linear-gradient(90deg,rgba(15,29,49,.94) 0%,rgba(15,29,49,.7) 55%,rgba(15,29,49,.35) 100%)}
  .hero-photo{width:100%;opacity:1}
  .hero .hero-title{font-size:clamp(34px,11.6cqi,96px)}
}
@media (max-width:760px){ .hero-photo::after{background:linear-gradient(180deg,rgba(15,29,49,.1) 0%,rgba(15,29,49,.5) 60%,var(--ink) 100%)} }
@media (min-width:2200px){ .hero .hero-title{font-size:min(clamp(34px,11.6cqi,132px),11svh)} }