/* =========================================================
   Touch Yazılım — v2 / Brutalist Terminal
   Palette: cream paper · ink black · burnt orange · electric
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper:   #F1ECE0;
  --paper-2: #E5DECF;
  --paper-3: #D8CFB9;
  --ink:     #0A0A0A;
  --ink-2:   #1A1A1A;
  --ink-mute:#5A5A55;
  --line:    #0A0A0A;
  --orange:  #FF4A1C;
  --orange-2:#FF7A4D;
  --blue:    #1B49E0;
  --blue-2:  #5B7CFF;
  --green:   #1A8F3D;
  --warn:    #FFB400;

  --f-display: "Archivo Black", "Anton", Impact, sans-serif;
  --f-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", "Space Mono", ui-monospace, monospace;
  --f-serif:   "DM Serif Display", Georgia, serif;

  --fs-mega:   clamp(4rem, 18vw, 22rem);
  --fs-hero:   clamp(3.2rem, 11vw, 12rem);
  --fs-h1:     clamp(2.4rem, 6vw, 5.5rem);
  --fs-h2:     clamp(1.6rem, 3.6vw, 2.8rem);
  --fs-body:   clamp(0.95rem, 1.02vw, 1.05rem);

  --pad-x:     clamp(1rem, 3vw, 2.5rem);
  --bar-h:     34px;
  --status-h:  28px;
  --bw:        1.5px;          /* brutalist border-width */
  --bw-2:      2.5px;
  --r:         0px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

html, body { background: var(--paper); color: var(--ink); }
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--f-mono);
  font-size: var(--fs-body);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  cursor: none;
  background:
    /* paper grain dots */
    radial-gradient(1px 1px at 20% 30%, rgba(0,0,0,0.06) 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 70%, rgba(0,0,0,0.05) 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 20%, rgba(0,0,0,0.04) 50%, transparent 51%),
    var(--paper);
  background-size: 7px 7px, 9px 9px, 11px 11px, auto;
}
@media (hover: none) { body { cursor: auto; } }

/* GRID OVERLAY (subtle vertical 12-col lines) */
.grid-overlay {
  position: fixed; inset: var(--bar-h) 0 var(--status-h) 0;
  pointer-events: none; z-index: 1;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(100%/12 - 1px),
    rgba(10,10,10,0.04) calc(100%/12 - 1px),
    rgba(10,10,10,0.04) calc(100%/12)
  );
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--orange); }
em { font-style: normal; }

/* ---------- Type ---------- */
.dsp { font-family: var(--f-display); font-weight: 900; letter-spacing: -0.04em; line-height: 0.86; text-transform: uppercase; }
.serif { font-family: var(--f-serif); font-weight: 400; letter-spacing: -0.025em; line-height: 0.95; }
.serif-it { font-family: var(--f-serif); font-style: italic; }
.mono { font-family: var(--f-mono); }
.tag-mono {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-mono); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  border: var(--bw) solid var(--ink); padding: 0.25rem 0.55rem;
  background: var(--paper);
}
.tag-mono::before { content: "▶"; color: var(--orange); font-size: 0.7em; }
.kbd {
  font-family: var(--f-mono); font-size: 0.74rem;
  border: var(--bw) solid var(--ink); padding: 0.15rem 0.4rem;
  background: var(--paper-2); color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.h-orange { color: var(--orange); }
.h-blue { color: var(--blue); }
.under-orange { background: linear-gradient(transparent 65%, var(--orange) 65%, var(--orange) 92%, transparent 92%); padding: 0 0.1em; }
.under-blue { background: linear-gradient(transparent 65%, var(--blue-2) 65%, var(--blue-2) 92%, transparent 92%); padding: 0 0.1em; }

/* ---------- Layout ---------- */
.container { width: 100%; padding: 0 var(--pad-x); margin-inline: auto; max-width: 1720px; }
.section { padding: clamp(4rem, 9vw, 8rem) 0; position: relative; }

/* ---------- Cursor (crosshair) ---------- */
.cursor, .cursor-x, .cursor-y { position: fixed; pointer-events: none; z-index: 9999; mix-blend-mode: difference; }
.cursor {
  width: 14px; height: 14px;
  border: 1px solid var(--paper); top: 0; left: 0;
  transform: translate(-50%,-50%);
  transition: width .25s, height .25s, background .25s, border-color .25s;
  background: transparent;
}
.cursor-x { top: 0; left: 0; width: 1px; height: 100vh; background: var(--paper); opacity: 0.35; }
.cursor-y { top: 0; left: 0; height: 1px; width: 100vw; background: var(--paper); opacity: 0.35; }
.cursor.is-hover { width: 36px; height: 36px; background: var(--paper); border-color: var(--paper); }

/* ---------- Curtain ---------- */
.curtain { position: fixed; inset: 0; background: var(--ink); z-index: 9000; transform: scaleY(0); transform-origin: top; pointer-events: none; }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; background: var(--paper); z-index: 9500;
  display: grid; place-items: center; padding: 2rem;
}
.preloader__box {
  border: var(--bw-2) solid var(--ink);
  background: var(--paper-2);
  padding: 1.2rem 1.5rem; min-width: min(440px, 86vw);
  font-family: var(--f-mono);
  box-shadow: 6px 6px 0 var(--ink);
}
.preloader__row { display: flex; justify-content: space-between; align-items: center; padding: 0.2rem 0; font-size: 0.78rem; }
.preloader__row + .preloader__row { border-top: 1px dashed var(--ink); margin-top: 0.4rem; padding-top: 0.6rem; }
.preloader__row strong { color: var(--orange); }
.preloader__bar { height: 8px; background: var(--paper-3); border: 1px solid var(--ink); position: relative; margin-top: 0.6rem; overflow: hidden; }
.preloader__bar::after { content: ""; position: absolute; inset: 0 100% 0 0; background: var(--ink); animation: pre 1.4s var(--ease-out) forwards; }
@keyframes pre { to { inset: 0 0 0 0; } }
.preloader__count { font-variant-numeric: tabular-nums; color: var(--orange); }

