@font-face { font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/InstrumentSerif-Regular.woff2') format('woff2'); }
@font-face { font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/InstrumentSerif-Italic.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/IBMPlexSans-Regular.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/IBMPlexSans-Medium.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/IBMPlexSans-Bold.woff2') format('woff2'); }

:root {
  --bg: #F1F4F0; --surface: #FBFCFA; --surface-sunk: #E8ECE5;
  --ink: #16211C; --ink-muted: #56635C;
  --accent: #1E4B3A; --accent-soft: #E4EBE4;
  --brass: #A97A34; --brass-strong: #8C641F;
  --border: #D7DED2; --border-strong: #C2CBBC;
  --glow: rgba(169,122,52,0.22);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#10140F; --surface:#171F19; --surface-sunk:#0C100C;
    --ink:#ECF1EC; --ink-muted:#93A69B;
    --accent:#5FAE86; --accent-soft:#1B2B22;
    --brass:#D8AA5F; --brass-strong:#E9C283;
    --border:#29332C; --border-strong:#3A463D;
    --glow: rgba(216,170,95,0.16);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:#10140F; --surface:#171F19; --surface-sunk:#0C100C;
  --ink:#ECF1EC; --ink-muted:#93A69B;
  --accent:#5FAE86; --accent-soft:#1B2B22;
  --brass:#D8AA5F; --brass-strong:#E9C283;
  --border:#29332C; --border-strong:#3A463D;
  --glow: rgba(216,170,95,0.16);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.display { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
a { color: inherit; }
.eyebrow {
  font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass-strong);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- nav ---------- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 10;
}
.nav-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-mark span { font-family: 'Instrument Serif'; font-style: italic; font-size: 1.15rem; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 0.88rem; }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--accent); }
.nav-cta {
  padding: 9px 18px; background: var(--accent); color: var(--surface);
  border-radius: 3px; font-size: 0.85rem; font-weight: 500; text-decoration: none;
}
@media (max-width: 700px) { .nav-links span:not(.nav-cta) { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 10vw, 120px) 0 clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--border); }
.pane-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); pointer-events: none; }
.pane-grid div { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pane-grid div:nth-child(6n) { border-right: none; }
.pane-lit { background: radial-gradient(circle at 30% 30%, var(--glow), transparent 70%); }
.hero-inner { position: relative; z-index: 1; }
.hero h1 { font-style: italic; font-size: clamp(2.4rem, 6.6vw, 4.6rem); line-height: 1.05; max-width: 16ch; margin-top: 20px; }
.hero-sub { margin-top: 22px; max-width: 46ch; font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--ink-muted); }
.hero-ctas { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; align-items: center; }
.btn-primary { padding: 13px 26px; background: var(--accent); color: var(--surface); border-radius: 3px; font-weight: 500; text-decoration: none; font-size: 0.95rem; }
.btn-secondary { font-size: 0.92rem; text-decoration: underline; text-underline-offset: 4px; color: var(--ink-muted); }
.hero-tags { display: flex; gap: 10px; margin-top: 40px; flex-wrap: wrap; }
.hero-tags span { font-size: 0.78rem; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 100px; background: var(--surface); }

/* ---------- sections generic ---------- */
section.block { padding: clamp(56px, 8vw, 96px) 0; border-bottom: 1px solid var(--border); }
.block-head { max-width: 60ch; margin-bottom: clamp(32px, 5vw, 52px); }
.block-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-style: italic; }
.block-head p { margin-top: 12px; color: var(--ink-muted); font-size: 1.02rem; }

/* ---------- services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.svc-card { background: var(--surface); padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.svc-num { font-family: 'Instrument Serif'; font-style: italic; font-size: 1.6rem; color: var(--brass); }
.svc-card h3 { font-size: 1.15rem; font-weight: 600; font-family: 'IBM Plex Sans'; }
.svc-card p { margin: 0; font-size: 0.92rem; color: var(--ink-muted); }

/* ---------- process ---------- */
.proc-list { display: flex; flex-direction: column; }
.proc-row { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--border); }
.proc-row:last-child { border-bottom: 1px solid var(--border); }
.proc-row .pn { font-family: 'Instrument Serif'; font-style: italic; font-size: 1.8rem; color: var(--brass); }
.proc-row h4 { font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; }
.proc-row p { margin: 0; color: var(--ink-muted); font-size: 0.92rem; max-width: 52ch; }

