/* ==========================================================================
   School landing page (/schools)
   Colours sampled from the Figma frame "SwagPrint for School - Landing Page".
   No .min twin on purpose — loaded ungated, same as bandbucks.css.
   ========================================================================== */
body{
    overflow-x: hidden;
}
.sch-hero,
.sch-trust,
.sch-why,
.sch-steps,
.sch-social,
.sch-quote,
.sch-merch,
.sch-cats,
.sch-popular,
.sch-bulk,
.sch-year,
.sch-faq,
.sch-final,
.cg-banner,
.cg-boxes {
    --sch-ink:        #1a2a3a;
    --sch-body:       #4a5c70;
    --sch-muted:      #6b7c8e;
    --sch-btn-navy:   #3d5167;
    --sch-cyan:       #2dc7ff;
    --sch-bg:         #f5f7f6;
    --sch-pill:       #d6dcda;
    --sch-dark:       #101c2e;
    --sch-dark-panel: #112539;
    --sch-band:       #d4d8da;
    --sch-field:      #e8eeeb;
    --sch-line:       #e2e6e9;
    --sch-star:       #ffb300;
}

/* ---------- shared ---------- */
.sch-h1,
.sch-h2,
.sch-card h3,
.sch-step h3,
.sch-year__item h3,
.sch-form__title,
.sch-bulk__panel-copy h3 {
    color: var(--sch-ink);
    letter-spacing: -0.02em;
}

/* Ceilings hold the 1440 Figma frame exactly; growth past it resumes in the
   >= 1600px block at the foot of this file. */
.sch-h1 {
    font-size: clamp(36px, 4.5vw, 58px);
    line-height: 1.06;
    font-weight: 800;
    margin: 0 0 16px;
}

.sch-h2 {
    font-size: clamp(24px, 2.9vw, 36px);
    line-height: 1.18;
    font-weight: 800;
    margin: 0 0 12px;
}

.sch-h2--light { color: #fff; }

.nowrap { white-space: nowrap; }

/* The <span> that keeps "runs on." together must not pick up a colour of its
   own from anywhere in the global sheets. -webkit-text-fill-color is here too
   because it wins over `color` and is what gradient-clipped heading rules set. */
.sch-h1 span,
.sch-h2 span {
    color: inherit;
    -webkit-text-fill-color: currentColor;
    background: none;
}

.sch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border: 0;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
}

.sch-btn:hover { filter: brightness(1.06); text-decoration: none; }
.sch-btn:active { transform: translateY(1px); }
.sch-btn--navy { background: var(--sch-btn-navy); color: #fff; }
.sch-btn--navy:hover { color: #fff; }
.sch-btn--cyan { background: var(--sch-cyan); color: var(--sch-ink); }
.sch-btn--cyan:hover { color: var(--sch-ink); }
.sch-btn--block { width: 100%; padding: 17px 28px; font-size: 18px; }

/* Secondary. The rule is an inset shadow rather than a border so the button
   keeps the exact height of the filled one it sits beside - .sch-btn is
   border:0, and adding a real 2px border would make this one 4px taller. */
.sch-btn--outline {
    background: transparent;
    color: var(--sch-btn-navy);
    box-shadow: inset 0 0 0 2px var(--sch-btn-navy);
}
.sch-btn--outline:hover {
    background: var(--sch-btn-navy);
    color: #fff;
    filter: none;
}

.sch-link {
    color: #1f8fd6;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sch-link--light { color: var(--sch-cyan); }

.sch-stars { color: var(--sch-star); letter-spacing: 2px; }

.sch-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.sch-rating--center { justify-content: center; margin-bottom: 34px; }
.sch-rating__txt {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sch-ink);
}

.sch-check {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--sch-ink);
}

/* ---------- hero ---------- */
/* The header sits flush on top of this section (no gap of its own), so the
   whole nav-to-hero fold is this padding-top. It is deliberately much smaller
   than padding-bottom - the top is dead space under the nav, the bottom is
   breathing room before the trust bar. */
.sch-hero {
    background: var(--sch-bg);
    padding: 28px 0 64px;
}

.sch-hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.sch-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    margin-bottom: 26px;
    border-radius: 999px;
    background: var(--sch-pill);
    color: var(--sch-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sch-badge svg { width: 16px; height: 16px; fill: currentColor; }

.sch-hero__sub {
    max-width: 30ch;
    margin: 0 0 26px;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.5;
    color: var(--sch-body);
}

.sch-hero__points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 26px 0 16px;
    padding: 0;
    list-style: none;
}
.sch-hero__points li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--sch-ink);
}

.sch-hero__media img {
    width: 100%;
    height: auto;
    border-radius: 22px;
    display: block;
}

/* ---------- trust bar ---------- */
.sch-trust { background: #fff; padding: 34px 0; }

.sch-trust__row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px 42px;
}

.sch-trust__title {
    margin: 0;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 800;
    color: var(--sch-ink);
    letter-spacing: -0.02em;
}

.sch-trust__logos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 54px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Logo sizing is an explicit CSS height per logo, NOT max-height and NOT the
   width/height attributes.
     - max-height never binds: every logo is already shorter than the cap, so a
       bigger cap does nothing at all (this cost a round-trip once already).
     - one shared height cannot work either: these range from 3:1 (Tulane) to
       8:1 (Peddie), so a height that suits the stacked marks turns the wide
       wordmarks into 300px banners.
   So each gets its own height, and they scale together per tier. Widths follow
   from the intrinsic aspect ratio. */
.sch-trust__logos img {
    max-width: 100%;
    width: auto;
    display: block;
}

/* Phones keep height:auto + the max-width cap in the <=767 block below; these
   heights start at the first width where the row sits on one line. */
@media (min-width: 768px) {
    .sch-logo--bismarck   { height: 35px; }
    .sch-logo--csba       { height: 27px; }
    .sch-logo--peddie     { height: 13px; }
    .sch-logo--quinnipiac { height: 28px; }
    .sch-logo--prescott   { height: 23px; }
    .sch-logo--tulane     { height: 32px; }
    .sch-logo--corp       { height: 32px; } /* corporate trust bar wordmarks */

    /* Vertical-page partner logos: per-logo heights so tall/square marks
       (Radiant, BAC Couriers, Mid-Atlantic, HMS) don't dominate, and tiny
       wordmarks get a bump. object-fit keeps the mark inside the box. */
    .sch-trust__logos--church,
    .sch-trust__logos--youth,
    .sch-trust__logos--health,
    .sch-trust__logos--sb {
        gap: 20px 40px;
    }
    .sch-trust__logos--health { gap: 20px 64px; } /* revision: increase spacing */
    .sch-trust__logos--church img,
    .sch-trust__logos--youth img,
    .sch-trust__logos--health img,
    .sch-trust__logos--sb img {
        width: auto;
        max-width: 150px;
        object-fit: contain;
    }

    /* Churches — Radiant (5) was dominating; Faith Community (3) was tiny */
    .sch-logo--church-1 { height: 36px; }
    .sch-logo--church-2 { height: 36px; }
    .sch-logo--church-3 { height: 42px; }
    .sch-logo--church-4 { height: 34px; }
    .sch-logo--church-5 { height: 28px; } /* Radiant */
    .sch-logo--church-6 { height: 38px; }

    /* Youth sports — AYCORP (1) / ROES (6) large; middle marks tiny */
    .sch-logo--youth-1 { height: 32px; }
    .sch-logo--youth-2 { height: 42px; }
    .sch-logo--youth-3 { height: 42px; }
    .sch-logo--youth-4 { height: 40px; }
    .sch-logo--youth-6 { height: 30px; }

    /* Healthcare — even row; Medline (5) / New Vitalis (6) were tiny */
    .sch-logo--health-1 { height: 34px; }
    .sch-logo--health-2 { height: 34px; }
    .sch-logo--health-3 { height: 32px; } /* HMS — tall mark */
    .sch-logo--health-4 { height: 34px; }
    .sch-logo--health-5 { height: 40px; }
    .sch-logo--health-6 { height: 40px; }

    /* Small business — BAC (2) / Mid-Atlantic (5) were oversized */
    .sch-logo--sb-1 { height: 34px; }
    .sch-logo--sb-2 { height: 26px; } /* BAC Couriers */
    .sch-logo--sb-3 { height: 40px; }
    .sch-logo--sb-4 { height: 32px; }
    .sch-logo--sb-5 { height: 26px; } /* Mid-Atlantic */
    .sch-logo--sb-6 { height: 38px; }
}

/* ---------- why ---------- */
.sch-why { background: var(--sch-bg); padding: 60px 0 66px; }
.sch-why .sch-h2 { margin-bottom: 34px; }
.sch-why__grid { row-gap: 20px; }

