/* =========================================================================
   The 7S Saloon Mall — Global Stylesheet
   Design system, layout, components, responsive rules.

   Palette is derived directly from the brand mark:
   Bronze mid  #88694C   Bronze light #B98E64   Bronze deep #6D543E
   Ink         #0E0C0A   Bone         #FAF6F0
   ========================================================================= */

/* ── Design tokens ────────────────────────────────────────────────────── */
:root {
    /* Colour */
    --ink:        #0E0C0A;
    --ink-2:      #1A1613;
    --ink-3:      #2A2320;
    --bone:       #FAF6F0;
    --bone-2:     #F2ECE1;
    --bone-3:     #E7DECF;
    --bronze:     #88694C;
    --bronze-lt:  #B98E64;
    --bronze-dp:  #6D543E;
    --copper:     #A97142;
    --muted:      rgba(14, 12, 10, .62);
    --muted-2:    rgba(14, 12, 10, .48);
    --rule:       rgba(14, 12, 10, .10);
    --rule-hi:    rgba(14, 12, 10, .18);
    --muted-d:    rgba(250, 246, 240, .70);
    --rule-d:     rgba(250, 246, 240, .14);

    /* Elevation */
    --sh-1: 0 1px 2px rgba(14,12,10,.04), 0 6px 24px rgba(14,12,10,.06);
    --sh-2: 0 2px 6px rgba(14,12,10,.06), 0 18px 48px rgba(14,12,10,.10);
    --sh-3: 0 4px 14px rgba(14,12,10,.08), 0 30px 80px rgba(14,12,10,.16);

    /* Type */
    --f-display: "Fraunces", "Cormorant Garamond", ui-serif, Georgia, serif;
    --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Motion */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-io:  cubic-bezier(.4, 0, .2, 1);
    --dur-1:    180ms;
    --dur-2:    360ms;
    --dur-3:    560ms;

    /* Layout */
    --wrap: 1240px;
    --wrap-tight: 1080px;
    --gutter: clamp(20px, 4vw, 40px);
    --radius-sm: 6px;
    --radius:    14px;
    --radius-lg: 22px;

    /* Header height for scroll offsets */
    --hdr: 78px;
}

/* ── Reset & base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--hdr); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bone);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;       /* insurance against horizontal scroll */
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--bronze);
    outline-offset: 3px;
    border-radius: 3px;
}
:target { scroll-margin-top: calc(var(--hdr) + 16px); }

/* Selection */
::selection { background: var(--bronze); color: var(--bone); }

/* Skip link */
.skip { position: absolute; left: -9999px; top: 0; padding: 10px 14px; background: var(--ink); color: var(--bone); z-index: 999; }
.skip:focus { left: 12px; top: 12px; border-radius: 6px; }

/* Scroll-lock (mobile menu open) */
body.locked { overflow: hidden; }

/* ── Type scale ───────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; color: var(--ink); margin: 0 0 .5em; line-height: 1.08; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 6.5vw, 5.4rem); font-weight: 300; letter-spacing: -0.02em; }
h2 { font-size: clamp(2.0rem, 4.5vw, 3.4rem); font-weight: 300; letter-spacing: -0.015em; }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 400; }
h4 { font-size: 1.1rem; font-weight: 500; }
p  { margin: 0 0 1em; }
em { font-style: italic; color: var(--bronze); font-weight: 400; }

.eyebrow {
    font-family: var(--f-body);
    font-size: .75rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--bronze);
    margin: 0 0 22px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.eyebrow::before {
    content: "";
    display: inline-block;
    width: 30px; height: 1px;
    background: var(--bronze);
    opacity: .6;
}
.eyebrow.center { align-self: center; }
.section-sub {
    font-size: 1.05rem;
    color: var(--muted);
    max-width: 60ch;
    line-height: 1.7;
}
.section-sub.center { margin-left: auto; margin-right: auto; }

/* Signature curve — a hairline flourish that echoes the logo */
.signature {
    display: block;
    width: 220px;
    max-width: 50%;
    height: 24px;
    margin: 18px 0 28px;
    background: url("assets/logo/signature-curve.svg") center/contain no-repeat;
    opacity: .85;
}
.signature.center { margin-left: auto; margin-right: auto; }

/* ── Layout primitives ────────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.tight { max-width: var(--wrap-tight); }
.section { padding: clamp(80px, 12vw, 140px) 0; position: relative; }
.section-header { max-width: 62ch; margin-bottom: 56px; }
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Backgrounds */
.s-bone   { background: var(--bone); }
.s-bone-2 { background: var(--bone-2); }
.s-dark   { background: var(--ink); color: var(--bone); }
.s-dark h1, .s-dark h2, .s-dark h3, .s-dark h4 { color: var(--bone); }
.s-dark .section-sub { color: var(--muted-d); }
.s-dark .eyebrow { color: var(--bronze-lt); }
.s-dark .eyebrow::before { background: var(--bronze-lt); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    font-family: var(--f-body);
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 999px;
    transition: transform var(--dur-1) var(--ease-out),
                background-color var(--dur-1) var(--ease-out),
                color var(--dur-1) var(--ease-out),
                box-shadow var(--dur-1) var(--ease-out),
                border-color var(--dur-1) var(--ease-out);
    cursor: pointer;
    border: 1px solid transparent;
    text-align: center;
    white-space: nowrap;
    min-height: 48px;
}
.btn:hover, .btn:focus-visible { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink);
}
.btn-primary:hover, .btn-primary:focus-visible {
    background: var(--bronze-dp);
    border-color: var(--bronze-dp);
    box-shadow: var(--sh-2);
}
.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
    background: var(--ink);
    color: var(--bone);
}
.s-dark .btn-ghost { color: var(--bone); border-color: var(--bone); }
.s-dark .btn-ghost:hover, .s-dark .btn-ghost:focus-visible { background: var(--bone); color: var(--ink); }
.btn-bronze {
    background: var(--bronze);
    color: var(--bone);
    border-color: var(--bronze);
}
.btn-bronze:hover, .btn-bronze:focus-visible {
    background: var(--bronze-dp);
    border-color: var(--bronze-dp);
    box-shadow: var(--sh-2);
}
.btn .arrow { transition: transform var(--dur-1) var(--ease-out); font-size: 1.1em; }
.btn:hover .arrow, .btn:focus-visible .arrow { transform: translateX(4px); }

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--hdr);
    z-index: 60;
    background: rgba(250, 246, 240, .78);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    transition: background var(--dur-2) var(--ease-out),
                border-color var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out);
    border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
    background: rgba(250, 246, 240, .94);
    border-bottom-color: var(--rule);
    box-shadow: 0 1px 0 rgba(14,12,10,.02), 0 6px 20px rgba(14,12,10,.05);
}
.hdr-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    height: 100%;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
}
.brand {
    display: inline-flex;
    align-items: center;
    height: 100%;
}
.brand img { height: 52px; width: auto; }
.brand-name { position: absolute; left: -9999px; }         /* SR-only text label */

