/* ==========================================================================
   Hann Tucker Associates — "Two Rooms"
   --------------------------------------------------------------------------
   base.css owns the reset, wrap, header/nav mechanics, buttons, forms, footer
   skeleton, reveals and the hero headline contract. This file supplies the
   tokens, the split-room hero, the wall spine and the figures.
   ========================================================================== */

:root{
  /* ---------- the two rooms ---------- */
  --ink:        #14161a;   /* source room, dark ground */
  --ink-2:      #191c20;   /* raised dark surface */
  --ink-3:      #1f2328;
  --paper:      #f3f1ea;   /* receiver room, page */
  --paper-2:    #e9e5d9;
  --rule:       #d5d1c6;
  --signal:     #2f6f5e;   /* the measured difference */
  --signal-lit: #7db7a6;
  --mute:       #8a8f94;

  /* ---------- base.css token names ---------- */
  --surface:    var(--paper);
  --surface-2:  var(--paper-2);
  --text:       var(--paper);
  --muted:      #9aa0a4;
  --ink-text:   #14161a;
  --ink-mute:   #5f666b;
  --accent:     var(--signal);
  --accent-lit: var(--signal-lit);
  --accent-2:   var(--signal);
  --line:       rgba(243,241,234,.13);
  --line-d:     rgba(20,22,26,.14);

  /* ---------- type ---------- */
  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-body:    "Merriweather Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "Nanum Gothic Coding", ui-monospace, SFMono-Regular, monospace;

  --wrap-max: 1240px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --seam: rgba(20,22,26,.2);
  --seam-label: var(--ink-mute);
}

html{ scroll-padding-top:96px; }
body{
  background:var(--paper);
  color:var(--ink-text);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:300;
  line-height:1.66;
}
::selection{ background:var(--signal); color:var(--paper); }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

h1,h2,h3{ font-weight:400; }

.skip{
  position:absolute; left:.5rem; top:.5rem; z-index:10000;
  width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  padding:.75rem 1.1rem;
  background:var(--signal); color:var(--paper);
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
}
.skip:focus{ width:auto; height:auto; clip-path:none; }

/* ---------- grain, very quiet ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:890;
  pointer-events:none; opacity:.026;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.pre__mark svg{ width:148px; height:auto; display:block; }
.pre__bars path{ stroke:var(--paper); stroke-width:1.4; opacity:.7; }
.pre__wall path{ stroke:var(--signal); stroke-width:2; }
.pre__mark{ margin-bottom:1.6rem; }
.pre__meta{ color:rgba(243,241,234,.55); }

/* ==========================================================================
   HEADER
   ========================================================================== */
