/* ==========================================================================
   Madison Arnholt — replica stylesheet
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Typography
   4.  Layout (container / section / grid)
   5.  Components
       5.1  Announcement bar
       5.2  Header + navigation
       5.3  Buttons & CTA links
       5.4  Hero
       5.5  Press strip
       5.6  Intro / media-text / rich text
       5.7  Steps
       5.8  Cards
       5.9  Video
       5.10 Testimonials
       5.11 Podcast
       5.12 About
       5.13 Forms & opt-in
       5.14 Checklist
       5.15 Curriculum weeks
       5.16 Contact
       5.17 Footer
   6.  Motion / reveal
   7.  Responsive
   ========================================================================== */


/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {

    /* --- colour ------------------------------------------------------- */
    --c-cream:      #ffffff;   /* lightest section background            */
    --c-linen:      #e3dbcd;   /* blog page alternating band             */
    --c-sand:       #d6e6f7;   /* alternate section background           */
    --c-tan:        #cbb8a3;   /* footer / video band                    */
    --c-tan-mid:    #b6977e;   /* sales-page testimonial band            */
    --c-clay:       #9b795e;   /* sales-page background, CTA links       */
    --c-mocha:      #000000;   /* brand primary: nav, buttons, headings  */
    --c-ink:        #161e2a;   /* hero headline                          */
    --c-body:       #595959;   /* body copy                              */
    --c-white:      #3c4de0;
    --c-line:       #e8e0d8;   /* hairlines / input borders              */

    /* --- typography ---------------------------------------------------- */
    --font-body:    'Josefin Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Bodoni Moda', 'Playfair Display', 'Times New Roman', serif;
    --font-script:  'Parisienne', 'Snell Roundhand', cursive;

    --fs-body:      20px;
    --lh-body:      1.6;

    --fs-h1:        48px;
    --fs-h2:        36px;
    --fs-h3:        28px;
    --fs-section:   48px;
    --lh-heading:   1.6;

    /* --- space --------------------------------------------------------- */
    --container:    1340px;
    --gutter:       40px;
    --section-y:    110px;
    --gap:          30px;

    /* --- effects ------------------------------------------------------- */
    --radius:       4px;
    --radius-btn:   7px;
    --shadow-sm:    0 2px 10px 0 rgba(0, 0, 0, .05);
    --shadow-md:    0 4px 22px 0 rgba(0, 0, 0, .07);
    --ease:         cubic-bezier(.25, .46, .45, .94);
    --dur:          .3s;

    --header-h:     125px;
    
    --benefits: 25px;
}


/* ==========================================================================
   2. Reset & base
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--c-cream);
    color: var(--c-body);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    text-align: left;  
}

body.is-locked { overflow: hidden; }

img {
    max-width: 75%;
    height: auto;
    display: block;
    margin: 0 auto;
}

a {
    color: blue;
    text-decoration: none;
    transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

button {
    font: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    color: inherit;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }

:focus-visible {
    outline: 2px solid var(--c-mocha);
    outline-offset: 3px;
    border-radius: 2px;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 200;
    padding: 10px 18px;
    background: var(--c-mocha);
    color: var(--c-white);
    border-radius: var(--radius-btn);
    transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 12px; }


/* ==========================================================================
   3. Typography
   ========================================================================== */

.heading-display,
.section__title,
.hero__title,
.hero-split__title,
.contact__title,
.card__title,
.step__title,
.week__title,
.media-text__heading,
.optin__title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--c-mocha);
    line-height: var(--lh-heading);
    letter-spacing: .01em;
}

.section__title {
    font-size: var(--fs-section);
    text-align: center;
    margin-bottom: 60px;
}

.heading-display { font-size: var(--fs-h2); }

/* Script accent — "more ease, peace and clarity", "Meet Madison", "free guide" */
.script-accent {
    font-family: var(--font-script);
    font-size: 46px;
    line-height: 1.35;
    color: #3e4fe5;
    margin: 4px 0 0;
    text-align: center;
    font-weight: 400;
}
.script-accent--left  { text-align: left; }
.script-accent--small { font-size: 34px; margin-bottom: -4px; }

