/* index.html */
body.page-index /* ── ROOT ───────────
   Type scale: 12 / 14 / 16 / 26 / 52 / 64
   Colour system: text / muted / mid / faint / accent
────────────────── */{
  --bg:      #ffffe3;
  --text:    #1c1c0e;
  --muted:   #6b6b4e;   /* secondary text */
  --mid:     #848462;   /* form labels, col headers, sub-2 */
  --faint:   #a0a078;   /* decorative, tertiary */
  --accent:  #2a5018;
  --glow:    #5eb032;
  --sb-bg:   #f3f3c2;
  --border:  #c8c892;
  --sb-w:    215px;
  --fd: 'Array', 'Arial Narrow', sans-serif;
  --fb: 'Familjen Grotesk', 'Helvetica Neue', sans-serif;
}body.page-index, body.page-index *,body.page-index, body.page-index *::before,body.page-index, body.page-index *::after{ margin:0; padding:0; box-sizing:border-box; }body.page-index,body.page-index{ width:100%; height:100%; overflow:hidden; background:var(--bg);
  color:var(--text); font-family:var(--fb); -webkit-font-smoothing:antialiased; }body.page-index /* Keyboard focus — visible ring */
:focus{ outline:none; }body.page-index :focus-visible{ outline:1.5px solid var(--accent); outline-offset:4px; }body.page-index /* Form inputs keep text cursor */
input,body.page-index textarea{ cursor:text; }body.page-index button,body.page-index a{ cursor:pointer; }body.page-index /* ── CURSOR ────── */
#cr{ position:fixed; width:28px; height:28px;
  border:1px solid rgba(42,80,24,.4); border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none; z-index:9998;
  transition:width .2s,height .2s,border-color .18s; }body.page-index #cd{ position:fixed; width:4px; height:4px; background:var(--accent);
  border-radius:50%; transform:translate(-50%,-50%);
  pointer-events:none; z-index:9999; transition:background .15s; }body.page-index .ca{ position:fixed; pointer-events:none; z-index:9997; background:var(--accent); opacity:.25; }body.page-index .ca.h{ width:14px; height:1px; transform:translate(-50%,-50%); }body.page-index .ca.v{ width:1px; height:14px; transform:translate(-50%,-50%); }body.page-index /* ── SIDEBAR ───── */
.sb{ position:fixed; left:0; top:0; height:100vh; width:var(--sb-w);
  background:var(--sb-bg); border-right:1px solid var(--border);
  display:flex; flex-direction:column; z-index:200; overflow:hidden; }body.page-index .sb-head{ display:flex; height:56px; flex-shrink:0; }body.page-index .photo{ width:56px; height:56px; min-width:56px; flex-shrink:0;
  background:#1a390f; position:relative; overflow:hidden; }body.page-index .photo::before{ content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,227,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,227,.06) 1px,transparent 1px);
  background-size:5px 5px; }body.page-index .photo-avatar{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }body.page-index .photo-img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; z-index:2; }body.page-index .sb-cta{ flex:1; background:var(--text); display:flex; flex-direction:column;
  justify-content:center; padding:0 13px; text-decoration:none;
  transition:background .2s; overflow:hidden; }body.page-index .sb-cta:hover{ background:var(--accent); }body.page-index .sb-cta-m{ font-family:var(--fb); font-size:12px; font-weight:700;
  color:#ffffe3; line-height:1.3; white-space:nowrap; }body.page-index .sb-cta-m .sl{ color:rgba(255,255,227,.32); font-weight:400; margin:0 2px; }body.page-index .sb-cta-s{ font-size:11px; color:rgba(255,255,227,.48); letter-spacing:.04em; margin-top:2px; }body.page-index .sb-nav{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:8px 0; overflow-y:auto; }body.page-index .nl{ display:flex; align-items:baseline; padding:9px 16px; text-decoration:none;
  color:var(--text); font-size:16px; font-weight:400; position:relative;
  transition:background .14s,box-shadow .14s; white-space:nowrap;
  perspective:360px; }body.page-index .nl .sl{ color:var(--border); margin-right:1px; transition:color .14s; }body.page-index .nl:hover .sl,body.page-index .nl.on .sl{ color:var(--accent); }body.page-index .nl-label{ display:inline-block; transform-origin:center center; transform-style:preserve-3d;
  backface-visibility:visible; transition:transform .58s cubic-bezier(.2,.72,.18,1); }body.page-index .nl:hover .nl-label{ transform:rotateX(360deg); }body.page-index .nl.on{ font-weight:600; background:rgba(42,80,24,.09); box-shadow:inset 3px 0 0 var(--accent); }body.page-index .nl:hover{ background:rgba(42,80,24,.05); }body.page-index .nl.on:hover{ background:rgba(42,80,24,.12); }body.page-index .nl-bdg{ margin-left:auto; font-family:var(--fb); font-size:11px;
  font-weight:600; color:var(--accent); letter-spacing:.06em; padding-left:10px; opacity:.85; }body.page-index .sb-contact{ margin-top:16px; padding:10px 12px 12px; border-top:1px solid var(--border);
  flex-shrink:0; display:flex; flex-direction:column; gap:3px; }body.page-index .sb-link{ display:flex; align-items:center; gap:10px; text-decoration:none; padding:8px 7px;
  transition:color .15s,background .15s,transform .15s; overflow:hidden; border-radius:2px; }body.page-index .sb-link-icon{ width:25px; height:25px; min-width:25px; display:inline-flex; align-items:center;
  justify-content:center; color:var(--accent); border:1px solid rgba(42,80,24,.25);
  background:rgba(255,255,227,.58); border-radius:50%; transition:background .15s,color .15s,border-color .15s; }body.page-index .sb-link svg{ width:13px; height:13px; flex-shrink:0; }body.page-index .sb-link span{ font-size:15px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; letter-spacing:.01em; }body.page-index .sb-link-e{ color:var(--text); background:rgba(42,80,24,.07); }body.page-index .sb-link-e span{ font-size:12px; font-weight:600; letter-spacing:-.01em; }body.page-index .sb-link:hover{ color:var(--accent); background:rgba(42,80,24,.1); transform:translateX(2px); }body.page-index .sb-link:hover .sb-link-icon{ background:var(--accent); border-color:var(--accent); color:var(--bg); }body.page-index .sb-link-s{ color:var(--muted); }body.page-index .sb-cv{ padding:10px 12px; border-top:1px solid var(--border); flex-shrink:0; }body.page-index .sb-cv .sb-link{ color:var(--bg); background:var(--accent); border:1px solid var(--accent); }body.page-index .sb-cv .sb-link:hover{ color:var(--accent); background:var(--bg); }body.page-index .sb-copy{ padding:8px 16px 10px; font-size:11px; color:var(--faint);
  letter-spacing:.04em; flex-shrink:0; border-top:1px solid var(--border); }body.page-index .dot-grid{ padding:10px 16px 16px; display:grid;
  grid-template-columns:repeat(3,4px); gap:5px; flex-shrink:0; }body.page-index .dot-grid span{ width:3px; height:3px; border-radius:50%;
  background:var(--faint); opacity:.38; }body.page-index /* ── PAGE SYSTEM ─ */
