/* Base reset — the published site has no globals.css to inherit from. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; display: block; }
:root {
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
}

/* ---------- Generated preview ---------- */
.previewFrame {
  /* Default tokens mirror the "ivy" palette; the live palette's inline
     vars (set in SitePreview via PALETTE_VARS) override every one of
     these, so switching palettes restyles the entire generated site. */
  --bg: #f9f6ed;
  --bg-raised: #fffef8;
  --bg-sunken: #efe9d9;
  --text: #182018;
  --text-soft: #445043;
  --text-faint: #707b6c;
  --line: rgba(24, 32, 24, 0.12);
  --line-strong: rgba(24, 32, 24, 0.24);
  --gen-bg: #16382a;
  --gen-text: #f4f1e4;
  --gen-text-soft: #c8d5c2;
  --gen-accent: #d9a43e;
  --gen-accent-2: #7fb069;
  --gen-accent-ink: #251b03;
  --gen-ink: #16382a;

  border-radius: 18px;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--bg);
  /* Explicit color is load-bearing: without it, descendants that rely on
     inheritance get the *app's* text color (computed at body level), not
     the palette's — invisible text on the dark "midnight" palette. */
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: normal;
  /* The generated site must respond to the *canvas* width, not the browser
     viewport — in the device preview the canvas is 390px while the viewport
     is still ~1440px, so plain media queries would never fire and the
     mobile layout would render as desktop. */
  container-type: inline-size;
  container-name: site;
}
.previewFrameFullPage {
  border-radius: 0;
  border: none;
  box-shadow: none;
  min-height: 100%;
}


/* ---------- Shared hero text elements (positioned by each theme's wrapper) ---------- */
.siteName {
  font-family: var(--theme-font-display, var(--font-display));
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
}
.tagline {
  margin-top: 10px;
  font-family: var(--theme-font-display, var(--font-display));
  font-size: 1.15rem;
  font-weight: 500;
  max-width: 46ch;
}
.subheadline {
  margin-top: 8px;
  font-size: 0.95rem;
  max-width: 50ch;
}
.ctaRow {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ctaPrimary,
.ctaGhost {
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.ctaPrimary {
  background: var(--gen-accent);
  color: var(--gen-accent-ink);
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--gen-accent) 65%, transparent);
}
.ctaGhost {
  border: 1.5px solid color-mix(in srgb, var(--gen-text) 32%, transparent);
  color: var(--gen-text);
}

/* ---------- Hero: Editorial (magazine) ---------- */
.heroEditorial {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5cqw, 56px);
  align-items: center;
  padding: clamp(44px, 8cqw, 80px) clamp(24px, 6cqw, 64px);
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, color-mix(in srgb, var(--gen-accent) 9%, transparent), transparent 60%),
    var(--bg-raised);
  color: var(--text);
}
.heroEditorial.heroNoImage {
  grid-template-columns: 1fr;
}
.heroEditorial .heroEyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gen-ink);
  border-bottom: 2px solid var(--gen-accent);
  padding-bottom: 4px;
  margin-bottom: 16px;
}
.heroEditorial .siteName {
  font-size: clamp(2.1rem, 5.4cqw, 3.4rem);
  line-height: 1.04;
  color: var(--text);
}
.heroEditorial .tagline {
  color: var(--text);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2cqw, 1.4rem);
}
.heroEditorial .subheadline {
  color: var(--text-soft);
}
.heroEditorial .ctaGhost {
  border-color: var(--line-strong);
  color: var(--text);
}
.heroEditorialImageWrap {
  position: relative;
}
/* Offset accent frame behind the photo — the layered magazine look. */
.heroEditorialImageWrap::before {
  content: "";
  position: absolute;
  inset: 14px -12px -14px 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--gen-accent) 32%, transparent);
  transform: rotate(-2deg);
}
.heroEditorialImage {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  transform: rotate(2deg);
  box-shadow: 0 24px 50px -22px color-mix(in srgb, var(--gen-bg) 55%, transparent);
  filter: saturate(1.05) contrast(1.02);
}
@container site (max-width: 700px) {
  .heroEditorial {
    grid-template-columns: 1fr;
  }
}

