/* ============================================================
   S&T — PREMIUM CONCEPT
   Drawing-set language, elevated. Depth, grain, choreography.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --paper:#FBFAF7;
  --paper-2:#F4F1EA;
  --paper-3:#EDE9E0;
  --ink:#14110F;
  --ink-2:#221D19;
  --ink-78:rgba(20,17,15,.78);
  --ink-64:rgba(20,17,15,.62);
  --ink-46:rgba(20,17,15,.595);   /* 4.77:1 on --paper, 4.65:1 on --paper-2,
                                   4.54:1 on --paper-3 — passes AA on every
                                   paper tone, not just the lightest. */
  --stamp:#A8301C;
  --stamp-lo:rgba(168,48,28,.10);
  --rule:rgba(20,17,15,.13);
  --rule-2:rgba(20,17,15,.07);
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --gut:clamp(20px,4.5vw,68px);
  --maxw:1360px;
}

html{-webkit-text-size-adjust:100%}
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--stamp);outline-offset:3px;border-radius:1px
}
.band :focus-visible,.cta :focus-visible,footer :focus-visible,.seqpin :focus-visible{
  outline-color:#E08C7A
}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--paper);
  padding:12px 18px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.skip:focus{left:8px;top:8px}
body{
  font-family:var(--sans);background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- paper texture ----------
   NOTE: this used to be a fixed full-viewport overlay. That repainted the whole
   viewport on every scroll frame and cost ~30fps. Painting the grain into the
   section backgrounds instead is visually equivalent and free. Measured. */
.papergrain,section,.hero,.marq,footer,.seqpin{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-repeat:repeat
}
.band,.cta,.seqpin,footer{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-blend-mode:overlay
}
.band{background-color:var(--ink)}
.cta{background-color:var(--ink)}
.seqpin{background-color:var(--ink)}
footer{background-color:var(--ink-2)}
.hero,section{background-color:transparent}
.marq{background-color:var(--paper-2)}

/* .vignette removed — a third full-viewport composited layer cost 30fps for an
   effect nobody could see. The edge falloff now rides on the section backgrounds. */
.vignette{display:none}
/* parallax blueprint grid — ONE composited layer.
   Measured: each additional full-viewport fixed layer halves the frame rate,
   so the three depth scales are stacked as background layers on a single
   element rather than three elements. Same look, 60fps instead of 30. */
.gridfield{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.gridfield i{
  position:absolute;top:-22vh;bottom:-22vh;left:-10vw;right:-10vw;display:block;
  will-change:transform;transform:translateZ(0);
  background-image:
    linear-gradient(rgba(168,48,28,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(168,48,28,.05) 1px,transparent 1px),
    linear-gradient(rgba(20,17,15,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,17,15,.055) 1px,transparent 1px),
    linear-gradient(rgba(20,17,15,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,17,15,.03) 1px,transparent 1px);
  background-size:352px 352px,352px 352px,88px 88px,88px 88px,22px 22px,22px 22px
}

/* ---------- cursor ---------- */
.cur{
  position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--ink);z-index:9999;pointer-events:none;
  transform:translate(-50%,-50%);mix-blend-mode:difference;
  transition:width .38s var(--ease),height .38s var(--ease),
             background .38s var(--ease),opacity .3s;
  opacity:0;filter:invert(1)
}
.cur.on{opacity:.85}
.cur.grow{width:78px;height:78px;background:rgba(255,255,255,.14)}
.curdot{
  position:fixed;top:0;left:0;width:4px;height:4px;border-radius:50%;
  background:var(--stamp);z-index:9999;pointer-events:none;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .3s
}
.curdot.on{opacity:1}
@media (hover:none),(pointer:coarse){.cur,.curdot{display:none}}

/* ---------- shell ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);position:relative;z-index:2}
section{position:relative;z-index:2;contain:paint;padding:clamp(84px,11vw,170px) 0;border-top:1px solid var(--rule)}
section.tight{padding:clamp(60px,7.5vw,108px) 0}
section.flush{border-top:none}

.mocknote{
  position:relative;z-index:60;background:var(--stamp);color:#fff;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;text-align:center;padding:8px 12px
}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;background:rgba(251,250,247,.82);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--rule);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .4s
}
header.hide{transform:translateY(-101%)}
header.solid{box-shadow:0 1px 0 var(--rule),0 18px 44px -30px rgba(20,17,15,.5)}
.bar{max-width:var(--maxw);margin:0 auto;padding:13px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,1.8vw,24px)}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;min-width:0;overflow:hidden}
.brand>span{min-width:0;overflow:hidden}
.brand{flex:0 1 auto;max-width:min(360px,34vw)}
.brand img{height:40px;width:auto;display:block;flex:none;transition:transform .6s var(--ease)}
.brand:hover img{transform:rotate(-7deg) scale(1.06)}
.bn{display:block;font-family:var(--serif);font-size:1.32rem;line-height:1;letter-spacing:.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs{display:block;font-family:var(--mono);font-size:.575rem;letter-spacing:.235em;text-transform:uppercase;
  color:var(--ink-46);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px)}
nav a{
  font-size:clamp(.82rem,.92vw,.905rem);color:var(--ink-78);text-decoration:none;position:relative;
  padding:5px 0;transition:color .3s;white-space:nowrap
}
nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--stamp);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)
}
nav a:hover{color:var(--ink)}
nav a:hover::after{transform:scaleX(1);transform-origin:left}
nav a[aria-current]{color:var(--ink)}
nav a[aria-current]::after{transform:scaleX(1)}
.tel{
  font-family:var(--mono);font-size:.85rem;letter-spacing:.02em;text-decoration:none;
  color:var(--ink);border:1px solid var(--ink);padding:11px 19px;white-space:nowrap;
  display:flex;align-items:center;gap:9px;min-height:44px;position:relative;overflow:hidden;flex:none;
  transition:color .45s var(--ease)
}
.tel span.fill{position:absolute;inset:0;background:var(--ink);transform:translateY(101%);
  transition:transform .55s var(--ease);z-index:0}
.tel:hover{color:var(--paper)}
.tel:hover span.fill{transform:translateY(0)}
.tel b,.tel .dot{position:relative;z-index:1}
.tel .dot{width:6px;height:6px;border-radius:50%;background:var(--stamp);flex:none;
  animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
.mb{display:none;background:none;border:1px solid var(--rule);width:46px;height:46px;flex:none;
  cursor:pointer;position:relative}
.mb i{position:absolute;left:13px;right:13px;height:1.5px;background:var(--ink);
  transition:transform .45s var(--ease),opacity .3s}
.mb i:nth-child(1){top:17px}.mb i:nth-child(2){top:23px}.mb i:nth-child(3){top:29px}
.mb[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mb[aria-expanded="true"] i:nth-child(2){opacity:0}
.mb[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- typography ---------- */
h1{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.7rem,7.3vw,6.5rem);line-height:.95;letter-spacing:-.019em}
h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,4.6vw,3.9rem);line-height:1.03;letter-spacing:-.014em}
h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.16}
em{font-style:italic;color:var(--stamp)}
.band em,.cta em,.photoband em,.seqpin em,.trackpin em,footer em,
.ck em,.proof em,.heroMedia em,.fig em{color:#E08C7A}
p{max-width:66ch}
.lede{font-size:clamp(1.06rem,1.55vw,1.31rem);line-height:1.55;color:var(--ink-78);max-width:56ch}
.eyebrow{
  font-family:var(--mono);font-size:.685rem;letter-spacing:.235em;text-transform:uppercase;
  color:var(--ink-46);display:flex;align-items:center;gap:13px;margin-bottom:26px;
  white-space:nowrap;flex-wrap:nowrap;min-width:0
}
.eyebrow>span:not(.no):not(.spec){min-width:0;overflow:hidden;text-overflow:ellipsis}
.eyebrow .spec{flex:none}
.eyebrow .no{color:var(--stamp)}
.band .eyebrow .no,.cta .eyebrow .no,.seqpin .eyebrow .no,
.trackpin .eyebrow .no,footer .eyebrow .no{color:#E08C7A}
.eyebrow::after{content:'';flex:1;height:1px;background:var(--rule);max-width:190px}

/* mask reveal for display type */
/* The mask clips the reveal. Its box must still leave room for descenders —
   the italic 'g' in "No gate." was being sheared off. Pad the box down and
   pull it back with a negative margin so vertical rhythm is unchanged, then
   push the start position past the taller box so nothing peeks at rest. */
.mask{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.mask>span{display:block;transform:translateY(125%);opacity:0;
  transition:transform 1.05s var(--ease),opacity .8s var(--ease)}
.in .mask>span,.mask.in>span{transform:translateY(0);opacity:1}
.mask:nth-child(2)>span{transition-delay:.09s}
.mask:nth-child(3)>span{transition-delay:.18s}
.mask:nth-child(4)>span{transition-delay:.27s}

/* generic reveal */
.rv{opacity:0;transform:translateY(30px);
  transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.1s}
.rv[data-d="2"]{transition-delay:.2s}
.rv[data-d="3"]{transition-delay:.3s}
.rv[data-d="4"]{transition-delay:.4s}
.rv[data-d="5"]{transition-delay:.5s}

/* line-draw SVG */
.draw path,.draw line,.draw rect,.draw circle,.draw polyline{
  stroke-dasharray:var(--L);stroke-dashoffset:var(--L);
  transition:stroke-dashoffset 1.9s var(--ease-io)
}
.draw.in path,.draw.in line,.draw.in rect,.draw.in circle,.draw.in polyline{stroke-dashoffset:0}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(56px,8vw,104px) 0 0;overflow:hidden}
.sheetno{
  position:absolute;top:clamp(14px,2.2vw,22px);right:var(--gut);text-align:right;
  font-family:var(--mono);font-size:.635rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-46);line-height:1.85;z-index:3
}
.heroGrid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4.5vw,72px);
  align-items:end;padding-bottom:clamp(40px,6vw,80px)}