/* ---------- Top menu bar (OS-style) ---------- */
.menubar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--bar-h);
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad-x);
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.05em;
  border-bottom: var(--bw) solid var(--ink);
}
.menubar__left, .menubar__right { display: flex; gap: 1.4rem; align-items: center; }
.menubar__brand { font-family: var(--f-display); font-size: 0.95rem; letter-spacing: 0; }
.menubar__brand em { color: var(--orange); }
.menubar__item { color: var(--paper); opacity: 0.72; transition: opacity .2s, color .2s; }
.menubar__item:hover { opacity: 1; color: var(--orange); }
.menubar__hide-md { display: inline; }
@media (max-width: 900px) { .menubar__hide-md { display: none; } }

/* Status bar (bottom) */
.statusbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: var(--status-h);
  background: var(--paper-2); color: var(--ink);
  border-top: var(--bw) solid var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad-x);
  font-family: var(--f-mono); font-size: 0.7rem;
  letter-spacing: 0.06em;
}
.statusbar__left, .statusbar__right { display: flex; gap: 1.2rem; align-items: center; }
.status-dot {
  width: 8px; height: 8px; background: var(--green); border-radius: 50%;
  display: inline-block; margin-right: 0.4rem; box-shadow: 0 0 0 2px rgba(26,143,61,0.25);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(26,143,61,0); } }
.statusbar__hide-md { display: inline; }
@media (max-width: 700px) { .statusbar__hide-md { display: none; } }

/* Push body content under menubar */
main { padding-top: var(--bar-h); padding-bottom: var(--status-h); position: relative; }

/* ---------- NAV (secondary, sits below menubar) ---------- */
.nav {
  position: sticky; top: var(--bar-h); z-index: 90;
  background: var(--paper);
  border-bottom: var(--bw) solid var(--ink);
  padding: 0 var(--pad-x);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; min-height: 64px; gap: 1rem;
}
.nav__logo { display: flex; align-items: center; gap: 0.6rem; }
.nav__logo img { height: 28px; }
.nav__logo-text { font-family: var(--f-display); font-size: 1.05rem; letter-spacing: 0; }
.nav__logo-text em { color: var(--orange); }
.nav__links { display: flex; gap: 0; justify-self: center; }
.nav__link {
  padding: 0.5rem 0.95rem;
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.06em;
  text-transform: uppercase;
  border: var(--bw) solid var(--ink);
  border-right: 0;
  background: var(--paper);
  transition: background .2s, color .2s;
}
.nav__link:last-child { border-right: var(--bw) solid var(--ink); }
.nav__link:hover { background: var(--ink); color: var(--paper); }
.nav__link[aria-current="page"] { background: var(--orange); color: var(--ink); }
.nav__right { justify-self: end; display: flex; gap: 0.5rem; align-items: center; }
.nav__burger {
  display: none; width: 38px; height: 38px;
  border: var(--bw) solid var(--ink); align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  background: var(--paper);
}
.nav__burger span { width: 16px; height: 2px; background: var(--ink); }
@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
}

