/* AP3D site styles */
:root {
  --black: #121316; --steel: #1C1E22; --steel-2: #26292E; --steel-line: #34373D;
  --concrete: #E8E9EB; --white: #FFFFFF;
  --ink: #141518; --ink-2: #4A4D55; --ink-3: #80838B; --line: #D3D5D9;
  --accent: #6D3BEB; --accent-dark: #5729CF; --accent-lit: #A88BFF;
  --orange: #FF7A1A;
  --side: max(32px, calc((100vw - 1240px) / 2 + 32px));
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--white); color: var(--ink); font-family: 'Archivo', system-ui, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-stretch: 125%; font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 3px; }
@media (max-width: 860px) { :root { --side: 20px; } .wrap { padding: 0 20px; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 4px; border: 1px solid transparent; font: 600 15px/1 'Archivo', sans-serif; font-stretch: 110%; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-line-dark { border-color: rgba(255,255,255,.3); color: #fff; }
.btn-line-dark:hover { border-color: #fff; }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--concrete); }

/* ---------- Nav ---------- */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(18,19,22,.88); backdrop-filter: blur(12px) saturate(1.3); border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; }
.top-inner { height: 64px; display: flex; align-items: center; gap: 40px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-stretch: 125%; font-size: 20px; }
.logo svg { width: 19px; height: 19px; }
.nav { display: flex; gap: 28px; flex: 1; }
.nav a { font-size: 14.5px; color: rgba(255,255,255,.64); font-weight: 500; position: relative; }
.nav a:hover, .nav a[aria-current] { color: #fff; }
.nav a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px; background: var(--accent-lit); }
.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-right .signin { font-size: 14.5px; color: rgba(255,255,255,.75); padding: 0 12px; }
.nav-right .signin:hover { color: #fff; }
.nav-right .btn { height: 38px; padding: 0 16px; font-size: 14px; }
.menu-btn { display: none; margin-left: auto; width: 40px; height: 40px; background: none; border: 0; color: #fff; cursor: pointer; align-items: center; justify-content: center; }
@media (max-width: 960px) {
  .nav, .nav-right { display: none; }
  .menu-btn { display: inline-flex; }
  .top.open { background: var(--black); }
  .top.open .nav { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: var(--black); padding: 4px 20px 0; gap: 0; }
  .top.open .nav a { padding: 15px 0; border-bottom: 1px solid var(--steel-line); font-size: 16px; color: #fff; }
  .top.open .nav a::after { display: none; }
  .top.open .nav-right { display: flex; position: absolute; left: 0; right: 0; top: calc(64px + 5 * 53px + 4px); background: var(--black); padding: 16px 20px 20px; }
  .top.open .nav-right .btn { flex: 1; height: 46px; }
}

/* ---------- Pinned 3D scenes ---------- */
.scrolly { position: relative; background: var(--black); color: #fff; }
.scrolly.len-4 { height: 420vh; } .scrolly.len-5 { height: 520vh; } .scrolly.len-6 { height: 620vh; }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.scrolly canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 62% 55%, transparent 40%, rgba(18,19,22,.6) 100%); }
.caps { position: absolute; inset: 0; pointer-events: none; }
.cap { position: absolute; left: var(--side); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); opacity: 0; will-change: opacity, transform; }
.cap.on { pointer-events: auto; }
.cap h1 { font-size: clamp(30px, 3.1vw, 46px); line-height: 1.05; max-width: 15ch; }
.cap h2 { font-size: clamp(36px, 4.2vw, 62px); }
.cap p { font-size: 17.5px; color: rgba(255,255,255,.72); margin-top: 20px; max-width: 40ch; }
.cap .step { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--accent-lit); margin-bottom: 16px; font-stretch: 110%; }
.cap .step b { display: inline-flex; width: 28px; height: 28px; border: 1px solid var(--accent-lit); border-radius: 50%; align-items: center; justify-content: center; font-size: 13px; }
.cap .acts { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.dim { position: absolute; left: 0; top: 0; font-size: 13px; font-weight: 600; font-stretch: 105%; color: #fff; background: var(--black); padding: 3px 7px; border: 1px solid rgba(232,230,240,.55); border-radius: 2px; white-space: nowrap; opacity: 0; pointer-events: none; }
.phase { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); display: flex; gap: 6px; width: min(560px, calc(100vw - 40px)); }
.phase div { flex: 1; }
.phase span { display: block; font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 8px; font-weight: 500; }
.phase div.on span { color: #fff; }
.phase i { display: block; height: 2px; background: rgba(255,255,255,.16); position: relative; overflow: hidden; }
.phase i::after { content: ""; position: absolute; inset: 0; background: var(--accent-lit); transform-origin: left; transform: scaleX(var(--f, 0)); }
.readout { position: absolute; right: var(--side); bottom: 36px; font-size: 13px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; text-align: right; max-width: 30ch; }
.scroll-hint { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); font-size: 13px; color: rgba(255,255,255,.5); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scroll-hint i { width: 1px; height: 36px; background: linear-gradient(rgba(255,255,255,.6), transparent); }

/* drawing sheet frame and title block */
.sheet { position: absolute; inset: 84px 20px 20px; border: 1px solid rgba(168,139,255,.35); pointer-events: none; }
.sheet::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(168,139,255,.18); }
.tblock { position: absolute; right: 6px; bottom: 6px; display: grid; grid-template-columns: repeat(3, auto); border-left: 1px solid rgba(168,139,255,.35); border-top: 1px solid rgba(168,139,255,.35); font-size: 11.5px; color: rgba(255,255,255,.75); background: rgba(18,19,22,.85); }
.tblock div { padding: 6px 12px; border-right: 1px solid rgba(168,139,255,.25); border-bottom: 1px solid rgba(168,139,255,.25); }
.tblock div small { display: block; color: rgba(255,255,255,.45); font-size: 10.5px; }
.tblock .wide { grid-column: span 2; font-weight: 700; font-size: 13px; color: #fff; }
.tblock svg { display: block; }
@media (max-width: 860px) { .sheet { display: none; } }

/* feature tree */
.tree { position: absolute; right: var(--side); top: 104px; width: 260px; list-style: none; background: rgba(28,30,34,.92); border: 1px solid var(--steel-line); font-size: 13px; opacity: 0; }
.tree .th { padding: 10px 14px; border-bottom: 1px solid var(--steel-line); color: rgba(255,255,255,.55); display: flex; justify-content: space-between; }
.tree li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; color: rgba(255,255,255,.4); border-left: 2px solid transparent; }
.tree li span:last-child { font-variant-numeric: tabular-nums; }
.tree li.done { color: rgba(255,255,255,.8); }
.tree li.on { color: #fff; background: rgba(109,59,235,.22); border-left-color: var(--accent-lit); }
@media (max-width: 1100px) { .tree { display: none; } }

/* process readouts */
.readpanel { position: absolute; right: var(--side); top: 104px; width: 270px; background: rgba(28,30,34,.92); border: 1px solid var(--steel-line); font-size: 13px; }
.readpanel div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--steel-line); }
.readpanel div:last-child { border-bottom: 0; }
.readpanel span:first-child { color: rgba(255,255,255,.5); }
.readpanel span:last-child { color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.readpanel .hd { font-weight: 700; font-size: 14px; }
.legend { position: absolute; right: var(--side); bottom: 36px; display: flex; gap: 16px; font-size: 13px; color: rgba(255,255,255,.7); opacity: 0; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 14px; height: 4px; display: inline-block; }
@media (max-width: 860px) {
  .cap { left: 20px; right: 20px; width: auto; top: 88px; transform: none; }
  .cap h1 { font-size: clamp(28px, 7.6vw, 40px); }
  .cap h2 { font-size: clamp(32px, 8.6vw, 46px); }
  .cap p { font-size: 15.5px; margin-top: 12px; }
  .cap .acts { margin-top: 20px; }
  .readpanel { top: auto; bottom: 88px; right: 20px; left: 20px; width: auto; display: flex; flex-wrap: wrap; }
  .readpanel div { flex: 1 1 50%; border-bottom: 0; padding: 6px 10px; }
  .readpanel .hd, .readpanel .opt { display: none; }
  .readout { bottom: 88px; right: 20px; left: 20px; text-align: left; max-width: none; }
  .legend { bottom: 160px; left: 20px; right: 20px; flex-wrap: wrap; gap: 10px 16px; }
  .scroll-hint { display: none; }
}

/* fallback without WebGL or with reduced motion */
.scrolly.is-static { height: auto !important; }
.is-static .sticky { position: relative; height: auto; overflow: visible; padding: 120px 0 64px; }
.is-static canvas, .is-static .phase, .is-static .readout, .is-static .scroll-hint, .is-static .dim, .is-static .vignette, .is-static .sheet, .is-static .tree, .is-static .readpanel, .is-static .legend { display: none; }
.is-static .caps { position: relative; display: grid; gap: 56px; }
.is-static .cap { position: relative; opacity: 1 !important; transform: none !important; top: auto; left: auto; width: auto; max-width: 680px; margin: 0 auto; padding: 0 20px; }

/* ---------- Page heroes (inner pages) ---------- */
.page-hero { background: var(--black); color: #fff; padding: 160px 0 96px; position: relative; overflow: hidden; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(44px, 6.4vw, 96px); max-width: 13ch; }
.page-hero p { font-size: 19px; color: rgba(255,255,255,.7); max-width: 48ch; margin-top: 24px; }
.page-hero .acts { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.page-hero .gridbg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(90deg, transparent 20%, #000 80%); -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 80%); }
@media (max-width: 860px) { .page-hero { padding: 120px 0 64px; } }

/* ---------- Generic sections ---------- */
.statement { background: var(--black); color: #fff; padding: 140px 0 160px; }
.statement p { font-size: clamp(28px, 3.8vw, 54px); font-stretch: 112%; font-weight: 700; line-height: 1.18; letter-spacing: -0.015em; max-width: 24ch; }
.statement .w { color: rgba(255,255,255,.18); transition: color .2s linear; }
.statement .w.lit { color: #fff; }
.sec { padding: 120px 0; }
.sec-concrete { background: var(--concrete); }
.sec-dark { background: var(--black); color: #fff; }
.sec-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; margin-bottom: 64px; }
.sec-head h2 { font-size: clamp(36px, 4.6vw, 64px); }
.sec-head p { font-size: 18px; color: var(--ink-2); max-width: 46ch; }
.sec-dark .sec-head p { color: rgba(255,255,255,.62); }
@media (max-width: 860px) { .sec { padding: 80px 0; } .sec-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 40px; } .statement { padding: 96px 0 110px; } }

.panels { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); }
.panels.c2 { grid-template-columns: 1fr 1fr; } .panels.c3 { grid-template-columns: repeat(3, 1fr); } .panels.c4 { grid-template-columns: repeat(4, 1fr); }
.panels > * { background: var(--white); padding: 40px; }
.panels h3 { font-size: 26px; }
.panels h4 { font-size: 19px; font-stretch: 115%; font-weight: 700; margin-bottom: 8px; }
.panels p { color: var(--ink-2); margin-top: 10px; }
.panels .more { display: inline-flex; margin-top: 22px; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.panels .dark { background: var(--steel); color: #fff; }
.panels .dark p { color: rgba(255,255,255,.7); }
.sec-dark .panels { background: var(--steel-line); border-color: var(--steel-line); }
.sec-dark .panels > * { background: var(--steel); }
.sec-dark .panels p { color: rgba(255,255,255,.66); }
@media (max-width: 960px) { .panels.c3, .panels.c4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .panels.c2, .panels.c3, .panels.c4 { grid-template-columns: 1fr; } .panels > * { padding: 28px 22px; } }

.spec { list-style: none; margin-top: 26px; border-top: 1px solid var(--line); }
.spec li { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; font-size: 15px; }
.spec li span:last-child { color: var(--ink-3); text-align: right; }
.dark .spec, .sec-dark .spec { border-color: var(--steel-line); }
.dark .spec li, .sec-dark .spec li { border-color: var(--steel-line); }
.dark .spec li span:last-child, .sec-dark .spec li span:last-child { color: rgba(255,255,255,.5); }

/* comparison / data tables */
.dtable { width: 100%; border-collapse: collapse; font-size: 15px; }
.dtable th { text-align: left; font-weight: 600; font-size: 14px; color: var(--ink-3); padding: 0 16px 14px 0; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
.dtable th.big { font-size: 22px; color: var(--ink); font-stretch: 120%; font-weight: 800; }
.dtable td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.dtable td:first-child { color: var(--ink); font-weight: 600; width: 22%; }
.sec-dark .dtable th { border-color: #fff; color: rgba(255,255,255,.5); }
.sec-dark .dtable th.big { color: #fff; }
.sec-dark .dtable td { border-color: var(--steel-line); color: rgba(255,255,255,.7); }
.sec-dark .dtable td:first-child { color: #fff; }
.mname { display: flex; gap: 14px; align-items: center; font-weight: 700; font-size: 19px; font-stretch: 115%; color: var(--ink); }
.mname small { display: block; font-weight: 500; font-size: 13px; color: var(--ink-3); font-stretch: 100%; margin-top: 2px; }
.spool { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; position: relative; }
.spool::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--white); }
.sec-concrete .spool::after { background: var(--concrete); }
.meter { display: flex; gap: 3px; margin-top: 4px; }
.meter i { width: 18px; height: 6px; background: #C4C6CB; }
.meter i.on { background: var(--ink); }
.mlabel { display: none; }
.note { font-size: 14px; color: var(--ink-3); margin-top: 20px; }
.sec-dark .note { color: rgba(255,255,255,.45); }
.tag { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 3px 8px; border: 1px solid currentColor; border-radius: 2px; margin-left: 8px; vertical-align: 2px; font-stretch: 100%; }
@media (max-width: 760px) {
  .dtable.stack thead { display: none; }
  .dtable.stack, .dtable.stack tbody, .dtable.stack tr, .dtable.stack td { display: block; width: 100% !important; }
  .dtable.stack tr { border-bottom: 1px solid var(--line); padding: 18px 0; }
  .dtable.stack td { border: 0; padding: 5px 0; display: flex; justify-content: space-between; gap: 16px; }
  .dtable.stack td:first-child { padding-bottom: 10px; }
  .dtable.stack .mlabel { display: inline; color: var(--ink-3); font-size: 14px; font-weight: 500; }
  .dtable.stack td.long { display: block; }
  .dtable.stack td.long .mlabel { display: block; margin-bottom: 2px; }
  .dtable.compare { font-size: 14px; }
  .dtable.compare td:first-child { width: 30%; }
}

/* horizontal pinned process */
.hs { position: relative; background: var(--black); color: #fff; }
.hs-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hs-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 48px; }
.hs-head h2 { font-size: clamp(36px, 4.6vw, 64px); }
.hs-head p { color: rgba(255,255,255,.6); max-width: 38ch; }
.hs-track { display: flex; gap: 2px; padding-left: var(--side); will-change: transform; }
.hs-card { flex: 0 0 400px; min-height: 380px; background: var(--steel); padding: 36px 32px; display: flex; flex-direction: column; border-top: 2px solid var(--steel-line); }
.hs-card.on { border-top-color: var(--accent-lit); }
.hs-card .n { font-size: 72px; font-weight: 800; font-stretch: 125%; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.35); }
.hs-card h3 { font-size: 26px; margin-top: auto; }
.hs-card p { color: rgba(255,255,255,.66); margin-top: 12px; font-size: 15.5px; }
.hs-card .who { margin-top: 18px; font-size: 13px; color: var(--accent-lit); font-weight: 600; }
.hs-end { flex: 0 0 64px; }
@media (max-width: 860px) {
  .hs { padding: 80px 0; }
  .hs-sticky { position: relative; height: auto; display: block; }
  .hs-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
  .hs-track { flex-direction: column; padding: 0 20px; transform: none !important; }
  .hs-card { flex: none; min-height: 0; padding: 28px 24px; }
  .hs-card .n { font-size: 48px; margin-bottom: 24px; }
  .hs-end { display: none; }
}

/* design page: drawing sheet that draws itself */
.dwg { position: relative; height: 380vh; background: #F3F3F1; }
.dwg-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: center; padding: 84px var(--side) 24px; }
.dwg-steps { list-style: none; }
.dwg-steps li { padding: 18px 0 18px 20px; border-left: 2px solid var(--line); color: var(--ink-3); transition: color .2s, border-color .2s; }
.dwg-steps li b { display: block; font-size: 20px; font-stretch: 115%; color: inherit; margin-bottom: 4px; }
.dwg-steps li span { font-size: 15px; }
.dwg-steps li.on { border-color: var(--accent); color: var(--ink); }
.dwg-steps li.done { color: var(--ink-2); }
.dwg-sheet { width: 100%; height: 100%; max-height: calc(100vh - 120px); }
.dwg-sheet svg { width: 100%; height: 100%; }
.dwg-sheet .ln { stroke: #1A1C20; stroke-width: 1.4; fill: none; }
.dwg-sheet .th { stroke: #1A1C20; stroke-width: 0.7; fill: none; }
.dwg-sheet .hid { stroke: #1A1C20; stroke-width: 0.8; fill: none; stroke-dasharray: 5 3; }
.dwg-sheet .cl { stroke: #6D3BEB; stroke-width: 0.7; fill: none; stroke-dasharray: 16 3 3 3; }
.dwg-sheet .dm { stroke: #6D3BEB; stroke-width: 0.8; fill: none; }
.dwg-sheet text { font-family: 'Archivo', sans-serif; font-size: 11px; fill: #1A1C20; }
.dwg-sheet text.dt { fill: #6D3BEB; font-weight: 600; }
.dwg-sheet text.tt { font-size: 15px; font-weight: 800; font-stretch: 120%; }
.dwg-sheet .hatch { fill: url(#hatch); }
@media (max-width: 960px) {
  .dwg { height: auto; }
  .dwg-sticky { position: relative; height: auto; grid-template-columns: 1fr; padding: 72px 20px; }
  .dwg-sheet { max-height: none; }
  .dwg-steps li { color: var(--ink-2); }
}

/* pricing */
.rows { margin-top: 28px; border-top: 2px solid var(--ink); }
.row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.row span:last-child { color: var(--ink-3); text-align: right; }
.row.total { font-weight: 700; border-bottom: 0; }
.row.total span:last-child { color: var(--ink); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; gap: 32px; } }
.faq-side h2 { font-size: clamp(36px, 4.2vw, 56px); }
.faq-side p { color: var(--ink-2); margin-top: 18px; max-width: 34ch; }
.faq-side a { color: var(--accent); font-weight: 600; }
.faq { border-top: 2px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px 0; font: 600 18px/1.35 'Archivo', sans-serif; font-stretch: 105%; color: var(--ink); }
.faq-q svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s; color: var(--ink-3); }
.faq-item.open .faq-q svg { transform: rotate(45deg); color: var(--ink); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-a p { padding: 0 40px 24px 0; color: var(--ink-2); max-width: 64ch; }

/* CTA band */
.cta { background: var(--accent); color: #fff; }
.cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; padding-top: 88px; padding-bottom: 88px; }
.cta h2 { font-size: clamp(36px, 5vw, 72px); max-width: 14ch; }
.cta p { color: rgba(255,255,255,.8); margin-top: 16px; max-width: 46ch; font-size: 17px; }
.cta .acts { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) { .cta-inner { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 64px; } }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.cdl { margin-top: 8px; }
.cd { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--steel-line); font-size: 15.5px; }
.cd dt { color: rgba(255,255,255,.5); }
.cd dd small { display: block; color: rgba(255,255,255,.5); font-size: 13px; margin-top: 2px; }
.cd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.map { border: 1px solid var(--steel-line); background: var(--steel); }
.map iframe { display: block; width: 100%; height: 400px; border: 0; filter: grayscale(1) invert(.9) contrast(.9); }
.map-bar { display: flex; justify-content: space-between; padding: 14px 18px; font-size: 14px; color: rgba(255,255,255,.6); border-top: 1px solid var(--steel-line); }
.map-bar a { color: #fff; font-weight: 600; }

/* footer */
footer { background: var(--black); color: rgba(255,255,255,.58); padding: 80px 0 36px; font-size: 14px; border-top: 1px solid var(--steel-line); }
.foot-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.foot-top .logo { color: #fff; }
.foot-top p { margin-top: 12px; max-width: 32ch; }
.foot-cols { display: flex; gap: 72px; flex-wrap: wrap; }
.foot-col h5 { color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.foot-col a { display: block; margin-bottom: 10px; }
.foot-col a:hover { color: #fff; }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; color: rgba(255,255,255,.4); font-size: 13px; }
.foot-bottom button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom button:hover { color: #fff; }

/* terms modal */
.terms-wrap { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(18,19,22,.7); align-items: center; justify-content: center; padding: 20px; }
.terms-wrap.open { display: flex; }
.terms { background: #fff; border-radius: 4px; max-width: 680px; width: 100%; max-height: 86vh; overflow-y: auto; padding: 40px; }
.terms-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.terms-head h2 { font-size: 28px; }
.terms-head button { background: none; border: 0; cursor: pointer; width: 36px; height: 36px; color: var(--ink-2); }
.terms h3 { font-size: 17px; font-stretch: 105%; margin: 24px 0 8px; letter-spacing: 0; }
.terms p { font-size: 15px; color: var(--ink-2); margin-bottom: 12px; line-height: 1.65; }
@media (max-width: 600px) { .terms { padding: 28px 22px; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .statement .w { color: #fff; transition: none; } }
.tree ol { list-style: none; }
@media (min-width: 861px) { .scrolly .vignette { background: linear-gradient(90deg, rgba(18,19,22,.82) 0, rgba(18,19,22,.55) 28%, transparent 48%), radial-gradient(ellipse at 62% 55%, transparent 40%, rgba(18,19,22,.6) 100%); } }
@media (max-width: 860px) { .scrolly .vignette { background: linear-gradient(180deg, rgba(18,19,22,.85) 0, rgba(18,19,22,.5) 38%, transparent 55%); } }
@media (max-width: 860px) { #mjfScene .readout { display: none; } }
@media (max-width: 860px) { .dim-x { display: none; } }
.scrolly.len-8 { height: 840vh; }
.bom { position: absolute; right: var(--side); top: 104px; width: 290px; background: rgba(28,30,34,.92); border: 1px solid var(--steel-line); font-size: 13px; opacity: 0; }
.bom .th { padding: 10px 14px; border-bottom: 1px solid var(--steel-line); color: rgba(255,255,255,.55); display: flex; justify-content: space-between; }
.bom ol { list-style: none; }
.bom li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; padding: 7px 14px; color: rgba(255,255,255,.42); }
.bom li b { font-weight: 600; color: inherit; font-variant-numeric: tabular-nums; }
.bom li span:last-child { text-align: right; }
.bom li.done { color: #fff; }
.bom li.pr span:last-child { color: var(--accent-lit); }
.balloon { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(18,19,22,.85); padding: 3px 9px 3px 3px; border: 1px solid rgba(232,230,240,.4); border-radius: 999px; white-space: nowrap; opacity: 0; pointer-events: none; }
.balloon b { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); align-items: center; justify-content: center; font-size: 11px; }
@media (max-width: 1100px) { .bom { display: none; } }
@media (max-width: 860px) { .balloon { display: none; } }
.is-static .bom, .is-static .balloon { display: none; }

/* ===== minimal layer ===== */
body.min h1, body.min h2, body.min h3 { font-stretch: 108%; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
body.min .cap { width: min(420px, 34vw); }
body.min .cap h1 { font-size: clamp(34px, 3.8vw, 54px); }
body.min .cap h2 { font-size: clamp(28px, 2.8vw, 40px); }
body.min .cap p { font-size: 16px; margin-top: 14px; color: rgba(255,255,255,.7); }
body.min .cap .acts { margin-top: 24px; }
body.min .btn { height: 44px; padding: 0 18px; font-size: 14.5px; font-stretch: 100%; }
body.min .phase span { font-size: 12px; }
body.min .readout { font-size: 12.5px; }
body.min .readpanel { width: 230px; font-size: 12.5px; }
body.min .vignette { background: linear-gradient(90deg, rgba(18,19,22,.7) 0, rgba(18,19,22,.35) 26%, transparent 44%); }
@media (max-width: 860px) { body.min .vignette { background: linear-gradient(180deg, rgba(18,19,22,.85) 0, rgba(18,19,22,.4) 34%, transparent 50%); } body.min .cap { width: auto; } body.min .cap h1 { font-size: 34px; } body.min .cap h2 { font-size: 28px; } }

.hero-min { padding: 150px 0 40px; }
.hero-min h1 { font-size: clamp(36px, 4.4vw, 56px); }
.hero-min p { font-size: 18px; color: var(--ink-2); max-width: 46ch; margin-top: 14px; }
.hero-min .btn { margin-top: 26px; }
@media (max-width: 860px) { .hero-min { padding: 112px 0 24px; } }

.sec-min { padding: 72px 0; }
.sec-min.tight { padding-top: 24px; }
.sec-min + .sec-min { padding-top: 0; }
.sec-min h2 { font-size: clamp(26px, 2.6vw, 34px); }
.sec-min h2.sm { margin-bottom: 28px; }
.sec-min h3 { font-size: 20px; }
.sec-min p { color: var(--ink-2); margin-top: 10px; max-width: 46ch; }
.sec-min .more { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--accent); }
.sec-min .more:hover { text-decoration: underline; text-underline-offset: 3px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
@media (max-width: 760px) { .cols2, .cols3 { grid-template-columns: 1fr; gap: 36px; } .sec-min { padding: 56px 0; } }
.steps-min { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: s; }
.steps-min li { color: var(--ink-2); font-size: 15px; }
.steps-min li::before { counter-increment: s; content: counter(s); display: block; font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.steps-min b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
@media (max-width: 760px) { .steps-min { grid-template-columns: 1fr 1fr; } }
.cta-min { border-top: 1px solid var(--line); }
.cta-min .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 40px; padding-bottom: 40px; }
.cta-min p { font-size: 18px; color: var(--ink); }
.foot-min { background: var(--white); border-top: 1px solid var(--line); padding: 28px 0; font-size: 13.5px; color: var(--ink-3); }
.foot-min .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 22px; }
.foot-links a:hover, .foot-links button:hover { color: var(--ink); }
.foot-links button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
body.min .dtable th { border-bottom-width: 1px; font-weight: 600; color: var(--ink); font-size: 14px; }
body.min .dtable td:first-child { font-weight: 500; }
body.min .faq-grid { grid-template-columns: 1fr 2fr; }
body.min .faq { border-top: 1px solid var(--line); }
body.min .faq-q { font-size: 16.5px; font-stretch: 100%; padding: 18px 0; }
@media (max-width: 860px) { body.min .faq-grid { grid-template-columns: 1fr; } }
body.min .dwg { background: var(--white); border-top: 1px solid var(--line); }
body.min .dwg-sticky { grid-template-columns: 280px 1fr; }
@media (max-width: 960px) { body.min .dwg-sticky { grid-template-columns: 1fr; } }
.plain { display: grid; grid-template-columns: 90px 1fr; gap: 14px 20px; font-size: 16px; align-content: start; }
.plain dt { color: var(--ink-3); }
.plain a { color: var(--accent); }
.map-min iframe { display: block; width: 100%; height: 320px; border: 0; filter: grayscale(1); }
.map-min a { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--accent); }
body.min .top { background: rgba(18,19,22,.9); }
.scrolly.len-9 { height: 980vh; }
.logo { gap: 8px; font-stretch: 112%; letter-spacing: 0.01em; font-size: 21px; }
.logo svg { width: 18px; height: 18px; }