/* ============================================================================
PCN Consulting — NIGHT SHIFT PREMIUM
Private homepage draft. Develops preview/tech/ ("Night Shift, refined"):
same charcoal/bone/amber/cyan identity, same commercial terms, same four
practices — rebuilt with real depth, one live signature composition, an
editorial document register and one authored motion moment.
preview/tech/ is preserved unchanged for comparison.
========================================================================== */
:root{
/* ---- ground -------------------------------------------------------- */
--ink-0:#07090B; /* deepest field, behind the opening */
--ink:#0B0E11; /* page ground */
--ink-2:#0F1318; /* alternate band */
--slate:#161B21;
--slate-2:#1C232B;
--slate-3:#222A33; /* raised surface */
/* ---- type ---------------------------------------------------------- */
--bone:#E6E4DF; /* primary text */
--paper:#D5D2CB; /* secondary text */
--muted:#A4ADB5; /* tertiary text — AA on every ground here */
/* ---- signal -------------------------------------------------------- */
--amber:#E8A33D; /* action, and the single most important step */
--amber-hi:#F4BA62;
--amber-deep:#C9862A;
--cyan:#6FB6C9; /* connection between things */
--cyan-soft:rgba(111,182,201,.42);
/* ---- structure ----------------------------------------------------- */
--line:rgba(230,228,223,.13);
--line-2:rgba(230,228,223,.24);
--line-3:rgba(230,228,223,.38);
/* ---- document register (the bone sheets) --------------------------- */
--sheet:#E9E7E1;
--sheet-2:#DFDCD4;
--sheet-ink:#14181D;
--sheet-ink-2:#4A535E;
--sheet-rule:rgba(20,24,29,.15);
/* ---- families ------------------------------------------------------ */
--sans:'Public Sans',-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
--serif:'Literata',Georgia,'Times New Roman',serif;
/* ---- 4px spacing scale --------------------------------------------- */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
--s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
--gutter:clamp(18px,3.4vw,60px);
--shell:1400px;
--measure:66ch;
--ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;background:var(--ink);color:var(--bone);
font-family:var(--sans);font-size:17px;line-height:1.62;font-weight:400;
letter-spacing:.004em; /* light-on-dark compensation */
-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:600;text-wrap:balance}
/* browser surfaces carry the design too */
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:1px}
html{scrollbar-color:var(--slate-3) var(--ink);caret-color:var(--amber)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--slate-3);border:3px solid var(--ink);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#2C3742}
.wrap{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
/* skip link */
.skip{position:absolute;left:var(--gutter);top:-60px;z-index:200;background:var(--amber);
color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
padding:12px 18px;text-decoration:none;border-radius:2px;transition:top .18s var(--ease)}
.skip:focus{top:10px}
/* ---------------------------------------------------------------- labels */
.lbl{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.15em;
text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums;margin:0}
.lbl--cyan{color:var(--cyan)}
.lbl--amber{color:var(--amber)}
.note-s{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0;max-width:52ch}
/* ================================================================ chrome */
.previewbar{background:#040608;color:var(--muted);font-size:12px;line-height:1.5;
padding:7px var(--gutter);display:flex;gap:6px 22px;flex-wrap:wrap;
justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line)}
.previewbar b{color:var(--paper);font-weight:700;letter-spacing:.02em}
.previewbar nav{display:flex;gap:18px;flex-wrap:wrap}
.previewbar a{color:var(--cyan);text-decoration:none;border-bottom:1px solid transparent}
.previewbar a:hover{border-bottom-color:var(--cyan)}
/* =============================================================== masthead */
.masthead{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);
background:rgba(11,14,17,.82);backdrop-filter:blur(14px) saturate(120%);
-webkit-backdrop-filter:blur(14px) saturate(120%);
transition:border-color .3s var(--ease),background .3s var(--ease)}
@supports not (backdrop-filter:blur(2px)){.masthead{background:var(--ink)}}
.masthead.is-stuck{background:rgba(9,12,15,.94);border-bottom-color:var(--line-2)}
.masthead__in{display:flex;align-items:center;gap:clamp(14px,2.4vw,38px);min-height:74px}
.brand{display:inline-flex;align-items:baseline;gap:10px;text-decoration:none;margin-right:auto}
.brand__signal{display:inline-grid;grid-template-columns:repeat(3,3px);align-items:end;
gap:3px;height:18px;margin-right:3px;transform:translateY(1px)}
.brand__signal i{display:block;width:3px;background:var(--bone);transform-origin:bottom;
transition:transform .35s var(--ease)}
.brand__signal i:nth-child(1){height:7px;background:var(--cyan)}
.brand__signal i:nth-child(2){height:13px}
.brand__signal i:nth-child(3){height:18px;background:var(--amber)}
.brand:hover .brand__signal i:nth-child(1){transform:scaleY(1.85)}
.brand:hover .brand__signal i:nth-child(2){transform:scaleY(1.38)}
.brand__name{font-size:23px;font-weight:700;letter-spacing:-.045em;color:var(--bone)}
.brand__desc{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:var(--muted);white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(13px,1.9vw,30px)}
.nav a{position:relative;font-size:12px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--paper);text-decoration:none;padding-block:11px;
transition:color .2s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;
background:var(--amber);transition:right .3s var(--ease)}
.nav a:hover{color:var(--bone)}
.nav a:hover::after{right:0}
/* =============================================================== buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65em;
font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.085em;
text-transform:uppercase;text-decoration:none;padding:14px 22px;border-radius:2px;
background:var(--amber);color:var(--ink);border:1px solid var(--amber);cursor:pointer;
box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 10px 22px -14px rgba(0,0,0,.85);
transition:background .2s var(--ease),border-color .2s var(--ease),
box-shadow .2s var(--ease),transform .12s var(--ease)}
.btn:hover{background:var(--amber-hi);border-color:var(--amber-hi);
box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 14px 26px -14px rgba(0,0,0,.9)}
.btn:active{transform:translateY(1px)}
.btn--lg{font-size:14px;padding:17px 28px}
.btn--ghost{background:transparent;color:var(--bone);border-color:var(--line-3);box-shadow:none}
.btn--ghost:hover{background:rgba(230,228,223,.07);border-color:var(--bone);box-shadow:none}
.btn__arrow{width:14px;height:9px;flex:none;transition:transform .25s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}
.navbtn{padding:11px 17px;font-size:11.5px}
.menu{display:none}
.actions{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center}
/* ================================================================ opening */
.opening{position:relative;overflow:hidden;background:var(--ink-0);
border-bottom:1px solid var(--line)}
.opening__art{position:absolute;inset:0;z-index:0;pointer-events:none}
.opening__art img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;
filter:brightness(1.62) saturate(1.06)}
/* The scrim is fully opaque across the whole text column, so every text run is
painted on solid --ink-0 and its contrast is a fact rather than an estimate.
Past the column it releases, and the field carries the depth. */
.opening__art::after{content:"";position:absolute;inset:0;
background:
linear-gradient(97deg,var(--ink-0) 0%,var(--ink-0) 54%,rgba(7,9,11,.6) 69%,rgba(7,9,11,.18) 100%),
linear-gradient(to top,var(--ink-0) 0%,rgba(7,9,11,0) 22%)}
.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml;utf8,");
background-size:140px 140px}
.opening__grid{position:relative;z-index:2;display:grid;
grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
gap:clamp(30px,4.2vw,72px);align-items:center;
padding-block:clamp(30px,4vw,62px) clamp(38px,4.8vw,74px)}
/* locator strip — the descriptor and the market, as instrument chrome */
.locator{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
padding-bottom:var(--s4);margin-bottom:clamp(20px,2.4vw,30px);
border-bottom:1px solid var(--line-2)}
.locator__main{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--paper);margin:0}
.locator__us{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;
letter-spacing:.01em;color:var(--muted);margin:0}
.locator__us::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;
background:var(--cyan)}
/* "Run the business." and "Not the chaos." are two deliberate blocks at every
width — the sans proposition, then the serif answer beneath it. */
.h1{font-size:clamp(43px,5.6vw,84px);line-height:.96;letter-spacing:-.044em;
font-weight:600;max-width:none;color:var(--bone)}
.h1 em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;
letter-spacing:-.026em;color:var(--bone);margin-top:.04em}
.lede{font-size:clamp(17.5px,1.3vw,20.5px);line-height:1.58;color:var(--paper);
max-width:47ch;margin-top:clamp(18px,1.9vw,26px)}
/* the offer, welded to the primary action */
.offer{display:flex;align-items:stretch;margin-top:clamp(22px,2.4vw,32px);
border:1px solid var(--line-2);border-radius:2px;overflow:hidden;width:max-content;
max-width:100%;background:linear-gradient(180deg,rgba(34,42,51,.7),rgba(16,20,25,.7));
box-shadow:0 20px 46px -28px rgba(0,0,0,.9)}
.offer__fig{display:flex;flex-direction:column;justify-content:center;
padding:13px 20px;border-right:1px solid var(--line-2);background:rgba(7,9,11,.55)}
.offer__n{font-size:clamp(30px,2.7vw,38px);font-weight:700;letter-spacing:-.045em;
color:var(--amber);line-height:1;font-variant-numeric:tabular-nums}
.offer__cap{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
color:var(--muted);margin-top:6px}
.offer__body{display:flex;flex-direction:column;justify-content:center;gap:3px;
padding:13px 22px;font-size:14px;line-height:1.45;color:var(--muted)}
.offer__body b{color:var(--bone);font-weight:700;font-size:15.5px;letter-spacing:-.012em}
.opening .actions{margin-top:clamp(16px,1.9vw,24px)}
.who{margin-top:clamp(22px,2.4vw,32px);padding-top:var(--s4);border-top:1px solid var(--line);
font-size:14.5px;line-height:1.56;color:var(--muted);max-width:54ch}
.who b{color:var(--paper);font-weight:600}
/* ====================================================== signature figure */
.sig{margin:0;position:relative}
.sig__field{display:none}
.sig__panel{position:relative;border:1px solid var(--line-2);border-radius:3px;
background:linear-gradient(180deg,#222A33,#0D1115);
box-shadow:0 1px 0 rgba(230,228,223,.07) inset,
0 46px 90px -34px rgba(0,0,0,.92),
0 3px 14px rgba(0,0,0,.45);
padding:clamp(18px,1.9vw,28px)}
.sig__panel::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(230,228,223,.3),transparent)}
.sig__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px 18px;
flex-wrap:wrap;padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
/* four ways in */
.entry{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:6px;margin:var(--s4) 0 0;padding:0}
.entry li{position:relative;display:flex;align-items:center;justify-content:center;
text-align:center;font-size:12.5px;line-height:1.25;color:var(--paper);padding:10px 6px;
border-radius:2px;border:1px dashed rgba(164,173,181,.5);background:rgba(11,14,17,.3)}
/* each way in drops a tick onto a shared bus */
.entry li::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:17px;
background-image:linear-gradient(180deg,rgba(164,173,181,.55) 50%,transparent 50%);
background-size:1px 6px}
/* Orthogonal routing, drawn in CSS so it stays exact at every width: four
dashed drops onto one dashed bus, then a solid amber turn into the capture
node — which sits on the same axis as the workflow rail below it. */
.funnel{position:relative;height:40px;margin-top:0}
.funnel__bus{position:absolute;left:7px;right:12%;top:17px;height:1px;
background-image:linear-gradient(90deg,rgba(164,173,181,.55) 50%,transparent 50%);
background-size:6px 1px}
.funnel__drop{position:absolute;left:7px;top:17px;bottom:-2px;width:1px;
background:linear-gradient(180deg,rgba(232,163,61,.35),var(--amber))}
.capture{display:flex;align-items:center;gap:12px;margin-top:2px;
padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.capture__node{flex:none;width:11px;height:11px;margin-left:2px;border-radius:50%;
background:var(--ink-0);border:1.5px solid var(--amber);position:relative;
box-shadow:0 0 0 3px rgba(13,17,21,.92)}
.capture__node::after{content:"";position:absolute;inset:1.5px;border-radius:50%;
background:var(--amber)}
.capture__txt{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--amber);margin:0}
/* the owned workflow */
.sig__flow{margin-top:var(--s4)}
.stages-wrap{position:relative;margin-top:var(--s4)}
.stages{list-style:none;margin:0;padding:0}
.rail{position:absolute;left:7px;top:9px;bottom:9px;width:1px;
background:linear-gradient(180deg,rgba(111,182,201,.34),rgba(111,182,201,.16));
overflow:hidden}
.rail__pulse{position:absolute;left:-1px;top:0;width:3px;height:100%;opacity:0;
background:linear-gradient(180deg,transparent 0%,rgba(111,182,201,.5) 9%,#CFEDF5 16%,
rgba(111,182,201,.5) 23%,transparent 32%)}
.stage{position:relative;padding-left:30px;display:grid;
grid-template-columns:minmax(0,142px) minmax(0,1fr);gap:2px 16px;align-items:baseline}
.stage + .stage{margin-top:15px}
.stage::before{content:"";position:absolute;left:2px;top:7px;width:11px;height:11px;
border-radius:50%;background:var(--slate);border:1.5px solid var(--cyan);
box-shadow:0 0 0 3px #131920;z-index:2}
/* the ripple the travelling pulse leaves behind — transform and opacity only */
.stage::after{content:"";position:absolute;left:2px;top:7px;width:11px;height:11px;
border-radius:50%;border:1px solid var(--cyan);opacity:0;z-index:1}
.stage--key::after{border-color:var(--amber)}
.stage__n{font-size:16.5px;font-weight:600;letter-spacing:-.025em;line-height:1.3;
color:var(--bone)}
.stage__d{font-size:14px;line-height:1.5;color:var(--muted);letter-spacing:.006em}
.stage--key::before{background:var(--amber);border-color:var(--amber)}
.stage--end::after{border-color:var(--cyan)}
.stage--key .stage__n{color:var(--amber)}
.stage--key .stage__d{color:var(--paper)}
.stage--end::before{background:var(--cyan)}
.sig figcaption{margin-top:var(--s4)}
.sig figcaption .note-s{margin-top:5px;max-width:52ch}
/* ======================================================= section furniture */
.section{padding-block:clamp(56px,6.4vw,104px);border-bottom:1px solid var(--line);
position:relative}
.section--alt{background:var(--ink-2)}
.h2{font-size:clamp(31px,3.5vw,52px);line-height:1.02;letter-spacing:-.042em;max-width:19ch;
color:var(--bone)}
.body{font-size:clamp(17px,1.2vw,18.5px);line-height:1.66;color:var(--paper);
max-width:var(--measure);margin-top:var(--s5)}
.sechead{max-width:var(--shell)}
.sechead .h2 + .body{margin-top:var(--s5)}
/* ================================================================ problem */
.problem{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(30px,4.4vw,78px);align-items:start}
.symptoms{list-style:none;margin:0;padding:0}
.symptoms li{position:relative;padding:15px 0 15px 34px;font-size:16.5px;line-height:1.5;
color:var(--bone);border-top:1px solid var(--line);
transition:color .2s var(--ease),border-color .2s var(--ease)}
.symptoms li:last-child{border-bottom:1px solid var(--line)}
.symptoms li::before{content:"";position:absolute;left:0;top:24px;width:17px;height:1px;
background:var(--cyan-soft)}
.symptoms li::after{content:"";position:absolute;left:0;top:21.5px;width:5px;height:5px;
border-radius:50%;background:var(--cyan)}
.pull{margin-top:var(--s6);padding:var(--s5) var(--s5) var(--s5) var(--s6);
background:linear-gradient(180deg,rgba(34,42,51,.5),rgba(16,20,25,.5));
border:1px solid var(--line);border-radius:2px;position:relative;
font-family:var(--serif);font-size:17.5px;line-height:1.62;color:var(--paper)}
.pull::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;
background:var(--amber)}
.pull b{color:var(--amber);font-weight:600}
/* ============================================================== practices */
.practices{margin-top:clamp(30px,3.4vw,50px);position:relative}
.practice{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(18px,2.8vw,48px);padding:clamp(26px,3vw,40px) 0 clamp(26px,3vw,40px) 46px;
position:relative;border-top:1px solid var(--line)}
.practice:last-child{border-bottom:1px solid var(--line)}
.practice::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:1px;
background:var(--line-2)}
.practice:first-child::before{top:50%}
.practice:last-child::before{bottom:50%}
.practice::after{content:"";position:absolute;left:2px;top:50%;width:11px;height:11px;
margin-top:-5.5px;border-radius:50%;background:var(--ink);border:1.5px solid var(--cyan);
box-shadow:0 0 0 4px var(--ink)}
.section--alt .practice::after{background:var(--ink-2);box-shadow:0 0 0 4px var(--ink-2)}
.practice--key::after{border-color:var(--amber);background:var(--amber)!important}
.practice__n{font-size:clamp(23px,2.2vw,32px);line-height:1.06;letter-spacing:-.04em;
font-weight:600;color:var(--bone)}
.practice__sym{margin-top:var(--s3);font-size:15.5px;line-height:1.5;color:var(--muted);
max-width:34ch}
.practice__sym b{color:var(--cyan);font-weight:600}
.klbl{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
color:var(--muted);margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.practice__work{font-size:15.5px;line-height:1.6;color:var(--paper)}
.practice__out{margin-top:var(--s4);font-size:15.5px;line-height:1.55;color:var(--bone)}
.practice__out b{color:var(--cyan);font-weight:600;display:block;font-size:11px;
letter-spacing:.15em;text-transform:uppercase;margin-bottom:5px}
.practice ul{list-style:none;margin:0;padding:0;font-size:15.5px;line-height:1.5;
color:var(--paper)}
.practice li{padding:6px 0 6px 18px;position:relative}
.practice li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:1px;
background:var(--amber)}
/* Two link roles the interior pages introduced and the homepage now needs:
an onward action at the foot of a practice row, and an inline link inside
a run of body copy. */
.practice__more{display:inline-flex;align-items:center;gap:.6em;margin-top:var(--s3);
font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--amber);padding-block:9px;
text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;
text-decoration-thickness:1px;transition:text-decoration-color .2s var(--ease)}
.practice__more:hover{text-decoration-color:var(--amber)}
.practice__more svg{width:14px;height:9px;flex:none;transition:transform .25s var(--ease)}
.practice__more:hover svg{transform:translateX(3px)}
.inline{color:var(--cyan);text-decoration:none;border-bottom:1px solid var(--cyan-soft);
transition:color .2s var(--ease),border-color .2s var(--ease)}
.inline:hover{color:var(--bone);border-bottom-color:var(--bone)}
/* ================================================================= method */
.method{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
background:var(--line);border:1px solid var(--line);margin-top:clamp(28px,3.2vw,46px)}
.method__s{background:var(--ink);padding:clamp(20px,2.3vw,30px);position:relative}
.section--alt .method__s{background:var(--ink-2)}
.method__s::before{content:"";position:absolute;left:clamp(20px,2.3vw,30px);top:-1px;
width:26px;height:1px;background:var(--amber);opacity:0;transition:opacity .3s var(--ease)}
.method__s:hover::before{opacity:1}
.method__n{font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--amber);
font-variant-numeric:tabular-nums}
.method__s h3{font-size:22px;margin:var(--s2) 0 var(--s3);letter-spacing:-.038em;color:var(--bone)}
.method__s p{font-size:15px;line-height:1.55;color:var(--muted)}
/* =========================================================== sample work */
.work{position:relative;overflow:hidden;background:var(--ink)}
.work__art{position:absolute;inset:0;z-index:0;pointer-events:none}
.work__art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;
filter:brightness(1.28)}
.work__art::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,14,17,.52) 0%,rgba(11,14,17,.38) 18%,
rgba(11,14,17,.8) 44%,var(--ink) 96%)}
.work > .wrap{position:relative;z-index:2}
.workhead{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s7);align-items:baseline;
justify-content:space-between;margin-bottom:clamp(26px,3vw,44px)}
.workhead > div{max-width:52ch}
.sheets{display:grid;gap:clamp(22px,2.6vw,38px)}
.sheet{background:var(--sheet);color:var(--sheet-ink);border-radius:2px;
padding:clamp(24px,2.8vw,42px);
box-shadow:0 34px 80px -28px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.4)}
.sheet--map{background:var(--sheet-2)}
.sheet__top{display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:space-between;
padding-bottom:var(--s3);border-bottom:2px solid var(--sheet-ink);
font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--sheet-ink-2);font-variant-numeric:tabular-nums}
.sheet__title{font-size:clamp(22px,2.2vw,31px);line-height:1.1;letter-spacing:-.036em;
font-weight:600;margin:var(--s5) 0 0;max-width:28ch;color:var(--sheet-ink)}
.sheet__lede{font-family:var(--serif);font-size:15.5px;line-height:1.6;margin-top:var(--s3);
color:var(--sheet-ink-2);max-width:70ch}
/* finding sheet — five fields, always the same five */
.finding{display:grid;grid-template-columns:150px minmax(0,1fr);margin-top:var(--s5)}
.finding__k{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--sheet-ink-2);padding:14px 18px 14px 0;border-top:1px solid var(--sheet-rule)}
.finding__v{font-family:var(--serif);font-size:16px;line-height:1.58;color:var(--sheet-ink);
padding:14px 0;border-top:1px solid var(--sheet-rule)}
.finding__v mark{background:linear-gradient(to top,rgba(232,163,61,.42) 0,
rgba(232,163,61,.42) 8px,transparent 8px);color:#6E3A0C;font-weight:600}
.sheet__foot{margin-top:var(--s5);padding-top:var(--s3);border-top:2px solid var(--sheet-ink);
font-size:13px;color:var(--sheet-ink-2);line-height:1.55}
/* operating map — a real table, readable at phone size */
.maptable{width:100%;border-collapse:collapse;margin-top:var(--s5);
font-variant-numeric:tabular-nums}
.maptable caption{text-align:left;font-size:13px;color:var(--sheet-ink-2);
padding-bottom:var(--s3);line-height:1.5}
.maptable th,.maptable td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;
border-top:1px solid var(--sheet-rule)}
.maptable thead th{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:var(--sheet-ink-2);border-top:0;border-bottom:1px solid rgba(20,24,29,.35);padding-top:0}
.maptable tbody th{font-size:15px;font-weight:700;letter-spacing:-.012em;color:var(--sheet-ink);
width:19%}
.maptable td{font-size:14.5px;line-height:1.5;color:#2B323A}
.maptable td:last-child{padding-right:0}
.maptable .mt-own{color:var(--sheet-ink);font-weight:600}
.maptable tbody tr:hover th,.maptable tbody tr:hover td{background:rgba(20,24,29,.045)}
.exceptions{margin-top:var(--s5);border-top:2px solid var(--sheet-ink);padding-top:var(--s3)}
.exceptions summary{font-size:16px;font-weight:700;letter-spacing:-.018em;
color:var(--sheet-ink);cursor:pointer;list-style:none;display:flex;align-items:center;gap:11px;
padding:7px 0}
.exceptions summary::-webkit-details-marker{display:none}
.exceptions summary::before{content:"";width:9px;height:9px;flex:none;
border-right:1.5px solid var(--sheet-ink-2);border-bottom:1.5px solid var(--sheet-ink-2);
transform:rotate(-45deg) translate(-1px,-1px);transition:transform .25s var(--ease)}
.exceptions[open] summary::before{transform:rotate(45deg) translate(-2px,-2px)}
.exceptions summary:focus-visible{outline:2px solid var(--amber-deep);outline-offset:3px}
.exceptions dl{margin:var(--s3) 0 0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:0 var(--s5)}
.exceptions dt{font-size:14.5px;font-weight:700;color:var(--sheet-ink);
padding:11px 0;border-top:1px solid var(--sheet-rule)}
.exceptions dd{font-family:var(--serif);font-size:14.5px;line-height:1.55;color:#2B323A;margin:0;
padding:11px 0;border-top:1px solid var(--sheet-rule)}
/* ================================================================== audit */
.audit{background:var(--slate);border-bottom:1px solid var(--line)}
.audit__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
gap:clamp(32px,4.6vw,78px);align-items:start}
.price{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;
padding-bottom:var(--s5);margin-bottom:var(--s5);border-bottom:1px solid var(--line-2)}
.price__n{font-size:clamp(56px,6vw,90px);line-height:.85;font-weight:700;letter-spacing:-.052em;
color:var(--amber);font-variant-numeric:tabular-nums}
.price__l{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
color:var(--bone);line-height:1.5}
.price__l i{display:block;font-style:normal;font-weight:400;letter-spacing:.01em;
text-transform:none;color:var(--muted);font-size:14px;margin-top:4px}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,42px)}
.cols h3{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
color:var(--cyan);margin:0 0 var(--s3);padding-bottom:7px;border-bottom:1px solid var(--line)}
.cols h3.second{margin-top:var(--s6)}
.cols ul{list-style:none;margin:0;padding:0}
.cols li{font-size:15px;line-height:1.5;padding:7px 0 7px 18px;position:relative;color:var(--paper)}
.cols li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:1px;
background:var(--muted)}
.ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
background:var(--line);border:1px solid var(--line);margin-top:clamp(24px,2.8vw,38px)}
.ladder__s{background:var(--slate-2);padding:var(--s5) var(--s5)}
.ladder__s:first-child{background:var(--ink-2);position:relative}
.ladder__s:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
background:var(--amber)}
.ladder__s:first-child b{color:var(--amber)}
.ladder__s b{display:block;font-size:17.5px;font-weight:600;letter-spacing:-.032em;
color:var(--bone);margin-bottom:6px}
.ladder__s span{font-size:14px;line-height:1.5;color:var(--muted)}
.smallprint{font-size:13px;line-height:1.62;color:var(--muted);margin-top:var(--s5);max-width:80ch}
.audit .actions{margin-top:clamp(24px,2.8vw,36px)}
/* ================================================================== close */
.close{position:relative;overflow:hidden;background:var(--ink-0);border-bottom:1px solid var(--line)}
.close__art{position:absolute;inset:0;z-index:0;pointer-events:none}
.close__art img{width:100%;height:100%;object-fit:cover;object-position:30% 60%;
transform:scaleX(-1);filter:brightness(1.62) saturate(1.06)}
.close__art::after{content:"";position:absolute;inset:0;
background:linear-gradient(84deg,var(--ink-0) 0%,var(--ink-0) 54%,rgba(7,9,11,.6) 72%,rgba(7,9,11,.24) 100%)}
.close > .wrap{position:relative;z-index:2}
.close__grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
gap:clamp(28px,4vw,70px);align-items:center}
.close .h2{font-size:clamp(33px,4.1vw,60px);max-width:15ch}
.converge{width:100%;height:auto}
/* ================================================================= footer */
.foot{padding-block:var(--s7) var(--s8);font-size:14.5px;color:var(--muted);background:var(--ink)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));
gap:var(--s6) clamp(20px,3vw,48px)}
.foot h3{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
color:var(--bone);margin:0 0 var(--s3)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:4px 0;font-size:14.5px}
.foot a{color:var(--muted);text-decoration:none;transition:color .2s var(--ease)}
.foot a:hover{color:var(--amber)}
.foot__blurb{max-width:36ch;margin-top:var(--s3);color:var(--muted);font-size:14.5px;line-height:1.6}
.foot__legal{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);
display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:12.5px}
/* ================================================================= motion
One authored moment: a single connection pulse travels the workflow rail
when the signature figure first comes into view, and the six stage nodes
light behind it. It runs once. Everything is fully visible before, during
and after — with scripts unavailable the pulse simply never fires. */
@keyframes railpulse{
0% {transform:translateY(-100%);opacity:0}
6% {opacity:1}
94% {opacity:1}
100%{transform:translateY(100%);opacity:0}
}
@keyframes nodering{
0% {opacity:0;transform:scale(1)}
18% {opacity:.85;transform:scale(1)}
100%{opacity:0;transform:scale(2.5)}
}
.sig.is-live .rail__pulse{animation:railpulse 1700ms cubic-bezier(.42,.02,.34,1) 140ms 1 both}
.sig.is-live .stage::after{animation:nodering 760ms cubic-bezier(.16,1,.3,1) 1 both;
animation-delay:calc(300ms + var(--i) * 215ms)}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important}
.sig.is-live .rail__pulse{opacity:0}
}
/* ============================================================ responsive */
@media (max-width:1160px){
.opening__grid{grid-template-columns:1fr;gap:var(--s7)}
.opening__art{display:none}
.sig__field{display:block;position:absolute;inset:0 0 -4%;max-width:100%;
background:url("assets/field-800.webp") center/cover no-repeat;
filter:brightness(1.62) saturate(1.06);
-webkit-mask-image:radial-gradient(122% 88% at 50% 44%,#000 0%,#000 38%,transparent 76%);
mask-image:radial-gradient(122% 88% at 50% 44%,#000 0%,#000 38%,transparent 76%)}
.problem,.close__grid,.audit__grid{grid-template-columns:1fr;gap:var(--s6)}
.practice{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4) var(--s6)}
.practice__head{grid-column:1/-1}
.method{grid-template-columns:repeat(2,minmax(0,1fr))}
.sig__panel{max-width:660px}
}
@media (max-width:900px){
body{font-size:16.5px}
.nav,.navbtn{display:none}
html.js .menu{display:inline-flex;align-items:center;justify-content:center;gap:9px;
background:transparent;min-height:44px;
border:1px solid var(--line-3);color:var(--bone);padding:10px 16px;border-radius:2px;
font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;cursor:pointer;transition:border-color .2s var(--ease)}
html.js .menu:hover{border-color:var(--bone)}
.masthead__in{min-height:62px}
.brand__name{font-size:21px}
.opening__grid{padding-block:var(--s5) var(--s6);gap:var(--s6)}
.locator{margin-bottom:var(--s5);padding-bottom:var(--s3)}
.locator__main{font-size:12.5px}
.h1{font-size:clamp(36px,10.4vw,56px);max-width:none;letter-spacing:-.042em}
.lede{font-size:16.8px;margin-top:var(--s4);max-width:42ch}
.offer{width:100%;margin-top:var(--s5)}
.offer__fig{padding:12px 16px}
.offer__n{font-size:29px}
.offer__body{padding:12px 16px;font-size:13.5px}
.offer__body b{font-size:15px}
.opening .actions{margin-top:var(--s4);gap:10px}
.opening .actions .btn{width:100%}
.who{margin-top:var(--s5);padding-top:var(--s4);font-size:14px}
.practice{grid-template-columns:1fr;gap:var(--s4);padding-left:32px}
.practice::before{left:5px}
.practice::after{left:0}
.ladder{grid-template-columns:1fr}
.ladder__s:first-child::before{width:100%;height:2px;bottom:auto}
.finding{grid-template-columns:1fr}
.finding__k{padding:14px 0 0;border-top:1px solid var(--sheet-rule)}
.finding__v{padding:2px 0 14px;border-top:0}
.exceptions dl{grid-template-columns:1fr}
.exceptions dt{padding-bottom:0;border-bottom:0}
.exceptions dd{padding-top:4px;border-top:0}
.foot__grid{grid-template-columns:1fr;gap:var(--s5)}
.previewbar{font-size:11.5px}
/* the operating map becomes labelled records, not a squeezed table */
.maptable,.maptable tbody,.maptable tr,.maptable th,.maptable td{display:block;width:auto}
.maptable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
clip-path:inset(50%);white-space:nowrap}
.maptable tbody tr{border-top:1px solid var(--sheet-rule);padding:14px 0 6px}
.maptable tbody tr:first-child{border-top:2px solid var(--sheet-ink)}
.maptable tbody th{padding:0 0 8px;border-top:0;font-size:16px}
.maptable td{padding:0 0 8px;border-top:0;position:relative;font-size:14.5px}
.maptable td::before{content:attr(data-k);display:block;font-size:11px;font-weight:700;
letter-spacing:.13em;text-transform:uppercase;color:var(--sheet-ink-2);margin-bottom:3px}
.maptable tbody tr:hover th,.maptable tbody tr:hover td{background:transparent}
}
@media (max-width:640px){
.method{grid-template-columns:1fr}
.cols{grid-template-columns:1fr;gap:var(--s5)}
}
@media (max-width:560px){
.stage{grid-template-columns:1fr;gap:2px}
.entry li{font-size:11.5px;padding:9px 4px}
.sig__panel{padding:16px 14px}
.workhead{gap:var(--s3)}
}
@media (max-width:380px){
:root{--gutter:16px}
.offer{flex-direction:column}
.offer__fig{flex-direction:row;align-items:baseline;gap:10px;
border-right:0;border-bottom:1px solid var(--line-2)}
.offer__cap{margin-top:0}
}
/* ============================================================ mobile nav
Rendered in the document, visible by default on phones. The script marks
, hides it and puts it behind the Menu button. With no
script the links stay reachable. */
.mnav{display:none}
@media (max-width:900px){
.mnav{display:flex;flex-direction:column;background:var(--ink-2);
border-bottom:1px solid var(--line);padding:var(--s2) var(--gutter) var(--s5)}
html.js .mnav[hidden]{display:none}
.mnav a{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--bone);
text-decoration:none;padding:13px 0;border-bottom:1px solid var(--line)}
.mnav .btn{margin-top:var(--s4);justify-content:center;border-bottom:0;
color:var(--ink);font-size:13px}
}
/* ============================================================== inquiry
The private inquiry preview. It is a specimen of the intake, not an intake:
there is no