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

:root {
  --cream: #FAF6F0;
  --sand: #EFE7DC;
  --sand-dark: #E3D8CA;
  --terracotta: #C4603A;
  --terracotta-dark: #A44E2E;
  --olive: #5A6A48;
  --olive-light: #7A8A64;
  --ink: #1E1614;
  --ink-light: #3D2E28;
  --rule: rgba(30, 22, 20, 0.1);
  --rule-mid: rgba(30, 22, 20, 0.18);
  --font-d: 'Poiret One', sans-serif;
  --font-b: 'Raleway', sans-serif;
  --max-w: 1200px;
  --g: 80px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-b);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--g);
}

/* ─────────────────────────────────────────────
   SITE HEADER
   Logo name centered · nav below it
───────────────────────────────────────────── */
#site-header {
  text-align: center;
  padding: 52px var(--g) 0;
  background: #E8E0D0;
  position: relative;
}

.header-sub {
  font-family: var(--font-d);
  font-size: 1.05rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 32px;
}

/* MCM double-rule separator */
.header-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 0;
}
.hsep-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 80px;
}
.hsep-lines span {
  display: block;
  height: 1px;
  background: var(--rule-mid);
}
.hsep-lines span:last-child {
  width: 60%;
  margin-left: auto;
}
.hsep-lines.mirror span:last-child {
  margin-left: 0;
  margin-right: auto;
}
.hsep-diamond {
  font-size: 0.45rem;
  color: var(--terracotta);
  line-height: 1;
  flex-shrink: 0;
}

/* Navigation */
.header-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 22px 0 0;
  margin-top: 22px;
  border-top: 1px solid var(--rule);
}

.header-nav a {
  font-family: var(--font-b);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: 0 22px;
  transition: color 0.2s;
}
.header-nav a:hover,
.header-nav a.active { color: var(--terracotta); font-weight: 700; }

.nav-sep {
  font-size: 0.38rem;
  color: rgba(196, 96, 58, 0.55);
  flex-shrink: 0;
  line-height: 1;
}

.nav-linkedin-icon {
  padding: 0 22px;
  display: flex;
  align-items: center;
  color: var(--ink);
  transition: color 0.2s;
}
.nav-linkedin-icon:hover { color: var(--terracotta) !important; }

/* Bottom rule under nav */
.header-bottom-rule {
  height: 1px;
  background: var(--rule);
  margin-top: 22px;
}

/* ── Mobile announcement bar — hidden on desktop ── */
.mobile-bar {
  display: none;
}
.mobile-bar-text {
  font-family: var(--font-b);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.82);
}

/* ── Hamburger toggle — hidden on desktop ── */
.nav-toggle {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-direction: column;
  gap: 5px;
  z-index: 10;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s, opacity 0.2s;
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }

/* ─────────────────────────────────────────────
   HERO — Portrait + bio
───────────────────────────────────────────── */
#hero {
  padding: 80px var(--g) 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 60% 55% at 50% 42%, #E8D5C0 0%, var(--sand) 65%, #EAE2D4 100%);
}

/* MCM concentric circles — very faint, centered on portrait */
.portrait-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(196, 96, 58, 0.08);
  transform: translate(-50%, -50%);
  top: 0; left: 0;
}
.ring-1 { width: 340px; height: 340px; border-color: rgba(196,96,58,0.28); }
.ring-2 { width: 510px; height: 510px; border-color: rgba(196,96,58,0.16); }
.ring-3 { width: 700px; height: 700px; border-color: rgba(196,96,58,0.09); }
.ring-4 { width: 900px; height: 900px; border-color: rgba(196,96,58,0.04); }

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

