:root{
  --paper:#F1F0EA; --paper-raised:#FAF9F5; --line:#DAD7CD;
  --ink:#12161C; --ink-soft:#4A5560;
  --teal:#2F5D5A; --teal-deep:#1E3B39;
  --rust:#9C5630;
  --max:1080px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14181D; --paper-raised:#1B2027; --line:#2C333B;
    --ink:#EDEBE4; --ink-soft:#A8B0B8;
    --teal:#6FADA6; --teal-deep:#8FC4BD;
    --rust:#D08B5F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#14181D; --paper-raised:#1B2027; --line:#2C333B;
  --ink:#EDEBE4; --ink-soft:#A8B0B8;
  --teal:#6FADA6; --teal-deep:#8FC4BD;
  --rust:#D08B5F;
  color-scheme: dark;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Public Sans',-apple-system,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.55; padding-inline:20px;
}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3{font-family:'Source Serif 4',Georgia,serif; font-weight:500; line-height:1.15; margin:0 0 .5em; text-wrap:balance;}
h1{font-size:clamp(1.9rem,5vw,2.9rem);}
h2{font-size:clamp(1.4rem,3.4vw,1.9rem);}
h3{font-size:1.15rem;}
p{margin:0 0 1em; max-width:62ch;}
.lede{font-size:1.08rem; color:var(--ink-soft); max-width:52ch;}
.wrap{max-width:var(--max); margin:0 auto;}
.kicker{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--rust); display:block; margin-bottom:12px;}

header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--line);
  margin-inline:-20px; padding-inline:20px;
}
.navbar{display:flex; align-items:center; gap:16px; padding-block:14px; max-width:var(--max); margin:0 auto; flex-wrap:wrap;}
.brand{font-family:'Source Serif 4',serif; font-weight:600; font-size:1.05rem; text-decoration:none;}
.brand span{color:var(--rust);}
nav{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto;}
nav a{
  font-size:.85rem; text-decoration:none; border:1px solid transparent; color:var(--ink-soft);
  padding:7px 12px; border-radius:2px;
}
nav a:hover{color:var(--ink);}
nav a.active{color:var(--ink); border-color:var(--line); background:var(--paper-raised);}

main{max-width:var(--max); margin:0 auto; padding-block:44px 70px;}

.btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--paper);
  padding:12px 22px; text-decoration:none; font:inherit; font-size:.92rem; font-weight:600; border:1px solid var(--ink);
  cursor:pointer; border-radius:2px;
}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn:hover{opacity:.85;}

section{padding-block:46px;}
section.tight{padding-block:20px 46px;}
.rule{border:none; border-top:1px solid var(--line); margin:0;}

.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:40px;}
.pillar{background:var(--paper-raised); padding:24px 22px;}
.pillar h3{margin-bottom:8px;}
.pillar p{font-size:.92rem; color:var(--ink-soft); margin:0; max-width:none;}
@media(max-width:760px){.pillars{grid-template-columns:1fr;}}

.teasers{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
.teaser{background:var(--paper-raised); padding:26px; display:flex; flex-direction:column; text-decoration:none; color:var(--ink);}
.teaser .tag{font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--ink-soft); margin-bottom:10px;}
.teaser p{font-size:.9rem; color:var(--ink-soft); flex-grow:1; margin:0;}
.teaser .more{font-size:.82rem; font-weight:600; color:var(--rust); margin-top:14px;}
@media(max-width:760px){.teasers{grid-template-columns:1fr;}}

