/* MAP High-Tech — shared design system (Concept A · Graphite Signal)
   Layout: 1200px column, graphite "spec sheet" bands alternate with light paper bands;
   signal green is reserved for the brand mark, live states and one CTA per view. */
:root{
  --paper:#ffffff;
  --mist:#eef0f1;          /* soft band / card ground */
  --line:#dfe3e5;
  --ink:#16191c;           /* body text */
  --steel:#5e666d;         /* secondary text */
  --graphite:#23282c;      /* dark band */
  --graphite-2:#2c3236;
  --on-dark:#f1f3f3;
  --on-dark-2:#aab2b8;
  --line-dark:#3a4146;     /* rules on graphite */
  --signal:#00a73c;        /* MAP CI green */
  --signal-hl:#3fd27a;     /* green on graphite */
  --link:#00843a;          /* green text on paper (AA) */
  --ind-battery:#3d6f8f;
  --ind-auto:#6b5b95;
  --ind-tire:#4a4f54;
  --ind-global:#2f7a74;

  --f-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --f-mono-kr:"IBM Plex Mono","IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",monospace;  /* mono digits, Plex KR for hangul */
  --t-xs:.75rem; --t-sm:.875rem; --t-md:1rem; --t-lg:1.25rem; --t-xl:1.75rem; --t-2xl:2.5rem; --t-3xl:clamp(2.2rem,4.6vw,3.6rem);
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  --radius:4px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#121517; --mist:#1a1e21; --line:#2c3236; --ink:#e7eaeb; --steel:#9aa3a9;
  --graphite:#0b0d0e; --graphite-2:#171b1d; --line-dark:#2c3236; --link:#3fd27a;
  --ind-battery:#6fa3c4; --ind-auto:#9d8cc9; --ind-tire:#9aa1a8; --ind-global:#5fb3ab; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#121517; --mist:#1a1e21; --line:#2c3236; --ink:#e7eaeb; --steel:#9aa3a9;
  --graphite:#0b0d0e; --graphite-2:#171b1d; --line-dark:#2c3236; --link:#3fd27a;
  --ind-battery:#6fa3c4; --ind-auto:#9d8cc9; --ind-tire:#9aa1a8; --ind-global:#5fb3ab; color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--t-md);line-height:1.7;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;line-height:1.3;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;transition:none!important}}

.wrap{max-width:1200px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.band{padding-block:88px}
.band--mist{background:var(--mist)}
.band--dark{background:var(--graphite);color:var(--on-dark)}
.label{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.band--dark .label{color:var(--on-dark-2)}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.brand svg,.brand img{height:26px;width:auto}
.brand-div{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;color:var(--steel);border-left:1px solid var(--line);padding-left:14px}
.nav{display:flex;gap:22px;margin-left:auto;font-size:var(--t-sm);font-weight:500}
.nav a{text-decoration:none;color:var(--steel);padding-block:6px;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--signal)}
.nav .ext::after{content:" ↗";font-family:var(--f-mono)}
.cta{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:var(--t-sm);font-weight:600;padding:10px 16px;border-radius:var(--radius);white-space:nowrap}
.cta:hover{background:var(--signal);color:#fff}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--ink);border-radius:var(--radius);padding:6px 10px;font:inherit;cursor:pointer}
[hidden]{display:none!important}
.site-header .nav-mobile{display:block;height:auto;border-top:1px solid var(--line);padding-block:8px 16px}
.nav-mobile a{display:block;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none}
@media (max-width:960px){.nav,.site-header .cta{display:none}.menu-btn{display:block}.brand-div{display:none}}

/* breadcrumb */
.crumbs{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.08em;color:var(--on-dark-2);display:flex;flex-wrap:wrap;gap:8px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--signal-hl)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--radius);font-weight:600;font-size:var(--t-sm);text-decoration:none;border:1px solid transparent}
.btn--signal{background:var(--signal);color:#fff}
.btn--signal:hover{background:#008f33}
.btn--ghost{border-color:#4a5258;color:var(--on-dark)}
.btn--ghost:hover{border-color:var(--signal-hl);color:var(--signal-hl)}
.btn--line{border-color:var(--line);color:var(--ink)}
.btn--line:hover{border-color:var(--ink)}

/* section head */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:40px}
.sec-head h2{font-size:var(--t-2xl);font-weight:700;margin-top:10px}
.sec-head p.lead{color:var(--steel);max-width:62ch;margin-top:12px}
.band--dark .sec-head p.lead{color:var(--on-dark-2)}
@media (max-width:720px){.sec-head{grid-template-columns:1fr}.sec-head h2{font-size:var(--t-xl)}.band{padding-block:64px}}

/* footer */
.site-footer{background:var(--graphite);color:var(--on-dark-2);font-size:var(--t-sm);padding-block:40px}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between}
.site-footer b{color:var(--on-dark)}
.site-footer small{display:block;max-width:70ch;font-size:var(--t-xs);line-height:1.7;margin-top:12px}

/* ---------- shared page components (all sub-pages) ---------- */
/* page hero: graphite band under the header; --c = industry color for the top rule */
.page-hero{background:var(--graphite);color:var(--on-dark);border-top:3px solid var(--c,var(--signal))}
.page-hero .wrap{padding-block:56px 64px;display:grid;gap:18px}
.page-hero h1{font-size:var(--t-3xl);font-weight:700;letter-spacing:-.035em;max-width:24ch}
.page-hero h1 em{font-style:normal;color:var(--signal-hl)}
.page-hero .intro{color:var(--on-dark-2);max-width:60ch;font-size:1.0625rem}
.page-hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.page-hero .figures{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:16px;padding-top:20px;border-top:1px solid var(--line-dark)}
.page-hero .figures div{font-size:var(--t-sm);color:var(--on-dark-2)}
.page-hero .figures b{display:block;font-family:var(--f-mono);font-weight:500;font-size:var(--t-xl);color:var(--on-dark);font-variant-numeric:tabular-nums}

/* in-page section nav (sticky under header) */
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 68px);z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.toc .wrap{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none}
.toc a{flex-shrink:0;padding:14px 0;font-size:var(--t-sm);color:var(--steel);text-decoration:none;border-bottom:2px solid transparent}
.toc a:hover,.toc a.on{color:var(--ink);border-bottom-color:var(--c,var(--signal))}

/* tabs: <div class="tabs" role="tablist"><button class="tab" role="tab" aria-selected="true"> */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.tab{font:inherit;font-size:var(--t-sm);font-weight:500;padding:9px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--steel);cursor:pointer}
.tab:hover{color:var(--ink);border-color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.band--dark .tab{background:transparent;border-color:var(--line-dark);color:var(--on-dark-2)}
.band--dark .tab[aria-selected="true"]{background:var(--on-dark);color:var(--graphite);border-color:var(--on-dark)}

/* cards & grids */
.grid{display:grid;gap:16px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.band--mist .card{background:var(--paper)}
.band--dark .card{background:var(--graphite-2);border-color:var(--line-dark)}
.card h3{font-size:var(--t-lg);font-weight:600}
.card p,.card li{color:var(--steel);font-size:var(--t-sm)}
.band--dark .card p,.band--dark .card li{color:var(--on-dark-2)}
.card ul{margin:0;padding-left:1.1em}
.card--accent{border-top:3px solid var(--c,var(--signal))}
.card .no{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--steel);letter-spacing:.08em}

/* workflow steps: <ol class="steps"><li><span class="no">01</span><div><h3>..</h3><p>..</p></div></li> */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.steps .no{font-family:var(--f-mono);font-size:var(--t-lg);color:var(--c,var(--signal));font-variant-numeric:tabular-nums}
.steps h3{font-size:var(--t-md);font-weight:600}
.steps p{color:var(--steel);font-size:var(--t-sm);margin-top:4px}
.band--dark .steps,.band--dark .steps li{border-color:var(--line-dark)}
.band--dark .steps p{color:var(--on-dark-2)}

/* tags */
.tag{display:inline-block;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.04em;padding:3px 8px;border:1px solid var(--line);border-radius:3px;color:var(--steel)}
.tag--critical{border-color:#c2410c;color:#c2410c}
.band--dark .tag{border-color:var(--line-dark);color:var(--on-dark-2)}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.table-wrap table{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:640px}
.table-wrap th,.table-wrap td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap th{font-family:var(--f-mono);font-weight:500;font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--steel);background:var(--mist)}
.table-wrap tr:last-child td{border-bottom:0}
.table-wrap td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* callout */
.note{border-left:3px solid var(--c,var(--signal));background:var(--mist);padding:16px 20px;border-radius:0 var(--radius) var(--radius) 0;font-size:var(--t-sm)}
.band--mist .note{background:var(--paper)}
.band--dark .note{background:var(--graphite-2);color:var(--on-dark-2)}

/* figures / photos */
.figure{margin:0;display:grid;gap:8px;min-width:0}
.figure img{width:100%;height:auto;border-radius:var(--radius);aspect-ratio:var(--ar,auto);object-fit:var(--fit,cover);max-width:100%}
.figure figcaption{font-size:var(--t-xs);color:var(--steel)}

/* prose (insight articles) */
.prose{max-width:68ch}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:var(--t-xl);margin-top:2.2em}
.prose h3{font-size:var(--t-lg);margin-top:1.8em}
.prose p,.prose li{font-size:1.0625rem;line-height:1.85}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--signal);color:var(--steel)}