/* Rich text blocks */
.rich-text p { margin: 0 0 1.45em; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text em { font-style: italic; }
.rich-text strong { font-weight: 600; }

.rich-text ul {
    list-style: disc;
    padding-left: 22px;
    margin: 0 0 1.45em;
}
.rich-text ul li { margin-bottom: .5em; }

.rich-text--center { text-align: center; }

.is-light,
.is-light .rich-text,
.is-light p { color: #595959; }

.is-light .heading-display,
.is-light .section__title,
.is-light .media-text__heading { color: black; }

.link-inline {
    color: var(--c-clay);
    font-weight: 600;
}
.link-inline:hover { color: var(--c-mocha); }


/* ==========================================================================
   4. Layout
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.container--narrow { max-width: 1060px; }

.section {
    position: relative;
    padding: var(--section-y) 0;
}

.section__footnote {
    max-width: 900px;
    margin: 48px auto 0;
    text-align: center;
}

.section__cta {
    margin-top: 48px;
    text-align: center;
}
.section--benefits{
    padding: var(--benefits) 0 !important;
}
/* backgrounds */
.bg-cream   { background: var(--c-cream); }
.bg-sand    { background: var(--c-sand); }
.bg-tan     {background: linear-gradient(135deg, #001224, #0066cc);}
.bg-tan-mid { background: #d5d5d5; }
.bg-linen   { background: white; }
.bg-clay    { background: linear-gradient(180deg, #e5e5e5, #d5d5d5); }

/* grid */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }


/* ==========================================================================
   5. Components
   ========================================================================== */

/* --- 5.1 Announcement bar --------------------------------------------- */

.announcement {
    position: relative;
    z-index: 60;
    background: var(--c-mocha);
    text-align: center;
}

.announcement__link {
    display: inline-block;
    padding: 12px 0;
    color: var(--c-cream);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.3;
}
.announcement__link:hover { color: var(--c-white); opacity: .82; }
.announcement__link .arrow {
    display: inline-block;
    transition: transform var(--dur) var(--ease);
}
.announcement__link:hover .arrow { transform: translateX(4px); }


/* --- 5.2 Header + navigation ------------------------------------------ */

.header {
    position: relative;
    z-index: 50;
    width: 100%;
    transition: transform .35s var(--ease), background-color var(--dur) var(--ease);
}

/* transparent, sitting on top of a hero */
.header--overlay,
.header--light {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: transparent;
}
/* the announcement bar pushes the overlay header down by its own height */
.has-announcement .header--overlay,
.has-announcement .header--light { top: 47px; }

.header--solid { background: var(--c-cream); }

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--header-h);
}

.header__logo { display: block; flex: 0 0 auto; }
.header__logo-img {
    width: 375px;
    max-width: 100%;
    height: auto;
    transition: opacity var(--dur) var(--ease);
}
.header__logo:hover .header__logo-img { opacity: .78; }

.nav--desktop .nav__list {
    display: flex;
    align-items: center;
    gap: 22px;
}

.nav__link {
    position: relative;
    display: inline-block;
    font-size: 18px;
    line-height: 1.4;
    color: var(--c-mocha);
    padding: 4px 0;
}
.nav__link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: currentColor;
    transition: width var(--dur) var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }

.nav__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    color: var(--c-mocha);
}
.nav__social:hover { opacity: .7; }

/* light variant — over a dark hero */
.header--light .nav__link,
.header--light .nav__social { color: black; }
.header--light .hamburger__slice { background: var(--c-white); }

/* hide-on-scroll behaviour (matches header--close-on-scroll) */
.header.is-hidden { transform: translateY(-100%); }

/* hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px; height: 34px;
    padding: 0;
}
.hamburger__slice {
    display: block;
    width: 100%; height: 2px;
    background: var(--c-mocha);
    border-radius: 2px;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.hamburger[aria-expanded="true"] .hamburger__slice:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__slice:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger__slice:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: var(--c-cream);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }

.mobile-nav__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    height: 100%;
    padding: 90px 24px 40px;
}
.mobile-nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.mobile-nav__link {
    font-size: 26px;
    color: var(--c-mocha);
    font-family: var(--font-display);
}
.mobile-nav__social { color: var(--c-mocha); }


/* --- 5.3 Buttons & CTA links ------------------------------------------ */

.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 15px 28px;
    border-radius: var(--radius-btn);
    border: 2px solid transparent;
    transition: background-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}

.btn--solid {
    background: var(--c-mocha);
    border-color: var(--c-mocha);
    color: var(--c-cream);
}
.btn--solid:hover {
    background: transparent;
    color: var(--c-mocha);
    transform: translateY(-1px);
}
.btn--solid:active { transform: translateY(0); }

/* landing-page button: clay, 4px radius, sentence case (per the reference) */
.btn--clay {
    background: black;
    border-color: black;
    color: var(--c-cream);
    border-radius: var(--radius);
    text-transform: none;
    letter-spacing: .25px;
    padding: 12px 30px;
}
.btn--clay:hover {
    background: #3f50e9;
    border-color: #3f50e9;
    color: var(--c-cream);
    transform: translateY(-1px);
}

.btn--outline {
    background: transparent;
    border-color: var(--c-mocha);
    color: var(--c-mocha);
}
.btn--outline:hover { background: var(--c-mocha); color: var(--c-cream); }

/* the site's signature CTA: spaced uppercase + arrow */
.cta-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #3e4fe5;
}
.cta-link__arrow {
    display: inline-block;
    transition: transform var(--dur) var(--ease);
}
.cta-link:hover { color: var(--c-mocha); }
.cta-link:hover .cta-link__arrow { transform: translateX(6px); }

