/* ==========================================================================
   FENIX HAIR CO. — 2026
   Modern surfaces, translucent panels, retro colour field behind everything.

   THE TWO RULES THAT KEEP THIS LEGIBLE
   1. Panels are 0.82 alpha, never lower. Measured worst case (white glass over
      saturated berry) gives 12.7:1 for --ink and 6.4:1 for --ink-soft. At 0.72
      the third text tier drops to 3.7:1 and fails AA — which is why the old
      0.40 glass looked washed out.
   2. One level of glass only. Cards *inside* a panel are solid, never
      translucent. Stacked transparency is what turned the previous build to mud.
   ========================================================================== */

:root {
    /* --- Retro pigments. Background artwork and solid accent panels only. --- */
    --moss:      #5A6A3C;
    --berry:     #B62B5B;
    --tangerine: #D97022;
    --clay:      #CAA25D;
    --tuscan:    #E8B025;

    --cream: #F7F2E8;

    /* --- Ink. Only these two are safe on glass. --- */
    --ink:      #1A1A1A;
    --ink-soft: #4F4A43;
    /* Solid surfaces only — fails AA over saturated backdrops. */
    --ink-faint: #6B6459;

    /* Interactive accent. White on this = 5.75:1. Raw --tangerine is 3.34:1
       and must never carry text. */
    --accent:       #A34E0F;
    --accent-hover: #8A4109;
    --accent-tint:  #FBF0E6;

    /* --- Glass --- */
    --glass:        rgba(255, 255, 255, .82);
    --glass-brd:    rgba(255, 255, 255, .55);
    --glass-blur:   blur(20px) saturate(180%);
    --header-glass: rgba(255, 255, 255, .72);

    --card:      #FFFFFF;
    --card-sunk: #FAF8F4;
    --line:      rgba(26, 26, 26, .09);
    --line-mid:  rgba(26, 26, 26, .16);

    --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
    --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4rem;
    --s9: 6rem;   --s10: 8rem;

    --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(26,26,26,.05), 0 2px 8px rgba(26,26,26,.04);
    --shadow-md: 0 2px 6px rgba(26,26,26,.05), 0 10px 30px rgba(26,26,26,.08);
    --shadow-lg: 0 4px 10px rgba(26,26,26,.06), 0 24px 60px rgba(26,26,26,.12);

    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --header-h: 68px;
    --ticker-h: 38px;

    --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================================
   RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--ticker-h) + var(--s5));
    -webkit-text-size-adjust: 100%;
}

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

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; top: 0; left: 50%;
    transform: translate(-50%, -200%);
    z-index: 10000;
    background: var(--ink); color: #fff;
    padding: var(--s3) var(--s5);
    border-radius: 0 0 var(--r-md) var(--r-md);
    font-weight: 600; text-decoration: none;
    transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ==========================================================================
   THE RETRO COLOUR FIELD
   One fixed layer. Not four stacked gradients — a single composition of
   sweeping bands echoing the salon's own hand-painted wall mural.
   ========================================================================== */

.bg-art {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-color: var(--cream);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='1440' height='1000' fill='%23F7F2E8'/%3E%3Cg fill='none' stroke-linecap='round' stroke-width='104'%3E%3Cpath stroke='%23E8B025' d='M-140 250C240 55 560 425 900 240S1360 55 1620 195'/%3E%3Cpath stroke='%23D97022' d='M-140 405C240 210 560 580 900 395S1360 210 1620 350'/%3E%3Cpath stroke='%23B62B5B' d='M-140 560C240 365 560 735 900 550S1360 365 1620 505'/%3E%3Cpath stroke='%235A6A3C' d='M-140 715C240 520 560 890 900 705S1360 520 1620 660'/%3E%3Cpath stroke='%23CAA25D' d='M-140 870C240 675 560 1045 900 860S1360 675 1620 815'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Soft depth wash + a faint grain, so the flat SVG reads as a surface
   rather than clip art. */
.bg-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 70% 55% at 15% 0%,   rgba(255,255,255,.55), transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 100%, rgba(255,255,255,.35), transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
    background-size: auto, auto, 140px 140px;
    mix-blend-mode: soft-light;
    opacity: .9;
}

/* ==========================================================================
   TYPE
   ========================================================================== */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
    text-wrap: balance;
}

/* Modern emphasis: weight and colour, no serif italic flourish. */
.accent-word { color: var(--accent); }

