/* =========================================================================
   Room Tone — styles.css
   Branding, Photography & Content For Hospitality Spaces.
   ========================================================================= */

/* ---------- Self-hosted fonts ----------
   Fraunces is served as static 144pt optical-size cuts (display style)
   used across the entire system — wordmark, headlines, intros, italics.
   Family is renamed 'Fraunces144' so it cannot be shadowed by any
   system-installed Fraunces variable font. SOFT axis split:
     Light/Regular/Italic → S000 (Standard, sharp classical serifs)
     SemiBold/Bold/Italics → S050 (Soft, rounded terminals — warmer)
   Weights match true OpenType convention: 400 Regular, 600 SemiBold, 700 Bold.
   Inter is variable for body / nav. */
@font-face {
  font-family: 'Fraunces144';
  src: url('public/fonts/Fraunces144-Light.woff2') format('woff2'),
       url('public/fonts/Fraunces144-Light.ttf')   format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces144';
  src: url('public/fonts/Fraunces144-LightItalic.woff2') format('woff2'),
       url('public/fonts/Fraunces144-LightItalic.ttf')   format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces144';
  src: url('public/fonts/Fraunces144-Regular.woff2') format('woff2'),
       url('public/fonts/Fraunces144-Regular.ttf')   format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces144';
  src: url('public/fonts/Fraunces144-Italic.woff2') format('woff2'),
       url('public/fonts/Fraunces144-Italic.ttf')   format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* SemiBold (S050 Soft) — used for the wordmark and small heading bumps.
   OpenType convention: SemiBold = weight 600. */
@font-face {
  font-family: 'Fraunces144';
  src: url('public/fonts/Fraunces144-SemiBold.woff2') format('woff2'),
       url('public/fonts/Fraunces144-SemiBold.ttf')   format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces144';
  src: url('public/fonts/Fraunces144-SemiBoldItalic.woff2') format('woff2'),
       url('public/fonts/Fraunces144-SemiBoldItalic.ttf')   format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces144';
  src: url('public/fonts/Fraunces144-Bold.woff2') format('woff2'),
       url('public/fonts/Fraunces144-Bold.ttf')   format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces144';
  src: url('public/fonts/Fraunces144-BoldItalic.woff2') format('woff2'),
       url('public/fonts/Fraunces144-BoldItalic.ttf')   format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('public/fonts/Inter-Variable.woff2') format('woff2-variations'),
       url('public/fonts/Inter-Variable.ttf')   format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --cream: #f3ece1;
  --cream-warm: #ede4d3;
  --paper: #faf6ee;
  --charcoal: #1a1815;
  --ink: #2a2622;
  --ink-soft: #4a443c;
  --mute: #7a6f60;
  --line: rgba(26, 24, 21, 0.14);
  --line-soft: rgba(26, 24, 21, 0.08);

  --oxblood: #7a1c1f;
  --oxblood-deep: #5a1316;
  --tobacco: #8a6a4a;
  --coral: #d97757;
  --teal: #486764;

  --serif: 'Fraunces144', 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --max-w: 1440px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(80px, 12vw, 160px);

  --nav-h: 78px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
figure { margin: 0; }
ul { padding: 0; list-style: none; margin: 0; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; letter-spacing: -0.02em; }

/* ---------- Type ---------- */
/* Fraunces is served as the static 144pt optical-size cut across the entire
   system — wordmark, headlines, intros, italics. Display contrast everywhere.
   Headings render as Fraunces 144pt S000 Regular (weight 400). */
.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--charcoal);
}
.display--xl { font-size: clamp(40px, 6.4vw, 92px); }
.display--lg { font-size: clamp(38px, 6vw, 88px); }
.display--md { font-size: clamp(32px, 4.2vw, 64px); }
.display--sm { font-size: clamp(26px, 3.2vw, 44px); }

