@font-face{font-family:"Cinzel";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/cinzel-latin.woff2") format("woff2")}@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:300 700;font-display:swap;src:url("/assets/fonts/source-sans-3-latin.woff2") format("woff2")}

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

      /* ─── DESIGN TOKENS ─── */
      :root {
        --teal: #2b6a52;
        --teal-dark: #1d5c45;
        --teal-deep: #133f30;
        --teal-light: #e4ece1;
        --sage: #8ea788;
        --charcoal: #163c2f;
        --warm-white: #f6f3ea;
        --white: #ffffff;
        --text-dark: #163c2f;
        --text-mid: #4f675b;
        --text-light: #6f8478;
        --border: #d5ddd2;
        --bg-light: #eef3e9;
        --max-w: 1040px;
        --gold: #c5a86a;

        /* Gradients */
        --grad-teal: linear-gradient(135deg, #2b6a52 0%, #1d5c45 100%);
        --grad-accent: linear-gradient(135deg, #2b6a52 0%, #8ea788 100%);

        /* Shadows */
        --shadow-sm: 0 1px 6px rgba(22, 60, 47, 0.08);
        --shadow-md: 0 6px 18px rgba(22, 60, 47, 0.11);
        --shadow-lg: 0 10px 34px rgba(22, 60, 47, 0.15);
        --shadow-xl: 0 18px 52px rgba(22, 60, 47, 0.2);
        --shadow-teal: 0 8px 28px rgba(29, 92, 69, 0.3);

        /* Radii */
        --r-sm: 8px;
        --r-md: 14px;
        --r-lg: 20px;
        --r-pill: 100px;

        /* Motion */
        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

        /* Grain texture */
        --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

        --font-serif: "Cinzel", Georgia, serif;
        --font-sans: "Source Sans 3", system-ui, sans-serif;
      }

      body {
        font-family: var(--font-sans);
        color: var(--text-dark);
        background:
          radial-gradient(circle at top right, rgba(142, 167, 136, 0.18), transparent 42%),
          radial-gradient(circle at bottom left, rgba(197, 168, 106, 0.14), transparent 36%), var(--warm-white);
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }

      /* ─── NAVIGATION ─── */
      header {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(220, 232, 232, 0.5);
        position: sticky;
        top: 0;
        z-index: 1000;
        transition: all 0.3s var(--ease-out);
      }
      header.scrolled {
        padding: 4px 0;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: var(--shadow-md);
      }
      .nav-inner {
        max-width: var(--max-w);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px 28px;
        gap: 24px;
      }
      .logo {
        display: flex;
        align-items: center;
        gap: 16px;
        text-decoration: none;
        cursor: pointer;
        transition: transform 0.2s var(--ease-out);
      }
      .logo:hover {
        transform: scale(1.02);
      }
      .logo img {
        height: auto;
        width: auto;
        max-height: 72px;
        max-width: 240px;
        border-radius: 8px;
        object-fit: contain;
        display: block;
      }
      nav {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      nav a,
      .dropdown > span {
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--text-mid);
        text-decoration: none;
        padding: 10px 16px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.25s var(--ease-out);
        position: relative;
      }
      nav a:hover,
      .dropdown > span:hover {
        color: var(--teal-dark);
        background: rgba(74, 140, 140, 0.08);
      }
      nav a.active {
        color: var(--white);
        background: var(--grad-teal);
        box-shadow: 0 4px 14px rgba(74, 140, 140, 0.28);
      }
      .dropdown {
        position: relative;
      }
      .dropdown > span {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .dropdown > span::after {
        content: "→";
        font-size: 10px;
        opacity: 0.5;
        transform: rotate(90deg);
        transition: transform 0.3s;
      }
      .dropdown:hover > span::after {
        transform: rotate(270deg);
      }

      .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        padding-top: 12px;
        min-width: 220px;
        z-index: 200;
        animation: navFadeUp 0.3s var(--ease-out);
      }
      @keyframes navFadeUp {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .dropdown-menu-inner {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: var(--shadow-lg);
        overflow: hidden;
        padding: 8px;
      }
      .dropdown:hover .dropdown-menu {
        display: block;
      }
      .dropdown-menu a {
        display: block;
        padding: 12px 16px;
        font-size: 13px;
        border-radius: 8px;
        color: var(--text-mid);
        text-transform: none;
        letter-spacing: 0;
      }
      .dropdown-menu a:hover {
        background: var(--teal-light);
        color: var(--teal-dark);
      }

      .hamburger {
        display: none;
        background: rgba(74, 140, 140, 0.1);
        border: none;
        cursor: pointer;
        padding: 10px;
        border-radius: 10px;
      }
      .hamburger span {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--teal-dark);
        margin: 4px 0;
        transition: all 0.3s var(--ease-out);
      }
      .hamburger.open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
      }
      .hamburger.open span:nth-child(2) {
        opacity: 0;
        transform: scale(0);
      }
      .hamburger.open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
      }

      /* ─── PAGES ─── */
      .page {
        display: none;
      }
      .page.active {
        display: block;
        animation: pageFadeUp 0.52s var(--ease-out) both;
      }
      @keyframes pageFadeUp {
        from {
          opacity: 0;
          transform: translateY(18px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* ─── HERO ─── */
      .hero {
        display: grid;
        grid-template-columns: 55% 45%;
        min-height: clamp(580px, 72vh, 720px);
        background: var(--charcoal);
      }
      .hero-left {
        background: linear-gradient(140deg, #1a2e2e 0%, #1e4f4f 55%, #2d6a6a 100%);
        background-size: 220% 220%;
        animation: heroGradShift 14s ease infinite;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: clamp(40px, 6vw, 88px) clamp(32px, 5vw, 72px);
        position: relative;
        overflow: hidden;
      }
      /* Grain overlay on hero */
      .hero-left::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--grain);
        opacity: 0.038;
        pointer-events: none;
      }
      .hero-left > * {
        position: relative;
        z-index: 1;
      }
      @keyframes heroGradShift {
        0%,
        100% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
      }
      /* Hero text entrance — fires on page load and on nav back to home */
      @keyframes heroReveal {
        from {
          opacity: 0;
          transform: translateY(22px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .hero-eyebrow {
        font-family: var(--font-sans);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--sage);
        margin-bottom: 20px;
        animation: heroReveal 0.7s var(--ease-out) 0.05s both;
      }
      .hero-left h1 {
        font-family: var(--font-serif);
        font-size: clamp(2.1rem, 3.6vw, 3.4rem);
        font-weight: 300;
        line-height: 1.15;
        color: var(--white);
        margin-bottom: 18px;
        animation: heroReveal 0.8s var(--ease-out) 0.18s both;
      }
      .hero-left h2 {
        font-family: var(--font-serif);
        font-size: clamp(0.95rem, 1.3vw, 1.1rem);
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.68);
        margin-bottom: 22px;
        line-height: 1.5;
        animation: heroReveal 0.8s var(--ease-out) 0.32s both;
      }
      .hero-left p {
        font-size: 0.94rem;
        color: rgba(255, 255, 255, 0.62);
        max-width: 440px;
        line-height: 1.8;
        margin-bottom: 38px;
        animation: heroReveal 0.8s var(--ease-out) 0.46s both;
      }
      .hero-left .btn-primary {
        animation: heroReveal 0.8s var(--ease-out) 0.6s both;
      }
      .hero-left .btn-ghost {
        animation: heroReveal 0.8s var(--ease-out) 0.72s both;
      }
      .btn-ghost {
        display: inline-block;
        background: transparent;
        color: rgba(255, 255, 255, 0.88);
        font-family: var(--font-sans);
        font-size: 13.5px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 14px 30px;
        border-radius: var(--r-pill);
        border: 1.5px solid rgba(255, 255, 255, 0.38);
        cursor: pointer;
        transition:
          transform 200ms var(--ease-out),
          background 200ms var(--ease-out),
          border-color 200ms var(--ease-out);
        align-self: flex-start;
      }
      .btn-ghost:hover {
        transform: translateY(-3px);
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.58);
      }
      .btn-primary {
        display: inline-block;
        background: var(--grad-teal);
        color: var(--white);
        font-family: var(--font-sans);
        font-size: 13.5px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 14px 32px;
        border-radius: var(--r-pill);
        cursor: pointer;
        border: none;
        position: relative;
        overflow: hidden;
        transition:
          transform 200ms var(--ease-out),
          box-shadow 200ms var(--ease-out);
        align-self: flex-start;
        box-shadow: 0 4px 14px rgba(45, 106, 106, 0.3);
      }
      /* Shimmer sweep */
      .btn-primary::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 65%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
        transition: left 0.55s var(--ease-out);
        pointer-events: none;
      }
      .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-teal);
      }
      .btn-primary:hover::after {
        left: 150%;
      }
      .btn-primary:active {
        transform: translateY(-1px);
      }
      .hero-right {
        position: relative;
        overflow: hidden;
      }
      .hero-right img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        opacity: 0.88;
        animation: kenBurns 18s ease-in-out infinite alternate;
      }
      @keyframes kenBurns {
        from {
          transform: scale(1);
        }
        to {
          transform: scale(1.06);
        }
      }
      .hero-right::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(30, 79, 79, 0.25) 0%, transparent 60%);
        pointer-events: none;
      }
      .hero-right-label {
        position: absolute;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: var(--r-md);
        padding: 18px 36px;
        text-align: center;
        white-space: nowrap;
        z-index: 2;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        animation: heroReveal 0.9s var(--ease-out) 0.3s both;
      }
      .hero-right-label span {
        display: block;
        font-family: var(--font-serif);
        font-size: clamp(1.1rem, 1.6vw, 1.55rem);
        font-weight: 300;
        letter-spacing: 0.06em;
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
      }
      .hero-right-label em {
        display: block;
        font-family: var(--font-sans);
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.65);
        margin-top: 5px;
        font-style: normal;
      }

      /* ─── TRUST BAR ─── */
      .trust-bar {
        background: var(--white);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 2px 8px rgba(26, 46, 46, 0.05);
      }
      .trust-bar-inner {
        max-width: var(--max-w);
        margin: 0 auto;
        padding: 20px 28px;
        display: flex;
        align-items: center;
        gap: 0;
        flex-wrap: wrap;
      }
      .trust-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 28px 10px 0;
        margin-right: 28px;
        position: relative;
      }
      .trust-item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 20%;
        height: 60%;
        width: 1px;
        background: var(--border);
      }
      .trust-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--teal);
        flex-shrink: 0;
        box-shadow:
          0 0 0 3px rgba(74, 140, 140, 0.18),
          0 0 10px rgba(74, 140, 140, 0.35);
        animation: trustGlow 2.8s ease-in-out infinite;
      }
      @keyframes trustGlow {
        0%,
        100% {
          box-shadow:
            0 0 0 3px rgba(74, 140, 140, 0.18),
            0 0 10px rgba(74, 140, 140, 0.35);
        }
        50% {
          box-shadow:
            0 0 0 5px rgba(74, 140, 140, 0.1),
            0 0 18px rgba(74, 140, 140, 0.5);
        }
      }
      .trust-label {
        font-size: 12.5px;
        font-weight: 500;
        color: var(--text-mid);
        line-height: 1.35;
      }
      .trust-label strong {
        display: block;
        font-size: 13.5px;
        color: var(--text-dark);
        font-weight: 600;
      }

      /* ─── CONTENT WRAP ─── */
      .content-wrap {
        max-width: var(--max-w);
        margin: 0 auto;
        padding: 64px 28px;
      }
      .section-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--teal-light);
        color: var(--teal-dark);
        border: 1px solid rgba(74, 140, 140, 0.22);
        border-radius: var(--r-pill);
        padding: 5px 14px;
        font-family: var(--font-sans);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        margin-bottom: 16px;
      }
      .section-label::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--teal);
        flex-shrink: 0;
      }
      .content-wrap h1 {
        font-family: var(--font-serif);
        font-size: clamp(1.9rem, 2.8vw, 2.7rem);
        font-weight: 400;
        color: var(--text-dark);
        margin-bottom: 8px;
        line-height: 1.15;
      }
      .page-intro {
        font-size: 1rem;
        color: var(--text-mid);
        max-width: 680px;
        margin-bottom: 44px;
        line-height: 1.8;
      }
      .section-divider {
        height: 2px;
        width: 56px;
        background: var(--grad-accent);
        margin: 14px 0 36px;
        border-radius: 2px;
      }

      /* ─── OUR APPROACH CARDS ─── */
      .approach-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-bottom: 60px;
      }
      .approach-card {
        background: var(--white);
        border-radius: var(--r-md);
        padding: 32px 28px 28px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border);
        position: relative;
        overflow: hidden;
        transition:
          transform 280ms var(--ease-out),
          box-shadow 280ms var(--ease-out),
          border-color 280ms;
      }
      /* Gradient top bar revealed on hover */
      .approach-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--grad-accent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s var(--ease-out);
      }
      .approach-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
        border-color: rgba(74, 140, 140, 0.3);
      }
      .approach-card:hover::before {
        transform: scaleX(1);
      }
      /* Stagger entrance when home page loads */
      #page-home.active .approach-card:nth-child(1) {
        animation: cardFadeUp 0.6s var(--ease-out) 0.35s both;
      }
      #page-home.active .approach-card:nth-child(2) {
        animation: cardFadeUp 0.6s var(--ease-out) 0.48s both;
      }
      #page-home.active .approach-card:nth-child(3) {
        animation: cardFadeUp 0.6s var(--ease-out) 0.61s both;
      }
      @keyframes cardFadeUp {
        from {
          opacity: 0;
          transform: translateY(28px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .approach-card h3 {
        font-family: var(--font-serif);
        font-size: 1.35rem;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 10px;
      }
      .approach-card p {
        font-size: 0.91rem;
        color: var(--text-mid);
        line-height: 1.75;
      }

      /* ─── INFO BLOCKS ─── */
      .home-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 52px;
      }
      .info-block {
        background: var(--white);
        border-radius: var(--r-md);
        padding: 28px 28px 28px 30px;
        border: 1px solid var(--border);
        border-left: 3px solid var(--teal);
        box-shadow: var(--shadow-sm);
        transition:
          transform 250ms var(--ease-out),
          box-shadow 250ms var(--ease-out);
      }
      .info-block:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
      }
      .info-block-header {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
      }
      .info-block h3 {
        font-family: var(--font-sans);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--teal);
      }
      .info-block p {
        font-size: 0.93rem;
        color: var(--text-mid);
        line-height: 1.78;
      }

      /* ─── HOME PHOTO ─── */
      .home-photo-wrap {
        position: relative;
        margin-bottom: 0;
        border-radius: var(--r-lg);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
      }
      .home-img {
        width: 100%;
        max-height: 440px;
        object-fit: cover;
        border-radius: var(--r-lg);
        display: block;
        transition: transform 0.6s var(--ease-out);
      }
      .home-photo-wrap:hover .home-img {
        transform: scale(1.025);
      }
      .photo-caption {
        position: absolute;
        bottom: 28px;
        left: 28px;
        background: rgba(26, 46, 46, 0.78);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--white);
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-style: italic;
        font-weight: 300;
        padding: 12px 22px;
        border-radius: var(--r-sm);
        letter-spacing: 0.02em;
      }

      /* ─── STAFF SCENE BACKGROUND ─── */
      #page-staff {
        position: relative;
        background: #fafaf8;
        overflow: hidden;
      }
      .staff-video-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
        opacity: 1;
      }
      .staff-video-overlay {
        position: absolute;
        inset: 0;
        background: rgba(250, 250, 248, 0.2);
        z-index: 1;
      }
      .staff-scene-bg {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 2;
      }
      #page-staff .content-wrap {
        position: relative;
        z-index: 10;
      }

      .staff-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        opacity: 0.8;
        mix-blend-mode: multiply;
      }
      .staff-orb.orb-1 {
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(74, 140, 140, 0.3) 0%, transparent 70%);
        top: -100px;
        left: -100px;
        animation: floatOrb1 12s ease-in-out infinite;
      }
      .staff-orb.orb-2 {
        width: 450px;
        height: 450px;
        background: radial-gradient(circle, rgba(143, 170, 140, 0.25) 0%, transparent 70%);
        top: 10%;
        right: -50px;
        animation: floatOrb2 15s ease-in-out infinite;
      }
      .staff-orb.orb-3 {
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(45, 106, 106, 0.2) 0%, transparent 70%);
        bottom: 5%;
        left: 5%;
        animation: floatOrb3 18s ease-in-out infinite;
      }
      .staff-orb.orb-4 {
        width: 350px;
        height: 350px;
        background: radial-gradient(circle, rgba(74, 140, 140, 0.18) 0%, transparent 70%);
        top: 35%;
        left: 30%;
        animation: floatOrb1 10s ease-in-out infinite reverse;
      }
      .staff-orb.orb-5 {
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(143, 170, 140, 0.15) 0%, transparent 70%);
        bottom: -100px;
        right: 2%;
        animation: floatOrb2 20s ease-in-out infinite;
      }
      .staff-orb.orb-6 {
        width: 250px;
        height: 250px;
        background: radial-gradient(circle, rgba(74, 140, 140, 0.22) 0%, transparent 70%);
        top: 2%;
        left: 40%;
        animation: floatOrb3 22s ease-in-out infinite reverse;
      }
      .staff-orb.orb-7 {
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(143, 170, 140, 0.12) 0%, transparent 70%);
        bottom: 40%;
        right: 20%;
        animation: floatOrb1 25s ease-in-out infinite;
      }

      @keyframes floatOrb1 {
        0%,
        100% {
          transform: translate(0, 0) scale(1);
        }
        33% {
          transform: translate(60px, -80px) scale(1.15);
        }
        66% {
          transform: translate(-40px, 60px) scale(0.85);
        }
      }
      @keyframes floatOrb2 {
        0%,
        100% {
          transform: translate(0, 0) scale(1);
        }
        40% {
          transform: translate(-70px, -60px) scale(1.1);
        }
        75% {
          transform: translate(50px, 70px) scale(0.9);
        }
      }
      @keyframes floatOrb3 {
        0%,
        100% {
          transform: translate(0, 0) scale(1);
        }
        30% {
          transform: translate(80px, 40px) scale(1.2);
        }
        70% {
          transform: translate(-60px, -70px) scale(0.8);
        }
      }

      .staff-float-shape {
        position: absolute;
        z-index: 1;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
      }
      .staff-float-shape.shape-1 {
        width: 35px;
        height: 35px;
        background: var(--teal);
        border-radius: 8px;
        opacity: 0.18;
        top: 10%;
        left: 5%;
        animation: floatShape 8s ease-in-out infinite;
      }
      .staff-float-shape.shape-2 {
        width: 25px;
        height: 25px;
        background: var(--sage);
        border-radius: 50%;
        opacity: 0.22;
        top: 50%;
        right: 5%;
        animation: floatShape 10s ease-in-out infinite reverse;
      }
      .staff-float-shape.shape-3 {
        width: 20px;
        height: 20px;
        background: var(--teal-dark);
        border-radius: 4px;
        opacity: 0.15;
        bottom: 20%;
        left: 50%;
        animation: floatShape 12s ease-in-out infinite;
        transform: rotate(45deg);
      }
      .staff-float-shape.shape-4 {
        width: 18px;
        height: 18px;
        background: var(--teal);
        border-radius: 50%;
        opacity: 0.2;
        top: 70%;
        left: 20%;
        animation: floatShape 7s ease-in-out infinite;
      }
      .staff-float-shape.shape-5 {
        width: 40px;
        height: 40px;
        background: var(--sage);
        border-radius: 12px;
        opacity: 0.12;
        top: 25%;
        right: 20%;
        animation: floatShape 15s ease-in-out infinite reverse;
      }
      .staff-float-shape.shape-6 {
        width: 15px;
        height: 15px;
        background: var(--teal-dark);
        border-radius: 50%;
        opacity: 0.25;
        bottom: 10%;
        right: 35%;
        animation: floatShape 9s ease-in-out infinite;
      }
      .staff-float-shape.shape-7 {
        width: 12px;
        height: 12px;
        background: var(--teal);
        border-radius: 2px;
        opacity: 0.18;
        top: 40%;
        left: 10%;
        animation: floatShape 11s ease-in-out infinite;
      }
      .staff-float-shape.shape-8 {
        width: 22px;
        height: 22px;
        background: var(--sage);
        border-radius: 50%;
        opacity: 0.2;
        bottom: 50%;
        left: 15%;
        animation: floatShape 13s ease-in-out infinite reverse;
      }
      .staff-float-shape.shape-9 {
        width: 28px;
        height: 28px;
        background: var(--teal-dark);
        border-radius: 8px;
        opacity: 0.14;
        top: 15%;
        right: 40%;
        animation: floatShape 14s ease-in-out infinite;
      }
      .staff-float-shape.shape-10 {
        width: 14px;
        height: 14px;
        background: var(--teal);
        border-radius: 50%;
        opacity: 0.22;
        bottom: 30%;
        right: 10%;
        animation: floatShape 10s ease-in-out infinite;
      }

      @keyframes floatShape {
        0%,
        100% {
          transform: translate(0, 0) rotate(0deg);
        }
        25% {
          transform: translate(20px, -40px) rotate(20deg);
        }
        50% {
          transform: translate(-10px, -20px) rotate(-10deg);
        }
        75% {
          transform: translate(30px, -50px) rotate(35deg);
        }
      }

      /* ─── STAFF ─── */
      .staff-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 28px;
        margin-top: 32px;
      }
      /* Stagger entrance when staff page activates */
      #page-staff.active .staff-card {
        animation: cardFadeUp 0.5s var(--ease-out) both;
      }
      #page-staff.active .staff-card:nth-child(1) {
        animation-delay: 0.08s;
      }
      #page-staff.active .staff-card:nth-child(2) {
        animation-delay: 0.15s;
      }
      #page-staff.active .staff-card:nth-child(3) {
        animation-delay: 0.22s;
      }
      #page-staff.active .staff-card:nth-child(4) {
        animation-delay: 0.29s;
      }
      #page-staff.active .staff-card:nth-child(5) {
        animation-delay: 0.36s;
      }
      #page-staff.active .staff-card:nth-child(6) {
        animation-delay: 0.43s;
      }
      #page-staff.active .staff-card:nth-child(7) {
        animation-delay: 0.5s;
      }
      #page-staff.active .staff-card:nth-child(8) {
        animation-delay: 0.57s;
      }
      #page-staff.active .staff-card:nth-child(9) {
        animation-delay: 0.64s;
      }
      .staff-card {
        background: var(--white);
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid var(--border);
        box-shadow: 0 10px 30px rgba(26, 46, 46, 0.05);
        position: relative;
        will-change: transform, box-shadow;
        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        cursor: default;
      }
      .staff-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 10;
        border-radius: 20px;
        background: radial-gradient(
          circle at var(--mx, 50%) var(--my, 50%),
          rgba(255, 255, 255, 0.3) 0%,
          transparent 65%
        );
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
      }
      .staff-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 50px rgba(26, 46, 46, 0.12);
        border-color: var(--teal-light);
      }
      .staff-card.card-active::before {
        opacity: 1;
      }

      .staff-card img {
        width: 100%;
        aspect-ratio: 1 / 1.1;
        object-fit: cover;
        object-position: top center;
        display: block;
        transition: transform 0.6s var(--ease-out);
      }
      .staff-card:hover img {
        transform: scale(1.05);
      }
      .staff-card-placeholder {
        width: 100%;
        aspect-ratio: 1 / 1.1;
        display: grid;
        place-items: center;
        background:
          radial-gradient(circle at 50% 36%, rgba(142, 167, 136, 0.22), transparent 38%),
          linear-gradient(145deg, var(--teal-light), var(--warm-white));
        color: var(--teal);
        font-family: var(--font-serif);
        font-size: 2rem;
        letter-spacing: 0.08em;
      }

      .staff-card-body {
        padding: 20px 20px 24px;
        background: var(--white);
        position: relative;
        z-index: 5;
      }
      .staff-card .name {
        font-family: var(--font-serif);
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-dark);
        margin: 0 0 6px;
        line-height: 1.2;
      }
      .staff-card .title {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--teal-dark);
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }

      /* Decoration inside card */
      .staff-card::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--teal);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s var(--ease-out);
        z-index: 15;
      }
      .staff-card:hover::after {
        transform: scaleX(1);
      }

      /* ─── SERVICES ACCORDION ─── */
      .services-intro {
        font-size: 1rem;
        color: var(--text-mid);
        max-width: 640px;
        margin-bottom: 40px;
        line-height: 1.8;
      }
      .accordion {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      #page-services.active .accordion-item:nth-child(1) {
        animation: cardFadeUp 0.5s var(--ease-out) 0.25s both;
      }
      #page-services.active .accordion-item:nth-child(2) {
        animation: cardFadeUp 0.5s var(--ease-out) 0.38s both;
      }
      #page-services.active .accordion-item:nth-child(3) {
        animation: cardFadeUp 0.5s var(--ease-out) 0.51s both;
      }
      .accordion-item {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition: box-shadow 200ms var(--ease-out);
      }
      .accordion-item.open {
        box-shadow: var(--shadow-md);
      }
      .accordion-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 22px 28px;
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
        transition: background 150ms;
      }
      .accordion-trigger:hover {
        background: var(--teal-light);
      }
      .accordion-trigger-left {
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .accordion-num {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 400;
        color: var(--teal-dark);
        line-height: 1;
        min-width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--teal-light);
        border: 1.5px solid rgba(74, 140, 140, 0.22);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition:
          background 200ms,
          color 200ms;
      }
      .accordion-item.open .accordion-num {
        background: var(--teal);
        color: var(--white);
        border-color: var(--teal);
      }
      .accordion-title {
        font-family: var(--font-serif);
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-dark);
      }
      .accordion-subtitle {
        font-family: var(--font-sans);
        font-size: 0.82rem;
        color: var(--text-light);
        margin-top: 2px;
      }
      .accordion-arrow {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--teal-light);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition:
          transform 280ms var(--ease-out),
          background 180ms;
        font-size: 12px;
        color: var(--teal-dark);
      }
      .accordion-item.open .accordion-arrow {
        transform: rotate(180deg);
        background: var(--teal);
        color: var(--white);
      }
      .accordion-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 350ms var(--ease-out);
      }
      .accordion-body-inner {
        padding: 0 28px 28px;
        border-top: 1px solid var(--border);
        padding-top: 24px;
      }
      .accordion-list {
        list-style: none;
        padding: 0;
        columns: 2;
        column-gap: 32px;
      }
      .accordion-list.single-col {
        columns: 1;
      }
      .accordion-list li {
        font-size: 0.92rem;
        color: var(--text-mid);
        padding: 7px 0;
        border-bottom: 1px solid #f0f4f4;
        display: flex;
        align-items: baseline;
        gap: 8px;
        break-inside: avoid;
      }
      .accordion-list li:last-child {
        border-bottom: none;
      }
      .accordion-list li::before {
        content: "";
        width: 5px;
        height: 5px;
        background: var(--teal);
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: 6px;
      }

      /* ─── FEES ─── */
      .fees-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: start;
        margin-top: 8px;
      }
      .fees-prose p {
        font-size: 0.95rem;
        color: var(--text-mid);
        margin-bottom: 16px;
        line-height: 1.75;
      }
      .fees-prose a {
        color: var(--teal-dark);
        font-weight: 500;
      }
      .btn-secondary {
        display: inline-block;
        background: transparent;
        color: var(--teal-dark);
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 13px 28px;
        border-radius: var(--r-pill);
        border: 2px solid var(--teal);
        cursor: pointer;
        margin-top: 10px;
        transition:
          background 200ms var(--ease-out),
          color 200ms var(--ease-out),
          transform 180ms var(--ease-out),
          box-shadow 200ms;
      }
      .btn-secondary:hover {
        background: var(--grad-teal);
        color: var(--white);
        border-color: transparent;
        transform: translateY(-3px);
        box-shadow: var(--shadow-teal);
      }
      .fees-tags-col h3 {
        font-family: var(--font-sans);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--teal);
        margin-bottom: 16px;
      }
      .insurance-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .insurance-tag {
        background: var(--white);
        color: var(--teal-dark);
        border: 1.5px solid rgba(74, 140, 140, 0.35);
        border-radius: var(--r-pill);
        padding: 7px 18px;
        font-family: var(--font-sans);
        font-size: 0.82rem;
        font-weight: 500;
        transition:
          background 200ms,
          color 200ms,
          border-color 200ms,
          transform 200ms var(--ease-out),
          box-shadow 200ms;
      }
      .insurance-tag:hover {
        background: var(--teal);
        color: var(--white);
        border-color: var(--teal);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(45, 106, 106, 0.25);
      }

      /* ─── WEBER ─── */
      .weber-layout {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 48px;
        align-items: start;
      }
      .weber-photo-col {
        position: sticky;
        top: 100px;
      }
      .weber-photo-col img {
        width: 100%;
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-xl);
        transition: transform 0.5s var(--ease-out);
      }
      .weber-photo-col:hover img {
        transform: scale(1.02);
      }
      .weber-photo-col figcaption {
        text-align: center;
        margin-top: 14px;
        font-family: var(--font-serif);
        font-size: 0.9rem;
        font-style: italic;
        color: var(--text-light);
        line-height: 1.5;
      }
      .weber-name {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 400;
        color: var(--text-dark);
        margin-bottom: 4px;
      }
      .weber-cred {
        font-size: 0.85rem;
        color: var(--text-light);
        font-style: italic;
        margin-bottom: 14px;
        line-height: 1.5;
      }
      .weber-contact {
        margin-bottom: 28px;
      }
      .weber-contact a {
        color: var(--teal-dark);
        text-decoration: none;
        font-size: 0.93rem;
        font-weight: 500;
      }
      .weber-contact p {
        font-size: 0.93rem;
        color: var(--text-mid);
        margin-top: 4px;
      }
      .weber-body p {
        color: var(--text-mid);
        margin-bottom: 16px;
        font-size: 0.95rem;
        line-height: 1.75;
      }
      .weber-section-head {
        font-family: var(--font-sans);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--teal);
        margin: 28px 0 12px;
      }
      .weber-body ul {
        padding-left: 0;
        list-style: none;
      }
      .weber-body ul li {
        font-size: 0.93rem;
        color: var(--text-mid);
        padding: 7px 0 7px 20px;
        border-bottom: 1px solid #f0f4f4;
        position: relative;
        line-height: 1.5;
      }
      .weber-body ul li:last-child {
        border-bottom: none;
      }
      .weber-body ul li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 14px;
        width: 5px;
        height: 5px;
        background: var(--teal);
        border-radius: 50%;
      }
      .weber-locations {
        background: linear-gradient(135deg, var(--teal-light) 0%, rgba(143, 170, 140, 0.12) 100%);
        border-radius: var(--r-md);
        padding: 24px 26px;
        margin-top: 32px;
        font-size: 0.9rem;
        color: var(--text-mid);
        line-height: 1.75;
        border: 1px solid rgba(74, 140, 140, 0.2);
        border-left: 3px solid var(--teal);
      }
      .weber-locations strong {
        color: var(--teal-dark);
        display: block;
        margin-bottom: 10px;
        font-weight: 600;
        font-size: 0.95rem;
      }

      /* ─── CONTACT ─── */
      #page-contact .content-wrap {
        max-width: 1240px;
      }
      .contact-layout {
        display: grid;
        grid-template-columns: 0.7fr 1.3fr;
        gap: 40px;
        align-items: start;
      }
      .contact-right {
        display: grid;
        grid-template-columns: minmax(320px, 1fr) minmax(300px, 1fr);
        gap: 32px;
        align-items: start;
      }
      .contact-info h2 {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        color: var(--text-dark);
        margin-bottom: 24px;
        font-weight: 400;
      }
      .contact-detail {
        margin-bottom: 18px;
      }
      .contact-detail .label {
        font-family: var(--font-sans);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--teal);
        margin-bottom: 4px;
      }
      .contact-detail p,
      .contact-detail a {
        font-size: 0.95rem;
        color: var(--text-mid);
        text-decoration: none;
        line-height: 1.65;
        display: block;
      }
      .contact-detail a:hover {
        color: var(--teal-dark);
      }
      .contact-emergency {
        background: linear-gradient(135deg, var(--teal-light) 0%, rgba(143, 170, 140, 0.12) 100%);
        border-radius: var(--r-md);
        padding: 20px 22px;
        margin-top: 28px;
        border: 1px solid rgba(74, 140, 140, 0.18);
        border-left: 3px solid var(--teal);
      }
      .contact-emergency p {
        font-size: 0.88rem;
        color: var(--text-mid);
        font-style: italic;
        line-height: 1.7;
      }
      .contact-emergency strong {
        color: var(--teal-dark);
      }
      .contact-form-card {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-md);
        padding: 28px;
        margin-bottom: 24px;
      }
      .contact-form-card h2 {
        font-family: var(--font-serif);
        font-size: 1.3rem;
        color: var(--text-dark);
        margin-bottom: 8px;
        font-weight: 400;
      }
      .contact-form-intro {
        font-size: 0.92rem;
        color: var(--text-mid);
        margin-bottom: 16px;
        line-height: 1.65;
      }
      .contact-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        align-items: start;
      }
      .contact-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
      }
      .contact-field.full {
        grid-column: 1 / -1;
      }
      .contact-field label {
        font-family: var(--font-sans);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--teal);
      }
      .contact-field input,
      .contact-field select,
      .contact-field textarea {
        width: 100%;
        border: 1.5px solid var(--border);
        border-radius: var(--r-sm);
        padding: 12px 14px;
        font-family: var(--font-sans);
        font-size: 0.95rem;
        color: var(--text-dark);
        background: var(--bg-light);
        transition:
          border-color 0.2s,
          box-shadow 0.2s,
          background 0.2s;
      }
      .contact-field input:hover,
      .contact-field select:hover,
      .contact-field textarea:hover {
        border-color: rgba(74, 140, 140, 0.4);
        background: var(--white);
      }
      .contact-field textarea {
        min-height: 132px;
        resize: vertical;
        line-height: 1.6;
      }
      .contact-field input:focus,
      .contact-field select:focus,
      .contact-field textarea:focus {
        outline: none;
        border-color: var(--teal);
        background: var(--white);
        box-shadow: 0 0 0 3.5px rgba(74, 140, 140, 0.14);
      }
      .contact-form-actions {
        margin-top: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
      }
      .contact-demo-note {
        font-size: 0.82rem;
        color: var(--text-light);
      }
      .contact-form-status {
        margin-top: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 0.88rem;
        background: var(--teal-light);
        color: var(--teal-dark);
        border: 1px solid rgba(74, 140, 140, 0.24);
        display: none;
      }
      .contact-form-status.show {
        display: block;
      }
      .contact-img-wrap {
        position: sticky;
        top: 104px;
      }
      .contact-img {
        width: 100%;
        height: auto;
        border-radius: 16px;
        box-shadow: var(--shadow-md);
        display: block;
      }

      /* ─── FOOTER ─── */
      footer {
        background: linear-gradient(165deg, #1a2e2e 0%, #0f1f1f 60%, #0a1515 100%);
        color: var(--white);
        padding: 88px 0 0;
        position: relative;
        overflow: hidden;
      }
      /* Grain on footer */
      footer::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--grain);
        opacity: 0.06;
        pointer-events: none;
        z-index: 0;
      }
      footer > * {
        position: relative;
        z-index: 1;
      }
      footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--teal-dark), var(--teal), var(--sage), var(--teal), var(--teal-dark));
        background-size: 200% 100%;
        animation: shimmerBar 5s linear infinite;
        z-index: 2;
      }
      @keyframes shimmerBar {
        from {
          background-position: 200% 0;
        }
        to {
          background-position: -200% 0;
        }
      }
      .footer-inner {
        max-width: var(--max-w);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.2fr 0.8fr 1fr 0.9fr;
        gap: 60px;
        padding: 0 28px 60px;
      }
      .footer-social-links {
        display: flex;
        flex-direction: row;
        gap: 16px;
        margin-top: 8px;
      }
      .footer-social-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--white);
        transition:
          transform 0.2s,
          opacity 0.2s,
          box-shadow 0.2s;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border: none;
        cursor: pointer;
        overflow: hidden;
      }
      .footer-social-icon:hover {
        transform: translateY(-3px);
        opacity: 0.95;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
      }
      .footer-social-icon img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .footer-brand img {
        height: auto;
        width: auto;
        max-width: 200px;
        max-height: 80px;
        border-radius: 8px;
        object-fit: contain;
        margin-bottom: 20px;
        display: block;
      }
      .footer-brand p {
        font-family: var(--font-serif);
        font-size: 17px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.7);
        max-width: 320px;
      }
      .footer-col h4,
      .footer-col h2 {
        font-family: var(--font-sans);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--teal);
        margin-bottom: 24px;
      }
      .footer-col nav {
        display: block;
        position: static;
        inset: auto;
        max-height: none;
        overflow: visible;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
      }
      .footer-col a,
      .footer-col p {
        display: block;
        color: rgba(255, 255, 255, 0.58);
        text-decoration: none;
        font-size: 14px;
        margin-bottom: 14px;
        transition: color 0.2s;
      }
      .footer-col a {
        position: relative;
        width: fit-content;
      }
      .footer-col a::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--teal);
        transition: width 0.3s var(--ease-out);
      }
      .footer-col a:hover {
        color: var(--white);
      }
      .footer-col a:hover::after {
        width: 100%;
      }

      .footer-crisis {
        background: rgba(0, 0, 0, 0.2);
        padding: 30px 28px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
      }
      .footer-crisis span {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.4);
      }
      .footer-crisis a {
        color: var(--teal);
        text-decoration: none;
      }
      .footer-crisis a:hover {
        text-decoration: underline;
      }

      .crisis-badge {
        background: rgba(180, 50, 40, 0.12);
        border: 1px solid rgba(200, 60, 50, 0.35);
        color: #f1948a !important;
        padding: 14px 24px;
        border-radius: var(--r-md);
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 0.03em;
        text-align: center;
        display: flex;
        align-items: center;
        gap: 12px;
        line-height: 1.4;
        width: auto;
        height: auto;
      }
      .crisis-badge strong {
        color: #f1948a;
        font-size: 1.1rem;
        display: inline;
      }

      /* ─── RESPONSIVE ─── */
      @media (max-width: 768px) {
        nav {
          display: none;
        }
        nav.open {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background: var(--white);
          border-top: 1px solid var(--border);
          padding: 12px 16px;
          box-shadow: var(--shadow-md);
          z-index: 200;
        }
        nav.open a,
        nav.open .dropdown > span {
          width: 100%;
          border-radius: 8px;
        }
        .hamburger {
          display: block;
        }
        header {
          position: relative;
        }

        .hero {
          grid-template-columns: 1fr;
        }
        .hero-right {
          display: none;
        }
        .hero-left {
          padding: 48px 28px 52px;
        }

        .trust-bar-inner {
          gap: 20px;
        }

        .home-info,
        .fees-layout,
        .footer-inner,
        .contact-layout {
          grid-template-columns: 1fr;
        }
        .contact-form-grid {
          grid-template-columns: 1fr;
        }
        .contact-right {
          grid-template-columns: 1fr;
        }
        .contact-img-wrap {
          position: static;
        }
        .contact-img {
          min-height: 0;
        }
        .approach-grid {
          grid-template-columns: 1fr;
        }
        .staff-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .weber-layout {
          grid-template-columns: 1fr;
        }
        .weber-photo-col {
          position: static;
        }
        .accordion-list {
          columns: 1;
        }
        .dropdown-menu {
          position: static;
          box-shadow: none;
          border: none;
          background: var(--teal-light);
          border-radius: 8px;
          margin: 4px 0;
        }
        .dropdown > span::after {
          display: none;
        }
      }

      @media (max-width: 480px) {
        .staff-grid {
          grid-template-columns: 1fr;
        }
        .trust-bar-inner {
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
        }
      }

      /* Responsive hardening: phones, tablets, zoom, touch, and reduced motion */
      :root {
        --page-gutter: clamp(18px, 4vw, 48px);
      }
      html {
        scroll-behavior: smooth;
        scroll-padding-top: 112px;
      }
      body {
        overflow-x: clip;
      }
      img,
      video,
      iframe {
        max-width: 100%;
      }
      a,
      button,
      input,
      select,
      textarea {
        -webkit-tap-highlight-color: transparent;
      }
      :where(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: 3px solid var(--gold);
        outline-offset: 3px;
      }
      .nav-inner,
      .content-wrap,
      .trust-bar-inner,
      .footer-inner,
      .footer-crisis {
        width: min(100%, var(--max-w));
        padding-left: var(--page-gutter);
        padding-right: var(--page-gutter);
      }
      .hamburger {
        min-width: 48px;
        min-height: 48px;
        align-items: center;
        justify-content: center;
      }
      nav a,
      .dropdown > span {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
      }
      .hero-right-label {
        animation: heroLabelReveal 0.9s var(--ease-out) 0.3s both;
        max-width: calc(100% - 32px);
        white-space: normal;
      }
      @keyframes heroLabelReveal {
        from {
          opacity: 0;
          transform: translate(-50%, 22px);
        }
        to {
          opacity: 1;
          transform: translate(-50%, 0);
        }
      }
      .cta-group {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }
      .contact-form input,
      .contact-form select,
      .contact-form textarea,
      input,
      select,
      textarea {
        font-size: max(16px, 1rem);
        min-height: 48px;
        max-width: 100%;
      }
      p,
      a,
      h1,
      h2,
      h3,
      h4,
      span {
        overflow-wrap: anywhere;
      }

      @media (max-width: 1099px) {
        header {
          position: sticky;
        }
        .nav-inner {
          padding-top: 14px;
          padding-bottom: 14px;
        }
        .logo img {
          max-height: 64px;
          max-width: min(220px, 62vw);
        }
        .hamburger {
          display: inline-flex;
          flex-direction: column;
        }
        nav {
          display: none;
          position: absolute;
          inset: 100% 0 auto;
          max-height: calc(100dvh - 88px);
          overflow-y: auto;
          background: rgba(255, 255, 255, 0.98);
          border-top: 1px solid var(--border);
          padding: 12px var(--page-gutter) max(20px, env(safe-area-inset-bottom));
          box-shadow: var(--shadow-md);
          z-index: 200;
        }
        nav.open {
          display: flex;
          flex-direction: column;
          align-items: stretch;
          gap: 4px;
        }
        nav.open a,
        nav.open .dropdown > span {
          width: 100%;
        }
        .dropdown-menu {
          position: static;
          padding-top: 4px;
        }
        .dropdown:hover .dropdown-menu,
        .dropdown:focus-within .dropdown-menu {
          display: block;
        }
        .hero {
          grid-template-columns: minmax(0, 1.08fr) minmax(240px, 0.92fr);
          min-height: clamp(560px, 72vh, 680px);
        }
        .hero-left {
          padding: clamp(42px, 7vw, 72px) var(--page-gutter);
        }
        .hero-right {
          display: block;
          min-width: 0;
        }
        .hero-right-label {
          bottom: 22px;
          padding: 14px 18px;
          width: calc(100% - 32px);
        }
        .home-info,
        .fees-layout,
        .footer-inner,
        .contact-layout,
        .weber-layout {
          grid-template-columns: 1fr;
        }
        .contact-form-grid,
        .contact-right {
          grid-template-columns: 1fr;
        }
        .weber-photo-col,
        .contact-img-wrap {
          position: static;
        }
        .accordion-list {
          columns: 1;
        }
      }

      @media (max-width: 767px) {
        html {
          scroll-padding-top: 88px;
        }
        .hero {
          grid-template-columns: 1fr;
          min-height: 0;
        }
        .hero-left {
          padding-top: clamp(42px, 10vw, 64px);
          padding-bottom: clamp(42px, 10vw, 64px);
        }
        .hero-left h1 {
          font-size: clamp(1.85rem, 8.5vw, 2.7rem);
        }
        .hero-left p {
          margin-bottom: 28px;
        }
        .hero-right {
          min-height: clamp(250px, 66vw, 430px);
        }
        .hero-right img {
          position: absolute;
          inset: 0;
        }
        .cta-group {
          flex-direction: column;
          align-items: stretch;
        }
        .cta-group a {
          width: 100%;
          min-height: 48px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          text-align: center;
        }
        .trust-bar-inner {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px 16px;
        }
        .trust-item {
          margin: 0;
          padding: 10px 0;
          min-width: 0;
        }
        .trust-item::after {
          display: none;
        }
        .staff-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        footer {
          padding-top: 56px;
        }
        .footer-inner {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 30px 20px;
          padding-bottom: 32px;
        }
        .footer-brand {
          grid-column: 1 / -1;
          display: grid;
          grid-template-columns: 88px minmax(0, 1fr);
          align-items: center;
          gap: 16px;
        }
        .footer-brand img {
          width: 88px;
          max-width: 88px;
          max-height: 66px;
          margin: 0;
        }
        .footer-brand p {
          margin: 0;
          font-size: 15px;
          line-height: 1.45;
        }
        .footer-col nav {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 5px 12px;
        }
        .footer-col nav a {
          width: auto;
          overflow-wrap: normal;
        }
        .footer-col:nth-child(4) {
          grid-column: 1 / -1;
        }
        .footer-col h4 {
          margin-bottom: 12px;
        }
        .footer-social-links {
          gap: 12px;
          margin-top: 0;
        }
        .footer-social-icon {
          width: 44px;
          height: 44px;
        }
        .footer-col a,
        .footer-col p {
          font-size: 13px;
          margin-bottom: 8px;
        }
        .footer-crisis {
          align-items: stretch;
          gap: 14px;
          padding-top: 20px;
          padding-bottom: 20px;
        }
        .crisis-badge {
          width: 100%;
          justify-content: center;
          padding: 10px 12px;
        }
      }

      @media (max-width: 479px) {
        .nav-inner {
          gap: 12px;
        }
        .logo img {
          max-height: 54px;
          max-width: min(190px, 66vw);
        }
        .hero-right {
          min-height: 240px;
        }
        .hero-right-label span {
          font-size: 1rem;
        }
        .hero-right-label em {
          letter-spacing: 0.11em;
        }
        .trust-bar-inner {
          grid-template-columns: 1fr;
        }
        .staff-grid {
          grid-template-columns: 1fr;
        }
        footer {
          padding-top: 44px;
        }
        .footer-inner {
          gap: 26px 16px;
          padding-bottom: 28px;
        }
        .footer-brand {
          grid-template-columns: 76px minmax(0, 1fr);
          gap: 12px;
        }
        .footer-brand img {
          width: 76px;
          max-width: 76px;
          max-height: 58px;
        }
        .footer-brand p {
          font-size: 14px;
        }
        .footer-col nav {
          grid-template-columns: 1fr;
          gap: 4px;
        }
        .section-wrap,
        .content-wrap {
          padding-top: 44px;
          padding-bottom: 44px;
        }
        .footer-crisis {
          padding-bottom: max(24px, env(safe-area-inset-bottom));
        }
      }

      @media (hover: none), (pointer: coarse) {
        .staff-card {
          transform: none !important;
        }
        .logo:hover,
        .btn-primary:hover,
        .btn-ghost:hover {
          transform: none;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        *,
        *::before,
        *::after {
          animation: none !important;
          transition-duration: 0.01ms !important;
        }
      }
      @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        header {
          background: rgba(255, 255, 255, 0.98);
        }
        .hero-right-label {
          background: rgba(19, 63, 48, 0.9);
        }
      }

      /* ─── SPACIOUS HEADER + CONTACT LAYOUT ───
         Keep the logo asset unchanged while giving the desktop layout room to breathe.
         The navigation becomes a menu before it can wrap or collide with the logo. */
      @media (min-width: 1100px) {
        header .nav-inner {
          width: min(100%, 1600px);
          max-width: none;
          padding: 28px clamp(28px, 4vw, 68px);
          gap: clamp(28px, 4vw, 76px);
        }

        header .logo {
          flex: 0 1 clamp(170px, 17vw, 240px);
          min-width: 0;
        }

        header .logo img {
          max-width: 100%;
          max-height: 76px;
        }

        header nav {
          flex: 1 1 auto;
          justify-content: flex-end;
          gap: clamp(4px, 1vw, 18px);
          flex-wrap: nowrap;
          min-width: 0;
        }

        header nav a {
          white-space: nowrap;
        }

        #page-contact .content-wrap {
          width: min(100%, 1600px);
          max-width: none;
          padding-left: clamp(28px, 4vw, 68px);
          padding-right: clamp(28px, 4vw, 68px);
        }

        #page-contact .contact-layout {
          grid-template-columns: minmax(220px, 0.72fr) minmax(0, 2fr);
          gap: clamp(48px, 5vw, 88px);
        }

        #page-contact .contact-right {
          grid-template-columns: minmax(0, 1fr) minmax(300px, 0.95fr);
          gap: clamp(28px, 3.5vw, 56px);
        }
      }

      @media (min-width: 768px) and (max-width: 1099px) {
        #page-contact .content-wrap {
          padding-top: clamp(52px, 7vw, 72px);
          padding-bottom: clamp(52px, 7vw, 72px);
        }
      }

      @media (max-width: 767px) {
        #page-contact .contact-layout {
          gap: 42px;
        }

        #page-contact .contact-right {
          gap: 24px;
        }

        #page-contact .contact-form-card {
          padding: clamp(22px, 6vw, 28px);
        }

        #page-contact .contact-info h2 {
          max-width: 15ch;
        }

        #page-contact .contact-img {
          aspect-ratio: 16 / 10;
          object-fit: cover;
        }
      }

      @media (max-width: 479px) {
        header .nav-inner {
          padding-top: 12px;
          padding-bottom: 12px;
        }

        #page-contact .contact-layout {
          gap: 34px;
        }

        #page-contact .contact-emergency {
          margin-top: 24px;
        }
      }
    
