* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: var(--font-body);

    color: var(--text);

    background: #fff;

    line-height: 1.6;

}

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: var(--font-heading);

    font-weight: 600;

    line-height: 1.2;

}

button,
input,
textarea,
select {

    font: inherit;

}

.container {

    width: 90%;

    max-width: var(--container);

    margin: auto;

}

img {

    width: 100%;

    display: block;

}

a {

    text-decoration: none;

    color: inherit;

}

ul {

    list-style: none;

}

.btn {

    display: inline-block;

    padding: 14px 30px;

    background: var(--primary);

    color: white;

    border-radius: var(--border-radius);

    transition: var(--transition);

}

.btn:hover {

    opacity: .9;

}

.btn:focus-visible {

    outline: 2px solid var(--primary);

    outline-offset: 4px;

}

/* ===== TOP BAR ===== */

.topbar {

    position: relative;

    background: var(--accent);

    color: var(--white);

    font-size: .9rem;

}

.topbar-content {

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    min-height: 42px;

}

.topbar-left {

    justify-self: start;

}

.topbar-center {

    justify-self: center;

    font-size: .85rem;

    letter-spacing: .5px;

}

.topbar-right {

    justify-self: end;

    display: flex;

    gap: 18px;

}

.topbar a {

    color: inherit;

    text-decoration: none;

    transition: var(--transition);

}

.topbar a:hover {

    color: var(--primary);

}

.topbar-right a {

    height: 25px;

    width: 25px;

    opacity: 60%;

}

.topbar-right a:hover {

    opacity: 100%;

}

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

.scroll-progress {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background: transparent;

    z-index: 2000;

    pointer-events: none;

}

.scroll-progress-bar {

    width: 0;

    height: 100%;

    background: var(--accent);

    transition: width .08s linear;

}

.header {

    position: sticky;

    top: 0;

    width: 100%;

    background: #fff;

    z-index: 1000;

    transition:

        background .3s ease,

        box-shadow .3s ease;

}

.header.scrolled {

    box-shadow:

        0 12px 35px rgba(0, 0, 0, .08);

}

.navbar {

    position: relative;

    z-index: 1101;

    display: flex;

    justify-content: space-between;

    align-items: center;

    height: 88px;

    transition: height .35s ease;
}

.header.scrolled .navbar {

    height: 72px;

}

.logo img {

    display: block;

    width: clamp(200px, 15vw, 320px);

    height: auto;

    transition:

        transform .35s ease,

        opacity .35s ease;

}

.header.scrolled .logo img {

    transform: scale(.90);

}

.logo {

    font-size: 2rem;

    font-weight: bold;

    color: var(--secondary);

}

.logo span {

    color: var(--primary);

}

.nav-links {

    display: flex;

    gap: 35px;

}

.nav-links a {

    position: relative;

    font-weight: 500;

    transition:

        color .25s ease,

        transform .25s ease,

        opacity .25s ease;
    ;

}

.nav-links a:hover {

    color: var(--primary);

    transform: translateY(-2px);

}

.nav-links a.active {

    color: var(--primary);

}

.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 100%;

    height: 2px;

    background: var(--primary);

    transform: scaleX(0);

    transform-origin: center;

    transition: .35s ease;

}

/* ==========================================
   ACTIVE SERVICES NAV ITEM
   Desktop: underline Our Services when
   services.html or any service sub-page is open
========================================== */

.nav-links .services-dropdown.service-active > .services-link {
    color: var(--primary);
}

.nav-links .services-dropdown.service-active > .services-link::after {
    transform: scaleX(1);
}

.nav-links a:hover::after,

.nav-links a.active::after {

    transform: scaleX(1);

}

.nav-links a.active::before {

    transform: translateY(-50%) scaleY(1);

}

.nav-links a:focus-visible {

    outline: none;

    box-shadow: 0 0 0 3px rgba(212, 175, 55, .35);

    border-radius: 8px;

}

.nav-links .span {

    display: none;
}

/* ========================================
   SERVICES NAV DROPDOWN
======================================== */

.services-dropdown {

    position: relative;

    display: flex;

    align-items: center;

}


/* Services main link */

.services-link {

    display: flex;

    align-items: center;

    text-decoration: none;

    /* Prevent global nav hover movement */

}

.services-dropdown .services-link:hover {

    transform: none;

}


/* Dropdown toggle */

.services-toggle {

    width: 14px;

    height: 20px;

    margin-left: 3px;

    padding: 0;

    border: none;

    background: transparent;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    color: inherit;

}


/* Arrow icon */

.services-toggle::before {

    content: "";

    width: 0;

    height: 0;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    border-top: 6px solid currentColor;

    transition: transform 0.25s ease;

}


/* Rotate arrow when opened */

.services-dropdown.open .services-toggle::before {

    transform: rotate(180deg);

}


/* ========================================
   DROPDOWN MENU
======================================== */

.services-menu {

    position: absolute;

    top: calc(100% + 18px);

    left: 50%;

    transform: translateX(-50%) translateY(-8px);

    width: 230px;

    background: #ffffff;

    padding: 10px 0;

    border-radius: 8px;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.12);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;

    z-index: 1000;

}


/* Show dropdown on hover */

.services-dropdown:hover .services-menu {

    opacity: 1;

    visibility: visible;

    transform: translateX(-50%) translateY(0);

}


/* Show dropdown when JS adds .open */

.services-dropdown.open .services-menu {

    opacity: 1;

    visibility: visible;

    transform: translateX(-50%) translateY(0);

}


/* Dropdown list */

.services-menu li {

    list-style: none;

}


/* Dropdown links */

.services-menu a {

    position: relative;

    display: block;

    padding: 13px 20px;

    color: #222;

    text-decoration: none;

    font-size: 15px;

    font-weight: 500;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        padding-left 0.2s ease;

}


/* Remove main navigation underline */

.services-menu a::after {

    display: none;

}


/* Dropdown hover */

.services-menu a:hover {

    background: #f7f7f7;

    padding-left: 24px;

    transform: none;

}

.services-menu {
    position: absolute;

    top: calc(100% + 10px);
    left: 50%;

    transform: translateX(-50%) translateY(-8px);

    width: 230px;

    background: #ffffff;

    padding: 10px 0;

    border-radius: 8px;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.12);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;

    z-index: 1000;
}

.services-dropdown.open .services-menu {
    opacity: 1;
    visibility: visible;

    transform: translateX(-50%) translateY(0);
}

.services-menu li {
    list-style: none;
}

/* ========================================
   DROPDOWN LINKS
======================================== */

.services-menu a {

    position: relative;

    display: block;

    width: 100%;

    padding: 13px 20px;

    color: #222;

    text-decoration: none;

    font-size: 15px;

    font-weight: 500;

    transition:

        color .3s;

}


/* Remove main navigation underline */

.services-menu a::after {

    display: none;

}


/* Mobile-style gold accent */

.services-menu a::before {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%) scaleY(0);

    width: 4px;

    height: 24px;

    background: var(--primary);

    border-radius: 20px;

    transition:

        transform .3s;

}


/* Hover text */

.services-menu a:hover {

    color: var(--primary);

    transform: none;

}


/* Hover accent */

.services-menu a:hover::before {

    transform: translateY(-50%) scaleY(1);

}

/*hamburger*/

.hamburger {

    display: none;

    position: relative;

    width: 44px;

    height: 44px;

    padding: 0;

    border: none;

    background: transparent;

    cursor: pointer;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 6px;

    transition: var(--transition);

}

.hamburger span {

    display: block;

    width: 28px;

    height: 3px;

    background: var(--black);

    border-radius: 100px;

    transition: all .35s ease;

}

.mobile-social {

    display: none;

}

/* Hover */

.hamburger:hover span {

    background: var(--primary);

}

/* Keyboard Accessibility */

.hamburger:focus-visible {

    outline: 2px solid var(--primary);

    outline-offset: 4px;

}

.menu-overlay {

    display: none;

}

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

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 48px;

    padding: 14px 30px;

    border: none;

    border-radius: var(--border-radius);

    cursor: pointer;

    font-size: var(--fs-base);

    font-weight: var(--fw-semibold);

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    user-select: none;

    transition:

        background-color var(--transition),

        color var(--transition),

        border-color var(--transition),

        transform var(--transition),

        box-shadow var(--transition);

}

.btn:focus-visible {

    outline: 3px solid rgba(142, 173, 150, .4);

    outline-offset: 3px;

}

.btn-primary {

    background: var(--primary);

    color: var(--black);

}

.btn-primary:hover {

    background: var(--primary-dark);

    transform: translateY(-3px);

    box-shadow: var(--shadow-md);

}

.btn-outline {

    background: transparent;

    color: var(--primary);

    border: 2px solid var(--primary);

}

.btn-outline:hover {

    background: var(--primary);

    color: var(--black);

}

.btn-dark {

    background: var(--black);

    color: var(--white);

}

.btn-dark:hover {

    background: #111;

}

.btn-ghost {

    padding: 0;

    min-height: auto;

    background: none;

    color: var(--primary);

}

.btn-ghost:hover {

    color: var(--primary-dark);

}

.btn-sm {

    min-height: 40px;

    padding: 10px 20px;

    font-size: var(--fs-sm);

}

.btn-lg {

    min-height: 56px;

    padding: 18px 38px;

    font-size: var(--fs-lg);

}

.btn-block {

    width: 100%;

}

.btn-arrow {

    transition: transform var(--transition);

}

.btn:hover .btn-arrow {

    transform: translateX(6px);

}

.btn:disabled {

    opacity: .6;

    cursor: not-allowed;

    pointer-events: none;

}

/*=====================================
SECTION CONTAINERS
=====================================*/

.section {

    padding: 100px 0;

}

