/* ==========================================================================
   JCo Salon — Art Deco Design System
   Converted from the original Tailwind-based stylesheet. All color variables,
   fonts, and animations are preserved exactly as in the original app.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@300;400;500;600&display=swap');

/* --------------------------------------------------------------------------
   Design Tokens (preserved from original :root)
   -------------------------------------------------------------------------- */
:root {
    --jco-bg: #1a1714;
    --jco-bg-light: #231f1b;
    --jco-cream: #e8e4de;
    --jco-warm: #c4b5a0;
    --jco-gold: #c8956c;
    --jco-gold-light: #d4a87e;
    --jco-charcoal: #2a2520;
    --jco-dark: #0f0d0b;
    --jco-muted: #8a7e72;
    --jco-border: #3a342e;

    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-display: 'Cormorant Garamond', Georgia, serif;

    /* ----- Responsive Design Tokens (added for fluid layout system) ----- */
    /* Fluid spacing scale */
    --space-3xs: clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem);
    --space-2xs: clamp(0.5rem, 0.42rem + 0.4vw, 0.75rem);
    --space-xs: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
    --space-sm: clamp(1rem, 0.85rem + 0.75vw, 1.5rem);
    --space-md: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    --space-lg: clamp(2rem, 1.5rem + 2.5vw, 4rem);
    --space-xl: clamp(3rem, 2rem + 5vw, 6rem);
    --space-2xl: clamp(4rem, 2.5rem + 7.5vw, 9rem);

    /* Fluid type scale */
    --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
    --text-sm: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    --text-xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
    --text-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    --text-3xl: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem);
    --text-4xl: clamp(2.75rem, 1.9rem + 4vw, 4.5rem);

    /* Layout tokens */
    --container-max: 1400px;
    --container-max-wide: 1800px;
    --container-pad: clamp(1.25rem, 1rem + 1vw, 2.5rem);
    --section-pad-y: clamp(3rem, 2rem + 4vw, 9rem);

    /* Breakpoint reference (custom properties can't drive @media conditions,
       documented here so every media query in this file stays consistent):
       480px / 768px / 1024px / 1280px / 1440px / 1600px / 1920px / 2560px */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: var(--jco-bg);
    color: var(--jco-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    overflow-x: clip;
}

::selection { background: var(--jco-gold); color: var(--jco-dark); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--jco-dark); }
::-webkit-scrollbar-thumb { background: var(--jco-border); border-radius: 3px; }

    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }
.italic { font-style: italic; }

.eyebrow {
    display: block;
    font-size: 15px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--jco-muted);
}

.headline {
    font-family: var(--font-heading);
    font-weight: 300;
    line-height: 1.15;
    color: var(--jco-cream);
}

.headline em { font-style: italic; color: var(--jco-gold); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

.section { padding-top: var(--section-pad-y); padding-bottom: var(--section-pad-y); }

.bg-bg { background-color: var(--jco-bg); }
.bg-bg-light { background-color: var(--jco-bg-light); }
.bg-charcoal { background-color: var(--jco-charcoal); }
.bg-dark { background-color: var(--jco-dark); }

.border-top { border-top: 1px solid var(--jco-border); }
.border-bottom { border-bottom: 1px solid var(--jco-border); }
.border-y { border-top: 1px solid var(--jco-border); border-bottom: 1px solid var(--jco-border); }

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.grid-services { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--jco-border); }

/* Starting Investment overview (Services section) */
.investment-block {
    padding: var(--space-lg) 0;
    margin-bottom: var(--space-md);
    border-top: 1px solid var(--jco-border);
    border-bottom: 1px solid var(--jco-border);
    position: relative;
    z-index: 20;
}
.investment-intro { max-width: 40rem; margin: 0 auto var(--space-lg); text-align: center; }
.investment-intro .eyebrow { display: block; text-align: center; }
.investment-copy { font-size: 14px; line-height: 1.8; color: var(--jco-warm); margin-top: 0.75rem; }

.investment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg) var(--space-sm);
    margin-bottom: var(--space-lg);
}
@media (min-width: 640px) {
    .investment-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .investment-grid { grid-template-columns: repeat(5, 1fr); }
}

.investment-item {
    padding-top: var(--space-sm);
    border-top: 1px solid var(--jco-border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color 0.4s ease;
}
.investment-item:hover { border-top-color: var(--jco-gold); }

.investment-label {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jco-muted);
}

.investment-price {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
    color: var(--jco-cream);
    line-height: 1;
}
.investment-price .dollar { font-size: 0.55em; color: var(--jco-gold); margin-right: 0.08em; }
.investment-price .plus { font-size: 0.5em; color: var(--jco-gold); margin-left: 0.15em; }
.investment-price--consult {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--jco-warm);
    letter-spacing: 0.02em;
}

.investment-note {
    font-size: 11px;
    font-style: italic;
    line-height: 1.5;
    color: var(--jco-muted);
}

.investment-cta { text-align: center; }
.investment-dropdown { display: inline-block; }
.grid-pricing { display: block; column-count: 1; column-gap: 3rem; }
.pricing-category { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin-bottom: 3rem; }

