/* MAISON LUMIÈRE Page-specific styles */

/* ============================
  HEADER / NAV
  ============================ */
.header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 9990;
 height: 88px;
 display: flex;
 align-items: center;
 transition: background var(--dur-fast) var(--ease-soft),
       border-color var(--dur-fast) var(--ease-soft),
       transform var(--dur-fast) var(--ease-soft);
 border-bottom: 1px solid transparent;
}

.header.is-scrolled {
 background: rgba(248,242,236,0.72);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 border-bottom-color: var(--line);
}

.header.is-hidden {
 transform: translateY(-100%);
}

.header__inner {
 width: 100%;
 max-width: var(--maxw);
 margin-inline: auto;
 padding-inline: var(--gutter);
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.header__wordmark {
 font-family: var(--font-display);
 font-size: 1.125rem;
 font-weight: 400;
 letter-spacing: 0.12em;
 color: var(--ink);
 transition: opacity var(--dur-fast) var(--ease-soft);
}

.header__wordmark svg {
 height: 32px;
 width: auto;
}

.header__monogram {
 display: none;
}

.header__nav {
 display: none;
 align-items: center;
 gap: var(--space-8);
}

.header__nav a {
 font-size: var(--fs-small);
 font-weight: 500;
 color: var(--ink-soft);
 letter-spacing: 0.02em;
 position: relative;
 transition: color var(--dur-fast) var(--ease-soft);
}

.header__nav a::after {
 content: "";
 position: absolute;
 bottom: -4px;
 left: 0;
 width: 100%;
 height: 1px;
 background: var(--rose-clay);
 transform: scaleX(0);
 transform-origin: left;
 transition: transform var(--dur-fast) var(--ease-soft);
}

.header__nav a:hover,
.header__nav a.is-active {
 color: var(--ink);
}

.header__nav a:hover::after,
.header__nav a.is-active::after {
 transform: scaleX(1);
}

.header__cta {
 display: none;
}

.header__menu-btn {
 width: 44px;
 height: 44px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 6px;
 color: var(--ink);
}

.header__menu-btn span {
 display: block;
 width: 24px;
 height: 1.5px;
 background: currentColor;
 border-radius: 1px;
 transition: transform var(--dur-fast) var(--ease-soft),
       opacity var(--dur-fast) var(--ease-soft);
}

.header__menu-btn.is-open span:first-child {
 transform: translateY(3.75px) rotate(45deg);
}

.header__menu-btn.is-open span:last-child {
 transform: translateY(-3.75px) rotate(-45deg);
}

@media (min-width: 1024px) {
 .header__nav,
 .header__cta {
  display: flex;
 }
 .header__menu-btn {
  display: none;
 }
}

@media (max-width: 1023px) {
 .header.is-scrolled .header__wordmark {
  display: none;
 }
 .header.is-scrolled .header__monogram {
  display: block;
 }
}

/* Light nav text over dark hero (top of page only) */
.header--over-dark:not(.is-scrolled) .header__wordmark {
 color: var(--ivory);
}
.header--over-dark:not(.is-scrolled) .header__nav a {
 color: rgba(255, 252, 248, 0.75);
}
.header--over-dark:not(.is-scrolled) .header__nav a:hover,
.header--over-dark:not(.is-scrolled) .header__nav a.is-active {
 color: var(--ivory);
}
.header--over-dark:not(.is-scrolled) .header__nav a::after {
 background: var(--ivory);
}
.header--over-dark:not(.is-scrolled) .header__menu-btn {
 color: var(--ivory);
}

/* Mobile: hide header bar, keep floating hamburger */
@media (max-width: 767px) {
 .header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  pointer-events: none;
  height: 0;
 }

 .header__inner {
  padding: 0;
  display: block;
 }

 .header__wordmark,
 .header__monogram,
 .header__nav,
 .header__cta {
  display: none !important;
 }

 .header__menu-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9995;
  pointer-events: auto;
  background: rgba(43,35,32,0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: var(--ivory);
  border: 1px solid rgba(255,252,248,0.15);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
 }

 .header__menu-btn.is-open {
  background: rgba(43,35,32,0.45);
 }
}

/* Scroll progress */
.scroll-progress {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 background: var(--gold);
 transform-origin: left;
 transform: scaleX(0);
 z-index: 9991;
}