.serif {
  font-family: var(--serif);
  font-weight: 400;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.body { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.65; color: var(--ink-soft); }
.body p { margin-bottom: 1.1em; }
.body p:last-child { margin-bottom: 0; }

em, .italic { font-style: italic; }

/* ---------- Container & Grid ---------- */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--tight { padding-top: clamp(60px, 8vw, 100px); padding-bottom: clamp(60px, 8vw, 100px); }
.section--top { padding-bottom: var(--section-y); padding-top: clamp(40px, 6vw, 80px); }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.divider-soft { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

/* ---------- Top Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.3s var(--ease);
}
.nav--scrolled { background: rgba(243, 236, 225, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 22px; padding-bottom: 22px;
}
.nav__brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  display: inline-flex;
  align-items: center;
  gap: 0;
  position: relative;
  height: 30px;
}
.nav__brand .dot { color: var(--oxblood); }

/* ----- Wordmark <-> Mark crossfade -----
   Top of page  : text default, hover swaps in the mark
   When scrolled: mark default, hover swaps the text back in
   Always inverse on hover so both halves of the identity are felt. */
.nav__brand-text {
  display: inline-flex;
  align-items: center;
  font-family: var(--serif);
  font-weight: 600; /* locks to Fraunces 144pt S050 SemiBold via @font-face */
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}
.nav__brand-mark {
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  height: 30px;
  opacity: 0;
  transform: translateY(-50%) scale(0.82);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
  pointer-events: none;
}

/* Top-of-page hover: text -> mark */
.nav__brand:hover .nav__brand-text {
  opacity: 0;
  transform: translateX(-6px);
}
.nav__brand:hover .nav__brand-mark {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Scrolled state: mark default, text hidden */
.nav--scrolled .nav__brand-text {
  opacity: 0;
  transform: translateX(-6px);
}
.nav--scrolled .nav__brand-mark {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Scrolled + hover: revert — mark hides, text returns */
.nav--scrolled .nav__brand:hover .nav__brand-text {
  opacity: 1;
  transform: translateX(0);
}
.nav--scrolled .nav__brand:hover .nav__brand-mark {
  opacity: 0;
  transform: translateY(-50%) scale(0.82);
}

/* Touch devices have no real :hover — disable the swap so it doesn't
   stick after a tap. Scrolled-state default still applies. */
@media (hover: none) {
  .nav__brand:hover .nav__brand-text { opacity: 1; transform: translateX(0); }
  .nav__brand:hover .nav__brand-mark { opacity: 0; transform: translateY(-50%) scale(0.82); }
  .nav--scrolled .nav__brand:hover .nav__brand-text { opacity: 0; transform: translateX(-6px); }
  .nav--scrolled .nav__brand:hover .nav__brand-mark { opacity: 1; transform: translateY(-50%) scale(1); }
}
.nav__links { display: flex; gap: 36px; }
.nav__links a {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.01em;
  position: relative;
  padding: 4px 0;
}
.nav__links a:hover { color: var(--oxblood); }
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--oxblood); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta {
  font-size: 13px; padding: 9px 18px; border: 1px solid var(--charcoal);
  border-radius: 999px; color: var(--charcoal);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.nav__cta:hover { background: var(--charcoal); color: var(--cream); }

/* ---------- Mobile nav (hamburger + drawer) ---------- */
.nav__hamburger {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  margin-right: -6px;
  background: none; border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav__hamburger span {
  position: relative;
  display: block;
  width: 22px; height: 1.5px;
  background: var(--charcoal);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), top 0.3s var(--ease);
}
.nav__hamburger span::before,
.nav__hamburger span::after {
  content: ''; position: absolute; left: 0;
  width: 22px; height: 1.5px;
  background: var(--charcoal);
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.nav__hamburger span::before { top: -7px; }
.nav__hamburger span::after  { top:  7px; }
.nav--open .nav__hamburger span { background: transparent; }
.nav--open .nav__hamburger span::before { top: 0; transform: rotate(45deg); }
.nav--open .nav__hamburger span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 760px) {
  .nav__hamburger { display: inline-flex; }
  .nav__cta { display: none; }
  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: clamp(20px, 6vw, 40px) var(--gutter) 40px;
    background: var(--cream);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.35s var(--ease), opacity 0.25s var(--ease), visibility 0s linear 0.3s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-top: 1px solid var(--line-soft);
    z-index: 49;
  }
  .nav__links a {
    width: 100%;
    font-family: var(--serif);
    font-size: 32px;
    letter-spacing: -0.02em;
    color: var(--charcoal);
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav__links a:hover::after { transform: scaleX(0); } /* disable the underline animation here */
  .nav__links .nav__mobile-cta {
    margin-top: 28px;
    border: 1px solid var(--charcoal);
    border-radius: 999px;
    padding: 14px 22px;
    font-family: var(--sans);
    font-size: 14px;
    text-align: center;
    width: max-content;
  }
  .nav--open .nav__links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.35s var(--ease), opacity 0.25s var(--ease), visibility 0s linear 0s;
  }
  /* lock scroll when drawer open — preserves scroll position via JS */
  body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
  }
  /* Keep the nav visibly anchored to top when body is locked-fixed */
  body.no-scroll .nav { position: fixed; top: 0; left: 0; right: 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  padding: 16px 28px;
  border-radius: 999px;
  transition: all 0.25s var(--ease);
  border: 1px solid transparent;
}
.btn--primary { background: var(--charcoal); color: var(--cream); }
.btn--primary:hover { background: var(--oxblood); }
.btn--ghost { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn--ghost:hover { background: var(--charcoal); color: var(--cream); }
.btn--ox { background: var(--oxblood); color: var(--paper); }
.btn--ox:hover { background: var(--oxblood-deep); }
.btn .arrow { font-size: 16px; transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Hero (Homepage) ---------- */
.hero { padding-top: clamp(60px, 8vw, 96px); padding-bottom: clamp(60px, 9vw, 120px); }
.hero__head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 90px);
}
.hero__title { max-width: 12ch; }
.hero__title em { font-style: italic; color: var(--oxblood); font-weight: 400; }
.hero__copy { padding-bottom: 8px; }
.hero__copy .lead { margin-bottom: 28px; max-width: 38ch; }
.hero__buttons { display: flex; gap: 12px; flex-wrap: wrap; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.9fr;
  grid-template-rows: 62vh;
  gap: clamp(12px, 1.4vw, 22px);
}
.hero__grid figure { position: relative; overflow: hidden; border-radius: 2px; }
.hero__grid img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.hero__grid figure:hover img { transform: scale(1.03); }
.hero__grid figcaption {
  position: absolute; bottom: 14px; left: 14px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper);
  background: rgba(20, 18, 15, 0.5);
  padding: 6px 10px; border-radius: 999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

@media (max-width: 920px) {
  .hero__head { grid-template-columns: 1fr; gap: 32px; }
  .hero__copy { padding-bottom: 0; }
  .hero__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 45vh 35vh; }
  .hero__grid figure:nth-child(3) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .hero__grid { grid-template-columns: 1fr; grid-template-rows: 60vh 40vh 40vh; }
  .hero__grid figure:nth-child(3) { grid-column: auto; }
}

/* ---------- Marquee strip / accent ---------- */
.tagstrip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.tagstrip__inner { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; }
.tagstrip__inner em { font-style: italic; color: var(--oxblood); }

/* ---------- Section Header ---------- */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 80px);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.section-head__num { font-family: var(--serif); font-size: 14px; color: var(--mute); letter-spacing: 0.04em; }
.section-head__title { max-width: 18ch; }
.section-head__sub { color: var(--ink-soft); max-width: 42ch; justify-self: end; font-size: 15px; }

@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .section-head__sub { justify-self: start; }
}

