/* velaaluminyum.com – page-specific additions on top of vela.css */
.hero .eyebrow{color:var(--alu)}
.heritage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.heritage .pics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.heritage .pics img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r)}
.heritage .pics img:first-child{grid-column:span 2;aspect-ratio:16/9}
@media(max-width:900px){.heritage{grid-template-columns:1fr}}

.fam{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.fam a{background:#fff;padding:20px 18px 22px;text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:background .15s}
.fam a:hover{background:var(--paper)}
.fam img{aspect-ratio:1;object-fit:contain;width:100%;max-width:150px;margin:0 auto 8px;mix-blend-mode:multiply}
.fam b{font-size:16px;line-height:1.25}
.fam span{font:500 12px var(--fm);color:var(--steel);text-transform:uppercase}
.fam .all{background:var(--ink);color:#fff;justify-content:flex-end}
.fam .all:hover{background:var(--red)}
.fam .all span{color:var(--alu)}
@media(max-width:1000px){.fam{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.fam{grid-template-columns:repeat(2,1fr)}}

.sys{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1000px){.sys{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.sys{grid-template-columns:1fr}}
.sys .card .ph{aspect-ratio:1}

.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.facts div{padding:28px 24px 0 0}
.facts b{display:block;font:600 clamp(32px,3.6vw,48px)/1 var(--fs);letter-spacing:-.03em}
.facts span{font:500 12px var(--fm);text-transform:uppercase;color:var(--steel)}
@media(max-width:760px){.facts{grid-template-columns:1fr 1fr}.facts div{padding-bottom:20px}}

.mesh{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mesh article{border-top:2px solid var(--ink);padding-top:18px}
.mesh h3{font-size:19px}
.mesh p{font-size:15px;color:var(--steel)}
.mesh .mono{font-size:13px;color:var(--ink)}
@media(max-width:900px){.mesh{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.mesh{grid-template-columns:1fr}}

.parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0;border-top:1px solid var(--line)}
.parts div{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:baseline}
.parts .sku{color:var(--red);font-size:13px;min-width:44px}
.parts span{font-size:15px}

.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.contact-cards a,.contact-cards div{display:flex;flex-direction:column;gap:6px;padding:28px;background:#fff;border:1px solid var(--line);border-radius:var(--r);text-decoration:none}
.contact-cards svg{width:28px;height:28px;color:var(--red);margin-bottom:12px}
.contact-cards b{font-size:19px}
.contact-cards span{color:var(--steel);font-size:15px}
@media(max-width:820px){.contact-cards{grid-template-columns:1fr}}

.fair{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.fair .d{font:500 13px var(--fm);color:var(--alu);min-width:150px}
.fair h3{margin:0;font-size:20px}
.fair .st{font:500 12px var(--fm);text-transform:uppercase;border:1px solid rgba(255,255,255,.3);padding:4px 10px;border-radius:2px}
@media(max-width:640px){.fair{grid-template-columns:1fr}}

.prose{max-width:72ch}
.prose h2{font-size:28px;margin-top:48px}
.prose h3{font-size:20px;margin-top:32px}
.big404{font:600 clamp(120px,22vw,280px)/.9 var(--fs);letter-spacing:-.06em;color:var(--line)}
.video{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.toc a{font:500 13px var(--fm);text-decoration:none;padding:8px 12px;border:1px solid var(--line);border-radius:2px;background:#fff}
.toc a:hover{border-color:var(--ink)}

/* --- round 2 --- */
.yt{position:relative;display:block;width:100%;padding:0;border:0;background:#000;border-radius:var(--r);overflow:hidden;cursor:pointer;aspect-ratio:16/9}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .2s,transform .4s}
.yt:hover img{opacity:1;transform:scale(1.02)}
.yt::after{content:"";position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/34px no-repeat;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt.on{cursor:default}.yt.on::after{display:none}
.fig{margin:0}
.fig img{border-radius:var(--r);width:100%}
.fig figcaption{font-size:15px;color:var(--steel);padding-top:12px}
.dark .fig figcaption{color:var(--alu);font:500 13px var(--fm);text-transform:uppercase;letter-spacing:.04em}
.mesh article img{width:100%;border-radius:var(--r);margin-top:12px;border:1px solid var(--line)}
.mesh article{display:flex;flex-direction:column}
.mesh article .mono{margin-top:auto}
.tblwrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font:500 15px var(--fm);background:#fff;border:1px solid var(--line)}
.tbl th,.tbl td{padding:12px 16px;text-align:right;border-bottom:1px solid var(--line)}
.tbl th:first-child{text-align:left}
.tbl thead th{background:var(--ink);color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.tbl tbody th{color:var(--steel)}
.tbl tbody tr:last-child>*{border-bottom:0}
.comps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.comps article{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0 18px 20px;display:flex;flex-direction:column;gap:4px}
.comps img{width:calc(100% + 36px);max-width:none;margin:0 -18px 12px;aspect-ratio:1;object-fit:contain;border-bottom:1px solid var(--line-2)}
.comps .sku{color:var(--red);font-size:13px}
.comps h3{font-size:18px;margin:0}
.comps p{font-size:14px;color:var(--steel);margin:0}
@media(max-width:1000px){.comps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.comps{grid-template-columns:1fr 1fr;gap:10px}.comps article{padding:0 12px 14px}.comps img{width:calc(100% + 24px);margin:0 -12px 10px}}
.map{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--alu-l)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(min-width:861px){.timeline.t5{grid-template-columns:repeat(5,1fr)}}
.fair .st.up{background:var(--red);border-color:var(--red);color:#fff}
.hero-meta b{white-space:nowrap}

/* round 3 */
.sw i{background-size:cover;background-position:center}
.hero.sub .wrap{min-height:min(64vh,600px)}
.hero.sub h1{max-width:18ch}
.phero .ticks{margin-top:20px}
.comps+h3,h3.mt3+.comps{margin-top:16px}
.caps>div{display:flex;flex-direction:column;gap:10px;padding:32px 28px 36px 0;border-right:1px solid var(--line);margin-right:28px}
.caps>div:last-child{border-right:0;margin-right:0}
@media(max-width:900px){.caps>div:nth-child(2n){border-right:0;margin-right:0}.caps>div{border-bottom:1px solid var(--line)}}
@media(max-width:560px){.caps>div{border-right:0;margin-right:0}}
