/* ========================================
   ARUMI AESTHETICS - MASTER STYLESHEET
   Design System: Quiet Luxury, Refined Aesthetic
   Tagline: "Refinement, never reinvention"
   ======================================== */

/* ========================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ======================================== */

:root {
    /* Color Palette */
    --color-ivory-blush: #F6EFE9;      /* Primary light background */
    --color-warm-sand: #E7DDD1;        /* Secondary light */
    --color-rose-nude: #E4D3CC;        /* Tertiary light */
    --color-arumi-bronze: #A6876F;     /* Accent warm */
    --color-deep-bronze: #8C6E58;      /* Accent deep */
    --color-mocha: #4A3B2C;            /* Mid-dark text */
    --color-espresso: #2E241B;         /* Primary dark text */
    --color-champagne-gold: #B89A4B;   /* Highlight accent */
    --color-bronze-text: #725843;   /* Accessible bronze for text on ANY light ground:
                                       5.78:1 ivory, 4.91:1 warm sand, 4.54:1 rose nude.
                                       Was #7A5E48, which cleared 4.5 only on ivory and
                                       dropped to 4.45 and 4.11 on the other two. */

    /* Semantic layer. css/pages/*.css was extracted verbatim from the design
       files, which resolved these through the design-system bundle. That bundle
       was never ported into this repo, so all seven resolved to nothing and the
       home page silently lost every section ground and its secondary text
       colours. Undefined custom properties raise no console error, which is why
       it survived review. Values match the design system's tokens/colors.css. */
    --surface-page: var(--color-ivory-blush);
    --surface-secondary: var(--color-warm-sand);
    --surface-tertiary: var(--color-rose-nude);
    --surface-darkest: var(--color-espresso);
    --text-secondary: var(--color-mocha);
    --text-link: var(--color-bronze-text);
    --border-subtle: var(--color-rose-nude);

    /* Typography */
    --font-display: 'Antic Didone', serif;
    --font-body: 'Jost', sans-serif;

    /* Type Scale (fluid: scales continuously from 375px to 1024px,
       flat at the floor/ceiling outside that range) */
    --type-h1: clamp(40px, 1.23vw + 35.4px, 48px);
    --type-h2: clamp(28px, 1.23vw + 23.4px, 36px);
    --type-h3: clamp(24px, 0.62vw + 21.7px, 28px);
    --type-h4: clamp(18px, 0.31vw + 16.8px, 20px);
    --type-body: clamp(15px, 0.15vw + 14.4px, 16px);
    --type-small: 14px;
    --type-xs: 12px;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    /* Spacing Scale (8px base) */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 96px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);

    /* Animation Timings */
    --duration-fast: 200ms;
    --duration-dissolve: 500ms;
    --duration-normal: 600ms;
    --duration-slow: 800ms;
    --ease-out: cubic-bezier(0.34, 1.56, 0.64, 1);
    --easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Responsive Breakpoints */
    --breakpoint-mobile: 320px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-ultrawide: 1440px;

    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 10;
    --z-fixed: 100;
    --z-modal: 1000;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   2. RESET & BASE STYLES
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    line-height: var(--line-height-normal);
    color: var(--color-espresso);
    background-color: var(--color-ivory-blush);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-md);
    color: var(--color-espresso);
}

h1 { font-size: var(--type-h1); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); }
h4 { font-size: var(--type-h4); }

p {
    margin-bottom: var(--space-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-mocha);
}

a {
    color: var(--color-bronze-text);
    text-decoration: none;
    transition: color var(--duration-fast) var(--easing);
}

a:hover {
    color: var(--color-bronze-text);
    text-decoration: underline;
}

ul, ol {
    margin-left: var(--space-lg);
    margin-bottom: var(--space-md);
}

li {
    margin-bottom: var(--space-xs);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Skip to content link (accessibility) */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    /* translate by full own height so it stays hidden regardless of
       padding/font-size (a fixed -40px offset left it partially visible) */
    transform: translateY(-101%);
    background: var(--color-arumi-bronze);
    color: white;
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    z-index: var(--z-modal);
}

.skip-link:focus {
    transform: none;
}

/* ========================================
   3. LAYOUT CONTAINERS & GRID
   ======================================== */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-sm);
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-md);
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 var(--space-lg);
    }
}

@media (min-width: 1440px) {
    .container {
        max-width: 1440px;
        padding: 0 var(--space-xl);
    }
}

/* CSS Grid utility classes */
.grid {
    display: grid;
    gap: var(--space-lg);
}

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

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

/* Flex utilities */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.flex-col {
    flex-direction: column;
}

/* ========================================
   4. NAVIGATION COMPONENT
   ======================================== */

.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(246, 239, 233, 0.95);
    backdrop-filter: blur(10px);
    z-index: var(--z-fixed);
    border-bottom: 1px solid rgba(166, 135, 111, 0.1);

    /* Fade-in animation on page load */
    animation: nav-fade-in 500ms ease-out forwards;
}

@keyframes nav-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--space-sm) var(--space-md);
    height: 80px;
}

@media (min-width: 1024px) {
    .nav-container {
        padding: var(--space-sm) var(--space-lg);
        height: 90px;
    }
}

/* Logo */
.nav-logo {
    position: relative;
    z-index: 10;
}

.logo-link {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--color-mocha);
    text-decoration: none;
    transition: opacity var(--duration-fast);
    padding: var(--space-xs) 0;
}

.logo-link:hover,
.logo-link:focus-visible {
    text-decoration: none;
}

/* Logo swap: wordmark at rest, dissolves to the A submark on hover */
.logo-swap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.logo-text {
    transition: opacity 800ms cubic-bezier(0.45, 0, 0.2, 1),
                transform 800ms cubic-bezier(0.45, 0, 0.2, 1);
}

.logo-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.05);
    width: 52px;
    height: 52px;
    opacity: 0;
    transition: opacity 800ms cubic-bezier(0.45, 0, 0.2, 1),
                transform 800ms cubic-bezier(0.45, 0, 0.2, 1);
    pointer-events: none;
}

.logo-link:hover .logo-text,
.logo-link:focus-visible .logo-text {
    opacity: 0;
    transform: scale(0.97);
}

.logo-link:hover .logo-mark,
.logo-link:focus-visible .logo-mark {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.logo-text {
    position: relative;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    /* optically re-center: letter-spacing adds a trailing gap after the I */
    margin-right: -0.32em;
}

/* Desktop Navigation Menu */
.nav-menu {
    display: none;
    gap: var(--space-xl);
    flex: 1;
    justify-content: flex-start;
    margin: 0 auto 0 var(--space-2xl);
}

@media (min-width: 1024px) {
    .nav-menu {
        display: flex;
    }
}

.nav-link {
    font-size: 13px;
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-espresso);
    text-decoration: none;
    position: relative;
    transition: color var(--duration-fast);
    padding: var(--space-xs) 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-arumi-bronze);
    transition: width var(--duration-fast);
}

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

/* Suppress the global link underline: the animated bar above is the
   only hover indicator for nav links */
.nav-link:hover,
.nav-link:focus-visible {
    text-decoration: none;
}

/* Nav item with a dropdown (The Experience > Skin & Recovery / Considered Refinement).
   Revealed on hover and on keyboard focus-within; no JS required. */
.nav-item-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-caret {
    width: 10px;
    height: 10px;
    margin-left: 6px;
    stroke: var(--color-arumi-bronze);
    transition: transform var(--duration-fast);
}