@media (min-width:1024px){
  .hdr{ background:var(--ink); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
.hdr__in{ min-height:78px; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.7rem; min-width:0; }
.brand img{ width:auto; height:44px; filter:invert(1); opacity:.9; }
.brand__lock{ display:block; min-width:0; }
.brand__name{
  display:block;
  font-family:var(--font-display); font-size:1rem; line-height:1.08;
  letter-spacing:-.015em; color:var(--text);
  white-space:nowrap;
}
.brand__sub{
  display:block; margin-top:.22rem;
  font-family:var(--font-mono); font-size:.44rem; line-height:1.2;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(243,241,234,.48);
  white-space:nowrap;
}

.nav__foot{ display:none; }
@media (max-width:1023px){ .nav__foot{ display:grid; } }

.nav__list{ gap:0; }
.nav__link{
  position:relative;
  padding:.56rem .58rem;
  font-size:.79rem; font-weight:400; letter-spacing:.005em;
  color:rgba(243,241,234,.82);
}
.nav__link:hover{ color:var(--paper); background:none; }
.nav__link::after{
  content:""; position:absolute; left:.58rem; right:.58rem; bottom:.28rem;
  height:1px; background:var(--signal-lit);
  transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.nav__link:hover::after{ transform:scaleX(1); }
.nav__item:first-child .nav__link{ color:var(--paper); }
.nav__item:first-child .nav__link::after{ transform:scaleX(1); }

.hdr__cta{
  display:flex; flex-direction:column; align-items:flex-end; gap:.12rem;
  margin-left:.9rem; padding-left:1rem;
  border-left:1px solid var(--line);
  flex-shrink:0;
}
.hdr__cta-l{
  font-family:var(--font-mono); font-size:.43rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(243,241,234,.42);
}
.hdr__cta-n{
  font-family:var(--font-mono); font-size:.71rem; letter-spacing:.01em;
  color:var(--paper); transition:color .2s;
}
.hdr__cta:hover .hdr__cta-n{ color:var(--signal-lit); }

@media (max-width:1180px){ .hdr__cta{ display:none; } }

/* base buttons, retuned for a paper page */
.btn{ font-family:var(--font-body); border-radius:1px; }
.btn--solid{ background:var(--signal); color:var(--paper); }
.btn--solid:hover{ background:#275f50; }
.btn--ghost{ border-color:var(--rule); color:var(--ink-text); }
.btn--ghost:hover{ border-color:var(--signal); color:var(--signal); }

/* ==========================================================================
   HERO — a wall, with both rooms visible
   ========================================================================== */
.hero{ background:var(--paper); color:var(--ink-text); border-bottom:1px solid var(--rule); }
.hero__mast{
  display:grid;
  grid-template-columns:minmax(0,1.36fr) minmax(0,.64fr);
  column-gap:clamp(2rem,4vw,4rem);
  padding-top:clamp(2.2rem,4.4vw,3.6rem);
  padding-bottom:1.2rem;
}
.hero__eyebrow{
  grid-column:1/-1;
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem;
  font-family:var(--font-mono); font-size:.57rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:clamp(1.4rem,3vw,2.2rem);
}
.hero__dot{
  width:6px; height:6px; background:var(--signal); border-radius:50%;
  flex:none;
}
.hero__eyebrow > span:not(.hero__dot):not(:last-child)::after{
  content:"/"; margin-left:.7rem; color:var(--rule);
}
.hero__title{ grid-column:1; align-self:end; min-width:0; }
.hero__h1{
  font-size:var(--h1-size, clamp(2.5rem, 7.8vw, 5.4rem));
  font-weight:400; line-height:.92; letter-spacing:-.035em;
}
@media (min-width:1024px){
  .hero__h1{ font-size:var(--h1-size, clamp(3.4rem, 6.6vw, 5.5rem)); }
}
.hero__h1 em{ font-style:italic; color:var(--signal); }
.hero__sub{ grid-column:2; align-self:end; padding-bottom:.35rem; min-width:0; }
.hero__lead{
  font-size:.94rem; line-height:1.72; color:var(--ink-mute);
  max-width:34ch;
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.hero__sub .btn{ font-family:var(--font-body); }

.hero__facts{
  grid-column:1/-1;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--rule);
}
.hero__facts li{
  padding:1rem 1.2rem 0 0;
  display:grid; gap:.2rem;
  border-right:1px solid var(--rule);
}
.hero__facts li:last-child{ border-right:0; }
.hero__facts b{
  font-family:var(--font-display); font-size:1.16rem; font-weight:400;
  line-height:1.1; letter-spacing:-.01em; color:var(--ink-text);
}
.hero__facts span{
  font-family:var(--font-mono); font-size:.49rem; line-height:1.5;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);
}

/* ---------- the split room ---------- */
.rooms{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 94px minmax(0,1fr);
  min-height:clamp(330px,38vw,440px);
  border-top:1px solid var(--rule);
}
.room{
  position:relative; min-width:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:1.15rem clamp(1.2rem,3vw,2.4rem) 1rem;
}
.room--source{ background:var(--ink); color:var(--paper); }
.room--receiver{ background:var(--paper); color:var(--ink); }
.room__head{
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--font-mono); font-size:.52rem; letter-spacing:.18em;
  text-transform:uppercase; opacity:.55;
}
.room__art{
  width:min(100%,520px); height:auto; align-self:center;
  margin:.6rem 0 .2rem;
}
.room__line{ stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.room--source .room__line{ color:rgba(243,241,234,.72); }
.room--receiver .room__line{ color:rgba(20,22,26,.62); }
.room__cap{
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--font-mono); font-size:.46rem; letter-spacing:.12em;
  text-transform:uppercase; opacity:.48;
}

/* the wall: a section, not a line */
.wall{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:27px 20px 20px 27px;
  background:#0b0d10;
}
.wall__layer{ height:100%; }
.wall__layer--mass{
  background:repeating-linear-gradient(45deg,#45484d 0 2px,#292c30 2px 6px);
}
.wall__layer--cavity{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 20%),
    #080a0c;
}
.wall__layer--absorb{
  background:repeating-linear-gradient(0deg,#2f6f5e 0 3px,#24584a 3px 6px);
}
.wall__tag{
  position:absolute; bottom:1rem; left:50%; transform:translateX(-50%);
  writing-mode:vertical-rl;
  font-family:var(--font-mono); font-size:.44rem; letter-spacing:.18em;
  text-transform:uppercase; white-space:nowrap; color:rgba(243,241,234,.62);
  background:#0b0d10; border:1px solid rgba(243,241,234,.18);
  padding:.5rem .25rem;
}

/* the one number that crosses the wall */
.delta{
  position:absolute; z-index:4;
  left:50%; top:16%; transform:translateX(-50%);
  width:164px; padding:.6rem .55rem .5rem;
  background:var(--paper); border:1px solid var(--ink);
  text-align:center;
  box-shadow:0 16px 34px -22px rgba(0,0,0,.6);
}
.delta__n{
  font-family:var(--font-mono); font-size:1.7rem; line-height:1;
  letter-spacing:-.06em; color:var(--ink);
}
.delta__n small{
  font-size:.52rem; letter-spacing:.06em; margin-left:.25rem; color:var(--signal);
}
.delta__cap{
  margin-top:.4rem;
  font-family:var(--font-mono); font-size:.45rem; line-height:1.45;
  letter-spacing:.02em; color:var(--ink-mute);
}

.hero__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 2rem;
  padding-top:1rem; padding-bottom:1.6rem;
}
.hero__foot-l{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.53rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute);
}
.hero__foot-mark{
  width:18px; height:8px; flex:none;
  background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 3px);
  opacity:.5;
}
.hero__foot-r{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--signal);
}
.hero__foot-r svg{ width:13px; height:13px; transition:transform .25s var(--ease); }
.hero__foot-r:hover{ color:var(--ink); }
.hero__foot-r:hover svg{ transform:translateY(3px); }

