/*
|--------------------------------------------------------------------------
| THE ANSWER IS NOT 6-7(TM)
|--------------------------------------------------------------------------
| Shared stylesheet
|
| Tutoring & Test Prep Website Template
|
| Visual direction:
| Modern learning studio x student notebook x whiteboard annotations
| x highlighter marks x organized academic chaos.
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       Color
       ---------------------------------------------------------------------- */

    --ink:
        #1c2328;

    --ink-soft:
        #303b42;

    --cream:
        #f6f1e6;

    --paper:
        #fffdf7;

    --navy:
        #173d58;

    --navy-dark:
        #102f45;

    --blue:
        #4d7fa0;

    --blue-soft:
        #d9e7ee;

    --red:
        #c94238;

    --red-dark:
        #9f312a;

    --yellow:
        #e7c74f;

    --lime:
        #b8d94c;

    --pink:
        #edc3c0;

    --pencil:
        #d4a349;

    --line:
        rgba(28, 35, 40, 0.2);

    --line-strong:
        rgba(28, 35, 40, 0.72);

    /* ----------------------------------------------------------------------
       Typography
       ---------------------------------------------------------------------- */

    --font-display:
        "Bricolage Grotesque",
        "Arial Black",
        sans-serif;

    --font-body:
        "Inter",
        Arial,
        sans-serif;

    --font-mono:
        "DM Mono",
        "Courier New",
        monospace;

    --font-hand:
        "Caveat",
        "Comic Sans MS",
        cursive;

    /* ----------------------------------------------------------------------
       Layout
       ---------------------------------------------------------------------- */

    --container:
        76rem;

    --container-wide:
        92rem;

    --gutter:
        clamp(
            1.15rem,
            4vw,
            3.75rem
        );

    --section-space:
        clamp(
            5rem,
            9vw,
            9rem
        );

    /* ----------------------------------------------------------------------
       Motion
       ---------------------------------------------------------------------- */

    --transition-fast:
        160ms ease;

    --transition-normal:
        260ms ease;
}


/* ==========================================================================
   02. RESET
   ========================================================================== */

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

html {
    scroll-behavior:
        smooth;
}

body {
    margin:
        0;

    min-width:
        20rem;

    overflow-x:
        hidden;

    background:
        var(--cream);

    color:
        var(--ink);

    font-family:
        var(--font-body);

    font-size:
        1rem;

    line-height:
        1.65;

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;
}

img,
picture,
svg,
video {
    display:
        block;

    max-width:
        100%;
}

img {
    height:
        auto;
}

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

button {
    cursor:
        pointer;
}

a {
    color:
        inherit;
}

figure,
blockquote,
dl,
dd {
    margin:
        0;
}

h1,
h2,
h3,
h4,
p,
ul,
ol {
    margin-top:
        0;
}

ul,
ol {
    padding-left:
        1.25rem;
}


/* ==========================================================================
   03. ACCESSIBILITY
   ========================================================================== */

.skip-link {
    position:
        fixed;

    top:
        1rem;

    left:
        1rem;

    z-index:
        9999;

    padding:
        0.8rem
        1rem;

    transform:
        translateY(-180%);

    border:
        3px
        solid
        var(--ink);

    background:
        var(--lime);

    color:
        var(--ink);

    font-family:
        var(--font-mono);

    font-size:
        0.76rem;

    font-weight:
        700;

    text-decoration:
        none;

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;

    transition:
        transform
        var(--transition-fast);
}

.skip-link:focus {
    transform:
        translateY(0);
}

:focus-visible {
    outline:
        4px
        solid
        var(--lime);

    outline-offset:
        4px;
}

::selection {
    background:
        var(--lime);

    color:
        var(--ink);
}


/* ==========================================================================
   04. GLOBAL TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4 {
    margin-bottom:
        1rem;

    color:
        var(--ink);

    font-family:
        var(--font-display);

    font-weight:
        800;

    line-height:
        0.98;

    letter-spacing:
        -0.05em;
}

h1 {
    font-size:
        clamp(
            4rem,
            8vw,
            8.4rem
        );
}

h2 {
    font-size:
        clamp(
            2.8rem,
            5vw,
            5.2rem
        );
}

h3 {
    font-size:
        clamp(
            1.7rem,
            3vw,
            2.65rem
        );
}

h4 {
    font-size:
        1.2rem;
}

p {
    margin-bottom:
        1.35rem;
}

strong {
    font-weight:
        800;
}

.lede {
    max-width:
        44rem;

    font-size:
        clamp(
            1.14rem,
            1.7vw,
            1.4rem
        );

    line-height:
        1.55;
}

.utility {
    margin-bottom:
        0.75rem;

    font-family:
        var(--font-mono);

    font-size:
        0.72rem;

    font-weight:
        600;

    line-height:
        1.35;

    text-transform:
        uppercase;

    letter-spacing:
        0.09em;
}

.eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.5rem;

    margin-bottom:
        1rem;

    color:
        var(--navy);

    font-family:
        var(--font-mono);

    font-size:
        0.74rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;
}

.eyebrow::before {
    content:
        "";

    width:
        2.4rem;

    height:
        0.22rem;

    background:
        var(--red);
}

.hand-note {
    color:
        var(--red);

    font-family:
        var(--font-hand);

    font-size:
        clamp(
            1.6rem,
            3vw,
            2.4rem
        );

    font-weight:
        700;

    line-height:
        1;

    transform:
        rotate(-3deg);
}

.highlight {
    display:
        inline;

    padding-inline:
        0.08em;

    background:
        linear-gradient(
            transparent 52%,
            rgba(184, 217, 76, 0.82) 52%,
            rgba(184, 217, 76, 0.82) 91%,
            transparent 91%
        );

    box-decoration-break:
        clone;

    -webkit-box-decoration-break:
        clone;
}

.red-underline {
    position:
        relative;

    display:
        inline-block;
}

.red-underline::after {
    content:
        "";

    position:
        absolute;

    right:
        -0.05em;

    bottom:
        -0.08em;

    left:
        -0.05em;

    height:
        0.16em;

    background:
        var(--red);

    transform:
        rotate(-1deg);
}


/* ==========================================================================
   05. LAYOUT
   ========================================================================== */

.site-main {
    overflow:
        clip;
}

.container {
    width:
        min(
            calc(100% - (var(--gutter) * 2)),
            var(--container)
        );

    margin-inline:
        auto;
}

.container--wide {
    width:
        min(
            calc(100% - (var(--gutter) * 2)),
            var(--container-wide)
        );

    margin-inline:
        auto;
}

.section {
    position:
        relative;

    padding-block:
        var(--section-space);
}

.section--cream {
    background:
        var(--cream);
}

.section--paper {
    background:
        var(--paper);
}

.section--navy {
    background:
        var(--navy);

    color:
        var(--paper);
}

.section--navy h2,
.section--navy h3,
.section--navy h4 {
    color:
        var(--paper);
}

.section--ink {
    background:
        var(--ink);

    color:
        var(--paper);
}

.section--ink h2,
.section--ink h3,
.section--ink h4 {
    color:
        var(--paper);
}

.section--yellow {
    background:
        var(--yellow);
}

.section--red {
    background:
        var(--red);

    color:
        var(--paper);
}

.section--red h2,
.section--red h3,
.section--red h4 {
    color:
        var(--paper);
}

.grid {
    display:
        grid;

    gap:
        clamp(
            1.5rem,
            3vw,
            3rem
        );
}

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

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


/* ==========================================================================
   06. NOTEBOOK TEXTURES
   ========================================================================== */

.notebook-grid {
    background-color:
        var(--paper);

    background-image:
        linear-gradient(
            rgba(23, 61, 88, 0.065) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(23, 61, 88, 0.065) 1px,
            transparent 1px
        );

    background-size:
        2rem
        2rem;
}

.notebook-lines {
    background-color:
        var(--paper);

    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 2rem,
            rgba(77, 127, 160, 0.12) 2rem,
            rgba(77, 127, 160, 0.12) 2.06rem
        );
}

.notebook-margin {
    position:
        relative;
}

.notebook-margin::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        clamp(
            2rem,
            7vw,
            7rem
        );

    width:
        2px;

    background:
        rgba(201, 66, 56, 0.42);
}


/* ==========================================================================
   07. BUTTONS
   ========================================================================== */

.button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.6rem;

    min-height:
        3.4rem;

    padding:
        0.9rem
        1.25rem;

    border:
        3px
        solid
        var(--ink);

    border-radius:
        999px;

    background:
        var(--ink);

    color:
        var(--paper);

    font-family:
        var(--font-display);

    font-size:
        0.87rem;

    font-weight:
        800;

    line-height:
        1;

    text-decoration:
        none;

    text-transform:
        uppercase;

    letter-spacing:
        0.025em;

    transition:
        transform
        var(--transition-fast),
        background
        var(--transition-fast),
        color
        var(--transition-fast),
        border-color
        var(--transition-fast);
}

.button:hover {
    transform:
        translateY(-0.15rem);
}

.button--red {
    border-color:
        var(--red);

    background:
        var(--red);
}

.button--yellow {
    border-color:
        var(--yellow);

    background:
        var(--yellow);

    color:
        var(--ink);
}

.button--lime {
    border-color:
        var(--lime);

    background:
        var(--lime);

    color:
        var(--ink);
}

.button--outline {
    background:
        transparent;

    color:
        var(--ink);
}

.button--outline:hover {
    background:
        var(--ink);

    color:
        var(--paper);
}

.section--navy .button--outline,
.section--ink .button--outline,
.section--red .button--outline {
    border-color:
        var(--paper);

    color:
        var(--paper);
}

.button-row {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.9rem;

    align-items:
        center;
}

.text-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.4rem;

    color:
        var(--navy);

    font-family:
        var(--font-mono);

    font-size:
        0.78rem;

    font-weight:
        700;

    text-decoration-thickness:
        2px;

    text-underline-offset:
        0.25rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;
}

.text-link:hover {
    color:
        var(--red);
}


/* ==========================================================================
   08. TOP STRIP
   ========================================================================== */

.status-strip {
    background:
        var(--yellow);

    color:
        var(--ink);

    border-bottom:
        2px
        solid
        var(--ink);
}

.status-strip__inner {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    min-height:
        2.35rem;

    font-family:
        var(--font-mono);

    font-size:
        0.68rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;
}

.status-strip__group {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.35rem
        1.2rem;
}

.status-strip__alert {
    color:
        var(--red-dark);
}


/* ==========================================================================
   09. HEADER
   ========================================================================== */

.site-header {
    position:
        relative;

    z-index:
        100;

    background:
        rgba(255, 253, 247, 0.97);

    border-bottom:
        1px
        solid
        var(--line);

    backdrop-filter:
        blur(12px);
}

.site-header__inner {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1.5rem;

    min-height:
        5.5rem;
}

.site-logo {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.75rem;

    color:
        var(--ink);

    text-decoration:
        none;
}

.site-logo__mark {
    display:
        grid;

    place-items:
        center;

    width:
        3.15rem;

    height:
        3.15rem;

    border-radius:
        50%;

    background:
        var(--red);

    color:
        var(--paper);

    font-family:
        var(--font-hand);

    font-size:
        1.25rem;

    font-weight:
        700;

    transform:
        rotate(-7deg);
}

.site-logo__text {
    display:
        grid;

    gap:
        0.06rem;
}

.site-logo__name {
    font-family:
        var(--font-display);

    font-size:
        clamp(
            1rem,
            1.55vw,
            1.24rem
        );

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.035em;
}

.site-logo__tag {
    color:
        var(--navy);

    font-family:
        var(--font-mono);

    font-size:
        0.6rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.075em;
}

.site-nav {
    display:
        flex;

    align-items:
        center;

    gap:
        clamp(
            0.9rem,
            1.8vw,
            1.5rem
        );
}

.site-nav__links {
    display:
        flex;

    align-items:
        center;

    gap:
        clamp(
            0.8rem,
            1.5vw,
            1.35rem
        );

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}

.site-nav__link {
    position:
        relative;

    display:
        inline-block;

    padding-block:
        0.4rem;

    color:
        var(--ink);

    font-size:
        0.8rem;

    font-weight:
        700;

    text-decoration:
        none;
}

.site-nav__link::after {
    content:
        "";

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    left:
        0;

    height:
        0.17rem;

    transform:
        scaleX(0)
        rotate(-1deg);

    transform-origin:
        left;

    background:
        var(--red);

    transition:
        transform
        var(--transition-fast);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
    transform:
        scaleX(1)
        rotate(-1deg);
}

.nav-toggle {
    display:
        none;

    width:
        3rem;

    height:
        3rem;

    padding:
        0;

    border:
        2px
        solid
        var(--ink);

    border-radius:
        50%;

    background:
        var(--yellow);

    color:
        var(--ink);

    font-family:
        var(--font-mono);

    font-size:
        0.65rem;

    font-weight:
        700;

    text-transform:
        uppercase;
}


/* ==========================================================================
   10. PHOTOGRAPHIC HERO
   ========================================================================== */

.learning-hero {
    position:
        relative;

    min-height:
        clamp(
            43rem,
            78vh,
            57rem
        );

    overflow:
        hidden;

    background:
        var(--cream);
}

.learning-hero__layout {
    display:
        grid;

    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(28rem, 1.22fr);

    min-height:
        inherit;
}

.learning-hero__copy {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        clamp(
            4rem,
            8vw,
            7rem
        )
        clamp(
            1.25rem,
            5vw,
            5rem
        );

    background:
        var(--cream);
}

.learning-hero__copy::after {
    content:
        "";

    position:
        absolute;

    top:
        0;

    right:
        -8rem;

    bottom:
        0;

    z-index:
        -1;

    width:
        12rem;

    background:
        linear-gradient(
            90deg,
            var(--cream) 0%,
            rgba(246, 241, 230, 0.86) 42%,
            rgba(246, 241, 230, 0) 100%
        );

    pointer-events:
        none;
}

.learning-hero h1 {
    max-width:
        11.5ch;

    margin-bottom:
        1.4rem;

    font-size:
        clamp(
            3.8rem,
            7vw,
            7.4rem
        );

    text-wrap:
        balance;
}

.learning-hero__intro {
    max-width:
        34rem;

    font-size:
        clamp(
            1.15rem,
            1.8vw,
            1.45rem
        );

    line-height:
        1.5;
}

.learning-hero__media {
    position:
        relative;

    min-height:
        100%;
}

.learning-hero__media img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}

.learning-hero__scribble {
    position:
        absolute;

    z-index:
        4;

    right:
        clamp(
            1.5rem,
            5vw,
            5rem
        );

    bottom:
        clamp(
            2rem,
            6vw,
            5rem
        );

    max-width:
        15rem;

    color:
        var(--red);

    font-family:
        var(--font-hand);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.7rem
        );

    font-weight:
        700;

    line-height:
        0.95;

    transform:
        rotate(-6deg);
}


/* ==========================================================================
   11. LEARNING PROCESS STRIP
   ========================================================================== */

.learning-principles {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    border-top:
        2px
        solid
        var(--ink);

    border-bottom:
        2px
        solid
        var(--ink);
}

.learning-principle {
    padding:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

    border-right:
        1px
        solid
        var(--line-strong);
}

.learning-principle:last-child {
    border-right:
        0;
}

