/* HaFra Trading — concept Dynique */
:root{
  --ink:#14222A; --ink-2:#1B2D36; --ink-3:#0E181D;
  --slate:#537C8F; --slate-deep:#1F3943;
  --copper:#CBA080; --copper-l:#DDBB9E; --copper-ink:#8A5D3B;
  --paper:#F3F1EC; --paper-2:#E8E4DC; --white:#FFFFFF;
  --text:#18252B; --muted:#4D5C63; --line:rgba(20,34,42,.12);
  --on-dark:#F4EFE8; --on-dark-2:rgba(244,239,232,.72); --line-dark:rgba(244,239,232,.12);
  --c-yellow:#FFD21F; --c-pink:#E25E86; --c-purple:#7C71B2; --c-red:#CD1719; --c-blue:#4E8CCB; --c-green:#6DB57A; --c-white:#EDEBE6;
  --r:6px;
  --display:'Archivo',system-ui,sans-serif; --sans:'Manrope',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:500;font-size:17px;line-height:1.62;color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:min(1320px,100% - 64px);margin-inline:auto}
@media (max-width:700px){.wrap{width:calc(100% - 32px)}}
h1,h2,h3,h4{font-family:var(--display);font-variation-settings:'wdth' 108;font-weight:700;letter-spacing:-.022em;line-height:1.03}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;opacity:.8}
.copper{color:var(--copper)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;border-radius:var(--r);font-weight:700;font-size:16px;letter-spacing:.005em;transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn svg{width:18px;height:18px;transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}
.btn-copper{background:var(--copper);color:#1B130C}
.btn-copper:hover{background:var(--copper-l)}
.btn-ghost{border:1.5px solid rgba(244,239,232,.35);color:var(--on-dark)}
.btn-ghost:hover{border-color:var(--copper);color:var(--copper)}
.btn-ink{background:var(--ink);color:var(--on-dark)}
.btn-ink:hover{background:var(--slate-deep)}
.btn-line{border:1.5px solid var(--line);color:var(--text)}
.btn-line:hover{border-color:var(--copper-ink);color:var(--copper-ink)}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--copper-ink);border-bottom:2px solid currentColor;padding-bottom:3px}
.link-arrow svg{width:16px;height:16px;transition:transform .25s}
.link-arrow:hover svg{transform:translateX(4px)}

/* header */
.hdr{position:fixed;inset:0 0 auto;z-index:60;height:96px;display:flex;align-items:center;color:var(--on-dark);transition:height .3s,background .3s,box-shadow .3s}
.hdr.solid{height:78px;background:rgba(20,34,42,.97);box-shadow:0 1px 0 var(--line-dark)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px}
.logo{display:block;color:var(--on-dark);flex:none}
.logo svg{display:block;height:62px;width:auto;transition:height .3s}
.hdr.solid .logo svg{height:52px}
.nav{display:flex;align-items:center;gap:34px}
.nav .lnk{font-weight:600;font-size:15.5px;opacity:.88;position:relative;padding:6px 0}
.nav .lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav .lnk:hover{opacity:1}.nav .lnk:hover::after,.nav .lnk[aria-current]::after{transform:scaleX(1)}
.nav .tel{font-family:var(--mono);font-size:14px;opacity:.8;display:inline-flex;gap:8px;align-items:center}
.nav .tel svg{width:16px;height:16px}
.nav .btn{min-height:46px;padding:0 20px;font-size:15px}
.burger{display:none;width:48px;height:48px;border-radius:var(--r);border:1.5px solid var(--line-dark);position:relative}
.burger span{position:absolute;left:13px;right:13px;height:2px;background:currentColor;transition:transform .3s,opacity .3s}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:23px}.burger span:nth-child(3){top:29px}
.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1080px){
  .nav .tel{display:none}
}
@media (max-width:920px){
  .hdr{height:80px}.hdr.solid{height:70px}
  .logo svg{height:48px}.hdr.solid .logo svg{height:44px}
  .burger{display:block}
  .nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:96px 28px 40px;transform:translateX(100%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
  .menu-open .nav{transform:none}
  .nav .lnk{font-family:var(--display);font-size:34px;font-weight:700;opacity:1}
  .nav .tel{display:inline-flex;margin-top:18px;font-size:16px}
  .nav .btn{margin-top:18px;min-height:54px;font-size:16px}
}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}