/* ==========================================================================
   THE WALL SPINE — every section is source or receiver
   ========================================================================== */
.sect{ position:relative; }
.through{
  display:grid;
  grid-template-columns:minmax(0,.94fr) 64px minmax(0,1.06fr);
  align-items:start;
}
.through__copy{
  grid-column:1; grid-row:1; min-width:0;
  padding-right:clamp(1rem,2.8vw,2.4rem);
}
.through__seam{
  grid-column:2; grid-row:1; align-self:stretch;
  position:relative; min-height:240px;
  color:var(--seam);
}
.through__seam::before{
  content:""; position:absolute; top:0; bottom:0; left:50%;
  width:1px; background:currentColor;
}
.through__seam::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:9px; height:32px;
  background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 3px);
  opacity:.8;
}
.through__seam span{
  position:absolute; top:44px; left:calc(50% + 9px);
  writing-mode:vertical-rl;
  font-family:var(--font-mono); font-size:.44rem; letter-spacing:.16em;
  text-transform:uppercase; white-space:nowrap;
  color:var(--seam-label);
}
.through__seam i{ font-style:normal; color:var(--signal); }

.through > .figwrap,
.through > .services__list,
.through > .sectors__list,
.through > .practice__side{
  grid-column:3; grid-row:1; min-width:0;
}
.through--flip > .through__copy{
  grid-column:3;
  padding-right:0; padding-left:clamp(1rem,2.8vw,2.4rem);
}
.through--flip > .figwrap,
.through--flip > .services__list,
.through--flip > .sectors__list,
.through--flip > .practice__side{
  grid-column:1;
}

.sect__num{
  font-family:var(--font-mono); font-size:.57rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--signal);
  margin-bottom:1.1rem;
}
.sect__h2{
  font-size:clamp(2.05rem,4.6vw,3.4rem);
  font-weight:400; line-height:1.02; letter-spacing:-.032em;
}
.sect__h2 em{ font-style:italic; color:var(--signal); }
.sect__lead{ font-size:.93rem; line-height:1.72; color:var(--ink-mute); max-width:42ch; margin-top:1.4rem; }
.sect--light .sect__lead, .sect--light-2 .sect__lead{ color:var(--ink-mute); }

.textlink{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:1.8rem; padding-bottom:.25rem;
  border-bottom:1px solid var(--ink);
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink);
  transition:color .2s, border-color .2s;
}
.textlink:hover{ color:var(--signal); border-color:var(--signal); }

/* ==========================================================================
   01 — WHAT WE MEASURE
   ========================================================================== */
.measure{ border-top:1px solid var(--rule); }
.measure__body{
  margin-top:1.2rem; max-width:42ch;
  font-size:.85rem; line-height:1.75; color:var(--ink-mute);
}

