/* ===== CUSTOM PROPERTIES ===== */
:root {
    --orange: #E8830C;
    --orange-light: #f5a623;
    --black: #1a1a1a;
    --dark: #111111;
    --gray-900: #222222;
    --gray-800: #333333;
    --gray-600: #666666;
    --gray-400: #999999;
    --gray-200: #e0e0e0;
    --white: #ffffff;
    --bamboo: #c8935a;
    --nav-height: 70px;
    --section-padding: 100px;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--white);
    background: var(--dark);
    line-height: 1.6;
    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: var(--section-padding) 0;
}

.section-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.section-subtitle {
    text-align: center;
    font-size: 1.15rem;
    color: var(--gray-400);
    max-width: 560px;
    margin: 0 auto 64px;
}

/* ===== ANIMATIONS ===== */
.animate-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.animate-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== NAVIGATION ===== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.nav.scrolled {
    background: rgba(17, 17, 17, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo img {
    height: 55px;
    width: auto;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-links a {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-400);
    transition: color 0.3s ease;
    position: relative;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--orange);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--orange);
    transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ===== HERO ===== */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../Images/Bar-Gallery-12.jpg') center center / cover no-repeat;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(17, 17, 17, 1) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.hero-logo {
    max-width: 400px;
    margin: 0 auto 24px;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
}

.hero-tagline {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gray-200);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Hero supporting line — sits under the tagline, sets up the hosting
   thesis in one breath before the CTA. Mixed-case for readability;
   the tagline above is the all-caps line, this is the human one. */
.hero-supporting {
    margin-top: 18px;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.01em;
}

/* "See how it works" CTA — outlined-on-dark, jumps to #idea. Subtle
   bamboo glow on hover so it doesn't shout above the video. */
.hero-cta {
    display: inline-block;
    margin-top: 32px;
    padding: 14px 32px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.hero-cta:hover {
    border-color: var(--bamboo);
    color: var(--bamboo);
    background: rgba(200, 147, 90, 0.08);
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.scroll-indicator span {
    display: block;
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    position: relative;
}

.scroll-indicator span::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--orange);
    border-radius: 2px;
    animation: scrollBounce 2s infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
    50% { transform: translateX(-50%) translateY(12px); opacity: 0.3; }
}

/* ===== THE IDEA ===== */
/* §5.2 — single-column thesis section. Centered ~620px column on a dark
   bamboo-grain background, no images. Pure copy. Sets up the hosting
   thesis before the flagship sections that follow. */
.idea {
    background: var(--dark);
    /* Subtle bamboo grain — diagonal warm streaks, very low contrast. */
    background-image:
        linear-gradient(
            135deg,
            rgba(200, 147, 90, 0.06) 0%,
            rgba(200, 147, 90, 0.0) 25%,
            rgba(200, 147, 90, 0.06) 50%,
            rgba(200, 147, 90, 0.0) 75%,
            rgba(200, 147, 90, 0.06) 100%
        );
    text-align: center;
}

.idea-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}

.section-eyebrow {
    display: inline-block;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin-bottom: 32px;
}

.idea-line {
    font-size: clamp(1.75rem, 4.5vw, 2.75rem);
    font-weight: 300;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 28px;
    letter-spacing: -0.01em;
}

.idea-intro {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.7;
    color: var(--gray-200);
    margin: 0 0 80px;
    font-weight: 300;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* Hosting cycle: Plan → Open → Perform → Review → loop. The four phases
   are the conceptual spine of the entire site; the dedicated sections
   below (§5.3–§5.6) deepen each phase. Here we only need to make the
   shape of the cycle obvious in 5 seconds.

   Layout grid:
     - desktop (>1100px): 4 columns, connected with a thin horizontal rule
     - tablet (≥640px): 2x2 grid
     - mobile: stacked vertical
*/
.idea-cycle {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1280px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: left;
    counter-reset: cycle;
    position: relative;
}

/* The horizontal connector line between cards on desktop — sits behind
   the cards at the height of the image media so the eye reads them as
   one continuous flow. */
.idea-cycle::before {
    content: '';
    position: absolute;
    top: 80px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(200, 147, 90, 0.35) 12%,
        rgba(200, 147, 90, 0.35) 88%,
        transparent 100%
    );
    z-index: 0;
}