.section-title { font-size: clamp(2rem, 4.6vw, 3.1rem); }

.section-lede {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    color: var(--ink-soft);
    max-width: 56ch;
    margin-top: var(--s5);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--s4);
}
.eyebrow::before {
    content: "";
    width: 20px; height: 2px;
    background: var(--tangerine);
    border-radius: 2px;
}
.eyebrow-on-dark { color: rgba(255,255,255,.9); }
.eyebrow-on-dark::before { background: var(--tuscan); }

/* ==========================================================================
   LAYOUT — every section is a floating glass panel
   ========================================================================== */

/* The inline inset is what lets the colour field show down both edges. Without
   it panels run edge-to-edge on phones and the background disappears entirely. */
.section { padding: var(--s5) clamp(.75rem, 3vw, 2rem); }
.section:first-of-type { padding-top: 0; }

/* .wrap doubles as the panel so the markup stays flat. */
.wrap {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding: clamp(var(--s6), 5vw, var(--s8)) clamp(var(--s5), 4vw, var(--s7));
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-brd);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 1;
}

/* Where a panel would fight the content it holds. */
.wrap--bare {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    padding-inline: clamp(var(--s5), 4vw, var(--s7));
}

/* Legacy hook from the previous build — the global colour field now supplies
   all the rhythm, so alternating bands are a no-op. */
.section--band { background: none; }
.section--tight { padding-block: var(--s5); }

/* Phones: cheaper compositing and a denser surface, since small screens are
   both slower and harder to read on. */
@media (max-width: 700px) {
    :root { --glass: rgba(255,255,255,.9); --glass-blur: blur(12px) saturate(150%); }
}

/* No backdrop-filter (older Firefox, some Android WebViews): go nearly opaque
   rather than leaving text over raw colour. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root { --glass: rgba(255,255,255,.95); --header-glass: rgba(255,255,255,.96); }
}

.section-head { margin-bottom: var(--s7); max-width: 70ch; }
.section-head--split { max-width: none; display: grid; gap: var(--s5); align-items: end; }
@media (min-width: 900px) {
    .section-head--split { grid-template-columns: 1fr 1fr; gap: var(--s8); }
    .section-head--split .section-lede { margin-top: 0; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: .85rem 1.5rem;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: .94rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s var(--ease), color .2s var(--ease),
                border-color .2s var(--ease), transform .2s var(--ease),
                box-shadow .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); }

.btn--outline {
    background: rgba(255,255,255,.5);
    color: var(--ink);
    border: 1.5px solid var(--line-mid);
}
.btn--outline:hover { border-color: var(--accent); color: var(--accent); background: #fff; }

.btn--ghost-light {
    background: rgba(255,255,255,.16);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.5);
}
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--sm { padding: .55rem 1rem; font-size: .85rem; }

/* ==========================================================================
   TICKER — dark glass
   ========================================================================== */

.ticker {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--ticker-h);
    z-index: 1100;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: rgba(20, 19, 17, .88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
}

.ticker-track {
    display: flex;
    white-space: nowrap;
    will-change: transform;
    animation: ticker 48s linear infinite;
}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track { animation-play-state: paused; }

@keyframes ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ticker-group { display: flex; align-items: center; flex-shrink: 0; }

.news-item {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    padding-right: var(--s9);
    font-size: .8rem;
    color: rgba(255,255,255,.85);
}
.news-item a { color: var(--tuscan); font-weight: 600; text-decoration: none; }
.news-item a:hover { text-decoration: underline; }
.news-item em { color: var(--tuscan); font-style: normal; font-weight: 600; }

.news-badge {
    flex-shrink: 0;
    background: var(--tangerine);
    color: #fff;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .09em;
}
.news-badge.promo { background: var(--berry); }
.news-badge.news  { background: var(--moss); }

@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
    .ticker { overflow-x: auto; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
    position: fixed;
    top: var(--ticker-h);
    left: 0; right: 0;
    z-index: 1000;
    height: var(--header-h);
    background: var(--header-glass);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-header.is-stuck {
    border-bottom-color: var(--line);
    box-shadow: 0 4px 24px rgba(26,26,26,.08);
    background: rgba(255,255,255,.86);
}

/* The header bar is its own surface — cancel the panel styling .wrap carries. */
.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--s5);
    padding-block: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    text-decoration: none;
    color: var(--ink);
    flex-shrink: 0;
    margin-right: auto;
}
.brand img { width: 32px; height: auto; }
.brand-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -.02em;
    line-height: 1;
}
.brand-sub {
    display: block;
    font-size: .57rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 3px;
}