.section-header {

    max-width: 700px;

    margin: 0 auto var(--space-8);

    text-align: center;

}

.section-tag {

    display: inline-block;

    margin-bottom: var(--space-3);

    font-size: var(--fs-md);

    font-weight: var(--fw-semibold);

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--accent);

}

.section-title {

    margin-bottom: var(--space-4);

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: var(--fw-bold);

    line-height: var(--lh-tight);

    color: var(--black);

}

.section-description {

    max-width: 600px;

    margin: 0 auto;

    font-size: var(--fs-lg);

    line-height: var(--lh-relaxed);

    color: var(--text-light);

}

.section-header-left {

    margin: 0 0 var(--space-8);

    text-align: left;

}

.section-header-left .section-description {

    margin: 0;

}

.section-header-left .section-tag::after {

    margin: 12px 0 0;

}

.section-actions {

    margin-top: var(--space-6);

    display: flex;

    justify-content: center;

    gap: var(--space-4);

}

/*=====================================
IMAGE FRAME
=====================================*/

.image-frame {

    position: relative;

    overflow: hidden;

    border-radius: var(--radius-lg);

    background: var(--bg-light);

}

.image-frame img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform .6s ease,

        filter .4s ease;

}

.image-frame:hover img {

    transform: scale(1.05);

}

.image-frame::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(transparent,

            rgba(0, 0, 0, .12));

    opacity: 0;

    transition: opacity .35s ease;

}

.image-frame:hover::after {

    opacity: 1;

}

.image-frame::before {

    content: "";

    position: absolute;

    inset: 0;

    border: 1px solid transparent;

    border-radius: inherit;

    transition: .35s;

    z-index: 2;

}

.image-frame:hover::before {

    border-color: rgba(212, 175, 55, .35);

}

.image-frame.loading {

    background: #ececec;

}

.badge {

    display: inline-flex;

    align-items: center;

    padding: 8px 16px;

    border-radius: var(--radius-pill);

    background: rgba(212, 175, 55, .12);

    color: var(--primary-dark);

    font-size: var(--fs-xs);

    font-weight: var(--fw-semibold);

    letter-spacing: .5px;

}

.tag {

    display: inline-flex;

    align-items: center;

    padding: 8px 18px;

    border-radius: var(--radius-pill);

    background: var(--bg-light);

    color: var(--text);

    border: 1px solid var(--border);

    transition: var(--transition);

}

.tag:hover {

    background: var(--primary);

    color: var(--black);

    border-color: var(--primary);

}

.icon-box {

    width: 64px;

    height: 64px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 20px;

    background: rgba(212, 175, 55, .08);

    color: var(--primary);

    transition: var(--transition);

}

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

.home-hero {

    position: relative;

    height: calc(100vh - 140px);
    min-height: 600px;

    display: flex;
    align-items: center;

    overflow: hidden;

    isolation: isolate;

    background: var(--black);
}

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

.home-hero-visual {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: -2;
}


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

.hero-slide {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    opacity: 0;

    visibility: hidden;

    transform: scale(1.015);

    filter: blur(1px);

    transition:
        opacity 1.5s ease,
        visibility 1.5s ease,
        transform 2.2s
            cubic-bezier(.22,1,.36,1),
        filter 1.2s ease;

}


/* ============================================
   ACTIVE SLIDE
============================================= */

.hero-slide.is-active {

    opacity: 1;

    visibility: visible;

    transform: scale(1);

    filter: blur(0);

}


/* ============================================
   IMAGE
============================================= */

.home-hero-image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

}

/* ============================================
   HERO IMAGE OVERLAY
============================================= */

.home-hero-visual::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(17, 17, 17, 0.80) 0%,

            rgba(17, 17, 17, 0.75) 18%,

            rgba(17, 17, 17, 0.70) 30%,

            rgba(17, 17, 17, 0.65) 50%,

            rgba(17, 17, 17, 0.60) 60%,

            rgba(17, 17, 17, 0.12) 75%,

            rgba(17, 17, 17, 0.04) 82%,

            rgba(17, 17, 17, 0.10) 100%
        );

    pointer-events: none;

}

.home-hero-visual::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        radial-gradient(
            ellipse at center,
            transparent 45%,
            rgba(0, 0, 0, 0.22) 100%
        );

    pointer-events: none;

}


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

.home-hero-container {

    position: relative;

    z-index: 3;

    width: 100%;

    display: flex;

    align-items: center;

    min-height: 100%;

}


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

.home-hero-content {

    position: absolute;

    left: 5%;
    top: 20%;

    width: min(42vw, 620px);

    opacity: var(--scroll-content-opacity, 1);

    z-index: 5;
}

/* ============================================
   EYEBROW
============================================= */

.home-hero-eyebrow {

    display: inline-block;

    margin-bottom: 20px;

    font-size: var(--fs-md);
    font-weight: 600;

    letter-spacing: 3.5px;
    text-transform: uppercase;

    color: rgba(212, 175, 55, 0.65);
}


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

.home-hero-title {

    margin: 0 0 30px;

    max-width: 760px;

    font-family: var(--font-heading);
    font-weight: 400;

    line-height: 0.95;

    letter-spacing: -0.035em;
}


/* MAIN TITLE */

.hero-title-line {

    display: block;

    font-size: clamp(52px, 4.8vw, 78px);

    color: var(--white);

    letter-spacing: -0.04em;
}


/* ACCENT LINE */

.hero-title-accent {

    margin-top: 8px;

    color: var(--accent);

    font-style: oblique;

}

.hero-mobile-break {

    display: none;

}

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

.home-hero-description {

    max-width: 570px;

    margin: 0 0 34px;

    font-size: 17px;

    line-height: 1.65;

    color: rgba(255, 255, 255, 0.88);
}

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

.home-hero-actions {

    display: flex;

    align-items: center;

    gap: 18px;

}


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

.home-hero-actions .hero-btn-primary {

    min-height: 54px;

    padding: 16px 30px;

    background: var(--accent);

    color: var(--black);

}


.home-hero-actions .hero-btn-primary:hover {

    background: var(--primary-light);

    color: var(--white);

}


/* Secondary */

.home-hero-actions .hero-btn-secondary {

    min-height: 54px;

    padding: 16px 28px;

    background: transparent;

    color: var(--white);

    border: 1px solid
        rgba(255, 255, 255, .55);

}


.home-hero-actions .hero-btn-secondary:hover {

    background:
        rgba(255, 255, 255, .10);

    color: var(--white);

    border-color: var(--white);

}

/* ============================================
   HERO ENTRANCE ANIMATION
============================================= */

/* Initial state */

.home-hero-eyebrow,
.hero-title-line,
.home-hero-description,
.home-hero-actions {
    opacity: 0;
    transform: translateY(30px);
}


/* Eyebrow */

.home-hero-eyebrow {
    animation: heroFadeUp 0.8s ease-out 0.2s forwards;
}


/* Main title */

.hero-title-line {
    animation: heroFadeUp
        1s cubic-bezier(0.22, 1, 0.36, 1)
        0.35s
        forwards;
}

.hero-title-accent {
    animation-delay: 0.5s;
}


/* Description */

.home-hero-description {
    animation: heroFadeUp 0.8s ease-out 0.7s forwards;
}


/* Buttons */

.home-hero-actions {
    animation: heroFadeUp 0.8s ease-out 0.85s forwards;
}

/* Animation */

@keyframes heroFadeUp {

    from {
        opacity: 0;

        transform:
            translate3d(0, 30px, 0);
    }

    to {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);
    }

}

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

    .home-hero-eyebrow,
    .hero-title-line,
    .home-hero-description,
    .home-hero-actions {
        opacity: 1;
        transform: none;
        animation: none;
    }

}

/* ============================================
   HERO TO WELCOME TRANSITION
============================================= */

.welcome-section {
    position: relative;

    margin-top: -1px;

    padding-top: 80px;
    padding-bottom: 50px;

    background: var(--white);

    z-index: 2;
}

/* ============================================
   WELCOME SECTION
============================================= */

.welcome-grid {

    display: grid;

    grid-template-columns:
        minmax(280px, 0.85fr)
        minmax(320px, 1.15fr);

    gap: 90px;

    align-items: start;
}


/* ============================================
   INTRO
============================================= */

.welcome-intro {

    position: sticky;

    top: 120px;
}


.section-eyebrow {

    display: inline-block;

    margin-bottom: 20px;

    font-size: var(--fs-sm);

    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--primary);
}


.welcome-title {

    margin: 0;

    max-width: 480px;

    font-family: var(--font-heading);

    font-size: clamp(
        42px,
        4vw,
        64px
    );

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -0.03em;

    color: var(--text-light);
}

/* ============================================
   CONTENT
============================================= */

.welcome-content {

    max-width: 650px;
}

.welcome-content p {

    margin: 0 0 24px;

    font-size: 17px;

    line-height: 1.8;

    color: var(--text);
}


.welcome-content .welcome-lead {

    margin-bottom: 30px;

    font-family: var(--font-body);

    font-size: var(--fs-lg);

    font-weight: var(--fw-semibold);

    line-height: 1.45;

    color: var(--text);
}


/* ============================================
   TEXT LINK
============================================= */

.welcome-content .text-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 15px;

    color: var(--text);

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 1px;

    text-decoration: none;

    transition:
        color var(--transition),
        gap var(--transition);
}


.welcome-content .text-link:hover {

    color: var(--primary);

    gap: 16px;
}

.home-features {
    position: relative;

    padding: 30px 0 50px;

    margin: 50px 0 0 0;

    background: var(--accent-bg);

    overflow: hidden;
}

.home-features-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;
}

/* ============================================
   TRUST METRICS
============================================= */