.learning-principle__number {
    display:
        block;

    margin-bottom:
        1.5rem;

    color:
        var(--red);

    font-family:
        var(--font-hand);

    font-size:
        2.4rem;

    font-weight:
        700;

    transform:
        rotate(-5deg);
}

.learning-principle h3 {
    margin-bottom:
        0.65rem;
}


/* ==========================================================================
   12. GRADE BANDS
   ========================================================================== */

.grade-bands {
    border-top:
        2px
        solid
        var(--ink);
}

.grade-band {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(12rem, 0.65fr)
        minmax(0, 1.35fr)
        auto;

    gap:
        2rem;

    align-items:
        center;

    min-height:
        9rem;

    padding:
        1.5rem
        0;

    border-bottom:
        2px
        solid
        var(--ink);

    text-decoration:
        none;

    transition:
        padding
        var(--transition-normal),
        background
        var(--transition-normal);
}

.grade-band:hover {
    padding-inline:
        1.5rem;

    background:
        var(--yellow);
}

.grade-band__label {
    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.8rem,
            3vw,
            3rem
        );

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.045em;
}

.grade-band__copy {
    max-width:
        38rem;

    margin:
        0;
}

.grade-band__arrow {
    color:
        var(--red);

    font-size:
        2rem;

    font-weight:
        800;
}


/* ==========================================================================
   13. SUBJECT INDEX
   ========================================================================== */

.subject-feature {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(22rem, 0.95fr);

    min-height:
        clamp(
            38rem,
            65vw,
            48rem
        );
}

.subject-feature__media {
    position:
        relative;

    overflow:
        hidden;

    background:
        var(--navy);
}

.subject-feature__media img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.subject-feature__content {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        clamp(
            3rem,
            7vw,
            7rem
        );

    background:
        var(--paper);
}

.subject-list {
    margin-top:
        2rem;

    border-top:
        2px
        solid
        var(--ink);
}

.subject-row {
    display:
        grid;

    grid-template-columns:
        3.5rem
        minmax(0, 1fr)
        auto;

    gap:
        1rem;

    align-items:
        center;

    padding:
        1.15rem
        0;

    border-bottom:
        1px
        solid
        var(--line-strong);

    text-decoration:
        none;

    transition:
        color
        var(--transition-fast),
        padding
        var(--transition-fast);
}

.subject-row:hover {
    padding-left:
        0.75rem;

    color:
        var(--red);
}

.subject-row__number {
    font-family:
        var(--font-mono);

    font-size:
        0.7rem;
}

.subject-row__name {
    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.35rem,
            2vw,
            1.8rem
        );

    font-weight:
        800;
}

.subject-row__status {
    color:
        var(--navy);

    font-family:
        var(--font-mono);

    font-size:
        0.66rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.05em;
}


/* ==========================================================================
   14. WHITEBOARD MEME SECTION
   ========================================================================== */

.whiteboard {
    position:
        relative;

    overflow:
        hidden;

    padding:
        clamp(
            3rem,
            7vw,
            7rem
        );

    border:
        1rem
        solid
        #d9d7d0;

    background:
        #fafbf7;

    box-shadow:
        inset
        0
        0
        0
        2px
        rgba(28, 35, 40, 0.12);
}

.whiteboard::after {
    content:
        "";

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    left:
        0;

    height:
        1.4rem;

    background:
        #c4c1b9;
}

.whiteboard__layout {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(18rem, 0.55fr);

    gap:
        clamp(
            2rem,
            6vw,
            6rem
        );

    align-items:
        center;
}

.whiteboard__list {
    display:
        grid;

    gap:
        0.8rem;

    margin:
        2rem
        0
        0;

    padding:
        0;

    list-style:
        none;
}

.whiteboard__list li {
    font-family:
        var(--font-hand);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.65rem
        );

    line-height:
        1.05;
}

.whiteboard__mystery {
    text-align:
        center;
}

.whiteboard__67 {
    display:
        block;

    color:
        var(--red);

    font-family:
        var(--font-hand);

    font-size:
        clamp(
            7rem,
            15vw,
            14rem
        );

    font-weight:
        700;

    line-height:
        0.75;

    transform:
        rotate(-8deg);
}

.whiteboard__answer {
    margin-top:
        1.5rem;

    color:
        var(--red);

    font-family:
        var(--font-hand);

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.5rem
        );

    font-weight:
        700;

    line-height:
        1;
}


/* ==========================================================================
   15. NOTEBOOK TIMELINE
   ========================================================================== */

.study-timeline {
    position:
        relative;

    max-width:
        60rem;

    margin-inline:
        auto;
}

.study-timeline::before {
    content:
        "";

    position:
        absolute;

    top:
        1.5rem;

    bottom:
        1.5rem;

    left:
        2rem;

    width:
        3px;

    background:
        var(--red);
}

.study-step {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        4rem
        minmax(0, 1fr);

    gap:
        1.5rem;

    padding:
        0
        0
        clamp(
            2.5rem,
            5vw,
            4.5rem
        );
}

.study-step:last-child {
    padding-bottom:
        0;
}

.study-step__number {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    place-items:
        center;

    width:
        4rem;

    height:
        4rem;

    border:
        3px
        solid
        var(--red);

    border-radius:
        50%;

    background:
        var(--paper);

    color:
        var(--red);

    font-family:
        var(--font-hand);

    font-size:
        1.8rem;

    font-weight:
        700;

    transform:
        rotate(-5deg);
}

.study-step__content {
    padding-top:
        0.35rem;
}

.study-step__content p {
    max-width:
        42rem;
}


/* ==========================================================================
   16. PROGRESS / TRUST
   ========================================================================== */

.progress-wall {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    border:
        2px
        solid
        var(--ink);
}

.progress-item {
    padding:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

    border-right:
        1px
        solid
        var(--line-strong);
}

.progress-item:last-child {
    border-right:
        0;
}

.progress-item__check {
    display:
        block;

    margin-bottom:
        1rem;

    color:
        var(--red);

    font-family:
        var(--font-hand);

    font-size:
        3rem;

    font-weight:
        700;

    transform:
        rotate(-8deg);
}


/* ==========================================================================
   17. TESTIMONIAL
   ========================================================================== */

.parent-note {
    position:
        relative;

    max-width:
        52rem;

    margin-inline:
        auto;

    padding:
        clamp(
            2rem,
            5vw,
            4rem
        );

    background:
        var(--paper);

    box-shadow:
        0.8rem
        0.8rem
        0
        rgba(28, 35, 40, 0.1);

    transform:
        rotate(-0.7deg);
}

.parent-note::before {
    content:
        "";

    position:
        absolute;

    top:
        -1rem;

    left:
        50%;

    width:
        8rem;

    height:
        2rem;

    transform:
        translateX(-50%)
        rotate(1deg);

    background:
        rgba(231, 199, 79, 0.72);
}

.parent-note blockquote {
    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.7rem
        );

    font-weight:
        700;

    line-height:
        1.15;

    letter-spacing:
        -0.035em;
}


/* ==========================================================================
   18. IN-PERSON / ONLINE SPLIT
   ========================================================================== */

.learning-modes {
    display:
        grid;

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

.learning-mode {
    position:
        relative;

    min-height:
        clamp(
            34rem,
            52vw,
            45rem
        );

    overflow:
        hidden;

    background:
        var(--ink);
}

.learning-mode img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    opacity:
        0.75;

    transition:
        transform
        600ms ease;
}

.learning-mode:hover img {
    transform:
        scale(1.035);
}

.learning-mode::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(28, 35, 40, 0.08) 20%,
            rgba(28, 35, 40, 0.88) 100%
        );
}

.learning-mode__content {
    position:
        absolute;

    right:
        clamp(
            1.5rem,
            5vw,
            4rem
        );

    bottom:
        clamp(
            2rem,
            5vw,
            4rem
        );

    left:
        clamp(
            1.5rem,
            5vw,
            4rem
        );

    z-index:
        2;

    color:
        var(--paper);
}

.learning-mode__content h3 {
    color:
        var(--paper);

    font-size:
        clamp(
            2.5rem,
            5vw,
            5rem
        );
}


/* ==========================================================================
   19. BACKPACK RESOURCES
   ========================================================================== */

.resource-stack {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        clamp(
            1.5rem,
            4vw,
            3rem
        );

    align-items:
        start;
}

.resource-sheet {
    position:
        relative;

    min-height:
        22rem;

    padding:
        2rem;

    border:
        1px
        solid
        rgba(28, 35, 40, 0.2);

    background:
        var(--paper);

    box-shadow:
        0.55rem
        0.7rem
        0
        rgba(28, 35, 40, 0.09);
}

.resource-sheet:nth-child(1) {
    transform:
        rotate(-2deg);
}

.resource-sheet:nth-child(2) {
    margin-top:
        2rem;

    background:
        #fff9dd;

    transform:
        rotate(1.5deg);
}

.resource-sheet:nth-child(3) {
    transform:
        rotate(-0.8deg);
}

.resource-sheet__hole {
    position:
        absolute;

    top:
        1.4rem;

    left:
        1.25rem;

    width:
        0.65rem;

    height:
        0.65rem;

    border:
        1px
        solid
        rgba(28, 35, 40, 0.3);

    border-radius:
        50%;

    background:
        var(--cream);
}


/* ==========================================================================
   20. PHOTO CTA
   ========================================================================== */

.photo-cta {
    position:
        relative;

    min-height:
        clamp(
            38rem,
            65vw,
            50rem
        );

    overflow:
        hidden;

    background:
        var(--ink);
}

.photo-cta > img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.photo-cta::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(28, 35, 40, 0.94) 0%,
            rgba(28, 35, 40, 0.78) 38%,
            rgba(28, 35, 40, 0.28) 67%,
            rgba(28, 35, 40, 0.08) 100%
        );
}

.photo-cta__content {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-height:
        inherit;

    width:
        min(
            calc(100% - (var(--gutter) * 2)),
            var(--container-wide)
        );

    margin-inline:
        auto;
}

.photo-cta__copy {
    max-width:
        42rem;

    color:
        var(--paper);
}

.photo-cta h2 {
    max-width:
        10ch;

    color:
        var(--paper);
}


/* ==========================================================================
   21. FORMS
   ========================================================================== */

.form-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        1.25rem;
}

.form-field {
    display:
        grid;

    gap:
        0.45rem;
}

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

.form-field label {
    color:
        var(--navy);

    font-family:
        var(--font-mono);

    font-size:
        0.72rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;
}

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

    padding:
        0.95rem
        1rem;

    border:
        0;

    border-bottom:
        3px
        solid
        var(--ink);

    border-radius:
        0;

    background:
        rgba(255, 253, 247, 0.72);

    color:
        var(--ink);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color:
        var(--red);
}

.form-field textarea {
    min-height:
        10rem;

    resize:
        vertical;
}


/* ==========================================================================
   22. GENERIC INTERNAL PAGE HERO
   ========================================================================== */

.page-hero {
    position:
        relative;

    padding:
        clamp(
            5rem,
            10vw,
            9rem
        )
        0;

    overflow:
        hidden;

    background:
        var(--cream);
}

.page-hero__content {
    position:
        relative;

    z-index:
        2;

    max-width:
        60rem;
}

.page-hero h1 {
    max-width:
        10ch;
}

.page-hero__scribble {
    position:
        absolute;

    right:
        var(--gutter);

    bottom:
        2rem;

    color:
        var(--red);

    font-family:
        var(--font-hand);

    font-size:
        clamp(
            2rem,
            4vw,
            4rem
        );

    font-weight:
        700;

    transform:
        rotate(-5deg);
}


/* ==========================================================================
   23. FOOTER
   ========================================================================== */

.site-footer {
    background:
        var(--ink);

    color:
        var(--paper);
}

.site-footer__main {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        repeat(
            2,
            minmax(10rem, 0.55fr)
        );

    gap:
        clamp(
            2rem,
            5vw,
            5rem
        );

    padding-block:
        clamp(
            4rem,
            8vw,
            7rem
        );
}

.site-footer h2,
.site-footer h3 {
    color:
        var(--paper);
}

.site-footer__brand h2 {
    max-width:
        11ch;

    font-size:
        clamp(
            2.8rem,
            5vw,
            4.8rem
        );
}

.site-footer__links {
    display:
        grid;

    gap:
        0.7rem;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}

.site-footer__links a {
    color:
        var(--paper);

    font-size:
        0.86rem;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        0.22rem;
}

.site-footer__bottom {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        1rem;

    padding-block:
        1.25rem;

    border-top:
        1px
        solid
        rgba(255, 255, 255, 0.18);

    color:
        rgba(255, 255, 255, 0.72);

    font-family:
        var(--font-mono);

    font-size:
        0.68rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.05em;
}


/* ==========================================================================
   24. LEGACY / BASIC COMPATIBILITY
   ========================================================================== */

.card {
    padding:
        1.75rem;

    background:
        var(--paper);
}

.card--navy {
    background:
        var(--navy);

    color:
        var(--paper);
}

.card--navy h3,
.card--navy h4 {
    color:
        var(--paper);
}

.card--red {
    background:
        var(--red);

    color:
        var(--paper);
}

.card--red h3,
.card--red h4 {
    color:
        var(--paper);
}

.card--yellow {
    background:
        var(--yellow);
}

.card--lime {
    background:
        var(--lime);
}

.ledger-rule {
    margin:
        2rem
        0;

    border:
        0;

    border-top:
        2px
        solid
        var(--line-strong);
}

.teacher-mark {
    color:
        var(--red);

    font-family:
        var(--hand-font);
}


/* ==========================================================================
   25. VISUALLY HIDDEN
   ========================================================================== */

.visually-hidden {
    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(
            0,
            0,
            0,
            0
        ) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;
}