/* ---------- Hero: Precision (SaaS) ---------- */
.heroPrecision {
  text-align: center;
  padding: clamp(52px, 9cqw, 92px) clamp(24px, 5cqw, 44px);
  /* Duotone wash: primary accent from one corner, secondary from the other. */
  background:
    radial-gradient(ellipse 70% 60% at 18% 0%, color-mix(in srgb, var(--gen-accent) 15%, transparent), transparent 62%),
    radial-gradient(ellipse 60% 55% at 85% 6%, color-mix(in srgb, var(--gen-accent-2, var(--gen-accent)) 13%, transparent), transparent 62%),
    var(--bg);
  color: var(--text);
}
.heroPrecision .heroEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gen-ink);
  background: color-mix(in srgb, var(--gen-accent) 16%, var(--bg-raised));
  border: 1px solid color-mix(in srgb, var(--gen-accent) 30%, var(--line));
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.heroPrecision .siteName {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 600;
  color: var(--text-soft);
}
.heroPrecision .tagline {
  margin: 8px auto 0;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 600;
  color: var(--text);
  max-width: 26ch;
  letter-spacing: -0.01em;
}
.heroPrecision .subheadline {
  margin: 14px auto 0;
  color: var(--text-soft);
  max-width: 44ch;
}
.heroPrecision .ctaRow {
  justify-content: center;
}
.heroPrecision .ctaGhost {
  border-color: var(--line-strong);
  color: var(--text);
}
.heroPrecisionCard {
  margin: 40px auto 0;
  width: min(520px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  border: 1px solid color-mix(in srgb, var(--gen-accent) 28%, var(--line));
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--bg-raised) 55%, transparent),
    0 28px 60px -26px color-mix(in srgb, var(--gen-bg) 55%, transparent);
  filter: saturate(1.05);
}

/* ---------- Hero: Lifestyle (full-bleed + glass) ---------- */
.heroLifestyle {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  padding: clamp(24px, 5cqw, 44px);
  background-color: var(--gen-bg);
  background-size: cover;
  background-position: center;
}
.heroLifestyle::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Palette-tinted cinematic wash instead of plain black. */
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--gen-bg) 82%, black) 0%,
    color-mix(in srgb, var(--gen-bg) 30%, transparent) 42%,
    transparent 68%
  );
}
.heroGlassCard {
  position: relative;
  z-index: 1;
  /* Dark frosted glass, not light — a light tint leaves white headline text
     washed out over bright photography. */
  background: color-mix(in srgb, black 46%, transparent);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid color-mix(in srgb, white 22%, transparent);
  border-radius: 22px;
  padding: clamp(20px, 3vw, 30px) clamp(24px, 4vw, 34px);
  max-width: 480px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.45);
}
.heroGlassCard .siteName,
.heroGlassCard .tagline,
.heroGlassCard .subheadline {
  color: #f6f4ef;
}
.heroGlassCard .subheadline {
  color: rgba(246, 244, 239, 0.82);
}
.heroGlassCard .ctaGhost {
  border-color: rgba(246, 244, 239, 0.4);
  color: #f6f4ef;
}

