/*
Theme Name: Andras Dietrich
Theme URI: https://andrasdietrich.com
Author: Andras Dietrich
Description: Custom theme for Andras Dietrich Photography — bold, agency-level food photography portfolio.
Version: 1.1.0
License: Private
Text Domain: andras-dietrich
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --bg:          #ffffff;
  --bg-2:        #f5f5f5;
  --bg-3:        #eeeeee;
  --gold:        #FFD646;
  --gold-light:  #ffe07a;
  --gold-dark:   #d9a913;
  --text:        #0a0a0a;
  --text-muted:  #444444;
  --text-faint:  #888888;
  --border:      rgba(10,10,10,0.10);
  --border-mid:  rgba(10,10,10,0.20);

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body:    'Montserrat', 'Arial', sans-serif;
  --font-mono:    'Courier New', monospace;

  --max:    1320px;
  --gutter: clamp(1.5rem, 4vw, 4rem);

  --ease:        cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --transition:  0.35s var(--ease);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; }
ul, ol { list-style: none; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
}

h1, h2, h3 { text-transform: uppercase; letter-spacing: 0.08em; }
h1 { font-size: clamp(2.8rem, 7vw, 6rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.8rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); }
h4 { font-size: clamp(1.2rem, 2vw, 1.6rem); font-family: var(--font-body); font-weight: 500; }
h5 { font-size: 1rem; font-family: var(--font-body); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
h6 { font-size: 0.75rem; font-family: var(--font-body); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }

p { margin-bottom: 1.2em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-size: 0.7rem;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 1rem;
}

.lead {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--text-muted);
  line-height: 1.6;
  font-weight: 300;
  font-style: italic;
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: clamp(5rem, 10vw, 9rem);
  padding-bottom: clamp(5rem, 10vw, 9rem);
}

.section--sm {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.section--light { background: #ffffff; }
.section--dark  { background: #0a0a0a; color: #ffffff; }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4 { color: #ffffff; }
.section--dark p { color: rgba(255,255,255,0.7); }
.section--mid   { background: #f5f5f5; }
.section--deep  { background: #0a0a0a; }

.divider {
  width: 100%;
  height: 3px;
  background: #0a0a0a;
  margin: 0;
  border: none;
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s ease, border-color 0.2s ease, padding 0.2s ease;
  border-bottom: 2px solid #0a0a0a;
  background: #ffffff;
}

.site-header.scrolled {
  background: #ffffff;
  border-bottom-color: #0a0a0a;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.site-header.transparent {
  background: #ffffff;
}

.site-logo {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a0a0a;
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.site-logo:hover { color: var(--gold); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav-work, .nav-business {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-sep {
  width: 1px;
  height: 1rem;
  background: #ddd;
}

.nav-link {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #444;
  transition: color 0.2s ease;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.2s ease;
}
.nav-link:hover,
.nav-link.current-menu-item,
.nav-link.current-page-ancestor {
  color: #0a0a0a;
}
.nav-link:hover::after,
.nav-link.current-menu-item::after {
  width: 100%;
}

.nav-cta {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  background: #0a0a0a;
  border: 2px solid #0a0a0a;
  padding: 0.55rem 1.25rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nav-cta:hover {
  background: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
  z-index: 200;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--text);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile nav */
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.nav-mobile.open {
  display: flex;
  opacity: 1;
  pointer-events: all;
}
.nav-mobile a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 4rem);
  color: var(--text-muted);
  transition: color var(--transition);
}
.nav-mobile a:hover { color: var(--gold); }

/* Page offset for fixed header */
.page-content { padding-top: 80px; }
.page-content.has-hero { padding-top: 0; }

/* ============================================================
   BUTTONS & LINKS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.8rem 1.75rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  background: none;
  text-decoration: none;
  font-family: var(--font-body);
}

.btn--primary {
  background: #0a0a0a;
  color: #ffffff;
  border: 2px solid #0a0a0a;
}
.btn--primary:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #ffffff;
}

.btn--outline {
  background: transparent;
  color: #0a0a0a;
  border: 2px solid #0a0a0a;
}
.btn--outline:hover {
  background: #0a0a0a;
  color: #ffffff;
}

.btn--ghost {
  color: var(--text-muted);
  padding-left: 0;
  padding-right: 0;
  border: none;
}
.btn--ghost:hover {
  color: var(--gold);
}
.btn--ghost:hover::after {
  transform: translateX(4px);
}

.inline-link {
  color: var(--gold);
  border-bottom: 1px solid var(--gold-dark);
  transition: border-color var(--transition), color var(--transition);
}
.inline-link:hover {
  color: var(--gold-light);
  border-color: var(--gold-light);
}

/* ============================================================
   HERO — HOMEPAGE
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transform: scale(1.05);
  transition: transform 6s var(--ease-out);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.04) 40%,
    rgba(0,0,0,0.45) 75%,
    rgba(0,0,0,0.80) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--gutter);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  max-width: var(--max);
  margin: 0 auto;
}

.hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
}
.hero__scroll span {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  writing-mode: vertical-rl;
}
.hero__scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollline 2s ease-in-out infinite;
}
@keyframes scrollline {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.5); opacity: 0.5; }
}

/* ============================================================
   HOMEPAGE — SERVICES GRID
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 2px solid #0a0a0a;
  border-left: 2px solid #0a0a0a;
}

.service-card {
  background: #111;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  border-right: 2px solid #0a0a0a;
  border-bottom: 2px solid #0a0a0a;
}

.service-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: transform 0.8s ease, filter 0.4s ease;
  filter: brightness(1) saturate(1);
}

.service-card:hover .service-card__img {
  transform: scale(1.03);
  filter: brightness(0.88) saturate(0.9);
}

.service-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.3s ease;
  z-index: 1;
}

.service-card:hover .service-card__overlay {
  background: rgba(255,255,255,0.72);
}

.service-card__content {
  position: relative;
  z-index: 2;
  padding: 1.75rem 1.5rem 2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.service-card__label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.4rem;
}

.service-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0;
  transition: color 0.3s ease;
}

.service-card:hover .service-card__title { color: #0a0a0a; }
.service-card:hover .service-card__label { color: var(--gold); }

.service-card__desc { display: none; }

.service-card__arrow {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 700;
  color: #ffffff;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.85);
  padding: 0.6rem 1.1rem;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.service-card:hover .service-card__arrow {
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #ffffff;
}

/* ============================================================
   MASONRY / IMAGE GRID
   ============================================================ */
