/* Leo Wong — site system.
   Layout idea: every page is a drawing sheet. Measured single column, dimension
   strings instead of decoration, a title block to close each page.
   Tokens come from the DuctTake case study, so the flagship case and the site match. */

:root{
  --paper:#eef0ec; --paper2:#e4e8e2; --sunk:#dadfd8;
  --ink:#15191a; --ink2:#4b5557; --ink3:#6f7a77;
  --rule:#c4cbc3; --rule2:#aeb6ad;
  --blue:#1f4b8e; --green:#1a7352; --amber:#8e6210;
  --display:'Archivo',-apple-system,'Segoe UI',sans-serif;
  --body:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;
  --col:68rem;
  --gutter:clamp(1rem,4vw,3.5rem);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#111413; --paper2:#191d1b; --sunk:#202522;
    --ink:#e9ece7; --ink2:#a4ada7; --ink3:#86908a;
    --rule:#2b312e; --rule2:#3b423e;
    --blue:#82abea; --green:#58ce9a; --amber:#d9a441;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#111413; --paper2:#191d1b; --sunk:#202522;
  --ink:#e9ece7; --ink2:#a4ada7; --ink3:#86908a;
  --rule:#2b312e; --rule2:#3b423e;
  --blue:#82abea; --green:#58ce9a; --amber:#d9a441;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:1.0625rem; line-height:1.62;
  margin:0; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%}
.sheet{max-width:var(--col); margin:0 auto; padding-inline:var(--gutter)}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:.6rem 1rem; z-index:50}
.skip:focus{left:1rem; top:1rem}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}

/* ── type ────────────────────────────────────────────────── */
h1,h2,h3,.fig{font-family:var(--display); text-wrap:balance}
h1{font-size:clamp(2.5rem,6.6vw,4.4rem); line-height:1.02; letter-spacing:-.035em; font-weight:700; margin:0}
h2{font-size:clamp(1.65rem,3.4vw,2.35rem); line-height:1.1; letter-spacing:-.025em; font-weight:600; margin:0 0 .75rem}
h3{font-size:1.0625rem; line-height:1.3; letter-spacing:-.012em; font-weight:600; margin:0 0 .4rem}
p{margin:0 0 1.05rem; max-width:40rem}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.125rem,2vw,1.3125rem); line-height:1.55; color:var(--ink2); max-width:38rem}
strong{font-weight:500; color:var(--ink); background:linear-gradient(transparent 68%,color-mix(in srgb,var(--blue) 22%,transparent) 68%)}
em{font-style:italic; color:var(--ink2)}
a{color:var(--blue); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
.mono{font-family:var(--mono); font-size:.8125rem; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin:0 0 .7rem}
.note{font-family:var(--mono); font-size:.75rem; line-height:1.6; color:var(--ink3); max-width:34rem}
ul,ol{max-width:40rem; padding-left:1.2em}
li{margin-bottom:.4rem}

/* ── site header ─────────────────────────────────────────── */
.site-head{border-bottom:1px solid var(--rule)}
.site-head .sheet{display:flex; align-items:center; gap:1.5rem; min-height:4.25rem}
.mark{display:inline-flex; align-items:center; gap:.65rem; color:var(--ink); text-decoration:none;
  font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:-.01em}
.mark svg{width:1.9rem; height:1.9rem; flex:0 0 auto}
.mark:hover{text-decoration:none}
.nav{margin-left:auto; display:flex; align-items:center; gap:.25rem 1.4rem; flex-wrap:wrap; justify-content:flex-end}
.nav a{font-family:var(--display); font-size:.9375rem; color:var(--ink2); text-decoration:none; padding:.35rem 0;
  border-bottom:1px solid transparent}
.nav a:hover{color:var(--ink); border-bottom-color:var(--ink3)}
.nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--ink)}
.themebtn{font-family:var(--mono); font-size:.625rem; letter-spacing:.06em; background:transparent; color:var(--ink3);
  border:1px solid var(--rule2); border-radius:2px; padding:.32rem .5rem; cursor:pointer; min-height:28px}
.themebtn:hover{color:var(--ink); border-color:var(--ink3)}
@media (max-width:40rem){
  .site-head .sheet{flex-wrap:wrap; gap:.4rem 1rem; padding-block:.7rem}
  .nav{margin-left:0; width:100%; justify-content:flex-start; gap:.2rem 1.1rem}
  .nav .themebtn{margin-left:auto}
}