/* ---------- Hero: Noir (dark cinematic luxury) ---------- */
.heroLuxe {
  text-align: center;
  padding: clamp(56px, 10cqw, 104px) clamp(24px, 5cqw, 44px) clamp(44px, 7cqw, 72px);
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, color-mix(in srgb, var(--gen-accent) 14%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 40% at 8% 100%, color-mix(in srgb, var(--gen-accent-2, var(--gen-accent)) 8%, transparent), transparent 60%),
    color-mix(in srgb, black 58%, var(--gen-bg));
  color: var(--gen-text);
}
.heroLuxe .heroEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gen-accent);
  margin-bottom: 22px;
}
.heroLuxe .heroEyebrow::before,
.heroLuxe .heroEyebrow::after {
  content: "";
  width: 36px;
  height: 1px;
  background: color-mix(in srgb, var(--gen-accent) 55%, transparent);
}
.heroLuxe .siteName {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 600;
  color: var(--gen-text);
}
.heroLuxe .tagline {
  margin: 14px auto 0;
  font-style: italic;
  font-size: 1.25rem;
  color: color-mix(in srgb, var(--gen-text) 88%, transparent);
  max-width: 36ch;
}
.heroLuxe .subheadline {
  margin: 10px auto 0;
  color: color-mix(in srgb, var(--gen-text) 66%, transparent);
}
.heroLuxe .ctaRow {
  justify-content: center;
}
.heroLuxe .ctaGhost {
  border-color: color-mix(in srgb, var(--gen-text) 35%, transparent);
  color: var(--gen-text);
}
.heroLuxeImage {
  margin: 44px auto 0;
  max-width: 780px;
  aspect-ratio: 21 / 9;
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  border: 1px solid color-mix(in srgb, var(--gen-accent) 45%, transparent);
  border-radius: 4px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
  filter: saturate(0.92) contrast(1.05);
}

/* ---------- Hero: Pop (chunky, sticker energy) ---------- */
.heroPlayful {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: center;
  padding: clamp(40px, 7vw, 72px) clamp(28px, 5vw, 48px);
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--gen-accent) 26%, transparent), transparent 42%),
    radial-gradient(circle at 4% 92%, color-mix(in srgb, var(--gen-accent-2, var(--gen-accent)) 20%, transparent), transparent 38%),
    color-mix(in srgb, var(--gen-accent) 12%, var(--bg));
  color: var(--text);
}
.heroPlayful.heroNoImage {
  grid-template-columns: 1fr;
}
.heroPlayful .heroEyebrow {
  display: inline-block;
  background: var(--bg-raised);
  border: 2px solid var(--text);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 0.78rem;
  box-shadow: 3px 3px 0 var(--text);
  margin-bottom: 18px;
}
.heroPlayful .siteName {
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  line-height: 1.02;
  font-weight: 700;
}
.heroPlayful .tagline {
  font-size: 1.3rem;
  font-weight: 600;
}
.heroPlayful .subheadline {
  color: var(--text-soft);
}
.heroPlayful .ctaPrimary {
  border: 2px solid var(--text);
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 4px 4px 0 var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.heroPlayful .ctaPrimary:hover {
  transform: translate(-1px, -2px);
  box-shadow: 6px 7px 0 var(--text);
}
.heroPlayful .ctaGhost {
  border: 2px solid var(--text);
  border-radius: 14px;
  background: var(--bg-raised);
  color: var(--text);
  font-weight: 700;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--text) 25%, transparent);
}
.heroPlayfulImageWrap {
  position: relative;
}
.heroPlayfulImage {
  aspect-ratio: 4 / 3.4;
  border-radius: 26px;
  border: 3px solid var(--text);
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  transform: rotate(2.5deg);
  box-shadow: 10px 10px 0 var(--gen-accent);
  filter: saturate(1.12);
}
@container site (max-width: 700px) {
  .heroPlayful {
    grid-template-columns: 1fr;
  }
  .heroLuxeImage {
    aspect-ratio: 16 / 10;
  }
}

.siteSection {
  padding: clamp(56px, 9cqw, 96px) clamp(24px, 6cqw, 80px);
}
.siteAbout p {
  color: var(--text-soft);
  line-height: 1.7;
  font-size: 1.02rem;
  max-width: 62ch;
}

