/* -----------------------------------------------------------------------------------
   Fiorda Hair Salon — Design Enhancement Layer
   Loaded AFTER style.css. Fonts are inherited from the original theme
   (Cormorant Garamond + Didact Gothic) and are never overridden here.

   01. Design tokens
   02. Shared primitives (eyebrow, titles, buttons, chips, icons)
   03. Navbar
   04. Hero
   05. Trust bar
   06. About
   07. Service cards
   08. Stats band
   09. Process steps
   10. Pricing
   11. Gallery
   12. Reviews
   13. CTA band
   14. Footer
   15. Floating action dock
   16. Reveal animation + misc
   17. Responsive
----------------------------------------------------------------------------------- */

/* ======= 01. Design tokens ======= */
:root {
    --brand: #613228;
    --brand-dark: #401f18;
    --brand-soft: #8a5a4a;
    --gold: #eccba1;
    --gold-deep: #d3a670;
    --sand: #f5e3cd;
    --cream: #f9efe2;
    --bg: #fcf8f3;
    --ink: #241611;
    --muted: #6f5a52;
    --line: rgba(97, 50, 40, 0.14);
    --line-soft: rgba(97, 50, 40, 0.08);
    --shadow-sm: 0 2px 10px rgba(64, 31, 24, 0.06);
    --shadow-md: 0 14px 34px rgba(64, 31, 24, 0.10);
    --shadow-lg: 0 26px 60px rgba(64, 31, 24, 0.16);
    --radius: 4px;
    --radius-lg: 10px;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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


/* ======= 02. Shared primitives ======= */

/* Eyebrow label with a hairline rule — replaces the bare letterspaced span */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--brand-soft);
    margin-bottom: 14px;
}

.eyebrow::before {
    content: '';
    width: 34px;
    height: 1px;
    background: var(--gold-deep);
}

.eyebrow.centered {
    justify-content: center;
}

.eyebrow.centered::after {
    content: '';
    width: 34px;
    height: 1px;
    background: var(--gold-deep);
}

.eyebrow.on-dark {
    color: var(--gold);
}

.eyebrow.on-dark::before,
.eyebrow.on-dark::after {
    background: rgba(236, 203, 161, 0.55);
}

/* Section heading block */
.sec-head {
    margin-bottom: 46px;
}

.sec-head h2 {
    font-size: 46px;
    color: var(--brand);
    line-height: 1.12em;
    margin-bottom: 14px;
}

.sec-head p {
    font-size: 18px;
    color: var(--muted);
    max-width: 620px;
    margin-bottom: 0;
}

.sec-head.centered {
    text-align: center;
}

.sec-head.centered p {
    margin-left: auto;
    margin-right: auto;
}

.sec-head.on-dark h2 {
    color: #fff;
}

.sec-head.on-dark p {
    color: rgba(255, 255, 255, 0.82);
}

/* Ornament divider — small diamond between two rules */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 18px;
    max-width: 260px;
    color: var(--gold-deep);
}

.ornament::before,
.ornament::after {
    content: '';
    height: 1px;
    flex: 1;
    background: currentColor;
    opacity: .55;
}

.ornament i {
    font-size: 11px;
}

/* Buttons — solid, outline and light variants sharing one shape */
.btn-f {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 15px 32px;
    border: 1px solid var(--brand);
    background: var(--brand);
    color: var(--bg);
    position: relative;
    overflow: hidden;
    transition: color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
    z-index: 1;
}

.btn-f::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .4s var(--ease);
    z-index: -1;
}

.btn-f:hover {
    color: var(--brand-dark);
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-f:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.btn-f i {
    font-size: 14px;
}

.btn-f.outline {
    background: transparent;
    color: var(--brand);
}

.btn-f.outline:hover {
    color: var(--brand-dark);
}

.btn-f.light {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.btn-f.light:hover {
    color: var(--brand-dark);
    border-color: var(--gold);
}

.btn-f.solid-light {
    background: var(--bg);
    border-color: var(--bg);
    color: var(--brand);
}

.btn-group-f {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* Text link with arrow */
.link-f {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand);
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--gold-deep);
    transition: gap .3s var(--ease), color .3s var(--ease);
}

.link-f:hover {
    gap: 16px;
    color: var(--brand-dark);
}

/* Circular / squared icon holders */
.icon-round {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    color: var(--brand);
    font-size: 24px;
    border: 1px solid var(--line);
    transition: all .4s var(--ease);
}

/* Small pill badge */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 7px 16px;
    border-radius: 40px;
    background: var(--cream);
    border: 1px solid var(--line);
    color: var(--brand);
}

.pill i {
    color: var(--gold-deep);
}

.pill.on-dark {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Star rating row */
.stars {
    color: #e8a33d;
    font-size: 13px;
    letter-spacing: 3px;
}


/* ======= 03. Navbar ======= */
.navbar {
    padding-top: 18px;
    height: auto;
    transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}

/* the theme's own .logo anchor is a fixed 120px/100px box sized for its
   original small mark; this site's logo image is wider, so let the anchor
   size to its image instead of clamping it back down */
.navbar .logo {
    width: auto;
    max-width: 60vw;
}

.navbar .logo img {
    width: 301px;
    max-width: 100%;
    height: auto;
    transition: all .4s var(--ease);
}

.navbar .navbar-nav .nav-link {
    position: relative;
    padding: 8px 2px;
    margin: 5px 16px;
    letter-spacing: .6px;
}

.navbar .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--gold-deep);
    transition: width .35s var(--ease);
}

