/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4 */
:root {
  --font-display: "Arial", "Helvetica Neue", sans-serif;
  --font-body: "Arial", "Helvetica Neue", sans-serif;
  --font-mono: "Consolas", "Courier New", monospace;
  --color-bg: #071620;
  --color-bg-soft: #0b1d29;
  --color-panel: #0c2332;
  --color-well: #102d49;
  --color-text: #eaf2f5;
  --color-muted: #a3b9c5;
  --color-line: #345367;
  --color-accent: #fca311;
  --color-accent-soft: #d07d16;
  --color-blue: #72b9d0;
  --color-red: #d05a48;
  --color-accent-glow: rgb(252 163 17 / .17);
  --color-panel-scrim: rgb(7 22 32 / .77);
  --color-line-soft: rgb(165 195 210 / .14);
}
* { box-sizing:border-box; }
html,body { margin:0; min-width:0; max-width:100%; overflow-x:clip; }
html { scroll-behavior:smooth; }
body { background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
button:focus-visible,a:focus-visible { outline:2px solid var(--color-accent); outline-offset:4px; }
.skip-link { position:absolute; z-index:20; left:1rem; top:-4rem; background:var(--color-accent); color:var(--color-bg); padding:.5rem 1rem; }
.skip-link:focus { top:1rem; }
.top-rule { height:3px; background:linear-gradient(90deg,var(--color-accent) 0 18%,var(--color-bg) 18% 37%,var(--color-accent) 37% 48%,var(--color-bg) 48% 81%,var(--color-accent) 81% 100%); }
.site-head { max-width:1440px; margin:auto; padding:1.1rem clamp(1rem,4vw,3rem); display:flex; justify-content:space-between; align-items:center; gap:1rem; border-bottom:1px solid var(--color-line-soft); }
.brand { display:flex; align-items:center; gap:.8rem; font:700 .75rem var(--font-mono); letter-spacing:.08em; white-space:nowrap; }
.brand small { color:var(--color-muted); font-size:.66rem; font-weight:400; }
.brand-mark { width:2rem; height:2rem; border:1px solid var(--color-accent); display:grid; place-items:center; color:var(--color-text); font:700 1.15rem var(--font-display); letter-spacing:-.13em; }
.brand-dot { color:var(--color-accent); }
.head-status { display:flex; align-items:center; gap:.55rem; color:var(--color-muted); font:600 .6rem var(--font-mono); letter-spacing:.08em; white-space:nowrap; }
.head-status i { display:block; width:6px; height:6px; border-radius:50%; background:var(--color-accent); box-shadow:0 0 12px var(--color-accent); }
main { max-width:1440px; margin:auto; padding:0 clamp(1rem,4vw,3rem); }
.intro { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(1rem,4vw,4rem); min-height:555px; padding:clamp(3rem,6vw,6rem) 0 3rem; align-items:center; }
.intro-copy { min-width:0; }
.overline { margin:0 0 1.1rem; color:var(--color-accent); font:700 .67rem var(--font-mono); letter-spacing:.18em; }
.overline span { color:var(--color-muted); margin:0 .4rem; }
h1,h2,h3,p { overflow-wrap:anywhere; }
h1 { margin:0; font:700 clamp(3.25rem,6.2vw,6.5rem)/.97 var(--font-display); letter-spacing:-.07em; }
h1 span { color:var(--color-accent); }
.hero-dot { width:.2em; height:.2em; background:currentColor; border-radius:50%; display:inline-block; vertical-align:baseline; margin-left:.04em; }
.lead { max-width:38rem; margin:2.1rem 0; color:var(--color-muted); font-size:clamp(1rem,1.4vw,1.16rem); line-height:1.65; }
.intro-actions { display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap; }
.intro-actions > span { color:var(--color-muted); font:.7rem var(--font-mono); }
.primary-link { display:inline-flex; align-items:center; gap:2rem; padding:.85rem 1rem; background:var(--color-accent); color:var(--color-bg); font:700 .75rem var(--font-mono); text-decoration:none; white-space:nowrap; }
.primary-link:hover { background:var(--color-text); }
.intro-instrument { position:relative; min-width:0; width:min(100%,450px); aspect-ratio:1; margin:auto; border:1px solid var(--color-line-soft); background:radial-gradient(circle at center,var(--color-bg-soft),var(--color-bg)); overflow:hidden; }
.instrument-circle { position:absolute; border:1px solid var(--color-line); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); }
.circle-outer { width:80%; aspect-ratio:1; opacity:.65; }.circle-mid { width:58%; aspect-ratio:1; opacity:.8; }.circle-inner { width:30%; aspect-ratio:1; opacity:.5; }
.instrument-line { position:absolute; background:var(--color-line); opacity:.6; }.horizontal { height:1px; left:0; right:0; top:50%; }.vertical { width:1px; top:0; bottom:0; left:50%; }
.instrument-response { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
.instrument-pupil { position:absolute; left:50%; top:50%; width:1.1rem; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:var(--color-accent); box-shadow:0 0 30px var(--color-accent-glow); }
.instrument-north,.instrument-south { position:absolute; left:50%; transform:translateX(-50%); font:.53rem var(--font-mono); color:var(--color-muted); letter-spacing:.16em; white-space:nowrap; }.instrument-north { top:7%; }.instrument-south { bottom:6%; }
.instrument-bars { position:absolute; inset:0; overflow:hidden; }.instrument-bars i { position:absolute; left:10%; height:2px; background:var(--color-accent); opacity:.55; animation:signal-shift 5.5s ease-in-out infinite alternate; }.instrument-bars i:nth-child(1){top:18%;width:25%;}.instrument-bars i:nth-child(2){top:34%;left:61%;width:33%;animation-delay:-1.5s;}.instrument-bars i:nth-child(3){top:69%;left:9%;width:30%;animation-delay:-3s;}.instrument-bars i:nth-child(4){top:83%;left:65%;width:24%;animation-delay:-4s;}
@keyframes signal-shift { from { transform:translateX(-24%); opacity:.2; } 50% { opacity:.9; } to { transform:translateX(24%); opacity:.55; } }
.facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line); margin-bottom:5.5rem; }
.facts > div { padding:1.1rem 1.25rem 1.1rem 0; border-right:1px solid var(--color-line); margin-right:1.25rem; }.facts > div:last-of-type { border-right:0; }.facts > div span { display:block; color:var(--color-muted); font:.6rem var(--font-mono); letter-spacing:.12em; margin-bottom:.65rem; }.facts strong { font:700 clamp(1.15rem,2vw,1.65rem) var(--font-display); }
.stage { position:relative; padding-bottom:5.5rem; scroll-margin-top:1.5rem; }
.stage-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,25rem); gap:2rem; align-items:end; margin-bottom:1.4rem; }
.stage-heading h2 { margin:0; font:700 clamp(2.2rem,4vw,4rem)/1 var(--font-display); letter-spacing:-.055em; }
.stage-heading > p { margin:0; color:var(--color-muted); font-size:.9rem; line-height:1.6; }
.transition { display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:64px; padding:.7rem 1rem; border:1px solid var(--color-line); border-top:0; font-size:.85rem; color:var(--color-muted); }
.transition-icon { color:var(--color-accent); font-size:1.5rem; }.transition p { margin:0; flex:1; }
.text-link { font:700 .7rem var(--font-mono); color:var(--color-accent); text-decoration:none; white-space:nowrap; }
.text-link:hover { text-decoration:underline; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-items:start; }
.joint-context { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--color-line); border:1px solid var(--color-line); margin-bottom:1rem; animation:context-reveal .45s ease-out both; }
.joint-context[hidden] { display:none; }
.joint-context > div { min-width:0; background:#0e2635; padding:.8rem 1rem; }
.joint-context span { display:block; color:var(--color-muted); font:700 .59rem var(--font-mono); letter-spacing:.1em; margin-bottom:.4rem; }
.joint-context strong { color:var(--color-text); font:700 clamp(1rem,1.7vw,1.35rem) var(--font-display); }
.joint-context .context-note { grid-column:1/-1; margin:0; padding:.55rem 1rem; background:#0a202e; color:var(--color-muted); font:.65rem var(--font-mono); line-height:1.45; }
@keyframes context-reveal { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
.completion { min-height:2.5rem; padding-top:1rem; color:var(--color-accent); font:.75rem var(--font-mono); }
.review-shell { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); border:1px solid var(--color-line); background:var(--color-panel); }
.review-intro { min-width:0; padding:clamp(1.2rem,2.8vw,2.6rem); border-right:1px solid var(--color-line); display:flex; flex-direction:column; justify-content:center; }
.review-intro > span { color:var(--color-accent); font:700 .68rem var(--font-mono); letter-spacing:.13em; }
.review-intro > strong { display:block; max-width:25rem; margin:1.1rem 0; font:700 clamp(1.9rem,3.3vw,3.2rem)/1.03 var(--font-display); letter-spacing:-.055em; }
.review-intro p { max-width:26rem; margin:0; color:var(--color-muted); font-size:.9rem; line-height:1.65; }
.review-chain { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:2.2rem; color:var(--color-muted); font:600 .59rem var(--font-mono); letter-spacing:.04em; }
.review-chain i { width:14px; height:1px; background:var(--color-accent); }
.review-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--color-line); }
.review-card { min-height:120px; min-width:0; background:#0e2635; padding:1.15rem 1.25rem; border-left:3px solid var(--card-accent,var(--color-line)); }
.review-card > span { display:block; color:var(--color-muted); font:700 .62rem var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.review-card strong { display:block; margin:.75rem 0 .45rem; color:var(--color-text); font:700 clamp(1.25rem,2.1vw,1.9rem) var(--font-display); }
.review-card strong { font-variant-numeric:tabular-nums; white-space:nowrap; }
.number-visual { display:inline-flex; align-items:baseline; white-space:nowrap; }
.digit-window { display:block; flex:0 0 .63em; height:1em; overflow:hidden; }
.digit-track { display:flex; flex-direction:column; line-height:1; transform:translateY(0); transition:transform 850ms cubic-bezier(.2,.8,.2,1); }
.digit-track > span { display:flex; flex:0 0 1em; align-items:center; height:1em; line-height:1; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(prefers-reduced-motion:reduce){.digit-track{transition:none}.joint-context{animation:none}}
.review-card small { display:block; color:var(--color-muted); font-size:.73rem; line-height:1.35; }
.interpretation { position:relative; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:2rem 4rem; padding:3rem 0 5rem; border-top:1px solid var(--color-line); }
.interpretation .overline { grid-column:1/-1; margin:0; }.interpretation h2 { margin:0; font:700 clamp(2.4rem,4.2vw,4.8rem)/1 var(--font-display); letter-spacing:-.06em; }.interpretation > p:not(.overline) { align-self:center; margin:0; color:var(--color-muted); font-size:1rem; line-height:1.75; }.interpretation strong { color:var(--color-text); }
.interpretation-rule { position:absolute; right:0; bottom:2rem; width:32%; display:flex; gap:.4rem; }.interpretation-rule i { height:2px; background:var(--color-accent); flex:1; }.interpretation-rule i:nth-child(2) { opacity:.5; }.interpretation-rule i:nth-child(3) { opacity:.2; }
footer { max-width:1440px; margin:auto; padding:1.4rem clamp(1rem,4vw,3rem) 2rem; border-top:1px solid var(--color-line); display:flex; justify-content:space-between; gap:1rem; color:var(--color-muted); font:.58rem var(--font-mono); letter-spacing:.07em; }
@media(max-width:900px){.intro{min-height:0;}.facts{grid-template-columns:repeat(2,minmax(0,1fr));}.facts > div{border-bottom:1px solid var(--color-line)}.facts p{padding:1rem 0;}.stage-heading{grid-template-columns:minmax(0,1fr);gap:.8rem;}.stage-heading > p{max-width:40rem;}.review-shell{grid-template-columns:minmax(0,1fr)}.review-intro{border-right:0;border-bottom:1px solid var(--color-line);}}
@media(max-width:650px){.site-head{align-items:start;}.brand small{display:none;}.head-status{font-size:.52rem;text-align:right;white-space:normal;}.intro{grid-template-columns:minmax(0,1fr);padding-top:3.4rem;gap:2.4rem;}.intro-instrument{width:min(100%,310px);}.facts{margin-bottom:4rem;}.facts > div{padding:.9rem .5rem .9rem 0;margin-right:.5rem;}.facts strong{font-size:1.05rem;}.detail-grid{grid-template-columns:minmax(0,1fr);}.interpretation{grid-template-columns:minmax(0,1fr);gap:1.2rem;}.interpretation-rule{width:55%;}.transition{flex-wrap:wrap;}.transition p{min-width:75%;}footer{flex-wrap:wrap;}}
@media(max-width:375px){h1{font-size:3rem;}.brand{font-size:.65rem;}.facts > div span{font-size:.5rem;}.facts strong{font-size:1rem;}.text-link{font-size:.62rem;}.joint-context{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:450px){.review-cards{grid-template-columns:minmax(0,1fr)}.review-card{min-height:105px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}.instrument-bars i{animation:none;}}
/* --- shared site header (matches /styles.css masthead) --- */
.site-header{width:min(100% - clamp(2rem,7vw,7rem),1450px);min-height:86px;margin:auto;display:flex;align-items:center;gap:clamp(2rem,5vw,4rem);border-bottom:1px solid var(--color-line-soft)}
.company-mark{display:block;flex:none;width:183px}.company-mark img{width:100%;height:auto}
.menu-toggle{display:none;flex:none;place-items:center;width:42px;height:42px;border:1px solid var(--color-line);background:transparent;color:var(--color-text);cursor:pointer;padding:0}
.menu-toggle:hover{border-color:var(--color-accent)}
.menu-toggle:focus-visible,.site-header nav a:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.nav-panel{display:flex;align-items:center;gap:clamp(2rem,4vw,3rem);margin-left:auto}
.site-header nav{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.5rem)}
.site-header nav a,.header-contact{font-size:.8rem;font-weight:700;white-space:nowrap;color:var(--color-muted);text-decoration:none}
.site-header nav a:hover,.header-contact:hover{color:var(--color-accent)}
.site-header nav a.is-active{color:var(--color-text)}
.header-contact{display:flex;gap:1rem;align-items:center;border-left:1px solid var(--color-line);padding-left:1rem;color:var(--color-muted)}
.header-contact span{color:var(--color-accent)}
@media(max-width:768px){.site-header{gap:1rem;min-height:72px;position:relative}.company-mark{width:160px}.menu-toggle{display:grid;margin-left:auto}.nav-panel{position:absolute;top:100%;right:1rem;left:auto;transform:translateY(-6px);flex-direction:column;align-items:stretch;width:max-content;max-width:calc(100vw - 2rem);margin-left:0;background:#0b1d29;border:1px solid var(--color-line);padding:1rem;gap:.5rem;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;z-index:15}.site-header.is-open .nav-panel{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .18s ease,transform .18s ease}.site-header nav{flex-direction:column;align-items:stretch;gap:.25rem;margin:0}.site-header nav a{font-size:1.15rem;padding:.625rem 0;text-align:right}.header-contact{display:none}}