/* ── bands + callouts (case-study vocabulary) ─────────────── */
section.band{position:relative; padding-block:clamp(3rem,6vw,5.5rem); border-top:1px solid var(--rule)}
section.band.first{border-top:none}
.callout{
  font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.06em;
  color:var(--blue); display:flex; align-items:center; gap:.6rem; margin-bottom:1.6rem; max-width:none;
}
.callout .dot{width:1.45rem;height:1.45rem;border:1px solid var(--blue);border-radius:50%;
  display:grid;place-items:center;font-size:.625rem;flex:0 0 auto}
.callout .rule{height:1px;background:var(--rule);flex:1}

/* ── hero (case pages) ───────────────────────────────────── */
.hero{padding-block:clamp(2.75rem,6vw,4.5rem) clamp(1.75rem,3.5vw,2.75rem)}
.hero h1{margin-bottom:1.3rem}
.hero h1 .q{color:var(--ink3); font-weight:500}
.tagline{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:baseline;margin-bottom:2.2rem}
.tag{font-family:var(--mono); font-size:.6875rem; letter-spacing:.06em;
  border:1px solid var(--rule2); border-radius:2px; padding:.28rem .55rem; color:var(--ink2)}

/* dimension string — how a drawing states a span */
.dim{margin:2.4rem 0 0; max-width:42rem}
.dim svg{display:block;width:100%;height:auto;overflow:visible}
.dim .dl{stroke:var(--ink2);stroke-width:1}
.dim .ext{stroke:var(--rule2);stroke-width:1}
.dim .hl{stroke:var(--green);stroke-width:1.75}
.dim text{font-family:var(--mono);font-size:11px;fill:var(--ink2);letter-spacing:.02em}
.dim text.big{font-family:var(--display);font-size:19px;font-weight:600;fill:var(--ink);letter-spacing:-.01em}
.dim text.gr{fill:var(--green)}
@media (prefers-reduced-motion:no-preference){
  .dim .grow{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.1s .25s cubic-bezier(.22,.8,.3,1) forwards}
  .dim .fade{opacity:0;animation:fade .5s .9s ease forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes fade{to{opacity:1}}
}

/* ── figures ─────────────────────────────────────────────── */
figure{margin:0}
.shot{border:1px solid var(--rule2); background:var(--sunk); display:block; width:100%; height:auto}
figcaption{font-family:var(--mono); font-size:.6875rem; line-height:1.65; color:var(--ink3); margin-top:.6rem}
figcaption b{color:var(--ink2); font-weight:500}
.wide{margin-top:1.8rem}
.placeholder{border:1px dashed var(--amber); background:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--amber) 8%,transparent) 10px 20px);
  color:var(--amber); font-family:var(--mono); font-size:.75rem; line-height:1.5; padding:1.2rem;
  display:grid; place-items:center; text-align:center; min-height:12rem}
.placeholder b{display:block; font-weight:700; margin-bottom:.25rem}

