/* ============================================================
   NAVA DIGITAL HUB — design system
   Technical-grid · Himalayan warmth · Sindoor + Brass
   ============================================================ */

:root {
  --paper:        oklch(0.972 0.012 78);
  --paper-2:      oklch(0.945 0.014 76);
  --paper-3:      oklch(0.918 0.016 72);
  --ink:          oklch(0.18  0.018 38);
  --ink-2:        oklch(0.32  0.022 40);
  --ink-3:        oklch(0.52  0.020 50);
  --rule:         oklch(0.84  0.015 60);
  --rule-2:       oklch(0.74  0.020 60);
  --sindoor:      oklch(0.48  0.16  27);
  --sindoor-2:    oklch(0.36  0.13  25);
  --brass:        oklch(0.71  0.10  78);
  --brass-2:      oklch(0.62  0.11  72);
  --ink-surface:  oklch(0.16  0.018 38);
  --paper-on-ink: oklch(0.95  0.013 78);
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --devanagari: "Mukta", "Noto Sans Devanagari", sans-serif;
  --max:    1320px;
  --gutter:  24px;
  --col-gap: 24px;
  --rule-w:  1px;
  --fs-meta: 11px;
  --fs-body: 16px;
  --fs-lede: 20px;
  --fs-h3:   28px;
  --fs-h2:   44px;
  --fs-h1:   clamp(48px, 7vw, 116px);
}

/* ============================================================ reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--display);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01","ss02","cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
h1,h2,h3,h4,h5 { margin: 0; font-weight: 500; letter-spacing: -0.02em; }
p { margin: 0; }
::selection { background: var(--sindoor); color: var(--paper); }

/* ============================================================ grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: radial-gradient(oklch(0.5 0.03 60 / 0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}
main, header, footer { position: relative; z-index: 1; }

/* ============================================================ utilities */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: 0.04em; text-transform: uppercase; }
.deva { font-family: var(--devanagari); letter-spacing: 0; }
.muted { color: var(--ink-3); }
.rule { height: var(--rule-w); background: var(--rule); border: 0; margin: 0; }
.rule-strong { background: var(--ink); height: 2px; }
.chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 10px; background: var(--paper); border: 1px solid var(--rule); color: var(--ink-2);
}
.label-row { display: flex; align-items: center; gap: 12px; color: var(--ink-3); }
.label-row::before { content: ""; width: 8px; height: 8px; background: var(--sindoor); display: inline-block; flex: none; }
.label-row.brass::before { background: var(--brass); }
.label-row.ink::before { background: var(--ink); }
.crosshair { position: absolute; width: 16px; height: 16px; pointer-events: none; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: var(--ink-3); }
.crosshair::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.crosshair::after  { top: 50%; left: 0; right: 0; height: 1px; }
.placeholder { background: var(--paper-2); border: 1px solid var(--rule); position: relative; overflow: hidden; }
.placeholder--stripes { background-image: repeating-linear-gradient(-45deg, transparent 0 8px, oklch(0.85 0.015 60 / 0.55) 8px 9px); }
.placeholder__tag { position: absolute; left: 12px; top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); background: var(--paper); padding: 3px 6px; border: 1px solid var(--rule); }
.placeholder__corner { position: absolute; width: 12px; height: 12px; border: 1px solid var(--ink-3); }
.placeholder__corner.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.placeholder__corner.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.placeholder__corner.bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
.placeholder__corner.br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

/* ============================================================ header */
.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 50; }
.site-header__inner { max-width: var(--max); margin: 0 auto; padding: 14px var(--gutter); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { width: 28px; height: 28px; position: relative; flex: none; }
.brand__mark::before, .brand__mark::after { content: ""; position: absolute; inset: 0; }
.brand__mark::before { background: var(--ink); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.brand__mark::after  { background: var(--sindoor); clip-path: polygon(25% 100%, 50% 50%, 75% 100%); }
.brand__name { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.brand__name small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-top: 1px; }
.nav { display: flex; gap: 4px; justify-self: center; }
.nav a { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; font-size: 14px; color: var(--ink-2); border-radius: 2px; position: relative; }
.nav a .num { font-family: var(--mono); font-size: 9px; color: var(--ink-3); letter-spacing: 0.06em; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--sindoor); }
.header-cta { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ink); color: var(--paper); font-size: 13px; border-radius: 2px; }
.header-cta__arrow { font-family: var(--mono); font-size: 11px; }
@media (max-width: 880px) {
  .site-header__inner { grid-template-columns: auto auto; }
  .nav { display: none; }
}

