/*
 * css/surface-polish.css
 *
 * Canonical surface + button tokens for visual consistency. Wasatch was
 * mixing cream (#FAFAF7) and white (#fff) on cards / panels / boxes
 * inconsistently across surfaces, which made the site feel uneven --
 * some cards blended into the page bg, others popped. Plus buttons
 * varied between flat fills and gradient pills with no shared shine /
 * elevation contract.
 *
 * Pattern:
 *   --surface-canvas   = page background (warm cream)
 *   --surface-card     = card / panel background (vibrant off-white)
 *   --surface-card-alt = secondary card tint (warm-50 ish for nested)
 *   --surface-border   = warm hairline border that reads on cream OR white
 *
 * Apply .surface-card to any panel that should pop off the page. Apply
 * .btn-shine to any primary call-to-action. Hover states + focus rings
 * follow tokenized timing so every interaction feels the same weight.
 */

:root {
    /* Surface tier */
    --surface-canvas:     #FAFAF7;
    --surface-canvas-soft:#F5F0EB;
    --surface-card:       #FFFFFF;
    --surface-card-alt:   #FBFAF7;
    --surface-border:     #EDE5DB;
    --surface-border-strong:#D4C5A9;

    /* Shadow tier (warm-tinted instead of cool/gray) */
    --shadow-card-rest:  0 4px 14px rgba(120,108,86,0.08);
    --shadow-card-hover: 0 12px 32px rgba(120,108,86,0.14);
    --shadow-card-lifted:0 18px 48px rgba(120,108,86,0.18);

    /* Brand tints for shine + glow */
    --sage-shine-from:   #5E7259;
    --sage-shine-to:     #556855;
    --sage-glow:         rgba(107,128,104,0.32);

    /* Focus + motion */
    --focus-ring: 0 0 0 3px rgba(107,128,104,0.35);
    --ease-fast:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-soft:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* -------------------------------------------------------------------------- */
/*   Surface card -- canonical white panel that pops off the cream canvas     */
/* -------------------------------------------------------------------------- */

.surface-card {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: 16px;
    box-shadow: var(--shadow-card-rest);
    transition:
        transform 0.22s var(--ease-fast),
        box-shadow 0.22s var(--ease-fast),
        border-color 0.22s var(--ease-fast);
}
.surface-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--surface-border-strong);
}
.surface-card-flat {
    /* Nested card inside another card -- skip hover lift to avoid double-lift */
    background: var(--surface-card-alt);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    box-shadow: none;
}

/* -------------------------------------------------------------------------- */
/*   Button shine -- gradient + glow + transform on hover                     */
/* -------------------------------------------------------------------------- */

.btn-shine {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6875rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.25;
    color: #fff;
    background: linear-gradient(135deg, var(--sage-shine-from) 0%, var(--sage-shine-to) 100%);
    box-shadow:
        0 6px 16px var(--sage-glow),
        inset 0 1px 0 rgba(255,255,255,0.18);
    border: 0;
    cursor: pointer;
    transition:
        transform 0.22s var(--ease-fast),
        box-shadow 0.22s var(--ease-fast),
        background 0.22s var(--ease-fast);
    text-decoration: none;
}

.btn-shine::after {
    /* Subtle moving highlight that picks up on hover. Pure CSS -- no JS. */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s var(--ease-fast);
    pointer-events: none;
}