.cycle-step {
    position: relative;
    z-index: 1;
}

.cycle-step__media {
    position: relative;
    aspect-ratio: 6 / 5;
    background: var(--gray-900, #1a1a1a);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(200, 147, 90, 0.18);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.cycle-step__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Illustration variant — used where we don't have a real screenshot yet
   (Phases 02 and 04). The SVG inherits currentColor from this rule, so
   we just set color here once. */
.cycle-step__media--illustration {
    color: var(--bamboo);
    background: linear-gradient(
        135deg,
        rgba(200, 147, 90, 0.04) 0%,
        rgba(200, 147, 90, 0.10) 100%
    );
}
.cycle-step__media--illustration svg {
    width: 80%;
    height: 80%;
}

.cycle-step__num {
    display: block;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin-bottom: 8px;
}

.cycle-step__title {
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    font-weight: 500;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -0.005em;
}

.cycle-step__body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--gray-200);
    margin: 0;
    font-weight: 300;
}

.idea-loop {
    margin: 64px auto 0;
    text-align: center;
    color: var(--bamboo);
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* ===== REUSABLE FEATURE-DEEP PATTERN =====
   Used by every flagship section after "The Idea": For Your Guests,
   For You the Host, Plan the Event, Review the Event, Always Accurate
   Inventory, Scales to 100 Guests, The Cabinet, Smart Lock, Ambient
   Lighting, Companion App.

   Structure (per concept doc §5):
     [eyebrow]
     [headline]
     [visual area — shape varies per section]
     [body — 2-4 paragraphs]
     [specs strip — monospace technical list]
*/
.feature-deep {
    background: var(--dark);
    padding: 120px 0;
}

.feature-deep + .feature-deep {
    /* Alternate sections by tinting every other one with a barely-there
       bamboo wash. Gives the eye something to grip without literal
       dividers between sections. */
    background:
        linear-gradient(
            180deg,
            var(--dark) 0%,
            #131313 100%
        );
}

.feature-deep__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.feature-deep__eyebrow {
    /* Reuses .section-eyebrow's visual style; this class exists so each
       feature section can tweak independently without bleeding. */
    display: block;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin-bottom: 18px;
}

.feature-deep__title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 300;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 60px;
    max-width: 720px;
    letter-spacing: -0.012em;
}

/* The visual area is intentionally flexible. Sections supply their own
   layout (split, single image, sequence, photo collage, etc.) by adding
   variant modifiers. */
.feature-deep__visual {
    margin-bottom: 60px;
}

.feature-deep__visual--split {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1.3fr);
    gap: 32px;
    align-items: stretch;
}

/* Single centered hero image — used by sections that earn a "money
   shot" treatment (e.g. §5.4 the tablet+scale active pour). Caps the
   width below the container so it feels framed, not edge-to-edge. */
.feature-deep__visual--hero {
    max-width: 920px;
    margin: 0 auto 60px;
}
.feature-deep__visual--hero .feature-deep__media {
    aspect-ratio: 16 / 9;
    min-height: 0;
}

/* Multi-step sequence — used by sections that show a workflow across
   several screens (§5.5 Plan the Event: menu → shopping → mise → layout).
   4 cards in a row on wide screens, 2x2 below, stacked on mobile. Each
   card has a small step label above the media. */
.feature-deep__visual--sequence {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    counter-reset: seq-step;
}
.feature-deep__visual--sequence .seq-step {
    display: flex;
    flex-direction: column;
    counter-increment: seq-step;
}
.feature-deep__visual--sequence .seq-step__media {
    aspect-ratio: 4 / 5;
    min-height: 0;
    margin-bottom: 16px;
}
/* Reset the inherited box-shadow + border on .feature-deep__media so the
   sequence cards sit lighter than a hero image. They're a flow, not a
   showcase. */
