:root {
    --bg: #F5EFE4;
    --bg-warm: #EDE3D2;
    --bg-deep: #1F2A24;
    --fg: #1F2A24;
    --fg-soft: #2D3A33;
    --muted: #6B6258;
    --accent: #7A9471;
    --accent-deep: #4F6B47;
    --accent-warm: #C97B5A;
    --gold: #D4A574;
    --card: #FBF7EF;
    --border: rgba(31, 42, 36, 0.1);
  }
  
  * { -webkit-font-smoothing: antialiased; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Manrope', sans-serif;
    background-color: var(--bg);
    color: var(--fg);
    overflow-x: hidden;
  }
  .font-display { font-family: 'Fraunces', serif; }
  
  /* Hero ambient background */
  .hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
  .blob {
    position: absolute; border-radius: 50%; filter: blur(80px);
    opacity: 0.55; animation: float 22s ease-in-out infinite;
  }
  .blob-1 { background-color: var(--accent); width: 520px; height: 520px; top: -120px; left: -120px; }
  .blob-2 { background-color: var(--gold); width: 420px; height: 420px; top: 25%; right: -120px; animation-delay: -8s; }
  .blob-3 { background-color: var(--accent-warm); width: 340px; height: 340px; bottom: -120px; left: 35%; animation-delay: -15s; opacity: 0.35; }
  @keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -30px) scale(1.08); }
    66% { transform: translate(-25px, 25px) scale(0.95); }
  }
  
  /* Breathing circle */
  .breath-wrap { position: relative; width: 100%; aspect-ratio: 1; max-width: 460px; margin: 0 auto; }
  .breath-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(122, 148, 113, 0.25); }
  .breath-ring-2 { inset: 32px; border-color: rgba(122, 148, 113, 0.18); }
  .breath-ring-3 { inset: 64px; border-color: rgba(122, 148, 113, 0.12); }
  .breath-orbit { position: absolute; inset: 0; animation: spin 30s linear infinite; }
  .breath-orbit-dot {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 8px; height: 8px; border-radius: 50%; background-color: var(--gold);
    box-shadow: 0 0 20px rgba(212, 165, 116, 0.6);
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  
  .breath-circle {
    position: absolute; inset: 92px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(122,148,113,0.7), rgba(79,107,71,0.35) 60%, rgba(79,107,71,0.15));
    box-shadow: 0 30px 80px rgba(79, 107, 71, 0.35), inset 0 0 60px rgba(255,255,255,0.15);
    animation: breathe 8s ease-in-out infinite;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    color: white; text-align: center;
  }
  @keyframes breathe {
    0%, 100% { transform: scale(0.82); }
    50% { transform: scale(1.08); }
  }
  .breath-text {
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 1.5rem; opacity: 0.95; transition: opacity 0.5s;
  }
  .breath-sub {
    font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase;
    opacity: 0.7; margin-top: 0.5rem;
  }
  
  /* Floating leaves */
  .leaf { position: absolute; animation: drift 18s linear infinite; pointer-events: none; }
  @keyframes drift {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 0.4; }
    90% { opacity: 0.4; }
    100% { transform: translateY(-120px) rotate(360deg); opacity: 0; }
  }
  
  /* Scroll reveal */
  .reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s ease, transform 0.9s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  
  /* Service card */
  .service-card {
    background-color: var(--card); border: 1px solid var(--border);
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
  }
  .service-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    transform: scaleX(0); transform-origin: left; transition: transform 0.45s ease;
  }
  .service-card:hover {
    transform: translateY(-8px); box-shadow: 0 24px 60px rgba(31, 42, 36, 0.1);
    border-color: rgba(122, 148, 113, 0.35);
  }
  .service-card:hover::before { transform: scaleX(1); }
  .service-icon { transition: transform 0.45s ease; }
  .service-card:hover .service-icon { transform: rotate(-8deg) scale(1.08); }
  
  /* Buttons */
  .btn-primary {
    background-color: var(--bg-deep); color: var(--bg);
    padding: 14px 32px; border-radius: 100px; font-weight: 600;
    transition: all 0.3s; position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .btn-primary::before {
    content: ''; position: absolute; inset: 0; background-color: var(--accent-deep);
    transform: translateX(-100%); transition: transform 0.45s;
  }
  .btn-primary:hover::before { transform: translateX(0); }
  .btn-primary > * { position: relative; z-index: 1; }
  
  .btn-ghost {
    border: 1px solid var(--fg); color: var(--fg);
    padding: 14px 32px; border-radius: 100px; font-weight: 600;
    transition: all 0.3s; display: inline-flex; align-items: center; gap: 10px;
  }
  .btn-ghost:hover { background-color: var(--fg); color: var(--bg); }
  
  .btn-gold {
    background-color: var(--gold); color: var(--bg-deep);
    padding: 14px 32px; border-radius: 100px; font-weight: 700;
    transition: all 0.3s; display: inline-flex; align-items: center; gap: 10px;
  }
  .btn-gold:hover { background-color: var(--accent-warm); color: white; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201, 123, 90, 0.4); }
  
  /* Step line */
  .step-line {
    position: absolute; top: 40px; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
    z-index: 0;
  }
  .step-line::after {
    content: ''; position: absolute; top: -2px; left: 0; height: 5px; width: 5px;
    background-color: var(--gold); border-radius: 50%; box-shadow: 0 0 12px var(--gold);
    animation: travel 8s ease-in-out infinite;
  }
  @keyframes travel {
    0%, 100% { left: 5%; }
    50% { left: 95%; }
  }
  
  /* Scroll progress */
  .scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    z-index: 100; transition: width 0.1s;
  }
  
  /* Stat */
  .stat-num {
    font-family: 'Fraunces', serif; font-size: 4.5rem; font-weight: 300;
    line-height: 1; color: var(--gold);
  }
  
  /* Marquee */
  .marquee { overflow: hidden; white-space: nowrap; }
  .marquee-track { display: inline-block; animation: marquee 35s linear infinite; }
  @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
  
  /* Nav */
  .nav-blur {
    backdrop-filter: blur(20px); background-color: rgba(245, 239, 228, 0.82);
    border-bottom: 1px solid var(--border);
  }
  .nav-link { position: relative; transition: color 0.3s; }
  .nav-link::after {
    content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 1px;
    background-color: var(--fg); transition: width 0.3s;
  }
  .nav-link:hover::after { width: 100%; }
  
  /* Testimonial */
  .testimonial-card {
    background-color: var(--card); border: 1px solid var(--border);
    transition: all 0.4s ease;
  }
  .testimonial-card:hover {
    border-color: var(--accent); transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(31, 42, 36, 0.08);
  }
  .quote-mark {
    font-family: 'Fraunces', serif; font-size: 5.5rem; line-height: 0.6;
    color: var(--accent); opacity: 0.35;
  }
  
  /* Eyebrow */
  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--accent-deep); font-weight: 600;
  }
  .eyebrow::before {
    content: ''; width: 28px; height: 1px; background-color: var(--accent-deep);
  }
  
  /* Image frame */
  .image-frame { position: relative; border-radius: 10px; overflow: hidden; }
  .image-frame::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(122,148,113,0.25), transparent 60%);
    z-index: 1; pointer-events: none;
  }
  
  /* Dots */
  .dots {
    background-image: radial-gradient(circle, var(--accent) 1px, transparent 1px);
    background-size: 20px 20px; opacity: 0.25;
  }
  
  /* Mobile menu */
  .mobile-menu { transform: translateX(100%); transition: transform 0.4s; }
  .mobile-menu.open { transform: translateX(0); }
  
  /* Map */
  .map-frame {
    filter: sepia(0.15) saturate(0.85) hue-rotate(-10deg);
    transition: filter 0.4s;
  }
  .map-frame:hover { filter: sepia(0) saturate(1); }
  
  /* Marionette section */
  .marionette-stage {
    position: relative; width: 100%; aspect-ratio: 1;
    max-width: 500px; margin: 0 auto;
  }
  .marionette-crossbar {
    position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
    width: 60%; height: 4px; background-color: var(--bg-deep); border-radius: 2px;
  }
  .marionette-crossbar::before, .marionette-crossbar::after {
    content: ''; position: absolute; top: -3px; width: 10px; height: 10px;
    border-radius: 50%; background-color: var(--gold);
  }
  .marionette-crossbar::before { left: -5px; }
  .marionette-crossbar::after { right: -5px; }
  
  .marionette-figure {
    position: absolute; top: 22%; left: 50%; transform: translateX(-50%);
    width: 50%; animation: marionette-sway 4s ease-in-out infinite;
  }
  @keyframes marionette-sway {
    0%, 100% { transform: translateX(-50%) rotate(-2deg); }
    50% { transform: translateX(-50%) rotate(2deg); }
  }
  
  .phone-screen-glow {
    animation: phone-pulse 3s ease-in-out infinite;
  }
  @keyframes phone-pulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(201, 123, 90, 0.4)); }
    50% { filter: drop-shadow(0 0 20px rgba(201, 123, 90, 0.7)); }
  }
  
  .breaking-strings {
    animation: break-free 6s ease-in-out infinite;
  }
  @keyframes break-free {
    0%, 70% { opacity: 0.3; }
    85% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 0.3; transform: translateY(0); }
  }
  
  /* Team member card */
  .team-member-card {
    background: linear-gradient(135deg, var(--card) 0%, var(--bg-warm) 100%);
    border: 1px solid var(--border);
    position: relative; overflow: hidden;
  }
  .team-member-card::before {
    content: ''; position: absolute; top: -50%; right: -50%;
    width: 100%; height: 100%; border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 165, 116, 0.15), transparent 70%);
  }
  
  /* Photo frame for team member */
  .photo-frame-wrap {
    position: relative; width: 18rem; height: 18rem; margin: 0 auto 1.5rem;
  }
  .photo-frame {
    position: absolute; inset: 10px; border-radius: 50%; overflow: hidden;
    border: 5px solid var(--gold);
    box-shadow: 0 0 0 8px rgba(31, 42, 36, 0.15), 0 25px 60px rgba(0,0,0,0.4);
    background-color: #1F2A24;
    z-index: 2;
  }
  .photo-frame img {
    width: 100%; height: 100%; object-fit: cover; object-position: center top;
    image-rendering: -webkit-optimize-contrast;
  }
  
  /* Pulse rings around photo */
  .pulse-ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--gold); opacity: 0;
    animation: pulse-ring 3s ease-out infinite;
    z-index: 1;
  }
  .pulse-ring:nth-child(2) { animation-delay: 1s; }
  .pulse-ring:nth-child(3) { animation-delay: 2s; }
  @keyframes pulse-ring {
    0% { transform: scale(0.95); opacity: 0.6; }
    100% { transform: scale(1.3); opacity: 0; }
  }
  
  /* Orbiting dot around photo */
  .photo-orbit {
    position: absolute; inset: 0; animation: spin 20s linear infinite;
    pointer-events: none;
    z-index: 3;
  }
  .photo-orbit-dot {
    position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
    width: 16px; height: 16px; border-radius: 50%; background-color: var(--gold);
    box-shadow: 0 0 20px var(--gold), 0 0 40px rgba(212, 165, 116, 0.4);
  }
  
  .credential-badge {
    background: linear-gradient(135deg, var(--accent-deep), var(--accent));
    color: white; padding: 6px 16px; border-radius: 100px;
    font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
    font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
  }
  
  .floating-phone-btn {
    position: fixed; bottom: 24px; right: 24px; z-index: 60;
    background-color: var(--gold); color: var(--bg-deep);
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; box-shadow: 0 8px 30px rgba(212, 165, 116, 0.5);
    transition: all 0.3s; animation: phone-bounce 2s ease-in-out infinite;
  }
  .floating-phone-btn:hover {
    transform: scale(1.1); background-color: var(--accent-warm); color: white;
  }
  @keyframes phone-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* =====================================================
     Additions for the multi-page PHP build
     ===================================================== */

  /* Active navigation state */
  .nav-link.active { color: var(--accent-deep); font-weight: 600; }
  .nav-link.active::after { width: 100%; }
  .mobile-link.active { color: var(--accent-deep); font-style: italic; }

  /* Inner-page hero band */
  .page-hero {
    position: relative;
    padding: 9rem 0 4.5rem;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%);
    overflow: hidden;
  }
  .page-hero .blob { opacity: 0.35; }

  /* Breadcrumbs */
  .crumbs { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); }
  .crumbs a { transition: color 0.25s; }
  .crumbs a:hover { color: var(--accent-deep); }

  /* Forms */
  .field-label {
    display: block; font-size: 0.7rem; letter-spacing: 0.22em;
    text-transform: uppercase; margin-bottom: 0.6rem; opacity: 0.65;
  }
  .field {
    width: 100%; padding: 0.9rem 1.1rem; border-radius: 12px;
    background-color: rgba(245, 239, 228, 0.06);
    border: 1px solid rgba(245, 239, 228, 0.18);
    color: inherit; font-family: inherit; font-size: 0.95rem;
    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  }
  .field::placeholder { color: rgba(245, 239, 228, 0.35); }
  .field:focus {
    outline: none; border-color: var(--gold);
    background-color: rgba(245, 239, 228, 0.1);
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.15);
  }
  .field.has-error { border-color: #e07a5f; }
  .field-error { font-size: 0.75rem; color: #f0a58c; margin-top: 0.4rem; }
  .hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

  /* Alerts */
  .alert {
    display: flex; gap: 0.85rem; align-items: flex-start;
    padding: 1.1rem 1.3rem; border-radius: 14px; font-size: 0.9rem;
    line-height: 1.6; margin-bottom: 2rem; text-align: left;
  }
  .alert-success { background-color: rgba(122, 148, 113, 0.18); border: 1px solid rgba(122, 148, 113, 0.45); }
  .alert-error   { background-color: rgba(201, 123, 90, 0.15);  border: 1px solid rgba(201, 123, 90, 0.45); }

  /* Floating WhatsApp button (sits above the phone button) */
  .floating-wa-btn {
    position: fixed; right: 24px; bottom: 96px; z-index: 60;
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background-color: #25D366; color: #fff; font-size: 1.35rem;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .floating-wa-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 38px rgba(37, 211, 102, 0.5); }

  /* Skip link for keyboard users */
  .skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background-color: var(--bg-deep); color: var(--bg);
    padding: 0.85rem 1.4rem; border-radius: 0 0 10px 0;
  }
  .skip-link:focus { left: 0; }

  @media (max-width: 640px) {
    .page-hero { padding: 7.5rem 0 3rem; }
    .floating-wa-btn { right: 18px; bottom: 88px; width: 48px; height: 48px; font-size: 1.15rem; }
  }


  /* =====================================================
     Tailwind arbitrary-value opacity fallbacks

     Tailwind cannot apply an alpha channel to a var() that
     holds a hex value, so classes such as text-[var(--bg)]/80
     generate NO CSS at all. The rules below supply the exact
     equivalents. Without them the footer renders as dark text
     on an identical dark background and appears to be missing.

     Generated from the palette in :root above — keep the two
     in sync if a colour value changes.
     ===================================================== */

  .bg-\[var\(--accent\)\]\/10 { background-color: rgba(122, 148, 113, 0.1); }
  .bg-\[var\(--accent\)\]\/12 { background-color: rgba(122, 148, 113, 0.12); }
  .bg-\[var\(--accent\)\]\/15 { background-color: rgba(122, 148, 113, 0.15); }
  .bg-\[var\(--accent\)\]\/25 { background-color: rgba(122, 148, 113, 0.25); }
  .bg-\[var\(--accent-warm\)\]\/12 { background-color: rgba(201, 123, 90, 0.12); }
  .bg-\[var\(--accent-warm\)\]\/15 { background-color: rgba(201, 123, 90, 0.15); }
  .bg-\[var\(--bg\)\]\/5 { background-color: rgba(245, 239, 228, 0.05); }
  .bg-\[var\(--bg\)\]\/10 { background-color: rgba(245, 239, 228, 0.1); }
  .bg-\[var\(--card\)\]\/95 { background-color: rgba(251, 247, 239, 0.95); }
  .bg-\[var\(--gold\)\]\/10 { background-color: rgba(212, 165, 116, 0.1); }
  .bg-\[var\(--gold\)\]\/15 { background-color: rgba(212, 165, 116, 0.15); }
  .bg-\[var\(--gold\)\]\/20 { background-color: rgba(212, 165, 116, 0.2); }
  .bg-\[var\(--gold\)\]\/25 { background-color: rgba(212, 165, 116, 0.25); }
  .border-\[var\(--bg\)\]\/10 { border-color: rgba(245, 239, 228, 0.1); }
  .text-\[var\(--bg\)\]\/40 { color: rgba(245, 239, 228, 0.4); }
  .text-\[var\(--bg\)\]\/50 { color: rgba(245, 239, 228, 0.5); }
  .text-\[var\(--bg\)\]\/60 { color: rgba(245, 239, 228, 0.6); }
  .text-\[var\(--bg\)\]\/70 { color: rgba(245, 239, 228, 0.7); }
  .text-\[var\(--bg\)\]\/80 { color: rgba(245, 239, 228, 0.8); }
  .text-\[var\(--bg\)\]\/90 { color: rgba(245, 239, 228, 0.9); }

  /* Footer shell — self-contained, no Tailwind dependency. */
  .site-footer {
    background-color: #1F2A24; /* var(--bg-deep) — literal so it resolves everywhere */
    color: rgba(245, 239, 228, 0.8);
    border-top: 1px solid rgba(245, 239, 228, 0.1);
  }
  .site-footer a { color: inherit; }
  .site-footer a:hover { color: #FFFFFF; }