.navbar .navbar-nav .nav-link:hover::after,
.navbar .navbar-nav .nav-link.active::after {
    width: 100%;
}

/* Booking CTA docked in the nav */
.nav-cta {
    margin-left: 22px;
}

.nav-cta a {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 14px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--brand);
    padding: 11px 24px;
    border: 1px solid var(--brand);
    transition: all .35s var(--ease);
    white-space: nowrap;
}

.nav-cta a:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--brand-dark);
}

/* Interior pages open on a dark page-hero — flip the nav to light until it sticks */
.nav-on-dark:not(.nav-scroll) .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.88);
}

.nav-on-dark:not(.nav-scroll) .navbar-nav .nav-link:hover,
.nav-on-dark:not(.nav-scroll) .navbar-nav .active {
    color: #fff !important;
}

.nav-on-dark:not(.nav-scroll) .navbar-nav .nav-link::after {
    background: var(--gold);
}

.nav-on-dark:not(.nav-scroll) .nav-cta a {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.nav-on-dark:not(.nav-scroll) .nav-cta a:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--brand-dark);
}

.nav-on-dark:not(.nav-scroll) .navbar-toggler {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.45);
}

.nav-on-dark:not(.nav-scroll) .navbar-toggler .icon-bar i {
    color: #fff;
}

.nav-scroll {
    padding-top: 6px;
    padding-bottom: 6px;
    background: rgba(252, 248, 243, 0.94);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    box-shadow: 0 4px 22px rgba(64, 31, 24, 0.07);
    border-bottom: 1px solid var(--line-soft);
}

.nav-scroll .logo {
    width: auto;
}

.nav-scroll .logo img {
    width: 220px !important;
    max-width: 100%;
    height: auto !important;
}

.navbar-toggler {
    border: 1px solid var(--line);
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.6);
}

.navbar-toggler .icon-bar i {
    font-size: 18px;
    color: var(--brand);
}


/* ======= 04. Hero ======= */
/* the theme leaves .header static, which detaches the scroll cue */
.header {
    position: relative;
}

.header .item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(252, 248, 243, 0.92) 0%, rgba(252, 248, 243, 0.72) 38%, rgba(252, 248, 243, 0.12) 72%, rgba(252, 248, 243, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

/* keep the theme's absolute centering — only lift it above the scrim */
.header .caption {
    z-index: 3;
}

.hero-copy h1 {
    font-size: 66px !important;
    line-height: 1.04em;
    letter-spacing: .5px;
    color: var(--brand) !important;
    margin-bottom: 18px;
}

/* beats [data-overlay-dark] span, which would wash the eyebrow out */
.hero-copy .eyebrow {
    color: var(--brand-soft);
}

.hero-copy h1 em {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--brand-soft);
    display: block;
}

.hero-copy .lead-f {
    font-family: 'Cormorant Garamond', serif;
    font-size: 21px;
    font-style: italic;
    line-height: 1.7em;
    color: var(--ink);
    max-width: 480px;
    margin-bottom: 30px;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

.hero-badges .pill {
    background: rgba(255, 255, 255, 0.72);
    color: var(--brand);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.hero-badges .pill i {
    color: var(--gold-deep);
}

/* Scroll cue */
.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    z-index: 8;
    text-align: center;
    color: var(--brand);
    font-family: 'Didact Gothic', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.scroll-cue span {
    display: block;
    margin-bottom: 8px;
    opacity: .75;
}

.scroll-cue i {
    display: block;
    font-size: 16px;
    animation: cueBob 1.9s infinite var(--ease);
}

@keyframes cueBob {

    0%,
    100% {
        transform: translateY(0);
        opacity: .5;
    }

    50% {
        transform: translateY(7px);
        opacity: 1;
    }
}


/* ======= 04b. Interior page hero ======= */
.page-hero {
    height: auto !important;
    min-height: 56vh;
    z-index: auto !important;
    display: flex;
    align-items: center;
    padding: 190px 0 90px;
    position: relative;
}

.page-hero .container {
    position: relative;
    z-index: 3;
}

/* Warm scrim so the title reads on any background photo */
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(105deg, rgba(64, 31, 24, 0.72) 0%, rgba(64, 31, 24, 0.34) 55%, rgba(64, 31, 24, 0.12) 100%);
    pointer-events: none;
}

.page-hero h1 {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 56px !important;
    line-height: 1.08em;
    color: #fff !important;
    margin-bottom: 16px;
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.72);
}

.crumbs a {
    color: rgba(255, 255, 255, 0.9);
    transition: color .3s var(--ease);
}

.crumbs a:hover {
    color: var(--gold);
}

.crumbs i {
    font-size: 11px;
    color: var(--gold);
}

.crumbs span {
    color: var(--gold);
}

@media screen and (max-width: 767px) {
    .page-hero {
        min-height: 0;
        padding: 150px 0 60px;
        margin-top: 0 !important;
    }

    .page-hero h1 {
        font-size: 34px !important;
    }

    /* fixed attachment is unreliable on mobile browsers */
    .page-hero.bg-fixed {
        background-attachment: scroll;
    }
}


