/* =========================================================================
   HEARTH — Home, Warmth and Care
   Theme: "Fresh & Trusted" (teal / mint / sunny yellow, Manrope headings).
   Previous terracotta theme: styles.css.backup
   Stylesheet organized by section. Mobile-first, vanilla CSS3.
   ========================================================================= */

/* Self-hosted web fonts (Manrope, Plus Jakarta Sans, IBM Plex Mono).
   fonts.css is generated by scripts/fetch-fonts.js -- run `npm run fonts`. */
@import url("fonts.css");

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
    /* Color palette */
    --color-clay: #0f5c5a;          /* primary: deep teal */
    --color-clay-dark: #0a4543;
    --color-clay-10: #e3f4ef;       /* mint tint */
    --color-clay-20: #bfe3d8;
    --color-ink: #12302e;           /* deep teal-ink */
    --color-cream: #f7fbfa;         /* page background */
    --color-cream-dim: #e9f3f0;
    --color-espresso: #3e5654;      /* secondary text */
    --color-sage: #2e8b6e;          /* success */
    --color-sage-20: #dcf1e8;
    --color-gold: #f5b83d;          /* sunny highlight */
    --color-gold-20: #fdf0d3;
    --color-white: #ffffff;
    --color-line: rgba(18, 48, 46, 0.12);
    --color-error: #b3423a;
    --color-error-10: #f6e2df;

    /* Typography */
    --font-display: "Manrope", "Plus Jakarta Sans", -apple-system, sans-serif;
    --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "IBM Plex Mono", monospace;

    /* Spacing scale */
    --space-2xs: 0.4rem;
    --space-xs: 0.8rem;
    --space-sm: 1.2rem;
    --space-md: clamp(1.6rem, 1.4rem + 1vw, 2.4rem);
    --space-lg: clamp(2.4rem, 1.8rem + 2.5vw, 4.8rem);
    --space-xl: clamp(4rem, 3rem + 4vw, 8rem);

    /* Layout */
    --container-max: 1320px;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(18, 48, 46, 0.06);
    --shadow-md: 0 12px 30px rgba(18, 48, 46, 0.09);
    --shadow-lg: 0 24px 60px rgba(18, 48, 46, 0.14);

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 180ms;
    --dur-med: 360ms;
}

/* -------------------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* The [hidden] attribute is a browser default (user-agent) style, which
   author rules like `.modal-error { display: flex; }` silently override —
   the element keeps its hidden="" attribute but still renders. This single
   rule guarantees hidden really means hidden, site-wide, regardless of
   what display value any component class sets. */
[hidden] {
    display: none !important;
}
html {
    scroll-behavior: smooth;
    font-size: 100%;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-ink);
    background: var(--color-cream);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img {
    max-width: 100%;
    display: block;
    object-fit: cover;
}
a {
    color: inherit;
    text-decoration: none;
}
ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.12;
    margin: 0;
    color: var(--color-ink);
}
p {
    margin: 0;
}
button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}
input {
    font: inherit;
}
svg {
    display: block;
}

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

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 999;
    background: var(--color-ink);
    color: var(--color-cream);
    padding: 0.8rem 1.4rem;
    border-radius: 0 0 8px 0;
}
.skip-link:focus {
    left: 0;
}

/* Focus visibility for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2.5px solid var(--color-clay-dark);
    outline-offset: 3px;
    border-radius: 4px;
}

/* -------------------------------------------------------------------------
   3. LAYOUT HELPERS
   ------------------------------------------------------------------------- */
.section-inner {
    width: min(92%, var(--container-max));
    margin-inline: auto;
}
.section-inner-narrow {
    width: min(92%, 820px);
}

.section {
    padding-block: var(--space-xl);
}

.section-head {
    max-width: 640px;
    margin-bottom: var(--space-lg);
}
.section-head h2 {
    font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.8rem);
    margin-top: 0.6rem;
}
.section-sub {
    margin-top: var(--space-sm);
    color: var(--color-espresso);
    font-size: 1.05rem;
}
.sub-light {
    color: rgba(247, 251, 250, 0.82) !important;
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-clay-dark);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
.eyebrow::before {
    content: "";
    width: 18px;
    height: 1.5px;
    background: var(--color-clay-dark);
    display: inline-block;
}
.eyebrow-light {
    color: var(--color-gold);
}
.eyebrow-light::before {
    background: var(--color-gold);
}

/* -------------------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------------------- */
.btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn-primary {
    background: var(--color-clay);
    color: var(--color-cream);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    background: var(--color-clay-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.btn-ghost {
    color: var(--color-ink);
    padding-inline: 1.2rem;
}
.btn-ghost:hover {
    color: var(--color-clay-dark);
}
.btn-sm {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
}

/* Ripple effect (JS toggles .rippling + custom props --rx/--ry) */
.btn-ripple::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%);
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    transition: opacity 500ms ease, transform 500ms ease;
}
.btn-ripple.is-rippling::after {
    opacity: 1;
    transform: scale(2.2);
    transition: none;
    animation: rippleFade 550ms ease-out forwards;
}
@keyframes rippleFade {
    0% {
        opacity: .6;
        transform: scale(0.4);
    }
    100% {
        opacity: 0;
        transform: scale(2.4);
    }
}

/* -------------------------------------------------------------------------
   5. HEADER / NAVIGATION
   ------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(247, 251, 250, 0.78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.site-header.is-scrolled {
    box-shadow: var(--shadow-sm);
    border-bottom-color: var(--color-line);
}
.navbar {
    width: min(94%, 1400px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 1rem;
    gap: 1.5rem;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.brand-mark {
    color: var(--color-clay);
    display: inline-flex;
}
.brand-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
}
/* Wordmark + tagline ("Hearth — Home, Warmth and Care"), stacked. */
.brand-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.05;
}
.brand-tagline {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-espresso);
    margin-top: 0.15rem;
    white-space: nowrap;
}
@media (max-width: 479.98px) {
    .site-header .brand-tagline {
        display: none; /* keep the mobile header compact */
    }
}

.nav-links {
    display: none;
    align-items: center;
    gap: 2.1rem;
}
.nav-link {
    position: relative;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--color-espresso);
    padding-block: 0.3rem;
    transition: color var(--dur-fast) var(--ease);
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--color-clay);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-fast) var(--ease);
}
.nav-link:hover, .nav-link.is-active {
    color: var(--color-ink);
}
.nav-link:hover::after, .nav-link.is-active::after {
    transform: scaleX(1);
}

.nav-link-pro {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--color-clay-dark);
    background: var(--color-clay-10);
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-pill);
}
.nav-link-pro::after {
    display: none;
}
.nav-link-pro:hover {
    color: var(--color-cream);
    background: var(--color-clay);
}

.nav-actions {
    display: none;
    align-items: center;
    gap: 0.6rem;
}

.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
}
.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-ink);
    border-radius: 2px;
    transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 767.98px) {
    .nav-links {
        position: fixed;
        inset: 66px 0 0 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--color-cream);
        padding: var(--space-md);
        gap: 0.2rem;
        transform: translateX(100%);
        transition: transform var(--dur-med) var(--ease);
        overflow-y: auto;
    }
    .nav-links.is-open {
        display: flex;
        transform: translateX(0);
    }
    .nav-links .nav-link {
        padding: 1rem 0.4rem;
        border-bottom: 1px solid var(--color-line);
        font-size: 1.05rem;
    }
    .nav-links .nav-link-pro {
        display: inline-flex;
        border-bottom: none;
        margin-top: 0.8rem;
        padding: 0.7rem 1.1rem;
        font-size: 0.95rem;
    }
    .nav-actions.is-open {
        display: flex;
    }
}

