/* Layout concept: an engineering drawing sheet. Full-bleed shop photography, condensed signage type,
   and mono "title block" callouts for the real specs (grades, tonnage, tolerances, volumes). */
:root{
  --paper:#F3F5F8; --surface:#FFFFFF; --ink:#0C1625; --ink-2:#3A4657; --muted:#667386;
  --line:#D6DCE4; --line-strong:#B9C2CE;
  --blue:#1F4FD1; --blue-ink:#1A43B3; --sky:#2E9BE6; --coral:#E8524D;
  --night:#0A1320; --night-2:#121F33; --on-night:#E9EEF5; --on-night-2:#A7B3C4; --night-line:#25344C;
  --display:"Barlow Condensed","Oswald","Arial Narrow",sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --wrap:1240px; --gut:max(16px, env(safe-area-inset-left, 0px)); --gut-r:max(16px, env(safe-area-inset-right, 0px));
  --step--1:clamp(.82rem,.8rem + .1vw,.88rem); --step-0:clamp(1rem,.97rem + .15vw,1.08rem);
  --step-1:clamp(1.2rem,1.1rem + .4vw,1.4rem); --step-2:clamp(1.6rem,1.35rem + 1vw,2.2rem);
  --step-3:clamp(2.2rem,1.7rem + 2vw,3.4rem); --step-4:clamp(2.8rem,2rem + 3.6vw,5.4rem);
  --radius:4px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0B121C; --surface:#111A27; --ink:#E6ECF4; --ink-2:#AEB9C8; --muted:#8693A6;
    --line:#223047; --line-strong:#33445F; --blue:#6A93FF; --blue-ink:#8AABFF; --sky:#5DB9F4; --coral:#FF716B;
    --night:#060C15; --night-2:#0E1828; --on-night:#E9EEF5; --on-night-2:#A7B3C4; --night-line:#22314A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0B121C; --surface:#111A27; --ink:#E6ECF4; --ink-2:#AEB9C8; --muted:#8693A6;
  --line:#223047; --line-strong:#33445F; --blue:#6A93FF; --blue-ink:#8AABFF; --sky:#5DB9F4; --coral:#FF716B;
  --night:#060C15; --night-2:#0E1828; --on-night:#E9EEF5; --on-night-2:#A7B3C4; --night-line:#22314A;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:var(--step-0); line-height:1.6; overflow-x:hidden}
img{max-width:100%; height:auto; display:block}
a{color:var(--blue-ink); text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--sky); outline-offset:2px}
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.02; letter-spacing:.005em; margin:0; text-wrap:balance; text-transform:uppercase}
h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-1); letter-spacing:.02em}
p{margin:0}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-left:var(--gut); padding-right:var(--gut-r)}
.skip{position:absolute; left:-9999px} .skip:focus{left:16px; top:16px; z-index:100; background:var(--surface); padding:8px 12px}
.label{font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.lede{font-size:var(--step-1); line-height:1.5; color:var(--ink-2); max-width:62ch}
.prose{display:grid; gap:1em; max-width:66ch; color:var(--ink-2)}
.prose strong{color:var(--ink)}
.tnum{font-variant-numeric:tabular-nums}

/* Header */
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--night)}
.site-head{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in srgb, var(--night) 94%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--night-line); color:var(--on-night)}
.site-head .wrap{position:relative; display:flex; align-items:center; gap:24px; min-height:72px}
.brand{display:flex; align-items:center; gap:12px; color:var(--on-night); text-decoration:none; margin-right:auto}
.brand svg{width:40px; height:34px; flex:none}
.brand-word{font-family:var(--display); font-weight:500; text-transform:uppercase; line-height:.95; font-size:1.02rem; letter-spacing:.04em; padding-left:12px; border-left:1px solid var(--on-night-2)}
.nav{display:flex; align-items:center; gap:4px}
.nav a{color:var(--on-night-2); text-decoration:none; font-weight:500; font-size:.95rem; padding:8px 12px; border-radius:var(--radius)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--on-night)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--coral)}
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-size:1.02rem; padding:13px 22px; border-radius:var(--radius); text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background .15s, color .15s, border-color .15s}
.btn-primary{background:var(--coral); color:#fff}
.btn-primary:hover{background:color-mix(in srgb, var(--coral) 86%, #000)}
.btn-ghost{border-color:currentColor; color:inherit; background:transparent}
.btn-ghost:hover{background:color-mix(in srgb, currentColor 10%, transparent)}
.nav .btn{margin-left:10px; padding:10px 16px; color:#fff}
.menu-btn{display:none; background:none; border:1px solid var(--night-line); color:var(--on-night); border-radius:var(--radius); padding:8px 10px; font:600 .9rem var(--display); letter-spacing:.1em; text-transform:uppercase}
@media (max-width: 900px){
  .menu-btn{display:inline-flex}
  .nav{position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; background:var(--night); border-bottom:1px solid var(--night-line); padding:8px var(--gut-r) 16px var(--gut)}
  .nav:not(.open){display:none}
  .nav a{padding:14px 4px; border-bottom:1px solid var(--night-line); border-radius:0}
  .nav a[aria-current="page"]{box-shadow:none; color:var(--coral)}
  .nav .btn{margin:14px 0 0; justify-content:center}
}

/* Hero */
.hero{position:relative; background:var(--night); color:var(--on-night); overflow:hidden; isolation:isolate}
.hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(6,11,19,.92) 0%, rgba(6,11,19,.72) 45%, rgba(6,11,19,.25) 100%), linear-gradient(0deg, rgba(6,11,19,.85) 0%, rgba(6,11,19,0) 40%)}
.hero .wrap{padding-block:clamp(72px,11vw,150px) clamp(48px,7vw,88px); display:grid; gap:28px}
.hero h1{max-width:15ch}
.hero h1 em{font-style:normal; color:var(--sky)}
.hero .lede{color:var(--on-night-2)}
.hero .label{color:var(--on-night-2)}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}
.page-hero .wrap{padding-block:clamp(64px,8vw,112px) clamp(40px,5vw,64px)}
.page-hero h1{font-size:var(--step-3); max-width:20ch}
.crumbs{font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-night-2)}
.crumbs a{color:inherit}

