/* =========================================================================
   THE STYLED SUITE, Design System  ·  V2: MONOCHROME EDITORIAL
   -------------------------------------------------------------------------
   Sister build of the v1 warm-neutral palette. Pure B&W + cool greys,
   gallery-feel. The variable NAMES are kept identical to v1 so the same
   HTML structure works in both versions, only the VALUES differ.
   ========================================================================= */

:root {
  /* ---------- Palette: Monochrome (pure B&W + cool greys) ----------
     Variables keep their v1 names so the HTML is interchangeable.
     The "warm" semantics are gone; everything is cool-toned. */
  --color-cream:        #FFFFFF;   /* page background, pure white */
  --color-soft-white:   #F7F7F8;   /* cards, raised surfaces, barely-there cool grey */
  --color-champagne:    #E4E4E7;   /* dividers, hairlines, cool grey */
  --color-taupe:        #6B6B70;   /* secondary text, borders, neutral grey */
  --color-warm-black:   #000000;   /* primary text, logo, true black */
  --color-gold:         #000000;   /* VESTIGIAL: v2 has no gold. Kept = black so legacy .text-gold / var(--color-gold) usages stay safe; .text-gold is forced to inherit below. */
  --color-shadow:       rgba(0, 0, 0, 0.06);

  /* ---------- Typography ----------
     Display/headline font is Bodoni Moda (Google Fonts), the free, near-identical
     match to Linotype Didot, the high-contrast didone used on thelifestyledco.com.
     To upgrade to the EXACT Linotype Didot later: get an Adobe Fonts web kit for the
     domain, add its <link> to every page, and set the families below to "linotype-didot".
     Note: Bodoni Moda's weight axis starts at 400, so the 300 "light" tokens below
     render at 400 (its natural display weight). --font-script reuses --font-display;
     the "script accent" is italic Bodoni Moda, not a handwritten cursive. */
  --font-display: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
  --font-script:  "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --weight-display-light: 300;
  --weight-display-regular: 400;
  --weight-body-light: 300;
  --weight-body-regular: 400;
  --weight-body-medium: 500;

  --letter-spacing-wide: 0.22em;
  --letter-spacing-mid:  0.08em;

  /* ---------- Spacing scale (8pt baseline) ---------- */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;
  --space-2xl: 9rem;

  /* ---------- Layout ---------- */
  --max-width: 1440px;
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --section-y: clamp(4rem, 10vw, 9rem);

  /* ---------- Renderings ----------
     The renders are warm/saturated; the UI is cool monochrome. This subtle
     desaturation is applied wherever a render is displayed so the seven feel
     like one cool, restrained collection. Remove to show renders at full color. */
  --render-filter: saturate(0.82) contrast(1.03);
}

/* =========================================================================
   Reset + base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-weight: var(--weight-body-light);
  color: var(--color-warm-black);
  background: var(--color-cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--color-gold); }

/* =========================================================================
   Typography
   ========================================================================= */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: var(--weight-display-light);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h1, .h1 { font-size: clamp(2.75rem, 7vw, 6rem); }
h2, .h2 { font-size: clamp(2rem, 5vw, 4rem); }
h3, .h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }

/* Editorial italic accent, used inside headlines for emphasis words
   (e.g., "Designed spaces, _effortless living._"). Same serif as headlines,
   italicized and slightly tracked-in for the refined look used by
   andreawachs.com and laruecreativestudio.com. */
.script {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.05;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--weight-body-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-taupe);
}

p { font-size: 1rem; line-height: 1.75; max-width: 60ch; }
.lede { font-size: 1.125rem; line-height: 1.7; color: var(--color-warm-black); max-width: 56ch; }

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

.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }

.grid-2 { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }

@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
}

.divider {
  width: 60px; height: 1px;
  background: var(--color-taupe);
  margin: var(--space-md) 0;
}
.divider.center { margin-left: auto; margin-right: auto; }

/* =========================================================================
   Navigation
   ========================================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: var(--space-md) var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;
  transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}
.nav.scrolled {
  background: var(--color-cream);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  box-shadow: 0 1px 0 var(--color-champagne);
}

.nav__logo { display: flex; align-items: center; gap: 0.75rem; }
/* Banner logo is ~2:1 ratio (1774x887), taller than the previous square
   to keep "THE STYLED SUITE" wordmark legible at small sizes. */