.feature-deep__visual--sequence .feature-deep__media {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.seq-step__label {
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin: 0 0 6px;
}
.seq-step__caption {
    font-size: 0.95rem;
    color: #fff;
    font-weight: 500;
    margin: 0 0 6px;
    letter-spacing: -0.005em;
}
.seq-step__sub {
    font-size: 0.82rem;
    color: var(--gray-200);
    line-height: 1.5;
    margin: 0;
    font-weight: 300;
}
@media (max-width: 1100px) {
    .feature-deep__visual--sequence {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .feature-deep__visual--sequence {
        grid-template-columns: 1fr;
    }
}

.feature-deep__media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0d0d0d;
    border: 1px solid rgba(200, 147, 90, 0.18);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-deep__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Illustration variant — used until real photography lands. The SVG
   inherits currentColor so the bamboo accent threads through. */
.feature-deep__media--illustration {
    color: var(--bamboo);
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(200, 147, 90, 0.10) 0%,
            rgba(200, 147, 90, 0.0) 65%
        ),
        #0d0d0d;
}
.feature-deep__media--illustration svg {
    width: 75%;
    height: 75%;
    max-width: 320px;
}

/* Wide-landscape illustration variant — used for sections whose hero
   visual is a dashboard, diagram, or schematic that needs the full
   media width to read. Overrides the small-illustration size cap. */
.feature-deep__media--dashboard svg,
.feature-deep__media--diagram svg {
    width: 96%;
    height: 96%;
    max-width: none;
}

.feature-deep__body {
    max-width: 760px;
    margin-bottom: 80px;
}

.feature-deep__body p {
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.75;
    color: var(--gray-200);
    margin: 0 0 22px;
    font-weight: 300;
}

.feature-deep__body p:last-child {
    margin-bottom: 0;
}

/* In-body cross-section reference. Same hue as the bamboo accent so it
   reads as part of the brand palette, with a subtle dotted underline
   that doesn't fight the body copy weight. */
.inline-link {
    color: var(--bamboo);
    text-decoration: none;
    border-bottom: 1px dotted rgba(200, 147, 90, 0.5);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.inline-link:hover {
    color: var(--orange);
    border-bottom-color: var(--orange);
}

/* Mono specs strip — quiet, factual, anti-marketing. Each line a single
   point of evidence the section's claims rest on. */
.feature-deep__specs {
    margin-top: 0;
    padding-top: 36px;
    border-top: 1px solid rgba(200, 147, 90, 0.18);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px 36px;
    list-style: none;
    padding-left: 0;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--gray-200);
}

.feature-deep__specs li {
    position: relative;
    padding-left: 18px;
    line-height: 1.55;
}

.feature-deep__specs li::before {
    content: '·';
    position: absolute;
    left: 0;
    top: -1px;
    color: var(--bamboo);
    font-weight: 700;
    font-size: 1.1em;
}

/* ── Pricing & Availability (§5.14) ────────────────────────────────
   Quiet luxury treatment: workshop-run notice up top, prominent price
   panel, secondary Stand Alone Kit upsell, three CTAs at the bottom.
   No discount language. No countdown timers. Numbers and parts. */

.pricing-card {
    max-width: 720px;
    margin: 0 auto 32px;
    padding: 56px 48px;
    border: 1px solid rgba(200, 147, 90, 0.35);
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(200, 147, 90, 0.08) 0%,
            rgba(200, 147, 90, 0.0) 60%
        ),
        rgba(255, 255, 255, 0.02);
    text-align: center;
}

.pricing-card__notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 0 0 36px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.35);
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(34, 197, 94, 0.95);
}

.pricing-card__notice-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.95);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.pricing-card__price-label {
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin: 0 0 8px;
}

.pricing-card__price {
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 300;
    color: #fff;
    margin: 0 0 20px;
    letter-spacing: -0.03em;
    line-height: 1;
}

.pricing-card__price-detail {
    font-size: 1rem;
    color: var(--gray-200);
    line-height: 1.65;
    max-width: 520px;
    margin: 0 auto;
    font-weight: 300;
}

/* Stand Alone Kit upsell — smaller secondary card, sits below the
   main pricing card. 2-column on desktop, stacks on mobile. */
