/* ═══════════════════════════════════════════════════════════════
   GERALD ODIWUOR PORTFOLIO
   Design System v1.0 · DM Serif Display + Helvetica Neue
   Breakpoints: 375px (mobile) · 768px (tablet) · 1440px (desktop)
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500&family=Google+Sans+Display&display=swap');

/* ─────────────────────────────────────────────
   01. DESIGN TOKENS
───────────────────────────────────────────── */
:root {
  --cream:          #F8F8F8;
  --cream-alt:      #F0F0F0;
  --near-black:     #1A1A18;
  --red:            #C8102E;
  --red-dark:       #A00D24;
  --muted:          #6B6760;
  --border:         #D8D2C6;
  --white:          #FFFFFF;

  --font-serif:     'DM Serif Display', Georgia, serif;
  --font-sans:  'Google Sans', Arial, sans-serif;

  --text-label:     0.75rem;
  --text-caption:   0.875rem;
  --text-body:      1rem;
  --text-body-lg:   1.125rem;
  --text-h3:        1.375rem;
  --text-h2:        clamp(1.75rem, 3.5vw, 2.5rem);
  --text-h1:        clamp(2rem, 5vw, 3.5rem);
  --text-display:   clamp(2.5rem, 6vw, 5rem);

  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;

  --max-w:       1200px;
  --max-w-text:  720px;
  --gutter:      1.25rem;
  --section-gap: 4rem;
  --nav-h:       65px;

  --radius-pill: 9999px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;

  --t-fast:  150ms ease;
  --t-base:  250ms ease;
  --t-slow:  400ms ease;
}

@media (min-width: 768px) {
  :root { --gutter: 1.5rem; --section-gap: 5rem; }
}

@media (min-width: 1024px) {
  :root { --gutter: 2rem; --section-gap: 6rem; }
}

/* ─────────────────────────────────────────────
   02. RESET
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { background-color: var(--cream); color: var(--near-black); font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.6; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ─────────────────────────────────────────────
   03. PAGE LOAD ANIMATIONS
───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeUpScale {
  from { opacity: 0; transform: translateY(24px) scale(1.03); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.anim-nav        { animation: fadeIn 400ms ease both; animation-delay: 0ms; }
.anim-headline   { animation: fadeUp 600ms ease both; animation-delay: 100ms; }
.anim-sub        { animation: fadeUp 600ms ease both; animation-delay: 200ms; }
.anim-btn        { animation: fadeUp 500ms ease both; animation-delay: 320ms; }
.anim-services   { animation: fadeIn 400ms ease both; animation-delay: 440ms; }
.anim-hero-img   { animation: fadeUpScale 800ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 150ms; }

@media (prefers-reduced-motion: reduce) {
  .anim-nav, .anim-headline, .anim-sub,
  .anim-btn, .anim-services, .anim-hero-img { animation: none; }
}

/* ─────────────────────────────────────────────
   04. LAYOUT
───────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
main { padding-top: var(--nav-h); }

/* ─────────────────────────────────────────────
   05. NAVIGATION
───────────────────────────────────────────── */
.nav-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); background-color: var(--cream); border-bottom: 1px solid var(--border); transition: box-shadow var(--t-base); }
.nav-bar.scrolled { box-shadow: 0 1px 16px rgba(26,26,24,0.07); }

.nav-inner { max-width: var(--max-w); margin: 0 auto; height: 100%; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; }

.nav-logo {
  display: flex;
  align-items: center;
  margin-left: -30px; /* adjust until it lines up */
}
.nav-logo:hover { opacity: 0.75; }

/* Logo swap, light mode default */
.logo-dark  { display: none; }
.logo-light { display: block; }

.nav-links { display: none; align-items: center; gap: var(--sp-10); }
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-link { font-family: var(--font-sans); font-size: var(--text-caption); color: var(--muted); position: relative; transition: color var(--t-fast); }
.nav-link::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background-color: var(--red); transition: width var(--t-base); }
.nav-link:hover, .nav-link--active { color: var(--near-black); }
.nav-link:hover::after, .nav-link--active::after { width: 100%; }