@media (min-width: 768px) {
    .grid-2 { grid-template-columns: 1fr 1fr; gap: 4rem; }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-services { grid-template-columns: repeat(2, 1fr); }
    .grid-pricing { column-count: 2; column-gap: 4rem; }
}
@media (min-width: 1024px) {
    .grid-2 { gap: 6rem; }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-services { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.875rem 1.75rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-primary { background: var(--jco-cream); color: var(--jco-dark); }
.btn-primary:hover { background: var(--jco-gold); }

.btn-outline {
    border: 1px solid rgba(196, 181, 160, 0.3);
    color: var(--jco-cream);
    background: transparent;
}
.btn-outline:hover { background: rgba(232, 228, 222, 0.05); }

.btn-gold-border {
    border: 1px solid rgba(200, 149, 108, 0.3);
    color: var(--jco-cream);
    background: transparent;
}

/* --------------------------------------------------------------------------
   Announcement Bar
   -------------------------------------------------------------------------- */
.announcement-bar {
    width: 100%;
    background: var(--jco-charcoal);
    border-bottom: 1px solid var(--jco-border);
    padding: 0.625rem 1rem;
    text-align: center;
    position: relative;
    z-index: 50;
}

.announcement-bar .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-family: var(--font-body);
    color: var(--jco-warm);
}

.announcement-bar a { text-decoration: underline; text-underline-offset: 2px; }
.announcement-bar a:hover { color: var(--jco-gold); }
.announcement-bar .sep { color: var(--jco-muted); }
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    transition-delay: 0.18s;
@media (min-width: 640px) { .announcement-bar .hide-mobile { display: inline; } }

/* --------------------------------------------------------------------------
   Header / Navigation
   -------------------------------------------------------------------------- */
.site-header-group {
    position: sticky;
    top: 0;
    z-index: 40;
}
section[id] { scroll-margin-top: 140px; }
.site-header {
    position: relative;
    padding: 1.25rem 0;
    transition: all 0.5s ease;
    background: var(--jco-charcoal);
}

.site-header.scrolled {
    top: 0;
    background: rgba(26, 23, 20, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--jco-border);
    padding: 0.75rem 0;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-desktop { display: none; align-items: center; gap: 0.85rem; }
@media (min-width: 1280px) { .nav-desktop { display: flex; } }

.nav-desktop a {
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jco-warm);
    font-weight: 300;
    transition: color 0.3s ease;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    text-decoration: none;
    white-space: nowrap;
}
.nav-desktop a:hover { color: var(--jco-cream); }

.header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.header-logo img { height: 2.75rem; width: auto; opacity: 1; }
@media (min-width: 768px) { .header-logo img { height: 3.25rem; } }

.header-actions { display: none; align-items: center; gap: 1rem; }
@media (min-width: 1280px) { .header-actions { display: flex; } }

.header-phone {
    font-size: 13px;
    letter-spacing: 0.05em;
    color: var(--jco-muted);
    transition: color 0.3s ease;
}
.header-phone:hover { color: var(--jco-cream); }

.mobile-toggle {
    display: block;
    color: var(--jco-cream);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.75rem;
    line-height: 1;
    padding: 0.5rem;
    margin: -0.5rem;
    position: relative;
    z-index: 50;
}
@media (min-width: 1280px) { .mobile-toggle { display: none; } }

.mobile-menu {
    position: fixed;
    inset: 0;
    background: rgba(15, 13, 11, 0.98);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.75rem;
    padding: 7rem 1.5rem 3rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease;
}
body.mobile-menu-open {
    overflow: hidden;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
    font-size: 1.5rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--jco-cream);
    font-family: var(--font-heading);
    background: none;
    border: none;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    width: 100%;
    min-height: max(560px, calc(100vh - 155px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.hero-video-wrap { position: absolute; inset: 0; background: var(--jco-charcoal); }
.hero-video-wrap video,
.hero-video-wrap .hero-poster { width: 100%; height: 100%; object-fit: cover; }

/* Source video is portrait (1080x1350). object-fit:cover works fine on narrow
   mobile viewports, but blows up/crops heavily on wide desktop screens — switch
   to contain there so the full frame is visible with no forced zoom. */
@media (min-width: 768px) {
    .hero-video-wrap video,
    .hero-video-wrap .hero-poster { object-fit: contain; }

/* Blurred edge fill for portrait video on landscape screens */
.hero-blur-bg {
    position: absolute;
    inset: -5%;
    background-size: cover;
    background-position: center;
    filter: blur(14px) brightness(0.62) saturate(0.85);
    z-index: 0;
}

/* Luxury gradient edge treatment for portrait video in landscape hero */
.hero-video-wrap::before,
.hero-video-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 26%;
    z-index: 2;
    pointer-events: none;
}
.hero-video-wrap::before {
    left: 0;
    background: linear-gradient(to right, rgba(18,15,12,0.95) 0%, rgba(18,15,12,0.5) 55%, transparent 100%);
}
.hero-video-wrap::after {
    right: 0;
    background: linear-gradient(to left, rgba(18,15,12,0.95) 0%, rgba(18,15,12,0.5) 55%, transparent 100%);
}
.hero-video-wrap video { position: relative; z-index: 1; }
.hero-overlay-1, .hero-overlay-2 { z-index: 2; }

/* Back-home link used on all non-homepage pages */
.back-home-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jco-muted);
    margin-bottom: 2rem;
    transition: color 0.3s ease;
    text-decoration: none;
}
.back-home-link:hover { color: var(--jco-gold); }
.back-home-link .arrow { font-size: 0.85rem; }
}

.hero-overlay-1 {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(15,13,11,0.6), rgba(15,13,11,0.3), rgba(15,13,11,0.8));
}
.hero-overlay-2 { position: absolute; inset: 0; background: rgba(15, 13, 11, 0.2); }

.hero-top {
    position: relative;
    z-index: 10;
    padding-top: 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
@media (min-width: 1024px) { .hero-top { padding-top: 8rem; } }

.hero-logo { height: 12rem; width: auto; margin-bottom: 1rem; }
@media (min-width: 1024px) { .hero-logo { height: 16.5rem; margin-bottom: 1.5rem; } }

.hero-location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--jco-warm);
}
.hero-location .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--jco-gold); }

.hero-bottom {
    position: relative;
    margin-top: auto;
    width: 100%;
    z-index: 10;
    padding-bottom: clamp(2.5rem, 6vw, 7rem);
}

.hero-headline {
    font-family: var(--font-heading);
    font-weight: 300;
    line-height: 0.95;
    max-width: 42rem;
}
.hero-headline .line { display: block; }
.hero-headline .line-1 { font-size: clamp(3rem, 7vw, 5.5rem); color: var(--jco-cream); }
.hero-headline .line-2 { font-size: clamp(3.2rem, 7.5vw, 6rem); font-style: italic; color: var(--jco-gold); }
.hero-headline .line-2 .comma { color: var(--jco-cream); font-style: normal; }
.hero-headline .line-3 { font-size: clamp(3rem, 7vw, 5.5rem); color: var(--jco-cream); }

.hero-rule { height: 1px; background: rgba(196, 181, 160, 0.4); margin: 2rem 0; width: 60px; }

.hero-lede {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.7;
    color: var(--jco-warm);
    font-style: italic;
    font-family: var(--font-heading);
    max-width: 28rem;
    border-left: 2px solid rgba(196, 181, 160, 0.2);
    padding-left: 1.25rem;
}
@media (min-width: 1024px) { .hero-lede { font-size: 20px; } }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(196, 181, 160, 0.1);
}
.hero-tags .tag { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(196, 181, 160, 0.7); }
.hero-tags .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(196, 181, 160, 0.3); }

.hero-play {
    position: absolute;
    bottom: 2.5rem;
    right: 1.5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
@media (min-width: 1024px) { .hero-play { right: 2.5rem; } }
.hero-play .circle {
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    border: 1px solid rgba(196, 181, 160, 0.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.875rem; color: var(--jco-cream);
}
.hero-play .label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--jco-warm); }

/* --------------------------------------------------------------------------
   Stats Band
   -------------------------------------------------------------------------- */
.stats-band { padding: 2.5rem 0; }
@media (min-width: 1024px) { .stats-band { padding: 3.5rem 0; } }

.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 3rem; } }

.stat { text-align: center; }
.stat .num {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    font-weight: 300;
    color: var(--jco-cream);
}
@media (min-width: 1024px) { .stat .num { font-size: 2.25rem; } }
.stat .num .accent { color: var(--jco-gold); font-style: italic; margin-left: 0.125rem; }
.stat .num.italic-gold { font-style: italic; color: var(--jco-gold); }
.stat .label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--jco-muted); margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */
.marquee {
    background: var(--jco-bg);
    border-bottom: 1px solid var(--jco-border);
    padding: 1.25rem 0;
    overflow: hidden;
}
.marquee-track {
    display: flex;
    align-items: center;
    animation: marquee-scroll 30s linear infinite;
    width: max-content;
}
.marquee-content { display: flex; align-items: center; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.marquee-item { color: var(--jco-warm); white-space: nowrap; }
.marquee-item em { font-style: italic; color: var(--jco-gold); font-family: var(--font-heading); }
.marquee-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(138, 126, 114, 0.5); margin: 0 1.5rem; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Philosophy / Story
   -------------------------------------------------------------------------- */
.philosophy-img-card { position: relative; overflow: hidden; aspect-ratio: 3/4; }

.philosophy-wrap { display: block; }
.philosophy-wrap::after { content: ""; display: table; clear: both; }
.philosophy-float {
    float: right;
    width: min(420px, 45%);
    margin: 0 0 var(--space-md) var(--space-lg);
}
@media (max-width: 767px) {
    .philosophy-float {
        float: none;
        width: 100%;
        margin: 0 0 var(--space-md) 0;
    }
}

.philosophy-carousel { position: absolute; inset: 0; overflow: hidden; }
.philosophy-slide {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--jco-charcoal);
    transition: transform 1.4s ease;
}
.philosophy-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,13,11,0.8), transparent, transparent); }
.philosophy-img-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; display: flex; align-items: flex-end; justify-content: space-between; }
.philosophy-img-caption .name { color: var(--jco-cream); font-family: var(--font-heading); font-size: 1.125rem; }
.philosophy-img-caption .role { color: var(--jco-gold); font-style: italic; font-size: 0.875rem; font-family: var(--font-heading); }
.philosophy-img-caption .badge { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--jco-muted); border: 1px solid var(--jco-border); padding: 0.375rem 0.75rem; }