.nav-links {
    justify-self: center;
    display: flex;
    gap: 34px;
    list-style: none;
    margin: 0; padding: 0;
}
.nav-links a {
    font-size: .85rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink);
    position: relative;
    padding: 6px 0;
    transition: color var(--dur-1) var(--ease-out);
}
.nav-links a::after {
    content: "";
    position: absolute; left: 50%; bottom: 0;
    width: 0; height: 1px;
    background: var(--bronze);
    transition: width var(--dur-2) var(--ease-out), left var(--dur-2) var(--ease-out);
}
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a.active { color: var(--bronze-dp); }
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a.active::after { width: 100%; left: 0; }

.hdr-cta {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
}
.hdr-cta .btn { padding: 12px 22px; min-height: 44px; font-size: .78rem; }
.hdr-tel {
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--ink);
    display: inline-flex; align-items: center; gap: 8px;
}
.hdr-tel:hover, .hdr-tel:focus-visible { color: var(--bronze-dp); }
.hdr-tel svg { width: 16px; height: 16px; }

.menu-toggle {
    display: none;
    width: 44px; height: 44px;
    justify-self: end;
    align-items: center; justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--rule-hi);
    color: var(--ink);
}
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle:hover { background: var(--bone-2); }

/* Mobile drawer */
.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--bone);
    padding: calc(var(--hdr) + 20px) var(--gutter) 40px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-2) var(--ease-out),
                transform var(--dur-2) var(--ease-out),
                visibility 0s linear var(--dur-2);
    /* The body itself is scroll-locked while this is open (so the page
       behind it can't scroll), but the menu's own content still needs
       to scroll if it's taller than the screen — a short phone plus the
       full link list and both CTA buttons can exceed the viewport. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.mobile-nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}
.mobile-nav ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mobile-nav a {
    display: block;
    font-family: var(--f-display);
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: -0.01em;
    padding: 14px 0;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    transition: color var(--dur-1) var(--ease-out), padding-left var(--dur-1) var(--ease-out);
}
.mobile-nav a:hover, .mobile-nav a:focus-visible {
    color: var(--bronze-dp);
    padding-left: 8px;
}
.mobile-nav .m-cta {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* The mobile "Book an Appointment" CTA gets its own bronze fill so it
   never reads as a plain, low-contrast dark button, and is clearly
   the primary action in the menu. Slightly tighter type than the
   default .btn so the longer label never clips on narrow phones. */
.mobile-nav .m-cta .btn-primary {
    background: var(--bronze);
    border-color: var(--bronze);
    color: var(--bone);
    font-size: .74rem;
    letter-spacing: .1em;
    padding-left: 20px;
    padding-right: 20px;
}
.mobile-nav .m-cta .btn-primary:hover, .mobile-nav .m-cta .btn-primary:focus-visible {
    background: var(--bronze-dp);
    border-color: var(--bronze-dp);
}
/* While the mobile menu is open, hide the floating call/WhatsApp/chat
   stack so it can never sit on top of (or visually compete with) the
   menu's own CTA buttons. */
.mobile-nav.open ~ .fabs { display: none; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
    padding: calc(var(--hdr) + clamp(40px, 6vw, 80px)) 0 clamp(60px, 10vw, 110px);
    position: relative;
    background: var(--bone);
    overflow: hidden;
}
.hero-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: center;
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { margin: 8px 0 24px; }
.hero-copy h1 .accent {
    font-style: italic;
    font-weight: 300;
    background: linear-gradient(180deg, var(--bronze-lt) 0%, var(--bronze) 55%, var(--bronze-dp) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-sub {
    font-size: 1.1rem;
    color: var(--muted);
    max-width: 44ch;
    line-height: 1.7;
    margin-bottom: 36px;
}
.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero-visual {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: 620px;
}
.hero-visual .frame {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--sh-3);
    background: var(--bone-3);
}
.hero-visual .frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ease-out);
}
.hero-visual .frame-b {
    position: absolute;
    right: -24px; bottom: -30px;
    width: 55%;
    aspect-ratio: 3/4;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--sh-2);
    border: 6px solid var(--bone);
    background: var(--bone-2);
}
.hero-visual .frame-b img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual .badge {
    position: absolute;
    top: -18px; left: -18px;
    background: var(--ink);
    color: var(--bone);
    padding: 14px 20px;
    border-radius: 999px;
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--sh-2);
    z-index: 2;
}
.hero-visual .badge::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--bronze-lt);
}

/* Faint signature stroke behind the hero copy */
.hero::before {
    content: "";
    position: absolute;
    right: -80px; top: 10%;
    width: 60%; height: 80%;
    background: url("assets/logo/signature-curve.svg") right center/contain no-repeat;
    opacity: .04;
    pointer-events: none;
    z-index: 0;
}

/* ── About ────────────────────────────────────────────────────────────── */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}

/* ── Homepage compact "Our Story" preview (full story lives on its own
   page) ─────────────────────────────────────────────────────────────── */
.about-compact {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(28px, 4vw, 48px);
    align-items: center;
}
.about-compact-visual img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--sh-2);
}
.about-compact-copy h2 { margin: 6px 0 16px; }
.about-compact-copy p {
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 22px;
    max-width: 56ch;
}
@media (max-width: 640px) {
    .about-compact { grid-template-columns: 1fr; text-align: center; }
    .about-compact-visual img { max-width: 220px; margin: 0 auto; }
    .about-compact-copy p { margin-left: auto; margin-right: auto; }
}