/* ==========================================================================
   26. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
    .learning-hero__layout {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(24rem, 1.1fr);
    }

    .site-nav__links {
        gap:
            0.8rem;
    }
}

@media (max-width: 980px) {
    .site-nav {
        position:
            absolute;

        top:
            100%;

        right:
            0;

        left:
            0;

        display:
            none;

        align-items:
            stretch;

        padding:
            1rem
            var(--gutter)
            1.5rem;

        border-bottom:
            2px
            solid
            var(--ink);

        background:
            var(--paper);
    }

    .site-nav[data-open="true"] {
        display:
            grid;
    }

    .site-nav__links {
        display:
            grid;

        gap:
            0;
    }

    .site-nav__link {
        display:
            block;

        padding:
            0.9rem
            0;

        border-bottom:
            1px
            solid
            var(--line);
    }

    .site-nav__link::after {
        display:
            none;
    }

    .site-nav .button {
        width:
            100%;
    }

    .nav-toggle {
        display:
            inline-grid;

        place-items:
            center;
    }

    .learning-hero {
        min-height:
            auto;
    }

    .learning-hero__layout {
        grid-template-columns:
            1fr;
    }

    .learning-hero__copy {
        padding:
            5rem
            var(--gutter)
            4rem;
    }

    .learning-hero__copy::after {
        display:
            none;
    }

    .learning-hero__media {
        min-height:
            34rem;
    }

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

    .subject-feature__media {
        min-height:
            34rem;
    }

    .learning-modes {
        grid-template-columns:
            1fr;
    }

    .site-footer__main {
        grid-template-columns:
            1fr
            1fr;
    }

    .site-footer__brand {
        grid-column:
            1
            /
            -1;
    }
}

@media (max-width: 760px) {
    h1 {
        font-size:
            clamp(
                3.7rem,
                17vw,
                6rem
            );
    }

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

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

    .status-strip__inner {
        align-items:
            flex-start;

        flex-direction:
            column;

        justify-content:
            center;

        padding-block:
            0.65rem;
    }

    .learning-principles {
        grid-template-columns:
            1fr;
    }

    .learning-principle {
        border-right:
            0;

        border-bottom:
            1px
            solid
            var(--line-strong);
    }

    .learning-principle:last-child {
        border-bottom:
            0;
    }

    .grade-band {
        grid-template-columns:
            1fr
            auto;

        gap:
            0.8rem
            1rem;
    }

    .grade-band__copy {
        grid-column:
            1
            /
            -1;

        grid-row:
            2;
    }

    .subject-row {
        grid-template-columns:
            2.5rem
            minmax(0, 1fr);
    }

    .subject-row__status {
        grid-column:
            2;
    }

    .whiteboard {
        border-width:
            0.65rem;
    }

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

    .progress-wall {
        grid-template-columns:
            1fr;
    }

    .progress-item {
        border-right:
            0;

        border-bottom:
            1px
            solid
            var(--line-strong);
    }

    .progress-item:last-child {
        border-bottom:
            0;
    }

    .resource-stack {
        grid-template-columns:
            1fr;
    }

    .resource-sheet:nth-child(1),
    .resource-sheet:nth-child(2),
    .resource-sheet:nth-child(3) {
        margin-top:
            0;

        transform:
            none;
    }

    .photo-cta::after {
        background:
            linear-gradient(
                180deg,
                rgba(28, 35, 40, 0.5) 0%,
                rgba(28, 35, 40, 0.9) 72%,
                rgba(28, 35, 40, 0.96) 100%
            );
    }

    .photo-cta__content {
        justify-content:
            flex-end;

        padding-bottom:
            4rem;
    }

    .site-footer__main {
        grid-template-columns:
            1fr;
    }

    .site-footer__brand {
        grid-column:
            auto;
    }

    .site-footer__bottom {
        flex-direction:
            column;
    }
}

@media (max-width: 560px) {
    :root {
        --gutter:
            1rem;
    }

    .site-header__inner {
        min-height:
            4.8rem;
    }

    .site-logo__mark {
        width:
            2.7rem;

        height:
            2.7rem;

        font-size:
            1.05rem;
    }

    .site-logo__tag {
        display:
            none;
    }

    .learning-hero__media {
        min-height:
            28rem;
    }

    .learning-hero__scribble {
        right:
            1rem;

        bottom:
            1.25rem;
    }

    .button-row {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .button-row .button {
        width:
            100%;
    }

    .study-timeline::before {
        left:
            1.55rem;
    }

    .study-step {
        grid-template-columns:
            3.1rem
            minmax(0, 1fr);

        gap:
            1rem;
    }

    .study-step__number {
        width:
            3.1rem;

        height:
            3.1rem;

        font-size:
            1.45rem;
    }
}


/* ==========================================================================
   27. REDUCED MOTION
   ========================================================================== */

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

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }
}
/* ==========================================================================
   THE ANSWER IS NOT 6-7 - MEME METRICS
   ========================================================================== */

.meme-metrics {
    position:
        relative;

    margin:
        clamp(
            2.5rem,
            5vw,
            4.5rem
        )
        0;

    padding:
        clamp(
            1.5rem,
            3vw,
            2.25rem
        )
        0;

    border-top:
        2px
        dashed
        var(--ink);

    border-bottom:
        2px
        dashed
        var(--ink);

    background:
        linear-gradient(
            90deg,
            rgba(184, 217, 76, 0.08),
            rgba(231, 199, 79, 0.18),
            rgba(184, 217, 76, 0.08)
        );
}

.meme-metrics__header {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        1.5rem;

    margin-bottom:
        1.5rem;
}

.meme-metrics__header p {
    margin:
        0;
}

.meme-metrics__status {
    color:
        var(--red);

    font-family:
        var(--font-hand);

    font-size:
        clamp(
            1.4rem,
            2.5vw,
            2rem
        );

    font-weight:
        700;

    line-height:
        1;

    transform:
        rotate(-2deg);
}

.meme-metrics__grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    border-top:
        1px
        solid
        var(--line-strong);

    border-bottom:
        1px
        solid
        var(--line-strong);
}

.meme-metric {
    padding:
        clamp(
            1.25rem,
            3vw,
            2rem
        );

    border-right:
        1px
        solid
        var(--line-strong);
}

.meme-metric:last-child {
    border-right:
        0;
}

.meme-metric__value {
    display:
        block;

    margin-bottom:
        0.25rem;

    color:
        var(--red);

    font-family:
        var(--font-hand);

    font-size:
        clamp(
            4.25rem,
            8vw,
            7rem
        );

    font-weight:
        700;

    line-height:
        0.8;

    transform:
        rotate(-4deg);
}

.meme-metric:nth-child(2) .meme-metric__value {
    transform:
        rotate(3deg);
}

.meme-metric:nth-child(3) .meme-metric__value {
    color:
        var(--navy);

    transform:
        rotate(-1deg);
}

.meme-metric__label {
    display:
        block;

    max-width:
        16rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.05rem,
            2vw,
            1.35rem
        );

    font-weight:
        700;

    line-height:
        1.1;

    letter-spacing:
        -0.03em;
}

.meme-metrics__footnote {
    margin:
        1rem
        0
        0;

    color:
        var(--ink-soft);

    font-family:
        var(--font-mono);

    font-size:
        0.67rem;

    line-height:
        1.5;

    text-transform:
        uppercase;

    letter-spacing:
        0.05em;
}

@media (max-width: 700px) {
    .meme-metrics__header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .meme-metrics__grid {
        grid-template-columns:
            1fr;
    }

    .meme-metric {
        border-right:
            0;

        border-bottom:
            1px
            solid
            var(--line-strong);
    }

    .meme-metric:last-child {
        border-bottom:
            0;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - NOTEBOOK CONTENT MARGIN FIX
   ========================================================================== */

/*
|--------------------------------------------------------------------------
| Keep notebook-section content to the RIGHT of the red paper margin.
|--------------------------------------------------------------------------
*/

.notebook-margin > .container {
    padding-left:
        clamp(
            4.5rem,
            7vw,
            7rem
        );
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {
    .notebook-margin > .container {
        padding-left:
            clamp(
                3.75rem,
                8vw,
                5.5rem
            );
    }
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 560px) {
    .notebook-margin::before {
        left:
            2.25rem;
    }

    .notebook-margin > .container {
        padding-left:
            3.25rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - HERO SEAMLESS PHOTO FADE
   ========================================================================== */

/*
|--------------------------------------------------------------------------
| Remove the old cross-column fade.
|--------------------------------------------------------------------------
*/

.learning-hero__copy::after {
    display:
        none;
}


/*
|--------------------------------------------------------------------------
| Fade the cream background directly INTO the photograph.
|--------------------------------------------------------------------------
*/

.learning-hero__media::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        -1px;

    z-index:
        2;

    width:
        clamp(
            7rem,
            14vw,
            13rem
        );

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            var(--cream) 0%,
            rgba(246, 241, 230, 0.96) 12%,
            rgba(246, 241, 230, 0.82) 30%,
            rgba(246, 241, 230, 0.52) 52%,
            rgba(246, 241, 230, 0.22) 72%,
            rgba(246, 241, 230, 0.06) 88%,
            rgba(246, 241, 230, 0) 100%
        );
}

.learning-hero__media img {
    z-index:
        1;
}


/*
|--------------------------------------------------------------------------
| Keep the handwritten note above the fade.
|--------------------------------------------------------------------------
*/

.learning-hero__scribble {
    z-index:
        4;
}


/*
|--------------------------------------------------------------------------
| Mobile no longer needs the side fade because the image stacks below copy.
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {
    .learning-hero__media::before {
        display:
            none;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - HERO PHOTO REVEAL TUNING
   ========================================================================== */

/*
|--------------------------------------------------------------------------
| Give the photograph more of the desktop hero.
|--------------------------------------------------------------------------
*/

.learning-hero__layout {
    grid-template-columns:
        minmax(0, 0.68fr)
        minmax(30rem, 1.32fr);
}


/*
|--------------------------------------------------------------------------
| Keep enough room for the headline inside the narrower copy column.
|--------------------------------------------------------------------------
*/

.learning-hero__copy {
    padding-left:
        clamp(
            2.75rem,
            4vw,
            4.5rem
        );

    padding-right:
        clamp(
            1.75rem,
            3vw,
            3rem
        );
}


/*
|--------------------------------------------------------------------------
| Shorter, lighter fade so more of the actual photograph remains visible.
|--------------------------------------------------------------------------
*/

.learning-hero__media::before {
    width:
        clamp(
            4.5rem,
            8vw,
            7rem
        );

    background:
        linear-gradient(
            90deg,
            var(--cream) 0%,
            rgba(246, 241, 230, 0.88) 14%,
            rgba(246, 241, 230, 0.62) 34%,
            rgba(246, 241, 230, 0.32) 55%,
            rgba(246, 241, 230, 0.10) 76%,
            rgba(246, 241, 230, 0) 100%
        );
}


/*
|--------------------------------------------------------------------------
| Tablet returns to the stacked layout already defined by the site.
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {
    .learning-hero__layout {
        grid-template-columns:
            1fr;
    }

    .learning-hero__copy {
        padding:
            5rem
            var(--gutter)
            4rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - PHOTO CTA OUTLINE BUTTON FIX
   ========================================================================== */

.photo-cta .button--outline {
    border-color:
        var(--paper);

    background:
        rgba(28, 35, 40, 0.28);

    color:
        var(--paper);
}

.photo-cta .button--outline:hover,
.photo-cta .button--outline:focus-visible {
    border-color:
        var(--paper);

    background:
        var(--paper);

    color:
        var(--ink);
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - NAVY WHITEBOARD READABILITY FIX
   ========================================================================== */

/*
|--------------------------------------------------------------------------
| Section label must remain visible on navy backgrounds.
|--------------------------------------------------------------------------
*/

.section--navy .eyebrow {
    color:
        var(--paper);
}


/*
|--------------------------------------------------------------------------
| A whiteboard is white even when it lives inside a dark section.
| Reset inherited navy-section text colors back to classroom-marker ink.
|--------------------------------------------------------------------------
*/

.section--navy .whiteboard {
    color:
        var(--ink);
}

.section--navy .whiteboard h2,
.section--navy .whiteboard h3,
.section--navy .whiteboard h4 {
    color:
        var(--ink);
}

.section--navy .whiteboard .utility {
    color:
        var(--navy);
}

.section--navy .whiteboard__list {
    color:
        var(--ink);
}

.section--navy .whiteboard__list li {
    color:
        var(--ink);
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - TUTORING TRIAGE PHOTO
   ========================================================================== */

.tutoring-triage-photo {
    position:
        relative;

    min-height:
        clamp(
            34rem,
            55vw,
            46rem
        );

    overflow:
        hidden;

    background:
        var(--ink);

    color:
        var(--paper);
}

.tutoring-triage-photo > img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}

.tutoring-triage-photo::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(28, 35, 40, 0.96) 0%,
            rgba(28, 35, 40, 0.90) 20%,
            rgba(28, 35, 40, 0.70) 36%,
            rgba(28, 35, 40, 0.34) 54%,
            rgba(28, 35, 40, 0.10) 72%,
            rgba(28, 35, 40, 0) 100%
        );
}

.tutoring-triage-photo__content {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-height:
        inherit;

    width:
        min(
            calc(100% - (var(--gutter) * 2)),
            var(--container-wide)
        );

    margin-inline:
        auto;
}

.tutoring-triage-photo__copy {
    max-width:
        36rem;
}

.tutoring-triage-photo .eyebrow {
    color:
        var(--paper);
}

.tutoring-triage-photo h2 {
    max-width:
        9ch;

    color:
        var(--paper);

    font-size:
        clamp(
            3rem,
            5.5vw,
            5.6rem
        );
}

.tutoring-triage-photo p {
    max-width:
        34rem;
}

.tutoring-triage-photo__note {
    display:
        inline-block;

    margin-top:
        0.75rem;

    color:
        var(--yellow);

    font-family:
        var(--font-hand);

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.5rem
        );

    font-weight:
        700;

    line-height:
        1;

    transform:
        rotate(-3deg);
}

@media (max-width: 760px) {
    .tutoring-triage-photo {
        min-height:
            42rem;
    }

    .tutoring-triage-photo::after {
        background:
            linear-gradient(
                180deg,
                rgba(28, 35, 40, 0.40) 0%,
                rgba(28, 35, 40, 0.76) 50%,
                rgba(28, 35, 40, 0.96) 100%
            );
    }

    .tutoring-triage-photo__content {
        justify-content:
            flex-end;

        padding-bottom:
            3rem;
    }

    .tutoring-triage-photo h2 {
        max-width:
            11ch;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - TUTORING INDEPENDENCE PHOTO
   ========================================================================== */

.tutoring-independence-photo {
    position: relative;
    min-height: clamp(26rem, 46vw, 38rem);
    margin-top: clamp(3rem, 6vw, 5rem);
    overflow: hidden;
    background: var(--ink);
}

.tutoring-independence-photo > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tutoring-independence-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(28, 35, 40, 0.90) 0%,
            rgba(28, 35, 40, 0.72) 23%,
            rgba(28, 35, 40, 0.34) 43%,
            rgba(28, 35, 40, 0.08) 64%,
            rgba(28, 35, 40, 0) 100%
        );
}

.tutoring-independence-photo__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    min-height: inherit;
    padding:
        clamp(2rem, 5vw, 4rem);
}

.tutoring-independence-photo__note {
    max-width: 23rem;
    margin: 0;
    color: var(--paper);
}

.tutoring-independence-photo__note .utility {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--yellow);
}

.tutoring-independence-photo__note strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.7rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.tutoring-independence-photo__scribble {
    display: block;
    margin-top: 1rem;
    color: var(--yellow);
    font-family: var(--font-hand);
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-weight: 700;
    line-height: 1;
    transform: rotate(-3deg);
}

