/* Play Your Part - design tokens (Figma: Play-Your-Part-Project) */
:root {
    --acqua-50: #e8fafc; --acqua-100: #bcf0f8; --acqua-300: #53e9ff; --acqua-400: #23e2ff; --acqua-500: #00bad6; --acqua-600: #0092a9;
    --acqua-700: #006b7b; --acqua-800: #04414a; --acqua-900: #021b1e;
    --heading: #1f717d; --body: #021b1e; --white: #fff;
    --olive-100: #e3e8d6; --olive-300: #c3d59e;
    --green-50: #f6fce8; --green-500: #7fbb00; --green-600: #649300; --green-700: #496c00;
    --orange: #f15926;
    --radius-s: 5px; --radius-m: 10px; --radius-l: 15px;
    --pad: 64px; --sec-s: 48px; --sec-m: 80px; --sec-l: 112px;
    --shadow-btn: 0 4px 2px rgba(0,0,0,.25); --shadow-card: 0 4px 4px rgba(0,0,0,.25);
    --font-body: 'Roboto', Arial, sans-serif; --font-head: 'Roboto Slab', Georgia, serif;
    --h1: 70px; --h2: 48px; --h3: 40px; --h4: 32px; --h5: 24px; --t-lg: 20px; --t-md: 18px;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--body); background: var(--white); overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acqua-600); }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; color: var(--heading); margin: 0 0 24px; }
h1 { font-size: var(--h1); line-height: 1.2; }
h2 { font-size: var(--h2); line-height: 1.2; }
h3 { font-size: var(--h3); line-height: 1.2; }
h4 { font-size: var(--h4); line-height: 1.3; }
h5 { font-family: var(--font-body); font-weight: 700; font-size: var(--h5); line-height: 1.4; color: var(--heading); margin: 0 0 16px; }
.t-md { font-size: var(--t-md); }
.light { font-weight: 300; }
.container { width: 100%; max-width: 1366px; margin: 0 auto; padding: 0 var(--pad); }
.section-title { text-align: center; max-width: 768px; margin: 0 auto; }
.section-title h2 { margin-bottom: 20px; }
.section-title p { font-size: var(--t-md); }
.section-title.wide { max-width: none; }
.text-link { color: var(--acqua-600); text-decoration: underline; text-underline-position: from-font; font-size: 16px; }
.text-link:hover { color: var(--acqua-700); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: var(--radius-s); font-family: var(--font-body); font-size: 16px; line-height: 1.5; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-btn); border: 1px solid transparent; transition: filter .15s, transform .15s; white-space: nowrap; }
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(1px); box-shadow: 0 2px 1px rgba(0,0,0,.25); }
.btn-primary { background: linear-gradient(180deg, var(--acqua-500), var(--acqua-600)); border-color: var(--acqua-700); color: var(--white); }
.btn-light { background: linear-gradient(180deg, var(--white), var(--acqua-50)); border-color: var(--acqua-100); color: var(--acqua-600); }
.btn-sm { padding: 8px 20px; box-shadow: 0 4px 2px rgba(0,0,0,.15); }
.actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* torn paper dividers (white-divider1.webp: white with transparent edge) */
.torn-t, .torn-b { position: relative; }
.torn-t::before, .torn-b::after { content: ""; position: absolute; left: 0; right: 0; height: 92px; background: url(../img/white-divider1.webp) center / 100% 100% no-repeat; pointer-events: none; z-index: 1; }
.torn-t::before { top: -1px; transform: rotate(180deg); }
.torn-b::after { bottom: -1px; }
.torn-b.short::after { height: 72px; }

