*,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      :root {
        --gold: #fdba21;
        --gold-mid: #c9941a;
        --navy: #0e1b2c;
        --cream: #fdf9f4;
        --warm: #f7f2ea;
        --white: #fff;
        --charcoal: #2a2826;
        --mid: #5a5650;
        --light: #9a9690;
        --serif: "Playfair Display", Georgia, serif;
        --sans: "Nunito Sans", sans-serif;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        font-family: var(--sans);
        background: var(--white);
        color: var(--charcoal);
        overflow-x: hidden;
        font-size: 16px;
        line-height: 1.6;
      }

      /* NAV */
      nav {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 3rem;
        background: rgba(255, 255, 255, 0.97);
        border-bottom: none;
        box-shadow: none;
        gap: 1rem;
        flex-wrap: wrap;
      }
      .nav-logo {
        font-family: var(--serif);
        font-size: 1.2rem;
        font-weight: 400;
        color: var(--navy);
        text-decoration: none;
        letter-spacing: 0.04em;
        white-space: nowrap;
      }
      .nav-logo span {
        color: var(--gold-mid);
        font-style: italic;
      }
      .nav-links {
        display: flex;
        gap: 1.5rem;
        list-style: none;
        flex-wrap: wrap;
      }
      .nav-links a {
        font-family: var(--sans);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--charcoal);
        text-decoration: none;
        transition: color 0.2s;
      }
      .nav-links a:hover {
        color: var(--gold-mid);
      }
      .nav-right {
        display: flex;
        gap: 0.75rem;
        align-items: center;
      }
      .nav-btn {
        font-family: var(--sans);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--white);
        background: var(--navy);
        border: none;
        padding: 0.6rem 1.25rem;
        cursor: pointer;
        text-decoration: none;
        transition: background 0.2s;
        white-space: nowrap;
      }
      .nav-btn:hover {
        background: var(--gold-mid);
      }
      .nav-login {
        font-family: var(--sans);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--navy);
        background: transparent;
        border: 2px solid var(--navy);
        padding: 0.6rem 1.25rem;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.2s;
        white-space: nowrap;
      }
      .nav-login:hover {
        background: var(--navy);
        color: var(--white);
      }

      /* HERO */
      .hero {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        padding-bottom: 5rem;
        margin-top: 0;
        padding-top: 70px;
      }
      .hero-slides {
        position: absolute;
        inset: 0;
      }
      .hero-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 1.2s ease;
        background-size: cover;
        background-position: center center;
      }
      .hero-slide.active {
        opacity: 1;
      }
      .hero-slide::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(
            to right,
            rgba(253, 249, 244, 0.94) 0%,
            rgba(253, 249, 244, 0.85) 35%,
            rgba(253, 249, 244, 0.25) 62%,
            rgba(253, 249, 244, 0) 100%
          ),
          linear-gradient(to top, rgba(253, 249, 244, 0.75) 0%, transparent 40%);
      }
      .hero-content {
        position: relative;
        z-index: 2;
        max-width: 600px;
        padding: 0 4vw 2rem;
      }
      .hero-roles {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        margin-bottom: 1.5rem;
      }
      .hero-role {
        font-family: var(--sans);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--gold-mid);
      }
      .hero h1 {
        font-family: var(--serif);
        font-weight: 400;
        font-size: clamp(2.8rem, 5vw, 4.4rem);
        color: var(--navy);
        line-height: 1.08;
        margin-bottom: 1.5rem;
      }
      .hero h1 em {
        font-style: italic;
        color: var(--gold-mid);
      }
      .hero-body {
        font-family: var(--sans);
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.85;
        color: var(--mid);
        max-width: 460px;
        margin-bottom: 2.25rem;
      }
      .hero-dots {
        position: absolute;
        bottom: 2rem;
        left: 4vw;
        display: flex;
        gap: 0.6rem;
        z-index: 2;
      }
      .hero-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(14, 27, 44, 0.2);
        cursor: pointer;
        transition: background 0.3s;
        border: none;
        padding: 0;
      }
      .hero-dot.active {
        background: var(--gold-mid);
      }

      /* BUTTONS */
      .btn-navy {
        font-family: var(--sans);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--white);
        background: var(--navy);
        border: none;
        padding: 0.9rem 1.75rem;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        transition: background 0.2s;
      }
      .btn-navy:hover {
        background: var(--gold-mid);
      }
      .btn-gold {
        font-family: var(--sans);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--navy);
        background: var(--gold);
        border: none;
        padding: 0.9rem 1.75rem;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        transition: background 0.2s;
      }
      .btn-gold:hover {
        background: var(--gold-mid);
        color: var(--white);
      }
      .btn-outline {
        font-family: var(--sans);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--navy);
        background: transparent;
        border: 2px solid var(--navy);
        padding: 0.9rem 1.75rem;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        transition: all 0.2s;
      }
      .btn-outline:hover {
        background: var(--navy);
        color: var(--white);
      }
      .btn-sm {
        font-family: var(--sans);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--navy);
        background: transparent;
        border: 1px solid var(--gold);
        padding: 0.55rem 1.1rem;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        transition: all 0.2s;
      }
      .btn-sm:hover {
        background: var(--gold);
        color: var(--navy);
      }
      .cta-row {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
      }
      .gold-rule {
        height: 4px;
        background: linear-gradient(to right, var(--gold), var(--gold-mid));
        width: 100%;
        margin: 0;
        padding: 0;
        display: block;
      }

      /* TWO-TONE HEADINGS */
      .two-tone {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
      }
      .two-tone .muted-word {
        font-family: var(--serif);
        font-size: inherit;
        font-weight: 400;
        color: #c5c0b8;
        line-height: 1.1;
      }
      .two-tone .accent-word {
        font-family: var(--serif);
        font-size: inherit;
        font-weight: 700;
        color: var(--navy);
        line-height: 1;
        position: relative;
        display: inline-block;
      }

      /* SECTIONS */
      .section {
        padding: 5rem 4vw;
      }
      .inner {
        max-width: 1100px;
        margin: 0 auto;
      }
      .section-label {
        font-family: var(--sans);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--gold-mid);
        margin-bottom: 1rem;
      }
      .body-text {
        font-family: var(--sans);
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.95;
        color: var(--mid);
      }
      .body-text strong {
        font-weight: 700;
        color: var(--charcoal);
      }

      /* LETTER SECTION */
      .letter-section {
        background: var(--cream);
      }
      .letter-layout {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 5rem;
        align-items: start;
        max-width: 1100px;
        margin: 0 auto;
      }
      .letter-pull {
        font-family: var(--serif);
        font-size: 1.2rem;
        font-style: italic;
        color: var(--navy);
        line-height: 1.65;
        border-left: 3px solid var(--gold);
        padding-left: 1.5rem;
        margin-bottom: 2rem;
      }
      .sig-img {
        max-width: 220px;
        margin-top: 2rem;
        mix-blend-mode: multiply;
        opacity: 0.85;
      }
      .letter-right .body-text {
        margin-bottom: 1.25rem;
      }
      .letter-ps {
        font-family: var(--sans);
        font-size: 0.875rem;
        font-style: italic;
        color: var(--light);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding-top: 1.25rem;
        margin-top: 1.5rem;
        line-height: 1.8;
      }

      /* FRAMEWORK */
      .framework-section {
        background: var(--warm);
      }
      .framework-intro {
        text-align: center;
        max-width: 640px;
        margin: 0 auto 4rem;
      }
      .pillars-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        max-width: 1100px;
        margin: 0 auto;
      }
      .pillar-card {
        background: var(--white);
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.07);
        transition:
          transform 0.25s,
          box-shadow 0.25s;
      }
      .pillar-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.09);
      }
      .pillar-photo {
        width: 100%;
        aspect-ratio: 3/2;
        background-size: cover;
        background-position: center;
        position: relative;
      }
      .pillar-photo-label {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.75rem 1.25rem;
        background: rgba(253, 249, 244, 0.93);
        font-family: var(--sans);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--gold-mid);
        border-top: 3px solid var(--gold);
      }
      .pillar-body {
        padding: 1.5rem 1.5rem 2rem;
      }
      .pillar-h {
        font-family: var(--serif);
        font-size: 1.6rem;
        font-weight: 400;
        color: var(--navy);
        margin-bottom: 0.5rem;
      }
      .pillar-sub {
        font-family: var(--sans);
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--light);
        margin-bottom: 0.85rem;
      }
      .pillar-p {
        font-family: var(--sans);
        font-size: 0.9rem;
        font-weight: 300;
        line-height: 1.85;
        color: var(--mid);
      }
      .framework-close {
        text-align: center;
        margin: 3rem auto 0;
        font-family: var(--serif);
        font-size: 1.5rem;
        font-style: italic;
        color: var(--navy);
        max-width: 700px;
        line-height: 1.55;
      }
      .framework-close em {
        color: var(--gold-mid);
        font-style: normal;
      }

      /* OFFERINGS */
      .offerings-section {
        background: var(--white);
      }
      .offerings-intro {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: end;
        max-width: 1100px;
        margin: 0 auto 3.5rem;
      }
      .offerings-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
        max-width: 1100px;
        margin: 0 auto;
      }
      .offering {
        padding: 2.5rem 2rem 2rem;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-top: 3px solid var(--gold);
        background: var(--cream);
        transition: box-shadow 0.25s;
      }
      .offering:hover {
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
      }
      .offering-num {
        font-family: var(--serif);
        font-size: 2.8rem;
        font-weight: 700;
        color: var(--navy);
        line-height: 1;
        margin-bottom: 1rem;
      }
      .offering h3 {
        font-family: var(--serif);
        font-size: 1.4rem;
        font-weight: 400;
        color: var(--navy);
        line-height: 1.3;
        margin-bottom: 0.75rem;
      }
      .offering p {
        font-family: var(--sans);
        font-size: 0.9rem;
        font-weight: 300;
        line-height: 1.9;
        color: var(--mid);
        margin-bottom: 1.25rem;
      }
      .offering-for {
        font-family: var(--sans);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--gold-mid);
      }
      .offering-cta {
        display: inline-block;
        margin-top: 1.25rem;
        font-family: var(--sans);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--navy);
        text-decoration: none;
        border-bottom: 2px solid var(--gold);
        padding-bottom: 2px;
        transition: color 0.2s;
      }
      .offering-cta:hover {
        color: var(--gold-mid);
      }

      /* SCHEDULE STRIP */
      .schedule-strip {
        background: var(--navy);
        padding: 4rem 4vw;
      }
      .schedule-inner {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
      }
      .schedule-text h2 {
        font-family: var(--serif);
        font-size: 2rem;
        font-weight: 400;
        color: var(--white);
        margin-bottom: 0.75rem;
      }
      .schedule-text h2 em {
        font-style: italic;
        color: var(--gold);
      }
      .schedule-text p {
        font-family: var(--sans);
        font-size: 0.9rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.85;
        margin-bottom: 1.5rem;
      }
      .schedule-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
      }
      .sched-feat {
        background: rgba(255, 255, 255, 0.06);
        padding: 1rem 1.25rem;
        border-left: 3px solid var(--gold);
      }
      .sched-feat h4 {
        font-family: var(--sans);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 0.35rem;
      }
      .sched-feat p {
        font-family: var(--sans);
        font-size: 0.8rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.55);
        line-height: 1.6;
      }

      /* QUOTE BAND */
      .quote-band {
        background: var(--gold);
        padding: 3.5rem 4vw;
        text-align: center;
      }
      .quote-band blockquote {
        font-family: var(--serif);
        font-size: clamp(1.3rem, 2.5vw, 1.9rem);
        font-weight: 400;
        font-style: italic;
        color: var(--navy);
        line-height: 1.55;
        max-width: 720px;
        margin: 0 auto 1rem;
      }
      .quote-band cite {
        font-family: var(--sans);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--navy);
        font-style: normal;
        opacity: 0.7;
      }

      /* BOOKS */
      .books-section {
        background: var(--cream);
      }
      .books-shelf {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1.5rem;
        max-width: 1100px;
        margin: 2.5rem auto 0;
      }
      .book {
        cursor: pointer;
        transition: transform 0.25s;
        text-align: center;
      }
      .book:hover {
        transform: translateY(-6px);
      }
      .book-cover-img {
        width: 100%;
        aspect-ratio: 2/3;
        object-fit: cover;
        border-top: 4px solid var(--gold);
        display: block;
        margin-bottom: 0.75rem;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
      }
      .book-caption {
        font-family: var(--sans);
        font-size: 0.8rem;
        font-weight: 300;
        color: var(--mid);
        line-height: 1.5;
        margin-bottom: 0.75rem;
      }
      .book-date {
        font-family: var(--sans);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--gold-mid);
        margin-bottom: 0.75rem;
      }
      .books-page-link {
        display: block;
        text-align: center;
        margin-top: 3rem;
      }

      /* CLIENT PORTAL MODAL */
      .portal-modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(14, 27, 44, 0.88);
        z-index: 3000;
        align-items: center;
        justify-content: center;
        padding: 2rem;
      }
      .portal-modal.open {
        display: flex;
      }
      .portal-box {
        background: var(--white);
        max-width: 480px;
        width: 100%;
        border-top: 4px solid var(--gold);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
        max-height: 90vh;
        overflow-y: auto;
      }
      .portal-inner {
        padding: 2.5rem 2.5rem 2rem;
      }
      .portal-close {
        float: right;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--light);
        cursor: pointer;
        margin-top: -0.5rem;
        margin-right: -0.5rem;
      }
      .portal-close:hover {
        color: var(--navy);
      }
      .portal-label {
        font-family: var(--sans);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--gold-mid);
        margin-bottom: 0.6rem;
        clear: both;
      }
      .portal-box h2 {
        font-family: var(--serif);
        font-size: 1.7rem;
        font-weight: 400;
        color: var(--navy);
        margin-bottom: 0.5rem;
      }
      .portal-box p {
        font-family: var(--sans);
        font-size: 0.875rem;
        font-weight: 300;
        color: var(--mid);
        line-height: 1.8;
        margin-bottom: 1.25rem;
      }
      .form-field {
        margin-bottom: 0.75rem;
      }
      .form-field label {
        font-family: var(--sans);
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--charcoal);
        display: block;
        margin-bottom: 0.3rem;
      }
      .form-field input {
        width: 100%;
        font-family: var(--sans);
        font-size: 0.875rem;
        font-weight: 300;
        border: 1px solid rgba(0, 0, 0, 0.18);
        padding: 0.75rem 1rem;
        background: var(--cream);
        color: var(--charcoal);
        outline: none;
        transition: border-color 0.2s;
      }
      .form-field input:focus {
        border-color: var(--gold);
      }
      .form-divider {
        text-align: center;
        font-family: var(--sans);
        font-size: 0.75rem;
        color: var(--light);
        margin: 0.75rem 0;
        letter-spacing: 0.08em;
      }
      .portal-note {
        font-family: var(--sans);
        font-size: 0.75rem;
        color: var(--light);
        text-align: center;
        margin-top: 0.6rem;
      }

      /* CLIENT DASHBOARD (shown after login demo) */
      .dashboard {
        display: none;
      }
      .dashboard.open {
        display: block;
      }
      .dash-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      }
      .dash-welcome {
        font-family: var(--serif);
        font-size: 1.3rem;
        color: var(--navy);
      }
      .dash-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem;
        margin-bottom: 1.5rem;
      }
      .dash-card {
        background: var(--cream);
        padding: 1rem 1.25rem;
        border-left: 3px solid var(--gold);
      }
      .dash-card-label {
        font-family: var(--sans);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--gold-mid);
        margin-bottom: 0.3rem;
      }
      .dash-card-value {
        font-family: var(--serif);
        font-size: 1.1rem;
        color: var(--navy);
      }
      .dash-card-sub {
        font-family: var(--sans);
        font-size: 0.75rem;
        color: var(--mid);
        margin-top: 0.15rem;
      }
      .dash-section-h {
        font-family: var(--sans);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--charcoal);
        margin: 1.25rem 0 0.6rem;
      }
      .dash-action-row {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1rem;
      }
      .dash-action {
        font-family: var(--sans);
        font-size: 0.875rem;
        font-weight: 300;
        color: var(--navy);
        padding: 0.65rem 1rem;
        background: var(--warm);
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        transition: background 0.2s;
        border: none;
        width: 100%;
        text-align: left;
      }
      .dash-action:hover {
        background: var(--cream);
      }
      .dash-action span {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--gold-mid);
      }

      /* SCHEDULING MODAL */
      .sched-modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(253, 249, 244, 0.92);
        backdrop-filter: blur(6px);
        z-index: 4000;
        align-items: center;
        justify-content: center;
        padding: 2rem;
      }
      .sched-modal.open {
        display: flex;
      }
      .sched-box {
        background: var(--white);
        max-width: 680px;
        width: 100%;
        border-top: 4px solid var(--gold);
        box-shadow: 0 20px 60px rgba(14, 27, 44, 0.15);
        max-height: 90vh;
        overflow-y: auto;
      }
      .sched-inner {
        padding: 2.5rem;
      }
      .sched-close {
        float: right;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--light);
        cursor: pointer;
      }
      .sched-close:hover {
        color: var(--navy);
      }
      .sched-label {
        font-family: var(--sans);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--gold-mid);
        margin-bottom: 0.5rem;
        clear: both;
      }
      .sched-box h2 {
        font-family: var(--serif);
        font-size: 1.6rem;
        font-weight: 400;
        color: var(--navy);
        margin-bottom: 0.4rem;
      }
      .sched-box .body-text {
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
      }
      .sched-steps {
        display: flex;
        gap: 0;
        margin-bottom: 1.75rem;
      }
      .sched-step {
        flex: 1;
        padding: 0.5rem 0.75rem;
        font-family: var(--sans);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--light);
        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
        text-align: center;
      }
      .sched-step.active {
        color: var(--navy);
        border-bottom: 2px solid var(--gold);
      }
      .service-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
      }
      .service-opt {
        padding: 1rem;
        border: 1px solid rgba(0, 0, 0, 0.12);
        cursor: pointer;
        transition: all 0.2s;
        font-family: var(--sans);
        background: var(--white);
        text-align: left;
      }
      .service-opt:hover,
      .service-opt.selected {
        border-color: var(--gold);
        background: rgba(253, 186, 33, 0.06);
      }
      .service-opt h4 {
        font-family: var(--sans);
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--navy);
        margin-bottom: 0.2rem;
      }
      .service-opt p {
        font-family: var(--sans);
        font-size: 0.775rem;
        color: var(--mid);
        font-weight: 300;
      }
      .cal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
      }
      .cal-header h3 {
        font-family: var(--serif);
        font-size: 1.1rem;
        color: var(--navy);
      }
      .cal-nav {
        background: none;
        border: none;
        font-size: 1rem;
        cursor: pointer;
        color: var(--navy);
        padding: 0.25rem 0.5rem;
      }
      .cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
        margin-bottom: 1rem;
      }
      .cal-day-name {
        font-family: var(--sans);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--light);
        text-align: center;
        padding: 0.35rem 0;
      }
      .cal-day {
        font-family: var(--sans);
        font-size: 0.875rem;
        padding: 0.5rem;
        text-align: center;
        border-radius: 4px;
        cursor: pointer;
        color: var(--charcoal);
        border: none;
        background: none;
        transition: all 0.2s;
      }
      .cal-day:hover {
        background: var(--warm);
      }
      .cal-day.available {
        font-weight: 600;
        color: var(--navy);
      }
      .cal-day.selected {
        background: var(--gold);
        color: var(--navy);
        font-weight: 700;
      }
      .cal-day.empty {
        color: transparent;
        cursor: default;
      }
      .cal-day.past {
        color: var(--light);
        cursor: default;
      }
      .time-slots {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        margin-bottom: 1.5rem;
      }
      .time-slot {
        font-family: var(--sans);
        font-size: 0.8rem;
        font-weight: 600;
        padding: 0.6rem;
        border: 1px solid rgba(0, 0, 0, 0.12);
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        background: var(--white);
        color: var(--navy);
      }
      .time-slot:hover,
      .time-slot.selected {
        background: var(--navy);
        color: var(--white);
        border-color: var(--navy);
      }
      .tz-note {
        font-family: var(--sans);
        font-size: 0.775rem;
        color: var(--mid);
        margin-bottom: 1.5rem;
      }
      .confirm-details {
        background: var(--cream);
        padding: 1.25rem;
        margin-bottom: 1.25rem;
      }
      .confirm-row {
        display: flex;
        justify-content: space-between;
        font-family: var(--sans);
        font-size: 0.875rem;
        padding: 0.4rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      }
      .confirm-row:last-child {
        border-bottom: none;
      }
      .confirm-label {
        color: var(--mid);
        font-weight: 300;
      }
      .confirm-value {
        color: var(--navy);
        font-weight: 600;
      }
      .zoom-note {
        font-family: var(--sans);
        font-size: 0.8rem;
        color: var(--mid);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1.25rem;
      }
      .zoom-badge {
        background: #2d8cff;
        color: white;
        font-family: var(--sans);
        font-size: 0.7rem;
        font-weight: 700;
        padding: 0.2rem 0.6rem;
        letter-spacing: 0.04em;
      }

      /* ASSESSMENT POPUP */
      .overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(253, 249, 244, 0.9);
        backdrop-filter: blur(6px);
        z-index: 2000;
        align-items: center;
        justify-content: center;
        padding: 2rem;
      }
      .overlay.open {
        display: flex;
      }
      .popup {
        background: var(--white);
        max-width: 560px;
        width: 100%;
        position: relative;
        border-top: 5px solid var(--gold);
        box-shadow: 0 20px 60px rgba(14, 27, 44, 0.15);
        overflow: hidden;
      }
      .popup-inner {
        padding: 2.75rem 3rem 2.5rem;
      }
      .popup-close {
        position: absolute;
        top: 1rem;
        right: 1.25rem;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--light);
        cursor: pointer;
        line-height: 1;
        transition: color 0.2s;
      }
      .popup-close:hover {
        color: var(--navy);
      }
      .popup-label {
        font-family: var(--sans);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--gold-mid);
        margin-bottom: 0.75rem;
      }
      .popup h2 {
        font-family: var(--serif);
        font-size: 1.8rem;
        font-weight: 400;
        color: var(--navy);
        line-height: 1.25;
        margin-bottom: 0.85rem;
      }
      .popup-intro {
        font-family: var(--sans);
        font-size: 0.9rem;
        font-weight: 300;
        line-height: 1.85;
        color: var(--mid);
        margin-bottom: 1.5rem;
      }
      .popup-qs {
        margin-bottom: 1.5rem;
      }
      .popup-q {
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        font-family: var(--sans);
        font-size: 0.875rem;
        font-weight: 300;
        color: var(--charcoal);
        line-height: 1.5;
      }
      .q-circle {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 1.5px solid var(--gold);
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--gold-mid);
        margin-top: 1px;
      }
      .popup-note {
        font-family: var(--serif);
        font-size: 1rem;
        font-style: italic;
        color: var(--navy);
        margin-bottom: 1.25rem;
        line-height: 1.65;
      }
      .popup-form {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
      }
      .popup-form input {
        font-family: var(--sans);
        font-size: 0.9rem;
        font-weight: 300;
        border: 1px solid rgba(0, 0, 0, 0.15);
        padding: 0.8rem 1rem;
        background: var(--cream);
        color: var(--charcoal);
        outline: none;
        transition: border-color 0.2s;
      }
      .popup-form input:focus {
        border-color: var(--gold);
      }
      .popup-submit {
        font-family: var(--sans);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--white);
        background: var(--navy);
        border: none;
        padding: 1rem;
        cursor: pointer;
        margin-top: 0.25rem;
        transition: background 0.2s;
      }
      .popup-submit:hover {
        background: var(--gold-mid);
      }
      .popup-fine {
        font-family: var(--sans);
        font-size: 0.75rem;
        color: var(--light);
        text-align: center;
        margin-top: 0.65rem;
      }

      /* CONNECT, CORP, FOOTER */
      .connect-section {
        background: var(--warm);
        padding: 5.5rem 4vw;
        text-align: center;
      }
      .corp-strip {
        background: var(--navy);
        padding: 3rem 4vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 2rem;
      }
      .corp-left h3 {
        font-family: var(--serif);
        font-size: 1.5rem;
        font-weight: 400;
        color: var(--white);
        margin-bottom: 0.4rem;
      }
      .corp-left h3 em {
        font-style: italic;
        color: var(--gold);
      }
      .corp-left p {
        font-family: var(--sans);
        font-size: 0.875rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.55);
      }
      .corp-link {
        font-family: var(--serif);
        font-size: 1rem;
        font-style: italic;
        color: var(--gold);
        text-decoration: none;
        margin-right: 1.5rem;
      }
      .corp-link:hover {
        text-decoration: underline;
      }
      footer {
        background: #07111d;
        padding: 2rem 3.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
      }
      .footer-logo {
        font-family: var(--serif);
        font-size: 1rem;
        color: var(--gold);
      }
      .footer-copy {
        font-family: var(--sans);
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.25);
      }
      .footer-nav {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
      }
      .footer-nav a {
        font-family: var(--sans);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.3);
        text-decoration: none;
        transition: color 0.2s;
      }
      .footer-nav a:hover {
        color: var(--gold);
      }

      /* BOOKS PAGE */
      .books-page {
        display: none;
        min-height: 100vh;
        background: var(--white);
        padding-top: 80px;
      }
      .books-page.open {
        display: block;
      }
      .books-page-hero {
        background: var(--navy);
        padding: 4rem 4vw 3rem;
        text-align: center;
      }
      .books-page-hero h1 {
        font-family: var(--serif);
        font-size: 2.5rem;
        font-weight: 400;
        color: var(--white);
        margin-bottom: 0.75rem;
      }
      .books-page-hero h1 em {
        font-style: italic;
        color: var(--gold);
      }
      .books-page-hero p {
        font-family: var(--sans);
        font-size: 1rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.6);
        max-width: 520px;
        margin: 0 auto;
      }
      .book-full {
        max-width: 900px;
        margin: 0 auto;
        padding: 4rem 4vw;
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 3.5rem;
        align-items: start;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
      }
      .book-full:last-child {
        border-bottom: none;
      }
      .book-full-cover {
        width: 100%;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        border-top: 4px solid var(--gold);
      }
      .book-full-title {
        font-family: var(--serif);
        font-size: 1.7rem;
        font-weight: 400;
        color: var(--navy);
        line-height: 1.2;
        margin-bottom: 0.5rem;
      }
      .book-full-sub {
        font-family: var(--sans);
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        color: var(--gold-mid);
        text-transform: uppercase;
        margin-bottom: 0.35rem;
      }
      .book-full-author {
        font-family: var(--sans);
        font-size: 0.85rem;
        font-weight: 300;
        color: var(--mid);
        margin-bottom: 1.25rem;
        font-style: italic;
      }
      .book-full-desc {
        font-family: var(--sans);
        font-size: 0.95rem;
        font-weight: 300;
        line-height: 1.95;
        color: var(--mid);
        margin-bottom: 1.75rem;
      }
      .book-btns {
        display: flex;
        gap: 0.85rem;
        flex-wrap: wrap;
      }
      .back-btn {
        font-family: var(--sans);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--navy);
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0;
        margin-bottom: 2rem;
      }
      .back-btn:hover {
        color: var(--gold-mid);
      }

      @media (max-width: 900px) {
        nav {
          padding: 0.75rem 1.5rem;
        }
        .nav-links {
          display: none;
        }
        .letter-layout,
        .offerings-intro,
        .schedule-inner {
          grid-template-columns: 1fr;
          gap: 2.5rem;
        }
        .pillars-grid,
        .offerings-grid {
          grid-template-columns: 1fr;
        }
        .books-shelf {
          grid-template-columns: repeat(2, 1fr);
        }
        .section {
          padding: 4rem 4vw;
        }
        .hero h1 {
          font-size: 2.6rem;
        }
        .book-full {
          grid-template-columns: 1fr;
          gap: 2rem;
        }
        .schedule-features {
          grid-template-columns: 1fr;
        }
        .service-options,
        .time-slots {
          grid-template-columns: 1fr 1fr;
        }
        .dash-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ─── SECTION-SCOPED OVERRIDES (moved from inline styles) ─── */

      /* Two-tone heading sizes per section */
      .letter-section .two-tone { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.5rem; }
      .framework-intro .two-tone { font-size: clamp(1.9rem, 3.5vw, 2.7rem); margin-bottom: 1rem; }
      .offerings-intro .two-tone { font-size: clamp(1.9rem, 3.5vw, 2.7rem); }
      .books-section .two-tone { font-size: clamp(1.9rem, 3.5vw, 2.7rem); margin-bottom: 0.75rem; }
      .connect-section .two-tone { font-size: clamp(1.9rem, 3.5vw, 2.7rem); align-items: center; text-align: center; margin-bottom: 1.5rem; }

      /* Body-text overrides per section */
      .framework-intro .body-text { text-align: center; }
      .books-section .body-text { max-width: 100%; margin-bottom: 0; }
      .connect-section .body-text { max-width: 520px; margin: 0 auto 2.5rem; text-align: center; }

      /* Section-label overrides */
      .schedule-text .section-label { color: var(--gold); }
      .connect-section .section-label { text-align: center; }

      /* CTA row */
      .connect-section .cta-row { justify-content: center; }

      /* Books page nav */
      .books-page nav {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 3rem;
        background: rgba(255, 255, 255, 0.97);
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        box-shadow: none;
      }

      /* Portal modal buttons */
      .portal-inner .btn-navy { width: 100%; margin-top: 0.5rem; font-size: 0.8rem; }
      .portal-inner .btn-outline { width: 100%; font-size: 0.8rem; }

      /* Portal sign-out button */
      .portal-signout {
        font-family: var(--sans);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--mid);
        background: none;
        border: none;
        cursor: pointer;
      }

      /* Calendar add-to-calendar buttons row */
      .cal-add-buttons {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.35rem;
        flex-wrap: wrap;
      }
      .sched-next-btn { font-size: 0.8rem; }
      .sched-confirm-btn { width: 100%; margin-top: 0.5rem; font-size: 0.8rem; }