.gallery-grid {
  columns: 3;
  column-gap: 6px;
  line-height: 0;
}

.gallery-grid--2col { columns: 2; }
.gallery-grid--4col { columns: 4; }

.gallery-item {
  break-inside: avoid;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.7s var(--ease), filter 0.7s var(--ease);
  filter: brightness(0.92) saturate(0.95);
}

.gallery-item:hover img {
  transform: scale(1.04);
  filter: brightness(1) saturate(1.05);
}

.gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,8,0);
  transition: background var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-item:hover .gallery-item__overlay {
  background: rgba(0,0,0,0.20);
}

.gallery-item__icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(200,169,110,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--transition), transform var(--transition);
}
.gallery-item__icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--gold);
}
.gallery-item:hover .gallery-item__icon {
  opacity: 1;
  transform: scale(1);
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.97);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox.active { display: flex; }
.lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: default;
}
.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(15,15,13,0.2);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.2rem;
  transition: color var(--transition), border-color var(--transition);
}
.lightbox__close:hover { color: var(--gold); border-color: var(--gold); }
.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 2rem;
  cursor: pointer;
  padding: 1rem;
  transition: color var(--transition);
}
.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }
.lightbox__prev:hover, .lightbox__next:hover { color: var(--gold); }

/* ============================================================
   HOMEPAGE — TEXT SECTIONS
   ============================================================ */
.home-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 8rem);
  align-items: end;
}

.home-intro__left {}

.home-intro__right {
  padding-bottom: 0.5rem;
}

.home-intro__text {
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.home-cta-line {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: var(--text-muted);
  font-style: italic;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* ============================================================
   SERVICE PAGES
   ============================================================ */
.page-hero {
  padding-top: clamp(7rem, 14vw, 12rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
  border-bottom: 1px solid var(--border);
}

.page-hero__inner {
  max-width: 900px;
}

.page-hero__subtitle {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
  max-width: 720px;
}

.service-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--border);
}

.service-body p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.8;
}

.service-cta-row {
  padding-top: 3rem;
  padding-bottom: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.service-cta-text {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-style: italic;
  color: var(--text-muted);
  max-width: 600px;
}

/* ============================================================
   JOURNAL / CASE STUDIES
   ============================================================ */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}

.case-card {
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.case-card__img-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}

.case-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.5s;
  filter: brightness(0.88) saturate(0.9);
}
.case-card:hover .case-card__img {
  transform: scale(1.05);
  filter: brightness(1) saturate(1);
}

.case-card__cat {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(10,10,8,0.85);
  padding: 0.3rem 0.7rem;
}

.case-card__body {
  padding: 1.5rem;
  border-top: 1px solid var(--border);
}

.case-card__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--text);
  margin-bottom: 0.5rem;
  line-height: 1.2;
  transition: color var(--transition);
}
.case-card:hover .case-card__title { color: var(--gold); }

.case-card__excerpt {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.case-card__link {
  position: absolute;
  inset: 0;
}

/* Single case study */
.case-header {
  padding-top: clamp(7rem, 14vw, 12rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
}

.case-header__meta {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.case-header__cat,
.case-header__date {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.case-header__cat { color: var(--gold); }

.case-header__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  margin-bottom: 1.5rem;
}

.case-header__intro {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--text-muted);
  font-style: italic;
  max-width: 720px;
  line-height: 1.6;
}

.case-gallery {
  padding-top: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
}

.case-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 5vw, 6rem);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.case-content__label {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  margin-top: 0.25rem;
}

.case-content__text h2 {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  margin-bottom: 1.2rem;
  color: var(--text);
}

.case-content__text p {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.85;
  margin-bottom: 1.2rem;
}

.case-nav {
  padding: 3rem 0;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.case-nav__item {
  flex: 1;
  max-width: 340px;
}
.case-nav__item--next { text-align: right; margin-left: auto; }

.case-nav__label {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: block;
  margin-bottom: 0.4rem;
}

.case-nav__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text-muted);
  transition: color var(--transition);
}
.case-nav__item:hover .case-nav__title { color: var(--gold); }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 8rem);
  align-items: start;
  padding-top: clamp(7rem, 14vw, 12rem);
  padding-bottom: 5rem;
  border-bottom: 1px solid var(--border);
}

