/* DataMechanika — page scaffolding only. Every color, font, radius and shadow
   comes from ../../styles.css. Rhythm: 24px leading unit, 12px half-step. */
:root{--leading:24px;--half:12px;--measure:76ch;--grid:1380px;--grid-pad:30px;--stage:1440px;--stage-mobile:375px}
@media (max-width:899px){:root{--grid-pad:20px}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;text-wrap:pretty;overflow-x:hidden}
.wrap{max-width:var(--grid);margin:0 auto;padding:0 var(--grid-pad);box-sizing:border-box}
img,svg{max-width:100%}

/* — autoscale stage (see autoscale.js): desktop is authored fixed at 1440px
   and uniformly transform-scaled to the real viewport, so 1366/1920/4K all
   render the identical layout. Below 900px the stage goes fluid and the
   ordinary responsive rules below take over. */
#dm-stage{width:var(--stage);margin:0;transform-origin:top left;position:relative;z-index:1}
@media (max-width:899px){#dm-stage{width:100%;transform:none !important}}

/* — navigation: the real nav is a plain static row at the top of the page
   (no bar, no background, no sticky — it's part of the static hero scene
   and scrolls away like any other content). A burger + panel is a SEPARATE
   fallback that stays hidden until that row has scrolled past, then fades
   in fixed top-right so navigation is still reachable further down. */
.menu{list-style:none;margin:0;padding:0}
.menu a{color:inherit;text-decoration:none}
.has-sub>a::after{content:"+";margin-left:6px;font-size:11px;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.sub{list-style:none}
.sub li{list-style:none}

/* the static top row — a quiet, right-clustered strip like the reference,
   not a toolbar: no left-side brand text, nothing pushed with margin:auto */
.top-nav{display:flex;align-items:center;justify-content:flex-end;
  padding:6px var(--grid-pad) 0;box-sizing:border-box}
.top-nav .menu{display:flex;align-items:center;gap:28px}
.top-nav .menu>li{position:relative}
.top-nav .menu a{font-size:13px;white-space:nowrap;padding:4px 0}
.top-nav .menu a:hover{color:var(--color-accent-700)}
.top-nav .btn{margin-left:28px;padding:8px 16px;font-size:13px}
.top-nav .sub{position:absolute;left:-16px;top:100%;min-width:320px;z-index:50;
  margin:0;padding:var(--half) 0;background:var(--color-bg);border:1px solid var(--color-divider);
  opacity:0;visibility:hidden;transition:opacity .12s ease}
.top-nav .has-sub:hover .sub,.top-nav .has-sub:focus-within .sub{opacity:1;visibility:visible}
.top-nav .sub a{display:block;padding:8px 16px;font-size:13px;line-height:1.35}
.top-nav .sub a:hover{background:color-mix(in srgb,var(--color-accent) 10%,transparent)}
@media (max-width:899px){
  .top-nav{flex-wrap:wrap;row-gap:12px;justify-content:flex-start}
  .top-nav .menu{flex-direction:column;align-items:flex-start;gap:0;width:100%}
  .top-nav .btn{margin-left:0}
  /* an absolute, min-width:320px dropdown doesn't fit a 375px screen — even
     hidden it inflates scrollWidth, so on narrow viewports it's just an
     always-expanded inline list instead of a hover flyout */
  .top-nav .sub{position:static;opacity:1;visibility:visible;min-width:0;margin:0 0 8px;padding:0;border:0;background:none}
  .top-nav .sub a{padding:6px 0 6px 16px}
  .top-nav .has-sub{width:100%}
}

/* the burger fallback, hidden until site.js reveals it past the top row */
.burger{position:fixed;top:24px;right:30px;z-index:200;width:48px;height:48px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:0;background:var(--color-bg);border:1px solid var(--color-divider);cursor:pointer;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease}
.burger.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.burger span{display:block;width:22px;height:2px;background:currentColor;transition:transform .15s ease,opacity .15s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.site-menu{position:fixed;top:80px;right:30px;z-index:190;width:320px;max-width:calc(100vw - 40px);
  background:var(--color-bg);border:1px solid var(--color-divider);padding:24px;
  box-shadow:0 16px 40px color-mix(in srgb,var(--color-text) 18%,transparent)}
.site-menu[hidden]{display:none}
.site-menu-brand{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid var(--color-divider)}
.site-menu-brand img{width:120px;height:auto;display:block}
.site-menu-brand small{display:block;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 60%,transparent)}
.site-menu .menu>li{border-bottom:1px solid var(--color-divider)}
.site-menu .menu>li:last-of-type{border-bottom:0}
.site-menu .menu a{display:block;padding:12px 0;font-size:15px}
.site-menu .menu a:hover{color:var(--color-accent-700)}
.site-menu .sub{margin:0 0 8px;padding:0}
.site-menu .sub a{padding:8px 0 8px 16px;font-size:13px;line-height:1.3}
.site-menu .btn{display:block;text-align:center;margin-top:18px}

/* — shared section furniture — */
section{scroll-margin-top:80px}
.kicker{display:block;font-size:13px;line-height:var(--half);letter-spacing:0.08em;text-transform:uppercase;font-weight:600;color:var(--color-accent-700);font-feature-settings:"tnum" 1;margin:0 0 var(--half)}
.caption-rule{height:1px;border:0;margin:0 0 var(--leading);background:var(--color-divider)}
.sec{padding:calc(2.5*var(--leading)) 0}
.sec-title{font-size:clamp(29px,3.2vw,43px);line-height:1.06;letter-spacing:0.01em;text-transform:uppercase;margin:0}
.sub-title{font-size:clamp(19px,2vw,23px);line-height:1.12;letter-spacing:0.02em;text-transform:uppercase;margin:calc(1.5*var(--leading)) 0 0}
p{font-size:15px;line-height:var(--leading);margin:var(--leading) 0 0;max-width:var(--measure)}
p.lead{font-size:19px;line-height:calc(1.25*var(--leading))}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.row{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:calc(1.5*var(--leading))}
a{color:var(--color-accent-700)}
a:hover{color:var(--color-accent-900)}

/* — the registration frame (the system's card grammar) — */
.frame{position:relative;border:1px solid var(--color-divider);padding:var(--leading)}
.frame>.corner,.figure>.corner{position:absolute;width:15px;height:15px;color:color-mix(in srgb,var(--color-text) 55%,transparent);pointer-events:none}
.frame>.corner::before,.figure>.corner::before{content:"";position:absolute;left:7px;top:0;width:1px;height:100%;background:currentColor}
.frame>.corner::after,.figure>.corner::after{content:"";position:absolute;top:7px;left:0;width:100%;height:1px;background:currentColor}
.corner.tl{top:-8px;left:-8px}.corner.tr{top:-8px;right:-8px}.corner.bl{bottom:-8px;left:-8px}.corner.br{bottom:-8px;right:-8px}
.frame h3{font-size:19px;line-height:1.14;letter-spacing:0.02em;text-transform:uppercase;margin:0}
.frame p{font-size:15px;margin-top:var(--half);color:color-mix(in srgb,var(--color-text) 78%,transparent)}
.frame .idx{display:block;font-size:13px;font-weight:600;letter-spacing:0.08em;color:var(--color-accent-700);margin-bottom:var(--half);font-feature-settings:"tnum" 1}

/* — grids — */
.grid{display:grid;gap:clamp(20px,2.4vw,40px);margin-top:calc(1.5*var(--leading))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span2{grid-column:span 2}
@media (max-width:899px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}.span2{grid-column:auto}.grid{gap:40px}}

/* — image placeholders (striped; the real photography drops in here) — */
.figure{position:relative;border:1px solid var(--color-divider);margin:0}
.ph{display:flex;align-items:flex-end;padding:var(--half);min-height:120px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--color-accent) 14%,transparent) 0 6px,transparent 6px 12px)}
.ph-lg{min-height:300px}
.ph-tall{aspect-ratio:16/9}