.pricing-addon {
    max-width: 720px;
    margin: 0 auto 60px;
    padding: 28px 36px;
    border: 1px solid rgba(200, 147, 90, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.015);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: center;
}

.pricing-addon__eyebrow {
    display: block;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin-bottom: 8px;
}

.pricing-addon__title {
    font-size: 1.2rem;
    color: #fff;
    font-weight: 500;
    margin: 0 0 6px;
    letter-spacing: -0.005em;
}

.pricing-addon__sub {
    font-size: 0.92rem;
    color: var(--gray-200);
    line-height: 1.55;
    margin: 0;
    font-weight: 300;
}

.pricing-addon__col--right {
    text-align: right;
}

.pricing-addon__price {
    font-size: 1.05rem;
    color: #fff;
    margin: 0 0 4px;
    font-weight: 300;
}

.pricing-addon__price strong {
    color: var(--bamboo);
    font-weight: 600;
    font-size: 1.15em;
}

.pricing-addon__price-alt {
    font-size: 0.82rem;
    color: var(--gray-200);
    margin: 0;
    font-weight: 300;
}

/* CTA row — three buttons in descending visual weight */
.pricing-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 auto;
    max-width: 720px;
}

.pricing-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
    white-space: nowrap;
}
.pricing-cta:hover {
    transform: translateY(-1px);
}

.pricing-cta--primary {
    background: #8e6230;
    color: #fff;
    border: 1px solid #8e6230;
}
.pricing-cta--primary:hover {
    background: var(--orange);
    border-color: var(--orange);
}

.pricing-cta--secondary {
    background: transparent;
    color: var(--bamboo);
    border: 1px solid rgba(200, 147, 90, 0.55);
}
.pricing-cta--secondary:hover {
    background: rgba(200, 147, 90, 0.10);
    border-color: var(--bamboo);
}

.pricing-cta--tertiary {
    background: transparent;
    color: var(--gray-200);
    border: 1px solid transparent;
}
.pricing-cta--tertiary:hover {
    color: var(--bamboo);
}

