/* Party.LAN stylesheet map
   01. Design tokens and themes
   02. Reset and document defaults
   03. Shared layout shell
   04. Typography
   05. Buttons and controls
   06. Header and navigation
   07. Landing hero and sections
   08. Packages page
   09. Gallery and testimonials
   10. Contact form
   11. Legal pages
   12. Responsive and reduced motion
*/

/*
   CASCADE GUIDE
   This file records the site's visual development in chronological layers.
   The readable base system comes first; later revision blocks deliberately
   override earlier selectors. When the same selector appears more than once,
   the declaration nearest the end is normally authoritative. The final blocks
   document especially sensitive decisions such as static imagery, mobile
   performance, logo cropping, hero fades and shared responsive widths.

   Keep behaviour-changing edits in static/css/styles.css. dist/css/styles.css
   is a generated copy and will be replaced whenever python build.py runs.
*/

/*
   BEGINNER'S CSS READING GUIDE
   CSS does not create page content. It selects HTML elements and gives them
   visual/layout rules. A rule has a selector, then declarations inside braces:

     .button { color: white; background: purple; }

   .button       selects every element whose HTML includes class="button".
   #faq          selects the one element whose HTML includes id="faq".
   .card p       selects paragraphs inside an element with class="card".
   .a, .b        applies the same declarations to both selectors.
   :hover        applies while a pointer is over an element.
   ::before      creates a decorative pseudo-element, not real page content.
   [aria-expanded] selects elements by an HTML attribute.
   >             means a direct child rather than any deeper descendant.

   A declaration is a property/value pair such as width: 100%. Common units:
   px   = a fixed CSS pixel; rem = relative to the base text size.
   %    = relative to available size; vw/vh = viewport width/height.
   ch   = approximately the width of one text character.
   clamp(min, preferred, max) grows a value responsively within safe limits.

   Values beginning -- are reusable custom properties (CSS variables).
   var(--accent) inserts the current value of --accent. Theme variables can
   therefore recolour many components without editing every individual rule.

   Layout terms used here:
   flex = arrange items primarily in one row or column.
   grid = arrange items using explicit rows and columns.
   gap = space between items; padding = inside space; margin = outside space.
   position:absolute places an item relative to its positioned parent.

   @media rules apply only under a condition. max-width: 920px is the main
   mobile/tablet breakpoint. prefers-reduced-motion removes non-essential motion
   for visitors who request it in their operating-system accessibility settings.

   Class names mostly follow a component pattern: .package-card is a component,
   .package-card__summary is a part, and .package-card--jade is a variation.
   !important deliberately wins over ordinary declarations and is used near the
   end to protect final corrections from historical layers above them.
*/

/* ==================================================
   01. Design tokens and themes
   ================================================== */
/*
   :root holds site-wide default values, which are the light theme. Think of
   these variables as a shared control panel for colour, spacing, width, radius
   and animation timing. Components consume them with var(...).
*/
:root {
  color-scheme: light;
  --bg: #f7efe5;
  --surface: #fffaf2;
  --surface-soft: #f0e4d7;
  --text: #172238;
  --muted: #626a7c;
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-on-key: #fffaf2;
  --text-accent: var(--accent);
  --text-success: #2f7a56;
  --text-danger: #b42318;
  --border: rgba(62, 55, 82, 0.16);
  --accent: #8667a7;
  --accent-2: #cf8fa5;
  --accent-contrast: #fffaf2;
  --jade: #4d937d;
  --shadow: 0 18px 42px rgba(42, 31, 25, 0.09);
  --header: rgba(247, 239, 229, 0.86);
  --hero-fade-left: linear-gradient(90deg, rgba(247, 239, 229, .98) 0%, rgba(247, 239, 229, .93) 24%, rgba(247, 239, 229, .68) 43%, rgba(247, 239, 229, .18) 66%, rgba(247, 239, 229, 0) 100%);
  --hero-fade-bottom: linear-gradient(180deg, rgba(247, 239, 229, 0) 45%, rgba(247, 239, 229, .55) 74%, var(--bg) 100%);
  --hero-glow: radial-gradient(circle at 76% 16%, rgba(207, 143, 165, .16), transparent 34%), radial-gradient(circle at 52% 64%, rgba(134, 103, 167, .12), transparent 38%);
  --layout-max: 121.875rem;
  --layout-gutter: clamp(1rem, 4%, 2rem);
  --text-measure: 72ch;
  --container: min(calc(100% - (2 * var(--layout-gutter))), var(--layout-max));
  --pad: var(--layout-gutter);
  --panel-background: radial-gradient(circle at 18% 0, color-mix(in srgb, var(--accent) 18%, transparent), transparent 45%), radial-gradient(circle at 84% 24%, color-mix(in srgb, var(--jade) 13%, transparent), transparent 42%), var(--surface);
  --panel-border: var(--border-soft, var(--border));
  --panel-shadow: var(--shadow-soft, var(--shadow));
  --panel-radius: 28px;
  --legal-panel-background: color-mix(in srgb, var(--surface) 96%, transparent);
  --button-key-background: #8667a7;
  --button-key-text: var(--text-on-key);
  --button-key-border: color-mix(in srgb, #8667a7 72%, var(--border));
  --button-key-shadow: 0 10px 24px color-mix(in srgb, #8667a7 20%, transparent);
  --button-key-hover-background: color-mix(in srgb, #8667a7 88%, var(--jade));
  --button-key-hover-border: color-mix(in srgb, #8667a7 82%, var(--border));
  --button-secondary-background: color-mix(in srgb, var(--surface) 88%, transparent);
  --button-secondary-text: var(--text-primary);
  --button-secondary-border: var(--border);
  --button-secondary-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 10%, transparent);
  --button-secondary-hover-background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --button-secondary-hover-border: color-mix(in srgb, var(--accent) 52%, var(--border));
  --button-rollout-background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --button-rollout-text: var(--text-primary);
  --button-rollout-border: color-mix(in srgb, var(--accent) 35%, var(--border));
  --button-rollout-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 12%, transparent);
  --button-rollout-hover-background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  --button-rollout-hover-border: color-mix(in srgb, var(--accent) 48%, var(--border));
  --button-rollout-active-background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  --button-rollout-active-border: color-mix(in srgb, var(--accent) 58%, var(--border));
  --button-hover-glow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 14px 34px color-mix(in srgb, var(--accent) 24%, transparent);
  --button-hover-duration: .22s;
  --rollout-icon-duration: .2s;
  --decision-expansion-duration: .28s;
  --reassurance-background: color-mix(in srgb, var(--surface) 92%, transparent);
  --theme-transition: .28s ease;
  --radius: 18px;
  --header-height: 72px;
}

/* JavaScript puts data-theme="dark" on <html>; these values then replace the
   matching light defaults everywhere that uses the shared variables. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121723;
  --surface: #1a2130;
  --surface-soft: #242737;
  --text: #f6eee4;
  --muted: #c4bbc5;
  --border: rgba(223, 206, 255, 0.16);
  --accent: #b596e6;
  --accent-2: #7eb79e;
  --accent-contrast: #151827;
  --jade: #7eb79e;
  --shadow: 0 22px 50px rgba(0, 0, 0, 0.26);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-on-key: #151827;
  --text-accent: var(--accent);
  --text-success: #7eb79e;
  --text-danger: #ffb4aa;
  --button-key-background: #b596e6;
  --button-key-text: var(--text-on-key);
  --button-key-border: color-mix(in srgb, #b596e6 72%, var(--border));
  --button-key-shadow: 0 14px 30px color-mix(in srgb, #b596e6 24%, transparent);
  --button-key-hover-background: color-mix(in srgb, #b596e6 86%, var(--jade));
  --button-key-hover-border: color-mix(in srgb, #b596e6 82%, var(--border));
  --button-secondary-background: color-mix(in srgb, var(--surface) 88%, transparent);
  --button-secondary-text: var(--text-primary);
  --button-secondary-border: var(--border);
  --button-secondary-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  --button-secondary-hover-background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --button-secondary-hover-border: color-mix(in srgb, var(--accent) 55%, var(--border));
  --button-rollout-background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --button-rollout-text: var(--text-primary);
  --button-rollout-border: color-mix(in srgb, var(--accent) 38%, var(--border));
  --button-rollout-shadow: 0 10px 24px rgba(0, 0, 0, .24);
  --button-rollout-hover-background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  --button-rollout-hover-border: color-mix(in srgb, var(--accent) 55%, var(--border));
  --button-rollout-active-background: color-mix(in srgb, var(--accent) 24%, var(--surface));
  --button-rollout-active-border: color-mix(in srgb, var(--accent) 64%, var(--border));
  --button-hover-glow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent), 0 16px 38px rgba(0, 0, 0, .34);
  --reassurance-background: color-mix(in srgb, var(--surface) 94%, transparent);
  --legal-panel-background: color-mix(in srgb, var(--surface) 98%, transparent);
  --header: rgba(18, 23, 35, 0.86);
  --hero-fade-left: linear-gradient(90deg, rgba(18, 23, 35, .99) 0%, rgba(18, 23, 35, .94) 25%, rgba(18, 23, 35, .68) 45%, rgba(18, 23, 35, .2) 68%, rgba(18, 23, 35, 0) 100%);
  --hero-fade-bottom: linear-gradient(180deg, rgba(18, 23, 35, 0) 42%, rgba(18, 23, 35, .6) 73%, var(--bg) 100%);
  --hero-glow: radial-gradient(circle at 76% 14%, rgba(181, 150, 230, .16), transparent 34%), radial-gradient(circle at 56% 68%, rgba(126, 183, 158, .1), transparent 40%);
}

/* Reset and document defaults
   These establish predictable sizing, typography, images and keyboard focus
   before component-specific styling begins. box-sizing:border-box means a
   declared width includes padding and border, which simplifies layout maths. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; font-size: clamp(1rem, .35vw + .92rem, 1.08rem); line-height: 1.62; transition: background-color var(--theme-transition), color var(--theme-transition); overflow-x: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, .button { font: inherit; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--header-height) + 18px); }

/* Layout utilities
   .section and .section-heading provide shared page width and vertical rhythm.
   The skip link stays off-screen until keyboard focus makes it visible. */
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 20; background: var(--accent); color: var(--accent-contrast); padding: .7rem 1rem; border-radius: 999px; }
.skip-link:focus { top: 1rem; }
.section { max-width: var(--container); margin: 0 auto; padding: clamp(4rem, 7vw, 6rem) var(--pad); }
.section-heading { max-width: 720px; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.section-heading--center { margin-inline: auto; text-align: center; }

/* Typography */
.eyebrow { margin: 0 0 .65rem; color: var(--accent); font-size: clamp(.76rem, .2vw + .72rem, .86rem); font-weight: 760; letter-spacing: .11em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 11.5ch; margin-bottom: 1rem; font-size: clamp(2.35rem, 4.6vw, 3.75rem); line-height: 1.02; letter-spacing: -.035em; }
h2 { margin-bottom: .8rem; font-size: clamp(1.8rem, 3vw, 2.75rem); line-height: 1.08; letter-spacing: -.025em; }
h3 { margin-bottom: .55rem; font-size: clamp(1.18rem, 1.2vw, 1.55rem); line-height: 1.18; letter-spacing: -.01em; }
p { max-width: 66ch; }
.section-heading p, .hero__content p, .faq-section__heading p, .faq-item__answer p, .final-cta p { color: var(--muted); }

/* Buttons and controls
   One base shape covers links styled as buttons and real <button> elements.
   Modifier classes choose key, secondary, rollout, small or disabled appearance. */
.button, .theme-toggle, .menu-toggle { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 1px solid var(--border); border-radius: 999px; padding: .68rem 1rem; text-decoration: none; font-weight: 720; transform-origin: center; transition: transform var(--button-hover-duration) ease-in-out, background-color var(--theme-transition), color var(--theme-transition), border-color var(--theme-transition), box-shadow var(--theme-transition); }
.button--key, .button:not(.button--secondary):not(.button--rollout) { background: var(--button-key-background); color: var(--button-key-text); border-color: var(--button-key-border); box-shadow: var(--button-key-shadow); }
.button--key:hover, .button:not(.button--secondary):not(.button--rollout):hover { background: var(--button-key-hover-background); border-color: var(--button-key-hover-border); }
.button--secondary, .button--ghost, .theme-toggle, .menu-toggle { background: var(--button-secondary-background); color: var(--button-secondary-text); border-color: var(--button-secondary-border); box-shadow: var(--button-secondary-shadow); }
.button--secondary:hover, .button--ghost:hover, .theme-toggle:hover, .menu-toggle:hover { background: var(--button-secondary-hover-background); border-color: var(--button-secondary-hover-border); }
.button--rollout { background: var(--button-rollout-background); color: var(--button-rollout-text); border-color: var(--button-rollout-border); box-shadow: var(--button-rollout-shadow); }
.button--rollout:hover, .button--rollout:focus-visible { background: var(--button-rollout-hover-background); border-color: var(--button-rollout-hover-border); }
.button--rollout[aria-expanded="true"], .button--rollout.is-active { background: var(--button-rollout-active-background); border-color: var(--button-rollout-active-border); }
.button--small { min-height: 38px; padding: .55rem .85rem; font-size: .92rem; }
.button:hover, .theme-toggle:hover, .menu-toggle:hover { position: relative; z-index: 2; transform: scale(1.1); border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); box-shadow: var(--button-hover-glow); }
.button--disabled, .button--disabled:hover { cursor: not-allowed; opacity: .58; transform: none; box-shadow: none; filter: saturate(.65); }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.45rem; }

/* Header and navigation
   The header sticks to the viewport top. JavaScript toggles menu/header classes;
   CSS decides how those states look and how desktop/mobile layouts differ. */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--header); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); }
.nav-shell { max-width: var(--container); min-height: var(--header-height); margin: 0 auto; padding: .55rem var(--pad); display: flex; align-items: center; gap: .75rem; }
.brand { margin-right: auto; flex: 0 0 auto; }
.brand img { width: 132px; height: auto; }
.site-menu { display: flex; align-items: center; gap: .85rem; }
.site-menu a { color: var(--muted); font-size: .94rem; font-weight: 650; text-decoration: none; }
.site-menu a:hover { color: var(--text); }
.site-menu__availability { display: none; }
.menu-toggle { display: none; }
.theme-toggle { min-width: 42px; padding-inline: .75rem; font-size: .92rem; }

/* Hero */
.hero { position: relative; min-height: clamp(570px, 62vw, 720px); isolation: isolate; overflow: clip; background: var(--hero-glow), linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 28%, transparent), var(--bg) 86%); }
.hero::after { content: ""; position: absolute; inset: auto 0 -1px; height: clamp(8rem, 18vw, 15rem); z-index: -1; background: linear-gradient(180deg, transparent, var(--bg) 78%); pointer-events: none; }
.hero__picture { position: absolute; z-index: -3; top: clamp(1rem, 3vw, 2.2rem); right: max(var(--pad), calc((100vw - 1540px) / 2 + 2rem)); left: auto; width: clamp(620px, 48vw, 960px); aspect-ratio: 16 / 9; overflow: hidden; border-radius: clamp(.8rem, 2vw, 1.4rem); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 88%, transparent 100%), linear-gradient(180deg, rgba(0,0,0,.82) 0%, #000 12%, #000 72%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 88%, transparent 100%), linear-gradient(180deg, rgba(0,0,0,.82) 0%, #000 12%, #000 72%, transparent 100%); mask-composite: intersect; }
.hero__picture::before, .hero__picture::after, .hero__shade { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero__picture::before { z-index: 1; background: var(--hero-fade-left), linear-gradient(270deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 58%, transparent) 8%, transparent 18%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 24%, transparent) 0%, transparent 16%); }
.hero__picture::after { z-index: 2; background: var(--hero-fade-bottom); }
.hero__media-motion { position: absolute; inset: 0; transform-origin: center; animation: hero-pan 20s cubic-bezier(.45, 0, .55, 1) infinite alternate; will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% center; opacity: 0; transition: opacity var(--theme-transition); }
html[data-theme="light"] .hero__image--light, html:not([data-theme]) .hero__image--light { opacity: 1; }
html[data-theme="dark"] .hero__image--dark { opacity: 1; }
@keyframes hero-pan {
  from { transform: scale(1.03) translate3d(-1.5%, 0, 0); }
  to { transform: scale(1.06) translate3d(1.5%, -.5%, 0); }
}
.hero__shade { z-index: -2; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 31%, transparent 64%), linear-gradient(180deg, transparent 62%, var(--bg) 100%); }
.hero__inner { max-width: var(--container); height: 100%; min-height: inherit; margin: 0 auto; padding: calc(var(--header-height) + 3.2rem) var(--pad) clamp(4.6rem, 8vw, 7rem); display: flex; align-items: flex-end; }
.hero__content { max-width: 520px; position: relative; z-index: 1; }
.hero__content p { font-size: clamp(1rem, .45vw + .95rem, 1.17rem); }