/* HERO */
.hero{position:relative;background:var(--ink);color:var(--on-dark);padding-top:136px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(244,239,232,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(244,239,232,.045) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 20%,transparent 75%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(40px,5vw,84px);align-items:center}
.hero .eyebrow{color:var(--copper)}
.hero h1{font-size:clamp(44px,5.5vw,86px);margin-top:22px}
.hero h1 .copper{display:block}
.hero .lead{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--on-dark-2);max-width:33em;margin-top:26px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero .direct{margin-top:24px;font-size:15px;color:var(--on-dark-2)}
.hero .direct a{color:var(--on-dark);font-weight:700;border-bottom:1.5px solid var(--copper)}

.hero-fig{position:relative;aspect-ratio:1/1;width:100%;max-width:640px;justify-self:end}
.hero-fig img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.hero-fig figcaption{position:absolute;left:0;bottom:-34px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:rgba(244,239,232,.5)}
.ann{position:absolute;width:0;height:0}
.ann i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 4px rgba(203,160,128,.28);transform:scale(0);animation:annDot .5s cubic-bezier(.3,1.6,.5,1) forwards}
.ann i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--copper);animation:annPulse 2.8s ease-out infinite;animation-delay:inherit}
.ann .ln{position:absolute;top:-1px;height:2px;width:var(--len,90px);background:var(--copper);transform:scaleX(0);animation:annLine .6s cubic-bezier(.6,0,.2,1) forwards}
.ann .lb{position:absolute;top:-19px;white-space:nowrap;background:rgba(14,24,29,.9);border:1px solid rgba(203,160,128,.45);border-radius:4px;padding:7px 12px 7px 10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--on-dark);opacity:0;animation:annLb .5s ease forwards}
.ann .lb b{color:var(--copper);font-weight:600;margin-right:8px}
.ann.r .ln{left:0;transform-origin:left}.ann.r .lb{left:var(--len,90px)}
.ann.l .ln{right:0;transform-origin:right}.ann.l .lb{right:var(--len,90px)}
.ann:nth-of-type(1) *{animation-delay:.9s}.ann:nth-of-type(1) .ln{animation-delay:1.1s}.ann:nth-of-type(1) .lb{animation-delay:1.5s}
.ann:nth-of-type(2) *{animation-delay:1.3s}.ann:nth-of-type(2) .ln{animation-delay:1.5s}.ann:nth-of-type(2) .lb{animation-delay:1.9s}
.ann:nth-of-type(3) *{animation-delay:1.7s}.ann:nth-of-type(3) .ln{animation-delay:1.9s}.ann:nth-of-type(3) .lb{animation-delay:2.3s}
.ann:nth-of-type(4) *{animation-delay:2.1s}.ann:nth-of-type(4) .ln{animation-delay:2.3s}.ann:nth-of-type(4) .lb{animation-delay:2.7s}
@keyframes annDot{to{transform:scale(1)}}
@keyframes annLine{to{transform:scaleX(1)}}
@keyframes annLb{to{opacity:1}}
@keyframes annPulse{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(2.4);opacity:0}}

.ann-legend{display:none}
.paths{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(64px,7vw,96px);border-top:1px solid var(--line-dark)}
.path{display:grid;grid-template-columns:auto 1fr auto;column-gap:18px;row-gap:4px;align-items:center;padding:28px 30px 32px;border-right:1px solid var(--line-dark);transition:background .3s}
.path:first-child{padding-left:0}
.path:last-child{border-right:0}
.path:hover{background:rgba(244,239,232,.035)}
.path .pcore{grid-column:1;grid-row:1/3;width:30px;height:30px;border-radius:50%;background:var(--copper);display:grid;place-items:center}
.path .pcore::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--cc);box-shadow:inset 0 0 0 6px var(--cc),inset 0 0 0 11px #E4CFBE}
.path b{grid-column:2;font-family:var(--display);font-variation-settings:'wdth' 108;font-size:21px;letter-spacing:-.01em}
.path span:not(.pcore){grid-column:2;color:var(--on-dark-2);font-size:15px;line-height:1.45}
.path svg{grid-row:1/3;grid-column:3;width:22px;height:22px;color:var(--copper);transition:transform .3s}
.path:hover svg{transform:translateX(4px)}

