/* ============================================
   COMER — Traiteur d'entreprise, Pays Basque
   Editorial-Luxury revamp
   Art direction: Editorial Grid / Magazine
   Type: Playfair Display + Inter ("Classic Elegant")
   Palette: Espresso ink + warm gold + cream/sand
   ============================================ */
:root {
  /* Ink / espresso */
  --ink: #241c16;
  --ink-2: #1a130e;          /* deeper — footer / darkest */
  --ink-soft: #5c4f43;       /* muted body text */
  --ink-faint: #8a7a6b;      /* captions / meta */

  /* Warm gold accent (from DB food-service + hospitality palettes) */
  --gold: #a16207;
  --gold-deep: #7c4c10;      /* hover on light */
  --gold-light: #c99a4a;     /* accent on dark surfaces */
  --gold-soft: #f3e7cf;      /* tint fills */

  /* Warm neutrals */
  --cream: #faf5ec;
  --cream-alt: #f2e9da;
  --sand: #e7dac5;           /* borders */
  --sand-soft: #efe6d6;
  --white: #ffffff;
  --border: #e7dac5;

  /* legacy alias (kept so any stray reference still resolves) */
  --rust: var(--gold);
  --rust-light: var(--gold-light);

  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(36, 28, 22, 0.05), 0 3px 12px rgba(36, 28, 22, 0.05);
  --shadow-md: 0 10px 34px rgba(36, 28, 22, 0.10);
  --shadow-lg: 0 30px 70px rgba(36, 28, 22, 0.20);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --container: 1200px;

  /* Total fixed-header height. Mobile = brand row only (the tab row
     collapses into the burger menu); desktop = brand row + tab row.
     Anything that has to clear the header reads this. */
  --header-h: 66px;
}
@media (min-width: 1120px) {
  :root { --header-h: 114px; }
}

/* ============================================
   Reset
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
::selection { background: var(--gold); color: #fff; }

/* Keyboard focus — visible ring everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

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

/* Editorial eyebrow: hairline + spaced caps */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
  opacity: 0.8;
}
.section-head.centered .eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
  opacity: 0.8;
}

.section-head {
  max-width: 660px;
  margin: 0 0 56px;
}
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  line-height: 1.12;
  margin-bottom: 18px;
  font-weight: 600;
}
.section-head p {
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.7;
}

section { padding: 112px 0; }
@media (max-width: 640px) {
  section { padding: 72px 0; }
  .container { padding: 0 20px; }
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 30px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(161, 98, 7, 0.22);
}
.btn-primary:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(124, 76, 16, 0.28);
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.btn-light {
  background: var(--white);
  color: var(--gold-deep);
  border-color: var(--white);
}
.btn-light:hover { background: var(--cream); transform: translateY(-2px); }
.btn-ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); }
.btn-block { width: 100%; }

/* ============================================
   Header — stacked: centered wordmark on top, tab row below.
   Always solid/light (there is no dark hero to sit on top of),
   .scrolled only deepens the shadow.
   ============================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(250, 245, 236, 0.92);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.scrolled {
  background: rgba(250, 245, 236, 0.97);
  box-shadow: var(--shadow-sm);
}
/* One grid for the whole header, re-flowed at the 1120px breakpoint, so the
   language switch and the CTAs move between the wordmark row and the tab
   row without being duplicated in the markup.
     narrow  →  FR|EN · COMER · phone+burger   (tabs go to the burger menu)
     wide    →  COMER alone on row 1, then FR|EN · tabs · phone+CTA on row 2
   On wide, FR|EN and the CTAs are pinned to the row's edges with absolute
   positioning rather than living in grid columns: the CTA cluster is much
   wider than FR|EN, so equal-width side columns would push the tabs off
   true centre. The `rule` row is the container's ::before — a full-bleed
   hairline that a border on a single column could not span. */
.site-header .container {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "lang brand cta";
  grid-template-rows: 66px;
  column-gap: 12px;
}
.site-header .container::before { display: none; }
.logo {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
}
/* Header wordmark only — the footer reuses .logo on a dark surface */
.site-header .logo {
  grid-area: brand;
  justify-self: center;
  font-size: 1.7rem;
  letter-spacing: 0.14em;
  text-indent: 0.14em; /* cancel the trailing letter-space so it optically centres */
}
.site-header .logo span + span { color: var(--gold); }

