:root {
  --ground: #F3F5EF;
  --surface: #FFFFFF;
  --sunk: #E7EBE2;
  --ink: #13231B;
  --ink-2: #4B5B52;
  --line: #D2D9CE;
  --line-strong: #B5C0B2;
  --green: #0A8249;
  --green-hover: #086B3C;
  --green-tint: #DCEFE3;
  --on-green: #FFFFFF;
  --laterite: #A94B22;
  --band-bg: #10231A;
  --band-ink: #E8EFEA;
  --band-ink-2: #A5B8AC;
  --band-line: #2A4234;
  --band-accent: #4CCB8C;
  /* wood and photo overlays read the same in either theme */
  --veneer: #DDBB90;
  --veneer-2: #C9A172;
  --veneer-3: #EBD2AE;
  --glue: #7A5332;
  --stamp-ink: #1E1A16;
  --photo-ink: #F2F5F1;
  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --lao: "Noto Sans Lao", "Phetsarath OT", "Saysettha OT", sans-serif;
  --wrap: 1180px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0D1611; --surface: #142019; --sunk: #1A2921; --ink: #E5ECE6; --ink-2: #A2B1A7;
    --line: #2A3A31; --line-strong: #3D5146; --green: #3CC383; --green-hover: #5DD49A; --green-tint: #173A28;
    --on-green: #07120C; --laterite: #E2875C;
    --band-bg: #08110C; --band-ink: #E5ECE6; --band-ink-2: #9DB0A4; --band-line: #24382C; --band-accent: #4CCB8C;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0D1611; --surface: #142019; --sunk: #1A2921; --ink: #E5ECE6; --ink-2: #A2B1A7;
  --line: #2A3A31; --line-strong: #3D5146; --green: #3CC383; --green-hover: #5DD49A; --green-tint: #173A28;
  --on-green: #07120C; --laterite: #E2875C;
  --band-bg: #08110C; --band-ink: #E5ECE6; --band-ink-2: #9DB0A4; --band-line: #24382C; --band-accent: #4CCB8C;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 2px; }
[id] { scroll-margin-top: 96px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 0.95; letter-spacing: 0.005em; margin: 0; text-wrap: balance; text-transform: uppercase; }
h2 { font-size: clamp(2.4rem, 5vw, 3.9rem); }
h3 { font-size: 1.75rem; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.eyebrow { font: 500 0.78rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.lede { font-size: 1.12rem; color: var(--ink-2); max-width: 58ch; }
.prose { display: grid; gap: 1rem; max-width: 64ch; color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.section { padding: clamp(4rem, 9vw, 6.5rem) 0; }
.section.tight-top { padding-top: 0; }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); max-width: 760px; }
.table-scroll { overflow-x: auto; }

.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.25rem; border-radius: 3px; font: 600 0.95rem/1 var(--sans); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.btn-primary { background: var(--green); color: var(--on-green); }
.btn-primary:hover { background: var(--green-hover); }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--ground); }
.textlink { font-weight: 600; color: var(--green); text-decoration: none; font-size: 0.92rem; }
.textlink:hover { text-decoration: underline; }

.flag { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; margin-left: 0.3rem; border-radius: 99px; background: var(--laterite); color: #fff; font: 500 0.68rem/1 var(--mono); text-decoration: none; vertical-align: 0.2em; text-transform: none; letter-spacing: 0; }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 1.25rem; min-height: 72px; }
.logo img { height: 44px; width: auto; }
.nav { display: flex; gap: 1.35rem; margin-left: auto; }
.nav a { text-decoration: none; font-weight: 500; font-size: 0.93rem; color: var(--ink-2); white-space: nowrap; padding: 0.3rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--green); }
.lang { display: flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; font-size: 0.8rem; }
.lang span { padding: 0.35rem 0.6rem; }
.lang .on { background: var(--ink); color: var(--ground); font-family: var(--mono); }
.lang .lo { font-family: var(--lao); color: var(--ink-2); }
.site-header .btn { padding: 0.65rem 1rem; }
@media (max-width: 1060px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 0; }
  .lang { margin-left: auto; }
  .nav { order: 5; width: 100%; margin: 0; overflow-x: auto; padding: 0.1rem 0 0.6rem; }
}
@media (max-width: 480px) { .site-header .btn { display: none; } }