/* Portrait */
.hero-portrait {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  margin: 0 auto 44px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--sand) 0%, #D4A478 45%, #C07848 100%);
  box-shadow: 0 6px 32px rgba(196, 96, 58, 0.18), 0 2px 10px rgba(196, 96, 58, 0.1);
  animation: fadeIn 1s ease both;
}
/* Double ring around portrait — MCM orbital */
.hero-portrait::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1.5px solid rgba(196, 96, 58, 0.28);
}
.hero-portrait::after {
  content: '';
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  border: 1px solid rgba(196, 96, 58, 0.13);
}
.portrait-initials {
  font-family: var(--font-d);
  font-size: 3.5rem;
  color: var(--ink);
  letter-spacing: 0.06em;
  line-height: 1;
}

/* Bio */
.hero-bio {
  font-size: 1.08rem;
  font-weight: 300;
  line-height: 1.92;
  color: var(--ink-light);
  margin-bottom: 0;
  animation: fadeUp 0.9s 0.2s ease both;
}
.hero-bio strong {
  font-weight: 500;
  color: var(--ink);
}

/* Thin MCM rule below bio */
.hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 44px auto;
  max-width: 200px;
  animation: fadeUp 0.9s 0.35s ease both;
}
.hero-divider span { display: block; flex: 1; height: 1px; background: var(--rule-mid); }
.hero-divider i { font-style: normal; font-size: 0.4rem; color: var(--terracotta); flex-shrink: 0; }

/* ─────────────────────────────────────────────
   WORK GRID TEASER
───────────────────────────────────────────── */
#work {
  padding: 0 0 100px;
  border-top: 3px solid var(--sand-dark);
}

.work-section-label {
  text-align: center;
  padding-top: 52px;
  margin-bottom: 40px;
}
.work-section-label p {
  font-family: var(--font-d);
  font-size: 0.7rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--ink-light);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--rule);
}