.heroArt{position:relative;min-height:290px;align-self:end}
.stamp{
  position:absolute;right:-8px;top:-14px;z-index:6;transform:rotate(-8.5deg);
  border:2px solid var(--stamp);color:var(--stamp);padding:9px 15px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  line-height:1.45;text-align:center;background:rgba(251,250,247,.93);
  box-shadow:0 10px 30px -18px rgba(168,48,28,.7)
}
.scrollcue{
  display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-46);
  padding:0 0 22px
}
.scrollcue i{display:block;width:52px;height:1px;background:var(--rule);position:relative;overflow:hidden}
.scrollcue i::after{content:'';position:absolute;inset:0;background:var(--stamp);
  transform:translateX(-100%);animation:cue 2.6s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* ---------- paths ---------- */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.path{
  padding:clamp(26px,3vw,40px) clamp(20px,2vw,30px) clamp(26px,3vw,36px);
  border-right:1px solid var(--rule);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;position:relative;overflow:hidden;isolation:isolate;
  transition:color .5s var(--ease)
}
.path:last-child{border-right:none}
.path::before{
  content:'';position:absolute;inset:0;background:var(--ink);z-index:-1;
  transform:translateY(100%);transition:transform .68s var(--ease)
}
.path:hover{color:var(--paper)}
.path:hover::before{transform:translateY(0)}
.path:hover .tag{color:#E08C7A}
.path:hover p{color:rgba(251,250,247,.76)}
.path:hover .go{color:var(--paper);border-bottom-color:#E08C7A}
.path:hover .pnum{color:rgba(251,250,247,.14)}
.pnum{
  position:absolute;right:14px;top:6px;font-family:var(--serif);font-size:5.4rem;
  line-height:1;color:rgba(20,17,15,.055);z-index:-1;transition:color .5s var(--ease)
}
.tag{font-family:var(--mono);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stamp);margin-bottom:15px;transition:color .5s var(--ease)}
.path h3{margin-bottom:11px}
.path p{color:var(--ink-64);font-size:.925rem;margin-bottom:20px;flex:1;transition:color .5s var(--ease)}
.go{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  border-bottom:1px solid var(--stamp);padding-bottom:3px;align-self:flex-start;
  transition:color .5s var(--ease),border-color .5s var(--ease)}
.go::after{content:' →'}

/* ---------- pinned build sequence (signature) ---------- */
.seqwrap{position:relative;height:520vh;border-top:1px solid var(--rule)}
.seqpin{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;color:var(--paper)
}
.seqpin .wrap{width:100%}
.seqhead{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
  margin-bottom:clamp(20px,3.4vh,40px)}
.seqhead .eyebrow{color:rgba(251,250,247,.62);margin:0}
.seqhead .eyebrow::after{background:rgba(251,250,247,.2)}
.seqcount{font-family:var(--mono);font-size:.8rem;letter-spacing:.18em;color:rgba(251,250,247,.6);
  display:flex;align-items:baseline;gap:6px}
.seqcount b{color:var(--paper);font-family:var(--serif);font-size:2.5rem;line-height:1;font-weight:400;letter-spacing:-.02em}
.seqstage{position:relative;width:100%;aspect-ratio:16/6.1;max-height:53vh;margin:0 auto}
.seqstage svg{position:absolute;inset:0;width:100%;height:100%}
.seqstage svg>g{opacity:0;transition:opacity .6s var(--ease)}
.seqstage svg>g.on{opacity:1}
.seqlabels{margin-top:clamp(18px,3vh,34px);display:grid;
  grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid rgba(251,250,247,.22)}
.sl{padding:15px 14px 0 0;border-right:1px solid rgba(251,250,247,.13);position:relative}
.sl:last-child{border-right:none}
.sl::before{content:'';position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--stamp);
  transition:width .6s var(--ease)}
.sl.on::before{width:100%}
.sl .n{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;
  color:rgba(251,250,247,.52);display:block;margin-bottom:6px;transition:color .45s}
.sl .t{display:block;font-family:var(--serif);font-size:clamp(.98rem,1.5vw,1.32rem);line-height:1.15;
  color:rgba(251,250,247,.6);transition:color .45s var(--ease)}
.sl .d{display:block;font-size:.79rem;line-height:1.5;color:rgba(251,250,247,.56);margin-top:7px;
  transition:color .45s var(--ease);max-width:24ch}
.sl.on .n{color:#E08C7A}
.sl.on .t{color:var(--paper)}
.sl.on .d{color:rgba(251,250,247,.66)}
.seqbar{position:absolute;left:0;bottom:0;height:3px;background:var(--stamp);width:0;z-index:4;
  box-shadow:0 0 18px 1px rgba(168,48,28,.75)}

/* ---------- split ---------- */
.two{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(26px,4.6vw,88px);align-items:start}
.two p+p{margin-top:18px}

/* ---------- index table ---------- */
.index{width:100%;border-collapse:collapse;margin-top:26px}
.index th{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-46);text-align:left;padding:0 14px 10px 0;border-bottom:1px solid var(--ink);font-weight:500
}
.index td{padding:15px 14px 15px 0;border-bottom:1px solid var(--rule);vertical-align:top;font-size:.92rem}
.index tr{transition:background .35s}
.index tbody tr:hover{background:var(--paper-2)}
.index .n{font-family:var(--mono);color:var(--stamp);width:52px;font-size:.79rem;font-variant-numeric:tabular-nums}
.index .t{font-weight:600;width:24%}
.index .d{color:var(--ink-64)}
.index .who{font-family:var(--mono);font-size:.71rem;color:var(--ink-46);
  text-transform:uppercase;letter-spacing:.09em;width:15%;text-align:right}

/* ---------- band ---------- */
.band{color:var(--paper);border-top:none;position:relative;overflow:hidden}
.band .eyebrow{color:rgba(251,250,247,.62)}
.band .eyebrow::after{background:rgba(251,250,247,.2)}
.band h2{color:var(--paper);max-width:22ch}
.band .lede{color:rgba(251,250,247,.78)}
.band::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(251,250,247,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(251,250,247,.045) 1px,transparent 1px);
  background-size:88px 88px
}
.proofs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:50px;
  border-top:1px solid rgba(251,250,247,.24);position:relative;z-index:2}
