/* ==========================================================================
   The three-layer model and the end result, buildouts (Alex, 2026-11-10).

   Sources: run 2's exploded layer drawing (.iso-*, website-2/polaris.html);
   run 1's pinned layer stack (.p-stack, website/polaris.html); run 2's
   before and after cards (.pl-cmp) and interface (.pl-ui, .pl-out); the board's
   exploded diagrams (b35, b38) and Terrava b04's use-case switcher.
   Everything is hard-edged and black and white, to sit with the hero.
   ========================================================================== */

.mdl { --mdl-g3: #86867F; --mdl-g4: #61635C; background: var(--bg); color: var(--ink); padding: 0 0 clamp(88px, 10vw, 156px); }
.mdl-wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* ---------- the isometric plates ---------- */
.mdl-svg { display: block; width: 100%; height: auto; overflow: visible; --s: 1; }
.mdl-pl { transform: translateY(calc((1 - var(--s)) * var(--d, 0) * 1px)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.p-face { fill: rgba(255, 255, 255, .94); stroke: var(--ink); stroke-width: 1; transition: fill .4s; }
.p-tile { fill: #fff; stroke: var(--ink); stroke-width: 1; transition: fill .4s, stroke .4s; }
.p-bar { fill: var(--ink); transition: fill .4s; }
.p-line { stroke: var(--ink); stroke-width: 1; fill: none; transition: stroke .4s; }
.p-node { fill: var(--ink); transition: fill .4s; }
.p-t { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; fill: var(--ink); text-anchor: middle; transition: fill .4s; }
.p-lab { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .05em; fill: var(--ink); transition: fill .4s; }
.mdl-pl.on .p-face { fill: var(--ink); }
.mdl-pl.on .p-tile { fill: transparent; stroke: rgba(255, 255, 255, .7); }
.mdl-pl.on .p-bar, .mdl-pl.on .p-node { fill: #fff; }
.mdl-pl.on .p-line { stroke: rgba(255, 255, 255, .7); }
.mdl-pl.on .p-t, .mdl-pl.on .p-lab { fill: #fff; }
.mdl-post { stroke: rgba(17, 18, 18, .4); stroke-width: 1; stroke-dasharray: 2 4; }
.mdl-flow { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 9; animation: mdl-flow 1.1s linear infinite; }
@keyframes mdl-flow { to { stroke-dashoffset: 12; } }

/* the layer text */
.mdl-n { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--mdl-g4); }
.mdl-item h3 { margin: 8px 0 0; font-family: var(--logo); font-weight: 400; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.1; letter-spacing: -.028em; }
.mdl-item p { margin: 10px 0 0; max-width: 44ch; font-size: 16px; line-height: 1.5; text-wrap: pretty; }

/* ---------- buildout 1: the drawing with its text beside each layer ---------- */
.mdl-exp { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px clamp(32px, 5vw, 80px); align-items: stretch; }
.mdl-exp-list { display: flex; flex-direction: column; justify-content: space-around; margin: 0; padding: 0; list-style: none; }

/* the interface */
.mdl-ui { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; padding: clamp(12px, 1.4vw, 20px); background: #000; color: #fff; }
.mdl-p { padding: clamp(14px, 1.3vw, 20px); border: 1px solid rgba(255, 255, 255, .2); background: #0E0E0E; }
.mdl-p--3 { grid-column: span 3; }
.mdl-p--7 { grid-column: span 7; }
.mdl-p--5 { grid-column: span 5; }
.mdl-k { display: flex; justify-content: space-between; gap: 12px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; color: rgba(255, 255, 255, .68); }
.mdl-v { margin-top: 12px; font-family: var(--logo); font-weight: 300; font-size: clamp(30px, 3.1vw, 48px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mdl-d { margin-top: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .68); }
.mdl-feed { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.mdl-feed li { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; line-height: 1.4; }
.mdl-feed li:first-child { border-top: 0; }
.mdl-feed time { flex: none; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.mdl-illus { margin: 10px 0 0; text-align: right; font-size: 12px; color: var(--mdl-g3); }

/* six results */
.mdl-six { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 40px) clamp(20px, 2.6vw, 40px); margin: clamp(40px, 4.6vw, 72px) 0 0; padding: 0; list-style: none; }
.how-head + .mdl-six { margin-top: 0; }
.mdl-six li { padding-top: 16px; border-top: 1px solid var(--ink); }
.mdl-six h3 { margin: 0; font-family: var(--logo); font-weight: 400; font-size: clamp(21px, 1.8vw, 27px); line-height: 1.16; letter-spacing: -.02em; }
.mdl-six p { margin: 9px 0 0; max-width: 40ch; font-size: 15px; line-height: 1.5; color: var(--mdl-g4); text-wrap: pretty; }

/* ---------- buildout 2: pinned, one layer at a time ---------- */
.mdl-pin { height: 300vh; }
.mdl-pin-in { position: sticky; top: var(--nav-h); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; min-height: calc(100vh - var(--nav-h)); }
.mdl-pin-copy .how-h2 { margin-bottom: clamp(24px, 3vh, 40px); }
.mdl-pin-copy .kick { margin-bottom: 18px; }
.mdl-pin-list { margin: 0; padding: 0; list-style: none; }
.mdl-pin-list .mdl-item { padding: 16px 0; border-top: 1px solid var(--line); color: #B9B8B4; transition: color .35s; }
.mdl-pin-list .mdl-item .mdl-n { color: inherit; }
.mdl-pin-list .mdl-item p { display: grid; max-height: 0; margin: 0; overflow: hidden; opacity: 0; transition: max-height .5s cubic-bezier(.2, .7, .2, 1), margin .5s, opacity .3s; }
.mdl-pin-list .mdl-item.on { color: var(--ink); }
.mdl-pin-list .mdl-item.on p { max-height: 9em; margin-top: 10px; opacity: 1; }
.mdl-pin-vis { max-height: calc(100vh - var(--nav-h) - 32px); }
.mdl-pin-vis .mdl-svg { max-height: calc(100vh - var(--nav-h) - 32px); }

/* before and after */
.mdl-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--how-gap, 14px); --how-gap: clamp(12px, 1.3vw, 20px); }
.mdl-card { padding: clamp(20px, 2.2vw, 34px); border: 1px solid var(--ink); }
.mdl-card--on { background: #000; color: #fff; }
.mdl-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.mdl-card h3 { margin: 0; font-family: var(--logo); font-weight: 400; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.1; letter-spacing: -.026em; }
.mdl-card header span { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; }
.mdl-card svg { display: block; width: 100%; height: auto; margin: 22px 0 8px; }
.mdl-card dl { margin: 0; }
.mdl-card dl div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.mdl-card--on dl div { border-top-color: rgba(255, 255, 255, .22); }
.mdl-card dt { font-size: 14px; font-weight: 500; line-height: 1.4; }
.mdl-card dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--mdl-g4); }
.mdl-card--on dd { color: rgba(255, 255, 255, .78); }
.dw-box { fill: none; stroke: currentColor; }
.dw-t { font-family: "Geist Mono", ui-monospace, monospace; font-size: 9.5px; fill: currentColor; }
.dw-line { fill: none; stroke: currentColor; }
.dw-dot { fill: currentColor; }
.dw-dash { fill: none; stroke: currentColor; stroke-width: .7; stroke-dasharray: 3 4; opacity: .55; }
.dw-scatter { fill: #A9A8A4; }
.dw-faint { fill: none; stroke: rgba(255, 255, 255, .45); }
.dw-lime { fill: none; stroke: #fff; stroke-width: 1.2; }
.dw-lime-f { fill: #fff; }
.dw-flow { fill: none; stroke: #fff; stroke-dasharray: 3 4; animation: mdl-flow 1.1s linear infinite; }

/* ---------- buildout 3: one wide diagram, then a switcher ---------- */
.mdl-flat { overflow-x: auto; }
.mdl-flat svg { display: block; width: 100%; min-width: 860px; height: auto; }
.f-band { fill: #fff; stroke: var(--ink); stroke-width: 1; }
.f-band--on { fill: var(--ink); }
.f-tile { fill: #fff; stroke: var(--ink); stroke-width: 1; }
.f-t { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; fill: var(--ink); text-anchor: middle; }
.f-t--w { fill: #fff; }
.f-side { font-family: "Inter Tight", "Inter", sans-serif; font-size: 25px; letter-spacing: -.02em; fill: var(--ink); }
.f-num { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; fill: #61635C; }
.f-l { stroke: rgba(255, 255, 255, .72); stroke-width: 1; fill: none; }
.f-n { fill: #fff; }
.mdl-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; list-style: none; }
.mdl-cols .mdl-item { padding-top: 14px; border-top: 1px solid var(--ink); }

.mdl-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.mdl-tab { padding: 15px 4px 15px 0; border-top: 2px solid transparent; margin-top: -1px; text-align: left; font-size: 16px; color: #6C6C66; transition: color .25s, border-color .25s; }
.mdl-tab:hover { color: var(--ink); }
.mdl-tab[aria-selected="true"] { color: var(--ink); font-weight: 500; border-top-color: var(--ink); }
.mdl-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* the selected tab's line is one bar that slides between tabs (set by model.js; Alex, 2026-11-11) */
.mdl-tabs.has-bar { position: relative; }
.mdl-tabs.has-bar .mdl-tab[aria-selected="true"] { border-top-color: transparent; }
.mdl-bar { position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--ink); pointer-events: none; transition: transform .7s cubic-bezier(.45, 0, .15, 1), width .7s cubic-bezier(.45, 0, .15, 1); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .mdl-bar { transition: none; } }
.mdl-pane { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-top: 8px; }
.mdl-pane[hidden] { display: none; }
/* with the script running, the cards share one cell and cross-fade (Alex, 2026-11-11) */
.mdl-stack { display: grid; }
.mdl-stack > .mdl-pane { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.mdl-stack > .mdl-pane.is-on { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .mdl-stack > .mdl-pane, .mdl-stack > .mdl-pane.is-on { transition: none; } }
.mdl-pane-img { height: clamp(320px, 62vh, 620px); overflow: hidden; background: #111; }
.mdl-pane-img img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.mdl-pane h3 { margin: 0; font-family: var(--logo); font-weight: 400; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.06; letter-spacing: -.034em; text-wrap: balance; }
.mdl-pane p { margin: 16px 0 0; max-width: 44ch; font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }

@media (max-width: 900px) {
  .mdl-exp, .mdl-pin-in, .mdl-cmp, .mdl-pane { grid-template-columns: minmax(0, 1fr); }
  .mdl-exp-list { gap: 28px; }
  .mdl-pin { height: auto; }
  .mdl-pin-in { position: static; min-height: 0; }
  .mdl-pin-vis, .mdl-pin-vis .mdl-svg { max-height: none; }
  .mdl-pin-list .mdl-item { color: var(--ink); }
  .mdl-pin-list .mdl-item p { max-height: none; margin-top: 10px; opacity: 1; }
  .mdl-p--3 { grid-column: span 6; }
  .mdl-p--7, .mdl-p--5 { grid-column: span 12; }
  .mdl-six, .mdl-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .mdl-six, .mdl-cols { grid-template-columns: minmax(0, 1fr); }
  .mdl-tabs { grid-template-columns: repeat(5, max-content); gap: 18px; overflow-x: auto; }
  .mdl-tab { padding-right: 0; white-space: nowrap; }
  .mdl-card dl div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .mdl-pane-img { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .mdl-flow, .dw-flow { animation: none; }
  .mdl-pl { transition: none; }
}

/* ---------- On Home (Alex, 2026-11-10): the five-layer model ----------
   Run 2's exploded layer drawing (website-2/polaris.html, .pl-iso), with the
   lime plate in black. The text reads in order, 01 to 05, beside a pinned drawing. */
.mdl-5 { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.mdl-5-fig { position: sticky; top: calc(var(--nav-h) + 24px); }
.mdl-5-fig svg { display: block; width: 100%; height: auto; max-height: calc(100vh - var(--nav-h) - 48px); overflow: visible; }
.iso-plate { transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.iso-face { fill: rgba(246, 245, 242, .62); stroke: var(--ink); stroke-width: 1; }
.iso-face--on { fill: var(--ink); }
.iso-ln { stroke: var(--ink); stroke-width: .8; fill: none; }
.iso-faint { stroke: rgba(17, 18, 18, .35); stroke-width: .8; fill: none; }
.iso-post { stroke: rgba(17, 18, 18, .45); stroke-width: .8; stroke-dasharray: 2 3; }
.iso-lbl { font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; fill: var(--ink); }
.iso-num { font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; fill: #86867F; }
.iso-dot { fill: var(--ink); }
.iso-plate[data-i="2"] .iso-ln { stroke: #fff; }
.iso-plate[data-i="2"] .iso-faint { stroke: rgba(255, 255, 255, .4); }
.iso-plate[data-i="2"] .iso-dot { fill: #fff; }
.iso-plate.is-on .iso-face { stroke-width: 1.6; }
.mdl-5-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mdl-5-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: clamp(22px, 2.2vw, 32px) 0; border-bottom: 1px solid var(--line); }
.mdl-5-item .mdl-n { padding-top: 7px; transition: color .3s; }
.mdl-5-item.is-on .mdl-n { color: var(--ink); font-weight: 500; }
.mdl-5-item h3 { margin: 0; font-family: var(--logo); font-weight: 400; font-size: clamp(25px, 2.3vw, 34px); line-height: 1.12; letter-spacing: -.026em; }
.mdl-5-item p { margin: 9px 0 0; max-width: 50ch; font-size: 16px; line-height: 1.52; color: var(--mdl-g4); text-wrap: pretty; }
@media (max-width: 900px) {
  .mdl-5 { grid-template-columns: minmax(0, 1fr); }
  .mdl-5-fig { position: static; }
  .mdl-5-fig svg { max-height: none; }
}
@media (prefers-reduced-motion: reduce) { .iso-plate { transition: none; } }

/* ---------- On Home (Alex, 2026-11-10): We serve every industry ----------
   Eight industries in the switcher (after Terrava b04), a photo with its copy
   beside it, rotating every 4 seconds until one is picked. Photos are concept imagery, unlicensed. */
.mdl-tabs--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 12px; }
.mdl-tabs--8 .mdl-tab { font-size: 14.5px; line-height: 1.25; }
.mdl-pane .mdl-ex { margin-top: 14px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.5; color: var(--mdl-g4); }
@media (max-width: 1100px) {
  .mdl-tabs--8 { grid-template-columns: repeat(8, max-content); gap: 22px; overflow-x: auto; }
  .mdl-tabs--8 .mdl-tab { white-space: nowrap; padding-right: 0; }
  .mdl-tabs.has-bar .mdl-bar { top: 0; }   /* the tabs scroll sideways here, which would clip a line sitting above them */
}
/* on phones the photo sits above the copy, so hold the copy's height and the page does not jump as it rotates */
@media (max-width: 900px) {
  .mdl-rot .mdl-pane > div:last-child { min-height: 16em; }
}

/* on phones the labels inside the layer drawing are too small to read, so they are dropped and the drawing is centered;
   the numbered list right below it names each layer */
@media (max-width: 600px) {
  .iso-lbl, .iso-num, .iso-lead { display: none; }
  .mdl-5-fig svg, .uc-dia svg { transform: translateX(8.8%); }
  .mdl-5-fig, .uc-dia { overflow-x: clip; }   /* the shifted drawing must not widen the page */
}