.nav-list { display: flex; align-items: center; gap: var(--s1); }

/* Booking is the point of the site: the CTA stays in the header at every
   width, never behind the hamburger. The in-menu copy is always hidden. */
.nav-list .btn { display: none; }

.nav-link {
    position: relative;
    display: block;
    padding: .5rem .8rem;
    border-radius: var(--r-sm);
    font-size: .92rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-link:hover { color: var(--ink); background: rgba(26,26,26,.05); }

.nav-link::after {
    content: "";
    position: absolute;
    left: .8rem; right: .8rem; bottom: .28rem;
    height: 2px;
    border-radius: 2px;
    background: var(--tangerine);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--ease);
}
.nav-link.is-active { color: var(--ink); font-weight: 600; }
.nav-link.is-active::after { transform: scaleX(1); }

.nav-cta { flex-shrink: 0; }

.nav-toggle {
    display: none;
    width: 42px; height: 42px;
    border-radius: var(--r-sm);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nav-toggle:hover { background: rgba(26,26,26,.05); }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: background .2s var(--ease); }
.nav-toggle span::before,
.nav-toggle span::after {
    content: "";
    position: absolute; left: 0;
    width: 20px; height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .25s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

[aria-expanded="true"].nav-toggle span { background: transparent; }
[aria-expanded="true"].nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"].nav-toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
    .nav-toggle { display: flex; }
    .nav-cta.btn { padding: .58rem 1rem; font-size: .85rem; }

    .site-nav {
        position: fixed;
        top: calc(var(--ticker-h) + var(--header-h));
        left: 0; right: 0;
        background: rgba(255,255,255,.95);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        padding: var(--s4) var(--s5) var(--s6);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        /* visibility switches instantly rather than interpolating, so menu
           links are focusable the moment .is-open lands. */
        transition: opacity .2s var(--ease), transform .2s var(--ease),
                    visibility 0s linear .2s;
        max-height: calc(100dvh - var(--ticker-h) - var(--header-h));
        overflow-y: auto;
    }
    .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity .2s var(--ease), transform .2s var(--ease),
                    visibility 0s linear 0s;
    }

    .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-link {
        padding: var(--s4) var(--s2);
        font-size: 1.05rem;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
    }
    .nav-link::after { display: none; }
    .nav-link.is-active { color: var(--accent); }
}

@media (max-width: 430px) {
    .brand img { width: 27px; }
    .brand-name { font-size: .94rem; }
    .brand-sub { display: none; }
    .header-inner { gap: var(--s3); }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero { padding-top: calc(var(--ticker-h) + var(--header-h) + var(--s6)); }

.hero-grid { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 900px) {
    .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--s8); }
}

/* Logo sits in normal flow above the headline — it cannot collide with it. */
.hero-logo { width: clamp(130px, 15vw, 180px); margin-bottom: var(--s5); }

/* Floor is set by the longest word ("revamped,") at 375px, not by taste. */
.hero-title {
    font-size: clamp(2rem, 7.6vw, 4.1rem);
    line-height: 1.02;
    overflow-wrap: break-word;
}
.hero-title .line { display: block; }

.hero-lede {
    font-size: clamp(1rem, 1.45vw, 1.12rem);
    color: var(--ink-soft);
    max-width: 46ch;
    margin-top: var(--s5);
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s6); }
.hero-note { font-size: .88rem; color: var(--ink-soft); margin-top: var(--s5); }

.hero-media {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4 / 5;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-figure { position: relative; }

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s5) var(--s7);
    margin-top: var(--s7);
    padding-top: var(--s6);
    border-top: 1px solid var(--line-mid);
}
.hero-stat .n {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ink);
}
.hero-stat .l {
    display: block;
    font-size: .76rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: var(--s2);
}

/* ==========================================================================
   SUBPAGE HERO (services / gallery / careers)
   ========================================================================== */

/* Same header clearance the home hero gets. Needs .section.page-hero rather
   than .page-hero alone, or `.section:first-of-type { padding-top: 0 }` wins
   on specificity and the heading hides under the fixed header. */
.section.page-hero { padding-top: calc(var(--ticker-h) + var(--header-h) + var(--s6)); }