/* Reassurance */
.reassurance { max-width: var(--container); margin: clamp(-2.8rem, -4vw, -1.2rem) auto 0; padding: 0 var(--pad); position: relative; z-index: 2; }
.reassurance ul { list-style: none; margin: 0; padding: .95rem 1.1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius: calc(var(--radius) + 4px); background: var(--reassurance-background); box-shadow: 0 18px 46px rgba(42, 31, 25, .08); backdrop-filter: blur(14px); }
.reassurance li { display: flex; justify-content: center; align-items: center; gap: .55rem; color: var(--muted); font-weight: 720; }
.reassurance svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Packages */
.package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.package-card { min-height: 100%; padding: clamp(1.25rem, 2.4vw, 1.75rem); display: flex; flex-direction: column; gap: 1.1rem; background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-soft) 45%, var(--surface))); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.package-card--jade { --accent: var(--jade); }
.package-subtitle { display: inline-flex; width: fit-content; margin-bottom: .45rem; padding: .26rem .55rem; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: 999px; color: var(--accent); font-size: .82rem; font-weight: 780; }
.package-card h3 { font-size: clamp(1.55rem, 2.3vw, 2.05rem); letter-spacing: .055em; }
.package-meta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline; color: var(--muted); }
.package-meta p { margin: 0; padding-right: .75rem; border-right: 1px solid var(--border); font-weight: 680; }
.package-meta p:last-child { border-right: 0; }
.package-price { color: var(--text); font-size: clamp(1.55rem, 2vw, 1.9rem); font-weight: 820; }
.feature-list { margin: 0 0 .2rem; padding: 0; list-style: none; color: var(--muted); }
.feature-list li { padding: .42rem 0 .42rem 1.35rem; position: relative; border-top: 1px solid color-mix(in srgb, var(--border) 64%, transparent); }
.feature-list li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); }
.package-card .button { margin-top: auto; align-self: flex-start; }

/* How it works */
.steps-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.steps-grid::before { content: ""; position: absolute; left: 15%; right: 15%; top: 1.35rem; border-top: 1px solid var(--border); }
.step-card { position: relative; padding-top: 0; background: var(--bg); }
.step-card span { width: 2.7rem; height: 2.7rem; margin-bottom: 1rem; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: 50%; background: var(--surface); color: var(--accent); font-weight: 820; }
.step-card p { color: var(--muted); }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(250px, .82fr); grid-template-rows: repeat(2, minmax(210px, 1fr)); gap: 1rem; }
.gallery-card { min-width: 0; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.gallery-card:first-child { grid-row: span 2; }
.gallery-card img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; transition: transform .5s ease; }
.gallery-card:hover img { transform: scale(1.015); }
.gallery-card figcaption { padding: .75rem .9rem; color: var(--muted); font-size: .94rem; font-weight: 650; }
.gallery-card a { display: block; height: 100%; text-decoration: none; }

/* Room planning */
.room-planning { display: grid; grid-template-columns: minmax(0, .95fr) minmax(260px, .55fr); align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
.room-planning__text p:not(.eyebrow) { color: var(--muted); }
.room-planning__sketch { min-height: 210px; position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 82%, transparent), color-mix(in srgb, var(--surface-soft) 58%, transparent)); }
.room-planning__sketch::before { content: ""; position: absolute; inset: 22px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 12px; }
.room-planning__sketch span { position: absolute; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); border: 1px solid var(--border); border-radius: 8px; }
.room-planning__sketch span:nth-child(1) { left: 16%; top: 26%; width: 28%; height: 18%; }
.room-planning__sketch span:nth-child(2) { right: 16%; top: 24%; width: 18%; height: 40%; }
.room-planning__sketch span:nth-child(3) { left: 22%; bottom: 22%; width: 45%; height: 10%; }
.room-planning__sketch span:nth-child(4) { right: 22%; bottom: 18%; width: 12%; height: 12%; border-radius: 50%; }

/* FAQ */
.faq-section { display: grid; grid-template-columns: minmax(0, .72fr) minmax(320px, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.faq-section__heading { position: sticky; top: calc(var(--header-height) + 1.5rem); }
.faq-section__heading p:not(.eyebrow) { max-width: 34rem; }
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.faq-item[open] .faq-item__answer { grid-template-rows: 1fr; }
.faq-item__answer p { min-height: 0; overflow: hidden; margin-bottom: 1.1rem; padding-right: 2.7rem; }

/* Testimonials */
.testimonials { padding-top: clamp(3.2rem, 6vw, 5rem); }
.testimonial-stage { position: relative; min-height: clamp(340px, 32vw, 460px); overflow: hidden; border-radius: calc(var(--radius) + 8px); background: var(--surface-soft); box-shadow: 0 20px 54px rgba(42, 31, 25, .12); }
.testimonial-slide { position: relative; min-height: inherit; isolation: isolate; overflow: hidden; }
.testimonial-slide + .testimonial-slide { margin-top: 1rem; }
.testimonial-slide__image, .testimonial-slide__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.testimonial-slide__image { max-width: none; object-fit: cover; object-position: center; }
.testimonial-slide__overlay { z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 32%, color-mix(in srgb, var(--bg) 28%, transparent) 62%, transparent 100%), linear-gradient(0deg, color-mix(in srgb, var(--bg) 82%, transparent) 0%, transparent 34%); }
.testimonial-slide__content { position: relative; z-index: 2; min-height: inherit; max-width: 620px; padding: clamp(1.4rem, 4vw, 3.2rem); display: flex; flex-direction: column; justify-content: flex-end; }
.testimonial-quote { margin: 0; }
.testimonial-quote p { max-width: 18ch; margin-bottom: 1.15rem; color: var(--text); font-size: clamp(1.55rem, 2.6vw, 2.5rem); font-weight: 780; line-height: 1.08; letter-spacing: -.025em; }
.testimonial-person, .testimonial-location { margin: 0; color: var(--muted); font-weight: 760; }
.testimonial-location { font-weight: 650; }
.testimonial-dots { position: absolute; z-index: 3; left: clamp(1.4rem, 4vw, 3.2rem); right: clamp(1.4rem, 4vw, 3.2rem); bottom: 1.05rem; display: flex; gap: .55rem; align-items: center; }
.testimonial-dot { width: 2.25rem; min-height: 2.25rem; padding: 0; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.testimonial-dot span { width: .58rem; height: .58rem; border-radius: 50%; background: color-mix(in srgb, var(--muted) 56%, transparent); transition: transform .18s ease, background-color .18s ease; }
.testimonial-dot.is-active span, .testimonial-dot[aria-current="true"] span { background: var(--accent); transform: scale(1.35); }
.testimonial-dot:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.js .testimonials.is-enhanced .testimonial-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .32s ease; }
.js .testimonials.is-enhanced .testimonial-slide + .testimonial-slide { margin-top: 0; }
.js .testimonials.is-enhanced .testimonial-slide.is-active { opacity: 1; }

/* Final CTA */
.final-cta { text-align: center; }
.final-cta > div { max-width: 760px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.2rem); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.final-cta p { margin-left: auto; margin-right: auto; }

/* Footer */
.site-footer { max-width: var(--container); margin: 0 auto; padding: 2rem var(--pad) 3rem; display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--border); color: var(--muted); }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; gap: .9rem; flex-wrap: wrap; }
.site-footer a { text-decoration: none; font-weight: 650; }

/* Motion
   @keyframes define animation stages. .reveal starts visually offset only when
   JavaScript is active; main.js adds .is-visible as content enters the viewport. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .48s ease, transform .48s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Responsive breakpoints
   These blocks override desktop-first rules as available width decreases. Read
   each one as: "when the browser is no wider than this value, apply these rules." */
@media (max-width: 920px) {
  .menu-toggle { display: inline-flex; }
  .site-menu { position: absolute; left: var(--pad); right: var(--pad); top: calc(100% + .45rem); display: none; flex-direction: column; align-items: stretch; padding: .8rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
  .site-menu.is-open { display: flex; }
  .site-menu a { padding: .65rem; }
  .site-menu__availability { display: block; }
  .header-cta { display: none; }
  .package-grid, .steps-grid, .room-planning { grid-template-columns: 1fr; }
  .steps-grid::before { left: 1.35rem; right: auto; top: .5rem; bottom: .5rem; border-top: 0; border-left: 1px solid var(--border); }
  .step-card { padding-left: 3.6rem; }
  .step-card span { position: absolute; left: 0; top: 0; }
  .gallery-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .gallery-card:first-child { grid-row: auto; }
  .faq-section { grid-template-columns: 1fr; }
  .faq-section__heading { position: static; }
  .hero { min-height: clamp(560px, 84vw, 650px); }
  .hero__picture { top: 0; right: 0; bottom: 22%; left: 14%; width: auto; aspect-ratio: auto; border-radius: 0 0 0 clamp(3rem, 12vw, 5rem); opacity: .92; -webkit-mask-image: none; mask-image: none; }
  .hero__picture::before { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 96%, transparent) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 36%, color-mix(in srgb, var(--bg) 18%, transparent) 76%, transparent 100%); }
  .hero__picture::after { background: linear-gradient(180deg, transparent 18%, color-mix(in srgb, var(--bg) 26%, transparent) 55%, var(--bg) 100%); }
  .hero__inner { align-items: flex-end; padding-top: calc(var(--header-height) + 2.4rem); padding-bottom: clamp(4.4rem, 12vw, 6.2rem); }
  .hero__content { max-width: 560px; }
  .reassurance { margin-top: -2.2rem; }
  .reassurance ul { grid-template-columns: 1fr; }
  .reassurance li { justify-content: flex-start; }
}

@media (max-width: 560px) {
  :root { --header-height: 64px; }
  .nav-shell { gap: .45rem; padding-inline: .8rem; }
  .brand img { width: 112px; }
  .theme-toggle__label { display: none; }
  .theme-toggle, .menu-toggle { min-height: 38px; padding: .48rem .68rem; }
  .hero { min-height: 540px; }
  .hero__picture { left: 0; bottom: 35%; height: 44%; border-radius: 0 0 clamp(3rem, 14vw, 5rem) 0; }
  .hero__image { object-position: 58% center; }
  .hero__picture::before { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 18%, transparent), transparent 40%), linear-gradient(90deg, color-mix(in srgb, var(--bg) 72%, transparent), color-mix(in srgb, var(--bg) 20%, transparent) 68%, transparent); }
  .hero__picture::after { background: linear-gradient(180deg, transparent, var(--bg) 88%); }
  .hero__inner { padding: calc(var(--header-height) + 8.4rem) 1rem 4.2rem; align-items: flex-end; }
  h1 { font-size: clamp(2.1rem, 10vw, 2.75rem); }
  h2 { font-size: clamp(1.7rem, 8vw, 2.12rem); }
  .testimonial-stage { min-height: 420px; border-radius: var(--radius); }
  .testimonial-slide__image { object-position: 58% center; }
  .testimonial-slide__overlay { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent), transparent 28%), linear-gradient(0deg, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 48%, transparent 100%); }
  .testimonial-slide__content { padding: 1.15rem 1rem 3.4rem; }
  .testimonial-quote p { max-width: 16ch; font-size: clamp(1.38rem, 7vw, 1.95rem); }
  .testimonial-dots { left: 1rem; right: 1rem; bottom: .7rem; }
  .button-row { display: grid; grid-template-columns: 1fr; }
  .reassurance { margin-top: -1.8rem; padding-inline: .9rem; }
  .reassurance ul { align-items: start; padding: .8rem .9rem; }
  .package-meta { display: grid; gap: .2rem; }
  .package-meta p { border: 0; padding-right: 0; }
  .site-footer { display: block; }
  .site-footer nav { margin-top: 1rem; }
}

@media (min-width: 1800px) {
  .hero__inner { max-width: min(1440px, calc(100vw - 8rem)); }
  .hero__picture { width: clamp(860px, 42vw, 960px); right: max(3rem, calc((100vw - 1640px) / 2 + 4rem)); }
}

/* Reduced-motion handling
   Accessibility override: content remains present, but animations, transitions
   and hover movement are removed for visitors who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .gallery-card:hover img { transform: none; }
  .hero__media-motion { animation: none; transform: scale(1.03); }
  .hero__image { transition-duration: .12s; }
  .js .testimonials.is-enhanced .testimonial-slide { transition: none; }
}
/*
   Historical component layers
   The following compact revision blocks are retained because later corrections
   depend on their cascade order. Read them from top to bottom; do not assume the
   first declaration of a selector is the value visitors currently receive.
*/

