/* ═══════════════════════════════════════════
       RESET & FOUNDATION
    ═══════════════════════════════════════════ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
    body {
      font-family: 'Lora', Georgia, serif;
      color: #3a2d28;
      background: #faf6f1;
      line-height: 1.8;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      position: relative;
    }
    ::selection {
      background: rgba(184, 150, 62, 0.28);
      color: #2a1f1b;
    }

    /* ═══════════════════════════════════════════
       COLOR PALETTE
       --gold:       #b8963e
       --gold-light: #d4b96a
       --cream:      #faf6f1
       --cream-dark: #f0e8db
       --warm-brown: #3a2d28
       --rose:       #c9a087
       --deep-wine:  #6b3a3a
       --sage:       #7a8b6f
    ═══════════════════════════════════════════ */
    :root {
      --gold: #b8963e;
      --gold-light: #d4b96a;
      --cream: #faf6f1;
      --cream-dark: #f0e8db;
      --warm-brown: #3a2d28;
      --rose: #c9a087;
      --rose-text: #a1745a; /* rose, deepened enough to read comfortably on cream */
      --deep-wine: #6b3a3a;
      --sage: #7a8b6f;
      --transition: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* ═══════════════════════════════════════════
       UTILITY CLASSES
    ═══════════════════════════════════════════ */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    h1, h2, h3 { text-wrap: balance; }
    p { text-wrap: pretty; }

    /* ═══════════════════════════════════════════
       SCROLL ANIMATIONS
    ═══════════════════════════════════════════ */
    .reveal {
      opacity: 0;
      transform: translateY(48px) scale(0.985);
      transition:
        opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.2s cubic-bezier(0.22, 1, 0.36, 1);
      filter: blur(2px);
      will-change: opacity, transform, filter;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
    .reveal-delay-1 { transition-delay: 0.12s; }
    .reveal-delay-2 { transition-delay: 0.26s; }
    .reveal-delay-3 { transition-delay: 0.42s; }
    .reveal-delay-4 { transition-delay: 0.58s; }
    @media (prefers-reduced-motion: reduce) {
      .reveal { transition-duration: 0.01s; filter: none; transform: none; }
      .ornament { animation: none; }
    }

    /* ═══════════════════════════════════════════
       ORNAMENTAL DIVIDERS
    ═══════════════════════════════════════════ */
    .ornament {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      margin: 2rem 0;
      color: var(--gold);
      font-size: 1.5rem;
      letter-spacing: 0.3em;
      animation: ornamentBreathe 6s ease-in-out infinite;
    }
    .ornament::before, .ornament::after {
      content: '';
      height: 1px;
      width: 80px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }
    @keyframes ornamentBreathe {
      0%, 100% { opacity: 0.85; transform: scale(1); }
      50%      { opacity: 1; transform: scale(1.04); }
    }

    .divider-flourish {
      text-align: center;
      margin: 3rem 0;
      color: var(--gold);
      font-size: 1.8rem;
      letter-spacing: 0.5em;
      opacity: 0.6;
    }

    /* ═══════════════════════════════════════════
       NAVIGATION
    ═══════════════════════════════════════════ */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      padding: 1.5rem 0;
      transition: all var(--transition);
      background: transparent;
    }
    nav.scrolled {
      background: rgba(250, 246, 241, 0.95);
      backdrop-filter: blur(20px);
      padding: 1rem 0;
      box-shadow: 0 2px 40px rgba(58, 45, 40, 0.08);
    }
    nav .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 2.5rem;
    }
    .nav-logo {
      font-family: 'Cinzel', serif;
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      color: var(--warm-brown);
      text-transform: uppercase;
      text-decoration: none;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .nav-links {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 1.45rem;
      list-style: none;
      margin-left: auto;
    }
    .nav-links a {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--warm-brown);
      text-decoration: none;
      position: relative;
      transition: color var(--transition);
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--gold);
      transition: width var(--transition);
    }
    .nav-links a:hover { color: var(--gold); }
    .nav-links a:hover::after { width: 100%; }

    /* Mobile menu */
    .nav-toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 5px;
    }
    .nav-toggle span {
      width: 28px;
      height: 1.5px;
      background: var(--warm-brown);
      transition: all 0.3s ease;
    }

    /* ═══════════════════════════════════════════
       HERO SECTION
    ═══════════════════════════════════════════ */
    .hero {
      min-height: 94svh;
      padding: 7rem 0 5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
      background:
        radial-gradient(ellipse at 20% 50%, rgba(184, 150, 62, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(201, 160, 135, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 0%, rgba(212, 185, 106, 0.06) 0%, transparent 60%),
        var(--cream);
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(180deg, rgba(250, 246, 241, 0.28), transparent 30%, rgba(250, 246, 241, 0.24));
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 900px;
      padding: 2rem;
    }
    .hero-overline {
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.95rem;
      font-weight: 500;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 2rem;
      opacity: 0;
      animation: fadeUp 1s ease 0.3s forwards;
    }
    .hero h1 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(3rem, 7vw, 5.5rem);
      font-weight: 300;
      line-height: 1.15;
      color: var(--warm-brown);
      margin-bottom: 0.5rem;
      opacity: 0;
      animation: fadeUp 1s ease 0.6s forwards;
    }
    .hero h1 em {
      font-style: italic;
      font-weight: 400;
      color: var(--deep-wine);
    }
    .hero-subtitle {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.2rem, 2.5vw, 1.6rem);
      font-weight: 300;
      color: var(--rose-text);
      margin-top: 1rem;
      margin-bottom: 2.5rem;
      opacity: 0;
      animation: fadeUp 1s ease 0.9s forwards;
    }
    .hero-actions {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .hero-cta {
      display: inline-block;
      font-family: 'Cinzel', serif;
      font-size: 0.85rem;
      font-weight: 500;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--warm-brown);
      text-decoration: none;
      border: 1px solid var(--gold);
      padding: 1.1rem 3rem;
      transition: all var(--transition);
      opacity: 0;
      animation: fadeUp 1s ease 1.2s forwards;
    }
    .hero-cta {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .hero-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 0%, rgba(212, 185, 106, 0.45) 50%, transparent 100%);
      transform: translateX(-110%);
      transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
      z-index: -1;
    }
    .hero-cta:hover {
      background: var(--gold);
      color: var(--cream);
      box-shadow: 0 18px 38px -22px rgba(184, 150, 62, 0.85), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
      transform: translateY(-1px);
    }
    .hero-cta:hover::before {
      transform: translateX(110%);
    }
    /* Primary CTA is solid so the hero has one unmistakable action;
       the secondary stays as the outlined ghost beside it. */
    .hero-cta:not(.hero-cta--secondary) {
      background: var(--warm-brown);
      border-color: var(--warm-brown);
      color: var(--cream);
    }
    .hero-cta:not(.hero-cta--secondary):hover {
      background: var(--gold);
      border-color: var(--gold);
    }
    .hero-cta--secondary {
      border-color: rgba(58, 45, 40, 0.28);
      color: var(--warm-brown);
    }
    .hero-cta--secondary:hover {
      background: var(--warm-brown);
      border-color: var(--warm-brown);
      color: var(--cream);
    }

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

    /* ═══════════════════════════════════════════
       PHILOSOPHY / INTRO SECTION
    ═══════════════════════════════════════════ */
    .philosophy {
      padding: 8rem 0;
      background: var(--cream);
      text-align: center;
    }
    .philosophy-inner {
      max-width: 750px;
      margin: 0 auto;
    }
    .section-label {
      font-family: 'Cinzel', serif;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 2rem;
    }
    .philosophy h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 300;
      line-height: 1.4;
      color: var(--warm-brown);
      margin-bottom: 2rem;
    }
    .philosophy h2 em {
      font-weight: 400;
      font-style: italic;
      color: var(--deep-wine);
    }
    .philosophy p {
      font-size: 1.05rem;
      color: #5a4a42;
      max-width: 600px;
      margin: 0 auto 1.5rem;
    }
    /* Lead paragraph (the one with the drop cap) gets a touch more presence. */
    .philosophy p.drop-cap {
      font-size: 1.12rem;
      line-height: 1.85;
    }

    /* ═══════════════════════════════════════════
       SERVICES SECTION
    ═══════════════════════════════════════════ */
    .services {
      padding: 6rem 0 8rem;
      background: var(--cream);
      position: relative;
    }
    .services::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    }
    .services-header {
      text-align: center;
      margin-bottom: 5rem;
    }
    .services-header h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 300;
      color: var(--warm-brown);
    }

    .service-block {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
      margin-bottom: 8rem;
    }
    .service-block:last-child { margin-bottom: 0; }
    .service-block.reverse { direction: rtl; }
    .service-block.reverse > * { direction: ltr; }

    .service-visual {
      position: relative;
      aspect-ratio: 3/4;
      background:
        radial-gradient(ellipse at 50% 50%, rgba(201, 160, 135, 0.25) 0%, transparent 70%),
        linear-gradient(135deg, #ede5da, #e3d9cc);
      overflow: hidden;
      box-shadow:
        0 0 0 1px rgba(184, 150, 62, 0.28),
        0 24px 60px -28px rgba(58, 45, 40, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .service-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
      transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .service-block:hover .service-visual img {
      transform: scale(1.03);
    }

    /* Massage visual */
    .visual-massage {
      background:
        radial-gradient(ellipse at 30% 40%, rgba(201, 160, 135, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(184, 150, 62, 0.15) 0%, transparent 50%),
        linear-gradient(160deg, #f5ede4, #ebe0d2);
    }
    .visual-massage .visual-symbol {
      font-size: 5rem;
      color: var(--gold);
      opacity: 0.4;
      margin-bottom: 1.5rem;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      line-height: 1;
    }
    .visual-massage .visual-quote {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.3rem;
      font-style: italic;
      color: var(--deep-wine);
      opacity: 0.7;
      max-width: 280px;
    }

    /* Nervous system visual */
    .visual-nervous {
      background:
        radial-gradient(ellipse at 50% 50%, rgba(122, 139, 111, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 70%, rgba(184, 150, 62, 0.1) 0%, transparent 50%),
        linear-gradient(160deg, #f0ebe4, #e8e2d8);
    }
    .visual-nervous .visual-symbol {
      font-size: 5rem;
      color: var(--sage);
      opacity: 0.4;
      margin-bottom: 1.5rem;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      line-height: 1;
    }
    .visual-nervous .visual-quote {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.3rem;
      font-style: italic;
      color: var(--sage);
      opacity: 0.8;
      max-width: 280px;
    }

    /* Border decoration on visuals */
    .service-visual::after {
      content: '';
      position: absolute;
      inset: 15px;
      border: 1px solid rgba(184, 150, 62, 0.25);
      pointer-events: none;
      z-index: 2;
    }

    .service-content {
      padding: 2rem 0;
    }
    .service-overline {
      font-family: 'Cinzel', serif;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1.5rem;
    }
    .service-content h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 300;
      line-height: 1.3;
      color: var(--warm-brown);
      margin-bottom: 1.5rem;
    }
    .service-content h3 em {
      font-weight: 400;
      font-style: italic;
      color: var(--deep-wine);
    }
    .service-content p {
      font-size: 1rem;
      color: #5a4a42;
      margin-bottom: 1.2rem;
    }
    .service-list {
      list-style: none;
      margin: 2rem 0;
      padding: 0;
    }
    .service-list li {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.1rem;
      font-weight: 500;
      color: var(--warm-brown);
      padding: 0.6rem 0;
      border-bottom: 1px solid rgba(184, 150, 62, 0.15);
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }
    .service-list li::before {
      content: '\2726';
      color: var(--gold);
      font-size: 0.7rem;
    }
    .service-link {
      display: inline-block;
      font-family: 'Cinzel', serif;
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--warm-brown);
      text-decoration: none;
      border-bottom: 1px solid var(--gold);
      padding-bottom: 4px;
      margin-top: 1.5rem;
      transition: all var(--transition);
    }
    .service-link:hover { color: var(--gold); }

    /* ═══════════════════════════════════════════
       TESTIMONIAL / QUOTE SECTION
    ═══════════════════════════════════════════ */
    .quote-section {
      padding: 8rem 0;
      background: var(--warm-brown);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .quote-section::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background:
        radial-gradient(ellipse at 50% 50%, rgba(184, 150, 62, 0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .quote-mark {
      font-family: 'Cormorant Garamond', serif;
      font-size: 8rem;
      font-weight: 300;
      color: var(--gold);
      opacity: 0.3;
      line-height: 0.5;
      margin-bottom: 2rem;
    }
    .quote-text {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 300;
      font-style: italic;
      color: var(--cream);
      max-width: 700px;
      margin: 0 auto 2rem;
      line-height: 1.6;
    }
    .quote-attribution {
      font-family: 'Cinzel', serif;
      font-size: 0.75rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--gold-light);
    }

    /* ═══════════════════════════════════════════
       CORPORATE / ON-SITE SECTION
    ═══════════════════════════════════════════ */
    .corporate {
      padding: 8rem 0;
      background: var(--cream);
      position: relative;
    }
    .corporate::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    }
    .corporate-inner {
      text-align: center;
    }
    .corporate-inner h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 300;
      color: var(--warm-brown);
      margin-bottom: 2rem;
    }
    .corporate-inner h2 em {
      font-weight: 400;
      font-style: italic;
      color: var(--deep-wine);
    }
    .corporate-intro {
      max-width: 700px;
      margin: 0 auto 4rem;
    }
    .corporate-intro p {
      font-size: 1.05rem;
      color: #5a4a42;
      line-height: 1.9;
    }
    .corporate-poster {
      max-width: 540px;
      margin: -1rem auto 4rem;
      padding: 0.8rem;
      background: rgba(250, 246, 241, 0.78);
      border: 1px solid rgba(184, 150, 62, 0.18);
      box-shadow: 0 18px 55px rgba(58, 45, 40, 0.08);
    }
    .corporate-poster img {
      display: block;
      width: 100%;
      height: auto;
    }
    .corporate-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2.5rem;
      margin-bottom: 4rem;
    }
    .corporate-card {
      text-align: center;
      padding: 3rem 2rem 2.5rem;
      background: var(--cream);
      position: relative;
      transition: transform var(--transition);
    }
    .corporate-card:hover {
      transform: translateY(-5px);
    }
    .corporate-card::before {
      content: '';
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 1px;
      background: var(--gold);
    }
    .corporate-card-icon {
      font-size: 2.2rem;
      color: var(--gold);
      opacity: 0.5;
      margin-bottom: 1.5rem;
      line-height: 1;
    }
    .corporate-card h4 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.4rem;
      font-weight: 500;
      color: var(--warm-brown);
      margin-bottom: 1rem;
    }
    .corporate-card p {
      font-size: 0.95rem;
      color: #5a4a42;
      line-height: 1.8;
    }
    .corporate-card p strong {
      color: var(--warm-brown);
      font-weight: 600;
    }
    .corporate-highlight {
      margin-bottom: 4rem;
    }
    .corporate-highlight-inner {
      background: var(--warm-brown);
      padding: 3.5rem 3rem;
      position: relative;
      overflow: hidden;
    }
    .corporate-highlight-inner::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(ellipse at 50% 50%, rgba(184, 150, 62, 0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .corporate-highlight-inner::after {
      content: '';
      position: absolute;
      inset: 12px;
      border: 1px solid rgba(184, 150, 62, 0.15);
      pointer-events: none;
    }
    .corporate-highlight-label {
      font-family: 'Cinzel', serif;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: 1.5rem;
    }
    .corporate-highlight-text {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.15rem, 2vw, 1.4rem);
      font-weight: 300;
      font-style: italic;
      color: var(--cream);
      max-width: 700px;
      margin: 0 auto 2.5rem;
      line-height: 1.7;
    }
    .corporate-benefits {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .corporate-benefit {
      font-family: 'Cinzel', serif;
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold-light);
      border: 1px solid rgba(212, 185, 106, 0.3);
      padding: 0.6rem 1.2rem;
    }
    .corporate-cta-area {
      max-width: 650px;
      margin: 0 auto;
    }
    .corporate-cta-text {
      font-size: 1.05rem;
      color: #5a4a42;
      margin-bottom: 2.5rem;
      line-height: 1.8;
    }
    .corporate-cta {
      display: inline-block;
      font-family: 'Cinzel', serif;
      font-size: 0.85rem;
      font-weight: 500;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--warm-brown);
      text-decoration: none;
      border: 1px solid var(--gold);
      padding: 1.1rem 3rem;
      transition: all var(--transition);
    }
    .corporate-cta:hover {
      background: var(--gold);
      color: var(--cream);
    }

    /* ═══════════════════════════════════════════
       APPROACH / VALUES SECTION
    ═══════════════════════════════════════════ */
    .approach {
      padding: 8rem 0;
      background: var(--cream-dark);
      position: relative;
    }
    .approach::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    }
    .approach-header {
      text-align: center;
      margin-bottom: 5rem;
    }
    .approach-header h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 300;
      color: var(--warm-brown);
    }
    .values-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3rem;
    }
    .approach-poster {
      max-width: 560px;
      margin: 4rem auto 0;
      padding: 0.8rem;
      background: rgba(250, 246, 241, 0.72);
      border: 1px solid rgba(184, 150, 62, 0.18);
      box-shadow: 0 18px 55px rgba(58, 45, 40, 0.08);
    }
    .approach-poster img {
      display: block;
      width: 100%;
      height: auto;
    }
    .value-card {
      text-align: center;
      padding: 3rem 2rem;
      background: var(--cream-dark);
      position: relative;
      transition: transform var(--transition);
    }
    .value-card:hover { transform: translateY(-5px); }
    .value-card::before {
      content: '';
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 1px;
      background: var(--gold);
    }
    .value-number {
      font-family: 'Cormorant Garamond', serif;
      font-size: 3.5rem;
      font-weight: 300;
      color: var(--gold);
      opacity: 0.4;
      margin-bottom: 1rem;
      line-height: 1;
    }
    .value-card h4 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      font-weight: 500;
      color: var(--warm-brown);
      margin-bottom: 1rem;
    }
    .value-card p {
      font-size: 0.95rem;
      color: #5a4a42;
    }

    /* ═══════════════════════════════════════════
       ABOUT / BIO SECTION
    ═══════════════════════════════════════════ */
    .about {
      padding: 8rem 0;
      /* cream (not cream-dark): this section now sits directly after the
         hero, and the page shouldn't step darker until Approach. */
      background: var(--cream);
      position: relative;
    }
    .about::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    }
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 5rem;
      align-items: center;
    }
    .about-visual {
      aspect-ratio: 3/4;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(ellipse at 50% 50%, rgba(201, 160, 135, 0.25) 0%, transparent 70%),
        linear-gradient(135deg, #ede5da, #e3d9cc);
      overflow: hidden;
      box-shadow:
        0 0 0 1px rgba(184, 150, 62, 0.28),
        0 24px 60px -28px rgba(58, 45, 40, 0.35);
    }
    .about-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
      transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .about-visual:hover img {
      transform: scale(1.03);
    }
    .about-visual::after {
      content: '';
      position: absolute;
      inset: 15px;
      border: 1px solid rgba(184, 150, 62, 0.25);
      pointer-events: none;
      z-index: 2;
    }
    .about-visual-text {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.65rem;
      font-style: italic;
      color: var(--rose);
      opacity: 0.7;
      text-align: center;
      padding: 2rem;
      line-height: 1.3;
    }
    .about-visual-text span {
      display: inline-block;
      font-family: 'Cinzel', serif;
      font-size: 0.72rem;
      font-style: normal;
      letter-spacing: 0.2em;
      line-height: 1.9;
      text-transform: uppercase;
      color: var(--warm-brown);
      opacity: 0.65;
    }
    .about-content h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 3.5vw, 2.8rem);
      font-weight: 300;
      color: var(--warm-brown);
      margin-bottom: 2rem;
      line-height: 1.3;
    }
    .about-content h2 em {
      font-weight: 400;
      font-style: italic;
      color: var(--deep-wine);
    }
    .about-content p {
      font-size: 1rem;
      color: #5a4a42;
      margin-bottom: 1.5rem;
    }

    /* ═══════════════════════════════════════════
       CONTACT / BOOKING SECTION
    ═══════════════════════════════════════════ */
    .contact {
      padding: 8rem 0;
      background: var(--cream);
      text-align: center;
    }
    .contact-inner {
      max-width: 1050px;
      margin: 0 auto;
    }
    .contact-inner > p:not(.section-label):not(.contact-note) {
      max-width: 650px;
      margin-left: auto;
      margin-right: auto;
    }
    .contact h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 300;
      color: var(--warm-brown);
      margin-bottom: 1.5rem;
    }
    .contact p {
      font-size: 1.05rem;
      color: #5a4a42;
      margin-bottom: 3rem;
    }
    .contact-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.5rem;
      text-align: left;
      margin-top: 3rem;
    }
    .contact-card {
      display: flex;
      flex-direction: column;
      padding: 2rem 1.75rem;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(184, 150, 62, 0.04));
      border: 1px solid rgba(184, 150, 62, 0.16);
      min-height: 100%;
    }
    .contact-card-label {
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.95rem;
      font-weight: 500;
      font-style: italic;
      letter-spacing: 0.02em;
      color: var(--gold);
      margin-bottom: 0.6rem;
    }
    .contact-card-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.6rem;
      font-weight: 500;
      color: var(--warm-brown);
      margin-bottom: 0.75rem;
      line-height: 1.2;
    }
    .contact-card-text {
      font-size: 0.98rem;
      color: #5a4a42;
      line-height: 1.75;
      margin-bottom: 1.5rem;
      flex: 1;
    }
    .contact-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: 'Cinzel', serif;
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--cream);
      background: var(--warm-brown);
      border: 1px solid var(--warm-brown);
      padding: 1rem 1.25rem;
      text-decoration: none;
      transition: all var(--transition);
      align-self: flex-start;
    }
    .contact-button:hover {
      background: var(--gold);
      border-color: var(--gold);
    }
    .contact-button--secondary {
      background: transparent;
      color: var(--warm-brown);
    }
    .contact-button--secondary:hover {
      color: var(--cream);
    }
    .contact-note {
      font-family: 'Cinzel', serif;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(58, 45, 40, 0.55);
      margin-top: 2rem;
    }

    /* ═══════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════ */
    footer {
      padding: 4rem 0 3rem;
      background: var(--warm-brown);
      text-align: center;
      position: relative;
    }
    footer::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }
    .footer-logo {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      font-weight: 400;
      font-style: italic;
      letter-spacing: 0.04em;
      color: var(--gold-light);
      margin-bottom: 1.25rem;
    }
    .footer-tagline {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.1rem;
      font-style: italic;
      color: rgba(250, 246, 241, 0.5);
      margin-bottom: 2rem;
    }
    .footer-links {
      display: flex;
      justify-content: center;
      gap: 2rem;
      list-style: none;
      margin-bottom: 2rem;
    }
    .footer-links a {
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.9rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(250, 246, 241, 0.5);
      text-decoration: none;
      transition: color var(--transition);
    }
    .footer-links a:hover { color: var(--gold-light); }
    .footer-copy {
      font-size: 0.8rem;
      color: rgba(250, 246, 241, 0.25);
      margin-top: 2rem;
    }

    /* ═══════════════════════════════════════════
       RESPONSIVE DESIGN
    ═══════════════════════════════════════════ */
    @media (max-width: 968px) {
      .nav-logo {
        font-size: 0.95rem;
        letter-spacing: 0.14em;
      }
      .nav-links {
        gap: 1rem;
      }
      .nav-links a {
        font-size: 0.9rem;
        letter-spacing: 0.08em;
      }
      .nav-links .nav-cta {
        padding: 0.45rem 0.8rem;
      }
      .service-block {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
      .service-block.reverse { direction: ltr; }
      .service-visual { max-width: 520px; margin: 0 auto; }
      .values-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
      .about-grid { grid-template-columns: 1fr; gap: 3rem; }
      .about-visual { max-width: 500px; margin: 0 auto; }
      .corporate-grid { grid-template-columns: 1fr; max-width: 550px; margin: 0 auto 4rem; }
    }

    @media (max-width: 768px) {
      .nav-links {
        position: fixed;
        top: 0; right: -100%;
        width: 80%; max-width: 350px;
        height: 100vh;
        background: var(--cream);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        transition: right var(--transition);
        box-shadow: -10px 0 40px rgba(0,0,0,0.1);
      }
      .nav-links.open { right: 0; }
      .nav-toggle { display: flex; z-index: 1001; }
      .contact-actions { grid-template-columns: 1fr; }
      .contact-button { width: 100%; }
      .philosophy { padding: 5rem 0; }
      .services { padding: 4rem 0 5rem; }
      .service-block { margin-bottom: 5rem; }
      .approach { padding: 5rem 0; }
      .about { padding: 5rem 0; }
      .corporate { padding: 5rem 0; }
      .corporate-highlight-inner { padding: 2.5rem 1.5rem; }
      .corporate-benefits { gap: 0.5rem; }
      .contact { padding: 5rem 0; }
    }

    @media (max-width: 480px) {
      .hero-content { padding: 1rem; }
      .hero h1 { font-size: 2.5rem; }
    }

    /* ═══════════════════════════════════════════
       NAV CTA BUTTON
    ═══════════════════════════════════════════ */
    .nav-links .nav-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      background: rgba(250, 246, 241, 0.5);
      color: var(--warm-brown);
      border: 1px solid var(--gold);
      padding: 0.72rem 1.05rem;
      font-family: 'Cinzel', serif;
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      transition: all var(--transition);
    }
    .nav-links .nav-cta:hover {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--cream);
    }
    .nav-links .nav-cta.active {
      background: var(--warm-brown);
      border-color: var(--warm-brown);
      color: var(--cream);
    }
    .nav-links .nav-cta::after {
      display: none;
    }

    /* ═══════════════════════════════════════════
       PAGE LOADING STATE
    ═══════════════════════════════════════════ */
    .page-loading {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 200px;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem;
      font-style: italic;
      color: var(--rose);
    }

    /* ═══════════════════════════════════════════
       TOAST / NOTIFICATIONS
    ═══════════════════════════════════════════ */
    .toast {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      padding: 1rem 2rem;
      background: var(--warm-brown);
      color: var(--cream);
      font-family: 'Lora', serif;
      font-size: 0.9rem;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      z-index: 9999;
      transform: translateY(100px);
      opacity: 0;
      transition: all 0.4s ease;
    }
    .toast.visible {
      transform: translateY(0);
      opacity: 1;
    }
    .toast.toast-success { border-left: 3px solid var(--sage); }
    .toast.toast-error { border-left: 3px solid var(--deep-wine); }

    /* ═══════════════════════════════════════════════════════════════
       ATMOSPHERE LAYER
       Grain, breathing light, scroll progress, drop caps, scroll cue,
       cursor spotlight, drawn ornaments, refined hover states.
    ═══════════════════════════════════════════════════════════════ */

    /* ── Film-grain warmth (fixed, full-viewport, behind content) ── */
    .atmos-grain {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      opacity: 0.55;
      mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.23  0 0 0 0 0.18  0 0 0 0 0.16  0 0 0 0.42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
      background-size: 220px 220px;
    }

    /* ── Slow-breathing ambient orb that drifts behind content ── */
    .atmos-breath {
      position: fixed;
      top: 50%;
      left: 50%;
      width: min(120vmin, 1400px);
      height: min(120vmin, 1400px);
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(circle at 50% 50%,
          rgba(212, 185, 106, 0.16) 0%,
          rgba(201, 160, 135, 0.08) 22%,
          rgba(184, 150, 62, 0.04) 42%,
          transparent 65%);
      filter: blur(40px);
      animation: orbBreathe 14s ease-in-out infinite;
      will-change: transform, opacity;
    }
    @keyframes orbBreathe {
      0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.95; }
      50%      { transform: translate(-48%, -52%) scale(1.06); opacity: 1;    }
    }
    @media (prefers-reduced-motion: reduce) {
      .atmos-breath { animation: none; }
    }

    /* Make sure real content sits above the atmosphere.
       Avoid touching nav (it must stay position: fixed). */
    main, section, footer { position: relative; z-index: 2; }
    nav { z-index: 1000; }
    .atmos-breath { z-index: 0; }
    .atmos-grain  { z-index: 3; }

    /* ── Scroll progress hairline ── */
    .scroll-progress {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 2px;
      background: transparent;
      z-index: 1100;
      pointer-events: none;
    }
    .scroll-progress::after {
      content: '';
      display: block;
      height: 100%;
      width: var(--scroll-progress, 0%);
      background: linear-gradient(90deg,
        rgba(184, 150, 62, 0.15),
        var(--gold) 40%,
        var(--gold-light) 70%,
        rgba(184, 150, 62, 0.25));
      box-shadow: 0 0 14px rgba(212, 185, 106, 0.55);
      transition: width 0.12s ease-out;
    }

    /* ── Hero scroll cue ── */
    .hero-scroll-cue {
      position: absolute;
      bottom: 2.2rem;
      left: 50%;
      transform: translateX(-50%);
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 0.65rem;
      font-family: 'Cinzel', serif;
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      color: var(--warm-brown);
      opacity: 0.55;
      text-decoration: none;
      animation: scrollCueFade 1.4s ease 1.6s both;
      transition: opacity var(--transition), transform var(--transition);
    }
    .hero-scroll-cue:hover { opacity: 1; transform: translate(-50%, 4px); }
    .hero-scroll-cue .cue-line {
      display: block;
      width: 1px;
      height: 56px;
      background: linear-gradient(180deg, var(--gold), transparent);
      position: relative;
      overflow: hidden;
    }
    .hero-scroll-cue .cue-line::after {
      content: '';
      position: absolute;
      top: -40%;
      left: 0;
      width: 100%;
      height: 40%;
      background: linear-gradient(180deg, transparent, var(--gold-light));
      animation: cueDrop 2.2s ease-in-out infinite;
    }
    @keyframes cueDrop {
      0%   { top: -40%; opacity: 0; }
      30%  { opacity: 1; }
      100% { top: 110%; opacity: 0; }
    }
    @keyframes scrollCueFade {
      from { opacity: 0; transform: translate(-50%, 12px); }
      to   { opacity: 0.55; transform: translate(-50%, 0); }
    }

    /* ── Editorial drop cap ──
       Italic Cormorant capitals have a generous ascender slot inside the
       em-box, which makes a naive drop cap look like it's sitting too low
       against the first line of body text. We tighten line-height, zero out
       top padding, and use a small negative top margin to lift the cap so
       its visual top aligns with the cap-height of the first text line. */
    .drop-cap::first-letter {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-style: italic;
      float: left;
      font-size: 3.8rem;
      line-height: 0.82;
      margin: -0.2rem 0.55rem -0.1rem 0;
      padding: 0;
      color: var(--deep-wine);
      background: linear-gradient(180deg, var(--deep-wine) 0%, var(--gold) 90%);
      -webkit-background-clip: text;
              background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    @media (max-width: 480px) {
      .drop-cap::first-letter {
        font-size: 3.2rem;
        margin: -0.15rem 0.45rem -0.1rem 0;
      }
    }

    /* ── Cursor spotlight on dark sections ── */
    /* Uses a dedicated child element so existing ::before/::after pseudos
       on the same hosts (e.g. corporate-highlight-inner inset border) are
       preserved untouched. Inject <span class="spotlight"></span> inside
       any .quote-section, .corporate-highlight-inner, or footer. */
    .quote-section, .corporate-highlight-inner, footer {
      --mx: 50%;
      --my: 50%;
    }
    .spotlight {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at var(--mx) var(--my),
        rgba(212, 185, 106, 0.20) 0%,
        rgba(212, 185, 106, 0.08) 20%,
        transparent 42%);
      opacity: 0;
      transition: opacity 0.7s ease;
      mix-blend-mode: screen;
      z-index: 1;
    }
    .quote-section:hover .spotlight,
    .corporate-highlight-inner:hover .spotlight,
    footer:hover .spotlight { opacity: 1; }
    .quote-section .container,
    .corporate-highlight-inner > *:not(.spotlight),
    footer .container { position: relative; z-index: 2; }

    /* ── Drawn-on-scroll section seams ── */
    .section-seam {
      display: block;
      position: relative;
      height: 60px;
      margin: 0;
      pointer-events: none;
    }
    .section-seam::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      transition: width 1.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .section-seam.visible::before { width: 280px; }
    .section-seam::after {
      content: '\2756';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.4);
      color: var(--gold);
      font-size: 0.95rem;
      opacity: 0;
      transition: opacity 1.6s ease 0.6s, transform 1.6s ease 0.6s;
    }
    .section-seam.visible::after {
      opacity: 0.8;
      transform: translate(-50%, -50%) scale(1);
    }

    /* ── Tactile lift on cards ── */
    .value-card,
    .corporate-card,
    .contact-card {
      transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.6s ease;
    }
    .value-card:hover,
    .corporate-card:hover,
    .contact-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 32px 60px -36px rgba(58, 45, 40, 0.32);
    }
    .contact-card:hover {
      border-color: rgba(184, 150, 62, 0.42);
    }

    /* ── Service block: subtle gold accent under poster on hover ── */
    .service-block .service-visual {
      transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .service-block:hover .service-visual {
      transform: translateY(-4px);
    }
    .service-link {
      position: relative;
      padding-right: 1.6rem;
    }
    .service-link::after {
      content: '\2192';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(0, -55%);
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
      color: var(--gold);
    }
    .service-link:hover::after {
      transform: translate(6px, -55%);
    }

    /* ── Hero overline gentle shimmer ── */
    .hero-overline {
      background: linear-gradient(90deg,
        var(--gold) 0%, var(--gold-light) 25%,
        var(--gold) 50%, var(--gold-light) 75%, var(--gold) 100%);
      background-size: 250% 100%;
      -webkit-background-clip: text;
              background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: fadeUp 1s ease 0.3s forwards, overlineShimmer 9s ease-in-out infinite 1.6s;
    }
    @keyframes overlineShimmer {
      0%, 100% { background-position: 0% 50%; }
      50%      { background-position: 100% 50%; }
    }

    /* ── Hero h1: italic em gets a soft sheen ── */
    .hero h1 em {
      background: linear-gradient(180deg, var(--deep-wine) 0%, #8a4848 100%);
      -webkit-background-clip: text;
              background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* ── Quote section: oversized opening quote with depth ── */
    .quote-mark {
      text-shadow: 0 8px 32px rgba(212, 185, 106, 0.18);
    }
    .quote-section { position: relative; isolation: isolate; }

    /* ── Footer warmth ── */
    footer { isolation: isolate; }
    footer::before {
      box-shadow: 0 0 30px rgba(184, 150, 62, 0.4);
    }

    /* ── Refined nav-cta on home (not active) ── */
    .nav-links .nav-cta:not(.active) {
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
    }

    /* ── Hairline gold underline that grows on link hover (philosophy/about body links) ── */
    .body-link {
      color: var(--deep-wine);
      text-decoration: none;
      background-image: linear-gradient(var(--gold), var(--gold));
      background-size: 0% 1px;
      background-position: 0 100%;
      background-repeat: no-repeat;
      transition: background-size 0.6s cubic-bezier(0.22, 1, 0.36, 1), color var(--transition);
      padding-bottom: 1px;
    }
    .body-link:hover {
      color: var(--gold);
      background-size: 100% 1px;
    }

    /* ── Soft pull-quote module (in-flow quote within sections) ── */
    .pull-quote {
      max-width: 720px;
      margin: 3rem auto;
      text-align: center;
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.3rem, 2.2vw, 1.7rem);
      font-style: italic;
      font-weight: 300;
      color: var(--warm-brown);
      line-height: 1.55;
      position: relative;
      padding: 1.5rem 1rem;
    }
    .pull-quote::before, .pull-quote::after {
      content: '';
      display: block;
      width: 36px;
      height: 1px;
      margin: 1.2rem auto;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }

    /* ── Booking-style sticky-bottom CTA: shared utility ── */
    .micro-line {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      font-family: 'Cinzel', serif;
      font-size: 0.66rem;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      color: var(--gold);
    }
    .micro-line::before, .micro-line::after {
      content: '';
      width: 24px;
      height: 1px;
      background: var(--gold);
      opacity: 0.6;
    }

    /* ── Service block image: subtle warm halo ── */
    .service-poster {
      box-shadow:
        0 0 0 1px rgba(184, 150, 62, 0.16),
        0 18px 50px -22px rgba(58, 45, 40, 0.28);
      transition: box-shadow 0.7s ease;
    }
    .service-block:hover .service-poster {
      box-shadow:
        0 0 0 1px rgba(184, 150, 62, 0.32),
        0 28px 70px -22px rgba(58, 45, 40, 0.38);
    }

    /* ── Hero halo accent (animated, behind text) ── */
    .hero-halo {
      position: absolute;
      top: 36%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 720px;
      height: 720px;
      max-width: 92vw;
      max-height: 92vw;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 50%,
          rgba(212, 185, 106, 0.18) 0%,
          rgba(201, 160, 135, 0.10) 35%,
          transparent 65%);
      filter: blur(16px);
      pointer-events: none;
      z-index: 1;
      animation: heroHalo 12s ease-in-out infinite;
    }
    @keyframes heroHalo {
      0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
      50%      { opacity: 1;    transform: translate(-50%, -52%) scale(1.07); }
    }

    /* ── Voice line: small italic line that whispers under headers ── */
    .voice-line {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.12rem;
      color: var(--rose-text);
      opacity: 0.95;
      max-width: 540px;
      margin: 0 auto 2rem;
    }

    /* ── Ornament symbol (used inline) ── */
    .ornament-symbol {
      display: inline-block;
      color: var(--gold);
      opacity: 0.7;
      transform: translateY(-1px);
      margin: 0 0.4rem;
    }

    /* ═══════════════════════════════════════════
       HERO DIPTYCH (split layout with photograph)
    ═══════════════════════════════════════════ */
    .hero-content--split {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      align-items: center;
      gap: 4rem;
      max-width: 1240px;
      width: 100%;
      text-align: left;
      padding: 1.5rem 1.5rem;
    }
    .hero-content--split .hero-overline,
    .hero-content--split .hero-actions {
      justify-content: flex-start;
    }
    .hero-content--split .hero-actions {
      display: flex;
      flex-wrap: wrap;
    }
    .hero-content--split h1 {
      font-size: clamp(2.6rem, 5.4vw, 4.6rem);
      max-width: 16ch;
    }
    .hero-content--split .hero-subtitle {
      max-width: 38ch;
    }

    /* Photograph frame */
    .hero-figure {
      position: relative;
      margin: 0;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      isolation: isolate;
      box-shadow:
        0 0 0 1px rgba(184, 150, 62, 0.35),
        0 40px 90px -40px rgba(58, 45, 40, 0.45),
        0 8px 30px -18px rgba(58, 45, 40, 0.35);
      background: var(--cream-dark);
      animation: figureRise 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
    }
    .hero-figure img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 55% 50%;
      transform: scale(1.06);
      animation: heroKenBurns 22s ease-in-out infinite alternate;
      filter: saturate(1.04) contrast(1.02);
    }
    .hero-figure::before {
      content: '';
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(255, 244, 220, 0.55);
      pointer-events: none;
      z-index: 2;
      mix-blend-mode: overlay;
    }
    .hero-figure::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      background:
        radial-gradient(ellipse at 50% 35%, transparent 0%, transparent 55%, rgba(58, 45, 40, 0.18) 100%),
        linear-gradient(180deg, rgba(184, 150, 62, 0.05) 0%, transparent 30%, transparent 70%, rgba(107, 58, 58, 0.10) 100%);
    }
    @keyframes heroKenBurns {
      0%   { transform: scale(1.06) translate(0%, 0%); }
      100% { transform: scale(1.12) translate(-1.5%, -1%); }
    }
    @keyframes figureRise {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-figure img { animation: none; transform: none; }
      .hero-figure { animation: none; }
    }

    /* Mobile: stack photo above text, slightly smaller. */
    @media (max-width: 968px) {
      .hero-content--split {
        grid-template-columns: 1fr;
        gap: 2.4rem;
        text-align: center;
        max-width: 720px;
      }
      .hero-content--split .hero-overline,
      .hero-content--split .hero-actions {
        justify-content: center;
      }
      .hero-content--split h1,
      .hero-content--split .hero-subtitle {
        max-width: 100%;
      }
      .hero-figure {
        order: -1;
        aspect-ratio: 5 / 4;
        max-width: 540px;
        margin: 0 auto;
        width: 100%;
      }
    }

    /* ═══════════════════════════════════════════
       CORPORATE HIGHLIGHT — photo + dark copy duet
    ═══════════════════════════════════════════ */
    .corporate-highlight-inner.has-figure {
      padding: 0;
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      align-items: stretch;
      overflow: hidden;
    }
    .corporate-highlight-figure {
      position: relative;
      margin: 0;
      min-height: 360px;
      overflow: hidden;
    }
    .corporate-highlight-figure img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 40%;
      transform: scale(1.04);
      animation: heroKenBurns 28s ease-in-out infinite alternate;
      filter: saturate(1.05) contrast(1.02);
    }
    .corporate-highlight-figure::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, transparent 0%, transparent 78%, var(--warm-brown) 100%),
        linear-gradient(180deg, rgba(58, 45, 40, 0.10) 0%, transparent 30%, transparent 70%, rgba(58, 45, 40, 0.20) 100%);
    }
    .corporate-highlight-copy {
      position: relative;
      padding: 3.5rem 3rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .corporate-highlight-copy::after {
      content: '';
      position: absolute;
      inset: 12px;
      border: 1px solid rgba(184, 150, 62, 0.18);
      pointer-events: none;
    }
    /* When duet is in use, suppress the original full-panel inset border */
    .corporate-highlight-inner.has-figure::after { display: none; }

    @media (max-width: 880px) {
      .corporate-highlight-inner.has-figure {
        grid-template-columns: 1fr;
      }
      .corporate-highlight-figure {
        min-height: 0;
        aspect-ratio: 16 / 10;
      }
      .corporate-highlight-figure::after {
        background:
          linear-gradient(180deg, transparent 0%, transparent 78%, var(--warm-brown) 100%);
      }
      .corporate-highlight-copy {
        padding: 2.5rem 1.5rem;
      }
    }

    /* ── Mobile polish for atmosphere ── */
    @media (max-width: 768px) {
      .atmos-grain { opacity: 0.4; }
      .hero-scroll-cue { bottom: 1.2rem; }
      .hero-halo { width: 520px; height: 520px; }
    }
    @media (max-width: 480px) {
      .hero-scroll-cue { display: none; }
    }