/* ---------- Intro Slab ---------- */
.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.intro__title { max-width: 14ch; }
.intro__title em { font-style: italic; color: var(--oxblood); }
.intro__body { padding-top: 14px; max-width: 50ch; }

@media (max-width: 820px) {
  .intro { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Featured Work / Case Study Cards ---------- */
.work__list { display: flex; flex-direction: column; gap: clamp(80px, 10vw, 140px); }
.work__item {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 4vw, 80px);
  align-items: center;
}
.work__item--reverse .work__media { order: 2; }
.work__media { position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 5; }
.work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.work__item:hover .work__media img { transform: scale(1.04); }
.work__copy .eyebrow { display: block; margin-bottom: 16px; }
.work__copy h3 { margin-bottom: 18px; }
.work__copy h3 em { color: var(--oxblood); font-style: italic; }
.work__copy p { color: var(--ink-soft); max-width: 46ch; margin-bottom: 22px; }
.work__services {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 24px 0 28px;
}
.work__services li {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 999px;
}
.work__link {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--serif); font-weight: 600; font-style: italic; font-size: 18px;
  color: var(--charcoal);
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.work__link:hover { color: var(--oxblood); border-color: var(--oxblood); }
.work__link .arrow { transition: transform 0.25s var(--ease); }
.work__link:hover .arrow { transform: translateX(4px); }

@media (max-width: 880px) {
  .work__item, .work__item--reverse { grid-template-columns: 1fr; gap: 28px; }
  .work__item--reverse .work__media { order: 0; }
  .work__media { aspect-ratio: 4 / 3; }
}

/* ---------- Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.service {
  background: var(--cream);
  padding: clamp(28px, 3.5vw, 56px);
  display: flex; flex-direction: column; gap: 14px;
  min-height: 260px;
  transition: background 0.3s var(--ease);
}
.service:hover { background: var(--paper); }
.service__num {
  font-family: var(--serif); font-size: 13px; color: var(--mute);
  letter-spacing: 0.06em;
}
.service h4 { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.4vw, 34px); color: var(--charcoal); }
.service p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; max-width: 38ch; }

@media (max-width: 700px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ---------- Process ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.process__step {
  background: var(--cream);
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2vw, 28px);
  display: flex; flex-direction: column; gap: 14px;
}
.process__num {
  font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--oxblood);
}
.process__step h5 { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2vw, 28px); color: var(--charcoal); }
.process__step p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

@media (max-width: 900px) {
  .process { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .process { grid-template-columns: 1fr; }
}

/* ---------- About ---------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(28px, 4vw, 80px);
  align-items: end;
}
.about__num { font-family: var(--serif); font-style: italic; color: var(--mute); }
.about__copy h2 { margin-bottom: 24px; max-width: 18ch; }
.about__copy h2 em { color: var(--oxblood); font-style: italic; }
.about__copy p { color: var(--ink-soft); max-width: 56ch; }

@media (max-width: 820px) {
  .about { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- Contact CTA ---------- */
.cta {
  background: var(--charcoal);
  color: var(--cream);
}
.cta__inner {
  padding: clamp(80px, 10vw, 140px) 0;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
}
.cta__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 100px);
  line-height: 1.02; letter-spacing: -0.025em;
  color: var(--cream);
  max-width: 14ch;
}
.cta__title em { color: var(--coral); font-style: italic; }
.cta__right { padding-bottom: 12px; }
.cta__right p { color: rgba(243, 236, 225, 0.7); margin-bottom: 28px; max-width: 38ch; }
.cta__right .btn { background: var(--cream); color: var(--charcoal); }
.cta__right .btn:hover { background: var(--coral); color: var(--charcoal); }

