/* =========================================================================
   WEALTHY DNA — MASTER STYLESHEET
   One file, sectioned per page. Search the ALL-CAPS section headers below
   to jump to a page's styles.

   INDEX
   -----
   1.  RESET & BASE
   2.  DESIGN TOKENS
   3.  TYPOGRAPHY
   4.  LAYOUT UTILITIES
   5.  BUTTONS & FORM ELEMENTS
   6.  SITE HEADER / NAV
   7.  SITE FOOTER
   8.  HOME PAGE
   9.  ABOUT PAGE
   10. SERVICES PAGE
   11. CONTACT PAGE
   12. LEGAL PAGE
   13. COURSES PAGE
   14. TESTIMONIALS PAGE
   15. BLOG PAGE
   16. BLOG DETAIL PAGE
   17. RESPONSIVE (MAX-WIDTH QUERIES)
   18. ACCESSIBILITY / MOTION
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. RESET & BASE
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
img {
    max-width: 100%;
    display: block;
}
a {
    color: inherit;
    text-decoration: none;
}
button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
input,
textarea,
select {
    font: inherit;
    color: inherit;
}
svg {
    display: block;
}

/* -------------------------------------------------------------------------
   2. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
    /* Navy — from the Wealthy DNA mark */
    --navy-950: #070f18;
    --navy-900: #0d1f31;
    --navy-800: #16283d;
    --navy-700: #203a56;
    --navy-600: #2c4c6e;

    /* Gold — from the ascending arrow */
    --gold-700: #8f6a17;
    --gold-600: #b1861f;
    --gold-500: #c9a227;
    --gold-400: #dbb94a;
    --gold-300: #e8c468;
    --gold-200: #f1dc9c;

    /* Neutrals */
    --cream: #f6f3ea;
    --cream-deep: #efe9d8;
    --white: #ffffff;
    --ink: #101b27;
    --slate: #526174;
    --slate-light: #8593a2;
    --line: #e2ddcd;
    --line-dark: rgba(232, 196, 104, 0.16);

    /* Gradients */
    --grad-gold: linear-gradient(120deg, var(--gold-600), var(--gold-300) 55%, var(--gold-500));
    --grad-navy: linear-gradient(160deg, var(--navy-950), var(--navy-800) 65%, var(--navy-700));

    /* Type */
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Rhythm */
    --section-pad: clamp(64px, 9vw, 120px);
    --container: 1330px;
    --radius-sm: 4px;
    --radius-md: 10px;

    --shadow-soft: 0 24px 48px -24px rgba(7, 15, 24, 0.35);
}

/* -------------------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------------------- */
body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--white);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--navy-950);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-600);
}
.eyebrow::before {
    content: "";
    width: 26px;
    height: 1.5px;
    background: var(--gold-500);
    display: inline-block;
}
.on-dark .eyebrow {
    color: var(--gold-300);
}

.section-head {
    max-width: 640px;
    margin-bottom: 48px;
}
.section-head.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.section-head h2 {
    font-size: clamp(30px, 3.4vw, 44px);
    margin-top: 14px;
}
.section-head p {
    margin-top: 16px;
    font-size: 17px;
    color: var(--slate);
    max-width: 54ch;
}
.on-dark .section-head p {
    color: #b7c2cf;
}
.section-head.center p {
    margin-left: auto;
    margin-right: auto;
}

.lede {
    font-size: 19px;
    color: var(--slate);
    max-width: 60ch;
}

/* -------------------------------------------------------------------------
   4. LAYOUT UTILITIES
   ------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 28px;
}
.section {
    padding: var(--section-pad) 0;
}
.bg-cream {
    background: var(--cream);
}
.bg-white {
    background: var(--white);
}
.bg-navy {
    background: var(--grad-navy);
    color: #dbe3ea;
}
.bg-navy h2,
.bg-navy h3,
.bg-navy h4 {
    color: var(--white);
}
.on-dark {
    color: #c3cdd8;
}

.grid {
    display: grid;
    gap: 32px;
}
.hairline {
    border: 1px solid var(--line);
}
.divider {
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 0;
}
.divider.on-dark {
    background: var(--line-dark);
}

/* -------------------------------------------------------------------------
   5. BUTTONS & FORM ELEMENTS
   ------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    font-weight: 700;
    font-size: 14.5px;
    border-radius: 3px;
    border: 1.5px solid transparent;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    white-space: nowrap;
}
.btn-gold {
    background: var(--grad-gold);
    color: var(--navy-950);
    box-shadow: 0 14px 28px -12px rgba(201, 162, 39, 0.55);
}
.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -12px rgba(201, 162, 39, 0.7);
}

.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--white);
}
.btn-outline-light:hover {
    border-color: var(--gold-300);
    color: var(--gold-300);
}

.btn-outline-dark {
    border-color: var(--navy-800);
    color: var(--navy-900);
}
.btn-outline-dark:hover {
    border-color: var(--gold-600);
    color: var(--gold-700);
}

.btn-sm {
    padding: 11px 22px;
    font-size: 13.5px;
}
.btn-block {
    width: 100%;
}

.btn-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.field label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy-800);
    letter-spacing: 0.02em;
}
.field input,
.field textarea,
.field select {
    padding: 13px 16px;
    border: 1.5px solid var(--line);
    border-radius: 3px;
    background: var(--white);
    font-size: 15px;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
}

/* -------------------------------------------------------------------------
   6. SITE HEADER / NAV
   ------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--gold-500);
    color: var(--navy-950);
    padding: 12px 18px;
    z-index: 999;
    font-weight: 700;
}
.skip-link:focus {
    left: 12px;
    top: 12px;
}

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: linear-gradient(180deg, rgb(252 252 252) 0%, rgb(255 255 255) 100%);
    border-bottom: 1px solid rgba(232, 196, 104, 0.14);
    transition:
        background-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease,
        padding 0.35s ease,
        border-color 0.35s ease;
    padding: 20px 0;
}
.site-header.is-scrolled {
    background: rgb(255 255 255);
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.65);
    border-bottom-color: rgba(232, 196, 104, 0.28);
    padding: 12px 0;
}
.header-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.brand-mark {
    width: 100%;
    height: 72px;
}
.brand-word {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -0.01em;
    color: var(--white);
}
.brand-word-accent {
    color: var(--gold-400);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 22px;
}
.nav-link {
    font-size: 14px;
    font-weight: 600;
    color: #14273c;
    position: relative;
    padding: 6px 0;
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    background: var(--gold-400);
    transition: right 0.28s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after {
    right: 0;
}
.nav-link.is-active {
    color: #16273c;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}
.nav-toggle span {
    width: 22px;
    height: 2px;
    background: var(--navy-900);
    display: block;
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* -------------------------------------------------------------------------
   7. SITE FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
    background-color: #ffffff;
    color: #93a0ad;
    padding-top: 76px;
}
.footer-top {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 28px 48px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 40px;
}
.footer-brand .brand-word {
    color: var(--white);
}
.footer-tagline {
    margin-top: 16px;
    font-size: 14.5px;
    line-height: 1.7;
    max-width: 30ch;
    color: #1c334c;
}
.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}
.footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    fill: #182a3f;
    transition:
        border-color 0.25s ease,
        fill 0.25s ease;
}
.footer-social a:hover {
    border-color: var(--gold-400);
    fill: var(--gold-400);
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.footer-col h3 {
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-300);
    margin-bottom: 4px;
}
.footer-col a,
.footer-col span {
    font-size: 14.5px;
    color: #081019;
}
.footer-col a:hover {
    color: var(--gold-300);
}
.footer-contact span {
    line-height: 1.6;
}

.footer-disclaimer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 26px 28px;
}
.footer-disclaimer p {
    max-width: var(--container);
    margin: 0 auto;
    font-size: 12.5px;
    line-height: 1.7;
    color: #64717d;
}

.footer-bottom {
    /*max-width: var(--container);*/
    margin: 0 auto;
    background: #192d45;
    padding: 22px 28px 30px;
    /* display: flex; */
    justify-content: space-between;
    font-size: 13px;
    color: #5c6975;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-credit {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--gold-500);
}

