/* ----------------------------------
   333 HOCKEY
   Color Palette
---------------------------------- */

:root {
    --ice-blue: #bfe6ef;
    --ice-blue-light: #e8f7fa;
    --ice-blue-dark: #78b9ca;

    --dark-red: #6d1d2d;
    --deep-red: #4a101d;
    --soft-red: #8b3343;

    --light-grey: #eef1f3;
    --medium-grey: #cbd2d6;
    --dark-grey: #596268;

    --charcoal: #162127;
    --deep-charcoal: #0c151a;
    --white: #ffffff;

    --heading-font: "Cinzel", Georgia, serif;
    --body-font: "Inter", Arial, sans-serif;

    --container-width: 1180px;
    --section-space: 110px;

    --shadow-soft: 0 20px 50px rgba(12, 21, 26, 0.1);
    --shadow-card: 0 18px 45px rgba(12, 21, 26, 0.08);
}


/* ----------------------------------
   Reset and General Styles
---------------------------------- */

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--light-grey);
    color: var(--charcoal);
    font-family: var(--body-font);
    line-height: 1.7;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

svg {
    display: block;
}

.container {
    width: min(90%, var(--container-width));
    margin-inline: auto;
}

.section {
    padding: var(--section-space) 0;
}

.eyebrow {
    color: var(--dark-red);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-bottom: 16px;
    text-transform: uppercase;
}

h1,
h2,
h3 {
    font-family: var(--heading-font);
    font-weight: 600;
    line-height: 1.15;
}

h1 span,
h2 span {
    color: var(--dark-red);
}


/* ----------------------------------
   Navigation
---------------------------------- */

.site-header {
    background: rgba(238, 241, 243, 0.92);
    border-bottom: 1px solid rgba(89, 98, 104, 0.14);
    backdrop-filter: blur(14px);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.navbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 82px;
}

.logo {
    align-items: center;
    display: inline-flex;
    gap: 10px;
    text-transform: uppercase;
}