@media (max-width: 820px) {
  .cta__inner { grid-template-columns: 1fr; }
  .cta__right { padding-bottom: 0; }
}

/* ---------- Footer ---------- */
.foot {
  background: var(--charcoal);
  color: rgba(243, 236, 225, 0.75);
  padding: 56px 0 40px;
  border-top: 1px solid rgba(243, 236, 225, 0.08);
  font-size: 13.5px;
}
.foot__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
.foot__brand { font-family: var(--serif); font-weight: 600; font-size: 26px; color: var(--cream); margin-bottom: 14px; letter-spacing: -0.02em; }
.foot__brand .dot { color: var(--coral); }
.foot__tagline { max-width: 30ch; line-height: 1.55; color: rgba(243, 236, 225, 0.55); }
.foot h6 {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(243, 236, 225, 0.5);
  margin: 0 0 14px;
}
.foot ul li { margin-bottom: 8px; }
.foot a:hover { color: var(--coral); }
.foot__bottom {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(243, 236, 225, 0.08);
  font-size: 12px;
  color: rgba(243, 236, 225, 0.45);
}
@media (max-width: 760px) {
  .foot__inner { grid-template-columns: 1fr 1fr; }
  .foot__brand-col { grid-column: span 2; }
}

/* =========================================================================
   Case Study Pages
   ========================================================================= */