/* Mobile menu overlay */
.mobile-menu {
 position: fixed;
 inset: 0;
 z-index: 9980;
 background: var(--porcelain);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: var(--space-8);
 opacity: 0;
 visibility: hidden;
 transition: opacity var(--dur) var(--ease-soft),
       visibility var(--dur) var(--ease-soft);
}

.mobile-menu.is-open {
 opacity: 1;
 visibility: visible;
}

.mobile-menu a {
 font-family: var(--font-display);
 font-size: var(--fs-h2);
 color: var(--ink);
 transition: color var(--dur-fast) var(--ease-soft);
}

.mobile-menu a:hover {
 color: var(--rose-clay);
}

/* ============================
   HOME — HERO (Triptych)
   ============================ */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Triptych grid (desktop) */
.hero__triptych {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  z-index: 0;
}

.hero__panel {
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--gold);
}

.hero__panel:last-child {
  border-right: none;
}

.hero__panel-media {
  position: absolute;
  inset: 0;
}

.hero__panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-soft);
}

.hero__panel:hover .hero__panel-media img {
  transform: scale(1.04);
}

.hero__panel-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(43,35,32,0.38) 0%, rgba(43,35,32,0.05) 30%, rgba(43,35,32,0.08) 65%, rgba(43,35,32,0.45) 100%);
  z-index: 1;
  transition: background var(--dur-fast) var(--ease-soft);
}

.hero__panel:hover .hero__panel-scrim {
  background: linear-gradient(to bottom, rgba(43,35,32,0.45) 0%, rgba(43,35,32,0.08) 30%, rgba(43,35,32,0.12) 65%, rgba(43,35,32,0.55) 100%);
}

.hero__panel-label {
  position: absolute;
  top: calc(88px + var(--space-6));
  left: var(--space-6);
  right: var(--space-6);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hero__panel-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ivory);
  text-shadow: 0 1px 3px rgba(43,35,32,0.80), 0 2px 10px rgba(43,35,32,0.55);
}

.hero__panel-chip::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.hero__panel-link {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ivory);
  opacity: 0;
  transform: translateY(8px);
  transition: all var(--dur-fast) var(--ease-soft);
}

.hero__panel:hover .hero__panel-link {
  opacity: 1;
  transform: translateY(0);
}

/* Shared headline strip */
.hero__headline-strip {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(3rem, 8vh, 6rem);
  background: linear-gradient(to top, rgba(43,35,32,0.72) 0%, rgba(43,35,32,0.50) 30%, rgba(43,35,32,0.18) 60%, transparent 100%);
}

.hero__content {
  position: relative;
  color: var(--ivory);
  padding-top: var(--space-12);
}

.hero__eyebrow {
  color: var(--champagne);
  margin-bottom: var(--space-4);
}

.hero__eyebrow::before {
  background: var(--gold);
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 1.02;
  color: var(--ivory);
  max-width: 16ch;
  margin-bottom: var(--space-6);
}

.hero__sub {
  font-size: var(--fs-lead);
  color: rgba(255,252,248,0.82);
  max-width: 52ch;
  margin-bottom: var(--space-8);
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero__actions .btn--ghost {
  border-color: rgba(255,252,248,0.40);
  color: var(--ivory);
}

.hero__actions .btn--ghost:hover {
  background: rgba(255,252,248,0.10);
}

.hero__dots {
  display: none;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: background var(--dur-fast) var(--ease-soft);
}

.hero__dot.is-active {
  background: var(--rose-clay);
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  right: var(--gutter);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: rgba(255,252,248,0.55);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, currentColor, transparent);
  animation: scroll-drift 2s ease-in-out infinite;
}

@keyframes scroll-drift {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(8px); opacity: 1; }
}