/* ── Homepage compact "Academy" preview (full page at /academy) ────── */
.academy-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
.academy-compact-copy h2 { margin: 6px 0 16px; }
.academy-compact-copy p {
    color: var(--muted-d);
    line-height: 1.75;
    margin-bottom: 26px;
    max-width: 48ch;
}
.academy-compact-visual img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--sh-2);
    display: block;
}
@media (max-width: 860px) {
    .academy-compact { grid-template-columns: 1fr; text-align: center; }
    .academy-compact-copy p { margin-left: auto; margin-right: auto; }
    .academy-compact-visual { order: -1; max-width: 420px; margin: 0 auto; }
}

.about-copy h2 { margin-bottom: 24px; }
.about-copy .lead {
    font-family: var(--f-display);
    font-size: clamp(1.3rem, 2.2vw, 1.55rem);
    font-weight: 300;
    font-style: italic;
    color: var(--ink);
    line-height: 1.5;
    margin-bottom: 24px;
}
.about-copy p { color: var(--muted); font-size: 1.02rem; line-height: 1.75; }
.about-sig {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.about-sig-photo {
    width: 60px; height: 60px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 2px solid var(--bronze-lt);
    flex: none;
}
.about-sig .name {
    font-family: var(--f-display);
    font-size: 1.15rem;
    font-weight: 400;
}
.about-sig .role {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.5;
}
/* Recognition / awards strip */
.about-awards { margin-top: clamp(48px, 6vw, 80px); text-align: center; }
.about-awards-label {
    font-size: .72rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--bronze);
    font-weight: 500;
    margin-bottom: 28px;
}
.about-awards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2vw, 26px);
}
.award-card {
    margin: 0;
    background: var(--bone);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--sh-1);
}
.award-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.award-card figcaption {
    padding: 14px 16px;
    font-size: .78rem;
    color: var(--muted);
    letter-spacing: .02em;
}
@media (max-width: 700px) {
    .about-awards-row { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
}

/* ── Academy page — "Why train here" cards ─────────────────────────── */
.academy-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 24px);
    margin-top: 44px;
}
.guides-grid { grid-template-columns: repeat(3, 1fr); }
.academy-card {
    background: var(--bone);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: clamp(24px, 3vw, 32px) clamp(20px, 2.5vw, 26px);
    box-shadow: var(--sh-1);
    text-align: center;
}
.academy-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--bone-2);
    border: 1px solid var(--rule-hi);
    font-size: 1.4rem;
    margin-bottom: 18px;
}
.academy-card h3 {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: 1.15rem;
    margin-bottom: 10px;
    color: var(--ink);
}
.academy-card p {
    font-size: .88rem;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
}
@media (max-width: 900px) {
    .academy-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .academy-grid { grid-template-columns: 1fr; max-width: 380px; margin: 44px auto 0; }
}

.academy-form-full { grid-column: 1 / -1; }
.academy-form .book-submit {
    width: 100%;
    justify-content: center;
}
@media (max-width: 640px) {
    .academy-form { grid-template-columns: 1fr; }
}

.about-visual {
    aspect-ratio: 4/5;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--sh-2);
    background: var(--bone-3);
    position: relative;
}
.about-visual img { width: 100%; height: 100%; object-fit: cover; }
.about-visual .caption {
    position: absolute; left: 20px; bottom: 20px;
    background: rgba(14,12,10,.86);
    color: var(--bone);
    padding: 12px 18px;
    border-radius: 999px;
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

/* ── Services — signature marquee + categorised menu (ported pattern) ──
   Featured cards: continuous drag-marquee (createCarousel, shared with
   testimonials/instagram). Full menu: simple category tabs + a plain,
   scannable price list — proven to scale to a large real price list
   without any snap/expand slider complexity. ─────────────────────── */
.svc-header-center { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }

.svc-feat-shell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 44px;
}
.svc-feat-nav {
    flex: none;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--rule-hi);
    background: var(--bone);
    color: var(--bronze-dp);
    display: flex; align-items: center; justify-content: center;
    transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
    z-index: 2;
    touch-action: manipulation;
}
.svc-feat-nav:hover, .svc-feat-nav:focus-visible { border-color: var(--bronze); color: var(--ink); background: var(--bone-2); }
.svc-feat-nav svg { width: 20px; height: 20px; }
.svc-feat-shell .svc-featured { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
@media (max-width: 640px) {
    .svc-feat-shell { gap: 4px; }
    .svc-feat-nav { width: 38px; height: 38px; }
    .svc-feat-nav svg { width: 17px; height: 17px; }
}

.svc-featured {
    position: relative;
    overflow: hidden;
    cursor: grab;
    /* Let the browser handle vertical page scroll natively; horizontal
       drag gestures are owned by JS (see createCarousel's axis lock). */
    touch-action: pan-y;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.svc-featured.dragging { cursor: grabbing; }
.svc-feat-track { display: flex; gap: 20px; width: max-content; will-change: transform; }
.svc-feat-track .svc-feat { flex: 0 0 auto; width: clamp(232px, 23vw, 300px); }
.svc-feat {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-height: 270px;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: flex-end;
    color: var(--bone);
    box-shadow: var(--sh-1);
    isolation: isolate;
    user-select: none; -webkit-user-select: none;
}
.svc-feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 800ms var(--ease-out); pointer-events: none; -webkit-user-drag: none; }
.svc-feat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,12,10,.10) 0%, rgba(14,12,10,.30) 42%, rgba(14,12,10,.78) 68%, rgba(14,12,10,.94) 100%); }
.svc-feat:hover img { transform: scale(1.07); }
.svc-feat-in { padding: 22px; width: 100%; }
.svc-feat .tag { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--bronze-lt); margin-bottom: 9px; display: block; }
.svc-feat h3 {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.32rem;
    line-height: 1.22;
    margin-bottom: 8px;
    color: var(--bone);
    text-shadow: 0 1px 12px rgba(14,12,10,.55);
    /* Keep long service names to two lines so they can never overrun the
       card and collide with the tag above or the price below. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.svc-feat .p { font-size: .82rem; color: var(--muted-d); font-weight: 300; }
.svc-feat .p b { color: var(--bronze-lt); font-weight: 500; }

.section-cta.svc {
    display: flex;
    justify-content: center;
    margin: 32px 0 30px;
}

.svc-gender-toggle {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 28px;
}
.svc-gbtn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--f-body);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--muted);
    padding: 12px 26px;
    border: 1px solid var(--rule-hi);
    border-radius: 999px;
    background: var(--bone);
    transition: all var(--dur-2) var(--ease-out);
    min-height: 46px;
    touch-action: manipulation;
}
.svc-gbtn svg { width: 18px; height: 18px; flex: none; }
.svc-gbtn:hover { border-color: var(--bronze); color: var(--bronze-dp); }
.svc-gbtn.active { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.svc-gbtn.active svg { color: var(--bronze-lt); }

/* A very slow, subtle, continuous vertical bob to draw the eye to the
   selector without ever being flashy. Pure transform (translateY only,
   no horizontal movement), so it never shifts layout and the buttons
   always return to their exact resting position each cycle. Gated
   behind .in (scroll-reveal) so it only starts once the selector is
   actually visible, and the two buttons are slightly out of phase so
   the motion feels natural rather than mechanical. */
.svc-gender-toggle.in .svc-gbtn { animation: svcGbtnBob 3.2s ease-in-out infinite; }
.svc-gender-toggle.in .svc-gbtn:last-child { animation-delay: .5s; }
@keyframes svcGbtnBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .svc-gender-toggle.in .svc-gbtn { animation: none; }
}