/* — figures / stat plates — */
.figures{display:grid;gap:0;margin-top:calc(1.5*var(--leading));border:1px solid var(--color-divider);grid-template-columns:repeat(3,minmax(0,1fr))}
.figures>div{padding:var(--leading);border-left:1px solid var(--color-divider)}
.figures>div:first-child{border-left:0}
.num{display:block;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(29px,3.4vw,43px);line-height:1.04;letter-spacing:0.01em;font-feature-settings:"tnum" 1}
.figures p{font-size:15px;margin-top:var(--half);color:color-mix(in srgb,var(--color-text) 78%,transparent)}
@media (max-width:780px){.figures{grid-template-columns:1fr}.figures>div{border-left:0;border-top:1px solid var(--color-divider)}.figures>div:first-child{border-top:0}}

/* — steel dividers (the accent's deep step as a full field) — */
.band{background:var(--color-accent-900);color:var(--color-bg);margin-top:calc(3*var(--leading))}
.band .wrap{padding-top:calc(2.5*var(--leading));padding-bottom:calc(2.5*var(--leading))}
.band h2{font-size:clamp(35px,6vw,72px);line-height:1.02;letter-spacing:0.02em;text-transform:uppercase;margin:0}
.band .kicker{color:color-mix(in srgb,var(--color-bg) 72%,transparent)}
.band .caption-rule{background:color-mix(in srgb,var(--color-bg) 30%,transparent)}
.band-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);margin-top:calc(2*var(--leading))}
.band-links a{display:block;padding:var(--leading);border:1px solid color-mix(in srgb,var(--color-bg) 34%,transparent);color:var(--color-bg);text-decoration:none}
.band-links a:hover{background:color-mix(in srgb,var(--color-bg) 10%,transparent);color:var(--color-bg)}
.band-links strong{display:block;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:23px;letter-spacing:0.02em;text-transform:uppercase}
.band-links span{display:block;margin-top:var(--half);font-size:15px;color:color-mix(in srgb,var(--color-bg) 80%,transparent)}
@media (max-width:680px){.band-links{grid-template-columns:1fr}}

