/* Husfrema — site styles. Brand: green #04362B, sand #D0BCA0, Bellefair. */
:root {
  --green: #04362b;
  --green-2: #0a4536;
  --green-3: #175a47;
  --sand: #d0bca0;
  --sand-2: #e4d8c6;
  --sand-3: #f1ece3;
  --paper: #f7f5f0;
  --white: #fdfcf9;
  --ink: #0b1f19;
  --ink-2: #2c3c36;
  --muted: #4f5b55;   /* >= 4.5:1 on the translucent panels over the darkest forest pixels (was #65726c: 4.1:1) */
  --line: rgba(4, 54, 43, 0.13);
  --line-2: rgba(4, 54, 43, 0.22);
  --serif: "Bellefair", Georgia, serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --radius: 6px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 { font-weight: 400; }
h2 { font-family: var(--serif); font-size: clamp(28px, 2.4vw, 40px); line-height: 1.02; letter-spacing: -0.005em; color: var(--green); }
.label { display: flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--green-3); margin-bottom: 22px; }
.label::before { content: ""; flex: none; width: 48px; height: 1px; background: currentColor; opacity: 0.45; }
h2 em, h3 em { font-style: normal; color: var(--green-3); }
section { padding: clamp(72px, 8vw, 128px) 0; }
.sec-head { margin-bottom: clamp(44px, 5vw, 72px); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .3s, color .3s, border-color .3s; white-space: nowrap; }
.btn .arr { transition: transform .3s; }
.btn:hover .arr { transform: translateX(4px); }
.btn-green { background: var(--green); color: var(--sand-3); }
.btn-green:hover { background: var(--green-3); }
.btn-line { border-color: var(--line-2); color: var(--green); background: rgba(253, 252, 249, .5); }
.btn-line:hover { border-color: var(--green); }
.btn-sm { padding: 10px 18px; font-size: 14px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(247, 245, 240, 0.88); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--green); fill: currentColor; }
.brand-mark { width: 50px; height: 28px; }
.brand-word { width: 128px; height: 17px; }
.nav { display: flex; gap: 36px; }
.nav a { text-decoration: none; font-size: 15px; color: var(--ink-2); position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.menu-btn { display: none; width: 42px; height: 42px; border: 0; background: none; cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--green); transition: transform .3s, top .3s; }
.menu-btn span:first-child { top: 17px; }
.menu-btn span:last-child { top: 24px; }
.menu-btn[aria-expanded="true"] span:first-child { top: 20.5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { top: 20.5px; transform: rotate(-45deg); }
.mobile-nav { display: none; }

/* Hero: full-width 3D construction */
.hero {
  position: relative; padding: 0; overflow: hidden;
  height: max(680px, calc(100svh - 76px));
  background:
    radial-gradient(ellipse 62% 58% at 50% 60%, #fdfcf8 0%, rgba(253, 252, 248, 0) 72%),
    radial-gradient(ellipse 120% 90% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(4, 54, 43, 0.07) 100%),
    linear-gradient(180deg, #f2f0ea 0%, #e5e1d6 100%);
}
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity 1s; }
.hero.ready canvas { opacity: 1; }
.hero canvas:active { cursor: grabbing; }
.hero-fallback { display: none; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72%; object-fit: cover; object-position: 50% 70%; }
.hero.no-webgl .hero-fallback { display: block; }
@media (min-width: 901px) {
  /* poster while the model loads, cross-faded out when the first frame is ready */
  .hero-fallback { display: block; opacity: 0; pointer-events: none; transition: opacity .9s ease; }
  .hero:not(.ready) .hero-fallback, .hero.no-webgl .hero-fallback { opacity: 1; }
}
.hero.no-webgl .hero-bar, .hero.no-webgl .hero-sys { display: none; }
/* The model is the hero: a small title top-left, the system switch top-right, nothing over the building */
.hero-copy { position: absolute; top: 24px; left: 0; right: 0; z-index: 2; pointer-events: none; }
.hero-copy > * { pointer-events: auto; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--green-3); margin-bottom: 18px; }
.hero h1 { font-family: var(--serif); font-size: clamp(24px, 1.8vw, 34px); line-height: 44px; letter-spacing: 0; color: var(--green); }
.hero-sys { position: absolute; top: 24px; right: max(var(--gutter), calc((100% - 1400px) / 2 + var(--gutter))); z-index: 3; }

.seg { display: inline-flex; padding: 4px; background: rgba(253, 252, 249, .88); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(8px); }
.seg button { border: 0; background: none; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--muted); transition: background .25s, color .25s; }
.seg button[aria-pressed="true"] { background: var(--green); color: var(--sand-3); }

.hero-bar { position: absolute; left: 0; right: 0; bottom: clamp(16px, 3vh, 32px); z-index: 3; }
.hero-bar-inner { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 28px; align-items: end; }
.hb-caption { display: flex; gap: 16px; align-items: flex-start; background: rgba(253, 252, 249, .86); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; backdrop-filter: blur(10px); min-height: 92px; }
.hb-num { font-family: var(--serif); font-size: 46px; line-height: .9; color: var(--green); font-variant-numeric: tabular-nums; }
.hb-caption b { display: block; font-size: 16px; font-weight: 600; color: var(--green); }
.hb-caption span:not(.hb-num) { display: block; font-size: 14px; line-height: 1.45; color: var(--ink-2); margin-top: 2px; }
.hb-controls { display: flex; gap: 12px; align-items: center; background: rgba(253, 252, 249, .86); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 10px 10px 16px; backdrop-filter: blur(10px); }
.hb-steps { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; flex: 1; min-width: 0; }
.hb-step { position: relative; border: 0; background: none; cursor: pointer; text-align: left; padding: 12px 2px 4px; color: var(--muted); min-width: 0; }
.hb-step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.hb-step i { position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--green); }
.hb-step .n { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.hb-step .l { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-step.done { color: var(--ink-2); }
.hb-step.on { color: var(--green); }
.hb-step.on .l { font-weight: 600; }
.hb-step:hover { color: var(--green); }
.hb-play { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--green); color: var(--sand-3); display: grid; place-items: center; cursor: pointer; transition: background .25s; }
.hb-play:hover { background: var(--green-3); }
.hb-play svg { display: none; }
.hb-play[data-state="pause"] .i-pause, .hb-play[data-state="play"] .i-play, .hb-play[data-state="replay"] .i-replay { display: block; }

/* Approach */
.approach { background: var(--white); }
.statement { font-family: var(--serif); font-size: clamp(32px, 3.6vw, 56px); line-height: 1.12; color: var(--green); max-width: 1120px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(56px, 7vw, 96px); }
.pillar { border-top: 1px solid var(--line-2); padding-top: 24px; }
.pillar-n { font-family: var(--serif); font-size: 22px; color: var(--sand); }
.pillar h3 { font-size: 20px; font-weight: 600; color: var(--green); margin: 10px 0 10px; letter-spacing: -0.01em; }
.pillar p { color: var(--ink-2); font-size: 16px; max-width: 380px; }

/* Systems */
.systems { background: var(--paper); }
.sys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 36px); }
.sys { background: var(--white); border-radius: var(--radius); overflow: hidden; }
.sys-media { aspect-ratio: 16 / 10; overflow: hidden; }
.sys-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.sys:hover .sys-media.in img { transform: scale(1.03); }
.sys-body { padding: clamp(24px, 3vw, 40px); }
.sys h3 { font-family: var(--serif); font-size: clamp(30px, 2.6vw, 40px); line-height: 1.05; color: var(--green); margin-bottom: 12px; }
.sys p { color: var(--ink-2); max-width: 520px; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tags li { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--sand-3); color: var(--green); }