/* =========================================================================
   8. HOME PAGE
   ========================================================================= */

/* --- 8.1 Hero --- */
.hero {
    position: relative;
    background: var(--grad-navy);
    color: var(--white);
    padding: 168px 0 0;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(600px 400px at 85% 15%, rgba(201, 162, 39, 0.16), transparent 60%),
        radial-gradient(500px 500px at 5% 95%, rgba(201, 162, 39, 0.08), transparent 60%);
    pointer-events: none;
}
.hero-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 28px 64px;
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-300);
}
.hero-tag::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--gold-400);
}

.hero-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(46px, 6.4vw, 84px);
    line-height: 0.98;
    color: var(--white);
    margin-top: 18px;
}
.hero-role {
    display: block;
    margin-top: 12px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gold-300);
}
.hero-copy .lede {
    color: #c2ccd7;
    margin-top: 22px;
    max-width: 48ch;
}
.hero-copy .btn-row {
    margin-top: 32px;
}

/* Photo — borderless, blended into the dark background with a soft glow */
.hero-visual {
    position: relative;
    height: 480px;
}
.hero-visual::before {
    content: "";
    position: absolute;
    inset: -12%;
    background: radial-gradient(420px 420px at 58% 38%, rgba(201, 162, 39, 0.32), transparent 70%);
    z-index: 0;
}
.hero-photo {
    position: relative;
    height: 100%;
    z-index: 1;
}
.hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    -webkit-mask-image: radial-gradient(ellipse 78% 88% at 58% 32%, black 58%, transparent 100%);
    mask-image: radial-gradient(ellipse 78% 88% at 58% 32%, black 58%, transparent 100%);
}

.hero-card {
    position: absolute;
    bottom: 6px;
    left: 4px;
    z-index: 3;
    background: rgba(13, 31, 49, 0.8);
    border: 1px solid rgba(232, 196, 104, 0.3);
    backdrop-filter: blur(6px);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    min-width: 210px;
}
.hero-card span {
    font-size: 12px;
    color: #9aa6b2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.hero-card strong {
    display: block;
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--white);
    margin-top: 6px;
}
.hero-card strong small {
    color: var(--gold-300);
    font-size: 15px;
    margin-left: 6px;
}

/* Feature strip — sits inside the hero, below the name/photo row */
.hero-feature-strip {
    position: relative;
    border-top: 1px solid var(--line-dark);
    padding: 34px 0 30px;
}
.hero-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.hero-feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 0 26px;
    border-right: 1px solid var(--line-dark);
}
.hero-feature:first-child {
    padding-left: 0;
}
.hero-feature:last-child {
    border-right: none;
    padding-right: 0;
}
.hero-feature .ico {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(232, 196, 104, 0.12);
    color: var(--gold-300);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-feature h4 {
    font-size: 15px;
    color: var(--white);
}
.hero-feature p {
    font-size: 13px;
    color: #9aa6b2;
    margin-top: 4px;
    line-height: 1.55;
}

.hero-teach-line {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line-dark);
    font-size: 13px;
    color: #9aa6b2;
    letter-spacing: 0.02em;
}
.hero-teach-line strong {
    color: var(--gold-300);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    margin-right: 12px;
}

/* --- 8.2 About teaser --- */
.about-teaser {
    background: var(--cream);
}
.about-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 64px;
    align-items: center;
}
.about-figure {
    position: relative;
    border: 1px solid var(--line);
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 40px 34px;
}
.about-figure .quote-mark {
    font-family: var(--font-display);
    font-size: 90px;
    line-height: 1;
    color: var(--gold-300);
}
.about-figure p {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.5;
    color: var(--navy-900);
    margin-top: -18px;
}
.about-figure footer {
    margin-top: 24px;
    font-size: 13.5px;
    color: var(--slate);
    border-top: 1px solid var(--line);
    padding-top: 16px;
}
.about-copy p {
    color: var(--slate);
    font-size: 16.5px;
    margin-top: 16px;
    line-height: 1.75;
}
.about-copy .btn {
    margin-top: 28px;
}

/* --- 8.3 Services --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.service-card {
    background: var(--white);
    padding: 38px 30px;
    transition: background-color 0.3s ease;
}
.service-card:hover {
    background: var(--cream);
}
.service-index {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--gold-600);
    font-weight: 600;
}
.service-card h3 {
    font-size: 20px;
    margin-top: 16px;
}
.service-card p {
    margin-top: 12px;
    font-size: 14.5px;
    color: var(--slate);
    line-height: 1.65;
}
.service-card a.card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy-800);
}
.service-card a.card-link:hover {
    color: var(--gold-600);
}

/* Generic card-link — same look, usable outside .service-card (blog cards, article footer, etc.) */
.card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy-800);
}
.card-link:hover {
    color: var(--gold-600);
}

/* --- 8.4 Why Us --- */
.why-us {
    background: var(--grad-navy);
    color: #c9d2db;
}
.why-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: start;
}
.why-list {
    display: flex;
    flex-direction: column;
}
.why-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 20px;
    padding: 26px 0;
    border-top: 1px solid var(--line-dark);
}
.why-item:last-child {
    border-bottom: 1px solid var(--line-dark);
}
.why-icon {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(232, 196, 104, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-300);
}
.why-item h4 {
    color: var(--white);
    font-size: 18px;
}
.why-item p {
    margin-top: 8px;
    font-size: 14.5px;
    color: #9fabb8;
    line-height: 1.65;
}