@media (max-width: 760px) {
    .tutoring-independence-photo {
        min-height: 36rem;
    }

    .tutoring-independence-photo > img {
        object-position: 62% center;
    }

    .tutoring-independence-photo::after {
        background:
            linear-gradient(
                180deg,
                rgba(28, 35, 40, 0.08) 0%,
                rgba(28, 35, 40, 0.28) 42%,
                rgba(28, 35, 40, 0.92) 100%
            );
    }

    .tutoring-independence-photo__content {
        align-items: flex-end;
        padding: 2rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - SUBJECTS INDEX LAYOUT FIX
   ========================================================================== */

.subjects-index-section .subject-list {
    margin-top:
        clamp(2.5rem, 5vw, 4rem);
}

.subjects-index-section .subject-row {
    display:
        grid;

    grid-template-columns:
        minmax(15rem, 1fr)
        minmax(0, 1.75fr)
        minmax(10rem, 0.65fr);

    gap:
        clamp(1.5rem, 3vw, 3rem);

    align-items:
        center;

    padding:
        clamp(2rem, 4vw, 3rem)
        0;
}

.subjects-index-section .subject-row > div {
    min-width:
        0;
}

.subjects-index-section .subject-row h3 {
    max-width:
        14ch;

    margin:
        0;

    font-size:
        clamp(1.9rem, 2.7vw, 2.9rem);

    line-height:
        0.98;

    text-wrap:
        balance;
}

.subjects-index-section .subject-row > p {
    min-width:
        0;

    max-width:
        40rem;

    margin:
        0;

    line-height:
        1.6;
}

.subjects-index-section .subject-row .hand-note {
    justify-self:
        end;

    max-width:
        12rem;

    margin:
        0;

    text-align:
        right;
}

@media (max-width: 900px) {
    .subjects-index-section .subject-row {
        grid-template-columns:
            minmax(13rem, 0.85fr)
            minmax(0, 1.45fr);
    }

    .subjects-index-section .subject-row .hand-note {
        grid-column:
            1 / -1;

        justify-self:
            start;

        max-width:
            none;

        margin-left:
            clamp(1rem, 5vw, 4rem);

        text-align:
            left;
    }
}

@media (max-width: 640px) {
    .subjects-index-section .subject-row {
        grid-template-columns:
            1fr;

        gap:
            1rem;
    }

    .subjects-index-section .subject-row h3 {
        max-width:
            16ch;
    }

    .subjects-index-section .subject-row .hand-note {
        grid-column:
            auto;

        margin-left:
            1rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - SUBJECTS MULTI-SUBJECT PHOTO STYLES
   ========================================================================== */

.subjects-photo-section {
    padding-top:
        clamp(1.5rem, 3vw, 2.5rem);

    padding-bottom:
        clamp(1.5rem, 3vw, 2.5rem);
}

.subjects-photo-band {
    position:
        relative;

    min-height:
        clamp(24rem, 52vw, 38rem);

    overflow:
        hidden;

    border:
        1px solid rgba(12, 18, 28, 0.16);

    box-shadow:
        10px 10px 0 rgba(225, 197, 76, 0.4);

    background:
        #10273a;
}

.subjects-photo-band > img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    min-height:
        clamp(24rem, 52vw, 38rem);

    object-fit:
        cover;

    object-position:
        center;
}

.subjects-photo-band__overlay {
    position:
        absolute;

    inset:
        0 auto 0 0;

    width:
        min(100%, 40rem);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        1rem;

    padding:
        clamp(2rem, 4vw, 3rem);

    color:
        #f7f3e8;

    background:
        linear-gradient(
            90deg,
            rgba(12, 24, 36, 0.92) 0%,
            rgba(12, 24, 36, 0.82) 52%,
            rgba(12, 24, 36, 0.12) 100%
        );
}

.subjects-photo-band__overlay h2 {
    max-width:
        10ch;

    margin:
        0;

    color:
        #f7f3e8;

    font-size:
        clamp(2.5rem, 5vw, 4.8rem);

    line-height:
        0.96;

    text-wrap:
        balance;
}

.subjects-photo-band__overlay > p:not(.utility):not(.hand-note) {
    max-width:
        32rem;

    margin:
        0;

    font-size:
        clamp(1.05rem, 1.6vw, 1.2rem);

    line-height:
        1.7;

    color:
        rgba(247, 243, 232, 0.96);
}

.subjects-photo-band__overlay .hand-note {
    margin:
        0.5rem 0 0;

    color:
        #e24b35;
}

@media (max-width: 900px) {
    .subjects-photo-band__overlay {
        width:
            min(100%, 34rem);
    }

    .subjects-photo-band__overlay h2 {
        max-width:
            12ch;
    }
}

@media (max-width: 700px) {
    .subjects-photo-band {
        min-height:
            auto;
    }

    .subjects-photo-band > img {
        min-height:
            28rem;
    }

    .subjects-photo-band__overlay {
        position:
            absolute;

        inset:
            auto 0 0 0;

        width:
            100%;

        padding:
            1.5rem;

        background:
            linear-gradient(
                180deg,
                rgba(12, 24, 36, 0.08) 0%,
                rgba(12, 24, 36, 0.78) 35%,
                rgba(12, 24, 36, 0.92) 100%
            );
    }

    .subjects-photo-band__overlay h2 {
        max-width:
            none;
    }

    .subjects-photo-band__overlay > p:not(.utility):not(.hand-note) {
        max-width:
            none;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - SUBJECTS HERO PHOTO LAYOUT
   ========================================================================== */

.subjects-hero {
    overflow:
        hidden;
}

.subjects-hero > .container--wide {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(32rem, 1.22fr);

    gap:
        clamp(1rem, 2vw, 2rem);

    align-items:
        stretch;
}

.subjects-hero .page-hero__content {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding-top:
        clamp(4rem, 7vw, 7rem);

    padding-bottom:
        clamp(5rem, 8vw, 8rem);
}

.subjects-hero .page-hero__content h1 {
    max-width:
        8.5ch;
}

.subjects-hero__media {
    position:
        relative;

    min-height:
        clamp(38rem, 55vw, 50rem);

    overflow:
        hidden;
}

.subjects-hero__media img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        58% center;
}

.subjects-hero__media::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    top:
        0;

    bottom:
        0;

    left:
        0;

    width:
        clamp(4.5rem, 8vw, 7rem);

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            var(--cream) 0%,
            rgba(246, 241, 230, 0.84) 24%,
            rgba(246, 241, 230, 0.42) 58%,
            rgba(246, 241, 230, 0) 100%
        );
}

.subjects-hero .page-hero__scribble {
    position:
        absolute;

    z-index:
        4;

    right:
        clamp(1rem, 3vw, 3rem);

    bottom:
        clamp(1.5rem, 3vw, 2.5rem);

    max-width:
        19rem;

    margin:
        0;

    text-align:
        right;
}

@media (max-width: 980px) {
    .subjects-hero > .container--wide {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(24rem, 1.1fr);
    }

    .subjects-hero__media {
        min-height:
            40rem;
    }

    .subjects-hero .page-hero__content h1 {
        max-width:
            9ch;
    }
}

@media (max-width: 760px) {
    .subjects-hero > .container--wide {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            0;
    }

    .subjects-hero .page-hero__content {
        padding-top:
            4rem;

        padding-bottom:
            2.5rem;
    }

    .subjects-hero .page-hero__content h1 {
        max-width:
            10ch;
    }

    .subjects-hero__media {
        min-height:
            28rem;
    }

    .subjects-hero__media img {
        object-position:
            62% center;
    }

    .subjects-hero__media::before {
        top:
            0;

        right:
            0;

        bottom:
            auto;

        left:
            0;

        width:
            100%;

        height:
            5rem;

        background:
            linear-gradient(
                180deg,
                var(--cream) 0%,
                rgba(246, 241, 230, 0.72) 35%,
                rgba(246, 241, 230, 0) 100%
            );
    }

    .subjects-hero .page-hero__scribble {
        position:
            relative;

        right:
            auto;

        bottom:
            auto;

        grid-column:
            1;

        justify-self:
            end;

        margin:
            1rem 1rem 2rem;

        max-width:
            16rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - SUBJECTS HERO TYPE SCALE FIX
   ========================================================================== */

.subjects-hero .page-hero__content h1 {
    max-width:
        10ch;

    font-size:
        clamp(3.4rem, 5.2vw, 5.4rem);

    line-height:
        0.94;

    letter-spacing:
        -0.045em;
}

@media (max-width: 980px) {
    .subjects-hero .page-hero__content h1 {
        max-width:
            10ch;

        font-size:
            clamp(3.2rem, 6vw, 4.8rem);
    }
}

@media (max-width: 760px) {
    .subjects-hero .page-hero__content h1 {
        max-width:
            11ch;

        font-size:
            clamp(3rem, 12vw, 4.2rem);
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - SUBJECTS BREAKTHROUGH PHOTO
   ========================================================================== */

.subjects-breakthrough-photo {
    position:
        relative;

    min-height:
        clamp(30rem, 48vw, 40rem);

    margin:
        clamp(3rem, 6vw, 5rem)
        0;

    overflow:
        hidden;

    border:
        1px solid rgba(28, 35, 40, 0.16);

    background:
        var(--ink);
}

.subjects-breakthrough-photo > img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        42% center;
}

.subjects-breakthrough-photo::after {
    content:
        "";

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(28, 35, 40, 0.02) 0%,
            rgba(28, 35, 40, 0.08) 36%,
            rgba(28, 35, 40, 0.46) 58%,
            rgba(28, 35, 40, 0.86) 76%,
            rgba(28, 35, 40, 0.96) 100%
        );
}

.subjects-breakthrough-photo__content {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    width:
        min(40%, 30rem);

    min-height:
        inherit;

    margin-left:
        auto;

    padding:
        clamp(2rem, 4vw, 3.5rem);

    color:
        var(--paper);
}

.subjects-breakthrough-photo__content .utility {
    margin-bottom:
        1rem;

    color:
        var(--yellow);
}

.subjects-breakthrough-photo__content h3 {
    max-width:
        10ch;

    margin:
        0 0 1.25rem;

    color:
        var(--paper);

    font-size:
        clamp(2.3rem, 4vw, 4rem);

    line-height:
        0.96;

    letter-spacing:
        -0.04em;

    text-wrap:
        balance;
}

.subjects-breakthrough-photo__content > p:not(.utility):not(.hand-note) {
    max-width:
        27rem;

    margin:
        0;

    color:
        rgba(255, 253, 247, 0.94);

    font-size:
        clamp(1rem, 1.35vw, 1.15rem);

    line-height:
        1.65;
}

.subjects-breakthrough-photo__content .hand-note {
    max-width:
        24rem;

    margin:
        1.5rem 0 0;

    color:
        var(--yellow);

    font-size:
        clamp(1.6rem, 2.5vw, 2.2rem);

    transform:
        rotate(-2deg);
}

@media (max-width: 900px) {
    .subjects-breakthrough-photo__content {
        width:
            min(48%, 28rem);
    }

    .subjects-breakthrough-photo::after {
        background:
            linear-gradient(
                90deg,
                rgba(28, 35, 40, 0.02) 0%,
                rgba(28, 35, 40, 0.18) 34%,
                rgba(28, 35, 40, 0.72) 60%,
                rgba(28, 35, 40, 0.96) 100%
            );
    }
}

@media (max-width: 700px) {
    .subjects-breakthrough-photo {
        min-height:
            38rem;
    }

    .subjects-breakthrough-photo > img {
        object-position:
            38% center;
    }

    .subjects-breakthrough-photo::after {
        background:
            linear-gradient(
                180deg,
                rgba(28, 35, 40, 0.04) 0%,
                rgba(28, 35, 40, 0.18) 34%,
                rgba(28, 35, 40, 0.82) 64%,
                rgba(28, 35, 40, 0.97) 100%
            );
    }

    .subjects-breakthrough-photo__content {
        justify-content:
            flex-end;

        width:
            100%;

        min-height:
            inherit;

        margin:
            0;

        padding:
            2rem;
    }

    .subjects-breakthrough-photo__content h3 {
        max-width:
            12ch;
    }

    .subjects-breakthrough-photo__content > p:not(.utility):not(.hand-note) {
        max-width:
            34rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - TEST PREP HERO PHOTO LAYOUT
   ========================================================================== */

.test-prep-hero {
    overflow:
        hidden;
}

.test-prep-hero > .container--wide {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.80fr)
        minmax(32rem, 1.20fr);

    gap:
        clamp(1rem, 2vw, 2rem);

    align-items:
        stretch;
}

.test-prep-hero .page-hero__content {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding-top:
        clamp(4rem, 7vw, 7rem);

    padding-bottom:
        clamp(5rem, 8vw, 8rem);
}

.test-prep-hero .page-hero__content h1 {
    max-width:
        10ch;

    font-size:
        clamp(3.4rem, 5.2vw, 5.4rem);

    line-height:
        0.94;

    letter-spacing:
        -0.045em;

    text-wrap:
        balance;
}

.test-prep-hero .page-hero__content .lede {
    max-width:
        37rem;
}

.test-prep-hero__media {
    position:
        relative;

    min-height:
        clamp(38rem, 55vw, 50rem);

    overflow:
        hidden;

    background:
        var(--ink);
}

.test-prep-hero__media img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        58% center;
}

.test-prep-hero__media::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    top:
        0;

    bottom:
        0;

    left:
        0;

    width:
        clamp(4.5rem, 8vw, 7rem);

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            var(--cream) 0%,
            rgba(246, 241, 230, 0.84) 24%,
            rgba(246, 241, 230, 0.42) 58%,
            rgba(246, 241, 230, 0) 100%
        );
}

.test-prep-hero .page-hero__scribble {
    position:
        absolute;

    z-index:
        4;

    right:
        clamp(1rem, 3vw, 3rem);

    bottom:
        clamp(1.5rem, 3vw, 2.5rem);

    max-width:
        22rem;

    margin:
        0;

    text-align:
        right;
}

@media (max-width: 980px) {
    .test-prep-hero > .container--wide {
        grid-template-columns:
            minmax(0, 0.90fr)
            minmax(24rem, 1.10fr);
    }

    .test-prep-hero .page-hero__content h1 {
        max-width:
            10ch;

        font-size:
            clamp(3.2rem, 6vw, 4.8rem);
    }

    .test-prep-hero__media {
        min-height:
            40rem;
    }
}

@media (max-width: 760px) {
    .test-prep-hero > .container--wide {
        grid-template-columns:
            1fr;

        gap:
            0;
    }

    .test-prep-hero .page-hero__content {
        padding-top:
            4rem;

        padding-bottom:
            2.5rem;
    }

    .test-prep-hero .page-hero__content h1 {
        max-width:
            11ch;

        font-size:
            clamp(3rem, 12vw, 4.2rem);
    }

    .test-prep-hero__media {
        min-height:
            28rem;
    }

    .test-prep-hero__media img {
        object-position:
            62% center;
    }

    .test-prep-hero__media::before {
        top:
            0;

        right:
            0;

        bottom:
            auto;

        left:
            0;

        width:
            100%;

        height:
            5rem;

        background:
            linear-gradient(
                180deg,
                var(--cream) 0%,
                rgba(246, 241, 230, 0.72) 35%,
                rgba(246, 241, 230, 0) 100%
            );
    }

    .test-prep-hero .page-hero__scribble {
        position:
            relative;

        right:
            auto;

        bottom:
            auto;

        grid-column:
            1;

        justify-self:
            end;

        margin:
            1rem 1rem 2rem;

        max-width:
            18rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - TEST PREP HERO SCRIBBLE COLOR
   ========================================================================== */

.test-prep-hero .page-hero__scribble {
    color:
        var(--yellow);

    text-shadow:
        0 2px 2px rgba(28, 35, 40, 0.72),
        0 0 8px rgba(28, 35, 40, 0.32);
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - TEST PREP TIMED PRACTICE PHOTO
   ========================================================================== */

.test-prep-timed-photo {
    position:
        relative;

    min-height:
        clamp(30rem, 48vw, 40rem);

    margin:
        clamp(3rem, 6vw, 5rem)
        0;

    overflow:
        hidden;

    border:
        1px solid rgba(28, 35, 40, 0.16);

    background:
        var(--ink);
}

.test-prep-timed-photo > img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        40% center;
}

.test-prep-timed-photo::after {
    content:
        "";

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(28, 35, 40, 0.02) 0%,
            rgba(28, 35, 40, 0.08) 34%,
            rgba(28, 35, 40, 0.42) 56%,
            rgba(28, 35, 40, 0.84) 75%,
            rgba(28, 35, 40, 0.96) 100%
        );
}

.test-prep-timed-photo__content {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    width:
        min(42%, 30rem);

    min-height:
        inherit;

    margin-left:
        auto;

    padding:
        clamp(2rem, 4vw, 3.5rem);

    color:
        var(--paper);
}

.test-prep-timed-photo__content .utility {
    margin-bottom:
        1rem;

    color:
        var(--yellow);
}

.test-prep-timed-photo__content h3 {
    max-width:
        10ch;

    margin:
        0 0 1.25rem;

    color:
        var(--paper);

    font-size:
        clamp(2.3rem, 4vw, 4rem);

    line-height:
        0.96;

    letter-spacing:
        -0.04em;

    text-wrap:
        balance;
}

.test-prep-timed-photo__content > p:not(.utility):not(.hand-note) {
    max-width:
        27rem;

    margin:
        0;

    color:
        rgba(255, 253, 247, 0.94);

    font-size:
        clamp(1rem, 1.35vw, 1.15rem);

    line-height:
        1.65;
}

.test-prep-timed-photo__content .hand-note {
    max-width:
        23rem;

    margin:
        1.5rem 0 0;

    color:
        var(--yellow);

    font-size:
        clamp(1.6rem, 2.5vw, 2.2rem);

    transform:
        rotate(-2deg);
}

@media (max-width: 900px) {
    .test-prep-timed-photo__content {
        width:
            min(50%, 28rem);
    }

    .test-prep-timed-photo::after {
        background:
            linear-gradient(
                90deg,
                rgba(28, 35, 40, 0.02) 0%,
                rgba(28, 35, 40, 0.16) 32%,
                rgba(28, 35, 40, 0.70) 60%,
                rgba(28, 35, 40, 0.96) 100%
            );
    }
}

@media (max-width: 700px) {
    .test-prep-timed-photo {
        min-height:
            38rem;
    }

    .test-prep-timed-photo > img {
        object-position:
            38% center;
    }

    .test-prep-timed-photo::after {
        background:
            linear-gradient(
                180deg,
                rgba(28, 35, 40, 0.04) 0%,
                rgba(28, 35, 40, 0.18) 34%,
                rgba(28, 35, 40, 0.82) 64%,
                rgba(28, 35, 40, 0.97) 100%
            );
    }

    .test-prep-timed-photo__content {
        justify-content:
            flex-end;

        width:
            100%;

        min-height:
            inherit;

        margin:
            0;

        padding:
            2rem;
    }

    .test-prep-timed-photo__content h3 {
        max-width:
            12ch;
    }

    .test-prep-timed-photo__content > p:not(.utility):not(.hand-note) {
        max-width:
            34rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - TUTORING HERO PHOTO LAYOUT
   ========================================================================== */

.tutoring-hero {
    overflow:
        hidden;
}

.tutoring-hero > .container--wide {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(32rem, 1.22fr);

    gap:
        clamp(1rem, 2vw, 2rem);

    align-items:
        stretch;
}

.tutoring-hero .page-hero__content {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding-top:
        clamp(4rem, 7vw, 7rem);

    padding-bottom:
        clamp(5rem, 8vw, 8rem);
}

.tutoring-hero .page-hero__content h1 {
    max-width:
        10ch;

    font-size:
        clamp(3.4rem, 5.2vw, 5.4rem);

    line-height:
        0.94;

    letter-spacing:
        -0.045em;

    text-wrap:
        balance;
}

.tutoring-hero .page-hero__content .lede {
    max-width:
        38rem;
}

.tutoring-hero__media {
    position:
        relative;

    min-height:
        clamp(38rem, 55vw, 50rem);

    overflow:
        hidden;

    background:
        var(--ink);
}

.tutoring-hero__media img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        60% center;
}

.tutoring-hero__media::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    top:
        0;

    bottom:
        0;

    left:
        0;

    width:
        clamp(4.5rem, 8vw, 7rem);

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            var(--cream) 0%,
            rgba(246, 241, 230, 0.84) 24%,
            rgba(246, 241, 230, 0.42) 58%,
            rgba(246, 241, 230, 0) 100%
        );
}

.tutoring-hero .page-hero__scribble {
    position:
        absolute;

    z-index:
        4;

    right:
        clamp(1.5rem, 4vw, 4rem);

    bottom:
        clamp(1.5rem, 3vw, 2.75rem);

    max-width:
        20rem;

    margin:
        0;

    color:
        var(--yellow);

    text-align:
        right;

    text-shadow:
        0 2px 2px rgba(28, 35, 40, 0.72),
        0 0 8px rgba(28, 35, 40, 0.28);
}

@media (max-width: 980px) {
    .tutoring-hero > .container--wide {
        grid-template-columns:
            minmax(0, 0.90fr)
            minmax(24rem, 1.10fr);
    }

    .tutoring-hero .page-hero__content h1 {
        max-width:
            10ch;

        font-size:
            clamp(3.2rem, 6vw, 4.8rem);
    }

    .tutoring-hero__media {
        min-height:
            40rem;
    }
}

@media (max-width: 760px) {
    .tutoring-hero > .container--wide {
        grid-template-columns:
            1fr;

        gap:
            0;
    }

    .tutoring-hero .page-hero__content {
        padding-top:
            4rem;

        padding-bottom:
            2.5rem;
    }

    .tutoring-hero .page-hero__content h1 {
        max-width:
            11ch;

        font-size:
            clamp(3rem, 12vw, 4.2rem);
    }

    .tutoring-hero__media {
        min-height:
            30rem;
    }

    .tutoring-hero__media img {
        object-position:
            62% center;
    }

    .tutoring-hero__media::before {
        top:
            0;

        right:
            0;

        bottom:
            auto;

        left:
            0;

        width:
            100%;

        height:
            5rem;

        background:
            linear-gradient(
                180deg,
                var(--cream) 0%,
                rgba(246, 241, 230, 0.72) 35%,
                rgba(246, 241, 230, 0) 100%
            );
    }

    .tutoring-hero .page-hero__scribble {
        position:
            absolute;

        right:
            1.5rem;

        bottom:
            1.5rem;

        max-width:
            15rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - HOW IT WORKS HERO PHOTO LAYOUT
   ========================================================================== */

.how-it-works-hero {
    overflow:
        hidden;
}

.how-it-works-hero > .container--wide {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.80fr)
        minmax(32rem, 1.20fr);

    gap:
        clamp(1rem, 2vw, 2rem);

    align-items:
        stretch;
}

.how-it-works-hero .page-hero__content {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding-top:
        clamp(4rem, 7vw, 7rem);

    padding-bottom:
        clamp(5rem, 8vw, 8rem);
}

.how-it-works-hero .page-hero__content h1 {
    max-width:
        10.5ch;

    font-size:
        clamp(3.3rem, 5vw, 5.2rem);

    line-height:
        0.94;

    letter-spacing:
        -0.045em;

    text-wrap:
        balance;
}

.how-it-works-hero .page-hero__content .lede {
    max-width:
        38rem;
}

.how-it-works-hero__media {
    position:
        relative;

    min-height:
        clamp(38rem, 55vw, 50rem);

    overflow:
        hidden;

    background:
        var(--ink);
}

.how-it-works-hero__media img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        60% center;
}

.how-it-works-hero__media::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    top:
        0;

    bottom:
        0;

    left:
        0;

    width:
        clamp(4.5rem, 8vw, 7rem);

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            var(--cream) 0%,
            rgba(246, 241, 230, 0.84) 24%,
            rgba(246, 241, 230, 0.42) 58%,
            rgba(246, 241, 230, 0) 100%
        );
}