.sch-card {
    height: 100%;
    padding: 26px 24px 28px;
    background: #fff;
    border: 1px solid var(--sch-line);
    border-radius: 14px;
}
.sch-card__icon { display: block; margin-bottom: 16px; }
.sch-card__icon svg { width: 26px; height: 26px; fill: var(--sch-ink); }
.sch-card h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px;
}
.sch-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sch-body);
}

/* ---------- three steps ---------- */
.sch-steps { background: #fff; padding: 58px 0 62px; }
.sch-steps .sch-h2 { margin-bottom: 44px; }

.sch-steps__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.sch-step { position: relative; text-align: center; padding: 0 14px; }

/* connector line between the icon circles */
.sch-step::before {
    content: "";
    position: absolute;
    top: 39px;
    left: -50%;
    width: 100%;
    height: 1px;
    background: var(--sch-line);
}
.sch-step:first-child::before { display: none; }

.sch-step__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    margin-bottom: 20px;
    border: 1px solid var(--sch-line);
    border-radius: 50%;
    background: var(--sch-bg);
}
/* Each step glyph has its own aspect, so they are sized to the frame's
   artboard dimensions rather than forced into one square box. */
.sch-step__icon svg { display: block; color: var(--sch-btn-navy); }
.sch-ico--box   { width: 46px; height: 48px; }
.sch-ico--pad   { width: 31px; height: 42px; }
.sch-ico--truck { width: 48px; height: 34px; }

.sch-step h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.sch-step p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--sch-body); }

/* ---------- gallery + reviews ---------- */
.sch-social { background: var(--sch-bg); padding: 44px 0 62px; overflow: hidden; }

.sch-gallery__strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
    gap: 22px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 80px 20px;
}
.sch-gallery__item { margin: 0; }
.sch-gallery__item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}
/* symmetric arch — matches the Figma masonry offsets */
.sch-gallery__item--1,
.sch-gallery__item--6 {padding-bottom: 0;position: relative;top: 100px;}
.sch-gallery__item--2,
.sch-gallery__item--5 {padding-bottom: 0;position: relative;top: 50px;}

@media screen and (max-width: 767px) {
    .sch-gallery__item--1, .sch-gallery__item--6 {
        top: 30px;
    }
}
.sch-reviews { margin-top: -10px; position: relative; }
.sch-reviews .sch-h2 { margin-bottom: 10px; }

.sch-reviews__carousel { margin: 0 -12px; }
.sch-reviews__slide { padding: 14px 12px;  }

.sch-review {
    height: 100%;
    margin: 0;
    padding: 24px 24px 22px;
    background: #fff;
    border: 1px solid #D4DADF;
    border-radius: 14px;
    box-shadow: 0px 8px 30px 0px #0000000A;
    min-height:230px;
}
.sch-reviews__carousel .slick-slide.slick-center .sch-review{
  border-width:2px;
}
.sch-review .sch-stars { display: block; font-size: 20px; margin-bottom: 12px; }
.sch-review p {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sch-body);
}
.sch-review__by { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 700; }
.sch-review__name { font-style: normal; font-weight: 700; font-size: 15px; color: #1A2A3A; }
.sch-review__meta { font-size: 12px; color: #1A2A3A; font-weight: 400; }
.sch-review-date time{
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0%;
    vertical-align: middle;
    color:  #5A7068;
}
/* slick chrome — this codebase ships slick.css (structure only) with no theme,
   so arrows and dots are styled here from scratch. */
.sch-reviews__carousel .slick-prev,
.sch-reviews__carousel .slick-next {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: #e7ebee no-repeat center / 20px 20px;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    transition: background-color .15s ease;
}
.sch-reviews__carousel .slick-prev:hover,
.sch-reviews__carousel .slick-next:hover { background-color: #d8dee3; }

.sch-reviews__carousel .slick-prev {
    left: -22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5m7-7-7 7 7 7'/%3E%3C/svg%3E");
}
.sch-reviews__carousel .slick-next {
    right: -22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-7-7 7 7-7 7'/%3E%3C/svg%3E");
}
.sch-reviews__carousel .slick-prev.slick-disabled,
.sch-reviews__carousel .slick-next.slick-disabled { opacity: .35; cursor: not-allowed; }

.sch-reviews__carousel .slick-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.sch-reviews__carousel .slick-dots li { display: flex; }
.sch-reviews__carousel .slick-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c2cad1;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    transition: background-color .2s ease;
}
.sch-reviews__carousel .slick-dots li.slick-active button { background: var(--sch-ink); }

.sch-reviews__carousel .slick-slide {
  transition: all 0.4s ease;
  transform: scale(0.9);
}

.sch-reviews__carousel .slick-slide.slick-center {
  transform: scale(1.05);
}
/* ---------- quote form ---------- */
.sch-quote { background: #fff; padding: 64px 0 70px; }
.sch-quote__copy p { font-size: 16px; line-height: 1.65; color: var(--sch-body); }

.sch-quote__points {
    margin: 24px 0;
    padding: 0;
    list-style: none;
}
.sch-quote__points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--sch-ink);
}
.sch-quote__points .sch-check { margin-top: 2px; }

.sch-quote__call { margin-bottom: 6px; color: var(--sch-body); }

.sch-form {
    padding: 30px 30px 34px;
    background: var(--sch-bg);
    border: 1px solid var(--sch-line);
    border-radius: 16px;
}
.sch-form__title {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.sch-form__sub {
    margin: 0 0 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--sch-line);
    font-size: 16px;
    color: var(--sch-body);
}

.sch-field { margin-bottom: 16px; }
.sch-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sch-body);
}
.sch-field input,
.sch-field select {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    background: var(--sch-field);
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 16px;
    color: var(--sch-ink);
    appearance: none;
    -webkit-appearance: none;
}
.sch-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5c70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    padding-right: 44px;
}
.sch-field input::placeholder { color: var(--sch-muted); }

/* quantity: drop the spinners so it reads as a plain field like the rest */
.sch-qty { -moz-appearance: textfield; appearance: textfield; }
.sch-qty::-webkit-outer-spin-button,
.sch-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* native date input: keep the picker indicator that appearance:none would hide.
   The whole field opens the calendar (see showPicker() in schools.js), so it
   gets a pointer cursor rather than a text caret. */