/* Mobile carousel (≤900px) */
@media (max-width: 900px) {
  .hero {
    min-height: auto;
    height: 100svh;
  }

  .hero__triptych {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  .hero__triptych::-webkit-scrollbar {
    display: none;
  }

  .hero__panel {
    flex: 0 0 100vw;
    scroll-snap-align: start;
    border-right: none;
  }

  .hero__panel-label {
    top: calc(88px + var(--space-3));
    left: var(--space-4);
    right: var(--space-4);
  }

  .hero__panel-chip {
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
  }

  .hero__panel-link {
    opacity: 1;
    transform: none;
    font-size: 0.8125rem;
  }

  .hero__headline-strip {
    padding-bottom: calc(var(--space-8) + 28px);
    background: linear-gradient(to top, rgba(43,35,32,0.82) 0%, rgba(43,35,32,0.60) 35%, rgba(43,35,32,0.25) 60%, transparent 100%);
  }

  .hero__content {
    padding-top: var(--space-6);
  }

  .hero__eyebrow {
    margin-bottom: var(--space-3);
    font-size: 0.6875rem;
  }

  .hero__title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    line-height: 1.1;
    margin-bottom: var(--space-4);
  }

  .hero__sub {
    font-size: var(--fs-body);
    margin-bottom: var(--space-5);
    line-height: 1.55;
  }

  .hero__actions {
    gap: var(--space-3);
  }

  .hero__actions .btn {
    padding-inline: var(--space-6);
    min-height: 44px;
    font-size: var(--fs-small);
  }

  .hero__dots {
    display: flex;
    position: absolute;
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    z-index: 3;
    gap: var(--space-2);
  }

  .hero__scroll {
    display: none;
  }
}

.hero__media {
 position: absolute;
 inset: 0;
 z-index: 0;
}

.hero__media img,
.hero__media picture {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.hero__scrim {
 position: absolute;
 inset: 0;
 background: linear-gradient(to top, rgba(43,35,32,0.55) 0%, rgba(43,35,32,0.15) 50%, rgba(43,35,32,0.05) 100%);
 z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(3rem, 8vh, 6rem);
  color: var(--ivory);
}


.hero__eyebrow {
 color: var(--champagne);
 margin-bottom: var(--space-4);
}

.hero__eyebrow::before {
 background: var(--gold);
}

.hero__title {
 font-size: var(--fs-display);
 font-weight: 300;
 line-height: 1.02;
 color: var(--ivory);
 max-width: 16ch;
 margin-bottom: var(--space-6);
}

.hero__sub {
 font-size: var(--fs-lead);
 color: rgba(255,252,248,0.85);
 max-width: 52ch;
 margin-bottom: var(--space-8);
 line-height: 1.6;
}

.hero__actions {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-4);
}

.hero__actions .btn--ghost {
 border-color: rgba(255,252,248,0.5);
 color: var(--ivory);
}

.hero__actions .btn--ghost:hover {
 background: rgba(255,252,248,0.1);
}

.hero__scroll {
 position: absolute;
 bottom: var(--space-8);
 right: var(--gutter);
 z-index: 2;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: var(--space-3);
 color: rgba(255,252,248,0.6);
 font-size: 0.6875rem;
 letter-spacing: 0.15em;
 text-transform: uppercase;
}

.hero__scroll-line {
 width: 1px;
 height: 48px;
 background: linear-gradient(to bottom, currentColor, transparent);
 animation: scroll-drift 2s ease-in-out infinite;
}

@keyframes scroll-drift {
 0%, 100% { transform: translateY(0); opacity: 0.6; }
 50% { transform: translateY(8px); opacity: 1; }
}

@media (max-width: 767px) {
  .hero__title {
   font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .hero__sub {
   font-size: 0.9375rem;
  }
}

/* ============================
  HOME STATEMENT
  ============================ */
.statement {
 position: relative;
 text-align: center;
}

.statement__pull {
 font-family: var(--font-accent);
 font-style: italic;
 font-size: clamp(1.5rem, 3vw, 2.25rem);
 line-height: 1.45;
 color: var(--ink);
 max-width: 32ch;
 margin-inline: auto;
}

.statement__body {
 margin-top: var(--space-8);
 color: var(--ink-soft);
 max-width: 56ch;
 margin-inline: auto;
}

.statement__sig {
 margin-top: var(--space-8);
 display: flex;
 justify-content: center;
}

.statement__sig img,
.statement__sig svg {
 height: 48px;
 width: auto;
 opacity: 0.7;
}

.statement__decor {
 position: absolute;
 top: var(--space-8);
 right: var(--gutter);
 width: clamp(120px, 18vw, 240px);
 opacity: 0.35;
 pointer-events: none;
}

/* ============================
  HOME SERVICES
  ============================ */
.services {
 position: relative;
}

.services__grid {
 display: flex;
 gap: var(--space-6);
}

@media (min-width: 1024px) {
 .services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
 }
}