.how-it-works-hero .page-hero__scribble {
    position:
        absolute;

    z-index:
        4;

    right:
        clamp(1.5rem, 4vw, 4rem);

    bottom:
        clamp(1.5rem, 3vw, 2.75rem);

    max-width:
        22rem;

    margin:
        0;

    color:
        var(--yellow);

    text-align:
        right;

    text-shadow:
        0 2px 2px rgba(28, 35, 40, 0.72),
        0 0 8px rgba(28, 35, 40, 0.28);
}

@media (max-width: 980px) {
    .how-it-works-hero > .container--wide {
        grid-template-columns:
            minmax(0, 0.90fr)
            minmax(24rem, 1.10fr);
    }

    .how-it-works-hero .page-hero__content h1 {
        max-width:
            10.5ch;

        font-size:
            clamp(3.1rem, 6vw, 4.7rem);
    }

    .how-it-works-hero__media {
        min-height:
            40rem;
    }
}

@media (max-width: 760px) {
    .how-it-works-hero > .container--wide {
        grid-template-columns:
            1fr;

        gap:
            0;
    }

    .how-it-works-hero .page-hero__content {
        padding-top:
            4rem;

        padding-bottom:
            2.5rem;
    }

    .how-it-works-hero .page-hero__content h1 {
        max-width:
            11ch;

        font-size:
            clamp(3rem, 12vw, 4.2rem);
    }

    .how-it-works-hero__media {
        min-height:
            30rem;
    }

    .how-it-works-hero__media img {
        object-position:
            62% center;
    }

    .how-it-works-hero__media::before {
        top:
            0;

        right:
            0;

        bottom:
            auto;

        left:
            0;

        width:
            100%;

        height:
            5rem;

        background:
            linear-gradient(
                180deg,
                var(--cream) 0%,
                rgba(246, 241, 230, 0.72) 35%,
                rgba(246, 241, 230, 0) 100%
            );
    }

    .how-it-works-hero .page-hero__scribble {
        right:
            1.5rem;

        bottom:
            1.5rem;

        max-width:
            17rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - HOW IT WORKS BETWEEN SESSIONS PHOTO
   ========================================================================== */

.how-it-works-between-photo {
    position:
        relative;

    min-height:
        clamp(30rem, 48vw, 40rem);

    margin:
        clamp(3rem, 6vw, 5rem)
        0;

    overflow:
        hidden;

    border:
        1px solid rgba(28, 35, 40, 0.16);

    background:
        var(--ink);
}

.how-it-works-between-photo > img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        62% center;
}

.how-it-works-between-photo::after {
    content:
        "";

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(28, 35, 40, 0.96) 0%,
            rgba(28, 35, 40, 0.88) 22%,
            rgba(28, 35, 40, 0.56) 42%,
            rgba(28, 35, 40, 0.18) 62%,
            rgba(28, 35, 40, 0.02) 100%
        );
}

.how-it-works-between-photo__content {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    width:
        min(42%, 31rem);

    min-height:
        inherit;

    padding:
        clamp(2rem, 4vw, 3.5rem);

    color:
        var(--paper);
}

.how-it-works-between-photo__content .utility {
    margin-bottom:
        1rem;

    color:
        var(--yellow);
}

.how-it-works-between-photo__content h3 {
    max-width:
        10ch;

    margin:
        0 0 1.25rem;

    color:
        var(--paper);

    font-size:
        clamp(2.3rem, 4vw, 4rem);

    line-height:
        0.96;

    letter-spacing:
        -0.04em;

    text-wrap:
        balance;
}

.how-it-works-between-photo__content > p:not(.utility):not(.hand-note) {
    max-width:
        27rem;

    margin:
        0;

    color:
        rgba(255, 253, 247, 0.94);

    font-size:
        clamp(1rem, 1.35vw, 1.15rem);

    line-height:
        1.65;
}

.how-it-works-between-photo__content .hand-note {
    max-width:
        24rem;

    margin:
        1.5rem 0 0;

    color:
        var(--yellow);

    font-size:
        clamp(1.6rem, 2.5vw, 2.2rem);

    transform:
        rotate(-2deg);
}

@media (max-width: 900px) {
    .how-it-works-between-photo__content {
        width:
            min(50%, 29rem);
    }

    .how-it-works-between-photo::after {
        background:
            linear-gradient(
                90deg,
                rgba(28, 35, 40, 0.96) 0%,
                rgba(28, 35, 40, 0.82) 26%,
                rgba(28, 35, 40, 0.48) 48%,
                rgba(28, 35, 40, 0.10) 72%,
                rgba(28, 35, 40, 0) 100%
            );
    }
}

@media (max-width: 700px) {
    .how-it-works-between-photo {
        min-height:
            38rem;
    }

    .how-it-works-between-photo > img {
        object-position:
            60% center;
    }

    .how-it-works-between-photo::after {
        background:
            linear-gradient(
                180deg,
                rgba(28, 35, 40, 0.04) 0%,
                rgba(28, 35, 40, 0.18) 34%,
                rgba(28, 35, 40, 0.82) 64%,
                rgba(28, 35, 40, 0.97) 100%
            );
    }

    .how-it-works-between-photo__content {
        justify-content:
            flex-end;

        width:
            100%;

        min-height:
            inherit;

        padding:
            2rem;
    }

    .how-it-works-between-photo__content h3 {
        max-width:
            12ch;
    }

    .how-it-works-between-photo__content > p:not(.utility):not(.hand-note) {
        max-width:
            34rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - ABOUT HERO PHOTO LAYOUT
   ========================================================================== */

.about-hero {
    overflow:
        hidden;
}

.about-hero > .container--wide {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.80fr)
        minmax(32rem, 1.20fr);

    gap:
        clamp(1rem, 2vw, 2rem);

    align-items:
        stretch;
}

.about-hero .page-hero__content {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding-top:
        clamp(4rem, 7vw, 7rem);

    padding-bottom:
        clamp(5rem, 8vw, 8rem);
}

.about-hero .page-hero__content h1 {
    max-width:
        10.5ch;

    font-size:
        clamp(3.2rem, 4.8vw, 5rem);

    line-height:
        0.94;

    letter-spacing:
        -0.045em;

    text-wrap:
        balance;
}

.about-hero .page-hero__content .lede {
    max-width:
        37rem;
}

.about-hero__media {
    position:
        relative;

    min-height:
        clamp(38rem, 55vw, 50rem);

    overflow:
        hidden;

    background:
        var(--ink);
}

.about-hero__media img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        60% center;
}

.about-hero__media::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    top:
        0;

    bottom:
        0;

    left:
        0;

    width:
        clamp(4.5rem, 8vw, 7rem);

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            var(--cream) 0%,
            rgba(246, 241, 230, 0.84) 24%,
            rgba(246, 241, 230, 0.42) 58%,
            rgba(246, 241, 230, 0) 100%
        );
}

.about-hero .page-hero__scribble {
    position:
        absolute;

    z-index:
        4;

    right:
        clamp(1.5rem, 4vw, 4rem);

    bottom:
        clamp(1.5rem, 3vw, 2.75rem);

    max-width:
        20rem;

    margin:
        0;

    color:
        var(--yellow);

    text-align:
        right;

    text-shadow:
        0 2px 2px rgba(28, 35, 40, 0.72),
        0 0 8px rgba(28, 35, 40, 0.28);
}

@media (max-width: 980px) {
    .about-hero > .container--wide {
        grid-template-columns:
            minmax(0, 0.90fr)
            minmax(24rem, 1.10fr);
    }

    .about-hero .page-hero__content h1 {
        max-width:
            10.5ch;

        font-size:
            clamp(3rem, 5.8vw, 4.6rem);
    }

    .about-hero__media {
        min-height:
            40rem;
    }
}

