/* Veilora — Material Lab (Film Lab) design system */
:root{
  --paper:#f5f1e8; --card:#fffdf7; --ink:#1b2a33; --slate:#43586a;
  --teal:#0d7377; --tealdeep:#0a4f55; --amber:#e07b26; --line:#d9d0bd; --darkband:#12242e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:var(--tealdeep)}
a:hover{color:var(--teal)}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.mono{font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem}

/* header / nav */
.topbar{background:var(--darkband);color:#e9e2d0;font-size:.85rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:1rem;padding-top:.35rem;padding-bottom:.35rem;flex-wrap:wrap}
.topbar a{color:#e9e2d0;text-decoration:none}
.site-header{background:var(--card);border-bottom:2px solid var(--ink);position:relative;z-index:40}
.nav{display:flex;align-items:center;gap:1.2rem;padding:.7rem 0}
.brand{font-family:Georgia,'Times New Roman',serif;font-size:1.65rem;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:.02em}
.brand em{font-style:normal;color:var(--teal)}
.brand small{display:block;font-family:'Courier New',monospace;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--slate)}
.navlinks{display:flex;align-items:center;gap:1.05rem;margin-left:auto;flex-wrap:wrap}
.navlinks>a,.menu>button{font-size:.98rem;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;font-family:inherit;padding:.2rem 0}
.navlinks>a:hover,.menu>button:hover{color:var(--teal)}
.menu{position:relative}
.menu>button::after{content:" ▾";color:var(--amber)}
.menu .panel{position:absolute;top:calc(100% + 10px);left:0;min-width:250px;background:var(--card);border:1.5px solid var(--ink);box-shadow:6px 6px 0 rgba(27,42,51,.18);padding:.55rem 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease,visibility .15s}
.menu:hover .panel,.menu:focus-within .panel{opacity:1;visibility:visible;transform:translateY(0)}
.panel a{display:block;padding:.42rem 1rem;color:var(--ink);text-decoration:none;font-size:.95rem}
.panel a:hover{background:var(--paper);color:var(--tealdeep)}
.btn{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;padding:.62rem 1.25rem;border:1.5px solid var(--ink);font-weight:600;box-shadow:4px 4px 0 rgba(27,42,51,.85)}
.btn:hover{background:var(--tealdeep);color:#fff}
.btn--amber{background:var(--amber)}
.btn--ghost{background:transparent;color:var(--ink)}
.navtoggle{display:none}
.navmenu{display:none}

/* language switcher: <details> holds only the <summary>; the options live in
   the sibling .langopts element (never inside the details) */
.langwrap{position:relative}
.langswitch summary{cursor:pointer;list-style:none;font-size:.95rem;padding:.28rem .6rem;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);white-space:nowrap}
.langswitch summary::-webkit-details-marker{display:none}
.langswitch summary::after{content:" ▾";color:var(--amber)}
.langopts{position:absolute;right:0;top:calc(100% + 8px);min-width:160px;background:var(--card);border:1.5px solid var(--ink);box-shadow:6px 6px 0 rgba(27,42,51,.18);padding:.4rem 0;display:none;z-index:50}
.langwrap:has(.langswitch[open]) .langopts{display:block}
.langopt{display:block;padding:.4rem 1rem;font-size:.95rem;color:var(--ink);text-decoration:none}
.langopt.is-current{font-weight:700;color:var(--tealdeep)}
.langopt.is-off{color:var(--slate)}
.notfound-art{max-width:30rem;margin-top:1.6rem}

/* hero + specimen plate */
.hero{border-bottom:2px solid var(--ink);background:linear-gradient(180deg,var(--card),var(--paper))}
.hero .wrap{padding-top:2.4rem;padding-bottom:2.2rem}
.kicker{font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:.22em;font-size:.8rem;color:var(--teal);margin:0 0 .5rem}
h1{font-family:Georgia,'Times New Roman',serif;font-size:2.55rem;line-height:1.15;margin:.1rem 0 .8rem;font-weight:700}
.lede{font-size:1.13rem;color:var(--slate);max-width:46rem;margin:0 0 1.2rem}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:start}
.spec-plate{border:2px solid var(--ink);background:var(--card);box-shadow:8px 8px 0 rgba(27,42,51,.16);padding:1rem 1.1rem}
.spec-tag{font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;border-bottom:1.5px dashed var(--slate);padding-bottom:.5rem;margin-bottom:.7rem;color:var(--ink)}
.spec-plate--teal .spec-tag{color:var(--tealdeep)}
.spec-plate--amber .spec-tag{color:#9a5410}
.spec-plate--slate .spec-tag{color:var(--slate)}
.spec-plate img{border:1px solid var(--line)}
.layer-stack{width:100%;height:auto}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.chip{border:1.5px solid var(--ink);background:var(--paper);padding:.28rem .6rem;font-size:.83rem;font-family:'Courier New',monospace;letter-spacing:.04em}
.chip b{color:var(--tealdeep)}
.spec-note{font-size:.88rem;color:var(--slate);margin:.7rem 0 0}

/* sections */
.section{padding:2.3rem 0 .6rem}
h2{font-family:Georgia,'Times New Roman',serif;font-size:1.72rem;line-height:1.25;margin:0 0 .8rem}
h3{font-family:Georgia,serif;font-size:1.18rem;margin:1.1rem 0 .4rem}
p{margin:0 0 1rem}
.section p,.section li{max-width:52rem}
.card-grid{display:flex;flex-wrap:wrap;gap:1.1rem;margin:1rem 0 1.4rem}
.card{flex:1 1 230px;max-width:262px;background:var(--card);border:1.5px solid var(--ink);padding:1rem;text-decoration:none;color:var(--ink);box-shadow:5px 5px 0 rgba(27,42,51,.12)}
.card:hover{box-shadow:5px 5px 0 rgba(13,115,119,.45)}
.card img{border:1px solid var(--line);margin-bottom:.7rem}
.card h3{margin:.2rem 0 .35rem;font-size:1.08rem}
.card p{font-size:.92rem;color:var(--slate);margin:0}
.card .mono{color:var(--teal)}
.spec-table{border-collapse:collapse;width:100%;max-width:52rem;margin:1rem 0 1.5rem;background:var(--card)}
.spec-table th,.spec-table td{border:1px solid var(--line);padding:.55rem .8rem;text-align:left;font-size:.95rem;vertical-align:top}
.spec-table th{background:var(--paper);font-family:Georgia,serif;width:34%}
.spec-table caption{caption-side:top;text-align:left;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--slate);padding-bottom:.4rem}
.note-box{border-left:4px solid var(--amber);background:var(--card);padding:.9rem 1.1rem;max-width:52rem;margin:1rem 0 1.4rem}
.note-box p:last-child{margin-bottom:0}
.check-list{list-style:none;padding:0;max-width:52rem}
.check-list li{padding:.45rem 0 .45rem 1.7rem;position:relative;border-bottom:1px dashed var(--line)}
.check-list li::before{content:"▸";position:absolute;left:.3rem;color:var(--amber);font-weight:700}
.steps{counter-reset:step;list-style:none;padding:0;max-width:52rem}
.steps li{counter-increment:step;padding:.6rem 0 .6rem 3rem;position:relative;border-bottom:1px dashed var(--line)}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:.55rem;font-family:'Courier New',monospace;color:var(--teal);font-weight:700}
.related-grid{display:flex;flex-wrap:wrap;gap:1.1rem;margin:1rem 0 1.4rem}
.darkband{background:var(--darkband);color:#efe9da;margin-top:2.6rem}
.darkband h2{color:#fff}
.darkband p{color:#cfc7ae}

/* CTA bands (declared template variants) */
.cta-band{border:2px solid var(--ink);padding:1.6rem;margin:2.2rem 0;box-shadow:8px 8px 0 rgba(27,42,51,.16)}
.cta-band h2{margin-bottom:.5rem}
.cta-band p{max-width:44rem}
.cta--quote{background:#eef4f1}.cta--sizes{background:#fdf1e3}.cta--fitcheck{background:#eef1f6}
.cta--specimen{background:#f3efe4}.cta--verdict{background:#eef4f1}.cta--workshop{background:#fdf1e3}
.cta--briefing{background:#eef1f6}.cta--oem{background:#f3efe4}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:52rem}
.field{display:flex;flex-direction:column;gap:.3rem}
.field--full{grid-column:1/-1}
.field label{font-weight:600;font-size:.95rem}
.field label .req{color:var(--amber)}
.field input,.field select,.field textarea{font:inherit;padding:.6rem .7rem;border:1.5px solid var(--ink);background:var(--card);width:100%}
.field textarea{min-height:130px}
.botcheck{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* footer */
.site-footer{background:var(--darkband);color:#d8d0ba;margin-top:3rem}
.site-footer .wrap{padding-top:2rem;padding-bottom:2rem}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
.site-footer h3{color:#fff;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:.14em;font-size:.85rem}
.site-footer a{color:#d8d0ba;text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{padding:.22rem 0}
.foot-note{border-top:1px solid #33454f;margin-top:1.6rem;padding-top:1rem;font-size:.85rem;color:#a99f83}

/* responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  h1{font-size:2rem}
  .footer-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .navtoggle{display:block;margin-left:auto}
  .navmenu summary{cursor:pointer;list-style:none;font-size:1.5rem;line-height:1;padding:.2rem .5rem;border:1.5px solid var(--ink);background:var(--card)}
  .navmenu{display:block}
  .navlinks{display:none;width:100%;flex-direction:column;align-items:flex-start;padding:.6rem 0}
  .nav:has(.navmenu[open]) .navlinks{display:flex}
  .menu .panel{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;display:none}
  .menu:focus-within .panel,.menu:hover .panel{display:block}
  .nav{flex-wrap:wrap}
}