/* Title block (the drawing's spec strip) */
.titleblock{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border:1px solid var(--line-strong); background:var(--surface); border-radius:var(--radius); overflow:hidden}
.titleblock > div{padding:18px 18px 16px; border-right:1px solid var(--line); display:grid; gap:4px; align-content:start; min-width:0}
.titleblock > div:last-child{border-right:0}
.titleblock b{font-family:var(--display); font-weight:600; font-size:clamp(1.7rem,1.3rem + 1.2vw,2.5rem); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.titleblock span{font-size:.86rem; color:var(--ink-2); line-height:1.35}
.titleblock .label{font-size:.66rem}
.lift{margin-top:-46px; position:relative; z-index:2}
@media (max-width: 1000px){.titleblock{grid-template-columns:repeat(3,minmax(0,1fr))} .titleblock > div:nth-child(3n){border-right:0} .titleblock > div:nth-child(-n+3){border-bottom:1px solid var(--line)}}
@media (max-width: 560px){.titleblock{grid-template-columns:repeat(2,minmax(0,1fr))} .titleblock > div{border-bottom:1px solid var(--line)} .titleblock > div:nth-child(3n){border-right:1px solid var(--line)} .titleblock > div:nth-child(2n){border-right:0} .lift{margin-top:-28px}}

/* Sections */
.section{padding-block:clamp(64px,8vw,112px)}
.section.tight{padding-block:clamp(48px,6vw,80px)}
.section.alt{background:var(--surface); border-block:1px solid var(--line)}
.section.dark{background:var(--night); color:var(--on-night)}
.section.dark .lede,.section.dark .prose{color:var(--on-night-2)}
.section.dark .label{color:var(--on-night-2)}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 56px; align-items:end; margin-bottom:clamp(32px,4vw,52px)}
.sec-head h2{max-width:16ch}
.sec-head .label{grid-column:1/-1; margin-bottom:-12px}
@media (max-width: 800px){.sec-head{grid-template-columns:1fr}}