@media (min-width: 768px) {
    .nav-links {
        display: flex;
    }
    .nav-actions {
        display: flex;
    }
    .nav-toggle {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   6. HERO SECTION
   ------------------------------------------------------------------------- */
.hero {
    padding-block: var(--space-lg) var(--space-xl);
    background:
        radial-gradient(60% 55% at 88% 8%, var(--color-clay-10) 0%, transparent 70%),
        var(--color-cream);
}
.hero-inner {
    width: min(92%, var(--container-max));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: center;
}
.hero-heading {
    font-size: clamp(2.4rem, 1.8rem + 3.4vw, 4.4rem);
    letter-spacing: -0.02em;
}
.hero-heading em {
    font-style: italic;
    color: var(--color-clay);
}
.hero-sub {
    margin-top: var(--space-sm);
    max-width: 46ch;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
    color: var(--color-espresso);
}

/* Search card */
.search-card {
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-xs);
    gap: var(--space-xs);
    max-width: 620px;
}
.search-field {
    flex: 1;
    padding: 0.4rem 0.8rem;
}
.search-field label {
    display: block;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-espresso);
    margin-bottom: 0.2rem;
}
.search-field input {
    border: none;
    width: 100%;
    font-size: 0.98rem;
    color: var(--color-ink);
    background: transparent;
}
.search-field input:focus {
    outline: none;
}
.search-field input::placeholder {
    color: #8aa3a0;
}
.search-divider {
    height: 1px;
    background: var(--color-line);
}
.search-submit {
    width: 100%;
}

@media (min-width: 560px) {
    .search-card {
        flex-direction: row;
        align-items: center;
        border-radius: var(--radius-pill);
    }
    .search-divider {
        width: 1px;
        height: 34px;
    }
    .search-submit {
        width: auto;
    }
}

/* Hero stats */
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}
.stat {
    display: flex;
    flex-direction: column;
}
.stat-number, .stat-plus {
    font-family: var(--font-mono);
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
    font-weight: 600;
    color: var(--color-ink);
}
.stat-plus {
    color: var(--color-clay);
}
.stat-label {
    font-size: 0.85rem;
    color: var(--color-espresso);
    margin-top: 0.2rem;
}

/* Hero photo + floating cards */
.hero-art {
    display: flex;
    justify-content: center;
}
.hero-photo-frame {
    position: relative;
    width: min(100%, 420px);
    border-radius: var(--radius-lg);
    overflow: visible;
}
.hero-photo-frame img {
    width: 100%;
    height: clamp(340px, 42vw, 500px);
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(247, 251, 250, 0.9);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: var(--radius-md);
    padding: 0.7rem 1rem;
    box-shadow: var(--shadow-md);
    font-size: 0.8rem;
    line-height: 1.25;
    max-width: 200px;
}
.float-card strong {
    display: block;
    font-size: 0.85rem;
    color: var(--color-ink);
}
.float-card span {
    color: var(--color-espresso);
    font-size: 0.75rem;
}
.float-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-clay);
    color: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.float-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    background: var(--color-ink);
    color: var(--color-cream);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}
.float-card-rating svg {
    fill: var(--color-gold);
}
.float-card-top {
    top: -18px;
    left: -14px;
}
.float-card-bottom {
    bottom: 14px;
    right: -18px;
}

.badge-stamp {
    position: absolute;
    top: 40%;
    right: -22px;
    width: 84px;
    height: 84px;
}
.badge-stamp svg {
    width: 100%;
    height: 100%;
}

.float-anim {
    animation: floaty 6s ease-in-out infinite;
}
.float-anim-delay {
    animation: floaty 6s ease-in-out infinite;
    animation-delay: 1.4s;
}
@keyframes floaty {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-14px);
    }
}
.badge-spin {
    animation: spin 14s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 479.98px) {
    .float-card {
        max-width: 160px;
        padding: 0.55rem 0.8rem;
        font-size: 0.72rem;
    }
    .float-card-top {
        left: -6px;
    }
    .float-card-bottom {
        right: -6px;
    }
    .badge-stamp {
        width: 64px;
        height: 64px;
        right: -8px;
    }
}

@media (min-width: 960px) {
    .hero-inner {
        grid-template-columns: 1.05fr 0.95fr;
    }
}

/* -------------------------------------------------------------------------
   7. POPULAR SERVICES
   ------------------------------------------------------------------------- */
.service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}
.service-card {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-sm);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
    /* perforated ticket edge */
    --notch: 12px;
    clip-path: none;
}
.service-card::before {
    content: "";
    position: absolute;
    top: var(--notch);
    right: calc(-1 * var(--notch) / 2);
    width: var(--notch);
    height: var(--notch);
    background: var(--color-cream);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--color-line);
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.service-icon {
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-clay-10);
    color: var(--color-clay-dark);
    margin-bottom: var(--space-sm);
}
.service-icon svg {
    width: 26px;
    height: 26px;
}
.service-card h3 {
    font-size: 1.08rem;
    margin-bottom: 0.35rem;
}
.service-card p {
    font-size: 0.88rem;
    color: var(--color-espresso);
}
.service-price {
    display: inline-block;
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--color-clay-dark);
    border-top: 1px dashed var(--color-line);
    padding-top: 0.6rem;
    width: 100%;
}

@media (min-width: 640px) {
    .service-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1024px) {
    .service-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* -------------------------------------------------------------------------
   8. FEATURED PROFESSIONALS
   ------------------------------------------------------------------------- */
.pros {
    background: var(--color-cream-dim);
}
.pro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}
.pro-card {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.pro-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.pro-favourite-btn {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(247, 251, 250, 0.9);
    backdrop-filter: blur(4px);
    color: var(--color-espresso);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pro-favourite-btn:hover {
    transform: scale(1.08);
}
.pro-favourite-btn[aria-pressed="true"] {
    color: var(--color-clay);
}
.pro-favourite-btn[aria-pressed="true"] svg {
    fill: var(--color-clay);
}
.pro-photo {
    position: relative;
    width: 84px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: var(--space-sm);
}
.pro-photo svg, .pro-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.verified-pin {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-sage);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 2px solid var(--color-white);
}
.pro-card h3 {
    font-size: 1.15rem;
}
.pro-role {
    color: var(--color-espresso);
    font-size: 0.9rem;
    margin-top: 0.2rem;
}
.pro-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--space-sm);
    font-size: 0.85rem;
    color: var(--color-ink);
}
.rating {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--color-gold);
    font-weight: 600;
}
.rating svg {
    fill: var(--color-gold);
}
.dot {
    color: var(--color-line);
}
.pro-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--color-line);
}
.pro-price {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-ink);
}
.pro-price small {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-espresso);
    font-size: 0.75rem;
}

@media (min-width: 640px) {
    .pro-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .pro-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* -------------------------------------------------------------------------
   9. HOW IT WORKS
   ------------------------------------------------------------------------- */
.how {
    background:
        radial-gradient(50% 60% at 12% 100%, var(--color-clay-10) 0%, transparent 70%),
        var(--color-cream);
}
.how-route {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    position: relative;
    counter-reset: step;
}
.how-step {
    position: relative;
    padding-left: 70px;
}
.how-stop {
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-clay-dark);
    width: 46px;
    height: 46px;
    border: 1.5px dashed var(--color-clay);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-cream);
}
.how-step h3 {
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
}
.how-step p {
    color: var(--color-espresso);
    max-width: 32ch;
}

