/* Fieldtruth Labs v2: editorial grid, one field colour, terminal-style panels. Self-hosted IBM Plex (OFL). */
@font-face { font-family: "Plex"; src: url("fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Mono"; src: url("fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --field: #c8d6bd;      /* survey-map sage */
  --field-deep: #b6c7aa;
  --ink: #1b2620;
  --ink-soft: #3b4a41;
  --paper: #fbfcf8;
  --grey: #d9ddd5;
  --mark: #2f6b4f;
  --stale: #8a5a1f;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --dots: radial-gradient(rgba(27,38,32,.22) 1px, transparent 1.3px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--field); color: var(--ink); font: 400 17px/1.5 "Plex", system-ui, sans-serif; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 16px; background: var(--paper); padding: 8px 12px; z-index: 10; }

/* labels */
.label { display: inline-block; font: 400 12px/1 "Mono", ui-monospace, monospace; background: var(--ink); color: var(--field); padding: 4px 6px; letter-spacing: .02em; }
.kicker { font: 400 12px/1.4 "Mono", ui-monospace, monospace; color: var(--ink-soft); margin: 0 0 10px; }

/* header */
header.site .wrap { display: flex; justify-content: space-between; align-items: center; height: 72px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; text-decoration: none; letter-spacing: -.01em; }
.brand svg { width: 26px; height: 26px; }
nav.main { display: flex; gap: 22px; font: 400 13px/1 "Mono", ui-monospace, monospace; }
nav.main a { text-decoration: none; } nav.main a:hover { text-decoration: underline; }
@media (max-width: 760px) { nav.main a:not(.contact-link):not(.keep-mobile) { display: none; } }

/* giant type with crop marks */
.mega { position: relative; padding: clamp(28px, 4vw, 48px) 0; margin: clamp(24px, 4vw, 48px) 0; }
.mega::before, .mega::after, .mega > .c1, .mega > .c2 { content: ""; position: absolute; width: 12px; height: 12px; border-color: var(--ink); border-style: solid; }
.mega::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.mega::after { top: 0; right: 0; border-width: 1px 1px 0 0; }
.mega > .c1 { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.mega > .c2 { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.mega h1, .mega h2 { margin: 0; font-weight: 500; letter-spacing: -.045em; line-height: .92; }
.mega h1 { font-size: clamp(52px, 10.5vw, 152px); }
.mega h2 { font-size: clamp(44px, 8vw, 116px); }
.mega .foot { font: 400 12px/1.4 "Mono", ui-monospace, monospace; margin-top: 18px; color: var(--ink-soft); }

/* editorial columns with left rules */
.cols { display: grid; gap: 28px 32px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 24px 0 0; }
.col { border-left: 1px solid var(--ink); padding: 0 0 0 14px; }
.col .kicker { margin-bottom: 26px; }
.col p { margin: 0; font-size: 18px; line-height: 1.38; }
.col.small p { font-size: 16.5px; color: var(--ink-soft); }
.col h3 { margin: 0 0 6px; font-size: 19px; font-weight: 500; letter-spacing: -.01em; }

/* halftone panel + terminal window */
.panel { background-color: var(--field-deep); background-image: var(--dots); background-size: 6px 6px; padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 56px); position: relative; }
.panel > .label { position: absolute; top: 0; left: 0; }
.win { background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); max-width: 720px; margin: 0 auto; font: 400 13.5px/1.45 "Mono", ui-monospace, monospace; }
.win .bar { background: var(--ink); color: var(--field); padding: 4px 8px; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.win table { width: 100%; border-collapse: collapse; }
.win th, .win td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--grey); vertical-align: top; }
.win th { font-weight: 400; color: var(--ink-soft); font-size: 12px; background: #f1f3ee; }
.win tr:last-child td { border-bottom: 0; }
.chip { display: inline-block; padding: 1px 6px; font-size: 12px; color: var(--paper); background: var(--ink); white-space: nowrap; }
.chip.go { background: var(--mark); } .chip.wait { background: #56645b; } .chip.no { background: var(--stale); }
.win .note { padding: 6px 10px; border-top: 1px solid var(--grey); color: var(--ink-soft); font-size: 12px; }
.old { color: var(--stale); } .new { color: var(--mark); font-weight: 600; }
.caption { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 18px; }
.caption .col p { font-size: 16.5px; color: var(--ink-soft); }
@media (max-width: 600px) { .win { font-size: 12.5px; box-shadow: 4px 4px 0 var(--ink); } .win th, .win td { padding: 7px 7px; } }

/* sections */
section { padding: clamp(48px, 7vw, 96px) 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.lede { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.35; max-width: 34ch; margin: 0; }
.btn { display: inline-block; background: var(--ink); color: var(--field); text-decoration: none; padding: 13px 20px; font: 400 14px/1 "Mono", ui-monospace, monospace; }
.btn:hover { background: var(--mark); color: var(--paper); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* contact */
.contact { background: var(--ink); color: var(--field); }
.contact .mega::before, .contact .mega::after, .contact .mega > .c1, .contact .mega > .c2 { border-color: var(--field); }
.contact .kicker { color: #9fb39a; }
.contact .mail { font-size: clamp(24px, 4vw, 48px); font-weight: 500; letter-spacing: -.02em; }
.contact .col { border-color: var(--field); }

footer.site { background: var(--ink); color: #9fb39a; font: 400 12px/1.5 "Mono", ui-monospace, monospace; padding: 0 0 40px; }
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; border-top: 1px solid #3b4a41; padding-top: 20px; }
.contact .col.small p.kicker { color: #9fb39a; }

/* v3 additions */
.tick { color: var(--mark); font-weight: 600; } .cross { color: var(--stale); font-weight: 600; }
.win .src { color: var(--ink-soft); font-size: 12px; }
.alert { padding: 10px; border-bottom: 1px solid var(--grey); }
.alert b { font-weight: 600; }
.alert ul { margin: 6px 0 0; padding-left: 16px; }
.alert li { margin: 3px 0; }
.offer { border-top: 1.5px solid var(--ink); padding-top: 14px; }
.offer .step { font: 400 12px/1 "Mono", ui-monospace, monospace; color: var(--ink-soft); }
.offer h3 { font-size: 24px; font-weight: 500; letter-spacing: -.02em; margin: 10px 0 8px; }
.offer p { margin: 0; color: var(--ink-soft); font-size: 16.5px; }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 32px; margin-top: 32px; }

/* inner-page header: smaller, one line, disclaimer outside the frame */
.mega.sub { padding: clamp(22px, 3vw, 36px) 0; }
.mega.sub h1 { font-size: clamp(40px, 6.2vw, 88px); line-height: 1; letter-spacing: -.04em; }
.disclaimer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; margin: 0 0 clamp(28px, 4vw, 48px); max-width: 78ch; }
.disclaimer p { margin: 0; color: var(--ink-soft); font-size: 16.5px; }
.mega .foot { margin-top: 24px; font: 400 clamp(18px, 1.7vw, 21px)/1.4 "Plex", system-ui, sans-serif; max-width: 48ch; text-wrap: balance; }
.mega h1.long { font-size: clamp(44px, 7.4vw, 108px); line-height: .96; }

/* long-form pages (privacy, 404) */
.doc { max-width: 74ch; padding-bottom: clamp(48px, 7vw, 96px); }
.doc h2 { font-size: 21px; font-weight: 500; letter-spacing: -.01em; margin: 36px 0 10px; }
.doc p, .doc li { font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.doc ul { padding-left: 20px; }
.doc li { margin: 6px 0; }
.doc .meta { font: 400 13px/1.4 "Mono", ui-monospace, monospace; color: var(--ink-soft); margin: 0 0 8px; }
.draftnote { background: var(--paper); border: 1px dashed var(--ink); padding: 10px 14px; font-size: 15px; margin: 0 0 28px; }
h2.label { margin: 0; font-weight: 400; letter-spacing: .02em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- critique fixes ---- */
/* P1.1 focus visible on dark sections and buttons */
.contact :focus-visible, footer.site :focus-visible { outline-color: var(--field); }
.btn:focus-visible { outline-offset: 4px; }
/* P1.6/P1.7 nav: bigger tap targets, keep key links on mobile */
nav.main a { padding: 10px 0; }
footer.site a { display: inline-block; padding: 6px 0; }
@media (max-width: 760px) { nav.main { gap: 16px; } nav.main a.keep-mobile { display: inline; } }
/* P2.3 one kicker size everywhere */
.col p.kicker, .col.small p.kicker, .kicker { font: 400 12px/1.4 "Mono", ui-monospace, monospace; color: var(--ink-soft); margin: 0 0 12px; }
.contact .col p.kicker, .contact .col.small p.kicker { color: #9fb39a; }
/* P2.6 how-we-work grid: 5 / 3+2 / 1 */
#how .cols { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { #how .cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { #how .cols { grid-template-columns: 1fr; } }
.section-intro { font-size: clamp(28px, 3.6vw, 46px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; margin: 22px 0 0; max-width: 22ch; text-wrap: balance; }
#how .cols { margin-top: clamp(28px, 4vw, 44px); }
/* P3.2 footer rule aligned and visible; P3.3 panel edge */
footer.site .wrap { border-top: 0; padding-top: 0; }
footer.site .wrap::before { content: ""; flex-basis: 100%; border-top: 1px solid #4d5e53; margin-bottom: 10px; }
:root { --field-deep: #adc0a0; }
.mega h2.long { font-size: clamp(38px, 6.2vw, 88px); line-height: .98; }
.brand, nav.main a { white-space: nowrap; }
@media (max-width: 440px) {
  .brand { font-size: 16px; gap: 8px; } .brand svg { width: 22px; height: 22px; }
  nav.main { gap: 12px; font-size: 12px; }
}

/* identity */
.brand img { width: 28px; height: 28px; display: block; }
@media (max-width: 440px) { .brand img { width: 24px; height: 24px; } }
.contact .seal { position: absolute; right: var(--gutter); top: 0; width: 190px; height: 190px; opacity: .95; }
@media (max-width: 1100px) { .contact .seal { display: none; } }
@media (min-width: 1101px) { .contact .mega h2 { max-width: calc(100% - 240px); } .contact .seal { top: 36px; } }

/* ===== LIFT F1: hero contour field (the page's one authored motion) ===== */
.hero { position: relative; overflow: hidden; padding-bottom: clamp(32px, 6vw, 72px); }
.hero > .wrap { position: relative; z-index: 1; }
.hero .contours { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ink); opacity: .2; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, #000 62%); mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, #000 62%); }
.hero .contours path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.hero .datum { color: var(--ink); }
.hero .datum circle { fill: var(--mark); stroke: none; }
.hero .datum path { stroke: var(--ink); stroke-width: 1.4; fill: none; }
.hero .datum text { font: 400 15px "Mono", ui-monospace, monospace; fill: var(--ink); letter-spacing: .04em; }
.hero:has(.contours) .contours .datum { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero .contours path { stroke-dashoffset: 1; animation: ft-draw 1.8s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: calc(var(--i) * 70ms); }
  .hero .datum { opacity: 0; animation: ft-fade .5s ease-out 1.1s forwards; }
}
@keyframes ft-draw { to { stroke-dashoffset: 0; } }
@keyframes ft-fade { to { opacity: 1; } }
@media (max-width: 860px) { .hero .contours { opacity: .14; -webkit-mask-image: none; mask-image: none; } }
.hero .contours { opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, #000 60%), linear-gradient(180deg, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, #000 60%), linear-gradient(180deg, #000 72%, transparent 100%); mask-composite: intersect; }
.hero .contours > g:first-child { opacity: .24; }
@media (max-width: 860px) { .hero .contours { -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); } .hero .contours > g:first-child { opacity: .16; } .hero .datum { display: none; } }

/* ===== LIFT F2: the specialism as a dark band ===== */
.band { background: var(--ink); color: var(--field); padding: clamp(64px, 9vw, 120px) 0; margin: clamp(24px, 4vw, 48px) 0; }
.band .label { background: var(--field); color: var(--ink); }
.band .mega::before, .band .mega::after, .band .mega > .c1, .band .mega > .c2 { border-color: var(--field); }
.band .mega .foot, .band .kicker, .band .offer .step { color: #9fb39a; }
.band .offer { border-top-color: rgba(200,214,189,.45); }
.band .offer h3 { color: var(--field); }
.band .offer p, .band p { color: #c8d6bd; }
.band .offer p { color: #a9bba4; }
.band .panel { background-color: #24322a; background-image: radial-gradient(rgba(200,214,189,.16) 1px, transparent 1.3px); }
.band .panel > .label { background: var(--field); color: var(--ink); }
.band .win { box-shadow: 6px 6px 0 var(--mark); border-color: var(--field); }
.band .win p, .band .win td, .band .win th { color: var(--ink); }
.band .win .note, .band .win .src { color: var(--ink-soft); }
.band .btn { background: var(--field); color: var(--ink); }
.band .btn:hover { background: var(--paper); color: var(--ink); }
.band .btn.ghost { background: transparent; color: var(--field); border-color: var(--field); }
.band .btn.ghost:hover { background: rgba(200,214,189,.12); color: var(--field); }
.band :focus-visible { outline-color: var(--field); }
.band .win td.old, .band .win .old { color: var(--stale); }
.band .win td.new, .band .win .new { color: var(--mark); }
.band .win td.tick, .band .win .tick { color: var(--mark); }
.band .win td.cross, .band .win .cross { color: var(--stale); }
.band .win .bar, .band .win .bar span { color: var(--field); }

/* ===== LIFT F3: typography details ===== */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.win td, .win th { font-variant-numeric: tabular-nums; }

/* ===== LIFT F4: branded browser surfaces ===== */
::selection { background: var(--ink); color: var(--field); }
.band ::selection, .contact ::selection, footer.site ::selection { background: var(--field); color: var(--ink); }
html { scrollbar-color: var(--ink) var(--field); accent-color: var(--mark); }
body { caret-color: var(--mark); }
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* ===== LIFT F5: buttons and windows respond ===== */
.btn { transition: transform .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out; box-shadow: 0 0 0 var(--mark); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--mark); }
.btn:active { transform: translate(0, 0); box-shadow: 0 0 0 var(--mark); }
.band .btn:hover, .contact .btn:hover { box-shadow: 4px 4px 0 var(--mark); }
.win { transition: transform .25s ease-out, box-shadow .25s ease-out; }
.panel:hover .win { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.band .panel:hover .win { box-shadow: 9px 9px 0 var(--mark); }
@media (prefers-reduced-motion: reduce) { .btn, .win { transition: none; } .btn:hover, .panel:hover .win { transform: none; } }
.sub-hero { padding-bottom: 0; }
.sub-hero .contours { -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%); mask-image: linear-gradient(90deg, transparent 30%, #000 75%); -webkit-mask-composite: source-over; mask-composite: add; }
.sub-hero .contours > g:first-child { opacity: .22; }
.sub-hero .contours path { animation: none; stroke-dashoffset: 0; }
.sub-hero .datum { animation: none; opacity: 1; }
.sub-hero .contours path { stroke-dasharray: none; }
.sub-hero .contours { -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%), linear-gradient(180deg, #000 55%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 30%, #000 75%), linear-gradient(180deg, #000 55%, transparent 100%); mask-composite: intersect; }

/* ===== EXAMPLES: product-grade showcases ===== */
.showcase { margin-top: clamp(40px, 6vw, 72px); }
.showcase-copy { margin: 0 0 28px; max-width: 900px; }
.showpanel { padding: clamp(44px, 6vw, 72px) clamp(12px, 5vw, 72px) clamp(36px, 5vw, 64px); }
.showpanel .win { max-width: 980px; }
.win .panes { display: grid; grid-template-columns: 1.05fr 1fr; }
.win .pane { padding: 18px 20px 20px; }
.win .pane + .pane { border-left: 1px solid var(--grey); background: #f6f8f3; }
.win .pane-h { font-size: 12px; color: var(--ink-soft); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .06em; }
.slide-card { background: #fff; border: 1px solid var(--grey); padding: 22px 24px; aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 1px 0 var(--grey); }
.slide-title { font: 500 22px/1.2 "Plex", system-ui, sans-serif; color: var(--ink); margin: 0 0 14px; letter-spacing: -.01em; }
.slide-card ul { margin: 0; padding-left: 18px; font: 400 15px/1.7 "Plex", system-ui, sans-serif; color: var(--ink); }
mark { background: none; color: inherit; padding: 1px 4px; border-radius: 2px; white-space: nowrap; }
mark b { font: 500 10px/1 "Mono", ui-monospace, monospace; display: inline-block; vertical-align: 2px; margin-right: 5px; padding: 2px 4px; color: var(--paper); border-radius: 2px; }
mark.ok { background: #dcebe2; box-shadow: inset 0 -2px 0 var(--mark); } mark.ok b { background: var(--mark); }
mark.bad { background: #f3e6d2; box-shadow: inset 0 -2px 0 var(--stale); } mark.bad b { background: var(--stale); }
.sources ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sources li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; padding: 10px 12px; background: #fff; border: 1px solid var(--grey); }
.sources li.bad { border-color: #d9c4a3; }
.sources .st { font-weight: 600; font-size: 15px; line-height: 1.3; }
.sources li.ok .st { color: var(--mark); } .sources li.bad .st { color: var(--stale); }
.sources li div { display: grid; gap: 2px; font-size: 12.5px; }
.sources li b { font-weight: 500; color: var(--ink); }
.sources li span { color: var(--ink-soft); }
.sources li em { font-style: normal; color: var(--mark); }
.statusbar { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 12px; border-top: 1px solid var(--grey); background: #eef1ea; font-size: 12px; color: var(--ink-soft); }
.statusbar .okc { color: var(--mark); } .statusbar .badc { color: var(--stale); }
.statusbar span + span::before { content: "·"; margin-right: 18px; color: var(--grey); }
@media (max-width: 860px) { .win .panes { grid-template-columns: 1fr; } .win .pane + .pane { border-left: 0; border-top: 1px solid var(--grey); } .slide-card { aspect-ratio: auto; } mark { white-space: normal; } }

/* fact trace diagram */
.trace-body { padding: 26px 22px 24px; background: #f6f8f3; }
.trace-src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 auto; width: fit-content; max-width: 100%; padding: 12px 16px; background: var(--ink); color: var(--field); position: relative; }
.trace-src b { font-weight: 500; } .trace-src .val { font-size: 18px; font-weight: 600; color: #fff; }
.tag-src { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; background: var(--mark); color: #fff; padding: 2px 6px; }
.trace-src::after { content: ""; position: absolute; left: 50%; bottom: -26px; height: 26px; border-left: 1.5px solid var(--ink); }
.trace-outs { list-style: none; margin: 26px 0 0; padding: 26px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; position: relative; }
.trace-outs::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; border-top: 1.5px solid var(--ink); }
.trace-outs li { position: relative; background: #fff; border: 1px solid var(--grey); padding: 12px 10px; display: grid; gap: 6px; text-align: center; }
.trace-outs li::before { content: ""; position: absolute; top: -27px; left: 50%; height: 26px; border-left: 1.5px solid var(--ink); }
.trace-outs li.bad::before { border-left: 1.5px dashed var(--stale); }
.trace-outs li.bad { border-color: #d9c4a3; background: #fbf6ee; }
.trace-outs .where { font-size: 12px; color: var(--ink-soft); }
.trace-outs .val { font-size: 17px; font-weight: 600; color: var(--ink); }
.trace-outs li.bad .val { color: var(--stale); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.pill { justify-self: center; font-size: 11px; padding: 2px 7px; border-radius: 999px; }
.trace-outs li.ok .pill { background: #dcebe2; color: var(--mark); } .trace-outs li.bad .pill { background: #f3e6d2; color: var(--stale); }
@media (max-width: 860px) {
  .trace-outs { grid-template-columns: 1fr; padding: 0 0 0 22px; margin-top: 20px; } .trace-outs::before { left: 0; right: auto; top: 0; bottom: 24px; border-top: 0; border-left: 1.5px solid var(--ink); }
  .trace-outs li { text-align: left; grid-template-columns: 1fr auto; } .trace-outs li .where { grid-column: 1 / -1; } .trace-outs li::before { top: 50%; left: -22px; height: 0; width: 22px; border-left: 0; border-top: 1.5px solid var(--ink); } .trace-outs li.bad::before { border-left: 0; border-top: 1.5px dashed var(--stale); }
  .trace-src { margin: 0; } .trace-src::after { left: 0; bottom: -20px; height: 20px; }
}
/* overlapping alert window */
.tracepanel { display: grid; }
.tracepanel .alertwin { max-width: 640px; justify-self: end; margin-top: -48px; margin-right: clamp(0px, 3vw, 40px); position: relative; z-index: 2; }
@media (max-width: 860px) { .tracepanel .alertwin { margin: 20px 0 0; justify-self: stretch; } }
.band .showpanel .win { color: var(--ink); }
.band .trace-src, .band .trace-src b { color: var(--field); }
.band .statusbar span { color: var(--ink-soft); } .band .statusbar .okc { color: var(--mark); }
.band .trace-outs .where { color: var(--ink-soft); } .band .trace-outs .val { color: var(--ink); } .band .trace-outs li.bad .val { color: var(--stale); }
.band .trace-outs li.ok .pill { color: var(--mark); } .band .trace-outs li.bad .pill { color: var(--stale); }
.band .alert, .band .alert b, .band .alert li { color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; margin-top: clamp(36px, 5vw, 56px); }
.cta-row p { margin: 0; max-width: 52ch; font-size: 18px; }
.cta-row .actions { margin-top: 0; }
.tracepanel { margin-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(48px, 6vw, 80px); }
@media (max-width: 600px) { .statusbar span + span::before { content: none; } .statusbar { gap: 4px 14px; } }
@media (max-width: 860px) { mark { white-space: nowrap; } }

/* team */
#team { padding-top: 0; }
.team-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px 48px; align-items: end; margin: 22px 0 8px; }
.team-title { font-size: clamp(28px, 3.6vw, 46px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; margin: 0; text-wrap: balance; }
.team-sub { margin: 0; font-size: 17px; color: var(--ink-soft); max-width: 46ch; }
.team-cols .col h3 { font-size: 21px; margin-bottom: 8px; }
.team-cols .col p:not(.kicker) { font-size: 16px; color: var(--ink-soft); }
@media (max-width: 860px) { .team-head { grid-template-columns: 1fr; } }
.team-cols { margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 760px) { nav.main a { padding: 14px 0; } .contact .mail a { display: inline-block; padding: 6px 0; } }
@media (min-width: 861px) { .contact .split { align-items: end; } .contact .mail { margin: 0; } }
@media (max-width: 760px) { nav.main a { padding: 16px 0; } .brand { padding: 10px 0; } footer.site a { display: inline-block; padding: 13px 0; } }
.btn { min-height: 44px; display: inline-flex; align-items: center; }

/* ===== LIFT G (8 Oct): sticky header, active nav, footer, booking, /listed ===== */
html { scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
header.site { position: sticky; top: 0; z-index: 20; background: rgba(200,214,189,.92); -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid rgba(27,38,32,.14); }
nav.main a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* footer: brand, pages, contact */
footer.site { padding: clamp(40px, 6vw, 72px) 0 28px; font: 400 14px/1.5 "Plex", system-ui, sans-serif; }
footer.site .wrap { display: block; }
footer.site .wrap::before { content: none; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px 48px; padding-top: 28px; border-top: 1px solid #4d5e53; }
.foot-brand .brand { color: var(--field); padding: 0; }
.foot-brand p { margin: 14px 0 0; max-width: 30ch; color: #9fb39a; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.foot-col .kicker { color: #9fb39a; margin-bottom: 8px; }
footer.site .foot-col a { color: var(--field); text-decoration: none; padding: 6px 0; }
footer.site .foot-col a:hover { text-decoration: underline; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: clamp(32px, 5vw, 56px); font: 400 12px/1.5 "Mono", ui-monospace, monospace; color: #9fb39a; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } footer.site .foot-col a { padding: 12px 0; } }

/* contact: booking under the address */
.contact-main .mail { margin: 0; }
.contact-actions { margin-top: 20px; }
.contact .btn { background: var(--field); color: var(--ink); }
.contact .btn:hover { background: var(--paper); color: var(--ink); }

/* /listed */
.scopepanel { margin-top: clamp(28px, 4vw, 44px); }
.win table.scope td { padding: 12px 12px; }
.win table.scope td:first-child { color: var(--ink-soft); width: 3.2em; }
.win table.scope td b { display: block; font-weight: 500; color: var(--ink); font-family: "Plex", system-ui, sans-serif; font-size: 15.5px; }
.win table.scope td span { display: block; color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
.win table.scope td:last-child { color: var(--mark); width: 40%; }
@media (max-width: 600px) {
  .win table.scope thead { display: none; }
  .win table.scope tr { display: grid; grid-template-columns: 2.4em 1fr; border-bottom: 1px solid var(--grey); padding: 6px 0; }
  .win table.scope td { border: 0; padding: 6px 8px; }
  .win table.scope td:last-child { grid-column: 2; width: auto; padding-top: 0; }
  .win table.scope tr:last-child { border-bottom: 0; }
}
.why-cols { margin-top: clamp(28px, 4vw, 44px); }
.why-cols .col h3 { font-size: 21px; margin-bottom: 8px; }
.why-cols .col p:not(.kicker) { font-size: 16.5px; color: var(--ink-soft); }
#limits .cols, #steps .offers { margin-top: clamp(24px, 3vw, 36px); }
.more { margin: 28px 0 0; font-size: 17px; }
.more a::after { content: " →"; }
.cta-band { margin-bottom: 0; }
.more a { display: inline-block; padding: 11px 0; }
.foot-brand .brand { display: inline-flex; padding: 0; }
.cta-band { padding-bottom: clamp(48px, 6vw, 72px); }