.page{ position:fixed; left:var(--sb-w); top:0; right:0; bottom:0;
  background:var(--bg); opacity:0; pointer-events:none;
  transition:opacity .28s ease; }body.page-index .page.active{ opacity:1; pointer-events:all; }body.page-index /* ── HOME — two-column ───────────────────── */
.home-pg{ display:flex; flex-direction:row; }body.page-index /* Left panel — byline top,body.page-index main body bottom */
.lp{ width:clamp(380px,44%,560px); flex-shrink:0; background:var(--bg);
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:26px 44px 30px; overflow-y:auto;
  scrollbar-width:none; -ms-overflow-style:none; }body.page-index .lp::-webkit-scrollbar{ display:none; }body.page-index .lp-ident{ flex-shrink:0; }body.page-index .byline{ display:flex; align-items:center; gap:10px; }body.page-index .byline-name{ font-family:var(--fb); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--text); }body.page-index .byline-sep{ width:1px; height:10px; background:var(--border); }body.page-index .byline-role{ font-size:12px; color:var(--muted); letter-spacing:.04em; }body.page-index .lp-body{ margin-top:clamp(64px,12vh,132px); display:flex; flex-direction:column; padding-top:0; }body.page-index .eb{ display:flex; align-items:center; gap:8px; font-size:12px;
  text-transform:uppercase; letter-spacing:.16em; color:var(--faint);
  margin-bottom:16px; }body.page-index .eb-ln{ width:16px; height:1px; background:var(--border); }body.page-index h1{ font-family:var(--fd); font-size:clamp(44px,7vw,92px);
  line-height:.91; font-weight:500; letter-spacing:-.03em;
  color:var(--text); margin-bottom:16px; }body.page-index h1 .dm{ color:var(--muted); }body.page-index .sub{ font-size:15px; color:var(--muted); line-height:1.65;
  max-width:350px; margin-bottom:8px; }body.page-index .sub2{ font-size:15px; color:var(--mid); line-height:1.65;
  max-width:350px; margin-bottom:22px; }body.page-index .cta{ display:inline-flex; align-items:center; gap:9px; padding:12px 22px;
  border:1px solid var(--accent); color:var(--accent); text-decoration:none;
  font-family:var(--fb); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
  transition:background .22s,color .22s; align-self:flex-start; }body.page-index .cta svg{ width:12px; height:12px; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .2s; }body.page-index .cta:hover{ background:var(--accent); color:var(--bg); }body.page-index .cta:hover svg{ transform:translateX(3px); }body.page-index /* Right canvas panel */
.rp{ flex:1; position:relative; overflow:hidden; }body.page-index /* Gradient veil — particles fade in from behind the text edge */
.rp::after{ content:''; position:absolute; left:0; top:0; bottom:0;
  width:90px; pointer-events:none; z-index:4;
  background:linear-gradient(to right,var(--bg) 0%,transparent 100%); }body.page-index #cv{ position:absolute; inset:0; width:100%; height:100%; }body.page-index /* ── CONTENT PAGES — shared ──────────────────── */