.nav__logo img { height: 64px; width: auto; transition: height 0.4s ease; }
.nav.scrolled .nav__logo img { height: 48px; }

.nav__menu {
  display: none;
  gap: var(--space-md);
  list-style: none;
}
.nav__menu a {
  font-size: 0.8rem;
  text-transform: lowercase;
  letter-spacing: var(--letter-spacing-mid);
  font-weight: var(--weight-body-light);
  position: relative;
  padding-bottom: 2px;
}
.nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--color-warm-black);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.nav__menu a:hover::after, .nav__menu a.active::after { transform: scaleX(1); }

.nav__cta {
  display: none;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  border: 1px solid var(--color-warm-black);
  padding: 0.85rem 1.5rem;
  transition: background 0.3s ease, color 0.3s ease;
}
.nav__cta:hover { background: var(--color-warm-black); color: var(--color-cream); }

.nav__toggle {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 0.5rem;
}
.nav__toggle span { width: 24px; height: 1px; background: var(--color-warm-black); transition: transform 0.3s ease, opacity 0.3s ease; }

@media (min-width: 900px) {
  .nav__menu { display: flex; }
  .nav__cta { display: inline-block; }
  .nav__toggle { display: none; }
}

/* Mobile menu */
.nav__mobile {
  position: fixed; inset: 0; z-index: 90;
  background: var(--color-cream);
  padding: 7rem var(--gutter) var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-md);
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}
.nav__mobile.open { transform: translateY(0); }
.nav__mobile a {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: var(--weight-display-light);
  text-transform: lowercase;
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: var(--space-2xl) var(--gutter) var(--space-xl);
  position: relative;
}

.hero__inner { max-width: var(--max-width); margin: 0 auto; width: 100%; }

.hero__eyebrow { margin-bottom: var(--space-md); }

.hero__title {
  font-size: clamp(3rem, 9vw, 8rem);
  font-weight: var(--weight-display-light);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}
.hero__title .script {
  display: block;
  /* Italic serif accent at the same scale as the headline above it */
  font-size: 1em;
  color: var(--color-gold);
  margin-top: -0.05em;
  letter-spacing: -0.01em;
}

.hero__subtitle { max-width: 44ch; margin-bottom: var(--space-lg); color: var(--color-taupe); }

/* =========================================================================
   Marquee (scrolling tagline)
   ========================================================================= */
.marquee {
  overflow: hidden;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-champagne);
  border-bottom: 1px solid var(--color-champagne);
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex; gap: var(--space-lg);
  animation: marquee 40s linear infinite;
}
.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: var(--weight-display-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-warm-black);
  display: inline-flex; align-items: center; gap: var(--space-lg);
}
.marquee__item::after {
  content: "✦"; color: var(--color-gold); font-size: 0.8em;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-block;
  padding: 1rem 2.25rem;
  font-size: 0.75rem;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  border: 1px solid var(--color-warm-black);
  background: transparent;
  color: var(--color-warm-black);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.btn:hover { background: var(--color-warm-black); color: var(--color-cream); }
.btn--solid { background: var(--color-warm-black); color: var(--color-cream); }
.btn--solid:hover { background: transparent; color: var(--color-warm-black); }
.btn--gold { border-color: var(--color-gold); color: var(--color-gold); }
.btn--gold:hover { background: var(--color-gold); color: var(--color-cream); }

/* =========================================================================
   Cards / Image tiles
   ========================================================================= */
.tile {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4/5;
  background: var(--color-champagne);
}
.tile__image {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.tile:hover .tile__image { transform: scale(1.04); }
.tile__caption {
  position: absolute; left: var(--space-md); bottom: var(--space-md); right: var(--space-md);
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--weight-display-light);
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* Placeholder visual for tiles until real photography is added */
.tile--placeholder { background: linear-gradient(135deg, var(--color-champagne) 0%, var(--color-taupe) 100%); }
.tile--placeholder .tile__image {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-soft-white);
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 300;
  font-size: 2.25rem;
  letter-spacing: 0.01em;
}

/* =========================================================================
   Service cards (Packages)
   ========================================================================= */
.package {
  padding: var(--space-lg) var(--space-md);
  background: var(--color-soft-white);
  border: 1px solid var(--color-champagne);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
/* Cards are equal height (grid); push each button to the bottom so they all
   sit on the same horizontal line. align-self keeps the button auto-width
   and left-aligned instead of stretching full width. */
.package .btn {
  margin-top: auto;
  align-self: flex-start;
}
.package:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px var(--color-shadow);
}
.package__tier {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 300;
  font-size: 2rem;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
  line-height: 1;
  letter-spacing: 0.005em;
}
.package__name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--weight-display-light);
  margin-bottom: var(--space-sm);
}
.package__price {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-taupe);
  margin-bottom: var(--space-md);
}
.package__list { list-style: none; margin: var(--space-md) 0; }
.package__list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-champagne);
  font-size: 0.95rem;
}
.package__list li:last-child { border-bottom: none; }
.package--featured {
  background: var(--color-warm-black);
  color: var(--color-cream);
  border-color: var(--color-warm-black);
}
.package--featured .package__tier { color: var(--color-champagne); }
.package--featured .package__price { color: var(--color-champagne); }
.package--featured .package__list li { border-bottom-color: rgba(229, 213, 188, 0.2); }

