:root {
  --porcelain: #f5f1e9;
  --putty: #d8cfc4;
  --ink: #24201d;
  --red: #c92532;
  --mauve: #b99aa3;
  --olive: #a6aa78;
  --paper: #fbf8f2;
  --line: rgba(53, 42, 38, .15);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

/* Readability pass — keep the luxury spacing, but stop the interface from
   turning into miniature print. This intentionally overrides the older
   compressed guided-mode labels/buttons that dropped to 8–10px. */
.eyebrow,
.nav-project small,
.nav-progress span,
.portal-back,
.direction-label small,
.direction-label b,
.preview-link,
.upgrade-package small,
.concept-card small,
.option-tag,
.catalogue-heading-note small,
.payment-flow-preview__heading span,
.selection-design-approval > span,
.final-notes-card span,
.selection-event-log__eyebrow,
.selection-event-log__header > small,
.selection-disclaimer {
  font-size: max(11px, .72rem);
}

.guide-player-heading small,
.guide-player-heading button,
.guide-feature-prompt__title,
.guide-controls button,
.guide-note > span,
.guide-note small,
.guide-continue,
.guide-reopen,
.show-feature-button,
.approved-badge,
.live-preview-hint,
.direction-image > span {
  font-size: max(10px, .68rem);
}

.guide-caption,
.guide-feature-prompt__question,
.guide-feature-prompt__result,
.decision-row button,
.catalogue-options p,
.catalogue-includes,
.experience-includes,
.selection-item,
.selection-event strong,
.selection-event span,
.selection-event-log__intro,
.selection-event-log__empty {
  font-size: max(12px, .78rem);
}

@media (min-width: 761px) {
  .walkthrough-guided-active .guide-player-heading small,
  .walkthrough-guided-active .guide-player-heading button,
  .walkthrough-guided-active .guide-controls button,
  .walkthrough-guided-active .guide-continue,
  .walkthrough-guided-active .show-feature-button,
  .walkthrough-guided-active .decision-row button {
    font-size: 10.5px !important;
  }

  .walkthrough-guided-active .guide-caption,
  .walkthrough-guided-active[data-guide-chapter="catalogue"] .guide-caption,
  .walkthrough-guided-active[data-guide-chapter="phase-three"] .guide-caption,
  .walkthrough-guided-active[data-guide-chapter="selections"] .guide-caption {
    font-size: 12.5px !important;
    line-height: 1.44 !important;
  }

  .walkthrough-guided-active .experience-card > small,
  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-card > small {
    font-size: 10.5px !important;
  }

  .walkthrough-guided-active .experience-card p,
  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-card p {
    font-size: 11.5px !important;
    line-height: 1.36 !important;
  }

  .walkthrough-guided-active .experience-includes {
    font-size: 10.5px !important;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-card h3 {
    font-size: 22px !important;
  }

  .walkthrough-guided-active .selection-design-approval > span,
  .walkthrough-guided-active .selection-design-approval .design-approve-button {
    font-size: 10.5px !important;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
button, a { font: inherit; }
button { color: inherit; }
img { max-width: 100%; display: block; }

.walkthrough-nav { height: 78px; padding: 0 4vw; position: fixed; z-index: 30; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 170px minmax(240px, 1fr) 220px auto; align-items: center; gap: 28px; border-bottom: 1px solid rgba(59,45,42,.14); background: rgba(250,247,241,.86); box-shadow: 0 12px 30px rgba(46,34,31,.06); backdrop-filter: blur(20px) saturate(1.2); }
.nav-brand { width: max-content; color: var(--ink); text-decoration: none; display: flex; align-items: center; }
.nav-brand img { width: 82px; height: 69px; display: block; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(169,112,13,.12)); }
.nav-project { min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.nav-project small { color: #8e777b; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nav-project strong { overflow: hidden; font: 500 14px/1.2 var(--serif); white-space: nowrap; text-overflow: ellipsis; }
.nav-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.nav-progress span { font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.nav-progress i { height: 2px; overflow: hidden; background: rgba(48,38,35,.13); }
.nav-progress b { width: 14.285%; height: 100%; display: block; background: linear-gradient(90deg, var(--red), var(--mauve)); transition: width .35s ease; }
.portal-back { padding: 11px 15px; border: 1px solid rgba(75,53,55,.28); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }

.chapter-rail { position: fixed; z-index: 20; top: 50%; right: 22px; display: grid; gap: 8px; transform: translateY(-50%); }
.chapter-rail a { width: 34px; height: 34px; position: relative; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 99px; color: #fff; background: rgba(38,30,28,.5); box-shadow: 0 5px 18px rgba(30,22,20,.12); backdrop-filter: blur(12px); font-size: 9px; text-decoration: none; transition: width .25s ease, background .25s ease; }
.chapter-rail b { width: 0; overflow: hidden; white-space: nowrap; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: 0; }
.chapter-rail a:hover, .chapter-rail a:focus-visible { width: 116px; padding: 0 12px; grid-template-columns: auto 1fr; gap: 7px; }
.chapter-rail a:hover b, .chapter-rail a:focus-visible b { width: auto; opacity: 1; }
.chapter-rail a.is-active { color: var(--ink); background: var(--paper); }

.chapter { min-height: 100vh; padding: 120px max(7vw, 70px) 80px; position: relative; overflow: hidden; scroll-margin-top: 0; }
.hero-chapter { padding: 0; display: grid; align-items: center; background: #54443f; }
.hero-backdrop { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; filter: saturate(.8) contrast(1.03); }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31,23,21,.8) 0%, rgba(38,27,26,.42) 42%, rgba(42,30,28,.08) 76%), linear-gradient(180deg, rgba(23,17,16,.12), rgba(23,17,16,.36)); }
.glass-card { border: 1px solid rgba(255,255,255,.28); background: linear-gradient(140deg, rgba(68,48,47,.57), rgba(104,77,74,.22)); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 24px 80px rgba(27,19,18,.26); backdrop-filter: blur(18px) saturate(1.15); }
.hero-card { width: min(620px, 50vw); margin: 100px 0 0 8vw; padding: clamp(38px, 4.2vw, 62px); position: relative; z-index: 2; color: #fff; border-radius: 28px; }
.eyebrow { margin: 0 0 20px; display: flex; align-items: center; gap: 10px; color: #80686d; font-size: 11px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow span { width: 28px; height: 1px; display: inline-block; background: var(--red); }
.hero-card .eyebrow, .section-heading.inverse .eyebrow, .experience-card small { color: rgba(255,255,255,.72); }
.hero-card h1, .section-heading h2, .selection-panel h2 { margin: 0; font: 500 clamp(45px, 5.4vw, 80px)/.98 var(--serif); letter-spacing: -.04em; }
.hero-card h1 em, .section-heading h2 em, .selection-panel h2 em { color: #d8acb8; font-weight: 500; }
.hero-card > p:not(.eyebrow) { max-width: 570px; margin: 28px 0 0; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.7; }
.hero-project-record { margin-top: 28px; padding: 15px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(255,255,255,.08); }
.hero-project-record span { display: grid; gap: 4px; }
.hero-project-record span + span { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.18); }
.hero-project-record small { color: rgba(255,255,255,.62); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hero-project-record strong { font: 500 21px/1.2 var(--serif); }
.hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 22px; }
.primary-button { padding: 15px 20px; display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; color: #fff; background: linear-gradient(110deg, #946a76, #b99aa3); border: 1px solid rgba(255,255,255,.28); box-shadow: 0 12px 28px rgba(55,35,40,.19); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.text-link { color: #fff; font-size: 12px; text-underline-offset: 5px; }
.hero-note { position: absolute; z-index: 2; right: 5vw; bottom: 34px; display: grid; justify-items: end; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero-note span { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.hero-note strong { margin-top: 5px; font: 500 18px/1.2 var(--serif); }

.hero-guide { width: min(380px, 33vw); position: absolute; z-index: 4; top: 104px; right: max(9vw, 150px); color: #fff; }
.guide-choice, .guide-player { overflow: hidden; border: 1px solid rgba(255,255,255,.68); border-radius: 26px; color: var(--ink); background: linear-gradient(145deg, rgba(249,244,239,.94), rgba(216,183,192,.88)); box-shadow: inset 0 1px rgba(255,255,255,.78), 0 24px 70px rgba(76,48,56,.22); backdrop-filter: blur(24px) saturate(1.18); }
.guide-choice { padding: 30px; }
.guide-kicker { margin: 0 0 17px; display: flex; align-items: center; gap: 9px; color: #82636b; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.guide-kicker span { width: 22px; height: 1px; background: var(--red); }
.guide-choice h2 { max-width: 310px; margin: 0; font: 500 clamp(28px, 2.35vw, 38px)/1.06 var(--serif); letter-spacing: -.025em; }
.guide-choice > p:not(.guide-kicker) { margin: 16px 0 0; color: #67585a; font-size: 13px; line-height: 1.55; }
.guide-choice-actions { margin-top: 24px; display: grid; gap: 9px; }
.guide-choice-actions button, .guide-controls button, .guide-player-heading button, .guide-reopen, .guide-continue { border: 0; cursor: pointer; }
.guide-start { min-height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: linear-gradient(110deg, #8d626e, #b88f9a); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.guide-start span { color: #fff; }
.guide-solo { min-height: 40px; color: #4f4142; background: transparent; font-size: 11px; text-decoration: underline; text-underline-offset: 5px; }
.guide-start:hover, .guide-start:focus-visible { box-shadow: 0 12px 30px rgba(20,14,14,.22); transform: translateY(-1px); }

.guide-player { padding: 14px; }
.guide-player-heading { padding: 3px 3px 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.guide-player-heading > div:first-child { display: grid; gap: 4px; }
.guide-step-actions { display: flex; gap: 6px; }
.guide-player-heading small { color: #84676f; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.guide-player-heading strong { font: 500 17px/1.1 var(--serif); }
.guide-player-heading button { padding: 7px 10px; border: 1px solid rgba(74,52,57,.17); border-radius: 99px; color: #6e545b; background: rgba(255,255,255,.42); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.guide-video-wrap { position: relative; overflow: hidden; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: #6d5852; }
.guide-video-wrap::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); pointer-events: none; }
/* The avatar clips are square (544x544) but this frame is not always square —
   on short viewports it becomes landscape (1.16) to save vertical room. With a
   centred `cover` crop that shaved the top and bottom evenly, which cut off the
   top of Kita's head. Bias the crop upward so any trimming comes off the desk
   at the bottom, never her face. */
.guide-video-wrap video, .guide-video-wrap .guide-walkthrough-image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 8%; }
.guide-video-wrap .guide-walkthrough-image { object-fit: contain; background: #f3eee8; }
.guide-video-play { width: 58px; height: 58px; position: absolute; z-index: 2; top: 50%; left: 50%; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #fff; background: rgba(42,31,30,.48); box-shadow: 0 12px 32px rgba(25,18,17,.24); backdrop-filter: blur(12px); transform: translate(-50%, -50%); cursor: pointer; transition: opacity .2s ease, transform .2s ease; }
.guide-video-play:hover, .guide-video-play:focus-visible { transform: translate(-50%, -50%) scale(1.05); }
.guide-video-play.is-hidden { opacity: 0; pointer-events: none; }
.guide-caption { min-height: 54px; margin: 13px 4px 0; color: #47383a; font: 500 13px/1.45 var(--serif); }
.guide-feature-prompt { margin-top: 10px; padding: 10px; display: grid; gap: 8px; border: 1px solid rgba(74,52,57,.15); border-radius: 14px; background: rgba(255,255,255,.46); }
.guide-feature-prompt__title { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #765b62; }
.guide-feature-prompt__question { margin: 0; color: #4d3c3f; font: 500 12px/1.4 var(--sans); }
.guide-feature-prompt__actions { display: grid; gap: 6px; }
.guide-feature-prompt__actions .guide-prompt-option { width: 100%; min-height: 34px; border: 1px solid rgba(74,52,57,.18); border-radius: 99px; color: #5d4a4d; background: rgba(255,255,255,.55); font-size: 10px; font-weight: 600; cursor: pointer; }
.guide-feature-prompt__actions .guide-prompt-option:hover,
.guide-feature-prompt__actions .guide-prompt-option:focus-visible { background: #8d626e; border-color: #8d626e; color: #fff; }
.guide-feature-prompt__actions .guide-prompt-option.is-selected { background: #8d626e; border-color: #8d626e; color: #fff; }
.guide-feature-prompt__result { margin: 0; color: #6a5558; font-size: 11px; line-height: 1.35; }
.guide-controls { margin-top: 10px; display: flex; gap: 8px; }
.guide-controls button { flex: 1; min-height: 38px; border: 1px solid rgba(74,52,57,.17); border-radius: 99px; color: #61494f; background: rgba(255,255,255,.38); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.guide-controls button:hover, .guide-controls button:focus-visible, .guide-player-heading button:hover, .guide-player-heading button:focus-visible { color: #fff; background: #8d626e; }
.guide-note { margin-top: 12px; padding: 12px; display: grid; gap: 7px; border: 1px solid rgba(74,52,57,.14); border-radius: 14px; background: rgba(255,255,255,.34); }
.guide-note > span { color: #765b62; font-size: 8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.guide-note textarea { width: 100%; min-height: 48px; resize: vertical; border: 0; outline: 0; color: #3f3233; background: transparent; font: 400 12px/1.45 var(--sans); }
.guide-note textarea::placeholder { color: rgba(63,50,51,.48); }
.guide-note small { color: rgba(63,50,51,.5); font-size: 8px; }
.guide-continue { width: 100%; min-height: 46px; margin-top: 12px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; color: #302627; background: linear-gradient(110deg, #f8eeee, #d8acb8); font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.guide-reopen { min-height: 44px; margin-left: auto; padding: 0 16px; display: flex; align-items: center; gap: 18px; border: 1px solid rgba(255,255,255,.32); border-radius: 99px; color: #fff; background: rgba(67,49,47,.64); box-shadow: 0 16px 42px rgba(24,17,16,.24); backdrop-filter: blur(16px); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.walkthrough-guided-active .hero-note { opacity: 0; }

[hidden] { display: none !important; }

@media (min-width: 761px) and (max-width: 1200px) {
  .hero-card { padding: 38px 42px; }
  .hero-card h1 { font-size: 52px; }
  .hero-card > p:not(.eyebrow) { margin-top: 20px; font-size: 15px; line-height: 1.55; }
  .hero-project-record { margin-top: 20px; }
  .hero-actions { margin-top: 22px; }
}

.light-chapter { background: radial-gradient(circle at 88% 10%, rgba(185,154,163,.2), transparent 26%), var(--paper); }
.section-heading { max-width: 920px; margin-bottom: 52px; }
.section-heading h2 { font-size: clamp(43px, 5vw, 72px); }
.section-heading > p:last-child { max-width: 700px; margin: 24px 0 0; color: #6d605c; font-size: 16px; line-height: 1.7; }
.section-heading.inverse { position: relative; z-index: 2; color: #fff; }
.section-heading.inverse > p:last-child { color: rgba(255,255,255,.7); }
.section-heading.inverse h2 em { color: #e2bec7; }
.scope-layout { display: grid; grid-template-columns: minmax(300px, .75fr) 1.5fr; gap: 24px; }
.scope-price-card { min-height: 390px; padding: 38px; display: flex; flex-direction: column; border: 1px solid rgba(122,91,98,.2); border-radius: 26px; background: linear-gradient(150deg, #9f747f, #604d4d); color: #fff; box-shadow: 0 24px 60px rgba(73,48,54,.16); }
.scope-price-card small { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.scope-price-card strong { margin-top: auto; font: 500 clamp(54px, 5vw, 78px)/1 var(--serif); }
.scope-price-card sup { font: 700 12px/1 var(--sans); letter-spacing: .12em; }
.scope-price-card span { margin-top: 8px; color: #f1d9df; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.scope-price-card .project-total { margin-top: 28px; padding-top: 22px; display: grid; gap: 4px; border-top: 1px solid rgba(255,255,255,.2); }
.scope-price-card .project-total small { color: rgba(255,255,255,.58); font-size: 9px; }
.scope-price-card .project-total b { font: 500 27px/1.15 var(--serif); }
.scope-price-card .project-total em { color: rgba(255,255,255,.62); font-size: 11px; font-style: normal; text-transform: uppercase; letter-spacing: .1em; }
.scope-price-card p { max-width: 420px; margin: 28px 0 0; color: rgba(255,255,255,.76); line-height: 1.65; }
.deposit-next-step { margin-top: 18px; padding: 15px 16px; display: grid; gap: 5px; border: 1px solid rgba(255,255,255,.24); border-radius: 15px; background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.06)); box-shadow: inset 0 1px rgba(255,255,255,.18); }
.deposit-next-step small { color: #f2dce2; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.deposit-next-step strong { color: #fff; font: 500 20px/1.1 var(--serif); }
.deposit-next-step span { color: rgba(255,255,255,.76); font-size: 11px; line-height: 1.4; }
.deposit-next-step b { color: #fff; font-weight: 800; }
.included-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.included-grid article, .scope-summary-card { min-height: 185px; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.64); box-shadow: 0 12px 40px rgba(49,37,34,.05); }
.scope-summary-card { width: 100%; display: block; color: var(--ink); text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.scope-summary-card:hover, .scope-summary-card:focus-visible { outline: none; border-color: rgba(160,109,124,.58); background: rgba(255,255,255,.92); box-shadow: 0 18px 48px rgba(69,47,50,.11); transform: translateY(-3px); }
.included-grid span { color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.included-grid h3 { margin: 28px 0 8px; font: 500 26px/1.1 var(--serif); }
.included-grid p, .scope-boundary p { margin: 0; color: #71635f; font-size: 14px; line-height: 1.6; }
.scope-summary-card b { margin-top: 11px; display: block; color: #936975; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.scope-outline-button { width: 100%; margin-top: 14px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.34); border-radius: 10px; color: #fff; background: rgba(255,255,255,.09); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: .2s ease; }
.scope-outline-button:hover, .scope-outline-button:focus-visible { outline: none; color: #4d3c3f; background: #fff; transform: translateY(-2px); }
.scope-boundary { margin-top: 24px; padding: 22px 28px; display: grid; grid-template-columns: 140px 1fr; gap: 22px; border: 1px solid rgba(166,170,120,.44); border-radius: 16px; background: rgba(166,170,120,.13); }
.scope-boundary span { color: #6d7242; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* Scope chapter header row: writing on the left, the guided-walkthrough bubble on the right. */
.scope-hero-row { display: grid; grid-template-columns: minmax(320px, 1fr) 420px; align-items: stretch; gap: 24px; }
#scope .scope-hero-row .section-heading { margin-bottom: 0; }
.scope-guide-dock { min-height: 0; position: relative; }
.scope-guide-dock:empty { display: none; }
.scope-hero-row:has(.scope-guide-dock:empty) { grid-template-columns: 1fr; }
.scope-guide-dock .hero-guide { width: 100%; position: static; z-index: auto; color: inherit; }
.scope-guide-dock .guide-choice { padding: 22px; }
.scope-guide-dock .guide-player { height: 100%; padding: 12px 14px 12px 12px; display: grid; grid-template-columns: minmax(124px, 148px) 1fr; column-gap: 14px; row-gap: 5px; grid-template-areas: "head head" "video caption" "video controls" "video cta"; align-content: start; }
.scope-guide-dock .guide-player-heading { grid-area: head; padding-bottom: 6px; margin-bottom: 0; border-bottom: 1px solid rgba(74,52,57,.14); }
.scope-guide-dock .guide-player-heading strong { white-space: nowrap; font-size: 15px; }
.scope-guide-dock .guide-player-heading small { font-size: 8px; }
.scope-guide-dock .guide-video-wrap { grid-area: video; aspect-ratio: 4 / 5; align-self: start; }
.scope-guide-dock .guide-caption { grid-area: caption; min-height: 0; margin: 0; font-size: 12px; line-height: 1.35; }
.scope-guide-dock .guide-controls { grid-area: controls; margin-top: 0; align-self: end; }
.scope-guide-dock .guide-controls button { min-height: 34px; font-size: 9px; letter-spacing: .06em; }
.scope-guide-dock .guide-note { display: none; }
.scope-guide-dock .guide-continue { grid-area: cta; width: auto; min-height: 38px; min-width: 180px; margin: 2px 0 0 auto; background: linear-gradient(110deg, #c9788d, #e7aebc); color: #fff; font-size: 9px; }

/* The approved project is composed as one presentation screen on desktop. */
#scope { height: calc(100svh - 78px); min-height: 620px; padding-top: clamp(16px, 2.2vh, 24px); padding-bottom: 14px; display: flex; flex-direction: column; }
#scope .section-heading { max-width: 980px; margin-bottom: 10px; }
#scope .section-heading .eyebrow { margin-bottom: 7px; }
#scope .section-heading h2 { font-size: clamp(38px, 4vw, 56px); line-height: .98; }
#scope .section-heading > p:last-child { max-width: 820px; margin-top: 8px; font-size: 14px; line-height: 1.4; }
#scope .scope-hero-row { margin-bottom: 10px; }
#scope .scope-layout { grid-template-columns: minmax(235px, .62fr) 1.85fr; gap: 12px; }
#scope .scope-price-card { min-height: 250px; padding: 20px 24px; border-radius: 22px; }
#scope .scope-price-card strong { font-size: clamp(43px, 3.6vw, 54px); }
#scope .scope-price-card span { margin-top: 5px; font-size: 10px; }
#scope .scope-price-card .project-total { margin-top: 12px; padding-top: 12px; }
#scope .scope-price-card .project-total b { font-size: 24px; }
#scope .scope-price-card p { margin-top: 14px; font-size: 12px; line-height: 1.45; }
#scope .deposit-next-step { margin-top: 12px; padding: 10px 12px; border-radius: 13px; }
#scope .deposit-next-step strong { font-size: 17px; }
#scope .deposit-next-step span { font-size: 10px; }
#scope .included-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
#scope .included-grid article, #scope .scope-summary-card { min-height: 135px; padding: 18px 20px; border-radius: 17px; }
#scope .included-grid span { font-size: 9px; }
#scope .included-grid h3 { margin: 14px 0 6px; font-size: 20px; }
#scope .included-grid p { font-size: 12px; line-height: 1.42; }
#scope .scope-boundary { margin-top: 12px; padding: 10px 16px; grid-template-columns: 120px 1fr; gap: 16px; border-radius: 13px; }
#scope .scope-boundary span { font-size: 10px; }
#scope .scope-boundary p { font-size: 11.5px; line-height: 1.42; }

body.scope-detail-open { overflow: hidden; }
.scope-detail-dialog { width: min(1180px, calc(100vw - 44px)); height: min(760px, calc(100dvh - 44px)); max-width: none; max-height: none; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.56); border-radius: 26px; background: #f5f0ea; box-shadow: 0 42px 120px rgba(31,22,22,.4); }
.scope-detail-dialog::backdrop { background: rgba(31,23,22,.72); backdrop-filter: blur(12px); }
.scope-detail-shell { height: 100%; display: grid; grid-template-rows: 74px 1fr; }
.scope-detail-shell > header { padding: 0 22px 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(84,61,61,.15); background: rgba(250,247,242,.96); }
.scope-detail-shell > header > div { display: grid; gap: 3px; }
.scope-detail-shell > header span { color: #9a6e7a; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.scope-detail-shell > header strong { font: 500 24px/1.1 var(--serif); }
.scope-detail-shell > header button { width: 43px; height: 43px; flex: 0 0 auto; border: 1px solid rgba(78,56,55,.19); border-radius: 50%; color: #4d403d; background: #fff; font-size: 26px; cursor: pointer; }
.scope-detail-layout { min-height: 0; display: grid; grid-template-columns: 245px 1fr; }
.scope-detail-nav { padding: 22px 14px; display: grid; align-content: start; gap: 8px; overflow-y: auto; border-right: 1px solid rgba(84,61,61,.13); background: linear-gradient(165deg, rgba(185,154,163,.24), rgba(166,170,120,.12)), #eee6df; }
.scope-detail-nav button { min-height: 50px; padding: 11px 14px; border: 1px solid transparent; border-radius: 12px; color: #5f514d; background: transparent; font-size: 13px; font-weight: 700; line-height: 1.25; text-align: left; cursor: pointer; transition: .2s ease; }
.scope-detail-nav button:hover, .scope-detail-nav button:focus-visible { outline: none; border-color: rgba(145,100,113,.28); background: rgba(255,255,255,.58); }
.scope-detail-nav button.is-active { color: #fff; border-color: rgba(255,255,255,.25); background: linear-gradient(120deg, #8e626e, #af8993); box-shadow: 0 12px 26px rgba(96,58,70,.17); }
.scope-detail-content { min-width: 0; padding: 34px 40px 40px; overflow-y: auto; background: radial-gradient(circle at 92% 3%, rgba(185,154,163,.2), transparent 25%), #fbf8f3; }
.scope-detail-content:focus { outline: none; }
.scope-detail-heading { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.scope-detail-heading small { display: block; margin-bottom: 9px; color: #9f6f7b; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.scope-detail-heading h2 { margin: 0; font: 500 clamp(34px, 4vw, 52px)/1 var(--serif); letter-spacing: -.035em; }
.scope-detail-heading > strong { color: #9b6977; font: 500 28px/1 var(--serif); white-space: nowrap; }
.scope-detail-intro { max-width: 780px; margin: 15px 0 0; color: #6e605b; font-size: 15px; line-height: 1.6; }
.scope-detail-facts { margin: 24px 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(86,64,60,.14); border-radius: 16px; background: rgba(255,255,255,.7); }
.scope-detail-facts div { min-height: 82px; padding: 16px 18px; display: grid; align-content: center; gap: 5px; }
.scope-detail-facts div + div { border-left: 1px solid rgba(86,64,60,.12); }
.scope-detail-facts small { color: #8d7b75; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.scope-detail-facts strong { font: 500 20px/1.2 var(--serif); }
.scope-detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.scope-detail-panel { padding: 22px 24px; border: 1px solid rgba(85,62,58,.14); border-radius: 18px; background: rgba(255,255,255,.72); }
.scope-detail-panel.boundary { background: linear-gradient(145deg, rgba(185,154,163,.14), rgba(166,170,120,.12)), #fff; }
.scope-detail-panel h3 { margin: 0 0 15px; font: 500 23px/1.2 var(--serif); }
.scope-detail-panel ul { margin: 0; padding: 0; display: grid; gap: 9px; list-style: none; }
.scope-detail-panel li { padding-left: 20px; position: relative; color: #5f534f; font-size: 14px; line-height: 1.45; }
.scope-detail-panel li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #8c945e; font-weight: 700; }
.scope-detail-panel.boundary li::before { content: "—"; color: #b03e4a; }
.scope-record-note { margin-top: 18px; padding: 15px 18px; display: flex; gap: 14px; border: 1px solid rgba(174,133,145,.24); border-radius: 14px; color: #695b57; background: rgba(216,196,198,.2); font-size: 13px; line-height: 1.5; }
.scope-record-note strong { flex: 0 0 auto; color: #8e626e; }

.direction-chapter { min-height: 100vh; padding-right: 0; background: linear-gradient(135deg, #2d2724, #5f4a4c 58%, #9c7b83); }
.direction-chapter::after { content: "E"; position: absolute; right: 0; bottom: -14vw; color: rgba(255,255,255,.035); font: 500 46vw/1 var(--serif); }
.direction-chapter > .section-heading { max-width: min(58vw, 760px); padding-right: 18px; }
.directions-guide-dock { width: min(380px, 33vw); position: absolute; z-index: 5; top: 104px; right: max(7vw, 70px); }
.directions-guide-dock:empty { display: none; }
.directions-guide-dock .hero-guide { width: 100%; position: static; top: auto; right: auto; color: inherit; }
.direction-gallery { position: relative; z-index: 2; }
.direction-gallery-bar { padding-right: max(7vw, 70px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.direction-gallery-bar p { margin: 0; color: rgba(255,255,255,.56); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.direction-gallery-bar p span { margin-right: 12px; color: #e9c5ce; }
.direction-gallery-bar > div { display: flex; gap: 8px; }
.direction-gallery-bar button { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; transition: .2s ease; }
.direction-gallery-bar button:hover, .direction-gallery-bar button:focus-visible { color: #332829; background: #fff; transform: translateY(-2px); }
.direction-gallery-bar button:disabled { opacity: .3; cursor: default; transform: none; }
/* scroll-snap-type is PROXIMITY, not mandatory, on purpose. With `x mandatory`
   the browser pinned this track at scrollLeft 0 and silently rejected every
   programmatic scroll — the arrows updated the counter while the cards never
   moved (the "dead click"). Proximity still snaps on swipe/drag but lets
   scrollTo work. Do not change this back to mandatory. */
.direction-track { margin-top: 22px; padding: 0 max(7vw, 70px) 28px 0; display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; }
.direction-track::-webkit-scrollbar { display: none; }
.direction-card { flex: 0 0 min(76vw, 1040px); overflow: hidden; scroll-snap-align: start; border: 1px solid rgba(255,255,255,.18); border-radius: 28px; color: #fff; background: rgba(255,255,255,.085); box-shadow: 0 26px 80px rgba(19,13,13,.22); backdrop-filter: blur(14px); }
.direction-card.is-recommended { border-color: rgba(235,196,206,.8); box-shadow: 0 0 0 1px rgba(235,196,206,.2), 0 28px 90px rgba(19,13,13,.28); }
.direction-card.is-upgraded { background: linear-gradient(145deg, rgba(179,126,141,.34), rgba(255,255,255,.08)); }
.direction-card.is-approved { border-color: #f4d5dd; box-shadow: 0 0 0 3px rgba(244,213,221,.28), 0 28px 90px rgba(19,13,13,.32); }
.direction-card.is-guided-feature-highlight .live-site-preview::before {
  content: "";
  inset: 9px;
  position: absolute;
  border: 2px solid rgba(224, 170, 188, 0.96);
  border-radius: 14px;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.26), 0 0 32px rgba(214, 166, 183, 0.46);
  animation: guided-feature-pulse 1.4s ease-in-out infinite;
}
.direction-card.is-guided-feature-highlight .live-site-preview::after {
  content: "Featured image + color control focus";
  position: absolute;
  left: 18px;
  top: 16px;
  z-index: 3;
  border: 1px solid rgba(224, 170, 188, 0.96);
  border-radius: 99px;
  padding: 7px 11px;
  color: #fff;
  background: rgba(36, 26, 24, 0.68);
  backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.direction-card.is-guided-hover-highlight .live-site-preview::before {
  content: "";
  inset: 9px;
  position: absolute;
  border: 2px solid rgba(216, 197, 158, 0.95);
  border-radius: 14px;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22), 0 0 30px rgba(187, 171, 136, 0.46);
  animation: guided-hover-pulse 1.25s ease-in-out infinite;
}
.direction-card.is-guided-hover-highlight .live-site-preview::after {
  content: "Collection hover + carousel sweep";
  position: absolute;
  left: 18px;
  top: 16px;
  z-index: 3;
  border: 1px solid rgba(216, 197, 158, 0.95);
  border-radius: 99px;
  padding: 7px 11px;
  color: #fff;
  background: rgba(36, 26, 24, 0.68);
  backdrop-filter: blur(10px);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.direction-card.is-guided-payment-highlight .live-site-preview::before {
  content: "";
  inset: 9px;
  position: absolute;
  border: 2px solid rgba(235,196,206,.96);
  border-radius: 14px;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 0 3px rgba(255,255,255,.2), 0 0 32px rgba(235,196,206,.62);
  animation: guided-contact-pulse 1.4s ease-in-out infinite;
}
.direction-card.is-guided-payment-highlight .live-site-preview::after {
  content: "Ready Now gallery · Add to Cart · Stripe";
  position: absolute;
  left: 18px;
  top: 16px;
  z-index: 3;
  border: 1px solid rgba(235,196,206,.86);
  border-radius: 99px;
  padding: 7px 11px;
  color: #fff;
  background: rgba(36,26,24,.68);
  backdrop-filter: blur(10px);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.direction-card.is-guided-contact-highlight .live-site-preview::before {
  content: "";
  inset: 9px;
  position: absolute;
  border: 2px solid rgba(235,196,206,.96);
  border-radius: 14px;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 0 3px rgba(255,255,255,.2), 0 0 32px rgba(235,196,206,.62);
  animation: guided-contact-pulse 1.4s ease-in-out infinite;
}
.direction-card.is-guided-contact-highlight .live-site-preview::after {
  content: "Contact section · lead capture";
  position: absolute;
  left: 18px;
  top: 16px;
  z-index: 3;
  border: 1px solid rgba(235,196,206,.86);
  border-radius: 99px;
  padding: 7px 11px;
  color: #fff;
  background: rgba(36,26,24,.68);
  backdrop-filter: blur(10px);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
@keyframes guided-contact-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}
.guided-category-cue {
  display: none;
  position: absolute;
  z-index: 4;
  /* Keep the pointer itself on the slideshow's far-right edge. The label
     sits to its left so it never reads like a second card or blocks the cue. */
  right: 2%;
  bottom: 23%;
  align-items: flex-end;
  flex-direction: row-reverse;
  gap: 8px;
  pointer-events: none;
  transform: translateX(var(--guided-category-shift, 0px));
  transition: transform 760ms cubic-bezier(.2,.8,.2,1);
}
.guided-category-cue.is-active { display: flex; }
.guided-category-cue__cursor {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  color: #fff;
  background: rgba(159,99,116,.92);
  box-shadow: 0 0 0 4px rgba(235,196,206,.3), 0 0 26px rgba(235,196,206,.85);
  font-size: 24px;
  line-height: 1;
  animation: guided-category-tap 2.2s ease-in-out infinite;
}
.guided-category-cue__cursor::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(235,196,206,.82);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.65);
}
.guided-category-cue.is-tapping .guided-category-cue__cursor::after {
  animation: guided-category-ripple .78s ease-out both;
}
.guided-category-cue__label {
  padding: 9px 12px;
  border: 1px solid rgba(235,196,206,.7);
  border-radius: 99px;
  color: #fff;
  background: rgba(39,29,28,.78);
  box-shadow: 0 10px 26px rgba(28,20,19,.18);
  backdrop-filter: blur(12px);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  animation: guided-category-label 2.2s ease-in-out infinite;
}
.guided-category-cue__label b { color: #f3cfd9; font-weight: 800; }
@keyframes guided-category-tap {
  0%, 100% { opacity: .5; transform: translate(22px,-14px) scale(.82); }
  40%, 60% { opacity: 1; transform: translate(0,0) scale(1); }
}
@keyframes guided-category-label {
  0%, 100% { opacity: .45; }
  45%, 60% { opacity: 1; }
}
@keyframes guided-category-ripple {
  0% { opacity: .95; transform: scale(.65); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes guided-hover-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}
@keyframes guided-feature-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.direction-frame { margin: 14px 14px 0; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: #e8e0d9; box-shadow: 0 18px 45px rgba(22,15,14,.2); }
.direction-browser-bar { height: 34px; padding: 0 14px; display: flex; align-items: center; gap: 7px; color: #857873; background: #f0ebe5; }
.direction-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #c3aeb2; }
.direction-browser-bar span { margin-left: 8px; font-size: 9px; letter-spacing: .06em; }
.live-fullscreen-button { margin-left: auto; padding: 7px 11px; border: 1px solid rgba(91,68,69,.2); border-radius: 99px; color: #59494a; background: rgba(255,255,255,.62); font: 700 9px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: .2s ease; }
.live-fullscreen-button:hover, .live-fullscreen-button:focus-visible { color: #fff; border-color: #9a6d78; background: #9a6d78; }
.live-fullscreen-button.is-guided-target {
  position: relative;
  z-index: 5;
  color: #fff;
  border-color: #c9788d;
  background: linear-gradient(110deg, #9f6374, #c9788d);
  box-shadow: 0 0 0 3px rgba(235,196,206,.56), 0 0 24px rgba(235,196,206,.82);
  animation: guided-fullscreen-pulse 1.25s ease-in-out infinite;
}
@keyframes guided-fullscreen-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(235,196,206,.42), 0 0 18px rgba(235,196,206,.55); }
  50% { box-shadow: 0 0 0 5px rgba(255,255,255,.48), 0 0 30px rgba(235,196,206,.95); }
}
.live-site-preview { width: 100%; position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #fff; }
.live-site-preview iframe { width: 1440px; height: 810px; max-width: none; position: absolute; inset: 0 auto auto 0; display: block; border: 0; background: #fff; transform: scale(var(--live-preview-scale, .72)); transform-origin: top left; will-change: transform; }
.live-preview-hint { padding: 9px 13px; position: absolute; right: 14px; bottom: 14px; z-index: 2; border: 1px solid rgba(255,255,255,.32); border-radius: 99px; color: #fff; background: rgba(39,29,28,.74); box-shadow: 0 8px 24px rgba(28,20,19,.18); backdrop-filter: blur(12px); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; animation: live-hint-fade 1s ease 4s forwards; }
@keyframes live-hint-fade { to { opacity: .18; } }
.direction-image { width: 100%; padding: 0; position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border: 0; background: #d8cfc4; cursor: zoom-in; }
.direction-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.direction-image:hover img { transform: scale(1.018); }
.direction-image > span { position: absolute; right: 15px; bottom: 15px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.28); border-radius: 99px; color: #fff; background: rgba(38,29,27,.7); backdrop-filter: blur(12px); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.direction-card-copy { padding: 24px 30px 28px; }
.direction-label { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.direction-label small { color: #e0b5c0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.direction-label b { padding: 8px 11px; border: 1px solid rgba(255,255,255,.23); border-radius: 99px; color: #fff; background: rgba(187,137,150,.3); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.direction-card-copy h3 { margin: 13px 0 8px; font: 500 clamp(32px, 3.2vw, 47px)/1.02 var(--serif); }
.direction-card-copy > p { max-width: 760px; margin: 0; color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.62; }
.direction-card-copy .preview-link { max-width: 420px; margin-top: 20px; color: #fff; border-color: rgba(255,255,255,.22); }
.design-actions { margin-top: 22px; display: flex; align-items: stretch; gap: 14px; }
.design-actions .preview-link { width: min(310px, 42%); margin: 0; padding: 15px 4px; }
.design-approve-button { min-width: 255px; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; color: #392d2d; background: linear-gradient(135deg, #f5e5e8, #ddb8c2); box-shadow: 0 10px 30px rgba(22,15,14,.16); font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: .22s ease; }
.design-approve-button:hover, .design-approve-button:focus-visible { background: #fff; transform: translateY(-2px); }
.design-approve-button span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(55,39,39,.25); border-radius: 50%; }
.design-approve-button.is-approved { color: #fff; border-color: #a67481; background: #a67481; box-shadow: 0 12px 32px rgba(47,28,33,.26); }
.design-approve-button.is-approved span { color: #50353c; border-color: #fff; background: #fff; }
.design-approve-button.premium { color: #fff; border-color: rgba(255,255,255,.4); background: linear-gradient(135deg, #9f6d7a, #7d5360); }
.upgrade-package { margin-top: 22px; padding: 20px 22px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(33,23,23,.24); }
.upgrade-package > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.upgrade-package small { color: #e7bdc7; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.upgrade-package strong { color: #fff; font: 500 25px/1 var(--serif); }
.upgrade-package ul { margin: 17px 0 12px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; list-style: none; }
.upgrade-package li { color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.4; }
.upgrade-package li::before { content: "✦"; margin-right: 8px; color: #efc3cd; }
.upgrade-package p { margin: 0; color: rgba(255,255,255,.5); font-size: 11px; line-height: 1.55; }
.concept-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.concept-card { padding: 14px 14px 28px; border: 1px solid rgba(255,255,255,.16); border-radius: 28px; color: #fff; background: rgba(255,255,255,.075); box-shadow: 0 22px 70px rgba(22,15,14,.18); backdrop-filter: blur(12px); }
.concept-image { width: 100%; height: min(62vh, 680px); padding: 0; position: relative; overflow: hidden; border: 0; border-radius: 19px; background: #eee; cursor: zoom-in; }
.concept-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 4s cubic-bezier(.18,.82,.18,1); }
.concept-image:hover img { transform: translateY(calc(-100% + min(62vh, 680px))); }
.concept-image span, .catalogue-visual button span { position: absolute; right: 16px; bottom: 16px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; color: #fff; background: rgba(35,27,25,.7); backdrop-filter: blur(12px); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.concept-card > div { padding: 24px 12px 0; }
.concept-card small { color: #deb6c1; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.concept-card h3 { margin: 7px 0 10px; font: 500 34px/1.1 var(--serif); }
.concept-card p { margin: 0; color: rgba(255,255,255,.65); line-height: 1.6; }

.builds-chapter { background: linear-gradient(180deg, #f8f4ed, #e9e0d8); }
.build-stack { display: grid; gap: 42px; }
.build-card { padding: 20px; display: grid; grid-template-columns: 1.55fr .75fr; gap: 44px; align-items: center; border: 1px solid rgba(83,63,58,.16); border-radius: 30px; background: rgba(255,255,255,.62); box-shadow: 0 20px 65px rgba(61,44,40,.08); }
.build-card.reverse { grid-template-columns: .75fr 1.55fr; }
.build-card.reverse .build-browser { order: 2; }
.build-browser { overflow: hidden; border: 1px solid rgba(50,37,34,.18); border-radius: 18px; background: #fff; box-shadow: 0 22px 50px rgba(42,30,28,.15); }
.browser-bar { height: 35px; padding: 0 14px; display: flex; align-items: center; gap: 7px; background: #eee9e3; }
.browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #c9b6b7; }
.browser-bar span { margin-left: 8px; color: #837570; font-size: 9px; letter-spacing: .05em; }
.build-browser > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.build-copy { padding: 14px 24px 14px 0; }
.build-card.reverse .build-copy { padding: 14px 0 14px 24px; }
.option-tag { width: max-content; margin: 0 0 24px; padding: 7px 10px; border: 1px solid rgba(159,116,127,.32); border-radius: 99px; color: #8d6470; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.option-tag.recommended { color: #667044; border-color: rgba(102,112,68,.32); background: rgba(166,170,120,.11); }
.build-copy h3 { margin: 0; font: 500 38px/1.05 var(--serif); }
.build-copy > p:not(.option-tag) { color: #6f625e; line-height: 1.7; }
.build-copy ul { padding: 0; list-style: none; color: #514844; font-size: 13px; }
.build-copy li { margin: 9px 0; }
.build-copy li::before { content: "✦"; margin-right: 9px; color: #a77c88; }
.preview-link { margin-top: 18px; padding: 13px 0; display: flex; justify-content: space-between; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.preview-link.is-pending { color: #9a8d88; pointer-events: none; }

.catalogue-chapter { padding-right: max(7vw, 70px); display: block; background: linear-gradient(135deg, #f8f3ed 0%, #f3e9e6 58%, #e6ded0 100%); }
.catalogue-visual { min-height: 760px; margin: -42px 0 -80px -7vw; position: relative; overflow: hidden; background: #b49ca3; }
.catalogue-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 72%, #f7f2ec); }
.catalogue-visual button { width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.catalogue-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.catalogue-copy { max-width: 1180px; margin: 0 auto; padding: 18px 0 0; position: relative; z-index: 2; }
.catalogue-heading-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .42fr); align-items: end; gap: clamp(32px, 6vw, 96px); }
.catalogue-heading-note { padding: 18px 0 6px 24px; display: grid; gap: 8px; border-left: 1px solid rgba(76,57,52,.18); }
.catalogue-heading-note small { color: #9b6d78; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.catalogue-heading-note strong { color: #443533; font: 500 28px/1.05 var(--serif); }
.catalogue-heading-note span { max-width: 210px; color: #766864; font-size: 11px; line-height: 1.45; }
.catalogue-copy h2 { margin: 0; font: 500 clamp(42px, 4.3vw, 66px)/1 var(--serif); letter-spacing: -.04em; }
.catalogue-copy h2 em { color: #a47784; }
.catalogue-copy > p:not(.eyebrow) { max-width: 760px; margin-top: 24px; color: #6f625e; line-height: 1.65; }
.catalogue-options { max-width: 780px; margin-top: 34px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.catalogue-options article { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.67); }
.catalogue-offer-card { min-height: 270px; display: flex; flex-direction: column; }
.catalogue-offer-card--featured { border-color: rgba(159,116,127,.42) !important; background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(225,204,209,.7)) !important; box-shadow: 0 18px 45px rgba(107,74,79,.1); }
.catalogue-options article > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.catalogue-options small { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.catalogue-options strong { color: #9d6d79; font: 600 23px/1 var(--serif); }
.catalogue-options p { margin: 8px 0 14px; color: #716560; font-size: 12px; line-height: 1.55; }
.catalogue-includes { margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; list-style: none; color: #665956; font-size: 12px; line-height: 1.4; }
.catalogue-includes li::before { content: "✦"; margin-right: 7px; color: #a47784; }
.catalogue-offer-card .decision-row { margin-top: auto; }
.estimate-note { margin-top: 16px; display: block; color: #837671; font-size: 10px; line-height: 1.5; }
.catalogue-options .approved-option { border-color: rgba(166,170,120,.52); background: rgba(231,232,210,.72); }
.approved-badge { width: max-content; padding: 8px 10px; display: inline-flex; border: 1px solid rgba(102,112,68,.28); border-radius: 99px; color: #5f663c; background: rgba(255,255,255,.5); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.payment-flow-preview { grid-column: 1 / -1; padding: 18px 20px; border: 1px solid rgba(141,106,116,.24); border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(231,222,220,.68)); }
.payment-flow-preview__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; }
.payment-flow-preview__heading span { color: #946773; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.payment-flow-preview__heading small { color: #8b7c77; font-size: 11px; }
.payment-flow-preview__steps { margin-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #4f4140; font-size: 11px; font-weight: 700; line-height: 1.35; }
.payment-flow-preview__steps span { display: flex; align-items: center; gap: 8px; }
.payment-flow-preview__steps b { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(155,111,122,.35); border-radius: 50%; color: #946773; font-size: 9px; }
.payment-flow-preview__steps i { color: #9b6f7a; font-style: normal; font-size: 17px; }
.payment-flow-preview > p { margin: 14px 0 0; color: #766864; font-size: 11px; line-height: 1.5; }

.decision-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.decision-row button { min-height: 40px; padding: 9px 8px; border: 1px solid rgba(80,59,59,.16); border-radius: 8px; color: #615551; background: #f6f0eb; font-size: clamp(10px, .78vw, 12px); font-weight: 700; letter-spacing: .025em; cursor: pointer; }
.decision-row button:hover, .decision-row button:focus-visible { border-color: #a47784; }
.decision-row button.is-selected[data-choice="interested"] { color: #fff; border-color: #9b6d78; background: #9b6d78; }
.decision-row button.is-selected[data-choice="later"] { color: #4c512d; border-color: #a6aa78; background: #e4e4cb; }
.decision-row button.is-selected[data-choice="no"] { color: #695e59; background: #ddd5ce; }
.show-feature-button { width: 100%; margin-top: 10px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(154,104,117,.22); border-radius: 10px; color: #6f5159; background: rgba(255,255,255,.55); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: .22s ease; }
.show-feature-button:hover, .show-feature-button:focus-visible { color: #fff; border-color: #a47784; background: #a47784; outline: none; transform: translateY(-1px); }
.show-feature-button.light { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); }
.show-feature-button.light:hover, .show-feature-button.light:focus-visible { color: #3a292d; border-color: rgba(255,255,255,.75); background: rgba(255,250,244,.88); }

.experience-chapter { background: #2b2523; }
.experience-backdrop { position: absolute; inset: 0; opacity: .55; background: radial-gradient(circle at 15% 20%, rgba(185,154,163,.46), transparent 30%), radial-gradient(circle at 88% 82%, rgba(166,170,120,.32), transparent 28%), linear-gradient(125deg, #211c1a, #4b393a); }
.section-heading.compact { max-width: 760px; }
.experience-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.experience-card { min-height: 480px; padding: 30px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; color: #fff; background: rgba(255,255,255,.07); box-shadow: inset 0 1px rgba(255,255,255,.12); backdrop-filter: blur(16px); }
.experience-card.featured { background: linear-gradient(145deg, rgba(169,115,129,.55), rgba(166,170,120,.2)); }
.experience-number { color: rgba(255,255,255,.35); font: 500 34px/1 var(--serif); }
.experience-card > small { margin-top: 48px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.experience-card h3 { margin: 10px 0 12px; font: 500 34px/1.05 var(--serif); }
.experience-card p { margin: 0; color: rgba(255,255,255,.65); font-size: 15px; line-height: 1.62; }
.experience-card > strong { margin-top: auto; padding-top: 28px; font: 500 19px/1.2 var(--serif); }
.experience-includes { margin: 16px 0 0; padding: 0; display: grid; gap: 8px; list-style: none; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.35; }
.experience-includes li::before { content: "✦"; margin-right: 7px; color: #efc3cd; }
.experience-card.logo-option { background: linear-gradient(145deg, rgba(185,154,163,.28), rgba(166,170,120,.12)); }
.logo-offer { margin-top: auto; padding-top: 24px; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 10px; }
.logo-offer span { color: rgba(255,255,255,.52); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.logo-offer s { color: rgba(255,255,255,.5); font: 500 17px/1 var(--serif); }
.logo-offer strong { color: #fff; font: 500 25px/1 var(--serif); }
.logo-offer small { grid-column: 1 / -1; color: #e7bdc7; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.logo-preview { margin: 16px 0 0; padding: 14px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(255,250,244,.88); }
.logo-preview img { display: block; width: 100%; height: auto; max-height: 96px; object-fit: contain; }
.logo-preview.is-logo-glow-focus {
  position: relative;
  z-index: 14;
  border-color: rgba(255,255,255,.9);
  background: rgba(255,250,244,.96);
  box-shadow:
    0 0 0 6px rgba(255,255,255,.22),
    0 0 0 12px rgba(205,166,82,.18),
    0 18px 52px rgba(164,87,107,.35),
    inset 0 1px 0 rgba(255,255,255,.88);
  animation: logoGlowPulse 1.35s ease-in-out infinite;
}
.experience-spotlight { position: relative; z-index: 2; width: min(100%, 980px); margin: 24px auto 0; padding: 22px 26px; display: grid; grid-template-columns: 1fr auto; gap: 6px 28px; align-items: end; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; color: #fff; background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(185,154,163,.16), rgba(166,170,120,.1)); box-shadow: inset 0 1px rgba(255,255,255,.16), 0 24px 70px rgba(0,0,0,.2); backdrop-filter: blur(18px); }
.experience-spotlight small { grid-column: 1 / -1; color: #efc3cd; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.experience-spotlight strong { font: 500 clamp(30px, 3vw, 46px)/.95 var(--serif); letter-spacing: -.035em; }
.experience-spotlight span { max-width: 670px; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.55; }
.experience-spotlight b { grid-column: 2; grid-row: 2 / span 2; padding-left: 26px; border-left: 1px solid rgba(255,255,255,.18); color: #fff; font: 500 clamp(30px, 3vw, 44px)/1 var(--serif); white-space: nowrap; }
.experience-spotlight.is-guided-end-focus { border-color: rgba(255,255,255,.42); box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 24px 90px rgba(185,154,163,.24); }
.swatcher-example { position: relative; z-index: 2; width: min(100%, 980px); margin: 14px auto 0; padding: 18px; display: grid; grid-template-columns: minmax(250px, .75fr) minmax(0, 1.25fr); gap: 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 1px rgba(255,255,255,.14); backdrop-filter: blur(18px); }
.swatcher-example__copy small { color: #efc3cd; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.swatcher-example__copy strong { margin-top: 8px; display: block; font: 500 clamp(28px, 2.5vw, 40px)/.98 var(--serif); letter-spacing: -.03em; }
.swatcher-example__copy p { max-width: 430px; margin: 11px 0 12px; color: rgba(255,255,255,.7); font-size: 13px; line-height: 1.5; }
.swatcher-example__copy span { color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.swatcher-example__stage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: stretch; }
.swatcher-piece { min-height: 150px; padding: 8px; display: grid; grid-template-rows: 1fr auto; gap: 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.swatcher-piece img { width: 100%; height: 108px; border-radius: 13px; object-fit: cover; background: rgba(255,255,255,.1); }
.swatcher-piece span { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.swatcher-piece.is-active, .swatcher-piece:hover, .swatcher-piece:focus-visible { border-color: rgba(255,255,255,.58); background: rgba(255,255,255,.16); outline: none; transform: translateY(-3px); }
.swatcher-colours { grid-column: 1 / -1; display: flex; justify-content: center; gap: 9px; padding-top: 2px; }
.swatcher-colours i { width: 24px; height: 24px; border: 2px solid rgba(255,255,255,.55); border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
.swatcher-example.is-guided-end-focus { border-color: rgba(255,255,255,.42); box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 24px 90px rgba(185,154,163,.22); }
.swatcher-example.is-guided-end-active .swatcher-piece:nth-child(1) { animation: swatcherPulse 5.8s ease infinite; }
.swatcher-example.is-guided-end-active .swatcher-piece:nth-child(2) { animation: swatcherPulse 5.8s ease 1.7s infinite; }
.swatcher-example.is-guided-end-active .swatcher-piece:nth-child(3) { animation: swatcherPulse 5.8s ease 3.4s infinite; }
@keyframes swatcherPulse { 0%, 26%, 100% { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); transform: translateY(0); } 10%, 18% { border-color: rgba(255,255,255,.62); background: rgba(255,255,255,.18); transform: translateY(-4px); } }
.customizer-preview { position: relative; z-index: 2; width: min(100%, 1120px); margin: 14px auto 0; padding: 18px; display: grid; grid-template-columns: .72fr 1fr 1fr; gap: 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 1px rgba(255,255,255,.14); backdrop-filter: blur(18px); }
.customizer-preview__intro small, .customizer-demo__heading span { color: #efc3cd; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.customizer-preview__intro strong { margin-top: 8px; display: block; font: 500 clamp(27px, 2.4vw, 38px)/.98 var(--serif); letter-spacing: -.03em; }
.customizer-preview__intro p, .customizer-demo p { margin: 10px 0 0; color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.5; }
.customizer-demo { padding: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.08); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.customizer-demo__heading { margin-bottom: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.customizer-demo__heading strong { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.customizer-screen { position: relative; min-height: 168px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: linear-gradient(135deg, #f7efe9, #c9b4a8); }
.customizer-screen img { width: 100%; height: 168px; display: block; object-fit: cover; object-position: center; filter: saturate(.92) contrast(.98); }
.customizer-tint { position: absolute; inset: 0; pointer-events: none; background: var(--active-swatch, #9A747D); mix-blend-mode: multiply; opacity: .26; transition: background .25s ease, opacity .25s ease; }
.customizer-demo--single .customizer-tint { animation: previewTintCycle 8s ease infinite; }
.customizer-playhead { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.55); overflow: hidden; }
.customizer-playhead::after { content: ""; position: absolute; inset: 0; width: 38%; border-radius: inherit; background: #fff; animation: previewPlayhead 4.6s linear infinite; }
.swatcher-piece-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 9px; }
.swatcher-piece-row button { min-height: 30px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.swatcher-piece-row button.is-active, .swatcher-piece-row button:hover, .swatcher-piece-row button:focus-visible { color: #342527; background: rgba(255,250,244,.9); outline: none; }
.customizer-demo .swatcher-colours { margin-top: 9px; padding-top: 0; }
.customizer-demo .swatcher-colours button { width: 24px; height: 24px; padding: 0; border: 2px solid rgba(255,255,255,.52); border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 3px rgba(255,255,255,.06); cursor: pointer; }
.customizer-demo .swatcher-colours button.is-active, .customizer-demo .swatcher-colours button:hover, .customizer-demo .swatcher-colours button:focus-visible { border-color: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.16); outline: none; }
.customizer-demo .swatcher-colours span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.customizer-preview.is-guided-end-focus, .customizer-demo.is-guided-end-focus { border-color: rgba(255,255,255,.42); box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 24px 90px rgba(185,154,163,.22); }
.customizer-demo.is-guided-end-focus { transform: translateY(-3px); }
@keyframes previewTintCycle { 0%, 100% { background: #E8DECF; opacity: .16; } 24% { background: #9A747D; opacity: .28; } 48% { background: #742D39; opacity: .34; } 72% { background: #7B8162; opacity: .28; } }
@keyframes previewPlayhead { from { transform: translateX(-105%); } to { transform: translateX(265%); } }
.decision-row.light { margin-top: 18px; }
.decision-row.light button { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.07); }
.decision-row.light button.is-selected[data-choice="interested"] { color: #fff; background: #b17f8c; }
.decision-row.light button.is-selected[data-choice="later"] { color: #27231e; background: #c4c79c; }
.decision-row.light button.is-selected[data-choice="no"] { color: #332b29; background: #c5b9b2; }

@media (min-width: 1051px) {
  .experience-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.selection-chapter { min-height: 92vh; padding-top: 150px; display: grid; grid-template-columns: 1.05fr .8fr; align-items: center; gap: 8vw; background: radial-gradient(circle at 82% 33%, rgba(185,154,163,.3), transparent 25%), var(--paper); }
.selection-panel h2 { font-size: clamp(44px, 5vw, 70px); }
.selection-panel > p:not(.eyebrow) { max-width: 680px; color: #6f625e; font-size: 16px; line-height: 1.7; }
.selection-summary { min-height: 120px; margin-top: 30px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.72); }
.selection-summary > p { margin: 26px 0; color: #8a7e78; text-align: center; }
.selection-item { padding: 10px 0; display: grid; grid-template-columns: 1fr auto auto; gap: 15px; border-bottom: 1px solid var(--line); font-size: 12px; }
.selection-item:last-child { border-bottom: 0; }
.selection-item small { color: #887a75; }
.selection-item b { color: #9a6875; }
.selection-design-approval { margin-top: 18px; padding: 18px; border: 1px solid rgba(154,104,117,.18); border-radius: 20px; background: rgba(255,255,255,.6); box-shadow: 0 14px 36px rgba(68,45,45,.05); }
.selection-design-approval > span { display: block; margin-bottom: 12px; color: #9a6875; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.selection-design-approval__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.selection-design-approval .design-approve-button { min-width: 0; width: 100%; padding: 13px 15px; font-size: 10px; }
.final-notes-card { margin-top: 18px; padding: 20px 22px; display: grid; gap: 10px; border: 1px solid rgba(154,104,117,.22); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(239,225,224,.62)); box-shadow: 0 16px 40px rgba(68,45,45,.06); }
.final-notes-card span { color: #9a6875; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.final-notes-card strong { color: #473b39; font: 500 24px/1.1 var(--serif); }
.final-notes-card textarea { width: 100%; min-height: 118px; resize: vertical; padding: 15px 16px; border: 1px solid rgba(91,67,64,.18); border-radius: 15px; color: #3f3432; background: rgba(255,255,255,.78); box-shadow: inset 0 1px 0 rgba(255,255,255,.75); font: 500 14px/1.55 var(--sans); outline: none; }
.final-notes-card textarea:focus { border-color: rgba(154,104,117,.58); box-shadow: 0 0 0 4px rgba(216,172,184,.2); }
.final-notes-card small { color: #8b7d78; font-size: 11px; line-height: 1.45; }
.selection-event-log { margin-top: 18px; padding: 20px 22px; border: 1px solid rgba(122,91,98,.2); border-radius: 18px; background: rgba(255,255,255,.52); box-shadow: 0 10px 30px rgba(60,42,42,.04); }
.selection-event-log__header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.selection-event-log__eyebrow { margin: 0; display: flex; align-items: center; gap: 8px; color: #9a6875; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.selection-event-log__eyebrow span { width: 18px; height: 1px; display: inline-block; background: var(--red); }
.selection-event-log h3 { margin: 8px 0 0; font: 500 25px/1.05 var(--serif); }
.selection-event-log__header > small { color: #8e7b77; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.selection-event-log__intro { max-width: 640px; margin: 10px 0 0; color: #766864; font-size: 12px; line-height: 1.55; }
.selection-event-log__list { max-height: 245px; margin: 16px 0 0; padding: 0 7px 0 0; display: grid; gap: 0; overflow: auto; list-style: none; }
.selection-event { padding: 11px 0; display: grid; grid-template-columns: 150px 1fr; gap: 14px; border-top: 1px solid rgba(92,69,66,.12); }
.selection-event time { color: #9a8984; font-size: 10px; line-height: 1.4; }
.selection-event div { min-width: 0; display: grid; gap: 3px; }
.selection-event strong { color: #4c3d3b; font-size: 11px; line-height: 1.35; }
.selection-event span { color: #806d68; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.selection-event-log__empty { padding: 13px 0 4px; color: #978983; font-size: 11px; }
.selection-actions { margin-top: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.text-button { padding: 10px; border: 0; color: #6a5e59; background: transparent; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
a.text-button { display: inline-flex; align-items: center; }
.selection-disclaimer { margin-top: 18px; display: block; color: #928681; font-size: 10px; line-height: 1.5; }
.selection-art { aspect-ratio: 1; display: grid; place-items: center; position: relative; border: 1px solid rgba(130,96,102,.18); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e9dcd6 42%, #ab858e); box-shadow: 0 30px 90px rgba(94,62,69,.18); }
.selection-art::before, .selection-art::after { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; }
.selection-art img { width: 88%; height: auto; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(55,39,39,.12)); }
.selection-art i { position: absolute; top: 20%; color: var(--red); font-style: normal; }

.image-lightbox { width: min(94vw, 1180px); height: 92vh; padding: 20px; overflow: auto; border: 1px solid rgba(255,255,255,.25); border-radius: 20px; background: rgba(26,21,20,.92); box-shadow: 0 40px 100px rgba(0,0,0,.4); }
.image-lightbox::backdrop { background: rgba(22,17,16,.78); backdrop-filter: blur(8px); }
.image-lightbox button { width: 40px; height: 40px; position: sticky; z-index: 2; top: 0; float: right; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; background: rgba(20,15,14,.75); font-size: 25px; cursor: pointer; }
.image-lightbox img { width: 100%; height: auto; border-radius: 10px; }
.site-preview-dialog { width: calc(100vw - 24px); max-width: none; height: calc(100vh - 24px); max-height: none; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.28); border-radius: 22px; background: #e9e2dc; box-shadow: 0 38px 110px rgba(19,13,13,.46); }
.site-preview-dialog::backdrop { background: rgba(26,20,19,.82); backdrop-filter: blur(10px); }
.site-preview-shell { height: 100%; display: grid; grid-template-rows: 64px 1fr; }
.site-preview-shell > header { padding: 0 18px 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #4c3f3d; background: rgba(248,244,239,.96); border-bottom: 1px solid rgba(87,62,61,.14); }
.site-preview-shell > header > div:first-child { display: grid; gap: 2px; }
.site-preview-shell > header span { color: #a17580; font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.site-preview-shell > header strong { font: 500 20px/1.1 var(--serif); }
.site-preview-actions { display: flex; align-items: center; gap: 12px; }
.site-preview-actions a { padding: 10px 14px; border: 1px solid rgba(87,62,61,.18); border-radius: 99px; color: #5d4c4a; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.site-preview-actions button { width: 40px; height: 40px; border: 1px solid rgba(87,62,61,.18); border-radius: 50%; color: #554542; background: #fff; font-size: 24px; cursor: pointer; }
.site-preview-shell > iframe { width: 100%; height: 100%; display: block; border: 0; background: #fff; }
.saved-toast { padding: 11px 15px; position: fixed; z-index: 60; right: 28px; bottom: 28px; border-radius: 99px; color: #fff; background: #302724; box-shadow: 0 12px 35px rgba(35,25,23,.25); font-size: 11px; font-weight: 700; opacity: 0; transform: translateY(12px); transition: .25s ease; pointer-events: none; }
.saved-toast.is-visible { opacity: 1; transform: translateY(0); }

@media (min-width: 761px) and (max-height: 820px) {
  .hero-card { width: min(600px, 49vw); margin-top: 78px; padding: 30px 42px; }
  .hero-card h1 { font-size: 48px; }
  .hero-card > p:not(.eyebrow) { margin-top: 18px; font-size: 15px; line-height: 1.55; }
  .hero-project-record { margin-top: 18px; padding: 11px 15px; }
  .hero-project-record strong { font-size: 19px; }
  .hero-actions { margin-top: 20px; }
  .hero-guide { top: 89px; }
  .guide-choice { padding: 25px; }
  .guide-player { width: 330px; margin-left: auto; }
  /* Short windows: a slightly wider avatar frame keeps the whole bubble —
     notes box and all — on screen. The upward crop bias protects her face. */
  .guide-video-wrap { aspect-ratio: 1.32; }
  .guide-caption { min-height: 47px; font-size: 12px; }
  .guide-note { padding: 9px 11px; }
  .guide-note textarea { min-height: 34px; }
  #scope { min-height: 0; padding-top: 18px; padding-bottom: 16px; }
  #scope .section-heading { margin-bottom: 12px; }
  #scope .section-heading .eyebrow { margin-bottom: 7px; }
  #scope .section-heading h2 { font-size: 42px; }
  #scope .section-heading > p:last-child { max-width: 900px; margin-top: 8px; font-size: 13px; line-height: 1.42; }
  #scope .scope-layout { gap: 13px; }
  #scope .scope-price-card { min-height: 267px; padding: 18px 22px; }
  #scope .scope-price-card strong { font-size: 47px; }
  #scope .scope-price-card .project-total { margin-top: 11px; padding-top: 10px; }
  #scope .scope-price-card .project-total b { font-size: 21px; }
  #scope .scope-price-card p { margin-top: 10px; font-size: 11px; line-height: 1.4; }
  #scope .scope-outline-button { margin-top: 9px; padding: 9px 11px; font-size: 9.5px; }
  #scope .included-grid { gap: 9px; }
  #scope .included-grid article, #scope .scope-summary-card { min-height: 129px; padding: 14px 16px; }
  #scope .included-grid h3 { margin: 9px 0 5px; font-size: 19px; }
  #scope .included-grid p { font-size: 11.5px; line-height: 1.38; }
  #scope .scope-summary-card b { margin-top: 7px; font-size: 9.5px; }
  #scope .scope-boundary { margin-top: 8px; padding: 9px 15px; }
  #scope .scope-boundary p { font-size: 11px; line-height: 1.38; }
  #scope .scope-hero-row { gap: 20px; }
  .scope-guide-dock .guide-player { padding: 12px 14px 12px 12px; }
  .scope-guide-dock .guide-video-wrap { aspect-ratio: 4 / 5; }
  .scope-guide-dock .guide-caption { font-size: 11.5px; line-height: 1.4; }
}

@media (max-width: 1050px) {
  .walkthrough-nav { grid-template-columns: 150px 1fr auto; }
  .nav-project, .chapter-rail { display: none; }
  .chapter { padding-right: 6vw; padding-left: 6vw; }
  .direction-chapter { padding-right: 0; }
  .direction-chapter > .section-heading { max-width: min(58vw, 650px); }
  .directions-guide-dock { width: min(340px, 34vw); right: 4vw; }
  .direction-gallery-bar, .direction-track { padding-right: 6vw; }
  .catalogue-chapter, .selection-chapter { grid-template-columns: 1fr; }
  .catalogue-chapter { padding-right: 6vw; }
  .catalogue-visual { min-height: 560px; margin: 0 0 42px; border-radius: 26px; }
  .catalogue-visual::after { display: none; }
  .catalogue-copy { padding: 0; }
  .experience-grid { grid-template-columns: 1fr; }
  .experience-card { min-height: 360px; }
  .selection-art { width: min(540px, 80vw); justify-self: center; }
  .hero-guide { width: min(340px, 34vw); right: 4vw; }
  .guide-choice { padding: 24px; }
  .guide-choice h2 { font-size: 28px; }
}

@media (min-width: 761px) and (max-width: 980px) {
  #scope .scope-layout { grid-template-columns: minmax(220px, .62fr) 1.5fr; }
  #scope .included-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #scope .included-grid article, #scope .scope-summary-card { min-height: 116px; padding: 14px 15px; }
  #scope .included-grid h3 { margin-top: 9px; font-size: 18px; }
  #scope .included-grid p { font-size: 10.5px; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 66px; }
  .walkthrough-nav { height: 66px; padding: 0 18px; grid-template-columns: 1fr auto; }
  .nav-progress { display: none; }
  .portal-back { padding: 9px 10px; font-size: 9px; }
  .chapter { min-height: auto; padding: 98px 20px 64px; scroll-margin-top: 0; }
  .direction-chapter { padding-right: 0; }
  .direction-chapter > .section-heading { max-width: none; padding-right: 0; }
  .directions-guide-dock { width: calc(100% - 32px); position: relative; top: auto; right: auto; margin: -24px 16px 28px; }
  .directions-guide-dock .hero-guide { width: 100%; }
  .hero-chapter { min-height: 100vh; padding: 0; }
  .hero-card { width: calc(100% - 32px); margin: 78px 16px 0; padding: 30px 24px; border-radius: 22px; }
  .hero-card h1, .section-heading h2, .selection-panel h2 { font-size: 42px; }
  .hero-card > p:not(.eyebrow), .section-heading > p:last-child { font-size: 14px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-project-record { grid-template-columns: 1fr; }
  .hero-project-record span + span { padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.18); border-left: 0; }
  .hero-note { display: none; }
  .hero-guide { width: calc(100% - 32px); margin: 18px 16px 34px; position: relative; top: auto; right: auto; }
  .guide-player { max-width: 430px; margin-left: auto; margin-right: auto; }
  .guide-choice { padding: 24px; }
  .guide-choice h2 { max-width: none; font-size: 31px; }
  .guide-reopen { margin-right: 0; }
  #scope { height: auto; min-height: auto; padding-top: 98px; padding-bottom: 64px; display: block; }
  .scope-layout, .included-grid, .concept-grid, .build-card, .build-card.reverse { grid-template-columns: 1fr; }
  #scope .scope-layout, #scope .included-grid { grid-template-columns: 1fr; }
  .scope-hero-row { grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; }
  .scope-guide-dock .guide-player { grid-template-columns: 1fr; grid-template-areas: "head" "video" "caption" "controls" "cta"; }
  .scope-guide-dock .guide-video-wrap { aspect-ratio: 16 / 10; }
  .scope-guide-dock .guide-continue { margin-left: 0; }
  #scope .scope-price-card { min-height: 320px; }
  #scope .included-grid article, #scope .scope-summary-card { min-height: 150px; padding: 22px; }
  #scope .included-grid h3 { font-size: 23px; }
  #scope .included-grid p { font-size: 13px; }
  #scope .scope-boundary { grid-template-columns: 1fr; padding: 18px; }
  .scope-price-card { min-height: 320px; }
  .scope-boundary { grid-template-columns: 1fr; }
  .concept-image { height: 56vh; }
  .concept-image:hover img { transform: none; }
  .direction-gallery-bar { padding-right: 20px; }
  .direction-gallery-bar p { max-width: 180px; line-height: 1.5; }
  .direction-gallery-bar button { width: 42px; height: 42px; }
  .direction-track { padding-right: 20px; gap: 14px; }
  .direction-card { flex-basis: calc(100vw - 42px); border-radius: 22px; }
  .direction-frame { margin: 9px 9px 0; border-radius: 14px; }
  .direction-browser-bar { height: 28px; }
  .direction-browser-bar span { max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .live-fullscreen-button { padding: 6px 9px; font-size: 8px; }
  .live-site-preview { min-height: 0; }
  .direction-image > span { display: none; }
  .direction-card-copy { padding: 20px; }
  .direction-label { align-items: flex-start; flex-direction: column; gap: 9px; }
  .design-actions { flex-direction: column; }
  .design-actions .preview-link { width: 100%; max-width: none; }
  .design-approve-button { width: 100%; min-width: 0; }
  .upgrade-package > div { align-items: flex-start; flex-direction: column; gap: 8px; }
  .upgrade-package ul { grid-template-columns: 1fr; }
  .build-card.reverse .build-browser { order: 0; }
  .build-copy, .build-card.reverse .build-copy { padding: 12px 4px; }
  .catalogue-visual { min-height: 360px; }
  .catalogue-heading-row { grid-template-columns: 1fr; gap: 22px; }
  .catalogue-heading-note { padding: 16px 0 0; border-top: 1px solid rgba(76,57,52,.18); border-left: 0; }
  .catalogue-options { max-width: none; }
  .catalogue-options article > div:first-child { align-items: flex-start; flex-direction: column; }
  .payment-flow-preview__heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .payment-flow-preview__steps { align-items: flex-start; flex-direction: column; gap: 8px; }
  .payment-flow-preview__steps i { display: none; }
  .decision-row { grid-template-columns: 1fr; }
  .experience-card { min-height: 430px; }
  .selection-actions { align-items: stretch; flex-direction: column; }
  .selection-item { grid-template-columns: 1fr; }
  .selection-event-log { padding: 18px; }
  .selection-event-log__header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .selection-event { grid-template-columns: 1fr; gap: 3px; }
  .scope-detail-dialog { width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .scope-detail-shell { grid-template-rows: 66px 1fr; }
  .scope-detail-shell > header { padding: 0 14px 0 18px; }
  .scope-detail-shell > header span { font-size: 9px; }
  .scope-detail-shell > header strong { font-size: 18px; }
  .scope-detail-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .scope-detail-nav { padding: 10px 14px; display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid rgba(84,61,61,.13); }
  .scope-detail-nav button { min-width: max-content; min-height: 42px; padding: 9px 12px; }
  .scope-detail-content { padding: 26px 20px 36px; }
  .scope-detail-heading { grid-template-columns: 1fr; gap: 10px; }
  .scope-detail-heading h2 { font-size: 36px; }
  .scope-detail-heading > strong { font-size: 24px; }
  .scope-detail-facts, .scope-detail-columns { grid-template-columns: 1fr; }
  .scope-detail-facts div { min-height: 68px; }
  .scope-detail-facts div + div { border-top: 1px solid rgba(86,64,60,.12); border-left: 0; }
  .site-preview-dialog { width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .site-preview-shell { grid-template-rows: 58px 1fr; }
  .site-preview-shell > header { padding: 0 10px 0 15px; gap: 10px; }
  .site-preview-shell > header span { display: none; }
  .site-preview-shell > header strong { font-size: 15px; }
  .site-preview-actions a { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .concept-image:hover img { transform: none; }
}

/* When the guided walkthrough is active, keep the avatar and the live website
   visible together. The guide gets a dedicated left rail while the interactive
   site gallery stays large on the right; the normal gallery layout is unchanged
   until the guide is actually opened. */
@media (min-width: 761px) {
  .direction-chapter:has(.directions-guide-dock:not(:empty)) {
    display: grid;
    grid-template-columns: minmax(245px, 250px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(18px, 2.2vw, 28px);
    padding-top: 72px;
    align-items: start;
  }

  .direction-chapter:has(.directions-guide-dock:not(:empty)) > .section-heading {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 920px;
    margin-bottom: 0;
    padding-right: 0;
  }

  .direction-chapter:has(.directions-guide-dock:not(:empty)) .directions-guide-dock {
    width: 100%;
    position: static;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 0;
  }

  .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-gallery {
    min-width: 0;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-gallery-bar,
  .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-track {
    padding-right: 0;
  }

  .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card {
    flex-basis: min(100%, 920px);
  }

  /* During playback the chapter title is intentionally out of the way. Keep
     the avatar and live site aligned at the top of the viewing area.
     The padding here must stay SMALL: the heading is hidden just below, so
     any padding meant to clear it becomes a dead band between the fixed nav
     and the preview. 110px produced exactly that empty gap. This only needs
     to clear the 78px fixed nav plus a little breathing room. */
  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) {
    grid-template-rows: minmax(0, 1fr);
    padding-top: 20px;
  }

  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) > .section-heading {
    display: none;
  }

  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) .directions-guide-dock,
  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-gallery {
    grid-row: 1;
  }

  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-gallery-bar {
    display: none;
  }

  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) .directions-guide-dock {
    margin-top: 0;
  }

  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-track {
    margin-top: 0;
    overflow-x: hidden;
    padding-right: 0;
  }

  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card {
    flex-basis: 100%;
  }

  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card:not(:first-child) {
    display: none;
  }
}

/* The generic mobile rule above hides secondary cards. Restore the specific
   direction being narrated so a narrow Brave/Safari window cannot skip the
   second mockup or show a collapsed zero-height card. */
@media (max-width: 760px) {
  .walkthrough-guided-active[data-guide-direction-card="warm-editorial"] .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card,
  .walkthrough-guided-active[data-guide-direction-card="sculptural-gallery"] .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card,
  .walkthrough-guided-active[data-guide-direction-card="guided-showroom"] .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card {
    display: none !important;
  }
  .walkthrough-guided-active[data-guide-direction-card="warm-editorial"] .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card[data-design-card="warm-editorial"],
  .walkthrough-guided-active[data-guide-direction-card="sculptural-gallery"] .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card[data-design-card="sculptural-gallery"],
  .walkthrough-guided-active[data-guide-direction-card="guided-showroom"] .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card[data-design-card="guided-showroom"] {
    display: block !important;
    flex-basis: calc(100vw - 42px);
  }
}

/* Claude's direction clips use the same live gallery rail. During guided
   playback, swap the single visible card to the direction being narrated. */
.walkthrough-guided-active[data-guide-direction-card="warm-editorial"] .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card,
.walkthrough-guided-active[data-guide-direction-card="sculptural-gallery"] .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card,
.walkthrough-guided-active[data-guide-direction-card="guided-showroom"] .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card {
  display: none !important;
}
.walkthrough-guided-active[data-guide-direction-card="warm-editorial"] .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card[data-design-card="warm-editorial"],
.walkthrough-guided-active[data-guide-direction-card="sculptural-gallery"] .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card[data-design-card="sculptural-gallery"],
.walkthrough-guided-active[data-guide-direction-card="guided-showroom"] .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card[data-design-card="guided-showroom"] {
  display: block !important;
  flex-basis: 100%;
}

@media (min-width: 761px) and (max-width: 1050px) {
  .direction-chapter:has(.directions-guide-dock:not(:empty)) {
    grid-template-columns: minmax(220px, 32vw) minmax(0, 1fr);
    column-gap: 22px;
  }

  .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card {
    flex-basis: min(100%, 760px);
  }

  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card {
    flex-basis: 100%;
  }
}

@media (max-width: 760px) {
  .direction-chapter:has(.directions-guide-dock:not(:empty)) {
    display: block;
  }

  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) > .section-heading {
    display: none;
  }

  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-gallery-bar {
    display: none;
  }

  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-track {
    margin-top: 0;
    overflow-x: hidden;
  }

  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-card:not(:first-child) {
    display: none;
  }
}

/* Avatar sits at the TOP of the bubble. The "Kita · Guided walkthrough" header
   row used to sit above her on the pale card, which read as a big white bar
   above her head. Video first, labels underneath. */
.guide-player { display: flex; flex-direction: column; }
.guide-player .guide-video-wrap { order: -1; margin-bottom: 10px; }
.guide-player .guide-player-heading { padding-top: 0; padding-bottom: 8px; }

/* Short desktop windows (~660px tall): tighten the guided column so the live
   preview is not cut off at the bottom. Widths are untouched, so the preview
   still fills its card — no empty side gaps. */
@media (min-width: 761px) and (max-height: 820px) {
  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) {
    padding-top: 0;
  }
  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-frame {
    margin-top: 0;
  }
  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-browser-bar {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) .guide-video-wrap {
    aspect-ratio: 1.32;
  }
  .walkthrough-guided-active .guide-player {
    padding: 6px 14px;
  }
  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) .direction-image {
    aspect-ratio: auto;
    height: calc(100svh - 158px);
  }
}

/* ---------------------------------------------------------------------------
   SIZE-PROOF GUARD RAILS.
   Repeated pixel-tuning for one window size kept breaking at other sizes: the
   avatar bubble ran past the bottom, the preview ran off the side. These rules
   make it fit at ANY window size instead of at one tested size.
   --------------------------------------------------------------------------- */
.walkthrough-guided-active .guide-player {
  max-height: calc(100svh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Never let a direction card or its preview exceed the viewport width. */
.direction-card { max-width: calc(100vw - 32px); }
.live-site-preview { max-width: 100%; }

/* The guided avatar card was a fixed 330px inside a 250px dock column, so it
   spilled over the website preview (52px overlap) and left brown column space
   showing beside it. Widen the column and let the card fill it exactly. */
@media (min-width: 761px) {
  .direction-chapter:has(.directions-guide-dock:not(:empty)) {
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  }
  .directions-guide-dock,
  .directions-guide-dock .guide-player {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Guided playback: pull the avatar to the left edge. The chapter's 7vw side
   padding showed as a brown empty bar beside the avatar and stole width from
   the website preview. */
@media (min-width: 761px) {
  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) {
    padding-left: 16px;
    padding-right: 16px;
    column-gap: 16px;
  }
}

/* Guided playback on short windows: size the preview by HEIGHT so it always
   ends above the fold, instead of a 16:9 box that overshoots by a few pixels.
   Width is untouched (no white gaps); the iframe simply shows a slightly
   shorter slice of the site rather than being scaled or distorted. */
@media (min-width: 761px) and (max-height: 900px) {
  .walkthrough-guided-active .direction-chapter:has(.directions-guide-dock:not(:empty)) .live-site-preview {
    aspect-ratio: auto;
    height: calc(100svh - 144px);
  }
}

/* Her head must never be cut. The clips are square (544x544) but the frame is
   landscape on short windows, so `cover` crops vertically. Anchor the crop to
   the very top so every pixel removed comes off the bottom of the frame. */
.guide-video-wrap video,
.guide-video-wrap .guide-walkthrough-image { object-position: 50% 0%; }

/* The fixed chapter rail (01-06 circles) floats at right:22px over everything.
   In guided playback it was landing on top of the website preview, covering
   ~40px of the live site. Reserve room for it instead of overlapping. */
/* Hide the rail entirely during guided playback and put the padding back.
   The bubble already shows "3 of 12", so the rail is redundant while the
   walkthrough is driving, and hiding it clears the overlap on EVERY chapter
   rather than just the directions screen. */
.walkthrough-guided-active .chapter-rail { display: none; }

/* A chapter with overflow:hidden is still a programmatic scroll container.
   During guide reparenting/focus changes, #scope or #directions could acquire
   its own scrollTop and cut the avatar and preview off above the chapter edge.
   Guided chapters must never clip or internally scroll their presentation. */
.walkthrough-guided-active #scope,
.walkthrough-guided-active #directions,
.walkthrough-guided-active #catalogue,
.walkthrough-guided-active #phase-three {
  overflow: visible;
}
.walkthrough-guided-active .guide-player {
  overflow: visible;
}

/* Reparenting the guide between chapters used to reveal it halfway through a
   resize/scroll, which briefly cut off her head and made step two flicker.
   Position first, then reveal the settled frame. */
.walkthrough-positioning .guide-player,
.walkthrough-positioning .direction-chapter .direction-gallery {
  opacity: 0;
  pointer-events: none;
}
.guide-player,
.direction-chapter .direction-gallery { transition: opacity 160ms ease; }

/* FINAL word on the avatar crop. Every `cover`-based crop bias (50%, 8%, 0%)
   still produced a cut-off head somewhere across window sizes and renderer
   quirks. `contain` shows the ENTIRE square clip — cutting her head is now
   geometrically impossible at any frame size. The frame background matches the
   clip's studio tones so the side bands read as intentional matting. */
.guide-video-wrap { background: #2b2024; }
.guide-video-wrap video { object-fit: contain; object-position: 50% 50%; background: #2b2024; }

/* REBUILT AVATAR RENDERER (Kita, end of 2026-09-02).
   The <video> element's compositor painted a stale/wrong crop of the clip no
   matter what object-fit/object-position said — her head was cut while the
   decoded frames were provably complete (canvas dumps showed the full frame).
   The clip is therefore drawn onto a canvas by app.js with contain geometry:
   the whole square frame, always, no compositor involved. The <video> stays in
   the DOM as the decoder/audio source only. Do not resurrect the visible
   <video>. */
.guide-video-wrap .guide-video-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  clip-path: inset(100%) !important;
  pointer-events: none !important;
}
.guide-video-wrap .guide-video-canvas { width: 100%; height: 100%; display: block; background: #2b2024; }

/* ============================================================
   REBUILT AVATAR FRAME — Kita's order, end of 2026-09-02.
   The clips are square. The frame is now ALWAYS square, sized to
   whatever height the window can afford. Square clip in a square
   box: cropping is impossible by construction. These !important
   rules deliberately override every earlier aspect-ratio /
   height hack for this element. Do not add new ones — change
   the numbers here instead.
   ============================================================ */
.guide-video-wrap {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  width: min(100%, calc(100svh - 375px)) !important;
  min-width: 150px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  flex-shrink: 0 !important; /* flexbox was squeezing the square into 280x253 */
}
.guide-video-wrap .guide-video-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Luxury polish pass for the avatar bubble. This only changes the shell's
   visual treatment — not the video sizing/crop rules above. */
.guide-player {
  border-color: rgba(255,255,255,.58) !important;
  color: #332629;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.82), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(238,195,207,.46), transparent 32%),
    linear-gradient(145deg, rgba(255,250,245,.92), rgba(229,205,204,.76) 52%, rgba(184,138,150,.52)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    inset 0 -18px 42px rgba(91,55,63,.08),
    0 18px 44px rgba(76,48,56,.20),
    0 34px 110px rgba(122,76,88,.20) !important;
}
.guide-player::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.32);
  background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 42%, rgba(154,104,117,.12));
  pointer-events: none;
}
.guide-player-heading {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid rgba(122,83,92,.12);
}
.guide-player-heading small {
  color: #9a6875;
}
.guide-player-heading strong {
  color: #35292b;
  letter-spacing: -.01em;
}
.guide-player-heading button,
.guide-controls button {
  border-color: rgba(122,83,92,.18) !important;
  color: #5d434b;
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 1px rgba(255,255,255,.7), 0 8px 22px rgba(95,61,70,.09);
}
.guide-player-heading button:hover,
.guide-player-heading button:focus-visible,
.guide-controls button:hover,
.guide-controls button:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, #9f6d7a, #7d5360);
  box-shadow: 0 10px 26px rgba(95,61,70,.2);
}
.guide-video-wrap {
  border-color: rgba(255,255,255,.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 14px 34px rgba(42,28,31,.22) !important;
}
.guide-video-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255,255,255,.16), transparent 28%, rgba(255,255,255,.07) 70%, transparent);
  pointer-events: none;
}
.guide-caption {
  position: relative;
  z-index: 1;
  color: #403134;
}
.guide-note {
  position: relative;
  z-index: 1;
  border-color: rgba(122,83,92,.13) !important;
  background: rgba(255,255,255,.42) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.62);
}

/* Give the square avatar its size back. The safety rebuild shrank her to fit
   everything; instead, compact the card's chrome during guided playback (the
   note box and controls were the space hogs) and let the square grow. */
.walkthrough-guided-active .guide-player .guide-note { margin-top: 6px; padding: 6px 8px; }
.walkthrough-guided-active .guide-player .guide-note textarea { min-height: 22px; }
.walkthrough-guided-active .guide-player .guide-note small { display: none; }
.walkthrough-guided-active .guide-player .guide-controls { margin-top: 6px; }
.walkthrough-guided-active .guide-player .guide-controls button { min-height: 28px; }
.walkthrough-guided-active .guide-player .guide-caption { min-height: 0; margin-top: 8px; }
.walkthrough-guided-active .is-guided-end-focus {
  position: relative;
  z-index: 4;
  outline: 2px solid rgba(255,255,255,.78);
  box-shadow: 0 0 0 7px rgba(164,118,132,.2), 0 22px 60px rgba(70,43,48,.22) !important;
  transform: translateY(-2px);
  transition: box-shadow .25s ease, outline-color .25s ease, transform .25s ease;
}
.walkthrough-guided-active .guide-continue.is-guided-end-active {
  box-shadow: 0 0 0 6px rgba(177,127,140,.18), 0 14px 35px rgba(123,76,88,.28);
}
.walkthrough-guided-active .is-guided-approval-focus {
  position: relative;
  z-index: 12;
  outline: 3px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 0 0 8px rgba(160, 88, 106, .24), 0 0 34px rgba(255,255,255,.62), 0 18px 52px rgba(83, 48, 58, .28) !important;
  transform: translateY(-3px) scale(1.015);
  animation: approvalCuePulse 1.25s ease-in-out infinite;
}
.walkthrough-guided-active .decision-row.is-guided-approval-focus {
  padding: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
}
.walkthrough-guided-active .selection-actions .is-guided-approval-focus {
  display: inline-flex;
}
.walkthrough-guided-active .is-guided-approval-focus::after {
  content: "Click here";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 999px;
  color: #fff;
  background: rgba(82, 52, 58, .9);
  box-shadow: 0 12px 34px rgba(42,28,31,.25);
  font: 800 10px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}
.walkthrough-guided-active .final-notes-card.is-guided-approval-focus::after {
  content: "Leave notes here";
}
.walkthrough-guided-active .selection-actions .is-guided-approval-focus::after {
  content: "Send or view results";
}
@keyframes approvalCuePulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}
@keyframes logoGlowPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-2px) scale(1.025);
    filter: brightness(1.08);
  }
}

@media (min-width: 761px) and (max-height: 820px) {
  .walkthrough-guided-active .guide-video-wrap {
    width: min(100%, calc(100svh - 383px)) !important;
  }
}

@media (min-width: 761px) {
  .catalogue-guide-dock,
  .phase-three-guide-dock,
  .selection-guide-dock {
    position: relative;
    z-index: 5;
  }

  .catalogue-guide-dock .hero-guide,
  .phase-three-guide-dock .hero-guide,
  .selection-guide-dock .hero-guide {
    width: 100%;
    position: static;
    top: auto;
    right: auto;
    color: inherit;
  }

  .catalogue-guide-dock .guide-player,
  .phase-three-guide-dock .guide-player,
  .selection-guide-dock .guide-player {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .walkthrough-guided-active .catalogue-copy {
    max-width: 1180px;
    display: grid;
    grid-template-columns: minmax(245px, 250px) minmax(0, 1fr);
    column-gap: clamp(18px, 2.2vw, 28px);
    align-items: start;
  }

  .walkthrough-guided-active .catalogue-heading-row,
  .walkthrough-guided-active .catalogue-copy > p,
  .walkthrough-guided-active .estimate-note {
    grid-column: 1 / -1;
  }

  .walkthrough-guided-active .catalogue-guide-dock {
    grid-column: 1;
    grid-row: 3;
  }

  .walkthrough-guided-active .catalogue-options {
    grid-column: 2;
    grid-row: 3;
    max-width: none;
    margin-top: 34px;
  }

  .walkthrough-guided-active .experience-chapter {
    display: grid;
    grid-template-columns: minmax(245px, 250px) minmax(0, 1fr);
    grid-template-rows: minmax(0, auto) auto;
    column-gap: clamp(18px, 2.2vw, 28px);
    align-items: start;
    padding-top: 80px;
  }

  .walkthrough-guided-active .experience-chapter .section-heading {
    grid-column: 1 / -1;
    margin-bottom: 10px;
  }

  .walkthrough-guided-active .experience-chapter .section-heading {
    display: none;
  }

  .walkthrough-guided-active .experience-chapter .section-heading h2 {
    font-size: clamp(34px, 3vw, 45px);
    line-height: .96;
  }

  .walkthrough-guided-active .experience-chapter .section-heading > p:not(.eyebrow) {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.35;
  }

  .walkthrough-guided-active .phase-three-guide-dock {
    grid-column: 1;
    grid-row: 2;
  }

  .walkthrough-guided-active .experience-grid {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"] .experience-grid {
    display: none;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-grid {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-spotlight,
  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .customizer-preview {
    display: none;
  }

  .walkthrough-guided-active .experience-card {
    min-height: 205px;
    padding: 14px 16px;
    border-radius: 16px;
  }

  .walkthrough-guided-active .experience-card > small {
    margin-top: 10px;
    font-size: 8px;
  }

  .walkthrough-guided-active .experience-card h3 {
    margin: 5px 0 6px;
    font-size: 23px;
  }

  .walkthrough-guided-active .experience-card p {
    font-size: 11px;
    line-height: 1.35;
  }

  .walkthrough-guided-active .experience-card > strong {
    padding-top: 10px;
    font-size: 15px;
  }

  .walkthrough-guided-active .experience-includes {
    margin-top: 8px;
    gap: 4px;
    font-size: 9px;
    line-height: 1.25;
  }

  .walkthrough-guided-active .experience-card .decision-row {
    margin-top: 10px;
    gap: 7px;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-card {
    min-height: 0;
    padding: 9px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
    align-items: center;
    border-radius: 16px;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-card > small {
    margin-top: 0;
    grid-column: 1;
    font-size: 9px;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-card h3 {
    grid-column: 1;
    margin: 3px 0;
    font-size: 22px;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-card p {
    grid-column: 1;
    margin: 0;
    font-size: 11px;
    line-height: 1.25;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-card > strong {
    grid-column: 2;
    grid-row: 1 / span 3;
    min-width: 92px;
    padding-top: 0;
    text-align: right;
    font-size: 19px;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-number,
  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-includes {
    display: none;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .logo-preview {
    display: grid;
    grid-column: 2;
    grid-row: 1 / span 3;
    min-width: 210px;
    min-height: 78px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 13px;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .logo-preview img {
    max-height: 64px;
    object-fit: contain;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .logo-offer {
    display: flex;
    grid-column: 2;
    grid-row: 4;
    min-width: 120px;
    margin-top: 4px;
    padding-top: 4px;
    justify-content: flex-end;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .decision-row.light {
    display: none;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .decision-row.light button {
    min-height: 28px;
    padding: 6px 4px;
    font-size: 8px;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .show-feature-button {
    grid-column: 2;
    grid-row: 4;
    width: auto;
    min-width: 130px;
    margin: 5px 0 0;
    padding: 7px 10px;
    display: inline-flex;
    justify-self: end;
    border-radius: 999px;
    font-size: 8.5px;
    letter-spacing: .08em;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .logo-option .show-feature-button {
    grid-row: 5;
  }

  .walkthrough-guided-active .experience-card .decision-row button {
    min-height: 31px;
    padding: 7px 8px;
    font-size: 9px;
  }

  .walkthrough-guided-active .experience-number {
    font-size: 29px;
  }

  .walkthrough-guided-active .experience-spotlight {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    padding: 14px 18px;
    border-radius: 18px;
  }

  .walkthrough-guided-active .experience-spotlight strong {
    font-size: 28px;
  }

  .walkthrough-guided-active .experience-spotlight span {
    font-size: 12px;
    line-height: 1.35;
  }

  .walkthrough-guided-active .experience-spotlight b {
    font-size: 27px;
  }

  .walkthrough-guided-active .customizer-preview {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    margin-top: 108px;
    padding: 12px;
    grid-template-columns: .64fr 1fr 1fr;
    gap: 10px;
    border-radius: 18px;
  }

  .walkthrough-guided-active .customizer-preview__intro strong {
    font-size: 24px;
  }

  .walkthrough-guided-active .customizer-preview__intro p,
  .walkthrough-guided-active .customizer-demo p {
    margin-top: 7px;
    font-size: 10px;
    line-height: 1.32;
  }

  .walkthrough-guided-active .customizer-demo {
    padding: 9px;
    border-radius: 15px;
  }

  .walkthrough-guided-active .customizer-demo__heading {
    margin-bottom: 7px;
  }

  .walkthrough-guided-active .customizer-demo__heading strong {
    font-size: 10px;
  }

  .walkthrough-guided-active .customizer-screen {
    min-height: 105px;
    border-radius: 13px;
  }

  .walkthrough-guided-active .customizer-screen img {
    height: 105px;
  }

  .walkthrough-guided-active .swatcher-example {
    grid-column: 2;
    margin-top: 8px;
    padding: 12px;
    grid-template-columns: .78fr 1.22fr;
    gap: 12px;
    border-radius: 18px;
  }

  .walkthrough-guided-active .swatcher-example__copy strong {
    font-size: 24px;
  }

  .walkthrough-guided-active .swatcher-example__copy p {
    margin: 7px 0 8px;
    font-size: 10px;
    line-height: 1.35;
  }

  .walkthrough-guided-active .swatcher-example__copy span {
    font-size: 9px;
  }

  .walkthrough-guided-active .swatcher-piece {
    min-height: 104px;
    border-radius: 14px;
  }

  .walkthrough-guided-active .swatcher-piece img {
    height: 72px;
    border-radius: 10px;
  }

  .walkthrough-guided-active .swatcher-piece span {
    font-size: 8px;
  }

  .walkthrough-guided-active .swatcher-colours i {
    width: 18px;
    height: 18px;
  }

  .walkthrough-guided-active .logo-offer {
    margin-top: 8px;
    padding-top: 8px;
    gap: 5px 10px;
  }

  .walkthrough-guided-active .selection-chapter {
    min-height: 100vh;
    padding-top: 86px;
    grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
    gap: clamp(18px, 2.2vw, 28px);
    align-items: start;
  }

  .walkthrough-guided-active .selection-guide-dock {
    grid-column: 1;
    align-self: start;
  }

  .walkthrough-guided-active .selection-panel {
    grid-column: 2;
    max-width: 940px;
  }

  .walkthrough-guided-active .selection-panel h2 {
    font-size: clamp(34px, 3.6vw, 48px);
    line-height: .95;
  }

  .walkthrough-guided-active .selection-panel > p:not(.eyebrow) {
    font-size: 13px;
    line-height: 1.42;
  }

  .walkthrough-guided-active .selection-summary {
    min-height: 66px;
    margin-top: 14px;
    padding: 12px 16px;
  }

  .walkthrough-guided-active .selection-summary > p {
    margin: 12px 0;
  }

  .walkthrough-guided-active .selection-design-approval {
    margin-top: 12px;
    padding: 16px 18px;
    border-radius: 20px;
  }

  .walkthrough-guided-active .selection-design-approval > span {
    margin-bottom: 8px;
    font-size: 9px;
  }

  .walkthrough-guided-active .selection-design-approval__grid {
    gap: 10px;
  }

  .walkthrough-guided-active .selection-design-approval .design-approve-button {
    min-height: 42px;
    padding: 11px 14px;
    font-size: 10px;
    letter-spacing: .08em;
  }

  .walkthrough-guided-active .selection-design-approval .design-approve-button span {
    width: 18px;
    height: 18px;
  }

  .walkthrough-guided-active .final-notes-card {
    margin-top: 14px;
    padding: 18px 20px;
    gap: 10px;
    border-radius: 22px;
  }

  .walkthrough-guided-active .final-notes-card strong {
    font-size: 23px;
  }

  .walkthrough-guided-active .final-notes-card textarea {
    min-height: 104px;
    padding: 14px 15px;
  }

  .walkthrough-guided-active .selection-art {
    display: none;
  }

  .walkthrough-guided-active[data-guide-chapter="catalogue"] .guide-player,
  .walkthrough-guided-active[data-guide-chapter="phase-three"] .guide-player,
  .walkthrough-guided-active[data-guide-chapter="selections"] .guide-player {
    padding: 10px;
    border-radius: 22px;
  }

  .walkthrough-guided-active[data-guide-chapter="catalogue"] .guide-video-wrap,
  .walkthrough-guided-active[data-guide-chapter="phase-three"] .guide-video-wrap,
  .walkthrough-guided-active[data-guide-chapter="selections"] .guide-video-wrap {
    width: min(100%, 178px) !important;
  }

  .walkthrough-guided-active[data-guide-chapter="catalogue"] .guide-player-heading,
  .walkthrough-guided-active[data-guide-chapter="phase-three"] .guide-player-heading,
  .walkthrough-guided-active[data-guide-chapter="selections"] .guide-player-heading {
    padding-bottom: 6px;
  }

  .walkthrough-guided-active[data-guide-chapter="catalogue"] .guide-caption,
  .walkthrough-guided-active[data-guide-chapter="phase-three"] .guide-caption,
  .walkthrough-guided-active[data-guide-chapter="selections"] .guide-caption {
    font-size: 11px;
    line-height: 1.38;
  }

  .walkthrough-guided-active[data-guide-chapter="catalogue"] .guide-note,
  .walkthrough-guided-active[data-guide-chapter="phase-three"] .guide-note,
  .walkthrough-guided-active[data-guide-chapter="selections"] .guide-note {
    display: none;
  }
}

/* FINAL readability override — must stay at the bottom so later compact
   guided-mode rules do not shrink the page back into tiny print. */
.eyebrow,
.nav-project small,
.nav-progress span,
.portal-back,
.direction-label small,
.direction-label b,
.preview-link,
.upgrade-package small,
.concept-card small,
.option-tag,
.catalogue-heading-note small,
.payment-flow-preview__heading span,
.selection-design-approval > span,
.final-notes-card span,
.selection-event-log__eyebrow,
.selection-event-log__header > small,
.selection-disclaimer {
  font-size: max(11px, .72rem) !important;
}

.guide-player-heading small,
.guide-player-heading button,
.guide-feature-prompt__title,
.guide-controls button,
.guide-note > span,
.guide-note small,
.guide-continue,
.guide-reopen,
.show-feature-button,
.approved-badge,
.live-preview-hint,
.direction-image > span {
  font-size: max(10px, .68rem) !important;
}

.guide-caption,
.guide-feature-prompt__question,
.guide-feature-prompt__result,
.decision-row button,
.catalogue-options p,
.catalogue-includes,
.experience-includes,
.selection-item,
.selection-event strong,
.selection-event span,
.selection-event-log__intro,
.selection-event-log__empty {
  font-size: max(12px, .78rem) !important;
}

@media (min-width: 761px) {
  .walkthrough-guided-active .guide-player-heading small,
  .walkthrough-guided-active .guide-player-heading button,
  .walkthrough-guided-active .guide-controls button,
  .walkthrough-guided-active .guide-continue,
  .walkthrough-guided-active .show-feature-button,
  .walkthrough-guided-active .decision-row button,
  .walkthrough-guided-active .selection-design-approval > span,
  .walkthrough-guided-active .selection-design-approval .design-approve-button {
    font-size: 10.5px !important;
  }

  .walkthrough-guided-active .guide-caption,
  .walkthrough-guided-active[data-guide-chapter="catalogue"] .guide-caption,
  .walkthrough-guided-active[data-guide-chapter="phase-three"] .guide-caption,
  .walkthrough-guided-active[data-guide-chapter="selections"] .guide-caption {
    font-size: 12.5px !important;
    line-height: 1.44 !important;
  }

  .walkthrough-guided-active .experience-card > small,
  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-card > small {
    font-size: 10.5px !important;
  }

  .walkthrough-guided-active .experience-card p,
  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-card p {
    font-size: 11.5px !important;
    line-height: 1.36 !important;
  }

  .walkthrough-guided-active .experience-includes {
    font-size: 10.5px !important;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-card h3 {
    font-size: 22px !important;
  }
}

/* Final selections page cleanup — the notes form should not look trapped
   inside a second bordered box. Keep the actual textarea styled, remove the
   chunky outer shell. */
.selection-chapter .final-notes-card,
.walkthrough-guided-active .final-notes-card {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.selection-chapter .final-notes-card textarea,
.walkthrough-guided-active .final-notes-card textarea {
  min-height: 132px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(246,237,235,.58)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 12px 28px rgba(68,45,45,.045) !important;
}

.walkthrough-guided-active .selection-panel {
  max-width: 1020px !important;
}

/* Final page polish — remove the boxed-in "form container" look on step 15.
   The controls still exist, but the page should read like an upscale decision
   area, not a form shoved into a border rectangle. */
.selection-chapter .selection-panel,
.walkthrough-guided-active .selection-panel {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.selection-chapter .selection-design-approval,
.walkthrough-guided-active .selection-design-approval,
.selection-chapter .selection-event-log,
.walkthrough-guided-active .selection-event-log,
.selection-chapter .selection-summary,
.walkthrough-guided-active .selection-summary {
  border: 0 !important;
  background: linear-gradient(145deg, rgba(255,255,255,.42), rgba(246,237,235,.24)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58) !important;
}

/* Final Phase 3 structure fix.
   Step 13 should not reveal the next pricing page piled underneath, and step
   14 should read like one premium package first with individual add-ons below. */
.walkthrough-guided-active[data-guide-chapter="catalogue"] #phase-three,
.walkthrough-guided-active[data-guide-chapter="catalogue"] #selections {
  display: none !important;
}

.walkthrough-guided-active[data-guide-chapter="catalogue"] #directions,
.walkthrough-guided-active[data-guide-chapter="phase-three"] #directions,
.walkthrough-guided-active[data-guide-chapter="phase-three"] #catalogue,
.walkthrough-guided-active[data-guide-chapter="selections"] #directions,
.walkthrough-guided-active[data-guide-chapter="selections"] #catalogue,
.walkthrough-guided-active[data-guide-chapter="selections"] #phase-three {
  display: none !important;
}

.experience-card.featured {
  order: -10;
  grid-column: 1 / -1;
}

@media (min-width: 761px) {
  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-content: start;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-card.featured {
    order: -10;
    grid-column: 1 !important;
    padding: 18px 20px !important;
    border-color: rgba(255,255,255,.38);
    background: linear-gradient(145deg, rgba(169,115,129,.72), rgba(166,170,120,.24)) !important;
    box-shadow: 0 18px 58px rgba(73,42,48,.24), inset 0 1px rgba(255,255,255,.2) !important;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-card:not(.featured) {
    order: 0;
    grid-column: 1 !important;
    padding: 12px 14px !important;
    background: rgba(255,255,255,.075) !important;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-card.featured h3 {
    font-size: 30px !important;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-card.featured p {
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .experience-card.featured > strong {
    font-size: 28px !important;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .logo-preview {
    min-width: 285px !important;
    min-height: 104px !important;
    align-content: center;
  }

  .walkthrough-guided-active[data-guide-chapter="phase-three"][data-end-demo="pricing"] .logo-preview img {
    max-height: 72px !important;
  }
}

.selection-chapter .final-notes-card,
.walkthrough-guided-active .final-notes-card {
  margin-top: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.selection-chapter .final-notes-card textarea,
.walkthrough-guided-active .final-notes-card textarea {
  min-height: 142px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.88), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.68), rgba(238,220,219,.42)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 16px 34px rgba(70,45,48,.07) !important;
}

/* Step 15 avatar sizing fix. The shared catalogue/pricing compact rules were
   squeezing the final walkthrough bubble too skinny, which made Back/Next fall
   outside the card. Keep the final-step guide as a real card with room for its
   controls. */
@media (min-width: 761px) {
  .walkthrough-guided-active[data-guide-chapter="selections"] .selection-chapter {
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) !important;
    gap: clamp(22px, 2.8vw, 42px) !important;
  }

  .walkthrough-guided-active[data-guide-chapter="selections"] .selection-guide-dock {
    width: 100% !important;
    min-width: 300px !important;
  }

  .walkthrough-guided-active[data-guide-chapter="selections"] .selection-guide-dock .guide-player {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  .walkthrough-guided-active[data-guide-chapter="selections"] .guide-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .walkthrough-guided-active[data-guide-chapter="selections"] .guide-controls button {
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
  }
}

/* Late walkthrough stability.
   From the catalogue/pricing pages through the closing decision page, the
   walkthrough should feel like a calm presentation. Leftover pulse/hover/layout
   transitions make those sections look like they are shivering while the
   avatar is talking, so freeze motion only in these late guided chapters. */
.walkthrough-guided-active[data-guide-chapter="catalogue"] #catalogue,
.walkthrough-guided-active[data-guide-chapter="catalogue"] #catalogue *,
.walkthrough-guided-active[data-guide-chapter="phase-three"] #phase-three,
.walkthrough-guided-active[data-guide-chapter="phase-three"] #phase-three *,
.walkthrough-guided-active[data-guide-chapter="catalogue"] .catalogue-guide-dock,
.walkthrough-guided-active[data-guide-chapter="catalogue"] .catalogue-guide-dock *,
.walkthrough-guided-active[data-guide-chapter="phase-three"] .phase-three-guide-dock,
.walkthrough-guided-active[data-guide-chapter="phase-three"] .phase-three-guide-dock *,
.walkthrough-guided-active[data-guide-chapter="selections"] #selections,
.walkthrough-guided-active[data-guide-chapter="selections"] #selections *,
.walkthrough-guided-active[data-guide-chapter="selections"] .selection-guide-dock,
.walkthrough-guided-active[data-guide-chapter="selections"] .selection-guide-dock * {
  animation: none !important;
  transition: none !important;
}