:root {
  --bone: #f1eadc;
  --paper: #f8f3e8;
  --espresso: #28211c;
  --espresso-2: #171411;
  --olive: #51543d;
  --olive-dark: #3e412f;
  --gold: #c49a37;
  --gold-light: #e3bd5c;
  --muted: #756f65;
  --rule: rgba(40, 33, 28, .23);
  --display: "Oswald", Impact, "Arial Narrow", sans-serif;
  --body: "Archivo", Arial, sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --pad: clamp(20px, 4.5vw, 76px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bone); }
body {
  margin: 0; overflow-x: hidden; background-color: var(--bone); color: var(--espresso); font-family: var(--body); transition: background .25s, color .25s;
  background-image: radial-gradient(circle, rgba(40,33,28,.07) 0 .55px, transparent .8px);
  background-size: 8px 8px;
}
body.menu-open { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--gold); color: #171411; }

.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--gold); color: #171411; font-weight: 800; }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .3;
  background-image:
    repeating-linear-gradient(98deg, transparent 0 12px, rgba(40,33,28,.032) 13px, transparent 15px 31px),
    repeating-linear-gradient(4deg, transparent 0 8px, rgba(255,255,255,.048) 9px, transparent 11px 24px),
    repeating-linear-gradient(176deg, transparent 0 47px, rgba(40,33,28,.02) 48px, transparent 50px 91px);
  background-size: 31px 100%, 100% 24px, 100% 91px; mix-blend-mode: multiply;
}
body::after {
  display: none;
}

.site-header {
  min-height: 100px; padding: 14px var(--pad); display: grid; grid-template-columns: minmax(280px, 1fr) auto;
  align-items: center; gap: 30px; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--bone) 94%, transparent);
  position: relative; z-index: 30;
}
.identity { display: inline-flex; align-items: center; gap: 14px; width: max-content; }
.identity-mark {
  width: 70px;
  height: 70px;
  overflow: hidden;
  background: transparent url("assets/mattskr_logo_150w.png") center / contain no-repeat;
}
.identity-mark img { width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.identity-type { display: flex; flex-direction: column; line-height: 1; }
.identity-type strong { font-family: var(--display); font-size: clamp(19px, 2vw, 28px); text-transform: uppercase; letter-spacing: .03em; }
.identity-type strong b { color: var(--olive); }
.identity-type small { margin-top: 7px; font: 500 9px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .13em; }
.primary-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.primary-nav a { font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; position: relative; }
.primary-nav a:not(.nav-contact)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; background: var(--gold); transition: right .25s; }
.primary-nav a:hover::after { right: 0; }
.nav-contact { padding: 12px 15px; border: 1px solid currentColor; }
.nav-contact:hover { background: var(--gold); color: #171411; border-color: var(--gold); }
.menu-button { display: none; }

.hero-lab { background: var(--bone); }
.launch-selected .hero-lab-bar { display: none; }
.hero-lab-bar { padding: 13px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--rule); }
.hero-lab-bar > div:first-child { display: flex; align-items: center; gap: 18px; }
.hero-lab-bar p { margin: 0; font-size: 11px; color: var(--muted); }
.micro-label, .eyebrow, .section-number { font: 600 9px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .17em; }
.micro-label { color: var(--gold); }
.hero-tabs { display: flex; gap: 5px; }
.hero-tabs button { border: 1px solid var(--rule); background: transparent; padding: 9px 11px; cursor: pointer; font: 500 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.hero-tabs button b { color: var(--gold); margin-right: 4px; }
.hero-tabs button[aria-selected="true"] { background: var(--espresso); color: var(--bone); border-color: var(--espresso); }
.hero-stage { min-height: min(760px, calc(100vh - 145px)); position: relative; overflow: hidden; background: var(--olive); }
.hero-panel { min-height: min(760px, calc(100vh - 145px)); position: relative; animation: hero-in .6s var(--ease) both; }
.hero-panel[hidden] { display: none; }
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } }

.hero-panel--launch { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); color: #f3ebdc; }
.hero-panel--launch::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0 64%, rgba(0,0,0,.14) 64%); pointer-events: none; }
.hero-copy { padding: clamp(55px, 8vw, 120px) var(--pad); align-self: center; position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: rgba(243,235,220,.76); }
.eyebrow span { width: 36px; height: 3px; background: var(--gold); }
.hero-copy h1, .relief-answer h1, .both-answer h1, .comic-resolution h1 {
  font: 700 clamp(68px, 9.2vw, 152px)/.94 var(--display); letter-spacing: -.018em; text-transform: uppercase; margin: 24px 0 28px;
}
.hero-copy h1 em { color: var(--gold-light); font-style: normal; }
.hero-lede { font-size: clamp(16px, 1.45vw, 21px); line-height: 1.5; max-width: 590px; margin: 0 0 36px; }
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-width: 230px; padding: 16px 18px; font: 700 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid transparent; transition: transform .22s var(--ease), background .22s, color .22s; }
.button:hover { transform: translate(-3px, -3px); }
.button--gold { background: var(--gold); color: #171411; box-shadow: 5px 5px 0 rgba(23,20,17,.3); }
.text-link { display: inline-flex; gap: 12px; align-items: center; font: 700 10px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
.text-link span { color: var(--gold); transition: transform .2s; }
.text-link:hover span { transform: translateX(5px); }
.launch-art { min-height: 100%; position: relative; display: grid; place-items: center; background: var(--paper); color: var(--espresso); overflow: hidden; cursor: crosshair; }
.launch-art::before, .launch-art::after { content: ""; position: absolute; inset: 8%; border: 1px solid var(--rule); transform: rotate(-4deg); transition: transform .25s var(--ease); }
.launch-art::after { transform: rotate(3deg); border-color: var(--gold); inset: 13%; }
.launch-word { font: 700 clamp(210px, 29vw, 470px)/.75 var(--display); letter-spacing: -.12em; transform: rotate(-6deg); color: var(--espresso); position: relative; z-index: 2; transition: text-shadow .22s, transform .22s; }
.launch-art:hover .launch-word, .launch-art:focus-visible .launch-word { text-shadow: 11px 0 var(--gold), -9px 0 var(--olive); transform: rotate(-3deg) scale(1.025); }
.launch-art:hover::before, .launch-art:focus-visible::before { transform: translate(-8px, 5px) rotate(-5deg); }
.launch-art:hover::after, .launch-art:focus-visible::after { transform: translate(9px, -5px) rotate(4deg); }
.launch-orbit { position: absolute; border: 2px solid var(--gold); width: 58%; aspect-ratio: 1; border-radius: 50%; z-index: 1; }
.launch-orbit--two { width: 82%; border-color: var(--rule); }
.launch-tag { position: absolute; right: 7%; top: 9%; z-index: 4; background: var(--gold); color: #171411; padding: 12px; font: 700 11px/1.25 var(--mono); text-transform: uppercase; transform: rotate(3deg); box-shadow: 5px 5px 0 var(--espresso); }
.registration-note { position: absolute; left: 7%; bottom: 7%; font: 500 8px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }

.hero-panel--relief { background: var(--paper); display: grid; grid-template-columns: .9fr 1.1fr; min-height: inherit; }
.relief-quote { padding: clamp(55px, 8vw, 120px) var(--pad); position: relative; display: flex; align-items: center; background: var(--espresso); color: var(--bone); overflow: hidden; }
.relief-quote::after { content: ""; position: absolute; width: 280px; height: 14px; background: var(--gold); transform: rotate(-9deg); bottom: 18%; right: -40px; }
.quote-mark { position: absolute; font: 700 500px/.7 Georgia, serif; color: rgba(196,154,55,.18); top: -25px; left: 15px; }
.relief-quote p { position: relative; z-index: 2; margin: 0; font: 600 clamp(42px, 6vw, 92px)/1.02 var(--display); text-transform: uppercase; }
.relief-quote strong { color: var(--gold-light); }
.relief-answer { padding: clamp(60px, 9vw, 135px) var(--pad); align-self: center; }
.relief-answer .eyebrow { color: var(--muted); }
.relief-answer h1 { font-size: clamp(58px, 7.4vw, 112px); color: var(--espresso); }
.relief-stamp { position: absolute; right: -25px; bottom: -25px; border: 6px solid var(--gold); color: var(--gold); padding: 16px 28px; transform: rotate(-8deg); font: 700 42px/.85 var(--display); text-align: center; opacity: .45; }

.hero-panel--both { background: var(--espresso); color: var(--bone); display: grid; grid-template-columns: 1fr 70px 1fr; grid-template-rows: 1fr auto; padding: clamp(35px, 5vw, 74px) var(--pad); gap: 0; }
.both-column { padding: clamp(25px, 4vw, 60px); border: 1px solid rgba(241,234,220,.22); min-height: 385px; }
.both-column h2 { font: 700 clamp(52px, 6vw, 92px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.025em; margin: 24px 0; color: rgba(241,234,220,.48); }
.both-column p { max-width: 460px; font-size: 15px; line-height: 1.6; color: rgba(241,234,220,.66); }
.both-spine { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.both-spine span { font: 700 12px/1 var(--mono); }
.both-spine i { width: 32px; height: 7px; background: var(--gold); }
.both-answer { grid-column: 1 / -1; background: var(--olive); color: #f3ebdc; padding: 28px clamp(25px, 4vw, 60px); display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 28px; }
.both-answer h1 { font-size: clamp(58px, 8vw, 124px); margin: 0; white-space: nowrap; }
.both-answer p { margin: 0; max-width: 620px; line-height: 1.5; }

.hero-panel--comic { background: var(--espresso); color: var(--bone); padding: 28px var(--pad) 42px; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 70px); align-items: stretch; }
.comic-story { position: relative; min-height: 610px; border: 6px solid #15120f; background: var(--paper); overflow: hidden; box-shadow: 12px 12px 0 var(--gold); }
.comic-kicker { position: absolute; left: 0; right: 0; top: 0; z-index: 8; display: flex; justify-content: space-between; padding: 13px 15px; background: #171411; color: #fff; font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.comic-kicker b { color: var(--gold-light); }
.story-panel { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .52s ease, visibility .52s; }
.story-panel.is-current { opacity: 1; visibility: visible; }
.story-background { position: absolute; inset: 0; background-color: #efe6d5; transform: scale(1.035); transition: transform 5.5s linear; }
.story-panel.is-current .story-background { transform: scale(1); }
.story-background::before, .story-background::after { content: ""; position: absolute; }
.story-background--mess {
  background-image: linear-gradient(128deg, transparent 0 48%, rgba(81,84,61,.28) 49% 54%, transparent 55%), repeating-linear-gradient(0deg, rgba(40,33,28,.12) 0 1px, transparent 1px 52px);
}
.story-background--mess::before { width: 64%; height: 38%; right: -8%; bottom: 5%; border: 18px solid var(--olive); transform: rotate(-8deg); box-shadow: -80px -90px 0 -35px var(--gold); }
.story-background--mess::after { width: 44%; height: 11px; left: 5%; top: 30%; background: var(--gold); box-shadow: 45px 45px 0 var(--olive), 12px 90px 0 var(--espresso); transform: rotate(-4deg); }
.story-background--plan { background-image: linear-gradient(rgba(40,33,28,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(40,33,28,.09) 1px, transparent 1px); background-size: 58px 58px; }
.story-background--plan::before { inset: 16% 10% 12% 24%; border: 4px solid var(--olive); background: linear-gradient(135deg, transparent 0 38%, var(--gold) 39% 43%, transparent 44% 62%, var(--olive) 63% 68%, transparent 69%); transform: rotate(2deg); }
.story-background--plan::after { width: 90px; height: 90px; border: 4px solid var(--gold); border-radius: 50%; right: 11%; bottom: 12%; }
.story-background--built { background: var(--olive); }
.story-background--built::before { width: 68%; height: 68%; right: -8%; bottom: -5%; background: var(--gold); clip-path: polygon(0 28%, 66% 0, 100% 18%, 92% 100%, 20% 89%); }
.story-background--built::after { inset: 16% 11%; border: 2px solid rgba(255,255,255,.5); transform: rotate(-3deg); }
.story-caption { position: absolute; z-index: 5; left: 4%; top: 11%; max-width: 72%; padding: 8px 10px; background: #171411; color: #fff; font: 600 9px/1.2 var(--mono); text-transform: uppercase; transform: rotate(-1deg); }
.story-speech { position: absolute; z-index: 6; left: 6%; right: 17%; top: 21%; min-height: 92px; background: #fffdf7; color: #171411; border: 4px solid #171411; padding: 17px 18px; box-shadow: 7px 7px 0 #171411; font: 800 clamp(18px, 2vw, 28px)/1.12 var(--body); }
.story-speech--right { left: 19%; right: 5%; }
.story-speech i { position: absolute; width: 22px; height: 22px; background: inherit; border-right: 4px solid #171411; border-bottom: 4px solid #171411; transform: rotate(45deg); left: 20%; bottom: -14px; }
.story-speech--right i { left: auto; right: 22%; }
.story-progress { position: absolute; z-index: 9; left: 15px; bottom: 15px; display: flex; gap: 6px; }
.story-progress i { width: 30px; height: 5px; background: rgba(23,20,17,.3); }
.story-progress i.is-on { background: var(--gold); }
.comic-static { align-self: center; padding: 45px 0; }
.comic-static h1 { font: 700 clamp(58px, 7.1vw, 112px)/.94 var(--display); letter-spacing: -.015em; text-transform: uppercase; margin: 30px 0; }
.comic-static p { max-width: 600px; line-height: 1.6; font-size: 17px; margin: 0 0 34px; color: color-mix(in srgb, var(--bone) 70%, transparent); }
.marek-sprite { position: absolute; background-image: url("assets/marek-expression-sheet.png"); background-repeat: no-repeat; background-size: 400% 300%; filter: contrast(1.03); }
.marek-sprite--tired { width: 78%; height: 60%; left: 7%; bottom: -2%; background-position: 33.333% 100%; animation: marek-drift 4s ease-in-out infinite alternate; }
.marek-sprite--point { width: 94%; height: 58%; left: 1%; bottom: -1%; background-position: 100% 0%; animation: marek-drift 3.4s ease-in-out infinite alternate-reverse; }
.marek-sprite--approve { width: 74%; height: 59%; right: 1%; bottom: -3%; background-position: 66.666% 0%; animation: marek-drift 4.4s ease-in-out infinite alternate; }
@keyframes marek-drift { to { transform: translate(4px, -6px) rotate(.5deg); } }

.hero-panel--hybrid { background: var(--espresso); color: var(--bone); padding: 28px var(--pad) 42px; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 70px); align-items: stretch; }
.hybrid-story { position: relative; min-height: 610px; border: 6px solid #15120f; background: var(--paper); overflow: hidden; box-shadow: 12px 12px 0 var(--gold); }
.hybrid-set, .hybrid-beat { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .38s ease, visibility .38s; }
.hybrid-set.is-current, .hybrid-set.is-current .hybrid-beat.is-current { opacity: 1; visibility: visible; }
.story-background--launch { background: var(--paper); }
.story-background--launch::before { width: 76%; aspect-ratio: 1; border: 24px solid var(--gold); border-radius: 50%; right: -17%; bottom: -24%; box-shadow: -100px -90px 0 -55px var(--olive); }
.story-background--launch::after { width: 47%; height: 24%; left: -7%; bottom: 12%; background: var(--espresso); transform: rotate(-8deg); }
.story-background--relief { background: linear-gradient(135deg, var(--paper) 0 54%, #d7cdbb 55%); }
.story-background--relief::before { inset: 15% 9% 9% 18%; border: 3px solid var(--olive); box-shadow: 18px 18px 0 var(--gold), -18px -18px 0 rgba(40,33,28,.12); transform: rotate(2deg); }
.story-background--relief::after { width: 190px; height: 12px; background: var(--gold); top: 43%; left: 5%; box-shadow: 70px 54px 0 var(--olive), 25px 104px 0 var(--espresso); }
.story-background--both { background: linear-gradient(90deg, var(--olive) 0 48%, var(--gold) 48% 52%, #e7dece 52%); }
.story-background--both::before { width: 34%; height: 52%; left: 7%; bottom: 8%; border: 7px solid #171411; transform: skewY(-4deg); }
.story-background--both::after { width: 34%; height: 52%; right: 7%; bottom: 8%; border: 7px solid #171411; transform: skewY(4deg); }
.marek-sprite--launch { width: 76%; height: 58%; right: -1%; bottom: -2%; background-position: 0 0; animation: marek-drift 3.4s ease-in-out infinite alternate; }
.marek-sprite--relief { width: 82%; height: 59%; left: 1%; bottom: -2%; background-position: 33.333% 50%; animation: marek-drift 4s ease-in-out infinite alternate-reverse; }
.marek-sprite--both { width: 76%; height: 58%; right: 0; bottom: -2%; background-position: 66.666% 0; animation: marek-drift 3.7s ease-in-out infinite alternate; }
.hybrid-impact { position: absolute; z-index: 4; left: 4%; bottom: 3%; font: 700 clamp(70px, 9vw, 140px)/.8 var(--display); letter-spacing: -.04em; color: rgba(23,20,17,.22); transform: rotate(-4deg); }
.hybrid-impact--small { font-size: clamp(58px, 7.5vw, 112px); }
.hybrid-progress { position: absolute; z-index: 9; left: 15px; bottom: 15px; display: flex; gap: 6px; }
.hybrid-progress i { width: 30px; height: 5px; background: rgba(23,20,17,.3); }
.hybrid-progress i.is-on { background: var(--gold); }
.hybrid-copy { align-self: center; position: relative; min-height: 520px; display: flex; align-items: center; }
.hybrid-copy-set { position: absolute; inset: auto 0; opacity: 0; visibility: hidden; transform: translateY(13px); transition: opacity .42s ease, visibility .42s, transform .42s var(--ease); }
.hybrid-copy-set.is-current { opacity: 1; visibility: visible; transform: none; }
.hybrid-copy-set h1 { font: 700 clamp(55px, 6.7vw, 106px)/.94 var(--display); letter-spacing: -.015em; text-transform: uppercase; margin: 30px 0; }
.hybrid-copy-set > p { max-width: 630px; line-height: 1.6; font-size: 17px; margin: 0 0 34px; color: color-mix(in srgb, var(--bone) 70%, transparent); }

.signal-strip { background: var(--gold); color: #171411; min-height: 86px; padding: 18px var(--pad); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.signal-text { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 70px); font: 700 clamp(24px, 3.6vw, 54px)/1 var(--display); text-transform: uppercase; transition: transform .6s var(--ease), letter-spacing .6s ease, filter .6s ease; }
.signal-text::before, .signal-text::after { content: attr(data-text); position: absolute; inset: 0; display: flex; align-items: center; white-space: nowrap; pointer-events: none; opacity: 0; }
.signal-strip.glitch-a .signal-text::before { color: #f1eadc; clip-path: inset(14% 0 62% 0); animation: glitch-drift-a .32s var(--ease) both; }
.signal-strip.glitch-a .signal-text::after { color: var(--olive); clip-path: inset(65% 0 8% 0); animation: glitch-drift-b .32s var(--ease) both; }
.signal-strip.glitch-b .signal-text { animation: glitch-body .35s var(--ease) both; }
.signal-strip.glitch-b .signal-text::before { color: #f1eadc; clip-path: inset(38% 0 43% 0); animation: glitch-drift-c .35s var(--ease) both; }
.signal-strip.glitch-c .signal-text { animation: glitch-breathe .38s ease both; }
.signal-strip.glitch-c .signal-text::after { color: var(--olive); clip-path: inset(4% 0 78% 0); animation: glitch-drift-d .38s var(--ease) both; }
.signal-strip.glitch-d .signal-text { animation: glitch-drop .34s var(--ease) both; }
.signal-strip.glitch-d .signal-text::before { color: #f1eadc; clip-path: inset(18% 0 57% 0); animation: glitch-slice-drop .34s var(--ease) both; }
.signal-strip.glitch-d .signal-text::after { color: var(--olive); clip-path: inset(59% 0 16% 0); animation: glitch-slice-rise .34s var(--ease) both; }
.signal-strip.glitch-e .signal-text { animation: glitch-compress .36s var(--ease) both; }
.signal-strip.glitch-e .signal-text::before { color: #f1eadc; clip-path: inset(33% 0 39% 0); animation: glitch-shear-right .36s var(--ease) both; }
.signal-strip.glitch-e .signal-text::after { color: var(--olive); clip-path: inset(52% 0 20% 0); animation: glitch-shear-left .36s var(--ease) both; }
.signal-strip.glitch-f .signal-text { animation: glitch-tilt .33s var(--ease) both; }
.signal-strip.glitch-f .signal-text::before { color: #f1eadc; clip-path: inset(0 0 76% 0); animation: glitch-cap-left .33s var(--ease) both; }
.signal-strip.glitch-f .signal-text::after { color: var(--olive); clip-path: inset(76% 0 0 0); animation: glitch-cap-right .33s var(--ease) both; }
@keyframes glitch-drift-a { 0%,100% { opacity: 0; transform: translate(0); } 18% { opacity: .24; transform: translate(3px,-1px); } 40% { opacity: .72; transform: translate(10px,-3px); } 64% { opacity: .34; transform: translate(5px,-1px); } 82% { opacity: .56; transform: translate(7px,-2px); } }
@keyframes glitch-drift-b { 0%,100% { opacity: 0; transform: translate(0); } 20% { opacity: .2; transform: translate(-2px,1px); } 43% { opacity: .6; transform: translate(-9px,4px); } 68% { opacity: .3; transform: translate(-4px,2px); } 84% { opacity: .48; transform: translate(-6px,3px); } }
@keyframes glitch-drift-c { 0%,100% { opacity: 0; transform: translateX(0); } 20% { opacity: .2; transform: translateX(-3px); } 44% { opacity: .76; transform: translateX(-12px); } 65% { opacity: .3; transform: translateX(-5px); } 84% { opacity: .52; transform: translateX(-8px); } }
@keyframes glitch-drift-d { 0%,100% { opacity: 0; transform: translate(0); } 22% { opacity: .16; transform: translate(3px,0); } 46% { opacity: .72; transform: translate(12px,2px); } 67% { opacity: .25; transform: translate(4px,1px); } 84% { opacity: .46; transform: translate(8px,1px); } }
@keyframes glitch-body { 0%,100% { transform: skewX(0) translateX(0); } 24% { transform: skewX(-1deg) translateX(1px); } 48% { transform: skewX(-3deg) translateX(4px); } 70% { transform: skewX(1deg) translateX(-2px); } 86% { transform: skewX(-.5deg) translateX(1px); } }
@keyframes glitch-breathe { 0%,100% { letter-spacing: 0; filter: contrast(1); } 28% { letter-spacing: .01em; } 53% { letter-spacing: .027em; filter: contrast(1.18); } 76% { letter-spacing: .009em; } }
@keyframes glitch-drop { 0%,100% { transform: translateY(0); } 24% { transform: translateY(-1px); } 46% { transform: translateY(3px); } 67% { transform: translateY(-1px); } 84% { transform: translateY(1px); } }
@keyframes glitch-slice-drop { 0%,100% { opacity: 0; transform: translate(0); } 22% { opacity: .18; transform: translate(2px,-2px); } 45% { opacity: .68; transform: translate(7px,7px); } 68% { opacity: .32; transform: translate(3px,2px); } 84% { opacity: .5; transform: translate(5px,4px); } }
@keyframes glitch-slice-rise { 0%,100% { opacity: 0; transform: translate(0); } 20% { opacity: .16; transform: translate(-2px,2px); } 44% { opacity: .62; transform: translate(-8px,-6px); } 66% { opacity: .28; transform: translate(-3px,-2px); } 83% { opacity: .46; transform: translate(-5px,-4px); } }
@keyframes glitch-compress { 0%,100% { transform: scaleX(1); letter-spacing: -.035em; } 27% { transform: scaleX(.998); letter-spacing: -.04em; } 49% { transform: scaleX(.976); letter-spacing: -.055em; } 71% { transform: scaleX(1.008); letter-spacing: -.03em; } 87% { transform: scaleX(.997); letter-spacing: -.038em; } }
@keyframes glitch-shear-right { 0%,100% { opacity: 0; transform: translateX(0) skewX(0); } 23% { opacity: .18; transform: translateX(2px) skewX(-2deg); } 47% { opacity: .7; transform: translateX(13px) skewX(-8deg); } 68% { opacity: .3; transform: translateX(4px) skewX(-3deg); } 85% { opacity: .5; transform: translateX(8px) skewX(-5deg); } }
@keyframes glitch-shear-left { 0%,100% { opacity: 0; transform: translateX(0) skewX(0); } 21% { opacity: .15; transform: translateX(-2px) skewX(2deg); } 46% { opacity: .62; transform: translateX(-11px) skewX(7deg); } 69% { opacity: .26; transform: translateX(-3px) skewX(2deg); } 84% { opacity: .44; transform: translateX(-7px) skewX(4deg); } }
@keyframes glitch-tilt { 0%,100% { transform: rotate(0) translateX(0); } 25% { transform: rotate(-.08deg) translateX(-1px); } 48% { transform: rotate(.22deg) translateX(3px); } 70% { transform: rotate(-.12deg) translateX(-2px); } 86% { transform: rotate(.05deg) translateX(1px); } }
@keyframes glitch-cap-left { 0%,100% { opacity: 0; transform: translateX(0); } 22% { opacity: .16; transform: translateX(-2px); } 46% { opacity: .68; transform: translateX(-14px); } 67% { opacity: .28; transform: translateX(-4px); } 84% { opacity: .48; transform: translateX(-9px); } }
@keyframes glitch-cap-right { 0%,100% { opacity: 0; transform: translateX(0); } 20% { opacity: .14; transform: translateX(2px); } 45% { opacity: .64; transform: translateX(15px); } 68% { opacity: .26; transform: translateX(5px); } 84% { opacity: .46; transform: translateX(10px); } }
.signal-strip i { width: 9px; height: 9px; background: #171411; transform: rotate(45deg); }

.section-shell { padding: clamp(44px, 5vw, 72px) var(--pad); }
.section-number { display: block; color: var(--gold); margin-bottom: 18px; }
.section-heading { display: grid; grid-template-columns: 1.25fr .75fr; column-gap: clamp(40px, 8vw, 140px); align-items: end; }
.section-heading .section-number { grid-column: 1 / -1; }
.section-heading h2, .work-heading h2, .system-intro h2, .why-copy h2, .closing-section h2 {
  font: 700 clamp(36px, 4vw, 60px)/1 var(--display); text-transform: uppercase; letter-spacing: -.006em; margin: 0;
}
.register-heading { position: relative; width: fit-content; }
.register-main { position: relative; z-index: 3; display: block; }
.register-plate { display: none; }
.section-heading h2 em { color: var(--olive); font-style: normal; }
.section-heading > p { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.55; margin: 0 0 8px; }
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); margin-top: 32px; }
.problem-grid article { padding: 22px clamp(10px, 4vw, 48px) 0 0; min-height: 215px; position: relative; }
.problem-grid article + article { border-left: 1px solid var(--rule); padding-left: clamp(26px, 4vw, 62px); }
.problem-icon { font: 700 35px/1 var(--mono); color: var(--gold); }
.problem-grid h3 { font: 700 clamp(30px, 3vw, 46px)/1 var(--display); text-transform: uppercase; margin: 20px 0 12px; }
.problem-grid p { max-width: 570px; line-height: 1.65; color: var(--muted); }
.problem-grid .text-link { margin-top: 22px; }

.system-section { background: var(--espresso); color: var(--bone); }
.system-intro { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: end; padding-bottom: 28px; }
.system-intro .section-number { grid-column: 1 / -1; }
.system-intro h2 { font-size: clamp(36px, 4vw, 60px); }
.system-intro > p { line-height: 1.6; font-size: 17px; color: color-mix(in srgb, var(--bone) 66%, transparent); }
.system-cards { padding-top: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.system-cards article { border: 1px solid color-mix(in srgb, var(--bone) 20%, transparent); padding: 22px; min-height: 240px; position: relative; display:flex; flex-direction:column; }
.system-cards article + article { border-left: 0; }
.system-index { font: 600 10px/1 var(--mono); color: var(--gold-light); }
.system-bar { width: 100%; height: 8px; background: var(--gold); margin: 20px 0 18px; }
.system-cards article:nth-child(2) .system-bar { width: 70%; }
.system-cards article:nth-child(3) .system-bar { width: 40%; }
.system-cards h3 { font: 700 clamp(34px, 3.5vw, 50px)/1 var(--display); text-transform: uppercase; margin: 0 0 10px; }
.system-cards p { line-height: 1.62; color: color-mix(in srgb, var(--bone) 68%, transparent); }
.system-cards small { margin-top:auto; padding-top:14px; font: 500 9px/1.3 var(--mono); text-transform: uppercase; color: var(--gold-light); letter-spacing: .09em; }

.work-section { position: relative; }
.work-heading { display: flex; justify-content: space-between; align-items: end; gap: 60px; padding-bottom: 32px; }
.work-heading h2 { font-size: clamp(36px, 4vw, 60px); }
.work-heading > p { max-width: 520px; line-height: 1.6; }
.work-list { border-top: 3px solid var(--espresso); margin-bottom: 42px; }
.work-row { display: grid; grid-template-columns: 42px 96px minmax(250px, 1fr) minmax(280px, .8fr) 40px; gap: 20px; align-items: center; border-bottom: 1px solid var(--rule); padding: 13px 8px; position: relative; transition: color .25s, padding .25s var(--ease); }
.work-row::before { content: ""; position: absolute; inset: 0; background: var(--olive); transform: scaleY(0); transform-origin: bottom; transition: transform .32s var(--ease); z-index: 0; }
.work-row > * { position: relative; z-index: 1; }
.work-row:hover { color: #f3ebdc; padding-left: 23px; }
.work-row:hover::before { transform: scaleY(1); transform-origin: top; }
.work-index { font: 600 10px/1 var(--mono); color: var(--gold); }
.work-thumb { width: 96px; height: 62px; object-fit: cover; border: 1px solid var(--rule); filter: saturate(.78) contrast(1.04); transform-origin: 45% 60%; }
.work-row:hover .work-thumb { animation: thumb-wobble .72s var(--ease) both; }
.work-row--logos .work-thumb {
  background: #fff;
  object-fit: contain;
  object-position: left center;
  padding: 4px;
}
@keyframes thumb-wobble { 0% { transform: rotate(0) translate(0); } 24% { transform: rotate(-3.2deg) translate(-2px,1px); } 51% { transform: rotate(2deg) translate(2px,-1px); } 73% { transform: rotate(-.8deg) translate(-1px,0); } 100% { transform: rotate(.4deg) translate(0); } }
.work-row small { font: 500 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .11em; color: var(--muted); }
.work-row:hover small { color: rgba(243,235,220,.62); }
.work-row h3 { font: 700 clamp(28px, 3.4vw, 50px)/.98 var(--display); text-transform: uppercase; margin: 5px 0 0; }
.work-row p { font-size: 13px; line-height: 1.5; }
.work-arrow { font-size: 22px; color: var(--gold); }
.work-preview { display: block; position: fixed; left: 0; top: 0; width: 240px; z-index: 50; pointer-events: none; background: #171411; color: #fff; border: 3px solid var(--gold); box-shadow: 10px 12px 35px rgba(0,0,0,.3); opacity: 0; visibility: hidden; transform: translate3d(var(--preview-x, -300px), var(--preview-y, -300px), 0) rotate(var(--preview-r, -2deg)) scale(.94); transition: opacity .24s ease, visibility .24s, transform .08s linear; will-change: transform; }
.work-preview.is-visible { opacity: 1; visibility: visible; transform: translate3d(var(--preview-x, -300px), var(--preview-y, -300px), 0) rotate(var(--preview-r, -2deg)) scale(1); }
.work-preview img { width: 100%; height: 260px; object-fit: cover; object-position: center top; }
.work-preview.is-logo-preview { background: #fff; }
.work-preview.is-logo-preview img {
  background: #fff;
  object-fit: contain;
  object-position: left center;
  padding: 10px;
}
.work-preview.is-logo-preview span {
  color: var(--espresso);
  border-top: 1px solid var(--rule);
}
.work-preview span { display: block; padding: 8px; font: 500 8px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.button--outline { border-color: var(--espresso); color: var(--espresso); }
.button--outline:hover { background: var(--gold); color: #171411; border-color: var(--gold); }

.why-section { display: grid; grid-template-columns: 1.2fr .8fr; background: var(--olive); color: #f3ebdc; min-height: 500px; }
.why-copy { padding: clamp(46px, 5vw, 74px) var(--pad); }
.why-copy h2 { font-size: clamp(36px, 4vw, 58px); }
.why-lede { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; max-width: 780px; margin: 24px 0; }
.why-copy ul { list-style: none; padding: 0; margin: 24px 0; border-top: 1px solid rgba(243,235,220,.28); max-width: 850px; }
.why-copy li { display: grid; grid-template-columns: 55px 1fr; gap: 16px; padding: 17px 0; border-bottom: 1px solid rgba(243,235,220,.2); }
.why-copy li span { color: var(--gold-light); font: 500 9px/1.5 var(--mono); }
.text-link--light { color: #f3ebdc; }
.why-marek { background: var(--gold); color: #171411; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.marek-crop { position: absolute; inset: 0; background-image: url("assets/marek-expression-sheet.png"); background-size: 400% 300%; background-position: 66.666% 50%; background-repeat: no-repeat; transform: scale(1.14); transform-origin: center bottom; }
.why-marek blockquote { position: relative; z-index: 2; margin: 0 10% 8%; background: #fffdf7; border: 3px solid #171411; padding: 20px; box-shadow: 7px 7px 0 #171411; font: 700 17px/1.25 var(--body); }

.closing-section { min-height: 360px; position: relative; overflow: hidden; padding: clamp(50px, 5vw, 76px) var(--pad); background: var(--gold); color: #171411; }
.closing-kicker { font: 700 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.closing-section h2 { margin: 20px 0 30px; position: relative; z-index: 2; }
.button--dark { background: #171411; color: #f3ebdc; position: relative; z-index: 2; box-shadow: 6px 6px 0 rgba(255,255,255,.5); }
.closing-mark { position: absolute; width: min(610px, 48vw); right: -5%; top: 3%; opacity: .16; transform: rotate(7deg); background: #fff; }

.site-footer { min-height: 150px; padding: 35px var(--pad); background: #171411; color: #f3ebdc; display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; font: 500 10px/1.5 var(--mono); }
.site-footer > div { display: flex; flex-direction: column; text-transform: uppercase; }
.site-footer > div:last-child { align-items: flex-end; }
.site-footer a:hover { color: var(--gold-light); }

/* Espresso surfaces use a restrained drafting grid; the paper grain stays linear, never dotted. */
.hero-panel--both,
.hero-panel--comic,
.hero-panel--hybrid,
.relief-quote,
.system-section,
.site-footer {
  background-color: var(--espresso);
  background-image:
    linear-gradient(rgba(241,234,220,.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241,234,220,.052) 1px, transparent 1px),
    linear-gradient(rgba(241,234,220,.021) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241,234,220,.021) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px, 18px 18px, 18px 18px;
  background-position: -1px -1px;
}

/* Supporting pages */
.inner-page .site-header { background-color: rgba(241,234,220,.96); }
.inner-page .primary-nav a[aria-current="page"] { color: var(--olive); }
.primary-nav a[href*="why-this-guy"] { display:none; }
.page-hero { min-height:360px; padding:clamp(50px,6vw,82px) var(--pad); display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,6vw,90px); align-items:end; border-bottom:1px solid var(--rule); }
.page-hero--dark { background-color:var(--espresso); color:var(--bone); background-image:linear-gradient(rgba(241,234,220,.052) 1px,transparent 1px),linear-gradient(90deg,rgba(241,234,220,.052) 1px,transparent 1px),linear-gradient(rgba(241,234,220,.021) 1px,transparent 1px),linear-gradient(90deg,rgba(241,234,220,.021) 1px,transparent 1px); background-size:72px 72px,72px 72px,18px 18px,18px 18px; }
.page-hero--olive { background:var(--olive); color:var(--bone); }
.page-hero__main { max-width:900px; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:22px; font:600 9px/1.4 var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--gold); }
.breadcrumbs a:hover { color:var(--gold-light); }
.page-title { margin:0; font:700 clamp(52px,7vw,102px)/.9 var(--display); text-transform:uppercase; letter-spacing:-.02em; }
.page-title em { color:var(--gold); font-style:normal; }
.page-hero__aside { max-width:530px; padding:20px 0 3px; border-top:3px solid var(--gold); }
.page-hero__aside p { margin:0 0 16px; font-size:clamp(16px,1.35vw,20px); line-height:1.5; }
.page-hero__aside small { font:500 10px/1.6 var(--mono); text-transform:uppercase; letter-spacing:.08em; opacity:.7; }
.page-section { padding:clamp(46px,5vw,74px) var(--pad); border-bottom:1px solid var(--rule); }
.page-section--tight { padding-top:clamp(30px,3.5vw,48px); padding-bottom:clamp(30px,3.5vw,48px); }
.page-section--dark { background-color:var(--espresso); color:var(--bone); background-image:linear-gradient(rgba(241,234,220,.052) 1px,transparent 1px),linear-gradient(90deg,rgba(241,234,220,.052) 1px,transparent 1px); background-size:72px 72px,72px 72px; }
.page-section--gold { background:var(--gold); color:var(--espresso-2); }
.section-label { display:block; margin-bottom:18px; color:var(--gold); font:600 9px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.content-heading { margin:0 0 24px; max-width:980px; font:700 clamp(36px,4vw,58px)/1 var(--display); text-transform:uppercase; letter-spacing:-.008em; }
.content-heading em { color:var(--olive); font-style:normal; }
.page-section--dark .content-heading em { color:var(--gold); }
.content-lede { max-width:800px; font-size:clamp(17px,1.4vw,21px); line-height:1.5; }
.content-copy { max-width:780px; font-size:15px; line-height:1.65; color:var(--muted); }
.page-section--dark .content-copy { color:rgba(241,234,220,.68); }
.split-content { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:start; }
.split-content--wide { grid-template-columns:1.2fr .8fr; }
.rule-list { margin:24px 0 0; padding:0; list-style:none; border-top:1px solid currentColor; }
.rule-list li { display:grid; grid-template-columns:38px 1fr; gap:14px; padding:15px 0; border-bottom:1px solid color-mix(in srgb,currentColor 24%,transparent); line-height:1.45; }
.rule-list b { color:var(--gold); font:600 11px/1.4 var(--mono); }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.info-card { min-height:210px; padding:24px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); background:rgba(248,243,232,.78); }
.info-card h3 { margin:18px 0 12px; font:700 28px/1 var(--display); text-transform:uppercase; }
.info-card p { line-height:1.65; color:var(--muted); }
.info-card small { color:var(--gold); font:600 10px/1.4 var(--mono); text-transform:uppercase; }
.page-section--dark .card-grid { border-color:rgba(241,234,220,.18); }
.page-section--dark .info-card { background:rgba(23,20,17,.72); border-color:rgba(241,234,220,.18); box-shadow:inset 0 3px 0 rgba(196,154,55,.72); }
.page-section--dark .info-card h3 { color:var(--bone); }
.page-section--dark .info-card p { color:rgba(241,234,220,.72); }
.page-section--dark .info-card small { color:var(--gold-light); }
.engagement-section .content-heading { margin-bottom:28px; }
.engagement-grid { gap:10px; border:0; }
.engagement-grid .info-card { border:1px solid rgba(241,234,220,.18); min-height:190px; }
.offer-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.offer-card { padding:clamp(26px,3vw,40px); border:1px solid rgba(241,234,220,.25); background:rgba(23,20,17,.25); }
.offer-card h3 { margin:14px 0; font:700 clamp(32px,3.2vw,48px)/.98 var(--display); text-transform:uppercase; }
.offer-card p { line-height:1.65; color:rgba(241,234,220,.7); }
.offer-card ul { padding-left:18px; line-height:1.7; }
.offer-card .button { margin-top:18px; }
.work-filters { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 32px; }
.filter-button { border:1px solid var(--rule); background:transparent; padding:11px 16px; cursor:pointer; font:600 10px/1 var(--mono); text-transform:uppercase; }
.filter-button.is-active,.filter-button:hover { background:var(--espresso); color:var(--bone); }
.work-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.work-card { grid-column:span 6; min-height:0; display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--rule); overflow:hidden; transition:transform .28s var(--ease),box-shadow .28s var(--ease); }
.work-card:nth-child(3n) { grid-column:span 12; }
.work-index-page .work-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.work-index-page .work-card,.work-index-page .work-card:nth-child(3n) { grid-column:auto; }
.work-card:hover { transform:translateY(-6px) rotate(-.25deg); box-shadow:10px 12px 0 rgba(40,33,28,.12); }
.work-card__image { aspect-ratio:16/10; overflow:hidden; background:var(--espresso); }
.work-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.work-card:hover .work-card__image img { transform:scale(1.035) rotate(.2deg); }
.work-card__body { padding:20px; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end; flex:1; }
.work-card__body small { color:var(--gold); font:600 10px/1.5 var(--mono); text-transform:uppercase; }
.work-card__body h2 { margin:8px 0 7px; font:700 clamp(25px,2.4vw,36px)/.97 var(--display); text-transform:uppercase; }
.work-card__body p { max-width:620px; margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.work-card__arrow { font-size:26px; }
.work-card--development { border-style:dashed; }
.status-tag { display:inline-block; width:fit-content; padding:7px 10px; background:var(--gold); color:var(--espresso); font:700 9px/1 var(--mono); text-transform:uppercase; }
.case-hero { padding-bottom:0; }
.case-cover { margin-top:38px; height:min(38vw,460px); overflow:hidden; border:1px solid rgba(241,234,220,.2); }
.case-cover img { width:100%; height:100%; object-fit:cover; }
.case-facts { display:grid; grid-template-columns:repeat(4,1fr); border-left:1px solid var(--rule); border-top:1px solid var(--rule); }
.case-facts div { padding:18px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.case-facts small { display:block; color:var(--gold); margin-bottom:10px; font:600 9px/1 var(--mono); text-transform:uppercase; }
.case-facts strong { font-size:15px; line-height:1.4; }
.case-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.case-gallery figure { margin:0; background:var(--paper); border:1px solid var(--rule); overflow:hidden; }
.case-gallery img { width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; }
.case-gallery figcaption { padding:10px 12px; font:500 8px/1.4 var(--mono); text-transform:uppercase; }
.result-block { display:grid; grid-template-columns:.55fr 1.45fr; gap:30px; padding:clamp(32px,4vw,52px); background:var(--gold); color:var(--espresso-2); }
.result-number { font:700 clamp(68px,9vw,130px)/.8 var(--display); }
.result-block h2 { margin:0 0 16px; font:700 clamp(34px,4vw,56px)/1 var(--display); text-transform:uppercase; }
.result-block p { max-width:730px; font-size:16px; line-height:1.55; }
.evidence-note { padding:18px 20px; border-left:5px solid var(--gold); background:rgba(196,154,55,.1); font-size:13px; line-height:1.6; }
.process-rail { counter-reset:process; }
.process-step { counter-increment:process; display:grid; grid-template-columns:92px .75fr 1fr; gap:clamp(24px,4vw,60px); padding:30px 0; border-top:1px solid currentColor; }
.process-step::before { content:"0" counter(process); color:var(--gold); font:700 42px/1 var(--display); }
.process-step h2 { margin:0; font:700 clamp(31px,3.2vw,46px)/1 var(--display); text-transform:uppercase; }
.process-step p { margin:0; line-height:1.7; color:var(--muted); }
.page-section--dark .process-step p { color:rgba(241,234,220,.67); }
.assistant-panel { min-height:400px; position:relative; overflow:hidden; background:var(--gold); border:1px solid var(--espresso-2); }
.assistant-panel__marek { position:absolute; inset:0; background:url("assets/marek-expression-sheet.png") 66.666% 50%/400% 300% no-repeat; transform:scale(1.05); transform-origin:bottom center; }
.assistant-panel__note { position:absolute; z-index:2; left:8%; right:8%; bottom:7%; padding:20px; background:var(--paper); border:3px solid var(--espresso-2); box-shadow:7px 7px 0 var(--espresso-2); font-weight:700; line-height:1.35; }
.faq { border-top:1px solid var(--rule); }
.faq details { border-bottom:1px solid var(--rule); padding:0; }
.faq summary { cursor:pointer; list-style:none; padding:18px 45px 18px 0; position:relative; font:700 clamp(22px,2.2vw,30px)/1.1 var(--display); text-transform:uppercase; }
.faq summary::after { content:"+"; position:absolute; right:8px; color:var(--gold); }
.faq details[open] summary::after { content:"−"; }
.faq details p { max-width:820px; margin:0 0 20px; line-height:1.6; color:var(--muted); }
.contact-layout { display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(36px,5vw,76px); align-items:start; }
.contact-form { padding:clamp(24px,3vw,38px); background:var(--paper); border:1px solid var(--rule); }
.form-row { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.form-field { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.form-field label { font:600 10px/1.3 var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.form-field input,.form-field textarea,.form-field select { width:100%; border:1px solid var(--rule); background:#fffdf7; color:var(--espresso); padding:15px; border-radius:0; }
.form-field textarea { min-height:210px; resize:vertical; line-height:1.5; }
.form-help { display:flex; justify-content:space-between; gap:20px; color:var(--muted); font:500 9px/1.5 var(--mono); }
.honeypot { position:absolute!important; left:-9999px!important; }
.article-layout { display:grid; grid-template-columns:200px minmax(0,800px); gap:clamp(34px,5vw,72px); align-items:start; }
.article-meta { position:sticky; top:30px; font:500 10px/1.7 var(--mono); text-transform:uppercase; }
.article-body { font-size:16.5px; line-height:1.72; }
.article-body h2 { margin:46px 0 18px; font:700 clamp(32px,3.4vw,48px)/1 var(--display); text-transform:uppercase; }
.article-body h3 { margin:30px 0 12px; font:700 24px/1.1 var(--display); text-transform:uppercase; }
.article-body blockquote { margin:34px 0; padding:22px; border-left:7px solid var(--gold); background:rgba(196,154,55,.12); font:700 clamp(24px,2.5vw,34px)/1.15 var(--display); text-transform:uppercase; }
.next-project { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; }
.next-project h2 { margin:8px 0 0; font:700 clamp(40px,5.5vw,72px)/.94 var(--display); text-transform:uppercase; }

@media (max-width: 1080px) {
  .site-header { grid-template-columns: 1fr auto; }
  .primary-nav { position: fixed; inset: 0; background: var(--espresso); color: var(--bone); display: none; flex-direction: column; justify-content: center; align-items: flex-start; padding: 12vh var(--pad); z-index: 40; }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { font: 700 clamp(30px, 7vw, 72px)/1 var(--display); }
  .menu-button { display: flex; position: relative; z-index: 50; border: 1px solid var(--rule); background: transparent; padding: 11px; cursor: pointer; align-items: center; gap: 7px; font: 600 9px/1 var(--mono); text-transform: uppercase; }
  .menu-button i { width: 17px; height: 2px; background: currentColor; }
  .hero-panel--launch { grid-template-columns: 1fr .75fr; }
  .hero-panel--comic { grid-template-columns: 1fr 1fr; }
  .comic-story { min-height: 550px; }
  .hero-panel--hybrid { grid-template-columns: 1fr 1fr; }
  .hybrid-story { min-height: 550px; }
  .both-answer { grid-template-columns: 1fr auto; }
  .both-answer .micro-label, .both-answer p { grid-column: 1; }
  .both-answer .button { grid-column: 2; grid-row: 1 / 3; }
  .work-row { grid-template-columns: 38px 80px 1fr 40px; }
  .work-row p { display: none; }
  .work-thumb { width: 80px; height: 58px; }
  .card-grid { grid-template-columns:1fr 1fr; }
  .page-hero { grid-template-columns:1fr; }
  .work-card,.work-card:nth-child(3n) { grid-column:span 6; }
  .work-index-page .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-index-page .work-card,.work-index-page .work-card:nth-child(3n) { grid-column:auto; }
  .case-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .site-header { min-height: 80px; gap: 10px; padding: 9px 16px; }
  .identity-mark { width: 55px; height: 55px; }
  .identity-type small { display: none; }
  .hero-lab-bar { align-items: flex-start; flex-direction: column; padding: 12px 16px; }
  .hero-lab-bar > div:first-child { display: block; }
  .hero-lab-bar p { margin-top: 7px; }
  .hero-tabs { width: 100%; overflow-x: auto; }
  .hero-tabs button { flex: 0 0 auto; }
  .hero-stage, .hero-panel { min-height: auto; }
  .hero-panel--launch { grid-template-columns: 1fr; }
  .hero-copy { padding: 65px 20px; }
  .hero-copy h1 { font-size: clamp(64px, 21vw, 104px); }
  .launch-art { min-height: 430px; }
  .hero-panel--relief { grid-template-columns: 1fr; }
  .relief-quote, .relief-answer { padding: 65px 20px; }
  .hero-panel--both { grid-template-columns: 1fr; grid-template-rows: auto; padding: 25px 16px; }
  .both-spine { flex-direction: row; min-height: 60px; }
  .both-column { min-height: 330px; }
  .both-answer { grid-column: 1; display: block; }
  .both-answer h1 { white-space: normal; margin: 16px 0; }
  .both-answer .button { margin-top: 24px; }
  .hero-panel--comic { padding: 20px 12px; }
  .hero-panel--comic { grid-template-columns: 1fr; }
  .comic-story { min-height: 520px; }
  .comic-static { padding: 48px 8px 20px; }
  .comic-static h1 { font-size: clamp(54px, 17vw, 88px); }
  .hero-panel--hybrid { padding: 20px 12px; grid-template-columns: 1fr; }
  .hybrid-story { min-height: 520px; }
  .hybrid-copy { min-height: 480px; padding: 48px 8px 20px; }
  .hybrid-copy-set h1 { font-size: clamp(52px, 16vw, 86px); }
  .signal-strip { justify-content: flex-start; overflow: hidden; white-space: nowrap; }
  .section-shell { padding: 52px 20px; }
  .section-heading, .system-intro { grid-template-columns: 1fr; }
  .section-heading h2, .work-heading h2, .system-intro h2, .why-copy h2, .closing-section h2 { font-size: clamp(38px, 11vw, 66px); }
  .section-heading > p { margin-top: 35px; }
  .problem-grid, .system-cards { grid-template-columns: 1fr; }
  .problem-grid article + article { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .system-cards article + article { border-left: 1px solid color-mix(in srgb, var(--bone) 20%, transparent); border-top: 0; }
  .work-heading { display: block; }
  .work-heading > p { margin-top: 30px; }
  .work-row { grid-template-columns: 30px 68px 1fr 25px; gap: 10px; }
  .work-thumb { width: 68px; height: 52px; }
  .work-row:hover { padding-left: 10px; }
  .work-preview { display: none !important; }
  .why-section { grid-template-columns: 1fr; }
  .why-copy { padding: 58px 20px; }
  .why-marek { min-height: 480px; }
  .closing-section { padding: 62px 20px; min-height: 420px; }
  .closing-mark { width: 75vw; top: 40%; }
  .site-footer { grid-template-columns: 1fr; text-align: left; }
  .site-footer > div:last-child { align-items: flex-start; }
  .page-hero { min-height:0; padding:48px 20px; gap:28px; }
  .page-title { font-size:clamp(48px,15vw,74px); }
  .page-section { padding-left:20px; padding-right:20px; }
  .split-content,.split-content--wide,.contact-layout,.article-layout { grid-template-columns:1fr; }
  .card-grid,.offer-grid { grid-template-columns:1fr; }
  .work-card,.work-card:nth-child(3n) { grid-column:span 12; min-height:0; }
  .work-index-page .work-grid { grid-template-columns:1fr; }
  .work-index-page .work-card,.work-index-page .work-card:nth-child(3n) { grid-column:auto; }
  .case-facts { grid-template-columns:1fr 1fr; }
  .case-cover { height:260px; margin-top:28px; }
  .case-gallery { grid-template-columns:1fr; }
  .result-block { grid-template-columns:1fr; }
  .process-step { grid-template-columns:70px 1fr; }
  .process-step p { grid-column:2; }
  .form-row { grid-template-columns:1fr; gap:0; }
  .article-meta { position:static; }
  .next-project { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  .launch-art:hover .launch-word, .launch-art:focus-visible .launch-word { transform: rotate(-6deg); }
}

/* --------------------------------------------------------------------------
   SIMPLE PORTFOLIO LAUNCH / V1
   This layer intentionally reuses the established visual system while keeping
   the first public version compact, direct, and focused on the work.
   -------------------------------------------------------------------------- */
.simple-launch .site-header { position: sticky; top: 0; backdrop-filter: blur(12px); }
.simple-launch .hero-stage,
.simple-launch .hero-panel { min-height: min(710px, calc(100vh - 100px)); }
.simple-launch .hero-copy { padding-top: clamp(52px, 7vw, 96px); padding-bottom: clamp(52px, 7vw, 96px); }
.simple-launch .hero-copy h1 { letter-spacing: .005em; }

.compact-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 8vw, 130px); align-items: end; }
.compact-heading h2,
.contact-intro h2 { margin: 0; font: 700 clamp(38px, 4.3vw, 66px)/.98 var(--display); text-transform: uppercase; }
.compact-heading h2 em,
.contact-intro h2 em { color: var(--olive); font-style: normal; }
.compact-heading > p { margin: 0 0 4px; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.55; }

.simple-service-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 34px; border: 1px solid var(--rule); }
.simple-service-grid article { min-height: 205px; padding: 22px; }
.simple-service-grid article + article { border-left: 1px solid var(--rule); }
.simple-service-grid article > span { color: var(--gold); font: 600 9px/1 var(--mono); }
.simple-service-grid h3 { margin: 24px 0 10px; font: 700 clamp(24px, 2.1vw, 34px)/1 var(--display); text-transform: uppercase; }
.simple-service-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.simple-solves { color: var(--bone); background-color: var(--espresso); background-image: linear-gradient(rgba(241,234,220,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(241,234,220,.045) 1px, transparent 1px); background-size: 54px 54px; }
.compact-heading--light h2 em { color: var(--gold-light); }
.compact-heading--light > p { color: rgba(241,234,220,.7); }
.solve-strip { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(241,234,220,.22); margin-top: 32px; }
.solve-strip article { display: flex; flex-direction: column; gap: 10px; padding: 24px; min-height: 115px; }
.solve-strip article + article { border-left: 1px solid rgba(241,234,220,.22); }
.solve-strip strong { font: 700 clamp(20px, 1.8vw, 29px)/1.05 var(--display); text-transform: uppercase; }
.solve-strip span { color: rgba(241,234,220,.64); font-size: 13px; line-height: 1.45; }

.simple-launch .work-section { padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(54px, 6vw, 88px); }
.simple-launch .work-heading { margin-bottom: 27px; }
.simple-launch .work-heading h2 { font-size: clamp(40px, 4.5vw, 68px); }
.portfolio-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 3px solid var(--espresso); border-left: 1px solid var(--rule); }
.portfolio-two-col .work-row { grid-template-columns: 28px 92px minmax(0, 1fr) 26px; gap: 13px; min-width: 0; min-height: 108px; padding: 13px 16px 13px 12px; border-right: 1px solid var(--rule); }
.portfolio-two-col .work-row:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
.portfolio-two-col .work-thumb { width: 92px; height: 70px; }
.portfolio-two-col .work-row h3 { font-size: clamp(22px, 2vw, 31px); }
.portfolio-two-col .work-row small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 1.25; }
.portfolio-two-col .work-row:hover { padding-left: 18px; }

.simple-contact { background: var(--olive); color: var(--bone); }
.simple-contact .contact-layout { align-items: center; }
.contact-intro h2 { margin-bottom: 22px; font-size: clamp(45px, 5.4vw, 82px); }
.contact-intro h2 em { color: var(--gold-light); }
.contact-intro p { max-width: 540px; color: rgba(241,234,220,.76); font-size: 17px; line-height: 1.6; }
.contact-intro > a { display: inline-block; margin-top: 18px; color: var(--gold-light); border-bottom: 1px solid currentColor; font: 700 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.simple-contact .contact-form { color: var(--espresso); box-shadow: 10px 10px 0 rgba(23,20,17,.25); }
.simple-contact .contact-form .button { margin-top: 20px; width: 100%; }
.simple-contact .form-field textarea { min-height: 150px; }
.direct-contact-card {
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--paper);
  color: var(--espresso);
  border: 1px solid var(--rule);
  box-shadow: 10px 10px 0 rgba(23,20,17,.25);
}
.direct-contact-item {
  min-height: 170px;
  padding: clamp(26px, 3.5vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.direct-contact-item + .direct-contact-item { border-top: 1px solid var(--rule); }
.direct-contact-item h3 {
  margin: 0 0 18px;
  font: 700 clamp(34px, 3.6vw, 54px)/1 var(--display);
  text-transform: uppercase;
}
.direct-contact-item a {
  width: fit-content;
  color: var(--olive-dark);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 5px;
  font: 700 clamp(13px, 1.2vw, 17px)/1.3 var(--mono);
  transition: color .2s, transform .2s;
}
.direct-contact-item a span { color: var(--gold); }
.direct-contact-item a:hover { color: var(--espresso); transform: translateX(4px); }

.portfolio-case .case-cover { grid-column: 1 / -1; }
.portfolio-case .case-cover img { object-position: center top; }
.portfolio-case .case-facts { grid-template-columns: repeat(3, 1fr); }
.portfolio-case .case-gallery figure { cursor: zoom-in; transition: transform .2s var(--ease), box-shadow .2s; }
.portfolio-case .case-gallery figure:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 rgba(40,33,28,.13); }
.portfolio-case .case-gallery img { background: #e7e0d4; object-fit: contain; }
.portfolio-case .case-gallery figcaption { font-size: 12px; line-height: 1.35; }
.portfolio-case .case-gallery--single figure,
.portfolio-case .case-gallery__wide { grid-column: 1 / -1; }
.portfolio-case .case-gallery--single img,
.portfolio-case .case-gallery__wide img { aspect-ratio: auto; }
.portfolio-case .case-gallery--two figure { grid-column: span 2; }
.portfolio-case .evidence-note { margin-top: 16px; font: 500 9px/1.55 var(--mono); opacity: .72; }
.logo-case .case-gallery figure,
.logo-case .case-gallery img { background: #fff; }
.logo-case .case-gallery img { padding: 16px; }
.logo-case .page-hero { padding-bottom: clamp(70px, 7vw, 100px); }
.logo-case .page-title { padding-bottom: .12em; }

.case-confidentiality {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.portfolio-modal { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 26px; border: 0; background: rgba(23,20,17,.88); color: var(--bone); }
.portfolio-modal::backdrop { background: rgba(23,20,17,.72); backdrop-filter: blur(5px); }
.portfolio-modal[open] { display: grid; place-items: center; }
.portfolio-modal__frame { position: relative; display: grid; justify-items: center; gap: 12px; max-width: min(1600px, calc(100vw - 52px)); max-height: calc(100dvh - 52px); }
.portfolio-modal img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 112px); object-fit: contain; box-shadow: 0 18px 70px rgba(0,0,0,.42); }
.portfolio-modal p { margin: 0; font: 600 12px/1.35 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.portfolio-modal__close { position: absolute; z-index: 2; right: 0; top: 0; transform: translate(12px,-12px); border: 0; padding: 10px 12px; background: var(--gold); color: var(--espresso-2); cursor: pointer; font: 700 10px/1 var(--mono); text-transform: uppercase; box-shadow: 4px 4px 0 rgba(23,20,17,.38); }
.portfolio-modal__close span { margin-left: 7px; font-size: 16px; }

.contact-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 18px; }
.contact-links a { display: inline-block; color: var(--gold-light); border-bottom: 1px solid currentColor; font: 700 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 1050px) {
  .simple-service-grid { grid-template-columns: repeat(2, 1fr); }
  .simple-service-grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--rule); }
  .simple-service-grid article:nth-child(4) { border-top: 1px solid var(--rule); }
  .portfolio-two-col .work-row { grid-template-columns: 26px 75px minmax(0, 1fr) 24px; }
  .portfolio-two-col .work-thumb { width: 75px; height: 58px; }
}

@media (max-width: 760px) {
  .simple-launch .hero-stage,
  .simple-launch .hero-panel { min-height: auto; }
  .compact-heading { grid-template-columns: 1fr; gap: 24px; }
  .simple-service-grid { grid-template-columns: 1fr; }
  .simple-service-grid article { min-height: 0; }
  .simple-service-grid article + article { border-left: 0; border-top: 1px solid var(--rule); }
  .solve-strip { grid-template-columns: 1fr; }
  .solve-strip article + article { border-left: 0; border-top: 1px solid rgba(241,234,220,.22); }
  .portfolio-two-col { grid-template-columns: 1fr; }
  .portfolio-two-col .work-row { min-height: 92px; }
  .portfolio-two-col .work-row:nth-last-child(2) { border-bottom: 0; }
  .portfolio-two-col .work-row:nth-last-child(1) { border-bottom: 1px solid var(--rule); }
  .portfolio-case .case-gallery--two figure { grid-column: auto; }
  .portfolio-case .case-facts { grid-template-columns: 1fr 1fr; }
  .portfolio-modal { padding: 14px; }
  .portfolio-modal__frame { max-width: calc(100vw - 28px); max-height: calc(100dvh - 28px); }
  .portfolio-modal img { max-height: calc(100dvh - 86px); }
}