.nav-item-wrap:hover .nav-caret,
.nav-item-wrap:focus-within .nav-caret {
    transform: rotate(180deg);
}

.nav-submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 240px;
    padding: var(--space-sm) 0;
    background: var(--color-ivory-blush);
    border: 1px solid rgba(166, 135, 111, 0.25);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-fast) var(--easing),
                transform var(--duration-fast) var(--easing),
                visibility 0s linear var(--duration-fast);
}

.nav-item-wrap:hover .nav-submenu,
.nav-item-wrap:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity var(--duration-fast) var(--easing),
                transform var(--duration-fast) var(--easing),
                visibility 0s;
}

.nav-submenu-link {
    display: block;
    padding: var(--space-xs) var(--space-md);
    font-size: 12px;
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-espresso);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--duration-fast), color var(--duration-fast);
}

.nav-submenu-link:hover,
.nav-submenu-link:focus-visible {
    background: var(--color-warm-sand);
    color: var(--color-deep-bronze);
    text-decoration: none;
}

/* Desktop CTA Button */
/* Pill-outlined booking CTA (Webflow reference). Shown in the nav bar
   from 560px up; below that the scroll-triggered fixed CTA covers it. */
.nav-cta {
    display: none;
    background: transparent;
    border: 1px solid var(--color-arumi-bronze);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 12px;
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-espresso);
    transition: all var(--duration-fast);
}

@media (min-width: 560px) {
    .nav-cta {
        display: block;
        margin-left: auto;
        margin-right: var(--space-md);
    }
}

@media (min-width: 1024px) {
    .nav-cta {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Scroll-aware: hidden while a page booking CTA is in view,
   fades in once none are visible (mirrors the mobile fixed CTA) */
.nav-cta.is-suppressed {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.nav-cta {
    transition: opacity var(--duration-fast) var(--easing),
                transform var(--duration-fast) var(--easing),
                background-color var(--duration-dissolve) var(--easing),
                border-color var(--duration-dissolve) var(--easing);
}

/* Dissolve to champagne gold on hover, matching the pill CTAs */
.nav-cta:hover,
.nav-cta:focus-within {
    background: var(--color-champagne-gold);
    border-color: var(--color-champagne-gold);
}

.nav-cta a {
    color: var(--color-espresso);
    text-decoration: none;
    transition: color var(--duration-dissolve) var(--easing);
}

.nav-cta:hover a,
.nav-cta:focus-within a {
    color: var(--color-espresso);
}

/* Mobile Hamburger Button */
.nav-hamburger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 101;
    padding: var(--space-xs);
}

@media (min-width: 1024px) {
    .nav-hamburger {
        display: none;
    }
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background: var(--color-espresso);
    transition: all var(--duration-fast);
}

.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(10px, 10px);
}

.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
}

.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* ========================================
   5. MOBILE MENU
   ======================================== */

.mobile-menu {
    position: fixed;
    top: 80px;
    right: 0;
    width: 85%;
    max-width: 360px;
    height: calc(100vh - 80px);
    background: var(--color-ivory-blush);
    z-index: var(--z-fixed);
    transform: translateX(100%);
    transition: transform var(--duration-normal);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: var(--space-lg) var(--space-md);
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-link {
    padding: var(--space-md) 0;
    font-size: var(--type-h4);
    color: var(--color-espresso);
    text-decoration: none;
    border-bottom: 1px solid rgba(166, 135, 111, 0.1);
    transition: background var(--duration-fast);
}

.mobile-menu-link:hover {
    background: var(--color-warm-sand);
}

/* Nested items under The Experience in the mobile menu */
.mobile-menu-sublink {
    padding-left: var(--space-md);
    font-size: var(--type-body);
    color: var(--color-mocha);
}

.mobile-menu-cta {
    margin-top: auto;
    background: var(--color-arumi-bronze);
    border: none;
    padding: var(--space-md);
    border-radius: var(--radius-full);
    cursor: pointer;
    width: 100%;
    font-size: var(--type-body);
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-espresso);
    transition: background-color var(--duration-dissolve) var(--easing),
                color var(--duration-dissolve) var(--easing);
}

.mobile-menu-cta:hover,
.mobile-menu-cta:active {
    background: var(--color-champagne-gold);
    color: var(--color-espresso);
}

.mobile-menu-cta a {
    color: inherit;
    text-decoration: none;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-fixed) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal);
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Fixed mobile booking CTA (appears on scroll, hides at footer).
   Only needed below 560px, where the in-bar pill CTA is hidden. */
@media (min-width: 560px) {
    .mobile-fixed-cta {
        display: none;
    }
}

.mobile-fixed-cta {
    position: fixed;
    bottom: var(--space-md);
    left: 50%;
    transform: translate(-50%, 12px);
    z-index: var(--z-fixed);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--easing), transform var(--duration-fast) var(--easing);
}

.mobile-fixed-cta.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.mobile-fixed-cta a {
    display: block;
    white-space: nowrap;
    padding: var(--space-xs) var(--space-md);
    background: var(--color-arumi-bronze);
    color: var(--color-espresso);
    border-radius: var(--radius-full);
    font-size: var(--type-small);
    font-family: var(--font-body);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: background-color var(--duration-dissolve) var(--easing),
                color var(--duration-dissolve) var(--easing);
}

.mobile-fixed-cta a:hover,
.mobile-fixed-cta a:active {
    background: var(--color-champagne-gold);
    color: var(--color-espresso);
    text-decoration: none;
}

/* ========================================
   6. MAIN CONTENT & HERO
   ======================================== */

main {
    margin-top: 80px;
}

@media (min-width: 1024px) {
    main {
        margin-top: 90px;
    }
}

.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .hero {
        animation: hero-zoom-in 3000ms ease-out forwards;
    }
}

@keyframes hero-zoom-in {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.05);
    }
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(46, 36, 27, 0.6) 0%, rgba(74, 59, 44, 0.4) 100%);
    z-index: 1;
}

/* Brand-ground hero for interior pages: espresso gradient with the
   submark as a large quiet watermark (photography pending; owner chose
   the logo treatment for hero bleeds) */
.hero.hero-brand {
    min-height: 52vh;
    background: linear-gradient(165deg, var(--color-warm-sand) 0%, var(--color-ivory-blush) 70%);
    background-attachment: scroll;
}

/* Light editorial hero (owner selected): warm sand to ivory, with the
   botanical submark as a quiet bronze watermark that slowly drifts */
.hero-brand::before {
    background: url('../images/logo-submark-bronze.png') no-repeat;
    background-size: min(74vh, 560px);
    background-position: right -4% center;
    opacity: 0.12;
    animation: hero-watermark-drift 16s ease-in-out infinite;
    transform-origin: 70% 50%;
}

@media (prefers-reduced-motion: reduce) {
    .hero-brand::before {
        animation: none;
    }
}

@keyframes hero-watermark-drift {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2%) rotate(3deg); }
}

@media (max-width: 767px) {
    .hero-brand::before {
        background-position: center 112%;
        background-size: 78vw;
    }
}

/* Dark text on the light hero (higher specificity so it beats the
   default .hero h1 / .hero p ivory colours defined later) */
.hero.hero-brand h1 {
    color: var(--color-espresso);
    text-shadow: none;
}

.hero.hero-brand p {
    color: var(--color-mocha);
    opacity: 1;
}

/* Thin champagne-gold accent line under the heading */
.hero-brand .hero-content::after {
    content: "";
    display: block;
    width: 60px;
    height: 1.5px;
    background: var(--color-champagne-gold);
    margin: var(--space-md) auto 0;
    animation: hero-accent-grow 1400ms var(--easing) 600ms both;
}