.trust-metrics{
    padding: var(--section-padding-block) 0;
    background: var(--bg-light);
}

.trust-metrics-header{
    max-width: 960px;
    margin: 0 auto 70px;
    text-align: center;
}

.trust-metrics-title{
    margin: 18px 0;
    font-family: var(--font-heading);
    font-size: clamp(38px,4vw,56px);
    font-weight: var(--fw-regular);
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--text-dark);
}

.trust-metrics-description{
    margin: 0 auto;
    max-width: 810px;
    color: var(--text-light);
    line-height: 1.8;
}

/* metrics */

.trust-metrics-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-items: center;
    border-top: 1px solid rgba(198,161,91,.28);
    border-bottom: 1px solid rgba(198,161,91,.28);
}

.trust-metric{
    padding: 42px 24px;
    text-align: center;
    position: relative;
}

.trust-metric:not(:last-child)::after{
    content:"";
    position:absolute;
    top:28px;
    right:0;
    width:1px;
    height: calc(100% - 56px);
    background: rgba(198,161,91,.22);
}

.trust-metric-number{
    margin:0;
    font-family: var(--font-heading);
    font-size: clamp(52px,5vw,78px);
    font-weight: var(--fw-regular);
    line-height:.9;
    letter-spacing:-.04em;
    color: var(--text-dark);
}

.trust-metric-number span{
    display:inline-block;
}

.trust-metric-number::after{
    content:"+";
    color: var(--accent);
    font-size:.55em;
    vertical-align: top;
    margin-left:4px;
}

.trust-metric-label{
    margin:18px 0 0;
    font-size:15px;
    font-weight: var(--fw-medium);
    color: var(--text-light);
}

/* ============================================
   SERVICES SHOWCASE
============================================= */

.services-showcase {

    position: relative;

    padding:
        var(--section-padding-block)
        0;

}


/* ============================================
   MAIN GRID
============================================= */

.services-showcase-grid {

    display: grid;

    grid-template-columns:
        minmax(280px, 0.8fr)
        minmax(500px, 1.6fr);

    gap: 50px;

    align-items: stretch;

}


/* ============================================
   LEFT EDITORIAL PANEL
============================================= */

.services-showcase-intro {

    position: relative;

    height: var(--services-showcase-height);
    min-height: 0;

    padding: 60px 50px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow: hidden;

    border-radius: var(--radius-lg);

    background-image: url("../assets/images/service portrait.png");
    background-size: cover;
    background-position: center;

    color: var(--white);
}

.services-showcase-intro::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;
}

/* eyebrow */

.services-showcase-intro
.section-eyebrow {

    margin-bottom: 22px;

    color:
        rgba(70, 35, 0, 0.9);

    font-size: var(--fs-md);

    z-index: 1;

}


/* title */

.services-showcase-title {

    max-width: 420px;

    margin: 0;

    z-index: 1;

    font-family: var(--font-heading);

    font-size:
        clamp(44px, 4vw, 64px);

    font-weight: var(--fw-regular);

    line-height: 1.02;

    letter-spacing: -.035em;

    color:
        rgba(80, 61, 42, 0.7);

}


.services-showcase-title span {

    display: block;

    color:
        rgba(80, 61, 42, 0.7);

}


/* description */

.services-showcase-description {

    max-width: 400px;

    margin: 28px 0 0;

    font-size: 15px;

    line-height: 1.8;

    z-index: 1;

    color:
        rgba(80, 61, 42, 0.9);

}



/* ============================================
   SERVICE LIST
============================================= */

.services-showcase-list {

    display: flex;

    flex-direction: column;

    gap: 4px;

    height: var(--services-showcase-height);
    min-height: 0;

    border-radius: var(--radius-lg);

    overflow: hidden;
}


/* ============================================
   SERVICE PANEL
============================================= */

.service-panel {

    position: relative;

    min-height: 76px;

    flex: 0 0 76px;

    overflow: hidden;

    cursor: pointer;

    background: var(--black);

    color: var(--white);

    transition:
        flex-basis .65s cubic-bezier(.22,1,.36,1),
        min-height .65s cubic-bezier(.22,1,.36,1);
}


/* active panel expands */

.service-panel.is-active {

    flex-basis: 280px;

    min-height: 280px;
}

.service-panel:first-child {
    border-radius:
        var(--radius-lg)
        var(--radius-lg)
        0
        0;
}

.service-panel:last-child {
    border-radius:
        0
        0
        var(--radius-lg)
        var(--radius-lg);
}

/* ============================================
   BACKGROUND IMAGE
============================================= */

.service-panel-preview,
.service-panel-feature {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        opacity .5s ease,
        transform 1s cubic-bezier(.22,1,.36,1);
}


/* Preview image */

.service-panel-preview {
    opacity: 1;

    transform: scale(1.02);
}


/* Feature image */

.service-panel-feature {
    opacity: 0;

    transform: scale(1.08);
}


/* Expanded */

.service-panel.is-active
.service-panel-preview {
    opacity: 0;
}


.service-panel.is-active
.service-panel-feature {
    opacity: 1;

    transform: scale(1);
}


/* ============================================
   OVERLAY
============================================= */

.service-panel-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(17,17,17,.88),
            rgba(17,17,17,.48) 55%,
            rgba(17,17,17,.25)
        );

    transition:
        background .6s ease;

}


.service-panel.is-active
.service-panel-overlay {

    background:
        linear-gradient(
            90deg,
            rgba(17,17,17,.78),
            rgba(17,17,17,.34) 60%,
            rgba(17,17,17,.18)
        );

}


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

.service-panel-header {

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    min-height: 76px;

    padding: 0 30px;

    display: flex;

    align-items: center;

    gap: 22px;

    z-index: 2;
}

/* title */

.service-panel-title {

    margin: 0;

    font-family: var(--font-body);

    font-size: 24px;

    font-weight: var(--fw-medium);

    line-height: 1;

    color: var(--white);

}


/* arrow */

.service-panel-arrow {

    margin-left: auto;

    font-size: 22px;

    font-weight: 300;

    color:
        rgba(255,255,255,.65);

    transition:
        transform var(--transition),
        color var(--transition);

}


.service-panel:hover
.service-panel-arrow {

    transform:
        translate(4px,-4px);

    color: var(--white);

}


/* ============================================
   PANEL CONTENT
============================================= */

.service-panel-content {

    position: absolute;

    left: 30px;
    bottom: 26px;

    max-width: 430px;

    z-index: 2;

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .4s ease .1s,
        transform .55s cubic-bezier(.22,1,.36,1);
}


.service-panel.is-active
.service-panel-content {

    opacity: 1;

    transform:
        translateY(0);

}


.service-panel-content p {

    max-width: 390px;

    margin: 0 0 16px;

    font-size: 15px;

    line-height: 1.55;

    color: rgba(255,255,255,.82);
}


/* ============================================
   PANEL CTA
============================================= */

.service-panel-cta {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 7px;

    border-bottom:
        1px solid
        rgba(255,255,255,.5);

    color: var(--white);

    font-size: 12px;

    font-weight: var(--fw-semibold);

    letter-spacing: 1.2px;

    text-transform: uppercase;

    transition:
        gap var(--transition),
        border-color var(--transition);

}


.service-panel-cta:hover {

    gap: 18px;

    border-color: var(--white);

}



/* ============================================
   CTA LAYOUT
============================================= */

.final-cta {

    position: relative;

    overflow: hidden;

    min-height: clamp(300px, 25vh, 400px);

    padding: 0;

    background: var(--primary-dark);

    background-image: url("../assets/images/home-cta-bg.png");

    color: var(--white);

    isolation: isolate;
}


.final-cta-inner {

    width: 100%;

    min-height: inherit;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 48vw);

    align-items: stretch;

}

/* ============================================
   CTA LEFT CONTENT
============================================= */

.final-cta-left {
    display: flex;

    align-items: center;

    justify-content: center;

    padding-left : clamp(180px, 20vw, 280px)
        
}


.final-cta-content {

    width: 100%;

    max-width: 620px;

    margin: 0;

    text-align: left;

}

/* ============================================
   EYEBROW
============================================= */

.final-cta-eyebrow {

    display: inline-block;

    margin-bottom: 18px;

    font-size: var(--fs-md);

    font-weight: var(--fw-semibold);

    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--accent);
}


/* ============================================
   TITLE
============================================= */

.final-cta-title {

    margin: 0 0 24px;

    font-family: var(--font-heading);

    font-size:
        clamp(48px, 5vw, 76px);

    font-weight: var(--fw-regular);

    line-height: .95;

    letter-spacing: -.035em;

    color: var(--white);

}

.final-cta-description {

    max-width: 560px;

    margin: 0 0 34px;

    font-size: var(--fs-lg);

    line-height: 1.8;

    color: rgba(255,255,255,.78);

}

/* ============================================
   BUTTON
============================================= */

.final-cta-button {

    min-height: 54px;

    padding: 16px 30px;

    background: var(--accent);

    color: var(--black);

    border-radius: var(--border-radius);
}


.final-cta-button:hover {

    background: var(--white);

    color: var(--black);
}

/* ============================================
   CTA IMAGE
============================================= */

.final-cta-image {

    position: relative;

    width: 100%;

    height: 100%;

    min-height: inherit;

    overflow: hidden;

}


.final-cta-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: 70% center;
}


/* ============================================
   BLOG PREVIEW
============================================= */

.blog-preview{
    padding:var(--section-padding-block) 0;
}

.blog-header{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:48px;
}

.blog-title{
    margin:18px 0 0;
    font-family:var(--font-heading);
    font-size:clamp(38px,4vw,54px);
    font-weight:var(--fw-regular);
    line-height:1;
    letter-spacing:-.03em;
}