.logo-number {
    color: var(--dark-red);
    font-family: var(--heading-font);
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.logo-word {
    border-left: 1px solid var(--medium-grey);
    color: var(--charcoal);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    padding-left: 10px;
}

.nav-links {
    align-items: center;
    display: flex;
    gap: 32px;
}

.nav-links a {
    color: var(--dark-grey);
    font-size: 0.83rem;
    font-weight: 600;
    transition: color 0.25s ease;
}

.nav-links a:hover {
    color: var(--dark-red);
}

.nav-links .nav-cta {
    background-color: var(--dark-red);
    border: 1px solid var(--dark-red);
    color: var(--white);
    padding: 10px 19px;
}

.nav-links .nav-cta:hover {
    background-color: transparent;
    color: var(--dark-red);
}


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

.hero {
    align-items: center;
    background:
        linear-gradient(
            115deg,
            rgba(232, 247, 250, 0.96),
            rgba(238, 241, 243, 0.9)
        );
    display: flex;
    min-height: calc(100vh - 82px);
    overflow: hidden;
    padding: 90px 0;
    position: relative;
}

.hero::before {
    background-image:
        linear-gradient(
            rgba(109, 29, 45, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(109, 29, 45, 0.035) 1px,
            transparent 1px
        );
    background-size: 48px 48px;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.hero-decoration {
    border: 1px solid rgba(120, 185, 202, 0.33);
    border-radius: 50%;
    position: absolute;
}

.hero-decoration-one {
    height: 560px;
    right: -220px;
    top: -170px;
    width: 560px;
}

.hero-decoration-two {
    bottom: -310px;
    height: 620px;
    left: 32%;
    width: 620px;
}

.hero-layout {
    align-items: center;
    display: grid;
    gap: 80px;
    grid-template-columns: 1.25fr 0.75fr;
    position: relative;
    z-index: 2;
}

.hero-content {
    max-width: 760px;
}

.hero h1 {
    color: var(--charcoal);
    font-size: clamp(3rem, 6vw, 6.2rem);
    letter-spacing: -0.045em;
    margin-bottom: 28px;
    max-width: 800px;
}

.hero h1 span {
    display: block;
}

.hero-description {
    color: var(--dark-grey);
    font-size: 1.06rem;
    max-width: 650px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px;
}

.button {
    align-items: center;
    border: 1px solid transparent;
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 700;
    justify-content: center;
    letter-spacing: 0.06em;
    min-height: 52px;
    padding: 0 26px;
    text-transform: uppercase;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    background-color: var(--dark-red);
    color: var(--white);
}

.button-primary:hover {
    background-color: var(--deep-red);
}

.button-secondary {
    border-color: var(--charcoal);
    color: var(--charcoal);
}

.button-secondary:hover {
    background-color: var(--charcoal);
    color: var(--white);
}

.hero-values {
    align-items: center;
    color: var(--dark-grey);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.71rem;
    font-weight: 700;
    gap: 14px;
    letter-spacing: 0.16em;
    margin-top: 46px;
    text-transform: uppercase;
}

.value-dot {
    background-color: var(--ice-blue-dark);
    border-radius: 50%;
    height: 5px;
    width: 5px;
}


/* Stoic Quote Card */

.stoic-card {
    background:
        linear-gradient(
            145deg,
            var(--charcoal),
            var(--deep-charcoal)
        );
    box-shadow: var(--shadow-soft);
    color: var(--white);
    padding: 16px;
    position: relative;
    transform: translateY(20px);
}

.stoic-card::before {
    border: 1px solid rgba(191, 230, 239, 0.25);
    content: "";
    inset: -13px 13px 13px -13px;
    pointer-events: none;
    position: absolute;
}

.stoic-card-border {
    border: 1px solid rgba(191, 230, 239, 0.24);
    padding: 54px 38px;
    position: relative;
}

.stoic-symbol {
    color: var(--ice-blue);
    font-family: var(--heading-font);
    font-size: 0.77rem;
    letter-spacing: 0.22em;
    margin-bottom: 48px;
}

.stoic-card blockquote {
    font-family: var(--heading-font);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.55;
}

.stoic-line {
    background-color: var(--dark-red);
    height: 3px;
    margin: 38px 0 18px;
    width: 52px;
}

.stoic-caption {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quote-author {
    color: var(--white);
    font-family: var(--heading-font);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.quote-philosophy {
    color: var(--medium-grey);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}


/* ----------------------------------
   Coaching Services
---------------------------------- */

.coaching {
    background:
        linear-gradient(
            180deg,
            var(--light-grey),
            #e6ecef
        );
}

.centered-heading {
    margin: 0 auto 62px;
    max-width: 760px;
    text-align: center;
}

.centered-heading > p:last-child {
    color: var(--dark-grey);
    margin: 22px auto 0;
    max-width: 640px;
}

.service-grid {
    align-items: stretch;
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, 1fr);
}

.service-card {
    background-color: var(--white);
    border: 1px solid rgba(89, 98, 104, 0.15);
    display: flex;
    flex-direction: column;
    min-height: 590px;
    overflow: hidden;
    padding: 42px 34px 34px;
    position: relative;
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.service-card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-8px);
}

.service-number {
    color: rgba(109, 29, 45, 0.11);
    font-family: var(--heading-font);
    font-size: 7rem;
    line-height: 1;
    position: absolute;
    right: 22px;
    top: 20px;
}

.service-icon {
    align-items: center;
    background-color: var(--ice-blue-light);
    border: 1px solid var(--ice-blue);
    display: flex;
    height: 68px;
    justify-content: center;
    margin-bottom: 34px;
    position: relative;
    width: 68px;
    z-index: 2;
}

.service-icon svg {
    fill: none;
    height: 38px;
    stroke: var(--dark-red);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 38px;
}

.service-label {
    color: var(--dark-red);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.service-card h3 {
    color: var(--charcoal);
    font-size: 1.75rem;
    margin-bottom: 20px;
}

.service-card > p:not(.service-label) {
    color: var(--dark-grey);
    font-size: 0.91rem;
}

.service-card ul {
    border-top: 1px solid var(--light-grey);
    margin: 26px 0 30px;
    padding-top: 23px;
}

.service-card li {
    color: var(--dark-grey);
    font-size: 0.82rem;
    padding: 8px 0 8px 22px;
    position: relative;
}

.service-card li::before {
    color: var(--dark-red);
    content: "—";
    left: 0;
    position: absolute;
}

.service-link {
    align-items: center;
    border-top: 1px solid var(--medium-grey);
    color: var(--charcoal);
    display: flex;
    font-size: 0.73rem;
    font-weight: 700;
    justify-content: space-between;
    letter-spacing: 0.08em;
    margin-top: auto;
    padding-top: 20px;
    text-transform: uppercase;
}

.service-link span {
    color: var(--dark-red);
    font-size: 1.25rem;
    transition: transform 0.25s ease;
}

.service-link:hover span {
    transform: translateX(5px);
}

.featured-card {
    background:
        linear-gradient(
            145deg,
            var(--charcoal),
            var(--deep-charcoal)
        );
    border-color: var(--charcoal);
    color: var(--white);
}

.featured-card .featured-label {
    background-color: var(--dark-red);
    color: var(--white);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding: 8px 14px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 0;
}

.featured-card .service-number {
    color: rgba(191, 230, 239, 0.07);
}

.featured-card .service-icon {
    background-color: rgba(191, 230, 239, 0.08);
    border-color: rgba(191, 230, 239, 0.28);
}

.featured-card .service-icon svg {
    stroke: var(--ice-blue);
}

.featured-card .service-label {
    color: var(--ice-blue);
}

.featured-card h3,
.featured-card .service-link {
    color: var(--white);
}

.featured-card > p:not(.service-label),
.featured-card li {
    color: var(--medium-grey);
}

.featured-card ul,
.featured-card .service-link {
    border-color: rgba(203, 210, 214, 0.2);
}

.featured-card li::before,
.featured-card .service-link span {
    color: var(--ice-blue);
}


/* ----------------------------------
   About Kyle
---------------------------------- */

.about {
    background-color: var(--white);
    overflow: hidden;
}

.about-layout {
    align-items: center;
    display: grid;
    gap: 90px;
    grid-template-columns: 0.8fr 1.2fr;
}

.about-visual {
    min-height: 630px;
    position: relative;
}

.portrait-placeholder {
    align-items: flex-start;
    background:
        linear-gradient(
            160deg,
            rgba(191, 230, 239, 0.96),
            rgba(120, 185, 202, 0.65)
        );
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    min-height: 630px;
    overflow: hidden;
    padding: 45px;
    position: relative;
}

.portrait-placeholder::before {
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    content: "";
    height: 480px;
    left: -190px;
    position: absolute;
    top: -140px;
    width: 480px;
}

.portrait-placeholder::after {
    border: 1px solid rgba(109, 29, 45, 0.2);
    content: "";
    inset: 22px;
    position: absolute;
}

.portrait-number {
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--heading-font);
    font-size: clamp(7rem, 15vw, 12rem);
    font-weight: 700;
    left: 50%;
    line-height: 1;
    position: absolute;
    top: 45%;
    transform: translate(-50%, -50%) rotate(-90deg);
}

.portrait-placeholder p {
    color: var(--deep-charcoal);
    font-family: var(--heading-font);
    font-size: 1.55rem;
    line-height: 1.45;
    position: relative;
    text-transform: uppercase;
    z-index: 2;
}

.experience-badge {
    background-color: var(--dark-red);
    bottom: 45px;
    color: var(--white);
    padding: 24px 30px;
    position: absolute;
    right: -34px;
    text-align: center;
    z-index: 3;
}

.experience-badge span {
    font-family: var(--heading-font);
    font-size: 1.4rem;
    font-weight: 600;
}

.experience-badge p {
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-top: 4px;
    text-transform: uppercase;
}

.about-content h2 {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    margin-bottom: 25px;
}

.about-content h2 span {
    display: block;
}

.about-intro {
    color: var(--dark-grey);
    font-size: 1.05rem;
    margin-bottom: 35px;
    max-width: 680px;
}

.career-path {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    margin: 35px 0 42px;
    position: relative;
}

/* Horizontal line behind the timeline items */
.career-path::before {
    background-color: var(--medium-grey);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 7px;
}

.career-item {
    padding-top: 30px;
    position: relative;
}

/* Timeline circle */
.career-marker {
    background-color: var(--dark-red);
    border: 3px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--dark-red);
    height: 14px;
    left: 0;
    position: absolute;
    top: 0;
    width: 14px;
    z-index: 2;
}

.career-title {
    color: var(--charcoal);
    font-family: var(--heading-font);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 3px;
}

.career-item div p:last-child {
    color: var(--dark-grey);
    font-size: 0.84rem;
}

.about-story {
    background-color: var(--light-grey);
    border-left: 4px solid var(--dark-red);
    color: var(--dark-grey);
    padding: 30px;
}

.about-story p {
    font-size: 0.88rem;
}

.about-story p + p {
    margin-top: 17px;
}


/* ----------------------------------
   Contact and Player Inquiry
---------------------------------- */

.contact {
    background:
        linear-gradient(
            180deg,
            var(--light-grey),
            var(--ice-blue-light)
        );
}

.contact-heading {
    margin: 0 auto 55px;
    max-width: 800px;
    text-align: center;
}

.contact-heading h2 {
    color: var(--charcoal);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    letter-spacing: -0.035em;
    margin-bottom: 22px;
}

.contact-heading h2 span {
    display: block;
}

.contact-heading > p:last-child {
    color: var(--dark-grey);
    margin: 0 auto;
    max-width: 700px;
}

.contact-layout {
    align-items: stretch;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
}

/* Left-side personal message */

.contact-message {
    background:
        linear-gradient(
            145deg,
            var(--charcoal),
            var(--deep-charcoal)
        );
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 58px 48px;
    position: relative;
}

.contact-message::before {
    border: 1px solid rgba(191, 230, 239, 0.2);
    content: "";
    inset: 18px;
    pointer-events: none;
    position: absolute;
}

.contact-message > * {
    position: relative;
    z-index: 2;
}

.contact-small-title {
    color: var(--ice-blue);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    margin-bottom: 22px;
    text-transform: uppercase;
}

.contact-message blockquote {
    font-family: var(--heading-font);
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    line-height: 1.55;
    margin-bottom: 30px;
}

.contact-message > p:not(.contact-small-title) {
    color: var(--medium-grey);
    font-size: 0.9rem;
}

.direct-contact {
    border-top: 1px solid rgba(203, 210, 214, 0.2);
    margin-top: 38px;
    padding-top: 26px;
}

.direct-contact p {
    color: var(--medium-grey);
    font-size: 0.76rem;
    margin-bottom: 7px;
}

.direct-contact a {
    color: var(--ice-blue);
    font-size: 0.95rem;
    font-weight: 600;
    transition: color 0.25s ease;
}

.direct-contact a:hover {
    color: var(--white);
    text-decoration: underline;
}

/* Form */

.contact-form {
    background-color: var(--white);
    border: 1px solid rgba(89, 98, 104, 0.15);
    padding: 52px 48px;
}

.form-heading {
    border-bottom: 1px solid var(--light-grey);
    margin-bottom: 32px;
    padding-bottom: 28px;
}

.form-heading .contact-small-title {
    color: var(--dark-red);
    margin-bottom: 8px;
}

.form-heading h3 {
    color: var(--charcoal);
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.form-heading > p:last-child {
    color: var(--dark-grey);
    font-size: 0.86rem;
}

.form-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, 1fr);
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-group label {
    color: var(--charcoal);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea {
    background-color: var(--light-grey);
    border: 1px solid transparent;
    border-radius: 0;
    color: var(--charcoal);
    font-family: var(--body-font);
    font-size: 0.9rem;
    outline: none;
    padding: 14px 15px;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease;
    width: 100%;
}

.form-group input,
.form-group select {
    min-height: 51px;
}

.form-group textarea {
    line-height: 1.6;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #879096;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background-color: var(--white);
    border-color: var(--ice-blue-dark);
}

.form-submit-button {
    background-color: var(--dark-red);
    border: 1px solid var(--dark-red);
    color: var(--white);
    cursor: pointer;
    font-family: var(--body-font);
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    margin-top: 28px;
    min-height: 54px;
    padding: 0 30px;
    text-transform: uppercase;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
    width: 100%;
}

.form-submit-button:hover {
    background-color: var(--deep-red);
    border-color: var(--deep-red);
    transform: translateY(-2px);
}

.form-privacy-note {
    color: var(--dark-grey);
    font-size: 0.7rem;
    margin-top: 15px;
    text-align: center;
}


/* ----------------------------------
   Responsive Design
---------------------------------- */

@media (max-width: 1000px) {
    :root {
        --section-space: 90px;
    }

    .hero-layout,
    .about-layout,
    .contact-panel {
        gap: 55px;
    }

    .hero-layout {
        grid-template-columns: 1.1fr 0.9fr;
    }

    .service-grid {
        grid-template-columns: 1fr;
        margin-inline: auto;
        max-width: 680px;
    }

    .service-card {
        min-height: auto;
    }

    .about-layout {
        align-items: start;
    }

    .about-visual,
    .portrait-placeholder {
        min-height: 570px;
    }

    .contact-panel {
        padding: 55px;
    }
}


@media (max-width: 800px) {
    .nav-links a:not(.nav-cta) {
        display: none;
    }

    .hero {
        min-height: auto;
        padding: 80px 0;
    }

    .hero-layout,
    .about-layout,
    .contact-panel {
        grid-template-columns: 1fr;
    }

    .hero-layout {
        gap: 70px;
    }

    .stoic-card {
        max-width: 520px;
    }

    .about-visual {
        margin-right: 30px;
        max-width: 540px;
    }

    .contact-actions {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.23);
        padding-left: 0;
        padding-top: 35px;
    }

    .footer-layout {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }
}


@media (max-width: 560px) {
    :root {
        --section-space: 72px;
    }

    .container {
        width: min(92%, var(--container-width));
    }

    .navbar {
        min-height: 72px;
    }

    .logo-number {
        font-size: 1.5rem;
    }

    .nav-links .nav-cta {
        font-size: 0.68rem;
        padding: 9px 13px;
    }

    .hero {
        padding: 65px 0;
    }

    .hero h1 {
        font-size: clamp(2.65rem, 14vw, 4rem);
    }

    .hero-description {
        font-size: 0.95rem;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .stoic-card-border {
        padding: 42px 26px;
    }

    .service-card {
        padding: 38px 26px 28px;
    }

    .about-visual,
    .portrait-placeholder {
        min-height: 480px;
    }

    .portrait-placeholder {
        padding: 32px;
    }

    .portrait-placeholder p {
        font-size: 1.2rem;
    }

    .experience-badge {
        bottom: 25px;
        padding: 18px 22px;
        right: -20px;
    }

    .about-story {
        padding: 24px;
    }

    .contact-panel {
        padding: 42px 28px;
    }
}


/* ----------------------------------
   Accessibility
---------------------------------- */

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--ice-blue-dark);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}

.coach-photo-container {
    background-color: var(--ice-blue-light);
    border: 1px solid rgba(89, 98, 104, 0.15);
    height: 630px;
    overflow: hidden;
    position: relative;
}

.coach-photo-container::after {
    border: 1px solid rgba(255, 255, 255, 0.55);
    content: "";
    inset: 20px;
    pointer-events: none;
    position: absolute;
}

.coach-photo {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    width: 100%;
}

/* Dark styling for all three coaching panels */

.service-card {
    background: linear-gradient(
        145deg,
        var(--charcoal),
        var(--deep-charcoal)
    );

    border: 1px solid rgba(191, 230, 239, 0.2);
    color: var(--white);
}

.service-card .service-number {
    color: rgba(191, 230, 239, 0.08);
}

.service-card .service-icon {
    background-color: rgba(191, 230, 239, 0.08);
    border-color: rgba(191, 230, 239, 0.3);
}

.service-card .service-icon svg {
    stroke: var(--ice-blue);
}

.service-card .service-label {
    color: var(--ice-blue);
}

.service-card h3 {
    color: var(--white);
}

.service-card > p:not(.service-label) {
    color: var(--medium-grey);
}

.service-card ul {
    border-color: rgba(203, 210, 214, 0.2);
}

.service-card li {
    color: var(--medium-grey);
}

.service-card li::before {
    color: var(--ice-blue);
}

.service-card .service-link {
    border-color: rgba(203, 210, 214, 0.2);
    color: var(--white);
}

.service-card .service-link span {
    color: var(--ice-blue);
}

.service-card:hover {
    border-color: var(--ice-blue-dark);
    box-shadow: 0 22px 50px rgba(12, 21, 26, 0.25);
}

/* ----------------------------------
   Clickable Service Panels
---------------------------------- */

.clickable-card {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.clickable-card:hover {
    border-color: var(--ice-blue-dark);
    box-shadow: 0 24px 55px rgba(12, 21, 26, 0.32);
    transform: translateY(-10px);
}

.clickable-card:hover .service-link span:last-child {
    transform: translateX(7px);
}

.clickable-card:focus-visible {
    border-color: var(--ice-blue);
    outline: 3px solid var(--ice-blue-dark);
    outline-offset: 5px;
}


/* ----------------------------------
   Coaching Detail Pages
---------------------------------- */

.program-page {
    background-color: var(--light-grey);
}

.program-header {
    background-color: var(--deep-charcoal);
    border-bottom: 1px solid rgba(191, 230, 239, 0.2);
}

.program-header .logo-word {
    color: var(--white);
}

.program-header .nav-links a {
    color: var(--medium-grey);
}

.program-header .nav-links a:hover {
    color: var(--ice-blue);
}

.program-header .nav-cta {
    color: var(--white);
}

.program-hero {
    background:
        linear-gradient(
            120deg,
            var(--deep-charcoal),
            var(--charcoal)
        );
    color: var(--white);
    overflow: hidden;
    padding: 110px 0 100px;
    position: relative;
}

.program-hero::before {
    background-image:
        linear-gradient(
            rgba(191, 230, 239, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(191, 230, 239, 0.04) 1px,
            transparent 1px
        );
    background-size: 50px 50px;
    content: "";
    inset: 0;
    position: absolute;
}

.program-hero::after {
    border: 1px solid rgba(191, 230, 239, 0.15);
    border-radius: 50%;
    content: "";
    height: 620px;
    position: absolute;
    right: -280px;
    top: -310px;
    width: 620px;
}

.program-hero-content {
    max-width: 850px;
    position: relative;
    z-index: 2;
}

.program-number {
    color: rgba(191, 230, 239, 0.12);
    font-family: var(--heading-font);
    font-size: clamp(7rem, 18vw, 13rem);
    line-height: 0.75;
    margin-bottom: -15px;
}

.program-hero .eyebrow {
    color: var(--ice-blue);
}

.program-hero h1 {
    font-size: clamp(3rem, 7vw, 6rem);
    letter-spacing: -0.045em;
    margin-bottom: 28px;
}

.program-hero h1 span {
    color: var(--ice-blue);
    display: block;
}

.program-hero-description {
    color: var(--medium-grey);
    font-size: 1.08rem;
    max-width: 740px;
}

.program-intro {
    background-color: var(--white);
}

.program-intro-layout {
    align-items: start;
    display: grid;
    gap: 80px;
    grid-template-columns: 0.8fr 1.2fr;
}

.program-intro h2,
.program-heading h2,
.program-cta h2 {
    font-size: clamp(2.3rem, 4.5vw, 4.1rem);
}

.program-intro-copy {
    border-left: 3px solid var(--dark-red);
    color: var(--dark-grey);
    padding-left: 32px;
}

.program-intro-copy p + p {
    margin-top: 20px;
}

.program-features {
    background-color: var(--light-grey);
}

.program-heading {
    margin-bottom: 55px;
    max-width: 780px;
}

.program-heading > p:last-child {
    color: var(--dark-grey);
    margin-top: 18px;
}

.program-feature-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, 1fr);
}

.program-feature-card {
    background:
        linear-gradient(
            145deg,
            var(--charcoal),
            var(--deep-charcoal)
        );
    border: 1px solid rgba(191, 230, 239, 0.18);
    color: var(--white);
    min-height: 300px;
    padding: 38px;
    position: relative;
}

.program-feature-number {
    color: rgba(191, 230, 239, 0.1);
    font-family: var(--heading-font);
    font-size: 4.5rem;
    line-height: 1;
    position: absolute;
    right: 24px;
    top: 20px;
}

.program-feature-card h3 {
    font-size: 1.55rem;
    margin-bottom: 18px;
    max-width: 78%;
    position: relative;
}

.program-feature-card p {
    color: var(--medium-grey);
    font-size: 0.9rem;
    position: relative;
}

.program-details {
    background-color: var(--white);
}

.program-detail {
    align-items: center;
    display: grid;
    gap: 70px;
    grid-template-columns: 0.9fr 1.1fr;
}

.program-detail + .program-detail {
    border-top: 1px solid var(--medium-grey);
    margin-top: 80px;
    padding-top: 80px;
}

.program-detail.reverse {
    grid-template-columns: 1.1fr 0.9fr;
}

.program-detail.reverse .program-visual {
    order: 2;
}

.program-visual {
    align-items: center;
    background:
        linear-gradient(
            145deg,
            var(--ice-blue-light),
            var(--ice-blue)
        );
    display: flex;
    justify-content: center;
    min-height: 370px;
    overflow: hidden;
    position: relative;
}

.program-visual::before {
    border: 1px solid rgba(109, 29, 45, 0.2);
    content: "";
    inset: 22px;
    position: absolute;
}

.program-visual span {
    color: rgba(109, 29, 45, 0.46);
    font-family: var(--heading-font);
    font-size: clamp(4rem, 10vw, 8rem);
    position: relative;
}

.program-detail-copy h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 22px;
}