/* navbar */
#navbar { background: var(--white); position: relative; z-index: 20; }
#navbar > .container { display: flex; align-items: center; justify-content: space-between; height: 93px; }
#navbar .logo img { width: 155px; height: auto; }
#navbar .links { display: flex; gap: 20px; align-items: center; margin-left: auto; margin-right: 16px; }
#navbar .links .link { color: var(--acqua-600); text-decoration: none; padding: 10px 0; white-space: nowrap; }
#navbar .links .link:hover { color: var(--acqua-700); text-decoration: underline; text-underline-offset: 6px; }
#navbar .links .link.active { color: var(--acqua-500); font-weight: 700; text-decoration: none; border-top: 5px solid #84efff; padding-top: 5px; }
#navbar .actions { gap: 16px; flex-wrap: nowrap; }
#m-hamburger { display: none; background: none; border: none; padding: 0; cursor: pointer; }
#mob-menu { position: fixed; inset: 0; z-index: 30; background: linear-gradient(180deg, var(--acqua-50), var(--acqua-100)); padding: 70px 48px 48px; overflow-y: auto; }
#mob-menu[hidden] { display: none; }
#mob-menu .close { position: absolute; top: 24px; right: 20px; background: none; border: none; cursor: pointer; padding: 6px; }
#mob-menu .links { display: flex; flex-direction: column; gap: 20px; padding: 0 10px 48px; }
#mob-menu .links .link { font-size: var(--h5); font-weight: 700; color: var(--acqua-600); text-decoration: none; padding: 10px 0; align-self: flex-start; }
#mob-menu .links .link.active { color: var(--acqua-500); border-bottom: 5px solid var(--acqua-500); }
#mob-menu .actions { flex-direction: column; gap: 20px; align-items: stretch; }
#mob-menu .actions .btn { width: 100%; }
body.menu-open { overflow: hidden; }

/* hero (full-bleed image with text on the left) */
.hero { position: relative; height: 683px; display: flex; align-items: center; color: var(--white); overflow: hidden; box-shadow: inset 0 10px 10px rgba(0,0,0,.25); }
.hero .bg, .hero .slide { position: absolute; inset: 0; background-size: cover; background-position: center top; }
.hero .bg::after, .hero .slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(0,0,0,0) 41%, rgba(0,0,0,.5) 100%); }
.hero.light-overlay .bg::after { background: linear-gradient(to right, rgba(0,0,0,.12), rgba(0,0,0,.01)); }
.hero .slide { opacity: 0; transition: opacity 2s ease; }
.hero .slide.active { opacity: 1; }
.hero > .container { position: relative; z-index: 2; display: flex; align-items: center; height: 100%; }
.hero .content { width: 50%; max-width: 555px; padding-right: 40px; }
.hero h1, .hero h2 { color: var(--white); }
.hero h1 { margin-bottom: 24px; }
.hero h2 { margin-bottom: 24px; }
.hero p { font-size: var(--t-md); margin-bottom: 32px; }
.hero .caption, .scoreboard .caption { position: absolute; right: 0; bottom: 50px; width: 425px; max-width: 100%; padding: 10px 200px 10px 40px; background: rgba(0,0,0,.6); border-radius: var(--radius-s) 0 0 var(--radius-s); color: var(--white); font-size: 14px; font-weight: 500; white-space: nowrap; z-index: 3; }
.hero .m-img { display: none; }
.hero.short { height: 350px; }
.hero.short h1 { font-size: var(--h2); }