.blog-grid{
    display:grid;
    grid-template-columns:1.55fr .85fr;
    gap:32px;
}

/* Featured */

.blog-featured-wrapper{
    position:relative;
    min-height:470px;
}

.blog-featured{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:
        opacity .6s ease,
        transform .6s ease,
        visibility .6s;
}

.blog-featured.is-active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.blog-featured img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:var(--radius-lg);
}

.blog-featured-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:30px;
    border-radius:var(--radius-lg);
    background:linear-gradient(
        180deg,
        rgba(0,0,0,0) 20%,
        rgba(17,17,17,.78) 100%
    );
}

.blog-featured-overlay h3{
    margin:10px 0 12px;
    font-family:var(--font-heading);
    font-size:34px;
    line-height:1.1;
    color:var(--white);
}

.blog-featured-overlay p{
    margin:0 0 18px;
    color:rgba(255,255,255,.84);
    line-height:1.7;
}

.blog-link{
    align-self:flex-start;
    color:var(--white);
    font-weight:var(--fw-semibold);
    border-bottom:1px solid rgba(255,255,255,.45);
    padding-bottom:4px;
}

/* Sidebar */

.blog-sidebar{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.blog-sidebar-item{
    position:relative;
    padding:18px 18px 18px 22px;
    border-radius:14px;
    border:1px solid rgba(198,161,91,.12);
    text-decoration:none;
    color:inherit;
    transition:all .35s ease;
}

.blog-sidebar-item::before{
    content:"";
    position:absolute;
    left:0;
    top:18px;
    bottom:18px;
    width:3px;
    border-radius:999px;
    background:transparent;
    transition:background .35s ease;
}

.blog-sidebar-item:hover{
    transform:translateX(6px);
}

.blog-sidebar-item.is-active{
    background:#F3EBDD;
    border-color:rgba(198,161,91,.28);
}

.blog-sidebar-item.is-active::before{
    background:var(--accent);
}

.blog-category{
    font-size:11px;
    font-weight:var(--fw-semibold);
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--accent);
}

.blog-sidebar h4{
    margin:8px 0;
    font-family: var(--font-body);
    font-size:18px;
    line-height:1.35;
    color:var(--text-dark);
}

.blog-meta{
    font-size:13px;
    color:var(--text-light);
}


/*============ TESTIMONIALS ==============*/

.testimonials {
    overflow: hidden;
    background: var(--accent-bg);
}

.testimonial-header {
    max-width: 700px;
    margin: 0 auto 20px;
    text-align: center;
}

.testimonial-carousel {

    position: relative;

    display: flex;

    perspective: 1400px;

    align-items: center;

    justify-content: center;

    min-height: 350px;

}


/*==================================================
TRACK
==================================================*/

.testimonial-track {

    position: relative;

    width: 100%;

    max-width: 1200px;

    height: 350px;

}


/*==================================================
CARD
==================================================*/

.testimonial-card {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 520px;

    padding: 30px;

    border-radius: 28px;

    background: #fff;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .08);

    transition:

        transform .65s cubic-bezier(.22, .61, .36, 1),

        opacity .65s ease,

        filter .65s ease,

        box-shadow .65s ease;

    transform-origin: center;

    opacity: 0;

    pointer-events: none;

}


/*==================================================
QUOTE
==================================================*/

.quote-icon {

    position: absolute;

    top: 20px;

    right: 35px;

    font-size: 8rem;

    line-height: 1;

    color: rgba(0, 0, 0, .04);

}


/*==================================================
STARS
==================================================*/

.testimonial-stars {

    font-size: 22px;

    letter-spacing: 6px;

    color: var(--primary);

    margin-bottom: 20px;

}


/*==================================================
TEXT
==================================================*/

.testimonial-card blockquote {

    font-size: 1.15rem;

    line-height: 1.7;

    font-style: italic;

    color: #333;

    margin-bottom: 30px;

}


/*==================================================
AUTHOR
==================================================*/

.testimonial-author {

    position: relative;

    display: inline-block;

}

.testimonial-author h4 {

    font-size: 1.2rem;

    margin-bottom: 6px;

}

.testimonial-author span {

    color: #777;

    font-size: .95rem;

}


/*==================================================
ACTIVE CARD
==================================================*/

.testimonial-card.active {

    transform:

        translate(-50%, -50%) scale(1);

    opacity: 1;

    z-index: 5;

    filter: none;

    pointer-events: auto;

}


/*==================================================
LEFT CARD
==================================================*/

.testimonial-card.left {

    transform:

        translate(-145%, -48%) scale(.82) rotateY(18deg);

    opacity: .35;

    filter: blur(2px);

    z-index: 3;

}


/*==================================================
RIGHT CARD
==================================================*/

.testimonial-card.right {

    transform:

        translate(45%, -48%) scale(.82) rotateY(-18deg);

    opacity: .35;

    filter: blur(2px);

    z-index: 3;

}


/*==================================================
HIDDEN
==================================================*/

.testimonial-card.hidden {

    transform:

        translate(-50%, -50%) scale(.65);

    opacity: 0;

    filter: blur(4px);

    z-index: 1;

}


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

.carousel-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 54px;

    height: 54px;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, .75);

    backdrop-filter: blur(12px);

    cursor: pointer;

    font-size: 1.3rem;

    color: #444;

    transition: .35s;

    z-index: 20;

}

.carousel-btn:hover {

    background: var(--primary);

    color: #fff;

    transform:
        translateY(-50%) scale(1.08);

}

.prev {

    left: 0;

}

.next {

    right: 0;

}


/*==================================================
HOVER EFFECT
==================================================*/

.testimonial-card.active:hover {

    transform:

        translate(-50%, -50%) scale(1.03);

    box-shadow:

        0 35px 90px rgba(0, 0, 0, .12);

}

/*============ FAQ ============*/

.faq {

    max-width: 900px;

    margin: auto;

}

.faq-list {

    margin-top: 20px;

}

.faq-item {

    border-bottom: 1px solid #ddd;

}

.faq-question {

    width: 100%;

    background: none;

    border: none;

    padding: 25px 0;

    display: flex;

    justify-content: space-between;

    align-items: center;

    cursor: pointer;

    font-size: 1.1rem;

    font-weight: 600;

    text-align: left;

}

.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: max-height .4s ease;

}

.faq-answer p {

    padding-bottom: 25px;

    line-height: 1.8;

}

.faq-icon {

    font-size: 1.8rem;

    transition: transform .35s ease;

}

.faq-item.active .faq-answer {

    max-height: 250px;

}

.faq-item.active .faq-icon {

    transform: rotate(45deg);

}

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

.footer {

    background: #232323;

    color: #F4F4F4;

    padding: 70px 0 0;

    overflow: hidden;

}

.footer-grid {

    display: grid;

    grid-template-columns: 1.2fr 1fr 1.2fr;

    gap: 60px;

    align-items: start;

}

.footer-left {

    display: flex;

    flex-direction: column;

}

.footer-left-column {

    display: contents;

}

.footer-logo {

    display: block;

    width: 100%;

    margin-bottom: 20px;

}

.footer-logo img {

    display: block;

    width: auto;

    height: clamp(70px, 12vh, 110px);

    margin: 0 auto;

}

.footer-description {

    line-height: 1.7;

    color: #CFCFCF;

    text-align: justify;

    margin-bottom: 8px;

}

.timing-row {



    display: flex;

    align-items: center;

    gap: 10px;

    margin: 5px 0px;

}

.timing-row img {

    width: 20px;

    height: 20px;

    flex-shrink: 0;
}

.timing-row span {

    line-height: 1.5;

}

.footer-center {

    color: #CFCFCF;

}

.footer-contact {

    display: flex;

    margin: 40px 0px 10px 0px;

    gap: 20px;

}

.footer-contact a {

    width: auto;

    height: 24px;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: all .35s ease;

}

.footer-contact a:hover {

    transform: translateY(-4px);

}

.footer-contact img {

    width: auto;

    height: 24px;

    display: flex;

    justify-content: center;

    align-items: center;

}

.footer-center button {

    font-size: 1.2rem;

    color: var(--primary);

}

.footer-accordion-content a {

    position: relative;

    display: inline-flex;

    align-items: center;

    color: #D7D7D7;

    transition:

        color .3s ease,

        transform .3s ease;

}

.footer-accordion-content a:hover {

    color: var(--primary);

    transform: translateX(6px);

}

.footer-accordion-content a::before {

    content: "";

    width: 0;

    height: 2px;

    background: var(--primary);

    margin-right: 0;

    transition: .3s;

}

.footer-accordion-content a:hover::before {

    width: 8px;

    margin-right: 5px;

}

.footer-accordion {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    background: none;

    border: none;

    color: #fff;

    padding: 12px 0;

    cursor: pointer;

    font-size: 1.1rem;

    font-weight: 600;

    border-top: 1px solid rgba(255, 255, 255, .08);

}

.footer-accordion-content {

    max-height: 0;

    overflow: hidden;

    transition:

        max-height .35s ease;

}

.footer-accordion.active+.footer-accordion-content {

    max-height: 350px;

}

.accordion-icon {

    transition: .3s;

}

.footer-accordion.active .accordion-icon {

    transform: rotate(90deg);

}

.footer-accordion-content ul {

    display: grid;

    grid-template-columns:

        repeat(2, 1fr);

    gap: 12px;

}