.header-nav-row { display: none; }

.nav-links {
  display: none;
  align-items: center;
  gap: 36px;
}
.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--gold); }

/* Desktop tab navigation (row 2) */
.icon-nav ul {
  height: 48px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 34px;
  list-style: none;
}
.icon-nav a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.25s var(--ease);
  white-space: nowrap;
}
.icon-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;   /* sit on the header's bottom border */
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s var(--ease);
}
.icon-nav a:hover,
.icon-nav a:focus-visible { color: var(--gold); }
.icon-nav a:hover::after,
.icon-nav a:focus-visible::after { transform: scaleX(1); }
/* Current page / section tab */
.icon-nav a[aria-current="page"] { color: var(--ink); }
.icon-nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta {
  grid-area: cta;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-cta .btn { padding: 9px 15px; font-size: 0.8rem; }
.mobile-only-cta { display: none; }

/* Quiet phone link: handset icon only, no number, no button chrome.
   Sits to the right of the quote button so the two can't crowd. */
.btn-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--gold);
  transition: color 0.25s var(--ease);
}
.btn-phone svg { width: 20px; height: 20px; }
.btn-phone:hover { color: var(--gold-deep); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: all 0.25s var(--ease);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { transform: rotate(45deg); top: 0; }
.nav-toggle.open span::after { transform: rotate(-45deg); top: 0; }

/* The text-only nav labels are noticeably wider in French than English
   ("Comment ça marche" vs "How it works", "Demander un devis" vs "Request
   a quote"), so the widths below are tuned to the French set with margin to
   spare. The tab row needs room for centred tabs *plus* both edge clusters,
   so it appears from 1120px and the burger takes over below that. (That was
   1280px while "Pourquoi nous" — the widest French label — was still in the
   nav; dropping it freed roughly 160px.) */
@media (min-width: 1120px) {
  .site-header .container {
    position: relative;
    /* wider than the page container: the nav row has to hold the tabs plus
       FR|EN plus the CTAs on one line */
    max-width: 1320px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "rule"
      "nav";
    grid-template-rows: 65px 1px 48px;
  }
  .site-header .container::before {
    content: "";
    display: block;
    grid-area: rule;
    height: 1px;
    background: var(--border);
  }
  /* The tabs are centred on the container, and the padding here reserves the
     lanes the two absolutely-positioned clusters occupy — symmetric, so the
     tabs stay dead-centre while never being able to run under either one. */
  .header-nav-row {
    grid-area: nav;
    display: block;
    padding: 0 215px; /* ≈ the width of the wider (right-hand) cluster */
  }
  /* pinned to the tab row's left/right edges, aligned with .container padding */
  .lang-switch,
  .header-cta {
    position: absolute;
    bottom: 0;
    height: 48px;
  }
  .lang-switch { left: 28px; }
  .header-cta { right: 28px; }
}
@media (min-width: 1120px) and (max-width: 1439px) {
  .icon-nav ul { gap: 18px; }
  .icon-nav a { font-size: 0.66rem; letter-spacing: 0.08em; }
}
@media (min-width: 1440px) {
  .icon-nav ul { gap: 26px; }
  .icon-nav a { font-size: 0.72rem; letter-spacing: 0.12em; }
}
@media (max-width: 1119px) {
  /* The quote CTA lives in the burger menu; the phone icon stays visible */
  .header-cta > .btn-primary { display: none; }
  .btn-phone { width: 44px; height: 44px; }
  .btn-phone svg { width: 21px; height: 21px; }
  .nav-toggle { display: flex; }
  .site-header .logo { font-size: 1.4rem; }

  .site-header.menu-open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--cream);
    padding: 26px 28px 32px;
    gap: 22px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
  .site-header.menu-open .mobile-only-cta {
    display: inline-flex;
    margin-top: 6px;
  }
}

/* ============================================
   Hero
   ============================================ */