/* content-system feature overrides */
:root{--brand-size:150px;--transition-theme:background-color var(--theme-transition),color var(--theme-transition),border-color var(--theme-transition),box-shadow var(--theme-transition);--card:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface-soft) 45%,var(--surface)));--ring:color-mix(in srgb,var(--accent) 55%,transparent)}
body:before,body:after{content:"";position:fixed;z-index:-10;pointer-events:none;border-radius:999px;filter:blur(70px);opacity:.35;transform:translate3d(0,0,0);animation:ambient 26s ease-in-out infinite alternate}body:before{width:44vw;height:44vw;left:-18vw;top:22vh;background:radial-gradient(circle,rgba(134,103,167,.55),transparent 65%)}body:after{width:38vw;height:38vw;right:-16vw;top:58vh;background:radial-gradient(circle,rgba(126,183,158,.36),transparent 62%)}
@keyframes ambient{to{transform:translate3d(4vw,-2vw,0) scale(1.08)}}
.brand{display:flex;align-items:center;transform-origin:left center}.brand__mark{position:relative;display:block;width:var(--brand-size);height:52px;transform-origin:left center}.brand__logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;transform-origin:left center;transition:opacity var(--theme-transition)}.brand__logo--dark{opacity:0}html[data-theme="dark"] .brand__logo--light{opacity:0}html[data-theme="dark"] .brand__logo--dark{opacity:1}.site-menu a{font-size:1rem}.site-header,.package-card,.addons-panel,.final-cta>div,.site-footer,.faq-item,.gallery-card,.testimonial-stage{transition:background-color var(--theme-transition),color var(--theme-transition),border-color var(--theme-transition),box-shadow var(--theme-transition)}
.hero__picture{width:clamp(700px,54vw,1040px);right:max(.5rem,calc((100vw - 1540px)/2));top:clamp(.5rem,2vw,1.4rem)}.hero__picture::before{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 62%,transparent) 28%,transparent 55%),linear-gradient(270deg,color-mix(in srgb,var(--bg) 35%,transparent),transparent 16%)}.hero__inner{align-items:center}.hero__content{padding:1.1rem;border-radius:24px;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 82%,transparent),color-mix(in srgb,var(--bg) 46%,transparent),transparent);backdrop-filter:blur(2px)}
.addons-panel{margin-top:1rem;padding:1.2rem 1.4rem;border:1px solid var(--border);border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 78%,transparent);box-shadow:var(--shadow)}.package-card{position:relative;overflow:hidden}.package-card:after{content:"";position:absolute;left:0;right:0;bottom:4.8rem;height:4rem;background:linear-gradient(transparent,color-mix(in srgb,var(--surface) 92%,transparent));pointer-events:none}.package-card.is-expanded:after{display:none}.addon-callout{font-weight:800;color:var(--accent)}.package-expand{width:100%;min-height:52px;border-radius:14px;border:1px solid var(--border);background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--text);font-weight:820;cursor:pointer}.package-expand > [data-rollout-icon]{transition:transform var(--rollout-icon-duration) ease;display:inline-grid}.package-details{display:none;border-top:1px solid var(--border);padding-top:1rem}.package-card.is-expanded .package-details{display:block}.package-details dl{display:grid;gap:.4rem}.package-details dt{font-weight:800}.package-details dd{margin:0 0 .6rem;color:var(--muted)}.addon-list{display:grid;gap:.55rem;padding:0;list-style:none}.addon-list li{padding:.7rem;border:1px solid var(--border);border-radius:12px}.addon-list span{display:block;color:var(--muted)}
.testimonials{padding-top:clamp(3rem,5vw,4.5rem)}.testimonial-stage{min-height:clamp(420px,46vw,610px);position:relative;overflow:hidden;border-radius:28px}.testimonial-track,.testimonial-slide,.testimonial-slide img{position:absolute;inset:0;width:100%;height:100%}.testimonial-slide{opacity:0;transform:translateX(6%);transition:opacity .6s ease,transform .6s ease}.testimonial-slide.is-active{opacity:1;transform:none}.testimonial-slide img{object-fit:cover}.testimonial-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.28) 46%,transparent 78%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 42%)}.testimonial-slide__content{position:relative;z-index:1;min-height:100%;max-width:680px;padding:clamp(1.2rem,4vw,3.5rem);display:flex;flex-direction:column;justify-content:flex-end;color:#fff}.testimonial-slide blockquote p{font-size:clamp(1.8rem,3.3vw,3.2rem);line-height:1.04;font-weight:850;max-width:14ch}.demo-badge{width:max-content;padding:.2rem .55rem;border-radius:999px;background:rgba(255,255,255,.18);font-weight:800}.testimonial-prev,.testimonial-next,.gallery-prev,.gallery-next{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:.65rem .9rem;font-weight:800}.testimonial-prev,.testimonial-next{position:absolute;z-index:2;top:50%}.testimonial-prev{left:1rem}.testimonial-next{right:1rem}.testimonial-dots{position:absolute;z-index:2;left:0;right:0;bottom:1rem;display:flex;justify-content:center;gap:.45rem}.testimonial-dot{width:2.2rem;height:2.2rem;border:0;background:transparent}.testimonial-dot span{display:block;width:.62rem;height:.62rem;margin:auto;border-radius:50%;background:rgba(255,255,255,.55)}.testimonial-dot[aria-current="true"] span{background:#fff;transform:scale(1.35)}
/*
 * GALLERY SEGMENTED TABS — COMPONENT SIZING
 * ---------------------------------------------------------------
 * Adjust this local variable block to resize the complete component. The
 * 920px mobile query below intentionally matches GALLERY_MOBILE_QUERY in
 * build.py, which is emitted for JavaScript's matchMedia listener.
 */
.gallery-tabs {
  --gallery-tabs-width: 100%;
  /* Desktop dimensions are 110% of the previous 64rem / 5rem component. */
  --gallery-tabs-max-width: 70.4rem;
  --gallery-tabs-height: 5.5rem;
  --gallery-tabs-radius: 999px;
  --gallery-tabs-padding: .79rem clamp(1.1rem, 2.75vw, 1.65rem);
  --gallery-tabs-icon-gap: clamp(.715rem, 1.65vw, .99rem);
  --gallery-tabs-icon-size: 1.925rem;
  --gallery-tabs-title-size: clamp(1.078rem, 1.54vw, 1.21rem);
  --gallery-tabs-subtitle-size: clamp(.792rem, 1.1vw, .88rem);
  --gallery-tabs-switch-size: 3.3rem;
  --gallery-tabs-switch-overlap: 0px;
  --gallery-tabs-shadow: 0 18px 42px color-mix(in srgb, var(--accent-shared) 22%, transparent);
  --gallery-tabs-transition-duration: .2s;
  --gallery-tabs-mobile-height: 4.5rem;
  --gallery-tabs-mobile-gap: .48rem;
  --gallery-tabs-mobile-padding: .58rem clamp(.55rem, 2.8vw, .8rem);
  /* Scales visual content only; the full tab hit areas keep their dimensions. */
  --gallery-tabs-mobile-scale: .88;

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: var(--gallery-tabs-width);
  max-width: min(100%, var(--gallery-tabs-max-width));
  height: var(--gallery-tabs-height);
  margin: 0 auto clamp(1rem, 2.2vw, 1.4rem);
  border: 1px solid color-mix(in srgb, var(--accent-shared) 18%, var(--border));
  border-radius: var(--gallery-tabs-radius);
  background: var(--surface);
  box-shadow: var(--gallery-tabs-shadow);
}
.gallery-tab {
  position: relative;
  min-width: 0;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gallery-tabs-icon-gap);
  padding: var(--gallery-tabs-padding);
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: center;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--gallery-tabs-transition-duration) ease,
              color var(--gallery-tabs-transition-duration) ease,
              box-shadow var(--gallery-tabs-transition-duration) ease,
              transform var(--gallery-tabs-transition-duration) ease;
}
.gallery-tab:first-child { border-radius: var(--gallery-tabs-radius) 0 0 var(--gallery-tabs-radius); }
.gallery-tab:last-child { border-radius: 0 var(--gallery-tabs-radius) var(--gallery-tabs-radius) 0; }
.gallery-tab__icon {
  flex: 0 0 var(--gallery-tabs-icon-size);
  align-self: center;
  display: grid;
  place-items: center;
  width: var(--gallery-tabs-icon-size);
  height: var(--gallery-tabs-icon-size);
}
.gallery-tab__icon svg,
.gallery-tabs__switch svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gallery-tab__copy {
  min-width: 0;
  max-width: calc(100% - var(--gallery-tabs-icon-size) - var(--gallery-tabs-icon-gap));
  display: grid;
  gap: .15rem;
  text-align: center;
}
.gallery-tab__title { font-size: var(--gallery-tabs-title-size); font-weight: 860; line-height: 1.05; }
.gallery-tab__subtitle { font-size: var(--gallery-tabs-subtitle-size); font-weight: 650; line-height: 1.15; opacity: .78; }
.gallery-tab[aria-selected="true"] {
  z-index: 1;
  background: var(--accent-shared);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
/* The underline provides a non-colour selected cue distinct from :active. */
.gallery-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .48rem;
  width: 1.65rem;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}