.footer-right {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.footer-map {

    overflow: hidden;

    position: relative;

    border-radius: 22px;

    height: 200px;

    margin-top: 20px;

    border: 1px solid rgba(255, 255, 255, .08);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.footer-map iframe {

    width: 100%;

    height: 100%;

    border: none;

}

.footer-map::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 22px;

    border: 1px solid rgba(212, 175, 55, .18);

    pointer-events: none;

}

.footer-map:hover {

    transform: translateY(-4px);

    box-shadow:

        0 20px 45px rgba(0, 0, 0, .25);

}

.footer-contact-item {

    display: flex;

    align-items: flex-start;

    line-height: 1.5;

    font-size: var(--fs-sm);

}

.footer-contact-item img {

    width: 30px;

    height: 30px;

    margin: 5px 10px;

}

.footer-bottom {

    display: flex;

    font-size: var(--fs-sm);

    justify-content: space-between;

    align-items: center;

    padding: 5px 20px;

    margin-top: 60px;

    border-top: 1px solid rgba(255, 255, 255, .08);

}

.footer-bottom-links {

    display: flex;

    gap: 30px;

}

.footer-bottom-links a {

    color: #BEBEBE;

    transition: .3s;

}

.footer-bottom-links a:hover,
.footer-bottom a:hover {

    color: var(--primary);

}

/* ===========================
   Floating Buttons
=========================== */

.whatsapp-btn,
#backToTop {

    position: fixed;

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    text-decoration: none;

    z-index: 9999;

    transition: .35s ease;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);

}

/* WhatsApp */

.whatsapp-btn {

    width: 58px;
    height: 58px;

    right: 20px;

    bottom: 40px;

    background: #25D366;

    color: #fff;

    font-size: 30px;

}

.whatsapp-btn:hover {

    transform: translateY(-5px) scale(1.05);

}

/* Back To Top */

#backToTop {

    width: 44px;
    height: 44px;

    right: 30px;

    bottom: 110px;

    border: none;

    cursor: pointer;

    background: var(--primary);

    color: #fff;

    visibility: hidden;

    transform: translateY(20px);

    transition: background-color 0.3s ease, opacity 0.3s ease;

    background-color: rgba(197, 160, 89, 0.7);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, .2);

}

#backToTop.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

#backToTop:hover {

    transform: translateY(-5px);

    background-color: rgba(163, 127, 63, 0.9);

}

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

.page-hero {

    position: relative;

    height: var(--hero-height);

    display: flex;

    align-items: center;

    justify-content: center;

    padding-block: var(--hero-padding-block);

    overflow: hidden;

}

.page-hero-image {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.page-hero-overlay {

    position: absolute;

    inset: 0;

    background: var(--hero-overlay-dark);

}

.page-hero-content {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: var(--hero-content-width);

    margin: 0 auto;

    text-align: center;

}

.page-hero-title {

    margin: var(--space-3) 0 var(--space-4);

    font-size: clamp(2.5rem, 6vw, 5rem);

    font-weight: var(--fw-bold);

    line-height: var(--lh-tight);

    color: var(--white);

}

.page-hero-description {

    max-width: 650px;

    margin: 0 auto;

    font-size: clamp(1rem, 2vw, 1.25rem);

    line-height: var(--lh-relaxed);

    color: rgba(255, 255, 255, .90);

}

.page-hero .section-tag {

    color: rgba(255, 255, 255, .85);

}

.page-hero .section-tag::after {

    background: var(--primary);

}

/*=====================================
SERVICE PAGE
=====================================*/

.services-hero {

    background-image: url("../assets/images/services-hero.png");

}

.services-section {

    padding-top: 70px;

    padding-bottom: var(--section-padding-block);

}

.services-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    column-gap: 32px;

    row-gap: 40px;

}

.service-card {

    display: flex;

    flex-direction: column;

    height: 100%;

    overflow: hidden;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    text-decoration: none;

    color: inherit;

    box-shadow: var(--shadow-sm);

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.service-card-image {

    position: relative;

    overflow: hidden;

    aspect-ratio: 4 / 3;

    background: var(--bg-light);

}

.service-card-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;

}

.service-card-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 28px;

}

.service-card-title {

    margin: 0 0 10px;

    font-size: 1.35rem;

    font-weight: var(--fw-semibold);

    line-height: var(--lh-tight);

    color: var(--black);

    transition: color .3s ease;

}

.service-card-description {

    margin: 0;

    font-size: var(--fs-sm);

    line-height: var(--lh-relaxed);

    color: var(--text-light);

}

.service-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow-md);

    border-color: rgba(212, 175, 55, .35);

}

.service-card:hover .service-card-image img {

    transform: scale(1.05);

}

.service-card:hover .service-card-title {

    color: var(--primary);

}

.service-card:focus-visible {

    outline: 3px solid rgba(212, 175, 55, .45);

    outline-offset: 4px;

}

.service-card:visited {

    color: inherit;

}

.services-divider {

    width: 100%;

    height: 1px;

    margin: clamp(64px, 8vw, 100px) 0 0;

    background: var(--border);

}

/* ============================================
   CLIENT INFORMATION
============================================= */

.client-info-section {

    width: 100%;

    padding: 30px 20px 100px;

}

.client-info-header {

    max-width: 900px;

    margin: 0 auto;

    text-align: center;

}

.client-info-header .section-label {

    display: block;
    margin-bottom: 14px;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: var(--accent);
    text-align: center;

}

.client-info-header h2 {

    margin: 0;

    font-size: clamp(38px, 4vw, 52px);
    line-height: 1.1;

    text-align: center;

}

.client-info-header p {

    margin: 14px auto 0;

    max-width: 700px;

    font-size: 17px;
    line-height: 1.6;

    text-align: center;

}

.client-info-divider {

    width: min(100%, 970px);

    height: 1px;

    background: var(--border);

    margin: 65px auto 45px;

}

.client-info-buttons {

    width: min(100%, 970px);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr 1fr .2fr;

    gap: 20px;

}

.info-btn {

    width: 100%;

    height: 70px;

    padding: 20px 24px;

    margin-bottom: 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);

    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);

    cursor: pointer;

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.info-btn:hover {

    transform: translateY(-3px);
    border-color: var(--primary);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.info-btn-arrow {

    font-size: 20px;
    transition: transform var(--transition);

}

.info-btn:hover .info-btn-arrow {

    transform: translateX(5px);

}

.instructions-btn {

    width: 70px;
    height: 70px;

    margin-bottom: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    justify-self: center;
    align-self: start;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: var(--border-radius);

    color: var(--text);

    text-decoration: none;

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);

}

.instructions-btn img {

    width: 40px;
    height: 40px;

    display: block;

    object-fit: contain;

    transition: transform var(--transition);

}

.instructions-btn:hover {

    transform: translateY(-3px);

    border-color: var(--primary);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);

}

.instructions-btn:hover img {

    transform: translateY(2px);

}


/* ============================================
   CLIENT INFORMATION MODALS
============================================= */

body.modal-open {
    overflow: hidden;
}

/* --------------------------------------------
   MODAL WRAPPER
--------------------------------------------- */

.info-modal-wrapper {
    position: relative;

    width: min(100%, 800px);

    z-index: 2;
}

.info-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    visibility: hidden;
    opacity: 0;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.info-modal.active {
    visibility: visible;
    opacity: 1;
}


/* --------------------------------------------
   OVERLAY
--------------------------------------------- */

.info-modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(17, 17, 17, 0.62);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}


/* --------------------------------------------
   DIALOG
--------------------------------------------- */

.info-modal-dialog {
    position: relative;

    width: 100%;
    max-height: min(80vh, 700px);

    overflow-y: auto;

    background: var(--white);

    border-radius: 14px;

    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);

    transform: translateY(20px) scale(0.98);

    transition: transform 0.3s ease;
}


.info-modal-dialog::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background: var(--primary);

    border-radius: 16px 16px 0 0;
}


.info-modal.active .info-modal-dialog {
    transform: translateY(0) scale(1);
}


/* --------------------------------------------
   SCROLLBAR
--------------------------------------------- */

.info-modal-dialog::-webkit-scrollbar {
    width: 6px;
}

.info-modal-dialog::-webkit-scrollbar-track {
    background: transparent;
}

.info-modal-dialog::-webkit-scrollbar-thumb {
    background: rgba(17, 17, 17, 0.18);

    border-radius: 20px;
}


/* --------------------------------------------
   CONTENT
--------------------------------------------- */

.info-modal-content {
    padding: 58px 60px 52px;
}


/* --------------------------------------------
   HEADER
--------------------------------------------- */

.info-modal-header {
    padding-right: 35px;
}


.info-modal-label {
    display: block;

    margin-bottom: 14px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.5px;
    text-transform: uppercase;

    color: var(--primary);
}


.info-modal-content h2 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(30px, 4vw, 42px);

    font-weight: 500;

    line-height: 1.15;

    color: var(--secondary);
}


.info-modal-intro {
    max-width: 99%;

    margin: 16px 0 0;

    color: var(--text);

    font-size: 16px;

    line-height: 1.7;
}


/* --------------------------------------------
   DIVIDER
--------------------------------------------- */

.info-modal-divider {
    width: 48px;
    height: 2px;

    margin: 25px 0 34px;

    background: var(--primary);
}


/* --------------------------------------------
   POLICY ITEMS
--------------------------------------------- */

.info-modal-body {
    display: flex;
    flex-direction: column;
}


.policy-item {
    display: grid;

    grid-template-columns: 42px 1fr;

    gap: 20px;

    padding: 0 0 25px;
    margin-bottom: 25px;

    border-bottom: 1px solid rgba(17, 17, 17, 0.09);
}


.policy-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;

    border-bottom: none;
}


/* --------------------------------------------
   POLICY NUMBER
--------------------------------------------- */

.policy-number {
    display: flex;

    align-items: flex-start;
    justify-content: center;

    padding-top: 2px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 1px;

    color: var(--primary);
}


/* --------------------------------------------
   POLICY CONTENT
--------------------------------------------- */