.services__card {
 background: var(--ivory);
 border-radius: var(--r-lg);
 overflow: hidden;
 box-shadow: var(--shadow-sm);
 flex: 0 0 78vw;
 scroll-snap-align: center;
}

@media (min-width: 1024px) {
 .services__card {
  flex: none;
 }
}

.services__card-media {
 aspect-ratio: 3 / 4;
 overflow: hidden;
}

.services__card-media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: var(--arch);
 transition: transform var(--dur-slow) var(--ease-soft);
}

.services__card:hover .services__card-media img {
 transform: scale(1.05);
}

.services__card-body {
 padding: var(--space-6);
}

.services__card-title {
 font-size: var(--fs-h3);
 margin-bottom: var(--space-2);
}

.services__card-desc {
 font-size: var(--fs-small);
 color: var(--ink-soft);
 line-height: 1.6;
 margin-bottom: var(--space-4);
}

/* Mobile services carousel */
.services__scroll {
 display: flex;
 gap: var(--space-4);
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
 padding-inline: var(--gutter);
 margin-inline: calc(var(--gutter) * -1);
 padding-bottom: var(--space-4);
}

.services__scroll::-webkit-scrollbar {
 display: none;
}

@media (min-width: 1024px) {
 .services__scroll {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  overflow: visible;
  padding-inline: 0;
  margin-inline: 0;
 }
}

/* ============================
  HOME PORTFOLIO TEASER
  ============================ */
.portfolio-teaser {
 position: relative;
}

.portfolio-teaser__grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: var(--space-4);
}

@media (min-width: 768px) {
 .portfolio-teaser__grid {
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
 }
 .portfolio-teaser__item:nth-child(1) { grid-column: span 5; }
 .portfolio-teaser__item:nth-child(2) { grid-column: span 7; }
 .portfolio-teaser__item:nth-child(3) { grid-column: span 4; }
 .portfolio-teaser__item:nth-child(4) { grid-column: span 4; }
 .portfolio-teaser__item:nth-child(5) { grid-column: span 4; }
 .portfolio-teaser__item:nth-child(6) { grid-column: span 6; }
 .portfolio-teaser__item:nth-child(7) { grid-column: span 6; }
 .portfolio-teaser__item:nth-child(8) { grid-column: span 12; }
}

.portfolio-teaser__item {
 position: relative;
 border-radius: var(--r-md);
 overflow: hidden;
 cursor: pointer;
}

.portfolio-teaser__item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 aspect-ratio: 3 / 4;
 transition: transform var(--dur-slow) var(--ease-soft);
}

.portfolio-teaser__item:nth-child(2) img,
.portfolio-teaser__item:nth-child(5) img,
.portfolio-teaser__item:nth-child(7) img {
 aspect-ratio: 4 / 3;
}

.portfolio-teaser__item:hover img {
 transform: scale(1.05);
}

.portfolio-teaser__overlay {
 position: absolute;
 inset: 0;
 background: rgba(216,167,160,0);
 transition: background var(--dur-fast) var(--ease-soft);
 display: flex;
 align-items: flex-end;
 padding: var(--space-4);
}

.portfolio-teaser__item:hover .portfolio-teaser__overlay {
 background: rgba(216,167,160,0.18);
}

.portfolio-teaser__caption {
 color: var(--ivory);
 font-size: var(--fs-small);
 font-weight: 600;
 transform: translateY(8px);
 opacity: 0;
 transition: all var(--dur-fast) var(--ease-soft);
 text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.portfolio-teaser__item:hover .portfolio-teaser__caption {
 transform: translateY(0);
 opacity: 1;
}

.portfolio-teaser__more {
 margin-top: var(--space-12);
 text-align: center;
}

/* ============================
  HOME EXPERIENCE (PROCESS)
  ============================ */
.experience {
 position: relative;
}

.experience__grid {
 display: grid;
 gap: var(--space-12);
}

@media (min-width: 1024px) {
 .experience__grid {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
 }
}

.experience__media {
 position: relative;
 border-radius: var(--r-lg);
 overflow: hidden;
}

.experience__media img {
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
}

@media (min-width: 1024px) {
 .experience__media {
  position: sticky;
  top: 120px;
 }
}

.experience__steps {
 display: flex;
 flex-direction: column;
 gap: var(--space-12);
}

.experience__step {
 position: relative;
 padding-left: clamp(4rem, 10vw, 7rem);
}

.experience__step-num {
 position: absolute;
 left: 0;
 top: 0;
 font-family: var(--font-accent);
 font-size: clamp(2.5rem, 5vw, 4rem);
 line-height: 1;
 color: var(--nude-taupe);
}

.experience__step-title {
 font-size: var(--fs-h3);
 margin-bottom: var(--space-2);
}

.experience__step-desc {
 color: var(--ink-soft);
 line-height: 1.7;
}

/* ============================
  HOME PROMISE BAND
  ============================ */
.promise {
 position: relative;
 text-align: center;
 overflow: hidden;
}

.promise__grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: var(--space-8);
 max-width: 900px;
 margin-inline: auto;
}