/* home hero */
.hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
.hero-top { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
.hero h1 { font-size: clamp(3.1rem, 8.4vw, 6.6rem); line-height: 0.88; margin-top: 1rem; }
.hero h1 em { font-style: normal; color: var(--green); }
.hero-side { display: grid; gap: 1.5rem; padding-bottom: 0.4rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 860px) { .hero-top { grid-template-columns: 1fr; } }
.hero-figure { position: relative; margin: clamp(2rem, 5vw, 3rem) 0 0; }
.hero-figure img { width: 100%; aspect-ratio: 1280 / 600; object-fit: cover; border-radius: 3px 3px 0 0; }
.hero-figure figcaption { position: absolute; top: 1rem; right: 1rem; background: rgba(16, 35, 26, 0.72); color: var(--photo-ink); font: 400 0.75rem/1.3 var(--mono); padding: 0.4rem 0.6rem; border-radius: 2px; }
@media (max-width: 640px) { .hero-figure img { aspect-ratio: 4 / 3; } }

/* the beam: an LVL edge carrying the product stamp */
.beam { position: relative; height: 64px; overflow: hidden; border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.10)), repeating-linear-gradient(180deg, var(--veneer) 0 5px, var(--veneer-3) 5px 6px, var(--veneer) 6px 9px, var(--glue) 9px 10px);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.beam::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 140px, rgba(122,83,50,.10) 140px 142px, transparent 142px 260px); pointer-events: none; }
.stamp-track { position: absolute; inset: 0; display: flex; align-items: center; width: max-content; animation: feed 60s linear infinite; }
.stamp { font: 500 1.05rem/1 var(--mono); letter-spacing: 0.14em; color: var(--stamp-ink); opacity: 0.82; white-space: nowrap; padding-right: 4rem; text-transform: uppercase; }
.stamp b { font-family: var(--display); font-weight: 800; font-size: 1.7rem; letter-spacing: 0.06em; margin-right: 0.9rem; vertical-align: -0.12em; }
.stamp .box { border: 1.5px solid var(--stamp-ink); padding: 0.05rem 0.3rem; margin: 0 0.2rem; }
@keyframes feed { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .stamp-track { animation: none; } }