.proof{padding:26px 26px 0 0;border-right:1px solid rgba(251,250,247,.14);position:relative}
.proof:last-child{border-right:none}
.proof:not(:first-child){padding-left:26px}
.proof .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:#E08C7A;display:block;margin-bottom:12px}
.proof strong{display:block;font-family:var(--serif);font-weight:400;font-size:1.42rem;margin-bottom:9px}
.proof p{color:rgba(251,250,247,.7);font-size:.9rem}

/* ---------- family ---------- */
.fam{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:40px}
.fam>div{background:var(--paper);padding:24px 22px;transition:background .45s var(--ease),transform .45s var(--ease)}
.fam>div:hover{background:var(--paper-2)}
.fam .nm{font-family:var(--serif);font-size:1.2rem;margin-bottom:5px}
.fam .role{font-family:var(--mono);font-size:.615rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--stamp);margin-bottom:11px}
.fam p{font-size:.86rem;color:var(--ink-64);margin:0}

/* ---------- tool ---------- */
.tool{border:1px solid var(--ink);background:var(--paper);margin-top:42px;
  box-shadow:0 30px 70px -50px rgba(20,17,15,.85)}
.toolhd{border-bottom:1px solid var(--ink);padding:17px 24px;display:flex;
  justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:var(--paper-2)}
.toolhd .t{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  font-family:var(--mono);font-size:.665rem;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--rule);background:transparent;padding:8px 13px;cursor:pointer;
  color:var(--ink-64);transition:all .3s var(--ease);min-height:44px;
  display:inline-flex;align-items:center
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.toolbd{padding:26px 24px 30px}
.seq{list-style:none;counter-reset:s}
.seq li{
  counter-increment:s;display:grid;grid-template-columns:44px 1fr auto;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--rule-2);align-items:baseline;
  opacity:0;transform:translateX(-9px);
  animation:stepin .5s var(--ease) forwards
}
@keyframes stepin{to{opacity:1;transform:none}}
.seq li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);
  font-size:.75rem;color:var(--stamp);font-variant-numeric:tabular-nums}
.seq li b{font-weight:600;font-size:.94rem}
.seq li i{font-style:normal;color:var(--ink-64);font-size:.83rem;display:block;margin-top:2px}
.seq li .who{font-family:var(--mono);font-size:.655rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-46);white-space:nowrap}
.note{font-family:var(--mono);font-size:.7rem;color:var(--ink-64);line-height:1.75;
  margin-top:20px;padding:13px 16px;background:var(--paper-2);border-left:2px solid var(--stamp)}

/* ---------- marquee ---------- */
.marq{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:20px 0}
.marqin{display:flex;gap:0;width:max-content;animation:mv 38s linear infinite}
.marq:hover .marqin{animation-play-state:paused}
@keyframes mv{to{transform:translateX(-50%)}}
.marqin span{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.5rem);
  padding:0 clamp(20px,3vw,44px);white-space:nowrap;color:var(--ink-46);display:flex;
  align-items:center;gap:clamp(20px,3vw,44px)}
.marqin span::after{content:'';width:7px;height:7px;background:var(--stamp);
  border-radius:50%;flex:none;opacity:.55}