/* ── grids ───────────────────────────────────────────────── */
.grid{display:grid; gap:1.6rem 2rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.pair{grid-template-columns:1fr}
@media (min-width:46rem){.pair{grid-template-columns:1fr 1fr}}
.g3{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.grid > *{min-width:0}
.step h3{font-family:var(--mono); font-size:.75rem; font-weight:500; letter-spacing:.06em;
  color:var(--ink3); border-top:1px solid var(--rule); padding-top:.6rem; margin-bottom:.55rem}
.step p{font-size:.9375rem; line-height:1.56; color:var(--ink2); margin:0}

/* ── stats ───────────────────────────────────────────────── */
.stat .n{font-family:var(--display); font-size:clamp(2rem,4.4vw,2.9rem); font-weight:700;
  letter-spacing:-.035em; line-height:1; display:block; font-variant-numeric:tabular-nums}
.stat .u{font-family:var(--mono); font-size:.6875rem; letter-spacing:.04em;
  color:var(--ink3); display:block; margin-top:.55rem; line-height:1.5}
.stat.pos .n{color:var(--green)}

/* ── tables ──────────────────────────────────────────────── */
.revwrap{overflow-x:auto; margin-top:1.6rem; border-top:1px solid var(--ink)}
table{border-collapse:collapse; width:100%; min-width:40rem}
th{font-family:var(--mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink3); text-align:left; font-weight:500; padding:.7rem .9rem .7rem 0; border-bottom:1px solid var(--rule)}
td{padding:1rem .9rem 1rem 0; border-bottom:1px solid var(--rule); vertical-align:top;
  font-size:.9375rem; line-height:1.55; color:var(--ink2)}
td:last-child,th:last-child{padding-right:0}
.rev{font-family:var(--mono); font-size:.8125rem; font-weight:700; color:var(--ink); white-space:nowrap}
td .did{color:var(--ink); display:block; font-family:var(--display); font-weight:500; font-size:.9375rem; letter-spacing:-.01em; margin-bottom:.15rem}
.wall{color:var(--amber)}
tbody tr:last-child td{border-bottom:1px solid var(--ink)}
table.meas td.num{font-family:var(--mono); font-weight:500; color:var(--ink); white-space:nowrap}
table.meas td.num.bad{color:var(--amber)}
table.meas td.num.good{color:var(--green)}
table.meas{min-width:34rem}
table.simple{min-width:0}

/* ── problem cards ───────────────────────────────────────── */
.prob{border-top:1px solid var(--rule); padding-top:1.1rem}
.prob .sym{font-family:var(--display); font-weight:600; font-size:1.0625rem; letter-spacing:-.012em; margin:0 0 .7rem; color:var(--ink)}
.prob dl{margin:0; display:grid; gap:.25rem}
.prob dt + dd{margin-bottom:.8rem}
.prob dd:last-child{margin-bottom:0}
.prob dt{font-family:var(--mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3)}
.prob dd{margin:0; font-size:.9375rem; line-height:1.55; color:var(--ink2)}
.prob dd.fix{color:var(--ink)}

/* ── pull panel ──────────────────────────────────────────── */
.panel{background:var(--paper2); border:1px solid var(--rule); padding:clamp(1.3rem,3vw,2rem); margin-top:1.8rem}
.panel .eyebrow{margin-bottom:.5rem}
.panel p{font-size:.9375rem; line-height:1.6; color:var(--ink2)}
blockquote.pull{margin:1.8rem 0 0; padding:0 0 0 1.2rem; border-left:2px solid var(--blue); font-size:1.1875rem; line-height:1.5; max-width:38rem}

/* ── before / after ──────────────────────────────────────── */
.ba{display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); margin-top:1.8rem}
.ba figcaption .ver{font-weight:700; color:var(--ink)}

/* ── takeaways ───────────────────────────────────────────── */
.take{counter-reset:t; padding:0; margin:1.6rem 0 0; display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); max-width:none}
.take li{list-style:none; counter-increment:t; border-top:1px solid var(--rule); padding:1.1rem 0 0; margin:0}
.take li::before{content:counter(t,decimal-leading-zero); font-family:var(--mono); font-size:.6875rem;
  color:var(--blue); display:block; margin-bottom:.5rem; letter-spacing:.08em}
.take h3{margin-bottom:.4rem}
.take p{font-size:.9375rem; line-height:1.56; color:var(--ink2); margin:0}

/* ── title block (closes every page) ─────────────────────── */
.titleblock{border-top:1px solid var(--ink); margin-top:clamp(3rem,6vw,5rem); padding-block:1.5rem 3rem}
.tb{display:grid; gap:1.2rem 2rem; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); margin:0}
.tb dt{font-family:var(--mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); margin-bottom:.3rem}
.tb dd{margin:0; font-family:var(--mono); font-size:.8125rem; color:var(--ink); line-height:1.5}
.tb a{color:var(--ink)}

/* ── next / prev between cases ───────────────────────────── */
.next{display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:0 2rem; margin-top:clamp(3rem,6vw,4.5rem); border-top:1px solid var(--ink)}
.next a{display:block; padding:1.1rem 0 1.3rem; border-bottom:1px solid var(--rule); color:var(--ink); text-decoration:none}
.next a span{display:block; font-family:var(--mono); font-size:.6875rem; color:var(--ink3); margin-bottom:.3rem}
.next a b{font-family:var(--display); font-weight:600; font-size:1.25rem; letter-spacing:-.015em}
.next a:hover b{text-decoration:underline; text-underline-offset:.2em}