/* --- 8.5 Approach (stepper) --- */
.approach {
    background: var(--cream);
}
.approach-track {
    position: relative;
}
.approach-track::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--line) 0%, var(--gold-400) 15%, var(--gold-400) 85%, var(--line) 100%);
}
.approach-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
}
.approach-step {
    padding-top: 0;
}
.approach-num {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--navy-900);
    color: var(--gold-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 18px;
    position: relative;
    z-index: 1;
}
.approach-step h4 {
    margin-top: 22px;
    font-size: 18.5px;
}
.approach-step p {
    margin-top: 10px;
    font-size: 14.5px;
    color: var(--slate);
    line-height: 1.65;
}

/* --- 8.6 Expertise --- */
.expertise {
    background: var(--white);
}
.expertise-feature {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--white);
}
.expertise-feature-visual {
    height: 100%;
    min-height: 380px;
    overflow: hidden;
}
.expertise-feature-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.expertise-feature-copy {
    padding: 40px 44px 40px 0;
}
.expertise-feature-copy .tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gold-700);
    background: var(--cream-deep);
    padding: 5px 12px;
    border-radius: 3px;
}
.expertise-feature-copy h3 {
    margin-top: 16px;
    font-size: clamp(26px, 2.8vw, 34px);
}
.expertise-feature-sub {
    margin-top: 6px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--slate-light);
    letter-spacing: 0.02em;
}
.expertise-feature-copy > p:not(.expertise-feature-sub) {
    margin-top: 16px;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--slate);
    max-width: 52ch;
}
.expertise-feature-list {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.expertise-feature-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14.5px;
    color: var(--navy-800);
    line-height: 1.5;
}
.expertise-feature-list li svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--gold-600);
}
.expertise-feature-copy .btn {
    margin-top: 28px;
}

/* --- 8.7 Risk Management --- */
.risk {
    background: var(--navy-950);
    color: #c9d2db;
    position: relative;
    overflow: hidden;
}
.risk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.risk-copy p {
    margin-top: 18px;
    color: #a3aebb;
    font-size: 16px;
    line-height: 1.75;
}
.risk-points {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.risk-point {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: 15px;
    color: #dbe3ea;
}
.risk-point svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--gold-400);
}
.risk-panel {
    border: 1px solid rgba(232, 196, 104, 0.22);
    border-radius: var(--radius-md);
    padding: 40px;
    background: linear-gradient(180deg, rgba(232, 196, 104, 0.06), transparent);
}
.risk-panel .big-num {
    font-family: var(--font-display);
    font-size: 64px;
    color: var(--gold-300);
    line-height: 1;
}
.risk-panel .cap {
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8b97a4;
    margin-top: 10px;
    display: block;
}
.risk-panel-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 28px 0;
}
.risk-panel-row {
    display: flex;
    justify-content: space-between;
    font-size: 14.5px;
    padding: 10px 0;
    color: #b3bdc9;
}
.risk-panel-row strong {
    color: var(--white);
}

/* --- 8.8 Stats band --- */
.stats-band {
    background: var(--grad-gold);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
}
.stat-item {
    padding: 8px 20px;
    border-right: 1px solid rgba(7, 15, 24, 0.15);
}
.stat-item:last-child {
    border-right: none;
}
.stat-num {
    font-family: var(--font-display);
    font-size: clamp(34px, 4vw, 50px);
    color: var(--navy-950);
    font-weight: 700;
}
.stat-label {
    margin-top: 8px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: rgba(7, 15, 24, 0.72);
}

/* --- 8.9 Testimonials --- */
.testimonials {
    background: var(--cream);
}
.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
}
.testi-card {
    padding: 40px 34px 10px;
    border-right: 1px solid var(--line);
}
.testi-card:last-child {
    border-right: none;
}
.testi-card .quote-mark {
    font-family: var(--font-display);
    font-size: 48px;
    color: var(--gold-400);
    line-height: 1;
}
.testi-card p {
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.55;
    color: var(--navy-900);
    margin-top: -8px;
}
.testi-name {
    margin-top: 22px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy-800);
}
.testi-role {
    font-size: 13px;
    color: var(--slate);
    margin-top: 2px;
}

/* --- 8.10 FAQ --- */
.faq {
    background: var(--white);
}
.faq-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
}
.faq-list {
    display: flex;
    flex-direction: column;
}
.faq-item {
    border-bottom: 1px solid var(--line);
}
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 4px;
    text-align: left;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--navy-950);
}
.faq-q .plus {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-left: 20px;
}
.faq-q .plus::before,
.faq-q .plus::after {
    content: "";
    position: absolute;
    background: var(--gold-600);
    transition: transform 0.3s ease;
}
.faq-q .plus::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
}
.faq-q .plus::after {
    left: 50%;
    top: 0;
    height: 100%;
    width: 2px;
    margin-left: -1px;
}
.faq-item.is-open .plus::after {
    transform: rotate(90deg);
    opacity: 0;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.faq-answer p {
    padding: 0 4px 24px;
    font-size: 15px;
    color: var(--slate);
    line-height: 1.7;
    max-width: 60ch;
}

/* --- 8.11 Final CTA --- */
.cta-band {
    background: var(--grad-navy);
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 300px at 50% 0%, rgba(201, 162, 39, 0.18), transparent 65%);
}
.cta-band .container {
    position: relative;
}
.cta-band .eyebrow {
    justify-content: center;
}
.cta-band h2 {
    color: var(--white);
    font-size: clamp(30px, 4vw, 46px);
    margin-top: 16px;
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
}
.cta-band p {
    margin-top: 16px;
    color: #b9c3cf;
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
}
.cta-band .btn-row {
    justify-content: center;
    margin-top: 32px;
}

/* =========================================================================
   9. ABOUT PAGE
   ========================================================================= */

/* Shared inner-page hero — angled bottom edge is the site's signature cut,
   echoing the upward arrow in the mark. Reused on About/Services/Contact/Legal. */
.page-hero {
    position: relative;
    background: var(--grad-navy);
    color: var(--white);
    padding: 152px 0 130px;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(560px 360px at 88% 10%, rgba(201, 162, 39, 0.16), transparent 60%);
    pointer-events: none;
}
.page-hero .container {
    position: relative;
}
.page-hero h1 {
    color: var(--white);
    font-size: clamp(34px, 4.4vw, 52px);
    margin-top: 16px;
    max-width: 25ch;
}
.page-hero p {
    margin-top: 18px;
    color: #c2ccd7;
    font-size: 17px;
    max-width: 58ch;
}
.page-hero .crumb {
    font-size: 13px;
    color: #8b97a4;
    margin-top: 4px;
}
.page-hero .crumb a {
    color: #b7c2cf;
}
.page-hero .crumb a:hover {
    color: var(--gold-300);
}