.darkbelt{background:var(--teal-deep); color:#F3F1EA; margin-inline:-20px; padding-inline:20px;}
.darkbelt .wrap{padding-block:50px;}
.darkbelt p{color:#CFE4E0;}

.svc-row{display:grid; grid-template-columns:170px 1fr; gap:26px; padding-block:28px; border-bottom:1px solid var(--line);}
.svc-row:first-child{border-top:1px solid var(--line);}
.svc-row .label{font-family:'IBM Plex Mono',monospace; font-size:.75rem; color:var(--rust);}
.svc-row ul{margin:12px 0 0; padding-left:18px; color:var(--ink-soft); font-size:.92rem;}
.svc-row li{margin-bottom:5px;}
@media(max-width:640px){.svc-row{grid-template-columns:1fr; gap:8px;}}

.steps{border-top:1px solid var(--line);}
.step{display:grid; grid-template-columns:60px 1fr; gap:20px; padding-block:24px; border-bottom:1px solid var(--line);}
.step .n{font-family:'Source Serif 4',serif; font-size:1.7rem; color:var(--rust);}
.step p{color:var(--ink-soft); font-size:.93rem; margin:0;}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
@media(max-width:640px){.grid2{grid-template-columns:1fr;}}

blockquote.principle{border-left:3px solid var(--rust); margin:0; padding:2px 0 2px 20px; font-family:'Source Serif 4',serif; font-size:1.15rem; font-style:italic; max-width:44ch;}

.casedetail{scroll-margin-top:80px;}
.casehead{padding-top:8px; margin-bottom:26px;}
.casehead h2{margin-top:10px; max-width:36ch;}
.ref{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--ink-soft);}
.casemeta{display:flex; gap:30px; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:.85rem;}
.casemeta .k{color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; font-size:.68rem; display:block; margin-bottom:3px;}

.arc{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-block:30px;}
.arc div{background:var(--paper-raised); padding:20px 18px;}
.arc .k{font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--rust); display:block; margin-bottom:8px;}
.arc p{font-size:.9rem; margin:0;}
@media(max-width:760px){.arc{grid-template-columns:1fr;}}

figure.shot{border:1px solid var(--line); margin:20px 0; background:var(--paper-raised);}
figure.shot img{width:100%;}
figcaption{font-size:.78rem; color:var(--ink-soft); padding:9px 14px; font-family:'IBM Plex Mono',monospace; border-top:1px solid var(--line);}

.workcard{background:var(--paper-raised); padding:24px; display:grid; grid-template-columns:110px 1fr; gap:20px; align-items:center; border:1px solid var(--line); text-decoration:none; color:var(--ink); margin-bottom:1px;}
.workcard .tag{font-family:'IBM Plex Mono',monospace; font-size:1.9rem; line-height:1; color:var(--rust); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px;}
.workcard p{margin:0; font-size:.88rem; color:var(--ink-soft);}
@media(max-width:620px){.workcard{grid-template-columns:1fr; gap:6px;}}

.team{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.member{background:var(--paper-raised); padding:22px;}
.member .role{font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--rust); margin-bottom:6px;}
.member p{font-size:.88rem; color:var(--ink-soft); margin:0;}
@media(max-width:760px){.team{grid-template-columns:1fr;}}

.factrow{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-block:36px;}
.fact{background:var(--paper-raised); padding:18px;}
.fact .n{font-family:'Source Serif 4',serif; font-size:1.5rem; color:var(--rust); display:block;}
.fact .l{font-size:.76rem; color:var(--ink-soft);}
@media(max-width:640px){.factrow{grid-template-columns:1fr 1fr;}}

.contactgrid{display:grid; grid-template-columns:1fr 1fr; gap:44px;}
@media(max-width:760px){.contactgrid{grid-template-columns:1fr;}}
.field{margin-bottom:16px;}
.field label{display:block; font-size:.83rem; font-weight:600; margin-bottom:6px;}
.field input,.field textarea{width:100%; padding:11px 12px; border:1px solid var(--line); background:var(--paper); font-family:inherit; font-size:.94rem; color:var(--ink); border-radius:2px;}
.field textarea{min-height:110px; resize:vertical;}
.copybtn{font-size:.8rem; padding:4px 10px; border:1px solid var(--line); background:var(--paper-raised); cursor:pointer; border-radius:2px; color:var(--ink);}
.contactinfo .row{margin-bottom:18px; font-size:.94rem;}
.contactinfo .k{font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--ink-soft); display:block; margin-bottom:3px;}

footer{border-top:1px solid var(--line); padding-block:34px; margin-top:20px; max-width:var(--max); margin-inline:auto;}
.footgrid{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:flex-start;}
.footlinks{display:flex; gap:18px; list-style:none; padding:0; margin:0; font-size:.85rem; flex-wrap:wrap;}
.footlinks a{text-decoration:none; color:var(--ink-soft);}
.footnote{font-size:.78rem; color:var(--ink-soft); margin-top:8px;}