.svc-cats { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; scroll-margin-top: calc(var(--hdr) + 20px); }
.svc-cat {
    font-family: var(--f-body);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 11px 20px;
    border: 1px solid var(--rule-hi);
    border-radius: 999px;
    background: transparent;
    transition: all var(--dur-2) var(--ease-out);
    white-space: nowrap;
    min-height: 42px;
}
.svc-cat:hover { border-color: var(--bronze); color: var(--bronze-dp); }
.svc-cat.active { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.svc-panel-wrap { background: var(--bone); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--sh-1); overflow: hidden; }
.svc-panel-head { display: flex; align-items: center; gap: 16px; padding: 26px clamp(22px, 3.5vw, 40px); border-bottom: 1px solid var(--rule); background: var(--bone-2); }
.svc-panel-head .pico { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid rgba(136,105,76,.35); display: grid; place-items: center; font-size: 1.15rem; color: var(--bronze); }
.svc-panel-head h3 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.35rem, 3vw, 1.8rem); color: var(--ink); margin: 0; }
.svc-panel-head .cnt { margin-left: auto; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-align: right; line-height: 1.5; }
.svc-list { padding: 14px clamp(22px, 3.5vw, 40px) 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(30px, 5vw, 72px); min-width: 0; }
.svc-sub-head { font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: var(--bronze); padding: 20px 0 6px; }
.svc-sub-note { font-size: .78rem; color: var(--muted); line-height: 1.6; padding: 0 0 10px; margin-top: -4px; }
.svc-row { display: flex; align-items: baseline; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.svc-row .n { font-size: .92rem; font-weight: 400; color: var(--ink); flex: 1 1 auto; min-width: 0; }
.svc-row .dots { flex: 0 1 40px; border-bottom: 1px dotted var(--rule-hi); transform: translateY(-4px); min-width: 8px; }
.svc-row .pr { font-family: var(--f-display); font-weight: 500; font-size: .95rem; color: var(--bronze-dp); white-space: nowrap; flex: none; }
.svc-row .pr .ow { font-family: var(--f-body); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-left: 4px; }
.svc-row .pr .on-consult { font-family: var(--f-body); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bronze); font-weight: 500; }
.svc-panel[hidden] { display: none; }
.svc-note { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 26px; font-weight: 300; }

@media (max-width: 900px) {
    .svc-list { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 560px) {
    /* The floating button stack sits bottom-right; give the price column
       breathing room so a row's price is never sitting under a fab. */
    .svc-list { padding-right: 22px; }
    .svc-row { padding-right: 4px; }
    .svc-panel-head { padding-right: 76px; }
    .svc-panel-head .cnt { font-size: .58rem; }
    .svc-feat-track .svc-feat { width: min(78vw, 300px); }
}

/* ── Shared slider engine (services + gallery, mobile/tablet) ─────────── */
.sl-viewport {
    overflow: hidden;
    position: relative;
    border-radius: var(--radius);
    /* Let the browser handle vertical page scroll natively; the slider's
       own pointer handling owns horizontal drags. Without this, a touch
       that starts even slightly off-axis can be claimed by the page's
       native scroll before the JS axis-lock gets a chance to respond,
       leaving the slide feeling unresponsive to a real finger swipe. */
    touch-action: pan-y;
}
.sl-track { will-change: transform; touch-action: pan-y; }
.sl-clone { pointer-events: none; }
.sl-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--rule-hi);
    transition: background var(--dur-1) var(--ease-out), width var(--dur-2) var(--ease-out);
    display: inline-block;
}
.sl-dot.on { background: var(--bronze); width: 22px; border-radius: 999px; }
.s-dark .sl-dot { background: var(--rule-d); }
.s-dark .sl-dot.on { background: var(--bronze-lt); }


/* ── Gallery ──────────────────────────────────────────────────────────── */
.gal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
    grid-auto-flow: dense;      /* backfill gaps for a clean masonry feel */
    gap: 14px;
}
.gal-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bone-3);
    cursor: zoom-in;
    transition: transform var(--dur-2) var(--ease-out);
    /* Force each slide onto its own GPU layer so it stays correctly
       painted while the parent track is mid-transform on mobile —
       without this, some mobile browsers can show a slide as blank
       for a frame or two right as it slides into view. */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.gal-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 700ms var(--ease-out), filter 400ms var(--ease-out);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.gal-item::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(14,12,10,.35));
    opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
}
.gal-item:hover img { transform: scale(1.06); }
.gal-item:hover::after, .gal-item:focus-visible::after { opacity: 1; }
/* Feature tiles — some items span multiple rows/cols for visual rhythm */
.gal-item.tall  { grid-row: span 2; }
.gal-item.tall2 { grid-row: span 3; }
.gal-item.wide  { grid-column: span 2; }
.gal-item.big   { grid-row: span 2; grid-column: span 2; }

.gal-cap {
    position: absolute; left: 14px; right: 14px; bottom: 12px;
    z-index: 1;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--bone);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.gal-item:hover .gal-cap, .gal-item:focus-visible .gal-cap { opacity: 1; transform: translateY(0); }

/* Gallery slider controls (mobile only) */
.gal-slider-controls { display: none; }