.about-intro__img {
  position: relative;
}
.about-intro__img img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  filter: brightness(0.9) saturate(0.85);
}
.about-intro__img::after {
  content: '';
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  width: 60%;
  height: 60%;
  border: 1px solid rgba(15,15,13,0.15);
  z-index: -1;
}

.about-intro__text h1 {
  margin-bottom: 1.5rem;
}

.about-intro__text p {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.85;
  margin-bottom: 1.2rem;
}

.about-style {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  background: var(--border);
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.about-style__item {
  background: var(--bg);
  padding: 2.5rem;
  border-bottom: 1px solid var(--border);
}
.about-style__item h4 {
  color: var(--gold);
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.about-style__item p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.75;
}

/* Timeline */
.about-timeline {
  display: flex;
  gap: 3rem;
  padding: 4rem 0;
  border-top: 1px solid var(--border);
  overflow-x: auto;
}

.timeline-item {
  flex-shrink: 0;
  text-align: center;
  min-width: 160px;
}
.timeline-item img {
  width: 160px;
  height: 200px;
  object-fit: cover;
  filter: brightness(0.8) saturate(0.7);
  margin-bottom: 1rem;
}
.timeline-item__year {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.3rem;
}
.timeline-item__label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
}

.testimonial {
  background: var(--bg);
  padding: 2.5rem;
}

.testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: var(--text);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 1.5rem;
}
.testimonial__quote::before { content: '\201C'; color: var(--gold); }
.testimonial__quote::after  { content: '\201D'; color: var(--gold); }

.testimonial__author {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.testimonial__company {
  font-size: 0.72rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-top: 0.2rem;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page {
  padding-top: clamp(7rem, 14vw, 12rem);
  padding-bottom: 5rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 8rem);
  align-items: start;
}

.contact-content h1 {
  margin-bottom: 1.2rem;
}

.contact-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.65;
  margin-bottom: 3rem;
  max-width: 480px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.contact-detail__label {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.contact-detail__value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--text);
  transition: color var(--transition);
}
.contact-detail__value:hover { color: var(--gold); }

.contact-image img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  filter: brightness(0.85) saturate(0.85);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--bg-3);
  border-top: 1px solid var(--border);
  padding: 3rem 0 2rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.footer-tagline {
  font-size: 0.8rem;
  color: var(--text-faint);
  line-height: 1.6;
}

.footer-col h6 {
  margin-bottom: 1rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-links a {
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--gold); }

.footer-contact a {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  transition: color var(--transition);
}
.footer-contact a:hover { color: var(--gold); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 0.75rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

.footer-hours {
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* ============================================================
   FILM PAGE — VIDEO EMBED
   ============================================================ */
.video-hero {
  position: relative;
  background: var(--bg);
  padding-top: clamp(7rem, 14vw, 12rem);
  padding-bottom: 3rem;
}

.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg-3);
  overflow: hidden;
}

.video-wrap iframe,
.video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  flex-direction: column;
  gap: 1rem;
}