.gallery-tab:not([aria-selected="true"]):hover { background: color-mix(in srgb, var(--accent-shared) 11%, var(--surface)); }
.gallery-tab:focus-visible { z-index: 4; outline: 3px solid var(--accent-2); outline-offset: 4px; }
.gallery-tab:active {
  transform: translateY(1px) scale(.985);
  box-shadow: inset 0 3px 9px rgba(21,24,39,.2);
  transition-duration: calc(var(--gallery-tabs-transition-duration) * .5);
}
.gallery-tab[aria-selected="true"]:active { box-shadow: inset 0 3px 9px rgba(21,24,39,.32), inset 0 0 0 1px rgba(255,255,255,.22); }
.gallery-tabs__switch {
  position: absolute;
  z-index: 3;
  left: calc(50% + var(--gallery-tabs-switch-overlap));
  top: 50%;
  width: var(--gallery-tabs-switch-size);
  height: var(--gallery-tabs-switch-size);
  display: grid;
  place-items: center;
  padding: .65rem;
  border: 5px solid var(--surface);
  border-radius: 50%;
  background: var(--accent-shared);
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-shared) 30%, transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}
.showcase-panel,
.showcase-panel > .showcase-track { position: absolute; inset: 0; width: 100%; height: 100%; }
.showcase-panel[hidden] { display: none; }
.gallery-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,36%);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.7rem}.gallery-card{scroll-snap-align:start}.gallery-card[hidden]{display:none}.gallery-card:first-child{grid-row:auto}.gallery-card img{height:260px;width:100%;object-fit:cover}.gallery-prev,.gallery-next{margin-top:.8rem;margin-right:.5rem}
@media (max-width: 920px) {
  .gallery-tabs {
    --gallery-tabs-icon-size: 1.75rem;
    --gallery-tabs-title-size: clamp(.98rem, 1.4vw, 1.1rem);
    --gallery-tabs-subtitle-size: clamp(.72rem, 1vw, .8rem);
    --gallery-tabs-switch-size: 3rem;
    height: var(--gallery-tabs-mobile-height);
    margin-bottom: var(--gallery-tabs-mobile-gap);
  }
  .gallery-tab {
    gap: var(--gallery-tabs-mobile-gap);
    padding: var(--gallery-tabs-mobile-padding);
  }
  .gallery-tab__icon {
    transform: scale(var(--gallery-tabs-mobile-scale));
    transform-origin: right center;
  }
  .gallery-tab__copy {
    transform: scale(var(--gallery-tabs-mobile-scale));
    transform-origin: left center;
  }
  .gallery-tabs__switch {
    transform: translate(-50%, -50%) scale(var(--gallery-tabs-mobile-scale));
  }
}
@media (max-width: 430px) {
  .gallery-tabs {
    --gallery-tabs-icon-size: 1.35rem;
    --gallery-tabs-title-size: clamp(.8rem, 4vw, .92rem);
    --gallery-tabs-subtitle-size: clamp(.62rem, 3vw, .7rem);
    --gallery-tabs-switch-size: 2.55rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-tab { transition: none; }
  .gallery-tab:active { transform: none; }
}
.faq-item h3{margin:0}.faq-item button{width:100%;min-height:4rem;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;text-align:left;border:0;background:transparent;color:var(--text);font-weight:820;font-size:1.05rem;cursor:pointer}.faq-item button .rollout-control__icon-shell{display:grid;place-items:center;justify-self:end;width:1.7rem;height:1.7rem;border:0;border-radius:0;background:transparent;box-shadow:none}.faq-item__answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease}.faq-item__answer>p{overflow:hidden;min-height:0;margin:0;color:var(--muted)}.faq-item.is-open .faq-item__answer{grid-template-rows:1fr}.faq-item.is-open .faq-item__answer>p{padding-bottom:1rem}.room-planning,.faq-section,.final-cta{padding-top:clamp(2.8rem,5vw,4.2rem);padding-bottom:clamp(2.8rem,5vw,4.2rem)}.final-cta>div{background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--accent) 16%,transparent),transparent 55%),var(--surface)}
@media(max-width:920px){.brand__mark{width:128px;height:44px}.gallery-rail{grid-auto-columns:minmax(250px,82%)}.testimonial-prev,.testimonial-next{top:auto;bottom:1rem}.testimonial-prev{left:1rem}.testimonial-next{right:1rem}.testimonial-dots{bottom:4rem}}
@media(max-width:560px){:root{--brand-size:112px}.brand__mark{height:38px}.hero__content{padding:.8rem}.site-menu a{font-size:1rem}.package-grid{grid-template-columns:1fr}.testimonial-stage{min-height:500px}.testimonial-slide:after{background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.22) 70%,transparent)}.testimonial-slide__content{padding-bottom:6.4rem}}
@media(prefers-reduced-motion:reduce){body:before,body:after{animation:none}.testimonial-slide{transition:none;transform:none}.gallery-rail{scroll-behavior:auto}}
/* revision: homepage emotion first, dedicated overlap packages page */
.site-menu a[href="#how-it-works"],.site-menu a[href="#gallery"],.gallery-prev,.gallery-next,.testimonial-prev,.testimonial-next{display:none!important}.hero--home{min-height:clamp(640px,68vw,820px);margin-bottom:-2rem}.hero--home .hero__picture{width:clamp(760px,58vw,1120px);right:max(-1.5rem,calc((100vw - 1540px)/2 - 1rem));top:clamp(.2rem,2vw,1rem);box-shadow:0 36px 90px rgba(36,24,45,.22)}.hero--home .hero__picture::before{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 90%,transparent) 0%,color-mix(in srgb,var(--bg) 54%,transparent) 24%,transparent 52%)}.hero--home .hero__content{box-shadow:0 18px 60px color-mix(in srgb,var(--bg) 62%,transparent)}.reassurance{margin-top:-1rem}.how-section{position:relative}.how-section:before{content:"";position:absolute;inset:2rem var(--pad) auto;height:220px;border-radius:36px;background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--jade) 9%,transparent));z-index:-1}.steps-grid{gap:0;align-items:stretch}.step-card{padding:1.2rem;background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:22px}.step-card:nth-child(2){transform:translateY(1.4rem)}.step-card:nth-child(3){transform:translateY(2.8rem)}.steps-grid::before{top:3rem;left:8%;right:8%;border-top:2px dashed color-mix(in srgb,var(--accent) 30%,var(--border))}.showcase-section{max-width:min(1320px,100%);}.showcase{position:relative;overflow:hidden;border-radius:30px;background:#111;box-shadow:0 34px 90px rgba(23,14,31,.24);aspect-ratio:16/8.2}.showcase:before,.showcase:after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:16%;pointer-events:none}.showcase:before{left:0;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 42%,transparent),transparent)}.showcase:after{right:0;background:linear-gradient(270deg,color-mix(in srgb,var(--bg) 42%,transparent),transparent)}.showcase-track,.showcase-slide,.showcase-slide img{position:absolute;inset:0;width:100%;height:100%}.showcase-slide{opacity:0;transform:scale(1.015);transition:opacity .62s ease,transform .62s ease}.showcase-slide.is-active{opacity:1;transform:none}.showcase-slide img{object-fit:cover}.showcase-slide figcaption{position:absolute;z-index:3;left:clamp(1rem,3vw,2.4rem);bottom:clamp(1rem,3vw,2.2rem);max-width:min(520px,70%);margin:0;padding:.7rem 1rem;border-radius:999px;background:rgba(0,0,0,.48);color:white;font-weight:800;backdrop-filter:blur(8px)}.showcase-indicators,.testimonial-dots{position:absolute;z-index:4;left:0;right:0;bottom:1rem;display:flex;justify-content:center;gap:.45rem}.showcase-indicators{bottom:-2.8rem;position:absolute}.showcase-section .showcase{margin-bottom:3.5rem}.slider-dot{width:2rem;height:1.6rem;border:0;border-radius:999px;background:transparent;cursor:pointer}.slider-dot span{display:block;width:.62rem;height:.62rem;margin:auto;border-radius:999px;background:color-mix(in srgb,var(--muted) 55%,transparent);transition:width .2s ease,background-color .2s ease}.slider-dot[aria-current="true"] span{width:1.55rem;background:var(--accent)}.testimonial-dots .slider-dot span{background:rgba(255,255,255,.55)}.testimonial-dots .slider-dot[aria-current="true"] span{background:#fff}.faq-terms{margin-top:1rem;padding:1rem 1.1rem;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));border-radius:16px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));font-weight:820}.faq-terms a{text-decoration:none}.final-cta>div{background:radial-gradient(circle at 22% 0,color-mix(in srgb,var(--accent) 22%,transparent),transparent 46%),radial-gradient(circle at 78% 20%,color-mix(in srgb,var(--jade) 14%,transparent),transparent 42%),var(--surface);box-shadow:0 30px 84px color-mix(in srgb,var(--accent) 16%,transparent)}
.packages-hero{position:relative;min-height:clamp(520px,52vw,680px);display:grid;place-items:center;isolation:isolate;overflow:hidden;background:#111}.packages-hero__media,.packages-hero__media img{position:absolute;inset:0;width:100%;height:100%}.packages-hero__media img{object-fit:cover;opacity:0;transition:opacity var(--theme-transition)}.packages-hero__media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.62)),radial-gradient(circle at 50% 30%,transparent,rgba(0,0,0,.46) 68%)}html[data-theme="light"] .packages-hero .hero__image--light,html:not([data-theme]) .packages-hero .hero__image--light,html[data-theme="dark"] .packages-hero .hero__image--dark{opacity:1}.packages-hero__content{position:relative;z-index:1;text-align:center;color:#fff;padding:calc(var(--header-height) + 2rem) var(--pad) 8rem}.packages-hero__content h1{max-width:12ch;margin-inline:auto;font-size:clamp(3rem,5.5rem,5.5rem)}.packages-hero__content p:not(.eyebrow){margin-inline:auto;font-size:clamp(1.05rem,1.2vw,1.35rem);color:rgba(255,255,255,.86)}.packages-overlap{max-width:var(--container);margin:-7rem auto 0;padding:0 var(--pad) clamp(3rem,6vw,5rem);position:relative;z-index:2}.package-grid--overlap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;align-items:stretch}.package-grid--overlap .package-card{min-height:0;display:grid;grid-template-rows:auto auto 1fr auto auto;gap:1rem;padding:clamp(1.2rem,2.4vw,1.8rem);border-radius:28px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%,transparent),color-mix(in srgb,var(--surface-soft) 54%,var(--surface)));box-shadow:0 28px 78px rgba(30,20,40,.22);border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border))}.package-grid--overlap .package-card:after{display:none}.package-card--jade{--accent:var(--jade)}.package-card__top h2{letter-spacing:.08em}.package-facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.55rem}.package-facts>*{padding:.75rem;border-radius:14px;background:color-mix(in srgb,var(--accent) 9%,var(--surface));text-align:center;font-weight:820}.package-facts strong{font-size:1.45rem;color:var(--text)}.package-grid--overlap .feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;margin:0}.package-grid--overlap .feature-list li{border:0;padding:.45rem .45rem .45rem 1.15rem;background:color-mix(in srgb,var(--surface) 66%,transparent);border-radius:10px}.package-grid--overlap .package-expand{font-size:1rem;background:color-mix(in srgb,var(--accent) 14%,var(--surface));border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}.package-details{display:none}.package-card.is-expanded .package-details{display:block}.addons-panel--packages{margin-top:1.25rem;border-radius:28px;padding:clamp(1.4rem,3vw,2rem);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),color-mix(in srgb,var(--jade) 10%,var(--surface)));box-shadow:var(--shadow)}.addon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-top:1rem}.addon-tile{padding:1rem;border-radius:18px;background:color-mix(in srgb,var(--surface) 74%,transparent);border:1px solid var(--border)}.addon-kicker{margin:0;color:var(--accent);font-size:.78rem;text-transform:uppercase;font-weight:900;letter-spacing:.08em}.addon-tile h3{font-size:1.05rem}.addon-tile strong{color:var(--text)}.package-guidance{text-align:center}.package-guidance p{margin-inline:auto}
@media(max-width:920px){.hero--home{margin-bottom:0}.step-card:nth-child(n){transform:none}.steps-grid{gap:1rem}.showcase{aspect-ratio:16/10}.package-grid--overlap,.addon-grid{grid-template-columns:1fr}.packages-overlap{margin-top:-4rem}.package-grid--overlap .feature-list{grid-template-columns:1fr}.packages-hero__content{padding-bottom:6rem}}
@media(max-width:560px){.hero--home .hero__picture{right:0;left:0;width:auto}.showcase{aspect-ratio:4/3;border-radius:20px}.showcase-slide figcaption{max-width:88%;border-radius:16px}.packages-overlap{margin-top:-2rem}.package-facts{grid-template-columns:1fr}.packages-hero__content h1{font-size:clamp(2.6rem,4.2rem,4.2rem)}}
@media(prefers-reduced-motion:reduce){.showcase-slide,.testimonial-slide{transition:none;transform:none}.step-card:nth-child(n){transform:none}}
/* revision 2: fluid depth, hero masks, package fade and gallery controls */
.section,.nav-shell,.site-footer{max-width:var(--container)}.section-heading{max-width:min(70ch,100%)}.faq-section{max-width:var(--container)}
body{background:var(--bg)}.hero,.hero--home{background:transparent;overflow:visible}.hero:after,.hero__shade{display:none!important}.hero--home{min-height:clamp(700px,74vw,900px);margin-bottom:0}.hero--home .hero__picture{width:clamp(860px,70vw,1360px);height:auto;aspect-ratio:16/9;right:max(-4vw,calc((100vw - 1760px)/2 - 2rem));top:clamp(.2rem,1.6vw,1rem);bottom:auto;overflow:hidden;border-radius:clamp(1.1rem,2vw,2rem);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 85%,transparent 100%),linear-gradient(180deg,#000 0%,#000 79%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 85%,transparent 100%),linear-gradient(180deg,#000 0%,#000 79%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}.hero--home .hero__picture::before{z-index:1;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 28%,transparent),transparent 18%,transparent 82%,color-mix(in srgb,var(--bg) 28%,transparent))}.hero--home .hero__picture::after{z-index:2;background:linear-gradient(180deg,transparent 78%,var(--bg) 100%)}.hero--home .hero__content{max-width:clamp(34rem,38vw,48rem);padding:clamp(1rem,2vw,1.6rem);background:radial-gradient(ellipse at left,color-mix(in srgb,var(--bg) 86%,transparent),color-mix(in srgb,var(--bg) 42%,transparent) 62%,transparent 76%);box-shadow:none;backdrop-filter:none}.hero--home h1{max-width:14ch;font-size:clamp(2.8rem,5rem,5rem)}.reassurance{margin-top:clamp(-2.25rem,-2vw,-1.5rem)}.how-section{margin-top:clamp(5rem,7vw,7rem);padding-top:clamp(4rem,6vw,6rem);padding-bottom:clamp(5rem,7vw,7rem);max-width:100%;background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 42%,color-mix(in srgb,var(--jade) 8%,transparent));}.how-section>.section-heading,.how-section>.steps-grid{width:var(--container);max-width:var(--container);margin-left:auto;margin-right:auto}.how-section:before{inset:3rem var(--layout-gutter) auto;height:260px;background:radial-gradient(ellipse at 20% 20%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 50%),radial-gradient(ellipse at 80% 60%,color-mix(in srgb,var(--jade) 14%,transparent),transparent 52%)}.step-card span{width:3.4rem;height:3.4rem;font-size:1.25rem}.showcase-section{max-width:var(--container);}.showcase{aspect-ratio:21/9;box-shadow:0 42px 110px rgba(21,12,32,.3)}.showcase:before,.showcase:after{width:12%;opacity:.65}.showcase-indicators{position:relative;bottom:auto;margin-top:.85rem}.slider-dot{width:1.9rem;height:1.9rem}.slider-dot span{width:8px;height:8px}.slider-dot[aria-current="true"] span{width:34px}.showcase-toggle{position:absolute;z-index:5;right:clamp(1rem,2vw,1.5rem);bottom:clamp(1rem,2vw,1.5rem);width:69px;height:69px;font-size:1.5rem;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.48);color:#fff;font-weight:900;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(10px)}.showcase-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}.showcase-feedback{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);display:grid;place-items:center;width:5rem;height:5rem;border-radius:50%;background:rgba(0,0,0,.38);color:#fff;font-size:2rem;opacity:0;transition:opacity .22s ease,transform .22s ease;pointer-events:none}.showcase-feedback.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
.packages-hero{min-height:clamp(550px,54vw,710px);overflow:visible}.packages-hero__media{bottom:-30px;height:calc(100% + 30px);overflow:hidden}.packages-hero__media:after{background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.52) 70%,var(--bg) 100%);z-index:1}.packages-hero__content{padding-bottom:9rem}.packages-overlap{margin-top:-7rem;max-width:var(--container);z-index:3}.packages-overlap .package-card{position:relative;z-index:4}.addons-panel--packages{border:0;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),color-mix(in srgb,var(--jade) 8%,var(--surface)));}.addon-grid{display:none}.addon-list-structured{list-style:none;margin:1.2rem 0 0;padding:0}.addon-row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(220px,auto);gap:1rem;align-items:center;padding:1rem 0;border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent)}.addon-row:first-child{border-top:0}.addon-marker{width:.72rem;height:.72rem;border-radius:50%;background:var(--muted);box-shadow:0 0 0 .32rem color-mix(in srgb,var(--muted) 12%,transparent)}.addon-row--onyx .addon-marker,.addon-row--onyx .addon-badge{background:var(--accent)}.addon-row--jade .addon-marker,.addon-row--jade .addon-badge{background:var(--jade)}.addon-copy h3{margin:0 0 .2rem;font-size:1.08rem}.addon-copy p{margin:0;color:var(--muted)}.addon-meta{display:flex;gap:.75rem;align-items:center;justify-content:flex-end}.addon-badge{display:inline-flex;align-items:center;min-height:2rem;padding:.25rem .65rem;border-radius:999px;background:color-mix(in srgb,var(--muted) 24%,var(--surface));color:var(--accent-contrast);font-weight:900;font-size:.8rem;letter-spacing:.05em}.addon-meta strong{font-size:.95rem;white-space:nowrap}.final-cta>div{border:0;background:radial-gradient(circle at 18% 8%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 38%),radial-gradient(circle at 85% 30%,color-mix(in srgb,var(--jade) 18%,transparent),transparent 42%),linear-gradient(135deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--surface-soft) 58%,var(--surface)));box-shadow:0 34px 96px color-mix(in srgb,var(--accent) 20%,transparent)}
@media(max-width:920px){.hero--home{min-height:clamp(620px,92vw,760px)}.hero--home .hero__picture{width:auto;left:8%;right:-12%;height:58%;aspect-ratio:auto}.how-section{margin-top:clamp(3.5rem,8vw,4.5rem)}.how-section>.section-heading,.how-section>.steps-grid{width:var(--container)}.showcase{aspect-ratio:16/10}.packages-hero__content{padding-bottom:7rem}.packages-overlap{margin-top:-6rem}.addon-row{grid-template-columns:auto 1fr;align-items:start}.addon-meta{grid-column:2;justify-content:flex-start;flex-wrap:wrap}}
@media(max-width:560px){.hero--home{min-height:620px}.hero--home .hero__picture{left:0;right:-20%;height:48%}.hero--home h1{font-size:clamp(2.45rem,3.55rem,3.55rem);max-width:13ch}.hero--home .hero__inner{padding-top:calc(var(--header-height) + 9rem)}.reassurance{margin-top:-1.7rem}.how-section{margin-top:3rem;padding-top:3rem}.showcase{aspect-ratio:4/3}.addon-row{grid-template-columns:1fr}.addon-marker{display:none}.addon-meta{grid-column:auto}.addon-meta strong{white-space:normal}.packages-overlap{margin-top:-4rem}}
@media(prefers-reduced-motion:reduce){.showcase-feedback{transition:none}.hero__media-motion{animation:none!important}.showcase-slide{transition:none!important}}
/* revision 3: visible Home nav, icon theme, centred testimonials, image-ready steps */
.theme-toggle{width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;font-size:1.15rem}.theme-toggle__icon{display:grid;place-items:center;width:1.35rem;height:1.35rem;line-height:1}.site-menu a.is-active{color:var(--text);position:relative}.site-menu a.is-active::after{content:"";position:absolute;left:.65rem;right:.65rem;bottom:.35rem;height:2px;border-radius:999px;background:var(--accent)}
.testimonial-stage{display:grid;place-items:center}.testimonial-slide__content{position:absolute;inset:0;z-index:3;max-width:none;margin:auto;padding:clamp(1.4rem,4vw,3.5rem);align-items:center;justify-content:center;text-align:center;color:#fff}.testimonial-slide__content::before{content:"";position:absolute;z-index:-1;left:50%;top:52%;width:min(760px,82%);height:min(360px,70%);transform:translate(-50%,-50%);border-radius:48px;background:radial-gradient(ellipse at center,rgba(0,0,0,.58),rgba(0,0,0,.34) 48%,transparent 74%);backdrop-filter:blur(2px)}.testimonial-slide blockquote p{max-width:22ch;text-align:center;text-shadow:0 2px 18px rgba(0,0,0,.55)}.testimonial-slide:after{background:radial-gradient(ellipse at center,rgba(0,0,0,.18),transparent 52%),linear-gradient(0deg,rgba(0,0,0,.22),transparent 34%)}.testimonial-dots{left:50%;right:auto;bottom:clamp(1rem,2.2vw,1.75rem);transform:translateX(-50%);width:auto;padding:.3rem .55rem;border:1px solid rgba(255,255,255,.34);border-radius:999px;background:color-mix(in srgb,var(--surface) 20%,rgba(0,0,0,.38));backdrop-filter:blur(14px);box-shadow:0 10px 32px rgba(0,0,0,.16)}.testimonial-toggle{bottom:clamp(1rem,2.2vw,1.75rem);right:clamp(1rem,2.2vw,1.75rem)}
.how-section .steps-grid{align-items:stretch}.how-section .step-card{display:grid;grid-template-rows:auto 1fr;min-height:clamp(520px,42vw,680px);padding:0;overflow:hidden;border:0;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 86%,transparent),color-mix(in srgb,var(--surface-soft) 48%,var(--surface)));box-shadow:0 28px 76px color-mix(in srgb,var(--accent) 12%,transparent)}.step-card__media{position:relative;aspect-ratio:4/5;min-height:0;overflow:hidden;background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 38%),radial-gradient(circle at 75% 72%,color-mix(in srgb,var(--jade) 22%,transparent),transparent 40%),color-mix(in srgb,var(--surface-soft) 72%,var(--surface))}.step-card__media img{width:100%;height:100%;object-fit:cover}.step-card__placeholder{position:absolute;inset:0;display:grid;place-items:center}.step-card__placeholder span{display:grid;place-items:center;width:5.4rem;height:5.4rem;border-radius:28px;background:color-mix(in srgb,var(--surface) 64%,transparent);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);font-size:2rem;font-weight:900;color:var(--accent)}.step-card__body{position:relative;margin-top:-1.7rem;padding:0 clamp(1rem,2vw,1.35rem) clamp(1.1rem,2vw,1.45rem);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%,transparent),transparent);border-radius:24px 24px 0 0}.step-card__number{display:grid;place-items:center;width:3.4rem;height:3.4rem;margin-bottom:.65rem;border-radius:50%;background:var(--accent);color:var(--accent-contrast);font-weight:900;box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 24%,transparent)}html[data-theme="dark"] .step-card__number{border-color:var(--text);background:transparent;color:var(--text);box-shadow:none}.step-card__body p{margin-bottom:0;color:var(--muted)}
@media(max-width:920px){.how-section .step-card{min-height:auto;grid-template-rows:auto auto}.step-card__media{aspect-ratio:16/10}.testimonial-slide__content::before{width:90%;height:68%}}
@media(max-width:560px){.theme-toggle{width:40px;height:40px;min-width:40px}.testimonial-slide blockquote p{font-size:clamp(1.45rem,7vw,2.15rem);max-width:17ch}.testimonial-dots{bottom:.85rem}.testimonial-toggle{bottom:.85rem}.step-card__media{aspect-ratio:4/5}.how-section .step-card{min-height:0}}
@media(prefers-reduced-motion:reduce){.testimonial-slide__content::before{backdrop-filter:none}}
/* revision 4: 4K scale, independent package reveal, image depth, terms FAQ */
.hero__media-motion{animation:hero-pan-wide 38s ease-in-out infinite alternate;will-change:transform}.hero__image{animation:media-breathe 14s ease-in-out infinite alternate;will-change:transform}.hero--home .hero__picture{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,#000 0%,#000 80%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,#000 0%,#000 80%,transparent 100%)}.hero--home .hero__picture::before{background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 42%,transparent) 8%,transparent 16%,transparent 84%,color-mix(in srgb,var(--bg) 42%,transparent) 92%,var(--bg) 100%)}@keyframes hero-pan-wide{from{transform:translate3d(-2.2%,0,0) scale(1.012)}to{transform:translate3d(2.2%,-1%,0) scale(1.018)}}@keyframes media-breathe{from{transform:scale(1)}to{transform:scale(1.025)}}
.package-grid--overlap{align-items:start}.package-grid--overlap .package-card{align-self:start;min-height:clamp(620px,34vw,720px);height:auto}.package-grid--overlap .package-card.is-expanded{min-height:0}.package-details{display:grid!important;grid-template-rows:0fr;opacity:0;transform:translateY(-.45rem);overflow:hidden;border-top:0;padding-top:0;transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1),opacity .32s ease,transform .36s ease,padding-top .32s ease,border-color .32s ease}.package-details>*{min-height:0;overflow:hidden}.package-card.is-expanded .package-details{grid-template-rows:1fr;opacity:1;transform:none;border-top:1px solid var(--border);padding-top:1rem}.package-card.is-expanded .package-details>*{overflow:visible}
.how-section,.steps-grid{overflow:visible}.how-section .step-card{position:relative;overflow:visible;z-index:1;transition:transform .28s ease,box-shadow .28s ease}.step-card__media{border-radius:24px 24px 18px 18px;box-shadow:0 18px 44px color-mix(in srgb,var(--accent) 14%,transparent);transition:transform .3s ease,box-shadow .3s ease;z-index:1}.how-section .step-card:hover,.how-section .step-card:focus-within{z-index:4}.how-section .step-card:hover .step-card__media,.how-section .step-card:focus-within .step-card__media{transform:translateY(-.75rem) scale(1.035);box-shadow:0 34px 86px color-mix(in srgb,var(--accent) 24%,transparent)}
.showcase{overflow:hidden}.showcase-indicators{position:absolute;left:50%;right:auto;bottom:clamp(1.1rem,2vw,1.65rem);transform:translateX(-50%);margin:0;width:auto;padding:.3rem .55rem;border:1px solid rgba(255,255,255,.34);border-radius:999px;background:rgba(20,18,28,.42);backdrop-filter:blur(14px);box-shadow:0 10px 32px rgba(0,0,0,.18)}.showcase-toggle{background:rgba(20,18,28,.46)}.showcase-slide.is-active img{animation:shared-pan 18s ease-in-out infinite alternate,media-breathe 12s ease-in-out infinite alternate}.showcase.is-paused .showcase-slide img,.testimonial-stage.is-paused .testimonial-slide img{animation-play-state:paused}.testimonial-slide.is-active img{animation:shared-pan 20s ease-in-out infinite alternate,media-breathe 13s ease-in-out infinite alternate}@keyframes shared-pan{from{transform:scale(1.03) translate3d(-1.4%,0,0)}to{transform:scale(1.05) translate3d(1.4%,-.8%,0)}}
.faq-terms{display:none!important}.faq-item__link a{font-weight:850;color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.2em}.reassurance__icon{width:2rem;height:2rem;flex:0 0 2rem;display:grid;place-items:center;border-radius:.85rem;background:color-mix(in srgb,var(--accent) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));color:var(--accent);font-weight:900}.reassurance__icon img{width:100%;height:100%;object-fit:contain}.reassurance li{justify-content:flex-start}.theme-toggle__icon{font-size:1.12rem}
@media(min-width:1800px){.hero__inner,.nav-shell,.site-footer,.packages-overlap,.showcase-section{max-width:var(--container)}}
@media(prefers-reduced-motion:reduce){.hero__media-motion,.hero__image,.showcase-slide.is-active img,.testimonial-slide.is-active img{animation:none!important}.package-details{transition:none}.how-section .step-card:hover .step-card__media,.how-section .step-card:focus-within .step-card__media{transform:none}}
/* revision 5: final layout corrections */
.steps-grid{gap:clamp(.875rem,1.05vw,1.25rem)!important}.how-section .step-card{overflow:visible}.how-section .step-card:nth-child(n){transform:none}.step-card__media{transform-origin:50% 75%;overflow:hidden}.how-section .step-card:hover .step-card__media,.how-section .step-card:focus-within .step-card__media{transform:scale(1.05);box-shadow:0 38px 92px color-mix(in srgb,var(--accent) 26%,transparent)}.step-card__body{display:grid;grid-template-rows:auto minmax(2.4em,auto) 1fr;align-content:start;margin-top:0!important;padding:clamp(1.05rem,1.8vw,1.35rem)!important;border-radius:0 0 24px 24px}.step-card__number{position:static!important;margin:0 0 clamp(1rem,1.5vw,1.35rem)!important}.step-card__body h3{margin:0 0 .55rem;min-height:0}.step-card__body p{max-width:62ch}.package-grid--overlap{align-items:start!important}.package-grid--overlap .package-card{grid-template-rows:auto auto minmax(12rem,1fr) auto auto;min-height:clamp(610px,32vw,700px);height:auto;align-self:start}.package-grid--overlap .package-card.is-expanded{min-height:0}.package-card__top{min-height:clamp(9rem,8vw,11rem)}.package-grid--overlap .feature-list{align-content:start;min-height:clamp(11rem,9vw,13rem)}.package-card .button{margin-top:0}.package-enquiry{margin:clamp(1rem,2vw,1.5rem) 0;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:clamp(1.2rem,2.5vw,2rem);border-radius:28px;background:radial-gradient(circle at 12% 10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 42%),linear-gradient(135deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--surface-soft) 55%,var(--surface)));box-shadow:0 24px 70px color-mix(in srgb,var(--accent) 14%,transparent)}.package-enquiry h2{margin:0 0 .35rem}.package-enquiry p{max-width:64ch;margin:0;color:var(--muted)}.showcase-slide figcaption{position:absolute;z-index:3;left:50%;top:52%;bottom:auto;transform:translate(-50%,-50%);width:min(720px,78%);max-width:78%;margin:0;padding:clamp(1rem,2.4vw,1.6rem);border-radius:32px;background:radial-gradient(ellipse at center,rgba(0,0,0,.52),rgba(0,0,0,.32) 52%,transparent 78%);color:#fff;text-align:center;font-size:clamp(1.35rem,2.6vw,3rem);line-height:1.08;font-weight:850;text-shadow:0 2px 18px rgba(0,0,0,.58);backdrop-filter:blur(2px)}.showcase-indicators{bottom:clamp(1.15rem,2vw,1.7rem)!important}.showcase{margin-bottom:0!important}.hero--home .hero__picture::before{background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 42%,transparent) 8%,transparent 16%,transparent 84%,color-mix(in srgb,var(--bg) 42%,transparent) 92%,var(--bg) 100%)!important}.hero--home .hero__picture::after{background:linear-gradient(180deg,transparent 78%,var(--bg) 100%)!important}
@media(max-width:920px){.steps-grid{gap:clamp(.75rem,2vw,1rem)!important}.step-card__body h3{min-height:0}.package-enquiry{align-items:flex-start;flex-direction:column}.package-grid--overlap .package-card{min-height:auto}.package-card__top,.package-grid--overlap .feature-list{min-height:0}.showcase-slide figcaption{width:min(620px,84%);font-size:clamp(1.25rem,4.2vw,2.25rem)}}
@media(max-width:560px){.steps-grid{gap:clamp(1.125rem,5vw,1.5rem)!important}.showcase-slide figcaption{top:48%;width:86%;border-radius:24px;font-size:clamp(1.15rem,6vw,1.85rem)}.showcase-indicators{bottom:.85rem!important}.showcase-toggle{bottom:.85rem;right:.85rem}.step-card__body{padding:1rem!important}}
@media(prefers-reduced-motion:reduce){.how-section .step-card:hover .step-card__media,.how-section .step-card:focus-within .step-card__media{transform:none!important}}
/* navigation and mobile usability update */
:root{}.desktop-links{display:flex;align-items:center;gap:.85rem}.desktop-links a{color:var(--muted);font-size:1rem;font-weight:650;text-decoration:none}.desktop-links a:hover{color:var(--text)}.menu-toggle{display:inline-flex;width:44px;height:44px;min-width:44px;padding:0;border-radius:50%}.menu-toggle__bars{width:1.25rem;display:grid;gap:.24rem}.menu-toggle__bars span{height:2px;border-radius:999px;background:currentColor;transition:transform .2s ease,opacity .2s ease}.menu-toggle[aria-expanded=true] .menu-toggle__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}.menu-toggle[aria-expanded=true] .menu-toggle__bars span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true] .menu-toggle__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.menu-anchor{position:relative;display:inline-flex}.site-menu{position:absolute;top:calc(100% + .55rem);right:0;left:auto;z-index:30;display:none;width:min(760px,calc(100vw - 2*var(--pad)));overflow:visible;transform-origin:top right}.site-menu.is-open{display:block}.site-menu__panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;padding:1.25rem;border:1px solid var(--border);border-radius:22px;background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 28px 80px rgba(20,12,32,.22);backdrop-filter:blur(18px)}.site-menu__group+ .site-menu__group{border-left:1px solid var(--border);padding-left:1.25rem}.site-menu__heading{margin:0 0 .45rem;color:var(--accent);font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.site-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}.site-menu a{display:block;padding:.62rem .35rem;border-radius:10px;color:var(--text);font-weight:760;text-decoration:none}.site-menu a:hover,.site-menu a:focus-visible{background:color-mix(in srgb,var(--accent) 10%,transparent)}.faq-item__answer{grid-template-rows:0fr;opacity:0;transition:grid-template-rows .28s ease,opacity .24s ease}.faq-item__answer-inner{min-height:0;overflow:hidden}.faq-item.is-open .faq-item__answer{grid-template-rows:1fr;opacity:1}.faq-item__answer-inner>p{margin:0 0 1rem;color:var(--muted)}.faq-item__link{margin:.25rem 0 1.1rem!important}.faq-item__button-link{width:max-content;max-width:100%;text-decoration:none!important}.package-grid--overlap{align-items:start!important}.package-grid--overlap .package-card{display:flex!important;flex-direction:column;gap:.9rem;min-height:0!important;height:auto!important;align-self:start!important;padding:clamp(1rem,2vw,1.35rem)!important}.package-card__summary{display:grid;gap:.55rem;grid-template-rows:auto auto auto 1fr;min-height:clamp(17rem,18vw,19rem)}.package-card__summary h2{margin:0;letter-spacing:.08em}.package-summary{margin:0;color:var(--muted)}.package-facts{grid-template-columns:repeat(3,minmax(0,1fr))!important}.package-facts>*{padding:.62rem .45rem!important}.package-grid--overlap .feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:0!important}.package-details{display:grid!important;grid-template-rows:0fr;opacity:0;overflow:hidden;transform:translateY(-.35rem);transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1),opacity .32s ease,transform .36s ease,padding-top .32s ease}.package-details__inner{min-height:0;overflow:hidden}.package-card.is-expanded .package-details{grid-template-rows:1fr;opacity:1;transform:none;border-top:1px solid var(--border);padding-top:1rem}.package-card.is-expanded .package-details__inner{overflow:visible}.package-expand{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-inline:1rem}.addons-panel--packages{scroll-margin-top:calc(var(--header-height) + 18px)}.addons-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer;padding:0}.addons-toggle>span:first-child{display:grid;gap:.2rem}.addons-toggle strong{font-size:clamp(1.75rem,3vw,2.35rem);line-height:1.05}.addons-toggle small{color:var(--muted);font-size:1rem}.addons-toggle__icon{width:2rem;height:2rem;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;font-weight:900;transition:transform .2s ease}.addons-content{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .34s ease,opacity .28s ease}.addons-content__inner{min-height:0;overflow:hidden}.addons-panel.is-open .addons-content{grid-template-rows:1fr;opacity:1}.addons-panel.is-open .addons-content__inner{overflow:visible}.addon-group{margin-top:1.25rem}.addon-group h3{font-size:1rem;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}
@media(max-width:920px){body{padding-bottom:0}.nav-shell{min-height:64px;display:grid;grid-template-columns:auto minmax(0,1fr) 40px 40px;gap:.45rem}.menu-anchor{display:contents}.brand{margin:0;min-width:0}.brand__mark{width:clamp(82px,24vw,112px)!important;height:40px}.desktop-links{display:none}.header-cta{display:inline-flex!important;grid-column:2;min-width:0;width:100%;min-height:40px;justify-content:center;padding:.55rem .6rem;font-size:clamp(.78rem,3.3vw,.92rem);white-space:nowrap}.theme-toggle,.menu-toggle{width:40px;height:40px;min-width:40px}.site-menu{position:fixed;top:calc(var(--header-height) + .5rem);left:.75rem;right:.75rem;width:auto;max-height:calc(100dvh - var(--header-height) - 1rem - env(safe-area-inset-bottom));overflow:auto;z-index:40}.site-menu__panel{grid-template-columns:1fr;gap:.7rem;padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom))}.site-menu__group+ .site-menu__group{border-left:0;border-top:1px solid var(--border);padding-left:0;padding-top:.7rem}.site-menu a{min-height:46px;display:flex;align-items:center;padding:.75rem .55rem}.nav-open{overflow:hidden}.package-card__summary{min-height:0}.package-facts{grid-template-columns:1fr!important}.package-grid--overlap .feature-list{grid-template-columns:1fr}.addons-toggle{align-items:flex-start}.addons-panel:not(.is-open){padding-bottom:1.2rem}}
@media(min-width:921px){.site-menu a.is-active::after{display:none}.addons-panel{padding-bottom:clamp(1.4rem,3vw,2rem)}}
@media(max-width:360px){.nav-shell{padding-inline:.55rem;gap:.32rem}.brand__mark{width:78px!important}.header-cta{font-size:.74rem;padding-inline:.45rem}.theme-toggle,.menu-toggle{width:38px;height:38px;min-width:38px}}
@media(prefers-reduced-motion:reduce){.site-menu__panel,.package-details,.addons-content,.faq-item__answer,.menu-toggle__bars span,.rollout-control__icon,.button,.quiet-button,.theme-toggle,.menu-toggle,.package-tab{transition:none!important}.button:hover,.quiet-button:hover,.theme-toggle:hover,.menu-toggle:hover,.package-tab:hover{transform:none!important}}
/* revision: remove duplicated visible header links */
.desktop-links{display:none!important}.nav-shell{justify-content:flex-end}.brand{margin-right:auto}.header-cta{min-width:min(18rem,34vw);justify-content:center}
@media(max-width:920px){.nav-shell{justify-content:normal}.header-cta{min-width:0}}