.content-pg{ display:flex; flex-direction:row; }body.page-index .cp-l{ width:clamp(260px,28%,360px); flex-shrink:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 32px 48px 44px; border-right:1px solid var(--border); }body.page-index .cp-tag{ font-size:12px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--faint); margin-bottom:18px;
  display:flex; align-items:center; gap:8px; }body.page-index .cp-tag-ln{ width:14px; height:1px; background:var(--border); }body.page-index .cp-tag-ct{ margin-left:auto; font-family:var(--fb); font-size:11px;
  color:var(--faint); letter-spacing:.06em; }body.page-index .cp-h{ font-family:var(--fd); font-size:clamp(36px,4vw,52px);
  font-weight:500; line-height:.91; letter-spacing:-.025em;
  color:var(--text); margin-bottom:18px; }body.page-index .cp-desc{ font-size:15px; color:var(--muted); line-height:1.65;
  max-width:230px; }body.page-index .cp-r{ flex:1; overflow-y:auto; padding:48px 52px; }body.page-index .cp-r::-webkit-scrollbar{ width:3px; }body.page-index .cp-r::-webkit-scrollbar-track{ background:transparent; }body.page-index .cp-r::-webkit-scrollbar-thumb{ background:var(--border); border-radius:2px; }body.page-index /* ── ABOUT ─────── */
.about-body{ max-width:560px; display:flex; flex-direction:column; gap:0; }body.page-index .about-p{ font-size:15px; color:var(--muted); line-height:1.72;
  margin-bottom:22px; }body.page-index .about-p:last-of-type{ margin-bottom:36px; }body.page-index .about-focus-lbl{ font-size:12px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--accent); font-weight:600; margin-bottom:14px; display:block; }body.page-index .about-tags{ display:flex; flex-wrap:wrap; gap:8px; }body.page-index .about-tag{ font-size:12px; color:var(--muted); padding:6px 10px;
  border:1px solid var(--border); letter-spacing:.02em; }body.page-index /* ── WORK ──────── */
.proj{ padding:28px; margin:-28px; border-radius:2px;
  transition:background .2s; position:relative; }body.page-index .proj+.proj{ margin-top:56px; }body.page-index .proj:hover{ background:rgba(42,80,24,.03); }body.page-index .proj-head{ display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:12px; }body.page-index .proj-num{ font-family:var(--fb); font-size:12px; color:var(--faint);
  letter-spacing:.12em; }body.page-index .proj-meta{ display:flex; align-items:baseline; gap:14px; }body.page-index .proj-org{ font-size:12px; color:var(--mid); letter-spacing:.02em; }body.page-index .proj-year{ font-size:12px; color:var(--faint); letter-spacing:.04em; }body.page-index .proj-title{ font-family:var(--fd); font-size:26px; font-weight:500;
  letter-spacing:-.02em; line-height:.96; color:var(--text); margin-bottom:14px; }body.page-index .proj-rule{ width:100%; height:1px; background:var(--border); margin-bottom:16px; }body.page-index .proj-body{ display:grid; grid-template-columns:minmax(0,1fr) 178px; gap:30px; align-items:start; }body.page-index .proj-desc{ font-size:15px; color:var(--muted); line-height:1.68;
  margin-bottom:18px; max-width:560px; }body.page-index .proj-visual{ min-height:132px; border:1px solid var(--border); background:var(--sb-bg); position:relative; overflow:hidden; }body.page-index .proj-visual::before,body.page-index .proj-visual::after{ content:''; position:absolute; }body.page-index .proj-visual .v-label{ position:absolute; left:12px; top:11px; color:var(--accent); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }body.page-index .proj-visual .v-note{ position:absolute; left:12px; bottom:10px; color:var(--muted); font-size:11px; }body.page-index .visual-cascade::before{ left:12px; right:12px; top:42px; height:56px; background:linear-gradient(to bottom,transparent 0 8px,#2a5018 8px 18px,transparent 18px 24px,#5e7c4b 24px 34px,transparent 34px 40px,#97a77a 40px 50px,transparent 50px); }body.page-index .visual-workforce::before{ left:15px; right:15px; bottom:33px; height:59px; background:linear-gradient(90deg,#315c25 0 22%,transparent 22% 27%,#5d8548 27% 48%,transparent 48% 53%,#86a56b 53% 72%,transparent 72% 77%,#b2bf8d 77% 100%); clip-path:polygon(0 72%,100% 0,100% 100%,0 100%); }body.page-index .visual-tb::before{ left:12px; right:12px; top:40px; bottom:30px; background:linear-gradient(145deg,transparent 0 22%,#2a5018 22% 24%,transparent 24% 42%,#5e7c4b 42% 45%,transparent 45% 64%,#9aab75 64% 67%,transparent 67%); }body.page-index .visual-mch::before{ width:84px; height:84px; border-radius:50%; border:13px solid #315c25; border-right-color:#d7daaa; border-bottom-color:#d7daaa; left:48px; top:31px; }body.page-index .visual-vl::before{ left:13px; right:13px; top:43px; height:54px; background:repeating-linear-gradient(to bottom,#2a5018 0 8px,transparent 8px 14px); clip-path:polygon(0 0,100% 0,72% 100%,0 100%); }body.page-index .visual-mapper::before{ inset:35px 15px 29px; background:radial-gradient(circle at 18% 66%,#2a5018 0 4px,transparent 5px),radial-gradient(circle at 54% 32%,#5e7c4b 0 5px,transparent 6px),radial-gradient(circle at 82% 68%,#2a5018 0 4px,transparent 5px),linear-gradient(135deg,transparent 48%,#8ca66a 49% 51%,transparent 52%),linear-gradient(45deg,transparent 48%,#8ca66a 49% 51%,transparent 52%); }body.page-index .proj-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:0; }body.page-index .proj-tag{ font-size:11px; color:var(--mid); text-transform:uppercase;
  letter-spacing:.1em; padding:4px 9px; border:1px solid var(--border); }body.page-index .proj-cta{ display:inline-flex; align-items:center; gap:6px;
  font-size:12px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--accent); text-decoration:none; margin-top:18px;
  transition:transform .2s,color .15s; }body.page-index .proj-cta svg{ width:10px; height:10px; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }body.page-index .proj:hover .proj-cta{ transform:translateX(3px); }body.page-index .proj-cta:hover{ color:var(--accent); }body.page-index /* ── DATASETS ──── */