.program-detail-copy > p {
    color: var(--dark-grey);
}

.program-detail-list {
    margin-top: 25px;
}

.program-detail-list li {
    border-top: 1px solid var(--light-grey);
    color: var(--dark-grey);
    font-size: 0.9rem;
    padding: 13px 0 13px 25px;
    position: relative;
}

.program-detail-list li::before {
    color: var(--dark-red);
    content: "—";
    left: 0;
    position: absolute;
}

.program-cta {
    background:
        linear-gradient(
            125deg,
            var(--dark-red),
            var(--deep-red)
        );
    color: var(--white);
    padding: 95px 0;
    text-align: center;
}

.program-cta-content {
    margin: auto;
    max-width: 800px;
}

.program-cta .eyebrow {
    color: var(--ice-blue);
}

.program-cta h2 span {
    color: var(--ice-blue);
    display: block;
}

.program-cta p {
    color: rgba(255, 255, 255, 0.76);
    margin: 25px auto 35px;
    max-width: 660px;
}

.program-cta .button {
    background-color: var(--ice-blue-light);
    color: var(--deep-red);
}

.program-cta .button:hover {
    background-color: var(--white);
}

@media (max-width: 800px) {
    .program-intro-layout,
    .program-detail,
    .program-detail.reverse {
        grid-template-columns: 1fr;
    }

    .program-feature-grid {
        grid-template-columns: 1fr;
    }

    .program-detail.reverse .program-visual {
        order: initial;
    }

    .program-hero {
        padding: 90px 0 80px;
    }

    .program-visual {
        min-height: 300px;
    }
}

@media (max-width: 560px) {
    .program-feature-card {
        min-height: auto;
        padding: 32px 26px;
    }

    .program-intro-layout,
    .program-detail {
        gap: 40px;
    }

    .program-detail + .program-detail {
        margin-top: 60px;
        padding-top: 60px;
    }
}

/* ----------------------------------
   Coaching Navigation Dropdown
---------------------------------- */

.nav-dropdown {
    position: relative;
}

.nav-dropdown summary {
    align-items: center;
    color: var(--dark-grey);
    cursor: pointer;
    display: flex;
    font-size: 0.83rem;
    font-weight: 600;
    gap: 6px;
    list-style: none;
    transition: color 0.25s ease;
}

.nav-dropdown summary::-webkit-details-marker {
    display: none;
}

.nav-dropdown summary:hover,
.nav-dropdown[open] summary {
    color: var(--dark-red);
}

.dropdown-arrow {
    display: inline-block;
    font-size: 0.9rem;
    transition: transform 0.25s ease;
}

.nav-dropdown[open] .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    background:
        linear-gradient(
            145deg,
            var(--charcoal),
            var(--deep-charcoal)
        );
    border: 1px solid rgba(191, 230, 239, 0.2);
    box-shadow: 0 20px 45px rgba(12, 21, 26, 0.24);
    min-width: 310px;
    opacity: 0;
    padding: 10px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: calc(100% + 20px);
    transform: translateY(-8px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
    visibility: hidden;
    z-index: 2000;
}

/* Prevents the menu from closing while moving the mouse downward */

.dropdown-menu::before {
    content: "";
    height: 22px;
    left: 0;
    position: absolute;
    top: -22px;
    width: 100%;
}

.nav-dropdown[open] .dropdown-menu,
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
}

.nav-dropdown .dropdown-menu a {
    align-items: center;
    border-bottom: 1px solid rgba(203, 210, 214, 0.13);
    display: grid;
    gap: 15px;
    grid-template-columns: 35px 1fr;
    padding: 17px 15px;
    transition:
        background-color 0.2s ease,
        padding-left 0.2s ease;
}

.nav-dropdown .dropdown-menu a:last-child {
    border-bottom: none;
}

.nav-dropdown .dropdown-menu a:hover {
    background-color: rgba(191, 230, 239, 0.08);
    padding-left: 20px;
}

.dropdown-number {
    color: var(--ice-blue);
    font-family: var(--heading-font);
    font-size: 1rem;
    font-weight: 600;
}

.dropdown-menu strong {
    color: var(--white);
    display: block;
    font-size: 0.82rem;
    margin-bottom: 2px;
}

.dropdown-menu small {
    color: var(--medium-grey);
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    line-height: 1.4;
}


/* Mobile Dropdown */

@media (max-width: 800px) {
    .nav-dropdown summary {
        font-size: 0.75rem;
    }

    .dropdown-menu {
        min-width: 280px;
        right: -80px;
        top: calc(100% + 16px);
    }

    .nav-dropdown .dropdown-menu a {
        display: grid !important;
    }
}

@media (max-width: 560px) {
    .dropdown-menu {
        min-width: 265px;
        right: -100px;
    }

    .dropdown-menu small {
        display: none;
    }
}

/* ----------------------------------
   iPhone and Mobile Improvements
---------------------------------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

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

img,
video,
svg {
    height: auto;
    max-width: 100%;
}

input,
select,
textarea,
button {
    font: inherit;
}

/* Prevent iPhones from automatically zooming into form fields */
input,
select,
textarea {
    font-size: 16px;
}