/* Mobile overlay */
.nav-overlay {
  position: fixed; inset: var(--bar-h) 0 var(--status-h) 0; z-index: 95;
  background: var(--paper); transform: translateY(-100%); transition: transform .55s var(--ease-out);
  padding: 2rem var(--pad-x); overflow-y: auto;
}
.nav-overlay.is-open { transform: translateY(0); }
.nav-overlay__close { font-family: var(--f-mono); font-size: 0.8rem; border: var(--bw) solid var(--ink); padding: 0.4rem 0.7rem; }
.nav-overlay__list { display: flex; flex-direction: column; margin-top: 2rem; }
.nav-overlay__item {
  padding: 1.2rem 0; border-bottom: var(--bw) solid var(--ink);
  font-family: var(--f-display); font-size: clamp(2rem, 7vw, 3.2rem);
  letter-spacing: -0.03em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: baseline;
}
.nav-overlay__item small { font-family: var(--f-mono); font-size: 0.85rem; color: var(--orange); }
.nav-overlay__item:hover { color: var(--orange); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.2rem;
  font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase;
  border: var(--bw-2) solid var(--ink);
  background: var(--paper); color: var(--ink);
  position: relative;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .2s, color .2s;
  box-shadow: 4px 4px 0 var(--ink);
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
.btn--orange { background: var(--orange); color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--orange); color: var(--ink); }
.btn__arrow { width: 14px; height: 14px; transition: transform .25s; }
.btn:hover .btn__arrow { transform: translate(2px, -2px); }

/* ---------- Scroll progress ---------- */
.scroll-prog { position: fixed; top: var(--bar-h); left: 0; right: 0; height: 2px; background: transparent; z-index: 99; pointer-events: none; }
.scroll-prog__bar { height: 100%; background: var(--orange); width: 0%; }

/* ---------- WhatsApp float (brutalist square) ---------- */
.wa-float {
  position: fixed; bottom: calc(var(--status-h) + 14px); right: 14px; z-index: 80;
  width: 56px; height: 56px;
  background: var(--green); color: var(--paper);
  border: var(--bw-2) solid var(--ink);
  display: grid; place-items: center;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .2s, box-shadow .2s;
}
.wa-float:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.wa-float svg { width: 26px; height: 26px; }

/* =========================================================
   HERO — terminal/command palette + ASCII orb
   ========================================================= */
.hero {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: var(--bw-2) solid var(--ink);
  position: relative; overflow: hidden;
}
.hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: end; padding: 0 var(--pad-x); }
.hero__meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: var(--bw-2) solid var(--ink); margin: 1.5rem var(--pad-x) 0; background: var(--paper-2); }
.hero__meta-cell { padding: 0.7rem 0.9rem; border-right: 1px solid var(--ink); display: flex; flex-direction: column; gap: 0.2rem; }
.hero__meta-cell:last-child { border-right: 0; }
.hero__meta-cell small { font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.hero__meta-cell strong { font-family: var(--f-display); font-size: 1rem; }
.hero__meta-cell strong em { color: var(--orange); }
@media (max-width: 800px) { .hero__meta { grid-template-columns: repeat(2, 1fr); } .hero__meta-cell:nth-child(2) { border-right: 0; } .hero__meta-cell:nth-child(1), .hero__meta-cell:nth-child(2) { border-bottom: 1px solid var(--ink); } }

.hero__title {
  font-family: var(--f-display);
  font-size: var(--fs-hero);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  padding: 0 var(--pad-x);
  margin-top: 1.5rem;
}
.hero__title .row { display: block; overflow: hidden; }
.hero__title .row span { display: inline-block; }
.hero__title em { color: var(--orange); font-style: italic; font-family: var(--f-serif); font-weight: 400; letter-spacing: -0.02em; text-transform: none; }
.hero__title .strike { position: relative; }
.hero__title .strike::after { content: ""; position: absolute; left: -3%; right: -3%; top: 48%; height: 8px; background: var(--orange); transform: rotate(-2deg); }

.hero__sub { color: var(--ink-mute); max-width: 42ch; font-size: 1rem; }
.hero__cta { display: flex; gap: 0.7rem; flex-wrap: wrap; }

/* Command palette card */
.terminal {
  border: var(--bw-2) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono); font-size: 0.82rem;
  box-shadow: 8px 8px 0 var(--ink);
  margin: 1.5rem var(--pad-x) 0;
}
.terminal__bar {
  background: var(--paper-2); color: var(--ink);
  padding: 0.45rem 0.8rem;
  border-bottom: var(--bw) solid var(--ink);
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.terminal__dots { display: flex; gap: 5px; margin-right: 0.4rem; }
.terminal__dots span { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--ink); }
.terminal__dots span:nth-child(1) { background: #FF5F57; }
.terminal__dots span:nth-child(2) { background: var(--warn); }
.terminal__dots span:nth-child(3) { background: var(--green); }
.terminal__title { flex: 1; text-align: center; }
.terminal__body { padding: 1rem 1.2rem; min-height: 280px; }
.terminal__line { display: flex; gap: 0.6rem; padding: 0.15rem 0; }
.terminal__line .prompt { color: var(--orange); }
.terminal__line .arg { color: var(--blue-2); }
.terminal__line .ok { color: var(--green); }
.terminal__line.muted { color: rgba(241,236,224,0.55); }
.terminal__caret { display: inline-block; width: 8px; height: 1em; background: var(--orange); margin-left: 2px; vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Hero foot — inline cta + scroll hint */
.hero__foot {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding: clamp(2rem, 4vw, 3rem) var(--pad-x) 0;
  border-top: 1px dashed var(--ink); margin-top: clamp(2rem, 4vw, 3rem);
}
.hero__scroll { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; display: flex; align-items: center; gap: 0.6rem; }
.hero__scroll::before { content: "↓"; color: var(--orange); font-size: 1rem; }

@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; }
}