.video-placeholder p {
  font-size: 0.8rem;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.video-placeholder__icon {
  width: 60px;
  height: 60px;
  border: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .journal-grid  { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid  { columns: 2; }
  .gallery-grid--4col { columns: 3; }
  .home-intro    { grid-template-columns: 1fr; gap: 2.5rem; }
  .case-content  { grid-template-columns: 1fr; gap: 2rem; }
  .footer-inner  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --gutter: 1.25rem; }

  .nav-inner  { display: none; }
  .nav-toggle { display: flex; }

  .services-grid         { grid-template-columns: 1fr 1fr; }
  .service-card          { aspect-ratio: 4/5; }
  .service-card__desc    { max-height: none; opacity: 1; }
  .service-card__label   { opacity: 1; transform: none; }
  .service-card__arrow   { opacity: 1; transform: none; }

  .journal-grid          { grid-template-columns: 1fr; }
  .gallery-grid          { columns: 2; }
  .gallery-grid--2col    { columns: 1; }
  .gallery-grid--4col    { columns: 2; }

  .about-intro           { grid-template-columns: 1fr; }
  .about-intro__img::after { display: none; }
  .about-style           { grid-template-columns: 1fr; }
  .testimonials-grid     { grid-template-columns: 1fr; }

  .contact-grid          { grid-template-columns: 1fr; }
  .contact-image         { display: none; }

  .service-body          { grid-template-columns: 1fr; gap: 1.5rem; }
  .service-cta-row       { flex-direction: column; align-items: flex-start; }

  .footer-inner          { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom         { flex-direction: column; align-items: flex-start; }

  .case-content          { grid-template-columns: 1fr; }
  .case-nav              { flex-direction: column; }
}

@media (max-width: 480px) {
  .services-grid  { grid-template-columns: 1fr; }
  .gallery-grid   { columns: 1; }
  .gallery-grid--4col { columns: 2; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
/* THE FADE IS OPT IN, 2026-08-03. Read the note in header.php.
   `.js` is added by an inline script in <head>, so it exists only when
   JavaScript actually ran. Without it these selectors never match and
   every element is simply visible. Content is never hidden by default.
   Anything that hides text must be conditional on the thing that shows
   it again being alive. */
.js .fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

/* Reduced motion: show it, do not animate it. There was no such rule
   before, so a reader with the OS setting on still got the opacity
   trick with the transition stripped, which is the worst combination. */
@media (prefers-reduced-motion: reduce) {
  .js .fade-in { opacity: 1; transform: none; transition: none; }
}
/* Failsafe added 2026-08-04: the hide rule .js .fade-in and the reveal rule
   .fade-in.visible have identical specificity (0,2,0), so the reveal wins
   only by source order. This 0,3,0 rule makes the reveal unambiguous, so a
   future edit that reorders those rules can never blank the site. It can
   only ever make text MORE visible. */
.js .fade-in.visible { opacity: 1; transform: none; }

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in--delay-1 { transition-delay: 0.1s; }
.fade-in--delay-2 { transition-delay: 0.2s; }
.fade-in--delay-3 { transition-delay: 0.3s; }
.fade-in--delay-4 { transition-delay: 0.4s; }

/* ============================================================
   WORDPRESS ADMIN BAR
   ============================================================ */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* ============================================================
   WP CONTENT STYLES
   ============================================================ */
.wp-content img { max-width: 100%; height: auto; }
.aligncenter { display: block; margin: 2rem auto; }
.alignleft   { float: left; margin: 0 2rem 1rem 0; }
.alignright  { float: right; margin: 0 0 1rem 2rem; }

.wp-block-image { margin: 2rem 0; }
.wp-block-quote {
  border-left: 2px solid var(--gold);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--text-muted);
}

/* ============================================================
   MODULA GALLERY — FULL WIDTH OVERRIDE
   Forces Modula to break out of the block editor container
   and fill the full page width on desktop.
   ============================================================ */
.modula-gallery-wrap,
.modula-gallery-wrap .modula,
.modula-gallery-wrap .modula-items {
  max-width: 100% !important;
  width: 100% !important;
}

/* Break the shortcode block out of the editor content width */
.wp-block-shortcode {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Full width block alignment for Modula and any shortcode */
.alignfull .wp-block-shortcode,
.alignwide .wp-block-shortcode {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(-1 * var(--gutter)) !important;
}

/* Modula custom grid — ensure columns fill properly */
.modula-gallery .modula-item {
  box-sizing: border-box !important;
}

/* Homepage gallery-grid — edge to edge, no side padding */
.gallery-grid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── DEFINITIVE FULL-BLEED FIX ──────────────────────────────
   WordPress wraps block editor content in .entry-content or
   .wp-block-post-content which caps width. This breaks Modula
   out using negative margins regardless of parent container.
   ──────────────────────────────────────────────────────────── */

/* The page body itself — remove any content max-width */
.home .entry-content,
.home .wp-block-post-content,
.page-template-default .entry-content {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Bleed the shortcode block fully out of any container */
.entry-content .wp-block-shortcode,
.wp-block-post-content .wp-block-shortcode {
  display: block;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
}

/* Modula inside that full-bleed container */
.entry-content .modula-gallery-wrap,
.wp-block-post-content .modula-gallery-wrap,
.entry-content .modula,
.wp-block-post-content .modula {
  max-width: 100% !important;
  width: 100% !important;
}

/* ============================================================
   MODULA FULLWIDTH WRAP
   Renders Modula gallery completely outside any container,
   true edge-to-edge on desktop. No max-width, no padding.
   ============================================================ */
.modula-fullwidth-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: var(--bg-2);
}

.modula-fullwidth-wrap .modula-gallery-wrap,
.modula-fullwidth-wrap .modula,
.modula-fullwidth-wrap .modula-items {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.modula-fullwidth-wrap .modula-item {
  box-sizing: border-box !important;
}

/* ============================================================
   HOMEPAGE HEADLINE SECTION
   ============================================================ */
.home-headline {
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 3px solid #0a0a0a;
}

.home-headline__h1 {
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  max-width: 900px;
  margin-bottom: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
}

.home-headline__lead {
  max-width: 540px;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: var(--text-muted);
  margin-bottom: 2rem;
  line-height: 1.65;
  font-weight: 400;
}

.home-headline__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================================
   CLIENT LOGO MARQUEE — horizontal infinite scroll
   ============================================================ */
.logo-marquee-wrap {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0;
  overflow: hidden;
  width: 100%;
}

.logo-marquee {
  overflow: hidden;
  width: 100%;
}

.logo-marquee__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  animation: marquee-scroll 40s linear infinite;
  will-change: transform;
}

.logo-marquee-wrap:hover .logo-marquee__track {
  animation-play-state: paused;
}

.logo-marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 3rem;
  border-right: 1px solid var(--border);
}

.logo-marquee__item img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.5);
  transition: filter 0.3s ease;
}

.logo-marquee-wrap:hover .logo-marquee__item img {
  filter: grayscale(0%) opacity(1);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .logo-marquee__item { height: 40px; padding: 0 1.5rem; }
  .logo-marquee__item img { height: 30px; max-width: 100px; }
  .logo-marquee__track { animation-duration: 25s; }
}

/* ============================================================
   CASE STUDIES PAGE TEMPLATE
   ============================================================ */
.case-studies-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.cs-item {
  border-bottom: 3px solid #0a0a0a;
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.cs-item:last-child { border-bottom: none; }

.cs-number {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
  display: block;
}

.cs-headline {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  color: #0a0a0a;
  margin-bottom: 2rem;
}

.cs-gallery-wrap {
  width: 100%;
  margin-bottom: 2.5rem;
}

.cs-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2rem;
}

.cs-body p {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.75;
}

.cs-outcome {
  border-left: 4px solid var(--gold);
  padding: 1.25rem 1.5rem;
  background: #f5f5f5;
  margin-top: 1.5rem;
}

.cs-outcome-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
  display: block;
}