/* polish: shared layout, mobile gallery, header behavior */
:root{
  --radius-card: 24px;
  --radius-control: 14px;
  --radius-section: 28px;
  --border-soft: color-mix(in srgb,var(--border) 72%,transparent);
  --shadow-elevated: 0 28px 78px color-mix(in srgb,var(--accent) 14%,transparent);
  --shadow-soft: 0 16px 44px rgba(30,20,40,.10);
  --button-x: 1.35rem;
  --control-height: 44px;
  --section-space: clamp(3.5rem,6vw,5.75rem);
}
.site-header{transition:transform .22s ease,background-color var(--theme-transition),border-color var(--theme-transition);will-change:transform}.site-header.is-hidden{transform:translateY(-100%)}
.header-cta{width:auto!important;min-width:0!important;flex:0 0 auto!important;padding-inline:clamp(1.125rem,1.8vw,1.55rem)!important;white-space:nowrap;min-height:var(--control-height);border-radius:var(--radius-control)}
.button,.theme-toggle,.menu-toggle,.package-expand,.addons-toggle__icon{border-radius:var(--radius-control)}.theme-toggle,.menu-toggle{border-radius:50%}.button{padding-inline:var(--button-x)}
.package-enquiry{display:grid!important;justify-items:center!important;text-align:center!important;max-width:min(100%,920px);margin:clamp(1.1rem,2.4vw,1.65rem) auto!important;padding:clamp(1.35rem,3vw,2.2rem) clamp(1rem,4vw,2rem)!important;border:1px solid var(--border-soft);border-radius:var(--radius-section);box-shadow:var(--shadow-soft)}
.package-enquiry>div{display:grid;justify-items:center}.package-enquiry h2{margin-inline:auto}.package-enquiry p{margin-inline:auto;max-width:56ch}.package-enquiry .button{justify-self:center;width:auto;max-width:min(100%,22rem);margin:0 auto;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 82%,var(--jade)),var(--accent));}
.package-facts{align-items:stretch}.package-facts>*{min-height:4.65rem;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center;line-height:1.15;padding-block:.72rem!important}.package-facts strong{line-height:1.08}.package-card--onyx{--accent:#8667a7}.package-card--jade{--accent:var(--jade)}
.package-grid--overlap .package-card,.addons-panel,.final-cta>div{border-color:var(--border-soft);border-radius:var(--radius-card);box-shadow:var(--shadow-soft)}

@media(max-width:920px){
  body{padding-bottom:0!important}.header-cta{width:100%!important;min-height:40px!important;padding-inline:.6rem!important;border-radius:var(--radius-control)}
  .site-menu__panel{gap:.63rem!important}.site-menu__heading{margin-bottom:.32rem}.site-menu ul{gap:.1rem!important}.site-menu a{min-height:44px!important;padding:.66rem .55rem .66rem calc(.55rem + 1.2rem)!important}.site-menu__group+ .site-menu__group{padding-top:.63rem!important}
  .showcase-section{padding-inline:var(--pad)}
  .showcase{width:100%;margin-inline:auto!important;aspect-ratio:4/3;border-radius:22px;overflow:hidden}.showcase:before,.showcase:after{display:none}.showcase-track,.showcase-slide,.showcase-slide img{inset:0;transform:none!important}.showcase-slide.is-active img{animation:none!important;object-position:center center}.showcase-slide figcaption{top:50%;transform:translate(-50%,-50%);max-width:82%;border-radius:20px}.showcase-toggle{display:none!important}.showcase-indicators{position:static!important;transform:none!important;width:max-content;max-width:100%;margin:10px auto 0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;gap:6px!important}.slider-dot{width:30px;height:30px;padding:0;display:grid;place-items:center}.slider-dot span{width:6px!important;height:6px!important}.slider-dot[aria-current="true"] span{width:22px!important}.showcase-section .showcase{margin-bottom:0!important}
  .package-enquiry{max-width:min(100%,34rem)}.package-facts>*{min-height:4.45rem}.package-facts{grid-template-columns:repeat(3,minmax(0,1fr))!important}.package-grid--overlap .feature-list{grid-template-columns:1fr}
}
@media(max-width:430px){.package-facts{grid-template-columns:1fr!important}.showcase{aspect-ratio:1/1}}
@media(prefers-reduced-motion:reduce){.site-header{transition:none!important}}

/* visual-consistency pass: unified tokens, continuous atmosphere, smooth motion */
:root {
  --page-bg: #f7efe5;
  --page-bg-elevated: #fffaf2;
  --surface: rgba(255, 250, 242, .86);
  --surface-soft: #f1e6da;
  --surface-tinted: color-mix(in srgb, var(--accent-shared) 8%, var(--surface));
  --border: rgba(62, 55, 82, .16);
  --border-soft: rgba(62, 55, 82, .10);
  --text: #172238;
  --text-muted: #626a7c;
  --muted: var(--text-muted);
  --accent-onyx: #8667a7;
  --accent-jade: #4d937d;
  --accent-shared: #8667a7;
  --accent: var(--accent-shared);
  --jade: var(--accent-jade);
  --shadow-soft: 0 18px 42px rgba(42, 31, 25, .09);
  --shadow-elevated: 0 28px 78px rgba(42, 31, 25, .13);
  --shadow: var(--shadow-soft);
  --radius-section: 28px;
  --radius-card: 18px;
  --radius-button: 14px;
  --radius-pill: 999px;
  --radius-icon: 50%;
  --control-height: 44px;
  --control-padding-inline: 1.05rem;
  --section-gap: clamp(4.5rem, 7vw, 7rem);
  --bg: var(--page-bg);
  --header: color-mix(in srgb, var(--page-bg) 86%, transparent);
  --ambient-purple: rgba(134, 103, 167, .18);
  --ambient-teal: rgba(77, 147, 125, .14);
  --ambient-warm: rgba(207, 143, 165, .12);
}
html[data-theme="dark"] {
  --page-bg: #121723;
  --page-bg-elevated: #1a2130;
  --surface: rgba(26, 33, 48, .86);
  --surface-soft: #202737;
  --surface-tinted: color-mix(in srgb, var(--accent-shared) 10%, var(--surface));
  --border: rgba(223, 206, 255, .16);
  --border-soft: rgba(223, 206, 255, .10);
  --text: #f6eee4;
  --text-muted: #c4bbc5;
  --accent-onyx: #b596e6;
  --accent-jade: #7eb79e;
  --accent-shared: #b596e6;
  --shadow-soft: 0 22px 50px rgba(0, 0, 0, .26);
  --shadow-elevated: 0 30px 84px rgba(0, 0, 0, .34);
  --header: color-mix(in srgb, var(--page-bg) 86%, transparent);
  --ambient-purple: rgba(181, 150, 230, .16);
  --ambient-teal: rgba(126, 183, 158, .12);
  --ambient-warm: rgba(207, 143, 165, .06);
}
body { background: var(--page-bg); color: var(--text); }
body::before, body::after { display: none; }
.site-background { position: fixed; inset: 0; z-index: -20; overflow: hidden; pointer-events: none; background: var(--page-bg); }
.site-background__top, .site-background__middle, .site-background__bottom { position: absolute; left: -8vw; right: -8vw; pointer-events: none; }
.site-background__top { top: -10vh; height: 72vh; background: radial-gradient(ellipse at 28% 4%, var(--ambient-warm), transparent 44%), radial-gradient(ellipse at 74% 12%, var(--ambient-purple), transparent 42%), linear-gradient(180deg, var(--page-bg) 0%, color-mix(in srgb, var(--page-bg) 88%, transparent) 64%, transparent 100%); }
.site-background__middle { top: 24vh; bottom: -24vh; will-change: transform; background: repeating-radial-gradient(ellipse at 18% 12%, color-mix(in srgb, var(--ambient-purple) 70%, transparent) 0 2px, transparent 2px 540px), repeating-radial-gradient(ellipse at 86% 38%, color-mix(in srgb, var(--ambient-teal) 70%, transparent) 0 2px, transparent 2px 620px), linear-gradient(115deg, transparent 0 18%, color-mix(in srgb, var(--ambient-warm) 58%, transparent) 34%, transparent 52% 100%); opacity: .9; }
.site-background__bottom { bottom: -8vh; height: 48vh; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent-shared) 7%, transparent) 34%, color-mix(in srgb, var(--page-bg-elevated) 28%, var(--page-bg)) 100%), radial-gradient(ellipse at 30% 52%, var(--ambient-purple), transparent 46%), radial-gradient(ellipse at 74% 36%, var(--ambient-teal), transparent 42%); }
.site-shell, .section, .hero, .how-section, .showcase-section, .faq-section, .final-cta, .packages-overlap { background: transparent !important; }
.site-header { background: var(--header); border-bottom-color: var(--border-soft); }
.button, .package-expand, .addons-toggle, .faq-item__button-link { min-height: var(--control-height); border-radius: var(--radius-button) !important; padding: .66rem var(--control-padding-inline); font-size: .96rem; font-weight: 780; border-width: 1px; box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent); }
.header-cta { border-radius: var(--radius-button) !important; min-height: var(--control-height); white-space: nowrap; width: auto; padding-inline: 1.15rem; }
.theme-toggle, .menu-toggle { width: var(--control-height); height: var(--control-height); min-width: var(--control-height); min-height: var(--control-height); padding: 0; border-radius: var(--radius-icon) !important; border: 1px solid var(--border); box-shadow: none; }
.skip-link { border-radius: var(--radius-button); }
.testimonial-prev, .testimonial-next, .gallery-prev, .gallery-next, .slider-dot, .testimonial-dot { box-shadow: none; }
.package-card, .step-card, .addons-panel, .final-cta > div, .room-planning__sketch, .contact-form-shell, .packages-decision, .package-enquiry { border-color: var(--panel-border); border-radius: var(--panel-radius); background: var(--panel-background); box-shadow: var(--panel-shadow); }
.gallery-card, .testimonial-stage { border-color: var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-soft); }
.package-grid--overlap .package-card, .testimonial-stage, .showcase, .final-cta > div, .addons-panel--packages { border-radius: var(--radius-section); box-shadow: var(--shadow-elevated); }
.package-card--onyx { --accent: var(--accent-onyx); }
.package-card--jade, .addon-row--jade { --accent: var(--accent-jade); }
.package-subtitle { border-radius: var(--radius-button); }
.how-section { margin-top: var(--section-gap); }
.how-section:before { display: none; }
.step-card { overflow: hidden; }
.step-card__media,
.step-card__media img { border-radius: calc(var(--panel-radius) - 1px) calc(var(--panel-radius) - 1px) 0 0; }
/*
 * GALLERY IMAGE CAPTION — THEME BOX CONFIGURATION
 * ---------------------------------------------------------------
 * Adjust these local variables to tune the Header/Subtext overlay. The
 * bright text and 22% dark box remain consistent in both site themes.
 */