/* Signature divider — a small ascending tick with a dot, used between
   sections in place of a plain flat border. Ties back to the logo's arrow. */
.signature-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 0 46px;
}
.signature-divider svg {
    color: var(--gold-500);
}
.signature-divider::before,
.signature-divider::after {
    content: "";
    width: clamp(60px, 14vw, 160px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line));
}
.signature-divider::after {
    background: linear-gradient(90deg, var(--line), transparent);
}

.company-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 60px;
    align-items: center;
}
.company-visual {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 4/3.4;
}
.company-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.company-copy p {
    margin-top: 16px;
    color: var(--slate);
    font-size: 16.5px;
    line-height: 1.75;
}

.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.mv-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 36px 32px;
    background: var(--white);
    position: relative;
    overflow: hidden;
}
.mv-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.12), transparent 70%);
}
.mv-card .mv-icon {
    color: var(--gold-600);
    margin-bottom: 18px;
}
.mv-card h3 {
    font-size: 21px;
}
.mv-card p {
    margin-top: 12px;
    color: var(--slate);
    font-size: 15px;
    line-height: 1.7;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.value-card {
    background: var(--white);
    padding: 34px 26px;
    transition: background-color 0.3s ease;
}
.value-card:hover {
    background: var(--cream);
}
.value-card .num {
    font-family: var(--font-display);
    color: var(--gold-600);
    font-size: 14px;
}
.value-card h4 {
    margin-top: 14px;
    font-size: 17.5px;
}
.value-card p {
    margin-top: 10px;
    font-size: 14px;
    color: var(--slate);
    line-height: 1.6;
}

.difference-list {
    display: flex;
    flex-direction: column;
}
.difference-row {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr 0.9fr;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    align-items: center;
}
.difference-row:last-child {
    border-bottom: 1px solid var(--line);
}
.difference-row.head {
    color: var(--slate-light);
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
}
.difference-row .label {
    font-weight: 700;
    color: var(--navy-900);
    font-size: 15px;
}
.difference-row .yes {
    color: var(--gold-700);
    font-weight: 700;
    font-size: 14.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.difference-row .no {
    color: var(--slate-light);
    font-size: 14.5px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.team-card {
    text-align: left;
}
.team-avatar {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: var(--radius-md);
    background: var(--grad-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    color: var(--gold-300);
    border: 1px solid rgba(232, 196, 104, 0.25);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease;
}
.team-card:hover .team-avatar {
    transform: translateY(-4px);
}
.team-avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(232, 196, 104, 0.1), transparent 60%);
}
.team-card h4 {
    margin-top: 16px;
    font-size: 17px;
}
.team-card .role {
    font-size: 13.5px;
    color: var(--gold-600);
    font-weight: 700;
    margin-top: 3px;
}
.team-card p {
    font-size: 13.5px;
    color: var(--slate);
    margin-top: 8px;
    line-height: 1.6;
}

.journey {
    position: relative;
}
.journey-track {
    position: relative;
    padding-left: 28px;
}
.journey-track::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--line);
}
.journey-item {
    position: relative;
    padding-bottom: 40px;
}
.journey-item:last-child {
    padding-bottom: 0;
}
.journey-item::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold-500);
    border: 3px solid var(--cream);
    box-shadow: 0 0 0 1px var(--gold-500);
}
.journey-item .year {
    font-family: var(--font-display);
    color: var(--gold-700);
    font-size: 15px;
    font-weight: 600;
}
.journey-item h4 {
    margin-top: 6px;
    font-size: 18px;
}
.journey-item p {
    margin-top: 8px;
    color: var(--slate);
    font-size: 14.5px;
    line-height: 1.65;
    max-width: 60ch;
}

/* =========================================================================
   10. SERVICES PAGE
   ========================================================================= */
.services-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.service-detail {
    padding: 70px 0;
}
.service-detail:not(:last-child) {
    border-bottom: 1px solid var(--line);
}
.service-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.service-detail-grid.reverse .service-detail-visual {
    order: 2;
}
.service-detail-visual {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 4/3;
}
.service-detail-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service-detail-copy .tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gold-700);
    background: var(--cream-deep);
    padding: 5px 12px;
    border-radius: 3px;
}
.service-detail-copy h3 {
    margin-top: 16px;
    font-size: clamp(24px, 2.6vw, 32px);
}
.service-detail-copy p {
    margin-top: 14px;
    color: var(--slate);
    font-size: 15.5px;
    line-height: 1.75;
}
.service-detail-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.service-detail-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14.5px;
    color: var(--navy-800);
    list-style: none;
}
.service-detail-list li svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--gold-600);
}

.methodology-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line-dark);
    border: 1px solid var(--line-dark);
}
.method-card {
    background: var(--navy-900);
    padding: 32px 26px;
    transition: background-color 0.3s ease;
}
.method-card:hover {
    background: var(--navy-800);
}
.method-card .n {
    font-family: var(--font-display);
    color: var(--gold-300);
    font-size: 15px;
}
.method-card h4 {
    color: var(--white);
    margin-top: 14px;
    font-size: 17px;
}
.method-card p {
    margin-top: 10px;
    font-size: 13.5px;
    color: #a3aebb;
    line-height: 1.6;
}

.serve-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.serve-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 32px 28px;
    background: var(--white);
    transition:
        border-color 0.3s ease,
        transform 0.3s ease;
}
.serve-card:hover {
    border-color: var(--gold-400);
    transform: translateY(-4px);
}
.serve-card .serve-icon {
    color: var(--gold-600);
}
.serve-card h4 {
    margin-top: 16px;
    font-size: 18.5px;
}
.serve-card p {
    margin-top: 10px;
    font-size: 14.5px;
    color: var(--slate);
    line-height: 1.65;
}

/* =========================================================================
   11. CONTACT PAGE
   ========================================================================= */
.contact-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
}
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.contact-info-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line);
}
.contact-info-item:last-child {
    border-bottom: none;
}
.contact-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cream-deep);
    color: var(--gold-700);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-info-item h4 {
    font-size: 15.5px;
}
.contact-info-item p,
.contact-info-item a {
    margin-top: 4px;
    font-size: 14.5px;
    color: var(--slate);
    display: block;
}
.contact-info-item a:hover {
    color: var(--gold-700);
}

.contact-form-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 40px;
    background: var(--white);
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.form-grid .field.full {
    grid-column: 1 / -1;
}
.form-status {
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--gold-700);
    min-height: 18px;
}