/* ---------- Hero (Home) ---------- */
.hero{display:grid; grid-template-columns:minmax(0,1fr) 550px; gap:26px; align-items:start;}
.hero-media{margin-top:36px;}
.hero-media .reveal{aspect-ratio:550/361; background:#D9D9D9; overflow:hidden;}
.hero-media img{width:100%; height:100%; object-fit:cover;}
@media(max-width:960px){
  .hero{grid-template-columns:1fr;}
  .hero-media{margin-top:8px;}
}

/* Placeholder blocks for images not yet chosen */
.placeholder{background:#D9D9D9;}

/* Reveal: wipes in from the left, once, on page load */
.reveal{clip-path:inset(0 100% 0 0); animation:reveal-x 1s cubic-bezier(0.22,1,0.36,1) .15s forwards;}
@keyframes reveal-x{to{clip-path:inset(0 0 0 0);}}

/* ---------- Theme switch ---------- */
.theme-toggle{display:inline-grid; place-items:center; width:36px; height:36px; padding:0; background:none; border:1px solid var(--line); border-radius:2px; color:var(--ink-soft); cursor:pointer;}
.theme-toggle:hover{color:var(--ink);}
.theme-toggle .icon-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block;}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none;}
}
/* ---------- Phone & tablet menu (up to 900px) ---------- */
.menu-toggle{display:none;}
@media(max-width:900px){
  .navbar{flex-wrap:wrap;}
  .brand{margin-right:auto;}
  .menu-toggle{display:inline-flex; align-items:center; gap:8px; order:2; height:36px; padding:0 12px;
    background:none; border:1px solid var(--line); border-radius:2px; color:var(--ink); font:inherit; font-size:.85rem; cursor:pointer;}
  .menu-icon{display:inline-grid; gap:3px; width:14px;}
  .menu-icon span{display:block; height:1.5px; background:currentColor; transition:transform .2s ease, opacity .2s ease;}
  .menu-open .menu-icon span:nth-child(1){transform:translateY(4.5px) rotate(45deg);}
  .menu-open .menu-icon span:nth-child(2){opacity:0;}
  .menu-open .menu-icon span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg);}
  .theme-toggle{order:3;}
  nav{order:4; width:100%; margin-left:0; flex-direction:column; gap:0; padding:6px 0 10px;}
  nav a{padding:13px 4px; border:none; border-top:1px solid var(--line); border-radius:0; font-size:1rem;}
  nav a.active{background:none; border-color:var(--line); color:var(--rust); font-weight:600;}
  /* Hidden until opened — only when JS runs, so the menu is always reachable without it */
  .js nav{display:none;}
  .js.menu-open nav{display:flex;}
}
@media (prefers-reduced-motion: reduce){ .menu-icon span{transition:none;} }

/* Framed image: bars above and below draw in first, then the image reveals.
   Top bar grows from the left, bottom bar from the right. */
.framed{position:relative; padding-block:8px;}
.framed::before,.framed::after{content:""; position:absolute; left:0; right:0; height:8px; background:var(--ink);
  transform:scaleX(0); animation:bar-in .8s cubic-bezier(0.22,1,0.36,1) .15s forwards;}
/* Inside a frame, the image waits for the bars, then opens from the middle line out to them */
.framed .reveal{clip-path:inset(50% 0 50% 0); animation-name:reveal-open; animation-delay:.8s;}
@keyframes reveal-open{to{clip-path:inset(0 0 0 0);}}
.framed::before{top:0; transform-origin:left;}
.framed::after{bottom:0; transform-origin:right;}
@keyframes bar-in{to{transform:scaleX(1);}}

/* Two columns: text left, framed image right (same grid as the hero) */
.split{display:grid; grid-template-columns:minmax(0,1fr) 550px; gap:26px; align-items:start;}
.split img{width:100%; height:auto;}
@media(max-width:960px){ .split{grid-template-columns:1fr;} }

/* Scroll-triggered: hold the animation until the element is in view (only when JS runs) */
.js .on-scroll:not(.in-view)::before,
.js .on-scroll:not(.in-view)::after,
.js .on-scroll:not(.in-view) .reveal{animation-play-state:paused;}