/* ======= 05. Trust bar ======= */
.trust-bar {
    background: var(--cream);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 54px 0;
    position: relative;
    z-index: 2;
}

.trust-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.trust-item .t-ico {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gold-deep);
    color: var(--brand);
    font-size: 21px;
    transform: rotate(45deg);
    transition: all .4s var(--ease);
}

.trust-item .t-ico i {
    transform: rotate(-45deg);
}

.trust-item:hover .t-ico {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--gold);
}

.trust-item h5 {
    font-size: 18px;
    color: var(--brand);
    margin-bottom: 5px;
}

.trust-item p {
    font-size: 16px;
    font-style: normal;
    color: var(--muted);
    margin-bottom: 0;
    line-height: 1.6em;
}


/* ======= 06. About ======= */
.about-media {
    position: relative;
}

.about-media .shot {
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.about-media .shot img {
    display: block;
    transition: transform 1.1s var(--ease);
}

.about-media:hover .shot img {
    transform: scale(1.04);
}

.about-media .frame {
    position: absolute;
    inset: 22px -22px -22px 22px;
    border: 1px solid var(--gold-deep);
    z-index: -1;
}

/* Experience badge over the photo */
.exp-badge {
    position: absolute;
    left: -26px;
    bottom: 34px;
    background: var(--brand);
    color: var(--bg);
    padding: 22px 26px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.exp-badge strong {
    display: block;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 40px;
    line-height: 1;
    color: var(--gold);
}

.exp-badge span {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-top: 6px;
}

/* Checklist */
.check-list {
    margin: 26px 0 30px;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    color: var(--ink);
    margin-bottom: 12px;
}

.check-list li i {
    color: var(--gold-deep);
    font-size: 15px;
    margin-top: 6px;
}

/* Signature line */
.signature {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--line-soft);
}

.signature .sig-name {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 26px;
    color: var(--brand);
    line-height: 1.2;
}

.signature .sig-role {
    display: block;
    font-family: 'Didact Gothic', sans-serif;
    font-style: normal;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px;
}


/* ======= 07. Service cards ======= */
.svc-grid {
    margin-top: -10px;
}

.svc-card {
    position: relative;
    display: block;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-sm);
    margin-bottom: 30px;
    transition: box-shadow .45s var(--ease), transform .45s var(--ease);
}

.svc-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
}

.svc-card .svc-img {
    position: relative;
    overflow: hidden;
    height: 290px;
}

.svc-card .svc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}

.svc-card:hover .svc-img img {
    transform: scale(1.07);
}

.svc-card .svc-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(36, 22, 17, 0.55) 0%, rgba(36, 22, 17, 0.05) 55%, rgba(36, 22, 17, 0) 100%);
    transition: opacity .4s var(--ease);
}

/* Floating icon chip straddling image and body.
   It lives in .svc-body, not .svc-img — the image clips its overflow. */
.svc-card .svc-ico {
    position: absolute;
    right: 22px;
    top: -26px;
    z-index: 3;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--brand);
    font-size: 20px;
    border: 1px solid var(--gold-deep);
    transition: all .4s var(--ease);
}

.svc-card:hover .svc-ico {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--gold);
}

.svc-card .svc-body {
    position: relative;
    padding: 34px 26px 28px;
}

.svc-card .svc-body h4 {
    font-size: 23px;
    color: var(--brand);
    margin-bottom: 10px;
}

.svc-card .svc-body p {
    font-size: 17px;
    font-style: normal;
    color: var(--muted);
    line-height: 1.65em;
    margin-bottom: 18px;
    min-height: 56px;
}

.svc-card .svc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

.svc-card .svc-price {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 16px;
    color: var(--brand-soft);
}

.svc-card .svc-more {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand);
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    transition: gap .3s var(--ease);
}

.svc-card:hover .svc-more {
    gap: 14px;
}


/* ======= 08. Stats band ======= */
.stats-band {
    background: var(--brand);
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

.stats-band::before {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(236, 203, 161, 0.22);
    pointer-events: none;
}

.stat-item {
    text-align: center;
    color: #fff;
    padding: 10px 0;
}

.stat-item i {
    display: block;
    font-size: 24px;
    color: var(--gold);
    margin-bottom: 14px;
}

.stat-item .stat-num {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 46px;
    line-height: 1;
    color: #fff;
    margin-bottom: 8px;
}

.stat-item .stat-label {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}


/* ======= 09. Process steps ======= */
.process {
    background: var(--bg);
}

.step {
    position: relative;
    text-align: center;
    padding: 0 14px;
}

/* Connector line between steps */
.step::after {
    content: '';
    position: absolute;
    top: 38px;
    left: 60%;
    width: 80%;
    border-top: 1px dashed var(--gold-deep);
    opacity: .6;
}

/* each .step is the only child of its column, so hide the connector
   on the last column instead of the last .step */
.process .row > [class*="col-"]:last-child .step::after {
    display: none;
}

.step .step-ico {
    position: relative;
    z-index: 2;
    width: 78px;
    height: 78px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--cream);
    border: 1px solid var(--gold-deep);
    color: var(--brand);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s var(--ease);
}

.step:hover .step-ico {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--gold);
    transform: translateY(-5px);
}