/* Floating phone mockups */
.phone-mockup {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-lg);
    margin-left: -70px;
}
.phone-frame {
    width: 168px;
    aspect-ratio: 9 / 18.5;
    background: var(--color-ink);
    border-radius: 26px;
    padding: 8px;
    box-shadow: var(--shadow-lg);
    position: relative;
    animation: floaty 5.5s ease-in-out infinite;
}
.phone-float-2 .phone-frame {
    animation-delay: 1.1s;
}
.phone-float-3 .phone-frame {
    animation-delay: 2.2s;
}
.phone-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 14px;
    background: var(--color-ink);
    border-radius: 0 0 10px 10px;
    z-index: 2;
}
.phone-screen {
    width: 100%;
    height: 100%;
    background: var(--color-cream);
    border-radius: 18px;
    overflow: hidden;
    padding: 14px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.app-screen-header {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: var(--color-espresso);
    margin-bottom: 2px;
}
.app-screen-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--color-ink);
    margin: 0 0 4px;
}
.app-tile {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 9px;
    padding: 6px 8px;
    font-size: 0.56rem;
    color: var(--color-ink);
    font-weight: 500;
}
.app-tile-flat {
    background: var(--color-clay-10);
    border-color: transparent;
}
.app-tile-active {
    background: var(--color-clay);
    border-color: var(--color-clay);
    color: var(--color-cream);
}
.app-tile-icon {
    font-size: 0.75rem;
    line-height: 1;
}
.app-cta-bar {
    margin-top: auto;
    background: var(--color-ink);
    color: var(--color-cream);
    text-align: center;
    border-radius: var(--radius-pill);
    padding: 7px;
    font-size: 0.58rem;
    font-weight: 600;
}
.app-cta-bar-outline {
    background: transparent;
    border: 1.5px solid var(--color-ink);
    color: var(--color-ink);
}
.app-calendar {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: var(--color-espresso);
    margin-bottom: 4px;
}
.app-calendar .is-selected {
    background: var(--color-ink);
    color: var(--color-cream);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.app-map {
    position: relative;
    height: 60px;
    background: var(--color-sage-20);
    border-radius: 9px;
    margin-bottom: 4px;
    overflow: hidden;
}
.app-map-pin {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-clay);
    border: 2px solid var(--color-cream);
}
.app-map-pin-a {
    top: 12px;
    left: 16px;
}
.app-map-pin-b {
    bottom: 10px;
    right: 18px;
    background: var(--color-ink);
}
.app-map-route {
    position: absolute;
    top: 16px;
    left: 20px;
    width: 60%;
    height: 60%;
    border-bottom: 2px dashed var(--color-clay-dark);
    border-right: 2px dashed var(--color-clay-dark);
    border-radius: 0 0 30px 0;
}

@media (min-width: 860px) {
    .how-route {
        grid-template-columns: repeat(3, 1fr);
    }
    .how-stop {
        position: static;
        margin-bottom: var(--space-sm);
    }
    .how-step {
        padding-left: 0;
        text-align: center;
    }
    .how-step p {
        margin-inline: auto;
    }
    .phone-mockup {
        margin-left: 0;
        padding-left: 0;
    }
}

/* -------------------------------------------------------------------------
   10. WHY CHOOSE US
   ------------------------------------------------------------------------- */
.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}
.why-card {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.why-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-clay);
}
.why-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-sage-20);
    color: var(--color-sage);
    margin-bottom: var(--space-sm);
}
.why-icon svg {
    width: 24px;
    height: 24px;
}
.why-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}
.why-card p {
    color: var(--color-espresso);
    font-size: 0.92rem;
}

@media (min-width: 640px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .why-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* -------------------------------------------------------------------------
   11. CUSTOMER REVIEWS
   ------------------------------------------------------------------------- */
.reviews {
    background: var(--color-cream-dim);
}
.review-track {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-sm);
    scrollbar-width: thin;
    scrollbar-color: var(--color-clay-20) transparent;
}
.review-track:focus-visible {
    outline: 2.5px solid var(--color-clay-dark);
    outline-offset: 4px;
}
.review-card {
    scroll-snap-align: start;
    flex: 0 0 min(85%, 380px);
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
}
.review-stars {
    color: var(--color-gold);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}
.review-card p {
    font-size: 1rem;
    color: var(--color-ink);
}
.review-card footer {
    margin-top: var(--space-sm);
    display: flex;
    flex-direction: column;
}
.review-card footer strong {
    font-size: 0.92rem;
}
.review-card footer span {
    font-size: 0.8rem;
    color: var(--color-espresso);
}

/* -------------------------------------------------------------------------
   12. DOWNLOAD APP
   ------------------------------------------------------------------------- */
.app-cta {
    background: var(--color-ink);
    color: var(--color-cream);
    border-radius: var(--radius-lg);
    width: min(94%, 1360px);
    margin-inline: auto;
}
.app-cta h2 {
    color: var(--color-cream);
}
.app-cta-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: center;
}
.store-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-md);
}
.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    background: rgba(247, 251, 250, 0.08);
    border: 1px solid rgba(247, 251, 250, 0.25);
    border-radius: var(--radius-sm);
    padding: 0.7rem 1.3rem;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.store-btn:hover {
    background: rgba(247, 251, 250, 0.16);
    transform: translateY(-2px);
}
.store-btn small {
    display: block;
    font-size: 0.68rem;
    opacity: 0.75;
}
.store-btn strong {
    display: block;
    font-size: 0.95rem;
}
.app-art {
    display: flex;
    justify-content: center;
}
.app-photo-frame {
    position: relative;
    width: min(100%, 300px);
}
.app-photo-frame img {
    width: 100%;
    height: clamp(280px, 32vw, 360px);
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(247, 251, 250,0.12);
}
.app-photo-chip {
    position: absolute;
    bottom: -16px;
    left: -20px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(247, 251, 250, 0.94);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.9rem;
    box-shadow: var(--shadow-md);
    max-width: 190px;
}
.app-photo-chip strong {
    display: block;
    font-size: 0.8rem;
    color: var(--color-ink);
}
.app-photo-chip span {
    font-size: 0.72rem;
    color: var(--color-espresso);
}

@media (max-width: 479.98px) {
    .app-photo-chip {
        left: -6px;
        max-width: 160px;
        padding: 0.5rem 0.7rem;
    }
}

@media (min-width: 860px) {
    .app-cta-inner {
        grid-template-columns: 1.2fr 0.8fr;
    }
}

/* -------------------------------------------------------------------------
   13. FAQ ACCORDION
   ------------------------------------------------------------------------- */
.accordion-item {
    border-bottom: 1px solid var(--color-line);
}
.accordion-item h3 {
    font-family: var(--font-body);
}
.accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) 0.2rem;
    text-align: left;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-ink);
}
.accordion-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.accordion-icon::before, .accordion-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--color-clay-dark);
    transform: translate(-50%, -50%);
    transition: transform var(--dur-fast) var(--ease);
}
.accordion-icon::before {
    width: 14px;
    height: 2px;
}
.accordion-icon::after {
    width: 2px;
    height: 14px;
}
.accordion-trigger[aria-expanded="true"] .accordion-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.accordion-panel {
    overflow: hidden;
    max-height: 300px;
    transition: max-height var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease);
}
.accordion-panel[hidden] {
    display: block;
    max-height: 0;
    opacity: 0;
}
.accordion-panel p {
    padding-bottom: var(--space-sm);
    color: var(--color-espresso);
    max-width: 62ch;
}

/* -------------------------------------------------------------------------
   14. FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
    background: #0b2321; /* deep teal (Fresh & Trusted theme) */
    color: var(--color-cream-dim);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
}
.footer-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding-bottom: var(--space-lg);
}
.footer-brand p {
    margin-top: var(--space-xs);
    font-size: 0.9rem;
    opacity: 0.8;
    max-width: 32ch;
}
.brand-footer .brand-mark {
    color: var(--color-gold);
}
.brand-footer .brand-name {
    color: var(--color-cream);
}
.brand-footer .brand-tagline {
    color: var(--color-gold);
}
.social-links {
    display: flex;
    gap: 0.7rem;
    margin-top: var(--space-sm);
}
.social-links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(247, 251, 250,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.social-links a:hover {
    background: var(--color-clay);
    border-color: var(--color-clay);
}

.footer-col h4 {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--space-sm);
}
.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.footer-col a {
    font-size: 0.92rem;
    opacity: 0.85;
    transition: opacity var(--dur-fast) var(--ease);
}
.footer-col a:hover {
    opacity: 1;
    text-decoration: underline;
}
.footer-newsletter p {
    font-size: 0.88rem;
    opacity: 0.8;
    margin-bottom: var(--space-sm);
}
.newsletter-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.newsletter-form input {
    flex: 1;
    min-width: 160px;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(247, 251, 250,0.25);
    background: rgba(247, 251, 250,0.06);
    color: var(--color-cream);
}
.newsletter-form input::placeholder {
    color: rgba(247, 251, 250,0.5);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    padding-block: var(--space-sm);
    border-top: 1px solid rgba(247, 251, 250,0.15);
    font-size: 0.82rem;
    opacity: 0.7;
}

@media (min-width: 640px) {
    .footer-top {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .footer-top {
        grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr 1.1fr;
    }
}

/* -------------------------------------------------------------------------
   15. BACK TO TOP
   ------------------------------------------------------------------------- */
.back-to-top {
    position: fixed;
    right: var(--space-sm);
    bottom: var(--space-sm);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--color-ink);
    color: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
    z-index: 90;
}
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover {
    background: var(--color-clay);
}