@media (min-width: 768px) {
 .promise__grid {
  grid-template-columns: repeat(4, 1fr);
 }
}

.promise__item {
 position: relative;
}

.promise__num {
 font-family: var(--font-display);
 font-size: clamp(2.5rem, 6vw, 4.5rem);
 font-weight: 300;
 line-height: 1;
 color: var(--ink);
}

.promise__stroke {
 position: absolute;
 bottom: -8px;
 left: 50%;
 transform: translateX(-50%);
 width: 80px;
 opacity: 0.5;
}

.promise__label {
 margin-top: var(--space-4);
 font-size: var(--fs-small);
 color: var(--ink-soft);
 letter-spacing: 0.04em;
}

/* ============================
  HOME TESTIMONIALS
  ============================ */
.testimonials {
  position: relative;
  background: var(--shell);
}

.testimonial__quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.85rem, 3.5vw, 2.85rem);
  line-height: 1.4;
  color: var(--ink);
  max-width: 32ch;
  margin-inline: auto;
  text-align: center;
}

.testimonial__quote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(5rem, 10vw, 9rem);
  line-height: 0.75;
  color: var(--gold);
  opacity: 0.55;
  text-align: center;
  margin-bottom: var(--space-4);
}

.testimonial__client {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.testimonial__client::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto var(--space-4);
}

.testimonial__client .avatar {
  width: 80px;
  height: 80px;
}

.testimonial__name {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  color: var(--ink);
}

.testimonial__meta {
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.testimonial__slide {
  display: none;
  animation: fade-in var(--dur) var(--ease-soft) forwards;
}

.testimonial__slide.is-active {
  display: block;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.testimonial__nav {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

.testimonial__nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--nude-taupe);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  transition: all var(--dur-fast) var(--ease-soft);
}

.testimonial__nav button:hover {
  border-color: var(--rose-clay);
  color: var(--rose-clay);
}

/* ============================
  HOME PRESS
  ============================ */
.press {
 text-align: center;
}

.press__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rose-clay);
  margin-bottom: var(--space-8);
}

.press__label::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.press__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6) var(--space-10);
}

.press__logos span {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  color: var(--espresso);
  letter-spacing: 0.04em;
}

/* ============================
  HOME JOURNAL TEASER
  ============================ */
.journal.py-section {
  padding-bottom: 0;
  padding-block-end: 0;
}

.journal__grid {
 display: grid;
 gap: var(--space-6);
}

@media (min-width: 768px) {
 .journal__grid {
  grid-template-columns: repeat(3, 1fr);
 }
}

.journal__card {
 background: var(--ivory);
 border-radius: var(--r-lg);
 overflow: hidden;
 box-shadow: var(--shadow-sm);
 transition: transform var(--dur-fast) var(--ease-soft),
       box-shadow var(--dur-fast) var(--ease-soft);
}

.journal__card:hover {
 transform: translateY(-2px);
 box-shadow: var(--shadow-md);
}

.journal__card img {
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
}

.journal__card-body {
 padding: var(--space-6);
}

.journal__card-date {
 font-size: 0.8125rem;
 color: var(--ink-soft);
 margin-bottom: var(--space-2);
}

.journal__card-title {
 font-size: var(--fs-h3);
 line-height: 1.25;
}

/* ============================
  HOME CTA BAND
  ============================ */
.cta-band {
 position: relative;
 min-height: 60vh;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 overflow: hidden;
}

.cta-band__media {
 position: absolute;
 inset: 0;
 z-index: 0;
}