/* ---------- Case Hero ---------- */
.case-hero { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.case-hero__crumbs { font-size: 13px; color: var(--mute); margin-bottom: 28px; }
.case-hero__crumbs a { color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.case-hero__crumbs a:hover { color: var(--oxblood); border-color: var(--oxblood); }

.case-hero__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  margin-bottom: clamp(40px, 6vw, 80px);
  align-items: end;
}
.case-hero__title em { color: var(--oxblood); font-style: italic; }
.case-hero__sub { color: var(--ink-soft); padding-bottom: 8px; max-width: 50ch; }

.case-hero__image { position: relative; overflow: hidden; border-radius: 2px; }
.case-hero__image img { width: 100%; height: auto; max-height: 86vh; object-fit: cover; }

.case-hero__image--collage {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(12px, 1.4vw, 22px);
  height: clamp(60vh, 78vh, 90vh);
}
.case-hero__image--collage figure { overflow: hidden; border-radius: 2px; }
.case-hero__image--collage img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .case-hero__image--collage {
    grid-template-columns: 1fr;
    grid-template-rows: 60vh 40vh;
    height: auto;
  }
}

@media (max-width: 760px) {
  .case-hero__head { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- Case Meta Bar ---------- */
.case-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: clamp(36px, 4vw, 56px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-meta__item h6 {
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mute);
  margin: 0 0 10px;
}
.case-meta__item p { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--charcoal); margin: 0; line-height: 1.4; }
@media (max-width: 760px) {
  .case-meta { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 460px) {
  .case-meta { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- Case Section ---------- */
.case-section { padding: clamp(70px, 8vw, 120px) 0; }
.case-section__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(28px, 4vw, 80px);
  margin-bottom: clamp(40px, 5vw, 70px);
  align-items: end;
}
.case-section__num {
  font-family: var(--serif); font-style: italic; color: var(--oxblood); font-size: 18px;
  margin-bottom: 14px;
}
.case-section__title { max-width: 18ch; }
.case-section__title em { color: var(--oxblood); font-style: italic; }
.case-section__body { color: var(--ink-soft); padding-bottom: 8px; max-width: 50ch; font-size: 16px; line-height: 1.7; }
.case-section__body p { margin-bottom: 1em; }

@media (max-width: 820px) {
  .case-section__head { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- Case Image Layouts ---------- */
.gallery { display: grid; gap: clamp(12px, 1.4vw, 22px); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery figure { overflow: hidden; border-radius: 2px; }

.gal--full img { width: 100%; max-height: 88vh; object-fit: cover; }

.gal--2 { grid-template-columns: 1fr 1fr; }
.gal--2 figure { aspect-ratio: 4 / 5; }
.gal--2-wide { grid-template-columns: 1fr 1fr; }
.gal--2-wide figure { aspect-ratio: 4 / 3; }

.gal--3 { grid-template-columns: repeat(3, 1fr); }
.gal--3 figure { aspect-ratio: 3 / 4; }

.gal--asym {
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: clamp(70vh, 80vh, 90vh);
}
.gal--asym figure:nth-child(1) { grid-row: span 2; }
.gal--asym figure { height: 100%; }

.gal--asym-rev {
  grid-template-columns: 1fr 1.3fr;
  grid-template-rows: 1fr 1fr;
  height: clamp(70vh, 80vh, 90vh);
}
.gal--asym-rev figure:nth-child(3) { grid-row: span 2; grid-column: 2; grid-row: 1 / span 2; }
.gal--asym-rev figure:nth-child(1) { grid-column: 1; }
.gal--asym-rev figure:nth-child(2) { grid-column: 1; }
.gal--asym-rev figure { height: 100%; }

.gal--triptych {
  grid-template-columns: 1fr 1.4fr 1fr;
  height: clamp(60vh, 70vh, 80vh);
}
.gal--triptych figure { height: 100%; }

.gal--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.gal--split figure { aspect-ratio: 4 / 5; }

.gal--mood-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1vw, 14px);
}
.gal--mood-4 figure { aspect-ratio: 3 / 4; }

@media (max-width: 760px) {
  .gal--3, .gal--mood-4 { grid-template-columns: 1fr 1fr; }
  .gal--3 figure:nth-child(3) { grid-column: span 2; aspect-ratio: 16 / 10; }
  .gal--asym, .gal--asym-rev { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  .gal--asym figure, .gal--asym-rev figure { aspect-ratio: 4 / 3; height: auto; grid-row: auto !important; grid-column: auto !important; }
  .gal--triptych { grid-template-columns: 1fr 1fr; height: auto; }
  .gal--triptych figure { aspect-ratio: 4 / 5; }
}

/* ---------- Pull quote ---------- */
.pull {
  padding: clamp(60px, 8vw, 100px) 0;
  text-align: left;
}
.pull__inner { max-width: 22ch; margin: 0 auto; text-align: center; }
.pull p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(28px, 4vw, 52px); line-height: 1.15;
  color: var(--charcoal); letter-spacing: -0.02em;
  margin: 0;
}
.pull p em { color: var(--oxblood); font-style: italic; }

/* ---------- Deliverables ---------- */
.deliverables {
  padding: clamp(60px, 7vw, 100px) 0;
  border-top: 1px solid var(--line);
}
.deliverables__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(28px, 4vw, 80px);
}
.deliverables h2 { margin-bottom: 0; }
.deliverables ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 32px;
  align-content: start;
}
.deliverables li {
  font-family: var(--serif); font-weight: 600; font-size: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
@media (max-width: 760px) {
  .deliverables__inner { grid-template-columns: 1fr; }
  .deliverables ul { grid-template-columns: 1fr; }
}

/* ---------- Next Project ---------- */
.next {
  border-top: 1px solid var(--line);
  padding: clamp(60px, 8vw, 110px) 0;
}
.next__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(28px, 4vw, 80px);
  align-items: center;
}
.next__label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.next__title { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 88px); line-height: 1.02; letter-spacing: -0.025em; color: var(--charcoal); }
.next__title em { color: var(--oxblood); font-style: italic; }
.next__title:hover { color: var(--oxblood); }
.next__media { aspect-ratio: 5 / 4; overflow: hidden; border-radius: 2px; }
.next__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.next__inner:hover .next__media img { transform: scale(1.04); }
@media (max-width: 760px) {
  .next__inner { grid-template-columns: 1fr; }
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.muted { color: var(--ink-soft); }
.spacer-sm { height: clamp(40px, 5vw, 70px); }
.spacer-md { height: clamp(60px, 8vw, 100px); }

/* ---------- Subtle reveal on scroll (progressive enhancement) ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Menu treatment — no crop, paper background ---------- */
/* Used for printed menus that need to be seen whole. Sits the menu like a
   shot-in-place object on warm paper rather than cover-cropping it. */
.gal--menus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.4vw, 22px);
}
.gal--menus figure {
  background: var(--cream-warm);
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 3vw, 48px);
  overflow: hidden;
  border-radius: 2px;
}
.gal--menus img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 30px rgba(20, 18, 15, 0.22));
}
@media (max-width: 760px) {
  .gal--menus { grid-template-columns: 1fr; }
}