@media (max-width: 768px) {

    .container {
        width: 92%;
    }

    .section {
        padding: 70px 0;
    }

    /* Navigation */

    .navbar {
        min-height: 70px;
    }

    .nav-links {
        gap: 10px;
    }

    .nav-links a:not(.nav-cta) {
        display: none;
    }

    .nav-cta {
        white-space: nowrap;
    }

    /* Hero */

    .hero {
        min-height: auto;
        padding: 65px 0;
    }

    .hero-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .hero h1 {
        font-size: clamp(2.6rem, 12vw, 4rem);
        overflow-wrap: break-word;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }

    .stoic-card {
        margin: 0 auto;
        max-width: 100%;
        transform: none;
        width: 100%;
    }

    .stoic-card::before {
        display: none;
    }

    /* Coaching cards */

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

    .service-card {
        min-height: auto;
        width: 100%;
    }

    /* About Kyle */

    .about-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-visual {
        margin: 0;
        min-height: 450px;
        width: 100%;
    }

    .portrait-placeholder {
        min-height: 450px;
    }

    .experience-badge {
        bottom: 20px;
        right: 15px;
    }

    /* Career timeline */

    .career-path {
        grid-template-columns: 1fr;
    }

    .career-path::before {
        bottom: 0;
        height: auto;
        left: 6px;
        right: auto;
        top: 0;
        width: 1px;
    }

    .career-item {
        padding-left: 32px;
        padding-top: 0;
    }

    .career-marker {
        left: 0;
        top: 6px;
    }

    /* Contact section */

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-message,
    .contact-form {
        padding: 42px 30px;
    }

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

    .form-group-full {
        grid-column: auto;
    }

    /* Footer */

    .footer-layout {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 480px) {

    .container {
        width: 90%;
    }

    .section {
        padding: 58px 0;
    }

    .logo-number {
        font-size: 1.4rem;
    }

    .logo-word {
        font-size: 0.62rem;
    }

    .nav-links .nav-cta {
        font-size: 0.65rem;
        padding: 9px 12px;
    }

    .hero h1 {
        font-size: 2.65rem;
    }

    .section-heading h2,
    .contact-heading h2,
    .about-content h2 {
        font-size: 2.35rem;
    }

    .stoic-card-border {
        padding: 38px 23px;
    }

    .service-card {
        padding: 35px 24px 27px;
    }

    .service-number {
        font-size: 5rem;
    }

    .contact-message,
    .contact-form {
        padding: 36px 22px;
    }

    .contact-message::before {
        inset: 10px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
    }

    .form-submit-button {
        width: 100%;
    }
}

/* ----------------------------------
   Coaching Detail Pages
---------------------------------- */

.detail-hero {
    background:
        linear-gradient(
            120deg,
            var(--ice-blue-light),
            var(--light-grey)
        );
    border-bottom: 1px solid var(--medium-grey);
    padding: 105px 0;
    position: relative;
}

.detail-hero-layout {
    align-items: center;
    display: grid;
    gap: 90px;
    grid-template-columns: 1.2fr 0.8fr;
}

.detail-back-link {
    align-items: center;
    background-color: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(89, 98, 104, 0.2);
    color: var(--dark-grey);
    display: inline-flex;
    font-size: 0.7rem;
    font-weight: 700;
    left: max(
        5%,
        calc((100% - var(--container-width)) / 2)
    );
    letter-spacing: 0.08em;
    padding: 10px 15px;
    position: absolute;
    text-transform: uppercase;
    top: 24px;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
    z-index: 3;
}

.detail-back-link:hover {
    background-color: var(--white);
    border-color: var(--dark-red);
    color: var(--dark-red);
    transform: translateX(-3px);
}

.detail-hero h1 {
    color: var(--charcoal);
    font-size: clamp(3.2rem, 7vw, 6.3rem);
    letter-spacing: -0.05em;
    margin-bottom: 27px;
}

.detail-hero h1 span {
    display: block;
}

.detail-hero-description {
    color: var(--dark-grey);
    font-size: 1.05rem;
    margin-bottom: 0;
    max-width: 650px;
}

.detail-principle {
    border-bottom: 1px solid var(--dark-red);
    border-top: 1px solid var(--dark-red);
    padding: 45px 6px;
}

.detail-roman-number {
    color: var(--dark-red);
    font-family: var(--heading-font);
    font-size: 1rem;
    letter-spacing: 0.15em;
    margin-bottom: 26px;
}

.detail-principle blockquote {
    color: var(--charcoal);
    font-family: var(--heading-font);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    line-height: 1.55;
}

.detail-principle-label {
    color: var(--dark-grey);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-top: 28px;
    text-transform: uppercase;
}


/* Introduction */

.detail-introduction {
    background-color: var(--white);
}

.detail-two-column {
    align-items: start;
    display: grid;
    gap: 90px;
    grid-template-columns: 0.9fr 1.1fr;
}

.detail-section-heading h2 {
    color: var(--charcoal);
    font-size: clamp(2.3rem, 4.5vw, 4.1rem);
    letter-spacing: -0.035em;
}

.detail-section-heading h2 span {
    display: block;
}

.detail-copy {
    border-left: 2px solid var(--ice-blue-dark);
    color: var(--dark-grey);
    padding-left: 34px;
}

.detail-copy p + p {
    margin-top: 21px;
}


/* Three Focus Areas */

.detail-focus {
    background-color: var(--light-grey);
}

.detail-centered-heading {
    margin: 0 auto 58px;
    max-width: 760px;
    text-align: center;
}

.detail-centered-heading h2 {
    color: var(--charcoal);
    font-size: clamp(2.3rem, 4.5vw, 4.1rem);
    letter-spacing: -0.035em;
}

.detail-centered-heading h2 span {
    display: block;
}

.detail-feature-grid {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(3, 1fr);
}

.detail-feature {
    background-color: var(--white);
    border-top: 3px solid var(--dark-red);
    min-height: 300px;
    padding: 42px 34px;
}

.detail-feature-number {
    color: var(--dark-red);
    font-family: var(--heading-font);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 35px;
}

.detail-feature h3 {
    color: var(--charcoal);
    font-size: 1.45rem;
    margin-bottom: 17px;
}

.detail-feature > p:last-child {
    color: var(--dark-grey);
    font-size: 0.9rem;
}


/* Process */

.detail-process {
    background-color: var(--white);
}

.detail-process-list {
    border-top: 1px solid var(--medium-grey);
}

.detail-process-item {
    align-items: start;
    border-bottom: 1px solid var(--medium-grey);
    display: grid;
    gap: 24px;
    grid-template-columns: 42px 1fr;
    padding: 27px 0;
}

.detail-process-item > span {
    align-items: center;
    border: 1px solid var(--dark-red);
    color: var(--dark-red);
    display: flex;
    font-family: var(--heading-font);
    height: 36px;
    justify-content: center;
    width: 36px;
}

.detail-process-item h3 {
    color: var(--charcoal);
    font-size: 1.15rem;
    margin-bottom: 7px;
}

.detail-process-item p {
    color: var(--dark-grey);
    font-size: 0.88rem;
}


/* ----------------------------------
   Subtle Detail Page Contact Section
---------------------------------- */

.detail-cta {
    background:
        linear-gradient(
            180deg,
            var(--white),
            var(--light-grey)
        );
    padding-top: 35px;
}

.detail-cta-panel {
    align-items: center;
    background-color: var(--white);
    border: 1px solid rgba(89, 98, 104, 0.17);
    border-left: 5px solid var(--dark-red);
    display: grid;
    gap: 55px;
    grid-template-columns: 1fr auto;
    padding: 46px 50px;
    position: relative;
}

.detail-cta-panel::after {
    background-color: var(--ice-blue-light);
    content: "";
    height: 70px;
    opacity: 0.6;
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
}

.detail-cta-copy {
    max-width: 760px;
    position: relative;
    z-index: 2;
}

.detail-cta-panel .eyebrow {
    color: var(--dark-red);
    margin-bottom: 10px;
}

.detail-cta-panel h2 {
    color: var(--charcoal);
    font-size: clamp(1.75rem, 3.2vw, 2.8rem);
    margin-bottom: 14px;
    max-width: 720px;
}

.detail-cta-copy > p:last-child {
    color: var(--dark-grey);
    font-size: 0.9rem;
    max-width: 720px;
}

.detail-cta-button {
    align-items: center;
    border: 1px solid var(--dark-red);
    color: var(--dark-red);
    display: inline-flex;
    font-size: 0.74rem;
    font-weight: 700;
    gap: 28px;
    justify-content: space-between;
    letter-spacing: 0.09em;
    min-width: 190px;
    padding: 16px 20px;
    position: relative;
    text-transform: uppercase;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
    z-index: 2;
}

.detail-cta-button span {
    font-size: 1.15rem;
    transition: transform 0.25s ease;
}

.detail-cta-button:hover {
    background-color: var(--dark-red);
    color: var(--white);
    transform: translateY(-2px);
}

.detail-cta-button:hover span {
    transform: translateX(4px);
}



/* ----------------------------------
   Detail Page Tablet Styling
---------------------------------- */

@media (max-width: 900px) {

    .detail-hero-layout,
    .detail-two-column {
        gap: 55px;
    }

    .detail-feature {
        padding: 38px 27px;
    }
}


/* ----------------------------------
   Detail Page Mobile Styling
---------------------------------- */

@media (max-width: 768px) {

    .detail-hero {
    padding: 90px 0 70px;
}

    .detail-hero-layout,
    .detail-two-column {
        grid-template-columns: 1fr;
    }

    .detail-hero-layout {
        gap: 60px;
    }

    .detail-two-column {
        gap: 35px;
    }

    .detail-principle {
        max-width: 600px;
    }

    .detail-feature-grid {
        gap: 16px;
        grid-template-columns: 1fr;
    }

    .detail-feature {
        min-height: auto;
    }

    .detail-cta-panel {
    gap: 30px;
    grid-template-columns: 1fr;
    padding: 40px 34px;
}

.detail-cta-button {
    min-width: 0;
    width: 100%;
}
}


@media (max-width: 480px) {

    .detail-hero {
        padding: 58px 0;
    }

    .detail-hero h1 {
        font-size: 3rem;
    }

   .detail-back-link {
    font-size: 0.63rem;
    left: 5%;
    padding: 8px 12px;
    top: 14px;
}

    .detail-copy {
        padding-left: 22px;
    }

    .detail-feature {
        padding: 34px 24px;
    }

    .detail-process-item {
        gap: 17px;
        grid-template-columns: 36px 1fr;
    }

    .detail-process-item > span {
        height: 32px;
        width: 32px;
    }

    .detail-cta {
    padding-top: 20px;
}

.detail-cta-panel {
    padding: 34px 24px;
}

.detail-cta-panel::after {
    height: 50px;
    width: 50px;
}
}

/* Keep all three home-page coaching panels aligned */

.service-grid {
    align-items: stretch;
}

.service-card {
    height: 100%;
    min-width: 0;
}

.service-card .service-link {
    margin-top: auto;
    width: 100%;
}

/* ----------------------------------
   DEVELOPMENT PLANS & PRICING
---------------------------------- */


/* Hero */

.pricing-hero {
    background:
        linear-gradient(
            120deg,
            var(--ice-blue-light),
            var(--light-grey)
        );
}

.pricing-hero-layout {
    align-items: center;
    display: grid;
    gap: 90px;
    grid-template-columns: 1.2fr 0.8fr;
}

.pricing-hero h1 {
    color: var(--charcoal);
    font-size: clamp(3.2rem, 7vw, 6.3rem);
    letter-spacing: -0.05em;
    margin-bottom: 27px;
}

.pricing-hero h1 span {
    color: var(--dark-red);
    display: block;
}

.pricing-hero-message {
    border-bottom: 1px solid var(--dark-red);
    border-top: 1px solid var(--dark-red);
    padding: 42px 6px;
}

.pricing-hero-message > span {
    color: var(--dark-red);
    display: block;
    font-family: var(--heading-font);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 25px;
}

.pricing-hero-message blockquote {
    color: var(--charcoal);
    font-family: var(--heading-font);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.5;
}

.pricing-hero-message p {
    color: var(--dark-grey);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin-top: 25px;
    text-transform: uppercase;
}


/* ----------------------------------
   Roadmap
---------------------------------- */

.pricing-roadmap {
    background-color: var(--charcoal);
    color: var(--white);
}

.pricing-roadmap-grid {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    min-height: 115px;
}

.roadmap-item {
    align-items: center;
    display: flex;
    gap: 18px;
    padding: 22px 15px;
}

.roadmap-item > span {
    color: var(--ice-blue);
    font-family: var(--heading-font);
    font-size: 0.78rem;
    font-weight: 600;
}

.roadmap-item strong {
    display: block;
    font-family: var(--heading-font);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.roadmap-item p {
    color: var(--medium-grey);
    font-size: 0.7rem;
}

.roadmap-divider {
    background-color: rgba(191, 230, 239, 0.2);
    height: 42px;
    width: 1px;
}


/* ----------------------------------
   General Step Headings
---------------------------------- */

.pricing-step {
    background-color: var(--white);
}

.pricing-step-heading {
    margin-bottom: 52px;
    max-width: 800px;
}

.pricing-step-number {
    color: rgba(109, 29, 45, 0.22);
    font-family: var(--heading-font);
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 15px;
}

.pricing-step-heading h2 {
    color: var(--charcoal);
    font-size: clamp(2.5rem, 4.5vw, 4.2rem);
    letter-spacing: -0.035em;
    margin-bottom: 20px;
}

.pricing-step-heading h2 span {
    display: block;
}

.pricing-step-heading > p:last-child {
    color: var(--dark-grey);
    max-width: 650px;
}


/* ----------------------------------
   STEP 1 — Starting Options
---------------------------------- */

.start-option-grid {
    align-items: stretch;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, 1fr);
}

.start-option-card {
    background-color: var(--light-grey);
    border: 1px solid rgba(89, 98, 104, 0.15);
    border-top: 4px solid var(--ice-blue-dark);
    display: flex;
    flex-direction: column;
    min-height: 540px;
    padding: 38px;
}

.start-option-featured {
    background:
        linear-gradient(
            145deg,
            var(--charcoal),
            var(--deep-charcoal)
        );
    border-color: var(--charcoal);
    border-top-color: var(--dark-red);
    color: var(--white);
}

.start-option-top {
    align-items: start;
    display: flex;
    gap: 25px;
    justify-content: space-between;
}

.start-option-label {
    color: var(--dark-red);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 9px;
    text-transform: uppercase;
}

.start-option-featured .start-option-label {
    color: var(--ice-blue);
}

.start-option-card h3 {
    color: var(--charcoal);
    font-size: clamp(1.45rem, 2.3vw, 2rem);
    max-width: 420px;
}

.start-option-featured h3 {
    color: var(--white);
}

.start-option-price {
    color: var(--dark-red);
    flex-shrink: 0;
    font-family: var(--heading-font);
    font-size: 1.65rem;
    font-weight: 600;
}

.start-option-featured .start-option-price {
    color: var(--ice-blue);
}

.start-option-free {
    font-size: 1.3rem;
    text-transform: uppercase;
}

.start-option-best {
    color: var(--dark-grey);
    font-size: 0.9rem;
    margin-top: 28px;
}

.start-option-featured .start-option-best {
    color: var(--medium-grey);
}

.simple-check-list {
    border-top: 1px solid rgba(89, 98, 104, 0.15);
    margin: 27px 0 30px;
    padding-top: 17px;
}

.start-option-featured .simple-check-list {
    border-color: rgba(203, 210, 214, 0.2);
}

.simple-check-list li {
    color: var(--dark-grey);
    font-size: 0.83rem;
    padding: 8px 0 8px 24px;
    position: relative;
}

.start-option-featured .simple-check-list li {
    color: var(--medium-grey);
}

.simple-check-list li::before {
    color: var(--dark-red);
    content: "✓";
    font-weight: 700;
    left: 0;
    position: absolute;
}

.start-option-featured .simple-check-list li::before {
    color: var(--ice-blue);
}

.start-option-link {
    align-items: center;
    border-top: 1px solid rgba(89, 98, 104, 0.2);
    color: var(--dark-red);
    display: flex;
    font-size: 0.72rem;
    font-weight: 700;
    justify-content: space-between;
    letter-spacing: 0.08em;
    margin-top: auto;
    padding-top: 20px;
    text-transform: uppercase;
}

.start-option-featured .start-option-link {
    border-color: rgba(203, 210, 214, 0.2);
    color: var(--ice-blue);
}

.start-option-link span {
    font-size: 1.1rem;
    transition: transform 0.25s ease;
}

.start-option-link:hover span {
    transform: translateX(5px);
}


/* ----------------------------------
   STEP 2 — Build the Plan
---------------------------------- */

.pricing-build {
    background:
        linear-gradient(
            180deg,
            var(--light-grey),
            #e7edef
        );
}

.build-path {
    align-items: stretch;
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr auto 1fr auto 1fr;
}

.build-choice {
    background-color: var(--white);
    border-top: 3px solid var(--dark-red);
    min-height: 285px;
    padding: 32px 28px;
}

.build-choice-number {
    align-items: center;
    border: 1px solid var(--dark-red);
    color: var(--dark-red);
    display: flex;
    font-family: var(--heading-font);
    height: 34px;
    justify-content: center;
    margin-bottom: 28px;
    width: 34px;
}

.build-choice-label {
    color: var(--dark-red);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.build-choice h3 {
    color: var(--charcoal);
    font-size: 1.45rem;
    margin-bottom: 15px;
}

.build-choice > p:last-child,
.build-choice li {
    color: var(--dark-grey);
    font-size: 0.84rem;
}

.build-choice li {
    border-top: 1px solid var(--light-grey);
    padding: 7px 0;
}

.build-arrow {
    align-items: center;
    color: var(--dark-red);
    display: flex;
    font-family: var(--heading-font);
    font-size: 1.7rem;
}


/* 8 / 12 Week Cards */

.plan-length-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 50px;
}

.plan-length-card {
    align-items: center;
    background-color: var(--white);
    border: 1px solid rgba(89, 98, 104, 0.15);
    display: grid;
    gap: 30px;
    grid-template-columns: auto 1fr;
    padding: 35px;
}

.plan-length-number {
    color: rgba(109, 29, 45, 0.18);
    font-family: var(--heading-font);
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
}

.plan-length-card .eyebrow {
    margin-bottom: 7px;
}

.plan-length-card h3 {
    color: var(--charcoal);
    font-size: 1.35rem;
    margin-bottom: 10px;
}

.plan-length-card p:last-child {
    color: var(--dark-grey);
    font-size: 0.84rem;
}


/* Flexibility */

.flexibility-note {
    align-items: center;
    background-color: var(--ice-blue-light);
    border-left: 4px solid var(--ice-blue-dark);
    display: grid;
    gap: 30px;
    grid-template-columns: auto 1fr;
    margin-top: 25px;
    padding: 30px 34px;
}

.flexibility-symbol {
    color: rgba(109, 29, 45, 0.35);
    font-family: var(--heading-font);
    font-size: 1.25rem;
    font-weight: 700;
}

.flexibility-note h3 {
    color: var(--charcoal);
    font-size: 1.15rem;
    margin-bottom: 6px;
}

.flexibility-note p {
    color: var(--dark-grey);
    font-size: 0.84rem;
}


/* ----------------------------------
   STEP 3 — Session Pricing
---------------------------------- */

.pricing-sessions {
    background-color: var(--white);
}

.session-rate-grid {
    align-items: start;
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, 1fr);
}