/* -------------------------------------------------------------------------
   16. SCROLL-REVEAL ANIMATION
   ------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger children of grids automatically via JS-set transition-delay */

/* -------------------------------------------------------------------------
   17. INNER PAGE HEADER (About / Contact / Legal / FAQ banner)
   ------------------------------------------------------------------------- */
.page-hero {
    padding-block: var(--space-lg) var(--space-md);
    background:
        radial-gradient(55% 60% at 90% 0%, var(--color-clay-10) 0%, transparent 70%),
        var(--color-cream);
    text-align: left;
}
.page-hero .section-inner {
    max-width: 900px;
}
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-espresso);
    margin-bottom: var(--space-sm);
}
.breadcrumb a {
    color: var(--color-espresso);
    transition: color var(--dur-fast) var(--ease);
}
.breadcrumb a:hover {
    color: var(--color-clay-dark);
}
.breadcrumb span[aria-hidden] {
    color: var(--color-clay-20);
}
.page-hero h1 {
    font-size: clamp(2.1rem, 1.7rem + 2.2vw, 3.2rem);
    letter-spacing: -0.02em;
}
.page-hero .page-lede {
    margin-top: var(--space-sm);
    max-width: 60ch;
    font-size: 1.05rem;
    color: var(--color-espresso);
}
.page-updated {
    display: inline-block;
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-clay-dark);
    background: var(--color-clay-10);
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
}

/* -------------------------------------------------------------------------
   18. LEGAL CONTENT (Terms / Privacy / Refund)
   ------------------------------------------------------------------------- */
.legal-content {
    max-width: 780px;
}
.legal-content h2 {
    font-size: 1.4rem;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-xs);
    scroll-margin-top: 100px;
}
.legal-content h2:first-child {
    margin-top: 0;
}
.legal-content h3 {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: var(--space-sm);
    margin-bottom: 0.4rem;
}
.legal-content p {
    color: var(--color-espresso);
    margin-bottom: var(--space-xs);
}
.legal-content ul, .legal-content ol {
    color: var(--color-espresso);
    margin: 0 0 var(--space-xs);
    padding-left: 1.4rem;
}
.legal-content ul {
    list-style: disc;
}
.legal-content ol {
    list-style: decimal;
}
.legal-content li {
    margin-bottom: 0.4rem;
}
.legal-content li::marker {
    color: var(--color-clay-dark);
}
.legal-content a {
    color: var(--color-clay-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-content strong {
    color: var(--color-ink);
}

.legal-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: start;
}
.legal-toc {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    position: sticky;
    top: 90px;
}
.legal-toc h4 {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-clay-dark);
    margin-bottom: var(--space-xs);
}
.legal-toc ol {
    list-style: none;
    padding: 0;
    counter-reset: toc;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.legal-toc a {
    font-size: 0.86rem;
    color: var(--color-espresso);
    text-decoration: none;
    display: block;
    transition: color var(--dur-fast) var(--ease);
}
.legal-toc a:hover {
    color: var(--color-clay-dark);
}

@media (min-width: 960px) {
    .legal-layout {
        grid-template-columns: 240px 1fr;
    }
}

/* -------------------------------------------------------------------------
   19. CONTACT PAGE
   ------------------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}
.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.contact-info-card {
    display: flex;
    gap: var(--space-sm);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
}
.contact-info-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-clay-10);
    color: var(--color-clay-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact-info-card h3 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}
.contact-info-card p {
    color: var(--color-espresso);
    font-size: 0.92rem;
    margin: 0;
}
.contact-info-card a {
    color: var(--color-clay-dark);
}

.contact-map {
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    position: relative;
    background: var(--color-sage-20);
}
.contact-map svg {
    width: 100%;
    height: 100%;
    display: block;
}
.contact-map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    background: var(--color-clay);
    transform-origin: bottom right;
    rotate: -45deg;
    translate: -50% -100%;
    box-shadow: var(--shadow-md);
}

.contact-form-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-md);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.form-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-ink);
}
.form-field input,
.form-field select,
.form-field textarea {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
    font-size: 0.95rem;
    color: var(--color-ink);
    background: var(--color-cream);
    font-family: inherit;
    resize: vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-clay);
    background: var(--color-white);
}
.form-note {
    font-size: 0.8rem;
    color: var(--color-espresso);
    margin-top: var(--space-xs);
}

@media (min-width: 640px) {
    .form-row-2 {
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 960px) {
    .contact-grid {
        grid-template-columns: 1fr 1.1fr;
    }
}

/* -------------------------------------------------------------------------
   20. ABOUT PAGE
   ------------------------------------------------------------------------- */
.about-story {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: center;
}
.about-story img {
    width: 100%;
    height: clamp(260px, 34vw, 400px);
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.about-story .legal-content p {
    max-width: 56ch;
}

.values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}
.value-card {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
.value-card .why-icon {
    margin-bottom: var(--space-sm);
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    background: var(--color-ink);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    color: var(--color-cream);
}
.about-stats .stat-number {
    color: var(--color-cream);
}
.about-stats .stat-label {
    color: rgba(247, 251, 250,0.7);
}

@media (min-width: 640px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 860px) {
    .about-story {
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 1024px) {
    .values-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .about-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* -------------------------------------------------------------------------
   21. FAQ PAGE — category labels for grouped accordions
   ------------------------------------------------------------------------- */
.faq-category-label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-clay-dark);
    margin: var(--space-lg) 0 var(--space-xs);
}
.faq-category-label:first-child {
    margin-top: 0;
}

/* -------------------------------------------------------------------------
   22. BREAKPOINT REFINEMENTS (1200 / 1440 desktop polish)
   ------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .hero-heading {
        letter-spacing: -0.025em;
    }
    .section {
        padding-block: var(--space-xl);
    }
}
@media (min-width: 1440px) {
    .section-inner {
        width: min(88%, 1360px);
    }
}

/* Print: keep it simple */
@media print {
    .site-header, .back-to-top, .nav-toggle {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   23. SIGNUP MODAL (mobile-screen popup: OTP + registration flow)
   ------------------------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    background: rgba(18, 48, 46, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-med) var(--ease), visibility var(--dur-med) var(--ease);
}
.modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.modal-phone {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 380px;
    height: min(680px, 92vh);
    overflow: hidden;
    background: var(--color-cream);
    border-radius: 32px;
    box-shadow: var(--shadow-lg);
    transform: translateY(24px) scale(0.97);
    opacity: 0;
    transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease);
}
.modal-overlay.is-open .modal-phone {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--color-espresso);
}
.modal-close:hover {
    color: var(--color-clay-dark);
}

.modal-steps-indicator {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 2.2rem 1.6rem 0;
}
.modal-steps-indicator[hidden] {
    display: none;
}
.step-dot {
    height: 4px;
    flex: 1;
    border-radius: var(--radius-pill);
    background: var(--color-clay-10);
    overflow: hidden;
}
.step-dot::after {
    content: "";
    display: block;
    height: 100%;
    width: 0%;
    background: var(--color-clay);
    transition: width var(--dur-med) var(--ease);
}
.step-dot.is-active::after,
.step-dot.is-complete::after {
    width: 100%;
}

/* ---- sliding screen navigator ---- */
.modal-screens {
    position: relative;
    flex: 1;
    overflow: hidden;
}
.modal-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-md) 1.6rem 1.8rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 420ms var(--ease);
}
.modal-screen.screen-current {
    transform: translateX(0%);
    z-index: 2;
}
.modal-screen.screen-off-left {
    transform: translateX(-100%);
    z-index: 1;
}
.modal-screen.screen-off-right {
    transform: translateX(100%);
    z-index: 1;
}

.modal-title {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}
.modal-sub {
    color: var(--color-espresso);
    font-size: 0.92rem;
    margin-bottom: var(--space-md);
    line-height: 1.5;
}
.modal-sub strong {
    color: var(--color-ink);
}