/* ---------- Real section headings ---------- */
.sectionHeading {
  margin-bottom: 38px;
}
.sectionHeading h2 {
  font-family: var(--theme-font-display, var(--font-display));
  font-size: clamp(1.65rem, 3.4cqw, 2.4rem);
  font-weight: 600;
  line-height: 1.12;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.015em;
}
.sectionHeading p {
  margin-top: 10px;
  color: var(--text-faint);
  font-size: 1rem;
}
.previewFrame[data-theme-layout="minimal"] .sectionHeading {
  text-align: center;
}
.previewFrame[data-theme-layout="minimal"] .sectionHeading p {
  margin-left: auto;
  margin-right: auto;
  max-width: 46ch;
}
.previewFrame[data-theme-layout="editorial"] .sectionHeading h2 {
  padding-bottom: 14px;
  border-bottom: 2px solid var(--gen-accent);
  display: inline-block;
}
.previewFrame[data-theme-layout="luxe"] .sectionHeading {
  text-align: center;
}
.previewFrame[data-theme-layout="luxe"] .sectionHeading h2 {
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.previewFrame[data-theme-layout="luxe"] .sectionHeading h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--gen-accent);
  margin: 14px auto 0;
}
.previewFrame[data-theme-layout="luxe"] .sectionHeading p {
  margin-left: auto;
  margin-right: auto;
  max-width: 46ch;
}
.previewFrame[data-theme-layout="playful"] .sectionHeading h2 {
  display: inline;
  font-weight: 700;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--gen-accent) 45%, transparent) 62%);
}

/* ---------- About section (full) ---------- */
.aboutLayout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(36px, 6cqw, 56px);
  align-items: center;
}
.aboutImage {
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
  box-shadow: 0 22px 48px -24px color-mix(in srgb, var(--gen-bg) 50%, transparent);
}
.previewFrame[data-theme-layout="playful"] .aboutImage {
  border: 3px solid var(--text);
  border-radius: 22px;
  box-shadow: 8px 8px 0 var(--gen-accent);
  transform: rotate(-1.5deg);
}
.previewFrame[data-theme-layout="luxe"] .aboutImage {
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--gen-accent) 40%, transparent);
  filter: saturate(0.92) contrast(1.04);
}

/* ---------- About teaser ---------- */
.aboutTeaser {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(36px, 6cqw, 56px);
  align-items: center;
  background: color-mix(in srgb, var(--gen-accent) 7%, var(--bg-sunken));
}
.aboutTeaserImage {
  aspect-ratio: 5 / 4;
  border-radius: 20px;
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 22px 48px -24px color-mix(in srgb, var(--gen-bg) 50%, transparent);
}
.previewFrame[data-theme-layout="playful"] .aboutTeaserImage {
  border: 3px solid var(--text);
  border-radius: 22px;
  box-shadow: 8px 8px 0 var(--gen-accent);
  transform: rotate(1.5deg);
}
.previewFrame[data-theme-layout="luxe"] .aboutTeaserImage {
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--gen-accent) 40%, transparent);
}
.aboutTeaserText {
  color: var(--text-soft);
  line-height: 1.7;
  max-width: 54ch;
}
.textLink {
  display: inline-block;
  margin-top: 20px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--gen-ink);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.textLink:hover {
  opacity: 0.7;
  transform: translateX(2px);
}

/* ---------- Gallery strip ---------- */
.galleryStrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.galleryStripTile {
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
  transition: transform 0.25s ease;
}
.galleryStripTile:hover {
  transform: scale(1.02);
}
.previewFrame[data-theme-layout="playful"] .galleryStripTile {
  border: 3px solid var(--text);
  border-radius: 18px;
}
.previewFrame[data-theme-layout="playful"] .galleryStripTile:nth-child(odd) {
  transform: rotate(-1.2deg);
}
.previewFrame[data-theme-layout="playful"] .galleryStripTile:nth-child(even) {
  transform: rotate(1.2deg);
}
.previewFrame[data-theme-layout="luxe"] .galleryStripTile {
  border-radius: 2px;
  filter: saturate(0.92) contrast(1.04);
}