.figwrap{
  background:#f8f6ef;
  border:1px solid var(--rule);
  min-width:0;
}
.figwrap__bar{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1rem;
  padding:.6rem .85rem;
  border-bottom:1px solid var(--rule);
  font-family:var(--font-mono); font-size:.49rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-mute);
}
.figwrap__bar-mid{ color:var(--ink-mute); }
.figwrap__bar-r{ color:var(--signal); }
.fig{
  display:block; width:100%; height:auto;
  padding:clamp(.6rem,1.6vw,1.2rem);
  color:var(--ink);
}
.fig__label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.17em;
  text-transform:uppercase; fill:var(--ink-mute);
}
.fig__label--mid{ font-size:9.5px; fill:var(--ink-mute); }
.fig__mono{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  fill:var(--ink-mute);
}
.fig__mono--s{ font-size:9.5px; }
.fig__floor{ stroke:var(--ink); stroke-width:1.1; opacity:.22; }
.fig__src rect{ fill:var(--ink); opacity:.86; }
.fig__src rect:nth-child(2){ opacity:.72; }
.fig__src rect:nth-child(3){ opacity:.92; }
.fig__src rect:nth-child(4){ opacity:.64; }
.fig__layer{ stroke:var(--ink); stroke-width:1.1; }
.fig__layer--2{ fill:rgba(20,22,26,.09); }
.fig__layer--3{ fill:var(--signal); opacity:.8; }
.fig__nums text{
  font-family:var(--font-mono); font-size:9px; fill:var(--ink-mute);
  letter-spacing:.04em;
}
.fig__recv rect{ fill:var(--signal); opacity:.68; }
.fig__recv rect:nth-child(2){ opacity:.85; }
.fig__recv rect:nth-child(4){ opacity:.55; }
.fig__delta-g path{ stroke:var(--signal); stroke-width:1.15; fill:none; }
.fig__delta-t{
  font-family:var(--font-display); font-size:24px; fill:var(--signal);
}
.fig__delta-g .fig__mono--s{ fill:var(--signal); }

/* the wall rises; the receiver level drops */
@media (prefers-reduced-motion: no-preference){
  .fig.is-running .fig__layer{
    transform-box:fill-box; transform-origin:bottom;
    animation:htWallUp .6s var(--ease) both;
  }
  .fig.is-running .fig__layer--1{ animation-delay:.15s; }
  .fig.is-running .fig__layer--2{ animation-delay:.85s; }
  .fig.is-running .fig__layer--3{ animation-delay:1.55s; }
  .fig.is-running .fig__layer--4{ animation-delay:2.25s; }

  .fig.is-running .fig__rbar{
    transform-box:fill-box; transform-origin:bottom;
    animation:htLevelDrop .55s cubic-bezier(.4,0,.2,1) both;
  }
  .fig.is-running .fig__rbar:nth-child(1){ animation-delay:1s; }
  .fig.is-running .fig__rbar:nth-child(2){ animation-delay:1.7s; }
  .fig.is-running .fig__rbar:nth-child(3){ animation-delay:2.4s; }
  .fig.is-running .fig__rbar:nth-child(4){ animation-delay:3.1s; }

  .fig.is-running .fig__nums text{ animation:htFade .35s .3s both; }
  .fig.is-running .fig__delta-g{ animation:htFade .6s 3.4s both; }
}
@keyframes htWallUp{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes htLevelDrop{ from{ transform:scaleY(1.5); } to{ transform:scaleY(1); } }
@keyframes htFade{ from{ opacity:0; } to{ opacity:1; } }

.figwrap__legend{
  display:flex; flex-wrap:wrap; gap:.45rem 1rem; align-items:center;
  padding:.62rem .85rem .7rem;
  border-top:1px solid var(--rule);
  font-family:var(--font-mono); font-size:.48rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute);
}
.figwrap__legend b{ color:var(--signal); font-weight:400; }
.figwrap__note{ margin-left:auto; color:var(--signal); text-transform:none; letter-spacing:.04em; }

.steps{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(2.4rem,4vw,3.4rem);
  border-top:1px solid var(--rule);
}
.steps li{
  display:grid; gap:.16rem; align-content:start;
  padding:1rem 1.1rem 0 0;
  border-right:1px solid var(--rule);
  min-width:0;
}
.steps li:last-child{ border-right:0; }
.steps__n{
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.14em;
  color:var(--signal);
}
.steps b{
  font-family:var(--font-display); font-size:1.02rem; font-weight:400;
}
.steps li > span:last-child{ font-size:.76rem; line-height:1.55; color:var(--ink-mute); }