.link-btn {
    color: var(--color-clay-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: inherit;
    padding: 0;
}
.link-btn:disabled {
    color: var(--color-espresso);
    opacity: 0.6;
    text-decoration: none;
    cursor: default;
}

.otp-mobile-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--color-white);
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.4rem 0.4rem 0.9rem;
    margin-bottom: var(--space-xs);
    transition: border-color var(--dur-fast) var(--ease);
}
.otp-mobile-field:focus-within {
    border-color: var(--color-clay);
}
.otp-country-code {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-espresso);
    padding-right: 0.6rem;
    border-right: 1px solid var(--color-line);
}
.otp-mobile-field input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    padding: 0.6rem 0;
    color: var(--color-ink);
    font-family: var(--font-mono);
}
.otp-mobile-field input:focus {
    outline: none;
}

.otp-boxes {
    display: flex;
    gap: 0.5rem;
    margin-bottom: var(--space-xs);
}
.otp-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-ink);
    background: var(--color-white);
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease);
}
.otp-box:focus {
    outline: none;
    border-color: var(--color-clay);
}
.otp-box.is-filled {
    border-color: var(--color-clay-20);
}

.modal-error {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--color-error);
    background: var(--color-error-10);
    font-size: 0.82rem;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-xs);
}
.modal-hint {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--color-sage);
    background: var(--color-sage-20);
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-xs);
}

.modal-submit {
    width: 100%;
    justify-content: center;
    margin-top: var(--space-xs);
    padding-block: 0.9rem;
}
.modal-submit:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none !important;
}
.modal-resend {
    margin-top: var(--space-sm);
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-espresso);
}
.modal-switch {
    margin-top: var(--space-md);
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-espresso);
}

/* ---- waiting / loading screen ---- */
.modal-waiting {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-md);
}
.modal-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3.5px solid var(--color-clay-10);
    border-top-color: var(--color-clay);
    animation: spinnerRotate 800ms linear infinite;
}
@keyframes spinnerRotate {
    to {
        transform: rotate(360deg);
    }
}
.modal-waiting-label {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-espresso);
}

/* ---- success screen ---- */
.modal-screen[data-screen="success"],
.modal-screen[data-screen="login-success"],
.modal-screen[data-screen="login-not-found"] {
    align-items: center;
    justify-content: center;
    text-align: center;
}
.modal-notfound-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-clay-10);
    color: var(--color-clay-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
}
.modal-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-sage);
    color: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: var(--space-md);
    animation: successPop 480ms var(--ease);
}
@keyframes successPop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }
    70% {
        transform: scale(1.08);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

.modal-screen .form-field {
    margin-bottom: var(--space-sm);
}
.modal-screen .form-field input {
    background: var(--color-white);
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
}
.modal-screen .form-field input:focus {
    border-color: var(--color-clay);
}

@media (max-width: 479.98px) {
    .modal-overlay {
        padding: 0;
    }
    .modal-phone {
        max-width: 100%;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
}

/* -------------------------------------------------------------------------
   24. LOGGED-IN USER CHIP + ACCOUNT DROPDOWN
   ------------------------------------------------------------------------- */
.user-menu {
    position: relative;
}
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-clay-10);
    border-radius: var(--radius-pill);
    padding: 0.35rem 0.7rem 0.35rem 0.35rem;
    animation: successPop 420ms var(--ease);
    transition: background var(--dur-fast) var(--ease);
}
.user-chip:hover,
.user-chip[aria-expanded="true"] {
    background: var(--color-clay-20);
}
.user-chip-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-clay);
    color: var(--color-cream);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.user-chip-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-ink);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-chip-caret {
    color: var(--color-espresso);
    transition: transform var(--dur-fast) var(--ease);
    flex-shrink: 0;
}
.user-chip[aria-expanded="true"] .user-chip-caret {
    transform: rotate(180deg);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 120;
    min-width: 190px;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.4rem;
    animation: successPop 180ms var(--ease);
}
.user-dropdown[hidden] {
    display: none;
}
.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.65rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-ink);
    text-align: left;
    transition: background var(--dur-fast) var(--ease);
}
.user-dropdown-item svg {
    flex-shrink: 0;
    color: var(--color-espresso);
}
.user-dropdown-item:hover {
    background: var(--color-clay-10);
}
.user-dropdown-item-danger {
    color: var(--color-error);
}
.user-dropdown-item-danger svg {
    color: var(--color-error);
}
.user-dropdown-item-danger:hover {
    background: var(--color-error-10);
}


/* -------------------------------------------------------------------------
   25. CATEGORIES & SERVICES BROWSER PAGE
   ------------------------------------------------------------------------- */

/* ---- search bar in page hero ---- */
.cat-search {
    margin-top: var(--space-md);
    max-width: 560px;
}
.cat-search-field {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--color-white);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    padding: 0.5rem 0.5rem 0.5rem 1.2rem;
}
.cat-search-field svg {
    color: var(--color-espresso);
    flex-shrink: 0;
}
.cat-search-field input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.98rem;
    color: var(--color-ink);
    padding: 0.6rem 0;
}
.cat-search-field input:focus {
    outline: none;
}
.cat-search-field input::placeholder {
    color: #8aa3a0;
}
.cat-search-clear {
    display: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-clay-10);
    color: var(--color-espresso);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cat-search-clear.is-visible {
    display: flex;
}
.cat-search-clear:hover {
    background: var(--color-clay-20);
}

/* ---- sticky sub-nav: category pills + subcategory chips ---- */
.cat-subnav {
    position: sticky;
    top: 73px;
    z-index: 40;
    background: rgba(247, 251, 250, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-line);
    padding-block: var(--space-sm);
}
.cat-pill-row,
.subcat-chip-row {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.cat-pill-row::-webkit-scrollbar,
.subcat-chip-row::-webkit-scrollbar {
    display: none;
}

.cat-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    border: 1.5px solid var(--color-line);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-espresso);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cat-pill-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
}
.cat-pill-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
    background: var(--color-clay-10);
}
.cat-pill-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cat-pill-count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: inherit;
    opacity: 0.7;
}
.cat-pill:hover {
    border-color: var(--color-clay);
    color: var(--color-ink);
}
.cat-pill.is-active {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-cream);
}
.cat-pill.is-active .cat-pill-count {
    opacity: 0.75;
}

.subcat-chip-row {
    margin-top: var(--space-sm);
}
.subcat-chip {
    flex-shrink: 0;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1.5px solid var(--color-clay-20);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-clay-dark);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.subcat-chip:hover {
    background: var(--color-clay-10);
}
.subcat-chip.is-active {
    background: var(--color-clay);
    border-color: var(--color-clay);
    color: var(--color-cream);
}

/* ---- results meta line ---- */
.cat-results-meta {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-espresso);
    margin: var(--space-md) 0 var(--space-sm);
}
.cat-results-meta strong {
    color: var(--color-ink);
}

/* ---- category/subcategory hero banner ---- */
.cat-banner {
    position: relative;
    width: 100%;
    height: clamp(140px, 22vw, 240px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: var(--space-md);
    background: var(--color-clay-10);
}
.cat-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cat-banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-md);
    background: linear-gradient(0deg, rgba(18, 48, 46,0.78) 0%, rgba(18, 48, 46,0.15) 55%, rgba(18, 48, 46,0) 100%);
}
.cat-banner-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 0.3rem;
}
.cat-banner-title {
    color: var(--color-cream);
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
    margin: 0;
}

/* ---- SKU grid + cards ---- */
.sku-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}
.sku-card {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
    animation: skuCardFadeIn 420ms var(--ease) both;
}
@keyframes skuCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .sku-card {
        animation: none;
    }
}
.sku-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.sku-thumb {
    position: relative;
    width: 100%;
    height: 150px;
}
.sku-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sku-wishlist-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(247, 251, 250, 0.9);
    backdrop-filter: blur(4px);
    color: var(--color-espresso);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.sku-wishlist-btn:hover {
    transform: scale(1.08);
}
.sku-wishlist-btn[aria-pressed="true"] {
    color: var(--color-clay);
}
.sku-wishlist-btn[aria-pressed="true"] svg {
    fill: var(--color-clay);
}