.step .step-num {
    position: absolute;
    top: -4px;
    right: calc(50% - 46px);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--gold);
    font-family: 'Didact Gothic', sans-serif;
    font-size: 12px;
    line-height: 26px;
    z-index: 3;
}

.step h5 {
    font-size: 19px;
    color: var(--brand);
    margin-bottom: 8px;
}

.step p {
    font-size: 16px;
    font-style: normal;
    color: var(--muted);
    line-height: 1.6em;
    margin-bottom: 0;
}


/* ======= 10. Pricing ======= */
.price-card {
    background: rgba(252, 248, 243, 0.96);
    padding: 34px 30px 30px;
    height: 100%;
    box-shadow: var(--shadow-md);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.price-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.price-card .pc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.price-card .pc-head i {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sand);
    color: var(--brand);
    font-size: 18px;
}

.price-card .pc-head h4 {
    font-size: 22px;
    color: var(--brand);
    margin-bottom: 0;
}

.price-card .pc-head small {
    display: block;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 3px;
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 0;
}

.price-row .pr-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    color: var(--ink);
    white-space: nowrap;
}

.price-row .pr-dots {
    flex: 1 1 auto;
    border-bottom: 1px dotted rgba(97, 50, 40, 0.35);
    transform: translateY(-4px);
}

.price-row .pr-val {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 17px;
    color: var(--brand);
    white-space: nowrap;
}

.price-row.feature .pr-name,
.price-row.feature .pr-val {
    color: var(--brand);
}

.price-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 44px;
    padding: 18px 26px;
    border: 1px dashed rgba(255, 255, 255, 0.45);
    color: #fff;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-align: center;
}

.price-note i {
    color: var(--gold);
    font-size: 19px;
}


/* ======= 11. Gallery ======= */
.g-item {
    margin-bottom: 30px;
}

.g-box {
    position: relative;
    display: block;
    overflow: hidden;
    height: 320px;
    background: var(--sand);
}

.g-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease);
}

.g-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(64, 31, 24, 0.4);
    opacity: 0;
    transition: opacity .4s var(--ease);
}

.g-box:hover img {
    transform: scale(1.08);
}

.g-box:hover::after {
    opacity: 1;
}

.g-box .g-zoom {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.7);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    opacity: 0;
    transition: all .4s var(--ease);
}

.g-box:hover .g-zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.g-box .g-tag {
    position: absolute;
    z-index: 3;
    left: 20px;
    bottom: 20px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    opacity: 0;
    transform: translateY(10px);
    transition: all .45s var(--ease);
}

.g-box:hover .g-tag {
    opacity: 1;
    transform: translateY(0);
}

.g-box.tall {
    height: 100%;
    min-height: 320px;
}


/* ======= 12. Reviews ======= */
.reviews {
    background: var(--cream);
}

.rev-summary {
    background: #fff;
    padding: 34px 30px;
    box-shadow: var(--shadow-md);
    text-align: center;
    margin-bottom: 30px;
}

.rev-summary .rs-score {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 56px;
    line-height: 1;
    color: var(--brand);
}

.rev-summary .stars {
    font-size: 16px;
    margin: 12px 0 10px;
}

.rev-summary p {
    font-style: normal;
    font-size: 16px;
    color: var(--muted);
    margin-bottom: 0;
}

.rev-card {
    background: #fff;
    padding: 34px 32px;
    box-shadow: var(--shadow-sm);
    position: relative;
    margin: 6px;
    transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}

.rev-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.rev-card .rev-quote {
    position: absolute;
    top: 24px;
    right: 28px;
    font-size: 34px;
    color: var(--sand);
}

.rev-card .stars {
    margin-bottom: 14px;
}

.rev-card p {
    font-size: 18px;
    line-height: 1.72em;
    color: var(--ink);
    margin-bottom: 22px;
}

.rev-card .rev-who {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
}

.rev-card .rev-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--brand);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 16px;
}

.rev-card .rev-name {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 16px;
    color: var(--brand);
    line-height: 1.3;
}

.rev-card .rev-src {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--muted);
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}

.reviews .owl-theme .owl-dots {
    margin-top: 26px;
}

.reviews .owl-theme .owl-dots .owl-dot span {
    background: rgba(97, 50, 40, 0.25);
    width: 9px;
    height: 9px;
    margin: 5px;
}

.reviews .owl-theme .owl-dots .owl-dot.active span,
.reviews .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--brand);
}


/* ======= 13. CTA band ======= */
.cta-band {
    position: relative;
    padding: 96px 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(64, 31, 24, 0.88) 0%, rgba(64, 31, 24, 0.62) 100%);
}

.cta-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.cta-inner h2 {
    font-size: 48px;
    color: #fff;
    line-height: 1.12em;
    margin-bottom: 16px;
}

.cta-inner p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 620px;
    margin: 0 auto 32px;
}

.cta-inner .btn-group-f {
    justify-content: center;
}

.cta-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 34px;
    margin-top: 38px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.cta-meta a,
.cta-meta span {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    transition: color .3s var(--ease);
}

.cta-meta a:hover {
    color: var(--gold);
}

.cta-meta i {
    color: var(--gold);
    font-size: 15px;
}


/* ======= 14. Footer ======= */
.main-footer {
    padding-top: 74px;
    border-top: 1px solid var(--line-soft);
}