/* Images shown at the same 550:361 shape as the heroes, cropped to fill */
.media-crop{aspect-ratio:550/361; overflow:hidden; background:#D9D9D9;}
.media-crop img{width:100%; height:100%; object-fit:cover;}

/* ---------- Process diagram (Our approach) ---------- */
.process{margin:36px 0 0;}
.process svg{display:block; width:100%; height:auto; background:var(--paper-raised);}
.process .p-line{stroke:var(--ink); stroke-width:1.5; fill:none; stroke-dasharray:440; stroke-dashoffset:440;
  animation:p-draw 1.2s cubic-bezier(0.22,1,0.36,1) .8s forwards;}
.process .p-loop{stroke:var(--rust); stroke-width:1.5; fill:none; stroke-dasharray:4 5; opacity:0; animation:p-fade .6s ease 2s forwards;}
.process .p-loop-head{stroke:var(--rust); stroke-width:1.5; fill:none; opacity:0; animation:p-fade .6s ease 2s forwards;}
.process .p-thread-label{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; fill:var(--ink-soft); opacity:0; animation:p-fade .6s ease 1.6s forwards;}
.process .p-loop-label{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; fill:var(--rust); opacity:0; animation:p-fade .6s ease 2s forwards;}
.process circle{fill:var(--paper-raised); stroke:var(--ink); stroke-width:1.5;}
.process .p-num{font-family:'Source Serif 4',Georgia,serif; font-size:20px; fill:var(--rust);}
.process .p-title{font-family:'Source Serif 4',Georgia,serif; font-size:21px; fill:var(--ink);}
.process .p-sub{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; fill:var(--ink-soft);}
.process .p-node{opacity:0; animation:p-fade .5s ease forwards; animation-delay:calc(.8s + var(--i) * .3s);}
@keyframes p-draw{to{stroke-dashoffset:0;}}
@keyframes p-fade{to{opacity:1;}}

/* Work: three images per row under each case (grey until real images are added) */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:28px 0 8px;}
.gallery .ph,.gallery .reveal{aspect-ratio:351/270; background:#D9D9D9; overflow:hidden;}
.gallery img{width:100%; height:100%; object-fit:cover;}
@media(max-width:640px){ .gallery{grid-template-columns:1fr;} }
/* Gallery inside a frame: the three images open one after another */
.gallery.framed{margin:28px 0 8px;}
.gallery .reveal:nth-child(2){animation-delay:.95s;}
.gallery .reveal:nth-child(3){animation-delay:1.1s;}
/* Text that follows an image row (e.g. Genemate after LAMS) gets room to breathe */
.gallery + p{margin-top:44px;}

/* Work: the case list sits in the hero's right column instead of an image */
.case-index .reveal{aspect-ratio:auto; background:none; display:grid; gap:1px; background:var(--line);}
.case-index .workcard{grid-template-columns:76px 1fr; gap:14px; padding:20px 22px; margin:0; border:none;}
.case-index .workcard:hover h3{color:var(--rust);}

/* Contact: details in the hero's right column */
.contact-card .reveal{aspect-ratio:auto; background:var(--paper-raised); padding:30px 30px 12px;}
.contact-card .row{margin-bottom:22px; font-size:1rem;}
.contact-card a{color:var(--rust); font-weight:600; text-decoration:none;}
.copy-note{font-size:.85rem; color:var(--ink-soft); margin-top:12px; min-height:1.3em;}

/* ---------- Accessibility: keyboard focus, hover, skip link ---------- */
/* Visible focus ring for keyboard users only (not on mouse click) */
:focus{outline:none;}
:focus-visible{outline:2px solid var(--rust); outline-offset:3px; border-radius:2px;}
main:focus{outline:none;}
.teaser:focus-visible,.workcard:focus-visible{outline-offset:-2px;}

/* Skip link: hidden until focused with Tab */
.skip-link{position:absolute; left:16px; top:-60px; z-index:100; background:var(--ink); color:var(--paper);
  padding:10px 16px; font-weight:600; text-decoration:none; border-radius:2px; transition:top .15s;}
.skip-link:focus{top:12px;}

/* Hover feedback matching the focus state */
.teaser,.workcard{transition:background-color .2s ease;}
.teaser:hover,.workcard:hover{background:var(--paper);}
.teaser:hover h3,.teaser:focus-visible h3,.workcard:hover h3,.workcard:focus-visible h3{color:var(--rust);}
.teaser:hover .more,.teaser:focus-visible .more{text-decoration:underline; text-underline-offset:4px;}
.footlinks a:hover,.footlinks a:focus-visible{color:var(--ink); text-decoration:underline; text-underline-offset:4px;}
.contact-card a:hover,.contact-card a:focus-visible{text-decoration:underline; text-underline-offset:4px;}
.theme-toggle:hover{border-color:var(--ink-soft);}
@media (prefers-reduced-motion: reduce){ .skip-link,.teaser,.workcard{transition:none;} }

/* Reduce motion: show images and bars straight away (kept last so it overrides the rules above) */
@media (prefers-reduced-motion: reduce){
  .reveal,.framed .reveal{animation:none; clip-path:none;}
  .framed::before,.framed::after{animation:none; transform:none;}
  .process .p-line,.process .p-loop,.process .p-loop-head,.process .p-loop-label,.process .p-thread-label,.process .p-node{animation:none; opacity:1; stroke-dashoffset:0;}
}