.page-title {
    font-size: clamp(2rem, 5.6vw, 3.4rem);
    line-height: 1.04;
    overflow-wrap: break-word;
    margin-bottom: var(--s4);
}
.page-hero .section-lede { margin-top: 0; }

.page-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
    margin-top: var(--s6);
}

/* ==========================================================================
   SERVICE MENU / CAREERS CARDS
   ========================================================================== */

.menu-grid { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .menu-grid { grid-template-columns: repeat(2, 1fr); align-items: start; } }

.menu-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(var(--s5), 3vw, var(--s6));
}

.menu-card-title {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    margin-bottom: var(--s5);
    padding-bottom: var(--s4);
    border-bottom: 1px solid var(--line);
}

/* --- Menu sectioning (hair vs nails) --- */
.menu-jump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    margin-bottom: var(--s7);
}

.menu-section + .menu-section { margin-top: var(--s8); }

.menu-section-head {
    display: flex;
    align-items: baseline;
    gap: var(--s4);
    margin-bottom: var(--s5);
    padding-bottom: var(--s3);
    border-bottom: 2px solid var(--tangerine);
}
.menu-section-head h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.menu-section-head .count {
    margin-left: auto;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* Explanatory note above a group of prices. */
.menu-note {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--clay);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    padding: var(--s5);
    margin-bottom: var(--s5);
}
.menu-note h3 { font-size: 1rem; margin-bottom: var(--s3); }
.menu-note dl { display: grid; gap: var(--s3); }
.menu-note dt {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}
.menu-note dd { font-size: .89rem; color: var(--ink-soft); }
@media (min-width: 700px) {
    .menu-note dl { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
}

/* Promotional callout. */
.special-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3) var(--s5);
    background: var(--moss);
    color: #fff;
    border-radius: var(--r-md);
    padding: var(--s4) var(--s5);
    margin-bottom: var(--s5);
}
.special-banner .tag {
    flex-shrink: 0;
    background: var(--tuscan);
    color: var(--ink);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: var(--r-pill);
}
.special-banner p { font-size: .95rem; }
.special-banner strong { color: var(--tuscan); }

/* --- Length x level price grid --------------------------------------------
   Genuinely tabular data, so it uses a real <table> with scope-d headers
   rather than divs — screen readers announce "Long, Level 2, $125". */
.price-matrix {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--s2);
}
.price-matrix caption {
    text-align: left;
    font-size: .84rem;
    color: var(--ink-soft);
    margin-bottom: var(--s3);
}
.price-matrix th,
.price-matrix td {
    padding: .65rem .4rem;
    text-align: right;
}
.price-matrix thead th:first-child,
.price-matrix tbody th { text-align: left; }

.price-matrix thead th {
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line-mid);
}
.price-matrix tbody th {
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink);
}
.price-matrix tbody td {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}
.price-matrix tbody tr + tr th,
.price-matrix tbody tr + tr td { border-top: 1px solid var(--line); }

@media (max-width: 420px) {
    .price-matrix th, .price-matrix td { padding: .55rem .25rem; font-size: .88rem; }
    .price-matrix thead th { font-size: .6rem; letter-spacing: .06em; }
}

.careers-grid { display: grid; gap: var(--s5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .careers-grid { grid-template-columns: 1.1fr 1fr; } }
.careers-side { display: flex; flex-direction: column; gap: var(--s5); }

.role-list { display: flex; flex-direction: column; gap: var(--s5); }
.role-list li { display: flex; gap: var(--s4); align-items: flex-start; }
.role-mark {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent);
    display: grid;
    place-items: center;
    margin-top: 2px;
}
.role-mark svg { width: 14px; height: 14px; }
.role-name { font-size: 1.02rem; font-weight: 700; }
.role-note { font-size: .89rem; color: var(--ink-soft); margin-top: 2px; }

.perk-list { display: flex; flex-direction: column; gap: var(--s4); }
.perk-list li { display: flex; gap: var(--s4); align-items: center; font-size: .96rem; }
.perk-ico {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent);
    display: grid;
    place-items: center;
}
.perk-ico svg { width: 16px; height: 16px; }

.apply-intro { font-size: .94rem; color: var(--ink-soft); margin-bottom: var(--s3); }
.req-list { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); }
.req-list li {
    position: relative;
    padding-left: var(--s5);
    font-size: .94rem;
    font-weight: 500;
}
.req-list li::before {
    content: "";
    position: absolute;
    left: 0; top: .6em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--tangerine);
}
.apply-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ==========================================================================
   MASONRY GALLERY (gallery.php)
   Columns preserve each photo's own aspect ratio instead of cropping to a grid.
   ========================================================================== */