/* Wall build-up */
.wall { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(64px, 8vw, 112px); align-items: center; }
.wall-stage {
  position: relative; border-radius: var(--radius); overflow: hidden; height: clamp(540px, 48vw, 720px);
  background:
    radial-gradient(ellipse at 50% 55%, rgba(253, 252, 249, .95), rgba(253, 252, 249, 0) 70%),
    linear-gradient(rgba(4, 54, 43, .045) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(4, 54, 43, .045) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--sand-3);
}
.wall-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.wall-stage.no-webgl { display: none; }
.wall:has(.no-webgl) { grid-template-columns: 1fr; }
.stage-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.wall-pins { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.wall-pin { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -34px 0 0 -12px; border-radius: 50%; background: var(--green); color: var(--sand-3); font-size: 12px; font-weight: 600; display: grid; place-items: center; transition: background .2s, opacity .2s; }
.wall-pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 10px; background: inherit; }
.wall-pin.on { background: #b07a45; }
.pill-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: rgba(253, 252, 249, .92); font-size: 14px; font-weight: 500; color: var(--green); cursor: pointer; transition: background .2s, color .2s; }
.pill-btn:hover { background: var(--green); color: var(--sand-3); }
.wall-info h2, .wall-info h3 { font-family: var(--serif); font-size: clamp(26px, 2.2vw, 38px); line-height: 1; letter-spacing: normal; color: var(--green); }
.layers { list-style: none; margin-top: 26px; border-top: 1px solid var(--line); }
.layers button { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: center; padding: 10px 8px 10px 0; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; transition: background .2s, padding .25s; }
.layers .n { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--green); transition: background .2s, color .2s, border-color .2s; }
.layers .nm { font-size: 15.5px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.layers .nm small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.layers .mm { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.layers .mm::after { content: " mm"; }
.layers button:hover, .layers button.on { background: rgba(4, 54, 43, .05); padding-left: 8px; }
.layers button.on .n { background: var(--green); border-color: var(--green); color: var(--sand-3); }
.layers button:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* Experience band */
.experience { position: relative; overflow: hidden; color: var(--sand-3); background: var(--green); padding: clamp(110px, 14vw, 200px) 0; }
.exp-img { position: absolute; left: 0; right: 0; top: -12%; bottom: -12%; will-change: transform; }
.exp-img img { width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: grayscale(.35) contrast(1.05); }
.experience::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(4, 54, 43, .82) 0%, rgba(4, 54, 43, .62) 100%); }
.exp-inner { position: relative; z-index: 1; }
.experience .label { color: var(--sand); }
.experience h2 { color: var(--sand-3); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: clamp(48px, 6vw, 80px); max-width: 1100px; }
.stats > div { border-top: 1px solid rgba(208, 188, 160, .4); padding-top: 20px; }
.stats b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 3.6vw, 56px); line-height: 1.05; color: var(--sand); }
.stats span { font-size: 15px; color: rgba(241, 236, 227, .82); }

/* Services */
.services { background: var(--white); }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); }
.svc-media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); margin-bottom: 22px; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-n { font-family: var(--serif); font-size: 20px; color: var(--sand); }
.svc h3 { font-size: 21px; font-weight: 600; color: var(--green); margin: 6px 0 8px; letter-spacing: -0.01em; }
.svc p { color: var(--ink-2); font-size: 16px; max-width: 380px; }
.nl { margin-top: clamp(64px, 8vw, 104px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: 26px 32px; border-radius: var(--radius); background: var(--sand-3); }
.nl > p { font-family: var(--serif); font-size: 26px; color: var(--green); }
.nl ul { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 36px; }
.nl li b { display: block; font-size: 15px; font-weight: 600; color: var(--green); }
.nl li span { font-size: 13px; color: var(--muted); }
.nl sub { font-size: .75em; }

/* Process (timeline graphic) */
.process { background: var(--paper); }
.proc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.proc-legend { list-style: none; display: flex; gap: 22px; font-size: 14px; color: var(--ink-2); }
.proc-legend li { display: flex; align-items: center; gap: 8px; }
.proc-legend i { width: 22px; height: 8px; border-radius: 4px; }
.t-office { background: var(--green); }
.t-factory { background: var(--sand); }
.t-site { background: var(--green-3); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 6px, transparent 6px 12px); }
.gantt { position: relative; border-top: 1px solid var(--line-2); }
.gantt::before { content: ""; position: absolute; inset: 0 0 0 clamp(260px, 30%, 400px); pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 12)); opacity: .7; }
.g-phases, .g-row { display: grid; grid-template-columns: clamp(260px, 30%, 400px) repeat(12, 1fr); align-items: center; }
.g-phases { padding: 14px 0 10px; }
.g-phases span { grid-row: 1; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--green-3); border-left: 2px solid var(--sand); padding-left: 10px; }
.g-row { border-bottom: 1px solid var(--line); min-height: 76px; position: relative; }
.g-txt { display: flex; gap: 16px; align-items: flex-start; padding: 14px 24px 14px 0; grid-column: 1 / 2; }
.g-n { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--green-3); min-width: 32px; font-variant-numeric: tabular-nums; }
.g-txt b { display: block; font-size: 16px; font-weight: 600; color: var(--green); }
.g-txt small { display: block; font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 2px; }
.g-bar { grid-row: 1; height: 14px; border-radius: 7px; margin: 0 3px; transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); transition-delay: calc(var(--d) * 110ms + 200ms); }
.gantt.in .g-bar { transform: none; }
html:not(.js) .g-bar { transform: none; }
.gantt-note { margin-top: 18px; font-size: 13px; color: var(--muted); }
.g-row:hover { background: rgba(4, 54, 43, .025); }

/* Contact */
.contact { background: var(--paper); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 96px); }
.contact-copy > p:not(.label) { margin-top: 24px; color: var(--ink-2); max-width: 420px; }
.contact-list { margin-top: 40px; border-top: 1px solid var(--line); }
.contact-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-list dt { color: var(--muted); font-size: 15px; }
.contact-list dd { font-weight: 500; text-align: right; color: var(--green); }
.form { background: var(--white); padding: clamp(24px, 3.5vw, 44px); border-radius: var(--radius); display: grid; gap: 20px; border: 1px solid var(--line); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label > span, .form legend { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--ink-2); }
.form fieldset { border: 0; }
.form input:not([type="radio"]), .form textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); padding: 12px 0; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; border-radius: 0; transition: border-color .2s; }
.form input:focus, .form textarea:focus { outline: none; border-bottom-color: var(--green); }
.form textarea { resize: vertical; min-height: 96px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; margin: 0 !important; cursor: pointer; transition: all .2s; color: var(--ink) !important; font-weight: 400 !important; }
.chips input:checked + span { background: var(--green); color: var(--sand-3) !important; border-color: var(--green); }
.chips input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.form .btn { justify-self: start; margin-top: 4px; }
.form-note { font-size: 14px; color: var(--ink-2); }

/* Footer */
.footer { background: var(--green); color: var(--sand-3); padding: 72px 0 32px; }
.brand-light { color: var(--sand); }
.footer .brand-mark { width: 72px; height: 40px; }
.footer .brand-word { width: 170px; height: 22px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; padding-bottom: 56px; border-bottom: 1px solid rgba(208, 188, 160, .25); }
.footer-claim { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.15; text-align: right; color: var(--sand-3); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; font-size: 14px; color: rgba(241, 236, 227, .7); }
.footer-bottom nav { display: flex; gap: 24px; }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--sand); }