/* ticker */
.ticker{background:var(--copper);color:#1B130C;overflow:hidden;white-space:nowrap;border-block:1px solid rgba(0,0,0,.08)}
.ticker .track{display:inline-flex;animation:tick 42s linear infinite;padding:17px 0}
.ticker span{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:22px;padding-right:22px}
.ticker span i{width:11px;height:11px;border-radius:50%;background:var(--cc);box-shadow:0 0 0 2px rgba(27,19,12,.25)}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:clamp(84px,10vw,144px) 0}
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.sec-head h2{font-size:clamp(36px,4.3vw,66px)}
.sec-head p{color:var(--muted);font-size:18px;max-width:34em}
.sec-head .eyebrow{color:var(--copper-ink);margin-bottom:20px}

/* product cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .4s,transform .4s}
.card:hover{box-shadow:0 30px 60px -32px rgba(20,34,42,.45);transform:translateY(-3px)}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.card:hover .ph img{transform:scale(1.05)}
.card .bd{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .tag{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-ink);display:flex;align-items:center;gap:9px}
.card .tag i{width:9px;height:9px;border-radius:50%;background:var(--cc)}
.card h3{font-size:25px}
.card p{color:var(--muted);font-size:16px;line-height:1.55}
.sec-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:44px;flex-wrap:wrap}
.sec-foot p{color:var(--muted);font-size:16px}

/* KENMERKEN — cable cross-section */
.kenmerken{padding:clamp(72px,8vw,112px) 0;background:radial-gradient(ellipse 70% 80% at 25% 50%,#25444F 0%,var(--slate-deep) 55%,#18303A 100%);color:var(--on-dark);overflow:hidden}
.kenmerken .sec-head p{color:var(--on-dark-2)}
.kenmerken .sec-head .eyebrow{color:var(--copper)}
.kgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,100px);align-items:center}
.cable{width:100%;max-width:580px;justify-self:center;overflow:visible}
.cable .core{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .55s cubic-bezier(.3,1.4,.5,1),opacity .45s}
.cable .core .ring{opacity:0;transition:opacity .4s}
.cable.has-active .core{opacity:.5}
.cable .core.on{opacity:1;transform:scale(1.09)}
.cable .core.on .ring{opacity:1}
.cable .core:focus{outline:none}
.cable .core:focus-visible .ring{opacity:1}
.cable .glint{opacity:0}
.cable .core.on .glint{animation:glint 1.2s ease}
@keyframes glint{0%{opacity:0}30%{opacity:.9}100%{opacity:0}}
.kside .eyebrow{color:var(--copper)}
.kside h2{font-size:clamp(34px,3.6vw,56px);margin-top:18px}
.kintro{color:var(--on-dark-2);font-size:17.5px;margin-top:18px;max-width:32em}
.kpanel{position:relative;min-height:300px;margin-top:34px;padding-top:30px;border-top:1px solid var(--line-dark)}
.kpanel .meta{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);display:flex;align-items:center;gap:12px}
.kpanel .meta i{width:14px;height:14px;border-radius:50%;background:var(--cc,var(--copper));box-shadow:0 0 0 3px rgba(203,160,128,.5);transition:background .3s}
.kpanel h3{font-size:clamp(26px,2.4vw,36px);margin-top:14px}
.kpanel p{color:var(--on-dark-2);font-size:17px;margin-top:12px;max-width:30em}
.kpanel .txt{transition:opacity .35s,transform .35s}
.kpanel .txt.out{opacity:0;transform:translateY(10px)}
.kbar{height:2px;background:var(--line-dark);margin-top:26px;position:relative;overflow:hidden;border-radius:2px}
.kbar b{position:absolute;inset:0;background:var(--copper);transform:scaleX(0);transform-origin:left}
.kbar b.run{animation:bar var(--dur,5s) linear forwards}
@keyframes bar{to{transform:scaleX(1)}}
.kchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.kchips button{width:40px;height:40px;border-radius:50%;background:var(--copper);display:grid;place-items:center;transition:transform .3s,box-shadow .3s}
.kchips button::before{content:"";width:30px;height:30px;border-radius:50%;background:var(--cc);box-shadow:inset 0 0 0 9px var(--cc),inset 0 0 0 15px #E4CFBE}
.kchips button[aria-pressed=true]{transform:scale(1.12);box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--copper)}
.kchips button:hover{transform:scale(1.08)}
.knote{margin-top:22px;font-size:14px;color:rgba(244,239,232,.55)}

