@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #f6efdf;
  --paper-deep: #e9e2d4;
  --cream: #fbf4e3;
  --line: #ede3cf;
  --ink: #2a2016;
  --muted: #6e5c44;
  --muted-strong: #544532;
  --rust: #b14a2a;
  --rust-dark: #9a4525;
  --gold: #d9982e;
  --green: #16211b;
  --nav: #1c1710;
  --sage: #a9bba6;
  --sage-light: #cbd9c4;
  --teal: #2c7a78;
  --max: 1140px;
  --sidebar-width: 220px;
  --focus: 0 0 0 3px var(--cream), 0 0 0 6px var(--ink);
  --shadow: 0 18px 40px rgba(42, 32, 22, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
  height: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  height: 100%;
  color: var(--ink);
  background: var(--cream);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--paper);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 12%, rgba(217, 152, 46, 0.08), transparent 26rem),
    radial-gradient(circle at 85% 18%, rgba(63, 107, 74, 0.07), transparent 30rem);
  opacity: 0.9;
}

a {
  color: inherit;
}

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

button,
input,
textarea {
  font: inherit;
}

/* Desktop default: left vertical header + content column */
.picker-page {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100%;
  height: 100%;
  align-items: stretch;
  overflow: hidden;
}

/* Review and confirm need normal page scroll so long content stays reachable. */
.picker-page.is-flow-scroll {
  height: auto;
  min-height: 100%;
  overflow: visible;
}

.picker-page.is-flow-scroll .page-main,
.picker-page.is-flow-scroll .page-main > main,
.picker-page.is-flow-scroll .picker-shell,
.picker-page.is-flow-scroll .picker-shell > [data-stage],
.picker-page.is-flow-scroll .step-panel {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.picker-page.is-flow-scroll .picker-shell,
.picker-page.is-flow-scroll .picker-shell > [data-stage],
.picker-page.is-flow-scroll .step-panel {
  flex: 0 0 auto;
}

.picker-page.is-flow-scroll .step-panel {
  overflow: visible;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 100vh;
  background: rgba(28, 23, 16, 0.98);
  color: #fff;
  box-shadow: 2px 0 0 rgba(255, 255, 255, 0.05);
}

.nav-wrap {
  width: 100%;
  height: 100%;
  margin: 0;
  min-height: 0;
  padding: 22px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

.nav-top {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.brand-link img {
  height: 64px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  color: #fff;
  background: rgba(255, 247, 238, 0.06);
  border: 1px solid rgba(255, 247, 238, 0.42);
  border-radius: 10px;
  cursor: pointer;
}

.nav-toggle span {
  width: 19px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
  min-height: 0;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255, 247, 238, 0.92);
}

.nav-links a {
  display: block;
  text-decoration: none;
  white-space: normal;
  padding: 11px 12px;
  border-radius: 10px;
  line-height: 1.25;
  transition: color 180ms ease, background 180ms ease;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--gold);
  background: rgba(255, 247, 238, 0.06);
}

.nav-actions {
  margin-top: auto;
  display: grid;
  gap: 10px;
  padding-top: 18px;
}

.nav-cta {
  padding: 12px 14px;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, var(--rust-dark) 0%, var(--rust) 100%);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(177, 74, 42, 0.28);
}

.nav-billing {
  padding: 11px 14px;
  color: #fff;
  text-align: center;
  border: 1px solid rgba(255, 247, 238, 0.42);
  border-radius: 10px;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  color: #fff8e9;
}

.page-main {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-main > main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.picker-hero {
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(42, 32, 22, 0.08);
  background: linear-gradient(180deg, rgba(251, 244, 227, 0.4), rgba(251, 244, 227, 0.95));
}

.picker-hero-inner {
  width: min(1400px, calc(100% - 28px));
  margin: 0 auto;
  padding: 10px 0 6px;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--rust);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.picker-hero h1 {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.7px;
  color: var(--ink);
}

.picker-hero p {
  max-width: 640px;
  margin: 6px auto 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.picker-shell {
  width: min(1400px, calc(100% - 24px));
  margin: 0 auto;
  padding: 6px 0 16px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.picker-shell > [data-stage] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex: 0 0 auto;
}

.progress-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.progress-track {
  flex: 1;
  height: 6px;
  overflow: hidden;
  background: rgba(42, 32, 22, 0.08);
  border-radius: 999px;
}

.progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--rust), var(--gold));
  border-radius: inherit;
  transition: width 220ms ease;
}

.step-panel {
  padding: 12px 14px 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(237, 227, 207, 0.95);
  border-radius: 16px;
  box-shadow: var(--shadow);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.step-panel[hidden] {
  display: none !important;
}

/* Fixed chrome: head and foot never move; body fills the middle. */
.step-head {
  flex: 0 0 auto;
  min-height: 58px;
}

.step-panel h2,
.step-head h2 {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ink);
  scroll-margin-top: 16px;
}

.step-help {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  min-height: 1.35em;
  max-height: 1.35em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.step-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  overflow: hidden;
}

.step-body-free {
  overflow: auto;
}

.step-foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
  min-height: 132px;
}

.step-note-slot {
  min-height: 72px;
  flex: 0 0 auto;
}

.choice-grid {
  display: grid;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  align-content: stretch;
}

/* Dual pick: two rows by default so Continue stays put. */
.choice-grid-dual {
  grid-template-rows: 1fr 1fr;
}

/* Page fullness + Movement: one row of four tall portrait cards. */
.choice-grid-dual[data-cols="4"],
.choice-grid-dual[data-rows="1"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 1fr;
  align-content: stretch;
}

.choice-grid-dual[data-cols="4"] .choice-card,
.choice-grid-dual[data-rows="1"] .choice-card {
  min-height: 0;
  height: 100%;
}

.choice-grid-dual[data-cols="4"] .choice-visual,
.choice-grid-dual[data-rows="1"] .choice-visual {
  flex: 1 1 auto;
  min-height: 0;
}

.choice-card-spacer {
  min-height: 0;
  visibility: hidden;
  pointer-events: none;
}

.choice-grid[data-cols="3"],
.choice-grid-dual[data-cols="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-grid[data-cols="4"],
.choice-grid-dual[data-cols="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.choice-grid[data-cols="2"],
.choice-grid-dual[data-cols="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choice-wrap {
  position: relative;
  min-height: 0;
  height: 100%;
  display: flex;
}

.choice-wrap .choice-card {
  width: 100%;
}

/* Expand control lives at the right end of the name bar, never over art. */
.choice-expand {
  position: absolute;
  right: 4px;
  bottom: 4px;
  top: auto;
  left: auto;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(42, 32, 22, 0.14);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(42, 32, 22, 0.1);
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.choice-expand:hover,
.choice-expand:focus-visible {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(42, 32, 22, 0.16);
}

.choice-expand:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.choice-expand-icon {
  display: block;
}

.choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  text-align: left;
  background: #fff;
  border: 2px solid rgba(42, 32, 22, 0.12);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.choice-card:hover {
  box-shadow: 0 14px 28px rgba(42, 32, 22, 0.1);
}

.choice-card:active {
  box-shadow: 0 8px 18px rgba(42, 32, 22, 0.1);
}

.choice-card:focus-visible,
.chip:focus-visible,
.btn:focus-visible,
.field input:focus-visible,
.field textarea:focus-visible,
.nav-links a:focus-visible,
.nav-toggle:focus-visible,
.summary-edit:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.choice-card.is-selected {
  border-color: var(--rust);
  box-shadow: 0 0 0 1px var(--rust), 0 14px 28px rgba(177, 74, 42, 0.14);
}

.choice-card.is-second {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal), 0 14px 28px rgba(44, 122, 120, 0.14);
}

.choice-rank {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 3px 8px;
  color: #fff;
  background: var(--rust);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.choice-card.is-second .choice-rank {
  background: var(--teal);
}

.dual-hint {
  margin: 6px 0 0;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 700;
}

.choice-visual {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f8f3e8, #fff);
}

/* Thin label strip so previews own almost the full card. */
.choice-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 52px;
  min-height: 52px;
  max-height: 52px;
  gap: 6px;
  padding: 6px 52px 6px 12px;
  text-align: left;
  color: var(--ink);
  background: #fdf9f1;
  border-top: 2px solid rgba(177, 74, 42, 0.18);
  overflow: hidden;
}

.choice-label-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.choice-expand-spacer {
  flex: 0 0 0;
  width: 0;
}

.choice-label:has(.choice-sub) {
  flex-basis: 52px;
  min-height: 52px;
  max-height: 52px;
  padding: 4px 52px 4px 10px;
  gap: 4px;
}

.choice-label-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 100%;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  overflow: hidden;
}

.premium-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5c3d0a;
  background: linear-gradient(180deg, #f3e0a8, #e2c46a);
  border: 1px solid rgba(122, 84, 18, 0.35);
  line-height: 1.2;
  white-space: nowrap;
}

.premium-note {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fbf4e3;
  border: 1px solid rgba(217, 152, 46, 0.28);
  color: #5c3d0a;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.preview-premium {
  margin-left: 8px;
}

.choice-sub {
  display: block;
  max-width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.choice-card.is-selected .choice-label {
  border-top-color: rgba(177, 74, 42, 0.2);
  background: rgba(255, 248, 240, 0.96);
}

.choice-card.is-second .choice-label {
  border-top-color: rgba(44, 122, 120, 0.2);
  background: rgba(244, 250, 249, 0.96);
}

/* Mini homepage previews */
.mini-site {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(42, 32, 22, 0.08);
  background: #fff;
  display: flex;
  flex-direction: column;
}

.mini-site .ms-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  font-size: 9px;
  font-weight: 800;
  flex: 0 0 auto;
}

.mini-site .ms-hero {
  padding: 10px 10px 8px;
  flex: 1 1 auto;
}

.mini-site .ms-kicker {
  margin-bottom: 4px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mini-site .ms-title {
  margin: 0;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 800;
}

.mini-site .ms-body {
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.3;
  opacity: 0.8;
}

.mini-site .ms-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 10px;
  font-size: 9px;
  font-weight: 800;
}

.mini-site .ms-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 10px 10px;
  flex: 0 0 auto;
}

.mini-site .ms-card {
  height: 18px;
  border-radius: 4px;
}

/* Color mood cards */
.palette {
  display: grid;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  align-content: stretch;
}

.palette-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 48px;
  height: 38%;
  overflow: hidden;
  border-radius: 12px;
}

.palette-ui {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(42, 32, 22, 0.08);
  flex: 1 1 auto;
  align-content: center;
}

.palette-ui .bar {
  height: 12px;
  border-radius: 999px;
}

.palette-ui .chip-row {
  display: flex;
  gap: 6px;
}

.palette-ui .dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
}