/* ============================================================ page-head (inner pages) */
.page-head { border-bottom: 1px solid var(--rule); padding: 64px 0 56px; position: relative; overflow: hidden; }
.page-head__grid { display: grid; grid-template-columns: 200px 1fr; gap: var(--col-gap); align-items: end; }
.page-head__meta { color: var(--ink-3); }
.page-head__meta-row { display: flex; flex-direction: column; gap: 18px; font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: 0.06em; text-transform: uppercase; }
.page-head__meta-row span { display: block; }
.page-head__meta-row b { color: var(--ink); font-weight: 500; display: block; }
.page-head h1 { font-size: var(--fs-h1); line-height: 0.94; letter-spacing: -0.035em; font-weight: 500; max-width: 14ch; }
.page-head h1 em { font-style: normal; color: var(--sindoor); }
.page-head h1 .deva { font-size: 0.55em; vertical-align: 0.05em; margin-left: 0.15em; color: var(--ink-3); font-weight: 400; }
@media (max-width: 720px) { .page-head__grid { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================ buttons */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; font-size: 15px; background: var(--ink); color: var(--paper); border: 0; border-radius: 2px; transition: transform 0.15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn--sindoor { background: var(--sindoor); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn .arr { font-family: var(--mono); font-size: 12px; }

/* ============================================================ ticker */
.ticker { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper-2); overflow: hidden; padding: 14px 0; }
.ticker__track { display: flex; gap: 48px; animation: tick 60s linear infinite; white-space: nowrap; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--ink-2); }
.ticker__track span::after { content: "◆"; margin-left: 48px; color: var(--sindoor); }
.ticker__track .deva { color: var(--brass); margin: 0 8px; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================ footer */
.site-footer { background: var(--ink-surface); color: var(--paper-on-ink); margin-top: 96px; padding: 80px 0 32px; border-top: 6px solid var(--sindoor); }
.site-footer .wrap { position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 64px; border-bottom: 1px solid oklch(0.3 0.02 40); }
.footer-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); margin-bottom: 18px; font-weight: 400; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--paper-on-ink); opacity: 0.78; }
.footer-col a:hover { opacity: 1; color: var(--brass); }
.footer-brand p { font-size: 18px; line-height: 1.4; max-width: 28ch; opacity: 0.85; }
.footer-brand p .deva { color: var(--brass); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.7 0.02 50); gap: 16px; flex-wrap: wrap; }
.footer-bottom .sig { color: var(--brass); }
.footer-wordmark { font-size: clamp(72px, 14vw, 220px); letter-spacing: -0.04em; line-height: 0.9; font-weight: 500; color: transparent; -webkit-text-stroke: 1px oklch(0.4 0.02 40); margin: 60px 0 0; white-space: nowrap; overflow: hidden; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ============================================================ forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field textarea, .field select { font: inherit; font-family: var(--display); font-size: 16px; padding: 14px; background: var(--paper); border: 1px solid var(--rule); color: var(--ink); border-radius: 2px; outline: none; transition: border-color 0.15s; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 120px; }

/* ============================================================ grids + section */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); }
@media (max-width: 880px) { .grid-3,.grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section-head { display: grid; grid-template-columns: 200px 1fr; gap: var(--col-gap); margin-bottom: 56px; align-items: start; }
.section-head__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 8px; }
.section-head__num b { display: block; color: var(--sindoor); font-weight: 500; }
.section-head h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.025em; max-width: 22ch; }
.section-head h2 .deva { font-size: 0.5em; color: var(--ink-3); margin-left: 0.4em; vertical-align: 0.1em; font-weight: 400; }
@media (max-width: 720px) { .section { padding: 64px 0; } .section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; } }

/* ============================================================
   HOME PAGE
   ============================================================ */
.hero { position: relative; padding: 40px 0 0; border-bottom: 1px solid var(--rule); overflow: hidden; }
.hero__topmeta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.hero__topmeta div b { display: block; color: var(--ink); font-weight: 500; margin-top: 4px; }
.hero__main { padding: 80px 0 24px; }
.hero h1 { font-size: clamp(56px, 9vw, 156px); line-height: 0.88; letter-spacing: -0.045em; font-weight: 500; max-width: 16ch; }
.hero h1 .row { display: block; }
.hero h1 em { font-style: normal; color: var(--sindoor); font-weight: 500; }
.hero h1 .deva { color: var(--brass); font-size: 0.42em; margin-left: 0.2em; vertical-align: 0.25em; font-weight: 500; }
.hero h1 .blink { display: inline-block; width: 0.5em; height: 0.78em; background: var(--ink); vertical-align: -0.04em; margin-left: 0.04em; animation: blink 1.1s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero__bottom { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--col-gap); align-items: end; padding: 48px 0 56px; }
.hero__lede { font-size: 19px; line-height: 1.45; max-width: 38ch; color: var(--ink-2); }
.hero__ctas { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hero__stamp { justify-self: end; text-align: right; font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); line-height: 1.6; }
.hero__stamp .seal { display: inline-block; margin-top: 14px; padding: 6px 10px; border: 1px solid var(--sindoor); color: var(--sindoor); }
@media (max-width: 880px) { .hero__topmeta { grid-template-columns: 1fr 1fr; } .hero__bottom { grid-template-columns: 1fr; align-items: flex-start; } .hero__stamp { justify-self: flex-start; text-align: left; } }

/* services preview */
.glance { padding: 96px 0; border-bottom: 1px solid var(--rule); }
.svc-list { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ink); }
.svc { display: grid; grid-template-columns: 70px 1.2fr 1.6fr 1fr 70px; gap: var(--col-gap); padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: center; cursor: pointer; transition: background 0.2s; position: relative; }
.svc:hover { background: oklch(0.96 0.014 76); }
.svc:hover .svc__name em { color: var(--sindoor); }
.svc__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); }
.svc__name { font-size: 30px; letter-spacing: -0.02em; line-height: 1; }
.svc__name em { font-style: normal; transition: color 0.2s; }
.svc__name .deva { font-size: 0.55em; color: var(--ink-3); margin-left: 0.4em; }
.svc__desc { font-size: 14px; color: var(--ink-2); line-height: 1.45; max-width: 42ch; }
.svc__tags { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); line-height: 1.7; }
.svc__arr { justify-self: end; font-family: var(--mono); font-size: 13px; color: var(--ink-3); transition: color 0.2s, transform 0.2s; }
.svc:hover .svc__arr { color: var(--sindoor); transform: translateX(4px); }
@media (max-width: 880px) { .svc { grid-template-columns: 40px 1fr 30px; row-gap: 8px; padding: 20px 0; } .svc__desc,.svc__tags { grid-column: 2 / span 1; } }