/* No min-height: the hero is exactly as tall as its text, so the copy starts
   directly under the header and is read without scrolling. Anything that
   stretches the hero to the viewport pushes the text down the screen. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-top: var(--header-h);
  background: var(--cream);
  overflow: hidden;
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: 58px 0 74px;
  color: var(--ink);
  max-width: 720px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold);
}
/* the closing hairline only earns its place once the text is centred */
.hero-eyebrow::after { display: none; }
.hero h1 {
  font-size: clamp(2.2rem, 4.8vw, 3.7rem);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.hero h1 em {
  color: var(--gold);
  font-style: italic;
  font-weight: 500;
}
.hero-lede {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 560px;
  margin-bottom: 30px;
  line-height: 1.65;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 38px; }

.hero-stats {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border-top: 1px solid var(--sand);
  padding-top: 20px;
}
.hero-stat {
  padding-right: 34px;
  margin-right: 34px;
  border-right: 1px solid var(--sand);
}
.hero-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
}
.hero-stat span {
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .hero-content { padding: 38px 0 40px; }
  .hero-actions .btn { width: 100%; }
  .hero-actions { flex-direction: column; }
  .hero-stats { gap: 22px 0; }
  .hero-stat {
    padding-right: 22px;
    margin-right: 22px;
  }
}

/* --------------------------------------------
   Hero image strips — two slow vertical marquees, one down each outer edge,
   bleeding to the viewport edges and faded out top and bottom. The text keeps
   the whole middle of the screenful to itself. The strips only exist from
   1120px up; below that the hero is text alone and they are removed from the
   layout entirely (display:none, so the images are never fetched on phones).
   -------------------------------------------- */
.hero-strip { display: none; }

@media (min-width: 1120px) {
  .hero {
    display: grid;
    grid-template-columns: var(--hero-strip-w) minmax(0, 1fr) var(--hero-strip-w);
    align-items: start;
    --hero-strip-w: clamp(180px, 16.5vw, 262px);
  }
  /* the outer columns hold no in-flow item (the strips are positioned), so the
     hero is exactly as tall as this text and the copy sits at the top */
  .hero > .container {
    grid-column: 2;
    align-self: start;
  }
  /* with photographs framing both sides, centred text is the balanced read.
     The wide measure is deliberate: narrower and the headline wraps onto a
     third line and the block starts reading as a tall column. */
  .hero-content {
    margin: 0 auto;
    max-width: 880px;
    text-align: center;
  }
  .hero-lede { max-width: 700px; margin-left: auto; margin-right: auto; }
  .hero-eyebrow::after { display: block; }
  .hero-actions { justify-content: center; }
  /* the stat row is the widest line in the block, so it is what sets how far
     the copy reaches towards the strips: open it up with the rest */
  .hero-stats { justify-content: center; padding-top: 26px; }
  .hero-stat { padding-right: 46px; margin-right: 46px; }

  /* Positioned, not laid out in the grid: an in-flow strip would size its row
     to the whole track (every photo, twice) and the hero would run thousands of
     pixels tall with the text stranded in the vertical middle of it. Out of
     flow, the strips are clipped to whatever height the copy asks for. */
  .hero-strip {
    display: block;
    position: absolute;
    top: var(--header-h);
    bottom: 0;
    width: var(--hero-strip-w);
    overflow: hidden;
    /* fade both ends into the cream instead of cutting the photos off */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
  .hero-strip--left { left: 0; }
  .hero-strip--right { right: 0; }
  .hero-strip-track {
    display: flex;
    flex-direction: column;
    animation: hero-strip-scroll 64s linear infinite;
    will-change: transform;
  }
  /* a different speed on each side keeps the two from marching in lockstep */
  .hero-strip--right .hero-strip-track { animation-duration: 82s; }
  .hero-strip img {
    display: block;
    width: 100%;
    /* An explicit height rather than an aspect-ratio. Two jobs: it keeps three
       to four photographs in view inside a hero that is only as tall as its
       text, and four of them (one copy of the track) stay taller than that
       hero at any viewport — below that, translateY(-50%) would expose empty
       cream at the bottom of the strip instead of looping cleanly. */
    height: clamp(225px, 28.5vh, 300px);
    object-fit: cover;
    /* spacing as margin, not gap: the track's height is then an exact multiple
       of the item pitch, so -50% lands on the duplicate seamlessly */
    margin-bottom: 21px;
  }
}

@keyframes hero-strip-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

/* ============================================
   Trust bar
   ============================================ */
.trust-bar {
  background: var(--ink-2);
  color: rgba(250, 245, 236, 0.58);
  padding: 22px 0;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}
.trust-bar strong { color: var(--gold-light); font-weight: 600; }

/* ============================================
   Client logos — infinite marquee
   ============================================ */
.clients { background: var(--white); padding: 72px 0 64px; }
.clients .section-head { margin-bottom: 40px; }

.clients-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.clients-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 56px;
  padding: 14px 28px;
  /* Ten logos per half, so the duration is double the old five-logo row —
     same travel speed on screen. */
  animation: clients-scroll 68s linear infinite;
  will-change: transform;
}
.clients-marquee:hover .clients-track { animation-play-state: paused; }