.ds-note{ font-size:15px; color:var(--muted); line-height:1.7;
  margin-bottom:32px; max-width:560px; }body.page-index .ds-table{ width:100%; border-collapse:collapse; table-layout:fixed; }body.page-index .ds-table col:nth-child(1){ width:42%; }body.page-index .ds-table col:nth-child(2){ width:22%; }body.page-index .ds-table col:nth-child(3){ width:14%; }body.page-index .ds-table col:nth-child(4){ width:22%; }body.page-index .ds-table th{ font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--mid); border-bottom:1px solid var(--border);
  padding-bottom:10px; text-align:left; font-weight:600; }body.page-index .ds-table th+th{ padding-left:20px; }body.page-index .ds-table td{ padding:14px 0; border-bottom:1px solid rgba(200,200,146,.35);
  font-size:14px; color:var(--text); vertical-align:top; line-height:1.45; }body.page-index .ds-table td+td{ padding-left:20px; color:var(--muted); }body.page-index .ds-name{ font-weight:500; }body.page-index .ds-abbr{ display:block; font-size:12px; color:var(--faint);
  letter-spacing:.03em; margin-top:2px; }body.page-index /* ── SKILLS ────── */
.sk-section{ display:flex; gap:32px; padding:30px 0;
  border-bottom:1px solid var(--border); }body.page-index .sk-section:first-child{ padding-top:0; }body.page-index .sk-section:last-child{ border-bottom:none; padding-bottom:0; }body.page-index .sk-cat{ width:108px; flex-shrink:0; font-size:12px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--accent); font-weight:600; padding-top:3px; }body.page-index .sk-rows{ flex:1; display:flex; flex-direction:column; gap:13px; }body.page-index .sk-row{ display:grid; grid-template-columns:200px 1fr; gap:20px; align-items:baseline; }body.page-index .sk-name{ font-size:14px; font-weight:600; color:var(--text); }body.page-index .sk-detail{ font-size:13px; color:var(--muted); line-height:1.55; }body.page-index /* ── CONTACT ───── */
.contact-pg{ display:flex; flex-direction:row; }body.page-index .ct-l{ width:clamp(260px,28%,360px); flex-shrink:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 32px 48px 44px; border-right:1px solid var(--border); }body.page-index .ct-h{ font-family:var(--fd); font-size:clamp(46px,5vw,62px);
  font-weight:500; line-height:.91; letter-spacing:-.03em;
  color:var(--text); margin-bottom:18px; }body.page-index .ct-desc{ font-size:15px; color:var(--muted); line-height:1.65;
  max-width:210px; margin-bottom:18px; }body.page-index .ct-direct{ font-size:13px; color:var(--accent); font-weight:600;
  text-decoration:none; transition:color .15s; }body.page-index .ct-direct:hover{ color:var(--text); }body.page-index .ct-r{ flex:1; overflow-y:auto; padding:48px 56px 48px 52px;
  display:flex; flex-direction:column; justify-content:center; }body.page-index /* Contact form */
.cf{ display:flex; flex-direction:column; gap:22px; max-width:480px; }body.page-index .cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }body.page-index .cf-field{ display:flex; flex-direction:column; gap:7px; }body.page-index .cf-label{ font-size:11px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--mid); font-weight:600; }body.page-index .cf-input{ background:none; border:none; border-bottom:1px solid var(--border);
  padding:8px 0; font-family:var(--fb); font-size:15px; color:var(--text);
  outline:none; transition:border-color .18s; width:100%; }body.page-index .cf-input:focus{ border-color:var(--accent); }body.page-index .cf-input::placeholder{ color:var(--faint); font-size:14px; }body.page-index .cf-textarea{ background:none; border:1px solid var(--border); padding:12px 14px;
  font-family:var(--fb); font-size:15px; color:var(--text); outline:none;
  resize:none; height:110px; transition:border-color .18s; width:100%; }body.page-index .cf-textarea:focus{ border-color:var(--accent); }body.page-index .cf-textarea::placeholder{ color:var(--faint); font-size:14px; }body.page-index .cf-foot{ display:flex; justify-content:flex-end; }body.page-index .cf-btn{ display:inline-flex; align-items:center; gap:9px; padding:12px 22px;
  border:1px solid var(--accent); color:var(--accent); background:none;
  font-family:var(--fb); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
  transition:background .22s,color .22s; }body.page-index .cf-btn svg{ width:12px; height:12px; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .2s; }body.page-index .cf-btn:hover{ background:var(--accent); color:var(--bg); }body.page-index .cf-btn:hover svg{ transform:translateX(3px); }body.page-index .cf-btn:disabled{ opacity:.5; }body.page-index .cf-ok{ padding:4px 0; }body.page-index .cf-ok-head{ font-family:var(--fd); font-size:26px; color:var(--text);
  margin-bottom:8px; }body.page-index .cf-ok-sub{ font-size:12.5px; color:var(--muted); }body.page-index /* Keep the entire home-page narrative visible on typical laptop heights. */