.philosophy-text p { font-size: 15px; line-height: 1.8; color: var(--jco-warm); margin-bottom: 1.25rem; }

/* --------------------------------------------------------------------------
   Craft Section
   -------------------------------------------------------------------------- */
.craft-ornament {
    position: absolute;
    top: 2.5rem;
    right: 2.5rem;
    font-size: 20rem;
    font-family: var(--font-heading);
    color: rgba(58, 52, 46, 0.1);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.craft-header { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem; }
@media (min-width: 1024px) { .craft-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.craft-header p { font-size: 15px; line-height: 1.8; color: var(--jco-warm); max-width: 28rem; }

.craft-item { display: block; text-decoration: none; }
.craft-item .img-wrap { overflow: hidden; margin-bottom: 1rem; position: relative; }
.craft-item video { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; transition: transform 0.7s ease; }
.craft-item:hover video { transform: scale(1.05); }
.craft-item .img-wrap::after { content: ''; position: absolute; inset: 0; background: rgba(15,13,11,0); transition: background 0.5s ease; }
.craft-item:hover .img-wrap::after { background: rgba(15,13,11,0.2); }
.craft-item .meta { display: flex; align-items: center; }
.craft-item .meta .title { font-family: var(--font-heading); font-size: 1.75rem; color: var(--jco-cream); text-decoration: none; }
.craft-item .meta .title em { font-style: italic; color: var(--jco-gold); }
.craft-item .meta .num { font-size: 11px; letter-spacing: 0.1em; color: var(--jco-muted); }

/* Craft hover-reveal description panel */
.craft-grid { gap: var(--space-sm); }
.craft-desc {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    padding: var(--space-sm);
    background: rgba(15, 13, 11, 0.92);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow-y: auto;
    text-align: left;
}
.craft-item:hover .craft-desc,
.craft-item:focus-visible .craft-desc {
    opacity: 1;
    visibility: visible;
}
.craft-desc-title {
    display: block;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.15rem;
    text-transform: capitalize;
    color: var(--jco-gold);
    margin-bottom: 0.25rem;
}
.craft-desc p {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.65;
    color: var(--jco-cream);
}

.craft-footer { margin-top: 4rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 2.5rem; border-top: 1px solid var(--jco-border); }
@media (min-width: 640px) { .craft-footer { flex-direction: row; } }
.craft-footer p { font-size: 15px; color: var(--jco-warm); font-style: italic; font-family: var(--font-heading); }

/* --------------------------------------------------------------------------
   Ornament divider
   -------------------------------------------------------------------------- */

/* Reduce gap between stylist portrait and bio */
.ornament + .section { padding-top: 3rem; }
@media (min-width: 1024px) { .ornament + .section { padding-top: 4rem; } }

.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
    background: var(--jco-bg);
}
.ornament .line { flex: 1; max-width: 200px; height: 1px; }
.ornament .line-left { background: linear-gradient(to right, transparent, var(--jco-border)); }
.ornament .line-right { background: linear-gradient(to left, transparent, var(--jco-border)); }
.ornament .letter { margin: 0 1.5rem; font-family: var(--font-heading); font-size: 1.5rem; font-style: italic; color: rgba(200, 149, 108, 0.3); }
.ornament .letter.monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid rgba(200, 149, 108, 0.45);
    font-size: 0.85rem;
    font-style: normal;
    letter-spacing: 0.02em;
    color: rgba(200, 149, 108, 0.8);
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
.services-header { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem; }
@media (min-width: 1024px) { .services-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.services-header p { font-size: 15px; line-height: 1.8; color: var(--jco-warm); max-width: 28rem; }

.service-card {
    background: var(--jco-bg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px;
    transition: background 0.5s ease;
}
.service-card:hover { background: var(--jco-bg-light); }
.service-card .num { font-size: 12px; letter-spacing: 0.1em; color: var(--jco-muted); margin-bottom: 1rem; }
.service-card h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 300; color: var(--jco-cream); margin-bottom: 0.75rem; }
.service-card h3 em { font-style: italic; color: var(--jco-gold); }
.service-card .desc { font-size: 13px; line-height: 1.7; color: rgba(196, 181, 160, 0.8); }
.service-card .footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--jco-border); }
.service-card .cta { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jco-cream); transition: color 0.3s ease; }
.service-card:hover .cta { color: var(--jco-gold); }
.service-card .arrow { color: var(--jco-gold); font-size: 1.125rem; transition: transform 0.3s ease; }
.service-card:hover .arrow { transform: translate(4px, -4px); }

/* --------------------------------------------------------------------------
   Stylists
   -------------------------------------------------------------------------- */
.stylists-header { margin-bottom: 4rem; }
.stylists-header p { font-size: 15px; line-height: 1.8; color: var(--jco-warm); max-width: 32rem; }

.stylist-card { display: block; text-decoration: none; }
.stylist-card .img-wrap { overflow: hidden; margin-bottom: 1rem; position: relative; }
.stylist-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top; transition: transform 0.7s ease; }
.stylist-card:hover img { transform: scale(1.05); }
.stylist-card:hover .name { color: var(--jco-gold-light); }
.stylist-card:hover .role { color: var(--jco-cream); }
.stylist-card .img-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,13,11,0.6), transparent, transparent); opacity: 0; transition: opacity 0.5s ease; }
.stylist-card:hover .img-wrap::after { opacity: 1; }
.stylist-card .name { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 500; letter-spacing: 0.01em; color: var(--jco-cream); text-decoration: none; transition: color 0.3s ease; }
.stylist-card .name em { font-style: italic; color: var(--jco-gold); text-decoration: none; transition: color 0.3s ease; }
.stylist-card .role { font-size: 11px; letter-spacing: 0.08em; font-weight: 500; color: #a89a8c; margin-top: 0.375rem; text-decoration: none; text-transform: uppercase; transition: color 0.3s ease; }

.stylists-cta { margin-top: 3.5rem; text-align: center; }
.stylists-cta a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--jco-cream); border-bottom: 1px solid rgba(196, 181, 160, 0.3); padding-bottom: 0.25rem; transition: all 0.3s ease; }
.stylists-cta a:hover { border-color: var(--jco-gold); color: var(--jco-gold); }

/* --------------------------------------------------------------------------
   Testimonial
   -------------------------------------------------------------------------- */