/* Process cards */
.proc-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.proc{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s}
.proc:hover{border-color:var(--blue); transform:translateY(-2px)}
.proc img{aspect-ratio:16/10; object-fit:cover; width:100%}
.proc .body{padding:20px 20px 22px; display:grid; gap:10px; flex:1; align-content:start}
.proc p{color:var(--ink-2); font-size:.96rem}
.spec{font-family:var(--mono); font-size:.76rem; color:var(--muted); letter-spacing:.02em; padding-top:10px; border-top:1px dashed var(--line); margin-top:auto}
@media (max-width: 960px){.proc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 600px){.proc-grid{grid-template-columns:1fr}}

/* Industry tiles */
.ind-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.ind{position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; color:#fff; text-decoration:none; isolation:isolate; display:flex; align-items:flex-end; background:var(--night-2)}
.ind img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .5s}
.ind::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(5,10,18,.9) 0%, rgba(5,10,18,.2) 60%, rgba(5,10,18,0) 100%)}
.ind:hover img{transform:scale(1.04)}
.ind .t{padding:18px; display:grid; gap:6px}
.ind h3{font-size:1.45rem}
.ind small{font-size:.84rem; color:#C9D3E0; line-height:1.4}
@media (max-width: 1000px){.ind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 460px){.ind-grid{grid-template-columns:1fr} .ind{aspect-ratio:16/10}}

/* Steps (a real sequence) */
.steps{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; border-top:2px solid var(--on-night-2); counter-reset:s}
.steps li{list-style:none; padding:22px 20px 0 0; display:grid; gap:10px; align-content:start; position:relative; counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero); font-family:var(--mono); font-size:.78rem; color:var(--coral); letter-spacing:.1em}
.steps li::after{content:""; position:absolute; top:-7px; left:0; width:12px; height:12px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px var(--night)}
.steps h3{font-size:1.25rem}
.steps p{color:var(--on-night-2); font-size:.94rem}
ol.steps{margin:0; padding:0}
@media (max-width: 960px){.steps{grid-template-columns:1fr; border-top:0; border-left:2px solid var(--on-night-2); gap:26px} .steps li{padding:0 0 0 26px} .steps li::after{top:4px; left:-7px}}

/* Proof */
.proof{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:center}
.proof figure{margin:0; border-radius:var(--radius); overflow:hidden}
.proof figure img{width:100%; aspect-ratio:4/3; object-fit:cover}
.case{display:grid; gap:18px}
.case .big{font-family:var(--display); font-weight:600; font-size:clamp(4rem,3rem + 5vw,7.5rem); line-height:.85; color:var(--blue)}
.case .big small{font-size:.32em; letter-spacing:.06em; color:var(--ink-2); display:block; margin-top:8px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; font-size:.95rem; border-top:1px solid var(--line); padding-top:16px}
.kv dt{font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-top:3px}
.kv dd{margin:0; color:var(--ink-2)}
@media (max-width: 860px){.proof{grid-template-columns:1fr}}

.oem-row{display:flex; flex-wrap:wrap; gap:10px 34px; align-items:baseline; font-family:var(--display); font-weight:500; font-size:clamp(1.3rem,1.1rem + .8vw,1.9rem); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2)}
.oem-note{margin-top:14px; font-size:.84rem; color:var(--muted)}