/* ════════════════════════════════════════════════════════
   HOME
   ════════════════════════════════════════════════════════ */

/* Hero: the name set large, measured live by a dimension string. */
.home-hero{padding-block:clamp(3rem,9vw,7rem) clamp(2.5rem,6vw,4.5rem); position:relative}
.measure{position:relative; display:inline-block; max-width:100%}
.home-hero h1{font-size:clamp(2.9rem,9.2vw,7.4rem); line-height:.96; letter-spacing:-.045em; font-weight:700; margin:0}
.home-hero h1 .l2{display:block; color:var(--ink3); font-weight:500}
.dimline{position:absolute; left:0; top:-1.9rem; height:1.4rem; width:100%; pointer-events:none}
.dimline svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.dimline line{stroke:var(--blue); stroke-width:1; vector-effect:non-scaling-stroke}
.dimline .tick{stroke-width:1.25}
.dimline .lbl{position:absolute; top:-.15rem; left:50%; transform:translateX(-50%); background:var(--paper);
  padding:0 .45rem; font-family:var(--mono); font-size:.6875rem; color:var(--blue); white-space:nowrap; font-variant-numeric:tabular-nums}
.vdim{position:absolute; top:0; bottom:0; left:-1.6rem; width:1rem; pointer-events:none}
.vdim svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.vdim line{stroke:var(--blue); stroke-width:1; vector-effect:non-scaling-stroke}
.vdim .lbl{position:absolute; top:50%; left:-.3rem; transform:translate(-100%,-50%) rotate(-90deg); transform-origin:right center;
  font-family:var(--mono); font-size:.6875rem; color:var(--blue); white-space:nowrap; background:var(--paper); padding:0 .35rem}
.cursor-dim{position:absolute; top:-1.9rem; height:1.4rem; left:0; width:0; pointer-events:none; opacity:0; transition:opacity .2s}
.cursor-dim.on{opacity:1}
.cursor-dim .bar{position:absolute; left:0; right:0; top:50%; border-top:1px dashed var(--green)}
.cursor-dim .end{position:absolute; right:0; top:0; bottom:-1.2rem; border-right:1px solid var(--green)}
.cursor-dim .lbl{position:absolute; right:.4rem; top:-1.15rem; font-family:var(--mono); font-size:.6875rem; color:var(--green); font-variant-numeric:tabular-nums; white-space:nowrap}
@media (max-width:46rem){ .vdim{display:none} }
.hero-meta{display:grid; grid-template-columns:minmax(0,38rem) auto; gap:1.5rem 3rem; align-items:end; margin-top:clamp(1.8rem,4vw,2.8rem)}
.hero-meta .lede{margin:0}
.hero-meta dl{margin:0; display:grid; gap:.55rem; font-family:var(--mono); font-size:.75rem; color:var(--ink2); min-width:13rem}
.hero-meta dt{color:var(--ink3); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase}
.hero-meta dd{margin:0 0 .35rem}
@media (max-width:52rem){ .hero-meta{grid-template-columns:1fr} }

/* Section head on the home page: a heading and one line, left aligned. */
.sec-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.4rem 2rem; margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.sec-head h2{margin:0}
.sec-head p{margin:0; color:var(--ink2); font-size:.9375rem; max-width:30rem}

/* Featured: one big drawing per project, a title block beside it. */
.feature{display:grid; grid-template-columns:minmax(0,1fr); gap:1.4rem; padding-bottom:clamp(2.5rem,5vw,4rem)}
.feature + .feature{border-top:1px solid var(--rule); padding-top:clamp(2.5rem,5vw,4rem)}
.feature .frame{position:relative; aspect-ratio:16/10; overflow:hidden; border:1px solid var(--rule2); background:var(--sunk); display:block}
.feature .frame img{display:block; width:100%; height:100%; object-fit:cover}
.feature .info{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:1rem 3rem; align-items:start}
.feature h3{font-size:clamp(1.5rem,2.8vw,2rem); letter-spacing:-.025em; line-height:1.1; margin:0 0 .6rem}
.feature h3 a{color:var(--ink); text-decoration:none}
.feature h3 a:hover{text-decoration:underline; text-underline-offset:.15em; text-decoration-thickness:2px}
.feature .sum{color:var(--ink2); margin:0 0 1rem}
.feature .go{font-family:var(--display); font-weight:600; font-size:.9375rem}
.feature .spec{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.45rem 1rem; font-family:var(--mono); font-size:.75rem; color:var(--ink); border-top:1px solid var(--ink); padding-top:.8rem}
.feature .spec dt{color:var(--ink3); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; padding-top:.15rem}
.feature .spec dd{margin:0}
.feature .spec .big{font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:-.03em; line-height:1}
@media (max-width:46rem){ .feature .info{grid-template-columns:1fr} }