.testimonial { text-align: center; max-width: 900px; margin: 0 auto; }
.testimonial .quote-mark { position: absolute; top: -1.5rem; left: -1rem; font-size: 3rem; color: rgba(200, 149, 108, 0.2); font-family: var(--font-heading); line-height: 1; }
.testimonial blockquote { position: relative; font-family: var(--font-heading); font-size: 1.25rem; font-style: italic; color: var(--jco-warm); line-height: 1.7; max-width: 42rem; margin: 0 auto 2.5rem; }
@media (min-width: 1024px) { .testimonial blockquote { font-size: 1.5rem; } }
.testimonial .source { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--jco-muted); margin-bottom: 2rem; }
.testimonial .via { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 12px; letter-spacing: 0.1em; color: var(--jco-muted); transition: color 0.3s ease; }
.testimonial .via:hover { color: var(--jco-gold); }

/* --------------------------------------------------------------------------
   Visit
   -------------------------------------------------------------------------- */
.visit-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; }
@media (min-width: 1024px) { .visit-grid { grid-template-columns: 1fr 1fr; gap: 6rem; } }

.visit-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; margin-bottom: 3rem; }
.visit-details .label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--jco-muted); margin-bottom: 0.5rem; }
.visit-details .value { font-size: 15px; color: var(--jco-cream); line-height: 1.6; }
.visit-details .value em { font-style: italic; color: var(--jco-gold); font-family: var(--font-heading); }
.visit-details .value-phone { text-decoration: none; display: inline-block; transition: color 0.3s ease; }
.visit-details .value-phone:hover { color: var(--jco-gold); }
.visit-details .value-phone em { font-size: 1.35em; }
@media (min-width: 768px) {
    .visit-details .value-phone em { font-size: 1.5em; }
}

.visit-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

.visit-hours-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--jco-gold); margin-bottom: 1.5rem; }
.visit-hours-title { font-family: var(--font-heading); font-size: 1.5rem; color: var(--jco-cream); margin-bottom: 2rem; }
.hours-list .hours-row { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--jco-border); color: var(--jco-warm); font-size: 14px; }
.hours-list .hours-row.today { color: var(--jco-gold); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--jco-dark); border-top: 1px solid var(--jco-border); }
.footer-main { padding: 4rem 0; }
@media (min-width: 1024px) { .footer-main { padding: 5rem 0; } }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }

.footer-brand img { height: 4rem; width: auto; margin-bottom: 1.5rem; opacity: 0.8; }
.footer-brand p { font-size: 13px; line-height: 1.6; color: var(--jco-muted); }

.footer-col h4 { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jco-warm); margin-bottom: 1.25rem; }
.footer-col a { display: block; font-size: 13px; color: var(--jco-muted); margin-bottom: 0.75rem; transition: color 0.3s ease; }
.footer-col a:hover { color: var(--jco-cream); }

.footer-bottom { border-top: 1px solid var(--jco-border); }
.footer-bottom .inner { padding: 1.5rem 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; }
@media (min-width: 640px) { .footer-bottom .inner { flex-direction: row; } }
.footer-bottom .copy { font-size: 11px; letter-spacing: 0.1em; color: var(--jco-muted); }
.footer-bottom .links { display: flex; align-items: center; gap: 1.5rem; }
.footer-bottom .links a { font-size: 11px; letter-spacing: 0.1em; color: var(--jco-muted); transition: color 0.3s ease; }
.footer-bottom .links a:hover { color: var(--jco-cream); }

/* --------------------------------------------------------------------------
   Stylist Detail Page
   -------------------------------------------------------------------------- */
.stylist-hero { position: relative; padding-top: 8rem; padding-bottom: 2rem; overflow: hidden; }
@media (min-width: 1024px) { .stylist-hero { padding-top: 10rem; padding-bottom: 3rem; } }

.stylist-hero-letter {
    position: absolute;
    top: 5rem;
    right: 1rem;
    font-size: 18rem;
    font-family: var(--font-heading);
    color: rgba(58, 52, 46, 0.1);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.stylist-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); align-items: center; }
@media (min-width: 1024px) { .stylist-hero-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }

.stylist-portrait { overflow: hidden; }
.stylist-portrait img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top; transition: transform 0.7s ease; }
.stylist-portrait:hover img { transform: scale(1.05); }

.stylist-back-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--jco-muted); margin-bottom: 2rem; transition: color 0.3s ease; }
.stylist-back-link:hover { color: var(--jco-gold); }

.stylist-name { font-family: var(--font-heading); font-size: clamp(2.75rem, 6.75vw, 5rem); font-weight: 300; line-height: 0.95; color: var(--jco-cream); margin-bottom: 1rem; }
.stylist-name em { font-style: italic; color: var(--jco-gold); }

.stylist-role { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jco-warm); margin-bottom: var(--space-sm); }

.stylist-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

.stylist-bio { max-width: 800px; margin: 0 auto; }
.stylist-bio .bio-eyebrow { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jco-muted); margin-bottom: 2rem; }
.stylist-bio p { line-height: 1.8; font-size: 15px; color: var(--jco-warm); margin-bottom: 1.25rem; }
.stylist-bio p.quote { font-family: var(--font-heading); font-size: 1.25rem; font-style: italic; color: var(--jco-gold); line-height: 1.7; padding: 1rem 0 1rem 1.5rem; border-left: 2px solid rgba(200, 149, 108, 0.3); margin: 2rem 0; }
@media (min-width: 1024px) { .stylist-bio p.quote { font-size: 1.5rem; } }

.stylist-gallery { max-width: 1400px; margin: 0 auto; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.gallery-item { display: block; overflow: hidden; position: relative; cursor: pointer; background: var(--jco-bg); border: none; padding: 0; }
.gallery-item img { width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: contain; object-position: center; transition: transform 0.7s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item .overlay { position: absolute; inset: 0; background: rgba(15,13,11,0); transition: background 0.5s ease; display: flex; align-items: center; justify-content: center; }
.gallery-item:hover .overlay { background: rgba(15,13,11,0.3); }
.gallery-item .plus { color: var(--jco-cream); font-size: 1.5rem; opacity: 0; transition: opacity 0.5s ease; }
.gallery-item:hover .plus { opacity: 1; }

.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(15,13,11,0.95); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox .close { position: absolute; top: 1.5rem; right: 1.5rem; color: var(--jco-cream); font-size: 1.5rem; background: none; border: none; cursor: pointer; transition: color 0.3s ease; }
.lightbox .close:hover { color: var(--jco-gold); }

.stylist-next { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2rem; }
@media (min-width: 1024px) { .stylist-next { flex-direction: row; } }
.stylist-next-link { display: flex; align-items: center; gap: 1rem; }
.stylist-next-link .thumb { width: 4rem; height: 4rem; overflow: hidden; flex-shrink: 0; }
.stylist-next-link .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.5s ease; }
.stylist-next-link:hover .thumb img { transform: scale(1.1); }
.stylist-next-link .label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--jco-muted); margin-bottom: 0.25rem; }
.stylist-next-link .name { font-family: var(--font-heading); font-size: 1.25rem; color: var(--jco-cream); transition: color 0.3s ease; }
.stylist-next-link:hover .name { color: var(--jco-gold); }
.stylist-next-link .name em { font-style: italic; }

/* --------------------------------------------------------------------------
   Pricing Page
   -------------------------------------------------------------------------- */
