/* ============================================================
   Tajzich — static site stylesheet
   Built from the "Tajzich Design System" Claude Design project.
   Order matters: webfonts · tokens · components · layout.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap");

/* ============================================================
   TOKENS — colors (warm paper neutrals + cobalt signal accent)
   ============================================================ */
:root {
  --paper:        #F7F5F0;
  --paper-sunk:   #EFEBE2;
  --white:        #FFFFFF;
  --card:         #FCFBF8;

  --ink:          #1A1714;
  --ink-2:        #4A453E;
  --ink-3:        #6E675C;
  --ink-mute:     #9A9286;

  --line:         #E5E0D6;
  --line-strong:  #D4CDBF;

  --accent:       #2563D9;
  --accent-deep:  #1B4FB0;
  --accent-soft:  #E7EEFB;
  --accent-line:  #B7CBF1;
  --on-accent:    #FFFFFF;

  --on-ink:       #F7F5F0;

  --success:      #2E7D5B;
  --success-soft: #E3F1EA;
  --warning:      #B5811A;
  --warning-soft: #F6ECD6;
  --danger:       #B3261E;
  --danger-soft:  #F8E4E2;
  --info:         #38597F;
  --info-soft:    #E5ECF3;

  --focus-ring:   #2563D9;

  --bg-page:        var(--paper);
  --bg-page-alt:    var(--paper-sunk);
  --surface-card:   var(--card);
  --surface-raised: var(--white);

  --text-strong:    var(--ink);
  --text-body:      var(--ink-2);
  --text-soft:      var(--ink-3);
  --text-muted:     var(--ink-mute);
  --text-on-accent: var(--on-accent);
  --text-on-ink:    var(--on-ink);

  --border-hairline: var(--line);
  --border-strong:   var(--line-strong);

  --action-primary:       var(--ink);
  --action-primary-hover: #000000;
  --action-accent:        var(--accent);
  --action-accent-hover:  var(--accent-deep);
}

/* ============================================================
   TOKENS — typography
   ============================================================ */
:root {
  --font-display: "Space Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --font-sans:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-heavy:    800;

  --fs-display: 4.5rem;
  --fs-h1:      3rem;
  --fs-h2:      2.25rem;
  --fs-h3:      1.5rem;
  --fs-h4:      1.25rem;
  --fs-lg:      1.125rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:   -0.03em;
  --ls-snug:    -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.02em;
  --ls-label:   0.14em;
}

/* ============================================================
   TOKENS — spacing, radii, shadows, layout, motion
   ============================================================ */