@keyframes hero-accent-grow {
    from { width: 0; opacity: 0; }
    to { width: 60px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-brand .hero-content::after {
        animation: none;
        width: 60px;
    }
}

/* Real-photo hero (as brand photography lands, page by page): same
   dark-overlay + light-text treatment as the base .hero, but at the
   interior-page height and without background-attachment: fixed (which
   silently falls back to scroll on iOS Safari anyway - scroll here on
   purpose everywhere, so behavior is consistent rather than
   device-dependent). */
.hero-photo {
    min-height: 52vh;
    background-attachment: scroll;
}

.hero-about {
    background-image: url('../images/about-hero.jpg');
}

.hero-experience {
    background-image: url('../images/experience-hero.jpg');
}

.hero-skin-recovery {
    background-image: url('../images/skin-recovery-hero.jpg');
}

.hero-considered-refinement {
    background-image: url('../images/considered-refinement-hero.jpg');
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    padding: var(--space-lg);
    animation: hero-fade-in 800ms ease-out;
}

@keyframes hero-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero h1 {
    color: var(--color-ivory-blush);
    font-size: var(--type-h1);
    margin-bottom: var(--space-md);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: hero-text-fade 800ms ease-out 200ms both;
}

.hero p {
    color: var(--color-ivory-blush);
    opacity: 0.9;
    font-size: 20px;
    font-weight: 300;
    margin-bottom: var(--space-xl);
    animation: hero-text-fade 800ms ease-out 500ms both;
}

@keyframes hero-text-fade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   7. BUTTONS & INTERACTIVE ELEMENTS
   ======================================== */

/* Primary CTA: bronze pill (Webflow prototype look), warms to
   champagne gold on hover/press with a motion-safe sheen sweep. */
.button {
    position: relative;
    overflow: hidden;
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-arumi-bronze);
    color: var(--color-espresso);
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--type-small);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--duration-dissolve) var(--easing),
                color var(--duration-dissolve) var(--easing),
                box-shadow var(--duration-dissolve) var(--easing),
                transform var(--duration-dissolve) var(--easing);
    box-shadow: var(--shadow-sm);
    animation: button-fade 800ms ease-out 700ms both;
}

@keyframes button-fade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.button:hover,
.button:focus-visible {
    background: var(--color-champagne-gold);
    color: var(--color-espresso);
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(184, 154, 75, 0.35);
    transform: translateY(-1px);
}

.button:active {
    background: var(--color-champagne-gold);
    color: var(--color-espresso);
    transform: translateY(0) scale(0.98);
    box-shadow: 0 3px 10px rgba(184, 154, 75, 0.3);
    filter: brightness(0.96);
}

.button-secondary {
    background: var(--color-ivory-blush);
    color: var(--color-espresso);
    border: 1px solid var(--color-arumi-bronze);
}

.button-secondary:hover {
    background: var(--color-warm-sand);
}

.consultation-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.consultation-heading h3 {
    margin: 0;
}

.consultation-icon {
    width: 42px;
    height: 42px;
    color: var(--color-deep-bronze);
}

/* ========================================
   8. CARD COMPONENT
   ======================================== */

.card {
    background: var(--color-ivory-blush);
    border: 1px solid var(--color-rose-nude);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-normal);
    animation: card-fade 800ms ease-out both;
    text-align: center;
    /* Equal-height flex column so every card-link pins to the same
       baseline regardless of copy length or viewport width */
    display: flex;
    flex-direction: column;
}

.card .card-link {
    margin-top: auto;
    align-self: center;
    padding-top: var(--space-md);
}

@keyframes card-fade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card:nth-child(2) {
    animation-delay: 200ms;
}

.card:nth-child(3) {
    animation-delay: 400ms;
}

.card:hover {
    border-color: var(--color-arumi-bronze);
    box-shadow: var(--shadow-md);
}

.card-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-md);
    background: var(--color-warm-sand);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: card-icon-float 4000ms ease-in-out infinite;
}

@keyframes card-icon-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
}

.card h3 {
    font-size: var(--type-h3);
    margin-bottom: var(--space-md);
    color: var(--color-espresso);
}

.card p {
    font-size: var(--type-body);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-md);
    color: var(--color-mocha);
}

/* ========================================
   9. SECTION STYLES
   ======================================== */

section {
    padding: var(--space-3xl) var(--space-lg);
}

@media (min-width: 768px) {
    section {
        padding: var(--space-3xl) var(--space-xl);
    }
}

.section-light {
    background: var(--color-ivory-blush);
}

.section-warm {
    background: var(--color-warm-sand);
}

.section-rose {
    background: var(--color-rose-nude);
    background: rgba(228, 211, 204, 0.2);
}

/* Section heading centered */
.section-heading {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

/* When the treatment nav follows the heading, pull it close (owner:
   icons nearer the header, not too tight) */
.section-heading + .treatment-nav {
    margin-top: calc(var(--space-2xl) * -1 + var(--space-sm));
}

/* ========================================
   AREAS OF CARE (pathway preview cards)
   ======================================== */

.areas-section .eyebrow {
    font-size: var(--type-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-bronze-text);
    margin-bottom: var(--space-xs);
}

.areas-section .section-sub {
    max-width: 520px;
    margin: 0 auto;
    font-weight: 300;
    color: var(--color-mocha);
}

.areas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}

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

.area-card {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--color-ivory-blush);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal) var(--easing),
                box-shadow var(--duration-normal) var(--easing);
}

.area-card:hover,
.area-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(74, 59, 44, 0.16);
    text-decoration: none;
}

.area-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.area-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--easing);
}

.area-card:hover .area-media img,
.area-card:focus-visible .area-media img {
    transform: scale(1.05);
}

.area-brandpanel {
    width: 100%;
    height: 100%;
    background: linear-gradient(150deg, var(--color-warm-sand), var(--color-rose-nude));
    display: flex;
    align-items: center;
    justify-content: center;
}

.area-brandpanel img {
    width: 150px;
    height: auto;
    opacity: 0.55;
    transition: transform var(--duration-slow) var(--easing);
}

.area-card:hover .area-brandpanel img,
.area-card:focus-visible .area-brandpanel img {
    transform: scale(1.06) rotate(3deg);
}

.area-body {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    text-align: center;
}

.area-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.area-heading h3 {
    margin: 0;
    font-size: var(--type-h3);
}

.area-icon {
    width: 32px;
    height: 32px;
    color: var(--color-deep-bronze);
    flex-shrink: 0;
}

.area-body p {
    font-size: var(--type-small);
    line-height: var(--line-height-relaxed);
    color: var(--color-mocha);
    margin-bottom: var(--space-md);
}

.area-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--type-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-bronze-text);
    transition: color var(--duration-fast) var(--easing);
}

.area-more svg {
    width: 16px;
    height: 8px;
    transition: transform var(--duration-fast) var(--easing);
}

.area-card:hover .area-more,
.area-card:focus-visible .area-more {
    color: var(--color-champagne-gold);
}

.area-card:hover .area-more svg,
.area-card:focus-visible .area-more svg {
    transform: translateX(5px);
}

/* ========================================
   10. FOOTER COMPONENT
   ======================================== */

.site-footer {
    background: var(--color-espresso);
    color: var(--color-ivory-blush);
}

.footer-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-lg) 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
    border-bottom: 1px solid rgba(231, 221, 209, 0.2);
    padding-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.footer-column h4 {
    font-family: var(--font-body);
    font-size: var(--type-small);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-champagne-gold);
    margin-bottom: var(--space-md);
}