.pricing-hero { position: relative; padding-top: 8rem; padding-bottom: 3rem; overflow: hidden; }
@media (min-width: 1024px) { .pricing-hero { padding-top: 10rem; } }

.pricing-hero-letter {
    position: absolute;
    top: 5rem;
    right: 1rem;
    font-size: 18rem;
    font-family: var(--font-heading);
    color: rgba(58, 52, 46, 0.1);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.pricing-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 300; line-height: 0.95; color: var(--jco-cream); margin-bottom: 1rem; }
.pricing-title em { font-style: italic; color: var(--jco-gold); }

.pricing-lede { font-size: 15px; line-height: 1.7; color: var(--jco-warm); max-width: 36rem; }

.pricing-tier-badge { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding: 0.625rem 1.25rem; border: 1px solid rgba(200, 149, 108, 0.3); }
.pricing-tier-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--jco-gold); }
.pricing-tier-badge .text { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jco-cream); }

.pricing-list { max-width: 1000px; margin: 0 auto; }

.pricing-category h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 300; color: var(--jco-cream); margin-bottom: 0.5rem; }
@media (min-width: 1024px) { .pricing-category h2 { font-size: 1.875rem; } }
.pricing-category h2 em { font-style: italic; color: var(--jco-gold); }
.pricing-category .blurb { font-size: 14.5px; font-style: italic; color: var(--jco-muted); margin-bottom: 1.5rem; font-family: var(--font-heading); }

.pricing-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--jco-border); }
.pricing-row .name { font-size: 16px; color: var(--jco-warm); line-height: 1.45; }
.pricing-row .price { font-size: 18px; font-weight: 600; letter-spacing: 0.01em; color: var(--jco-cream); font-family: var(--font-heading); white-space: nowrap; }
.pricing-row .price .dollar { color: var(--jco-gold); font-weight: 600; font-size: 0.78em; margin-right: 0.15rem; }
.pricing-row .price .consult { font-style: italic; color: var(--jco-muted); font-size: 14px; }
@media (min-width: 768px) {
    .pricing-row { padding: 1.1rem 0; }
    .pricing-row .name { font-size: 17px; }
    .pricing-row .price { font-size: 20px; }
    .pricing-row .price .dollar { font-size: 0.75em; }
    .pricing-row .price .consult { font-size: 14px; }
}

.pricing-footnote { font-size: 13.5px; color: var(--jco-muted); font-style: italic; margin-top: 3rem; text-align: center; max-width: 32rem; margin-left: auto; margin-right: auto; }

.pricing-cta { text-align: center; }
.pricing-cta h2 { font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 300; color: var(--jco-cream); margin-bottom: 1rem; }
.pricing-cta h2 em { font-style: italic; color: var(--jco-gold); }
.pricing-cta p { font-size: 15px; color: var(--jco-warm); margin-bottom: 2rem; max-width: 28rem; margin-left: auto; margin-right: auto; }
.pricing-cta .ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }

/* --------------------------------------------------------------------------
   Reveal Animations (preserved from original)
   -------------------------------------------------------------------------- */
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes wipeIn {
    from { clip-path: inset(0 100% 0 0); opacity: 0; }
    to { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes slideRule {
    from { width: 0; }
    to { width: 60px; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fade-up { animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fade-in { animation: fadeIn 0.6s ease forwards; }
.animate-wipe { animation: wipeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-scale-in { animation: scaleIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Reveal-on-scroll (replaces the React useInView hook) */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

.reveal-up-10 { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-up-10.in-view { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-gold { color: var(--jco-gold); }
.text-cream { color: var(--jco-cream); }
.text-warm { color: var(--jco-warm); }
.text-muted { color: var(--jco-muted); }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.relative { position: relative; }
.z-10 { z-index: 10; }
.overflow-hidden { overflow: hidden; }

/* ==========================================================================
   Policy / Legal Pages (generic WordPress Pages — Cancellation Policy, etc.)
   ========================================================================== */
.policy-page { background: var(--jco-bg); min-height: 100vh; }

.policy-header {
    background: var(--jco-charcoal);
    padding: 8rem 0 3rem;
    border-bottom: 1px solid var(--jco-border);
    text-align: center;
}
@media (min-width: 768px) { .policy-header { padding: 10rem 0 4rem; } }

.policy-title {
    font-family: var(--font-heading);
    color: var(--jco-cream);
    font-size: 2.25rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 0;
}
@media (min-width: 768px) { .policy-title { font-size: 3rem; } }

.policy-content {
    max-width: 760px;
    margin: 0 auto;
    padding: 3.5rem 24px 6rem;
    color: var(--jco-warm);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
}
.policy-content p { margin: 0 0 1.25rem; }
.policy-content p:first-of-type {
    color: var(--jco-gold);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-style: normal;
}
.policy-content strong { color: var(--jco-cream); font-weight: 600; }
.policy-content a { color: var(--jco-gold); text-decoration: underline; text-underline-offset: 2px; }
.policy-content ul {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}
.policy-content ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.policy-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--jco-gold);
}

/* ── Nav Dropdown (Stylists) ───────────────────────────────────────── */
.nav-dropdown-wrap {
    position: relative;
    display: inline-block;

    padding-bottom: 2px;}
.nav-dropdown-trigger {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}
.nav-caret {
    font-size: 0.6em;
    transition: transform 0.25s ease;
    display: inline-block;
}
.nav-dropdown-wrap:hover .nav-caret,
.nav-dropdown-wrap:focus-within .nav-caret {
    transform: rotate(180deg);
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--jco-charcoal);
    border: 1px solid rgba(212,175,55,0.25);
    list-style: none;
    margin: 0;
    padding: 10px 0 8px;
    min-width: 210px;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}
.nav-dropdown-wrap:hover .nav-dropdown-menu,
.nav-dropdown-wrap:focus-within .nav-dropdown-menu {
    display: block;
}
.nav-dropdown-menu li a {
    display: block;
    padding: 0.45rem 1.4rem;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jco-muted);
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
}
.nav-dropdown-menu li a:hover {
    color: var(--jco-gold);
    background: rgba(255,255,255,0.04);
}

/* ── Mobile Stylists List ──────────────────────────────────────────── */
.mobile-stylists-group {
    display: flex;
    flex-direction: column;
}
.mobile-stylist-list {
    list-style: none;
    margin: 0.25rem 0 0.5rem 0;
    padding: 0 0 0 1rem;
    border-left: 1px solid rgba(212,175,55,0.2);
}
.mobile-stylist-list li a {
    display: block;
    padding: 0.6rem 0.25rem;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jco-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.mobile-stylist-list li a:hover {
    color: var(--jco-gold);
}

/* ══════════════════════════════════════════════════════════════════
   NEWS PAGE
═══════════════════════════════════════════════════════════════════ */

/* Hero */
.news-hero { padding-top: 6rem; padding-bottom: 0; background: var(--jco-bg); }
.news-hero .container { padding-bottom: 1.5rem; }
.news-hero-banner { width: 100%; background: var(--jco-bg); display: flex; justify-content: center; align-items: center; padding: 2rem 1rem; }
.news-hero-img { max-width: 900px; width: 100%; height: auto; display: block; object-fit: contain; }

/* Section */
.news-section { padding-top: 4rem; }

/* Grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2.5rem;
    margin-bottom: 4rem;
}
@media (max-width: 640px) { .news-grid { grid-template-columns: 1fr; } }

/* Card */
.news-card {
    background: var(--jco-bg);
    border: 1px solid rgba(212,175,55,0.12);
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.news-card:hover { border-color: rgba(212,175,55,0.35); transform: translateY(-3px); }

.news-card-img-wrap { display: block; overflow: hidden; aspect-ratio: 16/10; }
.news-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.news-card:hover .news-card-img { transform: scale(1.04); }

.news-card-no-img { background: var(--jco-charcoal); }
.news-card-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--jco-charcoal), var(--jco-bg-light)); }

.news-card-body {
    padding: 1.5rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.6rem;
}
.news-card-date {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jco-gold);
    margin: 0;
}
.news-card-title {
    font-size: 1.1rem;
    line-height: 1.4;
    margin: 0;
    font-weight: 500;
}
.news-card-title a {
    color: var(--jco-cream);
    text-decoration: none;
    transition: color 0.25s ease;
}
.news-card-title a:hover { color: var(--jco-gold); }
.news-card-excerpt {
    font-size: 13px;
    color: var(--jco-muted);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}
.news-card-read-more {
    margin-top: 0.75rem;
    align-self: flex-start;
    font-size: 10px;
    letter-spacing: 0.14em;
}

/* Pagination */
.news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 0 1rem;
}
.news-page-info {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jco-muted);
}

/* Empty state */
.news-empty {
    text-align: center;
    padding: 5rem 1rem;
    max-width: 520px;
    margin: 0 auto;
}
.news-empty-title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--jco-cream);
}
.news-empty-sub {
    color: var(--jco-muted);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* ── Homepage News Preview ───────────────────────────────────────── */
.news-preview-section { padding: 5rem 0; background: var(--jco-bg-light); }
.news-preview-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.news-preview-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    margin: 0;
    color: var(--jco-cream);
}
.news-preview-eyebrow {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--jco-gold);
    margin: 0 0 0.5rem;
}
.news-preview-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    border: 1px solid rgba(212,175,55,0.15);
    background: var(--jco-bg);
    padding: 2rem;
}
@media (max-width: 768px) {
    .news-preview-card { grid-template-columns: 1fr; gap: 1.5rem; }
}
.news-preview-img-wrap { overflow: hidden; aspect-ratio: 16/10; display: block; }
.news-preview-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.news-preview-img-wrap:hover .news-preview-img { transform: scale(1.04); }
.news-preview-body { display: flex; flex-direction: column; gap: 0.75rem; }
.news-preview-date { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jco-gold); margin: 0; }
.news-preview-post-title { font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--jco-cream); margin: 0; line-height: 1.35; }
.news-preview-post-title a { color: inherit; text-decoration: none; transition: color 0.25s; }
.news-preview-post-title a:hover { color: var(--jco-gold); }
.news-preview-excerpt { font-size: 14px; color: var(--jco-muted); line-height: 1.7; margin: 0; }
.news-preview-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }

/* ---------------------------------------------------------------
   Starting Investment — refined editorial list (replaces old
   card-grid; kept old .investment-grid/.investment-item/etc rules
   above untouched but unused for safety)
   --------------------------------------------------------------- */
.investment-list {
    max-width: 640px;
    margin: 0 auto var(--space-lg);
}
.investment-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--jco-border);
}
.investment-row:first-child {
    border-top: 1px solid var(--jco-border);
}
.investment-category {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--jco-cream);
    letter-spacing: 0.01em;
}
.investment-range {
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: var(--jco-muted);
    white-space: nowrap;
}
.investment-range .dollar {
    color: var(--jco-gold);
}
@media (min-width: 640px) {
    .investment-row {
        padding: 1.35rem 0;
    }
    .investment-category {
        font-size: 1.15rem;
    }
    .investment-range {
        font-size: 0.9rem;
    }
}


/* ---------------------------------------------------------------
   Signature Enhancements — editorial list matching the Starting
   Investment section (name + price, with a short supporting line
   of description beneath). Integrated with the Services section.
   --------------------------------------------------------------- */
.enhancements-block {
    max-width: 720px;
    margin: var(--space-lg) auto 0;
}
.enhancements-list {
    margin-top: var(--space-md);
}
.enhancement-row {
    padding: 1.85rem 0;
    border-bottom: 1px solid var(--jco-border);
    transition: padding-left 0.25s ease;
}
.enhancement-row:first-child {
    border-top: 1px solid var(--jco-border);
}
.enhancement-row:hover {
    padding-left: 0.4rem;
}
.enhancement-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
}
.enhancement-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 300;
    color: var(--jco-cream);
    letter-spacing: 0.01em;
}
.enhancement-price {
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--jco-muted);
    white-space: nowrap;
    padding-top: 0.3rem;
}
.enhancement-price .dollar {
    color: var(--jco-gold);
    font-weight: 600;
}
.enhancement-price .amount {
    color: var(--jco-cream);
    font-weight: 600;
    font-size: 1.4em;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-heading);
    margin-left: 0.05rem;
}
.enhancement-desc {
    margin-top: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--jco-muted);
    max-width: 52ch;
}
@media (min-width: 640px) {
    .enhancement-name {
        font-size: 1.3rem;
    }
    .enhancement-price {
        font-size: 0.78rem;
    }
}

/* Services section pricing note */
.services-note {
    max-width: 640px;
    margin: var(--space-lg) auto 0;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.7;
    color: var(--jco-muted);
    text-align: center;
}


/* Custom Wig Design intro copy */
.wig-intro-text { max-width: 640px; margin-top: 1rem; color: var(--jco-warm); font-size: var(--text-base); line-height: 1.7; }


/* ------------------------------------------------------------------
   BEFORE YOU VISIT + FAQ
------------------------------------------------------------------ */
.visit-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .visit-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (min-width: 1024px) {
    .visit-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.visit-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--jco-bg);
    padding: 2rem;
    min-height: 220px;
    text-decoration: none;
    color: inherit;
    transition: background 0.5s ease;
}
.visit-card:hover { background: var(--jco-bg-light); }
.visit-card .num {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--jco-muted);
    margin-bottom: 1rem;
}
.visit-card h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--jco-cream);
    margin-bottom: 0.75rem;
}
.visit-card .desc {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(196, 181, 160, 0.8);
}
.visit-card .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--jco-border);
}
.visit-card .cta {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jco-gold);
}
.visit-card .arrow {
    color: var(--jco-gold);
    transition: transform 0.3s ease;
}
.visit-card:hover .arrow { transform: translateX(4px); }

.faq-list {
    max-width: 760px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid var(--jco-border);
}
.faq-item:first-child { border-top: 1px solid var(--jco-border); }
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 300;
    color: var(--jco-cream);
    transition: color 0.3s ease;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: var(--jco-gold); }
.faq-icon {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--jco-gold);
    transition: transform 0.3s ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer {
    padding: 0 0 1.5rem;
    max-width: 640px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--jco-warm);
}
.faq-answer p { margin: 0; }
@media (min-width: 640px) {
    .faq-question { padding: 1.6rem 0; font-size: 1.15rem; }
    .faq-answer { font-size: 14.5px; }
}