/* =========================================================================
   Process steps
   ========================================================================= */
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-champagne);
  align-items: start;
}
.step__number {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: var(--weight-display-light);
  color: var(--color-gold);
  line-height: 1;
}
.step__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: var(--space-sm);
}

/* =========================================================================
   Testimonials
   ========================================================================= */
.testimonial {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-xl) 0;
}
.testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: var(--weight-display-light);
  font-style: italic;
  line-height: 1.3;
  margin-bottom: var(--space-md);
}
.testimonial__source {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-taupe);
}

/* =========================================================================
   Forms
   ========================================================================= */
.form { display: grid; gap: var(--space-md); max-width: 720px; }
.form__row { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .form__row { grid-template-columns: 1fr 1fr; }
}
.form__field { display: flex; flex-direction: column; gap: 0.5rem; }
.form__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-taupe);
}
.form__input, .form__textarea, .form__select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-taupe);
  padding: 0.75rem 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-warm-black);
  transition: border-color 0.3s ease;
}
.form__input:focus, .form__textarea:focus, .form__select:focus {
  outline: none;
  border-color: var(--color-warm-black);
}
.form__textarea { min-height: 140px; resize: vertical; }

/* =========================================================================
   Footer
   ========================================================================= */
.footer {
  background: var(--color-warm-black);
  color: var(--color-cream);
  padding: var(--space-xl) var(--gutter) var(--space-md);
  margin-top: var(--space-2xl);
}
.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer__mark {
  display: block;
  height: 80px;
  width: auto;
  margin-bottom: var(--space-md);
  /* monogram logo is dark-on-transparent; invert for the dark footer */
  filter: invert(1) brightness(1.1);
}
.footer__tagline {
  font-size: 0.95rem;
  max-width: 36ch;
  color: var(--color-champagne);
}
.footer__heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-champagne);
  margin-bottom: var(--space-md);
}
.footer__list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.footer__list a { font-size: 0.95rem; color: var(--color-cream); }
.footer__list a:hover { color: var(--color-gold); }

.footer__bottom {
  max-width: var(--max-width);
  margin: var(--space-xl) auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(229, 213, 188, 0.15);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm);
  font-size: 0.75rem;
  color: var(--color-champagne);
  letter-spacing: var(--letter-spacing-mid);
  text-transform: uppercase;
}

/* =========================================================================
   Page header (interior pages)
   ========================================================================= */
.page-header {
  padding: calc(var(--space-2xl) + 2rem) var(--gutter) var(--space-xl);
  text-align: center;
}
.page-header__eyebrow { margin-bottom: var(--space-md); }
.page-header__title {
  font-size: clamp(2.5rem, 7vw, 6rem);
  font-weight: var(--weight-display-light);
  letter-spacing: -0.01em;
}
.page-header__subtitle {
  margin: var(--space-md) auto 0;
  color: var(--color-taupe);
  max-width: 52ch;
}

/* =========================================================================
   Utilities
   ========================================================================= */