/* fact strip */
.proof { border-bottom: 1px solid var(--line); }
.proof ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.proof li { padding: 1.4rem 1.25rem 1.5rem; border-left: 1px solid var(--line); display: grid; gap: 0.35rem; align-content: start; }
.proof li:first-child { border-left: 0; padding-left: 0; }
.proof strong { font: 800 1.45rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.proof span { font-size: 0.88rem; color: var(--ink-2); line-height: 1.4; }
@media (max-width: 980px) { .proof ul { grid-template-columns: repeat(2, 1fr); } .proof li, .proof li:first-child { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } .proof li:nth-child(-n+2) { border-top: 0; } }
@media (max-width: 520px) { .proof ul { grid-template-columns: 1fr; } .proof li:nth-child(2) { border-top: 1px solid var(--line); } }

/* products */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 960px) { .products { grid-template-columns: 1fr; max-width: 640px; } }
.product { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 1.5rem; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 1rem; }
.product .kicker { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.product p { color: var(--ink-2); font-size: 0.95rem; }
.xs { display: grid; gap: 0.45rem; margin: 0; }
.xs figcaption { font: 400 0.72rem/1.3 var(--mono); color: var(--ink-2); }
.layers { height: 92px; border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; gap: 1px; background: var(--glue); }
.layers i { flex: 1; display: block; }
.layers .L, .layers:not(.multi) i:not(.C) { background: repeating-linear-gradient(90deg, var(--veneer) 0 22px, var(--veneer-3) 22px 24px, var(--veneer) 24px 52px, var(--veneer-2) 52px 53px); }
.layers .C { background: repeating-linear-gradient(90deg, var(--veneer-2) 0 2px, #B88D5E 2px 3px, var(--veneer-2) 3px 6px); }
.layers.multi { gap: 3px; }
.layers.multi i { background: repeating-linear-gradient(180deg, var(--veneer) 0 4px, var(--glue) 4px 5px); }
.layers.treated { background: var(--green); gap: 2px; }
.specs { margin: 0; display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--line); font-size: 0.88rem; align-self: start; }
.specs dt, .specs dd { margin: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.specs dt { font: 400 0.75rem/1.9 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); padding-right: 1rem; }
.specs dd { font-variant-numeric: tabular-nums; }

/* applications */
.apps { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .apps { grid-template-columns: 1fr; } }
.photo { margin: 0; display: grid; gap: 0.6rem; }
.photo img { border-radius: 3px; width: 100%; object-fit: cover; }
.photo figcaption { font: 400 0.78rem/1.4 var(--mono); color: var(--ink-2); }
.apps .photo img { aspect-ratio: 4 / 3; }
.apps-copy { display: grid; gap: 1.5rem; }
.uses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); }
.uses li { padding: 0.75rem 0.5rem 0.75rem 0; border-bottom: 1px solid var(--line); font-weight: 500; display: flex; justify-content: space-between; gap: 0.5rem; }
.uses li small { font: 400 0.7rem/1.9 var(--mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 480px) { .uses { grid-template-columns: 1fr; } }

/* SCG partner */
.partner { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); padding: clamp(2rem, 5vw, 3rem) 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.partner .quote { font: 800 clamp(2.6rem, 6vw, 4.6rem)/0.9 var(--display); text-transform: uppercase; }
.partner .quote span { color: var(--green); display: block; }
.partner-copy { display: grid; gap: 1rem; }
.partner-copy h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.partner ul { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.partner li { border-top: 1px solid var(--line-strong); padding-top: 0.6rem; font-size: 0.9rem; color: var(--ink-2); }
.partner li strong { display: block; color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .partner { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .partner ul { grid-template-columns: 1fr; } }

/* dark band: quality */
.band { background: var(--band-bg); color: var(--band-ink); }
.band .eyebrow { color: var(--band-accent); }
.band .lede { color: var(--band-ink-2); }
.quality { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); }
@media (max-width: 900px) { .quality { grid-template-columns: 1fr; } }
.quality-copy { display: grid; gap: 1.5rem; align-content: start; }
.checks { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.checks li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.5rem; color: var(--band-ink-2); }
.checks li::before { content: ""; width: 0.9rem; height: 0.9rem; margin-top: 0.35rem; border: 2px solid var(--band-accent); border-radius: 1px; background: linear-gradient(135deg, transparent 45%, var(--band-accent) 45% 55%, transparent 55%); }
.checks strong { color: var(--band-ink); font-weight: 600; }
.values { display: grid; gap: 1.25rem; align-content: start; }
.band .table-scroll { border: 1px solid var(--band-line); border-radius: 3px; }
.band table { border-collapse: collapse; width: 100%; min-width: 440px; font-variant-numeric: tabular-nums; }
.band caption { text-align: left; padding: 1rem 1.1rem 0.25rem; font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--band-accent); }
.band th, .band td { padding: 0.7rem 1.1rem; text-align: left; border-bottom: 1px solid var(--band-line); }
.band thead th { font: 400 0.72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--band-ink-2); }
.band tbody th { font-weight: 500; }
.band tbody th small { display: block; font: 400 0.75rem/1.3 var(--mono); color: var(--band-ink-2); }
.band td { font-family: var(--mono); text-align: right; }
.band thead th:not(:first-child) { text-align: right; }
.band tbody tr:last-child > * { border-bottom: 0; }
.certs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--band-line); border: 1px solid var(--band-line); border-radius: 3px; overflow: hidden; }
.certs div { background: var(--band-bg); padding: 1rem 1.1rem; display: grid; gap: 0.2rem; }
.certs strong { font: 800 1.35rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.certs span { font-size: 0.85rem; color: var(--band-ink-2); }
@media (max-width: 520px) { .certs { grid-template-columns: 1fr; } }

/* certificate papers */
.certificate { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--band-line); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.certificate-copy { display: grid; gap: 1rem; }
.certificate-copy h3 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); }
.certificate-copy p { color: var(--band-ink-2); }
.certificate-copy code { font-family: var(--mono); font-size: 0.9em; color: var(--band-ink); }
.papers { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.paper { padding: 0; border: 0; background: #fff; cursor: zoom-in; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.35); transition: transform .2s; }
.paper:hover { transform: translateY(-3px); }
.paper img { width: 100%; height: auto; border-radius: 2px; }
.papers figcaption { grid-column: 1 / -1; font: 400 0.75rem/1.4 var(--mono); color: var(--band-ink-2); }
@media (max-width: 860px) { .certificate { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .paper { transition: none; } }
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 820px); max-height: 92vh; }
dialog.lightbox::backdrop { background: rgba(5, 10, 7, 0.82); }
dialog.lightbox img { max-height: 86vh; width: auto; margin: 0 auto; background: #fff; border-radius: 2px; }
dialog.lightbox button { display: block; margin: 0.75rem auto 0; }

/* lab statement */
.labline { background: var(--green-tint); border-radius: 4px; padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(1.25rem, 4vw, 3rem); align-items: center; }
.labline h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.labline h2 span { color: var(--green); }
.labline ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.5rem; }
.labline li { border-top: 1px solid var(--line-strong); padding-top: 0.6rem; font-size: 0.92rem; color: var(--ink-2); }
.labline li strong { display: block; color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .labline { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .labline ul { grid-template-columns: 1fr; } }

/* technical guide teasers */
.guides { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.guide-card { display: grid; grid-template-rows: auto 1fr; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; transition: border-color .15s; }
.guide-card:hover { border-color: var(--green); }
.guide-card img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.guide-card .pad { padding: 1.4rem 1.5rem 1.6rem; display: grid; gap: 0.6rem; align-content: start; }
.guide-card p { color: var(--ink-2); font-size: 0.95rem; }
.guide-card .go { font-weight: 600; color: var(--green); font-size: 0.92rem; }
.guide-visual { aspect-ratio: 16 / 7; display: grid; place-items: center; background: var(--sunk); padding: 1.5rem; }
.guide-visual .layers { width: 100%; height: 100%; }
@media (max-width: 760px) { .guides { grid-template-columns: 1fr; } }

/* sustainability */
.grow { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; align-items: end; }
.grow-head { grid-column: 1 / span 5; display: grid; gap: 1.25rem; align-self: center; }
.grow-head h2 { font-size: clamp(3.4rem, 8vw, 6rem); }
.grow-head h2 span { color: var(--green); }
.grow > .photo { grid-column: 6 / -1; }
.grow .photo img { aspect-ratio: 1376 / 574; }
.rotation { grid-column: 1 / -1; display: grid; gap: 0.6rem; margin-top: 1.5rem; }
.rot-row { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: center; font-size: 0.9rem; }
.rot-row .label { font: 500 0.78rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.rot-bar { height: 22px; background: var(--sunk); border-radius: 2px; position: relative; }
.rot-bar i { position: absolute; top: 0; bottom: 0; border-radius: 2px; display: flex; align-items: center; font: 500 0.72rem/1 var(--mono); font-style: normal; white-space: nowrap; }
.rot-bar .euc { left: 7%; width: 8%; background: var(--green); color: var(--on-green); padding-left: 0.4rem; }
.rot-bar .pine { left: 30%; width: 70%; background: var(--ink-2); color: var(--ground); justify-content: flex-end; padding-right: 0.5rem; }
.rot-scale { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; }
.rot-scale div { display: flex; justify-content: space-between; font: 400 0.7rem/1 var(--mono); color: var(--ink-2); }
@media (max-width: 860px) { .grow-head, .grow > .photo { grid-column: 1 / -1; } }
@media (max-width: 520px) { .rot-row, .rot-scale { grid-template-columns: 1fr; gap: 0.3rem; } .rot-scale > span { display: none; } }
.points { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; }
.points div { border-top: 2px solid var(--ink); padding-top: 1rem; display: grid; gap: 0.4rem; align-content: start; }
.points h3 { font-size: 1.4rem; }
.points p { color: var(--ink-2); font-size: 0.93rem; }
@media (max-width: 760px) { .points { grid-template-columns: 1fr; } }

/* story */
.story { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 5vw, 4.5rem); }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }
.story-copy { display: grid; gap: 1.5rem; align-content: start; }
.aside-box { background: var(--sunk); border-radius: 4px; padding: 1.4rem; display: grid; gap: 0.5rem; }
.aside-box h3 { font-size: 1.5rem; }
.aside-box p { color: var(--ink-2); font-size: 0.93rem; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 0 0 1.6rem 1.5rem; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 0.5rem; width: 12px; height: 12px; background: var(--ground); border: 2px solid var(--green); border-radius: 50%; }
.timeline li:last-child { padding-bottom: 0; }
.timeline time { font: 800 1.9rem/1 var(--display); color: var(--ink); }
.timeline p { color: var(--ink-2); }
.timeline strong { color: var(--ink); font-weight: 600; display: block; }

/* export */
.export { display: grid; grid-template-columns: 1.2fr 1fr; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.export img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
.export-copy { padding: clamp(1.5rem, 4vw, 3rem); display: grid; gap: 1.25rem; align-content: center; }
.route { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font: 500 0.8rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.route span { padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 2px; }
.route .origin { background: var(--green); color: var(--on-green); border-color: var(--green); }
.route i { font-style: normal; color: var(--ink-2); }
@media (max-width: 860px) { .export { grid-template-columns: 1fr; } }

/* contact */
.contact { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 5vw, 4.5rem); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
.contact-info { display: grid; gap: 1.75rem; align-content: start; }
.details { margin: 0; display: grid; gap: 1rem; }
.details div { display: grid; gap: 0.15rem; }
.details dt { font: 400 0.72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.details dd { margin: 0; font-weight: 500; }
.details a { text-decoration: none; border-bottom: 1px solid var(--line); }
form { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.25rem, 3vw, 2rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: 0.35rem; }
.field.full { grid-column: 1 / -1; }
label { font-size: 0.85rem; font-weight: 500; }
input, select, textarea { width: 100%; font: 400 0.95rem/1.4 var(--sans); color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 3px; padding: 0.65rem 0.75rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
textarea { min-height: 110px; resize: vertical; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-note { font-size: 0.85rem; color: var(--ink-2); }
@media (max-width: 560px) { form { grid-template-columns: 1fr; } }

/* ---------- technical guides ---------- */
.crumbs { font: 400 0.78rem/1.3 var(--mono); color: var(--ink-2); padding: 1.25rem 0 0; }
.crumbs a { color: var(--ink-2); }

.photo-hero { position: relative; color: var(--photo-ink); background: #0B130F center / cover no-repeat; }
.photo-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7,14,10,.92) 0%, rgba(7,14,10,.72) 45%, rgba(7,14,10,.25) 100%); }
.photo-hero .wrap { position: relative; padding-top: clamp(3.5rem, 9vw, 6.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); display: grid; gap: 1.4rem; }
.photo-hero .eyebrow { color: #7FE0AE; }
.photo-hero h1 { font-size: clamp(3rem, 8vw, 6.2rem); line-height: 0.88; max-width: 13ch; }
.photo-hero h1 em { font-style: normal; color: #7FE0AE; }
.photo-hero .lede { color: #D0DBD3; }
.photo-hero .credit { font: 400 0.72rem/1.3 var(--mono); color: #B7C5BC; }
.photo-hero .btn-ghost { border-color: var(--photo-ink); color: var(--photo-ink); }
.photo-hero .btn-ghost:hover { background: var(--photo-ink); color: #0B130F; }
.hero-termites { background-image: url("../img/site-roof-underside.jpg"); }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.facts div { padding: 1.4rem 1.25rem 1.5rem; border-left: 1px solid var(--line); display: grid; gap: 0.35rem; align-content: start; }
.facts div:first-child { border-left: 0; padding-left: 0; }
.facts strong { font: 800 1.45rem/1 var(--display); text-transform: uppercase; }
.facts span { font-size: 0.88rem; color: var(--ink-2); line-height: 1.4; }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr 1fr; } .facts div, .facts div:first-child { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } .facts div:nth-child(-n+2) { border-top: 0; } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } .facts div:nth-child(2) { border-top: 1px solid var(--line); } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.split.wide-right { grid-template-columns: 1fr 1.25fr; }
@media (max-width: 900px) { .split, .split.wide-right { grid-template-columns: 1fr; } }

.species { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 1.5rem; display: grid; gap: 1rem; }
.species .latin { font: italic 400 1.5rem/1.2 var(--sans); }
.species .common { font: 500 0.78rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--laterite); }
.species dl { margin: 0; display: grid; grid-template-columns: auto 1fr; font-size: 0.92rem; border-top: 1px solid var(--line); }
.species dt, .species dd { margin: 0; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.species dt { font: 400 0.74rem/1.9 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); padding-right: 1rem; }

/* latitude diagram */
.lat { margin-top: clamp(2.5rem, 6vw, 3.5rem); display: grid; gap: 0.75rem; }
.lat-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; align-items: baseline; }
.lat-title h3 { font-size: 1.6rem; }
.lat-title p { font-size: 0.9rem; color: var(--ink-2); max-width: 60ch; }
.lat-canvas { position: relative; min-width: 720px; height: 230px; margin: 0 0.5rem; }
.lat-zone { position: absolute; top: 84px; height: 62px; }
.lat-zone.north { left: 0; width: 52%; background: var(--green-tint); border-right: 2px dashed var(--green); }
.lat-zone.south { left: 52%; right: 0; background: var(--sunk); }
.lat-zone span { position: absolute; top: 50%; transform: translateY(-50%); font: 500 0.72rem/1.25 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0.8rem; width: 100%; }
.lat-zone.north span { color: var(--green); }
.lat-zone.south span { color: var(--ink-2); }
.lat-tropic { position: absolute; left: 52%; top: 62px; transform: translateX(-50%); font: 500 0.68rem/1.1 var(--mono); color: var(--green); white-space: nowrap; text-align: center; }
.pin { position: absolute; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; font: 500 0.74rem/1.1 var(--mono); white-space: nowrap; }
.pin b { font-weight: 600; font-family: var(--sans); font-size: 0.82rem; }
.pin small { color: var(--ink-2); font-size: 0.68rem; }
.pin::after { content: ""; width: 1px; background: var(--ink-2); }
.pin.up { top: 0; }
.pin.up::after { height: calc(84px - 38px); }
.pin.down { top: 146px; grid-auto-flow: row; }
.pin.down::after { order: -1; height: 22px; }
.pin.hl b { color: var(--laterite); }
.lat-axis { position: absolute; left: 0; right: 0; top: 146px; display: flex; justify-content: space-between; font: 400 0.66rem/1 var(--mono); color: var(--ink-2); padding-top: 4px; pointer-events: none; }
.lat-axis span { transform: translateX(-50%); }
.lat-axis span:first-child { transform: none; }
.lat-axis span:last-child { transform: translateX(-100%); }
.lat-legend { font: 400 0.75rem/1.4 var(--mono); color: var(--ink-2); }

/* climate tiles */
.climate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--band-line); border: 1px solid var(--band-line); border-radius: 4px; overflow: hidden; margin-top: 2rem; }
.climate div { background: var(--band-bg); padding: 1.25rem; display: grid; gap: 0.4rem; align-content: start; }
.climate strong { font: 800 2.2rem/0.95 var(--display); text-transform: uppercase; color: var(--band-ink); }
.climate span { font-size: 0.88rem; color: var(--band-ink-2); }
@media (max-width: 860px) { .climate { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .climate { grid-template-columns: 1fr; } }

/* process steps: a real sequence, so numbered */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.steps.five { grid-template-columns: repeat(5, 1fr); }
.steps li { counter-increment: s; border-top: 2px solid var(--ink); padding-top: 0.9rem; display: grid; gap: 0.4rem; align-content: start; }
.steps li::before { content: counter(s, decimal-leading-zero); font: 500 0.78rem/1 var(--mono); color: var(--green); letter-spacing: 0.08em; }
.steps h3 { font-size: 1.45rem; }
.steps p { color: var(--ink-2); font-size: 0.92rem; }
@media (max-width: 960px) { .steps, .steps.five { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps, .steps.five { grid-template-columns: 1fr; } }

/* data tables on light ground */
.data { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.92rem; }
.data caption { text-align: left; padding: 0 0 0.75rem; font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.data th, .data td { text-align: left; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.data thead th { font: 400 0.72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); border-bottom: 2px solid var(--ink); }
.data tbody th { font: 800 1.35rem/1 var(--display); white-space: nowrap; }
.data td { color: var(--ink-2); }
.data tr.ours { background: var(--green-tint); }
.data tr.ours th, .data tr.ours td { color: var(--ink); }
.data tr.no td:last-child { color: var(--laterite); }
.tag { display: inline-block; font: 500 0.68rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.25rem 0.4rem; border-radius: 2px; background: var(--green); color: var(--on-green); margin-left: 0.4rem; vertical-align: 0.15em; }

.callout { border-left: 4px solid var(--laterite); background: var(--surface); padding: 1.1rem 1.25rem; border-radius: 0 4px 4px 0; display: grid; gap: 0.35rem; }
.callout strong { font-weight: 600; }
.callout p { color: var(--ink-2); font-size: 0.93rem; }

.warranty { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.5rem, 4vw, 2.5rem); }
.seal { width: 170px; height: 170px; border-radius: 50%; border: 3px solid var(--green); display: grid; place-items: center; text-align: center; position: relative; }
.seal::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 1px dashed var(--green); }
.seal strong { display: block; font: 800 4rem/0.8 var(--display); color: var(--green); }
.seal span { font: 500 0.7rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); }
.warranty-copy { display: grid; gap: 0.8rem; }
@media (max-width: 640px) { .warranty { grid-template-columns: 1fr; justify-items: start; } .seal { width: 140px; height: 140px; } .seal strong { font-size: 3.2rem; } }

.gallery { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.25rem; }
.gallery .photo img { aspect-ratio: 16 / 10; height: 100%; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } }

/* glue page hero */
.glue-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem); border-bottom: 1px solid var(--line); }
.glue-hero .wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.glue-hero h1 { font-size: clamp(3rem, 7.6vw, 6rem); line-height: 0.88; margin: 1rem 0 1.4rem; }
.glue-hero h1 em { font-style: normal; color: var(--green); }
@media (max-width: 900px) { .glue-hero .wrap { grid-template-columns: 1fr; } }
.section-cut { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: stretch; }
.section-cut .layers { height: 270px; gap: 2px; }
.section-cut .layers.hl { background: var(--glue); }
.section-cut .layers i:nth-child(9) { box-shadow: 0 2px 0 0 var(--green); }
.cut-notes { display: grid; grid-template-rows: auto 1fr auto; font: 400 0.76rem/1.35 var(--mono); color: var(--ink-2); min-width: 9.5rem; }
.cut-notes b { display: block; font: 800 2.2rem/1 var(--display); color: var(--ink); }
.cut-notes .mid { align-self: center; border-left: 2px solid var(--green); padding-left: 0.6rem; }
.cut-notes .mid strong { color: var(--green); font-weight: 500; }
.section-cut figcaption { grid-column: 1 / -1; font: 400 0.74rem/1.4 var(--mono); color: var(--ink-2); }

.controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.controls div { background: var(--surface); padding: 1.2rem 1.25rem; display: grid; gap: 0.35rem; align-content: start; }
.controls .k { font: 400 0.72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.controls strong { font: 800 1.9rem/1 var(--display); font-variant-numeric: tabular-nums; }
.controls p { font-size: 0.88rem; color: var(--ink-2); }
@media (max-width: 860px) { .controls { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .controls { grid-template-columns: 1fr; } }

/* emission chart */
.emis { display: grid; gap: 0.7rem; }
.emis-row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: center; }
.emis-row .lbl { font: 500 0.8rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.emis-row .lbl small { display: block; text-transform: none; letter-spacing: 0; color: var(--ink-2); font-weight: 400; }
.emis-track { position: relative; height: 30px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 25%); border-left: 1px solid var(--ink-2); }
.emis-bar { position: absolute; left: 0; top: 4px; bottom: 4px; min-width: 3px; border-radius: 0 2px 2px 0; }
.emis-val { position: absolute; top: 50%; transform: translateY(-50%); font: 500 0.78rem/1 var(--mono); white-space: nowrap; padding-left: 0.5rem; }
.emis-row.limit .emis-bar { background: var(--line-strong); }
.emis-row.super .emis-bar { background: var(--ink-2); }
.emis-row.pml .emis-bar { background: var(--green); }
.emis-row.pml .lbl, .emis-row.pml .emis-val { color: var(--green); }
.emis-axis { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; }
.emis-axis div { display: flex; justify-content: space-between; font: 400 0.7rem/1 var(--mono); color: var(--ink-2); }
.emis-note { font: 400 0.74rem/1.4 var(--mono); color: var(--ink-2); margin-top: 0.5rem; }
@media (max-width: 520px) { .emis-row, .emis-axis { grid-template-columns: 1fr; gap: 0.3rem; } .emis-axis > span { display: none; } }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding: 2.5rem 0; }
.foot { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem 3rem; align-items: center; }
.site-footer img { height: 38px; width: auto; }
.site-footer p { font-size: 0.85rem; color: var(--ink-2); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.9rem; }
.site-footer nav a { text-decoration: none; color: var(--ink-2); }
.cred-strip { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cred-strip span { font: 500 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.45rem 0.6rem; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--ink); }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr; } }