/* ------------------------------------------------------------------
   PRICING CATEGORY BACKGROUND VIDEO (Signature Enhancements)
------------------------------------------------------------------ */
.pricing-category.has-bg-video {
    position: relative;
    isolation: isolate;
    padding: 1.5rem;
    margin: -1.5rem;
}
.pricing-category.has-bg-video > *:not(.category-bg-video):not(.category-bg-overlay) {
    position: relative;
    z-index: 2;
}
.category-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.16;
    z-index: 0;
    pointer-events: none;
}
.category-bg-overlay {
    position: absolute;
    inset: 0;
    background: var(--jco-bg);
    opacity: 0.35;
    z-index: 1;
    pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════
   MOBILE APP-STYLE BOTTOM NAVIGATION
   Fixed bottom bar, mobile only. Hidden on desktop (>=768px).
═══════════════════════════════════════════════════════════════════ */
.bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    background: rgba(26, 23, 20, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(212, 175, 55, 0.18);
    padding: 0.3rem 0.35rem calc(0.3rem + env(safe-area-inset-bottom));
    justify-content: space-between;
    align-items: stretch;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
}
.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.4rem 0.15rem 0.3rem;
    color: var(--jco-muted);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, transform 0.15s ease;
}
.bottom-nav-item:active {
    transform: scale(0.9);
}
.bottom-nav-icon {
    display: block;
    line-height: 0;
}
.bottom-nav-icon svg {
    width: 21px;
    height: 21px;
    display: block;
    margin: 0 auto;
}
.bottom-nav-label {
    font-size: 9.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.bottom-nav-item:hover,
.bottom-nav-item:focus-visible {
    color: var(--jco-cream);
}
.bottom-nav-book {
    position: relative;
    margin: 0 0.15rem;
}
.bottom-nav-book::before {
    content: '';
    position: absolute;
    inset: 0 2px;
    border-radius: 999px;
    background: var(--jco-gold);
    z-index: 0;
}
.bottom-nav-book .bottom-nav-icon,
.bottom-nav-book .bottom-nav-label {
    position: relative;
    z-index: 1;
    color: #1a1714;
}
.bottom-nav-book:active::before {
    transform: scale(0.94);
}

body {
    padding-bottom: 68px;
}

@media (min-width: 768px) {
    .bottom-nav {
        display: none;
    }
    body {
        padding-bottom: 0;
    }
}


/* Keep the cookie-consent widget clear of the new mobile bottom nav */
@media (max-width: 767px) {
    .cookieadmin_re_consent {
        bottom: 78px !important;
    }
}


/* ==========================================================================
   PHASE 1B: HOMEPAGE MOBILE VISUAL REWORK
   Mobile-only. Desktop (768px+) is completely unaffected by this block.
   ========================================================================== */

/* More breathing room between sections on small screens */
@media (max-width: 767px) {
    .section { padding-top: 4rem; padding-bottom: 4rem; }
}

/* Slightly taller / more prominent salon image on mobile */
@media (max-width: 767px) {
    .philosophy-img-card { aspect-ratio: 4 / 5; }
}

/* Craft videos hide their description behind :hover, which never fires on
   touch devices — on mobile, tap the video once to reveal it (JS toggles
   .is-active), tap again (or the visit-services link) to follow through. */
@media (max-width: 767px) {
    .craft-item.is-active .craft-desc { opacity: 1; visibility: visible; }
}

/* ---- Mobile grouped service cards (tap to expand) ---- */
.mobile-service-cards { display: grid; grid-template-columns: 1fr; gap: 0.85rem; margin-top: 2.5rem; }
@media (min-width: 768px) { .mobile-service-cards { display: none; } }
@media (max-width: 767px) {
    .investment-block, .enhancements-block { display: none; }
}

.msc-card { background: var(--jco-bg-light); border: 1px solid var(--jco-border); border-radius: 14px; overflow: hidden; }
.msc-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.3rem; background: none; border: none; color: var(--jco-cream);
    font-family: var(--font-heading); font-size: 1.15rem; letter-spacing: 0.01em;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.msc-caret { color: var(--jco-gold); font-size: 0.75rem; transition: transform 0.3s ease; flex-shrink: 0; margin-left: 1rem; }
.msc-trigger[aria-expanded="true"] .msc-caret { transform: rotate(180deg); }
.msc-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; padding: 0 1.3rem; }
.msc-panel.is-open { max-height: 700px; padding-bottom: 1.15rem; }
.msc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 0; border-top: 1px solid var(--jco-border); font-family: var(--font-body); }
.msc-row:first-child { border-top: none; }
.msc-row-label { color: var(--jco-warm); font-size: 0.92rem; }
.msc-row-price { color: var(--jco-cream); font-weight: 600; white-space: nowrap; }
.msc-row-price .dollar { color: var(--jco-gold); font-weight: 600; font-size: 0.8em; }
.msc-panel p { font-size: 0.9rem; line-height: 1.6; color: var(--jco-warm); padding-top: 1rem; margin: 0; }
.msc-panel .btn { margin: 0.9rem 0 0.25rem; display: inline-block; }


/* ==========================================================================
   PHASE 2: STYLIST CARDS — MOBILE TAP-TO-EXPAND ACTION PANEL
   Desktop unaffected: .stylist-card-link keeps the exact same click-through
   behavior as the old single <a>, and .stylist-card-actions never renders
   above 768px.
   ========================================================================== */
.stylist-card-link { display: block; text-decoration: none; }

.stylist-card-actions {
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    transition: max-height 0.35s ease, margin-top 0.35s ease;
    margin-top: 0;
}
.stylist-card.is-active .stylist-card-actions { max-height: 220px; margin-top: 0.9rem; }
@media (min-width: 768px) { .stylist-card-actions { display: none; } }

.sc-action-btn {
    flex: 1 1 calc(50% - 0.25rem);
    text-align: center;
    padding: 0.6rem 0.5rem;
    border: 1px solid var(--jco-border);
    border-radius: 10px;
    color: var(--jco-cream);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.sc-action-btn:active { background: rgba(200, 149, 108, 0.12); }
.sc-action-book { background: var(--jco-gold); border-color: var(--jco-gold); color: var(--jco-dark); font-weight: 600; }


/* ==========================================================================
   PHASE 2: SWIPEABLE PORTFOLIO (mobile)
   Desktop's .gallery-grid / .lightbox are completely unchanged above 768px.
   ========================================================================== */
@media (max-width: 767px) {
    .gallery-grid {
        display: flex;
        gap: 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
    }
    .gallery-grid::-webkit-scrollbar { display: none; }
    .gallery-grid .gallery-item { flex: 0 0 78%; scroll-snap-align: center; }
    .gallery-grid .gallery-item img { aspect-ratio: 4 / 5; }

    /* Portfolio images have no :hover on touch — show the plus affordance always,
       faintly, so it reads as tappable. */
    .gallery-grid .gallery-item .overlay { background: rgba(15,13,11,0.12); }
    .gallery-grid .gallery-item .plus { opacity: 0.85; }
}

/* Mobile lightbox swipe UI (only ever rendered when JS detects a touch
   viewport; desktop's plain .lightbox markup never gets these classes). */
.lightbox-swipe .lb-prev,
.lightbox-swipe .lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--jco-cream);
    font-size: 1.6rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.lightbox-swipe .lb-prev { left: 0.75rem; }
.lightbox-swipe .lb-next { right: 0.75rem; }
.lightbox-swipe .lb-count {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--jco-warm);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}