.wc {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.wc-bg {
  position: absolute; inset: 0;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wc:hover .wc-bg { transform: scale(1.05); }
.wc1 .wc-bg { background: linear-gradient(150deg, #C4603A, #7A3A22); }
.wc2 .wc-bg { background: linear-gradient(150deg, #5A6A48, #344030); }
.wc3 .wc-bg { background: linear-gradient(150deg, #EFE7DC, #C0A888); }
.wc4 .wc-bg { background: linear-gradient(150deg, #1E1614, #382820); }
.wc5 .wc-bg { background: linear-gradient(150deg, #7A8A64, #1E1614); }
.wc6 .wc-bg { background: linear-gradient(150deg, #A44E2E, #5A6A48); }
.wc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,22,20,0.7) 0%, transparent 55%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px 28px;
  transform: translateY(4px);
  transition: transform 0.3s;
}
.wc:hover .wc-overlay { transform: translateY(0); }
.wc-cat { font-size: 0.56rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.58); margin-bottom: 4px; }
.wc-title { font-family: var(--font-d); font-size: 1.3rem; letter-spacing: 0.05em; color: white; }

/* ─────────────────────────────────────────────
   SECTION HEADER — reused throughout
───────────────────────────────────────────── */
.sec-head-wrap {
  text-align: center;
  padding: 80px 0 60px;
  position: relative;
}
.sec-ghost-num {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-d);
  font-size: 14rem;
  line-height: 1;
  color: rgba(30,22,20,0.03);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0.05em;
}
.sec-tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--terracotta);
  display: block;
  margin-bottom: 14px;
  position: relative;
}
.sec-title {
  font-family: var(--font-d);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: 0.06em;
  color: var(--ink);
  line-height: 1.05;
  position: relative;
}

/* Inline section divider */
.sec-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 32px auto;
  max-width: 160px;
}
.sec-divider span { display: block; flex: 1; height: 1px; background: var(--rule-mid); }
.sec-divider i { font-style: normal; font-size: 0.4rem; color: var(--terracotta); }

/* ─────────────────────────────────────────────
   MEET ME
───────────────────────────────────────────── */
#meet {
  background: var(--sand);
  padding: 0 0 100px;
}

.meet-body-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.meet-bio p {
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--ink-light);
  margin-bottom: 16px;
}

.exp-heading {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 28px;
  display: block;
}
.exp-list { list-style: none; }
.exp-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.exp-item:first-child { border-top: 1px solid var(--rule); }
.exp-dot { font-size: 0.38rem; color: var(--terracotta); flex-shrink: 0; padding-top: 6px; }
.exp-name { font-family: var(--font-d); font-size: 1.1rem; letter-spacing: 0.04em; color: var(--ink); display: block; margin-bottom: 2px; }
.exp-desc { font-size: 0.78rem; font-weight: 300; color: var(--ink-light); line-height: 1.55; }

/* ─────────────────────────────────────────────
   PORTFOLIO
───────────────────────────────────────────── */
#portfolio {
  background: var(--cream);
  padding: 0 0 100px;
}

.port-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}

.pc { cursor: pointer; }
.pc-img {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  transition: box-shadow 0.3s;
}
.pc:hover .pc-img { box-shadow: 0 0 0 2px var(--terracotta); }
.pc-inner { position: absolute; inset: 0; transition: transform 0.5s ease; }
.pc:hover .pc-inner { transform: scale(1.04); }
.p1 .pc-inner { background: linear-gradient(140deg, #C4603A, #7A3A22); }
.p2 .pc-inner { background: linear-gradient(140deg, #5A6A48, #344030); }
.p3 .pc-inner { background: linear-gradient(140deg, #1E1614, #3D2E28); }
.p4 .pc-inner { background: linear-gradient(140deg, #EFE7DC, #C4603A); }
.p5 .pc-inner { background: linear-gradient(140deg, #7A8A64, #1E1614); }
.p6 .pc-inner { background: linear-gradient(140deg, #A44E2E, #5A6A48); }
.pc-cat { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 5px; }
.pc-title { font-family: var(--font-d); font-size: 1.2rem; letter-spacing: 0.04em; color: var(--ink); margin-bottom: 3px; transition: color 0.2s; }
.pc:hover .pc-title { color: var(--terracotta); }
.pc-sub { font-size: 0.78rem; font-weight: 300; color: var(--ink-light); }

/* ─────────────────────────────────────────────
   CASE STUDIES
───────────────────────────────────────────── */
#case-studies {
  background: var(--ink);
  color: var(--sand);
  padding: 0 0 100px;
}

#case-studies .sec-head-wrap { padding-bottom: 60px; }
#case-studies .sec-tag { color: var(--terracotta); }
#case-studies .sec-title { color: var(--sand); }
#case-studies .sec-ghost-num { color: rgba(239,231,220,0.03); }
#case-studies .sec-divider span { background: rgba(239,231,220,0.12); }

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(239,231,220,0.08);
}

.cc {
  background: var(--ink);
  padding: 48px 40px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
  overflow: hidden;
}
.cc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s;
}
.cc:hover::before { transform: scaleX(1); }
.cc:hover { background: rgba(239,231,220,0.04); }

.cc-num { font-family: var(--font-d); font-size: 4rem; letter-spacing: 0.05em; color: var(--sand); line-height: 1; margin-bottom: 20px; }
.cc-tag { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 14px; }
.cc-title { font-family: var(--font-d); font-size: 1.4rem; letter-spacing: 0.04em; color: var(--sand); line-height: 1.2; margin-bottom: 18px; }
.cc-problem { font-size: 0.82rem; font-weight: 300; color: rgba(239,231,220,0.6); line-height: 1.78; margin-bottom: 22px; }
.cc-sep { height: 1px; background: rgba(239,231,220,0.08); margin-bottom: 18px; }
.cc-out-tag { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--olive-light); margin-bottom: 8px; }
.cc-outcome { font-size: 0.82rem; font-weight: 400; color: rgba(239,231,220,0.78); line-height: 1.72; }

/* ─────────────────────────────────────────────
   RESUME
───────────────────────────────────────────── */
#resume { background: var(--cream); }

/* Testimonials */
.testi-band {
  background: var(--terracotta);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.testi-band::before {
  content: '"';
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-d);
  font-size: 28rem;
  color: rgba(255,255,255,0.06);
  line-height: 1;
  pointer-events: none;
  letter-spacing: 0;
}
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--g);
  position: relative;
}
.tc { padding: 36px 32px; background: rgba(255,255,255,0.1); }
.tc-q { font-size: 0.95rem; font-weight: 300; font-style: italic; line-height: 1.84; color: rgba(255,255,255,0.9); margin-bottom: 24px; }
.tc-q::before { content: '\201C'; }
.tc-q::after { content: '\201D'; }
.tc-name { font-size: 0.63rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.68); display: block; margin-bottom: 3px; }
.tc-role { font-size: 0.72rem; font-weight: 300; color: rgba(255,255,255,0.48); }

/* CV section */
.cv-section { padding: 100px 0; }
.cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.cv-col-title { font-family: var(--font-d); font-size: 1.8rem; letter-spacing: 0.05em; color: var(--ink); margin-bottom: 36px; }
.cv-blk { margin-bottom: 32px; }
.cv-blk-lbl { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--olive); margin-bottom: 12px; display: block; }
.cv-ent { margin-bottom: 24px; }
.cv-ent-title { font-size: 0.9rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.cv-ent-org { font-size: 0.8rem; font-weight: 400; color: var(--terracotta); margin-bottom: 2px; }
.cv-ent-date { font-size: 0.7rem; font-weight: 300; color: rgba(30,22,20,0.45); margin-bottom: 6px; letter-spacing: 0.05em; }
.cv-ent-desc { font-size: 0.82rem; font-weight: 300; line-height: 1.72; color: var(--ink-light); }
.cv-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-skill { padding: 5px 14px; border: 1px solid var(--rule); font-size: 0.7rem; font-weight: 400; color: var(--ink); transition: border-color 0.2s, color 0.2s; }
.cv-skill:hover { border-color: var(--terracotta); color: var(--terracotta); }

/* ── Single-column stacked CV layout ── */
.cv-stack { max-width: 760px; }
.cv-section-label { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.38em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 36px; display: block; }
.cv-rule { height: 1px; background: var(--rule-mid); margin: 56px 0; }
.cv-exp-ent { margin-bottom: 44px; }
.cv-co { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.cv-role-line { font-size: 0.82rem; font-weight: 300; color: var(--ink-light); margin-bottom: 12px; letter-spacing: 0.02em; }

/* ── CV hero (name + title at top) ── */
.cv-hero-name { font-family: var(--font-d); font-size: 3rem; letter-spacing: 0.06em; color: var(--ink); line-height: 1.1; margin-bottom: 12px; }
.cv-hero-title { font-family: var(--font-b); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 0; }

/* ── Summary bullet list ── */
.cv-summary-list { list-style: none; margin-bottom: 0; }
.cv-summary-item { font-size: 0.88rem; font-weight: 300; line-height: 1.8; color: var(--ink-light); padding: 10px 0 10px 26px; border-bottom: 1px solid var(--rule); position: relative; }
.cv-summary-item:first-child { border-top: 1px solid var(--rule); }
.cv-summary-item::before { content: '◆'; position: absolute; left: 0; top: 14px; font-size: 0.34rem; color: var(--terracotta); }

/* ── Riverbed sub-roles ── */
.cv-tenure { font-family: var(--font-b); font-size: 0.78rem; font-weight: 300; color: var(--ink-light); display: block; margin-bottom: 20px; letter-spacing: 0.02em; }
.cv-sub-ent { padding-left: 20px; border-left: 2px solid var(--rule-mid); margin-bottom: 28px; }
.cv-sub-ent:last-child { margin-bottom: 0; }
.cv-sub-role { font-size: 0.88rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.cv-sub-date { font-size: 0.76rem; font-weight: 300; color: var(--ink-light); margin-bottom: 10px; letter-spacing: 0.02em; }
.cv-bullets { list-style: none; margin-top: 8px; }
.cv-bullets li { font-size: 0.8rem; font-weight: 300; line-height: 1.74; color: var(--ink-light); padding: 4px 0 4px 18px; position: relative; }
.cv-bullets li::before { content: '–'; position: absolute; left: 0; color: var(--terracotta); font-weight: 400; }

/* ─────────────────────────────────────────────
   CONTACT
───────────────────────────────────────────── */
#contact {
  background: var(--sand);
  padding: 0 0 100px;
}

#contact .sec-head-wrap { padding-bottom: 52px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}

.c-sub {
  font-size: 0.97rem;
  font-weight: 300;
  line-height: 1.88;
  color: var(--ink-light);
  margin-bottom: 32px;
}
.c-li { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.c-dot { font-size: 0.38rem; color: var(--terracotta); flex-shrink: 0; }
.c-lbl { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--olive); }
.c-val { font-size: 0.84rem; color: var(--ink); }
.c-val a { color: inherit; text-decoration: none; transition: color 0.2s; }
.c-val a:hover { color: var(--terracotta); }

.fg { margin-bottom: 20px; }
.fl { display: block; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.fi, .ft {
  width: 100%; padding: 13px 16px;
  background: var(--cream);
  border: 1px solid transparent;
  border-bottom: 2px solid var(--sand-dark);
  font-family: var(--font-b); font-size: 0.9rem; font-weight: 300; color: var(--ink);
  outline: none; transition: border-bottom-color 0.2s, background 0.2s;
  -webkit-appearance: none;
}
.fi::placeholder, .ft::placeholder { color: rgba(30,22,20,0.28); }
.fi:focus, .ft:focus { border-bottom-color: var(--terracotta); }
.ft { resize: vertical; min-height: 130px; }
.fb {
  width: 100%; padding: 15px; background: var(--ink); color: var(--cream);
  border: none; font-family: var(--font-b); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.25em; text-transform: uppercase; cursor: pointer;
  transition: background 0.25s;
}
.fb:hover { background: var(--terracotta); }
.fsuccess {
  display: none; margin-top: 16px; padding: 14px;
  background: rgba(90,106,72,0.1); border-left: 3px solid var(--olive);
  font-size: 0.84rem; color: var(--olive);
}
.fsuccess.show { display: block; }

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
footer {
  background: var(--ink);
  padding: 32px var(--g);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(239,231,220,0.4);
}
.f-copy { font-size: 0.7rem; font-weight: 300; letter-spacing: 0.08em; }
.f-right { display: flex; align-items: center; gap: 20px; }
.f-li a {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid rgba(239,231,220,0.14);
  color: rgba(239,231,220,0.4); transition: border-color 0.2s, color 0.2s;
}
.f-li a:hover { border-color: var(--terracotta); color: var(--terracotta); }

/* ─────────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --g: 48px; }
  .meet-body-wrap { grid-template-columns: 1fr; gap: 52px; }
  .port-grid { grid-template-columns: repeat(2, 1fr); }
  .cv-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-grid { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 768px) {
  :root { --g: 24px; }
  #site-header { padding: 0 24px 0; }
  .mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111111;
    height: 44px;
    padding: 0 16px 0 20px;
    margin: 0 -24px;
  }
  .header-sub { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .hsub-sep { display: none; }
  .nav-toggle { display: flex; position: static; }
  .header-nav { display: none; flex-direction: column; align-items: center; gap: 0; padding: 16px 0 20px; margin-top: 16px; flex-wrap: nowrap; }
  .header-nav.open { display: flex; }
  .header-nav a { padding: 10px 0; font-size: 0.72rem; }
  .nav-sep { display: none; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; padding: 0 24px; }
  .port-grid { grid-template-columns: 1fr; }
  .sec-ghost-num { font-size: 8rem; }
}
@media (max-width: 480px) {
  .work-grid { grid-template-columns: 1fr; }
  .hero-portrait { width: 160px; height: 160px; }
  .portrait-initials { font-size: 2.8rem; }
  .ring-3, .ring-4 { display: none; }
}