.cta-link--light { color: blue; }
.cta-link--light:hover { color: black; opacity: .85; }

.link-arrow {
    color: var(--c-clay);
    font-family: var(--font-display);
    font-size: 22px;
}
.link-arrow:hover { color: var(--c-mocha); }


/* --- 5.4 Hero ---------------------------------------------------------- */

.section--hero {
    display: flex;
    align-items: center;
    min-height: 895px;
    padding: var(--header-h) 0 60px;
    background-color: var(--c-sand);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    background-position: center center; /* was: center right */
    
}

.hero__content {
    max-width: 730px;   /* matches the reference text column (88px → 816px) */
    text-align: center;
}

.hero__title {
    font-size: var(--fs-h1);
    color: var(--c-ink);
    margin-bottom: 8px;
}

.hero__subtitle {
    font-style: italic;
    font-size: 20px;
    color: var(--c-body);
    margin-bottom: 26px;
}

/* split hero (sales page) */
.section--hero-split { padding: calc(var(--header-h) + 30px) 0 90px; }

.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
}
.hero-split__title {
    font-size: 60px;
    color: black;
    font-weight: 700;
    margin-bottom: 18px;
}
.hero-split__subtitle {
    font-size: 20px;
    color: var(--c-cream);
    margin-bottom: 26px;
    max-width: 34ch;
}
.hero-split__media { justify-self: end; }
.hero-split__img {
    width: 400px;
    max-width: 100%;
    height: auto;
}


/* --- 5.5 Press strip --------------------------------------------------- */

.section--press {
    padding: 44px 0;
    background: var(--c-cream);
}

.press {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 34px 46px;
}
.press__img {
    width: auto;
    height: auto;
    max-height: 50px;
    max-width: 185px;
    object-fit: contain;
    filter: grayscale(0);
    opacity: .95;
    transition: opacity var(--dur) var(--ease);
}
.press__item:hover .press__img { opacity: 1; }

.press__item--gmw  .press__img { max-height: 80px; }
.press__item--abc7 .press__img { max-height: 68px; }


/* --- 5.6 Intro / media-text -------------------------------------------- */

.intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
}
.intro__heading { text-align: center; }
.intro__heading .heading-display { line-height: 1.35; }
.intro__cta { margin-top: 28px; }
.intro__body { max-width: 600px; }