@media (min-width:761px) and (max-height:720px){
  .lp { padding-top:22px; padding-bottom:22px; }
  .lp-body { margin-top:clamp(34px,7vh,64px); }
  h1 { font-size:clamp(42px,6vw,74px); margin-bottom:12px; }
  .eb { margin-bottom:12px; }
  .sub,.sub2 { font-size:14px; line-height:1.55; }
  .sub2 { margin-bottom:18px; }
  .cta { padding:10px 18px; }
}body.page-index /* Mobile is a deliberate reading mode,body.page-index not a compressed desktop app. */
@media (max-width:760px){
  html,body { height:auto; min-height:100%; overflow:auto; }
  .sb { position:sticky; top:0; width:100%; height:auto; z-index:200; border-right:0; border-bottom:1px solid var(--border); overflow:visible; }
  .sb-head { height:52px; }
  .photo { width:52px; min-width:52px; height:52px; }
  .sb-cta { padding:0 12px; }
  .sb-cta-s,.sb-contact,.sb-cv,.sb-copy { display:none; }
  .sb-nav { flex:none; flex-direction:row; padding:0 8px; overflow-x:auto; scrollbar-width:none; }
  .sb-nav::-webkit-scrollbar { display:none; }
  .nl { font-size:14px; padding:16px 10px; flex:none; }
  .nl .sl { display:none; }
  .page { position:relative; left:auto; top:auto; right:auto; bottom:auto; min-height:calc(100vh - 52px); display:none; opacity:1; pointer-events:auto; transition:none; }
  .page.active { display:flex; }
  .home-pg { flex-direction:column; }
  .lp { width:100%; min-height:calc(100vh - 52px); padding:34px 24px 42px; overflow:visible; }
  .lp-body { margin-top:70px; }
  h1 { font-size:clamp(52px,15vw,78px); }
  .rp { display:none; }
  .content-pg,.contact-pg { flex-direction:column; }
  .cp-l,.ct-l { width:100%; padding:42px 24px 28px; border-right:0; border-bottom:1px solid var(--border); display:block; }
  .cp-tag { margin-bottom:14px; }
  .cp-h,.ct-h { font-size:clamp(42px,13vw,58px); }
  .cp-desc,.ct-desc { max-width:36rem; }
  .cp-r,.ct-r { width:100%; padding:32px 24px 52px; overflow:visible; }
  .proj { padding:22px 0; margin:0; }
  .proj+.proj { margin-top:36px; }
  .proj-head { align-items:flex-start; gap:8px; flex-direction:column; }
  .proj-meta { gap:9px; flex-wrap:wrap; }
  .proj-body { grid-template-columns:1fr; gap:18px; }
  .proj-visual { min-height:144px; order:-1; }
  .sk-section { flex-direction:column; gap:16px; }
  .sk-row { grid-template-columns:1fr; gap:4px; }
  .ds-table { min-width:640px; }
  .cf-row { grid-template-columns:1fr; gap:22px; }
}

@media (prefers-reduced-motion:reduce) {body.page-index, body.page-index *,body.page-index, body.page-index *::before,body.page-index, body.page-index *::after{ scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }body.page-index .nl:hover .nl-label{ transform:none; }body.page-index #cr,body.page-index #cd,body.page-index .ca{ display:none; }
}