.sch-date { -webkit-appearance: none; appearance: none; cursor: pointer; }
.sch-date::-webkit-calendar-picker-indicator {
    opacity: .65;
    cursor: pointer;
    filter: invert(28%) sepia(11%) saturate(1100%) hue-rotate(169deg) brightness(94%);
}
.sch-date:hover::-webkit-calendar-picker-indicator { opacity: 1; }
/* Safari/iOS renders an empty date input flush-left with no placeholder text */
.sch-date::-webkit-date-and-time-value { text-align: left; }
.sch-field input:focus,
.sch-field select:focus {
    outline: 0;
    border-color: var(--sch-cyan);
    background: #fff;
}
.sch-field input.error,
.sch-field select.error { border-color: #d94b4b; }
.sch-field label.error {
    margin: 6px 0 0;
    color: #d94b4b;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.sch-form__note {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--sch-muted);
}

/* ==========================================================================
   Most Ordered By Schools  (/school-merch only)
   ========================================================================== */
.sch-merch { background: #fff; padding: 60px 0 66px; }
.sch-merch__sub { margin: 0 0 24px; font-size: 16px; color: var(--sch-body); }

/* ---------- 5-up slider (shared by the products and category rows) ----------
   No side padding on the wrapper: the track's -12px margin and the cell's
   +12px padding cancel, so the first card's edge lands exactly on the
   container's content edge — flush with the section heading above it. The
   arrows therefore live in the page gutter, nudged back over the card edge by
   just enough that they can never overflow the viewport at the narrow end of
   the desktop range. */
.sch-slider { position: relative; padding: 0; }

.sch-slider .slick-prev,
.sch-slider .slick-next {
    position: absolute;
    top: 38%;
    z-index: 3;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid var(--sch-line);
    border-radius: 50%;
    background: #fff no-repeat center / 20px 20px;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.sch-slider .slick-prev:hover,
.sch-slider .slick-next:hover { background-color: #eef1f4; border-color: var(--sch-btn-navy); }
.sch-slider .slick-prev { left: -20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5m7-7-7 7 7 7'/%3E%3C/svg%3E"); }
.sch-slider .slick-next { right: -20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-7-7 7 7-7 7'/%3E%3C/svg%3E"); }
/* infinite:false, so at rest only the "next" arrow shows — hidden outright
   rather than dimmed, which reads as a broken control */
.sch-slider .slick-prev.slick-disabled,
.sch-slider .slick-next.slick-disabled { display: none !important; }

/* Before slick initialises, each track is a plain flex row so the cards are not
   stacked full-width for a frame. slick overwrites display on .slick-slider. */
.sch-merch__track,
.sch-cats__track { margin: 0 -12px; }
.sch-merch__track:not(.slick-initialized),
.sch-cats__track:not(.slick-initialized) { display: flex; overflow: hidden; }
.sch-merch__track:not(.slick-initialized) > .sch-merch__cell,
.sch-cats__track:not(.slick-initialized) > .sch-cats__cell { flex: 0 0 20%; }
.sch-merch__cell,
.sch-cats__cell { padding: 0 12px; }
/* slick sets display:block on slides; the card needs full height of the cell */
.sch-merch__track .slick-slide > div { height: 100%; }

.sch-merch__card {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.sch-merch__card:hover { color: inherit; text-decoration: none; }

/* The zoom lives on the media box, not the card: overflow:hidden here is what
   crops the scaled image to the rounded corners. */
.sch-merch__media {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: var(--sch-field);
}
.sch-merch__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transform: scale(1);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.sch-merch__card:hover .sch-merch__media img,
.sch-merch__card:focus-visible .sch-merch__media img { transform: scale(1.09); }
.sch-merch__card:focus-visible .sch-merch__media { outline: 2px solid var(--sch-cyan); outline-offset: 2px; }

/* ---------- trending / popular badge ----------
   Sits above the image and must not be caught by the zoom transform, so it is
   a sibling of the <img> rather than a child of anything that scales. */
.sch-merch__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px 7px 11px;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
.sch-merch__badge svg { width: 13px; height: 13px; flex: 0 0 13px; }
.sch-merch__badge--trending { background: var(--sch-dark); }
/* a touch deeper than --sch-cyan: that token is a dark-text button colour and
   drops under 2:1 behind white label text */
.sch-merch__badge--popular  { background: #1ca7e0; }

/* ---------- card copy ---------- */
.sch-merch__body { padding: 14px 2px 0; }
.sch-merch__name {
    margin: 0 0 7px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sch-ink);
}
.sch-merch__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 7px;
    margin: 0 0 7px;
    font-size: 13px;
    color: var(--sch-muted);
}
.sch-merch__meta b { color: var(--sch-body); font-weight: 700; }
.sch-merch__sep { color: var(--sch-line); }
.sch-merch__price { margin: 0 0 8px; font-size: 13px; color: var(--sch-muted); }
.sch-merch__price b { font-size: 18px; font-weight: 800; color: var(--sch-ink); }
.sch-merch__rating { display: flex; align-items: center; gap: 8px; margin: 0; }
.sch-merch__rating .sch-stars { font-size: 15px; letter-spacing: 1px; }
.sch-merch__reviews { font-size: 13px; font-weight: 600; color: var(--sch-body); }

/* ---------- closing "need something else" line ---------- */
.sch-merch__ask {
    margin: 34px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--sch-line);
    font-size: 16px;
    color: var(--sch-body);
}
.sch-merch__ask b { color: var(--sch-ink); }
.sch-merch__ask .sch-link { margin-left: 6px; }

/* ==========================================================================
   Essentials For Schools — square category tiles  (/school-merch only)
   ========================================================================== */
.sch-cats { background: var(--sch-bg); padding: 54px 0 60px; }
.sch-cats__sub { margin: 0 0 28px; font-size: 16px; color: var(--sch-body); }

.sch-cats__cell { min-width: 0; }

.sch-cats__tile {
    display: block;
    color: inherit;
    text-decoration: none;
}
.sch-cats__tile:hover { color: inherit; text-decoration: none; }

/* Square, same 12px corner as the product cards above. overflow:hidden is what
   crops the zoom back to the rounded box. */
.sch-cats__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--sch-line);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.sch-cats__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transform: scale(1);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.sch-cats__tile:hover .sch-cats__media,
.sch-cats__tile:focus-visible .sch-cats__media {
    border-color: var(--sch-btn-navy);
    box-shadow: 0 8px 22px rgba(16, 28, 46, .10);
}
.sch-cats__tile:hover .sch-cats__media img,
.sch-cats__tile:focus-visible .sch-cats__media img { transform: scale(1.09); }

.sch-cats__label {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sch-ink);
}
.sch-cats__tile:hover .sch-cats__label { color: var(--sch-btn-navy); }

/* ---------- most popular ---------- */
.sch-popular { background: var(--sch-bg); padding: 60px 0 66px; }
.sch-popular__sub { margin: 0 0 28px; font-size: 16px; color: var(--sch-body); }
.sch-popular__grid { row-gap: 22px; }

.sch-pop {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: #dfe4e7;
}
.sch-pop img { width: 100%; height: auto; display: block; }
.sch-pop__cta {
    left: 24px;
    bottom: 22px;
    padding: 11px 22px;
    font-size: 15px;
    pointer-events: none;
    
}
.sch-pop__copy{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 24px;
    background: linear-gradient(180.09deg, rgba(0, 0, 0, 0.05) 0.08%, rgba(0, 0, 0, 0.9) 99.97%);
    color: #fff;
    transition: opacity .2s ease;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: self-start;
}
.sch-pop__title{
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #fff;

}
.sch-pop__desc{
    margin: 0 0 12px;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #fff;

}
.sch-pop__cta{
    opacity: 0;
    margin-bottom:-40px;
    transition: 0.5s ease all;

}
.sch-pop:hover .sch-pop__cta{
    opacity: 1;
    margin-bottom:0px;
    transition: 0.5s ease all;

}
@media screen and (max-width: 580px) {
    .sch-pop__copy{
        padding: 12px;
    }
    .sch-pop__title{
        margin: 0 0 5px;
        font-size: 14px;
        line-height: 16px;
    }
    .sch-pop__desc{
        margin: 0 0 5px;
        font-size: 12px;
        line-height: 16px;
    }
}
/* ---------- bulk pricing ---------- */
.sch-bulk { background: var(--sch-dark); padding: 54px 0 58px; }
.sch-eyebrow {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sch-cyan);
}
.sch-bulk__lead {
    max-width: 105ch;
    margin: 0 0 30px;
    font-size: 16px;
    line-height: 1.65;
    color: #c6d0da;
}

.sch-bulk__panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 30px;
    padding: 26px 30px;
    background: var(--sch-dark-panel);
    border-radius: 14px;
}
.sch-bulk__panel-copy h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: #fff; }
.sch-bulk__panel-copy p { margin: 0; font-size: 16px; color: #c6d0da; }
.sch-bulk__panel-cta { display: flex; align-items: center; gap: 22px; }
/* the phone and button stay on one line even in the narrow panel */
.sch-bulk__panel-cta .sch-link,
.sch-bulk__panel-cta .sch-btn { white-space: nowrap; }

/* ---------- seasonal timeline ---------- */
.sch-year { background: #fff; padding: 68px 0 76px; }
.sch-year__title { text-align: center; }
.sch-year__sub { margin: 0 0 54px; text-align: center; font-size: 18px; color: var(--sch-body); }

.sch-year__track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}
.sch-year__item { position: relative; text-align: center; padding: 0 12px; }
.sch-year__item h3 { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.sch-year__when { display: block; margin-bottom: 22px; font-size: 16px; color: var(--sch-body); }

/* the rail */
.sch-year__dot {
    position: relative;
    display: block;
    height: 22px;
    margin-bottom: 18px;
}
/* Each dot paints a rail segment twice its cell width; the overlap makes one
   continuous bar that ends flush with the first and last cell edge. */
.sch-year__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -50%;
    width: 200%;
    height: 4px;
    transform: translateY(-50%);
    background: var(--sch-ink);
}
.sch-year__dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 4px solid var(--sch-ink);
    border-radius: 50%;
}
.sch-year__item p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sch-body); }

/* ---------- faq ---------- */
.sch-faq { background: var(--sch-bg); padding: 56px 0 62px; }
.sch-faq .sch-h2 { margin-bottom: 30px; }

.sch-accordion { max-width: 1180px; margin: 0 auto; }
.sch-accordion__item { border-top: 1px solid #dfe3e6; }
.sch-accordion__item:last-child { border-bottom: 1px solid #dfe3e6; }

.sch-accordion__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 22px 4px;
    background: none;
    border: 0;
    text-align: left;
    font-size: 17px;
    font-weight: 700;
    color: var(--sch-ink);
    cursor: pointer;
}
.sch-accordion__chev {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--sch-body);
    transition: transform .2s ease;
}
.sch-accordion__q[aria-expanded="true"] .sch-accordion__chev { transform: rotate(180deg); }

.sch-accordion__a { padding: 0 4px 22px; }
.sch-accordion__a p {
    margin: 0;
    max-width: 110ch;
    font-size: 16px;
    line-height: 1.65;
    color: var(--sch-body);
}

/* ---------- final cta ---------- */
.sch-final { background: var(--sch-band); padding: 52px 0 56px; }
.sch-final p { margin: 0 0 26px; font-size: 16px; color: var(--sch-body); }
.sch-final__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 28px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199px) {
    .sch-gallery__strip { gap: 16px; }
}