.session-rate-card {
    background:
        linear-gradient(
            145deg,
            var(--charcoal),
            var(--deep-charcoal)
        );
    border: 1px solid rgba(191, 230, 239, 0.18);
    color: var(--white);
    padding: 34px 30px;
}

.session-rate-category {
    color: var(--ice-blue);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.session-rate-card h3 {
    font-size: 1.5rem;
    margin-bottom: 25px;
}

.session-rate-row {
    align-items: center;
    border-top: 1px solid rgba(203, 210, 214, 0.18);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 15px 0;
}

.session-rate-row span {
    color: var(--medium-grey);
    font-size: 0.82rem;
}

.session-rate-row span small {
    color: var(--dark-grey);
    display: block;
    font-size: 0.68rem;
    margin-top: 2px;
}

.session-rate-row strong {
    color: var(--ice-blue);
    flex-shrink: 0;
    font-family: var(--heading-font);
    font-size: 1rem;
}

.session-rate-variable {
    align-items: start;
}


/* Pricing Explanation */

.pricing-simple-note {
    border-left: 4px solid var(--dark-red);
    margin-top: 35px;
    max-width: 720px;
    padding: 8px 0 8px 28px;
}

.pricing-simple-note .eyebrow {
    margin-bottom: 6px;
}

.pricing-simple-note h3 {
    color: var(--charcoal);
    font-size: 1.35rem;
    margin-bottom: 7px;
}

.pricing-simple-note > p:last-child {
    color: var(--dark-grey);
    font-size: 0.88rem;
}


/* ----------------------------------
   Final CTA
---------------------------------- */

.pricing-final {
    background:
        linear-gradient(
            125deg,
            var(--dark-red),
            var(--deep-red)
        );
    color: var(--white);
    padding: 95px 0;
}

.pricing-final-inner {
    margin: auto;
    max-width: 780px;
    text-align: center;
}

.pricing-final .eyebrow {
    color: var(--ice-blue);
}

.pricing-final h2 {
    font-size: clamp(2.4rem, 4.5vw, 4rem);
}

.pricing-final h2 span {
    color: var(--ice-blue);
    display: block;
}

.pricing-final p:not(.eyebrow) {
    color: rgba(255, 255, 255, 0.76);
    margin: 24px auto 32px;
    max-width: 640px;
}

.pricing-final .button-primary {
    background-color: var(--ice-blue-light);
    color: var(--deep-red);
}

.pricing-final .button-primary:hover {
    background-color: var(--white);
}


/* ----------------------------------
   Footer Links
---------------------------------- */

.footer-links a {
    color: var(--dark-red);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* ----------------------------------
   Pricing Tablet
---------------------------------- */

@media (max-width: 900px) {

    .pricing-hero-layout {
        gap: 55px;
    }

    .build-path {
        grid-template-columns: 1fr;
    }

    .build-arrow {
        justify-content: center;
        transform: rotate(90deg);
    }

    .session-rate-grid {
        grid-template-columns: 1fr;
    }
}


/* ----------------------------------
   Pricing Mobile
---------------------------------- */

@media (max-width: 768px) {

    .pricing-hero-layout {
        grid-template-columns: 1fr;
    }

    .pricing-roadmap-grid {
        display: block;
        padding: 15px 0;
    }

    .roadmap-divider {
        display: none;
    }

    .roadmap-item {
        border-bottom: 1px solid rgba(191, 230, 239, 0.15);
        padding: 16px 0;
    }

    .roadmap-item:last-child {
        border-bottom: none;
    }

    .start-option-grid,
    .plan-length-grid {
        grid-template-columns: 1fr;
    }

    .start-option-card {
        min-height: auto;
    }

    .plan-length-card {
        align-items: start;
    }
}


@media (max-width: 480px) {

    .pricing-step-heading {
        margin-bottom: 38px;
    }

    .pricing-step-number {
        font-size: 2.8rem;
    }

    .start-option-card {
        padding: 30px 24px;
    }

    .start-option-top {
        display: block;
    }

    .start-option-price {
        margin-top: 12px;
    }

    .build-choice {
        min-height: auto;
        padding: 28px 24px;
    }

    .plan-length-card {
        gap: 18px;
        grid-template-columns: 1fr;
        padding: 28px 24px;
    }

    .plan-length-number {
        font-size: 3rem;
    }

    .flexibility-note {
        align-items: start;
        grid-template-columns: 1fr;
        padding: 26px 24px;
    }

    .session-rate-card {
        padding: 30px 24px;
    }

    .pricing-final {
        padding: 75px 0;
    }
}

/* Subtle footer access to plans and pricing */

.footer-links {
    display: inline-flex;
    align-items: center;
}

.footer-links a {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
}

@media (max-width: 900px) {
    .pricing-option-grid,
    .pricing-plan-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .plans-inline-wrap {
        margin-top: 28px;
    }

    .pricing-option-card,
    .pricing-plan-card {
        padding: 34px 28px;
    }

    .pricing-table th,
    .pricing-table td {
        padding: 13px 14px;
    }
}

@media (max-width: 480px) {
    .pricing-option-card,
    .pricing-plan-card {
        padding: 30px 23px;
    }

    .pricing-note {
        padding: 24px 22px;
    }
}

/* ----------------------------------
   Homepage Plans & Pricing Link
---------------------------------- */

.plans-inline-wrap {
    display: flex;
    justify-content: center;
    margin-top: 38px;
}

.plans-inline-link {
    align-items: center;
    background-color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(109, 29, 45, 0.24);
    color: var(--dark-red);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    gap: 14px;
    letter-spacing: 0.08em;
    padding: 11px 12px 11px 18px;
    text-transform: uppercase;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.plans-inline-link > span {
    align-items: center;
    background-color: var(--dark-red);
    color: var(--white);
    display: flex;
    font-size: 0.9rem;
    height: 29px;
    justify-content: center;
    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
    width: 29px;
}

.plans-inline-link:hover {
    background-color: var(--white);
    border-color: var(--dark-red);
    box-shadow: 0 10px 25px rgba(12, 21, 26, 0.08);
    transform: translateY(-2px);
}

.plans-inline-link:hover > span {
    background-color: var(--deep-red);
    transform: translateX(2px);
}

/* ----------------------------------
   Experience Showcase
---------------------------------- */

.experience-showcase {
    background-color: var(--charcoal);
    overflow: hidden;
}

.experience-showcase-heading {
    margin-bottom: 48px;
    max-width: 760px;
}

.experience-showcase-heading .eyebrow {
    color: var(--ice-blue);
}

.experience-showcase-heading h2 {
    color: var(--white);
    font-size: clamp(2.4rem, 4.5vw, 4.2rem);
    letter-spacing: -0.035em;
    margin-bottom: 20px;
}

.experience-showcase-heading h2 span {
    color: var(--ice-blue);
    display: block;
}

.experience-showcase-heading > p:last-child {
    color: var(--medium-grey);
    max-width: 650px;
}


/* Images */

.experience-showcase-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1.7fr 0.8fr;
}

.experience-photo {
    background-color: var(--deep-charcoal);
    border: 1px solid rgba(191, 230, 239, 0.15);
    height: 520px;
    overflow: hidden;
    position: relative;
}

.experience-photo img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition:
        filter 0.4s ease,
        transform 0.6s ease;
    width: 100%;
}

.experience-photo-harvard img {
    object-position: center center;
}

.experience-photo-detroit img {
    object-position: center center;
}


/* Dark fade behind text */

.experience-photo::after {
    background:
        linear-gradient(
            to top,
            rgba(12, 21, 26, 0.96) 0%,
            rgba(12, 21, 26, 0.68) 32%,
            rgba(12, 21, 26, 0.08) 68%,
            transparent 100%
        );
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}


/* Caption */

.experience-photo-caption {
    bottom: 0;
    color: var(--white);
    left: 0;
    padding: 34px;
    position: absolute;
    right: 0;
    z-index: 2;
}

.experience-photo-label {
    color: var(--ice-blue);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.experience-photo-caption h3 {
    color: var(--white);
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    margin-bottom: 8px;
}

.experience-photo-caption > p:last-child {
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.82rem;
    line-height: 1.6;
    max-width: 570px;
}


/* Subtle interaction */

.experience-photo:hover img {
    transform: scale(1.025);
}


/* ----------------------------------
   Experience Showcase Responsive
---------------------------------- */

@media (max-width: 900px) {

    .experience-showcase-grid {
        grid-template-columns: 1fr;
    }

    .experience-photo-harvard {
        height: 430px;
    }

    .experience-photo-detroit {
        height: 620px;
    }
}


@media (max-width: 560px) {

    .experience-showcase-heading {
        margin-bottom: 35px;
    }

    .experience-photo-harvard {
        height: 300px;
    }

    .experience-photo-detroit {
        height: 470px;
    }

    .experience-photo-caption {
        padding: 25px 22px;
    }

    .experience-photo-caption > p:last-child {
        font-size: 0.76rem;
    }
}

/* =========================================================
   PLANS & PRICING PAGE
   ========================================================= */


/* TIGHTER PAGE SPACING */

.plans-page .section {
    padding-top: 65px;
    padding-bottom: 65px;
}



/* =========================================================
   SERVICE PRICING
   ========================================================= */

.plans-page .session-rate-grid {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 35px;
}


.pricing-service-link {
    color: var(--ice-blue);
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 18px;
    text-decoration: none;
}


.pricing-service-link:hover {
    text-decoration: underline;
}



/* =========================================================
   HOW SESSIONS WORK
   ========================================================= */

.session-how-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 32px;
}


.session-how-item {
    border: 1px solid rgba(0, 0, 0, 0.10);
    padding: 22px;
}


.session-how-number {
    color: rgba(109, 29, 45, 0.40);
    display: block;
    font-family: var(--heading-font);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 10px;
}


.session-how-item h3 {
    font-size: 1rem;
    margin-bottom: 7px;
}


.session-how-item p {
    font-size: 0.78rem;
    line-height: 1.55;
    margin: 0;
}



/* =========================================================
   SESSION EXAMPLE
   ========================================================= */

.session-example {
    border-left: 4px solid var(--dark-red);
    margin-top: 30px;
    max-width: 900px;
    padding: 8px 0 8px 24px;
}


.session-example h3 {
    font-size: 1rem;
    margin-bottom: 7px;
}


.session-example p {
    font-size: 0.82rem;
    line-height: 1.6;
}


.session-example-mix {
    color: var(--charcoal);
    font-weight: 600;
    margin-bottom: 4px;
}


.session-example-small {
    color: var(--dark-grey);
    font-size: 0.73rem !important;
    margin: 0;
}



/* =========================================================
   ONGOING COACHING
   ========================================================= */

.ongoing-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 32px;
}


.ongoing-option {
    border: 1px solid rgba(0, 0, 0, 0.10);
    padding: 22px;
}


.ongoing-option h3 {
    font-size: 1rem;
    margin-bottom: 7px;
}


.ongoing-option p {
    font-size: 0.78rem;
    line-height: 1.55;
    margin: 0;
}



/* =========================================================
   OPTIONAL HELP
   ========================================================= */

.help-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: 35px;
}


.help-option {
    border: 1px solid rgba(0, 0, 0, 0.10);
    padding: 28px 30px;
}


.help-option-top {
    align-items: start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}


.help-option-label {
    color: var(--dark-red);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    margin-bottom: 6px;
    text-transform: uppercase;
}