.media-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}
.media-text--left .media-text__body  { order: 2; }
.media-text--left .media-text__media { order: 1; }

.media-text__heading {
    font-size: var(--fs-h2);
    margin-bottom: 26px;
}
.media-text__cta { margin-top: 32px; }
.media-text__img { width: 100%; height: auto; }


/* --- 5.7 Steps --------------------------------------------------------- */

.steps { max-width: 1160px; margin: 0 auto; gap: 44px; }

.step { text-align: center; }
.step__number {
    font-family: var(--font-display);
    font-size: 34px;
    color: var(--c-clay);
    line-height: 1.2;
    margin-bottom: 10px;
}
.step__title {
    font-size: var(--fs-h3);
    margin-bottom: 14px;
}
.step__text { margin: 0; }

.steps__footnote {
    max-width: 900px;
    margin: 60px auto 0;
    text-align: center;
}


/* --- 5.8 Cards --------------------------------------------------------- */

.cards { max-width: 1060px; margin: 0 auto; }

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, #a8a4ef, #9691e9);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.card__media { margin-bottom: 22px; }
.card__img {
    width: 300px;
    max-width: 100%;
    height: auto;
    border-radius: 2px;
}
.card__body { flex: 1 1 auto; }
.card__title {
    font-size: 32px;
    margin-bottom: 8px;
}
.card__text { margin: 0; }
.card__footer { margin-top: 22px; }


/* --- 5.9 Video --------------------------------------------------------- */

.video {
    max-width: 790px;
    margin: 0 auto;
}
.video__frame,
.video__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 2px;
    background: #2b2b2b;
}
.video__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .55);
    font-size: 16px;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* clearly-marked placeholder, exact 16:9 box of the reference embed */
    background:
        repeating-linear-gradient(45deg, #2f2f2f 0 12px, #292929 12px 24px);
}


/* --- 5.10 Testimonials -------------------------------------------------- */

/* Row-wise grid with top-aligned cards: matches the reference, where each
   card hugs its own copy but reading order stays left-to-right. */
.testimonials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--gap);
    max-width: 1210px;
    margin: 0 auto;
}

.testimonial {
    margin: 0;
    padding: 24px 26px 22px;
    background: #e5e5e5;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.testimonial__quote {
    margin: 0 0 18px;
    font-size: 20px;
    line-height: 1.55;
    color: var(--c-body);
}
.testimonial__author {
    font-family: var(--font-display);
    font-size: 19px;
    color: var(--c-mocha);
}

/* long-form (sales page) */
.testimonial-long {
    margin: 0 0 70px;
    text-align: center;
}
.testimonial-long:last-child { margin-bottom: 0; }
.testimonial-long__quote {
    margin: 0 0 22px;
    color: var(--c-cream);
}
.testimonial-long__quote p { margin-bottom: 1.6em; }
.testimonial-long__author {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--c-cream);
}


/* --- 5.11 Podcast ------------------------------------------------------- */

.podcast {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}
.podcast__media { justify-self: center; }
.podcast__img {
    width: 350px;
    max-width: 100%;
    height: auto;
}
.podcast__body { text-align: center; max-width: 560px; }
.podcast__body .heading-display { margin-bottom: 16px; line-height: 1.5; }
.podcast__lead {
    font-weight: 700;
    color: var(--c-mocha);
    margin-bottom: 14px;
}
.podcast__text { margin-bottom: 18px; }
.podcast__sep { margin: 0 8px; color: var(--c-clay); }


/* --- 5.12 About --------------------------------------------------------- */

.about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}
.about__body { max-width: 560px; justify-self: end; }
.about__media { justify-self: center; }
.about__img {
    width: 350px;
    max-width: 100%;
    height: auto;
}


/* --- 5.13 Forms & opt-in ------------------------------------------------ */

.optin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}
.optin__media { justify-self: center; }
.optin__img { width: 330px; max-width: 100%; }
.optin__body { text-align: center; max-width: 520px; }
.optin__title { font-size: 44px; margin-bottom: 12px; }
.optin__text { margin-bottom: 24px; }