:root {
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  --bw-hair: 1px;
  --bw-thick: 2px;

  --shadow-xs: 0 1px 2px rgba(26, 23, 20, 0.06);
  --shadow-sm: 0 1px 3px rgba(26, 23, 20, 0.07), 0 1px 2px rgba(26, 23, 20, 0.05);
  --shadow-md: 0 4px 12px rgba(26, 23, 20, 0.08), 0 2px 4px rgba(26, 23, 20, 0.05);
  --shadow-lg: 0 12px 32px rgba(26, 23, 20, 0.10), 0 4px 8px rgba(26, 23, 20, 0.05);
  --shadow-accent: 0 6px 18px rgba(37, 99, 217, 0.24);

  --container:    1120px;
  --container-narrow: 760px;
  --gutter:       var(--space-6);
  --header-h:     72px;

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* ============================================================
   COMPONENTS — Button
   ============================================================ */
.tj-btn{
  --_bg: var(--ink); --_fg: var(--text-on-ink); --_bd: transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-sans); font-weight:var(--w-semibold);
  letter-spacing:var(--ls-snug); line-height:1; white-space:nowrap;
  border:var(--bw-hair) solid var(--_bd); background:var(--_bg); color:var(--_fg);
  border-radius:var(--radius-md); cursor:pointer; text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.tj-btn:focus-visible{ outline:var(--bw-thick) solid var(--focus-ring); outline-offset:2px; }
.tj-btn:active{ transform:translateY(1px); }
.tj-btn[disabled],.tj-btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

.tj-btn--sm{ height:36px; padding:0 14px; font-size:var(--fs-sm); }
.tj-btn--md{ height:44px; padding:0 20px; font-size:var(--fs-body); }
.tj-btn--lg{ height:52px; padding:0 28px; font-size:var(--fs-lg); }
.tj-btn--block{ width:100%; }

.tj-btn--primary{ --_bg:var(--ink); --_fg:var(--text-on-ink); }
.tj-btn--primary:hover{ --_bg:var(--action-primary-hover); }

.tj-btn--accent{ --_bg:var(--accent); --_fg:var(--on-accent); }
.tj-btn--accent:hover{ --_bg:var(--accent-deep); box-shadow:var(--shadow-accent); }

.tj-btn--secondary{ --_bg:transparent; --_fg:var(--text-strong); --_bd:var(--border-strong); }
.tj-btn--secondary:hover{ --_bd:var(--ink); background:var(--paper-sunk); }

.tj-btn--ghost{ --_bg:transparent; --_fg:var(--text-strong); --_bd:transparent; }
.tj-btn--ghost:hover{ background:var(--paper-sunk); }

.tj-btn__icon{ display:inline-flex; flex:none; }
.tj-btn__icon svg{ width:1.15em; height:1.15em; display:block; }

/* ============================================================
   COMPONENTS — IconButton
   ============================================================ */
.tj-iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  border:var(--bw-hair) solid transparent; background:transparent;
  color:var(--text-strong); border-radius:var(--radius-md); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.tj-iconbtn svg{ width:1.25em; height:1.25em; display:block; }
.tj-iconbtn:focus-visible{ outline:var(--bw-thick) solid var(--focus-ring); outline-offset:2px; }
.tj-iconbtn:active{ transform:translateY(1px); }
.tj-iconbtn[disabled]{ opacity:.45; pointer-events:none; }

.tj-iconbtn--sm{ width:36px; height:36px; font-size:16px; }
.tj-iconbtn--md{ width:44px; height:44px; font-size:20px; }
.tj-iconbtn--lg{ width:52px; height:52px; font-size:22px; }

.tj-iconbtn--ghost:hover{ background:var(--paper-sunk); }
.tj-iconbtn--outline{ border-color:var(--border-strong); }
.tj-iconbtn--outline:hover{ border-color:var(--ink); background:var(--paper-sunk); }
.tj-iconbtn--accent{ color:var(--accent); }
.tj-iconbtn--accent:hover{ background:var(--accent-soft); }

/* ============================================================
   COMPONENTS — Badge
   ============================================================ */
.tj-badge{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:var(--w-medium);
  letter-spacing:var(--ls-wide); text-transform:uppercase;
  padding:4px 9px; border-radius:var(--radius-pill); line-height:1;
  border:var(--bw-hair) solid transparent;
}
.tj-badge--neutral{ background:var(--paper-sunk); color:var(--ink-2); border-color:var(--line-strong); }
.tj-badge--accent{ background:var(--accent-soft); color:var(--accent-deep); border-color:var(--accent-line); }
.tj-badge--success{ background:var(--success-soft); color:var(--success); }
.tj-badge--warning{ background:var(--warning-soft); color:var(--warning); }
.tj-badge--danger{ background:var(--danger-soft); color:var(--danger); }
.tj-badge--info{ background:var(--info-soft); color:var(--info); }
.tj-badge__dot{ width:6px; height:6px; border-radius:999px; background:currentColor; }

/* ============================================================
   COMPONENTS — Tag
   ============================================================ */
.tj-tag{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:var(--w-medium);
  color:var(--text-body); background:var(--surface-raised);
  border:var(--bw-hair) solid var(--border-strong); border-radius:var(--radius-sm);
  padding:5px 11px; line-height:1.2;
  transition:border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tj-tag svg{ width:1em; height:1em; }
.tj-tag--selectable{ cursor:pointer; }
.tj-tag--selectable:hover{ border-color:var(--ink); }
.tj-tag--selected{ border-color:var(--accent); color:var(--accent-deep); background:var(--accent-soft); }

/* ============================================================
   COMPONENTS — Form field (Input + Textarea)
   ============================================================ */
.tj-field{ display:flex; flex-direction:column; gap:6px; width:100%; }
.tj-field__label{
  font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:var(--w-semibold);
  color:var(--text-strong); letter-spacing:var(--ls-snug);
}
.tj-field__req{ color:var(--accent); margin-left:2px; }
.tj-field__hint{ font-family:var(--font-sans); font-size:var(--fs-sm); color:var(--text-soft); }
.tj-field__hint--err{ color:var(--danger); }

.tj-input{
  font-family:var(--font-sans); font-size:var(--fs-body); color:var(--text-strong);
  background:var(--surface-raised); border:var(--bw-hair) solid var(--border-strong);
  border-radius:var(--radius-md); height:44px; padding:0 14px; width:100%;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tj-input::placeholder{ color:var(--text-muted); }
.tj-input:hover{ border-color:var(--ink); }
.tj-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.tj-input[disabled]{ opacity:.5; pointer-events:none; background:var(--paper-sunk); }
.tj-input--invalid{ border-color:var(--danger); }
.tj-input--invalid:focus{ box-shadow:0 0 0 3px var(--danger-soft); }

.tj-textarea{
  font-family:var(--font-sans); font-size:var(--fs-body); color:var(--text-strong);
  line-height:var(--lh-normal);
  background:var(--surface-raised); border:var(--bw-hair) solid var(--border-strong);
  border-radius:var(--radius-md); padding:12px 14px; width:100%; resize:vertical; min-height:120px;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tj-textarea::placeholder{ color:var(--text-muted); }
.tj-textarea:hover{ border-color:var(--ink); }
.tj-textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.tj-textarea[disabled]{ opacity:.5; pointer-events:none; background:var(--paper-sunk); }
.tj-textarea--invalid{ border-color:var(--danger); }

/* ============================================================
   COMPONENTS — Card
   ============================================================ */
.tj-card{
  background:var(--surface-card); border:var(--bw-hair) solid var(--border-hairline);
  border-radius:var(--radius-lg); padding:var(--space-6);
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.tj-card--raised{ box-shadow:var(--shadow-md); border-color:transparent; }
.tj-card--interactive{ cursor:pointer; }
.tj-card--interactive:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.tj-card--accent{ border-top:3px solid var(--accent); }

/* ============================================================
   COMPONENTS — NavLink
   ============================================================ */
.tj-navlink{
  position:relative; font-family:var(--font-sans); font-size:var(--fs-body);
  font-weight:var(--w-medium); color:var(--text-body); text-decoration:none;
  padding:6px 2px; line-height:1; cursor:pointer; background:none; border:none;
  transition:color var(--dur-fast) var(--ease-out);
}
.tj-navlink::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.tj-navlink:hover{ color:var(--text-strong); }
.tj-navlink:hover::after{ transform:scaleX(1); }
.tj-navlink:focus-visible{ outline:var(--bw-thick) solid var(--focus-ring); outline-offset:3px; border-radius:2px; }
.tj-navlink--active{ color:var(--text-strong); }
.tj-navlink--active::after{ transform:scaleX(1); }
.tj-navlink--onDark{ color:rgba(247,245,240,.72); }
.tj-navlink--onDark:hover,.tj-navlink--onDark.tj-navlink--active{ color:var(--text-on-ink); }

/* ============================================================
   COMPONENTS — Wordmark
   ============================================================ */
.wordmark{ display:inline-flex; align-items:center; gap:11px; line-height:1; }
.wordmark > svg{ display:block; flex:none; }
.wordmark__text{
  font-family:var(--font-display); font-weight:var(--w-bold);
  font-size:21px; letter-spacing:var(--ls-tight); color:var(--text-strong);
}
.wordmark__text .dot{ color:var(--accent); }
.wordmark--ondark .wordmark__text{ color:var(--text-on-ink); }

/* ============================================================
   PAGE — base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg-page); color: var(--text-body); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
section[id], .hero[id] { scroll-margin-top: 84px; }

.eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-4); }
.section__title { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--text-strong); margin: 0; text-wrap: balance; }
.section__intro { font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--text-soft); margin: var(--space-4) 0 0; max-width: 56ch; }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 50; display: flex; align-items: center; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgba(247, 245, 240, 0.82); backdrop-filter: saturate(140%) blur(12px); border-bottom-color: var(--line); box-shadow: var(--shadow-xs); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-6); width: 100%; }
.site-header__brand { text-decoration: none; display: inline-flex; }
.site-header__nav { display: flex; gap: var(--space-6); margin-left: auto; }
.site-header__actions { display: flex; align-items: center; }
.site-header__burger { display: none; margin-left: auto; }
.site-header__drawer { position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: var(--space-5) var(--gutter) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.site-header__drawer[hidden] { display: none; }
.site-header__drawer-link { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: var(--w-semibold); color: var(--text-strong); text-decoration: none; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--header-h) + var(--space-20)); padding-bottom: var(--space-20); }
.hero__title { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-strong); margin: 0; text-wrap: balance; }
.hero__lead { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--text-soft); max-width: 60ch; margin: var(--space-6) 0 var(--space-8); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.hero__meta span { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-soft); }
.hero__meta svg { width: 16px; height: 16px; color: var(--accent); }

/* ---------- Sections ---------- */
.section { padding-block: var(--space-24); }
.section--alt { background: var(--bg-page-alt); border-block: 1px solid var(--line); }
.section__head { max-width: 60ch; margin-bottom: var(--space-12); }

/* ---------- Services ---------- */
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.service-card { display: flex; flex-direction: column; gap: var(--space-3); }
.service-card__icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-deep); margin-bottom: var(--space-2); }
.service-card__icon svg { width: 22px; height: 22px; }
.service-card__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--w-bold); letter-spacing: var(--ls-snug); color: var(--text-strong); margin: 0; }
.service-card__body { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-body); margin: 0; }