.masonry { columns: 1; column-gap: var(--s4); }
@media (min-width: 560px)  { .masonry { columns: 2; } }
@media (min-width: 900px)  { .masonry { columns: 3; } }
@media (min-width: 1240px) { .masonry { columns: 4; } }

.masonry-item {
    break-inside: avoid;
    margin: 0 0 var(--s4);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--card-sunk);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.masonry-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.masonry-item img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   SOLID CARDS — inside panels. Never translucent (rule 2).
   ========================================================================== */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.focus-grid { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .focus-grid { grid-template-columns: repeat(3, 1fr); } }

.focus-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.focus-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.focus-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.focus-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.focus-card:hover .focus-media img { transform: scale(1.04); }

.focus-num {
    position: absolute;
    top: var(--s4); left: var(--s4);
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .76rem;
    padding: .3rem .65rem;
    border-radius: var(--r-pill);
}

.focus-body { padding: var(--s5); display: flex; flex-direction: column; flex: 1; }
.focus-kicker {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--moss);
    margin-bottom: var(--s2);
}
.focus-title { font-size: 1.35rem; margin-bottom: var(--s3); }
/* Always present — no hover-to-reveal, which touch devices cannot trigger. */
.focus-body p { color: var(--ink-soft); font-size: .93rem; }

/* ==========================================================================
   PRICING
   ========================================================================== */

.pricing-stack { display: flex; flex-direction: column; gap: var(--s3); }

.acc {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.acc:hover { border-color: var(--line-mid); }
.acc[open] { box-shadow: var(--shadow-md); }

.acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s5);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
}
.acc-head::-webkit-details-marker { display: none; }
.acc-head:hover { color: var(--accent); }

.acc-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    line-height: 1;
    transition: transform .3s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.acc[open] .acc-icon { transform: rotate(45deg); background: var(--accent); color: #fff; }

.acc-body { padding: 0 var(--s5) var(--s5); display: grid; gap: var(--s5) var(--s8); }
@media (min-width: 860px) { .acc-body { grid-template-columns: 1fr 1fr; } }

.price-list { display: flex; flex-direction: column; gap: var(--s5); }
.price-row { display: flex; align-items: baseline; gap: var(--s4); }
.price-name { font-weight: 600; font-size: .98rem; }
/* Modern: clean gap, no dot leaders. */
.price-dots { flex: 1; min-width: var(--s4); }
.price-value { font-family: var(--font-display); font-weight: 700; color: var(--accent); white-space: nowrap; }
.price-desc { color: var(--ink-soft); font-size: .87rem; margin-top: var(--s1); max-width: 52ch; }

.disclaimer { margin-top: var(--s6); font-size: .84rem; color: var(--ink-soft); }

/* ==========================================================================
   TEAM
   ========================================================================== */

.team-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px)  { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }

/* Names are ALWAYS visible — the previous build hid them behind :hover, which
   does not exist on touch. */
.team-card {
    background: var(--card);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.team-photo { aspect-ratio: 3 / 4; overflow: hidden; background: var(--card-sunk); }
.team-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 22%;
    transition: transform .6s var(--ease);
}
.team-card:hover .team-photo img { transform: scale(1.04); }

.team-info { padding: var(--s4); text-align: center; }
.team-name { font-size: 1.08rem; margin-bottom: 2px; color: var(--ink); }
.team-role {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ==========================================================================
   GALLERY
   ========================================================================== */

.gallery-scroller {
    display: flex;
    gap: var(--s4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--s4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) rgba(255,255,255,.5);
}
.gallery-scroller::-webkit-scrollbar { height: 8px; }
.gallery-scroller::-webkit-scrollbar-track { background: rgba(255,255,255,.5); border-radius: var(--r-pill); }
.gallery-scroller::-webkit-scrollbar-thumb { background: var(--accent); border-radius: var(--r-pill); }

.gallery-item {
    flex: 0 0 auto;
    width: clamp(190px, 42vw, 260px);
    aspect-ratio: 4 / 5;
    border-radius: var(--r-md);
    overflow: hidden;
    scroll-snap-align: start;
    box-shadow: var(--shadow-sm);
    background: var(--card-sunk);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }

.gallery-controls { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); }
.g-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--line-mid);
    display: grid;
    place-items: center;
    color: var(--ink);
    background: rgba(255,255,255,.6);
    transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.g-btn:hover { border-color: var(--accent); color: var(--accent); background: #fff; }
.g-btn svg { width: 18px; height: 18px; }
.g-more { margin-left: var(--s2); }
.g-hint { font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); margin-left: auto; }
@media (max-width: 560px) { .g-hint { display: none; } }