.cs-outcome p {
  font-size: 0.9rem;
  color: #0a0a0a;
  line-height: 1.65;
  font-weight: 500;
}

@media (max-width: 640px) {
  .cs-body { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ============================================================
   CASE STUDY FIXES — 2026-07-29
   ============================================================ */

/* Dark sections were unreadable. `.case-content__text p { color:#444 }` is
   declared AFTER `.section--dark p { color:rgba(255,255,255,.7) }` at the same
   specificity, so #444444 was winning on a #0a0a0a background: about 2:1
   contrast against the 4.5:1 minimum. These selectors are more specific, so
   they win regardless of source order. */
.section--dark .case-content__text p,
.section--dark .case-content__text li,
.section--dark .case-content__text td {
  color: rgba(255, 255, 255, 0.82);
}

.section--dark .case-content__text h2,
.section--dark .case-content__text h3,
.section--dark .case-content__text h4,
.section--dark .case-content__text strong,
.section--dark .case-content__text b {
  color: #ffffff;
}

.section--dark .case-content__text a { color: var(--gold); }

/* Behind-the-scenes caption: one bold statement, set in the display face.
   Replaces the long descriptive line that ran under each image. */
.case-bts figcaption {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--text);
  max-width: 34ch;
}

.section--dark .case-bts figcaption { color: #ffffff; }

/* ============================================================
   CASE STUDY LAYOUT — 2026-07-29 (rev 2)
   Light throughout, two-column rhythm, scannable at a scroll.
   Replaces the dark blocks and the gold-on-white labels.
   ============================================================ */

.cs-row { padding: clamp(2.5rem, 5vw, 5rem) 0; background: #ffffff; }
.cs-row--tint { background: var(--bg-2); }

.cs-row__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 3.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .cs-row__inner { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 4vw, 4.5rem); }
  /* Alternating rhythm: image left on reversed rows. */
  .cs-row--reverse .cs-row__media { order: -1; }
  /* Text column tracks the image on tall rows. */
  .cs-row__text { position: sticky; top: 6rem; }
}

.cs-row__media { margin: 0; }
.cs-row__media img { width: 100%; height: auto; display: block; }

/* Art text under a behind-the-scenes frame. One bold statement, never a
   description. */
.cs-row__media figcaption,
.case-bts figcaption {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text);
  max-width: 30ch;
}

/* ---- Section label -------------------------------------------------
   Was `color: var(--gold)` (#FFD646). On white that measures 1.40:1
   against a 4.5:1 minimum, which is why these labels were unreadable on
   mobile. The gold now does its job as a rule above the label instead of
   as the text colour.
   (Figure corrected from "~1.5:1" 2026-08-01: the same file quoted two
   values for one measurement, and this comment said "headings" where it
   means these two label classes. The looser wording was then cited
   elsewhere as a wider precedent than it is.) */
.cs-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  border-top: 3px solid var(--gold);
  padding-top: 0.55rem;
  margin-bottom: 1.25rem;
}

.case-content__label { color: var(--text); }

/* ---- Body copy: scannable ------------------------------------------
   The first paragraph of every section is set larger so a fast scroll
   still lands the point of the section. */
.cs-text > p:first-of-type {
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--text);
  font-weight: 500;
}

.cs-text p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 1.15rem;
  max-width: 62ch;
}

.cs-text ul { margin: 0 0 1.25rem 0; padding: 0; list-style: none; max-width: 62ch; }
.cs-text li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.9rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.cs-text li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 8px;
  background: var(--gold);
}
.cs-text li strong { color: var(--text); }

/* ---- Testimonials: a real quote block, not a stray paragraph -------- */
.cs-text blockquote {
  margin: 2rem 0;
  padding: 0 0 0 1.35rem;
  border-left: 4px solid var(--gold);
}
.cs-text blockquote p {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 0.6rem;
  max-width: 46ch;
}
.cs-text blockquote cite {
  display: block;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6a6a6a;
}

/* ============================================================
   THE GOLD SWEEP — 2026-08-01
   A yellow highlight that slides through the letters once, on
   scroll-in. Display type only, never body copy.

   The base colour of the type stays BLACK and the gold only
   exists in transit. That is deliberate, not timid: #FFD646 on
   white measures 1.40:1 against a 4.5:1 minimum. The precedent
   is further down this same file, under "CASE STUDY LAYOUT —
   2026-07-29 (rev 2)", where `.cs-label` and
   `.case-content__label` had to move from gold TEXT to black
   text under a gold RULE because those labels were unreadable
   on mobile. Two label classes, not every heading on the site.
   A highlight passing over black type reads as gold and stays
   legible at both ends of the animation.

   Fails safe three ways: no JS leaves plain black type, no
   background-clip support leaves plain black type, and reduced
   motion leaves plain black type.
   ============================================================ */