@media (max-width: 767px) {
    .gal-grid.gal-slider {
        display: flex;
        grid-auto-rows: auto;
        gap: 0;
    }
    .gal-grid.gal-slider .gal-item {
        flex: 0 0 100%;
        width: 100%;
        aspect-ratio: 4 / 5;
        grid-row: auto !important;
        grid-column: auto !important;
    }
    .gal-grid.gal-slider .gal-item::after { opacity: 1; }
    .gal-grid.gal-slider .gal-cap { opacity: 1; transform: none; }
    .gal-slider-controls { display: flex; justify-content: center; margin-top: 18px; }
}
/* ── Hard guarantee: same defensive protection as the services grid —
   the gallery grid can never be slider-transformed above ≤767px. */
@media (min-width: 768px) {
    #galleryGrid,
    #galleryGrid.sl-track { transform: none !important; transition: none !important; }
    #galleryGrid > .gal-item { flex: initial !important; width: auto !important; min-width: 0 !important; }
    #gallery .sl-viewport { overflow: visible !important; width: auto !important; transform: none !important; }
    #galleryGrid .gal-item.sl-clone { display: none !important; }
}

/* Lightbox */
.lb {
    position: fixed; inset: 0;
    background: rgba(14, 12, 10, .94);
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.lb.open { display: flex; }
.lb img { max-width: 95vw; max-height: 88vh; object-fit: contain; border-radius: 4px; }
.lb .close {
    position: absolute; top: 20px; right: 20px;
    color: var(--bone); font-size: 1.5rem;
    width: 44px; height: 44px;
    border: 1px solid var(--rule-d);
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dur-1) var(--ease-out);
}
.lb .close:hover { background: rgba(250,246,240,.1); }

/* ── Testimonials — continuous drag-marquee (ported interaction) ──────
   Structure and behaviour match the reference exactly: a doubled card
   list drifts continuously via rAF, is fully drag/swipe-able in either
   direction, pauses on hover/touch and resumes after a short delay,
   pauses off-screen or when the tab is hidden, and has a manual
   play/pause toggle. Palette rebuilt for The 7S Saloon Mall. ─────────────── */
.testi-viewport {
    overflow: hidden;
    position: relative;
    cursor: grab;
    touch-action: pan-y;
    mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.testi-viewport.dragging { cursor: grabbing; }
.testi-track {
    display: flex;
    gap: 22px;
    width: max-content;
    will-change: transform;
}
.testi-card {
    flex: 0 0 360px;
    background: var(--bone);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 34px 28px 30px;
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
}
.testi-card img, .testi-card * { pointer-events: none; -webkit-user-drag: none; }
.tc-q {
    font-family: var(--f-display);
    font-size: 3.4rem;
    font-weight: 300;
    line-height: .6;
    color: var(--bronze);
    opacity: .6;
    display: block;
    margin-bottom: 18px;
}
.tc-text {
    font-family: var(--f-display);
    font-size: 1.02rem;
    font-weight: 300;
    font-style: italic;
    color: var(--ink);
    line-height: 1.65;
    margin-bottom: 24px;
}
.tc-stars { display: flex; gap: 3px; margin-bottom: 16px; margin-top: auto; }
.tc-star { font-size: .8rem; color: var(--bronze); }
.tc-author { display: flex; align-items: center; gap: 13px; }
.tc-av {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--bronze);
    color: var(--bone);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 500;
    flex-shrink: 0;
}
.tc-name { font-size: .88rem; font-weight: 500; color: var(--ink); }
.tc-svc { font-size: .74rem; color: var(--muted); margin-top: 2px; letter-spacing: .04em; }

.testi-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 40px; }
.tc-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--rule-hi);
    display: flex; align-items: center; justify-content: center;
    color: var(--bronze-dp);
    font-size: .7rem;
    transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
    min-height: 44px; min-width: 44px;
    touch-action: manipulation;
}
.tc-btn:hover, .tc-btn:focus-visible { border-color: var(--bronze); background: var(--bone-2); }
.tc-btn[aria-pressed="true"] { color: var(--bronze); }
.tc-dots { display: flex; gap: 7px; }
.tc-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--rule-hi);
    transition: background var(--dur-1) var(--ease-out), width var(--dur-2) var(--ease-out);
}
.tc-dot.on { background: var(--bronze); width: 22px; border-radius: 999px; }

@media (max-width: 540px) {
    .testi-card { flex-basis: 300px; padding: 28px 22px 24px; }
    .tc-q { font-size: 2.8rem; }
    .tc-text { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
    .testi-track { transition: none !important; }
}
/* ── Booking form ─────────────────────────────────────────────────────── */
.book-form-wrap {
    max-width: 620px;
    margin: 0 auto;
}

.book-form {
    background: var(--bone);
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--radius);
    border: 1px solid var(--rule);
    box-shadow: var(--sh-1);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Academy enquiry form — two columns on wider screens. Placed after
   .book-form so this override wins (same specificity, later wins). */
.academy-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 720px;
    margin: 40px auto 0;
}
@media (max-width: 640px) {
    .academy-form { grid-template-columns: 1fr; }
}