@media (max-width: 991px) {
    .sch-hero { padding: 22px 0 46px; }
    .sch-hero__sub { max-width: none; }

    /* Hero reorder (tablet + mobile):
       image → rating → h1 → sub → CTAs → points
       Badge is omitted from this stack so the fold matches the client order. */
    .sch-hero > .container > .row {
        display: flex;
        flex-direction: column;
    }
    .sch-hero__media {
        order: 1;
        margin-top: 0;
        margin-bottom: 18px;
    }
    .sch-hero__copy {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 0;
        text-align: center;
    }
    .sch-hero__copy .sch-badge { display: none; }
    .sch-hero__copy .sch-rating {
        order: 1;
        margin: 0 0 14px;
        justify-content: center;
    }
    .sch-hero__copy .sch-h1 {
        order: 2;
        margin-bottom: 12px;
    }
    .sch-hero__copy .sch-hero__sub {
        order: 3;
        margin-bottom: 16px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .sch-hero__copy .sch-hero__cta {
        order: 4;
        margin: 0 0 16px;
        justify-content: center;
    }
    .sch-hero__copy .cg-hero__build { order: 5; text-align: center; }
    .sch-hero__copy .sch-hero__points {
        order: 6;
        margin: 0;
        justify-content: center;
    }

    /* Trust logos: one auto-running row on tablet + mobile. */
    .sch-trust__row { flex-direction: column; gap: 18px; }
    .sch-trust__marquee {
        width: 100%;
        overflow: hidden;
    }
    .sch-trust__logos {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: max-content;
        max-width: none;
        gap: 16px 28px;
        overflow: visible;
    }
    .sch-trust__logos--marquee {
        animation: sch-trust-marquee 28s linear infinite;
        will-change: transform;
    }
    .sch-trust__logos--marquee:hover,
    .sch-trust__logos--marquee:focus-within {
        animation-play-state: paused;
    }
    .sch-trust__logos li { flex: 0 0 auto; min-width: 0; }
    .sch-trust__logos img {
        max-width: none;
        max-height: 32px;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    @keyframes sch-trust-marquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }
    @media (prefers-reduced-motion: reduce) {
        .sch-trust__logos--marquee {
            animation: none;
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .sch-trust__logos--marquee::-webkit-scrollbar { display: none; }
    }

    .sch-quote__copy { margin-bottom: 34px; }

    .sch-year__track { grid-template-columns: repeat(2, 1fr); row-gap: 22px; column-gap: 20px; }
    .sch-year__dot { display: none; }

    .sch-bulk__panel { flex-direction: column; align-items: flex-start; }
    .sch-bulk__panel-cta { width: 100%; justify-content: flex-start; }
}

/* ---------- mobile: matches the "…- Mobile" Figma frame (390px) ---------- */
@media (max-width: 767px) {
    .sch-h1 { font-size: 42px; line-height: 1.06; }
    .sch-h2 { font-size: 30px; }

    .sch-hero__copy .sch-hero__sub {
        font-size: 14px;
        line-height: 1.45;
        margin-bottom: 14px;
    }
    .sch-hero__media { margin-bottom: 14px; }
    .sch-hero__copy .sch-rating { margin-bottom: 12px; }
    .sch-hero__copy .sch-h1 { margin-bottom: 10px; }
    .sch-hero__copy .sch-hero__cta { margin-bottom: 14px; }

    /* CTAs hug their labels — they are not full-bleed in the mobile design.
       Both hero buttons must shrink together or they end up different heights. */
    .sch-hero .sch-btn { padding: 15px 22px; }
    .sch-hero__cta { gap: 10px; }

    /* Hero bullets: one compact row on all phones — no scroll. */
    .sch-hero__points {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 8px 10px;
        margin: 20px 0 12px;
        overflow: visible;
    }
    .sch-hero__points li {
        flex: 0 1 auto;
        gap: 4px;
        white-space: nowrap;
        font-size: 12px;
    }
    .sch-hero__points .sch-check {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

    /* Trust logos: slightly smaller marks on phones. */
    .sch-trust__logos { gap: 16px 24px; }
    .sch-trust__logos img { max-height: 26px; }
    .sch-trust__logos--marquee { animation-duration: 24s; }

    /* three steps become a vertical timeline: icon rail on the left */
    .sch-steps__list { grid-template-columns: 1fr; row-gap: 0; }
    .sch-step {
        display: grid;
        grid-template-columns: 40px 1fr;
        column-gap: 16px;
        padding: 0 0 26px;
        text-align: left;
    }
    .sch-step:last-child { padding-bottom: 0; }
    .sch-step__icon {
        grid-row: 1 / span 2;
        width: 40px;
        height: 40px;
        margin-bottom: 0;
    }
    /* same artwork at the frame's mobile scale (~0.37 of desktop) */
    .sch-ico--box   { width: 17px; height: 18px; }
    .sch-ico--pad   { width: 12px; height: 16px; }
    .sch-ico--truck { width: 18px; height: 13px; }
    .sch-step h3 { align-self: center; font-size: 17px; margin-bottom: 6px; }
    /* rail runs from under one icon to the next */
    .sch-step::before {
        top: 46px;
        bottom: 6px;
        left: 20px;
        width: 1px;
        height: auto;
        background: #ccd3d9;
    }
    .sch-step:first-child::before { display: block; }
    .sch-step:last-child::before { display: none; }

    /* gallery: three tiles in an arch, as in the mobile frame */
    .sch-gallery__strip { grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 15px 24px; }
    .sch-gallery__item--2,
    .sch-gallery__item--4,
    .sch-gallery__item--5 { display: none; }

    /* heading rides up over the photo strip, as it does in the frame */
    .sch-reviews { margin-top: 25px; }

    .sch-form { padding: 24px 20px 28px; }
    .sch-form__title { font-size: 17px; }

    /* seasonal blocks become bordered cards, heading left-aligned */
    .sch-year__title,
    .sch-year__sub { text-align: left; }
    .sch-year__sub { margin-bottom: 32px; font-size: 17px; }
    .sch-year__item {
        padding: 18px 16px 20px;
        text-align: left;
        background: var(--sch-bg);
        border: 1px solid var(--sch-line);
        border-radius: 12px;
    }
    .sch-year__item h3 { font-size: 19px; }
    .sch-year__when { margin-bottom: 14px; font-size: 15px; }
    .sch-year__item p { font-size: 15px; }

    .sch-accordion__q { font-size: 16px; padding: 18px 2px; }

    /* phone sits to the left of the button on one row */
    .sch-final__actions { flex-wrap: nowrap; gap: 14px; }
    .sch-final__actions .sch-link { order: 1; white-space: nowrap; }
    .sch-final__actions .sch-btn { order: 2; white-space: nowrap; }

    .sch-bulk__panel-cta { gap: 16px; }
    .sch-bulk__panel-cta .sch-btn { padding: 13px 20px; }

    /* --- vertical rhythm: the mobile frame is markedly tighter than desktop --- */
    .sch-hero    { padding: 16px 0 26px; }
    .sch-trust   { padding: 24px 0; }
    .sch-why     { padding: 34px 0 36px; }
    .sch-steps   { padding: 34px 0 36px; }
    .sch-social  { padding: 26px 0 34px; }
    .sch-quote   { padding: 34px 0 36px; }
    .sch-popular { padding: 34px 0 36px; }
    .sch-bulk    { padding: 32px 0 34px; }
    .sch-year    { padding: 42px 0 46px; }
    .sch-faq     { padding: 32px 0 34px; }
    .sch-final   { padding: 30px 0 32px; }

    .sch-badge { margin-bottom: 18px; padding: 7px 15px; font-size: 12px; }
    .sch-hero__sub { margin-bottom: 22px; font-size: 14px; }
    .sch-hero__media { margin-top: 0; }

    .sch-why .sch-h2,
    .sch-steps .sch-h2 { margin-bottom: 22px; }
    .sch-why__grid { row-gap: 12px; }
    .sch-card { padding: 14px 15px 16px; }
    .sch-card__icon { margin-bottom: 7px; }
    .sch-card__icon svg { width: 19px; height: 19px; }
    .sch-card h3 { font-size: 15px; margin-bottom: 4px; }
    .sch-card p { font-size: 13px; line-height: 1.5; }

    .sch-step h3 { font-size: 15px; margin-bottom: 3px; }
    .sch-step p { font-size: 13px; line-height: 1.5; }

    .sch-reviews .sch-h2 { margin-bottom: 6px; }
    .sch-rating--center { margin-bottom: 18px; }
    .sch-review { padding: 18px 18px 16px; }
    .sch-review p { margin-bottom: 12px; font-size: 14px; }

    .sch-quote__copy p { font-size: 14px; line-height: 1.55; }
    .sch-quote__points { margin: 14px 0; }
    .sch-quote__points li { margin-bottom: 7px; font-size: 14px; }
    .sch-quote__call { font-size: 14px; }

    .sch-form { padding: 18px 15px 20px; }
    .sch-form__title { font-size: 15px; }
    .sch-form__sub { margin-bottom: 13px; padding-bottom: 12px; font-size: 13px; }
    .sch-field { margin-bottom: 10px; }
    .sch-field label { margin-bottom: 4px; font-size: 10px; }
    .sch-field input,
    .sch-field select { height: 44px; font-size: 15px; }
    .sch-btn--block { padding: 14px 24px; font-size: 16px; }
    .sch-form__note { margin-top: 9px; font-size: 12px; }

    /* essentials */
    .sch-cats { padding: 32px 0 34px; }
    .sch-cats__sub { margin-bottom: 18px; font-size: 14px; }
    .sch-cats__label { margin-top: 8px; font-size: 12px; }

    /* most ordered: two cards per view, arrows tucked in over the gutter */
    .sch-merch { padding: 34px 0 36px; }
    .sch-merch__sub { margin-bottom: 16px; font-size: 14px; }
    .sch-merch__track,
    .sch-cats__track { margin: 0 -6px; }
    .sch-merch__track:not(.slick-initialized) > .sch-merch__cell,
    .sch-cats__track:not(.slick-initialized) > .sch-cats__cell { flex: 0 0 50%; }
    .sch-merch__cell,
    .sch-cats__cell { padding: 0 6px; }
    /* the phone gutter is only 12px, so the arrows ride over the card edge */
    .sch-slider .slick-prev,
    .sch-slider .slick-next { width: 34px; height: 34px; background-size: 15px 15px; }
    .sch-slider .slick-prev { left: -10px; }
    .sch-slider .slick-next { right: -10px; }
    .sch-merch__badge { top: 8px; left: 8px; padding: 5px 9px 5px 8px; font-size: 9px; gap: 4px; }
    .sch-merch__badge svg { width: 11px; height: 11px; flex: 0 0 11px; }
    .sch-merch__body { padding-top: 10px; }
    .sch-merch__name { font-size: 14px; margin-bottom: 5px; }
    .sch-merch__meta { font-size: 11px; margin-bottom: 5px; }
    .sch-merch__price { font-size: 11px; margin-bottom: 6px; }
    .sch-merch__price b { font-size: 15px; }
    .sch-merch__rating .sch-stars { font-size: 13px; }
    .sch-merch__reviews { font-size: 11px; }
    .sch-merch__ask { margin-top: 22px; padding-top: 16px; font-size: 13px; }

    .sch-popular__sub { margin-bottom: 15px; font-size: 14px; }
    .sch-popular__grid { row-gap: 12px; }

    .sch-bulk__lead { margin-bottom: 16px; font-size: 14px; line-height: 1.55; }
    .sch-bulk__panel { padding: 16px 15px; gap: 13px; }
    .sch-bulk__panel-copy h3 { font-size: 17px; }
    .sch-bulk__panel-copy p { font-size: 14px; }

    .sch-year__sub { margin-bottom: 24px; font-size: 16px; }
    .sch-year__item { padding: 14px 13px 15px; }
    .sch-year__item h3 { font-size: 17px; }
    .sch-year__when { margin-bottom: 11px; font-size: 14px; }
    .sch-year__item p { font-size: 14px; line-height: 1.5; }

    .sch-faq .sch-h2 { margin-bottom: 12px; }
    .sch-accordion__q { font-size: 15px; padding: 15px 2px; }
    .sch-accordion__a { padding-bottom: 16px; }
    .sch-accordion__a p { font-size: 14px; line-height: 1.55; }

    .sch-final p { margin-bottom: 18px; font-size: 15px; }
    .sch-rating__txt { font-size: 13px; }
    .sch-review__meta { font-size: 12px; }
}

@media (max-width: 575px) {
    /* the mobile frame shows the product tiles without the overlaid button */
    .sch-pop__cta { display: none; }
}

@media (max-width: 380px) {
    .sch-h1 { font-size: 36px; }
    .sch-hero__points { gap: 6px 8px; }
    .sch-hero__points li { font-size: 11px; gap: 3px; }
    .sch-hero__points .sch-check {
        width: 12px;
        height: 12px;
        flex: 0 0 12px;
    }
    .sch-trust__logos img { max-height: 22px; }
}

/* ==========================================================================
   Large screens (>= 1600px)

   Two things go wrong above ~1620px and both are fixed here.

   1. WIDTH. The site header (`#js-header-con`) is `container-fuild px-lg-10`,
      so it is full-bleed with a 10rem gutter from 1500px up. Bootstrap's
      `.container` stops at 1320px. They happen to line up around 1600px, but
      past that the header keeps widening while the page content stays put —
      at 1920px the header spans 1600px and the content only 1266px, which is
      what makes the page read as a narrow, floating column. These sections
      therefore adopt the header's own gutter so the two stay flush.

   2. SCALE. Every size below was measured off the 1440px Figma frame and then
      frozen, so at 1920px the type is ~25% small for the space it sits in.
      Headings ride their clamp() up on their own; everything else is stepped
      here, keeping the frame's proportions rather than its pixel values.
   ========================================================================== */
@media (min-width: 1600px) {
    .sch-hero > .container,
    .sch-trust > .container,
    .sch-why > .container,
    .sch-steps > .container,
    .sch-social > .container,
    .sch-quote > .container,
    .sch-merch > .container,
    .sch-cats > .container,
    .sch-popular > .container,
    .sch-bulk > .container,
    .sch-year > .container,
    .sch-faq > .container,
    .sch-final > .container,
    .cg-banner > .container,
    .cg-boxes > .container {
        max-width: none;
        padding-left: 10rem;
        padding-right: 10rem;
    }

    /* the photo strip deliberately bleeds past the content column, so it keeps
       a narrower gutter than the containers above rather than a fixed cap */
    .sch-gallery__strip {
        max-width: none;
        gap: 26px;
        padding-left: 7rem;
        padding-right: 7rem;
        padding-bottom: 96px;
    }

    /* The carousel stays three-up at every desktop size, and three review cards
       stretched across the full 1600px gutter would be ~530px of mostly empty
       card. Hold this one container near the 1440-frame card width instead —
       must come after the group rule above to win. */
    .sch-social > .container {
        max-width: 1500px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* --- section rhythm --- */
    .sch-hero    { padding: 36px 0 84px; }
    .sch-trust   { padding: 44px 0; }
    .sch-why     { padding: 78px 0 86px; }
    .sch-steps   { padding: 76px 0 82px; }
    .sch-social  { padding: 58px 0 80px; }
    .sch-quote   { padding: 84px 0 92px; }
    .sch-popular { padding: 78px 0 86px; }
    .sch-bulk    { padding: 70px 0 76px; }
    .sch-year    { padding: 86px 0 94px; }
    .sch-faq     { padding: 72px 0 80px; }
    .sch-final   { padding: 68px 0 74px; }

    /* --- shared --- */
    /* second clamp leg: starts where the 1440-frame ceiling left off, so
       nothing jumps at the breakpoint and it keeps scaling from there */
    .sch-h1 { font-size: clamp(64px, 4vw, 76px); }
    .sch-h2 { font-size: clamp(40px, 2.5vw, 48px); }
    .sch-hero__sub { font-size: clamp(21px, 1.25vw, 24px); }
    .sch-trust__title { font-size: clamp(28px, 1.8vw, 34px); }

    .sch-btn { padding: 16px 34px; font-size: 18px; }
    .sch-btn--block { padding: 20px 34px; font-size: 20px; }
    .sch-check { width: 22px; height: 22px; flex: 0 0 22px; }
    .sch-rating__txt { font-size: 16px; }
    .sch-rating--center { margin-bottom: 42px; }

    /* --- hero --- */
    .sch-badge { margin-bottom: 30px; padding: 11px 22px; font-size: 15px; }
    .sch-badge svg { width: 18px; height: 18px; }
    .sch-hero__sub { margin-bottom: 36px; }
    .sch-hero__points { gap: 12px 28px; margin: 28px 0 18px; }
    .sch-hero__points li { font-size: 17px; }

    /* --- trust bar --- */
    .sch-trust__row { gap: 26px 52px; }
    .sch-trust__logos { gap: 24px 66px; }
    .sch-trust__logos--church,
    .sch-trust__logos--youth,
    .sch-trust__logos--sb { gap: 24px 48px; }
    .sch-trust__logos--health { gap: 24px 72px; }
    .sch-logo--bismarck   { height: 46px; }
    .sch-logo--csba       { height: 35px; }
    .sch-logo--peddie     { height: 17px; }
    .sch-logo--quinnipiac { height: 36px; }
    .sch-logo--prescott   { height: 30px; }
    .sch-logo--tulane     { height: 42px; }
    .sch-logo--corp       { height: 40px; }

    .sch-logo--church-1 { height: 44px; }
    .sch-logo--church-2 { height: 44px; }
    .sch-logo--church-3 { height: 50px; }
    .sch-logo--church-4 { height: 40px; }
    .sch-logo--church-5 { height: 34px; }
    .sch-logo--church-6 { height: 46px; }

    .sch-logo--youth-1 { height: 38px; }
    .sch-logo--youth-2 { height: 50px; }
    .sch-logo--youth-3 { height: 50px; }
    .sch-logo--youth-4 { height: 48px; }
    .sch-logo--youth-6 { height: 36px; }

    .sch-logo--health-1 { height: 40px; }
    .sch-logo--health-2 { height: 40px; }
    .sch-logo--health-3 { height: 38px; }
    .sch-logo--health-4 { height: 40px; }
    .sch-logo--health-5 { height: 48px; }
    .sch-logo--health-6 { height: 48px; }

    .sch-logo--sb-1 { height: 40px; }
    .sch-logo--sb-2 { height: 32px; }
    .sch-logo--sb-3 { height: 48px; }
    .sch-logo--sb-4 { height: 38px; }
    .sch-logo--sb-5 { height: 32px; }
    .sch-logo--sb-6 { height: 46px; }

    /* --- why cards --- */
    .sch-why .sch-h2 { margin-bottom: 42px; }
    .sch-why__grid { row-gap: 26px; }
    .sch-card { padding: 32px 30px 34px; border-radius: 16px; }
    .sch-card__icon { margin-bottom: 20px; }
    .sch-card__icon svg { width: 31px; height: 31px; }
    .sch-card h3 { font-size: 22px; margin-bottom: 12px; }
    .sch-card p { font-size: 17px; }

    /* --- three steps --- */
    .sch-steps .sch-h2 { margin-bottom: 54px; }
    .sch-step__icon { width: 92px; height: 92px; margin-bottom: 24px; }
    /* each glyph keeps its own aspect, so all three scale by the same factor */
    .sch-ico--box   { width: 54px; height: 56px; }
    .sch-ico--pad   { width: 37px; height: 50px; }
    .sch-ico--truck { width: 57px; height: 40px; }
    .sch-step::before { top: 46px; }
    .sch-step h3 { font-size: 22px; margin-bottom: 10px; }
    .sch-step p { font-size: 17px; }

    /* --- reviews --- */
    .sch-review { padding: 28px 28px 26px; min-height: 260px; }
    .sch-review .sch-stars { font-size: 22px; }
    .sch-review p { font-size: 16px; }
    .sch-review__name { font-size: 17px; }
    .sch-review__meta { font-size: 13px; }
    .sch-review-date time { font-size: 15px; }

    /* --- quote form --- */
    .sch-quote__copy p { font-size: 18px; }
    .sch-quote__points { margin: 28px 0; }
    .sch-quote__points li { margin-bottom: 14px; font-size: 18px; }
    .sch-form { padding: 36px 36px 40px; border-radius: 18px; }
    .sch-form__title { font-size: 23px; }
    .sch-form__sub { margin-bottom: 24px; padding-bottom: 22px; font-size: 17px; }
    .sch-field { margin-bottom: 18px; }
    .sch-field label { font-size: 13px; }
    .sch-field input,
    .sch-field select { height: 58px; font-size: 17px; }
    .sch-form__note { font-size: 14px; }

    /* --- essentials for schools --- */
    .sch-cats { padding: 70px 0 78px; }
    .sch-cats__sub { margin-bottom: 36px; font-size: 18px; }
    .sch-cats__label { margin-top: 14px; font-size: 17px; }

    /* --- most ordered by schools --- */
    .sch-merch { padding: 78px 0 86px; }
    .sch-merch__sub { margin-bottom: 30px; font-size: 18px; }
    .sch-slider .slick-prev,
    .sch-slider .slick-next { width: 54px; height: 54px; background-size: 23px 23px; }
    .sch-slider .slick-prev { left: -66px; }
    .sch-slider .slick-next { right: -66px; }
    .sch-merch__badge { top: 14px; left: 14px; padding: 8px 15px 8px 13px; font-size: 12px; }
    .sch-merch__badge svg { width: 15px; height: 15px; flex: 0 0 15px; }
    .sch-merch__body { padding-top: 17px; }
    .sch-merch__name { font-size: 18px; }
    .sch-merch__meta { font-size: 14px; }
    .sch-merch__price { font-size: 14px; }
    .sch-merch__price b { font-size: 21px; }
    .sch-merch__rating .sch-stars { font-size: 17px; }
    .sch-merch__reviews { font-size: 14px; }
    .sch-merch__ask { margin-top: 42px; padding-top: 30px; font-size: 18px; }

    /* --- most popular --- */
    .sch-popular__sub { margin-bottom: 34px; font-size: 18px; }
    .sch-popular__grid { row-gap: 26px; }
    .sch-pop__copy { padding: 30px; }
    .sch-pop__title { font-size: 24px; line-height: 28px; }
    .sch-pop__desc { font-size: 18px; line-height: 23px; }
    .sch-pop__cta { font-size: 17px; padding: 13px 26px; }

    /* --- bulk pricing --- */
    .sch-eyebrow { font-size: 15px; }
    .sch-bulk__lead { margin-bottom: 36px; font-size: 18px; }
    .sch-bulk__panel { padding: 32px 38px; border-radius: 16px; }
    .sch-bulk__panel-copy h3 { font-size: 24px; }
    .sch-bulk__panel-copy p { font-size: 18px; }

    /* --- seasonal timeline --- */
    .sch-year__sub { margin-bottom: 64px; font-size: 20px; }
    .sch-year__item h3 { font-size: 24px; }
    .sch-year__when { margin-bottom: 26px; font-size: 18px; }
    .sch-year__dot { height: 26px; margin-bottom: 26px; }
    .sch-year__dot::after { width: 18px; height: 18px; border-width: 5px; }
    .sch-year__item p { font-size: 18px; }

    /* --- faq --- */
    /* the questions are short: let them sit in a readable column rather than
       stretch the chevron to the far edge of a 1600px row */
    .sch-faq .sch-h2 { margin-bottom: 38px; }
    .sch-accordion { max-width: 1400px; }
    .sch-accordion__q { padding: 26px 4px; font-size: 19px; }
    .sch-accordion__chev { flex: 0 0 22px; width: 22px; height: 22px; }
    .sch-accordion__a { padding-bottom: 26px; }
    .sch-accordion__a p { font-size: 18px; }

    /* --- final cta --- */
    .sch-final p { margin-bottom: 32px; font-size: 19px; }
    .sch-final__actions { gap: 18px 32px; }
}

/* Ultra-wide: stop tracking the header and settle on a fixed measure, so line
   lengths and the six-up photo strip stay sane instead of stretching forever.
   The gallery cap stays above the content cap to preserve the bleed. */
/* ==========================================================================
   Very large screens (>= 2100px)

   The 1600 tier already makes the sections track the header's 10rem gutter, so
   at 2297px the content column is ~1977px wide — but the type is still sized
   for the ~1600px canvas of a 1920 screen and reads small in it. This is the
   same treatment the 1600 tier gave 1920: a third clamp leg on the headings and
   one more step on everything that was frozen.

   The photo strip does NOT widen here. Its source images are only ~256px wide,
   and past roughly 1810px of strip the six cells start upscaling visibly, so it
   caps out while the text columns keep going.
   ========================================================================== */
@media (min-width: 2100px) {
    /* third clamp leg — starts where the 1600 tier's ceiling left off */
    .sch-h1 { font-size: clamp(76px, 3.6vw, 88px); }
    .sch-h2 { font-size: clamp(48px, 2.3vw, 56px); }
    .sch-hero__sub { font-size: clamp(24px, 1.15vw, 27px); }
    .sch-trust__title { font-size: clamp(34px, 1.6vw, 38px); }

    /* --- section rhythm --- */
    .sch-hero    { padding: 44px 0 100px; }
    .sch-trust   { padding: 52px 0; }
    .sch-why     { padding: 92px 0 100px; }
    .sch-steps   { padding: 90px 0 96px; }
    .sch-social  { padding: 68px 0 92px; }
    .sch-quote   { padding: 98px 0 106px; }
    .sch-merch   { padding: 92px 0 100px; }
    .sch-cats    { padding: 82px 0 90px; }
    .sch-popular { padding: 92px 0 100px; }
    .sch-bulk    { padding: 82px 0 88px; }
    .sch-year    { padding: 100px 0 108px; }
    .sch-faq     { padding: 84px 0 92px; }
    .sch-final   { padding: 80px 0 86px; }

    /* --- shared --- */
    .sch-btn { padding: 18px 38px; font-size: 20px; }
    .sch-btn--block { padding: 22px 38px; font-size: 22px; }
    .sch-check { width: 24px; height: 24px; flex: 0 0 24px; }
    .sch-rating__txt { font-size: 17px; }
    .sch-badge { margin-bottom: 34px; padding: 12px 25px; font-size: 16px; }
    .sch-badge svg { width: 20px; height: 20px; }
    .sch-hero__points li { font-size: 19px; }
    .sch-logo--bismarck   { height: 56px; }
    .sch-logo--csba       { height: 43px; }
    .sch-logo--peddie     { height: 21px; }
    .sch-logo--quinnipiac { height: 45px; }
    .sch-logo--prescott   { height: 37px; }
    .sch-logo--tulane     { height: 51px; }
    .sch-logo--corp       { height: 48px; }

    .sch-trust__logos--church,
    .sch-trust__logos--youth,
    .sch-trust__logos--sb { gap: 28px 56px; }
    .sch-trust__logos--health { gap: 28px 84px; }

    .sch-logo--church-1 { height: 52px; }
    .sch-logo--church-2 { height: 52px; }
    .sch-logo--church-3 { height: 58px; }
    .sch-logo--church-4 { height: 48px; }
    .sch-logo--church-5 { height: 40px; }
    .sch-logo--church-6 { height: 54px; }

    .sch-logo--youth-1 { height: 44px; }
    .sch-logo--youth-2 { height: 58px; }
    .sch-logo--youth-3 { height: 58px; }
    .sch-logo--youth-4 { height: 56px; }
    .sch-logo--youth-6 { height: 42px; }

    .sch-logo--health-1 { height: 46px; }
    .sch-logo--health-2 { height: 46px; }
    .sch-logo--health-3 { height: 44px; }
    .sch-logo--health-4 { height: 46px; }
    .sch-logo--health-5 { height: 56px; }
    .sch-logo--health-6 { height: 56px; }

    .sch-logo--sb-1 { height: 46px; }
    .sch-logo--sb-2 { height: 36px; }
    .sch-logo--sb-3 { height: 56px; }
    .sch-logo--sb-4 { height: 44px; }
    .sch-logo--sb-5 { height: 36px; }
    .sch-logo--sb-6 { height: 54px; }

    /* --- why cards --- */
    .sch-card { padding: 36px 34px 38px; }
    .sch-card__icon svg { width: 34px; height: 34px; }
    .sch-card h3 { font-size: 25px; }
    .sch-card p { font-size: 19px; }

    /* --- three steps --- */
    .sch-step__icon { width: 104px; height: 104px; }
    .sch-ico--box   { width: 61px; height: 63px; }
    .sch-ico--pad   { width: 41px; height: 56px; }
    .sch-ico--truck { width: 64px; height: 45px; }
    .sch-step::before { top: 52px; }
    .sch-step h3 { font-size: 25px; }
    .sch-step p { font-size: 19px; }

    /* --- quote form --- */
    .sch-quote__copy p,
    .sch-quote__points li { font-size: 20px; }
    .sch-form { padding: 42px 42px 46px; }
    .sch-form__title { font-size: 26px; }
    .sch-form__sub { font-size: 19px; }
    .sch-field label { font-size: 14px; }
    .sch-field input,
    .sch-field select { height: 64px; font-size: 19px; }

    /* --- most ordered / essentials --- */
    .sch-merch__sub,
    .sch-cats__sub { font-size: 20px; }
    .sch-merch__name { font-size: 20px; }
    .sch-merch__meta,
    .sch-merch__price,
    .sch-merch__reviews { font-size: 15px; }
    .sch-merch__price b { font-size: 24px; }
    .sch-merch__ask { font-size: 20px; }
    .sch-cats__label { font-size: 19px; }
    .sch-slider .slick-prev,
    .sch-slider .slick-next { width: 60px; height: 60px; background-size: 26px 26px; }
    .sch-slider .slick-prev { left: -74px; }
    .sch-slider .slick-next { right: -74px; }

    /* --- remaining sections --- */
    .sch-popular__sub { font-size: 20px; }
    .sch-pop__title { font-size: 27px; line-height: 31px; }
    .sch-pop__desc { font-size: 20px; }
    .sch-eyebrow { font-size: 16px; }
    .sch-bulk__lead { font-size: 20px; }
    .sch-bulk__panel-copy h3 { font-size: 27px; }
    .sch-bulk__panel-copy p { font-size: 20px; }
    .sch-year__sub { font-size: 22px; }
    .sch-year__item h3 { font-size: 27px; }
    .sch-year__when { font-size: 20px; }
    .sch-year__item p { font-size: 20px; }
    .sch-accordion { max-width: 1560px; }
    .sch-accordion__q { font-size: 21px; padding: 30px 4px; }
    .sch-accordion__a p { font-size: 20px; }
    .sch-final p { font-size: 21px; }
    /* --- reviews ---
       Deliberately still 3-up (the carousel is capped at 1500px in the 1600 tier
       so three cards do not stretch). On a 2100+ canvas that cap is what makes
       the block look small, so the container widens and the card scales with it
       — the slide count is untouched. 1760 stays inside the content column even
       at exactly 2100, where the header gutter leaves 1780. */
    .sch-social > .container { max-width: 1760px; }
    .sch-rating--center { margin-bottom: 50px; }
    .sch-review { padding: 34px 34px 32px; min-height: 300px; border-radius: 16px; }
    .sch-review .sch-stars { font-size: 25px; margin-bottom: 15px; }
    .sch-review p { font-size: 19px; margin-bottom: 22px; }
    .sch-review__name { font-size: 20px; }
    .sch-review__meta { font-size: 15px; }
    .sch-review-date time { font-size: 17px; }
    .sch-reviews__carousel .slick-prev,
    .sch-reviews__carousel .slick-next { width: 56px; height: 56px; background-size: 24px 24px; }
    .sch-reviews__carousel .slick-prev { left: -28px; }
    .sch-reviews__carousel .slick-next { right: -28px; }
    .sch-reviews__carousel .slick-dots button { width: 11px; height: 11px; }
    .sch-merch__badge { font-size: 13px; padding: 9px 17px 9px 15px; }
    .sch-merch__badge svg { width: 16px; height: 16px; flex: 0 0 16px; }

    /* photo strip stops growing — see the note above */
    .sch-gallery__strip {
        max-width: 1856px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Ultra-wide: stop tracking the header and settle on a fixed measure, so line
   lengths stay readable instead of stretching forever. */
@media (min-width: 2560px) {
    .sch-hero > .container,
    .sch-trust > .container,
    .sch-why > .container,
    .sch-steps > .container,
    .sch-quote > .container,
    .sch-merch > .container,
    .sch-cats > .container,
    .sch-popular > .container,
    .sch-bulk > .container,
    .sch-year > .container,
    .sch-faq > .container,
    .sch-final > .container,
    .cg-banner > .container,
    .cg-boxes > .container {
        max-width: 2080px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    /* .sch-social is deliberately absent — it is already held at 1500px above,
       and .sch-gallery__strip keeps the 1856px cap from the 2100 tier. */
}

/* ==========================================================================
   SCROLL MOTION
   Both effects are applied by schools.js, never by the markup: .sch-reveal is
   only ever added to elements that start below the fold, so a no-JS visitor —
   and any crawler — gets the whole page painted normally.

   Distances and durations deliberately match the v2 Next.js storefront
   (.fade-up / .slide-in-left / .slide-in-right on dev44), so the two stacks
   feel like one brand: 40px over .8s, side entries 60px over .9s, default
   easing. A shorter, faster tween than this does not register while the
   visitor is actually scrolling.
   ========================================================================== */
.sch-reveal {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    will-change: opacity, transform;
}
.sch-reveal--left  { transform: translate3d(-60px, 0, 0); }
.sch-reveal--right { transform: translate3d(60px, 0, 0); }

/* The transition is armed a frame AFTER the hidden state paints. Declaring it
   on .sch-reveal itself makes every element animate its own way out on load,
   which fires a transitionend that releases will-change before the real
   reveal has even started. */
.sch-motion-ready .sch-reveal {
    transition: opacity .8s, transform .8s;
    transition-delay: var(--sch-delay, 0s);
}
.sch-motion-ready .sch-reveal--left,
.sch-motion-ready .sch-reveal--right {
    transition: opacity .9s, transform .9s;
    transition-delay: var(--sch-delay, 0s);
}
/* two classes deep, so it beats the --left/--right start positions */
.sch-reveal.is-in { opacity: 1; transform: none; }
/* dropped once the tween has finished so the compositor layer is released */
.sch-reveal.is-done { will-change: auto; }

/* Parallax moves decorative imagery only, never copy or controls. The layers
   live inside .sch-social / .sch-hero, whose padding (and overflow:hidden on
   .sch-social) absorbs the travel at both ends. will-change is held only while
   the page is actually scrolling. */
.sch-is-scrolling .sch-parallax { will-change: transform; }

/* ==========================================================================
   Corporate Gifting (/corporate-gifting)
   Same schools tokens / breakpoints. Only gifting-specific chrome lives here.
   ========================================================================== */
.cg-hero__build {
    margin: 10px 0 14px;
    font-size: 15px;
    color: var(--sch-body);
}

.cg-banner {
    background: var(--sch-ink);
    color: #fff;
    padding: 18px 0;
}
.cg-banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px 24px;
    flex-wrap: nowrap;
    text-align: center;
}
.cg-banner__text {
    margin: 0;
    flex: 0 1 auto;
    font-size: 16px;
    line-height: 1.45;
    color: #fff;
    white-space: nowrap;
}
.cg-banner__btn {
    flex: 0 0 auto;
    white-space: nowrap;
    background: var(--sch-cyan) !important;
    color: var(--sch-ink) !important;
}
.cg-banner__btn:hover,
.cg-banner__btn:focus {
    color: var(--sch-ink) !important;
    text-decoration: none;
}

.cg-boxes {
    background: #fff;
    padding: 64px 0 70px;
}
.cg-boxes__sub {
    max-width: 62ch;
    margin: 0 0 34px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--sch-body);
}
.cg-boxes__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 18px;
}
.cg-box {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* Extra gift sets only on large (4-across) layouts — 4 + 3 + Custom Box. */
.cg-box--lg-only {
    display: none;
}
.cg-box__media {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--sch-field);
    aspect-ratio: 1 / 1;
    margin-bottom: 14px;
    border: 1px solid var(--sch-line);
}
.cg-box__count {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--sch-ink);
    pointer-events: none;
}
.cg-box__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transform: scale(1);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.cg-box:hover .cg-box__media img,
.cg-box:focus-within .cg-box__media img {
    transform: scale(1.09);
}
.cg-box__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 8px;
}
.cg-box__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sch-ink);
}
.cg-box__price {
    margin: 0;
    font-size: 15px;
    color: var(--sch-ink);
    white-space: nowrap;
}