.why-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.why-contact-item {
    text-align: center;
    padding: 10px;
}
.why-contact-item .ico {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(232, 196, 104, 0.35);
    color: var(--gold-300);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}
.why-contact-item h4 {
    color: var(--white);
    font-size: 16.5px;
}
.why-contact-item p {
    margin-top: 8px;
    font-size: 13.5px;
    color: #a3aebb;
    line-height: 1.6;
}

.social-band {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}
.social-band a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy-800);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 12px 22px;
    transition:
        border-color 0.25s ease,
        color 0.25s ease;
}
.social-band a:hover {
    border-color: var(--gold-500);
    color: var(--gold-700);
}
.social-band a svg {
    color: var(--gold-600);
}

.map-embed {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 16/6;
}
.map-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* =========================================================================
   12. LEGAL PAGE
   ========================================================================= */
.legal-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 64px;
    align-items: start;
}

.legal-nav {
    position: sticky;
    top: 112px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 1px solid var(--line);
}
.legal-nav a {
    padding: 10px 20px;
    margin-left: -1px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--slate);
    border-left: 2px solid transparent;
    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}
.legal-nav a:hover {
    color: var(--navy-950);
}
.legal-nav a.is-active {
    color: var(--navy-950);
    border-left-color: var(--gold-500);
}

.legal-content {
    max-width: 74ch;
}

.legal-block {
    padding-bottom: 56px;
    margin-bottom: 56px;
    border-bottom: 1px solid var(--line);
}
.legal-block:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
.legal-block h2 {
    font-size: clamp(26px, 3vw, 34px);
    margin-top: 14px;
}
.legal-block .legal-updated {
    margin-top: 10px;
    font-size: 13px;
    color: var(--slate-light);
}
.legal-block h3 {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 15.5px;
    letter-spacing: -0.01em;
    color: var(--navy-900);
    margin-top: 30px;
    margin-bottom: 4px;
}
.legal-block p {
    margin-top: 12px;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--slate);
}
.legal-block ul {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.legal-block ul li {
    position: relative;
    padding-left: 22px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--slate);
}
.legal-block ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-500);
}

.legal-callout {
    margin-top: 20px;
    padding: 18px 20px;
    background: var(--cream);
    border-left: 3px solid var(--gold-500);
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--navy-900);
}
.legal-callout a {
    color: var(--gold-700);
    font-weight: 700;
    text-decoration: underline;
}

/* =========================================================================
   13. COURSES PAGE
   ========================================================================= */

/* Quick stat strip — deliberately plainer than the homepage's animated
   stats-band, sits right under the page hero. */
.course-stats-strip {
    background: var(--cream);
    border-bottom: 1px solid var(--line);
}
.course-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 30px 0;
}
.course-stat {
    text-align: center;
    border-right: 1px solid var(--line);
}
.course-stat:last-child {
    border-right: none;
}
.course-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--navy-950);
}
.course-stat span {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--slate);
}

/* Track list — a vertical, expandable sequence rather than a card grid,
   so the six courses read as one ordered path instead of six equal choices. */
.track-list {
    border-top: 1px solid var(--line);
}
.track-item {
    border-bottom: 1px solid var(--line);
}
.track-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 26px 6px;
    text-align: left;
    cursor: pointer;
}
.track-num {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--line);
    flex-shrink: 0;
    width: 46px;
    transition: color 0.3s ease;
}
.track-item.is-open .track-num {
    color: var(--gold-500);
}
.track-heading {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.track-badge {
    display: inline-flex;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 2px;
}
.track-badge-beginner {
    background: rgba(44, 76, 110, 0.1);
    color: var(--navy-700);
}
.track-badge-core {
    background: rgba(201, 162, 39, 0.14);
    color: var(--gold-700);
}
.track-badge-mindset {
    background: rgba(133, 147, 162, 0.16);
    color: var(--slate);
}
.track-badge-advanced {
    background: var(--grad-navy);
    color: var(--gold-300);
}
.track-heading h3 {
    font-size: 20px;
}
.track-meta {
    font-size: 13px;
    color: var(--slate-light);
}
.track-toggle-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.track-toggle-icon::before,
.track-toggle-icon::after {
    content: "";
    position: absolute;
    background: var(--navy-800);
    transition: transform 0.3s ease;
}
.track-toggle-icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
}
.track-toggle-icon::after {
    left: 50%;
    top: 0;
    height: 100%;
    width: 2px;
    margin-left: -1px;
}
.track-item.is-open .track-toggle-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}
.track-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.track-body p {
    padding: 0 6px 6px 72px;
    font-size: 15px;
    color: var(--slate);
    line-height: 1.7;
    max-width: 62ch;
}
.track-curriculum {
    padding: 6px 6px 26px 72px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.track-curriculum li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14.5px;
    color: var(--navy-800);
}
.track-curriculum li svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--gold-600);
}

/* -------------------------------------------------------------------------
   Course cards — image-led package-style cards for the Courses page
   ------------------------------------------------------------------------- */
.course-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.course-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition:
        transform 0.35s cubic-bezier(0.22, 0.9, 0.3, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}
.course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 50px -30px rgba(7, 15, 24, 0.35);
    border-color: var(--line-dark);
}
.course-card.is-featured {
    border: 2px solid var(--gold-500);
    box-shadow: 0 24px 46px -28px rgba(201, 162, 39, 0.4);
}
.course-card-ribbon {
    position: absolute;
    top: 16px;
    right: -34px;
    background: var(--grad-gold);
    color: var(--navy-950);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 40px;
    transform: rotate(40deg);
    box-shadow: 0 6px 14px -6px rgba(7, 15, 24, 0.35);
    z-index: 2;
}

.course-card-media {
    position: relative;
    aspect-ratio: 4/3;
    background: var(--cream-deep);
    overflow: hidden;
}
.course-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.course-card:hover .course-card-media img {
    transform: scale(1.05);
}
.course-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 15, 24, 0) 55%, rgba(7, 15, 24, 0.55) 100%);
}
.course-card-num {
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 30px;
    color: #fff;
    line-height: 1;
}
.course-card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.course-card-badge-beginner {
    background: #fff;
    color: var(--navy-700);
}
.course-card-badge-core {
    background: var(--gold-500);
    color: var(--navy-950);
}
.course-card-badge-mindset {
    background: var(--navy-800);
    color: var(--gold-200);
}
.course-card-badge-advanced {
    background: var(--grad-navy);
    color: var(--gold-300);
    border: 1px solid var(--line-dark);
}

.course-card-body {
    padding: 26px 26px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.course-card-title {
    font-size: 20px;
    line-height: 1.3;
}
.course-card-meta {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--slate-light);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.course-card-desc {
    margin-top: 14px;
    font-size: 14.5px;
    color: var(--slate);
    line-height: 1.7;
}

.course-card-divider {
    height: 1px;
    background: var(--line);
    margin: 20px 0 16px;
}
.course-card-list-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy-800);
}
.course-card-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.course-card-list li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--navy-800);
    line-height: 1.5;
}
.course-card-list li svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--gold-600);
}