/* next / related page links at page bottom */
.pager{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.pager a{display:flex;flex-direction:column;gap:4px;padding:20px 24px;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;background:var(--paper)}
.pager a:hover{border-color:var(--ink)}
.pager a span{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--steel);letter-spacing:.08em}
.pager a strong{font-size:var(--t-md)}
.page-hero .label{color:var(--on-dark-2)}
/* components inside .prose keep their own type */
.prose .steps h3,.prose .card h3{margin-top:0;font-size:var(--t-md)}
.prose .steps p,.prose .card p,.prose .card li{font-size:var(--t-sm);line-height:1.7}
.prose .steps li + li,.prose .card + .card{margin-top:0}
.tab[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.band--dark .tab[aria-pressed="true"]{background:var(--on-dark);color:var(--graphite);border-color:var(--on-dark)}
/* pages with a sticky .toc need room for header + toc when jumping to anchors */
html:has(.toc){scroll-padding-top:130px}
button.btn{font:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer;background:transparent}
button.btn--signal{background:var(--signal)}

/* long-form article: sticky outline on the left, reading column on the right */
.article-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:72px;align-items:start}
.article-toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 100px);display:grid;gap:18px}
.article-toc ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.article-toc li a{display:grid;grid-template-columns:1.8rem minmax(0,1fr);gap:6px;padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--t-sm);line-height:1.5;color:var(--steel);text-decoration:none}
.article-toc li a span{font-family:var(--f-mono);font-size:var(--t-xs);padding-top:2px}
.article-toc li a:hover,.article-toc li a.on{color:var(--ink)}
.article-toc li a.on span{color:var(--link)}
.article-body{max-width:820px;min-width:0}
.article-body.prose{max-width:820px}
.article-body.prose p,.article-body.prose li{font-size:1.125rem}
.article-body.prose h2{font-size:var(--t-xl);scroll-margin-top:100px}
.article-body.prose > h2:first-child{margin-top:0}
@media (max-width:960px){.article-grid{grid-template-columns:1fr;gap:32px}.article-toc{position:static}}
.page-hero--article .wrap{grid-template-columns:220px minmax(0,1fr);column-gap:72px}
.page-hero--article .wrap > *{grid-column:2}
.page-hero--article h1{max-width:22ch}
@media (max-width:960px){.page-hero--article .wrap{grid-template-columns:1fr}.page-hero--article .wrap > *{grid-column:1}}