/* CTA band */
.cta{background:#1C46BE; color:#fff}
.cta .wrap{padding-block:clamp(48px,6vw,80px); display:flex; flex-wrap:wrap; gap:24px 40px; align-items:center; justify-content:space-between}
.cta h2{font-size:var(--step-3); max-width:18ch}
.cta p{color:#DCE6FF; max-width:52ch; margin-top:10px}
.cta .btn-primary{background:#fff; color:var(--night)}
.cta .btn-primary:hover{background:#E6ECF8}
.cta .mono{font-family:var(--mono); font-size:.9rem; color:#DCE6FF; user-select:all}

/* Capability rows */
.cap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; padding-block:clamp(48px,6vw,80px); border-top:1px solid var(--line)}
.cap:first-of-type{border-top:0}
.cap.flip > .media{order:2}
.cap .media{display:grid; grid-template-columns:1fr 1fr; gap:10px; position:sticky; top:96px}
.cap .media img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius)}
.cap .media img:first-child{grid-column:1/-1; aspect-ratio:16/10}
.cap .txt{display:grid; gap:18px; align-content:start}
.cap ul{margin:0; padding:0; list-style:none; display:grid; gap:0; border-top:1px solid var(--line)}
.cap li{padding:11px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(120px,.42fr) 1fr; gap:14px; font-size:.95rem}
.cap li b{font-family:var(--mono); font-weight:500; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-top:3px}
.cap li span{color:var(--ink-2)}
@media (max-width: 860px){.cap{grid-template-columns:1fr} .cap.flip > .media{order:0} .cap .media{position:static}}
@media (max-width: 420px){.cap li{grid-template-columns:1fr; gap:2px}}

.jump{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.jump a{font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--on-night); border:1px solid var(--night-line); padding:7px 11px; border-radius:var(--radius)}
.jump a:hover{border-color:var(--sky); color:var(--sky)}

/* Materials table */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:640px; font-size:.92rem}
th,td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--paper)}
td:first-child{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:1.05rem; white-space:nowrap}
td{color:var(--ink-2)}
tr:last-child td{border-bottom:0}

.certs{display:flex; flex-wrap:wrap; gap:10px}
.cert{font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; border:1px solid var(--line-strong); padding:8px 12px; border-radius:var(--radius); color:var(--ink); background:var(--surface)}
.section.dark .cert{background:transparent; color:var(--on-night); border-color:var(--night-line)}

/* Industry detail rows */
.ind-row{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,60px); padding-block:clamp(44px,5vw,72px); border-top:1px solid var(--line); scroll-margin-top:90px}
.ind-row:nth-of-type(even) > figure{order:2}
.ind-row figure{margin:0; position:relative}
.ind-row figure img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius)}
.ind-row figure img + img{position:absolute; width:42%; right:-10px; bottom:-18px; aspect-ratio:1; border:4px solid var(--paper); box-shadow:0 10px 30px rgba(0,0,0,.18)}
.ind-row .txt{display:grid; gap:16px; align-content:start}
.ind-row h2{font-size:var(--step-2)}
.parts{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.parts li{font-size:.86rem; padding:6px 10px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--ink-2)}
.fit{font-size:.92rem; color:var(--ink-2); border-left:3px solid var(--coral); padding:4px 0 4px 14px}
@media (max-width: 860px){.ind-row{grid-template-columns:1fr} .ind-row:nth-of-type(even) > figure{order:0} .ind-row figure img + img{right:8px}}