.cta-band__media img {
 position: absolute;
 width: 100%;
 height: 120%;
 top: -10%;
 left: 0;
 object-fit: cover;
}

@media (max-width: 767px) {
 .cta-band__media img {
  object-position: 85% 50%;
  width: 130%;
  left: auto;
  right: 0;
 }
}

.cta-band__scrim {
 position: absolute;
 inset: 0;
 background: rgba(43,35,32,0.45);
 z-index: 1;
}

.cta-band__content {
 position: relative;
 z-index: 2;
 color: var(--ivory);
}

.cta-band__title {
 font-size: var(--fs-h1);
 color: var(--ivory);
 margin-bottom: var(--space-4);
}

.cta-band__sub {
 font-size: var(--fs-lead);
 color: rgba(255,252,248,0.85);
 max-width: 48ch;
 margin-inline: auto;
 margin-bottom: var(--space-8);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.cta-band__actions .btn--ghost {
  border-color: rgba(255,252,248,0.5);
  color: var(--ivory);
}

.cta-band__actions .btn--ghost:hover {
  background: rgba(255,252,248,0.1);
}

/* ============================
  PORTFOLIO PAGE
  ============================ */
.portfolio-hero {
 position: relative;
 min-height: 50svh;
 display: flex;
 align-items: center;
 background: var(--champagne);
 overflow: hidden;
}

.portfolio-hero__decor {
 position: absolute;
 right: var(--gutter);
 top: 50%;
 transform: translateY(-50%);
 width: clamp(100px, 16vw, 200px);
 opacity: 0.25;
 pointer-events: none;
}

.portfolio-hero__content {
 position: relative;
 z-index: 1;
}

.portfolio-hero__title {
 font-size: var(--fs-h1);
 margin-bottom: var(--space-4);
}

.portfolio-hero__intro {
 font-size: var(--fs-lead);
 color: var(--ink-soft);
 max-width: 52ch;
}

/* Filter bar */
.filter-bar {
 position: sticky;
 top: 88px;
 z-index: 100;
 background: rgba(248,242,236,0.85);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 padding-block: var(--space-4);
 border-bottom: 1px solid var(--line);
}

.filter-bar__inner {
 display: flex;
 gap: var(--space-2);
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 padding-bottom: 2px;
}

.filter-bar__inner::-webkit-scrollbar {
 display: none;
}

@media (max-width: 767px) {
 .filter-bar {
  position: relative;
  top: auto;
 }
}

/* Masonry grid */
.masonry {
 columns: 2;
 column-gap: var(--space-4);
 padding-top: var(--space-8);
}

@media (min-width: 768px) {
 .masonry {
  columns: 3;
  column-gap: var(--space-6);
 }
}

@media (min-width: 1024px) {
 .masonry {
  columns: 4;
  column-gap: var(--space-6);
 }
}

.masonry__item {
 position: relative;
 border-radius: var(--r-md);
 overflow: hidden;
 cursor: pointer;
 break-inside: avoid;
 margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
 .masonry__item {
  margin-bottom: var(--space-6);
 }
}

.masonry__item img {
 width: 100%;
 height: auto;
 object-fit: cover;
 transition: transform var(--dur-slow) var(--ease-soft);
}

.masonry__item:hover img {
 transform: scale(1.05);
}

.masonry__item-overlay {
 position: absolute;
 inset: 0;
 background: rgba(216,167,160,0);
 transition: background var(--dur-fast) var(--ease-soft);
 display: flex;
 align-items: flex-end;
 padding: var(--space-4);
}

.masonry__item:hover .masonry__item-overlay {
 background: rgba(216,167,160,0.18);
}

.masonry__item-caption {
 color: var(--ivory);
 font-size: var(--fs-small);
 font-weight: 600;
 transform: translateY(8px);
 opacity: 0;
 transition: all var(--dur-fast) var(--ease-soft);
 text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.masonry__item:hover .masonry__item-caption {
 transform: translateY(0);
 opacity: 1;
}

/* ============================
  BOOKING PAGE
  ============================ */
.booking-page {
 display: grid;
 min-height: 100vh;
}

@media (min-width: 1024px) {
 .booking-page {
  grid-template-columns: 40% 60%;
 }
}

.booking__panel {
 position: relative;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 padding: var(--space-8);
 min-height: 40vh;
}

@media (min-width: 1024px) {
 .booking__panel {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: auto;
  padding: var(--space-12);
 }
}

.booking__panel-media {
 position: absolute;
 inset: 0;
 z-index: 0;
}

.booking__panel-media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: var(--arch);
}

@media (min-width: 1024px) {
 .booking__panel-media img {
  border-radius: 0;
 }
}

.booking__panel-scrim {
 position: absolute;
 inset: 0;
 background: linear-gradient(to top, rgba(43,35,32,0.65), rgba(43,35,32,0.1));
 z-index: 1;
}

@media (max-width: 767px) {
 .booking__panel-media img {
  object-position: 50% 85%;
 }

 .booking__panel-scrim {
  background: linear-gradient(to top, rgba(43,35,32,0.88) 0%, rgba(43,35,32,0.60) 45%, rgba(43,35,32,0.25) 100%);
 }

 .booking__panel-title {
  font-size: var(--fs-h3);
 }
}

.booking__panel-content {
 position: relative;
 z-index: 2;
 color: var(--ivory);
}

.booking__panel-title {
 font-family: var(--font-accent);
 font-style: italic;
 font-size: var(--fs-h2);
 line-height: 1.3;
 margin-bottom: var(--space-4);
 color: var(--ivory);
}

.booking__panel-meta {
 font-size: var(--fs-small);
 opacity: 0.85;
 line-height: 1.7;
}

.booking__panel-badge {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
 margin-top: var(--space-4);
 padding: var(--space-2) var(--space-4);
 background: rgba(255,252,248,0.15);
 backdrop-filter: blur(8px);
 border-radius: var(--r-pill);
 font-size: 0.8125rem;
 font-weight: 600;
}

.booking__form-area {
 padding: var(--space-8) var(--gutter);
 max-width: 720px;
}

@media (min-width: 1024px) {
  .booking__form-area {
   padding: calc(88px + var(--space-6)) var(--space-12) var(--space-16);
   margin-inline: auto;
   overflow-y: auto;
  }
}

/* Booking progress */
.booking__progress {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 margin-bottom: var(--space-12);
}

.booking__progress-step {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 0.8125rem;
 font-weight: 600;
 border: 1.5px solid var(--line);
 color: var(--ink-soft);
 background: var(--ivory);
 transition: all var(--dur-fast) var(--ease-soft);
}

.booking__progress-step.is-done {
 background: var(--rose-clay);
 border-color: var(--rose-clay);
 color: var(--ivory);
}

.booking__progress-step.is-active {
 border-color: var(--rose-clay);
 color: var(--rose-clay);
}

.booking__progress-line {
 flex: 1;
 height: 1px;
 background: var(--line);
 position: relative;
}

.booking__progress-line::after {
 content: "";
 position: absolute;
 inset: 0;
 background: var(--gold);
 transform: scaleX(0);
 transform-origin: left;
 transition: transform var(--dur) var(--ease-soft);
}

.booking__progress-line.is-done::after {
 transform: scaleX(1);
}

/* Booking steps */
.booking__step {
 display: none;
}

.booking__step.is-active {
 display: block;
}

.booking__step-title {
 font-size: var(--fs-h2);
 margin-bottom: var(--space-6);
}

.booking__chips {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-3);
 margin-bottom: var(--space-8);
}

