/* =========================================================================
   Mr Jack's Hair Expert — 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); }
/* ── Attention CTA: the two homepage preview buttons (Our Story, Academy).
   Bronze fill with a slow colour shift, a light sheen sweep, a soft
   glow ring, a small vertical float and a nudging arrow. Colour shift and
   sheen use transform/opacity only, so phones can run them on the GPU
   without repainting, and nothing around the button moves. */
.btn-attn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: var(--bone);
    border-color: var(--bronze-dp);
    background: linear-gradient(110deg, var(--bronze-dp), var(--bronze));
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
    animation: attnFloat 1.8s ease-in-out infinite,
               attnGlow 2.4s ease-out infinite;
}
.btn-attn::before,
.btn-attn::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    pointer-events: none;
    z-index: -1;
}
.btn-attn::before {
    left: 0; right: 0;
    background: linear-gradient(110deg, var(--bronze), var(--bronze-lt));
    opacity: 0;
    animation: attnShift 3.6s ease-in-out infinite alternate;
}
.btn-attn::after {
    left: 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
    transform: translateX(-130%) skewX(-20deg);
    animation: attnSheen 3.2s ease-in-out infinite;
}
.btn-attn .ar { display: inline-block; animation: attnArrow 1.2s ease-in-out infinite; }
.btn-attn:hover, .btn-attn:focus-visible {
    border-color: var(--bronze-dp);
    color: var(--bone);
    animation-play-state: paused;
}
.btn-attn:hover::before, .btn-attn:focus-visible::before { opacity: .55; animation-play-state: paused; }
.btn-attn:hover::after, .btn-attn:focus-visible::after { animation-play-state: paused; }
@keyframes attnFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
@keyframes attnGlow {
    0%   { box-shadow: 0 0 0 0 rgba(185,142,100,.55); }
    70%  { box-shadow: 0 0 0 14px rgba(185,142,100,0); }
    100% { box-shadow: 0 0 0 0 rgba(185,142,100,0); }
}
@keyframes attnShift { from { opacity: 0; } to { opacity: .55; } }
@keyframes attnSheen {
    0%        { transform: translateX(-130%) skewX(-20deg); }
    55%, 100% { transform: translateX(380%) skewX(-20deg); }
}
@keyframes attnArrow {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-attn, .btn-attn::before, .btn-attn::after, .btn-attn .ar { animation: none; }
}

.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-hint {
    text-align: center;
    margin: 0 0 12px;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--bronze-dp);
}
.svc-gender-hint::after {
    content: "\2193";
    display: inline-block;
    margin-left: 8px;
    letter-spacing: 0;
    animation: gHintArrow 1.2s ease-in-out infinite;
}
@keyframes gHintArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Women / Men switch: one pill track with a sliding ink indicator, so it
   reads as a switch you flip rather than two separate buttons. While the
   visitor has not touched it, the track breathes with a bronze glow, the
   indicator peeks toward the other option, and a ripple pulses on the
   inactive option. All of it stops on the first touch. Only transform,
   opacity and box-shadow animate, so nothing around it moves. */
.svc-gender-toggle {
    --gpad: 5px;
    position: relative;
    display: flex;
    width: min(100%, 340px);
    margin: 0 auto 28px;
    padding: var(--gpad);
    border: 1px solid var(--bronze);
    border-radius: 999px;
    background: var(--bone-2);
    isolation: isolate;
}
.svc-gender-toggle::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: var(--gpad); bottom: var(--gpad); left: var(--gpad);
    width: calc(50% - var(--gpad));
    border-radius: 999px;
    background: var(--ink);
    transition: transform var(--dur-3, 420ms) var(--ease-out);
    will-change: transform;
}
.svc-gender-toggle[data-gender="male"]::before { transform: translateX(100%); }
.svc-gbtn {
    position: relative;
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--f-body);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink);
    padding: 12px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    transition: color var(--dur-2) var(--ease-out);
    min-height: 48px;
    touch-action: manipulation;
    cursor: pointer;
}
.svc-gbtn svg { width: 18px; height: 18px; flex: none; }
.svc-gbtn:hover { color: var(--bronze-dp); }
.svc-gbtn.active, .svc-gbtn.active:hover { color: var(--bone); }
.svc-gbtn.active svg { color: var(--bronze-lt); }
.svc-gbtn:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

