/* 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;
  }
}




/* Photo slots keep a palette-tinted ground under the image, so a slot that is
   still loading (or has no photo) reads as a colour block rather than a blank
   rectangle. Set as background-color: the inline background-image the renderer
   writes overrides the image layer but not the colour. */
.heroEditorialImage,
.heroLuxeImage,
.heroPlayfulImage,
.heroPrecisionCard,
.offeringEditorialImage,
.offeringLuxeThumb,
.offeringPlayfulImage,
.offeringPrecisionThumb,
.galleryTile,
.galleryStripTile,
.aboutImage,
.aboutTeaserImage {
  background-color: color-mix(in srgb, var(--gen-accent) 22%, var(--bg-sunken));
  background-size: cover;
  background-position: center;
}

/* ===========================================================================
   Generated-site quality pass
   ---------------------------------------------------------------------------
   Appended deliberately: these are cross-cutting rules that lift all five
   themes at once, and later rules win, so each theme's own layout stays intact
   while its buttons, cards and contact block pick up one consistent treatment.
   =========================================================================== */

/* ---------- Buttons ----------
   The pattern people expect from a button they trust: a solid fill, a real
   press, and motion that acknowledges the click. Every one of these was static
   — no hover, no active state — which reads as a picture of a button. */
.ctaRow a,
.ctaRow button,
.ctaBannerBtn,
.genHeaderCta {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease,
    filter 0.15s ease;
}
.ctaRow a:hover,
.ctaRow button:hover,
.ctaBannerBtn:hover,
.genHeaderCta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--gen-accent) 70%, transparent);
  filter: saturate(1.06);
}
.ctaRow a:active,
.ctaRow button:active,
.ctaBannerBtn:active,
.genHeaderCta:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}
/* Keyboard users get the same affordance as the mouse, in the site's own
   accent rather than the browser's default blue ring. */
.ctaRow a:focus-visible,
.ctaBannerBtn:focus-visible,
.genHeaderCta:focus-visible {
  outline: 2px solid var(--gen-accent);
  outline-offset: 3px;
}

/* ---------- Cards ----------
   Lift, deepen, and push the photo in slightly. The image zoom is what makes a
   card feel alive rather than merely animated: the frame stays put and the
   content moves, so the grid never shifts. Requires overflow: hidden on the
   card, which each theme already sets. */
.offeringEditorialCard,
.offeringLifestyleCard,
.offeringPlayfulCard,
.offeringPrecisionRow,
.offeringLuxeRow,
.testimonialCard,
.galleryTile,
.galleryStripTile {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease,
    border-color 0.22s ease;
}
.offeringEditorialCard:hover,
.offeringLifestyleCard:hover,
.offeringPlayfulCard:hover,
.testimonialCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--gen-ink) 55%, transparent);
}
.offeringEditorialImage,
.offeringPlayfulImage,
.offeringPrecisionThumb,
.offeringLuxeThumb,
.galleryTile,
.galleryStripTile {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.offeringEditorialCard:hover .offeringEditorialImage,
.offeringPlayfulCard:hover .offeringPlayfulImage,
.offeringPrecisionRow:hover .offeringPrecisionThumb,
.offeringLuxeRow:hover .offeringLuxeThumb {
  transform: scale(1.05);
}
.galleryTile:hover,
.galleryStripTile:hover {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .ctaRow a,
  .ctaRow button,
  .ctaBannerBtn,
  .genHeaderCta,
  .offeringEditorialCard,
  .offeringLifestyleCard,
  .offeringPlayfulCard,
  .testimonialCard,
  .offeringEditorialImage,
  .offeringPlayfulImage,
  .galleryTile,
  .galleryStripTile {
    transition: none;
    transform: none;
  }
}

/* ---------- Contact ----------
   Was four label/value pairs in a flex row — the least designed part of the
   site, and the one a customer reaches when they've already decided. Now a
   card grid: an icon to scan by, the label above the value, and (on the
   published site) the whole card is a tel:/mailto: link. */
.contactRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.contactCard {
  display: grid;
  gap: 3px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease,
    box-shadow 0.2s ease;
}
a.contactCard:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--gen-accent) 55%, var(--line));
  box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--gen-ink) 60%, transparent);
}
.contactIcon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--gen-accent) 15%, transparent);
  color: var(--gen-ink);
}
.contactValue {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ---------- About ----------
   Body copy was running the full width of the column. A measure this long is
   the single most common reason a generated page reads as a wall of text. */
.siteAbout p,
.aboutTeaserBody {
  max-width: 68ch;
  line-height: 1.72;
}

/* ===========================================================================
   Rhythm, scale and grid density
   ---------------------------------------------------------------------------
   Three faults that showed up together on a full-page render: a four-item
   offerings section ran about three screens, the vertical gaps between sections
   were uniform so nothing read as more important than anything else, and the
   section headings were undersized for the whitespace around them. Appended so
   each theme's own layout survives — only the measurements change.
   =========================================================================== */

/* 1. The offerings grid stops sprawling.
      The featured card spanned the full width *and* kept a 21/9 image, so the
      first item alone was most of a screen before any content. It now spans
      two columns of a three-column grid and shares the same 16/10 crop as its
      neighbours — still clearly the hero item, without the scroll. */
.offeringsEditorial {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.offeringEditorialCard.offeringFeatured {
  grid-column: span 2;
}
.offeringEditorialCard.offeringFeatured .offeringEditorialImage,
.offeringEditorialImage {
  aspect-ratio: 16 / 10;
}
@media (max-width: 720px) {
  .offeringsEditorial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .offeringEditorialCard.offeringFeatured {
    grid-column: 1 / -1;
  }
}

/* Gallery tiles were free-height too, which is what made a four-photo gallery
   scroll like a slideshow. */
.galleryTile,
.galleryStripTile {
  aspect-ratio: 4 / 3;
}

/* 2. Section rhythm. Every band had the same padding, so a page read as one
      long column with colour changes. Bands that carry a tinted background get
      more air than bands sitting on the page ground, which is what makes a
      section feel like a section. */
.siteSection {
  padding: clamp(64px, 8cqw, 104px) clamp(24px, 6cqw, 80px);
}
.siteAbout,
.testimonialSection,
.gallerySection {
  padding-block: clamp(76px, 10cqw, 128px);
}
/* The band immediately before the closing CTA shouldn't butt against it. */
.ctaBanner {
  margin-top: clamp(8px, 2cqw, 24px);
}

/* 3. Heading scale. A 1.65rem heading above 100px of whitespace reads as a
      caption; the eye needs the jump to know a new section started. */
.sectionHeading {
  margin-bottom: clamp(28px, 4cqw, 46px);
}
.sectionHeading h2 {
  font-size: clamp(2rem, 4.6cqw, 3.1rem);
  letter-spacing: -0.025em;
  line-height: 1.06;
}
.sectionHeading p {
  margin-top: 12px;
  font-size: 1.06rem;
  max-width: 56ch;
  line-height: 1.6;
}