.field { margin-bottom: 14px; }
.field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 17px;
    text-align: left;
}
.field__input {
    width: 100%;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.4;
    color: var(--c-body);
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-btn);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__input::placeholder { color: #b7ada4; }
.field__input:focus {
    outline: none;
    border-color: var(--c-clay);
    box-shadow: 0 0 0 3px rgba(155, 121, 94, .14);
}
.field__input--area { resize: vertical; min-height: 140px; }

.optin-form .btn { margin-top: 10px; }

.form-note {
    margin-top: 14px;
    font-size: 17px;
}
.form-note--success { color: #3f7a4f; }
.form-note--error   { color: #a8433a; }

.contact-form { margin-top: 36px; max-width: 520px; }


/* --- 5.13b Landing page (/alignment) ------------------------------------
   Lead-magnet page: the site header sits on top (solid variant, as on the
   contact page) and the opt-in fills the rest of the viewport. Its type
   treatment follows the reference, which sets body copy in Open Sans at 18px
   in mocha rather than the site's Josefin Sans in grey.
   ---------------------------------------------------------------------- */

.landing {
    display: flex;
    align-items: center;
    /* fill whatever the header leaves behind */
    min-height: calc(100vh - var(--header-h));
    padding: 60px 0;
    background: var(--c-cream);
}

/* bare variant (header_variant => 'none') gets the whole viewport back */
.header-none .landing { min-height: 100vh; }

.landing__inner {
    display: grid;
    grid-template-columns: 615fr 400fr;
    align-items: center;
    gap: 60px;
    width: 100%;
    max-width: 1075px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.landing__body { text-align: center; }

.landing__eyebrow {
    font-family: var(--font-script);
    font-size: 40px;
    line-height: 1.2;
    color: #3e4fe5;
    margin: 0 0 8px;
}

.landing__title {
    font-family: var(--font-display);
    font-size: 48px;
    line-height: 1.2;          /* tighter than the main site's 1.6 */
    font-weight: 400;
    color: var(--c-mocha);
    margin: 0 0 8px;
}

.landing__text {
    font-family: 'Open Sans', var(--font-body);
    font-size: 18px;
    line-height: 1.6;
    color: var(--c-mocha);
    margin: 0 0 22px;
}

.landing__media { justify-self: center; }
.landing__img {
    width: 400px;
    max-width: 100%;
    height: auto;
}

/* form overrides for the landing variant */
.optin-form--landing .field { margin-bottom: 24px; }

.optin-form--landing .field__input {
    height: 50px;
    padding: 10px 14px;
    font-family: 'Open Sans', var(--font-body);
    font-size: 18px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: var(--radius);
}

.optin-form--landing .btn { margin-top: 4px; }


/* --- 5.14 Checklist ----------------------------------------------------- */

.checklist { max-width: 940px; margin: 0 auto; }

.checklist__item {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
}
.checklist__item:last-child { margin-bottom: 0; }
.checklist__mark {
    flex: 0 0 auto;
    color: var(--c-clay);
    line-height: inherit;
}
.checklist__text strong { font-weight: 700; color: var(--c-mocha); }


/* --- 5.15 Curriculum weeks ---------------------------------------------- */

.weeks { max-width: 1120px; margin: 0 auto; gap: 60px 70px; }

.week { text-align: center; }
.week__eyebrow {
    font-size: 18px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-mocha);
    margin-bottom: 18px;
}
.week__media { margin-bottom: 18px; }
.week__img { width: 100%; height: auto; border-radius: 2px; }
.week__title {
    font-size: var(--fs-h2);
    margin-bottom: 16px;
}
.week__list {
    list-style: disc;
    padding-left: 22px;
    text-align: left;
}
.week__list li { margin-bottom: .55em; }


/* --- 5.16 Contact -------------------------------------------------------- */

.section--contact { padding-top: calc(var(--section-y) + 20px); }

.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}
.contact__body { max-width: 560px; justify-self: end; }
.contact__title {
    font-size: 52px;
    text-align: center;
    margin-bottom: 42px;
}
.contact__text { margin: 0; }
.contact__media { justify-self: center; }
.contact__img {
    width: 375px;
    max-width: 100%;
    height: auto;
}


.hero-split__eyebrow {
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 18px;
    color: inherit;
}

.hero-split__subtitle--wide { max-width: none; }

.heading-display--left { text-align: left; }

.page-lead--tight { margin-bottom: 0; }

.section--classes .page-lead,
.section--classes .section__title { color: var(--c-cream); }

/* white panel with a ✧ list */
.panels { max-width: 1160px; margin: 46px auto 0; align-items: start; }
.panels--single { max-width: 780px; margin-top: 0; }

.panel {
    padding: 44px 40px;
    background: var(--c-sand);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.panel--center { text-align: center; }

.panel__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 34px;
    line-height: 1.3;
    color: var(--c-mocha);
    margin-bottom: 16px;
}

.panel__intro { margin-bottom: 1.1em; }

.panel__lead {
    font-weight: 700;
    color: var(--c-mocha);
    margin-bottom: 1.1em;
}

.panel__item {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    text-align: left;
}
.panel__item:last-child { margin-bottom: 0; }

.panel--center .panel__list {
    display: inline-block;
    text-align: left;
}

.panel__mark { flex: 0 0 auto; color: #3e50e7; }

/* client logo row */
.section--logos { padding: 56px 0; background: var(--c-white); }

.logos__heading {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--c-mocha);
    text-align: center;
    margin-bottom: 30px;
}

.logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px 44px;
}

.logos__img {
    width: auto;
    max-height: var(--logo-h, 44px);
    max-width: 180px;
    object-fit: contain;
}

/* featured quote */
.corp-quote__author {
    font-weight: 700;
    color: var(--c-mocha);
    margin-top: -.8em;
}

/* testimonials that sit vertically centred in their row */
.testimonials--center { align-items: center; }

/* review screenshots */
.reviews { max-width: 1180px; margin: 0 auto; align-items: start; }

.review {
    margin: 0;
    padding: 26px;
    background: var(--c-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.review__img {
    width: 100%;
    height: auto;
    border-radius: 2px;
}

/* closing quote band */
.quote-cta__text {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.quote-cta__action {
    margin-top: 34px;
    text-align: center;
}

.section--quote-cta .btn--solid {
    background: var(--c-mocha);
    border-color: var(--c-mocha);
    color: white;
}
.section--quote-cta .btn--solid:hover {
    background: transparent;
    color: var(--c-cream);
    border-color: var(--c-cream);
}

/* --- 5.17 Footer --------------------------------------------------------- */

.footer {
    background: var(--c-mocha);
    color: var(--c-cream);
    padding: 56px 0 44px;
    text-align: center;
}
.footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}
.footer__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 26px;
}
.footer__link {
    color: var(--c-cream);
    font-size: 20px;
}
.footer__link:hover { opacity: .75; color: var(--c-white); }

.footer__logo-img { width: 200px; height: auto; }

.footer__social {
    display: flex;
    gap: 18px;
    justify-content: center;
}
.footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    color: var(--c-white);
}
.footer__social a:hover { opacity: .75; }

.footer__copy {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--c-cream);
    letter-spacing: .02em;
}