/* case-study.html */
body.page-case-study{
  --bg:#ffffe3;
  --text:#1c1c0e;
  --muted:#6b6b4e;
  --mid:#848462;
  --accent:#2a5018;
  --border:#c8c892;
  --card:#f3f3c2;
  --fd:'Array','Arial Narrow',sans-serif;
  --fb:'Familjen Grotesk','Helvetica Neue',sans-serif;
}body.page-case-study, body.page-case-study *{
  box-sizing:border-box;
}body.page-case-study{
  scroll-behavior:smooth;
}body.page-case-study{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--fb);
  font-size:16px;
  line-height:1.7;
}body.page-case-study a{
  color:inherit;
}body.page-case-study .nav{
  position:sticky;
  top:0;
  z-index:2;
  height:64px;
  padding:0 clamp(20px,5vw,72px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,227,.93);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}body.page-case-study .brand{
  font:700 12px var(--fb);
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
}body.page-case-study .back{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  text-decoration:none;
}body.page-case-study .back:hover{
  text-decoration:underline;
}body.page-case-study .hero{
  max-width:1160px;
  margin:auto;
  padding:clamp(70px,12vw,148px) clamp(20px,5vw,72px) 70px;
  border-bottom:1px solid var(--border);
}body.page-case-study .eyebrow{
  font-size:12px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
}body.page-case-study .hero h1{
  font:500 clamp(48px,7vw,96px)/.92 var(--fd);
  letter-spacing:-.04em;
  margin:18px 0 24px;
  max-width:900px;
}body.page-case-study .dek{
  font-size:clamp(18px,2vw,23px);
  line-height:1.5;
  max-width:720px;
  color:var(--muted);
}body.page-case-study .actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:34px;
}body.page-case-study .button{
  display:inline-flex;
  align-items:center;
  padding:12px 17px;
  border:1px solid var(--accent);
  color:var(--accent);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:12px;
  font-weight:600;
  transition:.2s;
}body.page-case-study .button:hover{
  background:var(--accent);
  color:var(--bg);
  transform:translateY(-2px);
}body.page-case-study .button.secondary{
  border-color:var(--border);
  color:var(--text);
}body.page-case-study .button.secondary:hover{
  border-color:var(--text);
  background:var(--text);
}body.page-case-study main{
  max-width:1160px;
  margin:auto;
  padding:0 clamp(20px,5vw,72px) 100px;
}body.page-case-study .summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--border);
}body.page-case-study .summary div{
  padding:25px 20px 25px 0;
}body.page-case-study .summary div+div{
  border-left:1px solid var(--border);
  padding-left:20px;
}body.page-case-study .label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--mid);
  margin-bottom:6px;
}body.page-case-study .summary strong{
  font-size:14px;
  font-weight:500;
}body.page-case-study .signal{
  margin:42px 0 0;
  padding:28px 32px;
  background:var(--card);
  border:1px solid var(--border);
  max-width:850px;
}body.page-case-study .signal span{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--accent);
  font-weight:600;
  margin-bottom:10px;
}body.page-case-study .signal strong{
  display:block;
  font:500 clamp(24px,3vw,36px)/1.05 var(--fd);
  letter-spacing:-.03em;
  color:var(--text);
}body.page-case-study .section{
  display:grid;
  grid-template-columns:minmax(150px,24%) 1fr;
  gap:48px;
  padding:66px 0;
  border-bottom:1px solid var(--border);
}body.page-case-study .section h2{
  font:500 clamp(28px,3.4vw,43px)/.95 var(--fd);
  letter-spacing:-.03em;
  margin:0;
}body.page-case-study .section-content{
  max-width:700px;
  color:var(--muted);
  font-size:16px;
}body.page-case-study .section-content p:first-child{
  margin-top:0;
}body.page-case-study .section-content ul{
  padding-left:18px;
}body.page-case-study .section-content li{
  margin:8px 0;
}body.page-case-study .callout{
  margin:22px 0;
  padding:20px 22px;
  border-left:3px solid var(--accent);
  background:rgba(42,80,24,.055);
  color:var(--text);
  font-size:19px;
  line-height:1.5;
}body.page-case-study .capabilities{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}body.page-case-study .capability{
  padding:19px;
  background:var(--card);
  border:1px solid var(--border);
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}body.page-case-study .capability strong{
  display:block;
  color:var(--text);
  font-size:15px;
  margin-bottom:4px;
}body.page-case-study .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s ease,transform .55s ease;
}body.page-case-study .reveal.in{
  opacity:1;
  transform:none;
}
@media(max-width:700px) {body.page-case-study .summary{
    grid-template-columns:repeat(2,1fr);
  }body.page-case-study .summary div:nth-child(3){
    border-left:0;
  }body.page-case-study .signal{
    margin-top:28px;
    padding:24px;
  }body.page-case-study .section{
    grid-template-columns:1fr;
    gap:20px;
    padding:45px 0;
  }body.page-case-study .capabilities{
    grid-template-columns:1fr;
  }body.page-case-study .hero{
    padding-top:76px;
  }body.page-case-study .summary div{
    min-height:86px;
  }
}
@media(prefers-reduced-motion:reduce) {body.page-case-study{
    scroll-behavior:auto;
  }body.page-case-study .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}