.sku-card-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sku-breadcrumb {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-clay-dark);
    margin-bottom: 0.3rem;
}
.sku-name {
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
}
.sku-popular-badge {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink);
    background: var(--color-gold-20);
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}
.sku-description {
    color: var(--color-espresso);
    font-size: 0.9rem;
    margin-bottom: var(--space-sm);
    flex: 1;
}
.sku-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--color-ink);
    margin-bottom: var(--space-sm);
}
.sku-duration {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: var(--color-espresso);
}
.sku-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--color-line);
}
.sku-price {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-ink);
}
.sku-price small {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-espresso);
    font-size: 0.72rem;
}

.sku-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-clay);
    color: var(--color-clay-dark);
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--color-white);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sku-add-btn:hover {
    background: var(--color-clay-10);
}
.sku-add-btn.is-added {
    background: var(--color-clay);
    border-color: var(--color-clay);
    color: var(--color-cream);
}

.sku-stepper {
    display: none;
    align-items: center;
    gap: 0.6rem;
    background: var(--color-clay);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.5rem;
}
.sku-stepper.is-visible {
    display: flex;
}
.sku-stepper button {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(247, 251, 250, 0.2);
    color: var(--color-cream);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.sku-stepper button:hover {
    background: rgba(247, 251, 250, 0.35);
}
.sku-stepper-qty {
    color: var(--color-cream);
    font-family: var(--font-mono);
    font-weight: 700;
    min-width: 1ch;
    text-align: center;
}

/* ---- no results ---- */
.cat-no-results {
    text-align: center;
    padding: var(--space-xl) var(--space-sm);
    color: var(--color-espresso);
}
.cat-no-results h3 {
    color: var(--color-ink);
    margin-bottom: 0.4rem;
}

/* ---- sticky cart summary bar ---- */
.cart-bar {
    position: fixed;
    left: 50%;
    bottom: var(--space-sm);
    transform: translate(-50%, 140%);
    z-index: 150;
    width: min(92%, 560px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    background: var(--color-ink);
    color: var(--color-cream);
    border-radius: var(--radius-lg);
    padding: 0.9rem 0.9rem 0.9rem 1.4rem;
    box-shadow: var(--shadow-lg);
    transition: transform var(--dur-med) var(--ease);
}
.cart-bar.is-visible {
    transform: translate(-50%, 0);
}
.cart-bar-info {
    display: flex;
    flex-direction: column;
}
.cart-bar-count {
    font-size: 0.8rem;
    opacity: 0.75;
}
.cart-bar-total {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.05rem;
}
.cart-bar-cta {
    background: var(--color-clay);
    color: var(--color-cream);
    padding: 0.65rem 1.2rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.88rem;
    white-space: nowrap;
}
.cart-bar-cta:hover {
    background: var(--color-clay-dark);
}

@media (min-width: 640px) {
    .sku-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .sku-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 767.98px) {
    .cat-subnav {
        top: 0;
    }
}

/* -------------------------------------------------------------------------
   26. MY PROFILE PAGE
   ------------------------------------------------------------------------- */
.profile-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-md) var(--space-lg);
}
.profile-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-line);
}
.profile-card-header h2 {
    font-size: 1.3rem;
}
.profile-card-actions {
    display: flex;
    gap: 0.5rem;
}

.profile-fields-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm) var(--space-md);
}
.profile-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.profile-field-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-clay-dark);
}
.profile-field-value {
    font-size: 0.98rem;
    color: var(--color-ink);
    font-weight: 500;
    padding-block: 0.4rem;
}
.profile-field input,
.profile-field select {
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.8rem;
    font-size: 0.95rem;
    color: var(--color-ink);
    background: var(--color-cream);
    font-family: inherit;
}
.profile-field input:focus,
.profile-field select:focus {
    outline: none;
    border-color: var(--color-clay);
    background: var(--color-white);
}
.profile-field input:disabled {
    background: var(--color-clay-10);
    color: var(--color-espresso);
    cursor: not-allowed;
}

.address-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-sm);
}
.address-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-clay-10);
    color: var(--color-clay-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}
.address-empty-state p {
    color: var(--color-espresso);
    max-width: 44ch;
}

@media (min-width: 640px) {
    .profile-fields-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -------------------------------------------------------------------------
   27. SCHEDULE PICKER (date + time slot, opened from Add-to-cart)
   ------------------------------------------------------------------------- */
.schedule-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-clay-dark);
    margin-bottom: 0.5rem;
}
.schedule-date-row {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.3rem;
    scrollbar-width: none;
}
.schedule-date-row::-webkit-scrollbar {
    display: none;
}
.schedule-date-chip {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    width: 58px;
    padding: 0.55rem 0.3rem;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-line);
    background: var(--color-white);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.schedule-date-weekday {
    font-size: 0.68rem;
    color: var(--color-espresso);
    text-transform: uppercase;
}
.schedule-date-num {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-ink);
}
.schedule-date-month {
    font-size: 0.65rem;
    color: var(--color-espresso);
}
.schedule-date-chip.is-active {
    background: var(--color-ink);
    border-color: var(--color-ink);
}
.schedule-date-chip.is-active .schedule-date-weekday,
.schedule-date-chip.is-active .schedule-date-month {
    color: rgba(247, 251, 250,0.7);
}
.schedule-date-chip.is-active .schedule-date-num {
    color: var(--color-cream);
}

.schedule-slot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    margin-bottom: var(--space-sm);
}
.schedule-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.65rem 0.4rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-line);
    background: var(--color-white);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-ink);
    text-align: center;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.schedule-slot small {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-espresso);
}
.schedule-slot:not(.is-disabled):hover {
    border-color: var(--color-clay);
}
.schedule-slot.is-active {
    background: var(--color-clay);
    border-color: var(--color-clay);
    color: var(--color-cream);
}
.schedule-slot.is-disabled {
    background: var(--color-cream-dim);
    color: var(--color-espresso);
    opacity: 0.6;
    cursor: not-allowed;
}
.schedule-slot.is-disabled small {
    color: var(--color-error);
}

/* ---- schedule summary line shown on an in-cart sku-card ---- */
.sku-schedule-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--color-espresso);
    background: var(--color-clay-10);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    margin-bottom: var(--space-sm);
}
.sku-schedule-line svg {
    color: var(--color-clay-dark);
    flex-shrink: 0;
}
.sku-schedule-line span {
    flex: 1;
}
.sku-schedule-line .link-btn {
    font-size: 0.76rem;
    flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   28. CHECKOUT PAGE
   ------------------------------------------------------------------------- */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    align-items: start;
}

.order-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
    border-bottom: 1px solid var(--color-line);
}
.order-line:last-child {
    border-bottom: none;
}
.order-line-breadcrumb {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-clay-dark);
    margin-bottom: 0.2rem;
}
.order-line-name {
    font-size: 1rem;
    margin-bottom: 0.3rem;
}
.order-line-schedule {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-espresso);
}
.order-line-schedule svg {
    color: var(--color-clay-dark);
    flex-shrink: 0;
}
.order-line-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}
.order-line-price {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-ink);
    min-width: 4.5ch;
    text-align: right;
}
.order-line-remove {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--color-error);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease);
}
.order-line-remove:hover {
    background: var(--color-error-10);
}

.payment-method-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.payment-method {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.payment-method:hover {
    border-color: var(--color-clay-20);
}
.payment-method.is-active {
    border-color: var(--color-clay);
    background: var(--color-clay-10);
}
.payment-method input {
    accent-color: var(--color-clay);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.payment-method-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-clay-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.payment-method-text {
    display: flex;
    flex-direction: column;
}
.payment-method-text strong {
    font-size: 0.95rem;
    color: var(--color-ink);
}
.payment-method-text small {
    font-size: 0.8rem;
    color: var(--color-espresso);
}

.checkout-summary-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-md);
    position: sticky;
    top: 90px;
}
.checkout-summary-card h3 {
    font-size: 1.1rem;
    margin-bottom: var(--space-sm);
}
.checkout-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.92rem;
    color: var(--color-espresso);
    padding-block: 0.4rem;
}
.checkout-summary-total {
    border-top: 1px dashed var(--color-line);
    margin-top: 0.4rem;
    padding-top: 0.7rem;
    font-weight: 700;
    color: var(--color-ink);
    font-size: 1.05rem;
}
.checkout-summary-total span:last-child {
    font-family: var(--font-mono);
}

@media (min-width: 960px) {
    .checkout-layout {
        grid-template-columns: 1.5fr 1fr;
    }
}