/* =========================================================
   TICKER (newspaper running tape)
   ========================================================= */
.ticker {
  background: var(--ink); color: var(--paper);
  border-block: var(--bw) solid var(--ink);
  overflow: hidden; padding: 0.7rem 0;
  font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.ticker__track { display: flex; gap: 2rem; white-space: nowrap; animation: tick 36s linear infinite; }
.ticker__item { display: inline-flex; align-items: center; gap: 0.7rem; }
.ticker__item::before { content: "■"; color: var(--orange); }
.ticker--rev .ticker__track { animation-direction: reverse; }
.ticker--paper { background: var(--paper-2); color: var(--ink); }
@keyframes tick { to { transform: translateX(-50%); } }

/* =========================================================
   SECTION HEADER (numbered + dashed)
   ========================================================= */
.sec-head {
  display: grid; grid-template-columns: 80px 1fr; gap: 1rem;
  border-block: var(--bw-2) solid var(--ink);
  padding: 1.2rem 0;
  margin-bottom: 2.5rem;
  background: var(--paper);
}
.sec-head__num {
  font-family: var(--f-display); font-size: 1.6rem;
  border-right: var(--bw) solid var(--ink); padding-right: 1rem;
  display: grid; place-items: center;
  background: var(--orange); color: var(--ink);
  height: 100%;
}
.sec-head__body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding-right: 1rem; }
.sec-head__title { font-family: var(--f-display); font-size: clamp(1.4rem, 2.8vw, 2.2rem); letter-spacing: -0.02em; text-transform: uppercase; }
.sec-head__title em { color: var(--orange); font-style: italic; font-family: var(--f-serif); font-weight: 400; text-transform: none; }
.sec-head__meta { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
@media (max-width: 700px) { .sec-head__body { grid-template-columns: 1fr; } .sec-head { grid-template-columns: 56px 1fr; } }

/* =========================================================
   MANIFESTO — newspaper columns
   ========================================================= */
.manifest { padding: clamp(3rem, 7vw, 6rem) 0; border-bottom: var(--bw-2) solid var(--ink); }
.manifest__cols {
  column-count: 3; column-gap: 2.5rem; column-rule: 1px dashed var(--ink);
  font-family: var(--f-serif); font-size: 1.25rem; line-height: 1.4;
  letter-spacing: -0.01em; padding-inline: var(--pad-x); margin-top: 2rem;
}
.manifest__cols p { margin-bottom: 1rem; break-inside: avoid; }
.manifest__cols .drop {
  font-family: var(--f-display);
  float: left;
  font-size: 4.4rem;
  line-height: 0.85;
  padding: 0.2rem 0.5rem 0 0;
  color: var(--orange);
}
.manifest__cols em { color: var(--orange); font-style: italic; }
.manifest__cols .pull {
  display: block; margin: 1rem 0;
  font-family: var(--f-display); text-transform: uppercase;
  font-size: 1.4rem; letter-spacing: -0.02em;
  border-block: var(--bw) solid var(--ink);
  padding: 0.6rem 0;
  break-inside: avoid;
}
@media (max-width: 1000px) { .manifest__cols { column-count: 2; } }
@media (max-width: 700px) { .manifest__cols { column-count: 1; } }

/* =========================================================
   CAPABILITY GRID — file system index
   ========================================================= */
.fs-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 0;
  border: var(--bw-2) solid var(--ink);
  background: var(--paper);
}
.fs-cell {
  grid-column: span 4;
  padding: 1.5rem;
  border-right: var(--bw) solid var(--ink);
  border-bottom: var(--bw) solid var(--ink);
  min-height: 260px;
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  transition: background .2s, transform .2s;
}
.fs-cell:hover { background: var(--paper-2); }
.fs-cell--wide { grid-column: span 8; }
.fs-cell--tall { grid-row: span 2; min-height: 540px; }
.fs-cell--orange { background: var(--orange); }
.fs-cell--orange:hover { background: var(--orange-2); }
.fs-cell--ink { background: var(--ink); color: var(--paper); }
.fs-cell--ink:hover { background: var(--ink-2); }