/* DuctTake frame: the same sheet, paper on one side of the seam, DuctTake on the other. */
@property --x{syntax:'<percentage>'; inherits:true; initial-value:50%}
.wipe{--x:50%}
@media (prefers-reduced-motion:no-preference){ .wipe{transition:--x .45s cubic-bezier(.22,.8,.3,1)} .wipe:hover{transition:--x .08s linear} }
.wipe .after{position:absolute; inset:0; clip-path:inset(0 0 0 var(--x))}
.wipe .seam{position:absolute; top:0; bottom:0; left:var(--x); width:0; border-left:1px solid var(--blue); pointer-events:none}
.wipe .seam::before,.wipe .seam::after{content:""; position:absolute; left:-5px; width:9px; height:1px; background:var(--blue)}
.wipe .seam::before{top:14px} .wipe .seam::after{bottom:14px}
.wipe .side{position:absolute; top:.75rem; font-family:var(--mono); font-size:.6875rem; color:var(--ink); background:color-mix(in srgb,#fff 88%,transparent);
  padding:.25rem .5rem; border:1px solid var(--rule2); pointer-events:none}
.wipe .side.l{left:.75rem} .wipe .side.r{right:.75rem}
.wipe .badge{position:absolute; bottom:.75rem; left:var(--x); transform:translateX(-50%); background:var(--blue); color:#fff;
  font-family:var(--display); font-weight:600; font-size:.875rem; padding:.3rem .6rem; white-space:nowrap; pointer-events:none}
.wipe img{filter:none}
:root[data-theme="dark"] .wipe .frame-img, .wipe .frame-img{background:#fff}

/* Crossclear frame: the product on its own paper. */
.cc-frame{background:#f7f5ee !important; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4%; align-items:center; padding:5% 8%}
.cc-frame .ph{border:6px solid #1f2620; border-radius:22px; overflow:hidden; background:#f7f5ee; line-height:0}
.cc-frame .ph img{width:100%; height:auto !important; object-fit:contain}
.cc-frame .ph:nth-child(2){transform:translateY(-6%)}

/* Locked frames: drawn, not photographed, so nothing private leaks. */
.lock-frame{display:grid !important; place-items:center; background:var(--paper2) !important}
.lock-frame svg{width:100%; height:100%}
.lockflag{position:absolute; top:.75rem; left:.75rem; font-family:var(--mono); font-size:.6875rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule2); padding:.25rem .5rem; display:inline-flex; gap:.4rem; align-items:center}

/* How I work: a real sequence, so it is numbered. */
.work-steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; max-width:none; border-top:1px solid var(--ink)}
.work-steps li{margin:0; padding:1rem 1.2rem 1.2rem 0; position:relative}
.work-steps li + li{padding-left:1.2rem; border-left:1px solid var(--rule)}
.work-steps b{display:block; font-family:var(--display); font-weight:600; font-size:1.125rem; letter-spacing:-.015em; margin-bottom:.35rem}
.work-steps b span{font-family:var(--mono); font-size:.6875rem; font-weight:500; color:var(--blue); margin-right:.5rem}
.work-steps p{font-size:.9375rem; line-height:1.55; color:var(--ink2); margin:0}
@media (max-width:52rem){
  .work-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work-steps li:nth-child(3){padding-left:0; border-left:0}
  .work-steps li:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:30rem){
  .work-steps{grid-template-columns:1fr}
  .work-steps li, .work-steps li + li{padding-left:0; border-left:0}
  .work-steps li + li{border-top:1px solid var(--rule)}
}
.ai-note{display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:1rem 3rem; margin-top:2.2rem; padding-top:1.2rem; border-top:1px solid var(--rule)}
.ai-note h3{font-size:1.125rem}
.ai-note p{color:var(--ink2); font-size:.9875rem}
@media (max-width:46rem){ .ai-note{grid-template-columns:1fr} }

/* Earlier work: a drawing register. */
.register{width:100%; min-width:0; border-top:1px solid var(--ink)}
.register th{white-space:nowrap}
.register tr{cursor:pointer}
.register td{padding:1rem .9rem 1rem 0; vertical-align:middle}
.register td.yr{font-family:var(--mono); font-size:.8125rem; color:var(--ink3); white-space:nowrap; width:7rem}
.register td.thumb{width:7.5rem}
.register td.thumb img, .register td.thumb .th{display:block; width:6.5rem; aspect-ratio:16/10; object-fit:cover; border:1px solid var(--rule2); background:var(--sunk)}
.register .ttl{font-family:var(--display); font-weight:600; font-size:1.125rem; letter-spacing:-.015em; color:var(--ink); text-decoration:none}
.register tr:hover .ttl{text-decoration:underline; text-underline-offset:.18em}
.register .who{display:block; font-size:.875rem; color:var(--ink2)}
.register td.what{font-size:.875rem}
.register td.acc{font-family:var(--mono); font-size:.6875rem; color:var(--ink3); text-align:right; white-space:nowrap}
.register td.acc.locked{color:var(--amber)}
@media (max-width:46rem){
  .register .thumb, .register .what{display:none}
  .register td.acc{width:1%}
  .register td.yr{width:auto; padding-right:.6rem}
}

/* Brand & motion strip */
.strip{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem}
.strip a{display:block; color:var(--ink); text-decoration:none}
.strip .tile{aspect-ratio:4/5; border:1px solid var(--rule2); background:var(--sunk); overflow:hidden; display:grid; place-items:center}
.strip .tile img{width:100%; height:100%; object-fit:cover; display:block}
.strip span{display:block; font-family:var(--display); font-weight:600; font-size:.9375rem; margin-top:.55rem}
.strip small{display:block; font-family:var(--mono); font-size:.6875rem; color:var(--ink3)}
.strip a:hover span{text-decoration:underline; text-underline-offset:.18em}
@media (max-width:52rem){ .strip{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Testimonials */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:2rem 3rem}
.quotes figure{border-top:1px solid var(--ink); padding-top:1.1rem}
.quotes blockquote{margin:0; font-size:1.125rem; line-height:1.55}
.quotes figcaption{font-family:var(--mono); font-size:.6875rem; color:var(--ink3); margin-top:.9rem; line-height:1.6}
.quotes figcaption b{display:block; color:var(--ink); font-family:var(--display); font-size:.9375rem; font-weight:600}

/* Contact */
.contact h2{font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-.035em; line-height:1.02; max-width:16ch}
.contact .links{display:flex; flex-wrap:wrap; gap:.8rem 2rem; margin-top:1.6rem; font-family:var(--display); font-size:1.0625rem; font-weight:600}
.btn{display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:0 1.1rem; background:var(--ink); color:var(--paper);
  font-family:var(--display); font-weight:600; font-size:.9375rem; text-decoration:none; border:1px solid var(--ink); border-radius:2px; cursor:pointer}
.btn:hover{background:transparent; color:var(--ink); text-decoration:none}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:var(--ink); color:var(--paper)}

/* ════════════════════════════════════════════════════════
   LOCKED PAGES
   ════════════════════════════════════════════════════════ */
.lockbox{max-width:30rem; border:1px solid var(--rule2); background:var(--paper2); padding:clamp(1.3rem,3vw,2rem); margin-top:2rem}
.lockbox h2{font-size:1.375rem; margin-bottom:.4rem}
.lockbox p{font-size:.9375rem; color:var(--ink2)}
.lockbox form{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem}
.lockbox label{display:block; width:100%; font-family:var(--mono); font-size:.6875rem; color:var(--ink3)}
.lockbox input{flex:1 1 12rem; min-height:44px; padding:0 .8rem; font:inherit; font-family:var(--mono); font-size:.9375rem;
  background:var(--paper); color:var(--ink); border:1px solid var(--rule2); border-radius:2px}
.lockbox input:focus{border-color:var(--blue); outline:none; box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 30%,transparent)}
.lockbox .err{color:var(--amber); font-family:var(--mono); font-size:.75rem; min-height:1.2em; margin-top:.6rem}
[hidden]{display:none !important}

/* Draft flags — remove before launch */
.draftflag{display:inline-block; font-family:var(--mono); font-size:.625rem; color:var(--amber); border:1px dashed var(--amber); padding:.1rem .35rem; vertical-align:middle}

@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto !important} }

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Featured cards, v2 ─────────────────────────────────── */
.kicker{font-family:var(--mono); font-size:.75rem; color:var(--ink3); margin:0 0 .45rem}