.footer-column h4.footer-brand-h {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.14em;
}

.footer-column p,
.footer-column a,
.footer-column li {
    font-size: var(--type-small);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-xs);
    color: rgba(246, 239, 233, 0.85);
}

.footer-column a {
    color: rgba(246, 239, 233, 0.88);
    text-decoration: underline;
    text-decoration-color: rgba(246, 239, 233, 0.35);
    text-underline-offset: 3px;
    transition: color var(--duration-fast), text-decoration-color var(--duration-fast);
}

.footer-column a:hover {
    color: var(--color-ivory-blush);
    text-decoration-color: var(--color-champagne-gold);
}

.footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-column li {
    margin-bottom: var(--space-sm);
}

.footer-disclaimer {
    font-size: var(--type-xs);
    font-style: italic;
    color: rgba(246, 239, 233, 0.7);
    margin: 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    font-size: var(--type-xs);
    color: rgba(246, 239, 233, 0.6);
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.footer-bottom p {
    color: rgba(246, 239, 233, 0.6);
    font-size: var(--type-xs);
    margin: 0;
}

.footer-bottom-links a {
    color: rgba(246, 239, 233, 0.8);
    margin-left: var(--space-sm);
    text-decoration: underline;
    text-decoration-color: rgba(246, 239, 233, 0.35);
    text-underline-offset: 3px;
}

.footer-bottom-links a:hover {
    color: var(--color-ivory-blush);
}


/* ========================================
   THE ARRIVAL - signature opening sequence
   Plays once per session on the landing page. Any interaction skips.
   Reduced-motion users never see it. Pure CSS; nav.js adds the lift.
   ======================================== */

@property --arr-r {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

:root {
    --silk: cubic-bezier(0.33, 0, 0.13, 1);
}

.arrival {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) + 10);
    background: var(--color-ivory-blush);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: transform 1900ms var(--silk), opacity 1600ms var(--silk) 200ms;
}

.arrival.is-lifting {
    transform: translateY(-100%);
}

.arrival.is-done {
    display: none;
}

.arrival::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -46px;
    height: 46px;
    background: linear-gradient(to bottom, rgba(74, 59, 44, 0.08), transparent);
}

/* slow aurora wash behind everything */
.arrival .aur {
    position: absolute;
    width: 70vmax;
    height: 70vmax;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0;
    pointer-events: none;
}

.arrival .aur1 {
    left: -15vmax;
    top: -20vmax;
    background: radial-gradient(circle, var(--color-warm-sand), transparent 65%);
    animation: arr-aurin 4000ms var(--silk) both, arr-aurdrift1 26s ease-in-out 4s infinite;
}

.arrival .aur2 {
    right: -20vmax;
    bottom: -25vmax;
    background: radial-gradient(circle, var(--color-rose-nude), transparent 65%);
    animation: arr-aurin 4000ms var(--silk) 800ms both, arr-aurdrift2 30s ease-in-out 4s infinite;
}

@keyframes arr-aurin { from { opacity: 0; } to { opacity: 0.55; } }
@keyframes arr-aurdrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vmax, 3vmax) scale(1.06); } }
@keyframes arr-aurdrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-3vmax, -4vmax) scale(1.05); } }

/* floating gold pollen */
.arrival .m {
    position: absolute;
    border-radius: 50%;
    background: var(--color-champagne-gold);
    filter: blur(1.4px);
    opacity: 0;
}

@keyframes arr-mote {
    0% { opacity: 0; transform: translate(0, 0); }
    20% { opacity: var(--mo); }
    80% { opacity: calc(var(--mo) * 0.6); }
    100% { opacity: 0; transform: translate(var(--drift), var(--rise)); }
}

.arrival .m1 {
    left: 67%;
    top: 72%;
    width: 3.5px;
    height: 3.5px;
    animation: arr-mote 8405ms ease-in-out 2480ms both;
    --rise: -149px;
    --drift: 17px;
    --mo: 0.3;
}

.arrival .m2 {
    left: 33%;
    top: 70%;
    width: 3.5px;
    height: 3.5px;
    animation: arr-mote 6385ms ease-in-out 1162ms both;
    --rise: -150px;
    --drift: 40px;
    --mo: 0.4;
}

.arrival .m3 {
    left: 48%;
    top: 49%;
    width: 2.5px;
    height: 2.5px;
    animation: arr-mote 7855ms ease-in-out 2022ms both;
    --rise: -158px;
    --drift: -35px;
    --mo: 0.5;
}

.arrival .m4 {
    left: 88%;
    top: 65%;
    width: 2.5px;
    height: 2.5px;
    animation: arr-mote 6258ms ease-in-out 2564ms both;
    --rise: -169px;
    --drift: -39px;
    --mo: 0.3;
}

.arrival .m5 {
    left: 14%;
    top: 51%;
    width: 2.5px;
    height: 2.5px;
    animation: arr-mote 7336ms ease-in-out 2300ms both;
    --rise: -166px;
    --drift: -37px;
    --mo: 0.4;
}

.arrival .m6 {
    left: 85%;
    top: 71%;
    width: 2.5px;
    height: 2.5px;
    animation: arr-mote 8047ms ease-in-out 1604ms both;
    --rise: -156px;
    --drift: -11px;
    --mo: 0.3;
}

.arrival .m7 {
    left: 20%;
    top: 59%;
    width: 3.5px;
    height: 3.5px;
    animation: arr-mote 9441ms ease-in-out 2657ms both;
    --rise: -125px;
    --drift: 12px;
    --mo: 0.3;
}

.arrival .m8 {
    left: 42%;
    top: 55%;
    width: 2.5px;
    height: 2.5px;
    animation: arr-mote 6287ms ease-in-out 521ms both;
    --rise: -155px;
    --drift: -4px;
    --mo: 0.5;
}

/* one long cinematic breath inward */
.arrival .sig {
    position: relative;
    text-align: center;
    z-index: 2;
    animation: arr-pushin 9s var(--silk) both;
}

@keyframes arr-pushin { from { transform: scale(1.035); } to { transform: scale(1); } }

/* the emblem develops like a photograph, then floats */
.sig-emblem-wrap {
    position: relative;
    width: min(220px, 54vw);
    margin: 0 auto 14px;
    animation: arr-floaty 9s ease-in-out 3.4s infinite;
}

@keyframes arr-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.sig-emblem {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 var(--arr-r), transparent calc(var(--arr-r) + 34%));
            mask-image: radial-gradient(circle at 50% 48%, #000 var(--arr-r), transparent calc(var(--arr-r) + 34%));
    animation: arr-develop 3400ms var(--silk) 400ms both, arr-focus 3600ms var(--silk) 300ms both;
}

@keyframes arr-develop { from { --arr-r: 0%; } to { --arr-r: 110%; } }
@keyframes arr-focus { from { opacity: 0; filter: blur(10px); } 60% { opacity: 1; } to { opacity: 1; filter: blur(0); } }

/* warm light wash along the artwork only */
.sig-gleam {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: url('../images/logo-submark-bronze.png');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-image: url('../images/logo-submark-bronze.png');
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
}

.sig-gleam::after {
    content: "";
    position: absolute;
    top: -25%;
    bottom: -25%;
    left: -90%;
    width: 75%;
    background: linear-gradient(100deg, transparent, rgba(184, 154, 75, 0.45) 40%, rgba(246, 239, 233, 0.65) 50%, rgba(184, 154, 75, 0.45) 60%, transparent);
    transform: skewX(-12deg);
    animation: arr-wash 2600ms var(--silk) 3000ms both;
}