.fs-cell__path { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); display: flex; align-items: center; gap: 0.4rem; }
.fs-cell__path::before { content: "▮"; color: var(--orange); }
.fs-cell--ink .fs-cell__path { color: rgba(241,236,224,0.55); }
.fs-cell--ink .fs-cell__path::before { color: var(--orange); }
.fs-cell--orange .fs-cell__path { color: var(--ink); }

.fs-cell h3 {
  font-family: var(--f-display); font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95;
}
.fs-cell h3 em { font-family: var(--f-serif); font-style: italic; color: var(--orange); font-weight: 400; text-transform: none; letter-spacing: -0.015em; }
.fs-cell--orange h3 em, .fs-cell--ink h3 em { color: var(--paper); }

.fs-cell p { font-family: var(--f-mono); font-size: 0.85rem; max-width: 36ch; opacity: 0.85; }
.fs-cell__art { position: absolute; right: 0.8rem; bottom: 0.8rem; width: 50%; max-width: 200px; opacity: 0.9; pointer-events: none; }
.fs-cell__index { font-family: var(--f-display); font-size: 4rem; opacity: 0.18; position: absolute; top: 0.8rem; right: 1rem; line-height: 1; }
.fs-cell--orange .fs-cell__index, .fs-cell--ink .fs-cell__index { opacity: 0.32; }

@media (max-width: 1000px) {
  .fs-cell { grid-column: span 6; min-height: 220px; }
  .fs-cell--wide, .fs-cell--tall { grid-column: span 12; grid-row: auto; min-height: 240px; }
}
@media (max-width: 600px) { .fs-cell, .fs-cell--wide { grid-column: span 12; } }

/* =========================================================
   SERVICES — accordion / inspector list
   ========================================================= */
.svc-acc { border-block: var(--bw-2) solid var(--ink); }
.svc-item { border-bottom: var(--bw) solid var(--ink); }
.svc-item:last-child { border-bottom: 0; }
.svc-item__head {
  display: grid; grid-template-columns: 80px 1fr auto 60px;
  gap: 1.5rem; padding: 1.4rem var(--pad-x);
  align-items: center; cursor: pointer;
  transition: background .2s, color .2s;
  position: relative;
}
.svc-item__head:hover { background: var(--ink); color: var(--paper); }
.svc-item__head:hover .svc-item__num { color: var(--orange); }
.svc-item__num { font-family: var(--f-display); font-size: 1.4rem; letter-spacing: -0.01em; }
.svc-item__title { font-family: var(--f-display); font-size: clamp(1.4rem, 3vw, 2.4rem); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.svc-item__title em { font-family: var(--f-serif); color: var(--orange); font-style: italic; text-transform: none; font-weight: 400; }
.svc-item__head:hover .svc-item__title em { color: var(--orange); }
.svc-item__tag { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.svc-item__head:hover .svc-item__tag { color: var(--paper); opacity: 0.7; }
.svc-item__plus {
  width: 36px; height: 36px; border: var(--bw) solid currentColor;
  display: grid; place-items: center; font-size: 1.2rem; font-family: var(--f-mono);
  justify-self: end;
}
.svc-item.is-open .svc-item__plus::after { content: "−"; }
.svc-item:not(.is-open) .svc-item__plus::after { content: "+"; }
.svc-item__body {
  display: grid; grid-template-columns: 80px 1fr 1fr;
  gap: 1.5rem; padding: 0 var(--pad-x);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .5s var(--ease), opacity .35s, padding .4s;
  background: var(--paper-2);
}
.svc-item.is-open .svc-item__body { max-height: 600px; opacity: 1; padding: 1.5rem var(--pad-x); border-top: 1px dashed var(--ink); }
.svc-item__body p { font-size: 0.95rem; max-width: 50ch; }
.svc-item__body ul { list-style: none; font-family: var(--f-mono); font-size: 0.82rem; }
.svc-item__body li { padding: 0.25rem 0; display: flex; gap: 0.5rem; }
.svc-item__body li::before { content: "→"; color: var(--orange); }
@media (max-width: 800px) {
  .svc-item__head { grid-template-columns: 50px 1fr 36px; }
  .svc-item__tag { display: none; }
  .svc-item__body { grid-template-columns: 1fr; padding-block: 0; }
  .svc-item.is-open .svc-item__body { padding-block: 1.2rem; }
}

/* =========================================================
   STICKY NOTES — sectors / postcards (rotated cards)
   ========================================================= */
.notes { position: relative; padding: clamp(2rem, 4vw, 3rem) 0; }
.notes__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem 1.6rem;
  padding: 0 var(--pad-x);
}
.note {
  border: var(--bw-2) solid var(--ink);
  background: var(--paper);
  padding: 1.4rem 1.2rem;
  position: relative;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  display: flex; flex-direction: column; gap: 0.7rem;
  min-height: 280px;
}
.note:nth-child(odd) { transform: rotate(-1.2deg); }
.note:nth-child(even) { transform: rotate(1deg); }
.note:nth-child(3n) { transform: rotate(-0.3deg); background: var(--orange); }
.note:nth-child(5n) { transform: rotate(0.7deg); background: var(--ink); color: var(--paper); }
.note:hover { transform: rotate(0) translate(-3px,-3px); box-shadow: 10px 10px 0 var(--ink); z-index: 2; }
.note__pin {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--paper);
  box-shadow: 0 2px 0 var(--ink);
}
.note:nth-child(5n) .note__pin { background: var(--orange); }
.note__num { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }
.note h3 { font-family: var(--f-display); font-size: 1.6rem; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; }
.note h3 em { font-family: var(--f-serif); font-style: italic; color: var(--orange); text-transform: none; font-weight: 400; }
.note:nth-child(3n) h3 em, .note:nth-child(5n) h3 em { color: var(--paper); }
.note p { font-family: var(--f-mono); font-size: 0.82rem; opacity: 0.85; }
.note__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
.note__tags span {
  font-family: var(--f-mono); font-size: 0.7rem;
  border: 1px solid currentColor;
  padding: 0.18rem 0.5rem;
  letter-spacing: 0.06em;
}
@media (max-width: 900px) { .notes__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .notes__grid { grid-template-columns: 1fr; } }