/* DuctTake: the tool and the website, set on the drawing they replaced. */
.dt-frame{background:var(--paper2)}
.dt-frame .dt-sheet{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.3; filter:grayscale(1) contrast(1.1); mix-blend-mode:multiply}
:root[data-theme="dark"] .dt-frame .dt-sheet{mix-blend-mode:normal; opacity:.12; filter:grayscale(1) invert(1)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .dt-frame .dt-sheet{mix-blend-mode:normal; opacity:.12; filter:grayscale(1) invert(1)} }
.win{position:absolute; display:block; border:1px solid #15191a; background:#15191a; overflow:hidden; border-radius:6px;
  box-shadow:10px 12px 0 color-mix(in srgb,#15191a 14%,transparent)}
.win img{display:block; width:100% !important; height:auto !important}
.win .bar{display:flex; align-items:center; gap:.3rem; height:1.45rem; padding:0 .55rem; background:#15191a; color:#cdd3d0; font-family:var(--mono); font-size:.5625rem; white-space:nowrap; overflow:hidden}
.win .bar i{width:.42rem; height:.42rem; border-radius:50%; background:#4b5557; flex:0 0 auto}
.win .bar b{margin-left:.5rem; color:#fff; font-family:var(--display); font-weight:600; font-size:.625rem}
.win .bar em{font-style:normal; color:#8d9894; margin-left:.4rem}
.win .bar.light{background:#f4f2ec; color:#4b5557; border-bottom:1px solid #d5d2c8}
.win .bar.light i{background:#c9c5bb}
.win .bar.light em{color:#4b5557; margin-left:auto; margin-right:auto; background:#fff; border:1px solid #d5d2c8; border-radius:3px; padding:0 .8rem}
.dt-app{left:4%; top:7%; width:66%}
.dt-web{right:4%; bottom:7%; width:36%; border-color:#c9c5bb; background:#fff}
.dt-dim{position:absolute; left:4%; bottom:7%; width:40%; display:grid; gap:.45rem; background:var(--paper); border:1px solid var(--rule2); padding:.6rem .8rem; font-family:var(--mono); font-size:.6875rem; color:var(--ink2)}
.dt-dim .row{display:grid; grid-template-columns:1fr 4.6rem; align-items:center; gap:.6rem}
.dt-dim .len{display:block; height:9px; border-left:1px solid currentColor; border-right:1px solid currentColor; position:relative}
.dt-dim .len::before{content:""; position:absolute; left:0; right:0; top:4px; border-top:1px solid currentColor}
.dt-dim .now{color:var(--green)}
.dt-dim .now .len{border-width:0 1.5px}
.dt-dim .now .len::before{border-top-width:1.5px}
.dt-dim b{font-family:var(--display); font-weight:600; font-size:.9375rem; color:var(--ink); letter-spacing:-.01em}
.dt-dim .now b{color:var(--green)}
@media (max-width:40rem){ .dt-dim{display:none} .dt-app{width:80%; left:4%; top:6%} .dt-web{width:44%} .win .bar em{display:none} }

/* Crossclear: one status card that cycles closed → open → no estimate, then repeats. */
.cc-loop{background:#f7f5ee !important; display:grid !important; place-items:center; font-family:Nunito,ui-rounded,'Avenir Next',system-ui,sans-serif; color:#2a2e28}
.cc-card{width:min(86%,46rem); background:#fffefa; border:1px solid #d6d9cb; border-radius:22px; padding:clamp(.7rem,2.2vw,1.2rem); display:grid; gap:.7rem;
  box-shadow:0 14px 30px -18px rgba(42,46,40,.35)}
.cc-head{display:grid; line-height:1.2}
.cc-head b{font-weight:900; font-size:clamp(.9rem,2vw,1.15rem); letter-spacing:-.02em}
.cc-head small{font-size:.75rem; color:#697063; font-weight:600}
.cc-states{position:relative; display:grid; border-radius:16px; overflow:hidden; animation:ccBg 9s infinite}
.cc-states .st{grid-area:1/1; display:grid; grid-template-columns:1fr auto; align-items:center; gap:.4rem .8rem; padding:clamp(.7rem,2vw,1rem); opacity:0}
.cc-states .txt{display:grid; gap:.2rem}
.cc-states .txt b{font-weight:900; font-size:clamp(1.3rem,4.2vw,2.8rem); letter-spacing:-.035em; line-height:1}
.cc-states .txt small{font-weight:600; font-size:clamp(.75rem,1.9vw,1.15rem)}
.cc-states .txt strong{font-weight:900; font-size:1.35em; background:none; color:inherit}
.cc-states img{width:clamp(4rem,14vw,9.5rem) !important; height:auto !important; transform-origin:50% 90%}
.cc-states .s1 b{color:#922821} .cc-states .s2 b{color:#24502f} .cc-states .s3 b{color:#697063}
.cc-bar{grid-column:1/-1; display:flex; gap:2px; height:clamp(10px,1.6vw,16px); border-radius:6px; overflow:hidden}
.cc-bar i{display:block; height:100%}
.cc-bar .o{background:#2f5a3c}
.cc-bar .c{background:repeating-linear-gradient(135deg,#922821 0 6px,#b44a43 6px 9px)}
.cc-bar.none i{background:#d9d6cc}
.cc-foot{font-size:.6875rem; font-weight:700; color:#464c42}
.cc-states .s1{animation:ccS1 9s infinite} .cc-states .s2{animation:ccS2 9s infinite} .cc-states .s3{animation:ccS3 9s infinite}
.cc-states .s1 img{animation:ccWait 3s ease-in-out infinite}
.cc-states .s2 img{animation:ccWalk .6s ease-in-out infinite alternate}
.cc-states .s3 img{animation:ccHmm 1.5s ease-in-out infinite}
@keyframes ccBg{0%,30%{background:#f5e1d7} 33.3%,63.3%{background:#e2edd9} 66.6%,96.6%{background:#ebe8df} 100%{background:#f5e1d7}}
@keyframes ccS1{0%,30%{opacity:1} 33.3%,96.6%{opacity:0} 100%{opacity:1}}
@keyframes ccS2{0%,30%{opacity:0} 33.3%,63.3%{opacity:1} 66.6%,100%{opacity:0}}
@keyframes ccS3{0%,63.3%{opacity:0} 66.6%,96.6%{opacity:1} 100%{opacity:0}}
@keyframes ccWait{0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)}}
@keyframes ccWalk{from{transform:translate(-3px,0)} to{transform:translate(3px,-4px)}}
@keyframes ccHmm{0%,100%{transform:rotate(0)} 30%{transform:rotate(-5deg)} 60%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){
  .cc-states, .cc-states .st, .cc-states img{animation:none !important}
  .cc-states{background:#f5e1d7}
  .cc-states .s1{opacity:1}
}

/* PeopleCloud: the client's brand, and a rota you can move things on. */
.pc-frame{background:#0f0d36 !important; color:#8caaff; display:block}
.pc-brand{position:absolute; left:6%; top:9%; width:34%; max-width:15rem}
.pc-brand img{width:100% !important; height:auto !important; object-fit:contain}
.pc-rota{position:absolute; left:6%; right:6%; bottom:9%; width:88%; height:auto}
.pc-rota .shifts rect{fill:#507afa; fill-opacity:.28; stroke:#8caaff; stroke-opacity:.6}
.pc-rota .drag{fill:#0fb5c2; fill-opacity:.85; stroke:#fff; stroke-width:1.5}
@media (prefers-reduced-motion:no-preference){
  .pc-rota .drag{animation:pcDrag 6s cubic-bezier(.6,0,.3,1) infinite}
  @keyframes pcDrag{0%,15%{transform:translate(0,0)} 35%,55%{transform:translate(74px,130px)} 75%,100%{transform:translate(0,0)}}
}
.pc-frame .lockflag{left:auto; right:.75rem; top:.75rem; background:#0f0d36; color:#c8cee5; border-color:#ffffff40}

.feature .frame, .feature .frame *{text-decoration:none}
.dt-dim .cap{font-size:.625rem; color:var(--ink3); letter-spacing:.04em}