.policy-content h3 {
    margin: 0 0 7px;

    font-size: 16px;

    font-weight: 650;

    line-height: 1.4;

    color: var(--secondary);
}


.policy-content li {
    margin: 0;

    color: var(--text);

    list-style-type: disc;

    font-size: 15px;

    line-height: 1.75;
}

.policy-content p {
    margin: 0;

    color: var(--text);

    font-size: 15px;

    line-height: 1.75;
}

/* --------------------------------------------
   INFORMATION NOTE
--------------------------------------------- */

.info-modal-note {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 34px;

    padding: 16px 18px;

    background: rgba(212, 175, 55, 0.07);

    border-left: 2px solid var(--primary);
}


.info-modal-note-icon {
    flex: 0 0 auto;

    width: 20px;
    height: 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid var(--primary);

    border-radius: 50%;

    font-size: 11px;

    font-weight: 700;

    color: var(--primary);
}


.info-modal-note li {
    margin-left: 10px;

    color: var(--text);

    list-style-type: disc;

    font-size: 13px;

    line-height: 1.65;
}

/* --------------------------------------------
   CLOSE BUTTON
--------------------------------------------- */

.info-modal-close {
    position: absolute;

    top: -21px;
    right: -21px;

    z-index: 10;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: 50%;

    background: var(--white);

    cursor: pointer;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition);
}


.info-modal-close img {

    width: 36px;
    height: 36px;

    display: block;
}


.info-modal-close:hover {

    background: rgb(0, 0, 0);
    transform: rotate(90deg);
}


/*=====================================*
*FAQ LIST
*=====================================*/

.client-info-section .faq-list {

    max-width: 900px;

    margin: 0 auto;

}


.client-info-section .faq-item {

    border-bottom: 1px solid var(--border);

}


.client-info-section .faq-item:first-child {

    border-top: 1px solid var(--border);

}

/*=====================================*
* SERVICE CATEGORY PAGE
*=====================================*/

/*--------------------------------------
  BREADCRUMB
--------------------------------------*/

.breadcrumb {
    padding: 18px 0 50px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;

    font-size: var(--fs-sm);
    color: var(--text-light);
}

.breadcrumb-list a {
    color: var(--text-light);
    text-decoration: none;

    transition: color var(--transition);
}

.breadcrumb-list a:hover {
    color: var(--primary);
}

.breadcrumb-list li[aria-current="page"] {
    color: var(--black);
    font-weight: var(--fw-medium);
}


/*--------------------------------------
  CATEGORY INTRO
--------------------------------------*/

.service-category-intro {
    padding-bottom: 70px;
}


/*--------------------------------------
  SERVICE DETAILS SECTION
--------------------------------------*/

.service-details-section {
    padding: 20px 0 100px;
}

.service-details-list {
    display: flex;
    flex-direction: column;
    gap: 100px;
}


/*--------------------------------------
  SERVICE DETAIL
--------------------------------------*/

.service-detail {
    scroll-margin-top: 100px;
}

.service-detail-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1fr);

    align-items: center;

    gap: 70px;
}


/*--------------------------------------
  REVERSE LAYOUT
--------------------------------------*/

.service-detail-reverse .service-detail-image {
    order: 2;
}

.service-detail-reverse .service-detail-content {
    order: 1;
}


/*--------------------------------------
  SERVICE IMAGE
--------------------------------------*/

.service-detail-image {
    position: relative;

    overflow: hidden;

    aspect-ratio: 4 / 3;

    background: var(--bg-light);

    border-radius: var(--radius-lg);
}

.service-detail-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;
}

.service-detail:hover .service-detail-image img {
    transform: scale(1.03);
}


/*--------------------------------------
  SERVICE CONTENT
--------------------------------------*/

.service-detail-content {
    max-width: 520px;
}

.service-detail-tag {
    display: inline-block;

    margin-bottom: 14px;

    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);

    letter-spacing: 2px;
    text-transform: uppercase;

    color: var(--accent);
}

.service-detail-title {

    margin-bottom: 5px;

    font-size: clamp(1.2rem, 1.5vw, 1.8rem);

    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);

    color: var(--black);
}

.service-detail-intro {
    margin-bottom: 15px;

    font-size: var(--fs-md);
    line-height: var(--lh-tight);

    color: var(--text-light);
}


/*--------------------------------------
  SERVICE ACTION
--------------------------------------*/

.service-detail-action {
    margin-top: 30px;
}

.service-detail-cta {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    width: max-content;

    font-size: var(--fs-sm);

    font-weight: var(--fw-semibold);

    color: var(--black);

    text-decoration: none;

    transition:
        color var(--transition),
        gap var(--transition);
}

.service-detail-cta-arrow {
    display: inline-block;

    transition: transform var(--transition);
}

.service-detail-cta:hover {
    color: var(--primary);

    gap: 12px;
}

.service-detail-cta:hover .service-detail-cta-arrow {
    transform: translateX(4px);
}

.service-detail-divider {

    width: 100%;
    height: 1px;

    margin: 30px 0;

    background: var(--border);
}

.service-page-cta-content .info-btn {

    margin-top: 50px ;
}

.service-page-cta-content .info-modal {

    text-align: left;
}

/*--------------------------------------
  CATEGORY PAGE CTA
--------------------------------------*/

.service-page-cta {
    padding-top: 80px;
    padding-bottom: 100px;
    background: var(--bg-light);

    border-top: 1px solid var(--border);
}

.service-page-cta-content {
    max-width: 700px;

    margin: 0 auto;

    text-align: center;
}

.service-page-cta-content a {

    color: var(--white);

}

.service-page-cta-title {
    margin: 0 0 16px;

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);

    color: var(--black);
}

.service-page-cta-description {
    max-width: 600px;

    margin: 0 auto 30px;

    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);

    color: var(--text-light);
}

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

.about-hero {

    background-image: url("../assets/images/about-hero.png");

}

/* ============================================
   STORY
============================================= */

.about-story {
    padding: 130px 0;
    background-color: var(--bg-light);
}

.about-story-grid {
    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    gap: 90px;

    align-items: center;
}

.about-story-image {
    position: relative;

    height: 650px;

    overflow: hidden;
}

.about-story-image::after {
    content: "";

    position: absolute;

    inset: 18px;

    border: 1px solid rgba(255, 255, 255, 0.7);

    pointer-events: none;
}

.about-story-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.about-story-content {
    max-width: 570px;
}

.section-label {
    display: block;

    margin-bottom: 15px;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 2.5px;

    text-transform: uppercase;

    color: var(--primary);
}

.about-story-content h2,
.about-section-heading h2,
.about-approach-content h2 {
    margin: 0;

    font-family: var(--heading-font);

    font-size: clamp(38px, 4vw, 58px);

    line-height: 1.1;

    font-weight: 500;

    color: var(--secondary);
}

.about-story-content h2 em,
.about-section-heading h2 em,
.about-approach-content h2 em {
    font-style: italic;

    color: #52645b;
}

.about-story-content p {
    margin: 30px 0 20px;

    font-size: 16px;

    line-height: 1.85;

    color: var(--text);
}

.about-story-content {
    font-size: 18px;

    line-height: 1.8;

    color: #34453d;
}

/* ============================================
   FOUNDER SIGNATURE
============================================= */

.founder-signature{
    display:flex;
    align-items:center;
    gap:25px;

    padding-top:10px;
}

.founder-avatar{
    width:100px;
    height:100px;

    border-radius:50%;
    object-fit:cover;

    border:2px solid rgba(212,175,55,.25);
    flex-shrink:0;
}

.founder-details h3{
    margin:0 0 4px;

    font-family:var(--heading-font);
    font-size:22px;
    font-weight:600;
    line-height:1.2;

    color:var(--secondary);
}

.founder-details span{
    display:block;

    margin-bottom:4px;

    font-size:16px;
    color:rgba(52,69,61,.75);
}

.founder-details a{
    font-size:16px;
    font-weight:500;

    color:var(--primary);
    text-decoration:none;

    transition:opacity .3s ease;
}

.founder-details a:hover{
    opacity:.7;
}


.reveal {

    opacity: 0;

    transform: translateY(50px);

    transition: all .8s ease;

}

.reveal.active {

    opacity: 1;

    transform: translateY(0);

}


.about-features {
    position: relative;

    padding: 80px 0 100px;

    background: var(--accent-bg);

    overflow: hidden;
}

.about-features-header {
    max-width: 1080px;

    margin: 0 auto 75px;

    text-align: center;
}

.about-features-header h2 {
    margin: 0;

    font-family: var(--heading-font);

    font-size: clamp(38px, 4vw, 58px);

    line-height: 1.1;

    font-weight: 500;

    color: var(--secondary);
}

.about-features-header h2 span {
    display: block;

    font-style: italic;

    color: #52645b;
}

.about-features-header p {
    max-width: 650px;

    margin: 15px auto 0;

    font-size: 16px;

    line-height: 1.8;

    color: var(--text);
}

.about-features-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;
}

.about-feature {
    position: relative;

    text-align: center;

    padding: 0 10px;
}

.about-feature-visual {
    position: relative;

    height: 220px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 10px 0;
}