/* =========================================================
   SHOWCASE — index table (data-row style)
   ========================================================= */
.showcase { border-block: var(--bw-2) solid var(--ink); }
.showcase__row {
  display: grid; grid-template-columns: 60px 2fr 1.4fr 1fr 1.2fr 60px;
  gap: 1rem;
  padding: 1.5rem var(--pad-x);
  border-bottom: var(--bw) solid var(--ink);
  align-items: center;
  position: relative;
  transition: background .25s, color .25s;
  cursor: pointer;
}
.showcase__row:last-child { border-bottom: 0; }
.showcase__row:hover { background: var(--ink); color: var(--paper); }
.showcase__row:hover .showcase__name em, .showcase__row:hover .showcase__metric { color: var(--orange); }
.showcase__row--header {
  background: var(--paper-2); cursor: default;
  font-family: var(--f-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute);
}
.showcase__row--header:hover { background: var(--paper-2); color: var(--ink-mute); }
.showcase__num { font-family: var(--f-display); font-size: 1.2rem; }
.showcase__name { font-family: var(--f-display); font-size: clamp(1.2rem, 2.2vw, 1.7rem); text-transform: uppercase; letter-spacing: -0.02em; }
.showcase__name em { font-family: var(--f-serif); font-style: italic; color: var(--orange); text-transform: none; font-weight: 400; }
.showcase__sector, .showcase__year { font-family: var(--f-mono); font-size: 0.85rem; }
.showcase__metric { font-family: var(--f-display); font-size: 1.3rem; color: var(--orange); }
.showcase__row:hover .showcase__metric { color: var(--orange); }
.showcase__arrow { font-family: var(--f-mono); justify-self: end; transition: transform .25s; }
.showcase__row:hover .showcase__arrow { transform: translateX(6px); }
@media (max-width: 800px) {
  .showcase__row { grid-template-columns: 40px 1fr auto; }
  .showcase__sector, .showcase__year { display: none; }
}

/* =========================================================
   PROCESS — vertical stepper (terminal log)
   ========================================================= */