.nav-cta-btn { font-family: var(--font-sans); font-size: var(--text-label); font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white); background-color: var(--near-black); padding: var(--sp-2) var(--sp-6); border-radius: var(--radius-pill); transition: background-color var(--t-fast); }
.nav-cta-btn:hover { background-color: var(--red); }

.nav-hamburger { display: flex; flex-direction: column; gap: 5px; padding: var(--sp-2); }
.nav-hamburger span { display: block; width: 22px; height: 1.5px; background-color: var(--near-black); transition: transform var(--t-base), opacity var(--t-base); }
@media (min-width: 1024px) { .nav-hamburger { display: none; } }

.nav-mobile-menu { display: none; flex-direction: column; align-items: center; gap: var(--sp-6); padding: var(--sp-8) var(--gutter) var(--sp-10); background-color: var(--cream); border-bottom: 1px solid var(--border); }
.nav-mobile-menu.open { display: flex; }

.nav-mobile-link { font-family: var(--font-sans); font-size: var(--text-body-lg); color: var(--muted); transition: color var(--t-fast); }
.nav-mobile-link:hover { color: var(--near-black); }

.nav-mobile-cta { font-family: var(--font-sans); font-size: var(--text-label); font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white); background-color: var(--near-black); padding: var(--sp-3) var(--sp-8); border-radius: var(--radius-pill); transition: background-color var(--t-fast); }
.nav-mobile-cta:hover { background-color: var(--red); }

/* ─────────────────────────────────────────────
   06. BUTTONS
───────────────────────────────────────────── */
.btn-primary { display: inline-block; font-family: var(--font-sans); font-size: var(--text-label); font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white); background-color: var(--near-black); padding: var(--sp-4) var(--sp-10); border-radius: var(--radius-pill); transition: background-color var(--t-base), transform var(--t-fast); }
.btn-primary:hover { background-color: var(--red); transform: translateY(-1px); }

.btn-secondary { display: inline-block; font-family: var(--font-sans); font-size: var(--text-label); font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--near-black); background-color: transparent; padding: var(--sp-4) var(--sp-10); border-radius: var(--radius-pill); border: 1px solid var(--near-black); transition: background-color var(--t-base), color var(--t-base); }
.btn-secondary:hover { background-color: var(--near-black); color: var(--white); }

.btn-text { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-sans); font-size: var(--text-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--near-black); border-bottom: 1px solid var(--near-black); padding-bottom: 2px; transition: color var(--t-fast), border-color var(--t-fast); }
.btn-text:hover { color: var(--red); border-color: var(--red); }

/* ─────────────────────────────────────────────
   07. SHARED ELEMENTS
───────────────────────────────────────────── */
.eyebrow { font-family: var(--font-sans); font-size: var(--text-label); font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-4); display: block; }
.section-heading { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; color: var(--near-black); max-width: var(--max-w-text); }

/* ─────────────────────────────────────────────
   08. HERO (HOMEPAGE)
───────────────────────────────────────────── */
.hero-section { padding-top: var(--sp-12); overflow: hidden; }

.hero-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter) var(--sp-12); display: grid; grid-template-columns: 1fr; gap: var(--sp-10); }
@media (min-width: 1024px) { .hero-inner { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sp-16); } }

.hero-content { display: flex; flex-direction: column; gap: var(--sp-6); padding-bottom: var(--sp-12); }
.hero-headline { font-family: var(--font-serif); font-size: var(--text-display); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--near-black); }
.hero-subheadline { font-family: var(--font-sans); font-size: var(--text-body-lg); line-height: 1.8; color: var(--muted); max-width: 480px; }
.hero-services { font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: var(--sp-2); }

/* The box takes the portrait's own shape (Hero.png is 1443 x 1090), so the whole cut-out
   shows at every width instead of being zoomed in and cropped at the sides. */
.hero-visual { aspect-ratio: 1443 / 1090; overflow: hidden; border-radius: var(--radius-md); }