@keyframes arr-wash { from { left: -90%; } to { left: 130%; } }

/* the name: one slow exhale */
.sig-word {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(34px, 7vw, 48px);
    color: var(--color-mocha);
    text-transform: uppercase;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    animation: arr-exhale 2600ms var(--silk) 3600ms both;
}

@keyframes arr-exhale {
    from { opacity: 0; transform: translateY(16px); letter-spacing: 0.58em; filter: blur(6px); }
    to { opacity: 1; transform: translateY(0); letter-spacing: 0.4em; filter: blur(0); }
}

.sig-word::after {
    content: "ARUMI";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    background: linear-gradient(100deg, transparent 32%, rgba(184, 154, 75, 0.7) 50%, transparent 68%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    background-size: 260% 100%;
    background-position: 190% 0;
    animation: arr-namewarmth 2600ms var(--silk) 5400ms both;
}

@keyframes arr-namewarmth { from { background-position: 190% 0; } to { background-position: -90% 0; } }

.sig-sub {
    font-family: var(--font-display);
    font-size: clamp(15px, 3vw, 19px);
    color: var(--color-mocha);
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    margin-top: 8px;
    animation: arr-softin 2000ms var(--silk) 4800ms both;
}

@keyframes arr-softin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* the seal */
.sig-line {
    position: relative;
    width: 64px;
    height: 1.5px;
    margin: 26px auto 0;
    background: var(--color-champagne-gold);
    transform-origin: center;
    animation: arr-pour 1700ms var(--silk) 6200ms both;
}

.sig-line::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: var(--color-champagne-gold);
    transform: translate(-50%, -50%);
    animation: arr-dot 1100ms var(--silk) 5800ms both;
}

@keyframes arr-dot { from { opacity: 0; transform: translate(-50%, -50%) scale(0); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes arr-pour { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.arr-enter {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    text-transform: uppercase;
    color: var(--color-deep-bronze);
    animation: arr-enterw 2200ms var(--silk) 7200ms both;
}

@keyframes arr-enterw { from { opacity: 0; } to { opacity: 0.5; } }

@media (prefers-reduced-motion: reduce) {
    .arrival {
        display: none;
    }
}

/* ========================================
   11. REVEAL ANIMATIONS (SCROLL-TRIGGERED)
   ======================================== */

.reveal {
    opacity: 0;
    transform: translateY(30px);
}

.reveal.visible {
    animation: reveal-fade 800ms ease-out forwards;
}

@keyframes reveal-fade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered reveals for cards */
.reveal:nth-child(1) { animation-delay: 0ms; }
.reveal:nth-child(2) { animation-delay: 200ms; }
.reveal:nth-child(3) { animation-delay: 400ms; }
.reveal:nth-child(4) { animation-delay: 600ms; }

/* js/animations.js skips setting up the reveal observer entirely for
   reduced-motion visitors, so .reveal content would otherwise stay at
   its default opacity:0 forever. Make it visible unconditionally here
   instead of relying on JS to do it. */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ========================================
   12. UTILITY CLASSES
   ======================================== */

.text-center { text-align: center; }
.text-muted { opacity: 0.7; }
.text-bold { font-weight: 700; }

.mt { margin-top: var(--space-lg); }
.mb { margin-bottom: var(--space-lg); }
.mt-sm { margin-top: var(--space-sm); }
.mb-sm { margin-bottom: var(--space-sm); }

.aspect-ratio-16-9 {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}

.aspect-ratio-4-5 {
    position: relative;
    width: 100%;
    padding-bottom: 125%;
}

.aspect-ratio-1-1 {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}

.aspect-ratio-3-4 {
    position: relative;
    width: 100%;
    padding-bottom: 133.33%;
}

.aspect-ratio-8-3 {
    position: relative;
    width: 100%;
    padding-bottom: 37.5%;
}

.aspect-ratio-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Temporary "photography pending" placeholder: same treatment as
   .area-brandpanel, adapted for aspect-ratio-box contexts that expect
   an <img> child (portraits, treatment cards) rather than a fixed
   16:10 area-media box. */
.photo-placeholder {
    background: linear-gradient(150deg, var(--color-warm-sand), var(--color-rose-nude));
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-placeholder img {
    width: 45%;
    max-width: 150px;
    height: auto;
    opacity: 0.55;
}

.circular {
    border-radius: 50%;
    overflow: hidden;
}

/* ========================================
   13. RESPONSIVE TYPOGRAPHY
   ======================================== */

@media (max-width: 768px) {
    :root {
        --space-lg: 24px;
        --space-xl: 32px;
        --space-3xl: 48px;
    }
}

/* ========================================
   14. PRINT STYLES
   ======================================== */

@media print {
    body {
        background: white;
    }

    .site-nav,
    .site-footer,
    .mobile-menu,
    .mobile-fixed-cta {
        display: none;
    }

    main {
        margin-top: 0;
    }
}

/* ========================================
   15. HIGH CONTRAST MODE SUPPORT
   ======================================== */

@media (prefers-contrast: more) {
    :root {
        --color-espresso: #000;
        --color-mocha: #333;
    }

    .site-nav {
        border-bottom-width: 2px;
    }

    .card {
        border-width: 2px;
    }
}

/* ========================================
   16. DARK MODE - intentionally not supported.
   The brand ships one art-directed warm/light
   look; an automatic palette inversion was
   removed for launch (owner decision, may be
   revisited as a designed variant later).
   ======================================== */

/* ========================================
   17. ACCESSIBILITY ENHANCEMENTS
   ======================================== */

:focus-visible {
    outline: 2px solid var(--color-arumi-bronze);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-arumi-bronze);
    outline-offset: 4px;
}

/* High contrast mode for focus states */
@media (prefers-contrast: more) {
    :focus-visible {
        outline-width: 3px;
    }
}

/* ========================================
   18. HOME PAGE STYLES
   ======================================== */

.trust-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

@media (max-width: 768px) {
    .trust-section {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
}

.trust-image {
    width: 100%;
}

.trust-image img {
    width: 100%;
    height: auto;
    box-shadow: var(--shadow-lg);
}

.trust-content h2 {
    font-size: var(--type-h2);
    margin-bottom: var(--space-sm);
}

.trust-registration {
    font-size: var(--type-small);
    color: var(--color-arumi-bronze);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: var(--space-lg);
}

.trust-bio {
    font-size: var(--type-body);
    line-height: var(--line-height-relaxed);
    color: var(--color-mocha);
    margin-bottom: var(--space-md);
}

.trust-pillars {
    display: flex;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
    flex-wrap: wrap;
}

.pillar {
    font-size: var(--type-small);
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-arumi-bronze);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-link {
    display: inline-block;
    margin-top: var(--space-md);
    font-size: var(--type-small);
    font-weight: 700;
    color: var(--color-mocha);
    text-decoration: none;
    transition: color var(--duration-fast);
    position: relative;
}

.card-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-arumi-bronze);
    transition: width var(--duration-fast);
}

.card-link:hover,
.card-link:focus-visible {
    color: var(--color-deep-bronze);
    text-decoration: none;
}

.card-link:hover::after {
    width: 100%;
}

/* ========================================
   19. ABOUT PAGE STYLES
   ======================================== */

.about-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: flex-start;
}

@media (max-width: 768px) {
    .about-story {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
}

.about-image {
    width: 100%;
}

.about-image img {
    width: 100%;
    height: auto;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
}

.about-content h2 {
    font-size: var(--type-h2);
    margin-bottom: var(--space-lg);
}

.about-content p {
    font-size: var(--type-body);
    line-height: var(--line-height-relaxed);
    color: var(--color-mocha);
    margin-bottom: var(--space-md);
}

/* ========================================
   20. THE EXPERIENCE PAGE STYLES
   ======================================== */

.process-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    counter-reset: step-counter;
}

@media (min-width: 1024px) {
    .process-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }
}