/* -------------------------------------------------------------------------
   29. BECOME A PROFESSIONAL — expertise multi-select + declaration
   ------------------------------------------------------------------------- */
.pro-expertise-group {
    margin-bottom: var(--space-sm);
}
.pro-expertise-group-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-clay-dark);
    margin-bottom: 0.5rem;
}
.pro-expertise-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.pro-expertise-chip {
    position: relative;
    cursor: pointer;
}
.pro-expertise-chip input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.pro-expertise-chip span {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-line);
    background: var(--color-white);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-espresso);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pro-expertise-chip input:hover + span {
    border-color: var(--color-clay-20);
}
.pro-expertise-chip input:checked + span {
    background: var(--color-clay);
    border-color: var(--color-clay);
    color: var(--color-cream);
}
.pro-expertise-chip input:focus-visible + span {
    outline: 2.5px solid var(--color-clay-dark);
    outline-offset: 2px;
}
.pro-expertise-chip input:disabled + span {
    opacity: 0.5;
    cursor: not-allowed;
}

/* "All Localities" option in the "Localities you serve" list — visually set
   apart from the individual locality chips (gold instead of clay, bolder
   border) and separated from them with a divider, since picking it has a
   different effect (clears/disables the rest) rather than just adding one
   more locality. */
.pro-expertise-chip-all {
    margin-right: 0.6rem;
    padding-right: 0.75rem;
    border-right: 1px dashed var(--color-line);
}
.pro-expertise-chip-all span {
    border-width: 2px;
    border-style: dashed;
    border-color: var(--color-gold);
    background: var(--color-gold-20);
    color: var(--color-espresso);
    font-weight: 700;
}
.pro-expertise-chip-all input:hover + span {
    border-color: var(--color-gold);
}
.pro-expertise-chip-all input:checked + span {
    border-style: solid;
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-ink);
}

.pro-declaration {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-ink);
    line-height: 1.5;
}
.pro-declaration input {
    margin-top: 0.2rem;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--color-clay);
}

/* -------------------------------------------------------------------------
   30. ACCOUNT HUB (Profile / Bookings / Vouchers / Favourites sidebar)
   ------------------------------------------------------------------------- */
.account-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    align-items: start;
}
.account-sidebar {
    min-width: 0;
}
.account-nav {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.account-nav::-webkit-scrollbar {
    display: none;
}
.account-nav-link {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-espresso);
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.account-nav-link svg {
    color: var(--color-espresso);
    flex-shrink: 0;
    transition: color var(--dur-fast) var(--ease);
}
.account-nav-link:hover {
    background: var(--color-clay-10);
    color: var(--color-ink);
}
.account-nav-link.is-active {
    background: var(--color-ink);
    color: var(--color-cream);
}
.account-nav-link.is-active svg {
    color: var(--color-cream);
}

.account-main {
    min-width: 0;
}

@media (min-width: 860px) {
    .account-layout {
        grid-template-columns: 240px 1fr;
    }
    .account-nav {
        flex-direction: column;
        position: sticky;
        top: 90px;
        overflow: visible;
    }
    .account-nav-link {
        width: 100%;
    }
}

/* -------------------------------------------------------------------------
   31. MY BOOKINGS
   ------------------------------------------------------------------------- */
.booking-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}
.booking-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-line);
}
.booking-status-badge {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.booking-status-upcoming {
    background: var(--color-sage-20);
    color: var(--color-sage);
}
.booking-status-past {
    background: var(--color-clay-10);
    color: var(--color-clay-dark);
}
.booking-status-cancelled {
    background: var(--color-error-10);
    color: var(--color-error);
}

.booking-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--color-line);
}
.booking-cancel-btn {
    color: var(--color-error);
}
.booking-cancel-btn:hover {
    background: var(--color-error-10);
}

.booking-services {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.booking-service-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
}
.booking-service-row h4 {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}
.booking-service-price {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-ink);
    white-space: nowrap;
    flex-shrink: 0;
}
.booking-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--color-line);
    font-size: 0.88rem;
    color: var(--color-espresso);
}

/* -------------------------------------------------------------------------
   32. VOUCHERS
   ------------------------------------------------------------------------- */
.voucher-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}
.voucher-card {
    position: relative;
    display: flex;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.voucher-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 68%;
    width: 0;
    border-left: 2px dashed var(--color-clay-20);
}
.voucher-card-main {
    flex: 1;
    padding: var(--space-md);
}
.voucher-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: 0.3rem;
}
.voucher-description {
    color: var(--color-espresso);
    font-size: 0.92rem;
    margin-bottom: 0.5rem;
}
.voucher-terms {
    font-size: 0.78rem;
    color: var(--color-espresso);
    opacity: 0.85;
    margin-bottom: 0.3rem;
}
.voucher-expiry {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--color-sage);
}
.voucher-card-code {
    flex-basis: 32%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: var(--space-md) var(--space-sm);
    background: var(--color-clay-10);
}
.voucher-code {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--color-clay-dark);
    text-align: center;
}
.voucher-copy-btn {
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   33. WISHLIST (saved services)
   ------------------------------------------------------------------------- */
.wishlist-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}
.wishlist-card {
    display: flex;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.wishlist-thumb {
    width: 110px;
    flex-shrink: 0;
    object-fit: cover;
}
.wishlist-card-body {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    min-width: 0;
}
.wishlist-card-body .sku-footer {
    border-top: none;
    padding-top: 0.4rem;
}

@media (min-width: 640px) {
    .voucher-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 479.98px) {
    .voucher-card {
        flex-direction: column;
    }
    .voucher-card::before {
        display: none;
        top: auto;
        left: 0;
        right: 0;
        bottom: 96px;
        border-left: none;
        border-top: 2px dashed var(--color-clay-20);
    }
    .voucher-card-code {
        flex-basis: auto;
    }
}

/* -------------------------------------------------------------------------
   34. JOB / ANNOUNCEMENT LIST (Careers open roles, Press newsroom)
   ------------------------------------------------------------------------- */
.job-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.job-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.job-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.job-card-main {
    flex: 1;
    min-width: 220px;
}
.job-card-main h3 {
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
}
.job-meta {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-clay-dark);
    margin-bottom: 0.4rem;
}
.job-description {
    color: var(--color-espresso);
    font-size: 0.9rem;
    max-width: 62ch;
}

/* -------------------------------------------------------------------------
   35. ADDRESS LIST (Profile page — multiple saved addresses)
   ------------------------------------------------------------------------- */
.address-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.address-entry {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
}
.address-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.address-entry-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-clay-dark);
    background: var(--color-clay-10);
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-pill);
}

/* ---- address choice list (inside the scheduling modal) ---- */
.address-choice-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 260px;
    overflow-y: auto;
}
.address-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-white);
    text-align: left;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.address-choice:hover {
    border-color: var(--color-clay-20);
}
.address-choice.is-active {
    border-color: var(--color-clay);
    background: var(--color-clay-10);
}
.address-choice-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-clay-dark);
    font-weight: 600;
}
.address-choice-summary {
    font-size: 0.86rem;
    color: var(--color-ink);
}

/* -------------------------------------------------------------------------
   36. CONFIRMATION DIALOG (generic "are you sure?" — first used for cancel booking)
   ------------------------------------------------------------------------- */
.confirm-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    background: rgba(18, 48, 46, 0.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-med) var(--ease), visibility var(--dur-med) var(--ease);
}
.confirm-dialog-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
.confirm-dialog-box {
    width: 100%;
    max-width: 360px;
    background: var(--color-cream);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-md) var(--space-md);
    box-shadow: var(--shadow-lg);
    transform: translateY(16px) scale(0.97);
    opacity: 0;
    transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease);
}
.confirm-dialog-overlay.is-open .confirm-dialog-box {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.confirm-dialog-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}
.confirm-dialog-message {
    color: var(--color-espresso);
    font-size: 0.92rem;
    margin-bottom: var(--space-md);
}
.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}
.confirm-dialog-danger-btn {
    background: var(--color-error);
    color: var(--color-cream);
}
.confirm-dialog-danger-btn:hover {
    background: #8f322c;
}