/* ---------- counters ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:46px;
  border-top:1px solid var(--ink)}
.stat{padding:24px 20px 0 0;border-right:1px solid var(--rule)}
.stat:last-child{border-right:none}
.stat:not(:first-child){padding-left:20px}
.stat .v{font-family:var(--serif);font-size:clamp(2.1rem,4vw,3.3rem);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .v small{font-size:.42em;color:var(--stamp);vertical-align:super;margin-left:2px}
.stat .l{font-family:var(--mono);font-size:.635rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-46);margin-top:10px;line-height:1.6}

/* ---------- CTA ---------- */
.cta{color:var(--paper);border-top:none;position:relative;overflow:hidden}
.cta::before{
  content:'';position:absolute;width:150%;aspect-ratio:1;left:-25%;top:-40%;
  background:radial-gradient(circle,rgba(168,48,28,.24),transparent 62%);
  pointer-events:none
}
.cta .eyebrow{color:rgba(251,250,247,.62)}
.cta .eyebrow::after{background:rgba(251,250,247,.2)}
.cta h2{color:var(--paper)}
.cta .lede{color:rgba(251,250,247,.78)}
.ctaGrid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,80px);
  align-items:start;position:relative;z-index:2}
.btnrow{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px}
.btn{
  font-family:var(--mono);font-size:.755rem;letter-spacing:.15em;text-transform:uppercase;
  padding:17px 28px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;
  min-height:52px;position:relative;overflow:hidden;isolation:isolate;
  background:var(--paper);color:var(--ink);border:1px solid var(--paper);
  transition:color .5s var(--ease)
}
.btn::before{content:'';position:absolute;inset:0;background:var(--stamp);z-index:-1;
  transform:translateY(101%);transition:transform .58s var(--ease)}
.btn:hover{color:#fff;border-color:var(--stamp)}
.btn:hover::before{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--paper);border-color:rgba(251,250,247,.36)}
.btn.ghost::before{background:var(--paper)}
.btn.ghost:hover{color:var(--ink);border-color:var(--paper)}
.areas{font-family:var(--mono);font-size:.79rem;line-height:2.1;color:rgba(251,250,247,.74)}
.areas b{color:var(--paper);font-weight:500}

/* ---------- footer ---------- */
footer{color:rgba(251,250,247,.62);
  padding:clamp(56px,7vw,86px) 0 34px;position:relative;overflow:hidden}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
footer h4{font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(251,250,247,.6);margin-bottom:16px;font-weight:500}
footer a{color:rgba(251,250,247,.72);text-decoration:none;display:flex;align-items:center;
  min-height:38px;padding:4px 0;font-size:.885rem;
  transition:color .3s,transform .4s var(--ease)}
footer a:hover{color:var(--paper);transform:translateX(4px)}
.fbrand{font-family:var(--serif);font-size:1.6rem;color:var(--paper);margin-bottom:12px}
.fnap{font-size:.87rem;line-height:1.95}
.fbot{margin-top:44px;padding-top:22px;border-top:1px solid rgba(251,250,247,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.645rem;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(251,250,247,.5)}
.fwm{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-4.2vw;
  font-family:var(--serif);font-size:19vw;line-height:.8;color:rgba(251,250,247,.037);
  white-space:nowrap;pointer-events:none;user-select:none
}

/* ---------- misc ---------- */
.disclose,.pending{
  font-family:var(--mono);font-size:.71rem;line-height:1.8;color:var(--ink-64);
  padding:14px 17px;background:var(--paper-2);border-left:2px solid var(--ink);margin-top:24px
}
.band .disclose{background:rgba(251,250,247,.07);border-left-color:#E08C7A;
  color:rgba(251,250,247,.66);position:relative;z-index:2}
.artcap{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-46);margin:12px 0 0;text-align:right}

/* progress rail */
.prog{position:fixed;top:0;left:0;height:2px;background:var(--stamp);z-index:60;width:0}

/* ---------- responsive ---------- */
@media (max-width:1160px){
  .brand{max-width:none}
  .heroGrid{grid-template-columns:1fr;align-items:start}
  .heroArt{min-height:230px;max-width:520px}
  .fgrid{grid-template-columns:1fr 1fr}
  .paths{grid-template-columns:1fr 1fr}
  .path:nth-child(2){border-right:none}
  .path:nth-child(3){border-top:1px solid var(--rule)}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(n+3){border-top:1px solid var(--rule);padding-top:24px}
}
@media (max-width:1200px){
  nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--paper);border-bottom:1px solid var(--ink);
    padding:6px var(--gut) 22px;gap:0;
    max-height:calc(100vh - var(--hdrb,116px));overflow:auto;-webkit-overflow-scrolling:touch;
    box-shadow:0 26px 50px -34px rgba(20,17,15,.55);
    transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .5s var(--ease),opacity .32s var(--ease),visibility 0s linear .5s}
  nav.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;
    transition:transform .5s var(--ease),opacity .32s var(--ease),visibility 0s}
  header.navopen{background:var(--paper)}
  nav a{padding:15px 0;border-bottom:1px solid var(--rule-2);font-size:1.02rem}
  nav a::after{display:none}
  .mb{display:block}
  .two{grid-template-columns:1fr}
  .ctaGrid{grid-template-columns:1fr}
  .proofs{grid-template-columns:1fr}
  .proof{border-right:none;border-bottom:1px solid rgba(251,250,247,.14);padding:22px 0}
  .proof:not(:first-child){padding-left:0}
  .proof:last-child{border-bottom:none}
  .fam{grid-template-columns:1fr}
  .index .who{display:none}
  .index .t{width:34%}
  .seqwrap{height:auto}
  .seqpin{position:static;height:auto;padding:clamp(56px,9vw,90px) 0}
  .seqstage{aspect-ratio:16/8;max-height:none}
  .seqlabels{grid-template-columns:1fr}
  .sl{border-right:none;border-bottom:1px solid rgba(251,250,247,.13);padding:15px 0}
  .sl:last-child{border-bottom:none}
  .sl .d{max-width:none}
}
@media (max-width:760px){
  .bar{gap:10px;padding:11px var(--gut)}
  .bs{display:none}
  .bn{font-size:1.06rem}
  .brand img{height:34px}
  .tel{padding:10px 13px;font-size:.76rem;gap:7px}
}
@media (max-width:430px){
  .bn{display:block;font-size:.95rem;letter-spacing:0}
  .brand img{height:34px}
  .tel b{display:none}
  .tel{padding:12px 14px;min-width:46px;justify-content:center}
  .tel::after{content:'CALL';font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;position:relative;z-index:1}
}
@media (max-width:760px){
  footer a{min-height:44px}
  .brand{min-height:44px}
  .eyebrow{white-space:normal;flex-wrap:wrap}
  .eyebrow::after{display:none}
}
@media (max-width:620px){
  .paths{grid-template-columns:1fr}
  .path{border-right:none;border-top:1px solid var(--rule)}
  .path:first-child{border-top:none}
  .stats{grid-template-columns:1fr}
  .stat{border-right:none;border-top:1px solid var(--rule);padding:22px 0 0}
  .stat:first-child{border-top:none}
  .stat:not(:first-child){padding-left:0}
  .fgrid{grid-template-columns:1fr}
  .sheetno{position:static;text-align:left;margin-bottom:22px}
  .seq li{grid-template-columns:34px 1fr}
  .seq li .who{grid-column:2;margin-top:3px}
  .fwm{font-size:26vw;bottom:-5vw}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv,.mask>span{opacity:1!important;transform:none!important}
  .draw path,.draw line,.draw rect,.draw circle,.draw polyline{stroke-dashoffset:0!important}
  
  .seqwrap{height:auto}
  .seqpin{position:static;height:auto;padding:80px 0}
  .seqstage svg g{opacity:1}
  .sl .t{color:var(--paper)}.sl .d{color:rgba(251,250,247,.66)}
}