.testimonialSection {
  background: var(--bg-sunken);
}
.previewFrame[data-theme-layout="minimal"] .testimonialSection {
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

@container site (max-width: 760px) {
  .aboutLayout,
  .aboutTeaser {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .siteSection {
    padding: 44px 24px;
  }
  .galleryStrip {
    grid-template-columns: 1fr;
  }
  .galleryGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Offerings: Editorial (asymmetric magazine grid) ---------- */
.offeringsEditorial {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.offeringEditorialCard.offeringFeatured {
  grid-column: 1 / -1;
}
.offeringEditorialCard.offeringFeatured .offeringEditorialImage {
  aspect-ratio: 21 / 9;
}
.offeringEditorialImage {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  margin-bottom: 16px;
  filter: saturate(1.05) contrast(1.02);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.offeringEditorialCard:hover .offeringEditorialImage {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--gen-bg) 55%, transparent);
}
.offeringEditorialHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.priceBadge {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gen-ink);
  white-space: nowrap;
  flex: none;
}
.offeringEditorialName {
  font-family: var(--theme-font-display, var(--font-display));
  font-weight: 600;
  font-size: 1.02rem;
}
.offeringEditorialDesc {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.55;
}
@container site (max-width: 640px) {
  .offeringsEditorial {
    grid-template-columns: 1fr;
  }
}

/* ---------- Offerings: Precision (list rows) ---------- */
.offeringsPrecision {
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 10px 20px;
  box-shadow: 0 20px 44px -30px color-mix(in srgb, var(--gen-bg) 50%, transparent);
}
.offeringPrecisionRow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 6px;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.offeringPrecisionRow:last-child {
  border-bottom: none;
}
.offeringPrecisionRow:hover {
  background: color-mix(in srgb, var(--gen-accent) 6%, transparent);
  padding-left: 12px;
}
.offeringPrecisionThumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  flex: none;
}
.offeringPrecisionBody {
  flex: 1;
  min-width: 0;
}
.offeringPrecisionName {
  font-weight: 600;
  font-size: 0.96rem;
}
.offeringPrecisionDesc {
  margin-top: 3px;
  font-size: 0.86rem;
  color: var(--text-soft);
}
.offeringPrecisionPrice {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
  flex: none;
}

/* ---------- Offerings: Lifestyle (staggered glass cards) ---------- */
.offeringsLifestyle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 18px;
}
.offeringLifestyleCard {
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-raised);
  box-shadow: 0 14px 34px -22px color-mix(in srgb, var(--gen-bg) 60%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.offeringLifestyleCard.offeringStagger {
  margin-top: 26px;
}
.offeringLifestyleCard:hover {
  transform: translateY(-5px) scale(1.012);
  box-shadow: 0 24px 48px -20px color-mix(in srgb, var(--gen-bg) 60%, transparent);
}
.offeringLifestyleImage {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 10px;
  filter: saturate(1.08) contrast(1.02);
}
.offeringLifestylePrice {
  /* Dark glass, not light — a light tint reads fine over dark photos but
     goes invisible over light/white product shots. Darkening the backdrop
     before blurring keeps white text legible regardless of the photo. */
  background: color-mix(in srgb, black 45%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: white;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: var(--font-mono);
}
.offeringLifestyleBody {
  padding: 16px 18px 18px;
}
.offeringLifestyleName {
  font-family: var(--theme-font-display, var(--font-display));
  font-weight: 600;
  font-size: 1rem;
}
.offeringLifestyleDesc {
  margin-top: 6px;
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.5;
}
@container site (max-width: 640px) {
  .offeringsLifestyle {
    grid-template-columns: 1fr;
  }
  .offeringLifestyleCard.offeringStagger {
    margin-top: 0;
  }
}

/* ---------- Offerings: Noir (numbered ledger rows) ---------- */
.offeringsLuxe {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  margin: 0 auto;
}
.offeringLuxeRow {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--gen-accent) 32%, var(--line));
  transition: background 0.15s ease;
}
.offeringLuxeRow:hover {
  background: color-mix(in srgb, var(--gen-accent) 6%, transparent);
}
.offeringLuxeRow:last-child {
  border-bottom: none;
}
.offeringLuxeNum {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--gen-accent);
  flex: none;
}
.offeringLuxeThumb {
  width: 64px;
  height: 64px;
  border-radius: 2px;
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  flex: none;
  filter: saturate(0.9) contrast(1.05);
}
.offeringLuxeBody {
  flex: 1;
  min-width: 0;
}
.offeringLuxeName {
  font-family: var(--theme-font-display, var(--font-display));
  font-size: 1.12rem;
  font-weight: 600;
}
.offeringLuxeDesc {
  margin-top: 4px;
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.55;
}
.offeringLuxePrice {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--gen-ink);
  flex: none;
}