/* "See everything" link out of a home-page teaser section. */
.section-more { margin-top: var(--s6); }

/* ==========================================================================
   SOCIAL
   ========================================================================== */

.social-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .social-grid { grid-template-columns: repeat(4, 1fr); } }

.social-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s7);
    min-height: 160px;
    padding: var(--s5);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.social-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.social-card svg { width: 28px; height: 28px; }
.social-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.social-arrow { transition: transform .3s var(--ease); }
.social-card:hover .social-arrow { transform: translateX(5px); }
.social-foot { display: flex; align-items: center; justify-content: space-between; }

.social-card.fb { background: var(--moss); }
.social-card.ig { background: var(--berry); }
.social-card.tk { background: var(--ink); }
.social-card.go { background: var(--tangerine); }

/* ==========================================================================
   EMBEDS
   ========================================================================== */

.embed-frame {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s5);
    box-shadow: var(--shadow-sm);
    /* Small on purpose: a blocked or failed third-party widget should collapse
       quietly rather than leave a tall empty box. */
    min-height: 80px;
}

.embed-fallback { margin-top: var(--s4); text-align: center; font-size: .9rem; }
.embed-fallback a {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.embed-fallback a:hover { text-decoration: underline; }
.embed-fallback svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.embed-fallback a:hover svg { transform: translateX(3px); }

/* ==========================================================================
   VISIT
   ========================================================================== */

.visit-grid { display: grid; gap: var(--s5); }
@media (min-width: 960px) { .visit-grid { grid-template-columns: 1.35fr 1fr; } }

.map-card {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    min-height: 380px;
    border: 1px solid var(--line);
    background: var(--card-sunk);
}
.map-card iframe { width: 100%; height: 100%; min-height: 380px; border: 0; }

.visit-aside { display: flex; flex-direction: column; gap: var(--s5); }
.info-card { padding: var(--s6); }
.info-card h3 { font-size: 1.15rem; margin-bottom: var(--s5); }

.hours { display: flex; flex-direction: column; gap: var(--s3); }
.hours li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s4);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--line);
    font-size: .93rem;
}
.hours li:last-child { border-bottom: 0; padding-bottom: 0; }
.hours .day { color: var(--ink-soft); }
.hours .time { font-weight: 600; white-space: nowrap; }
.hours .by-appt .time { color: var(--accent); }

.contact-rows { display: flex; flex-direction: column; gap: var(--s5); }
.contact-row { display: flex; gap: var(--s4); align-items: flex-start; }
.contact-ico {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent);
    display: grid;
    place-items: center;
}
.contact-ico svg { width: 16px; height: 16px; }
.contact-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 3px;
}
.contact-row a { color: var(--ink); text-decoration: none; font-weight: 600; }
.contact-row a:hover { color: var(--accent); text-decoration: underline; }
.contact-row p { font-size: .94rem; }

/* ==========================================================================
   CAREERS — a solid colour panel, deliberate contrast against all the glass
   ========================================================================== */

.careers-banner,
.cta-banner {
    position: relative;
    background: var(--berry);
    color: #fff;
    border-radius: var(--r-xl);
    padding: clamp(var(--s6), 5vw, var(--s8));
    overflow: hidden;
    display: grid;
    gap: var(--s5);
    align-items: center;
    box-shadow: var(--shadow-md);
}
@media (min-width: 860px) {
    .careers-banner, .cta-banner { grid-template-columns: 1.3fr auto; gap: var(--s8); }
}
.careers-banner h2,
.cta-banner h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.careers-banner .accent-word,
.cta-banner .accent-word { color: var(--tuscan); }
.careers-banner p,
.cta-banner p { color: rgba(255,255,255,.88); margin-top: var(--s4); max-width: 52ch; }
.careers-banner::before,
.cta-banner::before {
    content: "";
    position: absolute;
    right: -80px; top: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    pointer-events: none;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    background: rgba(20, 19, 17, .9);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: rgba(255,255,255,.75);
    padding-block: var(--s8) var(--s6);
    margin-top: var(--s5);
}
.site-footer .wrap {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    padding-block: 0;
}