/* ============================================================
   IMAGERY LAYER
   Photography sits under the drawing-set language, never over it.
   Every image has a code-drawn fallback beneath, so a failed load
   degrades to the original texture instead of an empty box.
   ============================================================ */

/* --- hero media --- */
.heroMedia{
  position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;
  border:1px solid var(--ink);background:var(--ink);
  box-shadow:0 40px 90px -60px rgba(20,17,15,.9)
}
.heroMedia video,.heroMedia img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.04);
  opacity:0;transition:opacity 1.4s var(--ease)
}
.heroMedia.ready video,.heroMedia.ready img{opacity:1}
.heroMedia::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(20,17,15,.62) 0%,rgba(20,17,15,.12) 42%,transparent 72%),
    linear-gradient(to right,rgba(20,17,15,.34) 0%,transparent 46%)
}
.heroMedia .mgrid{
  position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.5;
  background-image:linear-gradient(rgba(251,250,247,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(251,250,247,.10) 1px,transparent 1px);
  background-size:88px 88px
}
.heroMedia .mcap{
  position:absolute;left:20px;bottom:16px;z-index:3;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(251,250,247,.9);text-shadow:0 1px 14px rgba(20,17,15,.9);
  display:flex;align-items:center;gap:10px
}
.heroMedia .mcap i{display:block;width:22px;height:1px;background:var(--stamp)}
.heroMedia .mtag{
  position:absolute;right:14px;bottom:14px;z-index:3;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(251,250,247,.72);border:1px solid rgba(251,250,247,.34);padding:5px 9px;
  background:rgba(20,17,15,.34);backdrop-filter:blur(4px)
}

/* --- figure blocks used through the body --- */
.fig{position:relative;overflow:hidden;border:1px solid var(--rule);background:var(--ink-2);
  box-shadow:0 26px 60px -50px rgba(20,17,15,.85)}
.fig img{display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.84) contrast(1.03);opacity:0;transition:opacity 1.1s var(--ease),transform 1.6s var(--ease);
  transform:scale(1.04)}
.fig.ready img{opacity:1;transform:scale(1)}
.fig figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(251,250,247,.92);
  background:linear-gradient(to top,rgba(20,17,15,.86),transparent)
}
.fig.tall{aspect-ratio:3/4}
.fig.wide{aspect-ratio:3/2}
.fig.sq{aspect-ratio:1/1}
.fig.pano{aspect-ratio:21/8}

/* image behind the path cards */
.path{background-size:cover;background-position:center}
.path .pbg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.path .pbg img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.6) contrast(1.05) brightness(.92);
  opacity:0;transition:opacity 1s var(--ease),transform 1.1s var(--ease);transform:scale(1.06)}
.path.ready .pbg img{opacity:.14}
.path:hover .pbg img{opacity:.34;transform:scale(1)}

/* full-bleed band with a photographic backdrop */
.photoband{position:relative;overflow:hidden;color:var(--paper);border-top:none}
.photoband>.pbimg{position:absolute;inset:0;z-index:0}
.photoband>.pbimg img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.55) contrast(1.08);opacity:0;transition:opacity 1.4s var(--ease)}
.photoband.ready>.pbimg img{opacity:.30}
.photoband::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right,rgba(20,17,15,.95) 0%,rgba(20,17,15,.82) 48%,rgba(20,17,15,.62) 100%)
}
.photoband>.wrap{position:relative;z-index:2}
.photoband .eyebrow{color:rgba(251,250,247,.62)}
.photoband .eyebrow .no{color:#E08C7A}
.photoband .eyebrow::after{background:rgba(251,250,247,.2)}
.photoband h2{color:var(--paper)}
.photoband .lede{color:rgba(251,250,247,.82)}

/* blueprint plate */
.plate{position:relative;border:1px solid var(--ink);overflow:hidden;background:#0d2436;
  box-shadow:0 34px 74px -54px rgba(20,17,15,.9)}
.plate img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  opacity:0;transition:opacity 1.2s var(--ease)}
.plate.ready img{opacity:1}
.plate .plabel{
  position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.32);padding:5px 9px;background:rgba(0,0,0,.28)
}

/* two-up gallery */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:38px}
.gal3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
@media (max-width:860px){
  .gal,.gal3{grid-template-columns:1fr}
  .heroMedia{aspect-ratio:16/10}
  .fig.pano{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){
  .fig img,.heroMedia video,.heroMedia img,.photoband>.pbimg img,.plate img{
    opacity:1!important;transform:none!important}
  .path.ready .pbg img{opacity:.14!important}
}

/* hero: line drawing overlaps the footage — drawing set over reality */
.heroStack{position:relative}
.heroStack .heroMedia{width:100%}
.heroStack .overlay{
  position:absolute;left:-4%;bottom:-16%;width:62%;z-index:4;
  background:var(--paper);border:1px solid var(--ink);padding:14px 14px 10px;
  box-shadow:0 28px 60px -34px rgba(20,17,15,.85)
}
.heroStack .overlay svg{display:block;width:100%;height:auto}
.heroStack .overlay .ocap{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-46);margin-top:8px;display:flex;justify-content:space-between;gap:10px
}
@media (max-width:1160px){
  .heroStack .overlay{position:static;width:100%;margin-top:14px;box-shadow:none}
}

/* ============================================================
   MOBILE COMPOSITION FIXES  (audited at 390px, 2026-08-09)
   Each rule here was written against an observed defect in a
   rendered frame, not against a guess about small screens.
   ============================================================ */