/* Product gallery */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.filters button{font:500 .78rem var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:9px 14px; border-radius:var(--radius); border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2); cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
.item{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column}
.item button{all:unset; cursor:zoom-in; display:block}
.item img{width:100%; aspect-ratio:1; object-fit:cover; background:#fff}
.item figcaption{padding:14px 16px 16px; display:grid; gap:4px; border-top:1px solid var(--line)}
.item figcaption b{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:1.12rem; line-height:1.1}
.item figcaption span{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--muted); text-transform:uppercase}
.item[hidden]{display:none}
.lightbox{position:fixed; inset:0; z-index:90; background:rgba(4,8,14,.92); display:grid; place-items:center; padding:max(24px, env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) max(24px, env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px))}
.lightbox figure{margin:0; display:grid; gap:12px; max-width:min(1200px,100%)}
.lightbox img{max-height:80vh; width:auto; margin-inline:auto; border-radius:var(--radius)}
.lightbox figcaption{color:#DDE4EE; text-align:center; font-family:var(--mono); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase}
.lightbox button{position:absolute; top:max(14px, env(safe-area-inset-top,0px)); right:max(14px, env(safe-area-inset-right,0px)); background:none; border:1px solid #445; color:#fff; font:600 .9rem var(--display); letter-spacing:.1em; text-transform:uppercase; padding:8px 12px; border-radius:var(--radius); cursor:pointer}

/* About */
.split{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,72px); align-items:start}
.split figure{margin:0} .split figure img{border-radius:var(--radius); aspect-ratio:4/5; object-fit:cover; width:100%}
@media (max-width: 860px){.split{grid-template-columns:1fr}}
.vals{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--night-line); border:1px solid var(--night-line); border-radius:var(--radius); overflow:hidden}
.vals > div{background:var(--night); padding:26px 24px; display:grid; gap:10px; align-content:start}
.vals p{color:var(--on-night-2); font-size:.95rem}
@media (max-width: 860px){.vals{grid-template-columns:1fr}}

/* Contact */
.contact{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(28px,5vw,64px); align-items:start}
@media (max-width: 900px){.contact{grid-template-columns:1fr}}
.form{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,3vw,36px); display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form .full{grid-column:1/-1}
@media (max-width: 600px){.form{grid-template-columns:1fr}}
.field{display:grid; gap:6px; min-width:0}
.field label{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.field input,.field select,.field textarea{font:inherit; font-size:1rem; color:var(--ink); background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--radius); padding:12px 12px; width:100%}
.field textarea{min-height:130px; resize:vertical}
.field small{font-size:.8rem; color:var(--muted)}
.drop{border:1.5px dashed var(--line-strong); border-radius:var(--radius); padding:18px; display:grid; gap:6px; text-align:center; background:var(--paper)}
.form-note{font-size:.88rem; color:var(--ink-2); padding:12px 14px; border-radius:var(--radius); background:var(--paper); border:1px solid var(--line)}
.hp{position:absolute; left:-9999px}
.side{display:grid; gap:22px}
.card{border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:var(--surface); display:grid; gap:10px}
.card .mono{font-family:var(--mono); font-size:.95rem; user-select:all; word-break:break-all; color:var(--ink)}
details{border-top:1px solid var(--line); padding:14px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px}
summary::after{content:"+"; font-family:var(--mono); color:var(--coral)}
details[open] summary::after{content:"–"}
details p{margin-top:10px; color:var(--ink-2); font-size:.95rem}

/* Footer */
.site-foot{background:var(--night); color:var(--on-night-2); border-top:1px solid var(--night-line); font-size:.92rem}
.site-foot .wrap{padding-block:56px 32px; display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:32px}
.site-foot h4{font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-night); margin:0 0 12px}
.site-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.site-foot a{color:var(--on-night-2); text-decoration:none} .site-foot a:hover{color:var(--on-night)}
.site-foot .brand{margin-bottom:14px}
.foot-base{grid-column:1/-1; border-top:1px solid var(--night-line); padding-top:22px; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:.82rem}
@media (max-width: 860px){.site-foot .wrap{grid-template-columns:1fr 1fr}}
@media (max-width: 520px){.site-foot .wrap{grid-template-columns:1fr}}

.section.dark .cap ul,.section.dark .cap li{border-color:var(--night-line)}
.section.dark .cap li span{color:var(--on-night-2)}
.section.dark .cap li b{color:var(--on-night-2)}

@media (max-width: 700px){
  .hero::after{background:linear-gradient(180deg, rgba(6,11,19,.78) 0%, rgba(6,11,19,.86) 55%, rgba(6,11,19,.94) 100%)}
}