.foot-brand img {
    width: 240px;
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.foot-brand p {
    font-size: 17px;
    color: var(--muted);
    max-width: 330px;
}

.main-footer .fothead h6 {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 13px !important;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand) !important;
    padding-bottom: 14px;
    margin-bottom: 20px;
    position: relative;
}

.main-footer .fothead h6::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 1px;
    background: var(--gold-deep);
}

/* Contact rows with icons */
.foot-line {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 16px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    color: var(--ink);
    line-height: 1.55em;
}

.foot-line i {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--brand);
    font-size: 13px;
    margin-top: 2px;
    transition: all .35s var(--ease);
}

.foot-line:hover i {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--gold);
}

.foot-line a {
    color: inherit;
    transition: color .3s var(--ease);
}

.foot-line a:hover {
    color: var(--brand);
}

/* Opening hours list */
.hours-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--line-soft);
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    color: var(--ink);
}

.hours-list li:last-child {
    border-bottom: 0;
}

.hours-list li .h-day {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 14px;
    letter-spacing: .5px;
    color: var(--muted);
}

.hours-list li .h-time {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 14px;
    color: var(--brand);
}

.hours-list li.closed .h-time {
    color: #a5837a;
}

.hours-list li.today {
    background: var(--cream);
    margin: 0 -10px;
    padding: 7px 10px;
}

.hours-list li.today .h-day,
.hours-list li.today .h-time {
    color: var(--brand);
}

/* Footer social buttons */
.foot-social {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.foot-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    color: var(--brand);
    font-size: 15px;
    transition: all .35s var(--ease);
}

.foot-social a:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--gold);
    transform: translateY(-3px);
}

.main-footer .sub-footer {
    border-top: 1px solid var(--line-soft);
    padding: 26px 0 20px;
}

.main-footer .sub-footer p {
    font-size: 15px !important;
    color: var(--muted);
    margin-bottom: 0;
}

.sub-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    justify-content: flex-end;
}

.sub-links a {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 14px;
    color: var(--muted);
    transition: color .3s var(--ease);
}

.sub-links a:hover {
    color: var(--brand);
}


/* ======= 15. Floating action dock ======= */
.fab-dock {
    position: fixed;
    right: 26px;
    bottom: 92px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fab-dock a {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--brand);
    font-size: 18px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transition: all .35s var(--ease);
}

.fab-dock a:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--gold);
    transform: translateY(-3px);
}

/* Tooltip label */
.fab-dock a::after {
    content: attr(data-label);
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    white-space: nowrap;
    background: var(--brand);
    color: var(--bg);
    font-family: 'Didact Gothic', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 6px 12px;
    opacity: 0;
    pointer-events: none;
    transition: all .3s var(--ease);
}

.fab-dock a:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.fab-dock a.fab-call {
    background: var(--brand);
    color: var(--gold);
    border-color: var(--brand);
}

.fab-dock a.fab-call:hover {
    background: var(--gold);
    color: var(--brand-dark);
    border-color: var(--gold);
}

/* Legacy header-injected dock, if any page still has it */
.social-icons {
    display: none !important;
}

/* Mobile sticky booking bar */
.mobile-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9997;
    background: var(--bg);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(64, 31, 24, 0.10);
}

.mobile-bar a {
    flex: 1 1 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 6px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--brand);
}

.mobile-bar a + a {
    border-left: 1px solid var(--line-soft);
}

.mobile-bar a.primary {
    background: var(--brand);
    color: var(--bg);
}


/* ======= 16. Reveal animation + misc ======= */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    will-change: opacity, transform;
}

.reveal.in {
    opacity: 1;
    transform: none;
}

.reveal.d1 {
    transition-delay: .09s;
}

.reveal.d2 {
    transition-delay: .18s;
}

.reveal.d3 {
    transition-delay: .27s;
}

.reveal.d4 {
    transition-delay: .36s;
}

@media (prefers-reduced-motion: reduce) {

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .scroll-cue i {
        animation: none;
    }
}

/* Softer alternating section grounds */
.bg-cream {
    background: var(--cream);
}

.bg-plain {
    background: var(--bg);
}

/* To-top button polish */
.progress-wrap {
    box-shadow: inset 0 0 0 2px rgba(97, 50, 40, 0.18);
    background: var(--bg);
}

.progress-wrap::after {
    color: var(--brand);
}


/* ======= 17e. Article ======= */
.post-article {
    max-width: 780px;
    margin: 0 auto;
}

.post-article h1,
.post-article h2.post-title {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 32px;
    color: var(--brand);
    line-height: 1.3em;
    margin-bottom: 14px;
}

.post-article .post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--brand-soft);
    padding-bottom: 24px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--line-soft);
}

.post-article .post-meta .tag {
    color: var(--brand);
    font-weight: 600;
}

.post-article p {
    font-size: 18px;
    line-height: 1.8em;
    color: var(--ink);
    margin-bottom: 20px;
}

.post-article p strong {
    display: block;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 4px;
}

.post-article ul {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.post-article ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    font-size: 17px;
    line-height: 1.65em;
    color: var(--ink);
}

.post-article ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 3px;
    font-size: 12px;
    color: var(--gold-deep);
}