.process {
  border: var(--bw-2) solid var(--ink);
  background: var(--ink); color: var(--paper);
  padding: 0; margin: 2rem 0;
  font-family: var(--f-mono);
}
.process__bar {
  background: var(--paper-2); color: var(--ink);
  padding: 0.5rem 0.9rem; border-bottom: var(--bw) solid var(--ink);
  display: flex; gap: 0.8rem; align-items: center;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.process__step {
  display: grid; grid-template-columns: 80px 1fr 90px;
  gap: 1rem; padding: 1.2rem 1.4rem;
  border-bottom: 1px dashed rgba(241,236,224,0.18);
  align-items: start;
}
.process__step:last-child { border-bottom: 0; }
.process__num { font-family: var(--f-mono); font-size: 0.85rem; color: var(--orange); }
.process__step h3 { font-family: var(--f-display); font-size: 1.4rem; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; }
.process__step p { font-size: 0.85rem; opacity: 0.7; max-width: 60ch; margin-top: 0.4rem; }
.process__time { font-family: var(--f-mono); font-size: 0.72rem; color: var(--orange); justify-self: end; }
.process__step.is-active h3 { color: var(--orange); }

/* =========================================================
   STATS — bordered cells
   ========================================================= */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: var(--bw-2) solid var(--ink);
  background: var(--paper);
}
.stat-cell {
  padding: 1.6rem 1.4rem;
  border-right: var(--bw) solid var(--ink);
  display: flex; flex-direction: column; gap: 0.5rem; min-height: 180px;
  justify-content: space-between;
}
.stat-cell:last-child { border-right: 0; }
.stat-cell__label { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.stat-cell__num { font-family: var(--f-display); font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 0.9; letter-spacing: -0.03em; }
.stat-cell__num em { color: var(--orange); font-style: italic; font-family: var(--f-serif); font-weight: 400; }
.stat-cell:nth-child(2) { background: var(--orange); }
.stat-cell:nth-child(2) .stat-cell__label { color: var(--ink); opacity: 0.7; }
@media (max-width: 800px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(2n) { border-right: 0; }
  .stat-cell:nth-child(-n+2) { border-bottom: var(--bw) solid var(--ink); }
}

/* =========================================================
   QUOTE — newspaper pull-quote
   ========================================================= */
.pullquote {
  padding: clamp(4rem, 8vw, 7rem) var(--pad-x);
  border-block: var(--bw-2) solid var(--ink);
  background: var(--paper-2);
  position: relative;
}
.pullquote__inner { max-width: 1200px; margin: 0 auto; position: relative; }
.pullquote__mark { font-family: var(--f-display); font-size: 12rem; line-height: 0.7; color: var(--orange); position: absolute; top: -2rem; left: -1rem; }
.pullquote__text {
  font-family: var(--f-display); font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95; letter-spacing: -0.025em; text-transform: uppercase;
  position: relative; padding-top: 2rem;
}
.pullquote__text em { font-family: var(--f-serif); color: var(--orange); font-style: italic; text-transform: none; font-weight: 400; }
.pullquote__author { margin-top: 1.5rem; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.pullquote__author em { color: var(--orange); font-style: normal; }

/* =========================================================
   CTA — full block ink
   ========================================================= */
.cta-block {
  background: var(--ink); color: var(--paper);
  padding: clamp(4rem, 8vw, 7rem) var(--pad-x);
  border-block: var(--bw-2) solid var(--ink);
  position: relative; overflow: hidden;
}
.cta-block__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: end; max-width: 1640px; margin: 0 auto; position: relative; z-index: 1; }
.cta-block h2 {
  font-family: var(--f-display); font-size: clamp(2.6rem, 9vw, 8rem);
  line-height: 0.86; letter-spacing: -0.04em; text-transform: uppercase;
}
.cta-block h2 em { font-family: var(--f-serif); font-style: italic; color: var(--orange); text-transform: none; font-weight: 400; }
.cta-block__right p { color: rgba(241,236,224,0.7); max-width: 36ch; }
.cta-block__right { display: flex; flex-direction: column; gap: 1.2rem; }
.cta-block .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 4px 4px 0 var(--orange); }
.cta-block .btn:hover { background: var(--orange); border-color: var(--orange); box-shadow: 6px 6px 0 var(--paper); }
.cta-block::before {
  content: ""; position: absolute; top: -20px; left: 0; right: 0;
  height: 30px;
  background: repeating-linear-gradient(45deg, var(--ink) 0 12px, var(--orange) 12px 24px);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--paper);
  border-top: var(--bw-2) solid var(--ink);
  padding: clamp(3rem, 6vw, 5rem) 0 0;
}
.footer__massive {
  font-family: var(--f-display);
  font-size: clamp(4rem, 18vw, 18rem);
  line-height: 0.85; letter-spacing: -0.05em; text-transform: uppercase;
  padding: 0 var(--pad-x);
  border-bottom: var(--bw) solid var(--ink);
  padding-bottom: 1rem;
  white-space: nowrap; overflow: hidden;
}
.footer__massive em { font-family: var(--f-serif); font-style: italic; color: var(--orange); text-transform: none; font-weight: 400; }
.footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 2rem;
  padding: clamp(2rem, 4vw, 3rem) var(--pad-x);
  border-bottom: var(--bw) solid var(--ink);
}
.footer__brand img { height: 36px; margin-bottom: 1rem; }
.footer__brand p { color: var(--ink-mute); max-width: 36ch; font-size: 0.9rem; }
.footer__col h4 { font-family: var(--f-display); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.8rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--ink); }
.footer__col a { display: block; padding: 0.3rem 0; font-family: var(--f-mono); font-size: 0.85rem; transition: color .2s, transform .2s; }
.footer__col a:hover { color: var(--orange); transform: translateX(4px); }
.footer__bottom {
  padding: 1rem var(--pad-x);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem;
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ink-mute);
}
.socials { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 1rem; }
.socials a {
  width: 32px; height: 32px;
  border: var(--bw) solid var(--ink);
  display: grid; place-items: center;
  transition: background .2s, color .2s, transform .2s;
  background: var(--paper);
}
.socials a:hover { background: var(--ink); color: var(--paper); transform: translate(-1px,-1px); box-shadow: 2px 2px 0 var(--orange); }