/* ==========================================================================
   02 — WHAT WE DO
   ========================================================================== */
.sect--light-2{ background:var(--paper-2); color:var(--ink-text); }
.services__note{
  margin-top:1.9rem; padding-top:1rem;
  border-top:1px solid var(--line-d);
  max-width:34ch;
  font-family:var(--font-mono); font-size:.55rem; line-height:1.7;
  letter-spacing:.04em; color:var(--ink-mute);
}
.services__list{ border-top:1px solid var(--line-d); }
.svc{
  display:grid; grid-template-columns:2.6rem minmax(0,1fr) 1.4rem;
  gap:.9rem; align-items:start;
  padding:1.25rem .3rem 1.25rem 0;
  border-bottom:1px solid var(--line-d);
  transition:background .2s, padding .25s var(--ease);
}
.svc:hover{ background:rgba(243,241,234,.45); padding-left:.5rem; }
.svc__n{
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.12em;
  color:var(--signal); padding-top:.3rem;
}
.svc__body{ display:grid; gap:.3rem; min-width:0; }
.svc__t{
  font-family:var(--font-display); font-size:1.28rem; font-weight:400;
  line-height:1.15; letter-spacing:-.015em;
  transition:color .2s;
}
.svc:hover .svc__t{ color:var(--signal); }
.svc__d{ font-size:.81rem; line-height:1.65; color:var(--ink-mute); max-width:46ch; }
.svc__arrow{
  font-family:var(--font-mono); font-size:.95rem; color:var(--ink-mute);
  transition:transform .25s var(--ease), color .2s;
}
.svc:hover .svc__arrow{ transform:translate(2px,-2px); color:var(--signal); }

/* 24-hour monitoring chart */
.monitor{
  margin-top:clamp(3rem,6vw,5rem);
  padding-top:1.1rem;
  border-top:1px solid var(--line-d);
}
.monitor__head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:.4rem 1.5rem; margin-bottom:1.2rem;
}
.monitor__kicker{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--signal);
}
.monitor__title{
  font-family:var(--font-display); font-size:1.08rem; color:var(--ink-text);
}
.monitor__chart{ display:block; width:100%; height:auto; color:var(--ink); }
.monitor__grid path{ stroke:var(--rule); stroke-width:1; fill:none; }
.monitor__limit{ stroke:var(--signal); stroke-width:1.3; stroke-dasharray:5 5; fill:none; }
.monitor__limit-t{
  font-family:var(--font-mono); font-size:8px; letter-spacing:.08em;
  fill:var(--signal);
  paint-order:stroke fill; stroke:var(--paper-2); stroke-width:3px; stroke-linejoin:round;
}
.monitor__trace{ fill:none; stroke:var(--ink); stroke-width:1.8; }
.monitor__area{ fill:var(--signal); opacity:.08; }
.monitor__dots circle{ fill:var(--signal); }
.monitor__axis text{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.06em;
  fill:var(--ink-mute);
}
.monitor__foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 2rem;
  padding-top:.9rem; border-top:1px solid var(--line-d);
}
.monitor__foot p{ font-size:.78rem; line-height:1.65; color:var(--ink-mute); max-width:52ch; }
.monitor__stamp{
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--signal);
}

/* ==========================================================================
   03 — SECTORS
   ========================================================================== */
.sectors{
  background:var(--ink); color:var(--paper);
  --seam:rgba(243,241,234,.18);
  --seam-label:rgba(243,241,234,.42);
}
.sectors .sect__num{ color:var(--signal-lit); }
.sectors .sect__h2{ color:var(--paper); }
.sectors .sect__lead{ color:rgba(243,241,234,.62); }
.sectors .textlink{ color:var(--paper); border-color:rgba(243,241,234,.4); }
.sectors .textlink:hover{ color:var(--signal-lit); border-color:var(--signal-lit); }

.sectors__list{ border-top:1px solid var(--line); }
.sectors__list li{
  display:grid;
  grid-template-columns:2.2rem minmax(0,.85fr) minmax(0,1.25fr);
  gap:.9rem; align-items:baseline;
  padding:1rem 0;
  border-bottom:1px solid var(--line);
}
.sectors__n{
  font-family:var(--font-mono); font-size:.48rem; letter-spacing:.12em;
  color:var(--signal-lit);
}
.sectors__t{
  font-family:var(--font-display); font-size:1.06rem; line-height:1.2;
  color:var(--paper);
}
.sectors__d{ font-size:.78rem; line-height:1.6; color:rgba(243,241,234,.56); }