.booking__chip {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
 padding: var(--space-3) var(--space-6);
 border: 1px solid var(--line);
 border-radius: var(--r-pill);
 font-size: var(--fs-body);
 font-weight: 500;
 color: var(--ink-soft);
 background: var(--ivory);
 cursor: pointer;
 transition: all var(--dur-fast) var(--ease-soft);
}

.booking__chip:hover {
 border-color: var(--nude-taupe);
}

.booking__chip.is-selected {
 background: var(--rose-clay);
 border-color: var(--rose-clay);
 color: var(--ivory);
}

@media (max-width: 767px) {
 .booking__chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
 }

 .booking__chip {
  justify-content: center;
  width: 100%;
 }
}

.booking__fields {
 display: grid;
 gap: var(--space-6);
 margin-bottom: var(--space-8);
 min-width: 0;
}

@media (min-width: 768px) {
 .booking__fields--2 {
  grid-template-columns: 1fr 1fr;
 }
}

@media (max-width: 767px) {
 .booking__fields input[type="date"],
 .booking__fields input[type="time"],
 .booking__fields input[type="number"] {
  min-width: 0;
  -webkit-appearance: none;
 }
}

.booking__actions {
 display: flex;
 justify-content: space-between;
 gap: var(--space-4);
}

/* Booking summary */
.booking__summary {
 background: var(--ivory);
 border: 1px solid var(--line);
 border-radius: var(--r-lg);
 padding: var(--space-8);
 margin-bottom: var(--space-8);
}