/* ======= 17d. Blog ======= */
.blog-card {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    box-shadow: var(--shadow-sm);
    margin-bottom: 30px;
    overflow: hidden;
    transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}

.blog-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.blog-card .bc-img {
    flex: 0 0 42%;
    max-width: 42%;
    overflow: hidden;
}

.blog-card .bc-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}

.blog-card:hover .bc-img img {
    transform: scale(1.06);
}

.blog-card .bc-body {
    flex: 1 1 0;
    padding: 30px 30px 26px;
}

.blog-card .bc-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--brand-soft);
    margin-bottom: 12px;
}

.blog-card .bc-meta .tag {
    color: var(--brand);
    font-weight: 600;
}

.blog-card h3 {
    font-size: 24px;
    color: var(--brand);
    margin-bottom: 12px;
    line-height: 1.3em;
}

.blog-card h3 a {
    color: inherit;
}

.blog-card p {
    color: var(--muted);
    margin-bottom: 18px;
}

@media screen and (max-width: 767px) {
    .blog-card {
        flex-direction: column;
    }

    .blog-card .bc-img {
        flex: 0 0 auto;
        max-width: 100%;
        height: 220px;
    }
}


/* ======= 17c. Service detail page ======= */
.svc-detail-media {
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin: 28px 0 32px;
}

.svc-detail-media img {
    display: block;
    width: 100%;
    transition: transform 1.1s var(--ease);
}

.svc-detail-media:hover img {
    transform: scale(1.04);
}

.svc-detail-copy {
    font-size: 18px;
    line-height: 1.75em;
    color: var(--ink);
}

.svc-detail-copy strong {
    color: var(--brand);
}

.svc-sidebar-card {
    background: #fff;
    box-shadow: var(--shadow-sm);
    padding: 8px;
    margin-bottom: 26px;
}

.svc-sidebar-card .sb-head {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--brand);
    padding: 18px 20px 12px;
}

.svc-sidebar-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.svc-sidebar-card li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    color: var(--ink);
    border-top: 1px solid var(--line-soft);
    transition: color .3s var(--ease), padding-left .3s var(--ease);
}

.svc-sidebar-card li a::after {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 13px;
    color: var(--gold-deep);
    opacity: 0;
    transition: opacity .3s var(--ease);
}

.svc-sidebar-card li a:hover,
.svc-sidebar-card li.active a {
    color: var(--brand);
    padding-left: 26px;
}

.svc-sidebar-card li a:hover::after,
.svc-sidebar-card li.active a::after {
    opacity: 1;
}

.svc-sidebar-card li.active a {
    font-weight: 600;
}


/* ======= 17a. FAQ accordion ======= */
.accordion-box .accordion {
    background: #fff;
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
    transition: box-shadow .3s var(--ease);
}

.accordion-box .accordion.active-block {
    box-shadow: var(--shadow-md);
}

.accordion-box .acc-btn {
    position: relative;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 17px;
    letter-spacing: .2px;
    color: var(--brand);
    padding: 22px 56px 22px 26px;
    cursor: pointer;
    transition: color .3s var(--ease);
}

/* theme's own +/- glyph is replaced by the chevron below */
.accordion-box .acc-btn::before {
    display: none !important;
}

.accordion-box .acc-btn::after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--gold-deep);
    transition: transform .3s var(--ease);
}

.accordion-box .accordion.active-block .acc-btn::after {
    transform: translateY(-50%) rotate(180deg);
}

.accordion-box .acc-content .content {
    padding: 0 26px 24px;
}

.accordion-box .acc-content .text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    line-height: 1.7em;
    color: var(--muted);
    border-top: 1px solid var(--line-soft);
    padding-top: 16px;
}

.faq-side {
    position: sticky;
    top: 120px;
}

.faq-side .shot {
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.faq-side .shot img {
    display: block;
    width: 100%;
}

.faq-side .call-tab {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 24px;
    background: linear-gradient(to top, rgba(64, 31, 24, 0.92), rgba(64, 31, 24, 0));
    text-align: center;
}

.faq-side .call-tab a {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    color: #fff;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 3px;
}

@media screen and (max-width: 991px) {
    .faq-side {
        position: static;
        margin-top: 34px;
    }
}


/* ======= 17b. Contact page ======= */
.contact-info-card {
    background: #fff;
    box-shadow: var(--shadow-sm);
    padding: 8px;
    margin-bottom: 30px;
}

.contact-info-card .foot-line {
    padding: 18px 20px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--line-soft);
}

.contact-info-card .foot-line:last-child {
    border-bottom: 0;
}

.contact-hours-card {
    background: var(--brand);
    color: #fff;
    padding: 30px 28px;
}

.contact-hours-card h5 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-hours-card h5 i {
    color: var(--gold);
}

.contact-hours-card .hours-list li {
    color: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.14);
}

.contact-hours-card .hours-list li .h-day {
    color: rgba(255, 255, 255, 0.6);
}

.contact-hours-card .hours-list li .h-time {
    color: var(--gold);
}

.contact-hours-card .hours-list li.closed .h-time {
    color: rgba(255, 255, 255, 0.45);
}

.contact-hours-card .hours-list li.today {
    background: rgba(255, 255, 255, 0.1);
}

.contact-hours-card .hours-list li.today .h-day,
.contact-hours-card .hours-list li.today .h-time {
    color: #fff;
}