.svc-gender-toggle.in.hint { animation: gGlow 2.6s ease-out infinite; }
.svc-gender-toggle.in.hint::before { animation: gPeekF 5s ease-in-out infinite; }
.svc-gender-toggle.in.hint[data-gender="male"]::before { animation-name: gPeekM; }
.svc-gender-toggle.in.hint .svc-gbtn:not(.active)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid var(--bronze);
    opacity: 0;
    animation: gRipple 2.6s ease-out infinite;
    pointer-events: none;
}
@keyframes gGlow {
    0%   { box-shadow: 0 0 0 0 rgba(185,142,100,.55); }
    70%  { box-shadow: 0 0 0 14px rgba(185,142,100,0); }
    100% { box-shadow: 0 0 0 0 rgba(185,142,100,0); }
}
@keyframes gPeekF {
    0%, 55%, 100% { transform: translateX(0); }
    68%, 80%      { transform: translateX(24%); }
}
@keyframes gPeekM {
    0%, 55%, 100% { transform: translateX(100%); }
    68%, 80%      { transform: translateX(76%); }
}
@keyframes gRipple {
    0%   { opacity: .9; transform: scale(.82); }
    70%  { opacity: 0;  transform: scale(1.08); }
    100% { opacity: 0;  transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .svc-gender-hint::after { animation: none; }
    .svc-gender-toggle.in.hint,
    .svc-gender-toggle.in.hint::before,
    .svc-gender-toggle.in.hint .svc-gbtn:not(.active)::after { 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. Ink/bronze palette shared across GURU AI client builds. ─────────────── */
.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); } }