.help-option h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}


.help-option-price {
    color: var(--dark-red);
    flex-shrink: 0;
    font-family: var(--heading-font);
    font-size: 1.15rem;
    font-weight: 600;
}


.help-option > p {
    font-size: 0.82rem;
    line-height: 1.6;
    margin: 0;
}


.help-option ul {
    margin: 15px 0 0;
    padding-left: 18px;
}


.help-option li {
    font-size: 0.78rem;
    line-height: 1.6;
    margin-bottom: 4px;
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .plans-page .session-rate-grid {
        grid-template-columns: 1fr;
    }


    .session-how-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .ongoing-options {
        grid-template-columns: 1fr;
    }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .help-options {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .session-how-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   FINAL RESPONSIVE POLISH
   Laptop / Tablet / Mobile
   Keep this block at the VERY END of styles.css
   ========================================================= */


/* Prevent grid/flex children from forcing horizontal overflow */
.hero-content,
.stoic-card,
.service-card,
.about-content,
.contact-message,
.contact-form,
.detail-hero-content,
.detail-principle,
.detail-feature,
.session-rate-card,
.session-how-item,
.help-option,
.video-option,
.skills-concept,
.mindset-topic,
.video-concept {
    min-width: 0;
}


/* Allow long text to wrap safely */
.session-rate-row span,
.help-option h3,
.detail-cta-copy,
.service-card,
.video-option,
.form-group {
    overflow-wrap: break-word;
    word-break: normal;
}


/* =========================================================
   TABLET & MOBILE
   ========================================================= */

@media (max-width: 768px) {

    /* Keep mobile navigation compact */
    .navbar {
        gap: 15px;
    }

    .nav-links {
        flex-shrink: 0;
        gap: 12px;
        margin-left: auto;
    }

    /*
       Make Coaching dropdown fit the phone screen instead
       of relying on negative right positioning.
    */
    .dropdown-menu {
        left: 5%;
        min-width: 0;
        position: fixed;
        right: 5%;
        top: 70px;
        width: auto;
    }

    .nav-dropdown .dropdown-menu a {
        padding: 16px 15px;
    }


    /* Pricing rows */
    .session-rate-row {
        gap: 14px;
    }

    .session-rate-row span {
        min-width: 0;
    }

    .session-rate-row strong {
        flex-shrink: 0;
    }


    /* Images */
    .coach-photo-container {
        height: 540px;
    }


    /* Keep headings from getting too wide */
    .detail-centered-heading,
    .centered-heading,
    .contact-heading,
    .experience-showcase-heading {
        width: 100%;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    /* Better section heading sizing */
    .detail-centered-heading h2,
    .experience-showcase-heading h2 {
        font-size: 2.25rem;
    }

    .detail-hero h1 {
        font-size: clamp(2.6rem, 13vw, 3rem);
    }


    /* Pricing rows remain clean with longer descriptions */
    .session-rate-row {
        align-items: flex-start;
    }


    /* Optional help cards */
    .help-option-top {
        flex-direction: column;
        gap: 8px;
    }

    .help-option-price {
        margin-top: 0;
    }


    /* Slightly shorter Kyle image on phones */
    .coach-photo-container {
        height: 480px;
    }


    /* Experience captions */
    .experience-photo-caption h3 {
        line-height: 1.25;
    }
}


/* =========================================================
   VERY SMALL PHONES
   320px–360px
   ========================================================= */

@media (max-width: 360px) {

    /*
       Hide the word HOCKEY only in the header on extremely
       narrow phones so 333 + Coaching + Player Inquiry fit.
       Footer logo is unaffected.
    */
    .site-header .logo-word {
        display: none;
    }

    .site-header .logo {
        gap: 0;
    }

    .nav-links {
        gap: 8px;
    }

    .nav-dropdown summary {
        font-size: 0.7rem;
    }

    .nav-links .nav-cta {
        font-size: 0.62rem;
        padding: 8px 10px;
    }

    .dropdown-menu {
        left: 4%;
        right: 4%;
    }
}

.nav-dropdown summary:focus-visible {
    outline: 3px solid var(--ice-blue-dark);
    outline-offset: 4px;
}

/* =========================================================
   CLEAN MOBILE NAVIGATION
   Logo on top + 3 navigation options below
   ========================================================= */

@media (max-width: 800px) {

    .navbar {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        min-height: auto;
        padding: 10px 0 12px;
    }

    .site-header .logo {
        align-self: flex-start;
    }

    .nav-links {
        display: grid;
        gap: 6px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0;
        width: 100%;
    }

    .nav-links > a:not(.nav-cta):not([href="development-plans.html"]) {
        display: none;
    }

    .nav-links > a[href="development-plans.html"] {
        display: flex !important;
    }

    .nav-dropdown {
        min-width: 0;
        position: relative;
        width: 100%;
    }

    .nav-dropdown summary {
        align-items: center;
        background-color: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(89, 98, 104, 0.18);
        color: var(--charcoal);
        display: flex;
        font-size: 0.68rem;
        font-weight: 700;
        justify-content: center;
        letter-spacing: 0.03em;
        line-height: 1.15;
        min-height: 42px;
        padding: 7px 6px;
        text-align: center;
        width: 100%;
    }

    .nav-links > a[href="development-plans.html"] {
        align-items: center;
        background-color: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(89, 98, 104, 0.18);
        color: var(--charcoal);
        font-size: 0.68rem;
        font-weight: 700;
        justify-content: center;
        letter-spacing: 0.03em;
        line-height: 1.15;
        min-height: 42px;
        padding: 7px 6px;
        text-align: center;
        white-space: normal;
    }

    .nav-links .nav-cta {
        align-items: center;
        display: flex;
        font-size: 0.68rem;
        justify-content: center;
        line-height: 1.15;
        min-height: 42px;
        padding: 7px 6px;
        text-align: center;
        white-space: normal;
    }

    .dropdown-menu {
        left: 0;
        min-width: 0;
        right: auto;
        top: calc(100% + 8px);
        width: min(300px, 92vw);
    }

    .nav-dropdown .dropdown-menu a {
        display: grid !important;
    }
}

@media (max-width: 390px) {

    .navbar {
        padding-top: 8px;
    }

    .logo-number {
        font-size: 1.4rem;
    }

    .logo-word {
        font-size: 0.6rem;
    }

    .nav-dropdown summary,
    .nav-links > a[href="development-plans.html"],
    .nav-links .nav-cta {
        font-size: 0.62rem;
        min-height: 40px;
        padding: 6px 4px;
    }

    .nav-links {
        gap: 5px;
    }
}

/* =========================================================
   333 HOCKEY - FINAL MOBILE LAYOUT
   Keeps mobile closer to the desktop experience
   PUT THIS AT THE VERY BOTTOM OF styles.css
   ========================================================= */


/* =========================================================
   MOBILE HEADER
   Logo row + Coaching / Plans & Pricing / Player Inquiry
   ========================================================= */

@media (max-width: 800px) {

    .navbar {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        min-height: auto;
        padding: 10px 0 12px;
    }

    .site-header .logo {
        align-self: flex-start;
    }

    .nav-links {
        display: grid;
        gap: 6px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0;
        width: 100%;
    }

    /* Hide Home and About Kyle in mobile header */
    .nav-links > a:not(.nav-cta):not([href="development-plans.html"]) {
        display: none;
    }

    /* SHOW PLANS & PRICING */
    .nav-links > a[href="development-plans.html"] {
        align-items: center;
        background-color: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(89, 98, 104, 0.18);
        color: var(--charcoal);
        display: flex !important;
        font-size: 0.68rem;
        font-weight: 700;
        justify-content: center;
        letter-spacing: 0.03em;
        line-height: 1.15;
        min-height: 42px;
        padding: 7px 6px;
        text-align: center;
    }

    /* Coaching */
    .nav-dropdown {
        min-width: 0;
        position: relative;
        width: 100%;
    }

    .nav-dropdown summary {
        align-items: center;
        background-color: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(89, 98, 104, 0.18);
        color: var(--charcoal);
        display: flex;
        font-size: 0.68rem;
        font-weight: 700;
        justify-content: center;
        letter-spacing: 0.03em;
        line-height: 1.15;
        min-height: 42px;
        padding: 7px 6px;
        text-align: center;
        width: 100%;
    }

    /* Player Inquiry */
    .nav-links .nav-cta {
        align-items: center;
        display: flex;
        font-size: 0.68rem;
        justify-content: center;
        line-height: 1.15;
        min-height: 42px;
        padding: 7px 6px;
        text-align: center;
        white-space: normal;
    }

    /* Coaching dropdown */
    .dropdown-menu {
        left: 0;
        min-width: 280px;
        right: auto;
        top: calc(100% + 8px);
    }

    .nav-dropdown .dropdown-menu a {
        display: grid !important;
    }
}


/* =========================================================
   MOBILE HOMEPAGE
   Make it feel less vertically stacked
   ========================================================= */

@media (max-width: 768px) {

    /* Slightly tighter overall spacing */
    .section {
        padding: 58px 0;
    }


    /* HERO */

    .hero {
        padding: 55px 0 60px;
    }

    .hero-layout {
        gap: 38px;
    }

    /*
       Keep the two hero buttons beside each other
       instead of one full-width button per line.
    */
    .hero-actions {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-actions .button {
        padding-left: 12px;
        padding-right: 12px;
        width: 100%;
    }

    .hero-values {
        margin-top: 30px;
    }


    /* =====================================================
       COACHING CARDS

       Instead of three giant cards stacked vertically,
       allow the user to swipe sideways through them.
       ===================================================== */

    .service-grid {
        display: flex;
        gap: 14px;
        margin-left: -4%;
        margin-right: -4%;
        max-width: none;
        overflow-x: auto;
        padding: 5px 4% 18px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .service-grid::-webkit-scrollbar {
        display: none;
    }

    .service-card {
        flex: 0 0 86%;
        min-height: 520px;
        scroll-snap-align: center;
    }


    /* =====================================================
       EXPERIENCE PHOTOS

       Keep these visually connected instead of feeling like
       two unrelated stacked sections.
       ===================================================== */

    .experience-showcase-grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .experience-photo-harvard,
    .experience-photo-detroit {
        height: 390px;
    }

    .experience-photo-caption {
        padding: 22px 17px;
    }

    .experience-photo-caption h3 {
        font-size: 1.15rem;
    }

    .experience-photo-caption > p:last-child {
        font-size: 0.72rem;
        line-height: 1.45;
    }

    .experience-photo-label {
        font-size: 0.57rem;
        letter-spacing: 0.11em;
    }


    /* =====================================================
       ABOUT KYLE

       Keep photo large, but career history in 2 columns.
       ===================================================== */

    .about-layout {
        gap: 38px;
    }

    .about-visual {
        min-height: 420px;
    }

    .coach-photo-container {
        height: 460px;
    }

    .career-path {
        gap: 18px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .career-path::before {
        display: none;
    }

    .career-item {
        border-top: 1px solid var(--medium-grey);
        padding-left: 0;
        padding-top: 20px;
    }

    .career-marker {
        left: 0;
        top: -7px;
    }


    /* =====================================================
       PLAYER INQUIRY

       Keep the form readable but retain some desktop feeling.
       ===================================================== */

    .contact-layout {
        gap: 0;
    }

    .form-grid {
        gap: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-group-full {
        grid-column: 1 / -1;
    }

    .contact-message,
    .contact-form {
        padding: 38px 28px;
    }


    /* =====================================================
       DETAIL PAGE CARDS
       ===================================================== */

    .detail-feature-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-feature:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }


    /* Pricing / How Sessions Work */

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

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


/* =========================================================
   SMALLER PHONES
   Keep everything readable
   ========================================================= */

@media (max-width: 480px) {

    .container {
        width: 92%;
    }

    /* Header */
    .nav-links {
        gap: 5px;
    }

    .nav-dropdown summary,
    .nav-links > a[href="development-plans.html"],
    .nav-links .nav-cta {
        font-size: 0.62rem;
        min-height: 40px;
        padding: 6px 4px;
    }


    /* Hero buttons can still stay side-by-side */
    .hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-actions .button {
        font-size: 0.67rem;
        letter-spacing: 0.035em;
        min-height: 48px;
    }


    /* Coaching cards still swipe horizontally */
    .service-card {
        flex-basis: 89%;
        padding: 34px 24px 27px;
    }


    /* Experience photos */
    .experience-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .experience-photo-harvard,
    .experience-photo-detroit {
        height: 350px;
    }

    /*
       Hide the longer paragraph on very small screens.
       The title remains over the image and keeps this area
       visually close to the desktop layout.
    */
    .experience-photo-caption > p:last-child {
        display: none;
    }


    /* Career remains two columns */
    .career-path {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .career-item div p:last-child {
        font-size: 0.75rem;
        line-height: 1.5;
    }

    .career-title {
        font-size: 0.9rem;
    }


    /* Keep first form fields in pairs where possible */
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-group-full {
        grid-column: 1 / -1;
    }


    /* Detail cards */
    .detail-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-feature {
        padding: 27px 18px;
    }

    .detail-feature h3 {
        font-size: 1rem;
    }

    .detail-feature p {
        font-size: 0.78rem;
    }


    /* Plans */
    .session-how-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .help-options {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   FINAL MOBILE HEADER
   Coaching | Plans & Pricing | Player Inquiry
   ========================================================= */

@media (max-width: 800px) {

    .navbar {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        min-height: auto;
        padding: 10px 0 12px;
    }

    .site-header .logo {
        align-self: flex-start;
    }

    .nav-links {
        display: grid;
        gap: 6px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0;
        width: 100%;
    }

    /* Hide Home and About Kyle */
    .nav-links > a:not(.nav-cta):not(.nav-plans) {
        display: none !important;
    }

    /* Coaching */
    .nav-dropdown {
        display: block;
        min-width: 0;
        position: relative;
        width: 100%;
    }

    .nav-dropdown summary {
        align-items: center;
        background-color: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(89, 98, 104, 0.18);
        color: var(--charcoal);
        display: flex;
        font-size: 0.68rem;
        font-weight: 700;
        justify-content: center;
        letter-spacing: 0.03em;
        line-height: 1.15;
        min-height: 42px;
        padding: 7px 6px;
        text-align: center;
        width: 100%;
    }

    /* Plans & Pricing */
    .nav-links > a.nav-plans {
        align-items: center;
        background-color: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(89, 98, 104, 0.18);
        color: var(--charcoal);
        display: flex !important;
        font-size: 0.68rem;
        font-weight: 700;
        justify-content: center;
        letter-spacing: 0.03em;
        line-height: 1.15;
        min-height: 42px;
        padding: 7px 6px;
        text-align: center;
        white-space: normal;
    }

    /* Player Inquiry */
    .nav-links > a.nav-cta {
        align-items: center;
        display: flex !important;
        font-size: 0.68rem;
        justify-content: center;
        line-height: 1.15;
        min-height: 42px;
        padding: 7px 6px;
        text-align: center;
        white-space: normal;
    }

    /* Coaching dropdown menu */
    .dropdown-menu {
        left: 0;
        min-width: 280px;
        right: auto;
        top: calc(100% + 8px);
        width: min(300px, 92vw);
    }

    .nav-dropdown .dropdown-menu a {
        display: grid !important;
    }

    .nav-dropdown[open] .dropdown-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        visibility: visible;
    }
}


@media (max-width: 390px) {

    .nav-links {
        gap: 5px;
    }

    .nav-dropdown summary,
    .nav-links > a.nav-plans,
    .nav-links > a.nav-cta {
        font-size: 0.62rem;
        min-height: 40px;
        padding: 6px 4px;
    }

}

/* =========================================================
   STEP 2 - DESKTOP-STYLE MOBILE LAYOUT
   Keeps phone layout much closer to computer layout
   ========================================================= */

@media (max-width: 800px) {

    /* =====================================================
       GENERAL
       ===================================================== */

    .container {
        width: 96%;
    }

    .section {
        padding: 52px 0;
    }


    /* =====================================================
       HOMEPAGE HERO
       Keep text + quote card beside each other
       ===================================================== */

    .hero {
        padding: 52px 0;
    }

    .hero-layout {
        align-items: center;
        display: grid;
        gap: 18px;
        grid-template-columns: 1.15fr 0.85fr;
    }

    .hero-content {
        min-width: 0;
    }

    .hero h1 {
        font-size: clamp(2rem, 8vw, 3rem);
        margin-bottom: 18px;
    }

    .hero-description {
        font-size: 0.78rem;
        line-height: 1.55;
    }

    .hero-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 7px;
        margin-top: 22px;
    }

    .hero-actions .button {
        font-size: 0.57rem;
        letter-spacing: 0.03em;
        min-height: 40px;
        padding: 0 9px;
        width: auto;
    }

    .hero-values {
        font-size: 0.55rem;
        gap: 7px;
        letter-spacing: 0.08em;
        margin-top: 24px;
    }

    .stoic-card {
        margin: 0;
        max-width: none;
        transform: none;
        width: 100%;
    }

    .stoic-card-border {
        padding: 27px 17px;
    }

    .stoic-symbol {
        font-size: 0.52rem;
        margin-bottom: 20px;
    }

    .stoic-card blockquote {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .stoic-line {
        margin: 20px 0 12px;
    }

    .quote-author {
        font-size: 0.58rem;
    }

    .quote-philosophy {
        font-size: 0.46rem;
        letter-spacing: 0.08em;
    }


    /* =====================================================
       HOMEPAGE COACHING
       Keep all 3 cards beside each other like desktop
       ===================================================== */

    .service-grid {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0;
        max-width: none;
        overflow: visible;
        padding: 0;
    }

    .service-card {
        flex: none;
        min-height: 430px;
        padding: 20px 12px 16px;
        width: 100%;
    }

    .service-number {
        font-size: 3.2rem;
        right: 8px;
        top: 10px;
    }

    .service-icon {
        height: 42px;
        margin-bottom: 18px;
        width: 42px;
    }

    .service-icon svg {
        height: 25px;
        width: 25px;
    }

    .service-label {
        font-size: 0.48rem;
        letter-spacing: 0.08em;
    }

    .service-card h3 {
        font-size: 0.95rem;
        margin-bottom: 10px;
    }

    .service-card > p:not(.service-label) {
        font-size: 0.62rem;
        line-height: 1.5;
    }

    .service-card ul {
        margin: 14px 0 15px;
        padding-top: 12px;
    }

    .service-card li {
        font-size: 0.58rem;
        line-height: 1.4;
        padding: 5px 0 5px 13px;
    }

    .service-link {
        font-size: 0.52rem;
        letter-spacing: 0.03em;
        padding-top: 12px;
    }


    /* =====================================================
       EXPERIENCE
       Keep both photos beside each other
       ===================================================== */

    .experience-showcase-grid {
        display: grid;
        gap: 9px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .experience-photo-harvard,
    .experience-photo-detroit {
        height: 360px;
    }

    .experience-photo-caption {
        padding: 18px 13px;
    }

    .experience-photo-caption h3 {
        font-size: 1rem;
    }

    .experience-photo-caption > p:last-child {
        display: block;
        font-size: 0.6rem;
        line-height: 1.45;
    }

    .experience-photo-label {
        font-size: 0.5rem;
    }


    /* =====================================================
       ABOUT KYLE
       Photo and information beside each other
       ===================================================== */

    .about-layout {
        align-items: start;
        display: grid;
        gap: 18px;
        grid-template-columns: 0.8fr 1.2fr;
    }

    .about-visual {
        margin: 0;
        min-height: 380px;
        width: 100%;
    }

    .coach-photo-container {
        height: 410px;
    }

    .experience-badge {
        bottom: 18px;
        padding: 12px 14px;
        right: -8px;
    }

    .experience-badge span {
        font-size: 0.9rem;
    }

    .experience-badge p {
        font-size: 0.46rem;
    }

    .about-content h2 {
        font-size: 2rem;
        margin-bottom: 14px;
    }

    .about-intro {
        font-size: 0.72rem;
        line-height: 1.5;
        margin-bottom: 18px;
    }

    .career-path {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 20px 0;
    }

    .career-path::before {
        display: none;
    }

    .career-item {
        border-top: 1px solid var(--medium-grey);
        padding-left: 0;
        padding-top: 14px;
    }

    .career-marker {
        left: 0;
        top: -7px;
    }

    .career-title {
        font-size: 0.72rem;
    }

    .career-item div p:last-child {
        font-size: 0.58rem;
        line-height: 1.5;
    }

    .about-story {
        padding: 16px;
    }

    .about-story p {
        font-size: 0.61rem;
        line-height: 1.55;
    }


    /* =====================================================
       PLAYER INQUIRY
       Keep message + form side by side
       ===================================================== */

    .contact-layout {
        align-items: stretch;
        display: grid;
        grid-template-columns: 0.85fr 1.15fr;
    }

    .contact-message,
    .contact-form {
        padding: 25px 18px;
    }

    .contact-message blockquote {
        font-size: 0.88rem;
    }

    .contact-message > p:not(.contact-small-title) {
        font-size: 0.62rem;
    }

    .direct-contact a {
        font-size: 0.7rem;
    }

    .form-heading h3 {
        font-size: 1.15rem;
    }

    .form-heading > p:last-child {
        font-size: 0.62rem;
    }

    .form-grid {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-group-full {
        grid-column: 1 / -1;
    }

    .form-group label {
        font-size: 0.55rem;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 10px;
    }


    /* =====================================================
       COACHING DETAIL PAGE HEROES
       Text + principle box beside each other
       ===================================================== */

    .detail-hero {
        padding: 72px 0 52px;
    }

    .detail-hero-layout {
        align-items: center;
        display: grid;
        gap: 18px;
        grid-template-columns: 1.2fr 0.8fr;
    }

    .detail-hero h1 {
        font-size: 2.3rem;
    }

    .detail-hero-description {
        font-size: 0.7rem;
        line-height: 1.55;
    }

    .detail-principle {
        max-width: none;
        padding: 25px 18px;
    }

    .detail-principle blockquote {
        font-size: 0.8rem;
    }


    /* =====================================================
       SKILLS - HOW SESSIONS WORK
       Keep 3 across
       ===================================================== */

    .detail-feature-grid {
        display: grid;
        gap: 7px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .detail-feature:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .detail-feature {
        padding: 23px 14px;
    }

    .detail-feature h3 {
        font-size: 0.82rem;
    }

    .detail-feature p {
        font-size: 0.58rem;
        line-height: 1.5;
    }


    /* =====================================================
       SKILLS PAGE
       Keep 4 concept boxes + 4 price boxes
       ===================================================== */

    .skills-page .skills-concepts {
        gap: 7px;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .skills-page .skills-concept {
        padding: 14px 9px;
    }

    .skills-page .skills-concept h3 {
        font-size: 0.72rem;
    }

    .skills-page .skills-concept p {
        font-size: 0.54rem;
    }

    .skills-page .session-rate-grid {
        gap: 7px;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }


    /* =====================================================
       MINDSET PAGE
       Keep 4 topics across
       ===================================================== */

    .mindset-page .mindset-topics {
        gap: 7px;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .mindset-page .mindset-topic {
        padding: 14px 9px;
    }

    .mindset-page .mindset-topic h3 {
        font-size: 0.72rem;
    }

    .mindset-page .mindset-topic p {
        font-size: 0.54rem;
    }


    /* =====================================================
       VIDEO PAGE
       Keep desktop columns
       ===================================================== */

    .video-page .video-options {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .video-page .video-option {
        padding: 20px 15px;
    }

    .video-page .video-option h3 {
        font-size: 0.9rem;
    }

    .video-page .video-option p {
        font-size: 0.6rem;
    }

    .video-page .video-concepts {
        gap: 7px;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .video-page .video-concept {
        padding: 14px 9px;
    }

    .video-page .video-concept h3 {
        font-size: 0.7rem;
    }

    .video-page .video-concept p {
        font-size: 0.53rem;
    }

    .video-page .session-rate-grid {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }


    /* =====================================================
       PLANS & PRICING PAGE
       Keep pricing desktop-style
       ===================================================== */

    .plans-page .session-rate-grid {
        gap: 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .session-rate-card {
        padding: 22px 14px;
    }

    .session-rate-card h3 {
        font-size: 0.95rem;
    }

    .session-rate-category {
        font-size: 0.5rem;
    }

    .session-rate-row {
        gap: 6px;
        padding: 12px 0;
    }

    .session-rate-row span {
        font-size: 0.58rem;
    }

    .session-rate-row strong {
        font-size: 0.8rem;
    }

    .session-rate-row small {
        font-size: 0.48rem;
    }

    .pricing-service-link {
        font-size: 0.5rem;
    }


    /* Four How Sessions Work boxes like desktop */

    .session-how-grid {
        gap: 7px;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .session-how-item {
        padding: 20px 12px;
    }

    .session-how-number {
        font-size: 0.58rem;
    }

    .session-how-item h3 {
        font-size: 0.78rem;
    }

    .session-how-item p {
        font-size: 0.55rem;
        line-height: 1.5;
    }


    /* Optional help stays 2 across */

    .help-options {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .help-option {
        padding: 22px 16px;
    }

    .help-option h3 {
        font-size: 0.95rem;
    }

    .help-option > p,
    .help-option li {
        font-size: 0.6rem;
    }


    /* =====================================================
       CTA SECTIONS
       Keep desktop-style horizontal arrangement
       ===================================================== */

    .detail-cta-panel {
        align-items: center;
        display: grid;
        gap: 18px;
        grid-template-columns: 1fr auto;
    }

    .detail-cta-copy h2 {
        font-size: 1.6rem;
    }

    .detail-cta-copy p {
        font-size: 0.68rem;
    }

    .detail-cta-button {
        font-size: 0.58rem;
        padding: 12px 13px;
    }


    /* =====================================================
       FOOTER
       Keep it horizontal like desktop
       ===================================================== */

    .footer-layout {
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: space-between;
    }

    .footer-layout > p {
        font-size: 0.52rem;
    }

    .footer-links a {
        font-size: 0.52rem;
    }

    .footer-logo .logo-number {
        font-size: 1.05rem;
    }

    .footer-logo .logo-word {
        font-size: 0.45rem;
    }
}


/* =========================================================
   EXTRA SMALL PHONES
   Still retain desktop-style layout
   ========================================================= */

@media (max-width: 480px) {

    .container {
        width: 97%;
    }

    .hero-layout {
        grid-template-columns: 1.15fr 0.85fr;
    }

    .about-layout {
        grid-template-columns: 0.78fr 1.22fr;
    }

    .contact-layout {
        grid-template-columns: 0.82fr 1.18fr;
    }

    .detail-hero-layout {
        grid-template-columns: 1.15fr 0.85fr;
    }

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

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

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

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

    .form-group-full {
        grid-column: 1 / -1;
    }

    .detail-feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .skills-page .skills-concepts {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .skills-page .session-rate-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .mindset-page .mindset-topics {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .video-page .video-options {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .video-page .video-concepts {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .video-page .session-rate-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .plans-page .session-rate-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .session-how-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .help-options {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* =========================================================
   MOBILE ABOUT KYLE FIX
   Removes photo border + eliminates empty white space
   Desktop is NOT affected
   ========================================================= */

@media (max-width: 800px) {

    /* Keep photo and career summary side-by-side */
    .about-layout {
        align-items: start;
        column-gap: 18px;
        display: grid;
        grid-template-columns: 0.78fr 1.22fr;
        row-gap: 0;
    }

    /*
       Allows the individual pieces inside about-content
       to participate in the main two-column grid.
    */
    .about-content {
        display: contents;
    }


    /* =====================================================
       LEFT SIDE - PHOTO
       ===================================================== */

    .about-visual {
        align-self: stretch;
        grid-column: 1;
        grid-row: 1 / 5;
        margin: 0;
        min-height: 0 !important;
        position: relative;
        width: 100%;
    }

    .coach-photo-container {
        height: 100% !important;
        min-height: 0 !important;
    }

    .coach-photo {
        height: 100%;
        object-fit: cover;
        object-position: center top;
        width: 100%;
    }

    /* REMOVE THE BORDER GOING THROUGH KYLE'S PHOTO */
    .coach-photo-container::after {
        display: none !important;
    }


    /* =====================================================
       RIGHT SIDE - INTRO + CAREER
       ===================================================== */

    .about-content > .eyebrow {
        grid-column: 2;
        grid-row: 1;
    }

    .about-content > h2 {
        grid-column: 2;
        grid-row: 2;
    }

    .about-content > .about-intro {
        grid-column: 2;
        grid-row: 3;
    }

    .about-content > .career-path {
        grid-column: 2;
        grid-row: 4;
        margin-bottom: 0;
    }


    /* =====================================================
       FULL WIDTH STORY
       Moves long story underneath BOTH columns
       ===================================================== */

    .about-content > .about-story {
        grid-column: 1 / -1;
        grid-row: 5;
        margin-top: 22px;
        width: 100%;
    }

}

/* =========================================================
   MOBILE SKILLS PRICING FIX
   2 x 2 layout - readable, compact, no giant white space
   ========================================================= */

@media (max-width: 800px) {

    .skills-page .session-rate-grid {
        align-items: stretch;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .skills-page .session-rate-card {
        height: auto !important;
        min-height: 0 !important;
        padding: 22px 16px;
    }

    .skills-page .session-rate-category {
        font-size: 0.58rem;
        letter-spacing: 0.1em;
        line-height: 1.4;
    }

    .skills-page .session-rate-card h3 {
        font-size: 1.15rem;
        line-height: 1.2;
        margin-bottom: 18px;
    }

    .skills-page .session-rate-row {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 14px 0;
    }

    .skills-page .session-rate-row span {
        font-size: 0.7rem;
        line-height: 1.45;
        min-width: 0;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none;
    }

    .skills-page .session-rate-row span small {
        display: block;
        font-size: 0.58rem;
        line-height: 1.4;
        margin-top: 3px;
    }

    .skills-page .session-rate-row strong {
        font-size: 0.95rem;
        white-space: nowrap;
    }

    .skills-page .session-rate-variable {
        align-items: start;
    }

    /* Tighten space underneath the pricing cards */
    .skills-page .pricing-sessions {
        padding-bottom: 45px !important;
    }
}


/* Keep the same clean 2 x 2 layout on smaller iPhones */
@media (max-width: 480px) {

    .skills-page .session-rate-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}

/* =========================================================
   MOBILE MINDSET - PREPARATION & PERFORMANCE FIX
   ========================================================= */

@media (max-width: 800px) {

    .mindset-page .mindset-topic:nth-child(3) h3 {
        font-size: 0.64rem !important;
        line-height: 1.25;
        letter-spacing: 0;
        overflow-wrap: normal;
        word-break: normal;
    }

}

/* =========================================================
   MOBILE PLANS & PRICING FIX
   Fix Skills card wrapping + remove excess white space
   ========================================================= */

@media (max-width: 800px) {

    /* Keep the 3 pricing cards across */
    .plans-page .session-rate-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px;
    }


    /* -----------------------------------------------------
       SKILLS COACHING CARD
       Fix Private On-Ice text
       ----------------------------------------------------- */

    .plans-page .session-rate-card:first-child
    .session-rate-variable {
        display: block;
    }

    .plans-page .session-rate-card:first-child
    .session-rate-variable > span {
        display: block;
        width: 100%;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none;
    }

    .plans-page .session-rate-card:first-child
    .session-rate-variable > span small {
        display: block;
        font-size: 0.56rem;
        line-height: 1.45;
        margin-top: 5px;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none;
    }

    .plans-page .session-rate-card:first-child
    .session-rate-variable > strong {
        display: block;
        margin-top: 9px;
        white-space: nowrap;
    }


    /* Prevent all pricing text from breaking letter-by-letter */
    .plans-page .session-rate-row span,
    .plans-page .session-rate-row small {
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }


    /* -----------------------------------------------------
       REMOVE EXCESS SPACE BELOW PRICING CARDS
       ----------------------------------------------------- */

    .plans-page .pricing-sessions {
        padding-bottom: 24px !important;
    }

    .plans-page .pricing-sessions + .detail-process {
        padding-top: 30px !important;
    }

}

/* =========================================================
   MOBILE PLAYER INQUIRY FIX
   Full-width form + compact message underneath
   ========================================================= */

@media (max-width: 800px) {

    /* Full-width Player Inquiry layout */
    .contact-layout {
        display: flex !important;
        flex-direction: column;
        gap: 14px;
        width: 100%;
    }


    /* =====================================================
       FORM - FULL WIDTH
       ===================================================== */

    .contact-form {
        order: 1;
        padding: 30px 24px !important;
        width: 100%;
    }

    .form-heading {
        margin-bottom: 24px;
        padding-bottom: 22px;
    }

    .form-heading h3 {
        font-size: 1.45rem;
    }

    .form-heading > p:last-child {
        font-size: 0.8rem;
        line-height: 1.5;
    }


    /* Keep paired fields side-by-side now that we have room */
    .form-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .form-group-full {
        grid-column: 1 / -1 !important;
    }


    /* Make inputs comfortable and readable */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px !important;
        min-width: 0;
        padding: 13px 14px;
        width: 100%;
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder {
        font-size: 16px;
    }

    .form-group label {
        font-size: 0.65rem;
        line-height: 1.35;
    }


    /* =====================================================
       REMOVE THE GIANT QUOTE
       ===================================================== */

    .contact-message blockquote {
        display: none !important;
    }

    .contact-message .contact-small-title {
        display: none !important;
    }


    /* =====================================================
       SMALL MESSAGE BELOW FORM
       ===================================================== */

    .contact-message {
        order: 2;
        display: block;
        padding: 24px !important;
        width: 100%;
    }

    /* Remove the large decorative inner border */
    .contact-message::before {
        display: none !important;
    }

    .contact-message > p:not(.contact-small-title) {
        color: var(--medium-grey);
        font-size: 0.78rem;
        line-height: 1.6;
        margin: 0;
    }


    /* =====================================================
       DIRECT EMAIL OPTION
       ===================================================== */

    .direct-contact {
        border-top: 1px solid rgba(203, 210, 214, 0.2);
        margin-top: 18px;
        padding-top: 16px;
    }

    .direct-contact p {
        font-size: 0.7rem;
        margin-bottom: 4px;
    }

    .direct-contact a {
        font-size: 0.82rem;
    }


    /* Remove unnecessary excess spacing in this section */
    .contact {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

}


/* =========================================================
   SMALL IPHONES
   ========================================================= */

@media (max-width: 480px) {

    .contact-form {
        padding: 26px 18px !important;
    }

    .form-grid {
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .contact-message {
        padding: 20px !important;
    }

}

/* =========================================================
   MOBILE ABOUT PHOTO - SHOW FULLER FACE
   ========================================================= */

@media (max-width: 800px) {

    .coach-photo-container {
        background: #f4f5f6;
    }

    .coach-photo {
        object-fit: contain !important;
        object-position: center top !important;
    }

}

/* =========================================================
   FINAL MOBILE ABOUT PHOTO FIX
   Fill the box but show more of Kyle's face
   ========================================================= */

@media (max-width: 800px) {

    /* Give the photo slightly more width */
    .about-layout {
        grid-template-columns: 0.9fr 1.1fr !important;
        column-gap: 18px;
    }

    /* Keep the photo filling the entire left side */
    .about-visual {
        align-self: stretch !important;
    }

    .coach-photo-container {
        height: 100% !important;
        background: none !important;
        overflow: hidden;
    }

    .coach-photo {
        height: 100% !important;
        width: 100% !important;

        /* Fill the box — no white gap */
        object-fit: cover !important;

        /* Favor the face/top of the photo */
        object-position: 50% 15% !important;

        /* Remove the previous zoom-out */
        transform: none !important;
    }

}

/* =========================================================
   MOBILE COACHING - ONE TAP DROPDOWN
   ========================================================= */

@media (max-width: 800px) and (pointer: coarse) {

    /* On mobile, hover/focus must NOT activate the menu */
    .nav-dropdown:not([open]) .dropdown-menu,
    .nav-dropdown:not([open]):hover .dropdown-menu,
    .nav-dropdown:not([open]):focus-within .dropdown-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-8px) !important;
    }

    /* ONE tap on Coaching opens it */
    .nav-dropdown[open] .dropdown-menu,
    .nav-dropdown[open]:hover .dropdown-menu,
    .nav-dropdown[open]:focus-within .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    .nav-dropdown summary {
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
}

/* =========================================================
   FINAL STICKY HEADER
   Header remains visible while scrolling
   Desktop + Mobile
   ========================================================= */

.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99999 !important;
}

/* Replace the space the fixed desktop header occupies */
body {
    padding-top: 82px;
}

/* Prevent anchor links from hiding behind header */
html {
    scroll-padding-top: 95px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    body {
        padding-top: 100px;
    }

    html {
        scroll-padding-top: 115px;
    }

}