.fg { display: flex; flex-direction: column; }
.fg > label {
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 10px;
}
.fc {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--f-body);
    font-size: .98rem;
    color: var(--ink);
    background: var(--bone);
    border: 1px solid var(--rule-hi);
    border-radius: 8px;
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
    -webkit-appearance: none;
    appearance: none;
    min-height: 48px;
}
select.fc {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2388694C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 42px;
    cursor: pointer;
}
textarea.fc { min-height: 96px; resize: vertical; }
.fc:focus {
    outline: none;
    border-color: var(--bronze);
    box-shadow: 0 0 0 3px rgba(136, 105, 76, .15);
}
.fc.error { border-color: #B4463A; }
.fc.error:focus { box-shadow: 0 0 0 3px rgba(180, 70, 58, .15); }
.field-err {
    font-size: .82rem;
    color: #B4463A;
    margin-top: 6px;
    min-height: 1.2em;
    display: block;
}
.fg-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.hp-field {
    position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden;
}
.book-reply-note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bone-2);
    border-radius: 8px;
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.5;
}
.brn-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #2E9D5F;
    box-shadow: 0 0 0 4px rgba(46, 157, 95, .18);
    flex-shrink: 0;
}
.brn-text strong { color: var(--ink); font-weight: 500; }
.book-submit {
    width: 100%;
    padding: 18px;
    background: var(--ink);
    color: var(--bone);
    border-radius: 999px;
    font-size: .84rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
    min-height: 56px;
}
.book-submit:hover:not(:disabled), .book-submit:focus-visible {
    background: var(--bronze-dp);
    transform: translateY(-2px);
    box-shadow: var(--sh-2);
}
.book-submit:disabled { opacity: .7; cursor: wait; transform: none; }
.book-submit svg { width: 18px; height: 18px; }
.form-status {
    font-size: .9rem;
    padding: 12px 14px;
    border-radius: 8px;
    margin: 0;
    min-height: 1em;
}
.form-status:empty { display: none; }
.form-status.ok { background: rgba(46,157,95,.10); color: #227546; }
.form-status.err { background: rgba(180,70,58,.10); color: #8C3427; }

/* ── Contact / Location ───────────────────────────────────────────────── */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 60px);
    align-items: stretch;
}
.contact-card {
    padding: clamp(30px, 4vw, 48px);
    background: var(--bone);
    border-radius: var(--radius);
    border: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
}
.contact-list {
    list-style: none;
    margin: 32px 0 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.contact-list li {
    display: flex;
    gap: 18px;
}
.contact-list .ico {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--bone-2);
    color: var(--bronze-dp);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.contact-list .ico svg { width: 20px; height: 20px; }
.contact-list .lbl {
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 4px;
}
.contact-list a { color: var(--ink); transition: color var(--dur-1) var(--ease-out); }
.contact-list a:hover { color: var(--bronze-dp); }
.hours-list { margin: 8px 0 0; padding: 0; list-style: none; font-size: .95rem; }
.hours-list li {
    display: flex; justify-content: space-between; padding: 4px 0;
    color: var(--ink);
}
.hours-list li .day { color: var(--muted); }
.hours-list li.today { color: var(--bronze-dp); font-weight: 500; }
.hours-list li.today .day { color: var(--bronze-dp); }

.map-embed {
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 420px;
    background: var(--bone-3);
    position: relative;
    border: 1px solid var(--rule);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; min-height: 420px; }
.map-actions {
    position: absolute;
    bottom: 20px; left: 20px; right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    background: var(--bone);
    padding: 14px 18px;
    border-radius: 10px;
    box-shadow: var(--sh-2);
}
.map-actions .place {
    font-family: var(--f-display);
    font-size: 1.05rem;
    color: var(--ink);
}
.map-actions .place small {
    display: block; font-family: var(--f-body); font-size: .78rem; color: var(--muted);
    letter-spacing: .05em; margin-top: 3px;
}
.map-actions .btn { min-height: 42px; padding: 10px 18px; font-size: .74rem; }

/* ── Instagram ────────────────────────────────────────────────────────── */
.insta-header { text-align: center; margin-bottom: 48px; display: flex; flex-direction: column; align-items: center; }

/* Continuous right-to-left marquee (same pattern as .testi-viewport) —
   full-bleed so it can scroll edge-to-edge outside the .wrap gutter. */
.insta-viewport {
    overflow: hidden;
    position: relative;
    cursor: grab;
    touch-action: pan-y;
    mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.insta-viewport.dragging { cursor: grabbing; }
.insta-track {
    display: flex;
    gap: 14px;
    width: max-content;
    will-change: transform;
    padding: 0 var(--gutter, 24px);
}
.insta-tile {
    flex: 0 0 auto;
    width: clamp(150px, 16vw, 210px);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--ink-2);
    position: relative;
    display: block;
    user-select: none;
    -webkit-user-select: none;
}
.insta-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
    transition: transform 600ms var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.insta-tile::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(14,12,10,.4) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF6F0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.5' cy='6.5' r='1' fill='%23FAF6F0'/></svg>") center/28px no-repeat;
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out);
}
.insta-tile:hover img, .insta-tile:focus-visible img { transform: scale(1.08); opacity: .7; }
.insta-tile:hover::after, .insta-tile:focus-visible::after { opacity: 1; }
@media (max-width: 640px) {
    .insta-tile { width: clamp(120px, 34vw, 160px); }
}
.insta-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 34px;
    font-size: .82rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--bronze-lt);
}
.insta-cta:hover { color: var(--bone); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--ink);
    color: var(--muted-d);
    padding: clamp(60px, 8vw, 90px) 0 30px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: clamp(30px, 4vw, 60px);
    margin-bottom: 60px;
}
.footer-brand img { height: 72px; width: auto; margin-bottom: 24px; }
.footer-brand p {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--muted-d);
    max-width: 32ch;
    margin-bottom: 24px;
}
.footer-socials { display: flex; gap: 12px; }
.footer-socials a {
    width: 42px; height: 42px;
    border-radius: 999px;
    border: 1px solid var(--rule-d);
    display: flex; align-items: center; justify-content: center;
    color: var(--bone);
    transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.footer-socials a:hover, .footer-socials a:focus-visible {
    background: var(--bronze);
    border-color: var(--bronze);
    color: var(--bone);
}
.footer-socials svg { width: 18px; height: 18px; }
.footer-col h4 {
    color: var(--bone);
    font-family: var(--f-body);
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 22px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
    font-size: .95rem;
    color: var(--muted-d);
    transition: color var(--dur-1) var(--ease-out), padding-left var(--dur-1) var(--ease-out);
}
.footer-col a:hover, .footer-col a:focus-visible { color: var(--bronze-lt); padding-left: 4px; }
.footer-col address {
    font-style: normal;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--muted-d);
}

.footer-bottom {
    border-top: 1px solid var(--rule-d);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--muted-d);
}
.footer-bottom .legal {
    display: flex; gap: 24px; flex-wrap: wrap;
}
.footer-bottom .legal a { color: var(--muted-d); }
.footer-bottom .legal a:hover { color: var(--bronze-lt); }

/* ── Floating action buttons (call + WhatsApp) ────────────────────────── */
.fabs {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: calc(20px + env(safe-area-inset-right, 0px));
    z-index: 700;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    /* The column is taller/wider than any single button because of the
       tooltip label; let touches pass through empty space and only land
       on the actual buttons, so nothing beneath (e.g. footer links) gets
       blocked. */
    pointer-events: none;
}
.fab-row { display: flex; align-items: center; gap: 12px; pointer-events: none; }
.fab-tip {
    background: var(--ink);
    color: var(--bone);
    border: 1px solid rgba(250,246,240,.14);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .04em;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
    pointer-events: none;
}
/* Tooltips only on devices with a real hover cursor — never on touch,
   where they'd otherwise flash during a scroll gesture. */