/* ---------- refinement round 2: shared hero / consult / faq / rows / flow ---------- */
/* hero type A/B: two columns — .hero-main (text) + .hero-side (photo figure or .spec panel) */
.page-hero--split .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:56px;align-items:end}
.page-hero--split .hero-main{display:grid;gap:18px;min-width:0}
.page-hero--split .hero-side{min-width:0}
.page-hero--split .hero-side .figure img{border-radius:var(--radius)}
.page-hero--split .hero-side figcaption{color:var(--on-dark-2)}
.page-hero--split .hero-side figcaption a{color:inherit}
@media (max-width:900px){.page-hero--split .wrap{grid-template-columns:1fr;row-gap:36px}}

/* spec sheet panel (hub hero, material heroes) */
.spec{border:1px solid var(--line-dark);border-radius:var(--radius);background:var(--graphite-2);min-width:0;color:var(--on-dark)}
.spec-hd{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line-dark)}
.spec-hd .label{color:var(--on-dark-2)}
.spec dl{margin:0}
.spec-row{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:16px;padding:14px 18px;border-bottom:1px dashed var(--line-dark)}
.spec-row:last-child{border-bottom:0}
.spec dt{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;color:var(--on-dark-2);padding-top:3px}
.spec dd{margin:0;font-size:var(--t-sm);color:var(--on-dark-2)}
.spec dd b{display:block;font-family:var(--f-mono-kr);font-weight:500;font-size:var(--t-lg);color:var(--on-dark);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* consult band — identical on every page (markup in _template.html) */
.consult{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center}
.consult h2{font-size:var(--t-2xl);margin-top:10px}
.consult p{color:var(--on-dark-2);margin-top:14px;max-width:52ch}
.consult .checklist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.consult .checklist li{display:grid;grid-template-columns:2rem minmax(0,1fr);padding:12px 0;border-bottom:1px solid var(--line-dark);font-size:var(--t-sm)}
.consult .checklist li span{font-family:var(--f-mono);color:var(--signal-hl)}
.consult .mail{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:24px}
.consult .mail code{font-family:var(--f-mono);font-size:var(--t-md);color:var(--on-dark);user-select:all}
@media (max-width:900px){.consult{grid-template-columns:1fr;gap:32px}.consult h2{font-size:var(--t-xl)}}

/* faq accordion: <div class="faq"><details><summary>Q</summary><div class="faq-a">A</div></details></div> */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 1.5rem;gap:16px;padding:18px 0;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);font-size:var(--t-lg);line-height:1;color:var(--steel);text-align:right}
.faq details[open] summary::after{content:"−"}
.faq .faq-a{padding:0 2.5rem 20px 0;color:var(--steel);font-size:var(--t-sm)}