.cg-box__price span {
    font-weight: 400;
    font-size: 13px;
    color: var(--sch-body);
}
.cg-box__items {
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sch-body);
}
.cg-box__items--empty {
    visibility: hidden;
}
/* Hover CTA over the image — same navy button style as page .sch-btn--navy. */
.cg-box__hover-cta {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px);
    white-space: nowrap;
    padding: 12px 18px;
    font-size: 14px;
    transition: opacity .2s ease, transform .2s ease, filter .15s ease;
}
.cg-box:hover .cg-box__hover-cta,
.cg-box:focus-within .cg-box__hover-cta {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Last-tile Custom Box — navy panel matching budget-first design ref. */
.cg-box--custom {
    background: #1F2A37;
    border-radius: 12px;
    color: #fff;
    min-height: 100%;
}
.cg-box__custom-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    height: 100%;
    min-height: 100%;
    padding: 28px 24px;
    box-sizing: border-box;
}
.cg-box__custom-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #C9CFD8;
}
.cg-box__custom-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #fff;
}
.cg-box__custom-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #DCE1E8;
}
.cg-box__custom-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 6px;
    padding: 0 22px;
    border-radius: 999px;
    background: #fff;
    color: #1F2A37 !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
}
.cg-box__custom-btn:hover,
.cg-box__custom-btn:focus {
    background: #F2F4F7;
    color: #1F2A37 !important;
    text-decoration: none !important;
}