@media (max-width:620px){
  /* 1. the drawing titleblock stacked ABOVE the headline on mobile and read
        as noise before the message. Send it below the hero instead. */
  .hero>.wrap{display:flex;flex-direction:column}
  .hero>.wrap .sheetno{order:2;margin:30px 0 0;padding-top:16px;
    border-top:1px solid var(--rule-2);line-height:2}
  .hero>.wrap .heroGrid{order:1}

  /* 2. the media caption and the loop tag were both pinned to the bottom
        of the hero video and overlapped at this width. Split them. */
  .heroMedia .mcap{left:14px;bottom:12px;font-size:.575rem;letter-spacing:.13em;gap:7px}
  .heroMedia .mcap i{width:14px}
  .heroMedia .mtag{top:12px;bottom:auto;right:12px;font-size:.53rem;letter-spacing:.12em}

  /* 3. the rotated stamp hung outside the container and was clipped. */
  .stamp{right:6px;top:-10px;font-size:.55rem;letter-spacing:.12em;padding:7px 11px}

  /* 4. the oversized path letter was cropped by the card edge. */
  .pnum{font-size:3.6rem;right:16px;top:10px}
}
@media (max-width:430px){
  .heroMedia .mtag{display:none}          /* no room for both at this width */
  .stamp{font-size:.5rem;padding:6px 9px;right:4px}
}

/* The restaurant proof section left a ~560px void under the headline while the
   right column carried everything. Drop the counters into that column and pin
   them to the bottom so the two columns end on the same line. */
@media (min-width:861px){
  /* .two is align-items:start, so the column would not stretch and the counters
     could not be pushed down. Stretch this one section only. */
  #restaurant .two{align-items:stretch}
  #restaurant .two>div:first-child{display:flex;flex-direction:column}
  #restaurant .stats{margin-top:auto}
  /* four counters in the narrower column wrapped their labels to three lines */
  #restaurant .stats{grid-template-columns:1fr 1fr}
  #restaurant .stat{border-right:1px solid var(--rule);padding:24px 20px 22px 0}
  #restaurant .stat:nth-child(2n){border-right:none;padding-left:22px}
  #restaurant .stat:nth-child(2n+1){padding-left:0}
  #restaurant .stat:nth-child(n+3){border-top:1px solid var(--rule)}
}

/* ============================================================
   INTERIOR PAGE COMPONENTS — extends premium-css.css
   ============================================================ */

.crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-46);margin:0 0 28px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.crumb a{text-decoration:none;color:var(--ink-46);border-bottom:1px solid var(--rule);
  transition:color .3s,border-color .3s}
.crumb a:hover{color:var(--ink);border-bottom-color:var(--stamp)}
/* breadcrumb links measured 19px tall — too small to hit reliably on touch.
   Pad the hit area vertically and pull the block back so rhythm is unchanged. */
.crumb a{display:inline-block;padding:11px 0;margin:-11px 0}
.crumb i{font-style:normal;opacity:.4}

/* the AEO answer block — the paragraph an AI engine lifts */
.answer{
  border:1px solid var(--ink);background:var(--paper-2);padding:30px 32px 26px;position:relative;
  box-shadow:0 30px 60px -52px rgba(20,17,15,.9)
}
.answer::before{
  content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--stamp)
}
.answer p{font-size:clamp(1rem,1.35vw,1.1rem);line-height:1.66;margin:0;color:var(--ink-78);max-width:none}
.answer strong{color:var(--ink);font-weight:600}

.artcap{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-46);margin:12px 0 0;text-align:right}

/* ---------- FAQ ---------- */
.faq{margin-top:44px;border-top:1px solid var(--ink)}
.qa{border-bottom:1px solid var(--rule)}
.qa summary{
  list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline;
  transition:color .3s
}
.qa summary::-webkit-details-marker{display:none}
.qa summary .qn{font-family:var(--mono);font-size:.7rem;color:var(--stamp);
  font-variant-numeric:tabular-nums;padding-top:5px}
.qa summary h3{font-size:clamp(1.08rem,1.6vw,1.34rem);max-width:34ch}
.qa summary::after{
  content:'';position:absolute;right:6px;top:34px;width:13px;height:13px;
  border-right:1.5px solid var(--ink-64);border-bottom:1.5px solid var(--ink-64);
  transform:rotate(45deg);transition:transform .5s var(--ease),border-color .3s
}
.qa[open] summary::after{transform:rotate(-135deg);border-color:var(--stamp)}
.qa summary:hover h3{color:var(--stamp)}
.qa .ans{padding:0 46px 26px 0;margin-left:calc(2ch + 20px)}
.qa .ans p{color:var(--ink-78);font-size:.985rem;max-width:70ch}
.qa[open] .ans{animation:ansin .55s var(--ease)}
@keyframes ansin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- checklist grid ---------- */
.checkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;
  border-top:1px solid rgba(251,250,247,.26);position:relative;z-index:2}
.ck{padding:26px 26px 26px 0;border-right:1px solid rgba(251,250,247,.14)}
.ck:last-child{border-right:none;padding-right:0}
.ck:not(:first-child){padding-left:26px}
.ck .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  color:#E08C7A;display:block;margin-bottom:15px}
.ck ul{list-style:none;margin:0;padding:0}
.ck li{font-size:.915rem;line-height:1.55;color:rgba(251,250,247,.82);
  padding:8px 0 8px 16px;position:relative;border-bottom:1px solid rgba(251,250,247,.12)}
.ck li:last-child{border-bottom:none}
.ck li::before{content:'';position:absolute;left:0;top:15px;width:6px;height:1px;background:#E08C7A}

/* ---------- pinned parallel review tracks (restaurant signature) ---------- */
.trackwrap{position:relative;height:460vh}
.trackpin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;color:var(--paper);background-color:var(--ink)}
.trackpin .wrap{width:100%}
.trkhead{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;
  margin-bottom:clamp(18px,3vh,34px);flex-wrap:wrap}
.trkhead .eyebrow{color:rgba(251,250,247,.62);margin:0}
.trkhead .eyebrow::after{background:rgba(251,250,247,.2)}
.trkwk{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:rgba(251,250,247,.6);
  display:flex;align-items:baseline;gap:8px}
.trkwk b{font-family:var(--serif);font-size:2.2rem;line-height:1;color:var(--paper);font-weight:400}
.trackgrid{border-top:1px solid rgba(251,250,247,.26);position:relative}
.trk{display:grid;grid-template-columns:minmax(150px,15%) 1fr;gap:20px;align-items:center;
  padding:14px 0;border-bottom:1px solid rgba(251,250,247,.11)}