/* ---------- Offerings: Pop (chunky sticker cards) ---------- */
.offeringsPlayful {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 20px;
}
.offeringPlayfulCard {
  background: var(--bg-raised);
  border: 2.5px solid var(--text);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--gen-accent) 75%, transparent);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}
.offeringPlayfulCard:nth-child(even) {
  transform: rotate(0.6deg);
}
.offeringPlayfulCard:nth-child(odd) {
  transform: rotate(-0.4deg);
}
.offeringPlayfulCard:hover {
  transform: translate(-2px, -4px) rotate(0deg);
  box-shadow: 10px 12px 0 color-mix(in srgb, var(--gen-accent) 75%, transparent);
}
.offeringPlayfulImage {
  aspect-ratio: 16 / 10;
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  border-bottom: 2.5px solid var(--text);
  filter: saturate(1.12);
}
.offeringPlayfulBody {
  padding: 14px 16px 18px;
}
.offeringPlayfulHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.offeringPlayfulName {
  font-family: var(--theme-font-display, var(--font-display));
  font-weight: 700;
  font-size: 1.05rem;
}
.offeringPlayfulPrice {
  background: var(--gen-accent);
  color: var(--gen-accent-ink);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}
.offeringPlayfulDesc {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.5;
}
@container site (max-width: 640px) {
  .offeringsPlayful {
    grid-template-columns: 1fr;
  }
}

.contactRow {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  font-size: 0.92rem;
}
.contactRow div {
  display: grid;
  gap: 3px;
}
.label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.resultActions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.secondaryBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease, color 0.15s ease;
}
.secondaryBtn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.secondaryBtn:active {
  transform: scale(0.96);
}

/* ---------- Gallery section ---------- */
.galleryGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.galleryTile {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  padding: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  filter: saturate(1.05) contrast(1.02);
}
.galleryTile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--gen-bg) 55%, transparent);
}
.galleryCaption {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--bg-raised) 72%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---------- CTA banner section ---------- */
.ctaBanner {
  padding: clamp(32px, 5cqw, 44px) clamp(28px, 6cqw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* A rich brand moment: deep block color sweeping toward its accent. */
  background: linear-gradient(
    100deg,
    var(--gen-bg) 0%,
    color-mix(in srgb, var(--gen-accent) 30%, var(--gen-bg)) 100%
  );
}
.ctaBanner span {
  font-family: var(--theme-font-display, var(--font-display));
  font-size: clamp(1.1rem, 2.4cqw, 1.4rem);
  font-weight: 600;
  color: var(--gen-text);
}
.ctaBannerBtn {
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--gen-accent);
  color: var(--gen-accent-ink);
  font-size: 0.9rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  box-shadow: 0 10px 26px -10px color-mix(in srgb, black 45%, transparent);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.ctaBannerBtn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.previewFrame[data-theme-layout="playful"] .ctaBannerBtn {
  border: 2px solid var(--text);
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--text);
}


/* ---------- Theme layout variants (gallery — hero/offerings are branched in JS) ---------- */
.previewFrame[data-theme-layout="bold"] .galleryGrid {
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.previewFrame[data-theme-layout="bold"] .galleryTile {
  border-radius: 2px;
  border: none;
}
.previewFrame[data-theme-layout="minimal"] .galleryGrid {
  grid-template-columns: repeat(2, 1fr);
}
.previewFrame[data-theme-layout="minimal"] .galleryTile {
  background-color: transparent;
  border: 1px solid var(--line);
}
.previewFrame[data-theme-layout="luxe"] .galleryGrid {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.previewFrame[data-theme-layout="luxe"] .galleryTile {
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--gen-accent) 35%, transparent);
  filter: saturate(0.92) contrast(1.04);
}
.previewFrame[data-theme-layout="playful"] .galleryGrid {
  gap: 16px;
}
.previewFrame[data-theme-layout="playful"] .galleryTile {
  border: 3px solid var(--text);
  border-radius: 18px;
}
.previewFrame[data-theme-layout="playful"] .galleryTile:nth-child(odd) {
  transform: rotate(-1deg);
}
.previewFrame[data-theme-layout="playful"] .galleryTile:nth-child(even) {
  transform: rotate(1deg);
}
.previewFrame[data-theme-layout="playful"] .galleryTile:hover {
  transform: translateY(-3px) rotate(0deg);
}