/* ---------- Editorial sections (TMJ-inspired) ---------- */
.sec-intro { margin-top: 22px; color: var(--ink-2); font-size: 17.5px; max-width: 560px; }
.sec-head.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 120px); align-items: end; max-width: none; }
.btn-outline { margin-top: 26px; border: 1px solid var(--green); color: var(--green); border-radius: 0; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; padding: 16px 26px; }
.btn-outline:hover { background: var(--green); color: var(--sand-3); }
.btn-outline-light { margin-top: 52px; border: 1px solid rgba(241, 236, 227, .7); color: var(--sand-3); border-radius: 0; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; padding: 16px 26px; }
.btn-outline-light:hover { background: var(--sand-3); color: var(--green); }

.intro { background: var(--sand-3); border-bottom: 1px solid var(--line); }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 120px); align-items: start; }
.intro h2 { font-size: clamp(28px, 2.4vw, 40px); }
.intro-text { padding-top: clamp(0px, 3.6vw, 52px); }
.intro-text p { font-size: 18px; color: var(--ink-2); max-width: 560px; }
.intro-text p + p { margin-top: 18px; }

.systems { background: var(--paper); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.tile { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; color: #fff; text-decoration: none; background: var(--green-2); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.tile::before, .tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.tile::before { background: rgba(3, 24, 19, .22); opacity: 0; transition: opacity .5s; }
.tile::after { background: linear-gradient(180deg, rgba(3, 24, 19, 0) 42%, rgba(3, 24, 19, .35) 68%, rgba(3, 24, 19, .82) 100%); }
.tile:hover img { transform: scale(1.04); }
.tile:hover::before { opacity: 1; }
.tile-txt { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; text-align: left; padding: clamp(24px, 3vw, 44px); text-shadow: 0 1px 18px rgba(0, 0, 0, .3); }
/* Selected work: editorial grid of the founder's projects */
.work { background: var(--paper); padding-top: 0; }
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.wk { position: relative; display: block; overflow: hidden; border-radius: 2px; background: var(--sand-2); color: #fff; text-decoration: none; }
.wk img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.wk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 24, 19, 0) 55%, rgba(3, 24, 19, .72) 100%); pointer-events: none; }
.wk:hover img { transform: scale(1.04); }
.wk-a { grid-column: span 8; aspect-ratio: 3 / 2; }
.wk-b { grid-column: span 4; }
.wk-c { grid-column: span 4; aspect-ratio: 4 / 3; }
.wk-txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 4px; padding: clamp(16px, 1.8vw, 26px); text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.wk-txt b { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.15; }
.wk-txt small { font-size: 13px; opacity: .9; }
/* Models on a white background: no dark gradient, green text */
.wk-light { background: #fff; color: var(--green); }
.wk-light::after { display: none; }
.wk-light img { object-fit: contain; padding: 4% 4% 14%; }
.wk-light .wk-txt { text-shadow: none; }
.wk-light .wk-txt small { color: var(--muted); opacity: 1; }
.tile-txt h3 { font-family: var(--serif); font-size: clamp(26px, 2.2vw, 38px); line-height: 1.05; }
.tile-txt p { margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }

.principles { background: var(--sand-3); text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quotes { display: grid; max-width: 1000px; margin: 0 auto; }
.quote { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease), transform .9s var(--ease); pointer-events: none; }
.quote.is-on { opacity: 1; transform: none; pointer-events: auto; }
.quote blockquote { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 56px); line-height: 1.16; color: var(--green); }
.quote figcaption { margin-top: 30px; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.dots { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
.dots { gap: 0; }
.dots button { position: relative; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--line-2); transition: background .3s, transform .3s; }
.dots button[aria-selected="true"]::before { background: var(--green); transform: scale(1.2); }

.layers-sec { background: var(--paper); }
.layers-sec .wall { margin-top: 0; }

.engineering { background: var(--white); }
.fem, .nodes-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.fem-stage, .nodes-stage { position: relative; border-radius: 2px; overflow: hidden; height: clamp(480px, 44vw, 680px); }
.fem-stage { background: radial-gradient(ellipse at 50% 40%, #eceef5 0%, #dde0eb 60%, #cfd3e0 100%); }
.fem-stage canvas, .nodes-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.fem-legend { position: absolute; right: 16px; top: 72px; z-index: 2; padding: 10px 12px; background: #fff; border: 1px solid rgba(17, 20, 24, .18); color: #1d2129; font-size: 11px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.fem-legend .lg-title { display: block; margin-bottom: 8px; font-weight: 700; }
.fem-legend .lg-body { display: flex; gap: 6px; height: 210px; }
.fem-legend .lg-bar { width: 14px; border: 1px solid #000; }
.fem-legend .lg-ticks { position: relative; width: 30px; }
.fem-legend .lg-ticks span { position: absolute; right: 0; transform: translateY(50%); white-space: nowrap; }
.fem-legend .lg-foot { display: block; margin-top: 8px; color: #5a606b; }
.fem-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.fem-bubble { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; display: grid; place-items: center; border: 1.5px solid #2d6cdf; border-radius: 50%; background: #fff; color: #2d6cdf; font-size: 12px; font-weight: 700; }
.fem-dim { position: absolute; left: 0; top: 0; transform-origin: 0 0; margin: -8px 0 0 -16px; color: #2d6cdf; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fem-scale { position: absolute; left: 16px; bottom: 16px; z-index: 2; padding: 5px 10px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(17, 20, 24, .15); font-size: 12px; color: #1d2129; font-variant-numeric: tabular-nums; }
.fem-stage.no-webgl { display: none; }
.fem-info h3, .nodes-head h3 { font-family: var(--serif); font-size: clamp(28px, 2.4vw, 40px); line-height: 1.02; color: var(--green); }
.fem-info > p:not(.label) { margin-top: 16px; color: var(--ink-2); max-width: 520px; }
.node-notes { list-style: none; margin-top: 26px; border-top: 1px solid var(--line); }
.node-notes li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.node-notes li b { color: var(--green); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.nodes { margin-top: clamp(80px, 10vw, 140px); }
.nodes-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; }
.nodes-nav { display: flex; gap: 10px; }
.nodes-nav .arrow { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--green); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.nodes-nav .arrow:hover { background: var(--green); color: var(--sand-3); border-color: var(--green); }
.nodes-stage {
  background:
    radial-gradient(ellipse at 50% 55%, rgba(253, 252, 249, .95), rgba(253, 252, 249, 0) 70%),
    linear-gradient(rgba(4, 54, 43, .045) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(4, 54, 43, .045) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--sand-3);
}
.node-pins { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.nodes-stage canvas, .node-pins { transition: opacity .38s ease; }
.nodes-stage.swap canvas, .nodes-stage.swap .node-pins { opacity: 0; }
.nodes-stage.no-webgl { display: none; }
.node-notes li span { display: flex; align-items: center; gap: 12px; }
.node-notes li i { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--sand-3); font-size: 11.5px; font-style: normal; font-weight: 600; }
.node-notes li.chk span { padding-left: 34px; color: var(--muted); }
.node-notes li:hover i { background: #b07a45; }
.nodes-note { margin-top: 18px; text-align: center; font-size: 13px; color: var(--muted); }
.fem-note { margin-top: 16px; font-size: 13px; color: var(--muted); }
.form-privacy { font-size: 13px; color: var(--muted); }
.form-privacy a { color: var(--green); }
.cap-media img[src*="cap-prefab"], .cap-media img[src*="cap-assembly"] { object-fit: contain; background: #fff; }
.node-num { font-family: var(--serif); font-size: 60px; line-height: 1; color: var(--sand); }
.nodes-info h4 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.4vw, 38px); line-height: 1.08; color: var(--green); margin-top: 10px; }
.nodes-info > p { margin-top: 14px; color: var(--ink-2); }
.nodes-info { transition: opacity .4s; }
.nodes-info.swap { opacity: 0; }

.capabilities { background: var(--paper); }
.caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.cap-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--sand-2); }
.cap-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.cap:hover .cap-media.in img { transform: scale(1.04); }
.cap h3 { font-family: var(--serif); font-size: clamp(24px, 1.9vw, 30px); line-height: 1.1; color: var(--green); margin: 22px 0 10px; }
.cap p { color: var(--muted); font-size: 15.5px; }

.experience { text-align: center; }
.exp-quote { font-family: var(--serif); font-size: clamp(30px, 3vw, 50px); line-height: 1.1; color: var(--sand-3); max-width: 1100px; margin: 0 auto; }
.exp-by { margin-top: 24px; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--sand); }
.experience .stats { margin: 60px auto 0; text-align: left; }

.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(208, 188, 160, .2); }
.footer-brand p { margin-top: 22px; max-width: 380px; color: rgba(241, 236, 227, .75); font-size: 15px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.footer-col a { color: var(--sand-3); text-decoration: none; }
.footer-col a:hover { color: var(--sand); }
.footer-col small { margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); }
.footer-col span { color: rgba(241, 236, 227, .85); }

@media (max-width: 900px) {
  .intro-grid, .sec-head.two-col, .fem, .nodes-body, .tiles { grid-template-columns: 1fr; }
  .wk-a, .wk-b, .wk-c { grid-column: span 12; aspect-ratio: 3 / 2; }
  .caps { grid-template-columns: 1fr 1fr; }
  .fem-stage, .nodes-stage { height: auto; aspect-ratio: 4 / 3; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .caps { grid-template-columns: 1fr; }
  .cap-media { aspect-ratio: 4 / 3; }
  .footer-grid { grid-template-columns: 1fr; }
  .nodes-head { flex-direction: column; align-items: flex-start; }
  .fem-stage, .nodes-stage { aspect-ratio: 1 / 1; }
  .fem-legend { top: 62px; right: 10px; padding: 6px 8px; font-size: 9.5px; }
  .fem-legend .lg-body { height: 110px; }
  .fem-legend .lg-bar { width: 10px; }
  .fem-legend .lg-ticks { width: 24px; }
  .fem-legend .lg-foot { display: none; }
  .fem-bubble { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 10px; }
  .fem-dim { display: none; }
  .fem-stage .seg button { padding: 7px 12px; font-size: 13px; }
}

/* Headline word rise */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .12em 0; margin: 0 -.06em -.12em 0; }
.w > span { display: inline-block; transform: translateY(110%); animation: rise 1.1s var(--ease) forwards; animation-delay: calc(var(--i) * 90ms + 150ms); }
@keyframes rise { to { transform: none; } }

/* Reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
/* the clip sits on the image, not on the observed box: a box clipped to zero height never reaches the observer threshold */
.js .mreveal img { clip-path: inset(0 0 100% 0); transform: scale(1.12); transition: clip-path 1.3s cubic-bezier(.7, 0, .2, 1), transform 1.8s var(--ease); }
.js .mreveal.in img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* Responsive */
@media (max-width: 1180px) {
  .hb-step .l { font-size: 11.5px; }
}
/* Up to 1365 px the step labels do not fit beside the caption (CLT has 13 steps): the caption sits above the steps */
@media (max-width: 1365px) {
  .hero-bar-inner { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hero-bar-inner > * { min-width: 0; }
  .hb-caption { min-height: 0; }
}
.hero[data-mode="clt"] .hb-steps { gap: 3px; }   /* CLT: 13 steps */
.hero[data-mode="clt"] .hb-step .l { font-size: 11px; letter-spacing: -.01em; }
/* CLT on desktop (13 equal columns): no side padding and a 2 px gap give every label >= 54 px, enough for the bold
   "Membrane". Phones keep their own step rules (the media query keeps this off the phone .hb-step.on padding). */
@media (min-width: 901px) {
  .hero[data-mode="clt"] .hb-steps { gap: 2px; }
  .hero[data-mode="clt"] .hb-step { padding-left: 0; padding-right: 0; }
  .hero[data-mode="clt"] .hb-step .l { letter-spacing: -.02em; }
}
@media (max-width: 1024px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .mobile-nav { display: grid; max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .4s ease, visibility 0s .4s; padding: 0 var(--gutter); }
  .mobile-nav.open { max-height: min(560px, calc(100svh - 76px)); overflow-y: auto; visibility: visible; transition: max-height .4s ease; border-top: 1px solid var(--line); }
  .mobile-nav a { padding: 14px 0; font-size: 22px; font-family: var(--serif); text-decoration: none; color: var(--green); border-bottom: 1px solid var(--line); }
  .mobile-nav a:last-child { border-bottom: 0; margin-bottom: 8px; }
}
@media (max-width: 900px) {
  .hero { height: auto; display: flex; flex-direction: column; padding-top: 36px; }
  .hero-copy { position: relative; top: 0; order: 1; width: 100%; }
  .hero-sys { position: relative; top: 0; right: auto; order: 2; align-self: flex-start; margin: 24px var(--gutter) 0; }
  .hero canvas { position: relative; order: 3; height: 54svh; min-height: 340px; }
  .hero-fallback { position: relative; order: 3; height: 56svh; }
  .hero-bar { position: relative; bottom: auto; order: 4; padding-bottom: 20px; }
  .hb-steps { display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; }
  .hb-steps::-webkit-scrollbar { display: none; }
  .hb-step { flex: none; width: 34px; }
  .hb-step .l { display: none; }
  .hb-step.on { width: auto; padding-right: 10px; }
  .hb-step.on .l { display: block; }
  .pillars, .sys-grid, .contact-grid, .wall, .svc-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 20px; }
  .wall-stage { height: auto; aspect-ratio: 4 / 3; }
  .svc-media { aspect-ratio: 4 / 3; }
  .gantt::before, .g-phases { display: none; }
  .g-row { grid-template-columns: 0 repeat(12, 1fr); padding: 14px 0; row-gap: 10px; }
  .g-txt { grid-column: 1 / -1; padding: 0; }
  .g-bar { grid-row: 2; height: 8px; }
  .footer-claim { text-align: left; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .header-actions .btn { display: none; }
  .brand-word { width: 104px; height: 14px; }
  .brand-mark { width: 42px; height: 24px; }
  .wall-stage { aspect-ratio: 1 / 1; }
  .wall-stage .pill-btn span { display: none; }
  .f-row { grid-template-columns: 1fr; }
  .nl { padding: 22px; }
  .footer-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .mreveal, .js .mreveal img { opacity: 1; transform: none; clip-path: none; transition: none; }
  .w > span { animation: none; transform: none; }
}

/* ===== Eco background: our own rendered Nordic forest behind the whole page ===== */
html { background: #1c2820; }
body { background: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #1c2820 url(../img/bg/forest-bg.jpg) center / cover no-repeat; }
@media (max-aspect-ratio: 3/4) { body::before { background-image: url(../img/bg/forest-bg-m.jpg); } }
/* content sections become light panels that let the forest show through softly */
.intro, .systems, .work, .layers-sec, .capabilities, .process, .contact { background: rgba(247, 245, 240, .94); }
.engineering { background: rgba(253, 252, 249, .92); }
.principles { background: rgba(241, 236, 227, .88); }
/* the green bands show the forest through a deep green veil */
.experience { background: rgba(4, 54, 43, .35); }
.experience .exp-img { display: none; }
.footer { background: rgba(4, 54, 43, .93); }
/* hero: the model stands in front of the forest */
.hero { background: linear-gradient(180deg, rgba(12, 22, 16, .18) 0%, rgba(12, 22, 16, .05) 45%, rgba(12, 22, 16, .35) 100%); }
.hero h1 { color: #f4efe6; text-shadow: 0 1px 16px rgba(0, 0, 0, .35); }
@media (min-width: 901px) { .hero:not(.ready) .hero-fallback { opacity: 0; } }
/* ...unless the model cannot start (no WebGL or a failed script: .no-webgl, set by construct3d.js or by main.js after 12 s):
   then the poster shows on every screen (scripts off entirely: the <noscript> style in index.html) */
.hero.no-webgl .hero-fallback { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%); mask-image: linear-gradient(180deg, transparent 0, #000 14%); }
@media (min-width: 901px) {
  .hero.no-webgl .hero-fallback { opacity: 1; height: 66%; object-position: 50% 35%; }
  /* the offer line and the calls to action stay with the poster (as with the model, below) */
  .hero.no-webgl .hero-sub { display: block; }
  .hero.no-webgl .hero-cta { display: flex; }
}
/* the empty canvas leaves the flow (phones) but keeps a size, so a model that starts late can still measure it */
.hero.no-webgl canvas { position: absolute; inset: 0; height: 100%; min-height: 0; visibility: hidden; }

/* ===== Trust & enquiry pass (2026-10-26) ===== */
/* Hero offer line: phones/tablets show the sentence only (the header pill leads to the form). Desktop shows it with the calls
   to action over the canvas, under the title: the camera framing keeps the model at rest clear of their box (construct3d.js
   textBox / fitView). They fade in after the title (opacity only: the framing measures their boxes). */
.hero-sub { margin-top: 10px; max-width: 430px; font-size: 15.5px; line-height: 1.5; color: #f4efe6; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.hero-cta { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
/* the row spans the content width: only its button and link take the pointer, the rest lets drag-to-rotate through to the model */
.hero-copy .hero-cta { pointer-events: none; }
.hero-cta > * { pointer-events: auto; }
.hero-cta .hero-link { color: #f4efe6; font-size: 15px; font-weight: 500; text-underline-offset: 4px; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.btn-sand { background: var(--sand); color: var(--green); }
.btn-sand:hover { background: var(--sand-2); }
@media (max-width: 900px) { .hero-cta { display: none; } }
@media (min-width: 901px) {
  .hero-sub { max-width: 370px; }   /* three lines (as at 430 px), but a narrower box: less shift and shrink of the model */
  /* the entrance fade runs once: not keyed to .js, which the 4 s watchdog in <head> removes and a late main.js adds back (that
     restarted it); keyboard focus inside the copy shows it at once (!important outranks the animation, which runs on unchanged) */
  .hero-sub, .hero-cta { animation: hero-in .9s var(--ease) .7s both; }
  .hero-copy:focus-within .hero-sub, .hero-copy:focus-within .hero-cta { opacity: 1 !important; }
  /* no framing keeps the model clear of the copy (construct3d.js fitView / setView): it steps aside, its layout kept */
  .hero.copy-off:not(.no-webgl) .hero-sub, .hero.copy-off:not(.no-webgl) .hero-cta { visibility: hidden; }
}
@keyframes hero-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-sub, .hero-cta { animation: none; } }

/* Header enquiry pill stays visible on phones, with a short label */
.hc-short { display: none; }
@media (max-width: 600px) {
  .header-actions .btn { display: inline-flex; padding: 8px 14px; font-size: 13px; }
  .hc-long { display: none; }
  .hc-short { display: inline; }
}
@media (max-width: 380px) {
  .header-inner { gap: 12px; }
  .header-actions { gap: 8px; }
  .brand { gap: 10px; }
  .brand-word { width: 88px; height: 12px; }
}

/* Calls to action in the intro and the work section */
.text-link { color: var(--green); font-size: 15px; font-weight: 500; text-underline-offset: 4px; }
.text-link:hover { color: var(--green-3); }
.intro-text .intro-cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.intro-cta .btn { white-space: normal; }
.cta-row { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.cta-row .btn-outline { margin-top: 0; max-width: 100%; white-space: normal; }

/* Principles: a static row of three statements instead of the carousel */
.principles .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); max-width: 1300px; }
.principles .quote { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; transition: none; justify-content: flex-start; }
.principles .quote blockquote { font-size: clamp(22px, 2vw, 32px); }
.principles .quote figcaption { margin-top: auto; padding-top: 18px; }   /* quotes top-aligned, captions on one line */
@media (max-width: 900px) { .principles .quotes { grid-template-columns: 1fr; gap: 44px; } }

/* Text for screen readers only (process track names) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* FAQ: native details/summary, no script */
.faq { background: rgba(247,245,240,.94); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.faq-list { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; display: block; list-style: none; cursor: pointer; padding: 22px 48px 22px 0; font-family: var(--serif); font-size: clamp(21px, 1.7vw, 26px); line-height: 1.2; color: var(--green); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 1.5px; margin-top: -1px; background: currentColor; transition: transform .3s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::before { transform: rotate(45deg); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq summary:hover { color: var(--green-3); }
.faq summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.faq details p { padding: 0 48px 24px 0; max-width: 680px; color: var(--ink-2); }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .faq details p { padding-right: 0; } }

/* Contact: what happens next, and a form that says what is optional */
.next { list-style: none; counter-reset: nx; margin-top: 28px; max-width: 440px; display: grid; gap: 14px; }
.next li { counter-increment: nx; position: relative; padding-left: 42px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.next li::before { content: counter(nx); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: var(--green); }
.next b { font-weight: 600; color: var(--green); }
.form-req { font-size: 13px; color: var(--muted); }
.form .btn { white-space: normal; text-align: left; }
.form-reassure { margin-top: -10px; font-size: 13px; color: var(--muted); }
.form-note:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* live region stays in the accessibility tree while empty, without taking a grid row */

/* Without main.js the menu cannot open: hide its button, the header pill leads to the contact form */
html:not(.js) .menu-btn { display: none; }

/* Accessibility: visible focus on inputs, skip link, connection-viewer dots */
.form input:not([type="radio"]):focus-visible, .form textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 18px; border-radius: 999px; background: var(--green); color: var(--sand-3); text-decoration: none; }
.skip:focus { top: 12px; }
main:focus { outline: none; }
.dots button[aria-current="true"]::before { background: var(--green); transform: scale(1.2); }
@media (prefers-reduced-motion: reduce) { .faq summary::before, .faq summary::after { transition: none; } }

/* ===== Review round 3 (2026-10-26) ===== */
/* Hero: the construction sequence is an illustration, like the other models on the page. The note is the last row of the
   bar, so its real height (wrapped or enlarged text included) is reserved: the caption/step boxes rise by it and the camera
   framing, which measures those boxes, follows. Desktop: the bar sits lower so the boxes move only a few px. */
.hero-note { margin-top: 6px; text-align: right; font-size: 11.5px; line-height: 15px; color: rgba(244, 239, 230, .92); text-shadow: 0 1px 8px rgba(0, 0, 0, .65); pointer-events: none; }
@media (min-width: 901px) { .hero-bar { bottom: clamp(6px, 1.4vh, 14px); } }
@media (max-width: 900px) { .hero-note { margin-top: 10px; text-align: left; font-size: 12.5px; line-height: 1.45; } }
/* Pause control of the auto-rotating viewers (structural analysis, connection details) */
.stage-btns { display: flex; gap: 8px; }
.pill-btn[hidden] { display: none; }
.pill-icon { width: 42px; height: 42px; padding: 0; justify-content: center; }
.pill-icon svg { display: none; }
.pill-icon[data-state="pause"] .i-pause, .pill-icon[data-state="play"] .i-play { display: block; }
.pill-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ===== Review round 4 (2026-10-26) ===== */
/* Analysis and connection viewers that cannot start (failed import or no WebGL): the stage is hidden (above), so the text
   takes the full width and the dead arrows / empty dot group go too. Scripts off entirely: the <noscript> style. */
.fem:has(.no-webgl), .nodes:has(.no-webgl) .nodes-body { grid-template-columns: 1fr; }
.nodes:has(.no-webgl) .nodes-nav, .nodes:has(.no-webgl) .dots { display: none; }
/* Wall layer list: disabled in the HTML until wall3d.js has started and attached its listeners */
.layers button:disabled { cursor: default; }
.layers button:disabled:hover { background: none; padding-left: 0; }

/* ===== Content plan final (2026-10-27) ===== */
/* "Who does what" inside the intro: label above the three pillars */
.who { margin-top: clamp(56px, 7vw, 96px); }
.who .pillars { margin-top: 0; }
/* Two FAQ groups in one section: "Before you start" and "Questions about timber homes" */
.faq-grid + .faq-grid { margin-top: clamp(64px, 8vw, 112px); }
/* A plain list inside an FAQ answer (budget checklist); the global reset removes list padding */
.faq details ul { margin: -8px 48px 24px 0; padding-left: 1.2em; max-width: 680px; color: var(--ink-2); }
.faq details li + li { margin-top: 4px; }
@media (max-width: 600px) { .faq details ul { margin-right: 0; } }
/* After the reorder the FAQ sits directly on the Contact section, with almost the same background */
.faq + .contact { border-top: 1px solid var(--line); }

/* ---- Review round 1 fixes (2026-10-27) ---- */
/* M1: the open mobile menu overlays the page instead of making the sticky header taller, so the smooth scroll of a
   tapped menu link is not thrown off when the menu collapses */
@media (max-width: 1024px) {
  .mobile-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); }
  .mobile-nav.open { box-shadow: 0 12px 24px rgba(0, 0, 0, .08); border-bottom: 1px solid var(--line); }
}
/* M2: the connection dots appear only once three.js has loaded; their row is reserved so jumps to targets further down
   are not shifted (node 01's parts list is written in index.html for the same reason; nodes3d.js replaces it) */
.dots:empty { min-height: 40px; }
/* L1: #who and #timber sit on wrappers without top padding: keep their label clear of the header line */
#who, #timber { scroll-margin-top: 28px; }
/* L2: compliance strip heading wraps on phones; keep the building parts of the Rc caption together */
.nobr { white-space: nowrap; }
.nl > p { line-height: 1.2; }
@media (max-width: 600px) { .nl ul { column-gap: 20px; } }
/* L3: the heading comes first in the HTML (phones read heading, model, drawing); on wide screens the model sits left */
@media not all and (max-width: 900px) { .wall-stage { order: -1; } }   /* also between 900 and 901 px (zoom) */
/* L4: "Who does what" in three columns on wide tablets; below 801 px one column with a wider text measure */
@media (min-width: 801px) and (max-width: 900px) { .who .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 601px) and (max-width: 800px) { .who .pillar p { max-width: 560px; } }
/* L5: white work cards on phones: the caption needs more room below the model */
@media (max-width: 600px) { .wk-light img { padding-bottom: 104px; } }
/* L6: Systems, Work, Capabilities and Process share one background: a hairline between the last three */
.work + .capabilities, .capabilities + .process { border-top: 1px solid var(--line); }
/* L7: no one-word last lines in the Principles band */
.quote blockquote { text-wrap: balance; }
/* L8: connection values stay on one line; form inputs of a row line up; the submit button on one line at 360 px and below */
.node-notes li:not(.chk) b { white-space: nowrap; }
.f-row { align-items: end; }
@media (max-width: 360px) {
  .form { padding-left: 16px; padding-right: 16px; }
  .form .btn { white-space: nowrap; padding-left: 16px; padding-right: 16px; font-size: 14px; gap: 8px; }
}
/* C5: the system tile captions are sentences now: sentence case reads more easily than letter-spaced capitals */
.tile-txt p { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; line-height: 1.4; }

/* ---- Review round 2 fixes (2026-10-27) ---- */
/* Links from "Who does what" straight to the decision answers in the FAQ */
.who-links { margin-top: clamp(32px, 4vw, 48px); font-size: 15px; color: var(--ink-2); max-width: 900px; }
.who-links a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.who-links a:hover { text-decoration-thickness: 2px; }
#budget, #how-long, #who-checks { scroll-margin-top: 28px; }
/* Tile captions take two lines on phones: a darker gradient keeps the white title readable over the render */
@media (max-width: 600px) {
  .tile::after { background: linear-gradient(180deg, rgba(3, 24, 19, 0) 30%, rgba(3, 24, 19, .5) 56%, rgba(3, 24, 19, .86) 100%); }
}
.tile-txt p, .intro h2 { text-wrap: balance; }
/* Capabilities cards: more space between cards than between an image and its own text */
@media (max-width: 900px) { .caps { row-gap: 48px; } }
/* FAQ on desktop: the group heading stays in view beside long answers */
@media (min-width: 901px) { .faq-grid > div:first-child { position: sticky; top: 110px; align-self: start; } }
/* ===== end content plan ===== */

/* ===== Wall: thermal results and heat view (2026-10-28) ===== */
/* Stage controls: Heat + Assemble on the right; on a narrow stage both become 42 px icon pills (like .pill-icon) */
.wall-stage { container-type: inline-size; }
.pill-btn[aria-pressed="true"] { background: var(--green); color: var(--sand-3); }
.pill-btn:disabled { opacity: .5; cursor: default; }
.pill-btn:disabled:hover { background: rgba(253, 252, 249, .92); color: var(--green); }
@container (max-width: 440px) {
  .wall-stage .pill-btn { width: 42px; height: 42px; padding: 0; justify-content: center; }
  .wall-stage .pill-btn span { display: none; }
}
@container (max-width: 340px) {
  .wall-stage .stage-top { top: 10px; left: 10px; right: 10px; }
  .wall-stage .seg button { padding: 8px 10px; font-size: 13px; }
}
@media (max-width: 600px) { .wall-stage .pill-btn { width: 42px; height: 42px; padding: 0; justify-content: center; } }

/* Temperature pins: the .wall-pin look, sized to their text (wall3d.js adds translateX(-50%)) */
.wall-pin.wall-tpin { width: auto; min-width: 30px; padding: 0 7px; margin-left: 0; border-radius: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wall-pin.wall-tpin::after { height: var(--lead, 10px); }   /* a pin lifted clear of its neighbour keeps its leader to the layer edge */

/* Legend (heat view only) */
.wall-legend { position: absolute; left: 16px; bottom: 16px; z-index: 2; width: 184px; padding: 8px 10px; border-radius: var(--radius); background: rgba(253, 252, 249, .92); border: 1px solid var(--line); font-size: 11px; line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wall-legend[hidden] { display: none; }
.wall-legend .wl-bar { display: block; height: 8px; border-radius: 2px; forced-color-adjust: none;
  background: linear-gradient(90deg, #1c5cab 0%, #5598e7 16.667%, #9ec5f4 33.333%, #ebe7df 50%, #f3c09c 66.667%, #e5814f 83.333%, #b5402a 100%); }
.wall-legend .wl-ticks { display: flex; justify-content: space-between; margin-top: 3px; }
.wall-legend .wl-cap { display: block; margin-top: 3px; color: var(--muted); }
.wall-legend .wl-vz { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--muted); }
.wall-legend .wl-vz i { flex: none; width: 12px; height: 8px; border-radius: 2px; background: #1c5cab; opacity: .55; }
/* Phones: a shorter legend keeps clear of the wall's lowest edge (the drawing below hatches the ventilated zone "not counted" in its Temperature and Moisture views) */
@media (max-width: 600px) { .wall-legend { left: 10px; bottom: 10px; width: 176px; padding: 6px 8px; font-size: 10.5px; } .wall-legend .wl-vz { display: none; } }
@media (max-width: 360px) { .wall-legend { width: 150px; } .wall-legend .wl-cap { display: none; } }

/* Layer list: the drawing below names the layers, so once it is ready this list is only for screen readers and appears
   while a keyboard user is in it (it also drives the pins and the caption). Without scripts or :has() it stays visible. */
.layers li.vz .n { border-style: dashed; }
.layers-sec:has(.sect.is-ready) .wall-info .layers:not(:focus-within) { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* wide screens: the focused list opens as a panel under the intro, so the centred heading and the model do not move */
.layers-sec:has(.sect.is-ready) .wall-info { position: relative; }
@media not all and (max-width: 900px) { .layers-sec:has(.sect.is-ready) .wall-info .layers:focus-within { position: absolute; left: 0; right: 0; top: 100%; margin-top: 16px; z-index: 3; background: var(--paper); box-shadow: 0 0 0 12px var(--paper); } }
/* no 3D: its list rows can never be used; once the drawing names the layers, drop them (without the drawing they stay) */
.layers-sec:has(.sect.is-ready) .wall:has(.no-webgl) .layers { display: none; }
html:not(.js) .heat-hint, .wall:has(.no-webgl) .heat-hint { display: none; }
/* Caption on the stage: names the layer under the pointer, the tapped layer or the focused list row (hidden in heat view) */
.wall-cap { position: absolute; right: 16px; bottom: 16px; z-index: 2; max-width: calc(100% - 32px); margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(253, 252, 249, .94); border: 1px solid var(--line); font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--green); font-variant-numeric: tabular-nums; pointer-events: none; }
.wall-cap[hidden], .wall[data-heat="on"] .wall-cap { display: none; }
@media (max-width: 600px) { .wall-cap { right: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 6px 12px; border-radius: 8px; font-size: 13px; } }

/* Disclosure (also used by the section drawings) */
.wr-how { margin-top: 14px; border-top: 1px solid var(--line); }
.wr-how summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 10px 0; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--green); }
.wr-how summary::-webkit-details-marker { display: none; }
.wr-how summary::after { content: "+"; content: "+" / ""; font-size: 18px; font-weight: 400; }   /* empty alt text: the sign is not read */
.wr-how[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.wr-how summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.wr-how ul { padding-left: 1.1em; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.wr-how li + li { margin-top: 4px; }
.wr-how p { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

/* ===== Review fixes (2026-10-28) ===== */
/* Keyboard focus never lands on content that has not faded in yet: a .reveal block shows at once while it holds focus */
.js .reveal:focus-within { opacity: 1; transform: none; transition: none; }
/* Tabbing into the form: the field's label stays clear of the sticky header */
.form input, .form textarea, .form select { scroll-margin-top: 40px; }
/* Without 3D (no WebGL, scripts off: the <noscript> style), the wall text keeps a readable line length */
.wall:has(.no-webgl) .wall-info { max-width: 760px; }
/* Touch screens: a tapped Heat pill must not keep the hover green after it is switched off */
@media (hover: none) { .pill-btn[aria-pressed="false"]:hover { background: rgba(253, 252, 249, .92); color: var(--green); } }
/* Narrow wall stage: smaller number pins, so neighbouring pins no longer overlap (temperature pins keep their size) */
@container (max-width: 440px) { .wall-pin:not(.wall-tpin) { width: 20px; height: 20px; margin: -30px 0 0 -10px; font-size: 11px; } }
@container (max-width: 340px) { .wall-pin:not(.wall-tpin) { width: 18px; height: 18px; margin: -28px 0 0 -9px; font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .wall-pin { transition: none; } }

/* ===== Section drawings (assets/js/section2d.js): to-scale 2D sections of the example build-ups, with temperature and
   moisture views, results cards and "How we calculated this". Class prefix .sect-. Data: assets/js/section-data.js ===== */
.sect { margin-top: clamp(40px, 5vw, 72px); }
/* not ready (no script, or no valid data): only the static summary, which carries the signed-off figures; an unfilled
   summary ([hidden]) hides the block */
.sect:not(.is-ready):has(.sect-static[hidden]) { display: none; }
.sect:not(.is-ready) .sect-ui, .sect.is-ready .sect-static { display: none; }
.sect-static { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin-top: 18px; }
.sect-static ul { margin: 8px 0; padding-left: 1.1em; }
.sect-h { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.8vw, 30px); line-height: 1.2; color: var(--green); }
.sect-note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.sect-note a, .sect-static a { color: var(--ink-2); text-underline-offset: 3px; }
.sect-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px; margin: 18px 0 14px; }
.sect-tabs button[aria-selected="true"] { background: var(--green); color: var(--sand-3); }
.sect-tabs button:focus-visible, .sect-views .pill-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.sect-views { display: flex; flex-wrap: wrap; gap: 8px; }
.sect-views .pill-btn { padding: 8px 16px; }

/* the drawing sheet */
.sect-stage { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); touch-action: manipulation;
  background: linear-gradient(rgba(4, 54, 43, .032) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(4, 54, 43, .032) 1px, transparent 1px) 0 0 / 24px 24px, var(--white); }
.sect-stage::before { content: ""; display: block; padding-top: var(--ratio, 45%); transition: padding-top .45s var(--ease); }
.sect-svg { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; overflow: visible; transition: opacity .38s var(--ease); -webkit-user-select: none; user-select: none; }
.sect-svg.entering, .sect-svg.leaving { opacity: 0; }
.sect-svg.leaving { pointer-events: none; }
.sect-svg text { font-family: var(--sans); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.sect-svg .dm { font-size: 12px; fill: #26352f; }
.sect-svg .dm-t { font-weight: 600; }
.sect-svg .dm-n { font-size: 11.5px; fill: var(--muted); }
.sect-svg .cap { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; fill: var(--muted); paint-order: stroke; stroke: var(--white); stroke-width: 5px; stroke-linejoin: round; }
.sect-svg .ax { font-size: 11.5px; fill: var(--muted); }
.sect-svg .tag { font-size: 12px; font-weight: 600; fill: var(--ink); }
.sect-svg .gl { font-size: 12px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: #fdfcf9; stroke-width: 3px; stroke-linejoin: round; }
.sect-svg .ln { font-size: 13.5px; font-weight: 600; fill: var(--ink); }
.sect-svg .lz { font-weight: 400; fill: var(--muted); }
.sect-svg .ls { font-size: 12px; fill: var(--muted); }
.sect-svg .nb { fill: var(--green); transition: fill .2s; }
.sect-svg .nt { font-size: 11px; font-weight: 600; fill: var(--sand-3); }
.sect-svg .ld { stroke: #56635c; stroke-width: .75; transition: stroke .2s; }
.sect-svg .dot { fill: #26352f; }
.sect-svg.is-n .dm, .sect-svg.is-n .dm-n, .sect-svg.is-n .ax, .sect-svg.is-n .cap, .sect-svg.is-n .tag { font-size: 11.5px; }
.sect-svg.is-n .cap { letter-spacing: .1em; }
/* views: build-up, temperature, moisture */
.sect-svg .ov { opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.sect-svg.v-temp .ov-t, .sect-svg.v-moist .ov-m { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.sect-svg .tints { mix-blend-mode: multiply; }
.sect-svg .mat { transition: opacity .35s var(--ease); }
.sect-svg.v-temp .mat { opacity: .4; }
.sect-svg.v-moist .mat { opacity: .3; }
.sect-svg .cap.vt, .sect-svg .cap.vm, .sect-svg.v-temp .cap.vb, .sect-svg.v-moist .cap.vb { display: none; }
.sect-svg.v-temp .cap.vt, .sect-svg.v-moist .cap.vm { display: inline; }
/* hover / focus highlight */
.sect-svg .hl { fill: rgba(176, 122, 69, .1); stroke: #b07a45; stroke-width: 2; pointer-events: none; }
.sect-svg .lb { transition: opacity .2s; cursor: pointer; }
.sect-svg.has-hi .lb:not(.on) { opacity: .4; }
.sect-svg .lb.on .nb { fill: #8a5a2b; }   /* 5.0:1 with the digit */
.sect-svg .lb.on .ln { fill: var(--green); }
.sect-svg .lb.on .ld { stroke: #b07a45; stroke-width: 1.3; }
/* first reveal: layers appear from outside to inside (each group carries its delay in --d) */
@keyframes sect-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sect-svg.pre .ly, .sect-svg.pre .lb, .sect-svg.pre .dims, .sect-svg.pre .edges, .sect-svg.pre .wash { opacity: 0; }
.sect-svg.pre.go .ly, .sect-svg.pre.go .lb { animation: sect-in .5s var(--ease) both; animation-delay: var(--d, 0ms); }
.sect-svg.pre.go .dims, .sect-svg.pre.go .edges, .sect-svg.pre.go .wash { animation: sect-in .6s var(--ease) .3s both; }

/* readout, legend, layer list */
.sect-readout { min-height: 24px; margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sect-readout b { font-weight: 600; color: var(--ink); }
.sect-readout .sep { color: var(--muted); }
.sect-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.sect-legend:empty { display: none; }
.sect-legend .lg-cap { color: var(--muted); }
.sect-legend i { display: inline-block; vertical-align: middle; margin-right: 8px; }
.lg-ramp { display: inline-grid; gap: 2px; width: 190px; }
.lg-ramp .bar { height: 8px; border-radius: 2px; forced-color-adjust: none; }
.lg-ramp .tk { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lg-line i { width: 24px; border-top: 2px solid #26352f; }
.lg-line.s i { border-top-color: #1c5cab; }
.lg-line.p i { border-top-style: dashed; }
.lg-gap i { width: 16px; height: 10px; border-radius: 2px; background: rgba(23, 90, 71, .2); }
.lg-nc i { width: 16px; height: 10px; border-radius: 2px; border: 1px solid var(--line-2); background: repeating-linear-gradient(45deg, rgba(11, 31, 25, .32) 0 1px, transparent 1px 5px); }
.sect-list { list-style: none; margin-top: 16px; border-top: 1px solid var(--line); }
/* wide: the drawing names the layers, so the list is only for screen readers and appears while a keyboard user is in it */
@media (min-width: 761px) {
  .sect-list:not(:focus-within) { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sect-list:focus-within { columns: 3 260px; column-gap: 28px; }
}
.sect-list li { break-inside: avoid; }
.sect-list button { width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 6px 8px 0; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; transition: background .2s, padding .25s; }
.sect-list .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--sand-3); font-size: 11.5px; font-weight: 600; transition: background .2s; }
.sect-list .nc .n { background: none; border: 1px dashed var(--line-2); color: var(--green); }
.sect-list .nm { font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.sect-list .nm small { display: none; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.sect-list .v { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sect-list button:hover, .sect-list button.on { background: rgba(4, 54, 43, .05); padding-left: 6px; }
.sect-list button.on .n { background: #8a5a2b; border-color: #8a5a2b; color: var(--white); }   /* 5.7:1 */
.sect-list button:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* results cards */
.sect-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.sect-card { padding: 18px 20px 20px; background: rgba(253, 252, 249, .92); border: 1px solid var(--line); border-radius: var(--radius); }
.sect-card.sc-u, .sect-card.sc-sum { grid-column: span 2; }
.sc-sum ul { margin-top: 12px; display: grid; gap: 12px; list-style: none; }
.sc-sum li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.sc-sum li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: #1c5cab; }
.sc-sum li.m::before { background: #2f8a6a; }
.sc-sum li.s::before { background: #d06a2c; }
.sc-sum li.acc::before { background: #b5402a; box-shadow: 0 0 0 3px rgba(181, 64, 42, .2); }
.sc-sum li.acc b { color: #9a3412; }
.sc-sum li b { font-weight: 600; color: var(--ink); }
.sect-card .sc-t { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--green-3); }
.sect-card .sc-v { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.sect-card .sc-v b { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3vw, 44px); line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }
.sect-card .sc-v span { font-size: 14px; color: var(--muted); }
.sect-card .sc-x { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.sect-card .sc-bars { margin-top: 14px; display: grid; gap: 6px; max-width: 520px; }
.sb-row { display: grid; grid-template-columns: 118px minmax(0, 1fr) 34px; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.sb-b { height: 10px; border-radius: 0 4px 4px 0; background: rgba(4, 54, 43, .06); }
.sb-b i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--green); }
.sb-row.min .sb-b i { background: repeating-linear-gradient(135deg, var(--sand) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--sand); }
.sb-v { font-weight: 600; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }

/* "How we calculated this" (uses the .wr-how disclosure) */
.sect-how { margin-top: 22px; }
.sect-how .h { margin-top: 14px; font-weight: 600; color: var(--ink); }
.sect-how .h:first-child { margin-top: 2px; }
.sect-how ul { margin-top: 4px; }
.sect-tbl { margin-top: 6px; overflow-x: auto; }
.sect-tbl table { min-width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sect-tbl th, .sect-tbl td { padding: 6px 14px 6px 0; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.sect-tbl thead th { font-weight: 600; color: var(--ink); }
.sect-tbl tbody th { font-weight: 500; color: var(--ink); white-space: normal; min-width: 150px; }
.sect-how .sect-fn { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.sect sub { font-size: max(11px, .85em); }   /* s_d, R_c, κ_1: never below 11 px */

@media (max-width: 1100px) { .sect-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .sect-bar { flex-direction: column; align-items: stretch; }
  .sect-tabs { display: flex; }
  .sect-tabs button { flex: 1 1 auto; padding: 8px 8px; font-size: 13.5px; }
  .sect-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sect-views .pill-btn { justify-content: center; padding: 8px 6px; font-size: 13.5px; }
  .sect-legend { gap: 6px 14px; font-size: 12.5px; }
  .sect-list .nm small { display: block; }
}
@media (max-width: 560px) { .sect-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; } .sect-card.sc-u, .sect-card.sc-sum { grid-column: auto; } .sect-card { padding: 16px 16px 18px; } }
@media (prefers-reduced-motion: reduce) {
  .sect-svg, .sect-stage::before, .sect-svg .ov, .sect-svg .mat, .sect-svg .lb, .sect-list button { transition: none; }
  .sect-svg.pre .ly, .sect-svg.pre .lb, .sect-svg.pre .dims, .sect-svg.pre .edges, .sect-svg.pre .wash { opacity: 1; animation: none; }
}