/* project: Innovation Center */
.project { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(1.75rem, 5vw, 4rem); align-items: start; }
.project-copy { display: grid; gap: 1.25rem; }
.project-copy .specs { border-top: 2px solid var(--ink); }
.project-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin: 0; }
.project-photos .photo img { aspect-ratio: 3 / 5; }
.links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.project-copy .photo img { aspect-ratio: 537 / 369; height: auto; }
@media (max-width: 980px) { .project { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .project-photos { grid-template-columns: 1fr 1fr; } }

/* storage & handling */
.handling { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.handling > div { border-top: 2px solid var(--ink); padding-top: 1rem; display: grid; gap: 0.8rem; align-content: start; }
.handling h3 { font-size: 1.6rem; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ticks li { display: grid; grid-template-columns: 1.3rem 1fr; gap: 0.35rem; color: var(--ink-2); font-size: 0.94rem; }
.ticks li::before { content: "—"; color: var(--green); font-family: var(--mono); }
.ticks.warn li::before { content: "!"; color: var(--laterite); font: 600 0.95rem/1.6 var(--mono); }
@media (max-width: 860px) { .handling { grid-template-columns: 1fr; } }

/* downloads */
.docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.docs a { height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.6rem; padding: 1.4rem 1.5rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; text-decoration: none; transition: border-color .15s; }
.docs a:hover { border-color: var(--green); }
.doc-type { display: flex; align-items: center; gap: 0.5rem; font: 500 0.72rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.doc-type::before { content: ""; width: 14px; height: 18px; border: 1.5px solid var(--green); border-radius: 1px; background: linear-gradient(225deg, var(--green) 0 4px, transparent 4px); }
.docs strong { font: 800 1.5rem/1 var(--display); text-transform: uppercase; color: var(--ink); }
.docs .desc { color: var(--ink-2); font-size: 0.92rem; }
.docs .go { font-weight: 600; color: var(--green); font-size: 0.92rem; }
.doc-note { margin-top: 1.25rem; font-size: 0.88rem; color: var(--ink-2); max-width: 75ch; }
@media (max-width: 860px) { .docs { grid-template-columns: 1fr; } }

/* team: layout follows the SSC team page (dark page head, portrait cards) */
.page-head { background: var(--band-bg); color: var(--band-ink); position: relative; overflow: hidden; }
.page-head::before { content: ""; position: absolute; right: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(76, 203, 140, 0.22), transparent 68%); pointer-events: none; }
.page-head .wrap { position: relative; padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2.75rem, 6vw, 4.5rem); display: grid; gap: 1.1rem; }
.page-head h1 { font-size: clamp(3rem, 7.5vw, 5.6rem); line-height: 0.9; max-width: 14ch; }
.page-head .eyebrow { color: var(--band-accent); }
.page-head .lede { color: var(--band-ink-2); }
.page-head .crumbs, .page-head .crumbs a { color: var(--band-ink-2); padding: 0; }
.rule { width: 52px; height: 3px; background: var(--green); border-radius: 2px; }
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 960px) { .people { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .people { grid-template-columns: 1fr; } }
.person { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.4rem, 2.6vw, 2rem); display: flex; flex-direction: column; gap: 0.6rem; }
.person img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line), 0 6px 18px -8px rgba(0, 0, 0, 0.45); margin-bottom: 0.5rem; }
.person h3 { font-size: 1.7rem; }
.person .role { font: 500 0.74rem/1.45 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.person p { color: var(--ink-2); font-size: 0.94rem; }
.person .reach { margin-top: auto; padding-top: 0.5rem; display: grid; gap: 0.2rem; }
.people.compact .person { padding: 1.3rem 1.3rem 1.4rem; }
.people.compact .person img { width: 72px; height: 72px; }
.people.compact .person h3 { font-size: 1.35rem; }
.people.compact .person p { font-size: 0.88rem; }
.team-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem; border-top: 2px solid var(--ink); padding-top: 1.5rem; }
.team-cta h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }


.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note.ok { color: var(--green); font-weight: 500; }
.form-note.err { color: var(--laterite); font-weight: 500; }