.hero-img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }

/* ─────────────────────────────────────────────
   09. PLACEHOLDER (dev helper)
───────────────────────────────────────────── */
.placeholder { width: 100%; height: 100%; background-color: var(--cream-alt); border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ─────────────────────────────────────────────
   10. WORK PREVIEW
───────────────────────────────────────────── */
.work-preview-section { padding: var(--section-gap) 0; border-top: 1px solid var(--border); }
.work-preview-header { margin-bottom: var(--sp-12); }

.work-preview-cta { display: flex; flex-direction: column; gap: var(--sp-6); padding-top: var(--sp-10); border-top: 1px solid var(--border); margin-top: var(--sp-12); }
@media (min-width: 768px) { .work-preview-cta { flex-direction: row; align-items: center; justify-content: space-between; } }

.work-preview-cta-text { font-family: var(--font-serif); font-size: var(--text-h3); font-weight: 400; color: var(--near-black); max-width: 480px; }
.work-preview-cta .btn-primary { align-self: flex-start; }

/* ─────────────────────────────────────────────
   11. PROJECT GRID & CARDS
───────────────────────────────────────────── */
.project-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
@media (min-width: 768px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }

.project-card { overflow: hidden; border-radius: var(--radius-md); }
.project-card-link { display: block; }

.project-thumbnail {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--cream-alt);
  border-radius: var(--radius-md);
}

@media (max-width: 767px) {
  .project-thumbnail {
    aspect-ratio: unset;
    height: 260px;
  }
}

.project-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.project-card-link:hover .project-img { transform: scale(1.03); }

.project-card-info { padding: var(--sp-4) 0 var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-1); }
.project-type { font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.project-name { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 500; color: var(--near-black); transition: color var(--t-fast); }
.project-card-link:hover .project-name { color: var(--red); }

.project-view { font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity var(--t-base), transform var(--t-base); }
.project-card-link:hover .project-view { opacity: 1; transform: translateX(0); }

/* ─────────────────────────────────────────────
   12. ABOUT SNIPPET
───────────────────────────────────────────── */
.about-snippet-section { padding: var(--section-gap) 0; background-color: var(--cream-alt); }

.about-snippet-inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-10); }
@media (min-width: 1024px) { .about-snippet-inner { grid-template-columns: 1fr 2fr; gap: var(--sp-16); align-items: center; } }

.about-snippet-photo { aspect-ratio: 1/1; overflow: hidden; background-color: var(--cream); max-height: 400px; border-radius: var(--radius-md); }
@media (min-width: 1024px) { .about-snippet-photo { aspect-ratio: 3/4; max-height: none; } }

.about-photo-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.about-snippet-text { display: flex; flex-direction: column; gap: var(--sp-6); }
.about-snippet-body { font-family: var(--font-serif); font-size: var(--text-body-lg); font-weight: 400; line-height: 1.7; color: var(--near-black); }

.about-snippet-link { font-family: var(--font-sans); font-size: var(--text-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--near-black); border-bottom: 1px solid var(--near-black); padding-bottom: 2px; align-self: flex-start; transition: color var(--t-fast), border-color var(--t-fast); }
.about-snippet-link:hover { color: var(--red); border-color: var(--red); }

/* ─────────────────────────────────────────────
   13. TESTIMONIALS
───────────────────────────────────────────── */
.testimonials-section { padding: var(--section-gap) 0; border-top: 1px solid var(--border); }
.testimonials-header { margin-bottom: var(--sp-12); }

.testimonials-grid {
  display: flex;
  gap: var(--sp-6);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--sp-2);
  align-items: stretch;
}
.testimonials-grid::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    padding-bottom: 0;
  }
}

.testimonial-card {
  padding: var(--sp-8);
  background-color: var(--cream-alt);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-6);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  width: 85vw;
}
@media (min-width: 768px) { .testimonial-card { width: 60vw; } }
@media (min-width: 1024px) { .testimonial-card { width: auto; height: 100%; } }

.testimonial-card--featured { max-width: 680px; margin: 0 auto; }