.client-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0.82;
  transition: opacity 0.25s var(--ease);
}
.client-logo:hover { opacity: 1; }
.client-logo img {
  height: 32px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.1);
  transition: filter 0.25s var(--ease);
}
.client-logo:hover img { filter: grayscale(0); }

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

@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; }
  .clients-marquee { overflow-x: auto; }
}

@media (max-width: 640px) {
  .client-logo { font-size: 0.95rem; }
  .client-logo img { height: 26px; max-width: 110px; }
  .clients-track { gap: 36px; padding: 10px 20px; }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(18, 13, 9, 0.94);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: min(920px, 92vw);
  max-height: 80vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.lightbox-caption {
  position: absolute;
  bottom: 34px;
  left: 0; right: 0;
  text-align: center;
  color: var(--cream);
}
.lightbox-caption strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.lightbox-caption span { color: var(--gold-light); font-size: 0.9rem; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
  background: var(--gold);
  border-color: var(--gold);
}
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 12px; right: 12px; }
}

/* ============================================
   Service tiers
   ============================================ */
.tiers { background: var(--cream); }
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .tier-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
.tier-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 42px 34px;
  display: flex;
  flex-direction: column;
  background: var(--white);
  position: relative;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.tier-card:not(.featured):hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.tier-card.featured {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  box-shadow: var(--shadow-lg);
  transform: scale(1.035);
}
.tier-card.featured h3 { color: #fff; }
@media (max-width: 900px) {
  .tier-card.featured { transform: none; }
}
.tier-badge {
  position: absolute;
  top: -14px;
  left: 34px;
  background: var(--gold);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 15px;
  border-radius: 20px;
  box-shadow: 0 6px 16px rgba(161, 98, 7, 0.35);
}
.tier-card h3 { font-size: 1.55rem; margin-bottom: 6px; font-weight: 600; }
.tier-card .tier-for {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.tier-card.featured .tier-for { color: rgba(250, 245, 236, 0.7); }
.tier-price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.tier-card.featured .tier-price { border-bottom-color: rgba(250, 245, 236, 0.16); }
.tier-price span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gold-deep);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.tier-card.featured .tier-price span { color: var(--gold-light); }
.tier-features { margin-bottom: 34px; flex: 1; }
.tier-features li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 0;
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.tier-card.featured .tier-features li { color: rgba(250, 245, 236, 0.86); }
.tier-features svg {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--gold);
  margin-top: 3px;
}
.tier-card.featured .tier-features svg { color: var(--gold-light); }

/* ============================================
   How it works — connected editorial steps
   ============================================ */
.process { background: var(--cream-alt); }
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
}
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }
.process-step { position: relative; padding-top: 28px; }
.process-step::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 46px; height: 2px;
  background: var(--gold);
}
.process-num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 500;
  color: var(--gold);
  opacity: 0.28;
  line-height: 1;
  margin-bottom: 16px;
  font-style: italic;
}
.process-step h3 { font-size: 1.18rem; margin-bottom: 10px; font-weight: 600; }
.process-step p { color: var(--ink-soft); font-size: 0.92rem; }