/* WERKWIJZE */
.wgrid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,6vw,96px);align-items:center}
.wfig{position:relative;height:min(660px,74vh);min-height:480px;border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.wfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.wfig img.on{opacity:1}
.wfig .chip{position:absolute;left:18px;bottom:18px;background:rgba(14,24,29,.88);color:var(--on-dark);font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;padding:9px 13px;border-radius:4px}
.wfig .chip b{color:var(--copper);font-weight:600}
.wsteps{margin-top:36px;border-top:1px solid var(--line)}
.wstep{display:block;width:100%;text-align:left;border-bottom:1px solid var(--line);padding:24px 0 24px}
.wstep .row{display:grid;grid-template-columns:64px 1fr auto;align-items:center}
.wstep .n{font-family:var(--mono);font-size:14px;color:var(--copper-ink);font-weight:600}
.wstep h3{font-size:clamp(22px,2vw,28px);transition:color .3s}
.wstep .pm{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);position:relative;transition:transform .3s,border-color .3s}
.wstep .pm::before,.wstep .pm::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.wstep .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
.wstep.on .pm{border-color:var(--copper-ink);color:var(--copper-ink)}
.wstep.on .pm::after{transform:translate(-50%,-50%) rotate(0)}
.wstep .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.wstep .more>div{overflow:hidden;padding-left:64px}
.wstep.on .more{grid-template-rows:1fr}
.wstep .more p{color:var(--muted);font-size:17px;padding-top:12px;max-width:34em}
.wstep .bar{height:2px;background:var(--line);margin-top:18px;position:relative;overflow:hidden}
.wstep .bar b{position:absolute;inset:0;background:var(--copper-ink);transform:scaleX(0);transform-origin:left}
.wstep .bar b.run{animation:bar var(--dur,6s) linear forwards}
.wstep:not(.on) h3{color:#5d6a70}
.wstep:hover h3{color:var(--text)}

/* EUREGIO */
.euregio{background:var(--paper-2)}
.egrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,96px);align-items:center}
.egrid h2{font-size:clamp(36px,4.3vw,64px);margin-top:20px}
.egrid .eyebrow{color:var(--copper-ink)}
.egrid .intro{color:var(--muted);font-size:18px;margin-top:22px;max-width:32em}
.checks{list-style:none;margin-top:34px;display:grid;gap:0;border-top:1px solid var(--line)}
.checks li{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:16px 0;border-bottom:1px solid var(--line);font-weight:600}
.checks li span{color:var(--muted);font-weight:500;display:block;font-size:15.5px}
.checks svg{width:22px;height:22px;color:var(--copper-ink);margin-top:3px}
.map{background:var(--ink);border-radius:8px;padding:clamp(18px,2.4vw,30px);color:var(--on-dark);position:relative;overflow:hidden}
.mapbox{position:relative;border-radius:5px;overflow:hidden;aspect-ratio:650/446}
.mapbox img,.mapbox svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.map .riv{font-family:var(--sans);font-style:italic;font-size:11px;font-weight:600;fill:#6E9DB1;letter-spacing:.04em}
.map .ring{fill:none;stroke:rgba(244,239,232,.28);stroke-width:1;stroke-dasharray:2 5}
.map .rl{font-family:var(--mono);font-size:9.5px;fill:rgba(244,239,232,.55);letter-spacing:.1em}
.map .cty circle{fill:var(--on-dark)}
.map .cty text{font-family:var(--sans);font-size:12.5px;font-weight:700;fill:var(--on-dark);paint-order:stroke;stroke:#14222A;stroke-width:3px;stroke-linejoin:round}
.map .cty text.km{font-family:var(--mono);font-weight:500;font-size:10.5px;fill:rgba(244,239,232,.6)}
.map .route{fill:none;stroke:var(--copper);stroke-width:1.6;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1)}
.map.in .route{stroke-dashoffset:0}
.map .cty{opacity:0;transition:opacity .6s}
.map.in .cty{opacity:1}
.map .land{font-family:var(--display);font-size:54px;font-weight:800;fill:rgba(244,239,232,.07);letter-spacing:.04em}
.map .home circle.p{fill:var(--copper)}
.map .home circle.w{fill:none;stroke:var(--copper);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:annPulse 2.6s ease-out infinite}
.map .home text{font-family:var(--display);font-size:15px;font-weight:800;fill:var(--copper)}
.map .cap{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-family:var(--mono);font-size:11.5px;color:rgba(244,239,232,.55);letter-spacing:.04em}

/* OFFERTE */
.offerte{background:var(--ink);color:var(--on-dark)}
.ogrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,96px);align-items:start}
.ogrid h2{font-size:clamp(34px,3.6vw,56px);margin-top:20px}
.ogrid .eyebrow{color:var(--copper)}
.ogrid .intro{color:var(--on-dark-2);font-size:18px;margin-top:22px;max-width:30em}
.contact-card{margin-top:40px;border:1px solid var(--line-dark);border-radius:var(--r);padding:26px 26px 22px}
.contact-card h4{font-size:19px;margin-bottom:14px}
.contact-card a,.contact-card div{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--line-dark);font-weight:600}
.contact-card a:hover{color:var(--copper)}
.contact-card svg{width:19px;height:19px;color:var(--copper);flex:none}
.contact-card small{display:block;font-weight:500;color:var(--on-dark-2);font-size:14px}