.footer-grid {
    display: grid;
    gap: var(--s7);
    padding-bottom: var(--s7);
    border-bottom: 1px solid rgba(255,255,255,.13);
}
@media (min-width: 760px)  { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }

.footer-logo { width: 140px; margin-bottom: var(--s5); }
.footer-blurb { font-size: .91rem; max-width: 34ch; }

.footer-h {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: var(--s4);
}
.footer-links { display: flex; flex-direction: column; gap: var(--s3); }
.footer-links a { color: rgba(255,255,255,.75); text-decoration: none; font-size: .91rem; transition: color .2s var(--ease); }
.footer-links a:hover { color: var(--tuscan); }

.footer-socials { display: flex; gap: var(--s3); margin-top: var(--s5); }
.f-social {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22);
    display: grid;
    place-items: center;
    color: #fff;
    transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.f-social:hover { background: var(--tangerine); border-color: var(--tangerine); transform: translateY(-2px); }
.f-social svg { width: 16px; height: 16px; }

.footer-bottom {
    padding-top: var(--s5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3) var(--s5);
    align-items: center;
    justify-content: space-between;
    font-size: .81rem;
    color: rgba(255,255,255,.55);
}
.footer-bottom a { color: rgba(255,255,255,.75); }

/* ==========================================================================
   POLICY MODAL
   ========================================================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: var(--s4);
    background: rgba(20,19,17,.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    /* Zero-duration visibility switch: interpolating it leaves the computed
       value 'hidden' until frames tick, which silently breaks focus. */
    transition: opacity .25s var(--ease), visibility 0s linear .25s;
}
.modal.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s var(--ease), visibility 0s linear 0s;
}

.modal-panel {
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-brd);
    border-radius: var(--r-xl);
    width: min(760px, 100%);
    max-height: min(88dvh, 900px);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    transform: translateY(12px) scale(.98);
    transition: transform .28s var(--ease);
}
.modal.is-open .modal-panel { transform: translateY(0) scale(1); }

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s5);
    padding: var(--s6) var(--s6) var(--s5);
    border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: 1.55rem; }

.modal-close {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ink);
    transition: background .2s var(--ease);
}
.modal-close:hover { background: rgba(26,26,26,.07); }
.modal-close svg { width: 20px; height: 20px; }

.modal-body { overflow-y: auto; padding: var(--s5) var(--s6) var(--s6); }
.modal-intro {
    background: var(--accent-tint);
    border-left: 3px solid var(--tangerine);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: var(--s4);
    margin-bottom: var(--s5);
    font-size: .93rem;
}

.policy-acc {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: var(--s2);
    overflow: hidden;
}
.policy-acc[open] { border-color: var(--line-mid); }
.policy-head {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s4);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: .95rem;
}
.policy-head::-webkit-details-marker { display: none; }
.policy-head:hover { color: var(--accent); }
.policy-num { font-size: .67rem; font-weight: 700; letter-spacing: .09em; color: var(--ink-faint); flex-shrink: 0; min-width: 26px; }
.policy-plus { margin-left: auto; color: var(--accent); font-size: 1.15rem; transition: transform .25s var(--ease); }
.policy-acc[open] .policy-plus { transform: rotate(45deg); }
.policy-body { padding: 0 var(--s4) var(--s4) calc(var(--s4) + 26px + var(--s4)); }
.policy-body p { font-size: .88rem; color: var(--ink-soft); margin-bottom: var(--s3); }
.policy-body p:last-child { margin-bottom: 0; }

.modal-foot { padding: var(--s5) var(--s6); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.policy-note { text-align: center; font-size: .78rem; color: var(--ink-faint); font-style: italic; margin-top: var(--s5); }

/* ==========================================================================
   SCROLL REVEAL
   Visible by default. Only JS-enabled, motion-tolerant browsers opt into the
   hidden start state, so a CDN failure can never blank the page.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .6s var(--ease), transform .6s var(--ease);
    }
    .js [data-reveal].is-visible { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
    .ticker, .site-header, .modal, .gallery-controls, .social-grid, .bg-art { display: none !important; }
    body { background: #fff; }
    .wrap { background: none; backdrop-filter: none; border: 0; box-shadow: none; }
    .acc-body { display: block !important; }
}