/* ============================================
   Testimonial — editorial pull quote
   ============================================ */
.testimonial {
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.testimonial .container { position: relative; }
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: 0.06em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 11rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.22;
  pointer-events: none;
}
.testimonial blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2.05rem);
  line-height: 1.42;
  max-width: 820px;
  margin: 0 auto 26px;
  font-style: italic;
  font-weight: 400;
  color: #fff;
  position: relative;
}
.testimonial cite {
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  display: block;
}

/* ============================================
   Contact
   ============================================ */
.contact { background: var(--cream); }
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
}
.contact-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 44px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 560px) { .contact-form { padding: 26px; } }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; gap: 18px; } }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--sand);
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(161, 98, 7, 0.13);
}
.field textarea { resize: vertical; min-height: 108px; }
.field-note { font-size: 0.78rem; color: var(--ink-faint); margin-top: 8px; }
.form-success {
  display: none;
  background: #edf5ee;
  border: 1px solid #c2e0c7;
  color: #2b5c33;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  margin-bottom: 20px;
}
.form-success.show { display: block; }
.form-error {
  display: none;
  background: #fbeaea;
  border: 1px solid #eec2c2;
  color: #8a2c2c;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  margin-bottom: 20px;
}
.form-error.show { display: block; }

.form-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #dff0e1;
  color: #2b5c33;
  margin-bottom: 14px;
  animation: revealPop 0.5s var(--ease);
}
.form-success-icon svg { width: 20px; height: 20px; }
.form-success p { margin-bottom: 16px; }
.quiz-shell.is-submitted .quiz-form { display: none; }

/* ============================================
   Quote quiz — multi-step animated form
   ============================================ */
.quiz-progress { margin-bottom: 34px; }
.quiz-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--sand-soft);
  overflow: hidden;
  margin-bottom: 10px;
}
.quiz-progress-fill {
  height: 100%;
  width: 20%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width 0.5s var(--ease);
}
.quiz-progress-label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.quiz-viewport { position: relative; }

.quiz-step,
fieldset.quiz-step {
  display: none;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.quiz-step.is-active {
  display: block;
  animation: quizStepIn 0.45s var(--ease);
}
@keyframes quizStepIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes optionPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes revealPop {
  0% { opacity: 0; transform: scale(0.5) rotate(-14deg); }
  60% { opacity: 1; transform: scale(1.1) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

legend.quiz-question,
p.quiz-question {
  padding: 0;
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 26px;
}

.quiz-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 8px 0;
  margin-bottom: 18px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.2s ease;
}
.quiz-back svg { width: 14px; height: 14px; }
.quiz-back:hover { color: var(--gold-deep); }

.quiz-options--cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 12px;
  min-height: 44px;
  border: 1.5px solid var(--sand);
  border-radius: var(--radius-md);
  background: var(--cream);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease),
              transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.option-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.option-card.is-selected {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(161, 98, 7, 0.15);
  animation: optionPop 0.35s var(--ease);
}
.option-card .option-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.option-card .option-icon svg { width: 22px; height: 22px; }
.option-card.is-selected .option-icon { background: var(--gold); color: #fff; }

.quiz-options--pills { display: flex; flex-wrap: wrap; gap: 12px; }
.option-pill,
.option-toggle {
  padding: 14px 24px;
  min-height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--sand);
  background: var(--cream);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease),
              color 0.25s var(--ease), transform 0.25s var(--ease);
}
.option-pill:hover,
.option-toggle:hover { border-color: var(--gold); color: var(--gold-deep); transform: translateY(-2px); }
.option-pill.is-selected,
.option-toggle.is-selected {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  animation: optionPop 0.35s var(--ease);
}

/* The dietary step is the only multi-select one, so it needs a Continue
   button of its own — the single-choice steps advance on click. */
.quiz-step .quiz-continue { margin-top: 22px; }