/* video section */
.section-video { padding: var(--sec-s) 0; }
.section-video .container { display: flex; gap: 60px; align-items: center; }
.section-video .lightbox-ph, .lightbox-ph { position: relative; flex: 1 0 0; height: 380px; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-card); cursor: pointer; background: #000; }
.lightbox-ph img { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.lightbox-ph .play { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; }
.lightbox-ph .play::after { content: ""; border-left: 30px solid #555; border-top: 18px solid transparent; border-bottom: 18px solid transparent; margin-left: 8px; }
.section-video .content { flex: 1 0 0; }
.section-video .content h2 { margin-bottom: 24px; }
.section-video .content p { font-size: var(--t-md); font-weight: 300; margin-bottom: 26px; }

/* blurbs (3 columns with icons) */
.blurbs { background: var(--olive-100); padding: 132px 0 92px; }
.blurbs.bg-acqua { background: var(--acqua-50); }
.blurbs .section-title { max-width: none; margin-bottom: 32px; }
.blurbs .row { display: flex; gap: 48px; align-items: flex-start; padding-bottom: 10px; }
.blurbs .col { flex: 1 0 0; text-align: center; }
.blurbs .col img { width: 78px; height: 60px; margin: 0 auto 24px; object-fit: contain; }
.blurbs .col h4 { margin-bottom: 24px; }
.blurbs .bottom { border-top: 1px solid var(--olive-300); padding-top: 40px; margin-top: 22px; display: flex; justify-content: center; }
.blurbs.bg-acqua .bottom { border-color: var(--acqua-100); }

/* logo carousel */
.logo-carousel { background: rgba(255,255,255,.5); padding: var(--sec-l) 0; display: flex; flex-direction: column; align-items: center; gap: 60px; overflow: hidden; }
.logo-carousel h4 { text-align: center; margin: 0; }
.logo-track { width: 100%; overflow: hidden; height: 90px; display: flex; }
.logo-track .logos { display: flex; gap: 60px; align-items: center; padding-right: 60px; flex-shrink: 0; animation: logo-scroll 40s linear infinite; }
.logo-track .logos img { width: auto; max-width: none; }
.logo-track:hover .logos { animation-play-state: paused; }
@keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* side-by-side text + picture ("Section wrap") */
.split { background: var(--acqua-50); padding: 92px 0 72px; }
.split.white { background: var(--white); padding: var(--sec-l) 0; }
/* the torn-paper edges overlay the first/last 92px of the section - keep the content clear of them */
.split.torn-t { padding-top: 132px; }
.split.torn-b { padding-bottom: 112px; }
.split .container { display: flex; gap: 80px; align-items: center; }
.split .text { flex: 1 0 0; }
.split .text h2 { margin-bottom: 24px; }
.split .text p { font-size: var(--t-md); margin-bottom: 32px; }
.split .pic { flex: 1 0 0; height: 579px; position: relative; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-card); }
.split .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split.pic-left .container { flex-direction: row-reverse; }

/* testimonials */
.testimonials { background: var(--white); padding: var(--sec-m) 32px var(--sec-l); display: flex; flex-direction: column; align-items: center; gap: 30px; }
.testimonials .t-row { display: flex; gap: 20px; align-items: stretch; width: 100%; max-width: 1280px; }
.testimonials .t-nav { background: none; border: none; padding: 32px 0; cursor: pointer; flex-shrink: 0; }
.testimonials .t-nav[disabled] { opacity: .35; cursor: default; }
.testimonials .t-nav[hidden] { display: none; }
.testimonials .t-viewport { flex: 1 0 0; overflow: hidden; }
.testimonials .t-cards { display: flex; gap: 20px; transition: transform .5s ease; }
.testimonials .t-card { flex: 0 0 calc((100% - 40px) / 3); display: flex; flex-direction: column; gap: 24px; padding: 32px var(--sec-s); border-radius: var(--radius-m); border: 1px solid var(--green-500); background: linear-gradient(180deg, var(--white), var(--green-50)); }
.testimonials .quote { flex: 1 0 auto; min-height: 275px; font-size: var(--t-md); color: var(--green-600); }
.testimonials .who { border-top: 1px solid var(--olive-100); padding-top: 10px; }
.testimonials .who p { margin: 0; color: var(--green-600); font-size: 14px; }
.testimonials .who .name { font-weight: 600; font-size: 16px; color: var(--green-700); }
.testimonials .who .org { font-size: 12px; text-transform: uppercase; }

/* scoreboard */
.scoreboard { --board-pr: 100px; background: linear-gradient(180deg, var(--acqua-600), var(--acqua-800)); color: var(--white); padding-top: 72px; }
.scoreboard > .container { display: flex; min-height: 663px; }
.scoreboard .board { width: 50%; display: flex; flex-direction: column; justify-content: center; padding: 50px var(--board-pr) 20px 86px; }
.scoreboard h2 { color: var(--white); margin: 0 0 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,.6); }
.scoreboard dl { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.scoreboard dl > div { display: flex; gap: 15px; align-items: flex-start; }
.scoreboard dt { font-family: var(--font-head); font-weight: 700; font-size: var(--h1); line-height: 1.2; min-width: 175px; text-align: right; }
.scoreboard dd { margin: 0; padding-top: 23px; font-size: var(--t-md); font-weight: 700; text-transform: uppercase; line-height: 1.5; }
/* The numbers always end at 50% of the section minus the board's right padding, so starting the picture box
   there lets the cut-out run to the edge of the browser and still never reach the text (helpdesk 496155). */
.scoreboard .pic { position: absolute; top: 0; right: 0; bottom: 0; left: calc(50% - var(--board-pr)); }
.scoreboard .pic img { position: absolute; bottom: 0; right: 0; width: auto; height: auto; max-width: 100%; max-height: 805px; z-index: 2; }
.scoreboard .caption { bottom: 66px; padding: 10px 40px; white-space: normal; text-align: left; }

/* story (text left, image right full-bleed) */
.story { background: var(--white); }
.story .container { display: flex; align-items: stretch; padding: 0; max-width: none; }
.story .text { flex: 1 0 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: var(--sec-l) 80px var(--sec-l) var(--pad); }
.story .text > div { max-width: 560px; width: 100%; }
.story .text h2 { margin-bottom: 24px; }
.story .text p { font-size: var(--t-md); margin-bottom: 32px; }
.story .pic { flex: 1 0 0; min-height: 720px; position: relative; }
.story .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story .pic::after { content: ""; position: absolute; inset: 0; box-shadow: inset 10px 6px 10px rgba(0,0,0,.25); }
.story.pic-left .container { flex-direction: row-reverse; }
.story.pic-left .text { align-items: flex-start; padding: var(--sec-l) var(--pad) var(--sec-l) 80px; }
@media (min-width: 1367px) { .story .text { padding-left: calc((100% - 1366px) / 2 + var(--pad)); } .story.pic-left .text { padding-right: calc((100% - 1366px) / 2 + var(--pad)); padding-left: 80px; } }

/* CTA band */
.cta-band { position: relative; background-size: cover; background-position: center; color: var(--white); padding: var(--pad) 0; box-shadow: inset 0 10px 10px rgba(0,0,0,.5); }
.cta-band .container { display: flex; gap: 80px; align-items: center; padding: 0 var(--sec-l); }
.cta-band .text { flex: 1 0 0; }
.cta-band h2 { color: var(--white); margin: 0; }
.cta-band p { font-size: var(--t-md); margin: 16px 0 0; }
.cta-band.cta-split { padding: var(--sec-l) 0; box-shadow: inset 6px 12px 6px rgba(0,0,0,.5); }
.cta-band.cta-split .container { padding: 20px var(--pad); align-items: flex-start; max-width: 1366px; }
.cta-band.cta-split .text, .cta-band.cta-split .side { flex: 1 0 0; }
.cta-band.cta-split .side { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.cta-band.cta-split .side p { font-size: var(--t-lg); margin: 0; }
.cta-band.cta-split .side .actions { gap: 16px; }
.cta-band.tall { padding: var(--sec-l) 0; }
.cta-band.tall .container { flex-direction: column; text-align: center; gap: 32px; }
.cta-band.tall .text { max-width: 768px; }

/* FAQ accordion */
.faq { background: var(--white); padding: var(--pad) 0; }
.faq .container { display: flex; gap: 80px; align-items: flex-start; }
.faq .faq-intro { width: 500px; flex-shrink: 0; }
.faq .faq-intro p { font-size: var(--t-md); margin-bottom: 32px; color: #000; }
.accordion-list { flex: 1 0 0; display: flex; flex-direction: column; gap: 16px; }
.accordion { border-radius: var(--radius-l); background: var(--white); }
.accordion .q { width: 100%; display: flex; gap: 24px; align-items: center; text-align: left; padding: 20px 24px; background: var(--acqua-50); border: 1px solid var(--acqua-100); border-radius: var(--radius-m); font: 700 var(--t-md)/1.5 var(--font-body); color: #000; cursor: pointer; }
.accordion .q span { flex: 1 0 0; }
.accordion.open .q { border-color: var(--acqua-300); }
.accordion .ico-open, .accordion.open .ico-closed { display: none; }
.accordion.open .ico-open { display: block; }
.accordion .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.accordion.open .a { grid-template-rows: 1fr; }
.accordion .a-inner { overflow: hidden; }
.accordion.open .a-inner { padding: 20px 24px 24px; }
.accordion .a p { margin-bottom: 12px; }

/* state list accordion (schools page) */
.state-list .accordion { background: none; }
.state-list .accordion .q { padding: 10px 10px 10px 15px; font-size: var(--h5); line-height: 1.4; color: var(--heading); background: var(--acqua-100); border: none; }
.state-list .accordion .q svg { width: 48px; height: 48px; }
.state-list .accordion.open .a-inner { padding: 5px 5px 0; }
.state-list ul { margin: 0; padding: 15px 0 0 30px; font-size: var(--t-lg); line-height: 1.75; }

/* About GOL section */
.about-gol { background: var(--white); padding-bottom: 64px; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.about-gol .bg { width: 100%; height: 625px; }
.about-gol .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.about-gol .bg .mobile { display: none; }
.about-gol .container { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.about-gol .section-title { width: 100%; max-width: none; }

/* forms */
.form-module { background: var(--acqua-50); border: 1px solid var(--acqua-400); border-radius: var(--radius-m); box-shadow: var(--shadow-card); overflow: hidden; padding-bottom: var(--pad); }
.form-module .form-title { background: var(--heading); color: var(--white); text-align: center; padding: 20px; }
.form-module .form-title h3 { color: var(--white); margin: 0; }
.form-module .form-body { padding: var(--pad) var(--pad) 20px; }
.form-module h5 { padding: 0 40px 20px; margin: 0; }
.form-module .label { padding: 0 40px; font-weight: 700; color: var(--heading); }
.form-module .radios { display: flex; gap: 15px; flex-wrap: wrap; padding: 10px 40px 15px; }
.form-module .radios label { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.form-module .radios input { width: 18px; height: 18px; margin: 0; accent-color: var(--acqua-600); }
.form-module hr { border: none; border-top: 1px solid var(--acqua-100); margin: 15px 0; }
.form-module .fields { display: flex; gap: 40px; padding: 15px 40px; }
.form-module .field { flex: 1 0 0; position: relative; }
.form-module .field.full { flex-basis: 100%; }
.form-module input[type=text], .form-module input[type=email], .form-module input[type=tel], .form-module select, .form-module textarea { width: 100%; padding: 22px 12px 10px; border: 1px solid var(--acqua-600); border-radius: var(--radius-s); background: rgba(255,255,255,.6); box-shadow: inset 0 4px 4px rgba(0,0,0,.15); font: 16px/1.5 var(--font-body); color: var(--body); }
.form-module input::placeholder, .form-module textarea::placeholder { color: var(--acqua-500); opacity: 1; }
.form-module select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%230092a9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 24px; }
.form-module select.placeholder { color: var(--acqua-500); }
/* floating labels: the label starts where the value will be and rises to a small tag above it once the field is filled or focused */
.form-module .field label { position: absolute; left: 13px; top: 17px; font-size: 16px; line-height: 1.5; color: var(--acqua-500); pointer-events: none; transition: top .15s, font-size .15s; }
.form-module .field input:not(.cc):focus ~ label, .form-module .field input:not(.cc):not(:placeholder-shown) ~ label, .form-module .field textarea:focus ~ label, .form-module .field textarea:not(:placeholder-shown) ~ label, .form-module .field select:focus ~ label, .form-module .field select:not(.placeholder) ~ label { top: 6px; font-size: 10px; text-transform: uppercase; }
.form-module .masked-phone label { left: 13px; transition: top .15s, left .15s, font-size .15s; }
.form-module .masked-phone:focus-within label, .form-module .masked-phone.cc-on label { left: 77px; } /* clears the country-code box */
.form-module .field textarea ~ label { top: 23px; } /* tall box - sit on the first text line, not centred */
.form-module textarea { height: 180px; resize: vertical; }
.form-module .masked-phone { display: flex; border: 1px solid var(--acqua-600); border-radius: var(--radius-s); background: rgba(255,255,255,.6); box-shadow: inset 0 4px 4px rgba(0,0,0,.15); overflow: hidden; }
.form-module .masked-phone > input[type=text] { border: none; border-radius: 0; background: transparent; box-shadow: none; }
/* the country code is only shown once the field is focused or already holds a number (helpdesk 496155) */
.form-module .masked-phone > .cc { flex: none; width: 0; padding-left: 0; padding-right: 0; text-align: center; border-right: 0 solid var(--acqua-100); color: var(--acqua-700); font-weight: 600; opacity: 0; transition: width .15s, opacity .15s; }
.form-module .masked-phone:focus-within > .cc, .form-module .masked-phone.cc-on > .cc { width: 64px; padding-left: 4px; padding-right: 4px; border-right-width: 1px; opacity: 1; }
.form-module .masked-phone > .num { flex: 1 0 0; min-width: 0; }
.form-module .masked-phone.err { border-color: #c0392b; }
.form-module .field-error { color: #c0392b; font-size: 14px; margin-top: 4px; }
.form-module input.input-validation-error, .form-module select.input-validation-error, .form-module textarea.input-validation-error { border-color: #c0392b; }
.form-module .validation-summary-errors { color: #c0392b; padding: 0 40px; }
.form-module .validation-summary-errors ul { margin: 0; padding-left: 20px; }
.form-module .submit { display: flex; justify-content: center; padding: 20px 0 0; }
.form-page { padding: var(--sec-s) 0 var(--sec-l); }
.form-page .container { max-width: 1366px; padding: 0 var(--sec-l); }

/* footer */
#footer { background: var(--acqua-800); color: var(--white); font-size: 14px; }
#footer a { color: var(--white); text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer .footer-content { padding: 40px 0; }
#footer .footer-content .container { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
#footer .logo-address img { width: 148px; height: auto; margin-bottom: 10px; }
#footer .logo-address p { margin: 0; }
#footer .footer-links { display: flex; gap: 60px; }
#footer .footer-links .col { display: flex; flex-direction: column; gap: 10px; font-weight: 600; }
#footer .footer-copyright { background: var(--acqua-900); padding: 24px 0; }
#footer .footer-copyright .container { display: flex; justify-content: space-between; gap: 24px; }
#footer .footer-copyright p { margin: 0; }
#footer .legal { display: flex; gap: 24px; }
#footer .legal a { text-decoration: underline; text-underline-position: from-font; }

/* video lightbox */
#lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 20px; }
#lightbox[hidden] { display: none; }
#lightbox .lb-inner { position: relative; width: 100%; max-width: 1100px; }
#lightbox .lb-frame { position: relative; padding-top: 56.25%; background: #000; border-radius: var(--radius-m); overflow: hidden; }
#lightbox .lb-frame iframe, #lightbox .lb-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#lightbox .lb-close { position: absolute; right: 0; top: -44px; background: none; border: none; color: var(--white); font-size: 36px; line-height: 1; cursor: pointer; }

/* ------------------------------------------------------------ tablet */
@media (max-width: 1200px) {
    :root { --pad: 40px; }
    #navbar .links { gap: 14px; }
    .scoreboard { --board-pr: 40px; }
    .scoreboard .board { padding: 40px var(--board-pr) 20px 20px; }
    .scoreboard dt { min-width: 140px; }
    .cta-band .container { padding: 0 var(--pad); }
    .cta-band.cta-split .container { padding: 20px var(--pad); }
}
@media (max-width: 1100px) {
    #navbar .links, #navbar .actions { display: none; }
    #m-hamburger { display: block; }
    #navbar > .container { height: 87px; padding: 0 16px; }
    #navbar { border-bottom: 1px solid var(--acqua-100); }
}
@media (max-width: 991px) {
    :root { --h1: 56px; --h2: 40px; --h3: 34px; --h4: 28px; }
    .section-video .container, .split .container, .split.pic-left .container, .faq .container, .story .container, .story.pic-left .container { flex-direction: column; }
    .section-video .lightbox-ph { width: 100%; flex: none; }
    .split .pic { width: 100%; flex: none; height: auto; aspect-ratio: 1 / 1; }
    /* stacked: a picture always sits above its text, whichever side it is on at desktop width */
    .split .pic, .story .pic { order: -1; }
    .faq .faq-intro { width: auto; }
    .blurbs .row { flex-direction: column; gap: 32px; align-items: stretch; } /* full width, so each column centres within the space */
    .testimonials .t-card { flex-basis: calc((100% - 20px) / 2); }
    .scoreboard { --board-pr: 0px; }
    .scoreboard > .container { flex-direction: column; min-height: 0; }
    .scoreboard .board { width: 100%; padding: 40px 0 20px; }
    .scoreboard .pic { position: relative; inset: auto; height: 500px; }
    .scoreboard .pic img { height: 100%; max-height: none; right: 50%; transform: translateX(50%); }
    .story .text, .story.pic-left .text { padding: var(--sec-m) var(--pad); align-items: flex-start; }
    /* once the columns stack, "flex: 1 0 0" would give the picture a zero height and the photo would vanish */
    .story .pic { flex: none; width: 100%; min-height: 0; aspect-ratio: 1 / 1; }
    .cta-band .container { flex-direction: column; align-items: flex-start; gap: 32px; }
    .cta-band.cta-split .container { gap: 24px; }
    .form-page .container { padding: 0 var(--pad); }
    .form-module .fields { flex-direction: column; gap: 15px; }
}

/* ---------------------------------- mobile (design: 390px; runs up to 768px so small tablets get it too) */
@media (max-width: 768px) {
    :root { --pad: 20px; --sec-s: 32px; --sec-m: 48px; --sec-l: 64px; --h1: 48px; --h2: 36px; --h3: 32px; --h4: 24px; --t-md: 16px; --t-lg: 18px; }
    h1, h2, h3, h4 { margin-bottom: 16px; }
    .actions { flex-direction: column; align-items: stretch; gap: 20px; }
    .actions .btn { width: 100%; }
    /* hero: square image + caption bar + content below */
    .hero { height: auto; display: block; color: var(--body); box-shadow: none; padding-bottom: 20px; }
    .hero .bg, .hero .slide { display: none; }
    .hero .m-img { display: block; position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; box-shadow: var(--shadow-card); }
    .hero .m-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: opacity 2s ease; }
    .hero .m-img img:not(.active) { opacity: 0; }
    .hero .m-img img.active { opacity: 1; }
    .hero .caption { position: static; width: 100%; border-radius: 0; padding: 10px 40px; white-space: normal; }
    .hero > .container { display: block; height: auto; padding: 24px 20px; }
    .hero .content { width: 100%; max-width: none; padding: 0; }
    .hero h1, .hero h2 { color: var(--heading); }
    .hero p { color: var(--body); margin-bottom: 16px; }
    .hero.short { height: auto; }
    .section-video { padding: 0 0 var(--sec-s); }
    .section-video .container { gap: 24px; padding: 0; }
    .section-video .lightbox-ph { height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
    .section-video .content { padding: 0 var(--pad); }
    .blurbs { padding: 100px 0 92px; }
    .blurbs .row { gap: 40px; }
    .logo-carousel { padding: 48px 0; gap: 32px; }
    .logo-track { height: 60px; }
    .logo-track .logos { gap: 40px; padding-right: 40px; }
    .logo-track .logos img { height: 60px !important; }
    .split { padding: 92px 0 72px; }
    .split .container { gap: 32px; }
    .testimonials { padding: var(--sec-s) 0 var(--sec-s) 20px; align-items: flex-start; }
    .testimonials .section-title { padding-right: 20px; text-align: left; }
    .testimonials .t-row { gap: 0; }
    .testimonials .t-nav { display: none; }
    .testimonials .t-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
    .testimonials .t-cards { transform: none !important; gap: 20px; }
    .testimonials .t-card { flex: 0 0 260px; scroll-snap-align: start; padding: 12px 18px; gap: 12px; border-radius: 8px; background: var(--green-50); }
    .testimonials .quote { min-height: 0; font-size: 18px; }
    .testimonials .who .name { font-size: 14px; }
    .testimonials .text-link { margin-left: 0; }
    /* Figma 11153:2867 + 11154:85861: the cut-out stands on the page above a plain teal panel,
       with no torn edge and no name bar; each number sits over its own one-line label. */
    .scoreboard { display: flex; flex-direction: column; background: none; padding-top: 0; }
    .scoreboard.torn-t::before { display: none; }
    .scoreboard > .container { background: linear-gradient(180deg, var(--acqua-600), var(--acqua-800)); }
    .scoreboard .board { padding: 40px 0; }
    .scoreboard h2 { text-align: center; margin-bottom: 24px; padding-bottom: 24px; }
    .scoreboard dl { gap: 20px; }
    .scoreboard dl > div { flex-direction: column; align-items: center; gap: 4px; }
    .scoreboard dt { font-size: 48px; min-width: 0; text-align: center; }
    .scoreboard dd { padding-top: 0; font-size: 14px; font-weight: 400; text-align: center; }
    .scoreboard dd br { display: none; } /* the label is one line on phones - the markup keeps a space before it */
    .scoreboard .pic { order: -1; height: auto; }
    .scoreboard .pic img { position: static; width: 100%; height: auto; max-width: 100%; transform: none; }
    .scoreboard .caption { display: none; }
    .story .text, .story.pic-left .text { padding: var(--sec-s) var(--pad) var(--sec-m); }
    .cta-band { padding: 48px 0; }
    .cta-band .actions .btn { width: 100%; }
    .cta-band.cta-split { padding: 48px 0; }
    .cta-band.cta-split .side .actions, .cta-band.cta-split .side .actions .btn { width: 100%; }
    .faq { padding: var(--sec-s) 0; }
    .faq .container { gap: 32px; }
    .about-gol .bg { height: auto; }
    .about-gol .bg .desktop { display: none; }
    .about-gol .bg .mobile { display: block; }
    .form-page { padding: 0 0 var(--sec-l); }
    .form-module { padding-bottom: 32px; }
    .form-module .form-body { padding: 32px 20px 0; }
    .form-module h5, .form-module .label, .form-module .radios, .form-module .validation-summary-errors { padding-left: 0; padding-right: 0; }
    .form-module .fields { padding: 10px 0; }
    #footer .footer-content { padding: 32px 0; }
    #footer .footer-content .container { flex-direction: column; align-items: flex-start; }
    #footer .logo-address img { width: 155px; margin-bottom: 16px; }
    #footer .footer-links { flex-direction: column; gap: 12px; }
    #footer .footer-links .col { gap: 12px; }
    #footer .footer-copyright { padding: 32px 0; }
    #footer .footer-copyright .container { flex-direction: column; gap: 8px; }
    #footer .legal { gap: 16px; }
    .state-list .accordion .q { font-size: 20px; }
}