.rfq{background:var(--paper);color:var(--text);border-radius:10px;padding:clamp(22px,3vw,40px);box-shadow:0 50px 100px -40px rgba(0,0,0,.7)}
.rfq-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:30px}
.rfq-steps div{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#7a868b}
.rfq-steps div::before{content:"";display:block;height:4px;border-radius:4px;background:var(--paper-2);margin-bottom:10px;transition:background .4s}
.rfq-steps div.on{color:var(--text)}
.rfq-steps div.on::before{background:var(--cc)}
.rfq fieldset{border:0;display:none}
.rfq fieldset.on{display:block;animation:fadeUp .45s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}}
.rfq legend{font-family:var(--display);font-variation-settings:'wdth' 108;font-weight:700;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.015em;margin-bottom:6px}
.rfq .hint{color:var(--muted);font-size:15.5px;margin-bottom:22px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt label{display:flex;flex-direction:column;gap:3px;min-height:100%;padding:16px 18px 16px 50px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--white);cursor:pointer;transition:border-color .25s,box-shadow .25s;position:relative}
.opt label::before{content:"";position:absolute;left:17px;top:19px;width:20px;height:20px;border-radius:50%;border:1.5px solid #a9b2b5;background:#fff;transition:all .25s}
.opt label b{font-weight:700;font-size:16.5px}
.opt label span{font-size:14px;color:var(--muted);line-height:1.4}
.opt input:checked+label{border-color:var(--copper-ink);box-shadow:0 0 0 3px rgba(203,160,128,.3)}
.opt input:checked+label::before{border-color:var(--copper-ink);background:var(--copper-ink);box-shadow:inset 0 0 0 4px #fff}
.opt input:focus-visible+label{outline:2px solid var(--slate);outline-offset:2px}
.qty{display:flex;flex-wrap:wrap;gap:10px}
.qty .opt label{padding:13px 18px;min-height:0}
.qty .opt label::before{display:none}
.qty .opt label b{font-family:var(--mono);font-weight:600;font-size:15px}
.qty [name=product]+label b{font-family:var(--sans);font-weight:700;font-size:15.5px}
.fgroup+.fgroup{margin-top:24px}
.flabel{display:block;font-weight:700;font-size:15px;margin-bottom:10px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fields .full{grid-column:1/-1}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:7px}
.field input,.field textarea{width:100%;font:inherit;font-size:16px;font-weight:500;color:var(--text);background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);padding:13px 14px;transition:border-color .25s,box-shadow .25s}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--slate);box-shadow:0 0 0 3px rgba(83,124,143,.2)}
.field.err input{border-color:var(--c-red)}
.drop{display:flex;align-items:center;gap:16px;border:1.5px dashed #a9b2b5;border-radius:var(--r);padding:18px;background:var(--white);cursor:pointer;transition:border-color .25s,background .25s}
.drop:hover,.drop.over{border-color:var(--copper-ink);background:#fbf8f4}
.drop svg{width:34px;height:34px;color:var(--copper-ink);flex:none}
.drop b{display:block;font-size:15.5px}
.drop span{font-size:13.5px;color:var(--muted)}
.drop input{display:none}
.rfq-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:30px}
.rfq-nav .back{font-weight:700;color:var(--muted);display:inline-flex;gap:8px;align-items:center}
.rfq-nav .back:hover{color:var(--text)}
.rfq-nav .back[hidden]{display:inline-flex;visibility:hidden}
.sum{list-style:none;border-top:1px solid var(--line)}
.sum li{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.sum li span{color:var(--muted)}
.sum li b{font-weight:700}
.done{text-align:left;padding:10px 0}
.done .ok{width:58px;height:58px;border-radius:50%;background:var(--c-green);display:grid;place-items:center;color:#fff;margin-bottom:22px}
.done .ok svg{width:28px;height:28px}
.done h3{font-size:30px}
.done p{color:var(--muted);margin-top:10px}

/* FOOTER */
.ftr{background:var(--ink-3);color:var(--on-dark-2);padding:72px 0 34px;font-size:15.5px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.ftr .logo svg{height:58px}
.ftr p.tag{margin-top:22px;max-width:24em}
.ftr h4{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);margin-bottom:16px}
.ftr ul{list-style:none;display:grid;gap:9px}
.ftr a:hover{color:var(--on-dark)}
.fbot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:60px;padding-top:24px;border-top:1px solid var(--line-dark);font-size:13.5px;color:rgba(244,239,232,.45)}
.fbot .cores{display:flex;gap:7px}
.fbot .cores i{width:10px;height:10px;border-radius:50%;background:var(--cc)}

/* SUBPAGE */
.phero{background:var(--ink);color:var(--on-dark);padding:150px 0 72px;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(244,239,232,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(244,239,232,.045) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse 70% 90% at 80% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 70% 90% at 80% 30%,#000 10%,transparent 70%)}
.phero .wrap{position:relative}
.phgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,80px);align-items:center}
.phimg{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.phimg img{width:100%;height:100%;object-fit:cover}
.crumbs{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:rgba(244,239,232,.55);margin-bottom:26px}
.crumbs a:hover{color:var(--copper)}
.phero h1{font-size:clamp(44px,6vw,92px);max-width:13em}
.phero p{color:var(--on-dark-2);font-size:clamp(17px,1.35vw,20px);max-width:36em;margin-top:24px}

.prod{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(48px,6vw,80px) 0;border-bottom:1px solid var(--line)}
.prod:last-child{border-bottom:0}
.prod:nth-child(even) .pimg{order:2}
.pimg{aspect-ratio:5/4;border-radius:var(--r);overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:cover}
.prod .tag{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-ink);display:flex;gap:10px;align-items:center}
.prod .tag i{width:10px;height:10px;border-radius:50%;background:var(--cc)}
.prod h2{font-size:clamp(32px,3.4vw,50px);margin-top:16px}
.prod p{color:var(--muted);font-size:18px;margin-top:16px;max-width:32em}
.prod ul{list-style:none;margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.prod li{display:flex;gap:10px;align-items:baseline;font-weight:600;font-size:15.5px}
.prod li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--copper);flex:none;transform:translateY(-2px)}

.ops{background:var(--white)}
.opgrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.op{padding:30px 26px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.op .n{display:block;font-family:var(--mono);font-size:12.5px;color:var(--copper-ink);font-weight:600}
.op svg{display:block;width:40px;height:40px;color:var(--slate);margin:18px 0 16px}
.op h3{font-size:21px}
.op p{color:var(--muted);font-size:15px;margin-top:8px;line-height:1.5}

.faq{max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-family:var(--display);font-variation-settings:'wdth' 106;font-weight:700;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400;font-size:26px;color:var(--copper-ink);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);font-size:17px;padding:0 0 26px;max-width:46em}

.cta-band{background:var(--copper);color:#1B130C;padding:clamp(56px,7vw,90px) 0}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(30px,3.6vw,52px);max-width:16em}
.cta-band p{margin-top:10px;font-size:18px;max-width:34em;color:rgba(27,19,12,.75)}

.cgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,96px);align-items:start}
.cinfo h2{font-size:clamp(30px,3vw,44px)}
.cinfo .rows{margin-top:26px;border-top:1px solid var(--line)}
.cinfo .rows a,.cinfo .rows div{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:16px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:17px}
.cinfo .rows small{display:block;font-weight:500;color:var(--muted);font-size:14.5px}
.cinfo .rows svg{width:20px;height:20px;color:var(--copper-ink);margin-top:3px}
.cinfo .rows a:hover{color:var(--copper-ink)}
.mapframe{margin-top:30px;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--paper-2);border:1px solid var(--line)}
.mapframe iframe{width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05)}
.cform .rfq{box-shadow:0 40px 80px -50px rgba(20,34,42,.5);border:1px solid var(--line);background:var(--white)}
.cform .rfq .opt label,.cform .rfq .field input,.cform .rfq .field textarea,.cform .rfq .drop{background:var(--paper)}