/* ==========================================================================
   6. Motion / reveal
   ========================================================================== */

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    will-change: opacity, transform;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* never hide content when JS is off or motion is reduced */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}


/* ==========================================================================
   7. Responsive
   ========================================================================== */

/* --- ≤1200px : tighten the shell --------------------------------------- */
@media (max-width: 1200px) {
    :root {
        --gutter: 32px;
        --section-y: 88px;
        --fs-section: 42px;
    }
    .header__logo-img { width: 300px; }
    .nav--desktop .nav__list { gap: 18px; }
    .nav__link { font-size: 17px; }
    .hero-split__title { font-size: 50px; }
}

/* --- ≤991px : two-up becomes one-up ------------------------------------ */
@media (max-width: 991px) {
    :root {
        --header-h: 96px;
        --section-y: 72px;
        --fs-h1: 42px;
        --fs-h2: 32px;
        --fs-section: 38px;
    }

    .header__logo-img { width: 260px; }

    /* hamburger takes over */
    .nav--desktop { display: none; }
    .hamburger { display: flex; }

    .section--hero { min-height: 660px; background-position: 72% center; }
    .hero__content { max-width: 100%; }

    .hero-split,
    .intro,
    .media-text,
    .podcast,
    .about,
    .optin,
    .contact { grid-template-columns: 1fr; gap: 40px; }

    /* image always follows the copy once stacked */
    .media-text--left .media-text__body  { order: 1; }
    .media-text--left .media-text__media { order: 2; }

    .hero-split__media,
    .about__media,
    .podcast__media,
    .optin__media,
    .contact__media { justify-self: center; }

    .about__body,
    .contact__body,
    .intro__body,
    .podcast__body,
    .optin__body { max-width: 100%; justify-self: stretch; }

    .grid--3 { grid-template-columns: 1fr; }
    .steps { gap: 42px; }

    .testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .weeks { gap: 48px 40px; }

    .script-accent { font-size: 40px; }

    /* landing: copy first, mockup below */
    .landing { min-height: 0; padding: 64px 0; }
    .landing__inner { grid-template-columns: 1fr; gap: 44px; max-width: 660px; }
    .landing__media { order: 2; }
    .landing__body  { order: 1; }
}