.trk .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(251,250,247,.62);transition:color .45s var(--ease)}
.trk.live .lbl{color:#E08C7A}
.trk.done .lbl{color:rgba(251,250,247,.86)}
.tlbars{position:relative;height:32px}
.tlbar{
  position:absolute;top:5px;height:22px;border:1px solid rgba(251,250,247,.34);
  overflow:hidden;display:flex;align-items:center;padding:0 10px;
  transition:border-color .45s var(--ease),opacity .45s
}
.tlbar span.f{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(251,250,247,.13);
  transition:width .18s linear}
.tlbar em{position:relative;font-style:normal;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(251,250,247,.72);white-space:nowrap;
  transition:color .45s}
.tlbar.live{border-color:var(--stamp)}
.tlbar.live span.f{background:rgba(168,48,28,.34)}
.tlbar.live em{color:var(--paper)}
.tlbar.done{border-color:rgba(251,250,247,.55)}
.tlbar.done span.f{background:rgba(251,250,247,.16)}
.trkaxis{display:grid;margin-top:12px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.1em;color:rgba(251,250,247,.6);border-top:1px solid rgba(251,250,247,.13);
  padding-top:8px}
.trkaxis span{border-left:1px solid rgba(251,250,247,.13);padding-left:7px}
.trkaxis span:first-child{border-left:none;padding-left:0}
.trknow{position:absolute;top:0;bottom:0;width:1px;background:var(--stamp);z-index:3;
  box-shadow:0 0 14px 1px rgba(168,48,28,.9)}
.trknote{margin-top:clamp(16px,2.6vh,28px);font-family:var(--mono);font-size:.74rem;
  line-height:1.75;color:rgba(251,250,247,.66);border-left:2px solid var(--stamp);
  padding:12px 16px;background:rgba(251,250,247,.05);max-width:78ch}
.trknote b{color:var(--paper)}

/* ---------- commodity classifier (HPS signature) ---------- */
.clf{border:1px solid var(--ink);background:var(--paper);margin-top:42px;
  box-shadow:0 34px 76px -54px rgba(20,17,15,.9)}
.clfhd{border-bottom:1px solid var(--ink);padding:17px 24px;background:var(--paper-2);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.clfbd{display:grid;grid-template-columns:1.05fr .95fr;gap:0}
.clfin{padding:26px 26px 30px;border-right:1px solid var(--rule)}
.clfq{margin-bottom:24px}
.clfq:last-child{margin-bottom:0}
.clfq .q{font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-46);display:block;margin-bottom:11px}
.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt{font-family:var(--sans);font-size:.85rem;border:1px solid var(--rule);background:transparent;
  padding:10px 14px;cursor:pointer;color:var(--ink-64);min-height:44px;
  display:inline-flex;align-items:center;transition:all .3s var(--ease);text-align:left}
.opt:hover{border-color:var(--ink);color:var(--ink)}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.clfout{padding:26px 26px 30px;background:var(--paper-2);display:flex;flex-direction:column}
.verdict{border:1px solid var(--ink);background:var(--paper);padding:22px 22px 20px;margin-bottom:18px}
.verdict .vk{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-46);display:block;margin-bottom:9px}
.verdict .vv{font-family:var(--serif);font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;
  letter-spacing:-.02em;display:block}
.verdict .vv small{font-size:.36em;color:var(--stamp);margin-left:8px;letter-spacing:0}
.verdict .vd{font-size:.9rem;color:var(--ink-64);margin-top:12px;max-width:none}
.trigger{border:1px solid var(--stamp);background:var(--stamp-lo);padding:16px 18px;margin-bottom:16px}
.trigger.no{border-color:var(--rule);background:transparent}
.trigger .tk{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stamp);display:block;margin-bottom:7px}
.trigger.no .tk{color:var(--ink-46)}
.trigger p{font-size:.9rem;color:var(--ink-78);margin:0;max-width:none}
.clfnext{list-style:none;margin:0;padding:0;flex:1}
.clfnext li{font-size:.86rem;line-height:1.5;color:var(--ink-64);padding:8px 0 8px 16px;
  position:relative;border-bottom:1px solid var(--rule-2)}
.clfnext li:last-child{border-bottom:none}
.clfnext li::before{content:'';position:absolute;left:0;top:15px;width:6px;height:1px;background:var(--stamp)}

/* ---------- flue diagram ---------- */
.fluewrap{position:relative;margin-top:30px}
.flueleg{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-46)}
.flueleg i{display:inline-block;width:16px;height:2px;background:var(--stamp);margin-right:7px;
  vertical-align:middle}

@media (max-width:1040px){
  .checkgrid{grid-template-columns:1fr}
  .ck{border-right:none;border-bottom:1px solid rgba(251,250,247,.14);padding:22px 0}
  .ck:not(:first-child){padding-left:0}
  .ck:last-child{border-bottom:none}
  .clfbd{grid-template-columns:1fr}
  .clfin{border-right:none;border-bottom:1px solid var(--rule)}
}
@media (max-width:860px){
  .trackwrap{height:auto}
  .trackpin{position:static;height:auto;padding:clamp(56px,9vw,90px) 0}
  .trk{grid-template-columns:1fr;gap:8px;padding:16px 0}
  .tlbars{height:28px}
  .trknow{display:none}
}
@media (max-width:620px){
  .qa summary{grid-template-columns:1fr;gap:6px;padding-right:38px}
  .qa .ans{margin-left:0;padding-right:0}
  .answer{padding:24px 22px 22px}
}
@media (prefers-reduced-motion:reduce){
  .trackwrap{height:auto}
  .trackpin{position:static;height:auto;padding:80px 0}
  .tlbar span.f{width:100%!important}
  .trknow{display:none}
  .trk .lbl{color:rgba(251,250,247,.86)}
}

/* ---------- base-building vs tenant scope splitter (TI signature) ---------- */
.split{border:1px solid var(--ink);background:var(--paper);margin-top:42px;
  box-shadow:0 34px 76px -54px rgba(20,17,15,.9)}
.splithd{border-bottom:1px solid var(--ink);padding:17px 24px;background:var(--paper-2);
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}
.splittabs{display:flex;gap:7px;flex-wrap:wrap}
.stab{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule);background:transparent;padding:9px 14px;cursor:pointer;
  color:var(--ink-64);min-height:40px;transition:all .3s var(--ease)}