/* Book — bronze, soft glow; sits between the chatbot and Call */
.fab.book { background: linear-gradient(145deg, var(--bronze-lt), var(--bronze)); color: #fff; box-shadow: 0 4px 18px rgba(136,105,76,.45); animation: bookGlow 3s ease-in-out infinite; }
.fab.book:hover, .fab.book:focus-visible { box-shadow: 0 0 0 3px rgba(136,105,76,.25), 0 10px 26px rgba(136,105,76,.55); animation-play-state: paused; }
@keyframes bookGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(136,105,76,.4), 0 0 0 0 rgba(136,105,76,.45); }
    50%      { box-shadow: 0 6px 20px rgba(136,105,76,.5), 0 0 0 9px rgba(136,105,76,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 .chatbot-btn img,
body.is-scrolling .fab.wa,
body.is-scrolling .fab.book,
body.is-scrolling .call-pulse { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .chatbot-btn, .chatbot-btn img, .fab.wa, .fab.book, .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; }
    .gal-item.big:last-child { grid-row: span 1; grid-column: span 1; }

    .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 — ink/bronze-branded, mobile-hardened panel
   Structure/behaviour ported from the Infinity reference; palette,
   type and spacing kept for Mr Jack's Hair Expert.
   (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%;
    animation: mrcoolFabWave 6s ease-in-out infinite;
    transform-origin: 50% 85%;
}
/* Same friendly wave as the in-chat header avatar, so the mascot on the
   floating button and the one inside the chat panel feel like one
   character. Pauses with the rest of the FAB stack on scroll/reduced
   motion via the existing .chatbot-btn, .fab.wa, .fab.book rule below. */
@keyframes mrcoolFabWave {
    0%, 82%, 100% { transform: rotate(0deg) scale(1); }
    85%           { transform: rotate(-9deg) scale(1.08); }
    88%           { transform: rotate(8deg) scale(1.08); }
    91%           { transform: rotate(-5deg) scale(1.04); }
    94%           { transform: rotate(3deg) scale(1.02); }
    97%           { transform: rotate(0deg) scale(1); }
}

/* 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); }

/* Animated "Powered by" link — a bronze light travels around a pill, the
   name shimmers and the arrow nudges, so it reads as a button to tap.
   Transform / opacity only, so it stays smooth on phones. */
.footer-credit { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.footer-credit .credit-lead { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; }
.footer-credit a.gat-link {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    min-height: 46px;
    border-radius: 999px;
    color: var(--bronze-lt);
    letter-spacing: .14em;
    font-size: .76rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    animation: gatBreath 2.8s ease-in-out infinite;
    transition: transform var(--dur-1) var(--ease-out);
}
.gat-link::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 320%; aspect-ratio: 1;
    background: conic-gradient(from 0deg, transparent 0 52%, var(--bronze) 72%, #fff 88%, transparent 100%);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: gatSpin 2.6s linear infinite;
    z-index: -2;
}
.gat-link::after {
    content: "";
    position: absolute;
    inset: 1.5px;
    border-radius: inherit;
    background: var(--ink);
    z-index: -1;
}
.gat-name {
    background: linear-gradient(100deg, var(--bronze-lt) 30%, #fff 50%, var(--bronze-lt) 70%) 0 0 / 250% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: gatShine 2.2s ease-in-out infinite;
}
.gat-arrow { width: 16px; height: 16px; flex: none; animation: gatNudge 1.4s ease-in-out infinite; }
.footer-credit a.gat-link:hover, .footer-credit a.gat-link:focus-visible { color: #fff; transform: translateY(-2px) scale(1.03); }
.footer-credit a.gat-link:active { transform: scale(.97); }
@keyframes gatSpin  { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes gatShine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -20% 0; } }
@keyframes gatNudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -3px); } }
@keyframes gatBreath {
    0%, 100% { box-shadow: 0 0 0 0 rgba(185,142,100,.0), 0 0 14px rgba(185,142,100,.18); }
    50%      { box-shadow: 0 0 0 7px rgba(185,142,100,.0), 0 0 26px rgba(185,142,100,.38); }
}
@media (max-width: 860px) {
    /* leave room so the floating WhatsApp button never sits on top of it */
    .footer-credit { padding-bottom: 78px; }
    .footer-credit a.gat-link { padding: 12px 18px; letter-spacing: .1em; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
    .gat-link::before, .gat-name, .gat-arrow, .footer-credit a.gat-link { animation: none; }
    .gat-name { background-position: 50% 0; }
}

/* 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; }
}

/* ── Mobile tap targets: text links and small controls reach 44px so they
   are easy to hit with a thumb. Visual style is unchanged. ─────────────── */
@media (max-width: 860px) {
    .svc-feat-nav { width: 44px; height: 44px; }
    .contact-list a,
    .insta-cta,
    .footer-col li a,
    .footer-bottom a,
    .footer-credit a,
    .footer-col address a,
    .legal-hero .eyebrow a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .footer-col ul { gap: 0; }
    .footer-bottom .legal { flex-direction: column; gap: 0; }
    .site-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
    .footer-socials a { width: 44px; height: 44px; }
    .svc-cat { min-height: 44px; }
}

/* ── Mobile hero: bring the photo into the first screen ───────────────── */
@media (max-width: 860px) {
    .hero-inner { gap: 30px; }
    .hero-sub { margin-bottom: 24px; }
}
@media (max-width: 540px) {
    .hero-copy h1 { margin-bottom: 16px; }
    .hero-sub { font-size: 1rem; line-height: 1.6; margin-bottom: 20px; }
    .hero-ctas { flex-wrap: nowrap; gap: 10px; }
    .hero-ctas .btn { flex: 1 1 0; padding: 14px 8px; font-size: .72rem; letter-spacing: .1em; white-space: normal; }
    .hero-ctas .btn .arrow { display: none; }
}

/* ── Form fields stay at 16px on phones so iOS never zooms the page ───── */
@media (max-width: 860px) {
    input, select, textarea, .fc { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   EXTRA "RONAK" PACK — added on request, kept in its own block so it's
   easy to review or remove as a unit. Everything here is additive: it
   only adds new classes/elements, never overrides the base design
   system above. All effects are pure CSS (plus light vanilla JS to
   toggle classes) — no external library, no cost.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Scroll progress bar — thin bronze line under the header ───────── */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--bronze-dp), var(--bronze-lt));
    z-index: 999;
    transition: width 80ms linear;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { transition: none; } }

/* ── 2. Shine-sweep on EVERY button on hover (not just .btn-attn) ─────── */
.btn-primary, .btn-ghost, .btn-bronze {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-primary::after, .btn-ghost::after, .btn-bronze::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-160%) skewX(-20deg);
    transition: transform .65s var(--ease-out);
    pointer-events: none;
    z-index: 1;
}
.btn-primary:hover::after, .btn-ghost:hover::after, .btn-bronze:hover::after {
    transform: translateX(360%) skewX(-20deg);
}
@media (prefers-reduced-motion: reduce) {
    .btn-primary::after, .btn-ghost::after, .btn-bronze::after { transition: none; display: none; }
}