.process-step {
    position: relative;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    text-align: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Top-aligned (not centered) so the number/title line up across all
       three cards regardless of how much description each one carries -
       the Tailored Plan card has by far the most content (intro line +
       three sub-steps), so centering it made it read as a different
       shape from its two shorter siblings. */
    justify-content: flex-start;
    animation: card-fade 800ms ease-out both;
}

/* Fixed, single-value scrim: all three cards show their full content
   (number, title, description, and - for the Tailored Plan card - its
   sub-steps) at rest, over a clear photo. There is no more idle/hover/
   active state to toggle - nothing needs to be scrolled-to, hovered, or
   tapped to be read. */
.process-step::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(246, 239, 233, 0.62);
    z-index: 0;
}

.process-step > * {
    position: relative;
    z-index: 1;
}

.process-step-enquiry { background-image: url('../images/enquiry-consultation-banner.jpg'); }
.process-step-aftercare { background-image: url('../images/treatment-aftercare-banner.jpg'); }

/* The Tailored Plan card previously used tailored-plan-banner.jpg, which
   has mockup text ("Your Tailored Plan" / ASSESS / RECOMMEND / PLAN) and
   a stray "M" monogram baked into the photo - illegible even blurred, and
   the heavy blur made this card look out of place next to its two clean
   siblings. Swapped to a text-free, palette-matched photo so it can use
   the same plain .process-step::before scrim as the other two cards,
   with a touch more tint since this card carries the most text. */
.process-step-plan {
    background-color: var(--color-ivory-blush);
    background-image: url('../images/tactile-travertine-detail.jpg');
}

.process-step-plan::before {
    background: rgba(246, 239, 233, 0.72);
}

.process-step:nth-child(1) { animation-delay: 0ms; }
.process-step:nth-child(2) { animation-delay: 150ms; }
.process-step:nth-child(3) { animation-delay: 300ms; }

.process-step-number {
    counter-increment: step-counter;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-md);
    border-radius: var(--radius-full);
    background: var(--color-arumi-bronze);
    color: var(--color-ivory-blush);
    font-family: var(--font-display);
    font-size: var(--type-h3);
}

.process-step-number::before {
    content: counter(step-counter);
}

.process-step h3 {
    font-size: var(--type-h4);
    margin-bottom: var(--space-sm);
    color: var(--color-espresso);
}

.process-step p {
    font-size: var(--type-small);
    line-height: var(--line-height-relaxed);
    color: var(--color-mocha);
    margin: 0;
}

.plan-substeps {
    width: 100%;
    margin-top: var(--space-md);
    text-align: left;
}

.plan-substep {
    padding: var(--space-sm) 0;
    border-top: 1px solid rgba(74, 59, 44, 0.15);
}

.plan-substep:first-child {
    border-top: none;
    padding-top: 0;
}

.plan-substep-head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: 4px;
}

.plan-substep-icon {
    width: 22px;
    height: 22px;
    color: var(--color-deep-bronze);
    flex-shrink: 0;
}

.plan-substep-head span {
    font-size: var(--type-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-bronze-text);
}

.plan-substep p {
    padding-left: calc(22px + var(--space-xs));
}

.principles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

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

.principle-card {
    text-align: center;
    padding: var(--space-lg);
    /* Opaque panel so the text sits clearly above the busy honey-drop
       photo behind it, rather than relying on the section's own scrim
       (.principles-banner::before) alone for contrast. Same radius/shadow
       language as .area-card below it on this page, so both sections read
       as one consistent "opaque panel" family. */
    background: rgba(246, 239, 233, 0.92);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.principle-card h3 {
    font-size: var(--type-small);
    color: var(--color-bronze-text);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-family: var(--font-body);
    font-weight: 500;
    margin-bottom: var(--space-sm);
}

.principle-card p {
    font-size: var(--type-body);
    line-height: var(--line-height-relaxed);
    color: var(--color-mocha);
    margin: 0;
}

/* ========================================
   21. SKIN & RECOVERY PAGE STYLES
   ======================================== */

.treatment-heading {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.treatment-heading h3 {
    margin: 0;
}

.treatment-icon {
    width: 44px;
    height: 44px;
    color: var(--color-deep-bronze);
    flex-shrink: 0;
    /* nudge to sit on the serif cap line rather than the descender centre */
    transform: translateY(-1px);
}

/* Anchor quick-nav under the "Our Treatments" heading: the three
   treatment icons, each jumping to its card */
.treatment-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-2xl);
    margin: var(--space-sm) 0 var(--space-2xl);
    flex-wrap: wrap;
}

.treatment-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-deep-bronze);
    text-decoration: none;
    transition: color var(--duration-fast) var(--easing), transform var(--duration-fast) var(--easing);
}

.treatment-nav-item span {
    font-size: var(--type-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-mocha);
    transition: color var(--duration-fast) var(--easing);
}

.treatment-nav-item:hover,
.treatment-nav-item:focus-visible {
    color: var(--color-champagne-gold);
    text-decoration: none;
    transform: translateY(-2px);
}

.treatment-nav-item:hover span,
.treatment-nav-item:focus-visible span {
    color: var(--color-deep-bronze);
}

.treatment-nav-icon {
    width: 48px;
    height: 48px;
}

/* Smooth-scroll offset so anchored cards clear the fixed nav */
.treatment-card[id] {
    scroll-margin-top: 110px;
}

.treatment-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--color-ivory-blush);
    border: 1px solid var(--color-rose-nude);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-xl);
}

@media (min-width: 1024px) {
    .treatment-card {
        grid-template-columns: 300px 1fr;
        align-items: start;
    }
}

.treatment-card-image .aspect-ratio-4-5 {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.treatment-card h3 {
    font-size: var(--type-h3);
    margin-bottom: var(--space-sm);
    color: var(--color-espresso);
}

.treatment-card-intro {
    font-size: var(--type-body);
    line-height: var(--line-height-relaxed);
    color: var(--color-mocha);
    margin-bottom: var(--space-md);
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-md);
}

.pricing-table tr {
    border-bottom: 1px solid rgba(166, 135, 111, 0.2);
}

.pricing-table tr:last-child {
    border-bottom: none;
}

.pricing-table td {
    padding: var(--space-sm) 0;
    font-size: var(--type-small);
    color: var(--color-mocha);
}

.pricing-table td:last-child {
    text-align: right;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--color-bronze-text);
    white-space: nowrap;
}

.pricing-note {
    font-size: var(--type-xs);
    color: var(--color-mocha);
    opacity: 0.75;
    font-style: italic;
    margin-bottom: var(--space-md);
}

.aftercare-list {
    list-style: none;
    margin: 0 0 var(--space-md) 0;
}

.aftercare-list li {
    position: relative;
    padding-left: var(--space-md);
    font-size: var(--type-small);
    line-height: var(--line-height-relaxed);
    color: var(--color-mocha);
    margin-bottom: var(--space-xs);
}

.aftercare-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-arumi-bronze);
}

