:root{
  --bg: #f4f2ed;
  --bg-alt: #edf0eb;
  --ink: #1f2b2a;
  --muted: #5f6b67;
  --muted-2: #7b8681;
  --accent: #2f5b50;
  --accent-2: #24483f;
  --accent-3: #3b6f61;
  /* Lowlight: deep contrasting tone used for hover/selection/focus accents */
  --lowlight: var(--accent-2);
  --card: #ffffff;
  --sage: #cfd9d1;
  --sage-2: #bcc7bf;
  --border: #d9d9d2;
  --shadow: 0 16px 28px rgba(0,0,0,.08);
  --shadow-soft: 0 10px 18px rgba(0,0,0,.06);
  --radius: 8px;
  --radius-soft: 6px;
  --nav-h: 78px;
  /* Solid nav surfaces (auto-adapt per palette) */
  --nav-bg: color-mix(in srgb, var(--bg) 92%, var(--accent) 8%);
  --nav-panel-bg: color-mix(in srgb, var(--bg-alt) 92%, var(--accent) 8%);
  --nav-border: color-mix(in srgb, var(--ink) 10%, var(--nav-bg) 90%);
  /* Profile picture filter (default, can be overridden per palette) */
  --profile-filter: sepia(15%) saturate(90%) brightness(1.05) contrast(0.95);
  /* Profile picture overlay color (default, can be overridden per palette) */
  --profile-overlay-color: rgba(244, 242, 237, 0.65);
  /* Text selection colors (default, can be overridden per palette) */
  --selection-bg: var(--lowlight);
  --selection-color: #ffffff;

  /* Hero background image (shared between the hero background and lens-text fill) */
  --hero-bg-image: url('mayfair-hero-bg.jpg');
  /* Pre-blurred version used for lens-text fill (matches lens blur better, no runtime compute) */
  --hero-bg-image-blur: url('mayfair-hero-bg-blur16.jpg');
}