.stab:hover{border-color:var(--ink);color:var(--ink)}
.stab[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.splitbd{padding:0}
.srow{display:grid;grid-template-columns:1.15fr 88px 88px 1.5fr;gap:0;align-items:center;
  border-bottom:1px solid var(--rule);transition:background .3s}
.srow:last-child{border-bottom:none}
.srow:hover{background:var(--paper-2)}
.srow.head{background:var(--paper-2);border-bottom:1px solid var(--ink)}
.srow.head span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-46);padding:12px 14px}
.srow .item{padding:14px 14px 14px 24px;font-size:.93rem;font-weight:600}
.srow .item i{display:block;font-style:normal;font-weight:400;font-size:.82rem;color:var(--ink-64);margin-top:3px}
.srow .who{padding:14px 8px;text-align:center}
.srow .dot{display:inline-block;width:11px;height:11px;border-radius:50%;
  border:1.5px solid var(--rule);transition:all .35s var(--ease)}
.srow .dot.on{background:var(--stamp);border-color:var(--stamp);
  box-shadow:0 0 0 4px rgba(168,48,28,.14)}
.srow .dot.on.ll{background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 4px rgba(20,17,15,.1)}
.srow .note{padding:14px 24px 14px 14px;font-size:.83rem;color:var(--ink-64);line-height:1.5}
.splitfoot{border-top:1px solid var(--ink);padding:16px 24px;background:var(--paper-2);
  font-family:var(--mono);font-size:.72rem;line-height:1.7;color:var(--ink-64)}
.splitfoot b{color:var(--ink)}
@media (max-width:860px){
  .srow{grid-template-columns:1fr 60px 60px;row-gap:0}
  .srow .note{grid-column:1/-1;padding:0 24px 14px}
  .srow.head span:last-child{display:none}
}

/* ============================================================
   SPECIMEN MARKING
   A fabricated case study must be impossible to mistake for real.
   Loud enough to never ship by accident; quiet enough to evaluate.
   ============================================================ */
.specimen-bar{
  position:relative;z-index:61;background:#5B2FA8;color:#fff;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  text-align:center;padding:9px 12px;line-height:1.6
}
.specimen-bar b{border-bottom:1px solid rgba(255,255,255,.5)}
/* Watermark repeats per section rather than sitting on one fixed full-viewport
   layer — same unmissable marking, no compositing cost. Measured. */
body.specimen section::after,body.specimen .hero::after{
  content:'SPECIMEN · FABRICATED EXAMPLE · NOT A REAL S&T PROJECT';
  position:absolute;top:50%;left:50%;z-index:1;pointer-events:none;
  transform:translate(-50%,-50%) rotate(-24deg);white-space:nowrap;
  font-family:var(--mono);font-size:clamp(1rem,3vw,2.3rem);letter-spacing:.14em;
  color:rgba(91,47,168,.11);font-weight:500
}
body.specimen .band::after,body.specimen .cta::after{color:rgba(201,169,245,.13)}
body.specimen .hero{position:relative}
.spec{
  display:inline-block;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:#5B2FA8;border:1px solid rgba(91,47,168,.45);
  background:rgba(91,47,168,.07);padding:2px 6px;margin-left:7px;vertical-align:middle;
  border-radius:2px;white-space:nowrap
}
.band .spec,.cta .spec,.photoband .spec{color:#C9A9F5;border-color:rgba(201,169,245,.5);
  background:rgba(201,169,245,.12)}
.specnote{
  border:1px solid #5B2FA8;border-left-width:3px;background:rgba(91,47,168,.05);
  padding:18px 20px;margin-top:26px
}
.specnote .k{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:#5B2FA8;display:block;margin-bottom:9px}
.specnote p{font-size:.92rem;color:var(--ink-78);margin:0}
.specnote p+p{margin-top:10px}

/* ---------- case study furniture ---------- */
.factbar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.factbar div{padding:20px 18px 20px 0;border-right:1px solid var(--rule)}
.factbar div:last-child{border-right:none}
.factbar div:not(:first-child){padding-left:18px}
.factbar .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-46);display:block;margin-bottom:8px}
.factbar .v{font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.15}
.factbar .v small{display:block;font-family:var(--sans);font-size:.78rem;color:var(--ink-64);margin-top:5px}

.beats{margin-top:44px;border-top:1px solid var(--ink)}
.beat{display:grid;grid-template-columns:auto 1fr;gap:26px;padding:26px 0;
  border-bottom:1px solid var(--rule);align-items:start}
.beat .bn{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--stamp);
  padding-top:6px;white-space:nowrap}
.beat h3{margin-bottom:9px}
.beat p{color:var(--ink-78);font-size:.985rem;max-width:72ch}
.beat p+p{margin-top:11px}

.mile{width:100%;border-collapse:collapse;margin-top:26px}
.mile th{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-46);text-align:left;padding:0 12px 9px 0;border-bottom:1px solid var(--ink);font-weight:500}
.mile td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);font-size:.9rem;vertical-align:top}
.mile .dt{font-family:var(--mono);font-size:.8rem;color:var(--stamp);width:110px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.mile .ev{font-weight:600;width:26%}
.mile .no{color:var(--ink-64)}
@media (max-width:860px){
  .factbar{grid-template-columns:1fr 1fr}
  .factbar div:nth-child(2){border-right:none}
  .factbar div:nth-child(n+3){border-top:1px solid var(--rule)}
  .beat{grid-template-columns:1fr;gap:8px}
  .mile .dt{width:auto}
}
@media (max-width:560px){ .factbar{grid-template-columns:1fr}
  .factbar div{border-right:none;border-top:1px solid var(--rule);padding-left:0}
  .factbar div:first-child{border-top:none} }

/* --- track captions -------------------------------------------------------
   The caption inside a duration bar is only legible while the bar is wider
   than the text. Below that, swap to the full-width caption under the row. */
.tcap{display:none}
@media (max-width:860px){
  .tlbar em{display:none}
  .tlbars{height:auto;min-height:26px;padding-bottom:22px}
  .tlbar{top:2px}
  .tcap{display:block;position:absolute;left:0;right:0;top:28px;
    font-family:var(--mono);font-size:.575rem;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(251,250,247,.62);line-height:1.5}
  .trk.live .tcap{color:var(--paper)}
  .trk.done .tcap{color:rgba(251,250,247,.78)}
  .trkaxis{font-size:.55rem;letter-spacing:.04em}
  .trkaxis span{padding-left:4px}
  /* the leading spacer cell exists to clear the label column, which does not
     exist once .trk collapses to one column — without hiding it, 8 cells in
     7 tracks pushed the last tick onto a second row. */
  .trkaxis span:first-child{display:none}
  .trkaxis span:nth-child(2){border-left:none;padding-left:0}
}

a.unbuilt{opacity:.42;text-decoration:underline dotted 1px;text-underline-offset:3px;cursor:not-allowed}a.unbuilt:hover{opacity:.6}a.btn.unbuilt{text-decoration:none;border-style:dashed}