.sweep { display: inline; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sweep {
    background-image: linear-gradient(
      100deg,
      var(--text)       0%,
      var(--text)      34%,
      var(--gold-dark) 43%,
      var(--gold)      50%,
      var(--gold-dark) 57%,
      var(--text)      66%,
      var(--text)     100%
    );
    background-size: 260% 100%;
    background-repeat: no-repeat;
    /* Window sits on the far right of the gradient: solid black. */
    background-position: 100% 0;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  /* Travelling to 0% drags the gold band left to right across the
     glyphs and off the other side, landing on black again. */
  .sweep.swept {
    transition: background-position 0.75s cubic-bezier(0.30, 0, 0.20, 1);
    background-position: 0% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sweep,
  .sweep.swept {
    background-image: none;
    color: var(--text);
    -webkit-text-fill-color: var(--text);
    transition: none;
  }
}

/* ============================================================
   STATEMENT BAND — 2026-08-01
   One line under a gallery. The band that carries the sweep.
   ============================================================ */
.statement-band {
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  background: #ffffff;
  border-top: 3px solid #0a0a0a;
  border-bottom: 3px solid #0a0a0a;
}

.statement-band__text {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.6vw, 4.6rem);
  line-height: 0.96;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--text);
  max-width: 17ch;
  margin: 0;
}

/* ============================================================
   THE ROOMS BAND — 2026-08-01
   Home, straight after the portfolio. Four doors, and the place
   the services are offered. Built so the whole site is reachable
   by scrolling, without opening the menu.
   ============================================================ */
.rooms-intro { margin-bottom: clamp(2rem, 4vw, 3rem); }

.rooms-intro__line {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: var(--text-muted);
  max-width: 46ch;
  margin-top: 1rem;
}

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 3px solid #0a0a0a;
  border-left: 3px solid #0a0a0a;
}

.room-card {
  position: relative;
  overflow: hidden;
  background: #111;
  aspect-ratio: 4/5;
  display: flex;
  border-right: 3px solid #0a0a0a;
  border-bottom: 3px solid #0a0a0a;
  text-decoration: none;
}

.room-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease), filter 0.4s ease;
  filter: brightness(0.72) saturate(0.95);
}

.room-card:hover .room-card__img,
.room-card:focus-visible .room-card__img {
  transform: scale(1.04);
  filter: brightness(0.5) saturate(1);
}

.room-card__content {
  position: relative;
  z-index: 2;
  padding: 1.6rem 1.4rem 1.8rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
}

.room-card__kicker {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.45rem;
}

.room-card__verb {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #ffffff;
  margin: 0;
}

.room-card__line {
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.86);
  margin: 0.9rem 0 0;
}

.room-card__arrow {
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: var(--gold);
  padding: 0.55rem 1rem;
  transition: background 0.25s ease, color 0.25s ease;
}

.room-card:hover .room-card__arrow,
.room-card:focus-visible .room-card__arrow {
  background: #ffffff;
  color: #0a0a0a;
}

.room-card:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

/* ============================================================
   THE OFFER BLOCK — 2026-08-01
   Under the statement on every room page. What he sells there.
   ============================================================ */
.offer-block { border-top: 3px solid #0a0a0a; }

.offer-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-left: 1px solid var(--border);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.offer-item {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.offer-item__num {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  border-top: 3px solid var(--gold);
  padding-top: 0.5rem;
  display: inline-block;
  margin-bottom: 1rem;
}

.offer-item h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.15;
  margin-bottom: 0.75rem;
  letter-spacing: 0.03em;
}

.offer-item p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0;
}

.offer-proof {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 0.35rem 0 0.35rem 1rem;
  border-left: 4px solid var(--gold);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 56ch;
}
.offer-proof strong { color: var(--text); }

.offer-cta {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.offer-cta__text {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0;
}

/* ---- Full-width statement between rows ------------------------------ */
.cs-statement { padding: clamp(2.5rem, 5vw, 5rem) 0; background: #ffffff; }
.cs-statement p {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.2vw, 3.2rem);
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--text);
  max-width: 20ch;
  margin: 0;
}
.cs-statement span { color: var(--gold-dark); }

/* ============================================================
   MOBILE MENU — REBUILT 2026-08-01
   It was a centred stack of identical links with no way to tell
   a room from a page and no visible way out. On 08-01 it also
   could not reach the contact form at all. This version gives
   the four rooms their verbs, separates them from the utility
   pages, and ends on the ask.
   ============================================================ */
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 99;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: opacity 0.25s var(--ease);
}

.nav-mobile.open { display: flex; opacity: 1; pointer-events: all; }

.nav-mobile__inner {
  padding: calc(72px + env(safe-area-inset-top, 0px)) var(--gutter)
           calc(2.5rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.nav-mobile__kicker {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1.1rem;
}

/* A room: the category name small, the verb big. */
.nav-mobile__room {
  display: block;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.nav-mobile.open .nav-mobile__room { opacity: 1; transform: none; }
.nav-mobile.open .nav-mobile__room:nth-child(2) { transition-delay: 0.04s; }
.nav-mobile.open .nav-mobile__room:nth-child(3) { transition-delay: 0.08s; }
.nav-mobile.open .nav-mobile__room:nth-child(4) { transition-delay: 0.12s; }
.nav-mobile.open .nav-mobile__room:nth-child(5) { transition-delay: 0.16s; }

.nav-mobile__room em {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.25rem;
}

.nav-mobile__room b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 11vw, 3.2rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text);
}

.nav-mobile__room[aria-current="page"] b { color: var(--gold-dark); }

/* Utility pages: deliberately quieter than the rooms. */
.nav-mobile__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 1.75rem;
}