/* process */
.process { background: var(--paper-2); padding: 96px 0; border-bottom: 1px solid var(--rule); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--rule); background: var(--paper); }
.step { padding: 32px 24px 28px; border-right: 1px solid var(--rule); position: relative; min-height: 260px; display: flex; flex-direction: column; }
.step:last-child { border-right: 0; }
.step__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sindoor); margin-bottom: 24px; }
.step__icon { width: 56px; height: 56px; margin-bottom: 28px; border: 1px solid var(--ink); position: relative; }
.step__icon::before, .step__icon::after { content: ""; position: absolute; background: var(--ink); }
.step--01 .step__icon::before { left: 8px; top: 8px; right: 8px; height: 1px; }
.step--01 .step__icon::after  { left: 8px; top: 50%; right: 50%; height: 1px; }
.step--02 .step__icon { border-radius: 50%; }
.step--02 .step__icon::before { left: 50%; top: 8px; bottom: 8px; width: 1px; background: var(--sindoor); }
.step--02 .step__icon::after  { left: 14px; top: 14px; width: 8px; height: 8px; background: var(--sindoor); border-radius: 50%; }
.step--03 .step__icon::before { left: 12px; bottom: 12px; width: 12px; height: 12px; background: var(--brass); }
.step--03 .step__icon::after  { right: 12px; top: 12px; width: 12px; height: 12px; background: var(--ink); }
.step--04 .step__icon::before { left: 8px; right: 8px; top: 50%; height: 1px; background: var(--sindoor); }
.step--04 .step__icon::after  { left: 8px; right: 8px; bottom: 8px; height: 8px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px); }
.step h3 { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 8px; }
.step h3 .deva { font-size: 0.55em; color: var(--ink-3); margin-left: 0.4em; font-weight: 400; }
.step p { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
@media (max-width: 880px) { .process-grid { grid-template-columns: 1fr 1fr; } .step { border-bottom: 1px solid var(--rule); } .step:nth-child(2n) { border-right: 0; } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } .step { border-right: 0; } }

/* ink panel / pillars */
.ink-panel { background: var(--ink-surface); color: var(--paper-on-ink); padding: 96px 0; position: relative; overflow: hidden; }
.ink-panel::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--rule-2) 1px, transparent 1px); background-size: 100% 40px; opacity: 0.08; }
.ink-panel .wrap { position: relative; }
.ink-panel .section-head h2 { color: var(--paper-on-ink); }
.ink-panel .section-head__num { color: var(--brass); }
.ink-panel .section-head__num b { color: var(--paper-on-ink); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid oklch(0.3 0.02 40); }
.pillar { padding: 40px 28px 40px 0; border-bottom: 1px solid oklch(0.3 0.02 40); border-right: 1px solid oklch(0.3 0.02 40); }
.pillar:nth-child(3n) { border-right: 0; padding-right: 0; }
.pillar__tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--sindoor); margin-bottom: 24px; text-transform: uppercase; }
.pillar h3 { font-size: 26px; line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.02em; }
.pillar h3 em { font-style: normal; color: var(--brass); }
.pillar p { color: oklch(0.8 0.018 60); font-size: 15px; line-height: 1.5; max-width: 36ch; }
@media (max-width: 880px) { .pillars { grid-template-columns: 1fr 1fr; } .pillar:nth-child(2n) { border-right: 0; padding-right: 0; } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } .pillar { border-right: 0 !important; padding-right: 0 !important; } }

/* work preview on homepage */
.work-preview { padding: 96px 0; border-bottom: 1px solid var(--rule); }
.work-list { display: grid; grid-template-columns: 1fr 1fr; gap: 56px var(--col-gap); }
.case { display: grid; gap: 16px; }
.case__art { aspect-ratio: 4 / 3; background: var(--paper-2); position: relative; overflow: hidden; border: 1px solid var(--rule); }
.case__art--a { background: radial-gradient(circle at 30% 40%, var(--sindoor) 0 70px, transparent 71px), repeating-linear-gradient(45deg, transparent 0 18px, oklch(0.85 0.015 60 / 0.5) 18px 19px), var(--paper-2); }
.case__art--b { background: linear-gradient(135deg, var(--brass) 0 50%, var(--ink-surface) 50%); }
.case__art--c { background: conic-gradient(from 220deg at 50% 50%, var(--ink) 0 25%, var(--sindoor) 25% 50%, var(--brass) 50% 75%, var(--paper-2) 75% 100%); filter: contrast(0.95); }
.case__art--d { background: repeating-linear-gradient(0deg, var(--ink) 0 2px, transparent 2px 18px), var(--paper); }
.case__art .tag { position: absolute; top: 14px; left: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--paper); color: var(--ink); padding: 4px 8px; border: 1px solid var(--ink); }
.case__art .yr  { position: absolute; top: 14px; right: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--paper); background: var(--ink); padding: 4px 8px; }
.case__meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.case h3 { font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
.case p { color: var(--ink-2); font-size: 14px; max-width: 50ch; }
@media (max-width: 720px) { .work-list { grid-template-columns: 1fr; } }

/* testimonial */
.testimonial-strip { padding: 96px 0; border-bottom: 1px solid var(--rule); background: var(--paper); }
.quote { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: end; }
.quote blockquote { margin: 0; font-size: clamp(28px, 4vw, 50px); line-height: 1.14; letter-spacing: -0.02em; max-width: 22ch; font-weight: 500; }
.quote blockquote em { font-style: normal; color: var(--sindoor); }
.quote__attr { display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.quote__attr b { color: var(--ink); display: block; font-weight: 500; }
.quote__attr .ph { height: 60px; width: 60px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--rule); margin-bottom: 6px; background-image: repeating-linear-gradient(-45deg, transparent 0 4px, oklch(0.85 0.015 60 / 0.6) 4px 5px); }
@media (max-width: 720px) { .quote { grid-template-columns: 1fr; } }

/* faq */
.faq { padding: 96px 0; border-bottom: 1px solid var(--rule); }
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
details.faq-item { border-bottom: 1px solid var(--rule); padding: 24px 0; }
details.faq-item summary { display: grid; grid-template-columns: 60px 1fr 40px; gap: var(--col-gap); align-items: center; cursor: pointer; list-style: none; }
details.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); }
.faq-item__q { font-size: 22px; letter-spacing: -0.015em; line-height: 1.2; }
.faq-item__toggle { justify-self: end; font-family: var(--mono); font-size: 18px; color: var(--sindoor); width: 28px; height: 28px; border: 1px solid var(--rule); display: grid; place-items: center; transition: transform 0.2s; }
details[open] .faq-item__toggle { transform: rotate(45deg); }
.faq-item__a { padding-top: 16px; padding-left: 84px; color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 70ch; }
@media (max-width: 720px) { details.faq-item summary { grid-template-columns: 32px 1fr 28px; } .faq-item__a { padding-left: 56px; } .faq-item__q { font-size: 18px; } }