/* -------------------------------------------------------------------------
   37. ADMIN — login screen + dashboard shell (admin-login.html,
   admin-dashboard.html). A deliberately separate, no-frills area: it does
   not use the customer site's header/footer (layout.js) or its nav —
   admins aren't browsing services, and mixing the two chromes would blur
   what's a completely different privilege level.
   ------------------------------------------------------------------------- */

/* ---- login screen ---- */
.admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background:
        radial-gradient(60% 55% at 12% 8%, var(--color-clay-10) 0%, transparent 70%),
        var(--color-ink);
}
.admin-login-card {
    width: 100%;
    max-width: 380px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-lg) var(--space-md);
}
.admin-login-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--space-md);
}
.admin-login-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--color-clay);
    color: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.admin-login-brand-text h1 {
    font-size: 1.1rem;
    line-height: 1.2;
}
.admin-login-brand-text p {
    font-size: 0.78rem;
    color: var(--color-espresso);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.admin-login-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: var(--space-sm);
}
.admin-login-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-ink);
}
.admin-login-field input {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-line);
    background: var(--color-cream);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-ink);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.admin-login-field input:focus {
    outline: none;
    border-color: var(--color-clay);
    box-shadow: 0 0 0 3px var(--color-clay-10);
}
.admin-login-submit {
    width: 100%;
    margin-top: var(--space-xs);
}
.admin-login-error {
    color: var(--color-error);
    background: var(--color-error-10);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.9rem;
    font-size: 0.85rem;
    margin-bottom: var(--space-sm);
}

/* ---- dashboard shell ---- */
.admin-shell {
    min-height: 100vh;
    display: flex;
    background: var(--color-cream);
}
.admin-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--color-ink);
    color: var(--color-cream);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: var(--space-sm) var(--space-sm);
    border-bottom: 1px solid rgba(247, 251, 250, 0.1);
}
.admin-sidebar-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--color-clay);
    color: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    flex-shrink: 0;
}
.admin-sidebar-brand span {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(247, 251, 250, 0.6);
}
.admin-nav {
    flex: 1;
    padding: var(--space-sm) 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    overflow-y: auto;
}
.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-sm);
    color: rgba(247, 251, 250, 0.72);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    width: 100%;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.admin-nav-item svg {
    flex-shrink: 0;
    opacity: 0.85;
}
.admin-nav-item:hover {
    background: rgba(247, 251, 250, 0.08);
    color: var(--color-cream);
}
.admin-nav-item.is-active {
    background: var(--color-clay);
    color: var(--color-cream);
}
.admin-sidebar-footer {
    padding: 0.8rem;
    border-top: 1px solid rgba(247, 251, 250, 0.1);
}
.admin-sidebar-logout {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius-sm);
    color: rgba(247, 251, 250, 0.72);
    font-size: 0.85rem;
}
.admin-sidebar-logout:hover {
    background: rgba(247, 251, 250, 0.08);
    color: var(--color-cream);
}

.admin-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-line);
}
.admin-topbar h1 {
    font-size: 1.3rem;
}
.admin-topbar-admin {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--color-espresso);
}
.admin-topbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-clay-10);
    color: var(--color-clay-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}
.admin-content {
    flex: 1;
    padding: var(--space-md);
}
.admin-panel {
    max-width: 1200px;
}

/* ---- stat tiles (Overview tab) ---- */
.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.admin-stat-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-sm) var(--space-md);
}
.admin-stat-card .stat-number {
    display: block;
}
.admin-stat-card.is-accent-sage {
    background: var(--color-sage-20);
}
.admin-stat-card.is-accent-gold {
    background: var(--color-gold-20);
}
.admin-stat-card.is-accent-clay {
    background: var(--color-clay-10);
}
.admin-stat-card.is-accent-error {
    background: var(--color-error-10);
}
.admin-section-title {
    font-size: 1rem;
    margin: var(--space-md) 0 var(--space-xs);
}

/* ---- filter bar (status pills above a table) ---- */
.admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--space-sm);
}
.admin-filter-pill {
    padding: 0.45rem 1rem;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-line);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-espresso);
}
.admin-filter-pill.is-active {
    background: var(--color-clay);
    color: var(--color-cream);
    box-shadow: none;
}

/* ---- Execute SQL ---- */
.admin-sql-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: var(--space-sm) 0 var(--space-md);
}
.admin-sql-rowcount {
    font-size: 0.82rem;
    color: var(--color-espresso);
    opacity: 0.7;
}
/* Query results' first row is the backend's own column header (see
   renderSqlResult) - bolded and shaded to stand out from the data rows,
   scoped to this table only so the other admin tables keep their own look. */
#sqlResultWrap .admin-table th {
    font-weight: 700;
    background: var(--color-cream-dim);
}

/* ---- Professional Calendar: multi-field form rows (category/location cascades) ---- */
.admin-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.admin-form-row .form-field {
    flex: 1 1 200px;
    min-width: 180px;
}

/* ---- data table ---- */
.admin-table-wrap {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.admin-table th, .admin-table td {
    text-align: left;
    padding: 0.8rem var(--space-sm);
    white-space: nowrap;
}
.admin-table th {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-espresso);
    border-bottom: 1px solid var(--color-line);
}
.admin-table td {
    border-bottom: 1px solid var(--color-line);
    color: var(--color-ink);
}
.admin-table tbody tr:last-child td {
    border-bottom: none;
}
.admin-table tbody tr:hover {
    background: var(--color-cream);
}

/* ---- generic status badge (professional applications, bookings, etc.) ---- */
.admin-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.admin-badge-pending {
    background: var(--color-gold-20);
    color: var(--color-clay-dark);
}
.admin-badge-approved, .admin-badge-completed, .admin-badge-active {
    background: var(--color-sage-20);
    color: var(--color-sage);
}
.admin-badge-rejected, .admin-badge-cancelled {
    background: var(--color-error-10);
    color: var(--color-error);
}
.admin-badge-neutral {
    background: var(--color-cream-dim);
    color: var(--color-espresso);
}

/* ---- row-level actions (Approve/Reject on a pending application) ---- */
.admin-row-actions {
    display: flex;
    gap: 0.9rem;
}
.admin-action-link {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.2rem 0;
    white-space: nowrap;
}
.admin-action-approve {
    color: var(--color-sage);
}
.admin-action-approve:hover {
    color: #1f6f57;
    text-decoration: underline;
}
.admin-action-reject {
    color: var(--color-error);
}
.admin-action-reject:hover {
    color: #8f322c;
    text-decoration: underline;
}
.admin-action-link:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    text-decoration: none;
}

.admin-empty-state, .admin-loading-state, .admin-error-state {
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    color: var(--color-espresso);
}
.admin-error-state {
    color: var(--color-error);
}

@media (max-width: 860px) {
    .admin-sidebar {
        width: 72px;
    }
    .admin-sidebar-brand span,
    .admin-nav-item span,
    .admin-sidebar-logout span {
        display: none;
    }
    .admin-nav-item, .admin-sidebar-logout {
        justify-content: center;
    }
    .admin-topbar-admin span {
        display: none;
    }
}
@media (max-width: 560px) {
    .admin-content {
        padding: var(--space-sm);
    }
    .admin-table th, .admin-table td {
        padding: 0.6rem 0.8rem;
    }
}

/* ---- "sign in to continue" prompt (categories page) -------------------- */
.auth-prompt-toast {
    position: fixed;
    top: calc(var(--space-sm, 1rem) + 64px);
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    z-index: 200;
    background: var(--color-ink);
    color: var(--color-white);
    padding: 0.8rem 1.4rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 0.92rem;
    text-align: center;
    max-width: calc(100vw - 2.5rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-med, 0.25s) var(--ease, ease), transform var(--dur-med, 0.25s) var(--ease, ease);
}
.auth-prompt-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@keyframes navActionsPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(15, 92, 90, 0); }
    25%, 75% { box-shadow: 0 0 0 6px rgba(15, 92, 90, 0.18); }
    50% { box-shadow: 0 0 0 10px rgba(15, 92, 90, 0.1); }
}
.nav-actions-pulse #loginBtn,
.nav-actions-pulse #signupBtn {
    animation: navActionsPulse 0.8s ease-in-out 2;
    border-radius: var(--radius-md);
}