.testimonial-top { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.testimonial-mark { font-family: var(--font-serif); font-size: var(--text-display); line-height: 0.7; color: var(--red); user-select: none; }
.testimonial-quote { font-family: var(--font-sans); font-style: normal; font-size: var(--text-body); line-height: 1.8; color: var(--muted); padding-top: var(--sp-1); }

.testimonial-author { display: flex; align-items: center; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.testimonial-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: var(--text-label); font-weight: 600; color: var(--white); background-color: var(--near-black); text-transform: uppercase; }
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-author-info { display: flex; flex-direction: column; gap: 2px; }
.testimonial-name { font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 500; color: var(--near-black); }
.testimonial-role { font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.testimonials-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}
.testimonials-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--border);
  transition: background-color var(--t-fast);
}
.testimonials-dots span.active { background-color: var(--near-black); }
@media (min-width: 1024px) { .testimonials-dots { display: none; } }

/* ─────────────────────────────────────────────
   14. CALL TO ACTION
───────────────────────────────────────────── */
.cta-section { padding: var(--sp-24) 0; background-color: var(--near-black); }
.cta-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-6); }
.cta-headline { font-family: var(--font-serif); font-size: var(--text-h1); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--white); }
.cta-body { font-family: var(--font-sans); font-size: var(--text-body-lg); line-height: 1.8; color: rgba(245,240,232,0.65); max-width: 520px; }
.cta-section .btn-primary { background-color: var(--red); margin-top: var(--sp-4); }
.cta-section .btn-primary:hover { background-color: var(--red-dark); }

/* ─────────────────────────────────────────────
   15. FOOTER
───────────────────────────────────────────── */
.site-footer { background-color: var(--near-black); border-top: 1px solid rgba(245,240,232,0.1); padding: var(--sp-16) 0 var(--sp-10); }

.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr; gap: var(--sp-10); }
@media (min-width: 768px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-10) var(--sp-16); } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .footer-inner { grid-template-columns: 2fr 1fr 1fr; } .footer-brand { grid-column: auto; } }

.footer-brand { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-name { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 500; color: var(--white); }
.footer-tagline { font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245,240,232,0.45); }
.footer-slogan { font-family: var(--font-sans); font-size: var(--text-caption); line-height: 1.6; color: rgba(245,240,232,0.35); max-width: 260px; margin-top: var(--sp-2); }

.footer-col-label { font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,240,232,0.25); margin-bottom: var(--sp-1); }

.footer-nav, .footer-social { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-link { font-family: var(--font-sans); font-size: var(--text-caption); color: rgba(245,240,232,0.55); transition: color var(--t-fast); }
.footer-link:hover { color: var(--white); }
.footer-social-link { font-family: var(--font-sans); font-size: var(--text-caption); color: rgba(245,240,232,0.55); transition: color var(--t-fast); }
.footer-social-link:hover { color: var(--red); }

.footer-copy { grid-column: 1 / -1; font-family: var(--font-sans); font-size: var(--text-label); color: rgba(245,240,232,0.3); letter-spacing: 0.08em; padding-top: var(--sp-8); border-top: 1px solid rgba(245,240,232,0.08); margin-top: var(--sp-4); text-align: center; }

/* ─────────────────────────────────────────────
   16. PAGE HEADER (Work & About)
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
   EMPTY STATES
───────────────────────────────────────────── */
.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  padding: var(--sp-24) var(--gutter);
  max-width: 420px;
  margin: 0 auto;
}
.empty-state-icon {
  width: 44px;
  height: 44px;
  color: var(--muted);
  opacity: 0.5;
}
.empty-state-title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 400;
  color: var(--near-black);
}
.empty-state-text {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--muted);
}
.empty-state .btn-secondary,
.empty-state .btn-primary {
  margin-top: var(--sp-2);
}
@media (prefers-color-scheme: dark) {
  .empty-state-title { color: #F8F8F8; }
}

.page-header-section { padding: var(--sp-20) 0 var(--sp-16); border-bottom: 1px solid var(--border); }
.page-header-title { font-family: var(--font-serif); font-size: var(--text-display); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--near-black); margin-bottom: var(--sp-4); }
.page-header-subtitle { font-family: var(--font-sans); font-size: var(--text-body-lg); color: var(--muted); line-height: 1.6; }