.showcase {
  --gallery-caption-text-color: #fff;
  --gallery-caption-subtext-color: rgba(255, 255, 255, .9);
  --gallery-caption-box-color: #000;
  --gallery-caption-box-opacity: 22%;
  --gallery-caption-box-padding: clamp(1rem, 2.4vw, 1.7rem);
  --gallery-caption-box-radius: var(--radius-button);
  --gallery-caption-box-blur: 2px;

  background: var(--page-bg-elevated);
  border: 1px solid var(--border);
}
.showcase-slide { transform: none; transition: opacity .5s ease; }
.showcase-slide__pan, .showcase-slide__breathe, .showcase-slide__breathe img { position: absolute; inset: 0; width: 100%; height: 100%; }
.showcase-slide__breathe img { object-fit: cover; }
.showcase-slide.is-active .showcase-slide__pan { animation: shared-pan 44s linear infinite alternate; will-change: transform; }
.showcase-slide.is-active .showcase-slide__breathe { animation: shared-breathe 16s ease-in-out infinite alternate; will-change: transform; }
.showcase.is-paused .showcase-slide__pan, .showcase.is-paused .showcase-slide__breathe { animation-play-state: paused; }
/* Shared semantic caption component for gallery and testimonial media. */
.media-caption {
  display: flex;
  flex-direction: column;
  gap: clamp(.45rem, 1vw, .75rem);
  color: #fff;
}
.media-caption__header,
.media-caption__subtext { margin: 0; }
.media-caption__header {
  max-width: 22ch;
  font-size: clamp(2.0735rem, 4.29vw, 4.29rem);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.02em;
}
.media-caption__subtext {
  max-width: 52ch;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(1.287rem, 1.859vw, 1.6445rem);
  font-weight: 620;
  line-height: 1.45;
  text-wrap: balance;
}
.showcase-slide .media-caption {
  align-items: center;
  width: min(760px, 82%);
  max-width: 82%;
  padding: var(--gallery-caption-box-padding);
  border-radius: var(--gallery-caption-box-radius);
  background: color-mix(in srgb, var(--gallery-caption-box-color) var(--gallery-caption-box-opacity), transparent);
  color: var(--gallery-caption-text-color);
  text-align: center;
  font-size: 1rem;
  text-shadow: none;
  backdrop-filter: blur(var(--gallery-caption-box-blur));
}
.showcase-slide .media-caption__subtext { color: var(--gallery-caption-subtext-color); }
.testimonial-slide__content.media-caption {
  align-items: flex-start;
  text-align: left;
}
.testimonial-slide__content .media-caption__header {
  font-size: clamp(2.2165rem, 4.29vw, 4.29rem);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .58);
}
.testimonial-slide__content .media-caption__subtext { font-weight: 650; }
@media (max-width: 560px) {
  .showcase-slide .media-caption {
    width: 88%;
    max-width: 88%;
    padding: 1rem;
  }
  .media-caption__header { font-size: clamp(1.3rem, 6vw, 1.85rem); }
  .media-caption__subtext { font-size: clamp(.82rem, 3.7vw, 1rem); }
  .testimonial-slide__content .media-caption__header { font-size: clamp(1.4rem, 6.5vw, 2.1rem); }
  .testimonial-slide__content .media-caption__subtext { font-size: clamp(.84rem, 3.8vw, 1rem); }
}
.hero__media-motion { animation: none; }
.hero__media-pan, .hero__media-breathe { position: absolute; inset: -2%; transform-origin: center; }
.hero__media-pan { animation: hero-pan-smooth 52s linear infinite alternate; will-change: transform; }
.hero__media-breathe { animation: hero-breathe 18s ease-in-out infinite alternate; will-change: transform; }
.hero__image { transition: opacity var(--theme-transition); }
@keyframes hero-pan-smooth { from { transform: translate3d(-1.8%, .4%, 0); } to { transform: translate3d(1.8%, -.8%, 0); } }
@keyframes hero-breathe { from { transform: scale(1); } to { transform: scale(1.018); } }
@keyframes shared-pan { from { transform: translate3d(-1.2%, .2%, 0); } to { transform: translate3d(1.2%, -.4%, 0); } }
@keyframes shared-breathe { from { transform: scale(1); } to { transform: scale(1.014); } }
.faq-list, .faq-item { background: transparent; box-shadow: none; }
.faq-item button:focus-visible, .legal-accordion__item button:focus-visible, .button:focus-visible, .theme-toggle:focus-visible, .menu-toggle:focus-visible, [role=tab]:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.final-cta > div { background: radial-gradient(circle at 18% 0, color-mix(in srgb, var(--accent-shared) 18%, transparent), transparent 45%), radial-gradient(circle at 84% 28%, color-mix(in srgb, var(--accent-jade) 13%, transparent), transparent 42%), var(--surface); }
.site-footer { max-width: var(--container); border-top: 1px solid var(--border-soft); color: var(--text-muted); background: transparent; }
@media (max-width: 920px) { .site-background__middle { will-change: auto; } .header-cta { display: none; } .site-menu { border-radius: var(--radius-section); background: var(--surface); } }
@media (prefers-reduced-motion: reduce) { .site-background__middle { transform: none !important; will-change: auto; } .hero__media-pan, .hero__media-breathe, .showcase-slide__pan, .showcase-slide__breathe { animation: none !important; transform: none !important; will-change: auto; } }

/* final animation/button conflict guards */
.hero__media-breathe .hero__image,
.showcase-slide__breathe img { animation: none !important; will-change: auto; }
@media (max-width: 920px) {
  .header-cta { display: inline-flex; border-radius: var(--radius-button) !important; }
}

/* PR correction: mobile CTA removal, half-speed atmosphere, tab/header/page alignment */
.site-background { overflow: hidden; }
.site-background__middle {
  top: -120vh;
  bottom: -120vh;
  min-height: 340vh;
  will-change: transform;
  background-size: 920px 920px, 1040px 1040px, auto;
}
body { padding-bottom: 0 !important; }
.packages-hero { background: transparent; }
.packages-hero__media { border-bottom: 0; }
.package-enquiry {
  border: 1px solid var(--border);
  border-radius: var(--radius-section);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.package-enquiry { max-width: var(--container); margin: clamp(1.4rem, 3vw, 2rem) auto 0; }
.site-footer a:hover { color: var(--text); }
@media (max-width: 920px) {
  .nav-shell {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .42rem;
    overflow: hidden;
  }
  .brand { min-width: 0; max-width: clamp(76px, 24vw, 112px); overflow: hidden; }
  .brand__mark { width: clamp(76px, 24vw, 112px) !important; min-width: 0; }
  .header-cta {
    grid-column: 2;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 15rem;
    justify-self: stretch;
    box-sizing: border-box;
    padding-inline: clamp(.42rem, 2vw, .7rem) !important;
    font-size: clamp(.72rem, 3.2vw, .9rem) !important;
    line-height: 1;
    overflow: hidden;
    text-align: center;
  }
  .theme-toggle, .menu-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  .showcase-section { max-width: 100%; padding-inline: var(--pad); }
  .showcase { margin-inline: auto; width: 100%; transform: none; }
  .showcase-toggle { display: none !important; }
  .showcase-indicators {
    position: static;
    transform: none;
    margin: .7rem auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
  }
}
@media (max-width: 360px) {
  .nav-shell { gap: .32rem; padding-inline: .55rem; }
  .theme-toggle, .menu-toggle { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; }
  .header-cta { max-width: none; padding-inline: .38rem !important; border-radius: var(--radius-button) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .site-background__middle { transform: none !important; will-change: auto; }
}

/* PR: shared media framing, section alignment and add-ons surface flattening */
:root {
  --section-intro-width: min(100%, 70ch);
  --section-intro-gap: clamp(1.6rem, 3vw, 2.4rem);
}
.section-intro,
.how-section > .section-intro,
.showcase-section > .section-intro,
.faq-section > .section-intro {
  width: var(--container);
  max-width: var(--container);
  margin: 0 auto var(--section-intro-gap) !important;
  padding: 0 !important;
  text-align: left !important;
}
.section-intro > .eyebrow,
.section-intro > h2,
.section-intro > p {
  width: var(--section-intro-width);
  max-width: var(--section-intro-width);
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}
.section-intro > .eyebrow { margin-bottom: .55rem; }
.section-intro > h2 { margin-bottom: .7rem; font-size: clamp(2.15rem, 4.4vw, 4.6rem); line-height: var(--heading-line); }
.section-intro > p { color: var(--text-muted); line-height: var(--body-line); }
.how-section > .steps-grid { width: var(--container); max-width: var(--container); margin-left: auto; margin-right: auto; }
.showcase-section { max-width: var(--container); padding-inline: 0; }
.showcase-section > .showcase { width: 100%; max-width: none; min-width: 0; margin-left: auto; margin-right: auto; }
/* =========================================================
   FAQ — MAIN ADJUSTMENTS

   Change only these variables when adjusting the layout.
   ========================================================= */

.faq-section {
  /* Overall FAQ section width */
  --faq-max-width: 1000px;
  

  /* Width relationship between title and questions */
  --faq-title-column-width: 0.72fr;
  --faq-list-column-width: 1fr;
  --faq-list-min-width: 320px;

  /* Space between the title and questions */
  --faq-column-gap: clamp(1.7rem, 4vw, 2.5rem);
  --faq-row-gap: var(--section-intro-gap);

  /* Width of the title text */
  --faq-title-max-width: 30rem;

  /* Spacing inside each question */
  --faq-item-column-gap: 1rem;
  --faq-item-padding: 1rem 0;

  display: grid;

  grid-template-columns:
    minmax(0, var(--faq-title-column-width))
    minmax(
      var(--faq-list-min-width),
      var(--faq-list-column-width)
    );

  column-gap: var(--faq-column-gap);
  row-gap: var(--faq-row-gap);

  max-width: var(--faq-max-width);
  margin-inline: auto;
  align-items: start;
}


/* =========================================================
   FAQ TITLE
   ========================================================= */

.faq-section > .section-intro {
  width: auto;
  max-width: none;
  margin: 0 !important;
}

.faq-section > .section-intro > .eyebrow,
.faq-section > .section-intro > h2,
.faq-section > .section-intro > p {
  width: 100%;
  max-width: var(--faq-title-max-width);
}

.faq-section > .section-intro > h2 {
  font-size: clamp(2.15rem, 3.6vw, 3.9rem);
}

.faq-section__heading {
  position: static;
  top: auto;
}


/* =========================================================
   FAQ LIST
   ========================================================= */

.faq-list {
  width: 100%;
  min-width: 0;
}

.faq-item button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;

  column-gap: var(--faq-item-column-gap);
  padding: var(--faq-item-padding);

  text-align: left;
}


/* =========================================================
   DROPDOWN ICON
   ========================================================= */

.faq-item .rollout-control__icon-shell,
.faq-item [data-rollout-icon] {
  justify-self: end;
}

.showcase {
  position: relative;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  border: 1px solid var(--border);
  border-radius: var(--radius-section);
  background: var(--page-bg-elevated);
  isolation: isolate;
}
.showcase-track,
.showcase-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.showcase-slide {
  display: block;
  overflow: hidden;
  opacity: 0;
  transform: none !important;
  transition: opacity .62s ease;
  pointer-events: none;
}
.showcase-slide.is-active { opacity: 1; pointer-events: auto; }
.showcase-slide__pan,
.showcase-slide__breathe,
.showcase-slide__breathe img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  transform-origin: center center;
}
.showcase-slide__pan {
  transform: translate3d(0,0,0) scale(1.065);
  backface-visibility: hidden;
}
.showcase-slide__breathe { transform: none; }
.showcase-slide__breathe img {
  object-fit: cover !important;
  object-position: center center;
  animation: none !important;
  backface-visibility: hidden;
  will-change: auto;
}
.showcase-slide.is-active .showcase-slide__pan {
  animation: shared-pan-breathe 18s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  will-change: transform;
}
.showcase-slide.is-active .showcase-slide__breathe { animation: none; will-change: auto; }
.showcase.is-paused .showcase-slide__pan { animation-play-state: paused; }
@keyframes shared-pan-breathe {
  from { transform: translate3d(-1.15%, .35%, 0) scale(1.065); }
  to { transform: translate3d(1.15%, -.35%, 0) scale(1.08); }
}