/* ========================================
   22. CONSIDERED REFINEMENT PAGE STYLES
   ======================================== */

.consultation-card {
    text-align: center;
}

.consultation-card h3 {
    font-size: var(--type-h4);
    margin-bottom: var(--space-sm);
}

.consultation-card p {
    font-size: var(--type-small);
    line-height: var(--line-height-relaxed);
    color: var(--color-mocha);
    margin-bottom: var(--space-md);
}

.compliance-notice {
    background: var(--color-ivory-blush);
    border: 1px solid var(--color-rose-nude);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    max-width: 900px;
    margin: 0 auto;
}

.compliance-notice h2 {
    font-size: var(--type-h3);
    margin-bottom: var(--space-md);
}

.compliance-notice ul {
    list-style: none;
    margin: 0 0 var(--space-md) 0;
}

.compliance-notice li {
    position: relative;
    padding-left: var(--space-md);
    font-size: var(--type-small);
    line-height: var(--line-height-relaxed);
    color: var(--color-mocha);
    margin-bottom: var(--space-sm);
}

.compliance-notice li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-arumi-bronze);
}

.compliance-notice p {
    font-size: var(--type-small);
    line-height: var(--line-height-relaxed);
    color: var(--color-mocha);
    margin-bottom: var(--space-sm);
}

/* ========================================
   23. LEGAL PAGE STYLES
   ======================================== */

.legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.booking-embed {
    max-width: 900px;
    margin: var(--space-2xl) auto 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.booking-embed iframe {
    display: block;
    width: 100%;
    height: 900px;
    border: none;
}

@media (max-width: 767px) {
    .booking-embed iframe {
        height: 1200px;
    }
}

.legal-content h2 {
    font-size: var(--type-h3);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content h3 {
    font-size: var(--type-h4);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.legal-content p {
    font-size: var(--type-body);
    line-height: var(--line-height-relaxed);
    color: var(--color-mocha);
    margin-bottom: var(--space-md);
}

.legal-content ul,
.legal-content ol {
    margin: 0 0 var(--space-md) var(--space-lg);
}

.legal-content li {
    font-size: var(--type-body);
    line-height: var(--line-height-relaxed);
    color: var(--color-mocha);
    margin-bottom: var(--space-sm);
}

.legal-updated {
    font-size: var(--type-small);
    color: var(--color-mocha);
    opacity: 0.85;
    font-style: italic;
    margin-bottom: var(--space-2xl);
}

/* ========================================
   24. PAGE HEADER (replaces photo hero on
   interior pages: eyebrow + heading + subhead
   on a plain light background)
   ======================================== */

.eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: var(--type-xs);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-bronze-text);
    margin-bottom: var(--space-sm);
}

.page-header {
    padding: calc(var(--space-3xl) + 40px) var(--space-lg) var(--space-2xl);
    text-align: center;
    background: var(--color-ivory-blush);
}

@media (min-width: 768px) {
    .page-header {
        padding: calc(var(--space-3xl) + 56px) var(--space-xl) var(--space-3xl);
    }
}

.page-header-inner {
    max-width: 720px;
    margin: 0 auto;
    animation: hero-fade-in 800ms ease-out;
}

.page-header h1 {
    font-size: var(--type-h1);
    margin-bottom: var(--space-md);
}

.page-header p {
    font-size: 18px;
    color: var(--color-mocha);
    margin-bottom: 0;
}

/* ========================================
   25. HOME HERO (no photo; circular logo
   mark + wordmark + heading + CTA)
   ======================================== */

.home-hero {
    position: relative;
    overflow: hidden;
    padding: calc(var(--space-3xl) + 40px) var(--space-lg) var(--space-2xl);
    text-align: center;
    /* No-photo hero: the lockup wordmark, headline, subline and CTA are one
       centered, normal-flow column, so nothing can overlap at any window size.
       The previous baked-in-photo wordmark could not be reliably cleared of the
       separately-positioned text under background-size: cover - the gap between
       them shifted with viewport aspect ratio and collapsed at some sizes. */
    background: var(--color-ivory-blush);
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

/* Transient pearl-veil intro: plays once on load, fading from a flat
   cream (the image's own dominant tone, so there's no visible pop when
   the photo appears) through the ivory-pearl photo, then dissolving away
   entirely to reveal the solid-ivory resting hero underneath. This is an
   overlay only - it is removed from view (visibility: hidden) well before
   it could ever interact with the live text, so the wordmark-overlap bug
   documented in project memory cannot recur here. */
.hero-pearl-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: #EDE4D6;
    animation: pearl-veil-out 3200ms ease forwards;
}

.hero-pearl-veil::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/home-hero-ivory.jpg') center / cover no-repeat;
    opacity: 0;
    animation: pearl-img 2600ms ease forwards;
}

@keyframes pearl-img {
    0% { opacity: 0; }
    30% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes pearl-veil-out {
    0%, 72% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

/* Entrance sequence: the lockup settles from a gentle zoom as it fades
   in, then the heading, subline, and CTA rise in one after another.
   Delays are pushed back so this sequence begins as the pearl veil
   (above) finishes clearing, rather than racing underneath it. */
@keyframes logo-settle {
    from {
        opacity: 0;
        transform: scale(1.16);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Brand lockup (real asset: mark + ARUMI wordmark + Aesthetics),
   replaces the placeholder SVG + text wordmark */
.home-logo-lockup {
    display: block;
    width: min(460px, 84vw);
    height: auto;
    margin: 0 auto var(--space-lg);
    animation: logo-settle 1400ms cubic-bezier(0.22, 1, 0.36, 1) 2300ms both;
}


.home-hero h1 {
    font-size: var(--type-h1);
    color: var(--color-espresso);
    margin-bottom: var(--space-sm);
    animation: rise-in 900ms ease-out 2600ms both;
}

.home-hero-sub {
    font-size: 18px;
    color: var(--color-mocha);
    margin-bottom: var(--space-xl);
    animation: rise-in 900ms ease-out 2800ms both;
}

.home-hero .button {
    animation: rise-in 800ms ease-out 3050ms both;
}

/* Reduced motion: skip the veil and all entrance timing outright so the
   hero is fully present the instant the page paints (same pattern used
   for the Arrival curtain and the process-step cards elsewhere). */
@media (prefers-reduced-motion: reduce) {
    .hero-pearl-veil {
        display: none;
    }

    .home-logo-lockup,
    .home-hero h1,
    .home-hero-sub,
    .home-hero .button {
        animation: none;
    }
}

/* ========================================
   26. PILLARS BAND (Refined / Natural / Assured)
   ======================================== */

.tagline-banner {
    position: relative;
    background-image: url('../images/refinement-tagline-banner.jpg');
    background-size: cover;
    background-position: center 65%;
}

.tagline-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(246, 239, 233, 0.6) 0%, rgba(246, 239, 233, 0.6) 65%, rgba(246, 239, 233, 1) 100%);
}

.tagline-banner .container {
    position: relative;
    z-index: 1;
}

.pillars-intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-2xl) 0;
}

.pillars-intro h2 {
    font-size: var(--type-h2);
}

.pillars-intro p {
    color: var(--color-mocha);
    margin-bottom: 0;
}

.pillars-band {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    text-align: center;
}