.quiz-reveal-card { text-align: center; padding: 6px 0 4px; }
.quiz-reveal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold);
  margin-bottom: 18px;
  animation: revealPop 0.55s var(--ease);
}
.quiz-reveal-icon svg { width: 28px; height: 28px; }
.quiz-reveal-icon.pop { animation: revealPop 0.55s var(--ease); }
.quiz-reveal-card .eyebrow { display: inline-flex; margin-bottom: 10px; }
.quiz-reveal-card h3 {
  font-size: 1.9rem;
  font-weight: 600;
  margin-bottom: 12px;
}
.quiz-reveal-card #revealTierDesc {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 420px;
  margin: 0 auto 14px;
}
.quiz-reveal-price { font-weight: 700; color: var(--gold-deep); margin-bottom: 20px; }
.quiz-reveal-note {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-faint);
  margin-bottom: 28px;
}

@media (max-width: 560px) {
  .quiz-options--cards { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
  .option-card { padding: 18px 8px; }
  .option-pill,
  .option-toggle { padding: 12px 18px; }
}

/* Contact tabs — form vs WhatsApp voice message */
.contact-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.contact-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 4px;
  margin-right: 24px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.contact-tab:hover { color: var(--ink-soft); }
.contact-tab.is-active { color: var(--gold-deep); border-bottom-color: var(--gold); }

.whatsapp-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 44px;
  box-shadow: var(--shadow-sm);
  text-align: left;
}
@media (max-width: 560px) { .whatsapp-card { padding: 26px; } }
.whatsapp-card .ci-icon--whatsapp {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  background: var(--gold-soft);
  color: var(--gold-deep);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.whatsapp-card .ci-icon--whatsapp svg { width: 26px; height: 26px; }
.whatsapp-card h3 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 12px; font-weight: 600; }
.whatsapp-copy { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.7; margin-bottom: 24px; }
.whatsapp-card .btn { margin-bottom: 16px; }

.contact-info h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 16px; font-weight: 600; }
.contact-info > p { color: var(--ink-soft); margin-bottom: 34px; }
.contact-detail {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
.contact-detail:last-of-type { border-bottom: 1px solid var(--border); }
.contact-detail .ci-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-detail .ci-icon svg { width: 20px; height: 20px; }
.contact-detail strong { display: block; font-size: 0.95rem; margin-bottom: 3px; }
.contact-detail span, .contact-detail a { color: var(--ink-soft); font-size: 0.92rem; }
.contact-detail a:hover { color: var(--gold); }


/* Google Business Profile link, sitting where the map used to. */
.gbp-card {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--cream-alt);
  color: var(--ink);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.gbp-card:hover {
  background: var(--sand-soft);
  border-color: var(--gold);
}
.gbp-icon svg { width: 26px; height: 26px; color: var(--gold); display: block; }
.gbp-text { display: flex; flex-direction: column; gap: 2px; }
.gbp-text strong { font-weight: 600; }
.gbp-text span { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; }
.gbp-arrow { width: 16px; height: 16px; margin-left: auto; color: var(--ink-faint); flex-shrink: 0; }

/* ============================================
   CTA band
   ============================================ */
.cta-band {
  background: var(--ink-2);
  color: var(--cream);
  text-align: center;
  position: relative;
}
.cta-band::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 72px; height: 3px;
  background: var(--gold);
}
.cta-band h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 16px; font-weight: 600; }
.cta-band p { color: rgba(250, 245, 236, 0.75); max-width: 540px; margin: 0 auto 34px; }
.cta-band .btn-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================
   Footer
   ============================================ */