/* Color Palette System - Multiple Themes */
/* Sage Garden (Original - Preserved) */
[data-palette="sage-garden"]{
  --bg: #f4f2ed;
  --bg-alt: #edf0eb;
  --ink: #1f2b2a;
  --muted: #5f6b67;
  --muted-2: #7b8681;
  --accent: #2f5b50;
  --accent-2: #24483f;
  --accent-3: #3b6f61;
  --card: #ffffff;
  --sage: #cfd9d1;
  --sage-2: #bcc7bf;
  --border: #d9d9d2;
  --lowlight: var(--accent-2);
  --hero-overlay-color: rgba(244, 242, 237, 0.65);
  --hero-filter: sepia(15%) saturate(90%) brightness(1.05) contrast(0.95);
  --profile-filter: sepia(15%) saturate(90%) brightness(1.05) contrast(0.95);
  --profile-overlay-color: rgba(244, 242, 237, 0.60);
  --hero-eyebrow-color: color-mix(in srgb, #1f2b2a 75%, transparent);
  --hero-lede-color: color-mix(in srgb, #1f2b2a 72%, transparent);
  --selection-bg: var(--lowlight);
  --selection-color: #ffffff;
}

/* Desert Dunes - Warm sandy beiges inspired by minimalist luxury */
[data-palette="desert-dunes"]{
  --bg: #f8f5ef;
  --bg-alt: #f2ede4;
  --ink: #2a2019;
  --muted: #8b7a6b;
  --muted-2: #a69382;
  --accent: #c4a882;
  --lowlight: #2b3a46; /* deep blue/grey */
  --accent-2: #a68b6b;
  --accent-3: #d4b896;
  --card: #ffffff;
  --sage: #e8ddd0;
  --sage-2: #ddd4c4;
  --border: #e0d6c8;
  --hero-overlay-color: rgba(248, 245, 239, 0.70);
  --hero-filter: sepia(25%) saturate(110%) brightness(1.08) contrast(0.92);
  --profile-filter: sepia(25%) saturate(110%) brightness(1.08) contrast(0.92);
  --profile-overlay-color: rgba(248, 245, 239, 0.65);
  --hero-eyebrow-color: color-mix(in srgb, #2a2019 75%, transparent);
  --hero-lede-color: color-mix(in srgb, #2a2019 72%, transparent);
  --selection-bg: var(--lowlight);
  --selection-color: #ffffff;
}

/* Minimalist Linen - Ultra-light, airy beiges */
[data-palette="minimalist-linen"]{
  --bg: #fefcf9;
  --bg-alt: #faf8f4;
  --ink: #332b24;
  --muted: #9a8e7f;
  --muted-2: #b8aa9a;
  --accent: #c7b8a5;
  --accent-2: #a89985;
  --lowlight: var(--accent-2);
  --accent-3: #d4c4b0;
  --card: #ffffff;
  --sage: #f0ebe3;
  --sage-2: #e5ddd2;
  --border: #e8e0d4;
  --hero-overlay-color: rgba(254, 252, 249, 0.72);
  --hero-filter: sepia(10%) saturate(85%) brightness(1.12) contrast(0.93);
  --profile-filter: sepia(10%) saturate(85%) brightness(1.12) contrast(0.93);
  --profile-overlay-color: rgba(254, 252, 249, 0.68);
  --hero-eyebrow-color: color-mix(in srgb, #332b24 78%, transparent);
  --hero-lede-color: color-mix(in srgb, #332b24 75%, transparent);
  --selection-bg: #a89985;
  --selection-color: #ffffff;
}

/* Caramel Latte - Warm browns with creamy highlights */
[data-palette="caramel-latte"]{
  --bg: #f7f3ed;
  --bg-alt: #f0eae1;
  --ink: #2a2019;
  --muted: #7a6b5c;
  --muted-2: #9a8878;
  --accent: #a68b6b;
  --lowlight: #2b3a46; /* deep blue/grey */
  --accent-2: #8b6f4f;
  --accent-3: #b89a7a;
  --card: #ffffff;
  --sage: #e5d4c0;
  --sage-2: #d4c0aa;
  --border: #d9c8b5;
  --hero-overlay-color: rgba(247, 243, 237, 0.68);
  --hero-filter: sepia(28%) saturate(108%) brightness(1.07) contrast(0.91);
  --profile-filter: sepia(28%) saturate(108%) brightness(1.07) contrast(0.91);
  --profile-overlay-color: rgba(247, 243, 237, 0.63);
  --hero-eyebrow-color: color-mix(in srgb, #2a2019 80%, transparent);
  --hero-lede-color: color-mix(in srgb, #2a2019 76%, transparent);
  --selection-bg: var(--lowlight);
  --selection-color: #ffffff;
}

/* Ivory Light - Luminous cream and white with warm undertones */
[data-palette="ivory-light"]{
  --bg: #fffefb;
  --bg-alt: #fbf9f5;
  --ink: #2c2620;
  --muted: #9b9389;
  --muted-2: #b9afa3;
  --accent: #d6c9b9;
  --accent-2: #c6b7a5;
  --lowlight: var(--accent-2);
  --accent-3: #e2d6c4;
  --card: #ffffff;
  --sage: #f6f3ed;
  --sage-2: #eee9e1;
  --border: #ede8df;
  --hero-overlay-color: rgba(255, 254, 251, 0.73);
  --hero-filter: sepia(7%) saturate(82%) brightness(1.16) contrast(0.95);
  --profile-filter: sepia(7%) saturate(82%) brightness(1.16) contrast(0.95);
  --profile-overlay-color: rgba(255, 254, 251, 0.70);
  --hero-eyebrow-color: color-mix(in srgb, #2c2620 76%, transparent);
  --hero-lede-color: color-mix(in srgb, #2c2620 73%, transparent);
  --selection-bg: #b8a896;
  --selection-color: #ffffff;
}

/* Biscuit & Slate - Sandy biscuit tones with a slate lowlight */
[data-palette="biscuit-slate"]{
  --bg: #faf5ee;
  --bg-alt: #f2eadf;
  --ink: #212a33;
  --muted: #7f7468;
  --muted-2: #9a8d80;
  --accent: #b89c79;     /* biscuit */
  --lowlight: #2b3a46;   /* slate blue/grey */
  --accent-2: #8f6f52;   /* warm low shade */
  --accent-3: #d2b894;   /* sandy highlight */
  --card: #ffffff;
  --sage: #eadfcf;
  --sage-2: #dfd1bf;
  --border: #e3d6c6;
  --hero-overlay-color: rgba(250, 245, 238, 0.70);
  --hero-filter: sepia(20%) saturate(105%) brightness(1.08) contrast(0.92);
  --profile-filter: sepia(20%) saturate(105%) brightness(1.08) contrast(0.92);
  --profile-overlay-color: rgba(250, 245, 238, 0.64);
  --hero-eyebrow-color: color-mix(in srgb, var(--ink) 78%, transparent);
  --hero-lede-color: color-mix(in srgb, var(--ink) 74%, transparent);
  --selection-bg: var(--lowlight);
  --selection-color: #ffffff;
}

/* Desert Clay - Warmer, richer dune neutrals with a deep blue/grey lowlight */
[data-palette="desert-clay"]{
  --bg: #f6f1e8;
  --bg-alt: #efe5d7;
  --ink: #212a33;
  --muted: #7f6f60;
  --muted-2: #9a8776;
  --accent: #a88763;     /* clay-caramel */
  --lowlight: #2a3641;   /* slightly darker slate */
  --accent-2: #7b5c43;   /* warm low shade */
  --accent-3: #c4a27c;   /* sandy highlight */
  --card: #ffffff;
  --sage: #e4d6c3;
  --sage-2: #d8c7b1;
  --border: #ddcdb8;
  --hero-overlay-color: rgba(246, 241, 232, 0.69);
  --hero-filter: sepia(26%) saturate(112%) brightness(1.07) contrast(0.91);
  --profile-filter: sepia(26%) saturate(112%) brightness(1.07) contrast(0.91);
  --profile-overlay-color: rgba(246, 241, 232, 0.63);
  --hero-eyebrow-color: color-mix(in srgb, var(--ink) 78%, transparent);
  --hero-lede-color: color-mix(in srgb, var(--ink) 74%, transparent);
  --selection-bg: var(--lowlight);
  --selection-color: #ffffff;
}

/* Burgundy Reserve - Rich burgundy and maroon tones with elegant cream accents */
[data-palette="burgundy-reserve"]{
  --bg: #f5ede8;
  --bg-alt: #ede0d6;
  --ink: #2a1f1f;
  --muted: #7a6b6b;
  --muted-2: #958585;
  --accent: #3C2126;     /* main highlight - exact color specified */
  --lowlight: #2d181b;   /* deeper burgundy for contrast */
  --accent-2: #2d181b;   /* darker burgundy */
  --accent-3: #5a3d42;   /* lighter burgundy */
  --card: #ffffff;
  --sage: #e8d4d0;
  --sage-2: #dcc4c0;
  --border: #d9c4c0;
  --hero-overlay-color: rgba(245, 237, 232, 0.70);
  --hero-filter: sepia(30%) saturate(115%) brightness(1.06) contrast(0.90);
  --profile-filter: sepia(30%) saturate(115%) brightness(1.06) contrast(0.90);
  --profile-overlay-color: rgba(245, 237, 232, 0.65);
  --hero-eyebrow-color: color-mix(in srgb, #2a1f1f 78%, transparent);
  --hero-lede-color: color-mix(in srgb, #2a1f1f 75%, transparent);
  --selection-bg: var(--lowlight);
  --selection-color: #ffffff;
}

/* Apply palette transition */
body{
  transition: background-color 0.4s ease, color 0.4s ease;
}

html{
  scroll-behavior:smooth;
}

/* Scroll reveal animations (IntersectionObserver toggles `.is-inview`) */
[data-animate]{
  --reveal-delay: 0ms;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--reveal-delay);
  will-change: opacity, transform;
}

[data-animate="fade"]{ transform: none; }
[data-animate="fade-up"]{ transform: translate3d(0, 18px, 0); }
[data-animate="fade-down"]{ transform: translate3d(0, -18px, 0); }
[data-animate="fade-left"]{ transform: translate3d(18px, 0, 0); }
[data-animate="fade-right"]{ transform: translate3d(-18px, 0, 0); }
[data-animate="zoom"]{ transform: scale(.985); }

[data-animate].is-inview{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  [data-animate]{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  /* Disable hero entrance animations for reduced motion */
  .hero-inner,
  .hero-inner.lens-blur{
    animation: none !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
  }
  
  .hero-inner.lens-blur{
    backdrop-filter: blur(16px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
  }
  
  .hero-inner > *{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  
  /* Disable title animations for reduced motion */
  .hero-title-word,
  .hero-title-accent{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  
  /* Disable hero lede and button animations for reduced motion */
  .hero-lede,
  .hero-actions .btn{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* TEXT SELECTION */
::selection {
  background-color: var(--selection-bg, var(--accent-2));
  color: var(--selection-color, #ffffff);
}

::-moz-selection {
  background-color: var(--selection-bg, var(--accent-2));
  color: var(--selection-color, #ffffff);
}

/* HYPERLINKS */
a{
  color: var(--accent-3);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-3) 35%, transparent);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

a:hover{
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

a:visited{
  color: var(--accent-2);
  text-decoration-color: color-mix(in srgb, var(--accent-2) 35%, transparent);
}

a:active{
  color: var(--accent-2);
  text-decoration-color: color-mix(in srgb, var(--accent-2) 60%, transparent);
}

/* Prevent anchor jump under fixed navbar */
section[id]{
  scroll-margin-top: var(--nav-h);
}

/* NAV */
.nav-shell{
  min-height: var(--nav-h);
  height: auto;
  /* Remove "glass" (blur/translucency) and use a light solid background per palette */
  background: var(--nav-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.nav-container{
  min-height: var(--nav-h);
}

.navbar-brand{
  padding-top: .25rem;
  padding-bottom: .25rem;
  /* Ensure the logo (text + icon) always inherits the current theme ink */
  color: var(--ink);
  text-decoration: none;
}

.navbar-brand:hover,
.navbar-brand:focus{
  color: var(--ink);
  text-decoration: none;
}

.brand-logo-icon{
  display: inline-block;
  flex-shrink: 0;
  /* Match the full stacked height of the two-line logo text */
  height: 2.35em;
  width: 2.35em;
  color: currentColor;
  fill: currentColor;
}

.brand-mark{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  display: inline-flex;
  align-items:center;
  justify-content:center;
  /* Keep the logo mark solid (no glassy translucency) */
  background: color-mix(in srgb, var(--card) 70%, var(--nav-bg) 30%);
}

.brand-mark-icon{
  display: block;
  line-height: 1;
  font-size: 18px;
  color: var(--accent-2);
}

.brand-mark-inner{
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-.5px);
  color: var(--ink);
  opacity: .9;
}

.brand-text{
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  margin-top: 2px;
}

.brand-name{
  font-family: "Playfair Display", serif;
  font-weight: 500;
  letter-spacing: .02em;
  font-size: 15px;
}

.brand-sub{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  margin-top: 2px;
}

.nav-link-soft{
  color: color-mix(in srgb, var(--ink) 68%, transparent) !important;
  font-size: 13px;
  font-weight: 400;
  padding-top: .2rem;
  padding-bottom: .2rem;
}

.nav-link-soft:hover,
.nav-link-soft:focus{
  color: color-mix(in srgb, var(--ink) 90%, transparent) !important;
}

.btn-accent,
/* Safety: if some runtime path accidentally drops `btn-accent` but keeps sizing/placement classes,
   we still want the CTA to render correctly. */
.btn-accent-nav,
.btn-accent-lg{
  /* Use light color from theme (--card) for good contrast on accent backgrounds */
  --bs-btn-color: var(--card);
  /* Use solid accent color for vibrant button backgrounds (like reference site) */
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--card);
  --bs-btn-hover-bg: var(--accent-2);
  --bs-btn-hover-border-color: var(--accent-2);
  --bs-btn-active-color: var(--card);
  --bs-btn-active-bg: var(--accent-2);
  --bs-btn-active-border-color: var(--accent-2);
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: .01em;
}

.btn-accent-nav{
  padding: .55rem 1rem;
  font-size: 13px;
}

/* Mobile menu + burger animation (Bootstrap-like) */
.navbar-toggler{
  border: 0;
  padding: .55rem .6rem;
  border-radius: 6px;
}

.navbar-toggler:focus{
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 12%, transparent);
}

.nav-burger{
  width: 22px;
  height: 16px;
  position: relative;
  display: inline-block;
}

.nav-burger-line{
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  transform-origin: center;
  transition: transform .22s ease, opacity .18s ease, top .22s ease;
}

.nav-burger-line:nth-child(1){ top: 0; }
.nav-burger-line:nth-child(2){ top: 7px; }
.nav-burger-line:nth-child(3){ top: 14px; }

/* Morph to "X" when expanded */
.navbar-toggler[aria-expanded="true"] .nav-burger-line:nth-child(1){
  top: 7px;
  transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .nav-burger-line:nth-child(2){
  opacity: 0;
}
.navbar-toggler[aria-expanded="true"] .nav-burger-line:nth-child(3){
  top: 7px;
  transform: rotate(-45deg);
}

@media (max-width: 991.98px){
  /* Hide "Book Consultation" button on mobile (before collapse to prevent layout shifts) */
  .navbar .nav-item.ms-lg-2{
    display: none !important;
  }

  /* Give the expanded panel a nice "dropdown" surface under the fixed bar */
  .navbar .navbar-collapse{
    background: var(--nav-panel-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid var(--nav-border);
    padding: 12px 0 14px;
    margin-top: 10px;
    border-radius: 8px;
    box-shadow: 0 10px 18px rgba(0,0,0,.06);
  }

  /* Let Bootstrap handle the collapse animation smoothly */
  .navbar .navbar-collapse.collapse:not(.show){
    display: none;
  }

  /* Add subtle lines between nav links in mobile menu */
  .navbar-collapse .nav-item:not(.ms-lg-2){
    border-bottom: 1px solid rgba(31,43,42,.08);
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  /* Remove border from the last visible nav-item (FAQs, which is 2nd to last) */
  .navbar-collapse .nav-item:not(.ms-lg-2):nth-last-child(2){
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .nav-burger-line{ transition: none; }
}

.btn-accent-lg{
  padding: .75rem 1.25rem;
  font-size: 14px;
}

.btn-outline-soft{
  --bs-btn-color: color-mix(in srgb, var(--ink) 75%, transparent);
  --bs-btn-border-color: color-mix(in srgb, var(--ink) 22%, transparent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 6%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  --bs-btn-hover-color: color-mix(in srgb, var(--ink) 90%, transparent);
  border-radius: 4px;
  font-weight: 500;
}

/* Light CTA (light background, dark text) — used for the "Explore Services" hero button */
.btn-softfill{
  --bs-btn-color: var(--ink);
  --bs-btn-bg: color-mix(in srgb, var(--bg) 88%, var(--accent) 12%);
  --bs-btn-border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bg) 80%, var(--accent) 20%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: color-mix(in srgb, var(--bg) 74%, var(--accent) 26%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 4px;
  font-weight: 500;
}

.btn-outline-lg{
  padding: .75rem 1.25rem;
  font-size: 14px;
}

/* Palette Switcher Button */
.btn-palette-switcher{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  font-size: 13px;
  font-weight: 400;
  color: color-mix(in srgb, var(--ink) 75%, transparent);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.btn-palette-switcher:hover{
  color: color-mix(in srgb, var(--ink) 90%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-color: color-mix(in srgb, var(--ink) 25%, transparent);
}

.btn-palette-switcher:focus{
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
}

.btn-palette-switcher i{
  font-size: 14px;
  opacity: 0.8;
}

.btn-palette-switcher .palette-name{
  font-size: 12px;
  letter-spacing: 0.02em;
}

@media (max-width: 991.98px){
  .btn-palette-switcher{
    padding: 0.5rem 0.65rem;
  }
}

/* HERO */
.hero{
  padding-top: var(--nav-h);
  min-height: calc(100vh);
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}

/* Hero background image layer with filter */
.hero::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg-image);
  background-size: cover;
  /* Anchor bottom of image to bottom of viewport */
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: var(--hero-filter, sepia(15%) saturate(90%) brightness(1.05) contrast(0.95));
  z-index: 0;
  transition: filter 0.4s ease, transform 0.4s ease;
}


/* Mobile/touch devices often don't support fixed backgrounds well */
@media (hover: none) and (pointer: coarse){
  .hero::after{
    background-attachment: scroll;
  }
}

/* Hero background overlay for color enhancement */
.hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-overlay-color, rgba(244, 242, 237, 0.75));
  mix-blend-mode: multiply;
  z-index: 1;
  transition: background-color 0.4s ease;
}

/* Hero content container */
.hero-container{
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: calc(100vh - var(--nav-h));
  margin-bottom: 0;
}

.hero-inner{
  max-width: 760px;
  /* Ensure hero text stays readable even on detailed/busy photography */
  padding: clamp(18px, 4vw, 34px);
  border-radius: 0;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  /* Start with low blur, animate to full blur on page load */
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22);
  transition: background 0.3s ease, border 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  /* Create a stacking context so ::before/::after (z-index:-1) stay behind the text,
     but DON'T fall behind the hero background image. This is crucial for lens-blur mode. */
  z-index: 0;
  isolation: isolate;
  /* Animate blur on page load */
  animation: heroBlurIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Keyframe animation for blur entrance */
@keyframes heroBlurIn {
  0% {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    background: color-mix(in srgb, var(--surface) 60%, transparent);
  }
  100% {
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
  }
}

/* Ensure overlays sit behind text/content (without relying on negative z-index) */
.hero-inner > *{
  position: relative;
  z-index: 1;
  /* Start hidden, fade in after blur animation */
  opacity: 0;
  animation: heroTextFadeIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}

/* Ensure toggle buttons don't fade in (they should be visible immediately) */
.hero-glass-toggle{
  opacity: 1 !important;
  animation: none !important;
}

/* Keyframe animation for text fade-in (starts after blur completes) */
@keyframes heroTextFadeIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-inner--windowsill-right{
  text-align: center;
}

/* Background image toggle button placement (stack above layout toggle) */
.hero-glass-toggle.hero-bg-toggle{
  right: 20px;
  top: 100px;
}

@media (max-width: 575.98px){
  .hero-glass-toggle.hero-bg-toggle{
    right: 12px;
    top: 92px;
  }
}

/* Layout toggle button placement (stack under Background toggle)
   NOTE: the layout button also has `.hero-glass-toggle`, so we must use a
   higher-specificity selector to override the base toggle positioning. */
.hero-glass-toggle.hero-layout-toggle{
  right: 20px;
  top: 60px;
}

@media (max-width: 575.98px){
  .hero-glass-toggle.hero-layout-toggle{
    right: 12px;
    top: 52px;
  }
}

/* HERO LAYOUTS
   - default: centered (original)
   - windowsill-right: anchored to right windowsill
   - bottom-banner: full width at the bottom
*/
.hero[data-hero-layout="center"],
.hero:not([data-hero-layout]){
  display: flex;
  align-items: center;
}

.hero[data-hero-layout="center"] .hero-container,
.hero:not([data-hero-layout]) .hero-container{
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.hero[data-hero-layout="center"] .hero-container .container,
.hero:not([data-hero-layout]) .hero-container .container{
  width: 100%;
}

.hero[data-hero-layout="center"] .hero-inner--windowsill-right,
.hero:not([data-hero-layout]) .hero-inner--windowsill-right{
  position: relative;
  margin: 0 auto;
  width: min(760px, 100%);
}

.hero[data-hero-layout="center"]::after,
.hero:not([data-hero-layout])::after{
  /* Right-align the image to center around the right-hand side window, same as windowsill mode */
  background-position: right bottom;
}

.hero[data-hero-layout="windowsill-right"]{
  /* Anchor tuning for "right windowsill" layout */
  /* Keep the background aligned to the image's RIGHT edge so we can anchor the card to the door-frame */
  --hero-windowsill-x: 100%;
  --hero-windowsill-right: clamp(16px, 5vw, 72px);
  /* Percentage of hero height (under the windowsill) */
  --hero-windowsill-top: 52%;
  /* Where the door ends (hero glass should start to the right of this) */
  --hero-door-right: clamp(320px, 48vw, 720px);
  /* Card bounds (switch these at breakpoints based on whether door is visible) */
  --hero-card-left: var(--hero-door-right);
  --hero-card-right: 0px;
  height: 100vh;
  min-height: 100vh;
}

.hero[data-hero-layout="windowsill-right"]::after{
  /* Right-align the image so the door-frame offset can be computed from the image's right edge */
  background-position: right bottom;
}

.hero[data-hero-layout="windowsill-right"] .hero-container{
  padding-top: 0;
  padding-bottom: 0;
  height: calc(100vh - var(--nav-h));
  min-height: calc(100vh - var(--nav-h));
}

/* Anchor the hero card under the right windowsill */
.hero[data-hero-layout="windowsill-right"] .hero-inner--windowsill-right{
  position: absolute;
  top: var(--hero-windowsill-top);
  bottom: 0;
  margin: 0;
  /* Constrain hero glass: left aligns to door's right edge, right aligns to viewport edge */
  left: min(var(--hero-card-left), calc(100% - 280px));
  right: var(--hero-card-right);
  width: auto;
  max-width: none;
}

.hero[data-hero-layout="bottom-banner"]{
  display: flex;
  align-items: flex-end;
  height: 100vh;
  min-height: 100vh;
}

.hero[data-hero-layout="bottom-banner"]::after{
  background-position: center bottom;
}

.hero[data-hero-layout="bottom-banner"] .hero-container{
  display: flex;
  align-items: flex-end;
  padding-top: 0;
  padding-bottom: 0;
  height: calc(100vh - var(--nav-h));
  min-height: calc(100vh - var(--nav-h));
  width: 100%;
}

.hero[data-hero-layout="bottom-banner"] .hero-container .container{
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.hero[data-hero-layout="bottom-banner"] .hero-inner--windowsill-right{
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 100%;
}

.hero[data-hero-layout="bottom-banner"] .hero-inner{
  max-width: 100%;
  width: 100%;
}

@media (max-width: 991.98px){
  .hero[data-hero-layout="windowsill-right"]{
    --hero-windowsill-x: 84%;
    --hero-windowsill-right: clamp(14px, 4vw, 32px);
    --hero-windowsill-top: 54%;
    --hero-door-right: clamp(280px, 46vw, 520px);
  }
}

@media (max-width: 575.98px){
  .hero[data-hero-layout="windowsill-right"]{
    /* Focus further right so the door drops out on small screens */
    --hero-windowsill-x: 90%;
    --hero-windowsill-top: 56%;
    --hero-door-right: clamp(220px, 52vw, 360px);
    /* On small screens the door is out of frame -> hero should be full width */
    --hero-card-left: 0px;
    --hero-card-right: 0px;
  }
}

/* Lightening effect for dark areas in glass area */
.hero-inner::before{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  mix-blend-mode: screen;
  border-radius: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
}

/* Subtle light tint overlay for improved text legibility (similar to contact section) */
.hero-inner::after{
  content: '';
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--bg) 1%, transparent);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-radius: 0;
  pointer-events: none;
  z-index: 0;
  transition: background-color 0.3s ease;
}

/* No glass effect state */
.hero-inner.no-glass{
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  /* Disable blur animation for no-glass mode */
  animation: none;
}

.hero-inner.no-glass::before{
  opacity: 0;
}

.hero-inner.no-glass::after{
  opacity: 0;
}

/* Lens blur state (soft, feathered "spot" instead of hard glass edges) */
.hero-inner.lens-blur{
  /* Keep actual backdrop blur on the card (most reliable across browsers),
     but remove the hard border and replace with a soft "glow" falloff. */
  background: color-mix(in srgb, var(--surface) 18%, transparent);
  border: none;
  /* Start with low blur, animate to full lens blur */
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  box-shadow:
    0 0 80px 28px color-mix(in srgb, var(--surface) 55%, transparent),
    0 10px 34px rgba(0, 0, 0, 0.10);
  /* Override default blur animation with lens blur animation */
  animation: heroLensBlurIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Keyframe animation for lens blur entrance */
@keyframes heroLensBlurIn {
  0% {
    backdrop-filter: blur(0px) saturate(1);
    -webkit-backdrop-filter: blur(0px) saturate(1);
    background: color-mix(in srgb, var(--surface) 8%, transparent);
    box-shadow:
      0 0 40px 14px color-mix(in srgb, var(--surface) 35%, transparent),
      0 5px 17px rgba(0, 0, 0, 0.05);
  }
  100% {
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    background: color-mix(in srgb, var(--surface) 18%, transparent);
    box-shadow:
      0 0 80px 28px color-mix(in srgb, var(--surface) 55%, transparent),
      0 10px 34px rgba(0, 0, 0, 0.10);
  }
}



/* Remove the "screen" lightening layer for this mode */
.hero-inner.lens-blur::before{
  opacity: 0;
}

/* Disable the tint overlay for lens-blur; the card itself provides the effect */
.hero-inner.lens-blur::after{
  opacity: 0;
}


.eyebrow{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hero-eyebrow-color, color-mix(in srgb, var(--ink) 45%, transparent));
  margin-bottom: 18px;
  /* Override general hero-inner > * animation - simple fade */
  opacity: 0;
  animation: heroEyebrowFade 0.4s ease-out 0.1s forwards;
}

/* Simple fade animation for eyebrow */
@keyframes heroEyebrowFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.hero-title{
  font-family: "Playfair Display", serif;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.03;
  font-size: clamp(2.6rem, 5vw, 4.05rem);
  margin: 0 0 18px 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
  /* Override general hero-inner > * animation - animate "Where Healing" together */
  opacity: 0;
  animation: heroTitleFade 0.5s ease-out 0.2s forwards;
}

/* Fade animation for "Where Healing" together */
@keyframes heroTitleFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.hero-title-word{
  display: inline-block;
  /* No separate animation - will animate with title */
}

.hero-title-accent{
  display: inline-block;
  /* Start hidden, animate after "Where" and "Healing" - overlap with "Healing" */
  opacity: 0;
  animation: heroTitleAccent 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}

/* Animate "Begins" with delay after "Where Healing" - simple fade */
@keyframes heroTitleAccent {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.hero-title-accent em{
  color: color-mix(in srgb, var(--ink) 85%, var(--accent) 15%);
  font-style: italic;
  font-weight: 500;
}

.hero-lede{
  max-width: 620px;
  color: var(--hero-lede-color, color-mix(in srgb, var(--ink) 58%, transparent));
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 26px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.12);
  margin-left: auto;
  margin-right: auto;
  /* Override general hero-inner > * animation - overlap with "Begins" */
  opacity: 0;
  animation: heroLedeFade 0.5s ease-out 0.65s forwards;
}

/* Fade animation for hero lede text */
@keyframes heroLedeFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.hero-actions{
  margin-bottom: 18px;
  /* Override general hero-inner > * animation */
  opacity: 1;
  animation: none;
}

/* Animate each button with a slight stagger - overlap with lede */
.hero-actions .btn{
  opacity: 0;
  animation: heroButtonFade 0.5s ease-out forwards;
}

.hero-actions .btn:nth-child(1){
  animation-delay: 0.8s;
}

.hero-actions .btn:nth-child(2){
  animation-delay: 0.95s;
}

/* Fade animation for individual buttons */
@keyframes heroButtonFade {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-scroll{
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  font-size: 18px;
  padding: 10px 12px;
  border-radius: 999px;
  transition: transform .2s ease, background .2s ease;
}

.hero-scroll:hover{
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  transform: translateY(1px);
}

.hero-glass-toggle{
  position: absolute;
  top: 20px;
  right: 20px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--ink);
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.hero-glass-toggle:hover{
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.hero-glass-toggle:active{
  transform: translateY(0);
}

.hero-glass-toggle i{
  font-size: 14px;
  opacity: 0.8;
}

.hero-glass-toggle-label{
  font-weight: 500;
  letter-spacing: 0.02em;
}

@media (max-width: 991.98px){
  .hero-inner{
    margin-right: clamp(20px, 4vw, 40px);
    max-width: calc(100% - 40px);
  }
  
  .hero[data-hero-layout="bottom-banner"] .hero-inner{
    margin-right: 0;
    margin-left: 0;
    max-width: 100%;
  }
}

@media (max-width: 575.98px){
  .hero-glass-toggle{
    top: 12px;
    right: 12px;
    padding: 6px 10px;
    font-size: 11px;
  }
  
  .hero-glass-toggle-label{
    display: none;
  }
  
  .hero-inner{
    margin-right: 20px;
    margin-left: 20px;
    max-width: calc(100% - 40px);
  }
  
  .hero[data-hero-layout="bottom-banner"] .hero-inner{
    margin-right: 0;
    margin-left: 0;
    max-width: 100%;
  }
}

/* SECTION SHARED */
.section{
  padding: 92px 0;
}

.section-kicker{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  margin-bottom: 10px;
}

.section-title{
  font-family: "Playfair Display", serif;
  font-weight: 500;
  letter-spacing: .01em;
  font-size: 34px;
  margin: 0 0 14px 0;
}

.section-subtitle{
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  font-size: 13px;
  line-height: 1.8;
  max-width: 670px;
  margin: 0 auto;
}

.copy p{
  color: rgba(31,43,42,.62);
  font-size: 13px;
  line-height: 1.9;
  margin-bottom: 14px;
}

/* ABOUT */
.section-about{
  padding-top: 78px;
}

/* Reduce top padding when about section immediately follows hero to eliminate gap but maintain spacing */
.hero + .section.section-about{
  padding-top: 48px;
}

.about-card{
  background: var(--sage);
  border-radius: 4px;
  border: none;
  padding: 56px 42px;
  /* Prevent extreme aspect-ratio changes from cropping the profile photo too aggressively */
  min-height: clamp(320px, 42vw, 520px);
  position: relative;
  overflow: hidden;
}

.about-card-clickable{
  cursor: pointer;
  user-select: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.about-card-clickable:hover,
.about-card-clickable:focus{
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
  outline: none;
}

.about-card-clickable:focus-visible{
  box-shadow: 0 0 0 .2rem rgba(47,91,80,.18), var(--shadow-soft);
}

/* About card "photo reveal" */
.about-card__photo{
  position: absolute;
  inset: 0;
  background-color: var(--sage);
  background-image: none;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--about-photo-position, 50% 30%);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity .38s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter 0.4s ease;
  pointer-events: none;
  filter: var(--profile-filter, sepia(15%) saturate(90%) brightness(1.05) contrast(0.95));
  z-index: 2147483004; /* Above editor region button (2147483003) */
}

/* Profile photo color overlay for white background colorization */
.about-card__photo::before{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--profile-overlay-color, rgba(244, 242, 237, 0.65));
  mix-blend-mode: multiply;
  z-index: 1;
  transition: background-color 0.4s ease;
  pointer-events: none;
}

.about-card__content{
  position: relative;
  z-index: 1;
  transition: opacity .28s ease;
}

.about-card.is-photo .about-card__photo{
  opacity: 1;
  transform: none;
}

.about-card.is-photo.is-photo-ready .about-card__content{
  opacity: 0;
}

@media (prefers-reduced-motion: reduce){
  .about-card__photo,
  .about-card__content{
    transition: none !important;
  }
}

.about-initials{
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  display: grid;
  place-items: center;
  border: 0;
}

.about-initials span{
  font-family: "Playfair Display", serif;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  letter-spacing: .06em;
}

.about-name{
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 16px;
  color: color-mix(in srgb, var(--ink) 84%, transparent);
}

.about-role{
  font-size: 12px;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  margin-top: 4px;
}

.stat{
  text-align: left;
}

.stat-value{
  font-family: "Playfair Display", serif;
  font-size: 26px;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.stat-label{
  font-size: 12px;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
  margin-top: 4px;
}

/* SERVICES */
.section-services{
  background: var(--bg-alt);
  border-top: 1px solid rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.03);
  position: relative;
  overflow: hidden;
}

.section-services::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('mayfair-hero-bg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: 0;
}

.section-services::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--bg-alt) 75%, transparent);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  z-index: 1;
}

.section-services > .container {
  position: relative;
  z-index: 2;
}

/* Mobile/touch devices often don't support fixed backgrounds well */
@media (hover: none) and (pointer: coarse){
  .section-services::after{
    background-attachment: scroll;
  }
}

.service-card{
  background: color-mix(in srgb, var(--card) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 4px;
  padding: 28px 26px 26px;
  height: 100%;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease, background .2s ease;
  outline: none;
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.service-card:hover,
.service-card:focus{
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  background: color-mix(in srgb, var(--card) 90%, transparent);
}

.service-icon{
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 8%, transparent);
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: 14px;
}

.service-icon i{
  font-size: 16px;
}

.service-title{
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 10px 0;
  color: color-mix(in srgb, var(--ink) 92%, transparent);
}

.service-copy{
  margin: 0;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  font-size: 13px;
  line-height: 1.85;
}


/* Active state (used on hover/focus via JS) */
.service-card.is-active{
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  background: color-mix(in srgb, var(--card) 92%, transparent);
}

.service-card.is-active .service-icon{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Feature card mimics the "raised" middle card in reference */
.service-card-feature{
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  background: color-mix(in srgb, var(--card) 92%, transparent);
}

.service-icon-strong{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* APPROACH */
.section-approach{
  padding-top: 92px;
  padding-bottom: 104px;
}

.section-approach .copy ul{
  margin: 10px 0 0 0;
  padding-left: 1.15rem;
  color: rgba(31,43,42,.62);
  font-size: 13px;
  line-height: 1.9;
}

.section-approach .copy ul li{
  margin-bottom: 6px;
}

.section-approach .copy ul li:last-child{
  margin-bottom: 0;
}

.approach-title{
  font-family: "Playfair Display", serif;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.05;
  font-size: 38px;
  margin: 0 0 18px 0;
}

.approach-title em{
  font-style: italic;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}

.principles{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.principle-card{
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 4px;
  padding: 18px 18px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
}

.principle-no{
  font-size: 12px;
  letter-spacing: .14em;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  padding-top: 2px;
}

.principle-title{
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 6px;
}

.principle-copy{
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  font-size: 13px;
  line-height: 1.75;
}

/* CONTACT */
.section-contact{
  padding-top: 0;
  /* Ensure the contact section always reserves space above the footer
     (child margins shouldn't "escape" and visually overlap the footer). */
  padding-bottom: 56px;
  background: var(--accent);
  position: relative;
  display: flow-root;
  overflow: hidden;
  /* Ensure scroll positioning aligns top of section directly under navbar */
  scroll-margin-top: var(--nav-h);
}

.section-contact::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('mayfair-hero-bg-long.jpg');
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: 0;
}

.section-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--accent) 75%, transparent);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  z-index: 1;
}

.section-contact > .container {
  position: relative;
  z-index: 2;
}

/* Mobile/touch devices often don't support fixed backgrounds well */
@media (hover: none) and (pointer: coarse){
  .section-contact::after{
    background-attachment: scroll;
  }
}

.contact-left{
  padding: 84px 10px 84px 0;
  color: rgba(255,255,255,.92);
}

.section-kicker-invert{
  color: rgba(255,255,255,.70);
}

.contact-title{
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 44px;
  line-height: 1.05;
  margin: 0 0 18px 0;
  color: rgba(255,255,255,.96);
}

.contact-title em{
  font-style: italic;
  color: rgba(255,255,255,.96);
}

.contact-lede{
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.9;
  max-width: 520px;
  margin-bottom: 26px;
}

.contact-meta{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

.contact-item{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.contact-ic{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.90);
  transform: translateY(2px);
}

.contact-ic i{
  font-size: 13px;
}

.contact-label{
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  margin-bottom: 2px;
}

.contact-value{
  font-size: 12.5px;
  color: rgba(255,255,255,.74);
  line-height: 1.6;
}

.contact-form-card{
  background: rgba(250,250,248,.96);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 28px 26px;
  /* Bottom spacing is handled by `.section-contact` padding to avoid overlap with the footer */
  margin: 56px 0 0 0;
  position: relative;
}

.contact-form-card__content{
  transition: filter .3s ease;
}

.contact-form-card.is-blurred .contact-form-card__content{
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

.form-notice{
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250,250,248,.85);
  border-radius: 4px;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.form-notice:not([hidden]){
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.form-notice__content{
  text-align: center;
  padding: 32px 24px;
  max-width: 420px;
}

.form-notice__icon{
  font-size: 48px;
  margin-bottom: 16px;
  line-height: 1;
}

.form-notice__icon--success{
  color: var(--accent);
}

.form-notice__icon--error{
  color: #b85a4a;
}

.form-notice__title{
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 12px 0;
  color: color-mix(in srgb, var(--ink) 92%, transparent);
}

.form-notice__message{
  font-size: 13px;
  line-height: 1.8;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  margin: 0 0 20px 0;
}

.form-notice__button{
  margin-top: 8px;
}

/* Add bottom margin to the column containing the form card to show green background */
.section-contact .col-lg-6:has(.contact-form-card){
  margin-bottom: 56px;
}

.contact-form-title{
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 16px;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}

.form-label-soft{
  font-size: 11px;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  margin-bottom: 6px;
}

.form-control-soft{
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  font-size: 13px;
  padding: 10px 12px;
  color: color-mix(in srgb, var(--ink) 85%, transparent);
  background: rgba(255,255,255,.9);
}

.form-select.form-control-soft{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231f2b2a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-control-soft:focus{
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.form-control-soft.is-invalid,
.form-select.form-control-soft.is-invalid{
  border-color: #b85a4a;
  background-color: rgba(255,255,255,.95);
}

.form-control-soft.is-invalid:focus,
.form-select.form-control-soft.is-invalid:focus{
  border-color: #b85a4a;
  box-shadow: 0 0 0 .2rem rgba(184,90,74,.15);
}

/* Hide Bootstrap's invalid-feedback messages - we use custom field-error instead */
.invalid-feedback{
  display: none !important;
}

/* Checkbox styling to match theme */
.form-check-input{
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 4px;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

.form-check-input:checked{
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input:focus{
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.form-check-input:hover:not(:checked){
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.form-check-input.is-invalid{
  border-color: #b85a4a;
}

.form-check-input.is-invalid:checked{
  background-color: #b85a4a;
  border-color: #b85a4a;
}

.form-check-input.is-invalid:focus{
  box-shadow: 0 0 0 .2rem rgba(184,90,74,.15);
}

.field-error{
  font-size: 11px;
  color: #b85a4a;
  margin-top: 4px;
  min-height: 16px;
  line-height: 1.4;
  display: none;
}

.field-error.is-visible{
  display: block;
}

.form-check .field-error{
  margin-top: 6px;
  margin-left: 0;
}

/* Telephone field container styling */
.d-flex.gap-2 .form-control-soft.is-invalid{
  border-color: #b85a4a;
}

.d-flex.gap-2 .form-control-soft.is-invalid:focus{
  border-color: #b85a4a;
  box-shadow: 0 0 0 .2rem rgba(184,90,74,.15);
}

/* Telephone input with visual mask */
.telephone-input-wrapper{
  position: relative;
}

.telephone-mask{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(31,43,42,.45);
  font-size: 13px;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  line-height: 1;
}

.telephone-input-wrapper input{
  padding-left: 36px;
}

.telephone-input-wrapper input:focus ~ .telephone-mask{
  color: rgba(31,43,42,.35);
}

.form-note{
  font-size: 11px;
  color: rgba(31,43,42,.50);
}

/* FAQs */
.section-faqs{
  background: var(--bg-alt);
  border-top: 1px solid rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.03);
}

.faq-content{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 8px;
}

.faq-item{
  background: var(--card);
  border-radius: 4px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.faq-item:hover{
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  transform: translateY(-1px);
}

.faq-question{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease;
}

.faq-question:hover{
  background-color: color-mix(in srgb, var(--accent) 5%, transparent);
}

.faq-question:focus{
  outline: none;
}

.faq-question:focus-visible{
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 18%, transparent);
}

.faq-question h3{
  color: color-mix(in srgb, var(--ink) 92%, transparent);
  font-size: 18px;
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
  flex: 1;
}

.faq-icon{
  width: 24px;
  height: 24px;
  color: var(--accent);
  transition: transform .2s ease;
  flex-shrink: 0;
}

.faq-question[aria-expanded="true"] .faq-icon{
  transform: rotate(180deg);
}

.faq-answer{
  max-height: 5000px;
  overflow: hidden;
  transition: max-height .28s ease, padding .28s ease;
  padding: 0 18px 18px 18px;
}

.faq-item:not(.active) .faq-answer{
  max-height: 0;
  padding: 0 18px;
}

.faq-answer p{
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  line-height: 1.9;
  margin: 0;
  font-size: 13px;
}

.faq-answer ul{
  margin: 10px 0 0 0;
  padding-left: 1.15rem;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  font-size: 13px;
  line-height: 1.9;
}

.faq-answer ul li{
  margin-bottom: 6px;
}

.faq-answer ul li:last-child{
  margin-bottom: 0;
}

@media (max-width: 768px){
  .faq-question h3{ font-size: 17px; }
  .faq-question{ padding: 16px 14px; }
  .faq-answer{ padding: 0 14px 16px 14px; }
  .faq-item:not(.active) .faq-answer{ padding: 0 14px; }
}

/* FOOTER */
.footer{
  background: var(--accent-2);
  color: rgba(255,255,255,.88);
  padding: 56px 0 18px;
}

.footer-brand{
  display: flex;
  flex-direction: column;
}

.footer-brand-top{
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer-brand-title{
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  margin-top: 2px;
}

.brand-mark-footer{
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.08);
}

.brand-mark-footer .brand-mark-inner{
  color: rgba(255,255,255,.85);
}

.footer .brand-name{
  color: rgba(255,255,255,.92);
}

.footer .brand-sub{
  color: rgba(255,255,255,.68);
}

.footer-copy{
  margin-top: 10px;
  margin-left: 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.68);
  line-height: 1.75;
  max-width: 440px;
}

@media (max-width: 991.98px){
  .footer-copy{
    max-width: 100%;
  }
}

.footer-heading{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
  margin-bottom: 10px;
}

.footer-links{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a{
  color: rgba(255,255,255,.74);
  text-decoration: none;
  font-size: 12.5px;
}

.footer-links a:hover{
  color: rgba(255,255,255,.95);
}

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.10);
  margin-top: 32px;
  padding-top: 14px;
}

.footer-small{
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

.footer-small-muted{
  color: rgba(255,255,255,.45);
}

.footer-company-details{
  line-height: 1.6;
  max-width: 90ch;
}

/* Responsive tweaks to better resemble the single-column behavior on smaller screens */
@media (max-width: 991.98px){
  :root{ --nav-h: 72px; }
  .contact-left{ padding: 56px 0 22px; }
  .contact-form-card{ margin: 0; }
  .section-contact .col-lg-6:has(.contact-form-card){
    margin-bottom: 0;
  }
}

@media (max-width: 575.98px){
  .section{ padding: 72px 0; }
  .approach-title{ font-size: 34px; }
  .contact-title{ font-size: 38px; }
}

/* LEGAL */
.section-legal{
  background: var(--bg);
  border-top: 1px solid rgba(0,0,0,.03);
}

.legal-card{
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 4px;
  padding: 22px 20px;
  box-shadow: var(--shadow-soft);
  height: 100%;
}

.legal-title{
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 10px;
  color: color-mix(in srgb, var(--ink) 92%, transparent);
}

.legal-copy p{
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  font-size: 13px;
  line-height: 1.85;
  margin-bottom: 12px;
}

.legal-copy a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

.legal-copy a:hover{
  border-bottom-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.legal-linklike{
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

.legal-linklike:hover{
  border-bottom-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.legal-linklike:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 4px;
}

/* Footer legal links */
.footer-legal-link{
  color: rgba(255,255,255,.68);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
}

.footer-legal-link:hover{
  color: rgba(255,255,255,.95);
}

.footer-legal-btn{
  cursor: pointer;
}

.footer-legal-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.22);
  border-radius: 6px;
}

/* COOKIE CONSENT */
.cookie-banner{
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 1060;
  max-width: 1040px;
  margin: 0 auto;

  opacity: 0;
  transform: translate3d(0, 14px, 0);
  pointer-events: none;
  transition: opacity .28s ease, transform .32s cubic-bezier(.2,.8,.2,1);
}

.cookie-banner.is-visible{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.cookie-banner__inner{
  background: color-mix(in srgb, var(--card) 40%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 10px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 14px 14px;
  display: grid;
  gap: 12px;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

.cookie-banner__title{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(31,43,42,.55);
  margin-bottom: 6px;
}

.cookie-banner__text{
  margin: 0;
  color: rgba(31,43,42,.62);
  font-size: 12.5px;
  line-height: 1.75;
}

.cookie-banner__text a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(47,91,80,.25);
}

.cookie-banner__text a:hover{
  border-bottom-color: rgba(47,91,80,.5);
}

.cookie-banner__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cookie-btn{
  font-size: 12.5px;
  padding: .55rem .9rem;
}

@media (max-width: 575.98px){
  .cookie-banner{
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .cookie-banner__actions{
    justify-content: stretch;
  }
  .cookie-btn{
    width: 100%;
  }
}

.cookie-modal{
  position: fixed;
  inset: 0;
  z-index: 1070;
  display: grid;
  place-items: center;
  padding: 18px;
}

.cookie-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 20, .42);
  opacity: 0;
  transition: opacity .22s ease;
}

.cookie-modal__dialog{
  position: relative;
  width: min(720px, 100%);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(31,43,42,.14);
  border-radius: 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  transform: translate3d(0, 10px, 0) scale(.992);
  opacity: 0;
  transition: opacity .24s ease, transform .34s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}

.cookie-modal.is-open .cookie-modal__overlay{
  opacity: 1;
}

.cookie-modal.is-open .cookie-modal__dialog{
  opacity: 1;
  transform: none;
}

.cookie-modal__header{
  padding: 16px 16px 12px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(31,43,42,.10);
}

.cookie-modal__title{
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 20px;
  color: rgba(31,43,42,.92);
}

.cookie-modal__subtitle{
  margin-top: 4px;
  font-size: 12.5px;
  color: rgba(31,43,42,.58);
  line-height: 1.6;
}

.cookie-iconbtn{
  border: 1px solid rgba(31,43,42,.14);
  background: rgba(31,43,42,.02);
  color: rgba(31,43,42,.72);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.cookie-iconbtn:hover{
  background: rgba(47,91,80,.06);
  border-color: rgba(47,91,80,.28);
  transform: translateY(-1px);
}

.cookie-iconbtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(47,91,80,.18);
}

.cookie-modal__body{
  padding: 14px 16px 6px;
  display: grid;
  gap: 12px;
}

.cookie-option{
  background: rgba(31,43,42,.02);
  border: 1px solid rgba(31,43,42,.08);
  border-radius: 10px;
  padding: 12px 12px;
}

.cookie-option__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cookie-option__title{
  font-size: 13px;
  font-weight: 600;
  color: rgba(31,43,42,.88);
}

.cookie-option__desc{
  margin-top: 6px;
  color: rgba(31,43,42,.60);
  font-size: 12.5px;
  line-height: 1.7;
}

.cookie-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(31,43,42,.62);
}

.cookie-toggle input{
  accent-color: var(--accent);
}

.cookie-modal__fineprint{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(31,43,42,.56);
}

.cookie-modal__fineprint a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(47,91,80,.25);
}

.cookie-modal__fineprint a:hover{
  border-bottom-color: rgba(47,91,80,.5);
}

.cookie-modal__footer{
  padding: 12px 16px 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  border-top: 1px solid rgba(31,43,42,.10);
}

@media (prefers-reduced-motion: reduce){
  .cookie-banner,
  .cookie-modal__overlay,
  .cookie-modal__dialog{
    transition: none !important;
  }
}