@media (max-width: 700px) {
    .pricing-card {
        padding: 40px 24px;
    }
    .pricing-addon {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .pricing-addon__col--right {
        text-align: left;
    }
    .pricing-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── App-pair layout + parity divider (§5.12) ──────────────────────
   Pairs the existing tablet-mockup carousel with a phone mockup, with
   a "PARITY" divider in between. Larger column for the tablet (which
   carries the carousel content), smaller column for the phone. */

.feature-deep__visual--app-pair {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.feature-deep__visual--app-pair .tablet-mockup {
    width: 100%;
}

.parity-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: var(--bamboo);
}

.parity-divider__line {
    width: 1px;
    height: 60px;
    background: linear-gradient(
        180deg,
        rgba(200, 147, 90, 0) 0%,
        rgba(200, 147, 90, 0.6) 50%,
        rgba(200, 147, 90, 0) 100%
    );
}

.parity-divider__badge {
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--bamboo);
    padding: 6px 12px;
    border: 1px solid rgba(200, 147, 90, 0.4);
    border-radius: 999px;
    background: rgba(200, 147, 90, 0.06);
    white-space: nowrap;
}

.parity-divider__caption {
    font-size: 0.78rem;
    color: var(--gray-200);
    font-weight: 300;
    text-align: center;
    max-width: 120px;
    line-height: 1.45;
}

.app-phone-mockup {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .feature-deep__visual--app-pair {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .parity-divider {
        flex-direction: row;
        gap: 12px;
    }
    .parity-divider__line {
        width: 60px;
        height: 1px;
        background: linear-gradient(
            90deg,
            rgba(200, 147, 90, 0) 0%,
            rgba(200, 147, 90, 0.6) 50%,
            rgba(200, 147, 90, 0) 100%
        );
    }
    .parity-divider__caption {
        max-width: none;
    }
}

/* ── Lighting state pills + scene picker strip (§5.11) ──────────────
   The Ambient Lighting section uses two paired photos (closed/open) with
   small state pills overlaid in the corner of each. Below the body, a
   scene-picker strip shows the 4 named lighting modes as color swatches. */

.lighting-state {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: rgba(13, 13, 13, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(200, 147, 90, 0.35);
    color: var(--bamboo);
    z-index: 1;
    pointer-events: none;
}

/* Scene picker — 4 named lighting modes as small swatch cards. */
.lighting-scenes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0 0 60px;
}

.lighting-scene {
    text-align: left;
}

.lighting-scene__swatch {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    border: 1px solid rgba(200, 147, 90, 0.18);
    margin-bottom: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.lighting-scene__name {
    font-size: 0.95rem;
    color: #fff;
    font-weight: 500;
    margin: 0 0 4px;
    letter-spacing: -0.005em;
}

.lighting-scene__sub {
    font-size: 0.82rem;
    color: var(--gray-200);
    font-weight: 300;
    margin: 0;
    line-height: 1.5;
}

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

/* ── Cabinet finish swatches & hardware photo grid (§5.9) ────────────
   Two reusable strips that sit between body paragraphs in The Cabinet
   section. Each is its own grid; both fall back to single-column on
   narrow screens. */

.cabinet-finishes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0 0 60px;
}

.cabinet-finish {
    text-align: left;
}

.cabinet-finish__swatch {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    border: 1px solid rgba(200, 147, 90, 0.25);
    margin-bottom: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.cabinet-finish__brand {
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin: 0 0 6px;
}

.cabinet-finish__name {
    font-size: 0.95rem;
    color: #fff;
    font-weight: 500;
    margin: 0 0 4px;
}

.cabinet-finish__detail {
    font-size: 0.82rem;
    color: var(--gray-200);
    font-weight: 300;
    margin: 0;
}

/* Hardware mini-grid — three small photos showing the named hardware
   components (SOSS hinges, casters, drawers). Used to anchor the
   hardware paragraph in real material rather than just words. */
.cabinet-hardware {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 0 40px;
}

.cabinet-hardware__item {
    text-align: left;
}

.cabinet-hardware__photo {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(200, 147, 90, 0.18);
    margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.cabinet-hardware__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cabinet-hardware__label {
    font-size: 1rem;
    color: #fff;
    font-weight: 500;
    margin: 0 0 4px;
    letter-spacing: -0.005em;
}

.cabinet-hardware__sub {
    font-size: 0.85rem;
    color: var(--gray-200);
    font-weight: 300;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .cabinet-finishes {
        grid-template-columns: repeat(2, 1fr);
    }
    .cabinet-hardware {
        grid-template-columns: 1fr;
    }
}

/* Lifestyle pane variant — used as a stand-in until the real
   "guest at dinner table" photography lands (§10 asset gaps). Warm
   amber glow + a quote-style overlay communicates the moment without
   reading as a missing asset. Swap this DOM block for an <img> when
   the photo arrives. */
.feature-deep__media--lifestyle {
    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(232, 131, 12, 0.20) 0%,
            rgba(232, 131, 12, 0.0) 55%
        ),
        radial-gradient(
            circle at 30% 80%,
            rgba(200, 147, 90, 0.18) 0%,
            rgba(200, 147, 90, 0.0) 60%
        ),
        #0d0d0d;
}

.lifestyle-overlay {
    text-align: center;
    padding: 40px 36px;
    max-width: 360px;
}

.lifestyle-eyebrow {
    display: block;
    font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bamboo);
    margin-bottom: 24px;
}

.lifestyle-quote {
    font-size: clamp(1.4rem, 2.3vw, 1.85rem);
    font-weight: 300;
    line-height: 1.35;
    color: #fff;
    margin: 0 0 20px;
    font-style: italic;
    letter-spacing: -0.01em;
}

.lifestyle-attrib {
    font-size: 0.92rem;
    color: var(--gray-200);
    font-weight: 300;
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .feature-deep {
        padding: 80px 0;
    }
    .feature-deep__visual--split {
        grid-template-columns: 1fr;
    }
    .feature-deep__media {
        min-height: 280px;
    }
}

@media (max-width: 1100px) {
    .idea-cycle {
        grid-template-columns: repeat(2, 1fr);
        max-width: 760px;
    }
    /* The horizontal connector doesn't track 2x2 cleanly — drop it. */
    .idea-cycle::before {
        display: none;
    }
}

@media (max-width: 640px) {
    .idea-cycle {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
}

/* Tablet Mockup */
.tablet-mockup {
    display: flex;
    justify-content: center;
}

.tablet-frame {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 4 / 3;
    background: var(--gray-900);
    border-radius: 20px;
    padding: 16px;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.08),
        0 30px 80px rgba(0, 0, 0, 0.5);
    position: relative;
}

.tablet-frame::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1px;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.tablet-screen {
    width: 100%;
    height: 100%;
    background: var(--gray-800);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tablet Carousel */
.tablet-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.tablet-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.tablet-slide.active {
    opacity: 1;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
}

.carousel-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: transform 0.3s ease;
}

.carousel-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--gray-600);
    transition: background 0.3s ease, transform 0.3s ease;
}