/* — CTA strip — */
.cta{border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);padding:calc(2*var(--leading)) 0;margin-top:calc(2.5*var(--leading))}
.cta h2{font-size:clamp(23px,2.6vw,35px);line-height:1.1;letter-spacing:0.02em;text-transform:uppercase;margin:0;max-width:34ch}

/* — accordions (native details) — */
.acc{margin-top:calc(1.5*var(--leading));border-top:1px solid var(--color-divider)}
.acc details{border-bottom:1px solid var(--color-divider)}
.acc summary{display:flex;gap:var(--space-3);align-items:baseline;padding:var(--leading) 0;cursor:pointer;list-style:none;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:19px;letter-spacing:0.02em;text-transform:uppercase}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";margin-left:auto;font-family:var(--font-body);font-size:19px;line-height:1;color:var(--color-accent-700)}
.acc details[open] summary::after{content:"–"}
.acc summary:hover{color:var(--color-accent-700)}
.acc summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.acc .body{padding:0 0 var(--leading)}
.acc .body p{margin-top:0;margin-bottom:var(--half)}
.acc .body p:last-child{margin-bottom:0}
.acc .body ul{margin:0;padding-left:1.1em}
.acc .body li{font-size:15px;line-height:var(--leading);margin-bottom:6px}
.acc .n{font-size:13px;font-weight:600;letter-spacing:0.08em;color:var(--color-accent-700);font-feature-settings:"tnum" 1}
.note{font-size:15px;color:color-mix(in srgb,var(--color-text) 70%,transparent)}

/* — tabs — */
.tabs{display:flex;flex-wrap:wrap;gap:0;margin-top:calc(1.5*var(--leading));border:1px solid var(--color-divider);width:max-content;max-width:100%}
.tabs button{appearance:none;background:none;border:0;border-left:1px solid var(--color-divider);padding:10px 16px;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:15px;letter-spacing:0.04em;text-transform:uppercase;color:var(--color-text);cursor:pointer}
.tabs button:first-child{border-left:0}
.tabs button:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.tabs button[aria-selected="true"]{background:var(--color-accent);color:var(--color-bg)}
.tabs button:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}
[role="tabpanel"][hidden]{display:none}