.text-center { text-align: center; }
/* Paragraphs (incl. .eyebrow) are block-level with a max-width, so inside a
   centered header they must get auto side-margins or their centered text sits
   off to the left of the true center. */
.text-center > p,
.text-center > .eyebrow { margin-left: auto; margin-right: auto; }
.text-gold { color: var(--color-gold); }
.text-taupe { color: var(--color-taupe); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.in-view { opacity: 1; transform: none; }

/* =========================================================================
   Print + Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   ===  V2 ADDITIONS  =======================================================
   Everything below is exclusive to the monochrome v2 variant.
   Structured as overrides so the v1 base above stays untouched.
   ========================================================================= */

/* ----- 1. Site banner (centered logo strip above the nav) -----
   Lives in normal document flow (not sticky). Big logo, hairline divider,
   scrolls away on its own. */
.site-banner {
  background: var(--color-cream);
  padding: 1.5rem var(--gutter) 1.25rem;
  text-align: center;
  border-bottom: 1px solid var(--color-champagne);
}
.site-banner__logo-link {
  display: inline-block;
  line-height: 0;
}
/* Banner shows the wordmark only (no SS monogram). Width matches the
   reference site (thelifestyledco): 320px desktop / 190px mobile. */
.site-banner__logo {
  width: 190px;
  max-width: 80%;
  height: auto;
  display: inline-block;
}
@media (min-width: 900px) {
  .site-banner { padding: 2rem var(--gutter) 1.5rem; }
  .site-banner__logo { width: 320px; }
}

/* ----- 2. Nav: convert from fixed-overlay (v1) to sticky-under-banner (v2)
   The banner scrolls away naturally; the nav sticks once user passes it. */
.nav {
  position: sticky;          /* override v1 .nav position: fixed */
  top: 0;
  left: auto;
  right: auto;
  padding: 1rem var(--gutter);
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-champagne);
  /* Three-column grid: mini-logo | centered menu | CTA */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
}
.nav.scrolled {
  padding: 1rem var(--gutter);
  box-shadow: 0 1px 0 var(--color-champagne);
}

/* Mini logo in the nav: invisible at top of page, fades in once the
   user scrolls past the banner. Always reserves layout space so the
   centered menu doesn't shift. */