/* ─────────────────────────────────────────────
   17. FILTER BAR
───────────────────────────────────────────── */
.filter-bar-section { padding: var(--sp-8) 0; border-bottom: 1px solid var(--border); }

.filter-bar { display: flex; gap: var(--sp-2); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: var(--sp-1); }
.filter-bar::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .filter-bar { flex-wrap: wrap; overflow-x: visible; } }

.filter-btn { font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap; transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast); }
.filter-btn:hover { color: var(--near-black); border-color: var(--border); }
.filter-btn--active { color: var(--white); background-color: var(--near-black); border-color: var(--near-black); }
.filter-btn--active:hover { color: var(--white); background-color: var(--near-black); border-color: var(--near-black); }

.project-grid-section { padding: var(--sp-12) 0 var(--section-gap); }

/* ─────────────────────────────────────────────
   18. PROJECT DETAIL
───────────────────────────────────────────── */
.project-title-section { padding: var(--sp-20) 0 var(--sp-10); }
.project-detail-type { display: block; font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--red); margin-bottom: var(--sp-4); }
.project-detail-title { font-family: var(--font-serif); font-size: var(--text-display); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--near-black); }

.project-hero-section {
  padding: 0 24px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.project-hero-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  display: block;
}

@media (min-width: 768px) { .project-hero-img { height: 480px; } }
@media (min-width: 1024px) { .project-hero-img { height: 640px; } }

.project-hero-placeholder { width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background-color: var(--cream-alt); }
@media (min-width: 768px) { .project-hero-placeholder { height: 480px; } }
@media (min-width: 1024px) { .project-hero-placeholder { height: 640px; } }

.project-body-section { padding: var(--section-gap) 0; border-top: 1px solid var(--border); }

.project-body-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr; gap: var(--sp-10); }
@media (min-width: 1024px) { .project-body-inner { grid-template-columns: 1fr 2fr; gap: var(--sp-20); } }

.project-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
@media (min-width: 768px) { .project-meta { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .project-meta { display: flex; flex-direction: column; gap: var(--sp-8); position: sticky; top: calc(var(--nav-h) + var(--sp-10)); align-self: start; } }

.project-meta-item { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--border); }
@media (min-width: 768px) and (max-width: 1023px) { .project-meta-item { border-bottom: none; border-right: 1px solid var(--border); padding-bottom: 0; padding-right: var(--sp-6); } .project-meta-item:last-child { border-right: none; } }