.carousel-dot.active::before {
    background: var(--orange);
    transform: scale(1.3);
}

/* ===== GALLERY ===== */
.gallery {
    background: var(--black);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.gallery-item {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    aspect-ratio: 4 / 3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-item:hover::after {
    background: rgba(232, 131, 12, 0.15);
}

/* ===== LIGHTBOX ===== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.open {
    opacity: 1;
    visibility: visible;
}

.lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    font-size: 2.5rem;
    padding: 16px;
    transition: color 0.3s ease, transform 0.2s ease;
    line-height: 1;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    color: var(--orange);
    transform: scale(1.1);
}

.lightbox-close {
    top: 20px;
    right: 24px;
    font-size: 3rem;
}

.lightbox-prev {
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
}

.lightbox-prev:hover {
    transform: translateY(-50%) scale(1.1);
}

.lightbox-next {
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
}

.lightbox-next:hover {
    transform: translateY(-50%) scale(1.1);
}

/* ===== FOOTER ===== */
.footer {
    padding: 80px 0 40px;
    text-align: center;
    background: var(--dark);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-logo {
    height: 60px;
    margin: 0 auto 16px;
}

.footer-tagline {
    font-size: 1rem;
    color: var(--gray-400);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.footer-links {
    margin-bottom: 32px;
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--orange);
    font-size: 1.05rem;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.footer-links a:hover {
    opacity: 0.8;
}

.footer-copy {
    font-size: 0.85rem;
    color: var(--gray-400);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
}

@media (max-width: 768px) {
    :root {
        --section-padding: 70px;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(17, 17, 17, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 32px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .nav-links.open {
        opacity: 1;
        visibility: visible;
    }

    .nav-links a {
        font-size: 1.2rem;
    }

    .tablet-frame {
        max-width: 360px;
    }

    .hero-logo {
        max-width: 280px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .lightbox-prev,
    .lightbox-next {
        font-size: 2.5rem;
    }

    .section-subtitle {
        margin-bottom: 48px;
    }
}

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

/* ===== PRIVACY POLICY PAGE ===== */
.privacy-page {
    padding-top: calc(var(--nav-height) + 60px);
    padding-bottom: var(--section-padding);
    min-height: 100vh;
}

.privacy-page h1 {
    font-size: 2.5rem;
    color: var(--white);
    margin-bottom: 8px;
}

.privacy-date {
    color: var(--gray-400);
    font-size: 0.95rem;
    margin-bottom: 40px;
}

.privacy-page h2 {
    font-size: 1.3rem;
    color: var(--orange);
    margin-top: 36px;
    margin-bottom: 12px;
}

.privacy-page p {
    color: var(--gray-200);
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 800px;
}

.privacy-page ul {
    color: var(--gray-200);
    line-height: 1.8;
    margin-bottom: 16px;
    padding-left: 24px;
    max-width: 800px;
}

.privacy-page ul li {
    margin-bottom: 8px;
}

.privacy-page a {
    color: var(--orange);
    text-decoration: none;
    transition: color 0.3s;
}

.privacy-page a:hover {
    color: var(--orange-light);
}