/* ==========================================================================
   04 — PROJECTS
   ========================================================================== */
.projects{ border-top:1px solid var(--rule); }
.projects__head{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.7fr);
  gap:.6rem clamp(2rem,4vw,4rem);
  align-items:end;
  margin-bottom:clamp(2rem,4vw,2.8rem);
}
.projects__head .sect__num{ grid-column:1/-1; margin-bottom:.1rem; }
.projects__head .sect__h2{ grid-column:1; }
.projects__head .sect__lead{ grid-column:2; margin-top:0; max-width:38ch; }

.projects__grid{
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);
  gap:clamp(1.4rem,3vw,3rem);
  align-items:start;
}
.proj{ min-width:0; }
.proj__img{
  overflow:hidden;
  background:var(--surface-2);
  aspect-ratio:1140/600;
}
.proj__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease), filter .5s;
}
.proj:hover .proj__img img{ transform:scale(1.025); filter:saturate(1.05); }
.proj figcaption{
  display:grid; gap:.18rem;
  padding-top:.7rem;
}
.proj__name{
  font-family:var(--font-display); font-size:1.02rem; line-height:1.2;
  letter-spacing:-.01em;
}
.proj__meta{ font-size:.76rem; line-height:1.55; color:var(--ink-mute); }
.proj__credit{
  font-family:var(--font-mono); font-size:.46rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute); margin-top:.15rem;
}

.projects__index{
  border-top:2px solid var(--ink);
  padding-top:.55rem;
  align-self:start;
}
.projects__kicker{
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--signal); margin-bottom:.35rem;
}
.projects__index li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.56rem 0;
  border-bottom:1px solid var(--rule);
  font-size:.8rem; line-height:1.35;
}
.projects__index li span:last-child{
  font-family:var(--font-mono); font-size:.48rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute); white-space:nowrap;
}
.projects__index .textlink{ margin-top:1.2rem; }

.projects__strip{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.2vw,1.8rem);
  margin-top:clamp(2rem,4vw,3.2rem);
}
.proj--offset{ margin-top:2.2rem; }

/* ==========================================================================
   05 — PRACTICE
   ========================================================================== */
.practice{
  background:var(--ink-2); color:var(--paper);
  --seam:rgba(243,241,234,.16);
  --seam-label:rgba(243,241,234,.4);
}
.practice .sect__num{ color:var(--signal-lit); }
.practice .sect__h2{ color:var(--paper); }
.practice .sect__h2 em{ color:var(--signal-lit); }
.practice .sect__lead{ color:rgba(243,241,234,.66); }
.practice__body{
  margin-top:1.1rem; max-width:44ch;
  font-size:.84rem; line-height:1.72; color:rgba(243,241,234,.5);
}
.practice__acts{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.9rem; }
.btn--dark{ border-color:rgba(243,241,234,.28); color:var(--paper); }
.btn--dark:hover{ border-color:var(--signal-lit); color:var(--signal-lit); }

.facts > div{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:1rem; padding:.85rem 0;
  border-top:1px solid var(--line);
}
.facts > div:last-child{ border-bottom:1px solid var(--line); }
.facts dt{
  font-family:var(--font-mono); font-size:.48rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(243,241,234,.42); padding-top:.2rem;
}
.facts dd{
  font-family:var(--font-display); font-size:1.02rem; line-height:1.3;
  color:var(--paper);
}
.practice__note{
  margin-top:1.5rem; padding-left:.9rem;
  border-left:2px solid var(--signal);
  max-width:42ch;
  font-size:.78rem; line-height:1.68; color:rgba(243,241,234,.52);
}
.practice__mark{
  display:block; margin-top:1.8rem;
  font-family:var(--font-display); font-size:clamp(4rem,8vw,6.4rem);
  line-height:.8; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px rgba(243,241,234,.14);
}

/* ==========================================================================
   06 — CONTACT
   ========================================================================== */