/* ---------- Testimonials section ---------- */
.testimonialGrid {
  display: grid;
  gap: 14px;
}
@container site (min-width: 640px) {
  .testimonialGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.testimonialCard {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  background: var(--bg-raised);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.testimonialCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -18px color-mix(in srgb, var(--gen-bg) 45%, transparent);
}
.testimonialQuote {
  font-family: var(--theme-font-display, var(--font-display));
  font-size: 1.02rem;
  font-style: italic;
  color: var(--text);
  line-height: 1.55;
}
.testimonialQuote::before {
  content: "“ ";
  color: var(--gen-accent);
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.28em;
  margin-right: 2px;
  font-style: normal;
}
.testimonialAuthor {
  display: block;
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
}

/* ---------- FAQ section ---------- */
.faqList {
  display: grid;
  gap: 10px;
}
.faqItem {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px;
  transition: border-color 0.15s ease;
}
.faqItem:hover {
  border-color: color-mix(in srgb, var(--gen-accent) 45%, var(--line));
}
.faqItem summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--text);
  list-style: none;
}
.faqItem summary::-webkit-details-marker {
  display: none;
}
.faqItem summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  color: var(--gen-ink);
  font-weight: 700;
}
.faqItem[open] summary::before {
  content: "\2212";
}
.faqItem p {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.55;
  padding-left: 1em;
}

.previewFrame[data-theme-layout="minimal"] .testimonialCard {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 16px 0;
}
.previewFrame[data-theme-layout="minimal"] .testimonialGrid {
  grid-template-columns: 1fr;
}
.previewFrame[data-theme-layout="bold"] .testimonialCard {
  border: none;
  border-radius: 4px;
  background: color-mix(in srgb, var(--gen-bg) 8%, var(--bg));
}
.previewFrame[data-theme-layout="luxe"] .testimonialCard {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--gen-accent) 30%, var(--line));
  border-radius: 2px;
}
.previewFrame[data-theme-layout="luxe"] .testimonialQuote::before {
  content: "“";
  display: block;
  font-size: 2rem;
  line-height: 0.6;
  color: var(--gen-accent);
  margin-bottom: 8px;
}
.previewFrame[data-theme-layout="playful"] .testimonialCard {
  border: 2.5px solid var(--text);
  border-radius: 18px;
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--gen-accent) 65%, transparent);
}
.previewFrame[data-theme-layout="playful"] .testimonialCard:hover {
  transform: translate(-1px, -3px);
  box-shadow: 7px 8px 0 color-mix(in srgb, var(--gen-accent) 65%, transparent);
}
.previewFrame[data-theme-layout="playful"] .faqItem {
  border: 2.5px solid var(--text);
  border-radius: 16px;
}
.previewFrame[data-theme-layout="luxe"] .faqItem {
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gen-accent) 30%, var(--line));
  border-radius: 0;
}
.previewFrame[data-theme-layout="luxe"] .genFooter {
  background: linear-gradient(180deg, color-mix(in srgb, black 58%, var(--gen-bg)) 0%, #0a0908 100%);
}


/* ---------- Generated site: header ---------- */
.genHeader {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 20px clamp(28px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
  /* Each section sits in a Reveal wrapper whose transform creates a
     stacking context, so a static header would be painted *under* the
     following section — the Editorial hero's rotated image then overlaps
     the nav and swallows its clicks. */
  position: relative;
  z-index: 5;
}
.genWordmark {
  font-family: var(--theme-font-display, var(--font-display));
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
/* Accent full-stop after the wordmark — a small, confident brand touch. */
.genWordmark::after {
  content: ".";
  color: var(--gen-accent);
}
.genNav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  flex-wrap: wrap;
}
.genNavLink {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: color 0.15s ease;
}
.genNavLink:hover {
  color: var(--text);
}
.genNavLinkActive {
  color: var(--text);
  font-weight: 600;
}
.genHeaderCta {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--gen-bg);
  color: var(--gen-text);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}
.genNav + .genHeaderCta {
  margin-left: 0;
}
.genHeader > .genWordmark + .genHeaderCta {
  margin-left: auto;
}
.previewFrame[data-theme-layout="minimal"] .genHeader {
  justify-content: center;
  background: var(--bg);
}
.previewFrame[data-theme-layout="bold"] .genHeaderCta {
  background: var(--gen-accent);
  color: var(--gen-accent-ink);
}
.previewFrame[data-theme-layout="luxe"] .genHeader {
  background: color-mix(in srgb, black 58%, var(--gen-bg));
  border-bottom: 1px solid color-mix(in srgb, var(--gen-accent) 35%, transparent);
}
.previewFrame[data-theme-layout="luxe"] .genWordmark,
.previewFrame[data-theme-layout="luxe"] .genNavLink {
  color: color-mix(in srgb, var(--gen-text) 80%, transparent);
}
.previewFrame[data-theme-layout="luxe"] .genWordmark,
.previewFrame[data-theme-layout="luxe"] .genNavLinkActive {
  color: var(--gen-text);
}
.previewFrame[data-theme-layout="luxe"] .genHeaderCta {
  background: transparent;
  border: 1px solid var(--gen-accent);
  color: var(--gen-accent);
  border-radius: 2px;
}
.previewFrame[data-theme-layout="playful"] .genHeader {
  border-bottom: 2.5px solid var(--text);
}
.previewFrame[data-theme-layout="playful"] .genHeaderCta {
  background: var(--gen-accent);
  color: var(--gen-accent-ink);
  border: 2px solid var(--text);
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--text);
}