/* --- ≤767px : single column, compact type ------------------------------ */
@media (max-width: 767px) {
    :root {
        --gutter: 20px;
        --header-h: 84px;
        --section-y: 56px;
        --fs-body: 18px;
        --fs-h1: 34px;
        --fs-h2: 27px;
        --fs-h3: 24px;
        --fs-section: 32px;
        --gap: 20px;
    }

    body { font-size: var(--fs-body); }

    .announcement__link { font-size: 15px; padding: 10px 0; }

    .header__logo-img { width: 210px; }

    .section--hero {
        min-height: 560px;
        background-position: 68% center;
        padding-top: calc(var(--header-h) + 20px);
    }
    .hero__subtitle { font-size: 17px; }

    .section__title { margin-bottom: 36px; }

    .cta-link { font-size: 17px; letter-spacing: .11em; }

    .grid--2 { grid-template-columns: 1fr; }

    .card { padding: 22px; }
    .card__title { font-size: 26px; }
    .card__img { width: 100%; }

    .testimonials { grid-template-columns: 1fr; }
    .testimonial { padding: 20px 22px; }
    .testimonial__quote { font-size: 18px; }

    .press { gap: 24px 30px; }
    .press__img { max-height: 34px; max-width: 130px; }
    .press__item--gmw  .press__img { max-height: 56px; }
    .press__item--abc7 .press__img { max-height: 48px; }

    .hero-split__title { font-size: 38px; }
    .hero-split__img { width: 100%; max-width: 340px; }

    .script-accent { font-size: 32px; }
    .script-accent--small { font-size: 26px; }

    .contact__title { font-size: 36px; margin-bottom: 28px; }
    .contact__img { width: 100%; max-width: 340px; }

    .optin__title { font-size: 32px; }
    .about__img, .podcast__img { width: 100%; max-width: 320px; }

    .week__title { font-size: 26px; }

    .footer { padding: 44px 0 36px; }
    .footer__list { gap: 10px 18px; }
    .footer__link { font-size: 17px; }
    .footer__logo-img { width: 160px; }
    .footer__copy { font-size: 16px; }

    .btn { width: 100%; }
    .video { max-width: 100%; }

    .landing { padding: 44px 0; }
    .landing__eyebrow { font-size: 30px; }
    .landing__title   { font-size: 32px; }
    .landing__text    { font-size: 16px; }
    .landing__img     { width: 100%; max-width: 300px; }
    .optin-form--landing .field { margin-bottom: 16px; }
}

/* --- ≤400px ------------------------------------------------------------- */
@media (max-width: 400px) {
    .header__logo-img { width: 180px; }
    .hero__title { font-size: 30px; }
}