@media (min-width: 768px) {
    .pillars-band {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Full-bleed warm-sand band (Webflow reference): one continuous panel
   separating the pillars from the "Refinement, never reinvention" intro. */
.pillars-section {
    background: var(--color-warm-sand);
    padding: var(--space-3xl) 0;
}

/* Shared by Home's Pillars band and About's Our Philosophy section -
   same three principles (Refined/Natural/Assured), same triptych image
   designed with all three text zones in mind. */
.philosophy-banner {
    position: relative;
    background-image: url('../images/philosophy-triptych.jpg');
    background-size: cover;
    background-position: center;
}

.philosophy-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(246, 239, 233, 1) 0%, rgba(246, 239, 233, 0.45) 18%, rgba(246, 239, 233, 0.45) 100%);
}

.philosophy-banner .container {
    position: relative;
    z-index: 1;
}

.principles-banner {
    position: relative;
    background-image: url('../images/sensory-ingredient-elements.jpg');
    background-size: cover;
    background-position: center;
}

.principles-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(228, 211, 204, 0.55);
}

.principles-banner .container {
    position: relative;
    z-index: 1;
}

.credentials-banner {
    position: relative;
    background-image: url('../images/tactile-travertine-detail.jpg');
    background-size: cover;
    background-position: center;
}

.credentials-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(228, 211, 204, 0.55);
}

.credentials-banner .container {
    position: relative;
    z-index: 1;
}

.narrative-banner {
    position: relative;
    background-image: url('../images/sensory-ingredient-macro.jpg');
    background-size: cover;
    background-position: center;
}

.narrative-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(246, 239, 233, 0.6);
}

.narrative-banner .container {
    position: relative;
    z-index: 1;
}

.treatments-banner {
    position: relative;
    background-image: url('../images/tactile-travertine-detail.jpg');
    background-size: cover;
    background-position: center;
}

.treatments-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(231, 221, 209, 0.82);
}

.treatments-banner .container {
    position: relative;
    z-index: 1;
}

.compliance-banner {
    position: relative;
    background-image: url('../images/tactile-travertine-detail.jpg');
    background-size: cover;
    background-position: center;
}

.compliance-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(228, 211, 204, 0.65);
}

.compliance-banner .container {
    position: relative;
    z-index: 1;
}

/* About's Credentials & Trust cards sit directly on the Tactile
   Travertine photo - the default bright ivory-blush card reads too
   stark against it. Slightly deeper, warmer tone instead. */
.credentials-banner .card {
    background: var(--color-warm-sand);
}

.pillar-item-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto var(--space-md);
    color: var(--color-arumi-bronze);
}

/* Line-art emblems in the About credentials cards (replaced photo
   placeholders; drawn in-house - AHPRA's own logo may not be used) */
.credential-icon {
    width: 56px;
    height: 56px;
    margin: auto;
    color: var(--color-arumi-bronze);
}

.pillar-item h3 {
    font-size: var(--type-h4);
    margin-bottom: var(--space-xs);
}

.pillar-item p {
    font-size: var(--type-small);
    color: var(--color-mocha);
    margin-bottom: 0;
}

/* Home "The Experience" teaser (SECTION 3c): reuses .pillars-band /
   .pillar-item / .eyebrow wholesale for the 3-beat row, only adding the
   closing link below it. */
.exp-teaser-cta {
    text-align: center;
    margin-top: var(--space-2xl);
}

.exp-teaser-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--type-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-bronze-text);
    transition: color var(--duration-fast) var(--easing);
}

.exp-teaser-link svg {
    width: 16px;
    height: 8px;
    transition: transform var(--duration-fast) var(--easing);
}

.exp-teaser-link:hover,
.exp-teaser-link:focus-visible {
    color: var(--color-champagne-gold);
}

.exp-teaser-link:hover svg,
.exp-teaser-link:focus-visible svg {
    transform: translateX(5px);
}

/* ========================================
   27. TRUST CREDENTIAL BOX
   ======================================== */

.trust-credential-box {
    border: 1px dashed var(--color-arumi-bronze);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    margin-top: var(--space-lg);
}

.trust-credential-box p {
    font-size: var(--type-small);
    color: var(--color-espresso);
    margin-bottom: 0;
}

/* ========================================
   28. AREAS OF CARE (3-column, icon cards)
   ======================================== */

.area-card-icon {
    width: 36px;
    height: 36px;
    margin-bottom: var(--space-md);
    color: var(--color-arumi-bronze);
}

.area-card h3 {
    font-size: var(--type-h3);
    margin-bottom: var(--space-sm);
}

.area-card p {
    color: var(--color-mocha);
    margin-bottom: var(--space-sm);
}

/* ========================================
   29. TREATMENT CARD DETAIL SUBSECTIONS
   ======================================== */

@media (min-width: 1024px) {
    .treatment-card.reverse {
        grid-template-columns: 1fr 300px;
    }

    .treatment-card.reverse .treatment-card-image {
        order: 2;
    }
}

.detail-label {
    font-size: var(--type-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-arumi-bronze);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
}

.detail-label:first-of-type {
    margin-top: 0;
}

.treatment-card-content > p {
    font-size: var(--type-small);
    line-height: var(--line-height-relaxed);
    color: var(--color-mocha);
    margin-bottom: var(--space-xs);
}

.treatment-footnote {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-2xl);
    font-size: var(--type-small);
    font-style: italic;
    color: var(--color-mocha);
    opacity: 0.85;
}

/* ========================================
   30. FOOTER v2 (3-column + social icons)
   ======================================== */

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

@media (min-width: 768px) {
    .footer-container.footer-v2 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer-logo {
    width: 72px;
    height: 72px;
    filter: brightness(0) invert(1);
    opacity: 0.92;
    margin-bottom: var(--space-md);
}

.footer-contact {
    margin-top: var(--space-xs);
}

.footer-social {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(246, 239, 233, 0.35);
    border-radius: var(--radius-full);
    color: var(--color-ivory-blush);
    transition: all var(--duration-fast);
}

.footer-social a:hover {
    border-color: var(--color-champagne-gold);
    color: var(--color-champagne-gold);
}

.footer-social svg {
    width: 22px;
    height: 22px;
}

/* Footer CTA band: mocha panel above the espresso columns
   (Webflow reference: lockup, invitation, outlined pill) */
.footer-cta-band {
    background: var(--color-mocha);
    text-align: center;
    padding: var(--space-3xl) var(--space-md);
}

.footer-cta-lockup {
    display: block;
    width: 390px;
    max-width: 80vw;
    height: auto;
    margin: 0 auto var(--space-md);
}

.footer-cta-band h2 {
    color: var(--color-ivory-blush);
    font-size: var(--type-h3);
    margin-bottom: var(--space-xs);
}

.footer-cta-copy {
    color: rgba(246, 239, 233, 0.75);
    font-size: var(--type-small);
    max-width: 520px;
    margin: 0 auto var(--space-lg);
}

.footer-cta-button {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    background: transparent;
    border: 1px solid rgba(246, 239, 233, 0.65);
    border-radius: var(--radius-full);
    color: var(--color-ivory-blush);
    font-family: var(--font-body);
    font-size: var(--type-small);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-decoration: none;
    transition: background-color var(--duration-dissolve) var(--easing),
                border-color var(--duration-dissolve) var(--easing),
                color var(--duration-dissolve) var(--easing),
                transform var(--duration-dissolve) var(--easing);
}

.footer-cta-button:hover,
.footer-cta-button:focus-visible {
    background: var(--color-champagne-gold);
    border-color: var(--color-champagne-gold);
    color: var(--color-espresso);
    text-decoration: none;
    transform: translateY(-1px);
}

.footer-cta-button:active {
    transform: translateY(0) scale(0.98);
    filter: brightness(0.96);
}