/* ---------- AI reference / direction frame ---------- */
.ref-frame { position: relative; }
.ref-frame .ref-tag {
  position: absolute; top: 18px; left: 18px;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper);
  background: rgba(20, 18, 15, 0.65);
  padding: 7px 11px; border-radius: 999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}

/* ---------- Object-position helpers — to bias cover crops on portrait images ---------- */
.op-top    { object-position: center 18% !important; }
.op-mid-up { object-position: center 35% !important; }
.op-center { object-position: center center !important; }
.op-mid-dn { object-position: center 65% !important; }

/* =========================================================================
   Pricing Page
   ========================================================================= */

/* ---------- Pricing Hero ---------- */
.pricing-hero { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(40px, 5vw, 70px); }
.pricing-hero__crumb { font-size: 13px; color: var(--mute); margin-bottom: 32px; letter-spacing: 0.04em; }
.pricing-hero__head {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  padding-bottom: clamp(36px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}
.pricing-hero__title { max-width: 14ch; }
.pricing-hero__title em { color: var(--oxblood); font-style: italic; }
.pricing-hero__intro { color: var(--ink-soft); padding-bottom: 6px; max-width: 50ch; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.7; }
.pricing-hero__note {
  display: flex; align-items: baseline; gap: 14px;
  margin-top: clamp(28px, 3.5vw, 48px);
  padding-top: 0;
  font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.2vw, 18px);
  color: var(--ink-soft);
  max-width: 70ch;
}
.pricing-hero__note::before {
  content: '';
  flex: 0 0 28px;
  height: 1px;
  background: var(--oxblood);
  transform: translateY(-6px);
}
@media (max-width: 820px) {
  .pricing-hero__head { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- Pricing Tiers (editorial slabs) ---------- */
.pricing-tiers {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pricing-tier {
  padding: clamp(40px, 5vw, 72px) 0;
  border-top: 1px solid var(--line-soft);
}
.pricing-tier:first-child { border-top: 0; }

.pricing-tier__top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.pricing-tier__num {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--oxblood);
  padding-bottom: 12px;
}
.pricing-tier__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.02; letter-spacing: -0.025em;
  color: var(--charcoal);
  margin-bottom: 10px;
}
.pricing-tier__name em { color: var(--oxblood); font-style: italic; }
.pricing-tier__tag {
  font-family: var(--serif); font-style: italic;
  font-size: 14px;
  color: var(--oxblood);
  margin-bottom: 12px;
  display: inline-flex; align-items: center; gap: 10px;
}
.pricing-tier__tag::before {
  content: ''; width: 18px; height: 1px; background: var(--oxblood);
}
.pricing-tier__lede {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.45;
  color: var(--ink);
  max-width: 36ch;
}
.pricing-tier__price {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 32px);
  color: var(--oxblood);
  letter-spacing: -0.01em;
  white-space: nowrap;
  padding-bottom: 8px;
}
.pricing-tier__price small {
  display: block;
  font-family: var(--sans); font-style: normal;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 4px;
}