.nav__logo {
  justify-self: start;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.nav__logo img {
  height: 46px;
  width: auto;
}
.nav.scrolled .nav__logo {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.nav.scrolled .nav__logo img { height: 46px; }

/* Menu sits dead-center */
.nav__menu { justify-self: center; }
.nav__menu a {
  font-size: 0.72rem;
  text-transform: uppercase;          /* uppercase reads more gallery in mono */
  letter-spacing: var(--letter-spacing-wide);
}

/* CTA pinned right */
.nav__cta {
  justify-self: end;
  font-size: 0.7rem;
  padding: 0.75rem 1.4rem;
}

.nav__toggle { justify-self: end; }

/* ----- 3. Hero & page-header: reduce top padding since header is in flow now */
.hero {
  min-height: 78vh;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.page-header {
  padding-top: var(--space-xl);
}

/* ----- 4. Italic accent, no more gold in v2.
   Use `color: inherit` so the italic matches its container, black on
   white sections, white on the dark warm-black sections. The italic itself
   is now the contrast (no color change), which is the whole point of mono. */
.script,
.text-gold {
  color: inherit !important;
}

/* Subtle visual cue that the italic IS the accent: track it a hair tighter
   and tilt to a slightly heavier weight so it reads emphatic at a glance */
.hero__title .script,
h1 .script, h2 .script, h3 .script {
  font-weight: 400;
}

/* ----- 5. Marquee, heavier divider rules read better in mono */
.marquee {
  border-top-color: var(--color-warm-black);
  border-bottom-color: var(--color-warm-black);
}
.marquee__item::after {
  content: "·";              /* interpunct separator (no em dash, per brand rule) */
  color: var(--color-warm-black);
}

/* ----- 6. Package featured tier, pure inversion, no warm undertone */
.package--featured {
  background: var(--color-warm-black);
  color: #FFFFFF;
}
.package--featured .package__tier,
.package--featured .package__price,
.package--featured p {
  color: #FFFFFF !important;
}
.package--featured .package__list li {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
/* Buttons on the dark featured card need a light outline to stay visible
   (the monochrome btn/btn--gold renders black, which vanishes on black). */
.package--featured .btn {
  border-color: #fff;
  color: #fff;
}
.package--featured .btn:hover {
  background: #fff;
  color: var(--color-warm-black);
}

/* ----- 7. Tile placeholders, neutral mono gradient */
.tile--placeholder {
  background: linear-gradient(135deg, #ECECEE 0%, #D4D4D8 100%);
}
.tile--placeholder .tile__image {
  color: var(--color-warm-black);
  opacity: 0.35;
}

/* ----- 8. Footer: invert to pure black on white (already dark in v1, keep) */
.footer {
  background: var(--color-warm-black);
  color: #FFFFFF;
}
.footer__tagline,
.footer__heading,
.footer__bottom { color: #C7C7CB; }
.footer__list a { color: #FFFFFF; }
.footer__list a:hover { color: #C7C7CB; }
.footer__bottom { border-top-color: rgba(255, 255, 255, 0.12); }

/* footer monogram logo (inverted via filter from black-on-transparent) */
.footer__mark { filter: invert(1); height: 80px; }

/* =========================================================================
   ===  STYLES SECTION  (added 2026-06-18)  ================================
   Powers: homepage clickable style directions (.style-direction), the
   Styles gallery on styles.html (.style-grid/.style-card), and the
   per-style detail page (.palette/.style-pager). Monochrome, consistent
   with the v2 system. Cards/hover are built to receive real renderings
   later (see js/styles-data.js -> a style's `images` array).
   ========================================================================= */

/* ----- Homepage clickable style directions (on the dark section) ----- */
.style-direction {
  display: block;
  color: inherit;
  padding: var(--space-md);
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: background 0.4s ease, transform 0.4s ease;
}
.style-direction:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-4px);
  color: inherit;
}
.style-direction__cta {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-champagne);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.style-direction:hover .style-direction__cta { opacity: 1; transform: none; }

/* Hover-reveal rendering on the homepage style cards.
   At rest the card is plain text (no box). On hover the rendering fades in as
   a full-card overlay with the style name pinned over a soft gradient. */
.style-direction__preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.style-direction:hover .style-direction__preview { opacity: 1; }
.style-direction__preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1.1s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.style-direction:hover .style-direction__preview img { transform: scale(1); }
.style-direction__preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 55%);
}
.style-direction__preview-label {
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 2;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
}

/* ----- Styles gallery (styles.html) ----- */
.style-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .style-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .style-grid { grid-template-columns: repeat(3, 1fr); } }

.style-card { display: block; color: inherit; }
.style-card:hover { color: inherit; }

.style-card__media {
  position: relative;
  aspect-ratio: 3/2;            /* landscape, suits the wide room renders */
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.style-card:hover .style-card__media { transform: scale(1.02); }
.style-card__media--placeholder {
  background: linear-gradient(135deg, #ECECEE 0%, #D4D4D8 100%);
}
.style-card__num {
  display: block;
  font-family: var(--font-script); font-style: italic; font-weight: 400;
  font-size: 1.5rem; line-height: 1;
  color: var(--color-taupe);
  margin-bottom: 0.35rem;
}
.style-card__soon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-script); font-style: italic;
  font-size: 1.5rem; color: var(--color-warm-black); opacity: 0.35;
  text-align: center; padding: 0 var(--space-md);
}
/* Hover scrim + label: previews the rendering once images are added */
.style-card__hover {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: var(--space-md);
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0) 55%);
  color: #fff;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--letter-spacing-wide);
  opacity: 0; transition: opacity 0.4s ease;
}
.style-card:hover .style-card__hover { opacity: 1; }

.style-card__body { padding-top: var(--space-md); }
.style-card__name { font-size: 1.6rem; }
.style-card__desc { color: var(--color-taupe); margin-top: 0.5rem; font-size: 0.95rem; }
.style-card__cta {
  display: inline-block; margin-top: var(--space-sm);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--letter-spacing-wide);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* ----- Detail page: hero render(s) ----- */
.style-renders { display: flex; flex-direction: column; gap: var(--space-md); }
.style-render {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 24px 48px var(--color-shadow);
}

/* ----- Detail page: palette chips + prev/next pager ----- */
.palette { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.palette__chip {
  border: 1px solid var(--color-taupe);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  letter-spacing: var(--letter-spacing-mid);
}
.style-pager {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm);
  border-top: 1px solid var(--color-champagne);
  padding-top: var(--space-md);
}
.style-pager__link {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--letter-spacing-wide);
  color: var(--color-taupe);
}
.style-pager__link:hover { color: var(--color-warm-black); }