.booking__summary-row {
 display: flex;
 justify-content: space-between;
 padding-block: var(--space-3);
 border-bottom: 1px solid var(--line);
 font-size: var(--fs-small);
}

.booking__summary-row:last-child {
 border-bottom: none;
}

.booking__summary-label {
 color: var(--ink-soft);
}

.booking__summary-value {
 font-weight: 600;
 color: var(--ink);
 text-align: right;
}

/* Booking success */
.booking__success {
 display: none;
 text-align: center;
 padding-block: var(--space-16);
}

.booking__success.is-visible {
 display: block;
}

.booking__success-icon {
 width: 80px;
 height: 80px;
 margin-inline: auto;
 margin-bottom: var(--space-6);
}

.booking__success-icon svg {
 width: 100%;
 height: 100%;
}

.booking__success-title {
 font-size: var(--fs-h2);
 margin-bottom: var(--space-4);
}

.booking__success-body {
 color: var(--ink-soft);
 max-width: 48ch;
 margin-inline: auto;
 margin-bottom: var(--space-8);
}

/* Petal drift container */
.petal-drift {
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 100;
 overflow: hidden;
}

.petal-drift__petal {
 position: absolute;
 width: 24px;
 height: 24px;
 opacity: 0;
 background-size: contain;
 background-repeat: no-repeat;
}

/* ============================
  404 PAGE
  ============================ */
.error-page {
 min-height: 100svh;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 position: relative;
 overflow: hidden;
}

.error-page__watermark {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-family: var(--font-display);
 font-size: clamp(8rem, 25vw, 18rem);
 font-weight: 300;
 color: var(--shell);
 line-height: 1;
 pointer-events: none;
 user-select: none;
}

.error-page__content {
 position: relative;
 z-index: 1;
}

.error-page__monogram {
 margin-inline: auto;
 margin-bottom: var(--space-6);
 width: 48px;
 height: 48px;
 opacity: 0.5;
}

.error-page__title {
 font-family: var(--font-accent);
 font-style: italic;
 font-size: var(--fs-h2);
 margin-bottom: var(--space-4);
}

.error-page__sub {
 color: var(--ink-soft);
 margin-bottom: var(--space-8);
 max-width: 40ch;
 margin-inline: auto;
}

.error-page__actions {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: var(--space-4);
}

.error-page__decor {
 position: absolute;
 top: var(--space-8);
 right: var(--gutter);
 width: clamp(100px, 16vw, 200px);
 opacity: 0.2;
 pointer-events: none;
}

/* ============================
  MOBILE TAB BAR
  ============================ */
.tab-bar {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 9992;
 display: flex;
 justify-content: space-around;
 align-items: center;
 height: 64px;
 padding-bottom: env(safe-area-inset-bottom);
 background: rgba(248,242,236,0.82);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 border-top: 1px solid var(--line);
}

.tab-bar__item {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 2px;
 height: 100%;
 font-size: 0.625rem;
 font-weight: 600;
 letter-spacing: 0.04em;
 color: var(--ink-soft);
 transition: color var(--dur-fast) var(--ease-soft);
 position: relative;
}

.tab-bar__item.is-active {
 color: var(--rose-clay);
}

.tab-bar__item svg {
 width: 22px;
 height: 22px;
}

.tab-bar__highlight {
 position: absolute;
 bottom: 6px;
 left: 50%;
 transform: translateX(-50%);
 width: 4px;
 height: 4px;
 border-radius: 50%;
 background: var(--rose-clay);
 opacity: 0;
 transition: opacity var(--dur-fast) var(--ease-soft);
}

.tab-bar__item.is-active .tab-bar__highlight {
 opacity: 1;
}

@media (min-width: 769px) {
 .tab-bar {
  display: none;
 }
}

/* Adjust bottom padding for pages when tab bar is visible */
@media (max-width: 768px) {
 .footer {
  padding-bottom: calc(64px + var(--space-6));
 }
}