/* label/value rows: <dl class="rows"><div><dt>..</dt><dd>..</dd></div></dl> */
.rows{margin:0;border-top:1px solid var(--line)}
.rows > div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.rows dt{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;color:var(--steel);padding-top:3px}
.rows dd{margin:0;font-size:var(--t-sm)}
.band--dark .rows,.band--dark .rows > div{border-color:var(--line-dark)}
@media (max-width:600px){.rows > div{grid-template-columns:1fr;gap:2px}}

/* process flow: <ol class="flow"><li><span class="no">01</span><strong>..</strong><small>..</small></li> */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.flow li{display:grid;gap:4px;align-content:start;padding:16px;border-right:1px solid var(--line);min-width:0}
.flow li:last-child{border-right:0}
.flow .no{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--c,var(--signal))}
.flow strong{font-size:var(--t-sm)}
.flow small{font-size:var(--t-xs);color:var(--steel)}
@media (max-width:600px){.flow{grid-template-columns:1fr 1fr}.flow li{border-bottom:1px solid var(--line)}}
.page-hero--split:has(.spec) .wrap{align-items:center}

/* hero type A, bold: photo fills the right ~62% of the hero edge-to-edge, text on graphite at left */
.page-hero--photo{position:relative;overflow:hidden;isolation:isolate}
.page-hero--photo .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(560px,78vh,760px);align-items:center;padding-block:72px}
.page-hero--photo .hero-main{position:relative;z-index:2}
.page-hero--photo .hero-side{position:absolute;inset:0 0 0 38%;z-index:0}
.page-hero--photo .hero-side::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--graphite) 0%,color-mix(in srgb,var(--graphite) 70%,transparent) 14%,transparent 42%),
             linear-gradient(0deg,color-mix(in srgb,var(--graphite) 55%,transparent) 0%,transparent 28%)}
