@import url('pages.css');
@import url('home.css');
@import url('footer.css');
@import url('company.css');

/* RACE landing page — mobile-first enhancements, no dependencies. */
:root {
    --navy: #061d70;
    --pink: #ff174b;
    --green: #00ad2c;
    --container: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; color: var(--navy); font-family: "Trebuchet MS", Arial, sans-serif; font-size: 15px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #0089e5; outline-offset: 5px; }
p { margin: 0 0 16px; line-height: 1.35; }
h1, h2, h3 { margin: 0; line-height: 1.04; }
.container { width: min(var(--container), 92%); margin-inline: auto; }
.skip-link { position: fixed; top: -80px; left: 12px; padding: 12px; background: white; z-index: 99; }
.skip-link:focus { top: 8px; }
.header { background: white; position: relative; z-index: 10; }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand img { width: 153px; }
nav { display: flex; align-items: center; gap: 42px; }
nav a { padding-block: 25px; position: relative; font-size: 14px; }
nav a::after { content: ""; height: 3px; position: absolute; bottom: 15px; left: 0; right: 0; background: var(--pink); transform: scaleX(0); transition: transform .2s; }
nav a:hover::after, nav a.active::after { transform: scaleX(1); }
.button { border: 1px solid var(--pink); background: var(--pink); color: white; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 30px; padding: 12px 27px; font-weight: bold; font-size: 14px; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 6px 15px #0002; }
.button-outline { background: transparent; border-color: white; }
.button-light { background: white; color: var(--pink); font-weight: normal; }
.menu-toggle { display: none; }
.hero { overflow: hidden; background: radial-gradient(ellipse at 55% 0%, #00a4e5, transparent 65%), linear-gradient(135deg, #004c92, #03153f); color: white; }
.hero-inner { display: grid; grid-template-columns: 42% 58%; min-height: 520px; position: relative; }
.hero-copy { position: relative; padding: 37px 0 20px; z-index: 3;  }
.hero-eyebrow { font-size: 29px; margin-bottom: 0; }
h1 { font-size: clamp(64px, 7.5vw, 104px); font-style: italic; letter-spacing: -5px; line-height: .94; transform: rotate(-4deg); margin: 8px 0 34px; }
h1 span { color: #ffdc35; }
h1::after { content: ""; display: block; width: 79%; height: 9px; background: var(--pink); border-radius: 100%; transform: rotate(-5deg); margin: 9px 0 0 24px; }
.hero-description { font-size: 19px; }
.actions { display: flex; gap: 14px; }
.hero-features { display: flex; justify-content: space-between; padding: 0; margin: 27px 0 0; list-style: none; gap: 12px; text-align: center; font-size: 14px; }
.hero-features img { margin: 0 auto 8px; }
.hero-art { position: relative; margin-right: -7vw; background: radial-gradient(ellipse at 70% 7%, #fff2a6 0, #d0f6ff 40%, transparent 40.3%); }
.art-motto { position: absolute; top: 7px; right: 95px; color: var(--navy); font-size: 33px; line-height: .95; font-weight: bold; font-style: italic; transform: rotate(-14deg); z-index: 2; }
.art-motto span { padding-left: 48px; }
.sun { position: absolute; width: 210px; height: 210px; background: #ffe442; border-radius: 50%; top: 65px; left: 27%; }
.cloud { width: 75px; height: 28px; background: white; border-radius: 50px; position: absolute; top: 72px; left: 17%; box-shadow: 15px -15px 0 -2px white, 36px -6px 0 -5px white; }
.notebook-lineup { position: absolute; left: -3%; right: 5%; bottom: 97px; display: flex; align-items: end; z-index: 2; }
.hero-book { width: 23%; max-width: 175px; margin-right: -2.8%; filter: drop-shadow(5px 8px 3px #0004); }
.hero-book-1 { transform: rotate(-2deg); }
.hero-book-2 { transform: rotate(1deg) scale(1.06); }
.hero-book-3 { transform: rotate(2deg) scale(1.04); }
.hero-book-4 { transform: rotate(4deg); }
.hero-book-5 { transform: rotate(3deg) scale(.94); }
.desk { position: absolute; height: 167px; width: 110%; bottom: -25px; left: -10%; background: linear-gradient(12deg, #fff6e2, #f6ebdf); border-radius: 50% 0 0 45%; }
.pencil { position: absolute; width: 190px; height: 9px; background: #ffbd17; border-bottom: 3px solid #ee8504; transform: rotate(-10deg); border-radius: 4px; left: 65px; bottom: 70px; }
.pencil::after { content: ""; position: absolute; right: -17px; border-left: 18px solid #d9ad72; border-top: 4px solid transparent; border-bottom: 5px solid transparent; }
.pencil-two { background: #fa285b; transform: rotate(8deg); left: 85px; bottom: 56px; }
.pencil-three { background: #23bae7; transform: rotate(-5deg); left: 105px; bottom: 83px; }
.book-stack { position: absolute; width: 205px; height: 30px; border: 5px solid #038bc0; border-left-width: 10px; border-radius: 5px; background: #fff9db; right: 130px; bottom: 55px; transform: rotate(9deg); box-shadow: 6px 11px 0 -1px #ffcc1b, 7px 20px 0 -3px #fc4560; }
.section { padding: 26px 0; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; }
.section-heading h2 { font-size: 46px; letter-spacing: -2px; }
.section-heading h2 small { display: block; font-size: 27px; letter-spacing: -1px; }
.section-heading p { margin: 6px 0 0; color: #345182; }
.category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; }
.category { border-radius: 14px; height: 230px; padding: 15px 14px 0; position: relative; overflow: hidden; transition: transform .2s; }
.category:hover { transform: translateY(-5px); }
.category-1 { background: #d4f2ff; }.category-2 { background: #ffe2f2; }.category-3 { background: #fffac4; }.category-4 { background: #dcffdf; }.category-5 { background: #ece4ff; }.category-6 { background: #ffe8d4; }
.category-heading { display: flex; align-items: center; gap: 9px; position: relative; z-index: 2; }
.category-heading img { width: 38px; }
.category-heading h3 { font-size: 14px; line-height: 1.15; }
.category-notebook { height: 178px; width: auto; margin: 15px auto 0; transform: rotate(-6deg); filter: drop-shadow(3px 6px 3px #0002); }
.circle-arrow { width: 34px; height: 34px; border-radius: 50%; background: white; color: var(--pink); display: grid; place-items: center; position: absolute; right: 9px; bottom: 10px; box-shadow: 0 2px 9px #0001; font-size: 22px; }
.learning { background: linear-gradient(115deg, #e4f7ff, #fff, #e0f4ff); overflow: hidden; }
.learning-inner { display: grid; grid-template-columns: 49% 30% 21%; align-items: center; min-height: 290px; }
.students { width: 108%; max-width: none; margin-left: -5%; align-self: end; }
.learning-copy { position: relative; z-index: 2; padding: 20px 0 20px 12px; }
.learning-copy h2 { font-size: 32px; letter-spacing: -1.4px; margin-bottom: 10px; }
h2 span { color: var(--pink); }
.learning-copy p { font-size: 14px; margin-bottom: 12px; }
.learning-books { align-self: end; width: 100%; }
.why { text-align: center; padding: 22px 0 26px; }
.why h2 { font-size: 39px; letter-spacing: -1.5px; }
.section-intro { color: #345182; font-size: 14px; margin: 9px 0 17px; }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; width: 88%; margin: auto; }
.benefit { background: #eaf8ff; padding: 14px 18px; border-radius: 13px; }
.benefit:nth-child(2) { background: #fff0f7; }.benefit:nth-child(4) { background: #edfceb; }
.benefit img { width: 43px; margin: 0 auto 10px; }
.benefit h3 { font-size: 15px; margin-bottom: 8px; }
.benefit p { margin: 0; color: #345182; font-size: 14px; }
.sustainability { overflow: hidden; background: radial-gradient(ellipse at 60% 0%, #fff 0, transparent 70%), linear-gradient(165deg, #d6f7c4, #eaffdc 70%, #77cf58); }
.sustainability-inner { display: grid; grid-template-columns: 34% 28% 38%; align-items: center; min-height: 205px; }
.earth { height: 225px; width: auto; margin-top: -10px; margin-bottom: -25px; }
.green-motto { color: #16842d; font-family: Georgia, serif; font-size: 31px; line-height: 1.05; font-style: italic; transform: rotate(-10deg); margin: 0; }
.sustainability-copy { padding: 18px 0; }
.sustainability-copy h2 { font-size: 26px; letter-spacing: -1px; }
.sustainability-copy p { font-size: 14px; margin: 8px 0 12px; max-width: 370px; }
.button-green { background: var(--green); border-color: var(--green); padding: 10px 26px; }
.sustainability-detail { padding: 12px; background: #ffffffb0; border-radius: 8px; }
footer { color: white; background: #001a31; }
.footer-grid { display: grid; grid-template-columns: 1.6fr .8fr 1fr 1.3fr; gap: 38px; padding: 22px 0 18px; }
.footer-brand img { filter: invert(1); }
.footer-brand .company { font-size: 10px; margin-top: 8px; }
footer p, footer li, footer label { font-size: 12px; color: #d5dfec; }
footer h2 { font-size: 14px; margin: 0 0 12px; }
footer ul { padding: 0; margin: 0; list-style: none; line-height: 1.5; }
footer a:hover { color: #ffcc32; }
.email-row { display: flex; margin-top: 6px; }
.email-row input { width: 100%; min-width: 0; border: 1px solid #4b6274; background: #ffffff0c; color: white; padding: 10px; border-radius: 5px 0 0 5px; }
.email-row input::placeholder { color: #bdc9d7; }
.email-row button { border: 0; background: var(--pink); color: white; width: 42px; border-radius: 0 5px 5px 0; }
#form-status { margin-top: 8px; }
.copyright { border-top: 1px solid #ffffff20; font-size: 11px; padding: 9px 0; color: #d5dfec; }
@media (min-width: 1500px) { .hero-art { margin-right: -80px; } }
@media (max-width: 1100px) {
    .hero-inner { min-height: 475px; }
    .hero-copy { padding-top: 30px; }
    .hero-eyebrow { font-size: 25px; }
    .hero-description { font-size: 17px; }
    .hero-features { font-size: 12px; }
    .actions .button { padding: 11px 19px; font-size: 12px; }
    .category { padding-inline: 10px; height: 217px; }
    .category-heading { gap: 6px; }.category-heading img { width: 31px; }.category-heading h3 { font-size: 12px; }
    .learning-copy h2 { font-size: 28px; }.learning-copy p { font-size: 13px; }
    .footer-grid { gap: 24px; }
}
@media (max-width: 800px) {
    .header-inner { min-height: 70px; gap: 16px; }.brand img { width: 130px; }
    .menu-toggle { display: flex; flex-direction: column; gap: 5px; order: 3; padding: 10px; border: 0; background: transparent; }
    .menu-toggle span { width: 24px; height: 2px; background: var(--navy); transition: transform .2s; }
    .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
    nav { display: none; position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; gap: 0; background: white; padding: 10px 4%; box-shadow: 0 10px 15px #0002; }
    nav.open { display: flex; }nav a { width: 100%; padding: 15px; }nav a::after { bottom: 6px; left: 15px; right: auto; width: 30px; }
    .header-cta { margin-left: auto; padding: 10px 17px; font-size: 12px; }
    .hero-inner { grid-template-columns: 1fr; }
    .hero-copy { padding: 32px 0 24px; text-align: center; background-size: contain; }
    h1 { font-size: 85px; letter-spacing: -4px; width: fit-content; margin: 10px auto 28px; }h1::after { width: 90%; }
    .hero-description br { display: none; }.hero-description { max-width: 330px; margin-inline: auto; }
    .actions { justify-content: center; }.hero-features { max-width: 500px; margin-inline: auto; }
    .hero-art { min-height: 355px; margin: 0 -4.4vw; background: radial-gradient(ellipse at 80% 0%, #fff2a6, #d0f6ff 58%, transparent 58.3%); }
    .notebook-lineup { left: 8%; right: 8%; bottom: 65px; }.hero-book { max-width: 145px; }
    .art-motto { right: 25px; font-size: 25px; }.sun { top: 12px; }.desk { bottom: -45px; height: 145px; }
    .book-stack { width: 140px; right: 75px; bottom: 58px; }.pencil { width: 135px; }
    .category-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }.category { height: 260px; padding: 16px; }
    .category-heading h3 { font-size: 14px; }.category-heading img { width: 38px; }.category-notebook { height: 212px; }
    .learning-inner { grid-template-columns: 52% 48%; }.learning-books { display: none; }.students { width: 115%; }.learning-copy { padding: 25px 0 25px 15px; }
    .benefit-grid { width: 100%; grid-template-columns: repeat(2, 1fr); }.why h2 { font-size: 34px; }
    .sustainability-inner { grid-template-columns: 38% 62%; }.green-motto { display: none; }.earth { height: 205px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px 40px; }
}
@media (max-width: 480px) {
    .container { width: 90%; }.brand img { width: 112px; }.header-inner { gap: 7px; }.header-cta { padding: 9px 13px; }.header-cta span { display: none; }
    .hero-eyebrow { font-size: 23px; }h1 { font-size: 68px; letter-spacing: -3px; }.hero-features { gap: 6px; font-size: 10px; }.hero-features img { width: 33px; }
    .hero-art { min-height: 270px; }.notebook-lineup { left: 3%; right: 3%; bottom: 59px; }.art-motto { font-size: 20px; right: 15px; }.art-motto span { padding-left: 20px; }.sun { width: 135px; height: 135px; }.cloud { top: 25px; left: 15%; }
    .desk { height: 110px; bottom: -25px; }.book-stack { right: 35px; width: 100px; height: 22px; bottom: 45px; }.pencil { left: 30px; width: 100px; bottom: 45px; }.pencil-two { left: 45px; bottom: 36px; }.pencil-three { left: 50px; bottom: 55px; }
    .section-heading { gap: 12px; align-items: start; }.section-heading h2 { font-size: 36px; }.section-heading h2 small { font-size: 23px; }.section-heading p { font-size: 12px; }.section-heading .button { font-size: 11px; padding: 10px 12px; margin-top: 15px; gap: 6px; white-space: nowrap; }
    .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }.category { height: 250px; padding: 13px; }.category-heading h3 { font-size: 13px; }.category-heading img { width: 32px; }.category-notebook { height: 205px; }
    .learning-inner { grid-template-columns: 1fr; }.students { width: 111%; margin-left: -5.5%; order: 2; }.learning-copy { padding: 27px 0 15px; }.learning-copy h2 { font-size: 33px; }.learning-copy h2 br { display: none; }.learning-copy h2 span { display: block; }.learning-copy p { font-size: 15px; }
    .why h2 { font-size: 30px; }.section-intro { font-size: 12px; }.benefit { padding: 15px 10px; }.benefit h3 { font-size: 14px; }.benefit p { font-size: 12px; }
    .sustainability-inner { grid-template-columns: 1fr; text-align: center; }.sustainability-copy { order: 1; padding: 24px 0 8px; }.sustainability-copy h2 { font-size: 27px; }.sustainability-copy p { margin-inline: auto; }.earth { order: 2; height: 210px; margin: 0 auto -20px; }
    .footer-grid { gap: 28px 20px; }.footer-brand, .contact { grid-column: 1 / -1; }.footer-brand p br { display: none; }
}
/* Keep photographic artwork inside its grid track at every breakpoint. */
.learning-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .42fr); gap: 28px; padding-block: 28px; }
.learning-inner > * { min-width: 0; }
.learning-inner .students { width: 100%; max-width: 100%; margin: 0; height: auto; align-self: center; border-radius: 12px; }
.learning-copy { padding: 0; }
.learning-copy h2 { line-height: 1.12; overflow-wrap: break-word; }
.learning-books { align-self: center; }
.hero-inner { column-gap: 24px; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
.hero-copy { min-width: 0; }
.hero-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hero-features li { min-width: 0; line-height: 1.3; }
.hero-art { margin-right: 0; min-width: 0; overflow: hidden; isolation: isolate; }
.hero-art .desk { left: 0; width: 110%; }
.hero-art .notebook-lineup { left: 0; right: 3%; }
@media (max-width: 1100px) {
    .learning-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
    .learning-books { display: none; }
}
@media (max-width: 800px) {
    .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .hero-art { margin: 0; }
    .hero-features { width: 100%; max-width: 500px; }
    .learning-copy h2 { font-size: 28px; }
}
@media (max-width: 600px) {
    .learning-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 24px; }
    .learning-inner .students { order: 0; }
    .learning-copy { order: 1; }
    .learning-copy h2 { font-size: 30px; }
    .learning-copy p { font-size: 15px; }
    .hero-features { font-size: 10px; gap: 6px; padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}

/* Preserve the original headline size while giving two lines enough room. */
.hero-copy .hero-company-title { font-size: clamp(34px, 4.3vw, 56px); line-height: 1.13; letter-spacing: -1.8px; width: max-content; max-width: none; position: relative; z-index: 5; }
.hero-company-title .hero-title-line { display: block; white-space: nowrap; color: white; }
.hero-company-title .hero-title-accent { color: #ffdc35; }
.hero-inner { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
@media (max-width: 1100px) { .hero-inner { grid-template-columns: minmax(0, 1fr); }.hero-art { min-height: 400px; }.hero-copy .hero-company-title { margin-inline: 0; } }
@media (max-width: 800px) { .hero-copy .hero-company-title { margin-inline: auto; } }
@media (max-width: 480px) { .hero-copy .hero-company-title { font-size: 35px; letter-spacing: -1px; }.hero-company-title .hero-title-line:first-child { white-space: normal; }.hero-company-title .hero-title-accent { white-space: nowrap; } }