@media (max-width: 760px) {
    .about-hero > .container--wide {
        grid-template-columns:
            1fr;

        gap:
            0;
    }

    .about-hero .page-hero__content {
        padding-top:
            4rem;

        padding-bottom:
            2.5rem;
    }

    .about-hero .page-hero__content h1 {
        max-width:
            11ch;

        font-size:
            clamp(2.9rem, 11.5vw, 4.1rem);
    }

    .about-hero__media {
        min-height:
            30rem;
    }

    .about-hero__media img {
        object-position:
            62% center;
    }

    .about-hero__media::before {
        top:
            0;

        right:
            0;

        bottom:
            auto;

        left:
            0;

        width:
            100%;

        height:
            5rem;

        background:
            linear-gradient(
                180deg,
                var(--cream) 0%,
                rgba(246, 241, 230, 0.72) 35%,
                rgba(246, 241, 230, 0) 100%
            );
    }

    .about-hero .page-hero__scribble {
        right:
            1.5rem;

        bottom:
            1.5rem;

        max-width:
            16rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - ABOUT INDEPENDENT TUTORING PHOTO
   ========================================================================== */

.about-independent-photo {
    position:
        relative;

    min-height:
        clamp(30rem, 48vw, 40rem);

    margin-top:
        clamp(3rem, 6vw, 5rem);

    overflow:
        hidden;

    border:
        1px solid rgba(28, 35, 40, 0.16);

    background:
        var(--ink);
}

.about-independent-photo > img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        40% center;
}

.about-independent-photo::after {
    content:
        "";

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(28, 35, 40, 0.02) 0%,
            rgba(28, 35, 40, 0.08) 34%,
            rgba(28, 35, 40, 0.42) 56%,
            rgba(28, 35, 40, 0.84) 75%,
            rgba(28, 35, 40, 0.96) 100%
        );
}

.about-independent-photo__content {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    width:
        min(42%, 31rem);

    min-height:
        inherit;

    margin-left:
        auto;

    padding:
        clamp(2rem, 4vw, 3.5rem);

    color:
        var(--paper);
}

.about-independent-photo__content .utility {
    margin-bottom:
        1rem;

    color:
        var(--yellow);
}

.about-independent-photo__content h3 {
    max-width:
        11ch;

    margin:
        0 0 1.25rem;

    color:
        var(--paper);

    font-size:
        clamp(2.25rem, 3.8vw, 3.8rem);

    line-height:
        0.96;

    letter-spacing:
        -0.04em;

    text-wrap:
        balance;
}

.about-independent-photo__content > p:not(.utility):not(.hand-note) {
    max-width:
        28rem;

    margin:
        0;

    color:
        rgba(255, 253, 247, 0.94);

    font-size:
        clamp(1rem, 1.35vw, 1.15rem);

    line-height:
        1.65;
}

.about-independent-photo__content .hand-note {
    max-width:
        22rem;

    margin:
        1.5rem 0 0;

    color:
        var(--yellow);

    font-size:
        clamp(1.6rem, 2.5vw, 2.2rem);

    transform:
        rotate(-2deg);
}

@media (max-width: 900px) {
    .about-independent-photo__content {
        width:
            min(50%, 29rem);
    }

    .about-independent-photo::after {
        background:
            linear-gradient(
                90deg,
                rgba(28, 35, 40, 0.02) 0%,
                rgba(28, 35, 40, 0.16) 32%,
                rgba(28, 35, 40, 0.70) 60%,
                rgba(28, 35, 40, 0.96) 100%
            );
    }
}

@media (max-width: 700px) {
    .about-independent-photo {
        min-height:
            38rem;
    }

    .about-independent-photo > img {
        object-position:
            38% center;
    }

    .about-independent-photo::after {
        background:
            linear-gradient(
                180deg,
                rgba(28, 35, 40, 0.04) 0%,
                rgba(28, 35, 40, 0.18) 34%,
                rgba(28, 35, 40, 0.82) 64%,
                rgba(28, 35, 40, 0.97) 100%
            );
    }

    .about-independent-photo__content {
        justify-content:
            flex-end;

        width:
            100%;

        min-height:
            inherit;

        margin:
            0;

        padding:
            2rem;
    }

    .about-independent-photo__content h3 {
        max-width:
            12ch;
    }

    .about-independent-photo__content > p:not(.utility):not(.hand-note) {
        max-width:
            34rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - RESOURCES HERO PHOTO LAYOUT
   ========================================================================== */

.resources-hero {
    overflow:
        hidden;
}

.resources-hero > .container--wide {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.80fr)
        minmax(32rem, 1.20fr);

    gap:
        clamp(1rem, 2vw, 2rem);

    align-items:
        stretch;
}

.resources-hero .page-hero__content {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding-top:
        clamp(4rem, 7vw, 7rem);

    padding-bottom:
        clamp(5rem, 8vw, 8rem);
}

.resources-hero .page-hero__content h1 {
    max-width:
        10.5ch;

    font-size:
        clamp(3.2rem, 4.8vw, 5rem);

    line-height:
        0.94;

    letter-spacing:
        -0.045em;

    text-wrap:
        balance;
}

.resources-hero .page-hero__content .lede {
    max-width:
        38rem;
}

.resources-hero__media {
    position:
        relative;

    min-height:
        clamp(38rem, 55vw, 50rem);

    overflow:
        hidden;

    background:
        var(--ink);
}

.resources-hero__media img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        60% center;
}

.resources-hero__media::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    top:
        0;

    bottom:
        0;

    left:
        0;

    width:
        clamp(4.5rem, 8vw, 7rem);

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            var(--cream) 0%,
            rgba(246, 241, 230, 0.84) 24%,
            rgba(246, 241, 230, 0.42) 58%,
            rgba(246, 241, 230, 0) 100%
        );
}

.resources-hero .page-hero__scribble {
    position:
        absolute;

    z-index:
        4;

    right:
        clamp(1.5rem, 4vw, 4rem);

    bottom:
        clamp(1.5rem, 3vw, 2.75rem);

    max-width:
        21rem;

    margin:
        0;

    color:
        var(--yellow);

    text-align:
        right;

    text-shadow:
        0 2px 2px rgba(28, 35, 40, 0.72),
        0 0 8px rgba(28, 35, 40, 0.28);
}

@media (max-width: 980px) {
    .resources-hero > .container--wide {
        grid-template-columns:
            minmax(0, 0.90fr)
            minmax(24rem, 1.10fr);
    }

    .resources-hero .page-hero__content h1 {
        max-width:
            10.5ch;

        font-size:
            clamp(3rem, 5.8vw, 4.6rem);
    }

    .resources-hero__media {
        min-height:
            40rem;
    }
}

@media (max-width: 760px) {
    .resources-hero > .container--wide {
        grid-template-columns:
            1fr;

        gap:
            0;
    }

    .resources-hero .page-hero__content {
        padding-top:
            4rem;

        padding-bottom:
            2.5rem;
    }

    .resources-hero .page-hero__content h1 {
        max-width:
            11ch;

        font-size:
            clamp(2.9rem, 11.5vw, 4.1rem);
    }

    .resources-hero__media {
        min-height:
            30rem;
    }

    .resources-hero__media img {
        object-position:
            62% center;
    }

    .resources-hero__media::before {
        top:
            0;

        right:
            0;

        bottom:
            auto;

        left:
            0;

        width:
            100%;

        height:
            5rem;

        background:
            linear-gradient(
                180deg,
                var(--cream) 0%,
                rgba(246, 241, 230, 0.72) 35%,
                rgba(246, 241, 230, 0) 100%
            );
    }

    .resources-hero .page-hero__scribble {
        right:
            1.5rem;

        bottom:
            1.5rem;

        max-width:
            17rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - RESOURCES TOOLKIT PHOTO
   ========================================================================== */

.resources-toolkit-photo {
    position:
        relative;

    min-height:
        clamp(29rem, 46vw, 39rem);

    margin:
        clamp(3rem, 6vw, 5rem)
        0
        clamp(3.5rem, 6vw, 5.5rem);

    overflow:
        hidden;

    border:
        1px solid rgba(28, 35, 40, 0.16);

    background:
        var(--ink);
}

.resources-toolkit-photo > img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        40% center;
}

.resources-toolkit-photo::after {
    content:
        "";

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(28, 35, 40, 0.02) 0%,
            rgba(28, 35, 40, 0.07) 31%,
            rgba(28, 35, 40, 0.34) 51%,
            rgba(28, 35, 40, 0.82) 72%,
            rgba(28, 35, 40, 0.97) 100%
        );
}

.resources-toolkit-photo__content {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    width:
        min(43%, 31rem);

    min-height:
        inherit;

    margin-left:
        auto;

    padding:
        clamp(2rem, 4vw, 3.5rem);

    color:
        var(--paper);
}

.resources-toolkit-photo__content .utility {
    margin:
        0 0 1rem;

    color:
        var(--yellow);
}

.resources-toolkit-photo__content h3 {
    max-width:
        10ch;

    margin:
        0 0 1.25rem;

    color:
        var(--paper);

    font-size:
        clamp(2.25rem, 3.8vw, 3.8rem);

    line-height:
        0.96;

    letter-spacing:
        -0.04em;

    text-wrap:
        balance;
}

.resources-toolkit-photo__content > p:not(.utility):not(.hand-note) {
    max-width:
        27rem;

    margin:
        0;

    color:
        rgba(255, 253, 247, 0.94);

    font-size:
        clamp(1rem, 1.35vw, 1.15rem);

    line-height:
        1.65;
}

.resources-toolkit-photo__content .hand-note {
    max-width:
        22rem;

    margin:
        1.5rem 0 0;

    color:
        var(--yellow);

    font-size:
        clamp(1.6rem, 2.5vw, 2.2rem);

    transform:
        rotate(-2deg);
}

@media (max-width: 900px) {
    .resources-toolkit-photo__content {
        width:
            min(51%, 29rem);
    }

    .resources-toolkit-photo::after {
        background:
            linear-gradient(
                90deg,
                rgba(28, 35, 40, 0.03) 0%,
                rgba(28, 35, 40, 0.14) 30%,
                rgba(28, 35, 40, 0.64) 58%,
                rgba(28, 35, 40, 0.96) 100%
            );
    }
}

@media (max-width: 700px) {
    .resources-toolkit-photo {
        min-height:
            38rem;
    }

    .resources-toolkit-photo > img {
        object-position:
            42% center;
    }

    .resources-toolkit-photo::after {
        background:
            linear-gradient(
                180deg,
                rgba(28, 35, 40, 0.03) 0%,
                rgba(28, 35, 40, 0.14) 32%,
                rgba(28, 35, 40, 0.82) 64%,
                rgba(28, 35, 40, 0.98) 100%
            );
    }

    .resources-toolkit-photo__content {
        justify-content:
            flex-end;

        width:
            100%;

        min-height:
            inherit;

        margin:
            0;

        padding:
            2rem;
    }

    .resources-toolkit-photo__content h3 {
        max-width:
            12ch;
    }

    .resources-toolkit-photo__content > p:not(.utility):not(.hand-note) {
        max-width:
            34rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - PRICING HERO PHOTO LAYOUT
   ========================================================================== */

.pricing-hero {
    position:
        relative;

    padding:
        0;

    overflow:
        hidden;

    background:
        var(--cream);
}

.pricing-hero > .container--wide {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    align-items:
        stretch;

    min-height:
        clamp(38rem, 52vw, 49rem);
}

.pricing-hero .page-hero__content {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    max-width:
        38rem;

    padding:
        clamp(5rem, 8vw, 8rem)
        clamp(2rem, 4vw, 4.5rem)
        clamp(5rem, 8vw, 8rem)
        0;
}

.pricing-hero .page-hero__content h1 {
    max-width:
        10ch;

    font-size:
        clamp(3.2rem, 5vw, 5rem);

    line-height:
        0.95;

    letter-spacing:
        -0.045em;
}

.pricing-hero .page-hero__content .lede {
    max-width:
        31rem;
}

.pricing-hero__media {
    position:
        relative;

    z-index:
        1;

    min-height:
        inherit;

    margin-right:
        calc(50% - 50vw);
}

.pricing-hero__media img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        58% center;
}

.pricing-hero__media::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            var(--cream) 0%,
            rgba(246, 241, 230, 0.96) 7%,
            rgba(246, 241, 230, 0.72) 17%,
            rgba(246, 241, 230, 0.30) 29%,
            rgba(246, 241, 230, 0.08) 40%,
            rgba(246, 241, 230, 0) 52%
        );
}

.pricing-hero .page-hero__scribble {
    position:
        absolute;

    z-index:
        4;

    right:
        clamp(2rem, 6vw, 7rem);

    bottom:
        clamp(2rem, 5vw, 4.5rem);

    width:
        min(17rem, 26vw);

    margin:
        0;

    color:
        var(--yellow);

    font-size:
        clamp(1.8rem, 2.8vw, 2.65rem);

    line-height:
        0.95;

    text-align:
        center;

    text-shadow:
        0 2px 12px rgba(28, 35, 40, 0.70);

    transform:
        rotate(-4deg);
}

@media (max-width: 980px) {
    .pricing-hero > .container--wide {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        min-height:
            40rem;
    }

    .pricing-hero .page-hero__content {
        padding-right:
            2rem;
    }

    .pricing-hero .page-hero__content h1 {
        font-size:
            clamp(3rem, 6vw, 4.4rem);
    }

    .pricing-hero__media img {
        object-position:
            62% center;
    }

    .pricing-hero .page-hero__scribble {
        right:
            2rem;

        width:
            14rem;
    }
}

@media (max-width: 760px) {
    .pricing-hero > .container--wide {
        display:
            flex;

        flex-direction:
            column;

        min-height:
            auto;
    }

    .pricing-hero .page-hero__content {
        width:
            100%;

        max-width:
            none;

        padding:
            4.5rem 0 3rem;
    }

    .pricing-hero .page-hero__content h1 {
        max-width:
            9ch;

        font-size:
            clamp(3rem, 11vw, 4.35rem);
    }

    .pricing-hero__media {
        min-height:
            clamp(24rem, 78vw, 34rem);

        margin:
            0 calc(50% - 50vw);
    }

    .pricing-hero__media::before {
        background:
            linear-gradient(
                180deg,
                var(--cream) 0%,
                rgba(246, 241, 230, 0.56) 12%,
                rgba(246, 241, 230, 0.12) 26%,
                rgba(246, 241, 230, 0) 42%
            );
    }

    .pricing-hero__media img {
        object-position:
            center;
    }

    .pricing-hero .page-hero__scribble {
        right:
            1.5rem;

        bottom:
            1.75rem;

        width:
            13rem;

        font-size:
            clamp(1.7rem, 7vw, 2.25rem);
    }
}