.course-card-foot {
    margin-top: 22px;
}
.course-card-foot .btn {
    width: 100%;
    justify-content: center;
}

/* Course-card grid responsive rules live in the master
   "17. RESPONSIVE" section below, alongside every other breakpoint. */

/* Fee banner — reused for the Testimonials "share your story" CTA too */
.fee-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: var(--grad-navy);
    border-radius: var(--radius-md);
    padding: 44px 48px;
    color: #fff;
}
.fee-banner h2 {
    color: #fff;
    margin-top: 10px;
    font-size: clamp(22px, 2.4vw, 28px);
    max-width: 26ch;
}
.fee-banner p {
    margin-top: 10px;
    color: #b7c2cf;
    font-size: 14.5px;
    max-width: 46ch;
}
.fee-banner .btn {
    flex-shrink: 0;
}

/* =========================================================================
   14. TESTIMONIALS PAGE
   ========================================================================= */
.spotlight-testi-section {
    padding-top: 64px;
    padding-bottom: 64px;
}
.spotlight-testi {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.spotlight-testi .quote-mark {
    font-family: var(--font-display);
    font-size: 56px;
    color: var(--gold-400);
    line-height: 1;
}
.spotlight-testi p {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.5;
    color: #fff;
    margin-top: -6px;
}
.spotlight-author {
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.spotlight-author strong {
    display: block;
    color: #fff;
    font-size: 14.5px;
}
.spotlight-author span {
    display: block;
    color: #9fabb8;
    font-size: 13px;
    margin-top: 2px;
}

.spotlight-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--grad-gold);
    color: var(--navy-950);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
}
.spotlight-avatar.sm {
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.testi-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 44px;
}
.testi-filters button {
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--slate);
    transition: all 0.2s ease;
}
.testi-filters button:hover {
    border-color: var(--gold-400);
    color: var(--navy-900);
}
.testi-filters button.is-active {
    background: var(--navy-950);
    border-color: var(--navy-950);
    color: #fff;
}

.testi-wall {
    columns: 3;
    column-gap: 24px;
}
.testi-wall-card {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 30px 26px;
    margin-bottom: 24px;
    background: var(--white);
    transition:
        border-color 0.3s ease,
        transform 0.3s ease;
}
.testi-wall-card:hover {
    border-color: var(--gold-400);
    transform: translateY(-3px);
}
.testi-wall-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-600);
}
.testi-wall-card .quote-mark {
    display: block;
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--gold-400);
    line-height: 1;
    margin-top: 8px;
}
.testi-wall-card p {
    font-family: var(--font-display);
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--navy-900);
    margin-top: -4px;
}
.testi-wall-name {
    margin-top: 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy-800);
}
.testi-wall-role {
    font-size: 12.5px;
    color: var(--slate);
    margin-top: 2px;
}
.testi-empty {
    text-align: center;
    color: var(--slate);
    font-size: 15px;
    padding: 20px 0;
}

/* =========================================================================
   15. BLOG PAGE
   ========================================================================= */
.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}
.blog-filters button {
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--slate);
    transition: all 0.2s ease;
}
.blog-filters button:hover {
    border-color: var(--gold-400);
    color: var(--navy-900);
}
.blog-filters button.is-active {
    background: var(--navy-950);
    border-color: var(--navy-950);
    color: #fff;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: start;
}
.blog-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--white);
    transition:
        border-color 0.3s ease,
        transform 0.3s ease;
    display: flex;
    flex-direction: column;
}
.blog-card:hover {
    border-color: var(--gold-400);
    transform: translateY(-4px);
}
.blog-card-media {
    position: relative;
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    flex-shrink: 0;
}
.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.blog-card:hover .blog-card-media img {
    transform: scale(1.05);
}
.blog-card-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(7, 15, 24, 0.78);
    color: var(--gold-300);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
}
.blog-card-body {
    padding: 26px 26px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.blog-card-meta {
    font-size: 12.5px;
    color: var(--slate-light);
}
.blog-card-body h3 {
    font-size: 19px;
    margin-top: 10px;
}
.blog-card-body h3 a {
    transition: color 0.2s ease;
}
.blog-card-body h3 a:hover {
    color: var(--gold-600);
}
.blog-card-body p {
    margin-top: 10px;
    font-size: 14.5px;
    color: var(--slate);
    line-height: 1.6;
}
.blog-card-body .card-link {
    margin-top: auto;
    padding-top: 16px;
}
.blog-empty {
    text-align: center;
    color: var(--slate);
    font-size: 15px;
    padding: 20px 0;
}

/* =========================================================================
   16. BLOG DETAIL PAGE
   ========================================================================= */
.article-hero-meta {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.article-hero-meta span:last-child {
    font-size: 14px;
    color: #c2ccd7;
}
.article-hero-meta strong {
    color: #fff;
}

.article-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 64px;
    align-items: start;
}
.article-content {
    max-width: 72ch;
}
.article-cover {
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 34px;
    aspect-ratio: 16/8;
}
.article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-content h3 {
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 4px;
    color: var(--navy-950);
}
.article-content p {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.85;
    color: var(--slate);
}
.article-tags {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.article-tags span {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy-800);
    background: var(--cream);
    padding: 6px 13px;
    border-radius: 999px;
}

.article-aside {
    position: sticky;
    top: 112px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.article-author-card,
.article-cta-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 26px 24px;
    text-align: center;
}
.article-author-card .spotlight-avatar {
    margin: 0 auto;
}
.article-author-card h4 {
    margin-top: 14px;
    font-size: 16px;
}
.article-author-card .role {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gold-600);
}
.article-author-card p {
    margin-top: 10px;
    font-size: 13px;
    color: var(--slate);
    line-height: 1.6;
}

.article-related h4 {
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-light);
    margin-bottom: 14px;
}
.article-related-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}
.article-related-item:first-of-type {
    border-top: none;
}
.article-related-item img {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}
.article-related-item span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.article-related-item strong {
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--navy-900);
    transition: color 0.2s ease;
}
.article-related-item:hover strong {
    color: var(--gold-600);
}
.article-related-item em {
    font-style: normal;
    font-size: 11.5px;
    color: var(--slate-light);
}