.contact{ border-top:1px solid var(--rule); }
.contact__head{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.82fr);
  gap:.6rem clamp(2rem,4vw,4rem);
  align-items:end;
  margin-bottom:clamp(2rem,4vw,2.8rem);
}
.contact__head .sect__num{ grid-column:1/-1; margin-bottom:.1rem; }
.contact__head .sect__h2{ grid-column:1; }
.contact__head .sect__lead{ grid-column:2; margin-top:0; }
.contact__offices{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.office{
  display:flex; flex-direction:column;
  min-height:310px;
  padding:clamp(1.3rem,2.8vw,2rem);
}
.office--head{
  background:var(--ink); color:var(--paper);
  border-top:3px solid var(--signal);
}
.office--manc{
  border:1px solid var(--rule); border-top:3px solid var(--ink);
  color:var(--ink-text);
}
.office__tag{
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--signal);
}
.office--head .office__tag{ color:var(--signal-lit); }
.office__t{
  font-size:clamp(1.8rem,3vw,2.3rem); line-height:1;
  letter-spacing:-.02em; margin:.6rem 0 1.1rem;
}
.office__a{ font-size:.86rem; line-height:1.72; }
.office--head .office__a{ color:rgba(243,241,234,.72); }
.office--manc .office__a{ color:var(--ink-mute); }
.office__tel{
  margin-top:1.5rem;
  font-family:var(--font-display); font-size:1.42rem; line-height:1.2;
  letter-spacing:-.01em;
}
.office--head .office__tel{ color:var(--paper); }
.office__tel:hover{ color:var(--signal); }
.office--head .office__tel:hover{ color:var(--signal-lit); }
.office__mail{
  margin-top:.3rem;
  font-family:var(--font-mono); font-size:.63rem; letter-spacing:.01em;
  color:var(--signal-lit); overflow-wrap:anywhere;
}
.office__rule{
  display:block; height:1px; margin:1.4rem 0 1rem;
  background:rgba(243,241,234,.14);
}
.office--manc .office__rule{ background:var(--rule); }
.office__note{
  margin-top:auto;
  font-family:var(--font-mono); font-size:.48rem; line-height:1.6;
  letter-spacing:.08em; text-transform:uppercase;
  color:rgba(243,241,234,.42);
}
.office--manc .office__note{ color:var(--ink-mute); }

.contact__band{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
  padding-top:1.8rem;
  border-top:1px solid var(--rule);
}
.contact__band-k,.contact__cta-k{
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--signal); margin-bottom:.8rem;
}
.contact__list li{
  padding:.42rem 0;
  border-bottom:1px solid var(--rule);
  font-size:.8rem; line-height:1.5; color:var(--ink-mute);
}
.contact__big{
  display:inline-block; max-width:100%;
  font-family:var(--font-display); font-size:clamp(1.35rem,3vw,2.1rem);
  line-height:1.15; letter-spacing:-.02em;
  border-bottom:1px solid var(--ink);
  overflow-wrap:anywhere;
  transition:color .2s, border-color .2s;
}
.contact__big:hover{ color:var(--signal); border-color:var(--signal); }
.contact__cta-n{ margin-top:.7rem; font-size:.76rem; color:var(--ink-mute); }
.contact__cta-n a{ border-bottom:1px solid var(--rule); }
.contact__cta-n a:hover{ color:var(--signal); border-color:var(--signal); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ background:var(--ink); border-top:1px solid var(--line); }
.brand--foot{ margin-bottom:1.4rem; }
.brand--foot img{ height:42px; }
.foot__line{ max-width:34ch; font-size:.79rem; line-height:1.65; color:rgba(243,241,234,.52); }
.foot__addr{
  margin-top:1.1rem;
  font-family:var(--font-mono); font-size:.54rem; line-height:1.75;
  letter-spacing:.04em; color:rgba(243,241,234,.38);
}
.foot__nav li{ min-width:0; }
.foot__nav a{ overflow-wrap:anywhere; }
.foot__nav a:hover{ color:var(--signal-lit); }
.foot__bottom{ color:rgba(243,241,234,.35); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1023px){
  .brand img{ height:40px; }
  .brand__name{ font-size:.94rem; }
  .brand__sub{ font-size:.41rem; }
  .nav__link::after{ display:none; }
  .nav__link{ padding:1rem .1rem; font-size:1.02rem; font-weight:400; }
}