/* ── 3. Ripple click effect (span.ripple injected by JS on click) ─────── */
.btn { position: relative; }
.btn .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    transform: scale(0);
    animation: rippleOut .6s ease-out forwards;
    pointer-events: none;
    z-index: 2;
}
.btn-ghost .ripple { background: rgba(14,12,10,.28); }
@keyframes rippleOut {
    to { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .btn .ripple { animation: none; display: none; } }

/* ── 4. Magnetic hover — JS sets --mx/--my; CSS just reads them ───────── */
@media (pointer: fine) {
    .btn-magnetic {
        transform: translate(var(--mx, 0), var(--my, 0));
        transition: transform .25s var(--ease-out);
    }
    .btn-magnetic:active { transition-duration: .1s; }
}

/* ── 5. Staggered reveal helper — JS adds .rv + .d1..d6 in sequence ───── */
.rv.d4 { transition-delay: 400ms; }
.rv.d5 { transition-delay: 500ms; }
.rv.d6 { transition-delay: 600ms; }

/* ── 6. Number count-up stat strip ─────────────────────────────────────── */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 40px;
    padding-top: 36px;
    border-top: 1px solid rgba(250,246,240,.14);
}
.stat-tile { text-align: center; }
.stat-num {
    font-family: var(--f-display);
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 600;
    color: var(--bronze-lt);
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}
.stat-label {
    display: block;
    margin-top: 8px;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted-d);
}
@media (max-width: 760px) {
    .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
}

/* ── 7. Floating hero particles — small golden motes drifting upward ──── */
.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.hero-particles span {
    position: absolute;
    bottom: -20px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--bronze-lt), transparent 70%);
    opacity: 0;
    animation: particleFloat linear infinite;
}
@keyframes particleFloat {
    0%   { transform: translateY(0) translateX(0) scale(.6); opacity: 0; }
    10%  { opacity: .85; }
    90%  { opacity: .4; }
    100% { transform: translateY(-420px) translateX(var(--drift, 20px)) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce), (max-width: 640px) {
    .hero-particles { display: none; }
}

/* ── 8. Hero gradient mesh backdrop (sits behind hero photos) ─────────── */
.hero { position: relative; isolation: isolate; }
.hero::before {
    content: "";
    position: absolute;
    inset: -10% -10% auto -10%;
    height: 140%;
    background:
        radial-gradient(circle at 18% 22%, rgba(185,142,100,.16), transparent 45%),
        radial-gradient(circle at 82% 70%, rgba(109,84,62,.14), transparent 50%),
        radial-gradient(circle at 55% 95%, rgba(136,105,76,.10), transparent 55%);
    filter: blur(10px);
    z-index: -1;
    animation: meshDrift 22s ease-in-out infinite alternate;
}
@keyframes meshDrift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-2%, 2%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }

/* ── 9. Icon bounce/wiggle on hover (pico + academy-ico glyphs) ───────── */
.pico, .academy-ico {
    display: inline-block;
    transition: transform .3s var(--ease-out);
}
.svc-panel-head:hover .pico,
.academy-card:hover .academy-ico {
    animation: iconWiggle .5s ease-in-out;
}
@keyframes iconWiggle {
    0%, 100% { transform: rotate(0) scale(1); }
    25%      { transform: rotate(-10deg) scale(1.12); }
    75%      { transform: rotate(10deg) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { .svc-panel-head:hover .pico, .academy-card:hover .academy-ico { animation: none; } }

/* ── 10. 3D tilt-on-hover for signature service cards ──────────────────── */
@media (pointer: fine) {
    .svc-feat {
        transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
        transition: transform .2s var(--ease-out);
    }
}

/* ════════════════════════════════════════════════════════════════════
   EXTRA "RONAK" PACK — ROUND 2 (split-text hero, FAQ accordion, back-
   to-top, cursor spotlight, gradient-border cards, confetti burst).
   Same rules as round 1: additive only, own block, pure CSS/JS.
   ════════════════════════════════════════════════════════════════════ */

/* ── 11. Day/night dynamic greeting line above the hero eyebrow ───────── */
.hero-greeting {
    font-family: var(--f-body);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: 6px;
    min-height: 1em;
    opacity: 0;
    animation: fadeInSimple .6s var(--ease-out) .15s forwards;
}
@keyframes fadeInSimple { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-greeting { animation: none; opacity: 1; } }

/* ── 12. Split-text word-by-word entrance for the hero heading ────────── */
.hero-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(16px);
    animation: heroWordIn .7s var(--ease-out) forwards;
    animation-delay: var(--wd, 0s);
}
@keyframes heroWordIn {
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-word { opacity: 1; transform: none; animation: none; }
}

/* ── 13. FAQ accordion ──────────────────────────────────────────────── */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    border: 1px solid var(--rule);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bone);
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.faq-item.open { border-color: var(--bronze); box-shadow: var(--sh-1); }
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--f-body);
    font-size: .98rem;
    font-weight: 500;
    color: var(--ink);
    text-align: left;
}
.faq-ic {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--rule);
    font-size: 1.1rem;
    line-height: 1;
    color: var(--bronze-dp);
    transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.faq-item.open .faq-ic {
    transform: rotate(45deg);
    background: var(--bronze);
    color: var(--bone);
    border-color: var(--bronze);
}
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--ease-out);
}
.faq-a p {
    margin: 0;
    padding: 0 22px 20px;
    color: var(--muted);
    line-height: 1.65;
    font-size: .92rem;
}
@media (prefers-reduced-motion: reduce) { .faq-a { transition: none; } }

/* ── 14. Back-to-top floating button ───────────────────────────────── */
.back-to-top {
    position: fixed;
    left: 24px;
    bottom: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--bone);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    z-index: 400;
    opacity: 0;
    transform: translateY(12px) scale(.9);
    pointer-events: none;
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), background-color .25s;
    box-shadow: var(--sh-2);
}
.back-to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { background: var(--bronze-dp); }
.back-to-top svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .back-to-top { left: 16px; bottom: 16px; width: 42px; height: 42px; } }

/* ── 15. Cursor-follow spotlight inside dark sections ──────────────── */
.s-dark { position: relative; }
.s-dark.has-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle 280px at var(--sx, 50%) var(--sy, 50%), rgba(185,142,100,.10), transparent 70%);
    transition: opacity .3s;
}
.s-dark .wrap { position: relative; z-index: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
    .s-dark.has-spotlight::before { display: none; }
}

/* ── 16. Animated gradient border on hover (gallery + testimonial cards) */
.gal-item, .testi-card {
    position: relative;
}
.gal-item::before, .testi-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--ga, 0deg), var(--bronze-lt), var(--bronze-dp), var(--bronze), var(--bronze-lt));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s var(--ease-out);
    pointer-events: none;
    z-index: 2;
    animation: gaSpin 4s linear infinite;
    animation-play-state: paused;
}
.gal-item:hover::before, .testi-card:hover::before {
    opacity: 1;
    animation-play-state: running;
}
@keyframes gaSpin { to { --ga: 360deg; } }
@property --ga {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@media (prefers-reduced-motion: reduce) {
    .gal-item::before, .testi-card::before { animation: none; }
}

/* ── 17. Confetti/sparkle burst (spans injected by JS on booking submit) */
.confetti-burst {
    position: fixed;
    pointer-events: none;
    z-index: 900;
}
.confetti-burst span {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--bronze-lt);
    opacity: 1;
    animation: confettiPop .9s ease-out forwards;
}
@keyframes confettiPop {
    to {
        transform: translate(var(--cx, 0), var(--cy, -80px)) rotate(var(--cr, 180deg));
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) { .confetti-burst { display: none; } }