/* responsive */
@media (max-width:1100px){
  .cards{grid-template-columns:1fr 1fr}
  .opgrid{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:920px){
  .hero{padding-top:112px}
  .hero-grid,.kgrid,.wgrid,.egrid,.ogrid,.sec-head,.prod,.cgrid,.phgrid{grid-template-columns:1fr}
  .hero-fig{justify-self:stretch;max-width:none}
  .paths{grid-template-columns:1fr}
  .path,.path:first-child{padding:22px 0;border-right:0;border-bottom:1px solid var(--line-dark)}
  .path:last-child{border-bottom:0}
  .prod:nth-child(even) .pimg{order:0}
  .kpanel{min-height:0;margin-top:0}
  .kside{display:contents}
  .khead{order:-1}
  .kgrid{gap:32px}
  .wfig{height:auto;min-height:0;aspect-ratio:4/3}
  .wgrid{row-gap:0}
  .wside{display:contents}
  .wside .eyebrow{order:-3}
  .wside h2{order:-2;margin-bottom:26px}
  .wfig{order:-1}
  .wsteps{margin-top:22px}
  .sec-head{align-items:start}
}
@media (max-width:640px){
  body{font-size:16px}
  .cards{grid-template-columns:1fr}
  .opts{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .opgrid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .prod ul{grid-template-columns:1fr}
  .sum li{grid-template-columns:1fr;gap:2px}
  .ann .ln,.ann .lb{display:none}
  .ann i{left:-11px;top:-11px;width:22px;height:22px;display:grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;color:#1B130C}
  .ann i::before{content:attr(data-n)}
  .hero-fig figcaption{display:none}
  .ann-legend{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;list-style:none;margin-top:-22px;font-family:var(--mono);font-size:12.5px;color:var(--on-dark-2)}
  .ann-legend li{display:flex;align-items:center;gap:9px}
  .ann-legend b{width:20px;height:20px;border-radius:50%;background:var(--copper);color:#1B130C;display:grid;place-items:center;font-size:11px;flex:none}
  .ann-legend .src{grid-column:1/-1;color:rgba(244,239,232,.45);font-size:11.5px}
  .rfq-steps div{font-size:10px;letter-spacing:.06em}
  .mapbox{aspect-ratio:1/1}
  .map svg.m .cty text{font-size:15px}
  .map svg.m .cty text.km{font-size:12px}
  .map svg.m .home text{font-size:17px}
  .map svg.m .rl{font-size:11px}
  .map svg.m .land{font-size:64px}
  .map .cap{flex-direction:column;gap:4px}
  .wstep .row{grid-template-columns:44px 1fr auto}
  .wstep .more>div{padding-left:44px}
  .hero .ctas .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .ticker .track{animation:none}
}