.article-cta-card {
    background: var(--cream);
    border: none;
}
.article-cta-card h4 {
    font-size: 15.5px;
}
.article-cta-card p {
    margin-top: 8px;
    font-size: 13px;
    color: var(--slate);
    line-height: 1.55;
}
.article-cta-card .btn {
    margin-top: 16px;
    width: 100%;
}
/* =========================================================================
   17. RESPONSIVE
   -------------------------------------------------------------------------
   Breakpoints (mirrors common device buckets, desktop-first / max-width):

     1600px – 1920px  →  default rules above (no media query needed;
                          the 1330px container simply centers with margin)
     1400px – 1599px  →  @media (max-width: 1599px)
     1200px – 1399px  →  @media (max-width: 1399px)
      992px – 1199px  →  @media (max-width: 1199px)
      768px –  991px  →  @media (max-width: 991px)
      576px –  767px  →  @media (max-width: 767px)
      320px –  575px  →  @media (max-width: 575px)
   ========================================================================= */

/* -------------------------------------------------------------------------
   17.1  1400px – 1599px
   Large desktop: tighten the container slightly, everything else already
   scales fluidly via clamp(), so only container/rhythm need a nudge.
   ------------------------------------------------------------------------- */
@media (max-width: 1599px) {
    :root {
        --container: 1240px;
    }
}

/* -------------------------------------------------------------------------
   17.2  1200px – 1399px
   Small desktop / large laptop.
   ------------------------------------------------------------------------- */
@media (max-width: 1399px) {
    :root {
        --container: 1140px;
    }
    .hero-name {
        font-size: clamp(42px, 6vw, 72px);
    }
    .hero-visual {
        height: 420px;
    }
    .team-grid {
        gap: 24px;
    }
}

/* -------------------------------------------------------------------------
   17.3  992px – 1199px
   Tablet landscape / small laptop — this is where multi-column grids
   first start to feel cramped, so most 4-col / 3-col grids drop to 2.
   ------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    :root {
        --container: 960px;
        --section-pad: clamp(52px, 7vw, 96px);
    }

    /* Header */
    .header-inner {
        padding: 0 22px;
    }

    /* Hero */
    .hero-inner {
        gap: 28px;
    }
    .hero-name {
        font-size: clamp(38px, 5.6vw, 62px);
    }
    .hero-visual {
        height: 380px;
    }

    /* Home page */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .expertise-feature {
        grid-template-columns: 1fr;
    }
    .expertise-feature-visual {
        min-height: 320px;
    }
    .expertise-feature-copy {
        padding: 32px 30px 36px;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 28px;
    }
    .stat-item:nth-child(2) {
        border-right: none;
    }
    .testi-grid {
        grid-template-columns: 1fr;
        border-top: none;
    }
    .testi-card {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    /* About page */
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    /* Services page */
    .methodology-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .serve-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .services-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Courses page */
    .course-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Testimonials / Blog */
    .testi-wall {
        columns: 2;
    }
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Blog detail */
    .article-layout {
        grid-template-columns: 1fr 280px;
        gap: 40px;
    }
}

/* -------------------------------------------------------------------------
   17.4  768px – 991px
   Tablet portrait — nav collapses to the hamburger menu here, and every
   two-column "copy + visual" layout stacks to a single column.
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
    :root {
        --container: 720px;
    }

    /* Header / nav */
    .main-nav,
    .header-actions .btn {
        display: none;
    }
    .nav-toggle {
        display: flex;
    }
    .main-nav.is-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.99);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 20px 30px -20px rgba(7, 15, 24, 0.25);
        padding: 22px 28px 30px;
        gap: 4px;
    }
    .main-nav.is-open .nav-link {
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
    }

    /* Hero */
    .hero-inner {
        grid-template-columns: 1fr;
        padding-bottom: 44px;
    }
    .hero-visual {
        height: 340px;
        margin-top: 8px;
    }
    .hero-feature-grid {
        grid-template-columns: 1fr;
        row-gap: 22px;
    }
    .hero-feature {
        padding: 0;
        border-right: none;
        padding-bottom: 22px;
        border-bottom: 1px solid var(--line-dark);
    }
    .hero-feature:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* Home page */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .why-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .risk-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .faq-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .approach-steps {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 40px;
    }
    .approach-track::before {
        display: none;
    }

    /* Footer */
    .footer-top {
        grid-template-columns: 1fr 1fr;
    }

    /* About page */
    .company-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .mv-grid {
        grid-template-columns: 1fr;
    }
    .difference-row {
        grid-template-columns: 1fr;
        gap: 6px;
        text-align: left;
        padding: 16px 0;
    }
    .difference-row.head {
        display: none;
    }

    /* Services page */
    .service-detail-grid,
    .service-detail-grid.reverse {
        grid-template-columns: 1fr;
    }
    .service-detail-grid.reverse .service-detail-visual {
        order: 0;
    }
    .serve-grid {
        grid-template-columns: 1fr;
    }

    /* Contact page */
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
    .why-contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .page-hero {
        clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
        padding: 130px 0 100px;
    }

    /* Legal page */
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .legal-nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        border-left: 0;
        border-bottom: 1px solid var(--line);
        padding-bottom: 2px;
        margin-bottom: 20px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .legal-nav::-webkit-scrollbar {
        display: none;
    }
    .legal-nav a {
        border-left: 0;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
        padding: 10px 14px;
    }
    .legal-nav a.is-active {
        border-left: 0;
        border-bottom-color: var(--gold-500);
    }

    /* Courses page */
    .course-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }
    .course-stat:nth-child(2) {
        border-right: none;
    }
    .track-head {
        gap: 18px;
        padding: 22px 4px;
    }
    .track-num {
        width: 34px;
        font-size: 21px;
    }
    .track-body p,
    .track-curriculum {
        padding-left: 52px;
    }
    .fee-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 34px 30px;
    }

    /* Testimonials / Blog */
    .testi-wall {
        columns: 1;
    }
    .blog-grid {
        grid-template-columns: 1fr;
    }

    /* Blog detail */
    .article-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .article-aside {
        position: static;
    }

    /* Team grid keeps 2 columns down to phone size (see 767px block) */
}