/* newsletter */
.newsletter { padding: 96px 0; background: var(--paper-2); border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.newsletter__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.newsletter h2 { font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -0.03em; max-width: 14ch; }
.newsletter h2 em { font-style: normal; color: var(--sindoor); }
.newsletter p { color: var(--ink-2); margin-top: 16px; max-width: 38ch; }
.newsletter form { display: grid; gap: 12px; }
.newsletter__row { display: grid; grid-template-columns: 1fr auto; gap: 8px; border: 1px solid var(--ink); background: var(--paper); padding: 6px; }
.newsletter__row input { border: 0; background: transparent; padding: 14px 12px; font: inherit; font-size: 16px; outline: none; }
.newsletter__row button { background: var(--ink); color: var(--paper); border: 0; padding: 0 20px; display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: 14px; }
.newsletter__row button .arr { font-family: var(--mono); }
.newsletter__terms { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 720px) { .newsletter__grid { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.svc-toc { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper-2); padding: 28px 0; position: sticky; top: 61px; z-index: 40; }
.svc-toc__inner { display: grid; grid-template-columns: 180px 1fr; gap: var(--col-gap); align-items: center; }
.svc-toc__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.svc-toc__list { display: flex; flex-wrap: wrap; gap: 4px 6px; font-family: var(--mono); font-size: 12px; }
.svc-toc__list a { padding: 6px 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); letter-spacing: 0.04em; text-transform: uppercase; transition: all 0.15s; }
.svc-toc__list a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 720px) { .svc-toc__inner { grid-template-columns: 1fr; gap: 12px; } .svc-toc { position: static; } }
.svc-block { padding: 96px 0; border-bottom: 1px solid var(--rule); }
.svc-block:nth-child(even) { background: var(--paper-2); }
.svc-block__head { display: grid; grid-template-columns: 200px 1fr 280px; gap: var(--col-gap); align-items: end; padding-bottom: 48px; border-bottom: 1px solid var(--rule); margin-bottom: 48px; }
.svc-block__num { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sindoor); }
.svc-block__num b { display: block; color: var(--ink); font-weight: 500; margin-top: 4px; }
.svc-block h2 { font-size: clamp(40px, 5.5vw, 76px); line-height: 0.96; letter-spacing: -0.03em; max-width: 16ch; }
.svc-block h2 .deva { font-size: 0.45em; color: var(--brass); margin-left: 0.3em; vertical-align: 0.25em; font-weight: 500; }
.svc-block__price { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); text-align: right; line-height: 1.7; }
.svc-block__price b { display: block; color: var(--ink); font-weight: 500; font-size: 16px; letter-spacing: -0.01em; text-transform: none; margin-top: 6px; }
.svc-body { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; }
.svc-lede { font-size: 22px; line-height: 1.4; color: var(--ink); max-width: 36ch; margin-bottom: 32px; }
.svc-prose { color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 50ch; }
.svc-prose p + p { margin-top: 14px; }
.svc-includes { border-top: 1px solid var(--ink); }
.svc-includes h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: 16px 0 8px; }
.svc-includes ul { list-style: none; margin: 0; padding: 0; }
.svc-includes li { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; font-size: 15px; }
.svc-includes li .n { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.06em; }
.svc-includes li b { font-weight: 500; }
.svc-includes li .d { color: var(--ink-2); font-size: 13px; margin-top: 2px; display: block; }
.svc-includes li .tg { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.svc-deliverables { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 880px) { .svc-block__head { grid-template-columns: 1fr; gap: 24px; } .svc-block__price { text-align: left; } }
@media (max-width: 720px) { .svc-body { grid-template-columns: 1fr; gap: 32px; } }
.engage { padding: 96px 0; border-bottom: 1px solid var(--rule); }
.engage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
.model { border: 1px solid var(--rule); background: var(--paper); padding: 32px 24px 28px; display: flex; flex-direction: column; gap: 16px; min-height: 380px; }
.model--featured { background: var(--ink-surface); color: var(--paper-on-ink); border-color: var(--ink-surface); }
.model__tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sindoor); }
.model--featured .model__tag { color: var(--brass); }
.model h3 { font-size: 28px; letter-spacing: -0.02em; line-height: 1; }
.model__price { font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; }
.model__price b { font-family: var(--display); font-size: 28px; font-weight: 500; letter-spacing: -0.01em; }
.model ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.model li::before { content: "→ "; font-family: var(--mono); color: var(--sindoor); margin-right: 8px; }
.model--featured li::before { color: var(--brass); }
.model__cta { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.model--featured .model__cta { border-top-color: oklch(0.3 0.02 40); }
@media (max-width: 880px) { .engage-grid { grid-template-columns: 1fr; } }

/* ============================================================
   WORK PAGE
   ============================================================ */
.filter-bar { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper-2); padding: 22px 0; }
.filter-bar__inner { display: grid; grid-template-columns: 200px 1fr 200px; gap: var(--col-gap); align-items: center; }
.filter-bar__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.filter-bar__list { display: flex; flex-wrap: wrap; gap: 6px; }
.filter { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); cursor: pointer; transition: all 0.15s; }
.filter:hover, .filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter-bar__count { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
@media (max-width: 880px) { .filter-bar__inner { grid-template-columns: 1fr; gap: 12px; } .filter-bar__count { text-align: left; } }
.featured-case { padding: 96px 0; border-bottom: 1px solid var(--rule); }
.fc-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: stretch; }
.fc-art { aspect-ratio: 4 / 3; background: var(--paper-2); border: 1px solid var(--rule); position: relative; overflow: hidden; }
.fc-art--featured { background: radial-gradient(circle at 35% 45%, var(--sindoor) 0 90px, transparent 91px), repeating-linear-gradient(45deg, transparent 0 20px, oklch(0.85 0.015 60 / 0.5) 20px 21px), var(--paper-2); }
.fc-art .tag { position: absolute; top: 20px; left: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--paper); color: var(--ink); padding: 5px 10px; border: 1px solid var(--ink); }
.fc-art .yr  { position: absolute; top: 20px; right: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--paper); background: var(--ink); padding: 5px 10px; }
.fc-art .corner { position: absolute; bottom: 16px; left: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.fc-body { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.fc-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sindoor); margin-bottom: 4px; }
.fc-meta b { color: var(--ink); display: block; margin-top: 4px; font-weight: 500; font-size: 14px; }
.fc-body h2 { font-size: clamp(36px, 4.5vw, 60px); line-height: 1; letter-spacing: -0.025em; }
.fc-body .lede { font-size: 18px; color: var(--ink-2); line-height: 1.5; margin-top: 16px; max-width: 50ch; }
.fc-results { border-top: 1px solid var(--ink); padding-top: 16px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.fc-res__k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.fc-res__v { font-size: 28px; letter-spacing: -0.025em; line-height: 1; }
.fc-res__v em { font-style: normal; color: var(--sindoor); }
@media (max-width: 880px) { .fc-grid { grid-template-columns: 1fr; gap: 32px; } }
.cases { padding: 96px 0; border-bottom: 1px solid var(--rule); }
.cases-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.case-card { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; padding: 64px 0; border-top: 1px solid var(--rule); align-items: center; }
.case-card:first-child { border-top: 2px solid var(--ink); }
.case-card:nth-child(even) { direction: rtl; }
.case-card:nth-child(even) > * { direction: ltr; }
.case-card__art { aspect-ratio: 5 / 4; background: var(--paper-2); border: 1px solid var(--rule); position: relative; overflow: hidden; }
.ca-art--a { background: radial-gradient(circle at 30% 40%, var(--sindoor) 0 70px, transparent 71px), repeating-linear-gradient(45deg, transparent 0 18px, oklch(0.85 0.015 60 / 0.5) 18px 19px), var(--paper-2); }
.ca-art--b { background: linear-gradient(135deg, var(--brass) 0 50%, var(--ink-surface) 50%); }
.ca-art--c { background: conic-gradient(from 220deg at 50% 50%, var(--ink) 0 25%, var(--sindoor) 25% 50%, var(--brass) 50% 75%, var(--paper-2) 75% 100%); filter: contrast(0.95); }
.ca-art--d { background: repeating-linear-gradient(0deg, var(--ink) 0 2px, transparent 2px 18px), var(--paper); }
.ca-art--e { background: linear-gradient(90deg, var(--paper-2) 0 30%, var(--sindoor) 30% 32%, var(--paper-2) 32% 60%, var(--brass) 60% 62%, var(--paper-2) 62% 100%); }
.ca-art--f { background: radial-gradient(ellipse at 70% 60%, var(--brass) 0 80px, transparent 81px), radial-gradient(ellipse at 20% 30%, var(--sindoor) 0 50px, transparent 51px), var(--ink-surface); }
.case-card__art .tag { position: absolute; top: 14px; left: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--paper); color: var(--ink); padding: 4px 8px; border: 1px solid var(--ink); }
.case-card__art .yr  { position: absolute; top: 14px; right: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--paper); background: var(--ink); padding: 4px 8px; }
.case-card__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sindoor); margin-bottom: 16px; }
.case-card__num b { color: var(--ink); display: block; margin-top: 4px; font-weight: 500; font-size: 14px; }
.case-card h3 { font-size: clamp(28px, 3.5vw, 44px); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 16px; }
.case-card p { color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 50ch; }
.case-card__chips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.case-card__stats { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--rule); padding-top: 16px; }
.case-card__stats .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.case-card__stats .v { font-size: 22px; letter-spacing: -0.02em; line-height: 1; }
.case-card__stats .v em { font-style: normal; color: var(--sindoor); }
.case-card__cta { margin-top: 24px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 880px) { .case-card, .case-card:nth-child(even) { grid-template-columns: 1fr; direction: ltr; gap: 24px; padding: 48px 0; } }
.clients-strip { padding: 64px 0; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.clients-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.clients-grid div { padding: 32px 16px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); display: flex; align-items: center; justify-content: center; min-height: 100px; background: var(--paper); flex-direction: column; }
.clients-grid div small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
@media (max-width: 880px) { .clients-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .clients-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.manifesto { padding: 96px 0; border-bottom: 1px solid var(--rule); }
.manifesto__grid { display: grid; grid-template-columns: 200px 1fr; gap: var(--col-gap); }
.manifesto__body { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; letter-spacing: -0.02em; max-width: 22ch; }
.manifesto__body em { font-style: normal; color: var(--sindoor); }
.manifesto__body .deva { color: var(--brass); font-size: 0.7em; }
.manifesto__body p + p { margin-top: 24px; }
.founder { padding: 96px 0; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.founder__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.founder__photo { aspect-ratio: 4 / 5; background: var(--paper); border: 1px solid var(--rule); position: relative; overflow: hidden; background-image: repeating-linear-gradient(-45deg, transparent 0 6px, oklch(0.85 0.015 60 / 0.5) 6px 7px); }
.founder__photo .placeholder__tag { left: 14px; top: 14px; }
.founder__photo .stamp { position: absolute; bottom: 14px; right: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sindoor); border: 1px solid var(--sindoor); padding: 4px 8px; background: var(--paper); }
.founder__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--rule); }
.founder__role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sindoor); }
.founder__name { font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.025em; }
.founder__name .deva { color: var(--ink-3); font-size: 0.5em; margin-left: 0.3em; }
.founder__prose { color: var(--ink-2); line-height: 1.6; font-size: 16px; max-width: 56ch; }
.founder__prose p + p { margin-top: 12px; }
.founder__sig { margin-top: 24px; font-family: 'Space Grotesk', serif; font-style: italic; font-size: 28px; color: var(--sindoor); letter-spacing: -0.02em; }
@media (max-width: 880px) { .founder__grid { grid-template-columns: 1fr; } }
.facts { padding: 96px 0; border-bottom: 1px solid var(--rule); }
.facts__list { border-top: 1px solid var(--ink); }
.facts__row { display: grid; grid-template-columns: 220px 1fr; gap: var(--col-gap); padding: 22px 0; border-bottom: 1px solid var(--rule); }
.facts__k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-top: 4px; }
.facts__v { font-size: 18px; color: var(--ink); line-height: 1.4; }
.facts__v b { font-weight: 500; }
.facts__v .deva { color: var(--ink-3); margin-left: 8px; font-size: 0.85em; }
@media (max-width: 720px) { .facts__row { grid-template-columns: 1fr; gap: 4px; } }
.timeline { padding: 96px 0; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.tl-list { border-top: 1px solid var(--ink); }
.tl-row { display: grid; grid-template-columns: 140px 220px 1fr; gap: var(--col-gap); padding: 24px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.tl-year { font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; color: var(--sindoor); font-weight: 500; }
.tl-title { font-size: 20px; letter-spacing: -0.015em; line-height: 1.2; }
.tl-desc { color: var(--ink-2); font-size: 14px; line-height: 1.5; max-width: 60ch; }
@media (max-width: 720px) { .tl-row { grid-template-columns: 80px 1fr; row-gap: 8px; } .tl-desc { grid-column: 2; } }
.values { padding: 96px 0; border-bottom: 1px solid var(--rule); }
.val-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px var(--col-gap); }
.val { padding-top: 24px; border-top: 2px solid var(--ink); display: flex; flex-direction: column; gap: 12px; }
.val__tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sindoor); }
.val h3 { font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
.val h3 em { font-style: normal; color: var(--sindoor); }
.val p { color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 50ch; }
@media (max-width: 720px) { .val-grid { grid-template-columns: 1fr; } }
.stats { padding: 80px 0; background: var(--ink-surface); color: var(--paper-on-ink); border-bottom: 1px solid var(--ink); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); }
.stat { border-left: 1px solid oklch(0.3 0.02 40); padding-left: 16px; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__num { font-size: clamp(48px, 7vw, 92px); line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
.stat__num em { font-style: normal; color: var(--brass); }
.stat__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.7 0.02 50); margin-top: 12px; }
@media (max-width: 880px) { .stats-grid { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 560px) { .stats-grid { grid-template-columns: 1fr; } .stat { border-left: 0; padding-left: 0; } }
.cta-strip { padding: 96px 0; border-bottom: 1px solid var(--rule); }
.cta-strip__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.cta-strip h2 { font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -0.03em; max-width: 16ch; }
.cta-strip h2 em { font-style: normal; color: var(--sindoor); }
@media (max-width: 720px) { .cta-strip__grid { grid-template-columns: 1fr; } }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact { padding: 80px 0; border-bottom: 1px solid var(--rule); }
.contact__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; }
.form-card { border: 1px solid var(--rule); background: var(--paper); }
.form-card__head { padding: 24px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; background: var(--paper-2); }
.form-card__head .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sindoor); }
.form-card__head h3 { font-size: 18px; letter-spacing: -0.01em; font-weight: 500; margin-top: 4px; }
.form-card__head .status { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; }
.form-card__head .status::before { content: ""; width: 8px; height: 8px; background: oklch(0.6 0.18 145); border-radius: 50%; animation: pulse 2s ease infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.form-card form { padding: 24px; display: grid; gap: 18px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .form-row-2 { grid-template-columns: 1fr; } }
.interest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.interest { border: 1px solid var(--rule); padding: 10px 12px; background: var(--paper); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; text-align: left; transition: all 0.15s; }
.interest:hover { border-color: var(--ink); }
.interest[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 520px) { .interest-grid { grid-template-columns: 1fr 1fr; } }
.budget-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
@media (max-width: 520px) { .budget-row { grid-template-columns: 1fr 1fr; } }
.form-card__foot { padding: 20px 24px; border-top: 1px solid var(--rule); background: var(--paper-2); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-card__foot .note { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.details { display: flex; flex-direction: column; gap: 48px; }
.det-block { border-top: 2px solid var(--ink); padding-top: 20px; }
.det-block h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.det-block .row { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.det-block .row:last-child { border-bottom: 0; }
.det-block .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.det-block .v { font-size: 17px; letter-spacing: -0.01em; }
.det-block .v small { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.det-block .v a { color: var(--sindoor); border-bottom: 1px solid var(--sindoor); }
.direct { border: 1px solid var(--ink); background: var(--ink-surface); color: var(--paper-on-ink); padding: 28px; display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: center; }
.direct__photo { width: 64px; height: 64px; border-radius: 50%; background: oklch(0.3 0.02 40); background-image: repeating-linear-gradient(-45deg, transparent 0 3px, oklch(0.5 0.02 50 / 0.6) 3px 4px); border: 1px solid var(--brass); }
.direct h3 { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 4px; }
.direct h3 em { font-style: normal; color: var(--brass); }
.direct .role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass); margin-bottom: 12px; }
.direct .links { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--paper-on-ink); }
.direct .links a { border-bottom: 1px solid oklch(0.4 0.02 40); }
@media (max-width: 880px) { .contact__grid { grid-template-columns: 1fr; gap: 48px; } }
.map-section { padding: 80px 0; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.map-frame { border: 1px solid var(--rule); background: var(--paper); overflow: hidden; position: relative; }
.map-grid { display: grid; grid-template-columns: 1.4fr 1fr; }
.map-svg-wrap { aspect-ratio: 5 / 4; background: var(--paper-2); border-right: 1px solid var(--rule); position: relative; }
.map-svg-wrap svg { width: 100%; height: 100%; display: block; }
.map-overlay { position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); background: var(--paper); border: 1px solid var(--rule); padding: 10px 12px; }
.map-overlay b { color: var(--ink); font-weight: 500; }
.map-overlay .pin-info { display: flex; align-items: center; gap: 8px; color: var(--sindoor); font-size: 11px; }
.map-overlay .pin-info::before { content: ""; width: 8px; height: 8px; background: var(--sindoor); border: 2px solid var(--paper); border-radius: 50%; box-shadow: 0 0 0 1px var(--sindoor); }
.map-overlay .scale { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; }
.map-overlay .scale::before { content: ""; display: inline-block; width: 40px; height: 1px; background: var(--ink); }
.map-side { padding: 28px; display: flex; flex-direction: column; gap: 24px; }
.map-side h3 { font-size: 22px; letter-spacing: -0.02em; }
.map-side .row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.map-side .row:last-child { border-bottom: 0; }
.map-side .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.map-side .v { font-size: 15px; }
.map-side .v a { color: var(--sindoor); }
@media (max-width: 880px) { .map-grid { grid-template-columns: 1fr; } .map-svg-wrap { border-right: 0; border-bottom: 1px solid var(--rule); } }
.contact-faq { padding: 80px 0; border-bottom: 1px solid var(--rule); }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px var(--col-gap); }
.cf-item { padding-top: 16px; border-top: 1px solid var(--rule); }
.cf-item:nth-child(-n+2) { border-top: 2px solid var(--ink); }
.cf-item h3 { font-size: 18px; letter-spacing: -0.01em; margin-bottom: 8px; line-height: 1.25; }
.cf-item p { color: var(--ink-2); font-size: 14px; line-height: 1.55; }
@media (max-width: 720px) { .cf-grid { grid-template-columns: 1fr; } }
.response-strip { background: var(--ink-surface); color: var(--paper-on-ink); padding: 24px 0; border-bottom: 1px solid var(--rule); }
.response-strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(0.7 0.02 50); }
.response-strip .item b { color: var(--paper-on-ink); display: block; margin-top: 4px; font-size: 14px; letter-spacing: 0.04em; }
.response-strip .item b .deva { color: var(--brass); }
@media (max-width: 720px) { .response-strip .wrap { grid-template-columns: 1fr 1fr; row-gap: 16px; } }