/* — spec tables — */
.tw{margin-top:var(--leading);overflow-x:auto;border:1px solid var(--color-divider)}
.table th,.table td{padding:10px var(--half);vertical-align:top}
.table td{font-size:13px;line-height:1.45}
.table th[scope="row"]{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:15px;letter-spacing:0.02em;text-transform:none;color:var(--color-text);white-space:normal;border-bottom:1px solid color-mix(in srgb,var(--color-text) 8%,transparent);width:22%;min-width:170px}
.table thead th{white-space:nowrap}
.table tbody tr:hover{background:none}
.spec-toggle{margin-top:var(--leading)}

/* — process chain — */
.chain{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin-top:calc(1.5*var(--leading));border:1px solid var(--color-divider)}
.chain>span{flex:1 1 0;min-width:130px;padding:var(--leading) var(--half);border-left:1px solid var(--color-divider);font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:15px;letter-spacing:0.02em;text-transform:uppercase;text-align:center}
.chain>span:first-child{border-left:0}
.chain>span b{display:block;font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:0.08em;color:var(--color-accent-700);margin-bottom:6px}

/* — logo wall (names only until real marks arrive) — */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0;margin-top:calc(1.5*var(--leading));border:1px solid var(--color-divider)}
.wall>span{padding:var(--leading) var(--half);border-left:1px solid var(--color-divider);border-top:1px solid var(--color-divider);text-align:center;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:15px;letter-spacing:0.03em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 72%,transparent)}

/* — lists — */
.caps{display:grid;gap:0;margin-top:calc(1.5*var(--leading));grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--color-divider)}
.caps>li{list-style:none;padding:var(--leading);border-left:1px solid var(--color-divider);border-top:1px solid var(--color-divider);font-size:15px;line-height:var(--leading)}
@media (max-width:900px){.caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.caps{grid-template-columns:1fr}}
.plain{margin:var(--leading) 0 0;padding-left:1.1em}
.plain li{font-size:15px;line-height:var(--leading);margin-bottom:8px;max-width:var(--measure)}
.paramlist{margin-top:var(--leading);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--color-divider)}
.paramlist>div{display:flex;justify-content:space-between;gap:var(--space-3);padding:10px var(--half) 10px 0;border-bottom:1px solid color-mix(in srgb,var(--color-text) 8%,transparent);font-size:15px}
.paramlist b{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:19px;letter-spacing:0.02em;font-feature-settings:"tnum" 1;white-space:nowrap}
@media (max-width:680px){.paramlist{grid-template-columns:1fr}}

/* — steps (works cycle) — */
.steps{margin-top:calc(1.5*var(--leading));border-top:1px solid var(--color-divider)}
.steps>div{display:grid;grid-template-columns:88px 1fr;gap:var(--space-3);padding:var(--leading) 0;border-bottom:1px solid var(--color-divider)}
.steps .st-n{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:35px;line-height:0.9;color:var(--color-accent);font-feature-settings:"tnum" 1}
.steps h3{font-size:19px;letter-spacing:0.02em;text-transform:uppercase;margin:0}
.steps ul{margin:var(--half) 0 0;padding-left:1.1em}
.steps li{font-size:15px;line-height:var(--leading)}
.steps li ul{margin-top:4px}
@media (max-width:600px){.steps>div{grid-template-columns:1fr;gap:var(--half)}}

/* — contacts — */
.contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);margin-top:calc(1.5*var(--leading))}
.field{display:block;margin-bottom:var(--half)}
.field span{display:block;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 70%,transparent);margin-bottom:6px}
.field .input{width:100%;box-sizing:border-box}
.contact-info dl{margin:0}
.contact-info dt{font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent-700);font-weight:600;margin-top:var(--leading)}
.contact-info dd{margin:6px 0 0;font-size:15px;line-height:var(--leading)}
@media (max-width:780px){.contact{grid-template-columns:1fr}}

/* — footer — */
.site-foot{border-top:1px solid var(--color-divider);margin-top:calc(3*var(--leading));padding:calc(2*var(--leading)) 0}
.foot-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--leading);margin:0;padding:0}
.foot-nav li{list-style:none;font-size:15px;line-height:var(--leading)}
.foot-nav a{text-decoration:none;color:inherit}
.foot-nav a:hover{color:var(--color-accent-700)}
.foot-meta{margin-top:calc(2*var(--leading));font-size:13px;color:color-mix(in srgb,var(--color-text) 70%,transparent)}
@media (max-width:780px){.foot-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}