.addons-panel--packages {
  font-family: var(--font-body);
  color: var(--text);
  margin-top: clamp(1.2rem, 2.6vw, 1.9rem);
  padding: clamp(1.35rem, 4vw, 2.2rem) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-section) !important;
  background: radial-gradient(circle at 16% 0, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%), radial-gradient(circle at 85% 24%, color-mix(in srgb, var(--jade) 12%, transparent), transparent 40%), var(--surface) !important;
  box-shadow: var(--shadow-elevated) !important;
}
.addons-toggle {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(1rem, 2.5vw, 1.35rem);
  width: 100%;
  max-width: min(100%, 58rem);
  margin-inline: auto;
  text-align: center !important;
  padding: 0 !important;
  font-family: inherit;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.addons-toggle__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-inline: auto;
  justify-items: center;
  gap: .45rem;
}
.addons-toggle__copy .eyebrow { margin-bottom: .05rem; }
.addons-toggle strong {
  max-width: 100%;
  margin: 0;
  text-align: center;
  font-size: clamp(2rem, 6vw, 2.55rem);
  line-height: var(--heading-line);
}
.addons-toggle small {
  width: min(100%, 58ch);
  max-width: 100%;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.8vw, 1.08rem);
  font-weight: 400;
  line-height: var(--body-line);
  text-align: center;
}
.addons-toggle__control {
  width: min(100%, 32rem);
  margin-inline: auto;
  min-height: var(--control-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .72rem var(--control-padding-inline);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--radius-button);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--text);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 12%, transparent);
  font-weight: 820;
  text-align: left;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.addons-toggle:hover .addons-toggle__control {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
}
.addons-toggle:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 4px; border-radius: var(--radius-button) !important; }
.addons-toggle:focus-visible .addons-toggle__control { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 18%, transparent); }
.addons-toggle__label { display: inline-flex; align-items: center; }
.addons-toggle__icon {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  margin-left: auto;
  border: 0;
  border-radius: 0;
  font-size: 1.15rem;
  line-height: 1;
  transition: transform var(--rollout-icon-duration) ease;
}

.addons-content__inner {
  margin-top: clamp(1.1rem, 2.4vw, 1.8rem);
  padding-top: clamp(1rem, 2vw, 1.35rem);
  border-top: 1px solid var(--border-soft);
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.addon-group { margin-top: 0; }
.addon-group + .addon-group { margin-top: clamp(1.1rem, 2vw, 1.45rem); }
.addon-group h3,
.addon-copy p,
.addon-meta,
.addon-meta strong,
.addon-badge,
.package-enquiry p { font-family: var(--font-body); line-height: var(--body-line); }
.addon-copy p { color: var(--text-muted); font-weight: 400; }
.addon-meta strong { color: var(--text); font-weight: 780; }
.addon-list-structured { margin-top: .75rem; }
.addon-row { background: transparent; }
.package-enquiry {
  width: 100%;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem;
  text-align: center !important;
  padding-left: clamp(1.35rem, 4vw, 2.4rem) !important;
  padding-right: clamp(1.35rem, 4vw, 2.4rem) !important;
}
.package-enquiry > div {
  width: min(100%, 58rem);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.package-enquiry h2,
.package-enquiry p { margin-left: auto !important; margin-right: auto !important; text-align: center; }
.package-enquiry .button {
  width: fit-content !important;
  flex: 0 0 auto;
  align-self: center;
  justify-self: auto;
  margin: 0 auto !important;
  padding-left: var(--control-padding-inline) !important;
  padding-right: var(--control-padding-inline) !important;
  text-align: center;
  transform: none !important;
}


@media (max-width: 950px) and (min-width: 921px) {
  .faq-section { grid-template-columns: 1fr; max-width: var(--container); }
  .faq-section > .section-intro { width: 100%; max-width: var(--container); }
  .faq-section > .section-intro > .eyebrow,
  .faq-section > .section-intro > h2,
  .faq-section > .section-intro > p { max-width: var(--section-intro-width); }
}
@media (max-width: 920px) {
  .section-intro,
  .how-section > .section-intro,
  .showcase-section > .section-intro,
  .how-section > .steps-grid { width: var(--container); max-width: var(--container); }
  .faq-section { grid-template-columns: 1fr; max-width: var(--container); }
  .faq-section > .section-intro { width: 100%; max-width: var(--container); }
  .faq-section > .section-intro > .eyebrow,
  .faq-section > .section-intro > h2,
  .faq-section > .section-intro > p { max-width: var(--section-intro-width); }
  .showcase-section > .showcase { width: 100%; max-width: none; }
  .showcase { aspect-ratio: 4 / 3; border-radius: 22px; }
  .showcase-slide__pan { transform: translate3d(0,0,0) scale(1.055); }
  .showcase-slide.is-active .showcase-slide__pan { animation-name: shared-pan-breathe-mobile; animation-duration: 16s; }
  .showcase-indicators { position: static !important; transform: none !important; width: max-content; max-width: 100%; margin: 10px auto 0 !important; }
  .showcase-toggle { display: none !important; }
  .addons-toggle { align-items: center !important; justify-items: center; }
  .addons-panel:not(.is-open) { padding-bottom: clamp(1.25rem, 3vw, 2.2rem) !important; }
}
@keyframes shared-pan-breathe-mobile {
  from { transform: translate3d(-.75%, .2%, 0) scale(1.055); }
  to { transform: translate3d(.75%, -.2%, 0) scale(1.068); }
}
@media (max-width: 430px) { .showcase { aspect-ratio: 1 / 1; } }

/* Packages decision */
.package-tabs { display: none; }
.packages-decision {
  max-width: min(100%, 58rem);
  margin: clamp(1.5rem, 4vw, 2.6rem) auto 0;
  padding: clamp(1.4rem, 4vw, 2.6rem);
  text-align: center;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-section);
  background: radial-gradient(circle at 18% 0, color-mix(in srgb, var(--accent-shared) 16%, transparent), transparent 42%), radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent-jade) 12%, transparent), transparent 40%), color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-soft);
}
.packages-decision__header > h2 { margin-inline: auto; max-width: 14ch; font-size: clamp(2.1rem, 4.8vw, 4rem); line-height: var(--heading-line); }
.packages-decision__header > p:not(.eyebrow) { max-width: 48rem; margin-inline: auto; color: var(--text-muted); }
.packages-decision__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; margin-top: clamp(1.1rem, 3vw, 1.6rem); }
.packages-decision__control[aria-expanded="true"] { box-shadow: var(--button-hover-glow); }
.packages-decision__control[data-decision-mode="questions"],
.packages-decision__control[data-decision-mode="questions"]:hover,
.packages-decision__control[data-decision-mode="questions"]:focus-visible,
.packages-decision__control[data-decision-mode="questions"][aria-expanded="true"] { background: transparent; }
.packages-decision__control[data-decision-mode="questions"] { box-shadow: none; }
.packages-decision__control[data-decision-mode="questions"]:hover,
.packages-decision__control[data-decision-mode="questions"]:focus-visible,
.packages-decision__control[data-decision-mode="questions"][aria-expanded="true"] { box-shadow: var(--button-hover-glow); }
.rollout-control__label { min-width: 0; }
.rollout-control__icon {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 1.7rem;
  font-size: 1.05rem;
  line-height: 1;
  transform-origin: center;
  transition: transform var(--rollout-icon-duration) ease;
}
[data-rollout-icon],
.rollout-control__icon { pointer-events: none; }
[aria-expanded="true"] > [data-rollout-icon],
[aria-expanded="true"] .addons-toggle__control > [data-rollout-icon],
.faq-item button[aria-expanded="true"] [data-rollout-icon] { transform: rotate(180deg); }
.packages-decision__icon { margin-left: .4rem; transition: transform var(--rollout-icon-duration) ease; }

.packages-decision__expansion {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  opacity: 0;
  transition: grid-template-rows var(--decision-expansion-duration) ease-in-out, opacity var(--decision-expansion-duration) ease-in-out;
}
.packages-decision__expansion.is-open { grid-template-rows: 1fr; opacity: 1; }
.packages-decision__expansion-inner { min-width: 0; min-height: 0; overflow: hidden; }
.packages-decision__expansion.is-open .packages-decision__expansion-inner { overflow: visible; }
.packages-decision__divider { width: 100%; border-top: 1px solid var(--panel-border); }
.packages-decision__content { padding-top: clamp(1.2rem, 3vw, 1.8rem); text-align: left; }
.packages-decision__content > div { width: min(100%, 48rem); margin-inline: auto; }
.packages-decision__content h3 { margin-top: 0; }
.packages-decision__content p,
.packages-decision__content li { color: var(--text-muted); }
.package-faq-item { border-top: 1px solid var(--border-soft); }
.package-faq-item h3 { margin: 0; }
.faq-item__question,
.package-faq-item .rollout-control__label { width: 100%; min-width: 0; justify-self: stretch; text-align: left; }
.faq-item__answer,
.package-faq-answer { text-align: left; }
.package-faq-item button { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 1rem; align-items: center; min-height: 3.6rem; padding: .9rem 0; border: 0; background: transparent; color: var(--text); text-align: left; font-weight: 820; cursor: pointer; }
.package-faq-item button .rollout-control__icon { justify-self: end; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.package-faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .24s ease, opacity .2s ease; }
.package-faq-answer > div { min-height: 0; overflow: hidden; }
.package-faq-list,
.package-faq-item,
.package-faq-item h3,
.package-faq-item button,
.package-faq-answer,
.package-faq-answer > div { background: transparent; box-shadow: none; }
.package-faq-item.is-open .package-faq-answer { grid-template-rows: 1fr; opacity: 1; }
.package-faq-item.is-open .package-faq-answer > div { padding-bottom: 1rem; }