.page-hero--photo .hero-side > .figure,
.page-hero--photo .hero-side > .gallery{position:absolute;inset:0;margin:0;aspect-ratio:auto;border-radius:0;height:100%}
.page-hero--photo .hero-side .figure img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0}
.page-hero--photo .hero-side figcaption{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:16px;z-index:3;max-width:min(520px,80%);
  padding:6px 10px;background:color-mix(in srgb,var(--graphite) 82%,transparent);color:var(--on-dark-2);font-size:var(--t-xs);border-radius:var(--radius)}
@media (max-width:900px){
  .page-hero--photo .wrap{grid-template-columns:1fr;min-height:0;padding-block:48px 0}
  .page-hero--photo .hero-side{position:relative;inset:auto;aspect-ratio:4/3;margin-inline:calc(-1*var(--gutter)) calc(-1*var(--gutter-r))}
  .page-hero--photo .hero-side::before{background:linear-gradient(180deg,var(--graphite) 0%,transparent 22%)}
}
.page-hero--photo h1{font-size:clamp(2.1rem,3.6vw,3.1rem);max-width:none}

/* line-art drawings (technical-drawing style, token colors so both themes work) */
.art{display:block;width:100%;height:auto;max-width:100%}
.art .ln{fill:none;stroke:var(--steel);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.art .lt{stroke:var(--line)}
.art .ac{stroke:var(--c,var(--signal))}
.art .af{fill:var(--c,var(--signal))}
.art .pf{fill:var(--paper)}
.art text{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;fill:var(--steel)}
.band--dark .art .ln,.page-hero .art .ln{stroke:var(--on-dark-2)}
.band--dark .art .lt,.page-hero .art .lt{stroke:var(--line-dark)}
.band--dark .art .ac,.page-hero .art .ac{stroke:var(--signal-hl)}
.band--dark .art .af,.page-hero .art .af{fill:var(--signal-hl)}
.band--dark .art .pf,.page-hero .art .pf{fill:var(--graphite)}
.band--dark .art text,.page-hero .art text{fill:var(--on-dark-2)}
/* hero type C with a drawing on the right */
.page-hero--art{position:relative;overflow:hidden}
.page-hero--art .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:48px;align-items:center}
.page-hero--art .wrap > *:not(.hero-art){grid-column:1}
.page-hero--art .hero-art{grid-column:2;grid-row:1 / span 6;align-self:center;opacity:.95}
@media (max-width:900px){.page-hero--art .wrap{grid-template-columns:1fr}.page-hero--art .hero-art{display:none}}
/* compact photo hero: the first section's heading + lead stay visible on a 1080p screen */
.page-hero--photo .wrap{min-height:clamp(420px,52vh,520px);padding-block:40px}
.page-hero--photo .hero-main{gap:14px}
.page-hero--photo h1{font-size:clamp(2rem,3vw,2.7rem)}
.page-hero--photo .intro{font-size:var(--t-md)}
.page-hero--photo .actions{margin-top:2px}
.page-hero--photo .figures{margin-top:2px;padding-top:14px;gap:8px 36px}
.page-hero--photo .figures b{font-size:var(--t-lg)}
.toc + .band{padding-top:56px}
@media (max-width:900px){.page-hero--photo .wrap{padding-block:36px 0}}