@media (max-width: 1000px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr; } }

/* =========================================================
   PAGE-HERO (inner pages)
   ========================================================= */
.page-hero {
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-bottom: var(--bw-2) solid var(--ink);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(8.333% - 1px), rgba(10,10,10,0.04) calc(8.333% - 1px) 8.333%),
    var(--paper);
}
.page-hero__crumb {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 1.5rem; color: var(--ink-mute);
}
.page-hero__crumb a:hover { color: var(--orange); }
.page-hero h1 {
  font-family: var(--f-display);
  font-size: var(--fs-hero);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.page-hero h1 em { font-family: var(--f-serif); font-style: italic; color: var(--orange); text-transform: none; font-weight: 400; }
.page-hero__lead { color: var(--ink-mute); max-width: 56ch; margin-top: 1.6rem; font-family: var(--f-serif); font-size: 1.4rem; line-height: 1.3; }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 0; margin-top: 2rem; border: var(--bw-2) solid var(--ink); }
.page-hero__meta span { font-family: var(--f-mono); font-size: 0.75rem; padding: 0.5rem 0.8rem; border-right: 1px solid var(--ink); letter-spacing: 0.08em; text-transform: uppercase; }
.page-hero__meta span:last-child { border-right: 0; }
.page-hero__meta em { color: var(--orange); font-style: normal; font-weight: 700; }

/* =========================================================
   VALUES (about page)
   ========================================================= */
.values { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--bw-2) solid var(--ink); background: var(--paper); }
.value {
  padding: 1.6rem 1.4rem;
  border-right: var(--bw) solid var(--ink);
  border-bottom: var(--bw) solid var(--ink);
  min-height: 220px;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.value:nth-child(3n) { border-right: 0; }
.value:nth-last-child(-n+3) { border-bottom: 0; }
.value__num { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.12em; color: var(--orange); }
.value h4 { font-family: var(--f-display); font-size: 1.4rem; text-transform: uppercase; letter-spacing: -0.01em; }
.value p { font-family: var(--f-mono); font-size: 0.85rem; color: var(--ink-mute); }
@media (max-width: 800px) {
  .values { grid-template-columns: 1fr 1fr; }
  .value { border-right: var(--bw) solid var(--ink); }
  .value:nth-child(2n) { border-right: 0; }
  .value:nth-last-child(-n+3) { border-bottom: var(--bw) solid var(--ink); }
  .value:nth-last-child(-n+2) { border-bottom: 0; }
}

/* =========================================================
   CONTACT — form as data record
   ========================================================= */
.contact-grid {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 0;
  border: var(--bw-2) solid var(--ink);
  background: var(--paper);
}
.contact-form { padding: 1.6rem; border-right: var(--bw) solid var(--ink); display: flex; flex-direction: column; gap: 0; }
.field {
  border-bottom: var(--bw) solid var(--ink);
  padding: 0.9rem 0;
  display: grid; grid-template-columns: 110px 1fr;
  gap: 1rem;
  align-items: baseline;
}
.field:last-of-type { border-bottom: 0; }
.field label { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.field input, .field textarea, .field select {
  width: 100%; background: transparent; border: 0; outline: 0;
  font: inherit; color: var(--ink);
  font-family: var(--f-mono); font-size: 1rem;
  padding: 0.2rem 0;
}
.field textarea { resize: vertical; min-height: 80px; }
.field:focus-within { background: var(--paper-2); }
.contact-info { padding: 1.6rem; display: flex; flex-direction: column; gap: 1.2rem; background: var(--ink); color: var(--paper); }
.contact-info__row { display: flex; flex-direction: column; gap: 0.2rem; padding-bottom: 0.8rem; border-bottom: 1px dashed rgba(241,236,224,0.2); }
.contact-info__row:last-child { border-bottom: 0; }
.contact-info__row small { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); }
.contact-info__row a, .contact-info__row p { font-family: var(--f-display); font-size: 1.05rem; letter-spacing: -0.01em; }
.contact-info__row a:hover { color: var(--orange); }
.contact-info .socials a { background: transparent; color: var(--paper); border-color: var(--paper); }
.contact-info .socials a:hover { background: var(--orange); color: var(--ink); border-color: var(--orange); }

@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form { border-right: 0; border-bottom: var(--bw) solid var(--ink); }
  .field { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}