.faq-item__button-link { color: var(--text-on-key) !important; background: var(--accent-shared) !important; border-color: color-mix(in srgb, var(--accent-shared) 72%, var(--border)) !important; opacity: 1 !important; mix-blend-mode: normal !important; }
.faq-item__button-link:hover, .faq-item__button-link:focus-visible { color: #fff !important; }
@media (max-width: 920px) {
  .package-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: 0 0 .85rem; }
  .package-tab { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: .35rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-button); background: var(--surface); color: var(--text); font-weight: 900; cursor: pointer; }
  .package-tab small { color: var(--text-muted); font-weight: 700; }
  .package-tab[aria-selected="true"] { color: #fffaf2; }
  .package-tab--onyx[aria-selected="true"] { background: var(--accent-onyx); border-color: color-mix(in srgb, var(--accent-onyx) 72%, var(--border)); }
  .package-tab--jade[aria-selected="true"] { background: var(--accent-jade); border-color: color-mix(in srgb, var(--accent-jade) 72%, var(--border)); }
  .package-tab[aria-selected="true"] small { color: color-mix(in srgb, #fff 86%, transparent); }
  .package-grid--overlap .package-card[hidden] { display: none !important; }
  .package-grid--overlap { grid-template-columns: 1fr; }
  .packages-decision__actions { flex-direction: column; align-items: stretch; }
  .packages-decision__actions > * { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .packages-decision__expansion, .rollout-control__icon, .package-faq-answer, .legal-accordion__answer { transition: none !important; } }


/* Compact visual controls use glow + scale; structural accordion rows keep glow only. */
.quiet-button,
.package-tab,
.packages-decision__control.button--rollout {
  transform-origin: center;
  transition: transform var(--button-hover-duration) ease-in-out, background-color var(--theme-transition), color var(--theme-transition), border-color var(--theme-transition), box-shadow var(--theme-transition);
}
.quiet-button:hover,
.quiet-button:focus-visible,
.package-tab:hover,
.package-tab:focus-visible,
.packages-decision__control.button--rollout:hover,
.packages-decision__control.button--rollout:focus-visible {
  position: relative;
  z-index: 2;
  transform: scale(1.01);
  box-shadow: var(--button-hover-glow);
}
.faq-item button:hover,
.faq-item button:focus-visible,
.package-faq-item button:hover,
.package-faq-item button:focus-visible,
.package-expand:hover,
.package-expand:focus-visible,
.addons-toggle:hover .addons-toggle__control,
.addons-toggle:focus-visible .addons-toggle__control {
  box-shadow: var(--button-hover-glow);
}

/* Contact form */
.contact-page h1 { max-width: 12ch; }
.contact-form-shell { max-width: 880px; padding: clamp(1.2rem, 3vw, 1.7rem); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.contact-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field--event[hidden], .contact-disclosure[hidden] { display: none !important; }
.field--full, .contact-form__actions { grid-column: 1 / -1; }
.field label { font-weight: 720; }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: .72rem .82rem; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface) 88%, var(--bg)); color: var(--text); font: inherit; }
.field textarea { min-height: 130px; resize: vertical; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #b42318; }
.field-error { min-height: 1.25rem; margin: 0; color: #b42318; font-size: .9rem; }
.field-help { margin: 0; color: var(--muted); font-size: .9rem; }
.privacy-check label { display: flex; gap: .55rem; align-items: flex-start; color: var(--muted); font-weight: 600; }
.privacy-check input { width: auto; min-height: 0; margin-top: .3rem; }
.contact-form__actions { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.contact-submit { border-radius: 12px; }
.quiet-button { width: fit-content; min-height: 40px; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface-soft) 56%, transparent); color: var(--text); font-weight: 720; }
.direct-email { width: fit-content; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.direct-email small { color: var(--text-secondary); font-size: .82rem; }
.quiet-link { color: var(--muted); font-weight: 720; }
.contact-status { min-height: 1.35rem; margin-bottom: .85rem; color: var(--muted); font-weight: 700; }
.contact-status.is-loading { color: var(--muted); }
.contact-status.is-success { color: color-mix(in srgb, var(--accent) 72%, var(--text)); }
.contact-status.is-error { color: #b42318; }
.form-honeypot { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.contact-success { padding: 1rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.packages-inline-contact { margin-top: 1.25rem; }
.packages-inline-contact .contact-form-shell { margin: 0 auto; text-align: left; }
@media (max-width: 720px) { .contact-form__grid { grid-template-columns: 1fr; } }


/*
   Authoritative shared shell and component consolidation
   This later layer standardises page widths and contains the current legal,
   carousel and contact layouts that supersede matching historical rules above.
*/

/* PR #20 correction: authoritative shared shell and carousel/contact consolidation */
.section,
.nav-shell,
.hero__inner,
.reassurance,
.testimonials,
.showcase-section,
.faq-section,
.final-cta,
.site-footer,
.packages-hero__content,
.packages-overlap,
.contact-section,
.legal-page {
  width: var(--container);
  max-width: var(--container);
  margin-inline: auto;
  min-width: 0;
}
.section,
.hero__inner,
.packages-hero__content,
.packages-overlap,
.contact-section,
.final-cta,
.site-footer { padding-inline: 0; }
.how-section { width: var(--container); max-width: var(--container); }
.how-section > .section-intro,
.how-section > .steps-grid,
.showcase-section > .section-intro,
.showcase-section > .showcase,
.final-cta > div,
.package-grid--overlap,
.addons-panel--packages,
.contact-form-shell {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.showcase { overflow: hidden; }
.showcase-track,
.showcase-slide,
.showcase-slide__pan,
.showcase-slide__breathe,
.showcase-slide__breathe img { inset: 0; width: 100%; height: 100%; max-width: none; }
.showcase-indicators { max-width: 100%; margin-inline: auto; }
.legal-page { padding-top: calc(var(--header-height) + clamp(2rem, 5vw, 4rem)); padding-bottom: clamp(3rem, 6vw, 5rem); }
.legal-section { width: 100%; max-width: none; margin-inline: auto; padding: 0; }
.legal-page__top { display: grid; justify-items: start; width: 100%; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.legal-page__back { width: fit-content; align-self: flex-start; }
.legal-page__heading { width: 100%; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.legal-page__heading h1 { margin: 0; }
.legal-page__updated { max-width: var(--text-measure); margin: .55rem 0 0; color: var(--text-secondary); font-weight: 700; }
.legal-page__notice { max-width: var(--text-measure); margin: .75rem 0 0; color: var(--text-secondary); font-weight: 700; }
.legal-page__summary { max-width: var(--text-measure); margin: .75rem 0 0; color: var(--text-secondary); }
.legal-accordion { width: 100%; max-width: none; overflow: hidden; border: 1px solid var(--panel-border); border-radius: var(--panel-radius); background: var(--legal-panel-background); box-shadow: var(--panel-shadow); transition: background-color var(--theme-transition), border-color var(--theme-transition), box-shadow var(--theme-transition); }
.legal-accordion__item { border-bottom: 1px solid var(--panel-border); }
.legal-accordion__item,
.legal-accordion__item button,
.legal-accordion__answer,
.legal-accordion__answer-inner { background: transparent; box-shadow: none; }
.legal-accordion__item:last-child { border-bottom: 0; }
.legal-accordion__item h2 { margin: 0; }
.legal-accordion__item button { width: 100%; min-height: 4.25rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: clamp(1rem, 2vw, 1.3rem) clamp(1rem, 3vw, 1.6rem); border: 0; background: transparent; color: var(--text-primary); text-align: left; font: inherit; font-weight: 820; cursor: pointer; }
.legal-accordion__label { min-width: 0; justify-self: stretch; text-align: left; }
.legal-accordion__item [data-rollout-icon] { justify-self: end; }
.legal-accordion__answer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .22s ease, opacity .2s ease; }
.legal-accordion__answer-inner { min-height: 0; overflow: hidden; padding-inline: clamp(1rem, 3vw, 1.6rem); }
.legal-accordion__item.is-open .legal-accordion__answer { grid-template-rows: 1fr; opacity: 1; }
.legal-accordion__item.is-open .legal-accordion__answer-inner { padding-bottom: clamp(1rem, 2.5vw, 1.5rem); }
.legal-content { display: grid; gap: .9rem; width: 100%; min-width: 0; max-width: var(--text-measure); color: var(--text-secondary); text-align: left; overflow-wrap: anywhere; }
.legal-content p { margin: 0; }
.legal-content__list { display: grid; gap: .55rem; margin: 0; padding-left: 1.5rem; }
.legal-content__list li { padding-left: .2rem; }
.legal-content__list li::marker { color: var(--accent); font-weight: 800; }
.legal-definitions { display: grid; gap: .75rem; margin: 0; }
.legal-definitions > div { display: grid; grid-template-columns: max-content auto minmax(0, 1fr); align-items: baseline; gap: .3rem; }
.legal-definitions dt { color: var(--text-primary); font-weight: 800; }
.legal-definitions__separator { color: var(--text-secondary); }
.legal-definitions dd { margin: 0; }
.legal-fields { display: grid; gap: 1rem; margin: 0; }
.legal-fields > div { display: grid; grid-template-columns: minmax(8rem, auto) minmax(8rem, 1fr); align-items: end; gap: .75rem; }
.legal-fields dt { color: var(--text-primary); font-weight: 750; }
.legal-fields dd { min-height: 1.5rem; margin: 0; border-bottom: 1px solid var(--panel-border); }
.legal-table-scroll { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--panel-border); border-radius: 14px; background: color-mix(in srgb, var(--surface) 72%, transparent); }
.legal-table { width: 100%; min-width: 42rem; border-collapse: collapse; color: var(--text-secondary); font-size: .94rem; line-height: 1.5; }
.legal-table th, .legal-table td { padding: .8rem .9rem; border-right: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border); text-align: left; vertical-align: top; }
.legal-table th:last-child, .legal-table td:last-child { border-right: 0; }
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table th { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--text-primary); font-weight: 800; }
.legal-table-scroll:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.packages-decision__header > .eyebrow,
.packages-decision__header > h2,
.packages-decision__header > p:not(.eyebrow) { margin-inline: auto; text-align: center; }
.packages-decision__header > h2 { max-width: none; font-size: clamp(2.1rem, 3.4rem, 3.4rem); }
.packages-decision__actions { justify-content: center; }
.privacy-check__label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .55rem; color: var(--muted); font-weight: 600; line-height: 1.55; }
.privacy-check__label input { width: auto; min-height: 0; margin: .3rem 0 0; align-self: start; }
.privacy-check__copy { min-width: 0; }
.privacy-check__copy a { display: inline; }
@media (max-width: 1180px) and (min-width: 921px) {
  .hero--home { min-height: 0; display: flex; flex-direction: column; gap: clamp(1rem, 2.5vw, 1.8rem); padding-top: calc(var(--header-height) + clamp(1rem, 2.4vw, 1.8rem)); overflow: visible; }
  .hero--home .hero__picture { position: relative; order: 0; z-index: 0; top: auto; right: auto; left: auto; width: min(calc(100% - (2 * var(--layout-gutter))), 1120px); margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--radius-section); }
  .hero--home .hero__inner { order: 1; min-height: 0; height: auto; padding-block: 0 clamp(3.5rem, 6vw, 5rem); align-items: flex-start; }
  .hero--home .hero__content { max-width: min(100%, 48rem); }
}
@media (max-width: 920px) {
  html, body, .site-shell { max-width: 100%; overflow-x: clip; }
  .section, .hero__inner, .packages-hero__content, .packages-overlap, .contact-section, .final-cta, .site-footer { padding-inline: 0; }
  .showcase { aspect-ratio: 4 / 3; }
  .showcase-indicators { position: static; transform: none; width: max-content; }
  .hero__content, .hero__content .eyebrow, .hero__content h1, .hero__content p, .section-intro, .section-intro > .eyebrow, .section-intro > h2, .section-intro > p, .section-heading, .section-heading > .eyebrow, .section-heading > h1, .section-heading > p, .packages-hero__content, .packages-hero__content h1, .packages-hero__content p, .final-cta, .final-cta > div, .contact-page .section-heading, .faq-section > .section-intro, .faq-section > .section-intro > .eyebrow, .faq-section > .section-intro > h2, .faq-section > .section-intro > p { text-align: center; margin-left: auto; margin-right: auto; }
  .faq-item button, .faq-item__answer p, .feature-list, .legal-page, .legal-page *, .contact-form-shell, .contact-form-shell *, .site-menu a { text-align: left; }
}
@media (max-width: 430px) { .showcase { aspect-ratio: 1 / 1; } }
@media (max-width: 560px) {
  .legal-fields > div { grid-template-columns: 1fr; gap: .35rem; }
}

/*
 * STATIC MEDIA AND MOBILE PERFORMANCE OVERRIDES
 * ---------------------------------------------------------------
 * Keep this block at the end of the file. This stylesheet contains
 * historical component revisions above, so these final declarations are
 * the source of truth for image motion and the low-power mobile treatment.
 *
 * Images may cross-fade when a gallery slide or colour theme changes, but
 * no image or image wrapper is allowed to pan, zoom, or "breathe".
 */
.hero__media-motion,
.hero__media-pan,
.hero__media-breathe,
.showcase-slide__pan,
.showcase-slide__breathe,
.showcase-slide__breathe img,
.testimonial-slide img {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}
.hero__media-motion,
.hero__media-pan,
.hero__media-breathe,
.showcase-slide__pan,
.showcase-slide__breathe {
  inset: 0 !important;
}
.hero__image,
.showcase-slide__breathe img,
.testimonial-slide img {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}
.showcase-slide,
.testimonial-slide {
  transform: none !important;
  transition-property: opacity !important;
}

@media (max-width: 920px) {
  /*
   * Bleed the hero image two pixels beyond both viewport edges. The former
   * horizontal fade ended exactly at x=0 and could expose a sharp one-pixel
   * line after browser rounding. Mobile now uses only a bottom fade.
   */
  .hero--home .hero__picture {
    top: -2px !important;
    right: -2px !important;
    left: -2px !important;
    width: auto !important;
    overflow: hidden;
    isolation: isolate;
    border-radius: 0 0 clamp(3rem, 12vw, 5rem) 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .hero--home .hero__picture::before { display: none !important; }
  .hero--home .hero__picture::after {
    inset: -2px !important;
    background: linear-gradient(180deg, transparent 72%, var(--bg) 100%) !important;
  }

  /*
   * Phone rendering path: remove effects that cause repeated large-area
   * compositing while scrolling. Borders and solid/translucent fills retain
   * the visual hierarchy without fixed parallax, blur, or oversized shadows.
   */
  .site-background__middle { display: none !important; }
  .site-background__top,
  .site-background__bottom { left: 0; right: 0; }
  .site-header,
  .site-menu__panel,
  .reassurance ul,
  .hero--home .hero__content,
  .showcase-slide figcaption,
  .showcase-indicators,
  .testimonial-slide__content::before,
  .testimonial-dots {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .hero--home .hero__picture,
  .showcase,
  .testimonial-stage,
  .package-card,
  .step-card,
  .addons-panel,
  .packages-decision,
  .package-enquiry,
  .contact-form-shell,
  .final-cta > div {
    box-shadow: none !important;
  }
  .showcase-slide,
  .testimonial-slide { transition-duration: .2s !important; }

  /* Reveal-on-scroll transforms add work during the busiest mobile action. */
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (hover: none) {
  /* Touch screens do not need hover-only transforms or their extra layers. */
  .button:hover,
  .quiet-button:hover,
  .theme-toggle:hover,
  .menu-toggle:hover,
  .how-section .step-card:hover .step-card__media {
    transform: none !important;
    box-shadow: none !important;
  }
}

/*
 * HEADER LOGO VISIBLE-ARTWORK CROP
 * ---------------------------------------------------------------
 * Both logo PNGs are 2048px square transparent canvases, but their matching
 * visible artwork occupies 1601×794px at source offset 226,600. These values
 * crop the transparent canvas in CSS, so the artwork itself—not the square
 * file box—is centred in the header. Change only --brand-logo-width to make
 * the visible logo larger or smaller while preserving its alignment.
 */
:root { --brand-logo-width: 104px; }
.brand__mark {
  width: var(--brand-logo-width) !important;
  height: auto !important;
  aspect-ratio: 1601 / 794;
  overflow: visible;
  transform-origin: left center;
}
.brand__logo {
  inset: manual !important;
  left: -13.116%;
  top: -5%;
  width: 125% !important;
  height: 115% !important;
  max-width: none;
  object-fit: fill;
  object-position: bottom;
  transform: none;
}
@media (max-width: 920px) {
  :root { --brand-logo-width: clamp(78px, 24vw, 96px); }
}

/* Full-width accordion controls keep their glow but never outgrow the card. */
.package-expand:hover,
.package-expand:focus-visible {
  transform: none !important;
}

/*
 * Match the existing Make it your own hover scale while its rollout is open.
 * Closing it does not force a shrink under the pointer: :hover keeps the same
 * scale until the pointer leaves. Touch and reduced-motion layouts stay flat.
 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .addons-toggle[aria-expanded="true"] {
    position: relative;
    z-index: 2;
    transform: scale(1.1);
    box-shadow: var(--button-hover-glow);
  }
}

/*
 * HERO IMAGE OPACITY FADES
 * ---------------------------------------------------------------
 * These variables are the manual adjustment points for both large hero
 * treatments. The fades use alpha masks: the photographs become transparent
 * at their edges, so no background-coloured rectangle can form a hard seam.
 *
 * Homepage: move the radial centre or change its solid/soft stops.
 * Packages: change the fade stops, or the 10% extension below the hero.
 */
:root {
  --home-hero-media-top: 0px;
  --home-hero-media-side-gap: clamp(1.5rem, 4vw, 5rem);
  --home-hero-media-bottom-bleed: clamp(8rem, 12vw, 14rem);
  --home-hero-fade-centre-x: 50%;
  --home-hero-fade-centre-y: 28%;
  --home-hero-fade-radius-x: 47%;
  /* End the ellipse before the media box so its bottom can never clip flat. */
  --home-hero-fade-radius-y: 65%;
  --home-hero-fade-solid: 30%;
  --home-hero-fade-soft: 58%;

  --packages-hero-fade-extension: 10%;
  --packages-hero-fade-start: 62%;
  --packages-hero-fade-soft: 82%;
}

@media (min-width: 1181px) {
  .hero--home .hero__picture {
    top: var(--home-hero-media-top);
    right: auto;
    left: 50%;
    width: min(
      calc(100% - (2 * var(--home-hero-media-side-gap))),
      var(--layout-max)
    );
    height: calc(100% + var(--home-hero-media-bottom-bleed));
    aspect-ratio: auto;
    transform: translateX(-50%);
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-image: radial-gradient(
      ellipse var(--home-hero-fade-radius-x) var(--home-hero-fade-radius-y)
        at var(--home-hero-fade-centre-x) var(--home-hero-fade-centre-y),
      #000 0%,
      #000 var(--home-hero-fade-solid),
      rgba(0, 0, 0, .72) var(--home-hero-fade-soft),
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse var(--home-hero-fade-radius-x) var(--home-hero-fade-radius-y)
        at var(--home-hero-fade-centre-x) var(--home-hero-fade-centre-y),
      #000 0%,
      #000 var(--home-hero-fade-solid),
      rgba(0, 0, 0, .72) var(--home-hero-fade-soft),
      transparent 100%
    );
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }

  /* Keep the copy layer fully transparent so it cannot reveal a box edge. */
  .hero--home .hero__content {
    background: transparent;
  }

  /* Stronger light-theme ink remains readable directly over the photograph. */
  html:not([data-theme]) .hero--home .hero__content h1,
  html[data-theme="light"] .hero--home .hero__content h1 {
    color: #091a34;
  }
  html:not([data-theme]) .hero--home .hero__content p:not(.eyebrow),
  html[data-theme="light"] .hero--home .hero__content p:not(.eyebrow) {
    color: #3d485f;
  }
  html:not([data-theme]) .hero--home .hero__content .eyebrow,
  html[data-theme="light"] .hero--home .hero__content .eyebrow {
    color: #48546b;
  }

  .hero--home .hero__image { object-position: 50% 42%; }

  /* The radial alpha mask replaces both rectangular colour overlays. */
  .hero--home .hero__picture::before,
  .hero--home .hero__picture::after {
    display: none !important;
  }
}

.packages-hero__media {
  inset: 0 0 auto;
  height: calc(100% + var(--packages-hero-fade-extension));
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 var(--packages-hero-fade-start),
    rgba(0, 0, 0, .62) var(--packages-hero-fade-soft),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 var(--packages-hero-fade-start),
    rgba(0, 0, 0, .62) var(--packages-hero-fade-soft),
    transparent 100%
  );
}

.packages-hero__media::after {
  /* Readability shading also ends transparent; it never paints in --bg. */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .46) 68%, transparent 100%),
    radial-gradient(circle at 50% 30%, transparent 0%, rgba(0, 0, 0, .42) 68%, transparent 100%);
}
.faq-section {
  width: var(--container) !important;
  max-width: var(--faq-max-width) !important;
  margin-inline: auto !important;

  justify-self: center;
  box-sizing: border-box;
}
.final-cta {
  --final-cta-panel-width: min(100%, 58rem);
}

.final-cta > div {
  width: var(--final-cta-panel-width);
  max-width: none;
  margin-inline: auto;
}