.pricing-tier__body {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(28px, 4vw, 80px);
  align-items: start;
}
.pricing-tier__left h6,
.pricing-tier__right h6 {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 14px;
}
.pricing-tier__best-for {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.65;
  max-width: 38ch;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.pricing-tier__outcome {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
  color: var(--charcoal);
  max-width: 36ch;
  margin-bottom: 28px;
  padding-left: 16px;
  border-left: 1px solid var(--oxblood);
}
.pricing-tier__includes {
  display: flex; flex-direction: column;
}
.pricing-tier__includes li {
  font-family: var(--serif);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.5;
  color: var(--ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.pricing-tier__includes li:first-child { padding-top: 0; }
.pricing-tier__includes li:last-child { border-bottom: 0; }

.pricing-tier__cta { margin-top: 6px; }

/* Subtle highlight for the recommended tier — no boxes, just a soft warm panel */
.pricing-tier--featured {
  background: var(--cream-warm);
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 880px) {
  .pricing-tier__top {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num   price"
      "name  name";
    align-items: start;
    gap: 18px 24px;
  }
  .pricing-tier__num   { grid-area: num; padding-bottom: 0; }
  .pricing-tier__price { grid-area: price; justify-self: end; padding-bottom: 0; text-align: right; }
  .pricing-tier__head  { grid-area: name; }
  .pricing-tier__body { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Add-Ons ---------- */
.addons { padding-top: clamp(60px, 7vw, 100px); padding-bottom: clamp(60px, 7vw, 100px); }
.addons__head {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(28px, 4vw, 80px);
  align-items: end;
  padding-bottom: clamp(28px, 3.5vw, 44px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(28px, 3vw, 44px);
}
.addons__title { max-width: 14ch; }
.addons__sub { color: var(--ink-soft); font-size: 15px; line-height: 1.7; max-width: 50ch; padding-bottom: 6px; }
.addons__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(40px, 5vw, 80px);
}
.addons__item {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--serif);
}
.addons__item-name { font-size: clamp(16px, 1.2vw, 19px); color: var(--charcoal); }
.addons__item-price { font-style: italic; color: var(--oxblood); font-size: clamp(15px, 1.1vw, 17px); white-space: nowrap; }
.addons__note {
  margin-top: clamp(28px, 3vw, 44px);
  font-family: var(--serif); font-style: italic;
  color: var(--ink-soft);
  max-width: 60ch;
  font-size: 15px;
}
@media (max-width: 760px) {
  .addons__head { grid-template-columns: 1fr; align-items: start; }
  .addons__sub { padding-bottom: 0; }
  .addons__list { grid-template-columns: 1fr; }
}

/* ---------- Pricing Process (uses .process pattern with 5 cols) ---------- */
.pricing-process { padding-top: 0; padding-bottom: clamp(60px, 7vw, 100px); }

/* ---------- FAQ ---------- */
.faq { padding-top: clamp(60px, 7vw, 100px); padding-bottom: clamp(60px, 7vw, 100px); border-top: 1px solid var(--line); }
.faq__head {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(28px, 4vw, 80px);
  align-items: end;
  padding-bottom: clamp(28px, 3.5vw, 44px);
  margin-bottom: 0;
}
.faq__title { max-width: 16ch; }
.faq__sub { color: var(--ink-soft); font-size: 15px; line-height: 1.7; max-width: 50ch; padding-bottom: 6px; }

.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line-soft); }
.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 2.4vw, 30px) 0;
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.4;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  transition: color 0.25s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--oxblood); }
.faq__q-mark {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  position: relative;
  color: var(--oxblood);
  transition: transform 0.35s var(--ease);
}
.faq__q-mark::before,
.faq__q-mark::after {
  content: ''; position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 1px;
  background: currentColor;
  transform-origin: center;
  transition: transform 0.35s var(--ease);
}
.faq__q-mark::before { transform: translate(-50%, -50%); }
.faq__q-mark::after  { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__q-mark::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__a {
  padding: 0 clamp(0px, 4vw, 60px) clamp(20px, 2.4vw, 30px) 0;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.75;
  max-width: 70ch;
}
.faq__item[open] .faq__a { animation: faqIn 0.35s var(--ease) both; }
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .faq__head { grid-template-columns: 1fr; align-items: start; }
  .faq__sub { padding-bottom: 0; }
}

/* ---------- Print / fallback ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}