/* ---------- About ---------- */
.about__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-16); align-items: start; }
.about__body p { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--text-body); margin: 0 0 var(--space-5); }
.about__tools-label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); margin: var(--space-8) 0 var(--space-4) !important; }
.about__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Featured project ---------- */
.featured__card { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-12); align-items: center; }
.featured__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); }
.featured__title { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--text-strong); margin: var(--space-2) 0 0; }
.featured__body { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--text-body); margin: 0 0 var(--space-5); }
.featured__list { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.featured__list li { position: relative; padding-left: var(--space-6); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-body); }
.featured__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.featured__links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.featured__art { display: flex; justify-content: center; }
.featured__art img { width: 100%; max-width: 232px; height: auto; aspect-ratio: 1 / 1; border-radius: 22.37%; box-shadow: var(--shadow-lg); }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.contact__details { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-8); }
.contact__row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
a.contact__row:hover .contact__row-value { color: var(--accent-deep); }
.contact__row-icon { display: inline-flex; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--card); color: var(--text-strong); }
.contact__row-icon svg { width: 18px; height: 18px; }
.contact__row-label { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }
.contact__row-value { display: block; font-family: var(--font-mono); font-size: var(--fs-body); color: var(--text-strong); margin-top: 2px; }
.contact__legal { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-muted); margin-top: var(--space-6); }
.contact__card { width: 100%; }
.contact__form { display: flex; flex-direction: column; gap: var(--space-5); }
.contact__form[hidden] { display: none; }
.contact__sent { text-align: center; padding: var(--space-8) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.contact__sent[hidden] { display: none; }
.contact__sent-icon { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); }
.contact__sent-icon svg { width: 28px; height: 28px; }
.contact__sent h3 { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text-strong); margin: 0; }
.contact__sent p { font-size: var(--fs-body); color: var(--text-soft); margin: 0; max-width: 40ch; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--text-on-ink); padding-block: var(--space-16) var(--space-8); margin-top: var(--space-12); }
.site-footer__inner { display: flex; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; padding-bottom: var(--space-10); border-bottom: 1px solid rgba(247,245,240,0.14); }
.site-footer__tag { font-size: var(--fs-sm); color: rgba(247,245,240,0.6); margin: var(--space-4) 0 0; max-width: 38ch; }
.site-footer__nav { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: flex-start; }
.site-footer__legal { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); font-family: var(--font-mono); font-size: var(--fs-xs); color: rgba(247,245,240,0.5); letter-spacing: var(--ls-wide); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .services__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .site-header__nav, .site-header__actions { display: none; }
  .site-header__burger { display: block; }
  .hero__title { font-size: 3rem; }
  .about__grid, .contact__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .featured__card { grid-template-columns: 1fr; gap: var(--space-8); }
  .featured__art { order: -1; }
  .featured__art img { max-width: 188px; }
}
@media (max-width: 540px) {
  .services__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: 2.5rem; }
}