/* ---------- pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.price-card { background: var(--surface); padding: clamp(24px, 3vw, 30px); display: flex; flex-direction: column; }
.price-card.mid { background: var(--accent-soft); }
.price-card h3 { font-family: 'Instrument Serif'; font-style: italic; font-size: 1.4rem; margin-bottom: 6px; }
.price-card .scope { font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 18px; }
.price-card ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.price-card li { font-size: 0.88rem; padding-left: 16px; position: relative; }
.price-card li::before { content: "—"; position: absolute; left: 0; color: var(--brass); }
.price-card .quote { margin-top: auto; font-size: 0.85rem; color: var(--brass-strong); font-weight: 600; }
.price-note { margin-top: 22px; font-size: 0.85rem; color: var(--ink-muted); }

/* ---------- portfolio placeholder ---------- */
.portfolio-box {
  border: 1px dashed var(--border-strong); border-radius: 4px;
  padding: clamp(36px, 6vw, 56px); text-align: left; background: var(--surface);
  display: flex; flex-direction: column; gap: 14px; max-width: 62ch;
}
.portfolio-box h3 { font-family: 'Instrument Serif'; font-style: italic; font-size: 1.5rem; }
.portfolio-box p { margin: 0; color: var(--ink-muted); font-size: 0.98rem; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 760px) { .contact-grid, .svc-grid, .price-grid, .proc-row { grid-template-columns: 1fr; } }
.contact-info h3 { font-family: 'Instrument Serif'; font-style: italic; font-size: 1.6rem; margin-bottom: 14px; }
.contact-info p { color: var(--ink-muted); max-width: 40ch; margin-bottom: 20px; }
.contact-info .email { font-weight: 600; font-size: 1.05rem; }
.form-mock { display: flex; flex-direction: column; gap: 14px; }
.form-mock label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-muted); display: block; margin-bottom: 6px; }
.form-mock input, .form-mock textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: 3px;
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: 0.95rem;
}
.form-mock button {
  align-self: flex-start; padding: 12px 24px; background: var(--accent); color: var(--surface);
  border: none; border-radius: 3px; font-weight: 500; font-size: 0.95rem; cursor: pointer;
}
.form-note { font-size: 0.8rem; color: var(--ink-muted); margin-top: 4px; }

footer.site-footer {
  padding: 36px clamp(20px,4vw,56px) 56px; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; font-size: 0.82rem; color: var(--ink-muted);
}
footer.site-footer .foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
footer.site-footer a { text-decoration: none; }
footer.site-footer a:hover { color: var(--accent); }

/* ---------- legal pages ---------- */
.legal-notice {
  background: var(--accent-soft); border: 1px solid var(--border-strong);
  border-radius: 4px; padding: 16px 20px; margin-bottom: 40px; font-size: 0.88rem; max-width: 70ch;
}
.legal-notice strong { color: var(--brass-strong); }
.legal-body { max-width: 72ch; padding: clamp(40px, 6vw, 72px) 0; }
.legal-body h1 { font-style: italic; font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 8px; }
.legal-body .updated { color: var(--ink-muted); font-size: 0.85rem; margin-bottom: 36px; display: block; }
.legal-body h2 { font-family: 'IBM Plex Sans'; font-size: 1.15rem; font-weight: 600; margin: 36px 0 12px; }
.legal-body p, .legal-body li { color: var(--ink); font-size: 0.98rem; }
.legal-body ul { padding-left: 20px; }
.legal-body li { margin-bottom: 8px; }
.legal-body .fill {
  background: var(--accent-soft); padding: 1px 6px; border-radius: 3px;
  font-weight: 600; color: var(--brass-strong); font-style: normal;
}
.legal-body dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 16px 0; }
.legal-body dt { color: var(--ink-muted); font-size: 0.88rem; }
.legal-body dd { margin: 0; }