.cg-boxes__more {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}
.cg-boxes__all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 36px;
    border-radius: 999px;
    border: 1.5px solid #1F2A37;
    background: transparent;
    color: #1F2A37 !important;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
}
.cg-boxes__all:hover,
.cg-boxes__all:focus {
    background: #1F2A37;
    color: #fff !important;
    text-decoration: none !important;
}

.cg-boxes__note {
    margin: 28px 0 0;
    padding-top: 22px;
    border-top: 1px solid rgba(26, 42, 58, 0.12);
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sch-body);
}

.cg-dates__tag {
    display: inline-block;
    margin: 8px 0 10px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--sch-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.cg-dates__tag--rec {
    background: var(--sch-cyan);
    color: var(--sch-ink);
}
.cg-dates .sch-year__item h3 {
    white-space: nowrap;
}
.cg-dates .sch-year__when { display: none; }

.cg-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--sch-body);
    font-size: 12px;
}

@media (max-width: 1199px) {
    .cg-boxes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; }
}
@media (max-width: 991px) {
    .cg-boxes { padding: 48px 0 54px; }
    .cg-boxes__sub { margin-bottom: 26px; font-size: 16px; }
    .cg-boxes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
    .cg-banner__text { font-size: 15px; }
    .cg-box__custom-title { font-size: 20px; }
    .cg-boxes__more { margin-top: 28px; }
    .cg-boxes__all { min-height: 52px; padding: 0 30px; font-size: 16px; }
}
@media (max-width: 767px) {
    .cg-hero__build { font-size: 14px; }
    .cg-banner { padding: 16px 0; }
    .cg-banner__inner { gap: 12px 16px; }
    .cg-banner__text { font-size: 13px; }
    .cg-banner__btn { flex-shrink: 0; padding: 11px 16px; font-size: 13px; }
    .cg-boxes { padding: 34px 0 36px; }
    .cg-boxes__sub { margin-bottom: 18px; font-size: 14px; }
    .cg-boxes__grid { gap: 18px 12px; }
    .cg-box__media { margin-bottom: 10px; border-radius: 10px; }
    .cg-box__count { top: 10px; left: 10px; padding: 4px 9px; font-size: 11px; }
    .cg-box__title { font-size: 14px; }
    .cg-box__price { font-size: 13px; }
    .cg-box__price span { font-size: 12px; }
    .cg-box__items { font-size: 12px; }
    .cg-box__hover-cta {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
        padding: 10px 14px;
        font-size: 13px;
        bottom: 12px;
    }
    .cg-box__custom-inner { padding: 22px 18px; gap: 12px; }
    .cg-box__custom-title { font-size: 18px; }
    .cg-box__custom-text { font-size: 13px; }
    .cg-box__custom-btn { min-height: 42px; font-size: 13px; padding: 0 18px; }
    .cg-boxes__more { margin-top: 24px; }
    .cg-boxes__all { width: 100%; max-width: 320px; min-height: 48px; padding: 0 24px; font-size: 15px; }
    .cg-boxes__note { margin-top: 22px; padding-top: 16px; text-align: left; font-size: 13px; }
    .cg-dates__tag { margin: 6px 0 8px; font-size: 10px; padding: 4px 10px; }
}
@media (max-width: 575px) {
    .cg-boxes__grid { grid-template-columns: 1fr; gap: 22px; max-width: 420px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1400px) {
    .cg-boxes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cg-box--lg-only { display: flex; }
}
@media (min-width: 1600px) {
    .cg-boxes { padding: 84px 0 92px; }
    .cg-boxes__sub { margin-bottom: 40px; font-size: 18px; }
    .cg-boxes__grid { gap: 28px 22px; }
    .cg-box__title { font-size: 18px; }
    .cg-box__price { font-size: 16px; }
    .cg-box__items { font-size: 15px; }
    .cg-box__hover-cta { padding: 13px 20px; font-size: 15px; bottom: 18px; }
    .cg-box__custom-title { font-size: 26px; }
    .cg-box__custom-text { font-size: 16px; }
    .cg-box__custom-btn { min-height: 52px; font-size: 16px; padding: 0 28px; }
    .cg-boxes__more { margin-top: 44px; }
    .cg-boxes__all { min-height: 56px; padding: 0 40px; font-size: 18px; }
    .cg-boxes__note { font-size: 16px; }
    .cg-banner { padding: 22px 0; }
    .cg-banner__text { font-size: 18px; }
    .cg-hero__build { font-size: 17px; }
}

/* honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .sch-btn,
    .sch-accordion__chev,
    .sch-merch__media img,
    .sch-cats__media img,
    .cg-box__media img,
    .cg-box__hover-cta { transition: none; }
    .sch-merch__card:hover .sch-merch__media img,
    .sch-cats__tile:hover .sch-cats__media img,
    .cg-box:hover .cg-box__media img,
    .cg-box:focus-within .cg-box__media img { transform: none; }
    .cg-box:hover .cg-box__hover-cta,
    .cg-box:focus-within .cg-box__hover-cta { transform: translateX(-50%) translateY(0); }
    /* !important because schools.js writes the parallax transform inline */
    .sch-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .sch-parallax { transform: none !important; }
}