/* ============================================================
   JOURNAL / BLOG PAGE
   ============================================================ */
.cat-bar { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper-2); padding: 22px 0; }
.cat-bar__inner { display: grid; grid-template-columns: 180px 1fr 180px; gap: var(--col-gap); align-items: center; }
.cat-bar__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.cat-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cat { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.cat .cnt { color: var(--ink-3); }
.cat:hover, .cat[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cat:hover .cnt, .cat[aria-pressed="true"] .cnt { color: var(--brass); }
.cat-bar__rss { text-align: right; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sindoor); }
@media (max-width: 880px) { .cat-bar__inner { grid-template-columns: 1fr; gap: 12px; } .cat-bar__rss { text-align: left; } }
.featured-post { padding: 80px 0; border-bottom: 1px solid var(--rule); }
.fp-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.fp-art { aspect-ratio: 5 / 4; background: radial-gradient(circle at 65% 40%, var(--sindoor) 0 60px, transparent 61px), radial-gradient(circle at 25% 70%, var(--brass) 0 50px, transparent 51px), repeating-linear-gradient(45deg, transparent 0 16px, oklch(0.85 0.015 60 / 0.5) 16px 17px), var(--paper-2); border: 1px solid var(--rule); position: relative; }
.fp-art .tag { position: absolute; top: 16px; left: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--paper); color: var(--ink); padding: 4px 8px; border: 1px solid var(--ink); }
.fp-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sindoor); display: flex; gap: 12px; }
.fp-meta b { color: var(--ink); font-weight: 500; }
.fp h2 { font-size: clamp(36px, 4.5vw, 60px); line-height: 1.02; letter-spacing: -0.025em; margin: 20px 0 16px; max-width: 18ch; }
.fp h2 em { font-style: normal; color: var(--sindoor); }
.fp p { color: var(--ink-2); font-size: 18px; line-height: 1.5; max-width: 50ch; }
.fp__byline { margin-top: 24px; display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.fp__byline .av { width: 32px; height: 32px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--rule); background-image: repeating-linear-gradient(-45deg, transparent 0 3px, oklch(0.85 0.015 60 / 0.6) 3px 4px); }
.fp__byline b { color: var(--ink); font-weight: 500; }
@media (max-width: 880px) { .fp-grid { grid-template-columns: 1fr; gap: 24px; } }
.posts { padding: 80px 0; border-bottom: 1px solid var(--rule); }
.posts-list { border-top: 2px solid var(--ink); }
.post { display: grid; grid-template-columns: 80px 1.6fr 1fr 140px 30px; gap: var(--col-gap); padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: baseline; transition: background 0.2s; cursor: pointer; }
.post:hover { background: oklch(0.96 0.014 76); }
.post__date { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); }
.post__title { font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; }
.post:hover .post__title em { color: var(--sindoor); }
.post__title em { font-style: normal; }
.post__excerpt { color: var(--ink-2); font-size: 14px; line-height: 1.45; max-width: 42ch; }
.post__cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sindoor); }
.post__cat b { color: var(--ink); display: block; font-weight: 500; margin-top: 4px; font-size: 12px; }
.post__read { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.post__read b { color: var(--ink); display: block; font-weight: 500; margin-top: 4px; }
.post__arr { font-family: var(--mono); font-size: 14px; color: var(--ink-3); transition: transform 0.2s, color 0.2s; }
.post:hover .post__arr { color: var(--sindoor); transform: translateX(4px); }
@media (max-width: 880px) { .post { grid-template-columns: 1fr 30px; } .post__date,.post__excerpt,.post__cat,.post__read,.post__title { grid-column: 1 / 2; } }
.topics { padding: 80px 0; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.topics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.topic { padding: 24px 20px 28px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: background 0.2s; }
.topic:hover { background: oklch(0.97 0.012 78); }
.topic h3 { font-size: 22px; letter-spacing: -0.02em; }
.topic h3 em { font-style: normal; color: var(--sindoor); }
.topic .cnt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.topic .desc { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin-top: 8px; }
@media (max-width: 880px) { .topics-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .topics-grid { grid-template-columns: 1fr; } }
.news-inline { padding: 80px 0; background: var(--ink-surface); color: var(--paper-on-ink); border-bottom: 1px solid var(--rule); }
.news-inline .section-head h2 { color: var(--paper-on-ink); }
.news-inline .section-head__num { color: var(--brass); }
.news-inline .section-head__num b { color: var(--paper-on-ink); }
.news-inline__form { border: 1px solid oklch(0.4 0.02 40); padding: 6px; display: grid; grid-template-columns: 1fr auto; gap: 6px; max-width: 560px; }
.news-inline__form input { border: 0; background: transparent; color: var(--paper-on-ink); padding: 14px 12px; font: inherit; font-size: 16px; outline: none; }
.news-inline__form input::placeholder { color: oklch(0.65 0.02 50); }
.news-inline__form button { background: var(--brass); color: var(--ink); border: 0; padding: 0 20px; font: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 10px; }
.news-inline__terms { margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.65 0.02 50); }

/* ============================================================
   SINGLE POST
   ============================================================ */
.post-header { padding: 64px 0 48px; border-bottom: 1px solid var(--rule); }
.post-header__meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sindoor); display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.post-header__meta b { color: var(--ink); }
.post-header h1 { font-size: clamp(36px, 5.5vw, 72px); line-height: 1.02; letter-spacing: -0.03em; max-width: 20ch; }
.post-header h1 em { font-style: normal; color: var(--sindoor); }
.post-byline { margin-top: 32px; display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.post-byline .av { width: 40px; height: 40px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--rule); background-image: repeating-linear-gradient(-45deg, transparent 0 3px, oklch(0.85 0.015 60 / 0.6) 3px 4px); }
.post-byline b { color: var(--ink); }
.post-body { padding: 64px 0; }
.post-body__inner { display: grid; grid-template-columns: 1fr 680px 1fr; gap: var(--col-gap); }
.post-content { grid-column: 2; font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.post-content h2 { font-size: 32px; letter-spacing: -0.02em; color: var(--ink); margin: 48px 0 16px; }
.post-content h3 { font-size: 24px; letter-spacing: -0.015em; color: var(--ink); margin: 32px 0 12px; }
.post-content p { margin-bottom: 20px; }
.post-content a { color: var(--sindoor); border-bottom: 1px solid var(--sindoor); }
.post-content ul, .post-content ol { padding-left: 24px; margin-bottom: 20px; }
.post-content li { margin-bottom: 8px; }
.post-content blockquote { border-left: 3px solid var(--sindoor); padding-left: 24px; margin: 32px 0; font-size: 22px; color: var(--ink); letter-spacing: -0.01em; }
.post-content code { font-family: var(--mono); font-size: 0.88em; background: var(--paper-2); padding: 2px 6px; border: 1px solid var(--rule); }
.post-content pre { background: var(--ink-surface); color: var(--paper-on-ink); padding: 24px; overflow-x: auto; font-family: var(--mono); font-size: 14px; line-height: 1.6; margin: 24px 0; }
.post-content pre code { background: none; border: none; padding: 0; }
@media (max-width: 1100px) { .post-body__inner { grid-template-columns: 1fr; } .post-content { grid-column: 1; max-width: 680px; } }

/* ============================================================
   404
   ============================================================ */
.error-404 { padding: 120px 0; min-height: 60vh; display: flex; align-items: center; }
.error-404__num { font-size: clamp(120px, 20vw, 280px); line-height: 0.85; letter-spacing: -0.05em; font-weight: 500; color: transparent; -webkit-text-stroke: 2px var(--rule-2); margin-bottom: 32px; }
.error-404 h1 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.03em; margin-bottom: 16px; }
.error-404 h1 em { font-style: normal; color: var(--sindoor); }
.error-404 p { color: var(--ink-2); font-size: 18px; max-width: 44ch; margin-bottom: 32px; }