.page{display:block;opacity:1}.legal-page{min-height:65vh;padding:clamp(48px,7vw,88px) 0}.legal-page .content-wrap{max-width:820px}.legal-page h1{margin-bottom:8px}.legal-page h2{margin:32px 0 10px;font-size:clamp(1.25rem,2vw,1.65rem)}.legal-page p{margin:0 0 16px;line-height:1.75}.legal-updated{color:var(--text-light);font-size:.95rem}.not-found{text-align:center;min-height:65vh;display:grid;place-items:center;padding:48px 20px}.not-found p{margin:12px 0 24px}.form-review-note{padding:16px 20px;margin:0 0 24px;border:1px solid var(--primary,var(--teal));border-radius:var(--r-md);background:var(--bg-soft,var(--teal-light));}.sensitive-notice{font-weight:600;margin-top:16px}.appointment-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.contact-phone-card{padding:clamp(24px,4vw,38px);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--warm-white)}.contact-phone-card p{line-height:1.7}.contact-phone-card .btn-primary{display:inline-flex;margin-top:12px}@media(max-width:479px){.appointment-actions a,.contact-phone-card .btn-primary{width:100%;justify-content:center;text-align:center}}
body.safety-gate-open{overflow:hidden}body:has(#safety-gate):not(.safety-gate-cleared)>:not(.safety-gate){visibility:hidden}.safety-gate{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:clamp(20px,5vw,64px);background:#0d2b22}.safety-gate[hidden]{display:none}.safety-gate-card{width:min(100%,640px);padding:clamp(28px,5vw,52px);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-lg);background:var(--warm-white);box-shadow:0 24px 80px rgba(0,0,0,.32);text-align:center}.safety-gate-eyebrow,.emergency-eyebrow{margin:0 0 14px;color:var(--teal-dark);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.safety-gate-card h2,.emergency-card h1{margin:0;color:var(--text-dark);font-family:var(--font-serif);font-size:clamp(1.9rem,4.5vw,3rem);font-weight:500;line-height:1.2}.safety-gate-card>p:not(.safety-gate-eyebrow):not(.safety-gate-note){max-width:46ch;margin:18px auto 0;color:var(--text-mid);font-size:1.1rem;line-height:1.65}.safety-gate-actions{display:grid;gap:12px;margin-top:30px}.safety-answer{width:100%;min-height:56px;padding:14px 20px;border-radius:var(--r-md);font:700 .95rem var(--font-sans);letter-spacing:.03em;cursor:pointer}.safety-answer-urgent{border:1px solid #8b302b;background:#a33c35;color:#fff}.safety-answer-urgent:hover{background:#832e29}.safety-answer-safe{border:1px solid var(--teal);background:var(--white);color:var(--teal-dark)}.safety-answer-safe:hover{background:var(--teal-light)}.safety-gate-note{margin:20px 0 0;color:var(--text-mid);font-size:.85rem}.emergency-page{display:grid;min-height:100vh;place-items:center;padding:clamp(24px,6vw,80px);background:radial-gradient(circle at top right,rgba(163,60,53,.14),transparent 45%),var(--warm-white)}.emergency-card{width:min(100%,760px);padding:clamp(32px,6vw,72px);border:1px solid var(--border);border-top:6px solid #a33c35;border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-lg);text-align:center}.emergency-lead{max-width:54ch;margin:20px auto 0;color:var(--text-mid);font-size:1.12rem;line-height:1.7}.emergency-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:560px;margin:32px auto}.emergency-actions a{display:flex;min-height:58px;align-items:center;justify-content:center;border-radius:var(--r-md);font-weight:700;letter-spacing:.03em;text-decoration:none}.emergency-call{background:#a33c35;color:#fff}.emergency-988{border:2px solid var(--teal);color:var(--teal-dark)}.emergency-support{padding:24px;margin-top:28px;border-radius:var(--r-md);background:var(--teal-light);text-align:left}.emergency-support h2{margin:0 0 8px;font-size:1.1rem}.emergency-support p{margin:0;color:var(--text-mid);line-height:1.7}.emergency-support a{color:var(--teal-dark);font-weight:700}.emergency-note{margin:26px auto 0;max-width:52ch;color:var(--text-mid);font-size:.9rem;line-height:1.6}@media(max-width:560px){.emergency-actions{grid-template-columns:1fr}.safety-gate{padding:16px}.safety-gate-card{border-radius:var(--r-md)}}
.u-inline-1{cursor: pointer}