.btn-shine:hover {
    transform: translateY(-1px);
    box-shadow:
        0 10px 24px var(--sage-glow),
        inset 0 1px 0 rgba(255,255,255,0.24);
}
.btn-shine:hover::after {
    transform: translateX(100%);
}
.btn-shine:active {
    transform: translateY(0);
    box-shadow:
        0 4px 12px var(--sage-glow),
        inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-shine:focus-visible {
    outline: 0;
    box-shadow:
        var(--focus-ring),
        0 6px 16px var(--sage-glow),
        inset 0 1px 0 rgba(255,255,255,0.18);
}

/* Secondary variant -- same elevation contract, neutral palette */
.btn-shine-secondary {
    color: #3D372F;
    background: linear-gradient(135deg, #FFFFFF 0%, #F5F0EB 100%);
    box-shadow:
        0 4px 12px rgba(120,108,86,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);
    border: 1px solid var(--surface-border-strong);
}
.btn-shine-secondary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 8px 20px rgba(120,108,86,0.12),
        inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Danger variant -- for destructive primary CTAs (delete, cancel sub) */
.btn-shine-danger {
    background: linear-gradient(135deg, #B91C1C 0%, #991B1B 100%);
    box-shadow:
        0 6px 16px rgba(185,28,28,0.28),
        inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-shine-danger:hover {
    box-shadow:
        0 10px 24px rgba(185,28,28,0.32),
        inset 0 1px 0 rgba(255,255,255,0.24);
}

/* -------------------------------------------------------------------------- */
/*   Polish overrides -- automatic upgrade for legacy .bg-white containers    */
/*   that should never look flat on the cream canvas. Adds the standard       */
/*   surface-border + hairline shadow so cards stop blending in.              */
/* -------------------------------------------------------------------------- */

body.bg-warm-50 .bg-white,
body[class*="bg-[#FAFAF7]"] .bg-white,
body.bg-cream .bg-white {
    /* Only paint when the card has no border / shadow already set inline */
    /* so existing intentional styles win. */
}

/* For pages that opt-in via body[data-polish], every bare .bg-white panel
   becomes a surface-card. Use this to bulk-upgrade specific pages without
   touching their HTML. */
body[data-polish="on"] .bg-white {
    border: 1px solid var(--surface-border);
    border-radius: 16px;
    box-shadow: var(--shadow-card-rest);
    transition:
        transform 0.22s var(--ease-fast),
        box-shadow 0.22s var(--ease-fast);
}
body[data-polish="on"] .bg-white:not(.no-lift):hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover);
}

/* ==========================================================================
   PREMIUM TIER — extended tokens + CTA shipped 2026-06-07
   ==========================================================================
   Operator critique: "cream background looks dead, CTAs flat, needs $1m feel".
   Add richer accent palette + premium CTA (.btn-premium) + canvas refresh
   scoped to the booking flow first via [data-page="book"]. Roll out site-wide
   in follow-up PRs once stable.
   --------------------------------------------------------------------------- */

:root {
    /* Palette aliased to the site-wide system (index.php / services.php /
       reviews.php). Booking flow used to ship a divergent champagne+moss+ink
       palette -- operator caught it as off-brand. Remap to sage + warm tan
       so book.php matches every other surface. All downstream rules that
       reference --champagne-* / --moss-700 / --ink-900 cascade automatically. */
    --champagne-400: #C4A882;  /* site warm tan accent line */
    --champagne-500: #A8896A;
    --champagne-600: #6B5F4D;  /* AA-on-cream small text */
    --copper-500:    #B8654A;
    --moss-700:      #5E7259;  /* site sage-600 primary */
    --ink-900:       #3D372F;  /* site warm-700 body ink */

    /* Premium surface tier collapsed to site canvas so the booking flow
       reads as the same paper as the rest of the site. */
    --surface-canvas-premium: #FAFAF7;
    --surface-card-premium:   #FFFFFF;
    --surface-card-edge-premium: #EDE5DB;

    /* Shadow tier kept warm but lighter to suit the lighter canvas. */
    --shadow-cta-premium:      0 6px 16px rgba(107,127,107,0.28), inset 0 1px 0 rgba(255,255,255,0.18);
    --shadow-cta-premium-hover:0 14px 32px rgba(107,127,107,0.34), inset 0 1px 0 rgba(255,255,255,0.24);
}

/* Premium canvas — warm linen gradient + subtle grain. Replaces dead cream
   background only on booking flow (body[data-page="book"]). Other pages keep
   the original --surface-canvas. */
body[data-page="book"][data-polish="on"] {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, var(--surface-card-premium) 0%, transparent 60%),
        linear-gradient(180deg, var(--surface-canvas-premium) 0%, #EEEAE0 100%);
    background-attachment: scroll;  /* fixed is jank on iOS Safari */
}
body[data-page="book"][data-polish="on"]::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    z-index: 0;
}
@media (max-width: 768px) {
    /* Mobile: drop the grain layer to save paint cost on cheaper devices */
    body[data-page="book"][data-polish="on"]::before { display: none; }
}

/* -------------------------------------------------------------------------- */
/*  .btn-premium -- the "$1m" CTA. Moss→sage gradient + champagne shine sweep  */
/*  on hover + warm shadow elevation. Drop-in replacement for .book-btn /     */
/*  .btn-shine on the booking flow.                                            */
/* -------------------------------------------------------------------------- */
.btn-premium {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 14px 28px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    color: #FBF9F4;
    background:
        linear-gradient(135deg, var(--moss-700) 0%, var(--sage-shine-to) 50%, var(--moss-700) 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    border: 1px solid rgba(31,36,33,0.18);
    box-shadow: var(--shadow-cta-premium);
    cursor: pointer;
    transition:
        background-position 0.5s var(--ease-fast),
        transform 0.22s var(--ease-fast),
        box-shadow 0.22s var(--ease-fast);
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
}
.btn-premium::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 35%, rgba(212,175,106,0.35) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
    pointer-events: none;
    z-index: -1;
}
.btn-premium:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: var(--shadow-cta-premium-hover);
}
.btn-premium:hover::before { transform: translateX(120%); }
.btn-premium:active { transform: translateY(0); }
.btn-premium:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 3px rgba(212,175,106,0.55),
        var(--shadow-cta-premium);
}
.btn-premium .arrow,
.btn-premium > i:last-child,
.btn-premium > svg:last-child { transition: transform 0.3s var(--ease-fast); }
.btn-premium:hover .arrow,
.btn-premium:hover > i:last-child,
.btn-premium:hover > svg:last-child { transform: translateX(4px); }