@media (max-width: 560px) {
    .pricing-hero .page-hero__content {
        padding-top:
            3.75rem;
    }

    .pricing-hero__media {
        min-height:
            26rem;
    }

    .pricing-hero .page-hero__scribble {
        right:
            1rem;

        bottom:
            1.25rem;

        width:
            11rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - PRICING HERO EYEBROW FIX
   ========================================================================== */

@media (min-width: 761px) {
    .pricing-hero .page-hero__content .eyebrow {
        max-width:
            none;

        font-size:
            0.78rem;

        white-space:
            nowrap;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - CONTACT FORM LAYOUT
   ========================================================================== */

.contact-form {
    display:
        grid;

    gap:
        1.35rem;

    padding:
        clamp(1.5rem, 3vw, 2.5rem);

    border:
        1px solid rgba(28, 35, 40, 0.18);

    background:
        rgba(255, 253, 247, 0.94);

    box-shadow:
        0.75rem 0.75rem 0 rgba(28, 35, 40, 0.08);
}

.contact-form__field {
    display:
        grid;

    gap:
        0.5rem;
}

.contact-form__field label {
    display:
        flex;

    align-items:
        baseline;

    justify-content:
        space-between;

    gap:
        1rem;

    color:
        var(--ink);

    font-family:
        "DM Mono", monospace;

    font-size:
        0.78rem;

    font-weight:
        500;

    line-height:
        1.4;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}

.contact-form__field label span {
    color:
        rgba(28, 35, 40, 0.58);

    font-size:
        0.7rem;
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
    width:
        100%;

    min-width:
        0;

    border:
        2px solid var(--ink);

    border-radius:
        0;

    background:
        var(--paper);

    color:
        var(--ink);

    font:
        inherit;

    line-height:
        1.45;

    box-shadow:
        none;
}

.contact-form__field input,
.contact-form__field select {
    min-height:
        3.25rem;

    padding:
        0.75rem 0.9rem;
}

.contact-form__field textarea {
    min-height:
        11rem;

    padding:
        0.9rem;

    resize:
        vertical;
}

.contact-form__field textarea::placeholder {
    color:
        rgba(28, 35, 40, 0.52);

    opacity:
        1;
}

.contact-form__field input:hover,
.contact-form__field select:hover,
.contact-form__field textarea:hover {
    border-color:
        var(--red);
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
    outline:
        3px solid rgba(231, 199, 79, 0.72);

    outline-offset:
        3px;

    border-color:
        var(--ink);
}

.contact-form__consent {
    display:
        grid;

    grid-template-columns:
        auto minmax(0, 1fr);

    align-items:
        start;

    gap:
        0.8rem;

    padding:
        1rem 0 0;

    border-top:
        1px solid rgba(28, 35, 40, 0.18);
}

.contact-form__consent input {
    width:
        1.2rem;

    height:
        1.2rem;

    margin:
        0.15rem 0 0;

    accent-color:
        var(--red);
}

.contact-form__consent label {
    margin:
        0;

    font-size:
        0.92rem;

    line-height:
        1.55;
}

.contact-form > .button {
    justify-self:
        start;

    margin-top:
        0.25rem;
}

.contact-form__note {
    max-width:
        34rem;

    margin:
        -0.25rem 0 0;

    color:
        rgba(28, 35, 40, 0.68);

    font-family:
        "DM Mono", monospace;

    font-size:
        0.72rem;

    line-height:
        1.55;

    text-transform:
        uppercase;
}

.contact-form .button:focus-visible {
    outline:
        3px solid var(--yellow);

    outline-offset:
        4px;
}


/* Contact details: prevent long demo values from escaping paper cards */

.contact-form + *,
.resource-sheet h3 {
    min-width:
        0;
}

.resource-sheet h3 {
    overflow-wrap:
        anywhere;

    word-break:
        normal;
}

@media (min-width: 761px) {
    .resource-sheet h3 {
        font-size:
            clamp(1.7rem, 2.7vw, 2.5rem);
    }
}

@media (max-width: 760px) {
    .contact-form {
        padding:
            1.25rem;

        box-shadow:
            0.45rem 0.45rem 0 rgba(28, 35, 40, 0.08);
    }

    .contact-form__field label {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0.2rem;
    }

    .contact-form > .button {
        width:
            100%;

        justify-content:
            center;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - CONTACT NOTEBOOK MARGIN FIX
   ========================================================================== */

#contact-form .grid > :first-child > .eyebrow,
#contact-form .grid > :first-child > h2,
#contact-form .grid > :first-child > .lede {
    margin-left:
        clamp(3.25rem, 5vw, 4.75rem);
}

@media (max-width: 760px) {
    #contact-form .grid > :first-child > .eyebrow,
    #contact-form .grid > :first-child > h2,
    #contact-form .grid > :first-child > .lede {
        margin-left:
            2.75rem;
    }
}

@media (max-width: 560px) {
    #contact-form .grid > :first-child > .eyebrow,
    #contact-form .grid > :first-child > h2,
    #contact-form .grid > :first-child > .lede {
        margin-left:
            2.25rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - CONTACT HERO PHOTO LAYOUT
   ========================================================================== */

.contact-hero {
    position:
        relative;

    padding:
        0;

    overflow:
        hidden;

    background:
        var(--cream);
}

.contact-hero > .container--wide {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    align-items:
        stretch;

    min-height:
        clamp(39rem, 53vw, 50rem);
}

.contact-hero .page-hero__content {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    max-width:
        39rem;

    padding:
        clamp(5rem, 8vw, 8rem)
        clamp(2rem, 4vw, 4.5rem)
        clamp(5rem, 8vw, 8rem)
        0;
}

.contact-hero .page-hero__content h1 {
    max-width:
        8.5ch;

    font-size:
        clamp(3.2rem, 5vw, 5rem);

    line-height:
        0.95;

    letter-spacing:
        -0.045em;
}

.contact-hero .page-hero__content .lede {
    max-width:
        33rem;
}

.contact-hero__media {
    position:
        relative;

    z-index:
        1;

    min-height:
        inherit;

    margin-right:
        calc(50% - 50vw);
}

.contact-hero__media img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        62% center;
}

.contact-hero__media::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            var(--cream) 0%,
            rgba(246, 241, 230, 0.97) 7%,
            rgba(246, 241, 230, 0.76) 18%,
            rgba(246, 241, 230, 0.36) 30%,
            rgba(246, 241, 230, 0.10) 41%,
            rgba(246, 241, 230, 0) 53%
        );
}

.contact-hero .page-hero__scribble {
    position:
        absolute;

    z-index:
        4;

    right:
        clamp(2rem, 6vw, 7rem);

    bottom:
        clamp(2rem, 5vw, 4.5rem);

    width:
        min(18rem, 28vw);

    margin:
        0;

    color:
        var(--yellow);

    font-size:
        clamp(1.8rem, 2.8vw, 2.65rem);

    line-height:
        0.96;

    text-align:
        center;

    text-shadow:
        0 2px 12px rgba(28, 35, 40, 0.72);

    transform:
        rotate(-4deg);
}

@media (max-width: 980px) {
    .contact-hero > .container--wide {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        min-height:
            40rem;
    }

    .contact-hero .page-hero__content {
        padding-right:
            2rem;
    }

    .contact-hero .page-hero__content h1 {
        font-size:
            clamp(3rem, 6vw, 4.4rem);
    }

    .contact-hero__media img {
        object-position:
            65% center;
    }

    .contact-hero .page-hero__scribble {
        right:
            2rem;

        width:
            14rem;
    }
}

@media (max-width: 760px) {
    .contact-hero > .container--wide {
        display:
            flex;

        flex-direction:
            column;

        min-height:
            auto;
    }

    .contact-hero .page-hero__content {
        width:
            100%;

        max-width:
            none;

        padding:
            4.5rem 0 3rem;
    }

    .contact-hero .page-hero__content h1 {
        max-width:
            8ch;

        font-size:
            clamp(3rem, 11vw, 4.35rem);
    }

    .contact-hero__media {
        min-height:
            clamp(25rem, 80vw, 35rem);

        margin:
            0 calc(50% - 50vw);
    }

    .contact-hero__media::before {
        background:
            linear-gradient(
                180deg,
                var(--cream) 0%,
                rgba(246, 241, 230, 0.58) 12%,
                rgba(246, 241, 230, 0.14) 27%,
                rgba(246, 241, 230, 0) 43%
            );
    }

    .contact-hero__media img {
        object-position:
            center;
    }

    .contact-hero .page-hero__scribble {
        right:
            1.5rem;

        bottom:
            1.75rem;

        width:
            13rem;

        font-size:
            clamp(1.7rem, 7vw, 2.25rem);
    }
}

@media (max-width: 560px) {
    .contact-hero .page-hero__content {
        padding-top:
            3.75rem;
    }

    .contact-hero__media {
        min-height:
            27rem;
    }

    .contact-hero .page-hero__scribble {
        right:
            1rem;

        bottom:
            1.25rem;

        width:
            11.5rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - CONTACT HERO PHOTO REVEAL TUNING
   ========================================================================== */

@media (min-width: 761px) {
    .contact-hero > .container--wide {
        grid-template-columns:
            minmax(0, 0.74fr)
            minmax(0, 1.26fr);
    }

    .contact-hero__media::before {
        background:
            linear-gradient(
                90deg,
                var(--cream) 0%,
                rgba(246, 241, 230, 0.88) 5%,
                rgba(246, 241, 230, 0.52) 12%,
                rgba(246, 241, 230, 0.20) 21%,
                rgba(246, 241, 230, 0.06) 28%,
                rgba(246, 241, 230, 0) 36%
            );
    }

    .contact-hero__media img {
        object-position:
            58% center;
    }
}

@media (min-width: 981px) {
    .contact-hero .page-hero__content {
        max-width:
            36rem;

        padding-right:
            2.25rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - CONTACT HERO PHOTO LEFT SHIFT
   ========================================================================== */

@media (min-width: 761px) {
    .contact-hero > .container--wide {
        grid-template-columns:
            minmax(0, 0.70fr)
            minmax(0, 1.30fr);
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - PRIVACY HERO FILE LAYOUT
   ========================================================================== */

.privacy-hero {
    position:
        relative;

    padding:
        0;

    overflow:
        hidden;

    background:
        var(--cream);
}

.privacy-hero > .container--wide {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    align-items:
        center;

    gap:
        clamp(3rem, 6vw, 6rem);

    min-height:
        clamp(39rem, 52vw, 47rem);
}

.privacy-hero .page-hero__content {
    position:
        relative;

    z-index:
        2;

    max-width:
        36rem;

    padding:
        clamp(5rem, 8vw, 7rem)
        0;
}

.privacy-hero .page-hero__content h1 {
    max-width:
        9ch;

    font-size:
        clamp(3.25rem, 5vw, 5rem);

    line-height:
        0.95;

    letter-spacing:
        -0.045em;
}

.privacy-hero .page-hero__content .lede {
    max-width:
        32rem;
}


/* --------------------------------------------------------------------------
   Privacy file
   -------------------------------------------------------------------------- */

.privacy-hero__file {
    position:
        relative;

    z-index:
        2;

    width:
        min(100%, 38rem);

    justify-self:
        end;

    padding:
        clamp(2.25rem, 4vw, 3.25rem);

    border:
        1px solid rgba(28, 35, 40, 0.18);

    background-color:
        var(--paper);

    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 2.15rem,
            rgba(23, 61, 88, 0.09) 2.18rem,
            rgba(23, 61, 88, 0.09) 2.22rem
        );

    box-shadow:
        0.85rem 0.85rem 0 rgba(28, 35, 40, 0.10);

    transform:
        rotate(0.7deg);
}

.privacy-hero__file::before {
    content:
        "";

    position:
        absolute;

    top:
        -0.75rem;

    left:
        50%;

    width:
        7.5rem;

    height:
        1.65rem;

    background:
        rgba(231, 199, 79, 0.72);

    transform:
        translateX(-50%)
        rotate(-1deg);
}

.privacy-hero__file .utility {
    margin:
        0 0 1rem;

    color:
        var(--navy);
}

.privacy-hero__file h2 {
    max-width:
        9ch;

    margin:
        0 0 1.5rem;

    font-size:
        clamp(2.5rem, 4vw, 3.7rem);

    line-height:
        0.96;

    letter-spacing:
        -0.04em;

    text-wrap:
        balance;
}

.privacy-hero__file-list {
    border-top:
        2px solid var(--ink);
}

.privacy-hero__file-row {
    display:
        grid;

    grid-template-columns:
        5.5rem
        minmax(0, 1fr);

    align-items:
        center;

    gap:
        1rem;

    min-height:
        4.25rem;

    padding:
        0.85rem 0;

    border-bottom:
        1px solid rgba(28, 35, 40, 0.22);

    background:
        rgba(255, 253, 247, 0.72);

    font-size:
        clamp(0.96rem, 1.3vw, 1.08rem);

    line-height:
        1.4;
}

.privacy-hero__file-status {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        4.8rem;

    min-height:
        2rem;

    padding:
        0.3rem 0.55rem;

    border:
        1px solid var(--ink);

    background:
        var(--lime);

    color:
        var(--ink);

    font-family:
        "DM Mono", monospace;

    font-size:
        0.72rem;

    font-weight:
        500;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;

    transform:
        rotate(-1deg);
}

.privacy-hero__file-status--maybe {
    background:
        var(--yellow);

    transform:
        rotate(1deg);
}

.privacy-hero__file-status--no {
    background:
        var(--red);

    color:
        var(--paper);

    transform:
        rotate(-2deg);
}

.privacy-hero__file-note {
    max-width:
        21rem;

    margin:
        1.6rem 0 0 auto;

    color:
        var(--red);

    font-family:
        "Caveat", cursive;

    font-size:
        clamp(1.45rem, 2.3vw, 1.95rem);

    font-weight:
        700;

    line-height:
        1;

    text-align:
        right;

    transform:
        rotate(-2deg);
}


/* --------------------------------------------------------------------------
   Existing handwritten hero note
   -------------------------------------------------------------------------- */

.privacy-hero .page-hero__scribble {
    position:
        absolute;

    z-index:
        4;

    right:
        clamp(1rem, 4vw, 4rem);

    bottom:
        clamp(1.5rem, 3vw, 2.75rem);

    width:
        min(18rem, 25vw);

    margin:
        0;

    color:
        var(--red);

    font-size:
        clamp(1.65rem, 2.5vw, 2.3rem);

    line-height:
        0.96;

    text-align:
        center;

    transform:
        rotate(-4deg);
}


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

@media (max-width: 980px) {
    .privacy-hero > .container--wide {
        grid-template-columns:
            minmax(0, 0.88fr)
            minmax(0, 1.12fr);

        gap:
            2.5rem;
    }

    .privacy-hero .page-hero__content h1 {
        font-size:
            clamp(3rem, 6vw, 4.35rem);
    }

    .privacy-hero__file {
        padding:
            2rem;
    }
}

@media (max-width: 760px) {
    .privacy-hero > .container--wide {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            0;

        min-height:
            auto;
    }

    .privacy-hero .page-hero__content {
        width:
            100%;

        max-width:
            none;

        padding:
            4.5rem 0 3rem;
    }

    .privacy-hero .page-hero__content h1 {
        max-width:
            9ch;

        font-size:
            clamp(3rem, 11vw, 4.3rem);
    }

    .privacy-hero__file {
        width:
            100%;

        max-width:
            38rem;

        justify-self:
            center;

        margin:
            0 0 2rem;

        transform:
            rotate(0);
    }

    .privacy-hero .page-hero__scribble {
        position:
            static;

        width:
            auto;

        max-width:
            18rem;

        justify-self:
            end;

        margin:
            0 0 3.25rem;

        padding-right:
            0.5rem;
    }
}

@media (max-width: 560px) {
    .privacy-hero .page-hero__content {
        padding-top:
            3.75rem;
    }

    .privacy-hero__file {
        padding:
            1.5rem;
    }

    .privacy-hero__file-row {
        grid-template-columns:
            4.7rem
            minmax(0, 1fr);

        gap:
            0.7rem;
    }

    .privacy-hero__file-status {
        width:
            4.15rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - ACCESSIBILITY HERO SCALE
   ========================================================================== */

.accessibility-hero .page-hero__content {
    max-width:
        48rem;
}

.accessibility-hero .page-hero__content h1 {
    max-width:
        11.5ch;

    font-size:
        clamp(3.2rem, 4.7vw, 4.8rem);

    line-height:
        0.96;

    letter-spacing:
        -0.045em;
}

.accessibility-hero .page-hero__content .lede {
    max-width:
        39rem;
}

@media (max-width: 760px) {
    .accessibility-hero .page-hero__content h1 {
        max-width:
            10ch;

        font-size:
            clamp(3rem, 10vw, 4rem);
    }
}

@media (max-width: 560px) {
    .accessibility-hero .page-hero__content h1 {
        font-size:
            clamp(2.8rem, 12vw, 3.65rem);
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - ACCESSIBILITY HERO PHOTO LAYOUT
   ========================================================================== */

.accessibility-hero {
    position:
        relative;

    padding:
        0;

    overflow:
        hidden;

    background:
        var(--cream);
}

.accessibility-hero > .container--wide {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.74fr)
        minmax(0, 1.26fr);

    align-items:
        stretch;

    min-height:
        clamp(39rem, 51vw, 48rem);
}

.accessibility-hero .page-hero__content {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    width:
        100%;

    max-width:
        38rem;

    padding:
        clamp(4.75rem, 7vw, 7rem)
        clamp(2rem, 3vw, 3rem)
        clamp(4.75rem, 7vw, 7rem)
        0;
}

.accessibility-hero .page-hero__content h1 {
    max-width:
        11.5ch;

    font-size:
        clamp(3.2rem, 4.7vw, 4.8rem);

    line-height:
        0.96;

    letter-spacing:
        -0.045em;
}

.accessibility-hero .page-hero__content .lede {
    max-width:
        34rem;
}

.accessibility-hero__media {
    position:
        relative;

    z-index:
        1;

    min-height:
        inherit;

    margin-right:
        calc(50% - 50vw);
}

.accessibility-hero__media img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        58% center;
}

.accessibility-hero__media::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            var(--cream) 0%,
            rgba(246, 241, 230, 0.82) 5%,
            rgba(246, 241, 230, 0.42) 11%,
            rgba(246, 241, 230, 0.16) 18%,
            rgba(246, 241, 230, 0.04) 24%,
            rgba(246, 241, 230, 0) 30%
        );
}

.accessibility-hero .page-hero__scribble {
    position:
        absolute;

    z-index:
        4;

    right:
        clamp(1.75rem, 5vw, 6rem);

    bottom:
        clamp(1.75rem, 4vw, 3.75rem);

    width:
        min(17rem, 25vw);

    margin:
        0;

    color:
        var(--yellow);

    font-size:
        clamp(1.75rem, 2.7vw, 2.5rem);

    line-height:
        0.96;

    text-align:
        center;

    text-shadow:
        0 2px 12px rgba(28, 35, 40, 0.74);

    transform:
        rotate(-4deg);
}

@media (max-width: 980px) {
    .accessibility-hero > .container--wide {
        grid-template-columns:
            minmax(0, 0.82fr)
            minmax(0, 1.18fr);

        min-height:
            40rem;
    }

    .accessibility-hero .page-hero__content {
        padding-right:
            1.75rem;
    }

    .accessibility-hero .page-hero__content h1 {
        font-size:
            clamp(3rem, 5.8vw, 4.3rem);
    }

    .accessibility-hero__media img {
        object-position:
            61% center;
    }

    .accessibility-hero .page-hero__scribble {
        right:
            1.75rem;

        width:
            14rem;
    }
}

@media (max-width: 760px) {
    .accessibility-hero > .container--wide {
        display:
            flex;

        flex-direction:
            column;

        min-height:
            auto;
    }

    .accessibility-hero .page-hero__content {
        width:
            100%;

        max-width:
            none;

        padding:
            4.25rem 0 3rem;
    }

    .accessibility-hero .page-hero__content h1 {
        max-width:
            10ch;

        font-size:
            clamp(3rem, 10vw, 4rem);
    }

    .accessibility-hero__media {
        min-height:
            clamp(25rem, 78vw, 34rem);

        margin:
            0 calc(50% - 50vw);
    }

    .accessibility-hero__media img {
        object-position:
            center;
    }

    .accessibility-hero__media::before {
        background:
            linear-gradient(
                180deg,
                var(--cream) 0%,
                rgba(246, 241, 230, 0.48) 9%,
                rgba(246, 241, 230, 0.12) 19%,
                rgba(246, 241, 230, 0) 30%
            );
    }

    .accessibility-hero .page-hero__scribble {
        right:
            1.5rem;

        bottom:
            1.5rem;

        width:
            13rem;

        font-size:
            clamp(1.65rem, 7vw, 2.2rem);
    }
}

@media (max-width: 560px) {
    .accessibility-hero .page-hero__content {
        padding-top:
            3.5rem;
    }

    .accessibility-hero__media {
        min-height:
            26rem;
    }

    .accessibility-hero .page-hero__scribble {
        right:
            1rem;

        bottom:
            1.1rem;

        width:
            11.5rem;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - ACCESSIBILITY HERO EYEBROW FIX
   ========================================================================== */

@media (min-width: 761px) {
    .accessibility-hero .page-hero__content .eyebrow {
        max-width:
            none;

        font-size:
            0.76rem;

        white-space:
            nowrap;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - 404 HERO LAYOUT
   ========================================================================== */

.error-hero {
    position:
        relative;

    padding:
        0;

    overflow:
        hidden;

    background:
        var(--cream);
}

.error-hero > .container--wide {
    position:
        relative;

    min-height:
        clamp(38rem, 50vw, 46rem);
}

.error-hero .page-hero__content {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    width:
        min(48%, 38rem);

    min-height:
        inherit;

    padding:
        clamp(4.5rem, 7vw, 7rem)
        0;
}

.error-hero .page-hero__content h1 {
    max-width:
        8ch;

    margin:
        0 0 1.25rem;

    font-size:
        clamp(3.5rem, 5.5vw, 5.5rem);

    line-height:
        0.92;

    letter-spacing:
        -0.05em;
}

.error-hero .page-hero__content .lede {
    max-width:
        34rem;
}


/* --------------------------------------------------------------------------
   Giant wrong-answer number
   -------------------------------------------------------------------------- */

.error-hero__number {
    position:
        absolute;

    z-index:
        1;

    top:
        50%;

    right:
        clamp(1rem, 5vw, 5rem);

    width:
        min(47vw, 38rem);

    margin:
        0;

    color:
        var(--red);

    font-family:
        "Bricolage Grotesque", sans-serif;

    font-size:
        clamp(10rem, 23vw, 21rem);

    font-weight:
        800;

    line-height:
        0.72;

    letter-spacing:
        -0.09em;

    text-align:
        center;

    transform:
        translateY(-56%)
        rotate(-4deg);

    opacity:
        0.96;
}

.error-hero__number::after {
    content:
        "";

    position:
        absolute;

    inset:
        -0.12em -0.08em -0.11em;

    z-index:
        -1;

    border:
        0.035em solid var(--red);

    border-radius:
        48% 52% 46% 54% / 55% 46% 54% 45%;

    transform:
        rotate(3deg);
}


/* --------------------------------------------------------------------------
   Existing handwritten note
   -------------------------------------------------------------------------- */

.error-hero .page-hero__scribble {
    position:
        absolute;

    z-index:
        4;

    right:
        clamp(2rem, 6vw, 6rem);

    bottom:
        clamp(2rem, 4vw, 3.5rem);

    width:
        min(25rem, 38vw);

    margin:
        0;

    color:
        var(--navy);

    font-size:
        clamp(1.65rem, 2.6vw, 2.4rem);

    line-height:
        0.98;

    text-align:
        center;

    transform:
        rotate(-4deg);
}


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

@media (max-width: 900px) {
    .error-hero .page-hero__content {
        width:
            54%;
    }

    .error-hero__number {
        right:
            0;

        width:
            43vw;

        font-size:
            clamp(9rem, 21vw, 16rem);
    }
}

@media (max-width: 700px) {
    .error-hero > .container--wide {
        min-height:
            auto;

        padding-bottom:
            3rem;
    }

    .error-hero .page-hero__content {
        width:
            100%;

        min-height:
            auto;

        padding:
            4rem 0 2rem;
    }

    .error-hero .page-hero__content h1 {
        max-width:
            7ch;

        font-size:
            clamp(3.3rem, 12vw, 4.6rem);
    }

    .error-hero__number {
        position:
            relative;

        top:
            auto;

        right:
            auto;

        width:
            min(100%, 25rem);

        margin:
            1rem auto 0;

        font-size:
            clamp(9rem, 40vw, 14rem);

        transform:
            rotate(-3deg);
    }

    .error-hero .page-hero__scribble {
        position:
            relative;

        right:
            auto;

        bottom:
            auto;

        width:
            min(100%, 22rem);

        margin:
            1.75rem 0 0 auto;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - 404 HERO POSITION REPAIR
   ========================================================================== */

@media (min-width: 701px) {

    /*
     * The giant 404 lives inside .page-hero__content in the HTML.
     * Make that content wrapper stop acting as its positioning container,
     * so the number can anchor to the full hero container instead.
     */

    .error-hero .page-hero__content {
        position:
            static;

        width:
            min(46%, 36rem);
    }

    .error-hero .page-hero__content > :not(.error-hero__number) {
        position:
            relative;

        z-index:
            3;
    }

    .error-hero__number {
        top:
            50%;

        right:
            clamp(2rem, 5vw, 5.5rem);

        left:
            auto;

        width:
            min(42%, 34rem);

        font-size:
            clamp(9rem, 18vw, 17rem);

        transform:
            translateY(-58%)
            rotate(-4deg);

        pointer-events:
            none;
    }

    .error-hero__number::after {
        inset:
            -0.08em -0.06em -0.09em;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - 404 HERO PHOTO LAYOUT
   ========================================================================== */

@media (min-width: 701px) {

    .error-hero > .container--wide {
        position:
            relative;

        min-height:
            clamp(38rem, 50vw, 46rem);

        overflow:
            hidden;
    }

    .error-hero .page-hero__content {
        position:
            static;

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            center;

        width:
            min(44%, 35rem);

        min-height:
            inherit;

        padding:
            clamp(4.5rem, 7vw, 7rem)
            0;
    }

    .error-hero .page-hero__content h1 {
        max-width:
            7ch;

        margin:
            0 0 1.25rem;

        font-size:
            clamp(3.4rem, 5vw, 5rem);

        line-height:
            0.92;

        letter-spacing:
            -0.05em;
    }

    .error-hero .page-hero__content .lede {
        max-width:
            31rem;
    }


    /* ----------------------------------------------------------------------
       Failed quiz image
       ---------------------------------------------------------------------- */

    .error-hero__media {
        position:
            absolute !important;

        z-index:
            1 !important;

        top:
            0;

        right:
            0;

        bottom:
            0;

        width:
            57%;

        overflow:
            hidden;

        margin:
            0;

        background:
            var(--cream);
    }

    .error-hero__media img {
        position:
            absolute;

        inset:
            0;

        width:
            100%;

        height:
            100%;

        object-fit:
            cover;

        object-position:
            61% center;
    }

    .error-hero__media::before {
        content:
            "";

        position:
            absolute;

        z-index:
            2;

        inset:
            0;

        pointer-events:
            none;

        background:
            linear-gradient(
                90deg,
                var(--cream) 0%,
                rgba(246, 241, 230, 0.80) 5%,
                rgba(246, 241, 230, 0.36) 12%,
                rgba(246, 241, 230, 0.10) 19%,
                rgba(246, 241, 230, 0) 27%
            );
    }


    /* ----------------------------------------------------------------------
       Existing handwritten note
       ---------------------------------------------------------------------- */

    .error-hero .page-hero__scribble {
        position:
            absolute;

        z-index:
            4;

        right:
            clamp(1.5rem, 4vw, 4.5rem);

        bottom:
            clamp(1.5rem, 3vw, 2.75rem);

        width:
            min(21rem, 30vw);

        margin:
            0;

        color:
            var(--yellow);

        font-size:
            clamp(1.6rem, 2.3vw, 2.15rem);

        line-height:
            0.98;

        text-align:
            center;

        text-shadow:
            0 2px 12px rgba(28, 35, 40, 0.78);

        transform:
            rotate(-4deg);
    }

}


/* ==========================================================================
   404 HERO PHOTO - MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .error-hero > .container--wide {
        min-height:
            auto;

        padding-bottom:
            0;
    }

    .error-hero .page-hero__content {
        width:
            100%;

        min-height:
            auto;

        padding:
            4rem 0 2.75rem;
    }

    .error-hero .page-hero__content h1 {
        max-width:
            7ch;

        font-size:
            clamp(3.2rem, 12vw, 4.5rem);
    }

    .error-hero__media {
        position:
            relative !important;

        width:
            calc(100% + 2 * var(--container-pad, 1.5rem));

        min-height:
            clamp(25rem, 82vw, 34rem);

        margin:
            0 calc(-1 * var(--container-pad, 1.5rem));

        overflow:
            hidden;
    }

    .error-hero__media img {
        position:
            absolute;

        inset:
            0;

        width:
            100%;

        height:
            100%;

        object-fit:
            cover;

        object-position:
            62% center;
    }

    .error-hero__media::before {
        content:
            "";

        position:
            absolute;

        z-index:
            2;

        inset:
            0;

        pointer-events:
            none;

        background:
            linear-gradient(
                180deg,
                var(--cream) 0%,
                rgba(246, 241, 230, 0.38) 8%,
                rgba(246, 241, 230, 0.08) 18%,
                rgba(246, 241, 230, 0) 28%
            );
    }

    .error-hero .page-hero__scribble {
        position:
            absolute;

        z-index:
            4;

        right:
            1rem;

        bottom:
            1.25rem;

        width:
            min(18rem, 70vw);

        margin:
            0;

        color:
            var(--yellow);

        text-shadow:
            0 2px 12px rgba(28, 35, 40, 0.78);
    }

}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - 404 HERO PHOTO LEFT SHIFT
   ========================================================================== */

@media (min-width: 701px) {
    .error-hero__media {
        width:
            62%;
    }

    .error-hero__media img {
        object-position:
            58% center;
    }
}

/* ==========================================================================
   THE ANSWER IS NOT 6-7 - 404 HERO PHOTO DOMINANT
   ========================================================================== */

@media (min-width: 701px) {

    .error-hero .page-hero__content {
        width:
            min(38%, 31rem);
    }

    .error-hero__media {
        width:
            74%;
    }

    .error-hero__media img {
        object-position:
            55% center;
    }

    .error-hero__media::before {
        background:
            linear-gradient(
                90deg,
                var(--cream) 0%,
                rgba(246, 241, 230, 0.92) 4%,
                rgba(246, 241, 230, 0.60) 9%,
                rgba(246, 241, 230, 0.28) 15%,
                rgba(246, 241, 230, 0.08) 20%,
                rgba(246, 241, 230, 0) 25%
            );
    }

    .error-hero .page-hero__content h1 {
        max-width:
            6.5ch;
    }

    .error-hero .page-hero__content .lede {
        max-width:
            28rem;
    }
}