/* cv.html */
body.page-cv{--bg:#ffffe3;--text:#1c1c0e;--muted:#6b6b4e;--mid:#848462;--accent:#2a5018;--glow:#5eb032;--border:#c8c892;--card:#f3f3c2;--fd:'Array','Arial Narrow',sans-serif;--fb:'Familjen Grotesk','Helvetica Neue',sans-serif}body.page-cv, body.page-cv *{box-sizing:border-box}body.page-cv{scroll-behavior:smooth}body.page-cv{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--fb)}body.page-cv a{color:inherit}body.page-cv .nav{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,72px);border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(255,255,227,.94);backdrop-filter:blur(8px);z-index:2}body.page-cv .brand,body.page-cv .back{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;text-decoration:none}body.page-cv .back{color:var(--accent)}body.page-cv .hero,body.page-cv main{max-width:1160px;margin:auto;padding-left:clamp(20px,5vw,72px);padding-right:clamp(20px,5vw,72px)}body.page-cv .hero{min-height:calc(100vh - 64px);display:flex;align-items:center;padding-top:74px;padding-bottom:74px}body.page-cv .eyebrow{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:600}body.page-cv .hero h1{font:500 clamp(54px,9vw,120px)/.86 var(--fd);letter-spacing:-.055em;margin:18px 0 25px;max-width:900px}body.page-cv .hero p{font-size:clamp(17px,2vw,23px);color:var(--muted);max-width:740px;line-height:1.5}body.page-cv .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}body.page-cv .btn{display:inline-flex;padding:12px 17px;border:1px solid var(--accent);color:var(--accent);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;text-decoration:none;transition:.2s}body.page-cv .btn:hover{background:var(--accent);color:var(--bg);transform:translateY(-2px)}body.page-cv .btn.ghost{border-color:var(--border);color:var(--text)}body.page-cv .btn.ghost:hover{background:var(--text);border-color:var(--text)}body.page-cv .statement{margin:0 auto;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:70px clamp(20px,5vw,72px);max-width:1304px;background:var(--card)}body.page-cv .statement p{font:500 clamp(28px,4vw,52px)/1 var(--fd);letter-spacing:-.035em;max-width:940px;margin:0}body.page-cv .statement span{color:var(--muted)}body.page-cv main{padding-top:88px;padding-bottom:110px}body.page-cv .section-head{display:grid;grid-template-columns:24% 1fr;gap:48px;margin-bottom:44px}body.page-cv .section-head h2{font:500 clamp(31px,4vw,52px)/.9 var(--fd);letter-spacing:-.04em;margin:0}body.page-cv .section-head p{margin:0;color:var(--muted);max-width:620px}body.page-cv .timeline{position:relative;margin-left:24%;padding-left:48px}body.page-cv .timeline:before{content:'';position:absolute;left:5px;top:5px;bottom:5px;width:1px;background:var(--border)}body.page-cv .role{position:relative;padding:0 0 53px;border-bottom:1px solid rgba(200,200,146,.65);margin-bottom:29px;opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}body.page-cv .role.in{opacity:1;transform:none}body.page-cv .role:before{content:'';position:absolute;left:-48px;top:5px;width:11px;height:11px;border:2px solid var(--accent);border-radius:50%;background:var(--bg);transition:.2s}body.page-cv .role:hover:before{background:var(--glow);box-shadow:0 0 0 5px rgba(94,176,50,.13)}body.page-cv .role:last-child{border:0}body.page-cv .date{font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:.13em;font-weight:600}body.page-cv .role h3{font:500 clamp(25px,3vw,37px)/.96 var(--fd);letter-spacing:-.03em;margin:10px 0 5px}body.page-cv .org{color:var(--mid);font-size:14px;margin:0 0 15px}body.page-cv .role p{color:var(--muted);max-width:700px;margin:0}body.page-cv .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-left:24%}body.page-cv .tile{padding:22px;background:var(--card);border:1px solid var(--border)}body.page-cv .tile span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:var(--accent);font-weight:600;margin-bottom:10px}body.page-cv .tile strong{display:block;font-size:16px;font-weight:500;line-height:1.3}body.page-cv .tile p{font-size:13px;color:var(--muted);margin:6px 0 0}body.page-cv .reveal{opacity:0;transform:translateY(18px);transition:.6s}body.page-cv .reveal.in{opacity:1;transform:none}@media(max-width:700px){body.page-cv .hero{min-height:82vh}body.page-cv .statement{padding-top:54px;padding-bottom:54px}body.page-cv .section-head{grid-template-columns:1fr;gap:19px}body.page-cv .timeline{margin-left:0;padding-left:38px}body.page-cv .timeline:before{left:4px}body.page-cv .role:before{left:-38px}body.page-cv .grid{margin-left:0;grid-template-columns:1fr}body.page-cv main{padding-top:65px}}


/* Secondary buttons use a dark hover state with high-contrast text. */
body.page-case-study .button.secondary:hover,
body.page-cv .btn.ghost:hover {
  color: var(--bg);
}

/* Homepage compact layout: keep the intro and primary CTA visible on laptop-height viewports. */
@media (min-width: 761px) and (max-height: 720px) {
  body.page-index .lp {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  body.page-index .lp-body {
    margin-top: clamp(34px, 7vh, 64px);
  }

  body.page-index h1 {
    font-size: clamp(42px, 6vw, 74px);
    margin-bottom: 12px;
  }

  body.page-index .eb {
    margin-bottom: 12px;
  }

  body.page-index .sub,
  body.page-index .sub2 {
    font-size: 14px;
    line-height: 1.55;
  }

  body.page-index .sub2 {
    margin-bottom: 18px;
  }

  body.page-index .cta {
    padding: 10px 18px;
  }
}

/* Homepage mobile reading mode. */
@media (max-width: 760px) {
  body.page-index {
    height: auto;
    min-height: 100%;
    overflow: auto;
  }

  body.page-index .sb {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 200;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  body.page-index .sb-head,
  body.page-index .photo {
    height: 52px;
  }

  body.page-index .photo {
    width: 52px;
    min-width: 52px;
  }

  body.page-index .sb-cta {
    padding: 0 12px;
  }

  body.page-index .sb-cta-s,
  body.page-index .sb-contact,
  body.page-index .sb-cv,
  body.page-index .sb-copy {
    display: none;
  }

  body.page-index .sb-nav {
    flex: none;
    flex-direction: row;
    padding: 0 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.page-index .sb-nav::-webkit-scrollbar {
    display: none;
  }

  body.page-index .nl {
    flex: none;
    padding: 16px 10px;
    font-size: 14px;
  }

  body.page-index .nl .sl,
  body.page-index .rp {
    display: none;
  }

  body.page-index .page {
    position: relative;
    inset: auto;
    display: none;
    min-height: calc(100vh - 52px);
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }

  body.page-index .page.active {
    display: flex;
  }

  body.page-index .home-pg {
    flex-direction: column;
  }

  body.page-index .lp {
    width: 100%;
    min-height: calc(100vh - 52px);
    padding: 34px 24px 42px;
    overflow: visible;
  }

  body.page-index .lp-body {
    margin-top: 70px;
  }

  body.page-index h1 {
    font-size: clamp(52px, 15vw, 78px);
  }

  body.page-index .content-pg,
  body.page-index .contact-pg {
    flex-direction: column;
  }

  body.page-index .cp-l,
  body.page-index .ct-l {
    display: block;
    width: 100%;
    padding: 42px 24px 28px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  body.page-index .cp-r,
  body.page-index .ct-r {
    width: 100%;
    padding: 32px 24px 52px;
    overflow: visible;
  }

  body.page-index .cp-tag {
    margin-bottom: 14px;
  }

  body.page-index .cp-h,
  body.page-index .ct-h {
    font-size: clamp(42px, 13vw, 58px);
  }

  body.page-index .cp-desc,
  body.page-index .ct-desc {
    max-width: 36rem;
  }

  body.page-index .proj {
    padding: 22px 0;
    margin: 0;
  }

  body.page-index .proj + .proj {
    margin-top: 36px;
  }

  body.page-index .proj-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  body.page-index .proj-meta {
    flex-wrap: wrap;
    gap: 9px;
  }

  body.page-index .proj-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body.page-index .proj-visual {
    order: -1;
    min-height: 144px;
  }

  body.page-index .sk-section {
    flex-direction: column;
    gap: 16px;
  }

  body.page-index .sk-row,
  body.page-index .cf-row {
    grid-template-columns: 1fr;
  }

  body.page-index .sk-row {
    gap: 4px;
  }

  body.page-index .cf-row {
    gap: 22px;
  }

  body.page-index .ds-table {
    min-width: 640px;
  }
}

/* dataset.html */
body.page-dataset{--bg:#ffffe3;--text:#1c1c0e;--muted:#6b6b4e;--mid:#848462;--accent:#2a5018;--border:#c8c892;--card:#f3f3c2;--fd:'Array','Arial Narrow',sans-serif;--fb:'Familjen Grotesk','Helvetica Neue',sans-serif}body.page-dataset, body.page-dataset *{box-sizing:border-box}body.page-dataset{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--fb)}body.page-dataset a{color:inherit}body.page-dataset .nav{height:64px;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(20px,5vw,72px);border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(255,255,227,.94);backdrop-filter:blur(8px);z-index:2}body.page-dataset .brand,body.page-dataset .back{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;text-decoration:none}body.page-dataset .back{color:var(--accent)}body.page-dataset .hero,body.page-dataset main{max-width:1160px;margin:auto;padding-left:clamp(20px,5vw,72px);padding-right:clamp(20px,5vw,72px)}body.page-dataset .hero{padding-top:80px;padding-bottom:62px;border-bottom:1px solid var(--border)}body.page-dataset .eyebrow,body.page-dataset .label{display:block;color:var(--accent);text-transform:uppercase;font-size:10px;font-weight:600;letter-spacing:.14em}body.page-dataset .hero h1{font:500 clamp(43px,7vw,88px)/.92 var(--fd);letter-spacing:-.04em;margin:16px 0}body.page-dataset .dek{color:var(--muted);font-size:19px;max-width:710px}body.page-dataset .btn{display:inline-flex;margin-top:22px;padding:11px 16px;border:1px solid var(--accent);color:var(--accent);text-decoration:none;text-transform:uppercase;letter-spacing:.09em;font-size:10px;font-weight:600;transition:.2s}body.page-dataset .btn:hover{background:var(--accent);color:var(--bg);transform:translateY(-2px)}body.page-dataset .section{display:grid;grid-template-columns:24% 1fr;gap:48px;padding:58px 0;border-bottom:1px solid var(--border)}body.page-dataset h2{font:500 clamp(26px,3vw,40px)/.95 var(--fd);letter-spacing:-.03em;margin:0}body.page-dataset .content{max-width:780px;color:var(--muted)}body.page-dataset .model{display:grid;gap:10px}body.page-dataset .entity{border:1px solid var(--border);background:var(--card);padding:15px 17px}body.page-dataset .entity strong{display:block;color:var(--text)}body.page-dataset .entity span{font-size:13px}body.page-dataset .table-wrap{overflow:auto;border:1px solid var(--border)}body.page-dataset table{width:100%;border-collapse:collapse;min-width:650px}body.page-dataset th,body.page-dataset td{text-align:left;vertical-align:top;padding:13px 15px;border-bottom:1px solid var(--border)}body.page-dataset th{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--mid)}body.page-dataset td{font-size:13px}body.page-dataset tr:last-child td{border-bottom:0}body.page-dataset .file{color:var(--text);font-weight:500}body.page-dataset .reveal{opacity:0;transform:translateY(14px);transition:.5s}body.page-dataset .reveal.in{opacity:1;transform:none}@media(max-width:700px){body.page-dataset .section{grid-template-columns:1fr;gap:19px;padding:42px 0}body.page-dataset .hero{padding-top:68px}}