/* -------------------------------------------------------------------------
   17.5  576px – 767px
   Large phone / small tablet — single-column everything, but there is
   still enough width for comfortable padding and 2-up grids to remain.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .container {
        padding: 0 22px;
    }
    .section {
        padding: clamp(48px, 10vw, 76px) 0;
    }

    /* Header */
    .brand-mark {
        height: 56px;
    }

    /* Hero */
    .hero {
        padding-top: 132px;
    }
    .hero-visual {
        height: 300px;
    }
    .hero-card {
        min-width: 180px;
        padding: 14px 18px;
    }
    .hero-card strong {
        font-size: 20px;
    }

    /* Home page */
    .services-grid {
        grid-template-columns: 1fr;
    }
    .expertise-feature-visual {
        min-height: 240px;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .stat-item {
        border-right: none;
        border-bottom: 1px solid rgba(7, 15, 24, 0.15);
        padding: 20px;
    }
    .approach-steps {
        grid-template-columns: 1fr;
    }
    .footer-top {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer-tagline {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .footer-social {
        justify-content: center;
    }
    .footer-col {
        align-items: center;
    }
    .footer-contact span {
        text-align: center;
        max-width: 30ch;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    .btn-row {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-row .btn {
        width: 100%;
    }

    /* About page */
    .values-grid {
        grid-template-columns: 1fr;
    }
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
    .journey-track {
        padding-left: 22px;
    }
    .journey-item::before {
        left: -22px;
    }

    /* Services page */
    .methodology-grid {
        grid-template-columns: 1fr;
    }
    .services-overview-grid {
        grid-template-columns: 1fr;
    }
    .service-detail {
        padding: 50px 0;
    }

    /* Contact page */
    .contact-form-panel {
        padding: 28px 22px;
    }
    .social-band {
        gap: 16px;
    }

    /* Legal page */
    .legal-block {
        padding-bottom: 40px;
        margin-bottom: 40px;
    }

    /* Courses page */
    .course-cards-grid {
        grid-template-columns: 1fr;
    }
    .course-card-ribbon {
        right: -38px;
    }
    .course-stats-grid {
        grid-template-columns: 1fr;
        row-gap: 18px;
    }
    .course-stat {
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding-bottom: 16px;
    }
    .course-stat:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .track-curriculum,
    .track-body p {
        padding-left: 6px;
    }
    .track-head {
        padding: 20px 4px;
    }

    /* Testimonials page */
    .why-contact-grid,
    .testi-filters {
        gap: 14px;
    }
    .spotlight-testi .quote-mark {
        font-size: 44px;
    }

    /* Blog / blog detail */
    .blog-card-body {
        padding: 22px 20px 24px;
    }
    .article-cover {
        margin-bottom: 24px;
    }

    /* Page hero */
    .page-hero {
        clip-path: polygon(0 0, 100% 0, 100% 97%, 0 100%);
        padding: 118px 0 80px;
    }
    .signature-divider::before,
    .signature-divider::after {
        width: 44px;
    }
}

/* -------------------------------------------------------------------------
   17.6  320px – 575px
   Phones — the tightest breakpoint. Single column everywhere, reduced
   paddings, smaller type scale bounds, and full-width buttons/forms.
   ------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .container {
        padding: 0 18px;
    }
    .section {
        padding: clamp(40px, 12vw, 64px) 0;
    }
    .section-head {
        margin-bottom: 32px;
    }

    /* Header */
    .header-inner {
        padding: 0 18px;
    }
    .brand-mark {
        height: 46px;
    }

    /* Hero */
    .hero {
        padding-top: 116px;
    }
    .hero-name {
        font-size: clamp(34px, 11vw, 46px);
    }
    .hero-visual {
        height: 240px;
    }
    .hero-card {
        left: 0;
        bottom: 0;
        min-width: 0;
        width: 100%;
        border-radius: var(--radius-sm);
        padding: 12px 16px;
    }
    .hero-feature-strip {
        padding: 26px 0 22px;
    }

    /* Home page */
    .about-figure {
        padding: 30px 24px;
    }
    .about-figure .quote-mark {
        font-size: 64px;
    }
    .expertise-feature-copy {
        padding: 26px 20px 28px;
    }
    .expertise-feature-visual {
        min-height: 200px;
    }
    .risk-panel {
        padding: 28px 24px;
    }
    .risk-panel .big-num {
        font-size: 48px;
    }
    .faq-q {
        font-size: 16px;
    }

    /* About page */
    .team-grid {
        grid-template-columns: 1fr;
        max-width: 280px;
        margin: 0 auto;
    }
    .mv-card {
        padding: 28px 22px;
    }

    /* Services page */
    .serve-card,
    .service-detail-copy .tag {
        padding: 26px 20px;
    }

    /* Contact page */
    .contact-info-item {
        gap: 12px;
    }
    .why-contact-grid {
        grid-template-columns: 1fr;
    }

    /* Courses page */
    .fee-banner {
        padding: 26px 22px;
    }
    .track-head {
        gap: 14px;
    }
    .track-num {
        width: 28px;
        font-size: 18px;
    }

    /* Testimonials page */
    .spotlight-avatar {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }
    .testi-filters button,
    .blog-filters button {
        padding: 8px 16px;
        font-size: 12.5px;
    }

    /* Page hero */
    .page-hero {
        padding: 108px 0 72px;
    }
    .page-hero h1 {
        font-size: clamp(28px, 9vw, 38px);
    }
}
/* -------------------------------------------------------------------------
   17b. SCROLL-REVEAL & MICRO-INTERACTIONS
   ------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 0.9, 0.3, 1),
        transform 0.8s cubic-bezier(0.22, 0.9, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Service cards: gold top-edge sweep on hover */
.service-card {
    position: relative;
    display: block;
}
.service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.service-card:hover::before {
    transform: scaleX(1);
}
.service-card:hover h3 {
    color: var(--gold-700);
}
.service-card h3 {
    transition: color 0.3s ease;
}

/* Why-us items: gold left rule slides in on hover */
.why-item {
    position: relative;
    padding-left: 0;
    transition: padding-left 0.35s ease;
}
.why-item::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 26px;
    bottom: 26px;
    width: 2px;
    background: var(--gold-400);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.why-item:hover::before {
    transform: scaleY(1);
}
.why-item:hover {
    padding-left: 8px;
}
.why-icon {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}
.why-item:hover .why-icon {
    background: var(--gold-400);
    color: var(--navy-950);
    border-color: var(--gold-400);
}

/* Approach numerals: fill gold on hover */
.approach-num {
    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}
.approach-step:hover .approach-num {
    background: var(--grad-gold);
    color: var(--navy-950);
    transform: translateY(-3px);
}

/* Testimonial + expertise micro-lift */
.testi-card {
    transition: background-color 0.3s ease;
}
.testi-card:hover {
    background: rgba(201, 162, 39, 0.05);
}

/* Stat band numerals: soft pop-in handled via JS counter; add hover polish */
.stat-item {
    transition: transform 0.3s ease;
}
.stat-item:hover {
    transform: translateY(-3px);
}

/* Buttons: shimmer sweep on gold CTA */
.btn-gold {
    position: relative;
    overflow: hidden;
}
.btn-gold::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}
.btn-gold:hover::after {
    left: 130%;
}

/* -------------------------------------------------------------------------
   18. ACCESSIBILITY / MOTION
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

@media only screen and (max-width:575px){
    .hero-visual {
        height: auto;
    }

.hero-visual::before {
    background: none;
}

    .hero-card {
        position: relative;
    }
}