.nav-mobile__link {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.6rem 0;
}
.nav-mobile__link:hover { color: var(--text); }

.nav-mobile__cta {
  margin-top: auto;
  padding-top: 2rem;
}
.nav-mobile__cta a {
  display: block;
  text-align: center;
  background: #0a0a0a;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1.1rem 1.5rem;
  border: 2px solid #0a0a0a;
}

.nav-mobile__meta {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: var(--text-faint);
  text-align: center;
}
.nav-mobile__meta a { color: var(--text-muted); }

/* The hamburger has to stay above the open panel and turn into
   a visible close, or the panel is a trap. */
.nav-toggle { position: relative; z-index: 200; }
.nav-toggle span { background: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .nav-mobile__room { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   RESPONSIVE — 2026-08-01 COMPONENTS
   Declared last so they win over the base rules above.
   ============================================================ */
@media (max-width: 1024px) {
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
  .offer-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* One per row on a phone, and shorter, so all four rooms are
     reachable with a normal scroll instead of four full screens. */
  .rooms-grid  { grid-template-columns: 1fr; }
  .room-card   { aspect-ratio: 16/10; }
  .room-card__content { padding: 1.25rem 1.15rem 1.4rem; }
  .room-card__line { font-size: 0.8rem; }

  .statement-band { padding: clamp(2.5rem, 12vw, 4rem) 0; }
  .statement-band__text { max-width: 14ch; }

  .offer-cta { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .offer-cta .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   COPY v9, 2026-08-03.
   Three doors instead of four, the two asks on the home page,
   the two-story About block, and the body block list that
   carries pages 4, 5, 8, 11 and 12.
   Declared last so these win over the base rules above.
   ============================================================ */

/* --- the three doors. Four was a clean 2x2 on a tablet; three is
       not, so the middle breakpoint stacks to one rather than
       leaving a widowed card on its own row. --- */
.rooms-grid--three { grid-template-columns: repeat(3, 1fr); }

.room-card__line--2 {
  margin-top: 0.5rem;
  opacity: 0.82;
}

/* --- the gallery label, home and service pages --- */
.home-gallery-label,
.gallery-eyebrow {
  background: var(--bg-2);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(0.75rem, 1.5vw, 1rem);
}

/* --- the two home asks: "Want it? Need it?" and the closing one --- */
.home-ask,
.home-close {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.home-ask__h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  text-transform: uppercase;
  line-height: 0.95;
  margin-bottom: 1.5rem;
}

.home-close__text {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

/* --- Behind the lens / Behind the pass --- */
.home-intro__h3,
.about-intro__h3 {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 1.75rem 0 0.6rem;
}

.home-intro__right .home-intro__h3:first-child,
.about-intro__h3:first-of-type { margin-top: 0; }

.about-intro__p {
  color: var(--text-muted);
  line-height: 1.85;
  margin-bottom: 1rem;
}

.about-services__line {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.8;
  max-width: 62ch;
}
.about-services__line a { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }
.about-services__line a:hover { color: var(--gold); }

/* --- the offer block's new parts --- */
.offer-lead {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 68ch;
  margin: 1rem 0 clamp(2rem, 4vw, 3rem);
}

.offer-item__link { margin-top: 0.75rem; }
.offer-item__link a {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}
.offer-item__link a:hover { text-decoration: underline; }

.offer-proof-wrap { margin-top: clamp(2rem, 4vw, 3rem); }
.offer-proof-wrap .eyebrow { display: block; margin-bottom: 0.6rem; }

/* --- the body block list --- */
.sfm-copy-section { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.sfm-copy-section + .sfm-copy-section { padding-top: 0; }

.sfm-copy-section .eyebrow { display: block; margin-bottom: 1rem; }

.sfm-copy-h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  text-transform: uppercase;
  line-height: 1.05;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0.75rem;
  max-width: 34ch;
}

.sfm-copy-h4 {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}

.sfm-copy-p {
  font-size: clamp(0.95rem, 1.35vw, 1.08rem);
  line-height: 1.85;
  color: var(--text-muted);
  max-width: 68ch;
  margin-bottom: 1rem;
}

.sfm-copy-quote {
  border-left: 3px solid var(--gold);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 1.5rem 0 0.75rem;
  max-width: 62ch;
}
.sfm-copy-quote p {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.6;
  font-style: italic;
  color: var(--text);
}

.sfm-copy-attrib {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 1.5rem;
  max-width: 62ch;
}

.sfm-copy-cta { margin: 1.5rem 0 0; }

@media (max-width: 1024px) {
  .rooms-grid--three { grid-template-columns: 1fr; }
}

/* ============================================================
   CONTRAST, 2026-08-03. His report: "the yellow accents are not
   readable." Measured on the live pages rather than argued:

     .eyebrow            1.40:1  (6 per page)
     .offer-item__link a 1.40:1  ("SEE THE CREATIVE BANK")
     h6 (footer "Work")  1.21:1

   against a 4.5:1 minimum. #FFD646 on white cannot pass as text at
   any size. Gold on BLACK is fine and untouched: the room-card
   kickers measure 13.45:1 and the gold sweep keeps black letters.

   The fix is this theme's own precedent, already used by .cs-label:
   the gold stops being the text and becomes a rule above it. Black
   on white is 19.6:1 and the gold still reads as the accent.

   `width: fit-content` keeps display:block, so the rule hugs the
   label instead of spanning the container, and no layout moves.
   ============================================================ */
.eyebrow {
  color: var(--text);
  border-top: 3px solid var(--gold);
  padding-top: 0.5rem;
  width: fit-content;
}

/* The footer sits on --bg-3, so this is 18:1 rather than 1.21:1. */
.site-footer h6 { color: var(--text); }

/* A link has to look like a link. Dark text, gold underline, and the
   underline thickens on hover rather than the colour going gold,
   because gold-on-white would put us straight back at 1.40:1. */
.offer-item__link a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
.offer-item__link a:hover,
.offer-item__link a:focus-visible {
  text-decoration-thickness: 4px;
}

/* The gallery eyebrow is a plain label above a gallery, not a section
   opener, so it keeps no rule. Same colour fix only. */
.gallery-eyebrow .eyebrow,
.home-gallery-label .eyebrow { border-top: 0; padding-top: 0; }


/* ============================================================
   NAVIGATION AND CALL-TO-ACTION SYSTEM
   Added 2026-08-04 on his design review: "all call outs buttons are very
   hardly visible... nobody should need to look for buttons... keep one
   navigation button on the site mostly."

   Appended at the end on purpose, so it wins on source order and can be
   removed in one block if any of it is wrong.
   ============================================================ */

/* 1. THE SECONDARY BUTTON WAS NOT A BUTTON.
   .btn--ghost had no border, no background and text-muted colour, so
   "All work", "Read more about me" and "See recipe development" read as
   grey text. It now matches the "See the work" chip on the door tiles,
   which is the one style he pointed at. */
.btn--ghost {
  color: #0a0a0a;
  background: var(--gold);
  border: 2px solid var(--gold);
  padding: 0.8rem 1.75rem;
}
.btn--ghost:hover {
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #ffffff;
}

/* 2. ONE SECONDARY STYLE, NOT TWO. .btn--outline was used on a single
   page and gave the site a third button. It now renders as the secondary. */
.btn--outline {
  background: var(--gold);
  border-color: var(--gold);
  color: #0a0a0a;
}
.btn--outline:hover {
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #ffffff;
}

/* 3. IN-BODY LINKS HAD NO CLASS AT ALL.
   This is the direct cause of "the text here is clickable taste it cook it
   but its not visible". The exit lines render <a href="/portfolio/">Taste
   it</a> with an empty class attribute, so they inherited body colour and
   nothing else. Every link inside running copy now looks like a link. */
/* CONTRAST, corrected 2026-08-04 before this shipped.
   The first version of this rule set the link text in gold. On white
   #FFD646 measures 1.40:1 and --gold-dark #d9a913 measures 2.18:1,
   against a 4.5:1 text minimum. This site already solved that exact
   problem on 2026-08-03 by going BLACK TEXT WITH A GOLD RULE, and this
   follows that precedent rather than re-opening it. Black on white is
   19.6:1 and the gold underline carries the affordance. */
.ad-block-p a,
.ad-block-section p a,
.about-intro__p a,
.page-hero__sub a,
.home-intro__text a,
.home-cta-line a,
.offer-card p a,
.contact-intro a {
  color: #0a0a0a;
  border-bottom: 3px solid var(--gold);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.ad-block-p a:hover,
.ad-block-section p a:hover,
.about-intro__p a:hover,
.page-hero__sub a:hover,
.home-intro__text a:hover,
.home-cta-line a:hover,
.offer-card p a:hover,
.contact-intro a:hover {
  color: #0a0a0a;
  background: var(--gold);
  border-color: var(--gold);
}

/* 4. THE DOOR TILES.
   His words: "Food Culinary should be bigger like 50% of the size of the
   other cook it feel it the main title" and "the text does not read at all
   under the small one". The verb is clamp(1.7rem, 2.6vw, 2.6rem), so the
   label goes to roughly half of it, and the description gets a real scrim
   instead of relying on a brightness filter. */
.room-card__kicker {
  font-size: clamp(0.85rem, 1.3vw, 1.3rem);
  letter-spacing: 0.12em;
  margin-bottom: 0.55rem;
}

.room-card__content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
              rgba(0,0,0,0.88) 0%,
              rgba(0,0,0,0.62) 45%,
              rgba(0,0,0,0.25) 100%);
}

.room-card__line {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

/* The chip is the pattern every other secondary button now copies, so it
   gets the same weight as them rather than being smaller. */
.room-card__arrow {
  font-size: 0.68rem;
  padding: 0.7rem 1.2rem;
}


/* The primary button hover was white on gold, 1.40:1, and that was tolerable
   while the primary was rare. It is now the single action on every page, so
   the unreadable state would have been multiplied site-wide. Black on gold is
   14.9:1 and matches the .room-card__arrow chip this system copies. */
.btn--primary:hover,
.nav-cta:hover {
  color: #0a0a0a;
}