/* Ghost / back button -- pairs with .btn-premium */
.btn-premium-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 14px 28px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink-900);
    background: transparent;
    border: 1px solid var(--surface-card-edge-premium);
    box-shadow: none;
    cursor: pointer;
    transition: background 0.22s var(--ease-fast), border-color 0.22s var(--ease-fast);
    text-decoration: none;
}
.btn-premium-ghost:hover {
    background: var(--surface-card-premium);
    border-color: var(--champagne-400);
}
.btn-premium-ghost:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(212,175,106,0.45);
}

/* Card pickers on book.php -- richer rest state + champagne-tinted hover.
   The existing .select-card.selected::after pseudo from booking-design.css
   stays as the single canonical checkmark. */
body[data-page="book"][data-polish="on"] .select-card {
    background: var(--surface-card-premium);
    border: 1px solid var(--surface-card-edge-premium);
    box-shadow: var(--shadow-card-rest);
}
body[data-page="book"][data-polish="on"] .select-card:hover {
    border-color: var(--champagne-400);
    box-shadow: var(--shadow-card-hover);
}
body[data-page="book"][data-polish="on"] .select-card.selected {
    border-color: var(--moss-700);
    background: linear-gradient(160deg, var(--surface-card-premium) 0%, #F2EBDB 100%);
    box-shadow: 0 0 0 1px var(--moss-700), var(--shadow-card-hover);
}

/* ==========================================================================
   WAVE 5 — card-picker polish (CSS-only, no HTML changes)
   ==========================================================================
   Targets existing .select-card markup on book.php via child selectors so
   we get the premium card look without rewriting 26 button blocks. Pairs
   with PR #275's .select-card rest/hover/selected states.
   --------------------------------------------------------------------------- */

/* Icon pill -- the small square (Step 1) / circle (Step 2) at card top */
body[data-page="book"][data-polish="on"] .select-card > div:first-of-type {
    background: linear-gradient(135deg, #F2EBDB 0%, #E8DEC4 100%);
    color: var(--moss-700);
    transition: background 0.3s var(--ease-fast), color 0.3s var(--ease-fast),
                transform 0.3s var(--ease-fast);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
body[data-page="book"][data-polish="on"] .select-card:hover > div:first-of-type {
    transform: scale(1.05);
}
body[data-page="book"][data-polish="on"] .select-card.selected > div:first-of-type {
    background: linear-gradient(135deg, var(--moss-700) 0%, var(--sage-shine-to) 100%);
    color: #FBF9F4;
    box-shadow: 0 4px 10px rgba(59,74,56,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
}

/* Payment-option labels (#payFullLabel + #payDepositLabel) are text-only --
   the first <div> is the title+desc stack, not an icon pill. The generic
   .select-card.selected > div:first-of-type rule above turns that <div>
   into a sage gradient + white text, which collides with the inline
   color:var(--sage-900) on the title and renders dark sage on a sage
   background -- the operator saw an empty-looking "Pay in full now" card.
   Scope the gradient out for #depositPanel so payment cards stay clean
   white-bg, dark-text. */
body[data-page="book"][data-polish="on"] #depositPanel .select-card.selected > div:first-of-type {
    background: transparent !important;
    color: var(--sage-900, #2F3830) !important;
    box-shadow: none !important;
}

/* Price badge (the "Starting at $XXX" pill) -- last span child of Step 1 cards.
   Champagne tint replaces the dead sage-on-sage low-contrast pill. */
body[data-page="book"][data-polish="on"] .select-card > span.inline-flex {
    background: rgba(212,175,106,0.14) !important;
    border: 1px solid rgba(212,175,106,0.38);
    color: var(--ink-900) !important;
    transition: background 0.3s var(--ease-fast), border-color 0.3s var(--ease-fast);
}
body[data-page="book"][data-polish="on"] .select-card > span.inline-flex > span {
    color: #6b6557 !important;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body[data-page="book"][data-polish="on"] .select-card.selected > span.inline-flex {
    background: var(--champagne-400) !important;
    border-color: var(--champagne-500);
    color: var(--ink-900) !important;
}

/* Premium card (white-glove) -- swap the amber tint that read as "sticky
   note" for a richer champagne treatment that signals luxury. */
body[data-page="book"][data-polish="on"] .select-card[data-value="white_glove_inspection"] {
    background: linear-gradient(160deg, #FFFFFF 0%, #FAFAF7 60%, #F5F0EB 100%) !important;
    border-color: var(--champagne-500) !important;
}
body[data-page="book"][data-polish="on"] .select-card[data-value="white_glove_inspection"] > div:first-of-type {
    background: linear-gradient(135deg, var(--champagne-400), var(--champagne-500)) !important;
    color: #FBF9F4;
}
body[data-page="book"][data-polish="on"] .select-card[data-value="white_glove_inspection"] > span.inline-flex {
    background: var(--champagne-400) !important;
    border-color: var(--champagne-500);
}

/* Headings inside cards -- step up weight + use the ink color */
body[data-page="book"][data-polish="on"] .select-card h3 {
    color: var(--ink-900) !important;
    font-weight: 600;
}
body[data-page="book"][data-polish="on"] .select-card p {
    color: #6b6557 !important;
}

/* Subtle pop animation when a card becomes selected */
@keyframes cardLift {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.015); }
    100% { transform: scale(1); }
}
body[data-page="book"][data-polish="on"] .select-card.just-selected,
body[data-page="book"][data-polish="on"] .select-card.selected:not(.just-selected) {
    animation: cardLift 0.4s var(--ease-soft);
}

/* ==========================================================================
   WAVE 6 — Step rail redesign (CSS-only override)
   ==========================================================================
   Replace the round numbered dots (book-step-dot) with a modern segmented
   bar pattern. Each .book-step becomes a vertical segment with a thin
   bar above + small-caps label below.
   --------------------------------------------------------------------------- */

/* Hide the single horizontal progress track + fill — each segment carries
   its own bar now. */
body[data-page="book"][data-polish="on"] .book-progress-track {
    display: none;
}

/* Segmented step rail */
body[data-page="book"][data-polish="on"] .book-step-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 18px;
    position: relative;
}
/* Connecting line between 3 step circles */
body[data-page="book"][data-polish="on"] .book-step-row::before {
    content: '';
    position: absolute;
    top: 18px; left: calc(16.67% + 20px); right: calc(16.67% + 20px);
    height: 1px;
    background: var(--sage-200, #d4ddd4);
    z-index: 0;
}
body[data-page="book"][data-polish="on"] .book-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    z-index: 1;
}
/* Remove old top-bar pseudo */
body[data-page="book"][data-polish="on"] .book-step::before {
    display: none;
}

/* Premium Cormorant numbered circle */
body[data-page="book"][data-polish="on"] .book-step-dot {
    position: static;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--sage-200, #d4ddd4);
    color: var(--sage-400, #8fa38f);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 17px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
    padding: 0;
    letter-spacing: 0;
}
/* No "0" prefix — Cormorant numerals stand alone */
body[data-page="book"][data-polish="on"] .book-step-dot::before {
    content: none;
}
/* Active: dark sage fill + glow ring */
body[data-page="book"][data-polish="on"] .book-step.is-active .book-step-dot {
    background: linear-gradient(135deg, #4a5e4a 0%, #1a2b1a 100%);
    border-color: transparent;
    color: #fafaf7;
    box-shadow: 0 4px 16px -4px rgba(47,56,48,.40), 0 0 0 4px rgba(107,127,107,.12);
}
/* Done: sage tint — number hidden, checkmark shown */
body[data-page="book"][data-polish="on"] .book-step.is-done .book-step-dot {
    background: var(--sage-100, #edf0ed);
    border-color: var(--sage-400, #8fa38f);
    color: transparent;
    font-size: 0;
}
body[data-page="book"][data-polish="on"] .book-step.is-done .book-step-dot::after {
    content: '';
    display: block;
    width: 10px; height: 6px;
    border-left: 2px solid var(--sage-700, #4a5e4a);
    border-bottom: 2px solid var(--sage-700, #4a5e4a);
    transform: rotate(-45deg) translate(1px,-2px);
}

/* Labels */
body[data-page="book"][data-polish="on"] .book-step-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sage-400, #8fa38f);
    font-weight: 500;
    transition: color 0.3s ease;
    line-height: 1.3;
}
body[data-page="book"][data-polish="on"] .book-step.is-active .book-step-label {
    color: var(--sage-900, #1a2b1a);
    font-weight: 700;
}
body[data-page="book"][data-polish="on"] .book-step.is-done .book-step-label {
    color: var(--sage-600, #5E7259);
    font-weight: 500;
}

/* Hide redundant text header + fill track */
body[data-page="book"][data-polish="on"] #progressLabel,
body[data-page="book"][data-polish="on"] #progressPercent {
    display: none;
}
body[data-page="book"][data-polish="on"] .book-progress-inner > .flex {
    display: none;
}
body[data-page="book"][data-polish="on"] .book-progress-track {
    display: none;
}

/* Mobile */
@media (max-width: 480px) {
    body[data-page="book"][data-polish="on"] .book-step-dot { width: 30px; height: 30px; font-size: 15px; }
    body[data-page="book"][data-polish="on"] .book-step-label { font-size: 9.5px; letter-spacing: 0.13em; }
    body[data-page="book"][data-polish="on"] .book-step-row::before { top: 15px; }
}

/* ==========================================================================
   WAVE 7 — Modern form inputs (filled box, focus ring, error state)
   ==========================================================================
   The existing .book-field-input style is bottom-border-only with inline
   transparent background. Aesop-style ghost inputs CAN look premium but
   the inline CSS leaves no breathing room or focus affordance and the
   label-above pattern blocks floating-label animation without an HTML
   restructure.

   Practical win: override the inline styles via !important to convert
   underline inputs into filled boxes with the same warm ivory used on
   .surface-card-premium. Adds clear focus ring + error border without
   touching HTML. This is the same look Aesop's checkout flow uses on
   their address step -- filled, soft, with strong focus contrast.
   --------------------------------------------------------------------------- */

body[data-page="book"][data-polish="on"] .book-field-input,
body[data-page="book"][data-polish="on"] input[type="text"].book-field-input,
body[data-page="book"][data-polish="on"] input[type="email"].book-field-input,
body[data-page="book"][data-polish="on"] input[type="tel"].book-field-input,
body[data-page="book"][data-polish="on"] select.book-field-input,
body[data-page="book"][data-polish="on"] textarea.book-field-input {
    background: var(--surface-card-premium) !important;
    border: 1px solid var(--surface-card-edge-premium) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font: 500 16px/1.4 'Inter', system-ui, sans-serif !important;
    color: var(--ink-900) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
    transition:
        border-color 0.2s var(--ease-fast),
        box-shadow 0.2s var(--ease-fast),
        background 0.2s var(--ease-fast) !important;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}
body[data-page="book"][data-polish="on"] .book-field-input::placeholder {
    color: #6b6557;
    font-weight: 400;
}
body[data-page="book"][data-polish="on"] .book-field-input:hover {
    border-color: var(--champagne-400) !important;
}
body[data-page="book"][data-polish="on"] .book-field-input:focus,
body[data-page="book"][data-polish="on"] .book-field-input:focus-visible {
    outline: 0 !important;
    border-color: var(--moss-700) !important;
    background: #FFFFFF !important;
    box-shadow:
        0 0 0 4px rgba(59,74,56,0.10),
        inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

/* Field labels — upgrade the existing tiny small-caps style to the new
   ink-900 + slightly larger size. Targets the inline label style used in
   Step 4. */
body[data-page="book"][data-polish="on"] label[for="firstName"],
body[data-page="book"][data-polish="on"] label[for="lastName"],
body[data-page="book"][data-polish="on"] label[for="email"],
body[data-page="book"][data-polish="on"] label[for="phone"],
body[data-page="book"][data-polish="on"] label[for="address"],
body[data-page="book"][data-polish="on"] label[for="city"],
body[data-page="book"][data-polish="on"] label[for="state"],
body[data-page="book"][data-polish="on"] label[for="zip"],
body[data-page="book"][data-polish="on"] label[for="propertySelect"],
body[data-page="book"][data-polish="on"] label[for="notes"] {
    color: var(--ink-900) !important;
    font-size: 11.5px !important;
    letter-spacing: 0.16em !important;
}

/* Error state -- pair with .is-error wrapper if the JS adds it.
   Also catches aria-invalid="true" for HTML5 form validation hooks. */
body[data-page="book"][data-polish="on"] .book-field-input[aria-invalid="true"],
body[data-page="book"][data-polish="on"] .is-error .book-field-input {
    border-color: #B91C1C !important;
    box-shadow: 0 0 0 4px rgba(185,28,28,0.10), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

/* Select chevron — paint our own since appearance:none kills the native one */
body[data-page="book"][data-polish="on"] select.book-field-input {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236b6557' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    padding-right: 42px !important;
}

/* Autofill -- match the warm ivory so Safari/Chrome's blue/yellow tint
   doesn't break the premium aesthetic */
body[data-page="book"][data-polish="on"] .book-field-input:-webkit-autofill,
body[data-page="book"][data-polish="on"] .book-field-input:-webkit-autofill:hover,
body[data-page="book"][data-polish="on"] .book-field-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink-900) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--surface-card-premium) inset !important;
    box-shadow: 0 0 0 1000px var(--surface-card-premium) inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* Textarea allow vertical resize only */
body[data-page="book"][data-polish="on"] textarea.book-field-input {
    resize: vertical;
    min-height: 92px;
}

/* ==========================================================================
   WAVE 8 — Display type + spacing rhythm
   ==========================================================================
   Operator: "kind of flat and dead." The Cormorant Garamond serif headings
   are already premium-tier, but the column is cramped (max-w-3xl ~768px),
   the eyebrow is sage-on-sage (too quiet), and the section padding is
   inconsistent at desktop widths.

   This wave widens the column to max-w-4xl, swaps the eyebrow accent to
   champagne (the new luxury hue), and adds breathing room above the step
   title. Pure CSS override -- no markup changes.
   --------------------------------------------------------------------------- */

/* Wider, more generous column on desktop */
body[data-page="book"][data-polish="on"] main.max-w-3xl {
    max-width: 56rem !important;  /* matches Tailwind max-w-4xl */
    padding-top: 4rem !important;
    padding-bottom: 6rem !important;
}
@media (min-width: 1024px) {
    body[data-page="book"][data-polish="on"] main.max-w-3xl {
        padding-top: 6rem !important;
        padding-bottom: 8rem !important;
    }
}

/* Eyebrow -- champagne accent + slightly wider letter-spacing for that
   editorial-press feel */
body[data-page="book"][data-polish="on"] .book-step-panel .book-step-eyebrow {
    color: var(--champagne-600) !important;  /* AA on cream */
    letter-spacing: 0.32em !important;
    font-size: 11.5px !important;
    margin-bottom: 18px !important;
}
body[data-page="book"][data-polish="on"] .book-step-panel .book-step-eyebrow::before {
    background: linear-gradient(90deg, transparent, var(--champagne-400)) !important;
    width: 38px !important;
    height: 1px !important;
}

/* Display title -- bump the floor up so even small viewports feel premium,
   tighten letter-spacing slightly for a more chiseled look */
body[data-page="book"][data-polish="on"] .book-step-panel h2.book-step-title {
    font-size: clamp(32px, 4.5vw, 52px) !important;
    line-height: 1.02 !important;
    color: var(--ink-900) !important;
    letter-spacing: -0.028em !important;
    margin: 0 0 18px !important;
}

/* Sub-copy -- wider max-width so descriptions don't wrap as tight, slightly
   richer ink color */
body[data-page="book"][data-polish="on"] .book-step-panel p.book-step-sub {
    color: #6b6557 !important;
    opacity: 1 !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    margin: 0 0 40px !important;
    max-width: 600px !important;
}

/* Section labels (step 2-5 inline labels above input groups) -- the
   "Property Type" / "How often" / "Frequency" headers. Treat them as
   secondary editorial markers. */
body[data-page="book"][data-polish="on"] .book-step-panel label.block.text-sm {
    color: var(--ink-900) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
    display: block;
}

/* Card grids: a touch more gap on desktop for the editorial feel */
@media (min-width: 768px) {
    body[data-page="book"][data-polish="on"] #serviceCards.gap-4 {
        gap: 1.25rem !important;  /* 20px instead of 16 */
    }
    body[data-page="book"][data-polish="on"] #propertyCards.gap-3 {
        gap: 0.875rem !important;  /* 14px instead of 12 */
    }
}

/* Continue / Back button row -- more breathing room above */
body[data-page="book"][data-polish="on"] .step-panel > div.mt-8 {
    margin-top: 3rem !important;
}

/* ==========================================================================
   ACCESSIBILITY — WCAG 2.4.7 focus visible on cards + inputs
   ==========================================================================
   Audit-flagged blockers. Cards and inputs had no visible focus indicator,
   blocking keyboard users entirely on the booking flow.
   --------------------------------------------------------------------------- */
body[data-page="book"] .select-card:focus-visible {
    outline: 3px solid var(--moss-700, #3B4A38);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(212,175,106,0.25), var(--shadow-card-hover, 0 12px 32px rgba(120,108,86,0.14));
}
body[data-page="book"] .book-field-input:focus-visible,
body[data-page="book"][data-polish="on"] .book-field-input:focus-visible {
    outline: 2px solid var(--moss-700, #3B4A38) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(59,74,56,0.20), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

/* Skip-to-content link visible only on focus */
.skip-to-content {
    position: fixed;
    top: 8px; left: 8px;
    z-index: 1000;
    background: var(--moss-700, #3B4A38);
    color: #FBF9F4;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform 0.2s ease;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
    transform: translateY(0);
    outline: 3px solid var(--champagne-400, #D4AF6A);
    outline-offset: 2px;
}

/* Mobile: keep sticky #priceFloat from hiding the Continue / Confirm button.
   Add body padding-bottom to compensate. */
@media (max-width: 639px) {
    body[data-page="book"] {
        padding-bottom: 96px;
    }
    body[data-page="book"] #priceFloat {
        box-shadow: 0 -8px 24px rgba(120,108,86,0.18);
    }
}

/* ==========================================================================
   REDUCED-MOTION respect (WCAG 2.3.3) — disable hover lifts + pulse + grain
   ==========================================================================
   Users with prefers-reduced-motion set get a still version of the booking
   flow: no card lifts, no btn-pulse, no shine sweep, no grain texture.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body[data-page="book"][data-polish="on"]::before {
        display: none;
    }
    body[data-page="book"][data-polish="on"] .select-card,
    body[data-page="book"][data-polish="on"] .select-card:hover,
    body[data-page="book"][data-polish="on"] .select-card.selected,
    body[data-page="book"][data-polish="on"] .select-card > div:first-of-type,
    body[data-page="book"][data-polish="on"] .select-card:hover > div:first-of-type {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    body[data-page="book"][data-polish="on"] .book-field-input,
    body[data-page="book"][data-polish="on"] .btn-premium,
    body[data-page="book"][data-polish="on"] .btn-premium::before,
    body[data-page="book"][data-polish="on"] .btn-premium:hover,
    body[data-page="book"][data-polish="on"] .btn-premium:hover .arrow,
    body[data-page="book"][data-polish="on"] .btn-premium .arrow {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    body[data-page="book"] .btn-pulse,
    body[data-page="book"] .btn-pulse::before,
    body[data-page="book"] .btn-pulse::after {
        animation: none !important;
    }
}

/* ==========================================================================
   WAVE 9 — Depth + contrast overhaul ("cards must POP, not blend")
   ==========================================================================
   Operator critique: "too much cream, looks unprofessional, white blends
   into everything." The previous warm-ivory-on-warm-linen palette had only
   a 3% delta between cards and canvas -- cards disappeared.

   Fix: keep the warm-paper aesthetic (luxury brands use warm) but PUSH
   the delta. Cards become PURE WHITE with a subtle vertical gradient +
   stronger longer shadow + 1px champagne-glint top edge. Canvas darkens
   a step + gets a brighter radial spotlight where the form sits. Grain
   noise dropped (operator didn't love it).
   --------------------------------------------------------------------------- */

/* Canvas matches site warm-50 (#FAFAF7) so booking flow no longer reads as
   a different brand. Faint top spotlight kept for depth, no dark gradient. */
body[data-page="book"][data-polish="on"] {
    background:
        radial-gradient(ellipse 65% 45% at 50% 0%,
            #FFFFFF 0%,
            rgba(255,255,255,0.5) 40%,
            transparent 70%),
        #FAFAF7 !important;
}
/* Kill the noise grain overlay -- operator didn't love it */
body[data-page="book"][data-polish="on"]::before {
    display: none !important;
}

/* Cards: pure white + vertical gradient sheen + longer shadow + champagne-glint top */
body[data-page="book"][data-polish="on"] .select-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%) !important;
    border: 1px solid #E5DECB !important;
    border-radius: 16px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.85) inset,
        0 2px 4px rgba(120,108,86,0.06),
        0 16px 40px -8px rgba(120,108,86,0.22) !important;
    transition:
        transform 0.32s var(--ease-fast),
        box-shadow 0.32s var(--ease-fast),
        border-color 0.32s var(--ease-fast),
        background 0.32s var(--ease-fast) !important;
}
body[data-page="book"][data-polish="on"] .select-card:hover {
    border-color: var(--champagne-400) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.95) inset,
        0 4px 8px rgba(120,108,86,0.10),
        0 24px 60px -8px rgba(184,150,75,0.32) !important;
    transform: translateY(-3px) !important;
}
body[data-page="book"][data-polish="on"] .select-card.selected {
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F4EF 100%) !important;
    border-color: var(--moss-700) !important;
    box-shadow:
        0 0 0 1px var(--moss-700),
        0 1px 0 rgba(255,255,255,0.95) inset,
        0 4px 12px rgba(107,127,107,0.18),
        0 24px 60px -8px rgba(107,127,107,0.32) !important;
}

/* White-glove premium card -- subtle warm tint, no gold gradient */
body[data-page="book"][data-polish="on"] .select-card[data-value="white_glove_inspection"] {
    background: linear-gradient(160deg, #FFFFFF 0%, #FAFAF7 70%, #F5F0EB 100%) !important;
    border: 1.5px solid var(--champagne-500) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.95) inset,
        0 4px 8px rgba(168,137,106,0.16),
        0 24px 64px -8px rgba(168,137,106,0.28) !important;
}

/* Sticky progress bar: now glassmorphic over the brighter spotlight */
[data-page="book"][data-polish="on"] .book-progress {
    background: rgba(255,255,255,0.82) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(229,222,203,0.7);
}

/* Recently-booked strip: blend less, stand out more */
body[data-page="book"][data-polish="on"] #recentlyBookedStrip {
    background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 100%) !important;
    border-top: 1px solid rgba(16,185,129,0.18) !important;
    border-bottom: 1px solid rgba(16,185,129,0.18) !important;
    color: #065F46 !important;
}

/* Step 5 review card: white base + warm bottom gradient + lifted shadow */
body[data-page="book"][data-polish="on"] [data-step="5"] .bg-white.border-2 {
    background: linear-gradient(180deg, #FFFFFF 0%, #FBF9F4 100%) !important;
    border: 1px solid #E5DECB !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 4px 8px rgba(120,108,86,0.08),
        0 28px 64px -12px rgba(120,108,86,0.22) !important;
}

/* Trust badges + testimonial card: subtle elevation so they don't melt */
body[data-page="book"][data-polish="on"] [data-step="5"] .grid > .bg-white {
    background: #FFFFFF !important;
    box-shadow:
        0 2px 4px rgba(120,108,86,0.05),
        0 8px 20px -6px rgba(120,108,86,0.14) !important;
    border-color: #E5DECB !important;
}
body[data-page="book"][data-polish="on"] [data-step="5"] [role="figure"] {
    background: #FFFFFF !important;
    box-shadow:
        0 2px 4px rgba(120,108,86,0.05),
        0 8px 20px -6px rgba(120,108,86,0.14) !important;
}

/* Floating price widget: brighter, more prominent */
body[data-page="book"][data-polish="on"] #priceFloat {
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.8) inset,
        0 -2px 4px rgba(120,108,86,0.04),
        0 -20px 48px -8px rgba(120,108,86,0.22) !important;
    border-top: 1px solid #E5DECB !important;
}

/* "Why Book With Us" cards below the form -- bring them up to par */
body[data-page="book"][data-polish="on"] .max-w-5xl .grid > div.text-center,
body[data-page="book"][data-polish="on"] .max-w-5xl .grid > .bg-white {
    background: #FFFFFF !important;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow:
        0 2px 4px rgba(120,108,86,0.05),
        0 12px 28px -8px rgba(120,108,86,0.18);
    border: 1px solid #E5DECB;
}