.site-footer {
  background: var(--ink-2);
  color: rgba(250, 245, 236, 0.58);
  padding: 72px 0 30px;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 44px;
  margin-bottom: 52px;
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .logo { color: #fff; margin-bottom: 16px; display: block; }
.footer-brand p { max-width: 300px; color: rgba(250, 245, 236, 0.5); line-height: 1.7; }
.footer-col h4 {
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-weight: 600;
}
.footer-col li { margin-bottom: 12px; }
.footer-col a { transition: color 0.2s ease; }
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom {
  border-top: 1px solid rgba(250, 245, 236, 0.1);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(250, 245, 236, 0.4);
}

/* ============================================
   Scroll reveal + staggered rhythm
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
/* Stagger within grids */
.tier-grid .reveal:nth-child(2),
.process-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.tier-grid .reveal:nth-child(3),
.process-grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.process-grid .reveal:nth-child(4) { transition-delay: 0.24s; }

/* The .static-header-page body class is kept on gallery.html / history.html
   for markup stability, but it no longer needs any rules: since the hero
   photo was dropped, the header is solid and light on every page. */

/* ============================================
   Language switch (FR / EN)
   ============================================ */
/* Bare FR │ EN — no pill, no fill; a hairline rule divides the two and the
   active language is simply the darker of them. */
.lang-switch {
  grid-area: lang;
  justify-self: start;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.lang-switch .lang-btn {
  background: none;
  border: none;
  padding: 4px 12px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.2s ease;
}
.lang-switch .lang-btn:first-child { padding-left: 0; }
.lang-switch .lang-btn:last-child { padding-right: 0; }
.lang-switch .lang-btn + .lang-btn { border-left: 1px solid var(--sand); }
.lang-switch .lang-btn:hover { color: var(--gold); }
.lang-switch .lang-btn.is-active { color: var(--ink); }
@media (max-width: 1119px) {
  /* keep the pair a comfortable tap target without growing the header */
  .lang-switch .lang-btn { padding: 12px; }
  .lang-switch .lang-btn:first-child { padding-left: 0; }
}

/* ============================================
   Gallery page — intro banner + full archive grid
   ============================================ */
.gallery-hero {
  padding: calc(var(--header-h) + 58px) 0 64px;
  background: var(--cream-alt);
  text-align: center;
}
.gallery-hero .eyebrow { justify-content: center; }
.gallery-hero h1 {
  font-size: clamp(2.15rem, 4.4vw, 3.3rem);
  line-height: 1.12;
  margin-bottom: 18px;
  font-weight: 600;
}
.gallery-hero p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.7;
}
@media (max-width: 640px) {
  .gallery-hero { padding: calc(var(--header-h) + 42px) 0 48px; }
}
.full-gallery { background: var(--cream); padding: 64px 0 112px; }
@media (max-width: 640px) { .full-gallery { padding: 48px 0 72px; } }

/* Gallery collage — Pinterest-style masonry via real CSS Grid (row-span per
   item, computed in gallery.js from each photo's own aspect ratio). Every
   photo keeps its natural proportions (no letterboxing) so the dish reads
   clearly; the caption sits in a soft gradient scrim over the image itself.
   Deliberately NOT CSS multi-column (column-count): columns create a
   fragmentation context where transform/box-shadow transitions on one tile
   can make sibling tiles blank out on repaint (Chromium bug) — that's what
   broke the masonry the last time this was tried. Grid has no such context. */
.gallery-collage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-rows: 8px;
  gap: 24px;
}
@media (max-width: 760px) {
  .gallery-collage { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
}
@media (max-width: 460px) { .gallery-collage { grid-template-columns: 1fr; } }

.collage-item {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: opacity 0.5s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.collage-item.reveal-step-1 { transition-delay: 0.06s; }
.collage-item.reveal-step-2 { transition-delay: 0.12s; }
.collage-item.reveal-step-3 { transition-delay: 0.18s; }
.collage-item:hover, .collage-item:focus-visible { transition-delay: 0s; }

.collage-item:hover,
.collage-item:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.collage-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.collage-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(26, 19, 14, 0) 58%, rgba(26, 19, 14, 0.88) 100%);
  opacity: 0.8;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.collage-item:hover::after,
.collage-item:focus-visible::after { opacity: 0.94; }

.collage-card { display: block; height: 100%; }

.collage-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.collage-item:hover .collage-card img,
.collage-item:focus-visible .collage-card img { transform: scale(1.045); }

.collage-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 30px 18px 16px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--cream);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* ============================================
   History page — zigzag milestone rows
   ============================================ */
.history-timeline { background: var(--cream); padding: 24px 0 96px; }
.history-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
  padding: 64px 0;
}
.history-row + .history-row { border-top: 1px solid var(--border); }
.history-row--reverse .history-visual { order: -1; }