.feature-art {
    position: relative;

    width: 210px;
    height: 210px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.feature-art img{
    
    width: 150px;
    height: 150px;

    z-index: 5;
    justify-content: center;
}

.art-circle {
    position: absolute;

    width: 175px;
    height: 175px;

    z-index: 1;

    border-radius: 48% 52% 55% 45%;

    background: rgba(255, 255, 255, 0.72);

    transform: rotate(-12deg);

    transition:
        transform 0.6s ease,
        border-radius 0.6s ease;
}

.art-circle::before {
    content: "";

    position: absolute;

    inset: 10px;

    border: 1px solid rgba(212, 175, 55, 0.35);

    border-radius: inherit;
}

.about-feature:hover .art-circle {
    transform: rotate(8deg) scale(1.04);

    border-radius: 52% 48% 42% 58%;
}

/* Sparkles */

.art-sparkle {
    position: absolute;

    z-index: 5;

    font-size: 22px;

    color: var(--primary);

    animation: sparkleFloat 3s ease-in-out infinite;
}

.sparkle-one {
    top: 35px;
    right: 28px;
}

.sparkle-two {
    bottom: 42px;
    left: 28px;

    animation-delay: 1s;
}


.sparkle-flipped .sparkle-one{
    top: 35px;
    left: 28px;
    right: auto;
}

.sparkle-flipped .sparkle-two{
    bottom: 42px;
    right: 28px;
    left: auto;
    animation-delay: 1s;
}

@keyframes sparkleFloat {

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

    50% {
        transform: translateY(-8px);
    }

}



/* Feature text */

.about-feature-content h3 {
    margin: 0 0 10px;

    font-family: var(--heading-font);

    font-size: var(--fs-lg);

    font-weight: var(--fw-semibold);

    line-height: 1.1;

    color: var(--secondary);
}

.about-feature-content p {
    max-width: 230px;

    margin: 0 auto;

    font-size: 15px;

    line-height: 1.7;

    color: var(--text);
}

/* ============================================
   APPROACH
============================================= */

.about-approach {
    padding: 80px 0 20px;
}

.about-approach-grid {
    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 100px;

    align-items: center;
}

.about-approach-content {
    max-width: 650px;
}

.about-approach-content p {
    margin: 30px 0 20px;

    font-size: 17px;

    line-height: 1.85;

    color: var(--text);
}

.about-approach-quote {
    position: relative;

    padding: 70px 55px;

    text-align: center;

    border: 1px solid rgba(82, 100, 91, .18);

    background: var(--white);
}

.quote-mark {
    position: absolute;

    top: 15px;
    left: 30px;

    font-family: Georgia, serif;

    font-size: 90px;

    line-height: 1;

    color: rgba(212, 175, 55, .3);
}

.about-approach-quote blockquote {
    margin: 0;

    font-family: var(--heading-font);

    font-size: clamp(28px, 3vw, 40px);

    line-height: 1.3;

    font-style: italic;

    color: #52645b;
}

.about-approach-quote span {
    display: block;

    margin-top: 25px;

    font-size: 13px;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #777;
}



/* ============================================
   CTA
============================================= */

.about-cta {
    position: relative;

    min-height: 400px;

    margin-top: 80px;

    display: flex;

    align-items: center;

    overflow: hidden;
}

.about-cta-image {
    position: absolute;

    inset: 0;
}

.about-cta-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.about-cta-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(17, 17, 17, .58);
}

.about-cta-content {
    position: relative;

    z-index: 1;

    text-align: right;

    color: var(--white);
}

.about-cta .section-label, .about-cta-content span {
    color: rgb(226, 221, 134);
}


.about-cta h2 {
    max-width: 750px;

    margin: 15px 0 30px auto;

    text-align: right;

    font-family: var(--heading-font);

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1.1;

    font-weight: 500;
}

.about-cta h2 em {
    color: #f1ead6;
}

.about-cta p {
    max-width: 550px;

    margin: 25px auto 35px;

    font-size: 17px;

    line-height: 1.7;
}

.about-cta .btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 15px 30px;

    text-decoration: none;
}
 
.about-cta a{

    color: var(--white);
}

.membership-hero {

    background-image: url("../assets/images/membership-hero.png");

    margin-bottom: 80px;

}

.instructions-hero {

    background-image: url("../assets/images/instructions-hero.png");
}

.membership-details-section {
    padding: 20px 0 100px;
}

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

.gallery-hero {

    background-image:
        url("../assets/images/gallery-hero.png");

        margin-bottom: 80px;
}

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

.gallery-section {
    padding-bottom: 110px;
}


.gallery-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    grid-auto-rows: 260px;

    gap: 18px;
}


.gallery-item {

    position: relative;

    margin: 0;

    min-width: 0;

    overflow: hidden;

    border-radius: 10px;

    background: var(--gray);
}


.gallery-item-large {

    grid-column: span 2;

    grid-row: span 2;
}


.gallery-item-tall {

    grid-row: span 2;
}


.gallery-item-wide {

    grid-column: span 2;
}


.gallery-image-btn {

    position: relative;

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    background: none;

    cursor: pointer;

    overflow: hidden;
}


.gallery-image-btn img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}


.gallery-image-btn:hover img {

    transform: scale(1.05);
}

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

.gallery-video-wrapper {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: var(--border-radius);

}


.gallery-video-wrapper iframe {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    border: 0;

}


/* ============================================
   IMAGE OVERLAY
============================================= */

.gallery-image-overlay {

    position: absolute;
    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        rgba(17, 17, 17, 0.35);

    opacity: 0;

    transition:
        opacity var(--transition);
}


.gallery-image-btn:hover .gallery-image-overlay {

    opacity: 1;
}


.gallery-view-icon {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.7);

    border-radius: 50%;

    color: var(--white);

    font-size: 28px;
    font-weight: 300;

    line-height: 1;
}

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

.gallery-lightbox {

    position: fixed;

    inset: 0;

    z-index: 10000;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px;

    visibility: hidden;

    opacity: 0;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.gallery-lightbox.active {

    visibility: visible;

    opacity: 1;
}


/* --------------------------------------------
   OVERLAY
--------------------------------------------- */

.gallery-lightbox-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(17, 17, 17, 0.94);

    backdrop-filter: blur(8px);
}


/* --------------------------------------------
   DIALOG
--------------------------------------------- */

.gallery-lightbox-dialog {

    position: relative;

    z-index: 1;

    width: min(1100px, 100%);

    height: min(85vh, 800px);

    display: flex;

    align-items: center;
    justify-content: center;
}


/* --------------------------------------------
   IMAGE
--------------------------------------------- */

.gallery-lightbox-image-wrap {

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;
}


.gallery-lightbox-image-wrap img {

    display: block;

    max-width: 90%;
    max-height: 85vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 4px;

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, 0.4);
}


/* --------------------------------------------
   CLOSE
--------------------------------------------- */

.gallery-lightbox-close {

    position: absolute;

    top: -20px;
    right: 80px;

    z-index: 3;

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid
        rgba(17, 17, 17, 0.12);

    border-radius: 50%;

    background: var(--white);

    cursor: pointer;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition);
}

.gallery-lightbox-close img {

    width: 40px;
    height: 40px;

    display: block;
}


.gallery-lightbox-close:hover {

    background: rgb(0, 0, 0);

    transform: rotate(-90deg);
}


.gallery-lightbox-close:hover img {
    transform: rotate(-90deg);
}

/* --------------------------------------------
   PREVIOUS / NEXT
--------------------------------------------- */

.gallery-lightbox-prev,
.gallery-lightbox-next {

    position: absolute;

    top: 50%;

    z-index: 3;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid
        rgba(255, 255, 255, 0.3);

    border-radius: 50%;

    background:
        rgba(17, 17, 17, 0.5);

    color: var(--white);

    font-size: 22px;

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background var(--transition),
        border-color var(--transition);
}


.gallery-lightbox-prev {

    left: 10px;
}


.gallery-lightbox-next {

    right: 10px;
}


.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {

    background: var(--primary);

    border-color: var(--primary);
}

.gallery-lightbox-image-wrap {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    /* Allow vertical gestures, let JS handle horizontal swipe */
    touch-action: pan-y;

    user-select: none;
    -webkit-user-select: none;
}

.gallery-lightbox-image-wrap img {
    transition:
        opacity .25s ease,
        transform .3s ease;
}

/* ============================================
   CONTACT INFORMATION
============================================= */

.contact-hero {

    background-image: 
        url("../assets/images/contact-hero.png");

        margin-bottom: 80px;
}

.contact-section {

    background: var(--white);
}


.contact-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 70px;

    align-items: stretch;
}


.contact-details h2 {

    margin-bottom: 10px;

    font-family: var(--font-body);

}


.contact-details h2 span {

    color: var(--primary);
}


.contact-intro {

    max-width: 560px;

    margin-bottom: 20px;

    color: var(--text);

    line-height: 1.8;
}



/* ============================================
   CONTACT INFO ITEMS
============================================= */

.contact-info-item {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 18px 0;

    border-bottom:
        1px solid rgba(17, 17, 17, 0.08);
}


.contact-info-item:first-of-type {

    border-top:
        1px solid rgba(17, 17, 17, 0.08);
}


.contact-info-icon {

    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    display: flex;
    justify-content: center;

}


.contact-info-content {

    padding-top: 2px;
}


.contact-info-label {

    display: block;

    margin-bottom: 5px;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: var(--secondary);
}


.contact-info-content p {

    margin: 0;

    color: var(--text);

    font-size: 15px;

    line-height: 1.7;
}


.contact-info-content a {

    color: var(--text);

    font-size: 15px;

    transition: color var(--transition);
}


.contact-info-content a:hover {

    color: var(--primary);
}

/* ============================================
   OPENING HOURS
============================================= */

.contact-hours {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

    margin-top: 10px;
}