.project-meta-label { font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.project-meta-value { font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 500; color: var(--near-black); }

.project-meta-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.project-meta-list li { font-family: var(--font-sans); font-size: var(--text-caption); color: var(--muted); padding-left: var(--sp-4); position: relative; }
.project-meta-list li::before { content: '•'; position: absolute; left: 0; color: var(--red); }

.project-content { display: flex; flex-direction: column; gap: var(--sp-16); }
.project-section-block { display: flex; flex-direction: column; gap: var(--sp-5); }
.project-section-label { font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.project-section-text { font-family: var(--font-sans); font-size: var(--text-body-lg); line-height: 1.8; color: var(--near-black); }

.project-gallery-section { padding: var(--sp-12) 0 var(--section-gap); background-color: var(--cream-alt); }
.project-gallery-inner { display: flex; flex-direction: column; gap: var(--sp-8); }

.project-gallery { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 768px) { .project-gallery { grid-template-columns: repeat(2, 1fr); } }

.gallery-img-wrap { aspect-ratio: 3/4; overflow: hidden; background-color: var(--cream); border-radius: var(--radius-sm); }
.gallery-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.gallery-img-wrap:hover .gallery-img { transform: scale(1.03); }
.gallery-placeholder { width: 100%; height: 100%; }

.project-testimonial-section { padding: var(--section-gap) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.next-project-section { padding: var(--sp-16) 0; }
.next-project-link { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; max-width: var(--max-w); margin: 0 auto; padding: var(--sp-8) var(--gutter); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color var(--t-base), background-color var(--t-base); }
@media (min-width: 768px) { .next-project-link { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--sp-10) var(--gutter); } }
.next-project-link:hover { border-color: var(--near-black); background-color: var(--cream-alt); }
.next-project-label { font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.next-project-name { font-family: var(--font-serif); font-size: var(--text-h3); color: var(--near-black); transition: color var(--t-fast); }
.next-project-link:hover .next-project-name { color: var(--red); }

/* ─────────────────────────────────────────────
   19. ABOUT PAGE
───────────────────────────────────────────── */
.about-story-section { padding: var(--section-gap) 0; border-bottom: 1px solid var(--border); }

.about-story-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr; gap: var(--sp-10); }
@media (min-width: 1024px) { .about-story-inner { grid-template-columns: 1fr 2fr; gap: var(--sp-20); align-items: start; } }

.about-story-photo { aspect-ratio: 1/1; overflow: hidden; background-color: var(--cream-alt); max-height: 400px; border-radius: var(--radius-md); }
@media (min-width: 1024px) { .about-story-photo { aspect-ratio: 3/4; max-height: none; } }
.about-photo-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.about-story-text { padding-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-6); }
@media (min-width: 1024px) { .about-story-text { padding-top: var(--sp-10); } }

.about-body { font-family: var(--font-sans); font-size: var(--text-body-lg); line-height: 1.8; color: var(--muted); }

.about-approach-section { padding: var(--section-gap) 0; border-bottom: 1px solid var(--border); }
.about-approach-inner { display: flex; flex-direction: column; gap: var(--sp-12); }

.process-steps { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 768px) { .process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .process-steps { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }

.process-step { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-8); background-color: var(--cream-alt); border-radius: var(--radius-md); }

.process-step-number { font-family: var(--font-serif); font-size: var(--text-h3); font-weight: 400; color: var(--white); line-height: 1; width: var(--sp-12); height: var(--sp-12); background-color: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.process-step-title { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 500; color: var(--near-black); }
.process-step-text { font-family: var(--font-sans); font-size: var(--text-caption); line-height: 1.8; color: var(--muted); }

.about-services-section { padding: var(--section-gap) 0; border-bottom: 1px solid var(--border); background-color: var(--cream-alt); }
.about-services-inner { display: flex; flex-direction: column; gap: var(--sp-12); }

.services-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }

.service-card { padding: var(--sp-10); background-color: var(--cream); display: flex; flex-direction: column; gap: var(--sp-4); border-radius: var(--radius-md); }

.service-header { display: flex; align-items: center; gap: var(--sp-4); }
.service-icon { width: 36px; height: 36px; flex-shrink: 0; color: var(--red); }
.service-title { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 500; color: var(--near-black); line-height: 1.3; }
.service-text { font-family: var(--font-sans); font-size: var(--text-caption); line-height: 1.8; color: var(--muted); }

/* ─────────────────────────────────────────────
   20. DARK MODE (system preference only)
───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {

  body { background-color: #1A1A18; color: #F8F8F8; }

  /* Logo swap */
  .logo-light { display: none; }
  .logo-dark  { display: block; }

  /* Nav */
  .nav-bar { background-color: #1A1A18; border-bottom-color: #2E2E2B; }
  .nav-link { color: #9B9691; }
  .nav-link:hover, .nav-link--active { color: #F8F8F8; }
  .nav-cta-btn { background-color: #F8F8F8; color: #1A1A18; }
  .nav-cta-btn:hover { background-color: #E8102E; color: #F8F8F8; }
  .nav-mobile-menu { background-color: #1A1A18; border-bottom-color: #2E2E2B; }
  .nav-mobile-link { color: #9B9691; }
  .nav-mobile-link:hover { color: #F8F8F8; }
  .nav-mobile-cta { background-color: #F8F8F8; color: #1A1A18; }
  .nav-mobile-cta:hover { background-color: #E8102E; color: #F8F8F8; }
  .nav-hamburger span { background-color: #F8F8F8; }

  /* Sections */
  .about-snippet-section { background-color: #242420; }
  .about-snippet-photo { background-color: #1A1A18; }
  .about-services-section { background-color: #242420; }
  .service-card { background-color: #1A1A18; }
  .about-story-photo { background-color: #242420; }
  .process-step { background-color: #242420; }

  /* Text */
  .hero-headline, .section-heading, .page-header-title,
  .project-detail-title, .about-snippet-body,
  .work-preview-cta-text, .next-project-name { color: #F8F8F8; }
  .hero-subheadline, .hero-services, .page-header-subtitle,
  .about-body, .project-section-text, .service-text,
  .process-step-text, .footer-slogan { color: #9B9691; }

  /* Borders */
  .work-preview-section, .testimonials-section,
  .about-story-section, .about-approach-section,
  .about-services-section, .about-tools-section,
  .page-header-section, .filter-bar-section,
  .project-body-section, .project-testimonial-section { border-color: #2E2E2B; }
  .work-preview-cta, .work-preview-header,
  .testimonial-author, .project-meta-item,
  .project-section-label { border-color: #2E2E2B; }

  /* Buttons */
  .btn-primary { background-color: #F8F8F8; color: #1A1A18; }
  .btn-primary:hover { background-color: #E8102E; color: #F8F8F8; }
  .btn-secondary { color: #F8F8F8; border-color: #F8F8F8; }
  .btn-secondary:hover { background-color: #F8F8F8; color: #1A1A18; }
  .btn-text { color: #F8F8F8; border-color: #F8F8F8; }
  .btn-text:hover { color: #E8102E; border-color: #E8102E; }
  .cta-section .btn-primary { background-color: #E8102E; color: #F8F8F8; }
  .cta-section .btn-primary:hover { background-color: #C8102E; color: #F8F8F8; }

  /* Cards */
  .testimonial-card { background-color: #242420; }
  .testimonial-name { color: #F8F8F8; }
  .testimonial-quote { color: #9B9691; }
  .testimonial-avatar { background-color: #F8F8F8; color: #1A1A18; }

  /* Project cards */
  .project-thumbnail { background-color: #242420; }
  .project-name { color: #F8F8F8; }
  .project-type, .project-view { color: #9B9691; }

  /* Process */
  .process-step-number { background-color: #E8102E; color: #F8F8F8; }
  .process-step-title { color: #F8F8F8; }

  /* Filter */
  .filter-btn { color: #9B9691; }
  .filter-btn:hover { color: #F8F8F8; border-color: #2E2E2B; }
  .filter-btn--active { background-color: #F8F8F8; color: #1A1A18; border-color: #F8F8F8; }
  .filter-btn--active:hover { background-color: #F8F8F8; color: #1A1A18; }

  /* Footer and CTA */
  .site-footer { background-color: #0E0E0C; }
  .cta-section { background-color: #0E0E0C; }

  /* Placeholder */
  .placeholder { background-color: #242420; border-color: #2E2E2B; color: #9B9691; }

  /* About snippet link */
  .about-snippet-link { color: #F8F8F8; border-color: #F8F8F8; }
  .about-snippet-link:hover { color: #E8102E; border-color: #E8102E; }

  /* Next project */
  .next-project-link { border-color: #2E2E2B; }
  .next-project-link:hover { border-color: #F8F8F8; background-color: #242420; }
  .next-project-label { color: #9B9691; }

  /* Gallery */
  .gallery-img-wrap { background-color: #242420; }
  .project-gallery-section { background-color: #242420; }

  /* Meta */
  .project-meta-label { color: #9B9691; }
  .project-meta-value { color: #F8F8F8; }
  .project-meta-list li { color: #9B9691; }
   /* Service */
  .service-title { color: #F8F8F8; }
}