.form-card {
    background: #fff;
    box-shadow: var(--shadow-md);
    padding: 44px 40px;
}

.form-card h3 {
    font-size: 30px;
    color: var(--brand);
    margin-bottom: 8px;
}

.form-card > p {
    color: var(--muted);
    margin-bottom: 26px;
}

.form-f .form-group {
    margin-bottom: 20px;
}

.form-f input,
.form-f textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--line);
    background: transparent;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    color: var(--ink);
    padding: 10px 2px;
    transition: border-color .3s var(--ease);
}

.form-f input:focus,
.form-f textarea:focus {
    outline: none;
    border-color: var(--gold-deep);
}

.form-f input::placeholder,
.form-f textarea::placeholder {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--muted);
    opacity: .8;
}

.form-f textarea {
    resize: vertical;
    min-height: 110px;
}

.form-f input[type="submit"] {
    display: inline-flex;
    width: auto;
    border: 1px solid var(--brand);
    background: var(--brand);
    color: var(--bg);
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 15px 34px;
    cursor: pointer;
    transition: all .35s var(--ease);
}

.form-f input[type="submit"]:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--brand-dark);
}

.map-frame {
    box-shadow: var(--shadow-md);
    line-height: 0;
    filter: grayscale(.15) contrast(1.05);
}

.map-frame iframe {
    display: block;
    width: 100%;
}

@media screen and (max-width: 767px) {
    .form-card {
        padding: 32px 24px;
    }
}


/* ======= 17. Responsive ======= */
@media screen and (max-width: 1199px) {
    .hero-copy h1 {
        font-size: 56px !important;
    }

    .step::after {
        display: none;
    }
}

@media screen and (max-width: 991px) {
    .navbar-collapse {
        background: var(--bg);
        margin-top: 12px;
        padding: 14px 18px 20px;
        border: 1px solid var(--line-soft);
        box-shadow: var(--shadow-md);
    }

    .navbar .navbar-nav .nav-link {
        margin: 4px 0;
        padding: 9px 0;
        border-bottom: 1px dashed var(--line-soft);
    }

    .nav-cta {
        margin: 14px 0 4px;
    }

    .nav-cta a {
        width: 100%;
        justify-content: center;
    }

    /* the dropped panel is cream, so the light-on-dark nav must revert */
    .nav-on-dark:not(.nav-scroll) .navbar-nav .nav-link,
    .nav-on-dark:not(.nav-scroll) .navbar-nav .nav-link:hover,
    .nav-on-dark:not(.nav-scroll) .navbar-nav .active {
        color: var(--brand) !important;
    }

    .nav-on-dark:not(.nav-scroll) .nav-cta a {
        background: var(--brand);
        border-color: var(--brand);
        color: var(--bg);
    }

    .sec-head h2,
    .cta-inner h2 {
        font-size: 38px;
    }

    .exp-badge {
        left: 12px;
    }

    .about-media .frame {
        display: none;
    }

    .trust-item {
        margin-bottom: 26px;
    }

    .stat-item {
        margin-bottom: 26px;
    }

    .step {
        margin-bottom: 34px;
    }

    .sub-links {
        justify-content: flex-start;
        margin-top: 12px;
    }
}

@media screen and (max-width: 767px) {
    .hero-copy h1 {
        font-size: 40px !important;
    }

    .hero-copy .lead-f {
        font-size: 18px;
        margin-bottom: 22px;
    }

    .hero-badges {
        gap: 8px;
        margin-top: 22px;
    }

    .hero-badges .pill {
        font-size: 12px;
        padding: 6px 12px;
    }

    .sec-head {
        margin-bottom: 34px;
    }

    .sec-head h2,
    .cta-inner h2 {
        font-size: 32px;
    }

    .btn-f {
        padding: 13px 24px;
        font-size: 14px;
    }

    .scroll-cue {
        display: none;
    }

    .cta-band {
        background-attachment: scroll;
        padding: 70px 0;
    }

    .svc-card .svc-img {
        height: 240px;
    }

    .svc-card .svc-body p {
        min-height: 0;
    }

    .g-box {
        height: 260px;
    }

    .exp-badge {
        left: 10px;
        bottom: 10px;
        padding: 16px 18px;
    }

    .exp-badge strong {
        font-size: 30px;
    }

    /* Dock moves above the sticky bar and drops the tooltips */
    .fab-dock {
        right: 16px;
        bottom: 74px;
        gap: 10px;
    }

    .fab-dock a::after {
        display: none;
    }

    .mobile-bar {
        display: flex;
    }

    /* clear the sticky bar so it never covers the last of the footer */
    body {
        padding-bottom: 54px;
    }

    .progress-wrap {
        bottom: 70px;
        right: 16px;
    }

    .price-note {
        margin-top: 30px;
        font-size: 14px;
        padding: 14px 18px;
    }
}


/* ======= 18. Cross-device / cross-browser hardening =======
   Small phones, tablets, ultra-wide monitors, iOS/Android quirks,
   and older-Safari fallbacks that the sections above don't cover. */

/* -- Universal safety: never allow sideways scroll on any viewport -- */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

/* -- iOS Safari: 100vh includes the address bar. Prefer dynamic viewport
   height where supported, keep the vh value as the fallback. -- */