.contact-hours-item {

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.contact-hours-days {

    font-size: 16px;

    line-height: 1.5;

    color: var(--text);
}


.contact-hours-time {

    font-size: 15px;

    line-height: 1.5;

    color: var(--text);

    white-space: nowrap;
}


/* ============================================
   MAP
============================================= */

.contact-map {

    display: flex;

    flex-direction: column;
}


.contact-map-wrapper {

    flex: 1;

    min-height: 500px;

    overflow: hidden;

    border-radius: 12px;

    background: var(--gray);
}


.contact-map-wrapper iframe {

    display: block;

    width: 100%;
    height: 100%;

    min-height: 500px;

    border: 0;
}


.map-link {

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 15px 5px 0;

    color: var(--secondary);

    font-size: 14px;
    font-weight: 600;

    letter-spacing: 0.5px;
}


.map-link span {

    color: var(--primary);

    font-size: 20px;

    transition:
        transform var(--transition);
}


.map-link:hover span {

    transform: translateX(5px);
}



/* ============================================
   CONTACT CTA
============================================= */



/* ============================================
   CONTACT FORM
============================================= */

.contact-form-section {

    background: var(--gray);

    margin: 80px;
}


.contact-form-heading {

    max-width: 650px;

    margin-bottom: 45px;
}


.contact-form-heading h2 {

    margin-bottom: 15px;
}


.contact-form-heading h2 span {

    color: var(--primary);
}


.contact-form-heading p {

    margin: 0;

    color: var(--text);

    line-height: 1.8;
}


.contact-form {

    max-width: 1000px;
}


.contact-form-row {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 25px;
}


.form-group {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 25px;
}


.form-group label {

    font-size: 13px;

    font-weight: 600;

    color: var(--secondary);

    letter-spacing: 0.3px;
}


.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding: 14px 16px;

    border:
        1px solid rgba(17, 17, 17, 0.13);

    border-radius: 6px;

    background: var(--white);

    color: var(--secondary);

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}


.form-group textarea {

    resize: vertical;

    min-height: 150px;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(212, 175, 55, 0.10);
}


.contact-submit {

    border: 0;

    cursor: pointer;
}

.blog-hero {

    background-image: 
        url("../assets/images/blog-hero.png");

        margin-bottom: 80px;
}

.blogs-section {

    padding-top: 70px;

    padding-bottom: var(--section-padding-block);

}

.hair-hero {

    background-image: url("../assets/images/services/hair-care-hero.png");
    
}

.hand-foot-nail-hero {

    background-image: url("../assets/images/services/hand-foot-nail-care-hero.png");
    
}

.makeup-bridal-hero{

    background-image: url("../assets/images/services/makeup-bridal-hero.png");
    
}

.other-services-hero {

    background-image: url("../assets/images/services/home-service-hero.png");
    
}

.skin-body-hero {

    background-image: url("../assets/images/services/skin-body-care-hero.png");
    
}


/* ============================================================
   BLOG ARTICLE
============================================================ */


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

.article-hero {
    padding: clamp(55px, 8vw, 100px) 0 clamp(45px, 6vw, 75px);
    background: #faf9f6;
}

.article-hero__inner {
    max-width: 1000px;
}


/* Breadcrumbs */

.article-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 45px;

    color: #888;
    font-size: 13px;
}

.article-breadcrumbs a {
    transition: color var(--transition);
}

.article-breadcrumbs a:hover {
    color: var(--primary);
}


/* Category */

.article-category {
    margin: 0 0 18px;

    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* Title */

.article-title {
    max-width: 95%;
    margin: 0;

    color: var(--secondary);

    font-family: "Playfair Display", serif;

    font-size: clamp(42px, 6vw, 76px);
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -1.5px;
}

.article-title span {
    display: block;
    color: var(--primary);
}


/* Intro */

.article-excerpt {
    max-width: 90%;
    margin: 30px 0 40px;

    color: #666;

    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.7;
}


/* ============================================================
   ARTICLE META
============================================================ */

.article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
}

.article-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.article-author__avatar {
    display: grid;
    width: 42px;
    height: 42px;

    place-items: center;

    color: var(--white);
    background: var(--secondary);

    border-radius: 50%;

    font-size: 12px;
    font-weight: 700;
}

.article-author__details strong,
.article-meta__item strong {
    display: block;

    color: var(--secondary);

    font-size: 13px;
}

.article-author__details span,
.article-meta__item span {
    display: block;

    color: #888;

    font-size: 11px;
}

.article-meta__divider {
    width: 1px;
    height: 35px;

    background: var(--border);
}


/* ============================================================
   FEATURED IMAGE
============================================================ */

.article-featured {
    padding-bottom: 80px;

    background: #faf9f6;
}

.article-featured__image {
    margin: 0;

    overflow: hidden;

    border-radius: var(--border-radius);
}

.article-featured__image img {
    width: 100%;
    aspect-ratio: 16 / 8;

    object-fit: cover;
}


/* ============================================================
   ARTICLE BODY
============================================================ */

.article-body {
    padding: clamp(65px, 8vw, 100px) 0 110px;
}

.article-layout {
    display: grid;

    grid-template-columns:
        220px
        minmax(0, 720px);

    justify-content: center;

    gap: 75px;
}


/* ============================================================
   TABLE OF CONTENTS
============================================================ */

.article-toc {
    position: relative;
}

.article-toc__inner {
    position: sticky;
    top: 110px;
}

.article-toc__label {
    display: block;

    margin-bottom: 18px;

    color: #999;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.article-toc nav {
    display: flex;
    flex-direction: column;

    border-left: 1px solid var(--border);
}

.article-toc a {
    padding: 7px 0 7px 17px;

    color: #888;

    font-size: 13px;
    line-height: 1.5;

    transition:
        color var(--transition),
        border-color var(--transition);
}

.article-toc a:hover {
    margin-left: -1px;

    color: var(--primary-dark);

    border-left: 2px solid var(--primary);
}


/* ============================================================
   ARTICLE CONTENT
============================================================ */

.article-content {
    min-width: 0;
}

.article-content p {
    margin: 0 0 24px;

    color: #4b4b4b;

    font-size: 17px;
    line-height: 1.9;
}

.article-content .article-lead {
    color: #333;

    font-size: 21px;
    line-height: 1.8;
}


/* Article headings */

.article-content h2 {
    position: relative;

    margin: 65px 0 22px;

    color: var(--secondary);

    font-family: "Playfair Display", serif;

    font-size: clamp(28px, 4vw, 40px);
    font-weight: 600;
    line-height: 1.2;
}

.article-content h2::before {
    content: "";

    display: block;

    width: 35px;
    height: 2px;

    margin-bottom: 16px;

    background: var(--primary);
}


/* ============================================================
   ARTICLE HIGHLIGHT
============================================================ */

.article-highlight {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    margin: 45px 0;
    padding: 28px 30px;

    background: #faf8f0;

    border-left: 3px solid var(--primary);
}

.article-highlight__icon {
    flex: 0 0 auto;

    color: var(--primary);

    font-size: 22px;
}

.article-highlight p {
    margin: 0;

    color: #555;

    font-size: 16px;
}

/* ============================================================
   ARTICLE CTA
============================================================ */

.article-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;

    margin: 75px 0 50px;
    padding: 40px;

    color: var(--white);

    background: var(--secondary);

    border-radius: var(--border-radius);
}

.article-cta__eyebrow {
    color: var(--primary);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.article-cta__content h2 {
    margin: 10px 0;

    color: var(--white);

    font-family: "Playfair Display", serif;

    font-size: 30px;
}

.article-cta__content h2::before {
    display: none;
}

.article-cta__content p {
    max-width: 500px;

    margin: 0;

    color: #bbb;

    font-size: 14px;
}

.article-cta__button {
    flex: 0 0 auto;

    padding: 14px 22px;

    color: var(--secondary);

    background: var(--primary);

    border-radius: 4px;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    transition:
        transform var(--transition),
        background var(--transition);
}

.article-cta__button:hover {
    background: #e5c35b;

    transform: translateY(-2px);
}


/* ============================================================
   SHARE
============================================================ */

.article-share {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: 30px;

    border-top: 1px solid var(--border);
}

.article-share > span {
    color: #777;

    font-size: 13px;
    font-weight: 600;
}

.article-share__buttons {
    display: flex;

    gap: 8px;
}

.article-share__buttons button {
    display: grid;

    width: 38px;
    height: 38px;

    padding: 0;

    place-items: center;

    color: var(--secondary);

    background: var(--gray);

    border: 0;
    border-radius: 50%;

    cursor: pointer;

    transition:
        color var(--transition),
        background var(--transition);
}

.article-share__buttons button img{
    
    position: relative;
    width: 30px;
    height: 30px;

    padding: 0;

    place-items: center;
}



.article-share__buttons img:hover {

    transform: translateY(-5px) scale(1.05);
}

/* ============================================================
   RELATED ARTICLES
============================================================ */

.related-articles {
    padding: 90px 0 110px;

    background: #faf9f6;
}

.related-articles__heading {
    margin-bottom: 45px;
}

.related-articles__heading > span {
    color: var(--primary);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}

.related-articles__heading h2 {
    margin: 10px 0 0;

    color: var(--secondary);

    font-family: "Playfair Display", serif;

    font-size: clamp(32px, 4vw, 48px);
    font-weight: 600;
}

.related-articles__grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;
}

.blog-articles__grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 40px;
}


/* Related card */

.related-card {
    overflow: hidden;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: var(--border-radius);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.related-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.08);
}

.related-card__image {
    overflow: hidden;
}

.related-card__image img {
    width: 100%;

    aspect-ratio: 16 / 10;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.related-card:hover .related-card__image img {
    transform: scale(1.04);
}

.related-card__content {
    padding: 25px;
}

.related-card__content > span {
    color: var(--primary-dark);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.related-card__content h3 {
    margin: 10px 0 12px;

    color: var(--secondary);

    font-family: "Playfair Display", serif;

    font-size: 22px;

    line-height: 1.3;
}

.related-card__content p {
    margin: 0 0 18px;

    color: #777;

    font-size: 13px;
    line-height: 1.7;
}

.related-card__content strong {
    color: var(--secondary);

    font-size: 12px;
}