@media (max-width:900px){
  .hero__mast{
    grid-template-columns:minmax(0,1fr);
    padding-top:2rem;
  }
  .hero__eyebrow{ margin-bottom:1.4rem; }
  .hero__title{ grid-column:1; }
  .hero__sub{ grid-column:1; margin-top:1.6rem; padding-bottom:0; }
  .hero__lead{ max-width:48ch; }
  .hero__facts{ margin-top:1.8rem; }

  .through{ grid-template-columns:minmax(0,1fr); }
  .through__copy,
  .through--flip > .through__copy,
  .through__seam,
  .through > .figwrap,
  .through > .services__list,
  .through > .sectors__list,
  .through > .practice__side,
  .through--flip > .figwrap,
  .through--flip > .services__list,
  .through--flip > .sectors__list,
  .through--flip > .practice__side{
    grid-column:1; grid-row:auto;
  }
  .through__copy,
  .through--flip > .through__copy{
    padding-right:0; padding-left:0;
  }
  .through__seam{
    min-height:0; height:1px; margin:2.6rem 0 2rem;
  }
  .through__seam::before{ top:0; left:0; right:0; bottom:auto; width:auto; height:1px; }
  .through__seam::after{ display:none; }
  .through__seam span{
    top:-1.5rem; left:0;
    writing-mode:horizontal-tb;
  }
  .sect__lead{ margin-top:1.1rem; }

  .projects__head{ grid-template-columns:minmax(0,1fr); }
  .projects__head .sect__num,
  .projects__head .sect__h2,
  .projects__head .sect__lead{ grid-column:1; }
  .projects__head .sect__lead{ margin-top:.9rem; }

  .projects__grid{ grid-template-columns:minmax(0,1fr); }
  .projects__index{ margin-top:1.4rem; }

  .contact__head{ grid-template-columns:minmax(0,1fr); }
  .contact__head .sect__num,
  .contact__head .sect__h2,
  .contact__head .sect__lead{ grid-column:1; }
  .contact__head .sect__lead{ margin-top:.9rem; }

  .contact__band{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:760px){
  .rooms{ display:block; min-height:0; }
  .room{ min-height:0; padding:1.1rem 1.2rem 1.3rem; }
  .room__art{ width:100%; max-width:430px; }
  .wall{
    height:64px; grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .wall__tag{ display:none; }
  .delta{
    position:relative; left:auto; top:auto; transform:none;
    margin:-1.9rem auto;
    width:184px;
  }
  .delta__n{ font-size:1.55rem; }

  .hero__facts{ grid-template-columns:minmax(0,1fr); }
  .hero__facts li{
    border-right:0; border-bottom:1px solid var(--rule);
    padding:.8rem 0;
  }
  .hero__facts li:last-child{ border-bottom:0; }
  .hero__facts b{ font-size:1.05rem; }

  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps li{ padding:.9rem .9rem .9rem 0; border-bottom:1px solid var(--rule); }
  .steps li:nth-child(2n){ border-right:0; }

  .svc{ grid-template-columns:2rem minmax(0,1fr) 1.2rem; gap:.7rem; }
  .svc__t{ font-size:1.15rem; }

  .sectors__list li{ grid-template-columns:1.8rem minmax(0,1fr); gap:.35rem .8rem; }
  .sectors__d{ grid-column:2; }

  .projects__strip{ grid-template-columns:minmax(0,1fr); }
  .proj--offset{ margin-top:0; }

  .office{ min-height:0; }
  .contact__offices{ grid-template-columns:minmax(0,1fr); }

  .figwrap__legend{ gap:.35rem .8rem; }
  .figwrap__note{ margin-left:0; width:100%; }
  .monitor__foot{ flex-direction:column; }

  /* SVG text scales with the figure — raise it so it stays legible */
  .fig__label{ font-size:18px; }
  .fig__label--mid{ font-size:15px; }
  .fig__mono{ font-size:19px; }
  .fig__mono--s{ font-size:12px; }
  .fig__nums text{ font-size:13px; }
  .fig__delta-t{ font-size:30px; }
  .monitor__axis text{ font-size:18px; }
  .monitor__axis text.monitor__axis-y{ font-size:15px; }
  .monitor__limit-t{ display:none; }
}

@media (max-width:420px){
  .brand__sub{ display:none; }
  .brand__name{ font-size:.86rem; }
  .brand img{ height:36px; }
  .hero__h1{ letter-spacing:-.04em; }
}

@media (max-width:340px){
  .steps{ grid-template-columns:minmax(0,1fr); }
  .steps li{ border-right:0; }
}

/* ==========================================================================
   REDUCED MOTION — static, finished figures
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .fig__layer,
  .fig__rbar,
  .fig__delta-g,
  .fig__nums text{ animation:none !important; opacity:1; transform:none; }
  .proj__img img{ transition:none; }
  .hero__foot-r svg{ transition:none; }
}