/* =========================================================================
   ===  DIDONE HAIRLINE FIX  (added 2026-06-21)  ===========================
   Bodoni Moda is an optical font: its stroke contrast grows with size, so big
   headlines render with very thin, fragile hairlines. We pin a sturdier
   optical size (opsz) and a touch more weight on every Bodoni element so the
   thin strokes read solid while keeping the high-fashion didone character.
   Tuning knobs: lower opsz = sturdier/less contrast; raise wght = heavier.
   ========================================================================= */
h1, h2, h3, h4, .display,
.hero__title, .page-header__title,
.marquee__item, .step__number, .step__title,
.package__name, .package__tier,
.testimonial__quote, .script,
.style-card__name, .nav__mobile a {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 22, "wght" 500;
}

/* =========================================================================
   ===  RENDER TREATMENT + SPLIT HERO  (added 2026-06-23)  =================
   ========================================================================= */

/* Cool, consistent treatment wherever a render appears */
.style-card__media,
.style-direction__preview img,
.style-render,
.hero__media img {
  filter: var(--render-filter);
}

/* Split hero: headline/CTAs left, render right (stacks on mobile) */
.hero__inner--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-soft-white);
}
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; display: block; }
@media (min-width: 900px) {
  .hero__inner--split { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xl); }
  .hero__media { aspect-ratio: 4 / 5; }
}

/* Detail-page render: reserve 3:2 space to avoid layout shift as it loads */
.style-renders picture { display: block; }
.style-render { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/* =========================================================================
   ===  FAQ  (added 2026-06-23)  ===========================================
   ========================================================================= */
.faq { max-width: 760px; margin: 0 auto; }
.faq__item {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-champagne);
}
.faq__item:last-child { border-bottom: 1px solid var(--color-champagne); }
.faq__q { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; }
.faq__a { color: var(--color-taupe); margin-top: 0.5rem; }

/* =========================================================================
   ===  FOUNDING-LIST EMAIL CAPTURE  (added 2026-06-23)  ===================
   ========================================================================= */
.signup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  max-width: 520px;
  margin: var(--space-lg) auto 0;
  align-items: center;
  justify-content: center;
}
.signup .form__input { flex: 1 1 240px; text-align: left; }
.signup [data-list-status] { flex-basis: 100%; text-align: center; margin: 0.25rem 0 0; }

/* =========================================================================
   ===  SERVICE TIERS: responsive 4-up grid + subtitle  (added 2026-06-26)
   1 col default, 2 cols at ~640px, 4 cols at ~1024px. Gap matches the site.
   ========================================================================= */
.grid-4 {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Small all-caps tagline under the package name, styled like an eyebrow */
.package__subtitle {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: var(--weight-body-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-taupe);
  margin-bottom: var(--space-md);
}
.package--featured .package__subtitle { color: var(--color-champagne); }

/* Reserve up to 2 lines for the name and subtitle so they (and the price and
   list that follow) line up on the same horizontal plane across all cards,
   even when a name like "The Legacy Collection" wraps. */
.package__name { line-height: 1.15; min-height: 2.3em; }
.package__subtitle { line-height: 1.3; min-height: 2.6em; }

/* Services detail cards: subgrid so every band (name, subtitle, price,
   description, list, button) lines up across all four, no matter how long a
   description or list is. Spacing comes from the grid gap; the button keeps its
   natural width. (Only the .grid-4--rows grid opts in; the teaser is unaffected.) */
@media (min-width: 640px) {
  .grid-4--rows > .package {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
  }
  .grid-4--rows > .package > * { margin-top: 0; margin-bottom: 0; }
  .grid-4--rows > .package .btn { justify-self: start; align-self: start; }
}