@media (hover: hover) and (pointer: fine) {
    .fab-row:hover .fab-tip { opacity: 1; transform: translateX(0); }
}

.fab {
    position: relative;
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--bone);
    overflow: hidden;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
    .fab:hover, .fab:focus-visible { transform: scale(1.08); }
}
@media (hover: none) {
    .fab:active { transform: scale(.94); }
}
.fab svg { width: 26px; height: 26px; position: relative; z-index: 1; }

/* Chatbot — ink with a bronze ring, subtle attention bounce */
.chatbot-btn {
    background: var(--ink);
    box-shadow: 0 0 0 2px rgba(136,105,76,.5), 0 4px 18px rgba(14,12,10,.4);
    animation: chatBounce 3.2s ease-in-out infinite;
}
.chatbot-btn:hover, .chatbot-btn:focus-visible { box-shadow: 0 0 0 2px var(--bronze-lt), 0 8px 24px rgba(136,105,76,.45); }
@keyframes chatBounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 70% { transform: translateY(0); } }

/* Call — ink, soft radiating ring */
.fab.call { background: var(--ink); box-shadow: 0 4px 18px rgba(14,12,10,.32); }
.fab.call:hover, .fab.call:focus-visible { box-shadow: 0 0 0 2px var(--bronze-lt), 0 8px 24px rgba(136,105,76,.4); }
.call-pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--bronze); animation: callSoftPulse 3s ease-out infinite; }
@keyframes callSoftPulse { 0% { transform: scale(1); opacity: .22; } 100% { transform: scale(1.5); opacity: 0; } }

/* WhatsApp — true brand green, glossy sheen + glow (the recognisable cue) */
.fab.wa { background: #25D366; box-shadow: 0 4px 16px rgba(37,211,102,.45); animation: waGlow 2.4s ease-in-out infinite; }
.fab.wa:hover, .fab.wa:focus-visible { box-shadow: 0 0 0 4px rgba(37,211,102,.22), 0 10px 30px rgba(37,211,102,.6); animation-play-state: paused; }
.fab.wa svg { fill: #fff; }
.wa-sheen { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.3), rgba(255,255,255,0) 62%); pointer-events: none; }
@keyframes waGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(37,211,102,.42), 0 0 0 0 rgba(37,211,102,.5); }
    50%      { box-shadow: 0 6px 22px rgba(37,211,102,.55), 0 0 0 10px rgba(37,211,102,0); }
}

/* Pause every fab animation while the page is actively scrolling, so
   nothing jumps mid-gesture on mobile. */
body.is-scrolling .chatbot-btn,
body.is-scrolling .fab.wa,
body.is-scrolling .call-pulse { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .chatbot-btn, .fab.wa, .call-pulse { animation: none; }
}

/* ── Scroll reveal ────────────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(20px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: 100ms; }
.rv.d2 { transition-delay: 200ms; }
.rv.d3 { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1; transform: none; transition: none; }
}

/* ── Preloader — a brief, elegant brand reveal ─────────────────────────
   Seal (logo badge, spinning bronze ring) → name → tagline → hairline
   progress bar, staggered in sequence, then a smooth cross-fade into
   the page. All timings kept short so the "premium" feeling comes from
   the choreography, not from making the visitor wait. ───────────────── */
.preloader {
    position: fixed; inset: 0;
    background: var(--bone);
    z-index: 999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 26px;
    transition: opacity 700ms var(--ease-out), visibility 0s linear 700ms;
}
.preloader.done { opacity: 0; visibility: hidden; }
.pl-brand { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }

.pl-seal { position: relative; width: 72px; height: 72px; opacity: 0; transform: scale(.85); animation: plSealIn 700ms var(--ease-spring, var(--ease-out)) 60ms forwards; }
.pl-seal img { width: 78%; height: 78%; margin: 11%; border-radius: 0; object-fit: contain; }
.pl-seal::after {
    content: "";
    position: absolute; inset: -10px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: var(--bronze);
    border-right-color: rgba(136,105,76,.35);
    animation: plSpin 1.3s linear infinite;
}

.pl-name {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(1.35rem, 3.6vw, 1.7rem);
    color: var(--ink);
    letter-spacing: .01em;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: .3em;
    opacity: 0;
    transform: translateY(12px);
    animation: plUp 550ms var(--ease-out) 320ms forwards;
}
.pl-name span {
    font-family: var(--f-body);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: .46em;
    color: var(--bronze);
}
.pl-name b {
    font-style: italic;
    font-weight: 400;
    font-size: 1.25em;
    background: linear-gradient(180deg, var(--bronze-lt) 0%, var(--bronze-dp) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.pl-sub {
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0;
    transform: translateY(8px);
    animation: plUp 500ms var(--ease-out) 480ms forwards;
}
.pl-bar { width: 140px; height: 1px; background: var(--rule-hi); overflow: hidden; opacity: 0; animation: plUp 400ms var(--ease-out) 600ms forwards; }
.pl-fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--bronze-dp), var(--bronze-lt)); animation: plFill 900ms var(--ease-out) 680ms forwards; }

@keyframes plSpin { to { transform: rotate(360deg); } }
@keyframes plSealIn { to { opacity: 1; transform: scale(1); } }
@keyframes plUp { to { opacity: 1; transform: translateY(0); } }
@keyframes plFill { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .pl-seal, .pl-seal::after, .pl-name, .pl-sub, .pl-bar, .pl-fill {
        animation: none !important; opacity: 1 !important; transform: none !important; width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet & mobile
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
    .hero-inner { grid-template-columns: 1fr; gap: 60px; }
    .hero-visual { max-width: 500px; max-height: 560px; margin: 0 auto; width: 100%; }
    .about-grid { grid-template-columns: 1fr; gap: 50px; }
    .about-visual { max-width: 560px; margin: 0 auto; width: 100%; }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    :root { --hdr: 66px; }
    .nav-links, .hdr-tel { display: none; }
    .hdr-cta { display: none; }
    .menu-toggle { display: inline-flex; }
    .brand img { height: 42px; }

    .svc-grid { grid-template-columns: 1fr; }
    .gal-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
    }
    .gal-item.big, .gal-item.wide { grid-column: span 2; }
    .gal-item.tall, .gal-item.tall2 { grid-row: span 1; }
    .gal-item.big  { grid-row: span 2; }

    .footer-grid { grid-template-columns: 1fr; }


    .map-actions {
        position: static;
        margin: 0;
        border-radius: 0 0 var(--radius) var(--radius);
        box-shadow: none;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        border-top: 1px solid var(--rule);
    }
    .map-embed { padding-bottom: 0; }
    .map-embed iframe { min-height: 320px; }
}