.header,
.slider .owl-item,
.slider-fade .owl-item {
    min-height: 100vh;
}

@supports (height: 100dvh) {

    .header,
    .slider .owl-item,
    .slider-fade .owl-item {
        min-height: 100dvh;
    }
}

/* -- Mobile hero: .v-middle centers with an absolute top:50%/translate(-50%)
   inside a fixed-height (100vh) slide clipped by owl-carousel's
   overflow:hidden stage. On short phones the hero copy (eyebrow + two-line
   heading + lead + buttons + badges) is taller than the viewport, so
   center-anchoring pushes its top half above the frame and off-screen.
   Anchor to the top instead so the headline is always visible; only the
   badges row (least essential) may run past the fold on the shortest
   phones. -- */
@media screen and (max-width: 767px) {
    .header .v-middle {
        top: 0;
        -webkit-transform: none;
        transform: none;
        padding-top: 118px;
    }
}

@media screen and (max-width: 380px) {
    .header .v-middle {
        padding-top: 104px;
    }

    .hero-badges {
        margin-top: 16px;
    }
}

/* -- Short / landscape phones: a full-height hero hides the fold's content -- */
@media screen and (max-height: 500px) and (orientation: landscape) {

    .header,
    .slider .owl-item,
    .slider-fade .owl-item {
        min-height: auto;
        height: auto;
    }

    .header {
        padding: 100px 0 40px;
    }

    .page-hero {
        min-height: 0;
        padding: 110px 0 40px;
    }

    .scroll-cue {
        display: none;
    }

    .fab-dock {
        bottom: 20px;
    }

    .mobile-bar {
        position: static;
    }
}

/* -- Notched phones (iPhone X+ and similar Android): keep fixed UI clear
   of the safe area in both portrait and landscape -- */
@supports (padding: max(0px)) {
    .fab-dock {
        right: max(26px, env(safe-area-inset-right));
        bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px));
    }

    .mobile-bar {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .navbar.nav-scroll {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

@media screen and (max-width: 767px) {
    @supports (padding: max(0px)) {
        .fab-dock {
            bottom: max(74px, calc(env(safe-area-inset-bottom) + 74px));
        }
    }
}

/* -- Small and very small phones (older iPhone SE, compact Android) -- */
@media screen and (max-width: 380px) {

    .hero-copy h1 {
        font-size: 32px !important;
    }

    .hero-copy .lead-f {
        font-size: 16px;
    }

    .sec-head h2,
    .cta-inner h2 {
        font-size: 26px;
    }

    .page-hero h1 {
        font-size: 28px !important;
    }

    .btn-f {
        padding: 12px 20px;
        font-size: 13px;
    }

    .btn-group-f {
        gap: 10px;
    }

    .exp-badge {
        padding: 12px 14px;
    }

    .exp-badge strong {
        font-size: 24px;
    }

    .rev-card,
    .form-card {
        padding: 26px 20px;
    }

    .price-card {
        padding: 26px 20px 22px;
    }

    .mobile-bar a {
        font-size: 12px;
        padding: 12px 4px;
    }

    .fab-dock a {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }
}

/* -- Tablets in portrait and small laptops (iPad, iPad Pro, 992-1100px) -- */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    .svc-card .svc-img {
        height: 260px;
    }

    .g-box {
        height: 280px;
    }

    .about-media .frame {
        display: none;
    }
}

/* -- 13"-15" laptop range renders at the theme's native breakpoints already;
   this tightens the gap between 1200px and 1366px so nothing feels cramped -- */
@media screen and (min-width: 1200px) and (max-width: 1366px) {
    .hero-copy h1 {
        font-size: 60px !important;
    }
}

/* -- Large desktop monitors, 20"-28" (1600px-2560px+): the Bootstrap
   container already caps line length at 1170px, so widen breathing room
   and nudge up type slightly rather than stretching content edge to edge -- */
@media screen and (min-width: 1600px) {

    .sec-head h2,
    .cta-inner h2 {
        font-size: 50px;
    }

    .hero-copy h1 {
        font-size: 72px !important;
    }

    .svc-card .svc-img {
        height: 320px;
    }

    .g-box {
        height: 360px;
    }
}

@media screen and (min-width: 2000px) {

    .hero-copy h1 {
        font-size: 74px !important;
    }

    .sec-head h2,
    .cta-inner h2 {
        font-size: 54px;
    }
}

/* -- Touch devices: hover-only affordances (zoom icons, tooltips) never
   trigger, so make sure their content is reachable without a hover state -- */
@media (hover: none) and (pointer: coarse) {

    .g-box .g-zoom {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        background: rgba(252, 248, 243, 0.85);
    }

    .g-box .g-tag {
        opacity: 1;
        transform: translateY(0);
    }

    .fab-dock a::after {
        display: none;
    }

    .btn-f,
    .nav-cta a,
    .mobile-bar a,
    .fab-dock a,
    .navbar-toggler {
        min-height: 44px;
    }
}

/* -- Firefox/older Safari: backdrop-filter is unsupported without the
   prefix or at all; give blurred surfaces an opaque fallback -- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .nav-scroll {
        background: var(--bg);
    }

    .pill.on-dark,
    .nav-on-dark:not(.nav-scroll) .nav-cta a {
        background: rgba(64, 31, 24, 0.55);
    }
}