.color-soft .palette-strip span:nth-child(1) { background: #f7ebe0; }
.color-soft .palette-strip span:nth-child(2) { background: #e8b7b0; }
.color-soft .palette-strip span:nth-child(3) { background: #8d3b4a; }
.color-soft .palette-ui { background: #fff7f2; }
.color-soft .bar { background: #8d3b4a; }
.color-soft .dot:nth-child(1) { background: #f7ebe0; border: 1px solid #e8d2c4; }
.color-soft .dot:nth-child(2) { background: #e8b7b0; }
.color-soft .dot:nth-child(3) { background: #8d3b4a; }

.color-fresh .palette-strip span:nth-child(1) { background: #ffffff; }
.color-fresh .palette-strip span:nth-child(2) { background: #9db89a; }
.color-fresh .palette-strip span:nth-child(3) { background: #7eb6d4; }
.color-fresh .palette-ui { background: #f4faf7; }
.color-fresh .bar { background: #3f6b4a; }
.color-fresh .dot:nth-child(1) { background: #ffffff; border: 1px solid #d7e3df; }
.color-fresh .dot:nth-child(2) { background: #9db89a; }
.color-fresh .dot:nth-child(3) { background: #7eb6d4; }

.color-rich .palette-strip span:nth-child(1) { background: #13233d; }
.color-rich .palette-strip span:nth-child(2) { background: #1f4a34; }
.color-rich .palette-strip span:nth-child(3) { background: #b0893f; }
.color-rich .palette-ui { background: #101820; color: #f4efe4; }
.color-rich .bar { background: #b0893f; }
.color-rich .dot:nth-child(1) { background: #13233d; }
.color-rich .dot:nth-child(2) { background: #1f4a34; }
.color-rich .dot:nth-child(3) { background: #b0893f; }

.color-bright .palette-strip span:nth-child(1) { background: #ffffff; }
.color-bright .palette-strip span:nth-child(2) { background: #ff5a36; }
.color-bright .palette-strip span:nth-child(3) { background: #2f6bff; }
.color-bright .palette-ui { background: #ffffff; }
.color-bright .bar { background: linear-gradient(90deg, #ff5a36, #2f6bff); }
.color-bright .dot:nth-child(1) { background: #ffffff; border: 1px solid #ddd; }
.color-bright .dot:nth-child(2) { background: #ff5a36; }
.color-bright .dot:nth-child(3) { background: #2f6bff; }

.color-earthy .palette-strip span:nth-child(1) { background: #e6d5b8; }
.color-earthy .palette-strip span:nth-child(2) { background: #7a8f4a; }
.color-earthy .palette-strip span:nth-child(3) { background: #c56a3c; }
.color-earthy .palette-ui { background: #f4ebdd; }
.color-earthy .bar { background: #7a8f4a; }
.color-earthy .dot:nth-child(1) { background: #e6d5b8; border: 1px solid #d4c2a2; }
.color-earthy .dot:nth-child(2) { background: #7a8f4a; }
.color-earthy .dot:nth-child(3) { background: #c56a3c; }

.color-dark .palette-strip span:nth-child(1) { background: #1c1c1c; }
.color-dark .palette-strip span:nth-child(2) { background: #2c2c2c; }
.color-dark .palette-strip span:nth-child(3) { background: #d9982e; }
.color-dark .palette-ui { background: #141414; color: #f5f0e6; }
.color-dark .bar { background: #d9982e; }
.color-dark .dot:nth-child(1) { background: #1c1c1c; border: 1px solid #444; }
.color-dark .dot:nth-child(2) { background: #2c2c2c; }
.color-dark .dot:nth-child(3) { background: #d9982e; }

/* Type mood: single line samples, never wrap */
.type-sample {
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  padding: 16px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(42, 32, 22, 0.08);
  text-align: center;
  overflow: hidden;
}

.type-sample .type-line {
  margin: 0;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}

.type-sample .type-accent {
  margin: 6px 0 0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  color: var(--muted-strong);
}

.type-elegant .type-line {
  font-family: "Times New Roman", Times, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.type-friendly .type-line {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.type-strong .type-line {
  font-family: Arial Black, Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.type-classic .type-line {
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 20px;
  font-weight: 700;
}

.type-neutral .type-line {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.type-hand .type-line {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
}

.type-hand .type-accent {
  font-family: "Segoe Script", "Comic Sans MS", cursive;
  font-size: 14px;
  font-weight: 600;
  color: var(--rust);
}

/* Picture style: photos fill the visual area edge to edge */
.imagery-art {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(42, 32, 22, 0.1);
  position: relative;
  background: #f0e8da;
}

.imagery-photo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 30%;
}

/* Bias crop toward the upper subject so faces and rooflines stay in frame. */
.imagery-photo[data-focus="top"] {
  object-position: center 18%;
}

.imagery-photo[data-focus="upper"] {
  object-position: center 28%;
}

.imagery-photo[data-focus="center"] {
  object-position: center center;
}

/* Give picture cards a slightly taller visual by tightening padding */
.choice-visual:has(.imagery-art) {
  padding: 4px;
}

/* Cards render the modal's full mini website at half scale, cropped from
   the top, so the thumbnail is literally the top of what the closer look
   opens. */
.choice-visual:has(.card-exp) {
  padding: 0;
  overflow: hidden;
}

.card-exp {
  display: block;
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.card-exp .exp-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: top left;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}

/* Larger preview overlay for any dual pick card */
body.preview-modal-open {
  overflow: hidden;
}

.preview-modal[hidden] {
  display: none !important;
}

.preview-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
}

.preview-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 23, 16, 0.58);
}

.preview-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  /* Reese finding 2: the dialog can never exceed the viewport, no matter
     how wide its content wants to be. */
  max-width: calc(100vw - 24px);
  max-height: min(90vh, 900px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #fffaf2;
  border: 1px solid rgba(237, 227, 207, 0.95);
  border-radius: 18px;
  box-shadow: 0 28px 60px rgba(28, 23, 16, 0.28);
}

.preview-modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  row-gap: 4px;
  min-width: 0;
}

.preview-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
}

.preview-modal-close {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(42, 32, 22, 0.16);
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}

.preview-modal-close:hover,
.preview-modal-close:focus-visible {
  border-color: var(--rust);
}

.preview-modal-close:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.preview-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: auto;
  border-radius: 14px;
  background: #f4ebe0;
  border: 1px solid rgba(42, 32, 22, 0.08);
}

.preview-modal-image {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: min(72vh, 760px);
  height: auto;
  object-fit: contain;
  object-position: center;
}

.preview-modal-visual {
  width: min(100%, 520px);
  min-height: min(62vh, 520px);
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.preview-modal-visual > * {
  flex: 1 1 auto;
  min-height: 280px;
  height: 100%;
}

.preview-modal-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

/* Density: real mini page layouts, not gray bars alone */
.density-layout {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(42, 32, 22, 0.1);
  background: #f7f2e8;
}

.mini-page {
  height: 100%;
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(42, 32, 22, 0.08);
}

.mp-nav {
  height: 12px;
  border-radius: 4px;
  background: #2a2016;
}

.mp-hero {
  display: grid;
  gap: 6px;
  align-content: center;
  padding: 10px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f3e7d4, #e8d8c0);
}

.mp-hero.open {
  min-height: 78px;
}

.mp-hero.bal {
  min-height: 40px;
}

.mp-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
}

.mp-cta {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--rust);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.mp-space {
  flex: 1;
  min-height: 24px;
}

.mp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.mp-row span,
.mp-footer {
  height: 22px;
  border-radius: 5px;
  background: #e8dfd0;
}

.mp-footer {
  height: 10px;
}

.mp-section {
  display: grid;
  gap: 4px;
  padding: 6px;
  border-radius: 5px;
  background: #f4efe6;
}

.mp-line {
  height: 6px;
  border-radius: 999px;
  background: #cfc3ae;
}

.mp-line.short {
  width: 62%;
}

.mini-page.dense {
  gap: 5px;
}

.mp-dense-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  flex: 1;
}

.mp-dense-grid span {
  display: grid;
  place-items: center;
  min-height: 28px;
  border-radius: 4px;
  background: #e7dcc8;
  color: var(--ink);
  font-size: 9px;
  font-weight: 800;
}

/* Movement demos: full height phone frames with CSS loops */
.move-demo {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(42, 32, 22, 0.1);
  background: #e8dfd2;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.move-page {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(42, 32, 22, 0.1);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(42, 32, 22, 0.08);
}

.move-nav {
  flex: 0 0 auto;
  height: 12px;
  border-radius: 6px;
  background: #2a2016;
  margin-bottom: 10px;
}

.move-hero {
  flex: 0 0 22%;
  min-height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f0e2cc, #e2d0b4);
  margin-bottom: 10px;
}

.move-stack {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
}

.move-block {
  flex: 0 0 auto;
  height: 18px;
  width: 70%;
  border-radius: 6px;
  background: #d9cbb6;
}

.move-block.wide {
  width: 92%;
  height: 26px;
}

.move-block.half {
  width: 48%;
}

.move-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 42px;
}

.move-row span {
  display: block;
  height: 100%;
  min-height: 42px;
  border-radius: 8px;
  background: #e7dcc8;
}

.move-footer {
  flex: 0 0 auto;
  height: 14px;
  border-radius: 6px;
  background: #cfc2ae;
}

.move-cta {
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--rust);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.move-still .move-block,
.move-still .move-cta,
.move-still .move-hero,
.move-still .move-row span,
.move-still .move-footer {
  opacity: 1;
  transform: none;
}

.move-gentle .fade-a,
.move-gentle .fade-b,
.move-gentle .fade-c,
.move-gentle .fade-d,
.move-gentle .fade-e,
.move-gentle .fade-f {
  animation: move-fade 4s ease-in-out infinite;
}

.move-gentle .fade-b { animation-delay: 0.25s; }
.move-gentle .fade-c { animation-delay: 0.5s; }
.move-gentle .fade-d { animation-delay: 0.75s; }
.move-gentle .fade-e { animation-delay: 1s; }
.move-gentle .fade-f { animation-delay: 1.25s; }

/* Elements soften, they never vanish: the mini page must read as a
   complete page at any frozen moment of the loop. */
@keyframes move-fade {
  0%,
  15% {
    opacity: 0.28;
    transform: translateY(5px);
  }
  40%,
  70% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0.28;
    transform: translateY(5px);
  }
}

.move-lively .slide-a,
.move-lively .slide-b,
.move-lively .slide-c,
.move-lively .slide-d,
.move-lively .slide-e {
  animation: move-slide 4s ease-in-out infinite;
}

.move-lively .slide-b { animation-delay: 0.2s; }
.move-lively .slide-c { animation-delay: 0.4s; }
.move-lively .slide-d { animation-delay: 0.55s; }
.move-lively .slide-e { animation-delay: 0.7s; }

.move-lively .lift {
  animation: move-lift 4s ease-in-out infinite;
  animation-delay: 0.5s;
}

@keyframes move-slide {
  0%,
  12% {
    opacity: 0.35;
    transform: translateY(16px);
  }
  35%,
  70% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0.35;
    transform: translateY(16px);
  }
}

@keyframes move-lift {
  0%,
  20% {
    transform: translateY(0);
  }
  40%,
  55% {
    transform: translateY(-11px) scale(1.05);
  }
  100% {
    transform: translateY(0);
  }
}

.move-playful {
  background: linear-gradient(180deg, #f6ead6, #f7efe2);
}

.move-playful .move-page {
  background: rgba(255, 255, 255, 0.55);
}

.move-layer {
  position: absolute;
  border-radius: 12px;
  border: 2px solid rgba(42, 32, 22, 0.16);
}

.move-playful .layer-a {
  top: 16%;
  left: 10%;
  width: 56%;
  height: 18%;
  background: #f2d6a8;
  animation: move-drift-a 5s ease-in-out infinite;
}

.move-playful .layer-b {
  top: 36%;
  right: 10%;
  width: 48%;
  height: 15%;
  background: #e3b7b0;
  animation: move-drift-b 5s ease-in-out infinite;
}

.move-playful .layer-c {
  top: 56%;
  left: 16%;
  width: 42%;
  height: 14%;
  background: #d9cbb6;
  animation: move-drift-c 5s ease-in-out infinite;
}

.move-playful .layer-d {
  bottom: 10%;
  right: 14%;
  width: 52%;
  height: 13%;
  background: #cf9a7c;
  animation: move-drift-d 5s ease-in-out infinite;
}

@keyframes move-drift-a {
  0%,
  100% {
    transform: translate(0, 0) rotate(-2deg);
  }
  50% {
    transform: translate(16px, -14px) rotate(5deg);
  }
}

@keyframes move-drift-b {
  0%,
  100% {
    transform: translate(0, 0) rotate(2deg);
  }
  50% {
    transform: translate(-18px, 12px) rotate(-5deg);
  }
}

@keyframes move-drift-c {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(14px, -18px) rotate(6deg);
  }
}

@keyframes move-drift-d {
  0%,
  100% {
    transform: translate(0, 0) rotate(1deg);
  }
  50% {
    transform: translate(-15px, -12px) rotate(-4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .move-gentle .fade-a,
  .move-gentle .fade-b,
  .move-gentle .fade-c,
  .move-gentle .fade-d,
  .move-gentle .fade-e,
  .move-gentle .fade-f,
  .move-lively .slide-a,
  .move-lively .slide-b,
  .move-lively .slide-c,
  .move-lively .slide-d,
  .move-lively .slide-e,
  .move-lively .lift,
  .move-playful .layer-a,
  .move-playful .layer-b,
  .move-playful .layer-c,
  .move-playful .layer-d {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Sloane cleanup: four slim fields in two columns instead of four full
   width boxes taller than the text they hold. */
.sites-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin-top: 0;
}

.sites-grid .field {
  margin-top: 0;
}

.sites-grid textarea {
  min-height: 48px;
  max-height: 48px;
  height: 48px;
  padding: 12px 14px;
  resize: none;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

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

.step-note-field {
  margin-top: 0;
  flex: 0 0 auto;
  min-height: 72px;
}

.step-note-field textarea {
  min-height: 40px;
  max-height: 40px;
  height: 40px;
  padding: 8px 10px;
  resize: none;
}

.step-panel > .status-line,
.step-foot > .status-line {
  flex: 0 0 auto;
  min-height: 20px;
  margin: 4px 0 0;
}

/* Shape: tall mini UI samples filled with matching element types */
.shape-demo {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(42, 32, 22, 0.1);
  background: #fff;
  overflow: hidden;
}

.shape-demo.shape-soft {
  border-radius: 18px;
}

.shape-demo.shape-sharp,
.shape-demo.shape-links,
.shape-demo.shape-callout {
  border-radius: 0;
}

.shape-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: #f4efe6;
}

.shape-nav.soft {
  border-radius: 999px;
}

.shape-nav.sharp,
.shape-nav.links,
.shape-nav.callout {
  border-radius: 0;
}

.shape-brand {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
}

.shape-pill,
.shape-square {
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: var(--ink);
}

.shape-pill {
  border-radius: 999px;
}

.shape-square {
  border-radius: 0;
}

.shape-hero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background: linear-gradient(160deg, #f7efe2, #efe4d2);
}

.shape-hero.soft {
  border-radius: 18px;
}

.shape-hero.sharp,
.shape-hero.links,
.shape-hero.callout {
  border-radius: 0;
}

.shape-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
}

.shape-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
}

.shape-body {
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted-strong);
}

.shape-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 8px 14px;
  color: #fff;
  background: var(--rust);
  font-size: 11px;
  font-weight: 800;
}

.shape-btn.soft {
  border-radius: 999px;
}

.shape-btn.sharp {
  border-radius: 0;
}

.shape-btn.ghost {
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(42, 32, 22, 0.35);
}

.shape-samples {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 2px 2px 4px;
}

.shape-samples .callout-box {
  width: 100%;
}

.shape-samples .link-line {
  padding: 2px 0;
}

.link-line {
  color: var(--rust);
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-line.muted {
  color: var(--muted-strong);
}

.link-line.small {
  font-size: 11px;
}

.link-line.tiny {
  font-size: 10px;
}

.shape-callout .callout-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  color: #fff;
  background: var(--ink);
  border-radius: 0;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.shape-callout .callout-box.alt {
  background: var(--rust);
}

.shape-callout .callout-box.mini {
  width: auto;
  min-width: 0;
  padding: 6px 8px;
  font-size: 10px;
}

.shape-callout .arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--gold);
}

/* Chip steps hold far less content than the card steps, and the panel
   height is deliberately fixed so Continue never moves. The chips become
   a grid of larger tiles and the chips plus note center vertically as one
   unit, so the fixed panel reads as composed rather than empty. */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: auto;
  margin-bottom: auto;
  align-content: center;
}

/* Chip steps center in the fixed panel and the chips grow into tiles, so
   the space above and below reads as composed rather than empty. */
.step-body-chips {
  justify-content: center;
}

.step-body-chips .chip {
  min-height: 84px;
  padding: 14px 18px;
  font-size: 15px;
}

/* The avoid grid runs two wide columns so its eight tiles genuinely fill
   the fixed desktop panel instead of floating in it. The business step
   keeps its four column tile grid. */
.step-body-chips .chip-grid:not(.chip-grid-tiles) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.step-body-chips .chip-grid:not(.chip-grid-tiles) .chip {
  min-height: 92px;
}

.chip-grid-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.chip-grid ~ .step-note-field {
  margin-top: 20px;
  margin-bottom: auto;
}

.chip-tile {
  min-height: 88px;
  border-radius: 16px;
  padding: 18px 16px;
  font-size: 15px;
  line-height: 1.3;
}

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

  .chip-grid-tiles {
    grid-template-columns: 1fr;
  }
}

.business-describe-field {
  margin-top: 20px;
  margin-bottom: auto;
}

.business-describe-field textarea {
  min-height: 56px;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 64px;
  padding: 12px 16px;
  color: var(--ink);
  background: #fff;
  border: 2px solid rgba(42, 32, 22, 0.14);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.chip:hover {
  transform: translateY(-1px);
}

.chip.is-selected {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}

.chip.is-selected::before {
  content: "\2713\00a0";
  font-weight: 900;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.field {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.field label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(42, 32, 22, 0.16);
  border-radius: 10px;
}

.field textarea {
  min-height: 56px;
  resize: vertical;
}

.field .hint {
  color: var(--muted);
  font-size: 13px;
}

.file-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.file-row input[type="file"] {
  max-width: 100%;
}

.image-preview {
  display: none;
  max-width: 220px;
  border-radius: 12px;
  border: 1px solid rgba(42, 32, 22, 0.12);
}

.image-preview.is-visible {
  display: block;
}

.step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  flex: 0 0 auto;
  min-height: 40px;
}

.submit-row {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.submit-row .step-actions {
  margin-top: 0;
}

.submit-privacy {
  margin: 0;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
}

.submit-privacy a {
  color: var(--rust-dark);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.submit-privacy a:hover,
.submit-privacy a:focus-visible {
  color: var(--rust);
}

.step-actions-left {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.btn,
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.btn:hover,
a.btn:hover,
a.btn:focus-visible {
  transform: translateY(-1px);
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--rust-dark) 0%, var(--rust) 100%);
  box-shadow: 0 10px 22px rgba(177, 74, 42, 0.24);
}

.btn-secondary {
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(42, 32, 22, 0.16);
}

.btn-ghost {
  color: var(--muted-strong);
  background: transparent;
  border: 1px solid transparent;
}

/* Sloane cleanup: the review page reads as one elegant pane, two columns
   of slim rows, no scrolling to see your own choices. */
.summary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin-top: 14px;
}

.summary-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid rgba(42, 32, 22, 0.1);
  border-radius: 10px;
  min-height: 0;
}

.summary-item strong {
  display: block;
  margin-bottom: 1px;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.summary-item p {
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 720px) {
  .summary-list {
    grid-template-columns: 1fr;
  }
}

.summary-item p {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}

.summary-edit {
  min-height: 34px;
  padding: 5px 10px;
  color: var(--rust-dark);
  background: transparent;
  border: 1px solid rgba(177, 74, 42, 0.28);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}

.contact-grid .field.full {
  grid-column: 1 / -1;
}

.status-line {
  min-height: 20px;
  margin-top: 4px;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 700;
}

.status-line.is-error {
  color: var(--rust-dark);
}

.confirm-card {
  text-align: center;
  padding: 18px 8px 8px;
}

.confirm-card h2 {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.08;
}

.confirm-card p {
  max-width: 520px;
  margin: 14px auto 0;
  color: var(--muted-strong);
}

.confirm-ref {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(42, 32, 22, 0.1);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.summary-stay {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(42, 32, 22, 0.08);
  text-align: left;
}

.trap {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Compact picker footer so step cards keep full height. */
.site-footer {
  margin-top: auto;
  flex-shrink: 0;
  border-top: 1px solid rgba(42, 32, 22, 0.08);
  background: var(--green);
  color: rgba(255, 247, 238, 0.92);
}

.footer-inner {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: 16px 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.footer-brand {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  font-weight: 700;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--gold);
}

@media (max-width: 900px) {
  html,
  body {
    height: auto;
  }

  .choice-grid[data-cols="2"],
  .choice-grid[data-cols="3"],
  .choice-grid[data-cols="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .choice-grid-dual {
    grid-template-rows: none;
    grid-auto-rows: minmax(180px, auto);
  }

  .choice-grid-dual[data-cols="4"],
  .choice-grid-dual[data-rows="1"] {
    grid-template-rows: none;
    align-content: start;
  }

  .choice-grid-dual[data-cols="4"] .choice-card,
  .choice-grid-dual[data-rows="1"] .choice-card {
    min-height: 200px;
    height: auto;
  }

  .choice-grid-dual[data-cols="4"] .choice-visual,
  .choice-grid-dual[data-rows="1"] .choice-visual {
    min-height: 160px;
  }

  .picker-page {
    display: block;
    height: auto;
    overflow: visible;
  }

  .site-header {
    position: sticky;
    top: 0;
    height: auto;
    width: 100%;
    box-shadow: 0 2px 0 rgba(255, 255, 255, 0.05);
  }

  /* Keep focused step titles clear of the sticky phone header. */
  .step-panel h2,
  .step-head h2,
  .step-head {
    scroll-margin-top: 80px;
  }

  .nav-wrap {
    width: min(100% - 28px, var(--max));
    height: auto;
    min-height: 64px;
    margin: 0 auto;
    padding: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
  }

  .nav-top {
    width: 100%;
    min-height: 64px;
    justify-content: space-between;
  }

  .brand-link img {
    height: 48px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-links {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    display: none;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 16px 16px;
    background: rgba(28, 23, 16, 0.98);
    border-bottom: 1px solid rgba(255, 247, 238, 0.08);
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-links a {
    padding: 12px 8px;
    min-height: 44px;
  }

  .nav-actions {
    margin-top: 8px;
    padding-top: 8px;
  }

  .page-main {
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  .page-main > main {
    overflow: visible;
  }

  .picker-shell,
  .picker-hero-inner {
    width: min(100% - 28px, 980px);
  }

  .picker-shell,
  .picker-shell > [data-stage],
  .step-panel,
  .step-body,
  .choice-grid {
    flex: none;
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  .step-foot {
    min-height: 0;
  }

  .choice-card {
    min-height: 200px;
    height: auto;
  }

  .choice-visual {
    min-height: 160px;
    padding: 5px;
  }

  .choice-label {
    flex: 0 0 52px;
    min-height: 52px;
    max-height: 52px;
    padding: 5px 8px;
  }

  .choice-label:has(.choice-sub) {
    flex-basis: 52px;
    min-height: 52px;
    max-height: 52px;
  }

  .choice-label-text {
    font-size: 14px;
  }

  .mini-site,
  .density-layout,
  .move-demo,
  .type-sample,
  .shape-demo,
  .palette {
    min-height: 150px;
    height: auto;
  }

  .imagery-art {
    aspect-ratio: 1 / 1;
    min-height: 0;
    height: auto;
  }

  .choice-visual:has(.imagery-art) {
    min-height: 180px;
  }

  .step-panel {
    padding: 18px 16px;
    overflow: visible;
  }

  .step-help {
    max-height: none;
    white-space: normal;
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .choice-grid[data-cols="2"],
  .choice-grid[data-cols="3"],
  .choice-grid[data-cols="4"] {
    grid-template-columns: 1fr;
  }

  .choice-grid-dual {
    grid-auto-rows: minmax(200px, auto);
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .step-actions {
    flex-direction: column-reverse;
  }

  .step-actions .btn {
    width: 100%;
  }

  .type-elegant .type-line,
  .type-classic .type-line {
    font-size: 20px;
  }

  .type-friendly .type-line,
  .type-neutral .type-line,
  .type-hand .type-line {
    font-size: 18px;
  }

  .type-strong .type-line {
    font-size: 15px;
  }

  .type-hand .type-accent {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   Expanded modal previews. One full mini website per option,
   themed through the same class hooks the cards use, so the
   closer look answers what a site like this would feel like
   instead of enlarging a fragment. */

.exp-page {
  --xbg: #fffdf9;
  --xsurface: #f4efe6;
  --xink: #2a2016;
  --xmuted: #6e5c44;
  --xaccent: #b14a2a;
  --xaccent-ink: #fff;
  --xcard: #ece4d6;
  --xfooter: #2a2016;
  --xradius: 10px;
  --xbtn-radius: 8px;
  --xdisplay: inherit;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--xink);
  background: var(--xbg);
  border-radius: 12px;
  border: 1px solid rgba(42, 32, 22, 0.12);
  box-shadow: 0 14px 34px rgba(42, 32, 22, 0.14);
}

.xp-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--xsurface);
  font-size: 11px;
  font-weight: 800;
}

.xp-links {
  display: flex;
  gap: 12px;
  color: var(--xmuted);
  font-weight: 700;
}

.xp-nav-cta {
  padding: 5px 11px;
  background: var(--xaccent);
  color: var(--xaccent-ink);
  border-radius: var(--xbtn-radius);
  font-size: 10px;
  font-weight: 800;
}

.xp-hero {
  flex: 1 0 auto;
  justify-content: center;
  padding: 24px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.xp-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--xaccent);
}

.xp-title {
  margin: 0;
  font-family: var(--xdisplay);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.08;
}

.xp-accent {
  margin: 0;
  font-family: "Segoe Script", "Comic Sans MS", cursive;
  font-size: 15px;
  font-weight: 600;
  color: var(--xaccent);
}

.xp-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--xmuted);
}

.xp-cta {
  width: fit-content;
  margin-top: 7px;
  padding: 8px 15px;
  background: var(--xaccent);
  color: var(--xaccent-ink);
  border-radius: var(--xbtn-radius);
  font-size: 11px;
  font-weight: 800;
}

.xp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 2px 18px;
}

.xp-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(42, 32, 22, 0.08);
  border-radius: var(--xradius);
}

.xp-thumb {
  height: 42px;
  border-radius: calc(var(--xradius) * 0.6);
  background: var(--xcard);
}

.xp-line {
  height: 6px;
  border-radius: 999px;
  background: var(--xcard);
}

.xp-line.short {
  width: 60%;
}

.xp-section {
  flex: 1 0 auto;
  justify-content: center;
  padding: 16px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.xp-h {
  margin: 0;
  font-family: var(--xdisplay);
  font-size: 16px;
  font-weight: 800;
}

.xp-dense {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 2px 18px;
}

.xp-dense span {
  padding: 8px 4px;
  text-align: center;
  background: var(--xsurface);
  border: 1px solid rgba(42, 32, 22, 0.1);
  border-radius: var(--xradius);
  font-size: 10px;
  font-weight: 800;
}

.xp-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  background: var(--xfooter);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.xp-flinks {
  display: flex;
  gap: 12px;
  opacity: 0.85;
}

/* Layout architecture: classic mini page skeleton vs full bleed hero */
.exp-page.arch-classic {
  /* Current tidy skeleton. Default before a layout pick. */
}

/* Shared real photo slots */
.xp-photo-slot {
  position: relative;
  display: block;
  overflow: hidden;
  flex: 0 0 auto;
}

.xp-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.xp-thumb-photo {
  height: 42px;
  border-radius: calc(var(--xradius) * 0.6);
}

.xp-band-photo {
  height: 46px;
  margin: 0 18px 4px;
  border-radius: var(--xradius);
}

.exp-page.photos-small .xp-band-photo {
  height: 28px;
}

.exp-page.photos-small .xp-thumb-photo {
  height: 28px;
}

.exp-page.photos-small .xp-art-photo {
  max-height: 90px;
}

/* Soft accent overlay on the color step only */
.exp-page.photo-tint .xp-photo-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--xaccent) 34%, transparent);
  pointer-events: none;
}

.exp-page.arch-bold {
  --xhero-title: #fff;
  --xhero-kicker: #fff;
  --xhero-cta-bg: #fff8ef;
  --xhero-cta-ink: #2a2016;
}

.exp-page.arch-bold .xp-hero-bold {
  position: relative;
  flex: 0 0 52%;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  justify-content: stretch;
}

.exp-page.arch-bold .xp-hero-photo {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 0;
}

.exp-page.arch-bold .xp-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Every bold preview uses light type over imagery. Keep the full text
     zone dark enough for contrast even when the image is very bright. */
  background: linear-gradient(
    180deg,
    rgba(12, 8, 6, 0.18) 0%,
    rgba(12, 8, 6, 0.6) 55%,
    rgba(12, 8, 6, 0.88) 100%
  );
}

.exp-page.arch-bold .xp-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 18px 18px;
  width: 100%;
}

/* Artistic and unexpected: cropped headline, offset photo, side label */
.exp-page.arch-artistic {
  position: relative;
  --xhero-title: #2a2016;
  background: #fbf7ee;
  overflow: hidden;
}

.exp-page.arch-artistic .xp-texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
  opacity: 0.42;
  pointer-events: none;
}

.exp-page.arch-artistic .xp-texture .xp-photo {
  filter: blur(0.2px) saturate(0.9);
}

.exp-page.arch-artistic .xp-side-label {
  position: absolute;
  left: 6px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--xink);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exp-page.arch-artistic .xp-art-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: auto auto auto;
  gap: 10px 14px;
  padding: 18px 16px 10px 28px;
  min-height: 0;
  flex: 1 1 auto;
}

.exp-page.arch-artistic .xp-title-crop {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 34px;
  line-height: 0.92;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  width: 118%;
  max-width: none;
  color: var(--xink);
}

.exp-page.arch-artistic .xp-art-photo {
  grid-column: 1;
  grid-row: 2;
  height: 92px;
  margin-left: -10px;
  border-radius: 4px;
  box-shadow: 0 10px 22px rgba(42, 32, 22, 0.14);
}

.exp-page.arch-artistic .xp-art-copy {
  grid-column: 2;
  grid-row: 2 / span 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
  min-width: 0;
}

.exp-page.arch-artistic .xp-art-aside {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  margin-right: 18px;
  min-width: 0;
}

.exp-page.arch-artistic .xp-art-detail {
  height: 28px;
  border-radius: 4px;
  margin-top: 4px;
}

.exp-page.arch-artistic .xp-cta-text {
  display: inline-block;
  width: fit-content;
  margin-top: 6px;
  padding: 0;
  background: transparent;
  color: var(--xink);
  border-radius: 0;
  font-size: 15px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.exp-page.arch-artistic .xp-footer {
  position: relative;
  z-index: 1;
}

.exp-page.arch-artistic .xp-nav {
  display: none;
}

.exp-page.arch-bold .xp-hero-bold .xp-kicker,
.exp-page.arch-bold .fp-hero-bold .xp-kicker {
  color: var(--xhero-kicker);
}

.exp-page.arch-bold .xp-hero-bold .xp-title,
.exp-page.arch-bold .fp-hero-bold .xp-title {
  color: var(--xhero-title);
  font-size: 30px;
  line-height: 1.05;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.exp-page.arch-bold .xp-hero-bold .xp-accent,
.exp-page.arch-bold .fp-hero-bold .xp-accent {
  color: #fff;
}

.exp-page.arch-bold .xp-hero-bold .xp-cta,
.exp-page.arch-bold .fp-hero-bold .xp-cta {
  background: var(--xhero-cta-bg);
  color: var(--xhero-cta-ink);
  margin-top: 4px;
}

.exp-page.arch-bold .xp-hero-bold .xp-sign,
.exp-page.arch-bold .fp-hero-bold .xp-sign {
  color: #fff;
}

.exp-page.arch-bold .xp-split {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 12px;
  padding: 14px 18px 8px;
  align-items: start;
}

.exp-page.arch-bold .xp-split-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.exp-page.arch-bold .xp-split-main .xp-cards {
  padding: 0;
  grid-template-columns: 1fr 1fr;
}

.exp-page.arch-bold .xp-split-side {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  background: var(--xsurface);
  border-radius: var(--xradius);
  border: 1px solid rgba(42, 32, 22, 0.08);
  min-width: 0;
}

.exp-page.arch-bold .xp-section {
  display: none;
}

/* Dark color themes keep the bold hero scrim text bright enough */
.exp-page.arch-bold.color-rich .xp-hero-scrim,
.exp-page.arch-bold.color-dark .xp-hero-scrim {
  background: linear-gradient(
    180deg,
    rgba(8, 8, 12, 0.18) 0%,
    rgba(8, 8, 12, 0.6) 55%,
    rgba(8, 8, 12, 0.88) 100%
  );
}

.exp-page.arch-bold.color-rich .xp-hero-bold .xp-cta,
.exp-page.arch-bold.color-rich .fp-hero-bold .xp-cta,
.exp-page.arch-bold.color-dark .xp-hero-bold .xp-cta,
.exp-page.arch-bold.color-dark .fp-hero-bold .xp-cta {
  background: #fff8ef;
  color: #101820;
}

/* Neutral previews stay white until the visitor reaches Color. */
.exp-page.color-neutral {
  --xbg: #fff;
  --xsurface: #fff;
  --xink: #2a2016;
  --xmuted: #5d574f;
  --xaccent: #2a2016;
  --xaccent-ink: #fff;
  --xcard: #fff;
  --xfooter: #fff;
}

.exp-page.color-neutral .xp-footer {
  color: var(--xink);
  border-top: 1px solid rgba(42, 32, 22, 0.12);
}

/* Color direction themes */
.exp-page.color-soft {
  --xbg: #fff7f2;
  --xsurface: #f7ebe0;
  --xaccent: #8d3b4a;
  --xcard: #e8b7b0;
  --xfooter: #8d3b4a;
}

.exp-page.color-fresh {
  --xbg: #ffffff;
  --xsurface: #f4faf7;
  --xaccent: #3f6b4a;
  --xcard: #9db89a;
  --xfooter: #3f6b4a;
}

.exp-page.color-rich {
  --xbg: #101820;
  --xsurface: #13233d;
  --xaccent: #b0893f;
  --xaccent-ink: #101820;
  --xcard: #1f4a34;
  --xink: #f4efe4;
  --xmuted: rgba(244, 239, 228, 0.72);
  --xfooter: #0a0f14;
}

.exp-page.color-rich .xp-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(244, 239, 228, 0.14);
}

.exp-page.color-bright {
  --xbg: #ffffff;
  --xsurface: #ffffff;
  --xaccent: #d63b16;
  --xcard: #dbe6ff;
  --xfooter: #1c1c1c;
}

.exp-page.color-bright .xp-nav {
  border-bottom: 1px solid #eeeeee;
}

.exp-page.color-bright .xp-nav-cta {
  background: #2456d6;
}

.exp-page.color-earthy {
  --xbg: #faf4ea;
  --xsurface: #efe4d2;
  --xaccent: #a1521f;
  --xcard: #cfc39f;
  --xfooter: #5c4a33;
}

.exp-page.color-dark {
  --xbg: #1d1b18;
  --xsurface: #26231f;
  --xaccent: #d9982e;
  --xaccent-ink: #1d1b18;
  --xcard: #3a352e;
  --xink: #f2ede4;
  --xmuted: rgba(242, 237, 228, 0.7);
  --xfooter: #121110;
}

.exp-page.color-dark .xp-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(242, 237, 228, 0.12);
}

/* Text and font style themes */
.exp-page.type-elegant {
  --xdisplay: "Times New Roman", Times, serif;
}

.exp-page.type-classic {
  --xdisplay: Georgia, "Times New Roman", serif;
}

.exp-page.type-friendly {
  --xdisplay: "Trebuchet MS", "Segoe UI", sans-serif;
  --xbtn-radius: 999px;
}

.exp-page.type-strong {
  --xdisplay: "Arial Black", Arial, sans-serif;
}

.exp-page.type-strong .xp-title {
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 24px;
}

.exp-page.type-neutral {
  --xdisplay: "Segoe UI", system-ui, sans-serif;
}

.exp-page.type-neutral .xp-title {
  font-weight: 600;
}

.exp-page.type-hand {
  --xdisplay: Georgia, "Times New Roman", serif;
}

/* Page fullness themes */
.exp-page.density-very-open .xp-hero {
  padding: 44px 24px 30px;
  gap: 10px;
}

.exp-page.density-very-open .xp-card:nth-child(n + 2) {
  display: none;
}

.exp-page.density-very-open .xp-cards {
  grid-template-columns: 1fr;
  padding: 2px 24px;
}

.exp-page.density-very-open .xp-section {
  padding: 26px 24px 16px;
}

.exp-page.density-content .xp-hero {
  padding: 14px 18px 10px;
}

.exp-page.density-content .xp-title {
  font-size: 21px;
}

.exp-page.density-everything .xp-hero {
  padding: 10px 18px 8px;
  gap: 4px;
}

.exp-page.density-everything .xp-title {
  font-size: 18px;
}

.exp-page.density-everything .xp-cards {
  gap: 6px;
}

.exp-page.density-everything .xp-section {
  padding: 10px 18px 8px;
}

/* Movement themes reuse the card keyframes */
.exp-page.move-gentle .xp-hero,
.exp-page.move-gentle .xp-card,
.exp-page.move-gentle .xp-section {
  animation: move-fade 4s ease-in-out infinite;
}

.exp-page.move-gentle .xp-card:nth-child(2) { animation-delay: 0.3s; }
.exp-page.move-gentle .xp-card:nth-child(3) { animation-delay: 0.6s; }
.exp-page.move-gentle .xp-section { animation-delay: 0.9s; }

.exp-page.move-lively .xp-hero,
.exp-page.move-lively .xp-card,
.exp-page.move-lively .xp-section {
  animation: move-slide 4s ease-in-out infinite;
}

.exp-page.move-lively .xp-card:nth-child(2) { animation-delay: 0.2s; }
.exp-page.move-lively .xp-card:nth-child(3) { animation-delay: 0.4s; }
.exp-page.move-lively .xp-section { animation-delay: 0.6s; }

.exp-page.move-lively .xp-cta {
  animation: move-lift 4s ease-in-out infinite;
  animation-delay: 0.5s;
}

.exp-page.move-playful .xp-card:nth-child(1) {
  animation: move-drift-a 5s ease-in-out infinite;
}

.exp-page.move-playful .xp-card:nth-child(2) {
  animation: move-drift-b 5s ease-in-out infinite;
}

.exp-page.move-playful .xp-card:nth-child(3) {
  animation: move-drift-c 5s ease-in-out infinite;
}

.exp-page.move-playful .xp-cta {
  animation: move-lift 4s ease-in-out infinite;
}

/* Bold + artistic movement showpiece */
.exp-page.arch-bold.move-gentle .xp-hero-photo,
.exp-page.arch-artistic.move-gentle .xp-art-photo {
  animation: move-fade 4.5s ease-in-out infinite;
}

.exp-page.arch-bold.move-gentle .xp-card,
.exp-page.arch-bold.move-gentle .xp-section,
.exp-page.arch-artistic.move-gentle .xp-art-copy {
  animation: none;
}

.exp-page.arch-bold.move-lively .xp-split,
.exp-page.arch-artistic.move-lively .xp-art-copy,
.exp-page.arch-artistic.move-lively .xp-art-aside {
  animation: move-slide 4s ease-in-out infinite;
}

.exp-page.arch-bold.move-lively .xp-hero,
.exp-page.arch-bold.move-lively .xp-card,
.exp-page.arch-bold.move-lively .xp-section {
  animation: none;
}

.exp-page.arch-bold.move-lively .xp-cta,
.exp-page.arch-artistic.move-lively .xp-cta-text {
  animation: move-lift 4s ease-in-out infinite;
  animation-delay: 0.4s;
}

.exp-page.arch-bold.move-playful .xp-hero-photo .xp-photo,
.exp-page.arch-artistic.move-playful .xp-art-photo .xp-photo {
  animation: bold-parallax-photo 6s ease-in-out infinite;
}

.exp-page.arch-bold.move-playful .xp-hero-copy,
.exp-page.arch-artistic.move-playful .xp-title-crop {
  animation: bold-parallax-copy 6s ease-in-out infinite;
}

.exp-page.arch-bold.move-playful .xp-card:nth-child(1),
.exp-page.arch-bold.move-playful .xp-card:nth-child(2),
.exp-page.arch-bold.move-playful .xp-card:nth-child(3),
.exp-page.arch-bold.move-playful .xp-cta {
  animation: none;
}

@keyframes bold-parallax-photo {
  0%, 100% { transform: scale(1.08) translateY(0); }
  50% { transform: scale(1.14) translateY(-8px); }
}

@keyframes bold-parallax-copy {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Element shape themes */
.exp-page.shape-soft {
  --xradius: 18px;
  --xbtn-radius: 999px;
}

.exp-page.shape-sharp {
  --xradius: 0;
  --xbtn-radius: 0;
}

.exp-page.shape-links .xp-cta,
.exp-page.shape-links .xp-nav-cta {
  padding: 0;
  background: transparent;
  color: var(--xaccent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 12px;
}

.exp-page.shape-callout {
  --xradius: 0;
  --xbtn-radius: 0;
}

.exp-page.shape-callout .xp-cta::after,
.exp-page.shape-callout .xp-nav-cta::after {
  content: "";
  display: inline-block;
  margin-left: 8px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--gold);
}

/* Modal short description beside the option name. One line, never wraps. */
.preview-modal-desc {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Presence step: the fictional owner appears progressively. */
.xp-sign {
  margin: 4px 0 0;
  font-family: "Segoe Script", "Comic Sans MS", cursive;
  font-size: 13px;
  font-weight: 600;
  color: var(--xaccent);
}

.xp-avatar {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 32%, #d8b49a 0 34%, transparent 35%),
    linear-gradient(180deg, transparent 55%, #b8886c 56%),
    #efe2d2;
  border: 2px solid rgba(42, 32, 22, 0.16);
  flex: 0 0 auto;
}

.xp-avatar-hero {
  width: 64px;
  height: 64px;
  margin-bottom: 4px;
}

.xp-about {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 18px;
  padding: 10px 12px;
  background: var(--xsurface);
  border-radius: var(--xradius);
}

.xp-about-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
}

.xp-about-copy .xp-h {
  font-size: 13px;
}

/* Avoid chips carry a short plain explanation under the label. */
.chip-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.chip-sub {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--muted);
}

.chip.is-selected .chip-sub {
  color: rgba(255, 247, 238, 0.8);
}

/* Reese finding 2: at phone width the dialog fills the screen safely,
   Close stays visible in the top row, and the description drops to its
   own single ellipsis line under the title. */
@media (max-width: 720px) {
  .preview-modal {
    padding: 10px;
  }

  .preview-modal-dialog {
    width: 100%;
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 12px;
  }

  .preview-modal-title {
    font-size: 16px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .preview-modal-desc {
    order: 3;
    flex: 1 1 100%;
    margin-left: 0;
    font-size: 13px;
  }

  .preview-modal-visual {
    width: 100%;
    min-width: 0;
    padding: 10px;
  }
}
/* ============================================================
   Full page preview finale + live teaser widget
   ============================================================ */

.fullpage-cta-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 8px 0 22px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fffaf1, #f7efe0);
  border: 1px solid rgba(177, 74, 42, 0.18);
  box-shadow: 0 10px 24px rgba(42, 32, 22, 0.06);
}

.fullpage-cta-help {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.fullpage-cta-btn {
  width: 100%;
}

body.fullpage-modal-open {
  overflow: hidden;
}

.fullpage-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 16px;
  background: rgba(24, 16, 10, 0.52);
}

.fullpage-modal[hidden] {
  display: none !important;
}

.fullpage-modal-backdrop {
  position: absolute;
  inset: 0;
}

.fullpage-modal-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  max-height: calc(100dvh - 32px);
  margin: auto;
  background: #fffdf8;
  border-radius: 18px;
  border: 1px solid rgba(42, 32, 22, 0.12);
  box-shadow: 0 24px 60px rgba(42, 32, 22, 0.28);
  overflow: hidden;
}

.fullpage-modal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(42, 32, 22, 0.08);
  background: #fbf6ec;
}

.fullpage-modal-heading {
  min-width: 0;
  flex: 1 1 auto;
}

.fullpage-modal-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}

.fullpage-modal-frame {
  margin: 0;
  color: var(--muted-strong, #6e5c44);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.fullpage-modal-close {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(42, 32, 22, 0.14);
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.fullpage-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #f3ebe0;
  padding: 14px;
}

.fullpage-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(42, 32, 22, 0.08);
  background: #fffdf8;
}

/* Sloane fix: the forced minimum height pushed the footer into the middle
   of the scroll with dead space after it. Content defines the length and
   the scroll ends at the footer, like a real website. */
.fp-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: var(--xbg, #fffdf9);
  box-shadow: 0 16px 40px rgba(42, 32, 22, 0.14);
}

.fp-page .fp-footer,
.fp-page .xp-footer {
  margin-top: auto;
}

.fp-page.is-compact {
  min-height: 0;
  height: 220px;
  pointer-events: none;
}

.fp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: var(--xsurface, #f4efe6);
  font-size: 12px;
  font-weight: 800;
}

.fp-hero {
  position: relative;
  min-height: 42vh;
}

.fp-hero-classic {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  padding: 28px 22px;
  align-items: center;
}

.fp-classic-photo {
  min-height: 220px;
  height: 100%;
  border-radius: 14px;
}

.fp-hero-bold {
  min-height: 56vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.fp-hero-bold .fp-hero-photo,
.fp-hero-bold .xp-hero-photo {
  position: absolute;
  inset: 0;
  height: 100%;
}

.fp-hero-bold .xp-hero-scrim {
  z-index: 1;
}

.fp-hero-bold .fp-hero-copy {
  position: relative;
  z-index: 2;
  padding: 28px 22px 24px;
  width: 100%;
}

.fp-hero-artistic {
  min-height: 58vh;
  padding: 24px 18px 18px 34px;
  overflow: hidden;
}

.fp-art-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 16px;
  align-items: start;
}

.fp-section {
  padding: 28px 22px;
}

.fp-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--xaccent, #b14a2a);
}

.fp-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--xmuted, #6e5c44);
}

.fp-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.fp-service {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(42, 32, 22, 0.08);
}

.fp-service-photo {
  height: 120px;
  border-radius: 10px;
}

.fp-gallery {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  gap: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.fp-gallery-main {
  min-height: 220px;
  height: 28vh;
  border-radius: 14px;
}

.fp-gallery-side {
  min-height: 220px;
  height: 28vh;
  border-radius: 14px;
}

.fp-quote {
  text-align: center;
  padding-top: 36px;
  padding-bottom: 36px;
  background: color-mix(in srgb, var(--xsurface, #f4efe6) 80%, transparent);
}

.fp-quote-mark {
  margin: 0;
  font-size: 42px;
  line-height: 1;
  color: var(--xaccent, #b14a2a);
  opacity: 0.55;
}

.fp-quote-text {
  margin: 4px auto 10px;
  max-width: 34rem;
  font-family: var(--xdisplay, inherit);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--xink, #2a2016);
}

.fp-quote-by {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--xmuted, #6e5c44);
}

.fp-close {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 18px;
  align-items: center;
  padding-bottom: 40px;
}

.fp-close-photo {
  min-height: 180px;
  height: 24vh;
  border-radius: 14px;
}

.fp-close-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fp-footer {
  margin-top: 0;
}

.fp-reveal {
  opacity: 1;
  transform: none;
  translate: 0 0;
  scale: 1;
}

.fp-page.move-gentle {
  --picker-motion-x: 0;
  --picker-motion-y: 28px;
  --picker-motion-scale: 0.975;
}

.fp-page.move-lively {
  --picker-motion-x: 0;
  --picker-motion-y: 52px;
  --picker-motion-scale: 1;
}

.fp-page.move-playful {
  --picker-motion-x: 0;
  --picker-motion-y: 52px;
  --picker-motion-scale: 0.88;
}

.fp-page.is-compact.move-gentle {
  --picker-motion-y: 10px;
  --picker-motion-scale: 0.985;
}

.fp-page.is-compact.move-lively {
  --picker-motion-y: 18px;
}

.fp-page.is-compact.move-playful {
  --picker-motion-y: 14px;
  --picker-motion-scale: 0.94;
}

.fp-page.move-gentle .fp-reveal:not(.is-inview) {
  opacity: 0;
  translate: var(--picker-motion-x) var(--picker-motion-y);
  scale: var(--picker-motion-scale);
}

.fp-page.move-lively .fp-reveal:not(.is-inview) {
  opacity: 0;
  translate: var(--picker-motion-x) var(--picker-motion-y);
  scale: var(--picker-motion-scale);
}

.fp-page.move-playful .fp-reveal:not(.is-inview) {
  opacity: 0;
  translate: var(--picker-motion-x) var(--picker-motion-y);
  scale: var(--picker-motion-scale);
}

/* These are the same one shot patterns used by the finished sites:
   Gentle uses the shared NAZ motion, Lively uses the Ranch House rise,
   and Playful uses the Mother Road card scale and stagger. */
.fp-page.move-gentle .fp-reveal {
  transition:
    opacity 560ms cubic-bezier(0.2, 0.65, 0.25, 1),
    translate 620ms cubic-bezier(0.2, 0.65, 0.25, 1),
    scale 700ms cubic-bezier(0.2, 0.65, 0.25, 1);
}

.fp-page.move-lively .fp-reveal {
  transition:
    opacity 850ms cubic-bezier(0.16, 0.7, 0.2, 1),
    translate 850ms cubic-bezier(0.16, 0.7, 0.2, 1);
}

.fp-page.move-playful .fp-reveal {
  transition:
    opacity 700ms ease,
    translate 800ms cubic-bezier(0.2, 0.72, 0.2, 1),
    scale 800ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.fp-page.move-gentle .fp-reveal.is-inview,
.fp-page.move-lively .fp-reveal.is-inview,
.fp-page.move-playful .fp-reveal.is-inview {
  opacity: 1;
  transform: none;
  translate: 0 0;
  scale: 1;
}

.fp-page.move-still .fp-reveal {
  opacity: 1;
  transform: none;
  translate: 0 0;
  scale: 1;
  transition: none;
}

.fp-page.move-playful .fp-service:nth-child(odd) {
  rotate: -1.1deg;
}

.fp-page.move-playful .fp-service:nth-child(even) {
  rotate: 1.1deg;
}

.fp-page.move-lively .fp-service:nth-child(odd) {
  --picker-motion-x: -64px;
  --picker-motion-y: 0;
}

.fp-page.move-lively .fp-service:nth-child(even) {
  --picker-motion-x: 64px;
  --picker-motion-y: 0;
}

.fp-page.is-compact.move-lively .fp-service:nth-child(odd) {
  --picker-motion-x: -14px;
}

.fp-page.is-compact.move-lively .fp-service:nth-child(even) {
  --picker-motion-x: 14px;
}

/* Live teaser */
/* Sloane finding: the corner placement covered the Continue button and
   summary Edit buttons. The teaser docks into the empty middle of the dark
   sidebar on desktop, where it can never overlap step content. */
.preview-teaser {
  position: fixed;
  left: 16px;
  bottom: 132px;
  /* Above the sidebar rail, which sits at 50. */
  z-index: 60;
  width: calc(var(--sidebar-width) - 32px);
  pointer-events: none;
}


.preview-teaser.is-button {
  pointer-events: auto;
  cursor: pointer;
}

.preview-teaser-inner {
  display: flex;
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.96);
  border: 1px solid rgba(42, 32, 22, 0.12);
  box-shadow: 0 14px 34px rgba(42, 32, 22, 0.16);
  backdrop-filter: blur(8px);
}

.preview-teaser.is-ready .preview-teaser-inner {
  border-color: rgba(177, 74, 42, 0.35);
  box-shadow: 0 16px 36px rgba(177, 74, 42, 0.16);
}

.preview-teaser-thumb {
  flex: 0 0 120px;
  width: 120px;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  background: #efe6d7;
  border: 1px solid rgba(42, 32, 22, 0.08);
}

.teaser-page-scale {
  width: 360px;
  height: 450px;
  transform: scale(0.333);
  transform-origin: top left;
  pointer-events: none;
}

.preview-teaser-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.preview-teaser-meter {
  height: 8px;
  border-radius: 999px;
  background: rgba(42, 32, 22, 0.08);
  overflow: hidden;
}

.preview-teaser-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b14a2a, #d9982e);
  transition: width 220ms ease;
}

.preview-teaser-copy {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.preview-teaser.is-ready .preview-teaser-copy {
  color: #8f3a1f;
}

/* Keep teaser clear of sticky step actions on tall phone layouts */
@media (max-width: 720px) {
  .preview-teaser {
    right: 12px;
    left: 12px;
    bottom: 92px;
    width: auto;
  }

  .preview-teaser-thumb {
    display: none;
  }

  .preview-teaser-inner {
    padding: 10px 12px;
  }

  .preview-teaser-copy {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fullpage-modal {
    padding: 8px;
  }

  .fullpage-modal-dialog {
    max-height: calc(100dvh - 16px);
    border-radius: 14px;
  }

  .fullpage-modal-top {
    flex-direction: column;
    gap: 10px;
  }

  .fullpage-modal-close {
    align-self: flex-end;
  }

  .fp-hero-classic,
  .fp-art-hero,
  .fp-close,
  .fp-gallery,
  .fp-service-grid {
    grid-template-columns: 1fr;
  }

  .fp-hero {
    min-height: 0;
  }

  .fp-hero-bold {
    min-height: 48vh;
  }

  .fp-service-photo,
  .fp-gallery-main,
  .fp-gallery-side,
  .fp-close-photo,
  .fp-classic-photo {
    min-height: 160px;
    height: 180px;
  }

  .fp-quote-text {
    font-size: 20px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .preview-teaser-fill {
    transition: none;
  }

  .fp-page.move-gentle .fp-reveal,
  .fp-page.move-lively .fp-reveal,
  .fp-page.move-playful .fp-reveal {
    opacity: 1 !important;
    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;
    animation: none !important;
  }
}

/* Sloane finding fix: teaser docking. Desktop stacks thumb over meta in
   the sidebar rail; the thumb fills the rail width. Phone reserves space
   under the page so the fixed pill never covers content or actions. */
.preview-teaser-inner {
  flex-direction: column;
}

.preview-teaser-thumb {
  flex: 0 0 auto;
  width: 100%;
  height: 196px;
}

.teaser-page-scale {
  width: 360px;
  height: 429px;
  transform: scale(0.4555);
  transform-origin: top left;
}

.preview-teaser .exp-page.arch-bold .xp-hero-bold {
  flex-basis: 48%;
}

.preview-teaser .exp-page.arch-classic .xp-hero {
  padding: 8px 18px 4px;
}

@media (max-height: 720px) {
  .preview-teaser-thumb {
    display: none;
  }
}

@media (max-width: 720px) {
  body.preview-teaser-active,
  body.preview-teaser-active.is-flow-scroll {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body.preview-teaser-active .site-header {
    grid-column: 1;
    grid-row: 1;
  }

  body.preview-teaser-active .page-main,
  body.preview-teaser-active.is-flow-scroll .page-main {
    grid-column: 1;
    grid-row: 2;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .preview-teaser {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
  }

  .preview-teaser-inner {
    flex-direction: row;
    align-items: center;
  }

  body.preview-teaser-active .page-main > main,
  body.preview-teaser-active.is-flow-scroll .page-main > main {
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 0;
  }

  body.preview-teaser-active .preview-teaser {
    grid-column: 1;
    grid-row: 3;
    position: static;
    margin: 8px 10px 10px;
  }
}

/* Sloane fix: on shorter desktop windows the two column avoid tiles
   overflowed the fixed panel and clipped behind a scrollbar. When height
   is tight the grid returns to four compact columns so all eight tiles
   stay fully visible. */
@media (min-width: 721px) and (max-height: 840px) {
  .step-body-chips .chip-grid:not(.chip-grid-tiles) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .step-body-chips .chip-grid:not(.chip-grid-tiles) .chip {
    min-height: 72px;
    padding: 10px 12px;
    font-size: 14px;
  }

  .step-body-chips .chip-sub {
    font-size: 11px;
  }
}

/* Sloane fix: the preview modal footer buttons read oversized against the
   preview content. Normal control scale. */
.fullpage-modal .btn,
.fullpage-modal-close {
  min-height: 40px;
  padding: 9px 16px;
  font-size: 14px;
}

/* Sloane fix: the looping lift and drift keyframes belong to the small
   card demos. On the full page preview they made the buttons pulse
   forever, which reads as a glitch. The full page shows movement through
   its scroll reveals only. */
.fp-page:not(.is-compact) .xp-cta,
.fp-page:not(.is-compact) .xp-nav-cta,
.fp-page:not(.is-compact) .xp-card {
  animation: none;
}

/* Play again control in the preview header. */
.fullpage-modal-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.fullpage-modal-replay {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 14px;
  color: var(--rust-dark);
  background: #fff;
  border: 1px solid rgba(177, 74, 42, 0.3);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.fullpage-modal-replay:hover {
  border-color: var(--rust);
}

.fullpage-modal-replay:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.fullpage-modal-replay svg {
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .fullpage-modal-replay {
    display: none;
  }
}

@media (max-width: 720px) {
  .fullpage-modal-controls {
    align-self: flex-end;
  }

  .fullpage-modal-replay span {
    display: none;
  }

  .fullpage-modal-replay {
    padding: 9px 11px;
  }
}

/* Sloane fix: the compact teaser thumbnail never scrolls, so the scroll
   observer never marks its sections in view and every one of them stayed
   at zero opacity, leaving the thumbnail blank under any movement choice
   except Still. Compact previews are always fully drawn. */
.fp-page.is-compact:not(.is-motion-demo) .fp-reveal {
  opacity: 1 !important;
  transform: none !important;
  translate: 0 0 !important;
  scale: 1 !important;
  animation: none !important;
  transition: none !important;
}

/* Sloane fix: kill every looping animation inside any composed preview,
   compact or full. The earlier rule spared compact, which left the teaser
   buttons pulsing on their own. Movement is shown by scroll reveals in the
   full preview and by the step cards, never by a preview idling. */
.fp-page .xp-cta,
.fp-page .xp-nav-cta,
.fp-page .xp-card,
.fp-page .xp-hero-photo,
.fp-page .xp-art-photo,
.fp-page .fp-service,
.fp-page .fp-gallery-item {
  animation: none !important;
}

/* Icon only replay control. */
.fullpage-modal-replay span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fullpage-modal-replay {
  gap: 0;
  min-width: 40px;
  padding: 9px;
  justify-content: center;
}

.fullpage-modal-replay svg {
  width: 18px;
  height: 18px;
}

/* ============================================================
   Sloane final pass.

   1. No composed preview ever animates on its own. The card demos keep
   their loops; the fp previews express movement only through scroll
   reveals, which are transitions and unaffected by this. */
.fp-page,
.fp-page * {
  animation: none !important;
}

/* 2. Dark palettes ground the Artistic layout. The artistic texture is a
   light watercolor, but Rich and deep and Dark and dramatic keep their
   light ink, which washed every word out. Under a dark palette the
   artistic page stands on the palette's own dark ground with the texture
   as a faint wash, so light ink reads everywhere. */
.exp-page.arch-artistic.color-rich,
.exp-page.arch-artistic.color-dark {
  background: var(--xbg);
  --xhero-title: var(--xink);
}

.exp-page.arch-artistic.color-rich .xp-texture,
.exp-page.arch-artistic.color-dark .xp-texture {
  opacity: 0.1;
}

/* 3. Dark palettes get dark section surfaces in the full preview. The
   light service cards under a dark palette held light ink on a light
   card, invisible. */
.fp-page.color-rich .fp-service,
.fp-page.color-dark .fp-service {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Sloane cleanup: the whole review page fits one desktop pane. The
   preview band tightens and the three contact fields share one row. */
.fullpage-cta-card {
  gap: 8px;
  margin: 6px 0 14px;
  padding: 12px 14px;
}

.fullpage-cta-help {
  font-size: 13px;
  line-height: 1.35;
}

@media (min-width: 721px) {
  [data-summary-form] .contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  [data-summary-form] .contact-grid .field.full {
    grid-column: auto;
  }
}

/* Sloane fix: the shape cards were the only cards with no photograph. The
   photo band doubles as the lesson, its corners follow the card's shape
   language. */
.shape-photo-band {
  flex: 0 0 auto;
  height: 64px;
  overflow: hidden;
}

.shape-photo-band .xp-photo-slot {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.shape-photo-band .xp-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.shape-photo-band.soft,
.shape-photo-band.soft .xp-photo-slot {
  border-radius: 18px;
}

.shape-photo-band.sharp,
.shape-photo-band.sharp .xp-photo-slot,
.shape-photo-band.callout,
.shape-photo-band.callout .xp-photo-slot {
  border-radius: 0;
}

.shape-photo-band.links,
.shape-photo-band.links .xp-photo-slot {
  border-radius: 6px;
}

/* ============================================================
   Artistic and unexpected, redesigned.

   The previous version layered a vertical label and copy on top of a full
   bleed watercolor, so text crossed text and everything washed out. This
   version is an editorial index: each element owns its own horizontal
   band, nothing overlaps, and the unexpected quality comes from scale
   contrast, an off centre rule, and numbered entries. */

.exp-page.arch-artistic {
  position: relative;
  --xhero-title: var(--xink);
  background: var(--xbg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* The old overlay elements are retired for this architecture. */
.exp-page.arch-artistic .xp-texture,
.exp-page.arch-artistic .xp-side-label,
.exp-page.arch-artistic .xp-art-grid,
.exp-page.arch-artistic .xp-art-aside,
.exp-page.arch-artistic .xp-art-detail {
  display: none !important;
}

.exp-page.arch-artistic .xp-art-top {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--xmuted);
}

.exp-page.arch-artistic .xp-art-brand {
  color: var(--xink);
}

.exp-page.arch-artistic .xp-art-headline {
  flex: 0 0 auto;
  padding: 16px 0 10px 20px;
  overflow: hidden;
}

.exp-page.arch-artistic .xp-title-crop {
  margin: 0;
  font-family: var(--xdisplay);
  font-size: 40px;
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--xink);
  white-space: nowrap;
}

/* The rule stops short of the right edge. Deliberate asymmetry with no
   element sitting on another. */
.exp-page.arch-artistic .xp-art-rule {
  flex: 0 0 auto;
  height: 1px;
  margin: 0 34% 0 20px;
  background: var(--xink);
  opacity: 0.5;
}

.exp-page.arch-artistic .xp-art-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
  gap: 18px;
  padding: 16px 20px 12px;
}

.exp-page.arch-artistic .xp-art-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding-top: 10px;
}

.exp-page.arch-artistic .xp-art-copy .xp-body {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}

.exp-page.arch-artistic .xp-cta-text {
  padding: 0;
  margin-top: 2px;
  background: transparent;
  color: var(--xaccent);
  border: 0;
  border-bottom: 1px solid var(--xaccent);
  border-radius: 0;
  font-size: 12px;
  font-weight: 800;
}

/* The figure sits lower than the copy: the off grid move, achieved with
   spacing rather than overlap. */
.exp-page.arch-artistic .xp-art-figure {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 26px;
}

.exp-page.arch-artistic .xp-art-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.exp-page.arch-artistic .xp-art-photo .xp-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.exp-page.arch-artistic .xp-art-caption {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--xmuted);
}

.exp-page.arch-artistic .xp-art-index {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0 20px 14px;
}

.exp-page.arch-artistic .xp-index-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid rgba(127, 127, 127, 0.28);
}

.exp-page.arch-artistic .xp-index-num {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--xaccent);
}

.exp-page.arch-artistic .xp-index-name {
  font-family: var(--xdisplay);
  font-size: 14px;
  font-weight: 700;
  color: var(--xink);
}

/* Full page preview: same architecture with room to breathe. */
.fp-page.arch-artistic:not(.is-compact) .xp-art-top {
  padding: 26px 40px 0;
  font-size: 11px;
}

.fp-page.arch-artistic:not(.is-compact) .xp-art-headline {
  padding: 30px 0 18px 40px;
}

.fp-page.arch-artistic:not(.is-compact) .xp-title-crop {
  font-size: clamp(52px, 8vw, 104px);
}

.fp-page.arch-artistic:not(.is-compact) .xp-art-rule {
  margin: 0 34% 0 40px;
}

.fp-page.arch-artistic:not(.is-compact) .xp-art-body {
  gap: 40px;
  padding: 34px 40px 26px;
}

.fp-page.arch-artistic:not(.is-compact) .xp-art-copy {
  gap: 14px;
  padding-top: 22px;
}

.fp-page.arch-artistic:not(.is-compact) .xp-art-copy .xp-body {
  font-size: 15px;
}

.fp-page.arch-artistic:not(.is-compact) .xp-cta-text {
  font-size: 15px;
}

.fp-page.arch-artistic:not(.is-compact) .xp-art-figure {
  margin-top: 64px;
  gap: 10px;
}

.fp-page.arch-artistic:not(.is-compact) .xp-art-caption {
  font-size: 11px;
}

.fp-page.arch-artistic:not(.is-compact) .xp-art-index {
  padding: 0 40px 34px;
}

.fp-page.arch-artistic:not(.is-compact) .xp-index-row {
  padding: 16px 0;
  gap: 22px;
}

.fp-page.arch-artistic:not(.is-compact) .xp-index-num {
  font-size: 12px;
}

.fp-page.arch-artistic:not(.is-compact) .xp-index-name {
  font-size: 26px;
}

@media (max-width: 720px) {
  .fp-page.arch-artistic:not(.is-compact) .xp-art-body {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .fp-page.arch-artistic:not(.is-compact) .xp-art-figure {
    margin-top: 0;
  }

  .fp-page.arch-artistic:not(.is-compact) .xp-art-rule {
    margin-right: 22%;
  }
}

/* The redesigned artistic bands live inside the full page hero section,
   so the sizing rules apply there too. */
.fp-page.arch-artistic:not(.is-compact) .fp-hero-artistic {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
  padding: 0;
  background: var(--xbg);
}

/* The photo fills its frame edge to edge; no letterbox bars. */
.exp-page.arch-artistic .xp-art-photo,
.fp-page.arch-artistic .xp-art-photo {
  display: block;
  width: 100%;
  overflow: hidden;
  background: transparent;
}

.exp-page.arch-artistic .xp-art-photo .xp-photo,
.fp-page.arch-artistic .xp-art-photo .xp-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.fp-page.arch-artistic:not(.is-compact) .xp-art-photo {
  aspect-ratio: 5 / 4;
}

/* The generated texture now lives only in the quote band, behind a scrim
   that keeps one short line at full contrast. */
.fp-section.fp-quote {
  position: relative;
  overflow: hidden;
}

.fp-quote-texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.fp-quote-texture .xp-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fp-quote-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(18, 15, 11, 0.78);
}

.fp-quote-copy {
  position: relative;
  z-index: 2;
}

.fp-quote-copy .fp-quote-mark {
  color: #f6e2b8;
  opacity: 1;
}

.fp-quote-copy .fp-quote-text {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.fp-quote-copy .fp-quote-by {
  color: rgba(255, 255, 255, 0.86);
}

/* Clear the retired artistic grid placement. Those rules pinned the photo
   to column one and the copy to column two, which swapped the new columns
   and shrank the photo to a sliver. Source order decides now. */
.exp-page.arch-artistic .xp-art-copy,
.exp-page.arch-artistic .xp-art-photo,
.exp-page.arch-artistic .xp-title-crop,
.fp-page.arch-artistic .xp-art-copy,
.fp-page.arch-artistic .xp-art-photo,
.fp-page.arch-artistic .xp-title-crop {
  grid-column: auto;
  grid-row: auto;
}

.exp-page.arch-artistic .xp-art-photo,
.fp-page.arch-artistic .xp-art-photo {
  height: auto;
  margin-left: 0;
  border-radius: 0;
  box-shadow: none;
}

.exp-page.arch-artistic .xp-art-copy,
.fp-page.arch-artistic .xp-art-copy {
  min-width: 0;
}

.exp-page.arch-artistic .xp-art-photo {
  aspect-ratio: 4 / 3;
}

/* ============================================================
   Artistic headline scaling and the detail block under the copy. */

/* The headline sizes from its own container, so a card, a pop up, and a
   full page all bleed by a similar proportion instead of a fixed size
   that crops wildly at one scale. Longer business lines step down. */
.exp-page.arch-artistic .xp-art-headline,
.fp-page.arch-artistic .xp-art-headline {
  container-type: inline-size;
}

.exp-page.arch-artistic .xp-title-crop {
  font-size: 15cqw;
}

.exp-page.arch-artistic .xp-title-crop.is-title-md { font-size: 12.5cqw; }
.exp-page.arch-artistic .xp-title-crop.is-title-lg { font-size: 10.5cqw; }
.exp-page.arch-artistic .xp-title-crop.is-title-xl { font-size: 8.5cqw; }

.fp-page.arch-artistic:not(.is-compact) .xp-title-crop {
  font-size: 13cqw;
}

.fp-page.arch-artistic:not(.is-compact) .xp-title-crop.is-title-md { font-size: 11cqw; }
.fp-page.arch-artistic:not(.is-compact) .xp-title-crop.is-title-lg { font-size: 9cqw; }
.fp-page.arch-artistic:not(.is-compact) .xp-title-crop.is-title-xl { font-size: 7.4cqw; }

/* Detail block: fills the space under the copy with the visitor's own
   picks rather than leaving a white void. */
.xp-art-detail-block {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  width: 100%;
  min-width: 0;
}

.xp-art-detail-photo {
  display: block;
  flex: 0 0 auto;
  width: 46%;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.xp-art-detail-photo .xp-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.xp-art-marks {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 3px;
}

.xp-art-mark {
  display: block;
  height: 2px;
  background: var(--xaccent);
  opacity: 0.75;
}

.xp-art-mark:nth-child(1) { width: 100%; }
.xp-art-mark:nth-child(2) { width: 62%; }
.xp-art-mark:nth-child(3) { width: 34%; }

.exp-page.arch-artistic .xp-art-copy,
.fp-page.arch-artistic .xp-art-copy {
  height: 100%;
}

.fp-page.arch-artistic:not(.is-compact) .xp-art-detail-block {
  gap: 18px;
  padding-top: 34px;
}

.fp-page.arch-artistic:not(.is-compact) .xp-art-detail-photo {
  max-width: 220px;
}

.fp-page.arch-artistic:not(.is-compact) .xp-art-mark {
  height: 3px;
}

/* Sloane fix: descenders were clipped. The headline uses tight leading for
   the editorial look, which makes its text box shorter than the letters,
   and the container crops the horizontal bleed. Padding gives the g, y,
   and p room to sit inside the box without loosening the leading. */
.exp-page.arch-artistic .xp-title-crop,
.fp-page.arch-artistic .xp-title-crop {
  line-height: 1;
  padding-top: 0.06em;
  padding-bottom: 0.18em;
}

/* Sloane fix: the headline bleeding off the right edge was a deliberate
   editorial device, but it reads as a rendering fault, so it is retired.
   The headline now wraps and always fits, staying oversized for the
   editorial scale without ever cutting a word. */
.exp-page.arch-artistic .xp-art-headline,
.fp-page.arch-artistic .xp-art-headline {
  overflow: visible;
  padding-right: 20px;
}

.fp-page.arch-artistic:not(.is-compact) .xp-art-headline {
  padding-right: 40px;
}

.exp-page.arch-artistic .xp-title-crop,
.fp-page.arch-artistic .xp-title-crop {
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* With wrapping there is no crop to control, so the steps only keep long
   names from running to three or more lines. */
.exp-page.arch-artistic .xp-title-crop { font-size: 13cqw; }
.exp-page.arch-artistic .xp-title-crop.is-title-md { font-size: 11cqw; }
.exp-page.arch-artistic .xp-title-crop.is-title-lg { font-size: 9.5cqw; }
.exp-page.arch-artistic .xp-title-crop.is-title-xl { font-size: 8cqw; }

.fp-page.arch-artistic:not(.is-compact) .xp-title-crop { font-size: 11cqw; }
.fp-page.arch-artistic:not(.is-compact) .xp-title-crop.is-title-md { font-size: 9.5cqw; }
.fp-page.arch-artistic:not(.is-compact) .xp-title-crop.is-title-lg { font-size: 8cqw; }
.fp-page.arch-artistic:not(.is-compact) .xp-title-crop.is-title-xl { font-size: 6.8cqw; }

/* Choice cards use the approved preview card treatment. */
.choice-label {
  order: -1;
  border-top: 0;
  border-bottom: 1px solid rgba(42, 32, 22, 0.1);
  background: #fff;
  padding-right: 92px;
}

.choice-card-overlay {
  position: absolute;
  inset: 52px 0 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(18, 15, 11, 0.28));
  transition: opacity 160ms ease;
}

.choice-expand {
  top: 5px;
  right: 6px;
  bottom: auto;
  width: auto;
  min-width: 76px;
  height: 42px;
  min-height: 42px;
  gap: 6px;
  padding: 0 10px;
  border-color: transparent;
  box-shadow: none;
  opacity: 0;
  transform: translateY(2px);
}

.choice-preview-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
}

.choice-wrap:hover .choice-expand,
.choice-wrap:focus-within .choice-expand,
.choice-wrap:hover .premium-badge,
.choice-wrap:focus-within .premium-badge,
.choice-wrap:hover .choice-card-overlay,
.choice-wrap:focus-within .choice-card-overlay {
  opacity: 1;
  transform: none;
}

.choice-wrap .premium-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  opacity: 0;
  color: #fff;
  background: rgba(92, 61, 10, 0.88);
  border-color: rgba(255, 255, 255, 0.48);
  transition: opacity 160ms ease, transform 160ms ease;
  transform: translateY(2px);
}

@media (hover: none), (pointer: coarse) {
  .choice-expand,
  .choice-wrap .premium-badge {
    opacity: 1;
    transform: none;
  }

  .choice-card-overlay {
    opacity: 0.7;
  }
}

/* Large inset card preview. The picker stays visible around the edges. */
.preview-modal {
  padding: clamp(12px, 3vw, 34px);
}

.preview-modal-dialog {
  width: min(94vw, 1440px);
  height: min(90dvh, 980px);
  max-width: none;
  max-height: none;
  padding: 14px;
}

.fullpage-modal-dialog {
  width: min(94vw, 1440px);
  max-height: calc(100dvh - 32px);
}

.preview-modal-body {
  display: block;
  padding: 12px;
}

.preview-modal-visual {
  width: 100%;
  min-height: 100%;
  padding: 0;
}

.preview-modal-close,
.fullpage-modal-close {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  line-height: 1;
  color: #b42318;
  border-color: rgba(180, 35, 24, 0.34);
}

.preview-modal-close:hover,
.preview-modal-close:focus-visible,
.fullpage-modal-close:hover,
.fullpage-modal-close:focus-visible {
  color: #fff;
  background: #b42318;
  border-color: #b42318;
}

.preview-modal-close-icon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0;
}

.preview-modal-close-icon::before,
.preview-modal-close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.preview-modal-close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Optional second choices appear as controlled supporting cues. */
.secondary-color-soft { --xsecondary: #e8b7b0; }
.secondary-color-fresh { --xsecondary: #7eb6d4; }
.secondary-color-rich { --xsecondary: #b0893f; }
.secondary-color-bright { --xsecondary: #2f6bff; }
.secondary-color-earthy { --xsecondary: #7a8f4a; }
.secondary-color-dark { --xsecondary: #d9982e; }

.exp-page[class*="secondary-color-"] .fp-service:nth-child(2),
.exp-page[class*="secondary-color-"] .xp-art-rule,
.exp-page[class*="secondary-color-"] .fp-close {
  border-color: var(--xsecondary);
  box-shadow: inset 4px 0 0 var(--xsecondary);
}

.secondary-type-elegant .fp-quote-text { font-family: "Times New Roman", Times, serif; }
.secondary-type-classic .fp-quote-text { font-family: Georgia, "Times New Roman", serif; }
.secondary-type-friendly .fp-quote-text { font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
.secondary-type-strong .fp-quote-text { font-family: "Arial Black", Arial, sans-serif; }
.secondary-type-neutral .fp-quote-text { font-family: "Segoe UI", system-ui, sans-serif; }
.secondary-type-hand .fp-quote-text { font-family: Georgia, "Times New Roman", serif; font-style: italic; }

.secondary-density-very-open .fp-gallery { gap: 24px; }
.secondary-density-balanced .fp-gallery { gap: 14px; }
.secondary-density-content .fp-gallery { gap: 8px; }
.secondary-density-everything .fp-gallery { gap: 4px; }

.secondary-shape-soft .fp-close .xp-cta { border-radius: 999px; }
.secondary-shape-sharp .fp-close .xp-cta { border-radius: 0; }
.secondary-shape-links .fp-close .xp-cta {
  padding: 0;
  color: var(--xaccent);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.secondary-shape-callout .fp-close .xp-cta { border-radius: 0; }
.secondary-shape-callout .fp-close .xp-cta::after {
  content: "";
  display: inline-block;
  margin-left: 8px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
}

/* Artistic fullness changes composition, not just spacing. */
.exp-page.arch-artistic.density-very-open .xp-art-headline {
  padding-top: 22px;
  padding-bottom: 22px;
}

.exp-page.arch-artistic.density-very-open .xp-art-index .xp-index-row:nth-child(n + 2),
.fp-page.arch-artistic.density-very-open .fp-service:nth-child(n + 2),
.fp-page.arch-artistic.density-very-open .fp-gallery-side {
  display: none;
}

.exp-page.arch-artistic.density-very-open .xp-art-body,
.fp-page.arch-artistic.density-very-open .fp-service-grid {
  grid-template-columns: 1fr;
}

.exp-page.arch-artistic.density-content .xp-art-headline,
.fp-page.arch-artistic.density-content .fp-section {
  padding-top: 16px;
  padding-bottom: 16px;
}

.exp-page.arch-artistic.density-content .xp-art-body {
  gap: 8px;
}

.fp-page.arch-artistic.density-content .fp-service-grid {
  grid-template-columns: 1.35fr 0.8fr;
}

.fp-page.arch-artistic.density-content .fp-service:first-child {
  grid-row: span 2;
}

.fp-page.arch-artistic.density-content .fp-service:nth-child(n + 2) .fp-service-photo {
  height: 64px;
}

.fp-page.arch-artistic.density-content .fp-gallery {
  grid-template-columns: 1.8fr 0.7fr;
}

.exp-page.arch-artistic.density-everything .xp-art-headline {
  padding-top: 8px;
  padding-bottom: 8px;
}

.exp-page.arch-artistic.density-everything .xp-art-body,
.fp-page.arch-artistic.density-everything .fp-service-grid {
  gap: 6px;
}

.fp-page.arch-artistic.density-everything .fp-section {
  padding-top: 12px;
  padding-bottom: 12px;
}

.fp-page.arch-artistic.density-everything .fp-service-photo {
  height: 72px;
}

.fp-page.arch-artistic.density-everything .fp-gallery-main,
.fp-page.arch-artistic.density-everything .fp-gallery-side {
  min-height: 130px;
  height: 17vh;
}

/* Final preview explanations connect visible areas to picker choices. */
.fp-inspectable {
  position: relative;
  outline: 0 solid transparent;
  transition: outline-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.fp-inspectable[data-preview-choice] {
  cursor: help;
}

.fp-inspectable[data-preview-choice]:hover,
.fp-inspectable[data-preview-choice]:focus-visible,
.fp-inspectable[data-preview-choice].is-explained {
  z-index: 2;
  outline: 2px solid color-mix(in srgb, var(--xaccent, #b14a2a) 72%, white);
  outline-offset: -2px;
  box-shadow: 0 10px 24px rgba(42, 32, 22, 0.16);
}

.choice-card .fp-page:not(.is-motion-demo) .fp-reveal,
.preview-modal-visual .fp-page:not(.is-motion-demo) .fp-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Expanded option previews are scrollable pages, not one screen squeezed into
   the modal height. Let the page grow naturally and keep each page band at its
   intended height. */
.preview-modal-visual > .fp-page:not(.is-compact) {
  height: auto;
  min-height: 100%;
  flex: 0 0 auto;
}

.preview-modal-visual > .fp-page:not(.is-compact) > * {
  flex-shrink: 0;
}

/* A saved movement choice must not shift sections inside an unrelated option
   preview. Movement is demonstrated only on the Movement step. */
.choice-card .fp-page:not(.is-motion-demo) .fp-reveal,
.preview-modal-visual .fp-page:not(.is-motion-demo) .fp-reveal {
  translate: 0 0 !important;
  scale: 1 !important;
  rotate: 0deg !important;
}

.step-shell h2:focus {
  outline: none;
}

.card-exp .fp-page.is-compact .fp-hero {
  min-height: 220px;
}

.card-exp .fp-page.is-compact {
  height: 1000px;
}

.card-exp .fp-page.is-compact .fp-section {
  padding-top: 14px;
  padding-bottom: 14px;
}

.card-exp .fp-page.is-compact > * {
  flex-shrink: 0;
}

/* Tiny cards have finite room. Keep their meaning visible without allowing a
   long service line to crowd the image or the next card. */
.choice-card .fp-page.is-compact .fp-service {
  min-width: 0;
}

.choice-card .fp-page.is-compact .fp-service .xp-h {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.choice-card .fp-page.is-compact .fp-service .fp-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.preview-teaser .fp-page.is-compact {
  height: 429px;
  min-height: 429px;
}

.preview-teaser .fp-nav {
  min-height: 30px;
  padding: 5px 8px;
  gap: 5px;
  font-size: 7px;
}

.preview-teaser .fp-hero {
  height: 100px;
  min-height: 100px;
  max-height: 100px;
  padding: 8px 10px;
  overflow: hidden;
}

.preview-teaser .fp-classic-photo {
  min-height: 84px;
  height: 84px;
}

.preview-teaser .fp-presence {
  max-height: 40px;
  padding: 5px 10px;
  overflow: hidden;
}

.preview-teaser .fp-services {
  height: 88px;
  padding: 6px 10px;
  overflow: hidden;
}

.preview-teaser .fp-service-grid {
  gap: 5px;
  margin-top: 4px;
}

.preview-teaser .fp-service {
  gap: 2px;
  padding: 3px;
}

.preview-teaser .fp-service-photo {
  height: 32px;
}

.preview-teaser .fp-service .fp-text,
.preview-teaser .fp-presence .fp-text {
  display: none;
}

.preview-teaser .fp-service .xp-h,
.preview-teaser .fp-presence .xp-h {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-teaser .fp-gallery {
  height: 58px;
  min-height: 58px;
  padding: 4px 10px;
  gap: 5px;
}

.preview-teaser .fp-gallery-main,
.preview-teaser .fp-gallery-side {
  min-height: 50px;
  height: 50px;
}

.preview-teaser .fp-quote {
  height: 48px;
  min-height: 48px;
  padding: 6px 10px;
  overflow: hidden;
}

.preview-teaser .fp-quote-mark,
.preview-teaser .fp-quote-by {
  display: none;
}

.preview-teaser .fp-quote-text {
  margin: 0;
  font-size: 11px;
}

.preview-teaser .fp-close {
  height: 54px;
  min-height: 54px;
  padding: 5px 10px;
  gap: 7px;
  overflow: hidden;
}

.preview-teaser .fp-close-photo {
  min-height: 44px;
  height: 44px;
}

.preview-teaser .fp-footer {
  min-height: 28px;
  padding: 5px 8px;
  font-size: 7px;
}

/* The sidebar builds only the page areas the visitor has reached. */
.preview-teaser .fp-page.teaser-progressive:not(.teaser-has-presence) .fp-presence {
  display: none;
}

.preview-teaser .fp-page.teaser-progressive:not(.teaser-has-density) .fp-density-links,
.preview-teaser .fp-page.teaser-progressive:not(.teaser-has-density) .fp-services {
  display: none;
}

.preview-teaser .fp-page.teaser-progressive:not(.teaser-has-imagery) .fp-gallery {
  display: none;
}

.preview-teaser .fp-page.teaser-progressive:not(.teaser-has-type) .fp-quote {
  display: none;
}

.preview-teaser .fp-page.teaser-progressive:not(.teaser-has-shape) .fp-close {
  display: none;
}

.preview-teaser .fp-page.teaser-progressive:not(.teaser-has-movement) .fp-footer {
  display: none;
}

.fp-choice-callout[hidden] {
  display: none !important;
}

.fp-choice-callout {
  position: absolute;
  z-index: 6;
  right: 28px;
  bottom: 74px;
  width: min(540px, calc(100% - 56px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: var(--ink);
  background: rgba(255, 253, 248, 0.97);
  border: 1px solid rgba(42, 32, 22, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(42, 32, 22, 0.24);
  backdrop-filter: blur(12px);
}

.fp-choice-callout-label,
.fp-choice-callout-text {
  margin: 0;
}

.fp-choice-callout-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--rust-dark);
}

.fp-choice-callout-text {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
}

.fp-choice-callout-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 0;
  font-size: 24px;
  cursor: pointer;
}

@media (max-width: 720px) {
  .preview-modal {
    padding: 10px;
  }

  .preview-modal-dialog {
    width: calc(100vw - 20px);
    height: calc(100dvh - 20px);
  }

  .fp-choice-callout {
    position: absolute;
    right: 8px;
    bottom: 66px;
    width: calc(100% - 16px);
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .fp-choice-callout-close {
    grid-column: 2;
    grid-row: 1;
  }

  .fp-choice-callout .btn {
    grid-column: 1 / -1;
  }
}

/* Picker movement is intentionally clearer than finished site motion.
   Compact cards replay when they enter or are selected. Large previews
   replay each finite entrance whenever a section returns to view. */
@keyframes picker-site-gentle {
  from {
    opacity: 0;
    translate: var(--picker-motion-x) var(--picker-motion-y);
    scale: var(--picker-motion-scale);
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes picker-site-lively {
  from {
    opacity: 0;
    translate: var(--picker-motion-x) var(--picker-motion-y);
    scale: var(--picker-motion-scale);
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes picker-site-playful {
  from {
    opacity: 0;
    translate: var(--picker-motion-x) var(--picker-motion-y);
    scale: var(--picker-motion-scale);
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

.choice-card .fp-page.is-motion-demo.move-gentle .fp-reveal.is-inview,
.preview-modal-visual .fp-page.is-motion-demo.move-gentle .fp-reveal.is-inview {
  animation: picker-site-gentle 700ms cubic-bezier(0.2, 0.65, 0.25, 1) both !important;
}

.choice-card .fp-page.is-motion-demo.move-lively .fp-reveal.is-inview,
.preview-modal-visual .fp-page.is-motion-demo.move-lively .fp-reveal.is-inview {
  animation: picker-site-lively 850ms cubic-bezier(0.16, 0.7, 0.2, 1) both !important;
}

.choice-card .fp-page.is-motion-demo.move-playful .fp-reveal.is-inview,
.preview-modal-visual .fp-page.is-motion-demo.move-playful .fp-reveal.is-inview {
  animation: picker-site-playful 800ms cubic-bezier(0.2, 0.72, 0.2, 1) both !important;
}

.choice-card .fp-page.is-motion-demo .fp-services,
.preview-modal-visual .fp-page.is-motion-demo .fp-services {
  animation-delay: 70ms !important;
}

.choice-card .fp-page.is-motion-demo .fp-gallery,
.preview-modal-visual .fp-page.is-motion-demo .fp-gallery {
  animation-delay: 140ms !important;
}

.choice-card .fp-page.is-motion-demo .fp-quote,
.preview-modal-visual .fp-page.is-motion-demo .fp-quote {
  animation-delay: 210ms !important;
}

.choice-card .fp-page.is-motion-demo .fp-close,
.preview-modal-visual .fp-page.is-motion-demo .fp-close {
  animation-delay: 280ms !important;
}

.choice-card .fp-page.is-motion-demo .fp-service:nth-child(2),
.preview-modal-visual .fp-page.is-motion-demo .fp-service:nth-child(2) {
  animation-delay: 90ms !important;
}

.choice-card .fp-page.is-motion-demo .fp-service:nth-child(3),
.preview-modal-visual .fp-page.is-motion-demo .fp-service:nth-child(3) {
  animation-delay: 180ms !important;
}

@media (prefers-reduced-motion: reduce) {
  .choice-card .fp-page.is-motion-demo .fp-reveal,
  .preview-modal-visual .fp-page.is-motion-demo .fp-reveal {
    opacity: 1 !important;
    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;
    animation: none !important;
  }
}

/* Final movement replay resets sections without animating the reset frame.
   JavaScript removes this class before replaying the selected entrance. */
.fullpage-modal-body.is-motion-resetting .fp-page:not(.move-still) .fp-reveal {
  opacity: 0 !important;
  transform: none !important;
  translate: 0 0 !important;
  scale: 1 !important;
  transition: none !important;
}

.fullpage-modal-body.is-motion-resetting .fp-page.move-still .fp-reveal {
  opacity: 1 !important;
  transform: none !important;
  translate: 0 0 !important;
  scale: 1 !important;
  transition: none !important;
}

/* Full page density applies to every architecture. Balanced keeps the
   baseline composition; the other choices change amount and spacing. */
.fp-density-links {
  display: none;
}

.fp-page.density-everything .fp-density-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 16px;
  background: var(--xsurface);
  border-top: 1px solid color-mix(in srgb, var(--xline) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--xline) 72%, transparent);
}

.fp-page.density-everything .fp-density-links span {
  display: grid;
  min-height: 32px;
  place-items: center;
  padding: 5px 8px;
  color: var(--xink);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
  background: var(--xcard);
  border: 1px solid var(--xline);
  border-radius: var(--xradius);
}

.choice-card .fp-page.is-compact.density-very-open .fp-service-grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 58%;
}

.choice-card .fp-page.is-compact.density-very-open .fp-service:nth-child(n + 2),
.choice-card .fp-page.is-compact.density-very-open .fp-gallery-side {
  display: none;
}

.choice-card .fp-page.is-compact.density-very-open .fp-services {
  padding-top: 40px;
  padding-bottom: 40px;
}

.choice-card .fp-page.is-compact.density-content .fp-hero {
  min-height: 180px;
}

.choice-card .fp-page.is-compact.density-content .fp-section {
  padding-top: 8px;
  padding-bottom: 8px;
}

.choice-card .fp-page.is-compact.density-content .fp-service-grid {
  gap: 7px;
}

.choice-card .fp-page.is-compact.density-everything .fp-hero {
  min-height: 145px;
}

.choice-card .fp-page.is-compact.density-everything .fp-presence {
  padding-top: 6px;
  padding-bottom: 6px;
}

.choice-card .fp-page.is-compact.density-everything .fp-density-links {
  gap: 4px;
  padding: 7px 12px;
}

.choice-card .fp-page.is-compact.density-everything .fp-density-links span {
  min-height: 24px;
  padding: 3px 5px;
  font-size: 9px;
}

.choice-card .fp-page.is-compact.density-everything .fp-section {
  padding-top: 6px;
  padding-bottom: 6px;
}

.choice-card .fp-page.is-compact.density-everything .fp-service-grid {
  gap: 5px;
}

.choice-card .fp-page.is-compact.density-everything .fp-service-photo {
  height: 62px;
}

.fp-page:not(.is-compact).density-very-open .fp-section {
  padding: 46px 34px;
}

.fp-page:not(.is-compact).density-very-open .fp-service-grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 34rem;
}

.fp-page:not(.is-compact).density-very-open .fp-service:nth-child(n + 2),
.fp-page:not(.is-compact).density-very-open .fp-gallery-side {
  display: none;
}

.fp-page:not(.is-compact).density-very-open .fp-gallery {
  grid-template-columns: minmax(0, 1fr);
  padding-top: 24px;
  padding-bottom: 24px;
}

.fp-page:not(.is-compact).density-very-open .fp-gallery-main {
  min-height: 280px;
  height: 34vh;
}

.fp-page:not(.is-compact).density-very-open .fp-quote {
  padding-top: 58px;
  padding-bottom: 58px;
}

.fp-page:not(.is-compact).density-content .fp-section {
  padding: 18px 22px;
}

.fp-page:not(.is-compact).density-content .fp-service-grid {
  gap: 10px;
}

.fp-page:not(.is-compact).density-content .fp-service-photo {
  height: 94px;
}

.fp-page:not(.is-compact).density-content .fp-gallery {
  grid-template-columns: 1.75fr 0.75fr;
  gap: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.fp-page:not(.is-compact).density-content .fp-gallery-main,
.fp-page:not(.is-compact).density-content .fp-gallery-side {
  min-height: 176px;
  height: 22vh;
}

.fp-page:not(.is-compact).density-content .fp-quote {
  padding-top: 26px;
  padding-bottom: 26px;
}

.fp-page:not(.is-compact).density-everything .fp-nav {
  padding: 9px 14px;
}

.fp-page:not(.is-compact).density-everything .fp-section {
  padding: 12px 16px;
}

.fp-page:not(.is-compact).density-everything .fp-service-grid {
  gap: 6px;
  margin-top: 8px;
}

.fp-page:not(.is-compact).density-everything .fp-service {
  gap: 5px;
  padding: 6px;
}

.fp-page:not(.is-compact).density-everything .fp-service-photo {
  height: 66px;
}

.fp-page:not(.is-compact).density-everything .fp-gallery {
  gap: 5px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.fp-page:not(.is-compact).density-everything .fp-gallery-main,
.fp-page:not(.is-compact).density-everything .fp-gallery-side {
  min-height: 122px;
  height: 16vh;
}

.fp-page:not(.is-compact).density-everything .fp-quote {
  padding-top: 18px;
  padding-bottom: 18px;
}

.fp-page:not(.is-compact).density-everything .fp-close {
  padding-bottom: 18px;
}

/* The calm sidebar still carries every completed visual decision through
   its lower bands. Movement stays static so the small preview is readable. */
.preview-teaser .fp-services,
.preview-teaser .fp-quote,
.preview-teaser .fp-close {
  color: var(--xink);
  background: color-mix(in srgb, var(--xsurface) 88%, var(--xbg));
}

.preview-teaser .fp-service {
  color: var(--xink);
  background: color-mix(in srgb, var(--xcard) 62%, var(--xbg));
  border-color: color-mix(in srgb, var(--xaccent) 34%, transparent);
}

.preview-teaser .fp-services .xp-h,
.preview-teaser .fp-service .xp-h,
.preview-teaser .fp-quote-text,
.preview-teaser .fp-close .xp-h {
  font-family: var(--xdisplay);
  color: var(--xink);
}

.preview-teaser .fp-page.density-very-open .fp-service-grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 68%;
}

.preview-teaser .fp-page.density-very-open .fp-service:nth-child(n + 2),
.preview-teaser .fp-page.density-very-open .fp-gallery-side {
  display: none;
}

.preview-teaser .fp-page.density-very-open .fp-gallery {
  grid-template-columns: minmax(0, 1fr);
  padding-left: 18px;
  padding-right: 18px;
}

.preview-teaser .fp-page.density-content .fp-service-grid {
  gap: 3px;
}

.preview-teaser .fp-page.density-content .fp-service {
  padding: 2px 3px;
}

.preview-teaser .fp-page.density-content .fp-service-photo {
  height: 27px;
}

.preview-teaser .fp-page.density-content .fp-gallery {
  grid-template-columns: 1.9fr 0.6fr;
  gap: 3px;
}

.preview-teaser .fp-page.density-everything .fp-service-grid {
  gap: 2px;
}

.preview-teaser .fp-page.density-everything .fp-service {
  padding: 2px;
  border-radius: 3px;
}

.preview-teaser .fp-page.density-everything .fp-service-photo {
  height: 24px;
  border-radius: 3px;
}

.preview-teaser .fp-page.density-everything .fp-gallery {
  gap: 2px;
}

.preview-teaser .fp-page.shape-soft .fp-service,
.preview-teaser .fp-page.shape-soft .fp-gallery-main,
.preview-teaser .fp-page.shape-soft .fp-gallery-side,
.preview-teaser .fp-page.shape-soft .fp-close-photo {
  border-radius: 10px;
}

.preview-teaser .fp-page.shape-sharp .fp-service,
.preview-teaser .fp-page.shape-sharp .fp-gallery-main,
.preview-teaser .fp-page.shape-sharp .fp-gallery-side,
.preview-teaser .fp-page.shape-sharp .fp-close-photo {
  border-radius: 0;
}

.preview-teaser .fp-page.shape-links .fp-service {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  border-width: 0 0 1px;
  border-radius: 0;
}

.preview-teaser .fp-page.shape-callout .fp-service {
  border-radius: 0;
  border-left: 3px solid var(--xaccent);
}

@media (prefers-reduced-motion: reduce) {
  .fullpage-modal-body.is-motion-resetting .fp-reveal {
    opacity: 1 !important;
    transform: none !important;
    translate: 0 0 !important;
    scale: 1 !important;
    transition: none !important;
  }
}