.history-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.history-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.history-visual:hover img { transform: scale(1.045); }

.history-text .eyebrow { margin-bottom: 16px; }
.history-text h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  line-height: 1.2;
  margin-bottom: 16px;
  font-weight: 600;
}
.history-text p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.75; }

@media (max-width: 780px) {
  .history-row { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .history-visual { order: -1; }
}

/* ============================================
   Gallery page — highlights tile grid
   ============================================ */
.highlights { background: var(--cream-alt); }
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}
@media (max-width: 900px) {
  .highlights-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
}
@media (max-width: 560px) {
  .highlights-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
}
.highlight-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 20px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.highlight-tile:hover {
  border-color: var(--sand);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
@media (max-width: 560px) {
  .highlight-tile { padding: 16px 8px; gap: 8px; }
}
.highlight-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.highlight-icon svg { width: 19px; height: 19px; }
.highlight-label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.highlights-footnote {
  margin-top: 34px;
  text-align: center;
  font-size: 0.92rem;
}
.highlights-footnote a {
  color: var(--gold-deep);
  font-weight: 600;
  transition: color 0.2s ease;
}
.highlights-footnote a:hover { color: var(--gold); }

/* ============================================
   Gallery preview (landing page, after client logos)
   Fixed-ratio tiles in a plain CSS Grid — no masonry here, so this section
   needs no JS: index.html loads script.js, not gallery.js. Deliberately not
   CSS column-count (see gallery.js note: it blanked out sibling tiles on
   hover in Chromium).
   ============================================ */
.showcase { background: var(--cream-alt); padding: 80px 0; }
@media (max-width: 640px) { .showcase { padding: 56px 0; } }

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 44px;
}
@media (max-width: 900px) { .showcase-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 640px) { .showcase-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.showcase-item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.showcase-item:hover,
.showcase-item:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(36, 28, 22, 0.12));
}
.showcase-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.showcase-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.showcase-item:hover img,
.showcase-item:focus-visible img { transform: scale(1.05); }

.showcase-cta { margin-top: 36px; text-align: center; }

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-strip-track { animation: none; }
}

/* ============================================
   Honeypot (spam trap)
   Positioned off-screen rather than display:none — some bots skip fields that
   are explicitly hidden, but will happily fill this one. Never shown to a real
   visitor, and aria-hidden + tabindex="-1" keep it out of assistive tech and
   the keyboard tab order.
   ============================================ */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================
   Legal pages (privacy.html)
   Long-form prose, narrower than the marketing sections so the lines stay
   readable. Uses the same tokens as the rest of the site.
   ============================================ */
.legal-page {
  /* Same top clearance convention as .gallery-hero, so the heading sits at the
     same height as on the other secondary pages. */
  padding: calc(var(--header-h) + 42px) 0 72px;
  background: var(--cream);
}
.legal-wrap {
  max-width: 760px;
}
.legal-page h1 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  margin: 6px 0 10px;
}
.legal-updated {
  color: var(--ink-faint);
  font-size: 0.88rem;
  margin-bottom: 20px;
}
.legal-lead {
  font-size: 1.06rem;
  color: var(--ink-soft);
  line-height: 1.7;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--sand);
}
.legal-section {
  /* Override the global `section { padding: 112px 0 }`: these are prose
     subsections inside one page, not full-width page bands, so the vertical
     rhythm comes from the margin alone. */
  padding: 0;
  margin-top: 30px;
}
.legal-section h2 {
  font-size: 1.24rem;
  margin-bottom: 10px;
}
.legal-section p,
.legal-section li {
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 8px;
}
.legal-section p:last-child,
.legal-section li:last-child {
  margin-bottom: 0;
}
.legal-section ul {
  padding-left: 20px;
  list-style: disc;
}
.legal-section li::marker {
  color: var(--gold);
}
.legal-back {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--sand);
}
.legal-back a {
  color: var(--gold-deep);
  font-weight: 500;
}
.footer-bottom a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-bottom a:hover { color: var(--gold-light); }