@media (max-width: 540px) {
    body { font-size: 15px; }
    .btn { padding: 13px 22px; font-size: .78rem; }
    .fg-row { grid-template-columns: 1fr; }
    .gal-grid { grid-auto-rows: 140px; }

    .brand img { height: 38px; }
    .hero-visual .badge {
        top: -12px; left: -8px;
        padding: 10px 14px; font-size: .66rem;
    }
    .hero-visual .frame-b { right: -12px; bottom: -14px; border-width: 4px; }
    .hero { padding-top: calc(var(--hdr) + 28px); }

    .footer-bottom { flex-direction: column; align-items: flex-start; }

    /* Fab respects safe area; slightly smaller buttons + tighter gap so the
       stack never crowds the content on small phones */
    .fabs { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); gap: 12px; }
    .fab { width: 50px; height: 50px; }
    .fab svg { width: 23px; height: 23px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   GURU CHATBOT — 7S-branded, mobile-hardened panel
   Structure/behaviour ported from the Infinity reference; palette,
   type and spacing rebuilt for The 7S Saloon Mall.
   (Toggle button appearance — background, glow, bounce — lives with the
   rest of the .fabs stack above, so all three floating buttons share one
   definition and animate in sync.)
   ═══════════════════════════════════════════════════════════════════════ */
.chatbot-btn { overflow: hidden; }
.chatbot-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Hint bubble above the chatbot toggle — chatbot sits topmost in the
   fab stack (furthest from the corner), so the bubble is offset to
   clear all three buttons plus their gaps. */
#mrcool-hint {
    position: fixed;
    /* Exact position is computed in JS (chatbot-ui.js) so the bubble
       always sits directly above the chat icon regardless of viewport
       size or safe-area insets. These are just a sane fallback for the
       instant before that runs. */
    bottom: calc(184px + env(safe-area-inset-bottom, 0px));
    right: calc(20px + env(safe-area-inset-right, 0px));
    z-index: 49;
    max-width: 220px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--ink);
    color: var(--bone);
    padding: 12px 14px;
    border-radius: 14px 14px 4px 14px;
    box-shadow: var(--sh-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px) scale(.97);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
#mrcool-hint-text {
    font-size: .78rem;
    line-height: 1.5;
    cursor: pointer;
    flex: 1 1 auto;
}
#mrcool-hint-close {
    flex: none;
    width: 22px; height: 22px;
    margin: -2px -2px 0 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--bone);
    opacity: .7;
    transition: opacity var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
    touch-action: manipulation;
}
#mrcool-hint-close svg { width: 13px; height: 13px; }
#mrcool-hint-close:hover, #mrcool-hint-close:focus-visible { opacity: 1; background: rgba(250,246,240,.15); }
#mrcool-hint.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition-delay: 0s; }
@media (max-width: 540px) {
    #mrcool-hint { max-width: calc(100vw - 96px); font-size: .74rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LEGAL PAGES (privacy-policy.html, terms.html)
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Floating close/back button (Our Story, Academy) ────────────────
   A small, elegant shortcut back to the homepage, fixed on the right
   edge so it stays reachable while scrolling a long page — separate
   from the header nav and the chat/call/WhatsApp fabs (bottom-right),
   so it lives vertically centered instead. */
.page-float-close {
    position: fixed;
    top: 50%;
    right: clamp(14px, 2.5vw, 28px);
    transform: translateY(-50%);
    z-index: 65;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bone);
    border: 1px solid var(--rule-hi);
    color: var(--ink);
    box-shadow: var(--sh-2);
    opacity: 0;
    transform: translateY(-50%) scale(.85);
    animation: pageFloatIn 480ms var(--ease-out) 200ms forwards;
    transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.page-float-close svg { width: 16px; height: 16px; }
.page-float-close:hover, .page-float-close:focus-visible {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink);
    transform: translateY(-50%) scale(1.06);
}
@keyframes pageFloatIn {
    to { opacity: 1; transform: translateY(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .page-float-close { animation: none; opacity: 1; transform: translateY(-50%); }
}
@media (max-width: 640px) {
    .page-float-close {
        width: 44px; height: 44px;
        top: calc(var(--hdr) + 14px);
        bottom: auto;
        transform: none;
    }
    .page-float-close:hover, .page-float-close:focus-visible { transform: scale(1.06); }
}

.legal-hero {
    padding: calc(var(--hdr) + 56px) 0 40px;
    background: var(--bone-2);
    border-bottom: 1px solid var(--rule);
}
.legal-hero .eyebrow { margin-bottom: 14px; }
.legal-hero .updated { color: var(--muted); font-size: .9rem; }
.legal-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px var(--gutter) 100px;
}
.legal-body h2 {
    font-size: 1.5rem;
    margin-top: 2.2em;
    padding-top: .4em;
    border-top: 1px solid var(--rule);
}
.legal-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal-body p, .legal-body li { color: var(--muted); font-size: 1rem; line-height: 1.8; }
.legal-body ul, .legal-body ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.legal-body li { margin-bottom: .5em; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a { color: var(--bronze-dp); border-bottom: 1px solid rgba(136,105,76,.4); }
.legal-body a:hover { color: var(--ink); border-color: var(--ink); }

/* ── Footer credit line ("Powered by") ─────────────────────────────────── */
.footer-credit {
    text-align: center;
    padding: 18px var(--gutter) 0;
    margin-top: 18px;
    border-top: 1px solid var(--rule-d);
    font-size: .74rem;
    letter-spacing: .08em;
    color: var(--muted-d);
}
.footer-credit a {
    color: var(--bronze-lt);
    font-weight: 600;
    letter-spacing: .12em;
    transition: color var(--dur-1) var(--ease-out);
}
.footer-credit a:hover, .footer-credit a:focus-visible { color: var(--bone); }

/* Print */
@media print {
    .site-header, .fabs, .site-footer, .book-form, #mrcool-panel, #mrcool-hint { display: none; }
    body { background: white; color: black; }
    a { color: black; text-decoration: underline; }
}