/* ---------- Generated site: footer ---------- */
.genFooter {
  padding: 60px clamp(24px, 6cqw, 80px) 28px;
  background: linear-gradient(180deg, var(--gen-bg) 0%, color-mix(in srgb, black 24%, var(--gen-bg)) 100%);
  border-top: 3px solid var(--gen-accent);
  color: var(--gen-text);
}
.genFooterTop {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid color-mix(in srgb, var(--gen-text) 18%, transparent);
}
.genFooterName {
  font-family: var(--theme-font-display, var(--font-display));
  font-size: 1.2rem;
  font-weight: 600;
}
.genFooterBlurb {
  margin-top: 10px;
  color: var(--gen-text-soft);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 40ch;
}
.genFooterCol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.genFooterColTitle {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gen-accent);
  font-weight: 600;
  margin-bottom: 2px;
}
.genFooterLink {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--gen-text-soft);
  cursor: pointer;
  transition: color 0.15s ease;
}
.genFooterLink:hover {
  color: var(--gen-text);
}
.genFooterItem {
  font-size: 0.9rem;
  color: var(--gen-text-soft);
}
.genFooterBottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding-top: 22px;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--gen-text) 62%, transparent);
}
.genFooterCredit {
  color: var(--gen-accent);
  font-weight: 600;
}
@container site (max-width: 760px) {
  .genFooterTop {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Stack the header rather than letting it wrap. A wordmark + 5 nav links +
   CTA already overflows a 834px tablet (dropping "Contact" onto its own
   line), and at 390px wrapping puts every link on a separate row and the
   header swallows the screen. Breakpoint is deliberately wider than the
   other layout rules for that reason. */
@container site (max-width: 900px) {
  .genHeader {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
  }
  .genNav {
    margin-left: 0;
    gap: 18px;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    justify-content: center;
  }
  .genNavLink {
    font-size: 0.85rem;
    white-space: nowrap;
  }
  .genHeader > .genWordmark + .genHeaderCta {
    margin-left: 0;
  }
}
@container site (max-width: 470px) {
  /* Below phone width the CTA can't sit alongside a scrolling nav without
     crowding it — the hero CTAs carry the action instead. */
  .genHeaderCta {
    display: none;
  }
}