/* unified hero frame: industry, global, BIM and insight pages share one height, type scale and rhythm
   (crumbs → 2-line h1 → intro → 2 actions → 3 figures, visual on the right) */
.page-hero .wrap{min-height:clamp(420px,52vh,520px);padding-block:40px;gap:14px;align-content:center}
.page-hero--split .wrap,.page-hero--art .wrap{align-items:center}
.page-hero--split .hero-main{gap:14px}
.page-hero h1,.page-hero--photo h1,.page-hero--article h1{font-size:clamp(2rem,3vw,2.7rem);max-width:none}
.page-hero .intro{font-size:var(--t-md)}
.page-hero .actions{margin-top:2px}
.page-hero .figures{margin-top:2px;padding-top:14px;gap:8px 36px}
.page-hero .figures b{font-size:var(--t-lg)}
.page-hero--art .hero-art{max-height:360px}
.page-hero--art .hero-art svg{max-height:360px}
@media (max-width:900px){.page-hero .wrap{min-height:0;padding-block:36px}.page-hero--photo .wrap{padding-block:36px 0}}
.page-hero--art .hero-main{display:grid;gap:14px;min-width:0}
.page-hero .spec-row{padding-block:11px}
.page-hero .spec dd b{font-family:var(--f-body);font-weight:600;letter-spacing:-.01em}
.page-hero--art .hero-art{grid-row:1}
.page-hero--art .hero-art svg{width:auto;max-width:100%;margin-inline:auto}

/* page transition: header and the dark hero stay in place between pages; only the hero text and visual change.
   Cross-document View Transitions (Chrome/Edge 126+, Safari 18.2+); others get a short hero entrance instead. */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
.page-hero,.hero{view-transition-name:page-hero}
.page-hero .hero-main,.hero > .wrap > div:first-child{view-transition-name:hero-text}
.vt-off-hero .page-hero,.vt-off-hero .hero,.vt-off-hero .page-hero .hero-main,.vt-off-hero .hero > .wrap > div:first-child{view-transition-name:none}
::view-transition-group(*){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(root){animation:.22s ease-out both ht-vt-out}
::view-transition-new(root){animation:.36s .08s cubic-bezier(.2,.7,.2,1) both ht-vt-in}
::view-transition-old(hero-text){animation:.2s ease-out both ht-vt-text-out}
::view-transition-new(hero-text){animation:.42s .12s cubic-bezier(.2,.7,.2,1) both ht-vt-text-in}
::view-transition-image-pair(hero-text){isolation:auto}
::view-transition-old(hero-text),::view-transition-new(hero-text){width:auto;height:auto;object-fit:none;object-position:left top}
::view-transition-old(site-header),::view-transition-new(site-header){animation:none}
@keyframes ht-vt-out{to{opacity:0}}
@keyframes ht-vt-in{from{opacity:0;transform:translateY(10px)}}
@keyframes ht-vt-text-out{to{opacity:0;transform:translateX(-12px)}}
@keyframes ht-vt-text-in{from{opacity:0;transform:translateY(14px)}}
@supports not (view-transition-name:a){
  .page-hero .hero-main > *,.page-hero--art .hero-art,.page-hero .hero-side{animation:ht-hero-in .5s cubic-bezier(.2,.7,.2,1) both}
  .page-hero .hero-main > :nth-child(2){animation-delay:.04s}
  .page-hero .hero-main > :nth-child(3){animation-delay:.08s}
  .page-hero .hero-main > :nth-child(n+4){animation-delay:.12s}
  .page-hero .hero-side,.page-hero--art .hero-art{animation-name:ht-fade-in;animation-duration:.7s}
}
@keyframes ht-hero-in{from{opacity:0;transform:translateY(12px)}}
@keyframes ht-fade-in{from{opacity:0}}
@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none}
  .page-hero *{animation:none!important}
}
.page-hero h1 em{white-space:nowrap}