/* ==========================================================================
   PHASE 2: DEPOSIT & CANCELLATION POLICY — MOBILE SLIDE-UP PANELS
   Desktop (768px+): .policy-trigger is hidden and .policy-panel is forced
   fully visible, so the deposit paragraph reads exactly as plain text like
   before, and the Cancellation Policy link navigates normally.
   ========================================================================== */
.pricing-policies { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.85rem; }

.policy-trigger {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: 1px solid var(--jco-border);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    color: var(--jco-cream);
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.policy-caret { color: var(--jco-gold); transition: transform 0.3s ease; }
.policy-trigger[aria-expanded="true"] .policy-caret { transform: rotate(180deg); }
.policy-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.policy-panel.is-open { max-height: 300px; padding: 0.9rem 0.2rem 0.2rem; }
.policy-panel .deposit-note { font-size: 0.88rem; line-height: 1.65; color: var(--jco-warm); margin: 0; }

@media (min-width: 768px) {
    .policy-trigger { display: none; }
    .policy-panel { max-height: none; overflow: visible; }
    .policy-panel.is-open { padding: 0; }
    .policy-panel .deposit-note { font-size: 0.95rem; }
}

/* Mobile-only slide-up sheet for the Cancellation Policy (built by JS; never
   created on desktop clicks, since the trigger there just navigates). */
.policy-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; }
.policy-sheet-backdrop { position: absolute; inset: 0; background: rgba(15, 13, 11, 0.72); }
.policy-sheet-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: 82vh;
    overflow-y: auto;
    background: var(--jco-bg-light);
    border-radius: 20px 20px 0 0;
    padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    animation: jcoPolicySheetUp 0.3s ease;
}
@keyframes jcoPolicySheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.policy-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--jco-cream);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--jco-border);
}
.policy-sheet-close { background: none; border: none; color: var(--jco-cream); font-size: 1.2rem; cursor: pointer; line-height: 1; }
.policy-sheet-body { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.7; color: var(--jco-warm); }
.policy-sheet-body p { margin: 0 0 1rem; }
.policy-sheet-loading { opacity: 0.7; }


/* ==========================================================================
   PHASE 3: APP-STYLE FOOTER ACTION GRID (mobile)
   Purely additive — sits under the footer tagline, mobile-only. Desktop
   (768px+) never renders it; the existing footer columns are untouched.
   ========================================================================== */
.footer-app-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-top: 1.75rem;
}
@media (min-width: 768px) { .footer-app-actions { display: none; } }

.fa-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.9rem 0.4rem;
    background: var(--jco-bg-light);
    border: 1px solid var(--jco-border);
    border-radius: 14px;
    color: var(--jco-cream);
    text-decoration: none;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, background 0.2s ease;
}
.fa-action:active { transform: scale(0.94); background: rgba(200, 149, 108, 0.1); }
.fa-icon { display: block; line-height: 0; }
.fa-icon svg { width: 22px; height: 22px; display: block; margin: 0 auto; }
.fa-label { font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--jco-warm); }
.fa-action-primary { background: var(--jco-gold); border-color: var(--jco-gold); }
.fa-action-primary .fa-icon,
.fa-action-primary .fa-label { color: var(--jco-dark); }


/* ==========================================================================
   PHASE 3: CONCIERGE FLOATING BUTTON + PANEL (mobile, site-wide)
   Desktop (768px+) never shows the FAB or panel.
   ========================================================================== */
.concierge-fab {
    position: fixed;
    right: 1rem;
    bottom: calc(68px + env(safe-area-inset-bottom) + 0.85rem);
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--jco-gold);
    color: var(--jco-dark);
    border: none;
    border-radius: 999px;
    padding: 0.7rem 1rem 0.7rem 0.8rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
}
.concierge-fab:active { transform: scale(0.95); }
.concierge-fab-icon { display: block; line-height: 0; }
.concierge-fab-icon svg { width: 18px; height: 18px; display: block; }
@media (min-width: 768px) { .concierge-fab { display: none; } }

.concierge-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; }
.concierge-sheet[hidden] { display: none; }
.concierge-sheet-backdrop { position: absolute; inset: 0; background: rgba(15, 13, 11, 0.72); }
.concierge-sheet-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--jco-bg-light);
    border-radius: 20px 20px 0 0;
    padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    animation: jcoConciergeUp 0.3s ease;
}
@keyframes jcoConciergeUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.concierge-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--jco-cream);
    margin-bottom: 0.75rem;
}
.concierge-sheet-close { background: none; border: none; color: var(--jco-cream); font-size: 1.2rem; cursor: pointer; line-height: 1; }
.concierge-sheet-intro { font-family: var(--font-body); font-size: 0.88rem; line-height: 1.6; color: var(--jco-warm); margin: 0 0 1.25rem; }
.concierge-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.concierge-action {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--jco-border);
    border-radius: 12px;
    color: var(--jco-cream);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.9rem;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease;
}
.concierge-action:active { background: rgba(200, 149, 108, 0.12); }
.concierge-action-icon { flex-shrink: 0; color: var(--jco-gold); display: flex; }
.concierge-action-icon svg { width: 20px; height: 20px; }
.concierge-action-primary { background: var(--jco-gold); border-color: var(--jco-gold); color: var(--jco-dark); font-weight: 600; }
.concierge-action-primary .concierge-action-icon { color: var(--jco-dark); }

@media (min-width: 768px) {
    .concierge-fab { display: none; }
    .concierge-sheet { display: none !important; }
}


/* ==========================================================================
   PHASE 3: MOTION SYSTEM + BUTTON/CARD POLISH (mobile)
   Consistent shadow depth, press feedback, and easing across every new
   mobile-app-style component. Desktop is unaffected — these rules either
   only apply to elements that are themselves mobile-only, or add subtle
   shadow/easing refinements that don't change layout.
   ========================================================================== */

/* Shared "lifted card" shadow + consistent easing for the new touch UI */
.msc-card,
.fa-action,
.concierge-action,
.policy-trigger,
.sc-action-btn {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.msc-trigger { transition: transform 0.1s ease; }
.msc-card:active,
.fa-action:active,
.concierge-action:active,
.policy-trigger:active,
.sc-action-btn:active,
.msc-trigger:active {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.concierge-action-primary:active,
.sc-action-book:active,
.fa-action-primary:active {
    transform: scale(0.96);
}

/* Smoother, on-brand easing for slide-up panels and accordions */
.msc-panel,
.policy-panel,
.stylist-card-actions {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.policy-sheet-panel,
.concierge-sheet-panel {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Touch feedback for tap-to-reveal imagery (craft videos + portfolio),
   complementing their existing desktop :hover states */
@media (hover: none) {
    .craft-item:active img { transform: scale(1.03); }
    .gallery-item:active img { transform: scale(1.03); }
}
.craft-item img,
.gallery-item img {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Respect reduced-motion preferences across the new mobile interactions */
@media (prefers-reduced-motion: reduce) {
    .bottom-nav-item,
    .msc-card, .msc-trigger, .msc-panel,
    .stylist-card-actions, .sc-action-btn,
    .fa-action, .concierge-action, .concierge-fab,
    .policy-trigger, .policy-panel,
    .craft-item img, .gallery-item img,
    .policy-sheet-panel, .concierge-sheet-panel {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}