/* Go Geo visual identity: deep navy, bright blue, yellow and a warm paper white. Montserrat stands in for
   Gotham and is self-hosted (SIL Open Font License); the file carries every weight from 100 to 900, and the
   display headings pair the light weight with the bold one. The brand script (Xtreem) appears only as the
   school's own "#Yesyoucan!" lettering, an image painted through a CSS mask. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --navy: #002766;
  --navy-deep: #001a47;
  --night: #00133a;
  --blue: #0085ed;
  --blue-strong: #0068c9;
  --link: #005fae;
  --sky: #e8f3ff;
  --mist: #f4f8fd;
  --paper: #f7f4ee;
  --yellow: #f3d100;
  --ink: #002766;
  --copy: #44526c;
  --line: #dde4ee;
  --white: #fff;
  --radius: 1.5rem;
  --shadow: 0 1.5rem 3rem -1.5rem #00163d40;
  --shadow-lg: 0 2.5rem 5rem -2rem #00163d73;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dark: radial-gradient(70rem 42rem at 88% -12%, #0b5fd659, transparent 62%), linear-gradient(160deg, #00133a 0%, #001a47 48%, #002a6e 100%);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font: 450 1.0625rem/1.7 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(1.65rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -.02em; }
h2 strong { font-weight: inherit; }
p, li, address, dd { color: var(--copy); }
address { font-style: normal; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: .35rem; }
img { max-width: 100%; }
.wrap { width: min(calc(100% - 2.5rem), 74rem); margin-inline: auto; }
.narrow { max-width: 47rem; }
.icon { flex: none; width: 1.35em; height: 1.35em; }
.skip { position: fixed; top: .75rem; left: .75rem; z-index: 9; padding: .6rem .9rem; border-radius: .5rem; background: var(--yellow); color: var(--navy); font-weight: 700; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Header: navy, so the opening of every page reads as one piece with it. */
.site-header { position: relative; z-index: 5; background: var(--night); color: var(--white); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.25rem; padding-block: .85rem .3rem; }
.brand { display: inline-flex; flex: none; align-items: center; }
.brand img { display: block; width: 7.75rem; height: auto; }
.site-header nav { display: flex; order: 3; width: calc(100% + 2.5rem); margin-inline: -1.25rem; padding-inline: .6rem; overflow-x: auto; gap: .1rem; color: #d3dff3; font-size: .9rem; font-weight: 550; scrollbar-width: none; }
.site-header nav::-webkit-scrollbar { display: none; }
.site-header nav a { position: relative; padding: .6rem .75rem; white-space: nowrap; text-decoration: none; transition: color .25s; }
.site-header nav a::after { content: ""; position: absolute; right: .75rem; bottom: .3rem; left: .75rem; height: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.site-header nav a:hover, .site-header nav a[aria-current] { color: var(--white); }
.site-header nav a:hover::after, .site-header nav a[aria-current]::after { transform: scaleX(1); }
.site-header .button { min-height: 2.6rem; padding: .5rem 1.15rem; font-size: .85rem; white-space: nowrap; box-shadow: none; }
.site-header .button::after { display: none; }
.site-header a:focus-visible { outline-color: var(--yellow); }

/* Buttons and small parts */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 3.3rem;
  padding: .8rem 1.65rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font: 700 .96rem/1.2 var(--font);
  text-align: center;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s, background-color .3s, border-color .3s, color .3s;
}
/* A small chevron that moves forward on hover. */
.button::after { content: ""; flex: none; width: .44em; height: .44em; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); transition: translate .3s var(--ease); }
.button:hover { background: var(--blue-strong); transform: translateY(-2px); box-shadow: 0 1rem 2rem -.8rem #00276680; }
.button:hover::after { translate: .28em 0; }
.button--accent { background: var(--yellow); color: var(--navy); box-shadow: 0 1rem 2rem -1rem #f3d100cc; }
.button--accent:hover { background: #ffe033; box-shadow: 0 1.25rem 2.25rem -1rem #f3d100; }
.button--secondary { border-color: #b4c3d9; background: transparent; color: var(--navy); }
.button--secondary:hover { border-color: var(--navy); background: var(--navy); color: var(--white); }
.button--ghost { border-color: #ffffff66; background: transparent; color: var(--white); }
.button--ghost:hover { border-color: var(--white); background: var(--white); color: var(--navy); box-shadow: none; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .8rem; margin-bottom: 1.15rem; color: var(--blue-strong); font-size: .74rem; font-weight: 750; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow::before { content: ""; flex: none; width: 2.25rem; height: 2px; background: var(--yellow); }
.lead { max-width: 38rem; margin-top: 1.4rem; font-size: clamp(1.08rem, 1.7vw, 1.24rem); line-height: 1.6; }
.text-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .95rem; color: var(--link); font-weight: 700; text-decoration: none; }
.text-link .icon { width: 1.15em; height: 1.15em; transition: translate .3s var(--ease); }
.text-link:hover .icon, :is(.card, .program, .tile):hover .text-link .icon { translate: .3rem 0; }
.section-link { margin-top: 2.25rem; }
.section-note { margin-top: 1.5rem; }
.section-note a, .prose :is(p, li, dd, td) a, .facts a { color: var(--link); font-weight: 650; }
.stars { background: linear-gradient(90deg, #f5b400 96%, #c9d6e8 96%); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .08em; }
/* The lettering image is 1023×502; the mask lets CSS choose its color. */
.yes { display: block; aspect-ratio: 1023 / 502; background: var(--yellow); mask: url("/assets/letreiro-yes-you-can.png") center / contain no-repeat; -webkit-mask: url("/assets/letreiro-yes-you-can.png") center / contain no-repeat; }

/* Home opening: light and bold weights in the headline, a collage of the school and the figures in a row. */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); color: var(--white); }
.hero::after { content: ""; position: absolute; z-index: -1; top: -9rem; right: -11rem; width: 46rem; aspect-ratio: 1; background: var(--white); opacity: .045; mask: url("/assets/globo-logo.svg") center / contain no-repeat; -webkit-mask: url("/assets/globo-logo.svg") center / contain no-repeat; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.25rem, 4.6vw, 4.25rem) clamp(2.75rem, 4.6vw, 4.25rem); }
.kicker { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.6rem; color: #c3d6fa; font-size: .76rem; font-weight: 750; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; }
.kicker::before { content: ""; flex: none; width: 2.25rem; height: 2px; background: var(--yellow); }
.hero h1 { font-size: clamp(2.6rem, 5.5vw, 4.9rem); font-weight: 300; line-height: 1.02; letter-spacing: -.045em; }
.hero h1 strong { font-weight: 750; }
.hero h1 em { color: var(--yellow); font-style: normal; font-weight: 750; white-space: nowrap; }
.hero .lead { max-width: 34rem; margin-top: 1.5rem; color: #cfdcf3; }
.hero .actions { margin-top: 2rem; }
.proof { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-top: 2rem; color: #cfdcf3; font-size: .88rem; line-height: 1.4; text-decoration: none; }
.proof__faces { display: flex; }
.proof__faces img { width: 2.75rem; height: 2.75rem; border: 2px solid var(--night); border-radius: 50%; object-fit: cover; }
.proof__faces img + img { margin-left: -.75rem; }
.proof__text { display: grid; gap: .1rem; }
.proof__text strong { color: var(--white); font-size: 1rem; font-weight: 700; }
.proof:hover .proof__text strong { text-decoration: underline; }
.hero__media { position: relative; justify-self: end; width: min(100%, 28rem); padding: 0 0 3rem 3rem; }
.hero__photo { position: relative; margin: 0; overflow: hidden; border-radius: 1.75rem; box-shadow: 0 3rem 6rem -2rem #000720d9; }
.hero__photo .photo { aspect-ratio: 4 / 5; border-radius: 0; object-fit: cover; object-position: 40% 42%; }
.hero__photo:not(.hero__photo--side)::after { content: ""; position: absolute; inset: 58% 0 0; background: linear-gradient(transparent, #00133ae6); }
.hero__photo--side { position: absolute; bottom: 0; left: 0; width: 44%; border: .4rem solid var(--navy-deep); border-radius: 1.5rem; }
.hero__photo--side .photo { aspect-ratio: 1; object-position: 55% 20%; }
.hero__media .yes { position: absolute; right: 5%; bottom: 4.25rem; width: 52%; transform: rotate(-4deg); }
.hero__seal { position: absolute; top: 2rem; left: 0; display: flex; align-items: center; gap: .75rem; margin: 0; padding: .8rem 1.15rem .8rem .85rem; border-radius: 1.1rem; background: var(--white); box-shadow: var(--shadow-lg); color: var(--navy); line-height: 1.25; }
.hero__seal .emblem { flex: none; width: 2.6rem; height: 2.6rem; }
.hero__seal span { display: grid; }
.hero__seal small { color: var(--copy); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero__seal strong { font-size: .98rem; font-weight: 750; letter-spacing: -.01em; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 0; padding: 0; border-top: 1px solid #ffffff26; list-style: none; }
.stats li { display: grid; align-content: start; gap: .4rem; padding: 1.75rem 1.5rem 2.5rem 0; }
.stats li + li { padding-left: 1.75rem; border-left: 1px solid #ffffff1f; }
.stats strong { color: var(--white); font-size: clamp(1.8rem, 3.2vw, 2.7rem); font-weight: 300; line-height: 1; letter-spacing: -.045em; }
.stats strong b { color: var(--yellow); font-weight: 750; }
.stats span { color: #b6c8e6; font-size: .84rem; line-height: 1.45; }
.stats a { color: inherit; }

/* A ribbon with the school's courses, moving slowly. */
.marquee { overflow: hidden; padding-block: 1rem; background: var(--yellow); color: var(--navy); }
.marquee__track { display: flex; width: max-content; }
.marquee span { display: inline-flex; align-items: center; gap: 2.75rem; padding-left: 2.75rem; font-size: .86rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.marquee span::after { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }

/* Sections */
.section { padding-block: clamp(3.5rem, 8.5vw, 7.5rem); }
.section--tint { background: var(--paper); }
.section--dark { background: var(--dark); color: var(--white); }
.section--dark :is(p, li, dd, address) { color: #cbd9f1; }
.section--dark .eyebrow, .page-hero .eyebrow, :is(.video-card, .cta-band, .panel--dark, .article-cta, .tile--navy, .offer--navy, .journey) .eyebrow { color: #c3d6fa; }
/* Cartões brancos dentro de uma seção escura mantêm o texto escuro. */
.section--dark .card { color: var(--ink); }
.section--dark .card p { color: var(--copy); }
.section-head { max-width: 52rem; margin-bottom: clamp(2rem, 4.5vw, 3.5rem); }
.section-head h2 { font-size: clamp(2rem, 4.7vw, 3.7rem); font-weight: 300; line-height: 1.04; letter-spacing: -.045em; }
/* The emphasised words are bold and carry a hand-drawn yellow stroke, echoing the brand lettering. */
:is(.section-head, .offer) h2 strong { padding-bottom: .1em; background: url("/assets/traco.svg") no-repeat 50% 100% / 100% .3em; font-weight: 750; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.section-head p:not(.eyebrow) { max-width: 40rem; margin-top: 1.25rem; font-size: 1.12rem; }
.section h2 + p, .section h2 + address { margin-top: .9rem; }
.section p + .button { margin-top: 1.4rem; }
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--top { align-items: start; }
/* The photo follows the reader while the longer text column scrolls. */
@media (min-width: 47.51rem) { .split--top > .shot { position: sticky; top: 6.5rem; } }
.spaced { margin-top: 2.6rem; }

/* Course cards: a large photo with the text below it. */
.programs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.program { position: relative; display: flex; flex-direction: column; }
.program__media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--sky); box-shadow: var(--shadow); }
.program__media .photo { aspect-ratio: 4 / 5; border-radius: 0; object-fit: cover; object-position: 45% 40%; transition: transform 1s var(--ease); }
.program:hover .photo { transform: scale(1.05); }
.program__tag, .tile__tag { padding: .3rem .8rem; border-radius: 999px; background: var(--yellow); color: var(--navy); font-size: .72rem; font-weight: 800; letter-spacing: .04em; line-height: 1.4; }
.program__tag { position: absolute; bottom: 1rem; left: 1rem; }
.program__body { display: grid; justify-items: start; gap: .5rem; padding: 1.5rem .25rem 0; }
.program h3 { font-size: clamp(1.45rem, 2.3vw, 1.8rem); }
.program p { font-size: 1rem; }
.program .text-link { margin-top: .35rem; }
:is(.program, .tile, .card--course) .text-link::after, .card h3 a::after { content: ""; position: absolute; inset: 0; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.tile { position: relative; display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); background: var(--paper); transition: transform .4s var(--ease), box-shadow .4s; }
.section--tint .tile:not(.tile--navy) { background: var(--white); }
.tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.tile > div { display: grid; justify-items: start; gap: .5rem; }
.tile h3 { font-size: 1.5rem; }
.tile .text-link { margin-top: .4rem; }
.tile--navy { background: var(--dark); color: var(--white); }
.tile--navy p { color: #cbd9f1; }
.tile--navy .text-link { color: var(--white); }
.tile--navy .text-link .icon { color: var(--yellow); }
.tile--navy .card__icon { color: var(--white); }

/* Cards */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
h2 + .card-grid { margin-top: 2rem; }
.card { position: relative; display: flex; flex-direction: column; gap: .7rem; height: 100%; padding: 1.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; }
.card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.card p.eyebrow { align-self: start; margin-bottom: .2rem; }
.card p.eyebrow::before { width: 1.25rem; }
/* Emblems: the school's own two-tone drawings (icones.mjs), thin navy line with a yellow detail. */
.card__icon { display: block; flex: none; width: 3.25rem; height: 3.25rem; margin-bottom: .3rem; color: var(--navy); }
.emblem { display: block; width: 100%; height: 100%; }
.emblem__accent { fill: var(--yellow); }
.card__step { color: transparent; font-size: 2.75rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; -webkit-text-stroke: 1.5px var(--blue-strong); }
.card .text-link { margin-top: auto; padding-top: .4rem; }
.card h3 a { text-decoration: none; }
.card:hover h3 a { color: var(--link); }
.card .button { align-self: start; margin-top: auto; }
.promo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; padding: 1.5rem 1.75rem; border-radius: var(--radius); background: var(--dark); color: var(--white); }
.promo > div { flex: 1 1 16rem; }
.promo p { color: #cbd9f1; }
.promo .card__icon { margin-bottom: 0; color: var(--white); }

/* How the course works: the heading stays in view while the list scrolls. */
.method { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.method__head .section-head { margin-bottom: 1.75rem; }
.method__head h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3.5vw, 3.5rem); }
.feature { display: grid; align-content: start; gap: .55rem; padding-block: 1.9rem; border-top: 1px solid var(--line); }
.section--tint .feature { border-color: #e3dccd; }
.feature .card__icon { margin-bottom: .45rem; }
.feature p { font-size: 1rem; }
/* The school's own method, drawn as a path from Portuguese to English. */
.journey { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); gap: clamp(1.75rem, 5vw, 5rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); padding: clamp(1.75rem, 4.5vw, 3.75rem); border-radius: 2rem; background: var(--dark); color: var(--white); }
.journey__head h3 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); font-weight: 300; line-height: 1.1; letter-spacing: -.035em; }
.journey__head h3 strong { font-weight: 750; }
.journey p { color: #cbd9f1; }
.journey__head p:not(.eyebrow) { margin-top: 1rem; font-size: 1rem; }
.journey__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 2.25rem 0 0; list-style: none; }
.journey__steps::before { content: ""; position: absolute; top: .45rem; right: 0; left: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #4f9bff, var(--yellow)); }
.journey__steps li { position: relative; display: grid; align-content: start; gap: .45rem; }
.journey__steps li::before { content: ""; position: absolute; top: -2.25rem; left: 0; width: 1.05rem; height: 1.05rem; border: 3px solid var(--navy-deep); border-radius: 50%; background: #4f9bff; }
.journey__steps li:nth-child(2)::before { background: #a9b680; }
.journey__steps li:nth-child(3)::before { background: var(--yellow); }
.journey__steps .card__step { font-size: 2.4rem; -webkit-text-stroke-color: #ffffff8c; }
.journey__steps strong { color: var(--white); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.journey__steps p { font-size: .96rem; line-height: 1.55; }
/* Technology: four columns separated by hairlines. */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #ffffff26; }
.pillar { display: grid; align-content: start; gap: .7rem; padding: 2.25rem 1.75rem 0 0; }
.pillar + .pillar { padding-left: 1.75rem; border-left: 1px solid #ffffff1f; }
.pillar .card__icon { color: var(--white); }
.pillar p { font-size: .98rem; }

/* Audience panels */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.panel { padding: clamp(1.6rem, 3.4vw, 2.75rem); border-radius: var(--radius); background: var(--paper); }
.section--tint .panel { background: var(--white); }
.panel--dark, .section--tint .panel--dark { background: var(--dark); color: var(--white); }
.panel--dark li { color: #e3ecfb; }
.panel h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.panel h3 { font-size: 1.5rem; }
.panel p + p { margin-top: .8rem; }
.check-list { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 2.1rem; font-weight: 500; }
.check-list li + li { margin-top: .7rem; }
.check-list li::before { content: ""; position: absolute; top: .22rem; left: 0; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--navy); }
.check-list li::after { content: ""; position: absolute; top: .5rem; left: .47rem; width: .34rem; height: .6rem; border: solid var(--yellow); border-width: 0 .14rem .14rem 0; transform: rotate(45deg); }
.panel--dark .check-list li::before { background: var(--yellow); }
.panel--dark .check-list li::after { border-color: var(--navy); }
.punch { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-top: 2.25rem; color: var(--ink); font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 300; letter-spacing: -.03em; }
.punch .yes { height: 3.2em; background: var(--blue-strong); }
/* Two larger offers side by side. */
.offer { position: relative; isolation: isolate; display: grid; justify-items: start; align-content: start; overflow: hidden; padding: clamp(1.75rem, 4vw, 3.25rem); border-radius: 2rem; background: var(--paper); }
.offer h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 300; line-height: 1.08; }
.offer p:not(.eyebrow) { max-width: 30rem; margin-top: 1rem; }
.offer .button { margin-top: 1.75rem; }
.offer__mark { position: absolute; z-index: -1; top: -1.5rem; right: -1.5rem; width: 12rem; height: 12rem; color: var(--navy); opacity: .1; }
.offer--navy { background: var(--dark); color: var(--white); }
.offer--navy p:not(.eyebrow) { color: #cbd9f1; }
.offer--navy .offer__mark { color: var(--white); opacity: .16; }

/* Photos */
.photo { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--sky); }
.shot { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--sky); box-shadow: var(--shadow); }
.shot .photo { border-radius: 0; transition: transform 1s var(--ease); }
.shot:hover .photo { transform: scale(1.05); }
.shot figcaption { position: absolute; inset: auto 0 0; padding: 3rem 1.25rem 1rem; background: linear-gradient(transparent, #00133ad9); color: var(--white); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.shot--tall .photo { aspect-ratio: 3 / 4; object-fit: cover; object-position: 40% 45%; }
.shot--wide .photo { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 35%; }
/* The school from the inside: one large scene and the others around it. */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(6.5rem, 9.4vw, 9.75rem); gap: 1rem; }
.gallery .shot .photo { width: 100%; height: 100%; object-fit: cover; }
.gallery > :nth-child(1) { grid-column: 1 / span 8; grid-row: span 3; }
.gallery > :nth-child(2) { grid-column: 9 / span 4; grid-row: span 3; }
.gallery > :nth-child(3) { grid-column: 1 / span 4; grid-row: span 3; }
.gallery > :nth-child(4) { grid-column: 5 / span 4; grid-row: span 2; }
.gallery > :nth-child(5) { grid-column: 9 / span 4; grid-row: span 2; }
.gallery__cta { grid-column: 5 / span 8; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: 1rem clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--radius); background: var(--dark); color: var(--white); }
.gallery__cta .yes { flex: none; height: 4.6rem; }
.gallery__cta p { flex: 1 1 12rem; color: #dbe6f8; font-size: 1.05rem; font-weight: 600; }
.card-stack { display: grid; gap: 1rem; }
.place { position: relative; margin: 0; overflow: hidden; border-radius: 2rem; background: var(--sky); box-shadow: var(--shadow-lg); }
.place .photo { border-radius: 0; }
.place figcaption { position: absolute; inset: auto 0 0; padding: 3rem 1.5rem 1.1rem; background: linear-gradient(transparent, #00133ae6); color: var(--white); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.place + address { margin-top: 1.1rem; }
.section h2 + .place { margin-top: 1.25rem; }
.visit { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }
.visit__body { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.75rem, 5vw, 4.5rem); align-items: end; }
.visit__body .section-head { margin-bottom: 0; }
.info-list { display: grid; gap: .8rem; }
.info-list p { display: flex; gap: .7rem; }
.info-list .icon { margin-top: .2rem; color: var(--blue-strong); }
.photo + address { margin-top: 1.1rem; }
.hours { margin-top: .5rem; }

/* Testimonials */
.quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.quote-grid--1 { grid-template-columns: minmax(0, 47rem); }
.quote-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
h2 + .quote-grid, h2 + .quote-list { margin-top: 2rem; }
.quote-list { columns: 2; column-gap: 1.25rem; }
.quote-list .quote { margin-bottom: 1.25rem; break-inside: avoid; }
.quote { display: flex; flex-direction: column; gap: 1.1rem; margin: 0; padding: 1.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.section--tint .quote { border-color: transparent; }
.quote::before { content: "“"; height: 1.4rem; color: var(--yellow); font: 800 4.75rem/.8 var(--font); }
.quote blockquote { margin: 0; }
.quote blockquote p { color: var(--ink); }
.quote figcaption { display: flex; align-items: center; gap: .85rem; margin-top: auto; }
.avatar { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; }
.avatar--initials { display: grid; place-items: center; background: var(--navy); color: var(--yellow); font-size: .95rem; font-weight: 750; }
.quote__who { display: grid; font-size: .86rem; line-height: 1.4; }
.quote__who strong { color: var(--ink); font-size: .98rem; }
.quote__who span { color: var(--copy); }
/* The leading testimonial beside the Google score. */
.voices { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; }
.quote--lead { justify-content: center; padding: clamp(1.9rem, 4.5vw, 3.5rem); }
.quote--lead::before { height: 2.2rem; font-size: 7rem; }
.quote--lead blockquote p { font-size: clamp(1.25rem, 2.3vw, 1.75rem); font-weight: 300; line-height: 1.42; letter-spacing: -.02em; }
.quote--lead figcaption { margin-top: 1rem; }
.score { display: grid; align-content: center; justify-items: start; gap: .5rem; padding: clamp(1.9rem, 4vw, 3rem); border-radius: var(--radius); background: var(--dark); color: var(--white); }
.score__n { font-size: clamp(4rem, 8vw, 6rem); font-weight: 300; line-height: .9; letter-spacing: -.06em; }
.score .stars { font-size: 1.35rem; }
.score p { color: #cbd9f1; font-size: .98rem; }
.score .button { margin-top: 1rem; }
/* Recent Google reviews, summarised. */
.reviews { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.reviews h3 { font-size: 1.2rem; }
.review-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.review { display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.section--tint .review { border-color: transparent; }
.review p { color: var(--ink); font-size: .98rem; line-height: 1.55; }
.review .review__who { display: grid; margin-top: auto; padding-top: .5rem; font-size: .82rem; line-height: 1.45; }
.review__who strong { font-size: .96rem; }
.review__who span { color: var(--copy); }
.stars--full { background: #f5b400; -webkit-background-clip: text; background-clip: text; }
.reviews .section-note { font-size: .88rem; }
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.75rem; margin-top: 1.5rem; padding: 1.5rem 1.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.rating__score { display: grid; justify-items: center; color: var(--navy); font-size: 3.25rem; font-weight: 300; line-height: 1; letter-spacing: -.05em; }
.rating__score .stars { font-size: 1.1rem; letter-spacing: .1em; }
.rating p { flex: 1 1 14rem; margin: 0; color: var(--copy); }
.rating .button { margin-top: 0; }
.section h2 + .rating, .section h2 + .table-scroll { margin-top: 1.5rem; }
.video-card { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; margin-top: 1.25rem; padding: 1.25rem; border-radius: var(--radius); background: var(--dark); color: var(--white); }
.video-card p { color: #cbd9f1; }
.video-card h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.video-card h3 + p { margin-top: .6rem; }
.video-card__thumb { position: relative; display: block; overflow: hidden; border-radius: 1rem; }
.video-card__thumb .photo { border-radius: 0; transition: transform .8s var(--ease); }
.video-card__thumb:hover .photo { transform: scale(1.05); }
.video-card__play { position: absolute; inset: 0; display: grid; place-items: center; width: 4rem; height: 4rem; margin: auto; border-radius: 50%; background: var(--yellow); box-shadow: 0 .75rem 2rem #000a2a80; color: var(--navy); }
.video-card__play .icon { width: 1.5rem; height: 1.5rem; margin-left: .2rem; fill: currentColor; }

/* School facts and FAQ: hairlines instead of boxes. */
.facts { display: grid; margin: 0; border-top: 1px solid var(--line); }
h2 + .facts { margin-top: 1.5rem; }
.facts div { display: grid; grid-template-columns: 10.5rem 1fr; gap: .2rem 1.5rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line); }
.facts dt { padding-top: .22rem; color: var(--ink); font-size: .76rem; font-weight: 750; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.section--tint :is(.facts, .facts div, .faq details) { border-color: #e3dccd; }
.faq h2 { margin-bottom: 1.75rem; }
.faq .section-head { margin-bottom: 2rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { position: relative; padding: 1.3rem 3rem 1.3rem 0; font-size: 1.08rem; font-weight: 650; line-height: 1.4; cursor: pointer; list-style: none; transition: color .25s; }
.faq summary:hover { color: var(--blue-strong); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; top: 50%; right: .4rem; width: .65rem; height: .65rem; border: solid var(--blue-strong); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq details p { max-width: 44rem; padding-bottom: 1.5rem; }
.feature-list { margin-block: 1rem 0; padding-left: 1.25rem; }
.feature-list li + li { margin-top: .55rem; }

/* Inner page opening and navigation trail */
.breadcrumb { background: var(--night); color: #b6c8e6; font-size: .8rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .15rem .5rem; margin-block: 0; padding: .1rem 0 .7rem; list-style: none; }
.breadcrumb li { color: inherit; }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: #6f86ad; }
.breadcrumb a { color: #dbe6f8; font-weight: 600; text-decoration: none; }
.breadcrumb a:hover { color: var(--yellow); }
.breadcrumb a:focus-visible { outline-color: var(--yellow); }
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2.75rem, 6.5vw, 5.75rem); background: var(--dark); color: var(--white); }
.page-hero::after { content: ""; position: absolute; z-index: -1; top: -8rem; right: -9rem; width: 36rem; aspect-ratio: 1; background: var(--white); opacity: .045; mask: url("/assets/globo-logo.svg") center / contain no-repeat; -webkit-mask: url("/assets/globo-logo.svg") center / contain no-repeat; }
.page-hero h1 { max-width: 21ch; font-size: clamp(2.1rem, 4.8vw, 4rem); font-weight: 650; line-height: 1.04; letter-spacing: -.04em; }
.page-hero .lead, .page-hero .article-meta { color: #cfdcf3; }
.article-meta { margin-top: 1.25rem; font-size: .86rem; }
/* Go Geo Kids: the sub-brand's own logo and colours, only on the Kids page. The parents still see the same
   navy, calm page; the three colours appear in the opening and in small details. */
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.page-hero__photo { position: relative; justify-self: end; width: min(100%, 23rem); margin: 0; }
.page-hero__photo .photo { aspect-ratio: 4 / 5; border-radius: 1.75rem; box-shadow: 0 3rem 6rem -2rem #000720d9; object-fit: cover; object-position: 45% 30%; }
/* The Kids symbol as a round seal on the photo. */
.page-hero__sticker { position: absolute; bottom: 1.75rem; left: -2rem; width: 5.5rem; height: 5.5rem; padding: .95rem; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-lg); transform: rotate(-8deg); }
/* On the Kids page the top bar carries the Kids logo, which needs a little more room. */
.brand--kids img { width: 8.4rem; }
.page-hero--kids { background: radial-gradient(30rem 24rem at 82% 40%, #0190dd4d, transparent 68%), radial-gradient(20rem 18rem at 96% 90%, #fd687140, transparent 68%), radial-gradient(18rem 16rem at 66% 4%, #fec92033, transparent 68%), linear-gradient(160deg, #00133a 0%, #001a47 48%, #0a2857 100%); }
.page-hero--kids::after { display: none; }
.page-hero--kids::before { content: ""; position: absolute; inset: auto 0 0; height: .35rem; background: linear-gradient(90deg, #0190dd 0 33.33%, #fec920 33.33% 66.66%, #fd6871 66.66%); }
.tema-kids { --kids-blue: #0190dd; --kids-yellow: #fec920; --kids-pink: #fd6871; }
.tema-kids .eyebrow::before { width: 3rem; background: linear-gradient(90deg, var(--kids-blue) 0 33.33%, var(--kids-yellow) 33.33% 66.66%, var(--kids-pink) 66.66%); }
.tema-kids .check-list li:nth-child(3n + 1)::before { background: var(--kids-blue); }
.tema-kids .check-list li:nth-child(3n + 2)::before { background: var(--kids-yellow); }
.tema-kids .check-list li:nth-child(3n)::before { background: var(--kids-pink); }
.tema-kids .check-list li::after { border-color: var(--white); }
.tema-kids .check-list li:nth-child(3n + 2)::after { border-color: var(--navy); }
.tema-kids .feature-list li::marker { font-weight: 800; }
.tema-kids .feature-list li:nth-child(3n + 1)::marker { color: var(--kids-blue); }
.tema-kids .feature-list li:nth-child(3n + 2)::marker { color: #c99700; }
.tema-kids .feature-list li:nth-child(3n)::marker { color: var(--kids-pink); }

/* Call to action band */
.cta-band { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.75rem, 4.5vw, 4rem); align-items: center; overflow: hidden; padding: clamp(2rem, 6vw, 4.75rem); border-radius: 2rem; background: var(--dark); color: var(--white); }
.cta-band::before { content: ""; position: absolute; z-index: -1; right: -2.5rem; bottom: -3rem; width: min(34rem, 70%); aspect-ratio: 1023 / 502; background: var(--white); opacity: .07; mask: url("/assets/letreiro-yes-you-can.png") center / contain no-repeat; -webkit-mask: url("/assets/letreiro-yes-you-can.png") center / contain no-repeat; transform: rotate(-6deg); }
.cta-band h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 300; line-height: 1.04; letter-spacing: -.045em; }
.cta-band h2 strong { font-weight: 750; }
.cta-band :is(p, address) { color: #cbd9f1; }
.cta-band h2 + p { max-width: 30rem; margin-top: 1.1rem; font-size: 1.1rem; }
.cta-band .text-link { color: var(--yellow); }
.cta-band__info { display: grid; gap: .8rem; padding-left: clamp(0rem, 3vw, 2.5rem); border-left: 1px solid #ffffff26; }
.cta-band__info p { display: flex; gap: .7rem; }
.cta-band__info .icon { margin-top: .2rem; color: var(--yellow); }

/* Long-form articles */
.prose section + section { margin-top: 2.25rem; }
.prose h2 { font-size: clamp(1.45rem, 2.8vw, 2.05rem); }
.prose > :is(p, ul, ol, dl, div, nav, h3) { margin-top: 1.05rem; }
.prose > h2 { margin-top: 2.75rem; }
.prose > h3 { margin-top: 1.9rem; font-size: 1.18rem; }
.prose > .actions { margin-top: 1.75rem; }
.prose > :first-child { margin-top: 0; }
.prose :is(ul, ol) { margin-bottom: 0; padding-left: 1.3rem; }
.prose li + li { margin-top: .45rem; }
.prose i[lang] { color: var(--ink); }
.prose section p + p { margin-top: .85rem; }
.prose .faq { margin-top: 1.2rem; }
.toc { padding: 1.4rem 1.6rem; border-radius: 1.25rem; background: var(--paper); }
.toc p { color: var(--blue-strong); font-size: .74rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.toc ol { margin-top: .6rem; }
.toc a { color: var(--link); font-weight: 600; }
.note { padding: 1rem 1.2rem; border-left: .25rem solid var(--yellow); border-radius: .5rem; background: #fdf8d9; color: var(--ink); }
.examples { display: grid; gap: .6rem; margin-bottom: 0; }
.examples div { padding: .85rem 1.15rem; border-left: .25rem solid var(--blue); border-radius: .5rem; background: var(--mist); }
.examples dt { color: var(--ink); font-weight: 700; }
.examples dd { margin: .15rem 0 0; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 1.1rem; background: var(--white); }
table { width: 100%; border-collapse: collapse; font-size: .96rem; }
caption { padding: .85rem 1.1rem; color: var(--blue-strong); font-size: .74rem; font-weight: 750; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
th, td { padding: .75rem 1.1rem; border-top: 1px solid var(--line); color: var(--copy); text-align: left; vertical-align: top; }
thead th { background: var(--paper); color: var(--ink); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
tbody th { color: var(--ink); font-weight: 700; }
.article-cta { margin-top: 3rem; padding: clamp(1.6rem, 4vw, 2.75rem); border-radius: var(--radius); background: var(--dark); color: var(--white); }
.article-cta h2 { font-size: 1.6rem; }
.article-cta p { margin-top: .7rem; color: #cbd9f1; }

/* Footer and WhatsApp shortcut */
.site-footer { padding-block: clamp(3rem, 6vw, 5rem) 6rem; background: var(--night); color: var(--white); }
.site-footer :is(p, address) { color: #b6c8e6; font-size: .92rem; }
.site-footer a:focus-visible { outline-color: var(--yellow); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.15fr; gap: 2.25rem; }
.footer-grid nav { display: grid; align-content: start; justify-items: start; gap: .6rem; overflow-wrap: anywhere; font-size: .92rem; }
.footer-grid nav a { color: #dbe6f8; text-decoration: none; transition: color .2s; }
.footer-grid nav a:hover { color: var(--yellow); }
.site-footer .footer-title { margin-bottom: .5rem; color: var(--white); font-size: .72rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.footer-logo { display: block; width: 11rem; height: auto; margin-bottom: 1.25rem; }
.footer-hours { margin-top: .75rem; }
.social { display: flex; gap: .6rem; margin-top: 1.25rem; }
.social a { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border: 1px solid #ffffff3d; border-radius: 50%; color: var(--white); transition: background-color .25s, color .25s, border-color .25s; }
.social a:hover { border-color: var(--yellow); background: var(--yellow); color: var(--navy); }
.footer-note { margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid #ffffff1f; }
.whats { position: fixed; right: 1rem; bottom: 1rem; z-index: 6; display: inline-flex; align-items: center; gap: .5rem; min-height: 3.1rem; padding: .65rem 1.25rem; border-radius: 999px; background: #0b7a43; box-shadow: 0 .9rem 2rem -.5rem #00163d80; color: var(--white); font-size: .95rem; font-weight: 700; text-decoration: none; transition: transform .3s var(--ease), background-color .3s; }
.whats:hover { background: #096236; transform: translateY(-3px); }
.whats:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* O menu em uma linha precisa de cerca de 66rem; abaixo disso ele fica na segunda linha, rolável. */
@media (min-width: 70.01rem) {
  .site-header { position: sticky; top: 0; background: #00133aeb; backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); }
  .site-header__inner { flex-wrap: nowrap; min-height: 5rem; padding-block: 0; }
  .brand img { width: 8.75rem; }
  .brand--kids img { width: 9.75rem; }
  .site-header nav { order: 0; width: auto; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .method__head { position: sticky; top: 7.5rem; }
}

@media (max-width: 70rem) {
  .method, .journey { grid-template-columns: 1fr; }
}

@media (max-width: 62rem) {
  .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__grid, .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__photo { justify-self: start; width: min(100%, 24rem); margin-left: 1.25rem; }
  .page-hero__photo .photo { aspect-ratio: 5 / 4; object-position: 45% 22%; }
  .page-hero__sticker { left: -1.25rem; width: 4.5rem; height: 4.5rem; padding: .75rem; }
  .hero__media { justify-self: center; width: min(100%, 25rem); margin-top: 1rem; padding: 0 0 2.5rem 2.5rem; }
  .hero__media .yes { bottom: 3.5rem; }
  .tiles { grid-template-columns: 1fr; }
  .review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pillar:nth-child(n + 3) { margin-top: 2.25rem; border-top: 1px solid #ffffff26; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > div { grid-column: 1 / -1; }
}

@media (max-width: 47.5rem) {
  .brand img { width: 6.9rem; }
  .brand--kids img { width: 7.8rem; }
  .site-header__inner { gap: .4rem .75rem; }
  .site-header .button { min-height: 2.4rem; padding: .45rem .9rem; font-size: .8rem; }
  .split, .duo, .cta-band, .video-card, .visit__body, .voices, .tiles { grid-template-columns: 1fr; }
  .card-grid, .quote-grid, .quote-grid--2, .feature-grid { grid-template-columns: 1fr; }
  .quote-list { columns: 1; }
  .cta-band__info { padding-left: 0; padding-top: 1.5rem; border-top: 1px solid #ffffff26; border-left: 0; }
  /* The course cards scroll sideways, one and a bit per screen. */
  .programs { display: flex; margin-inline: -1.25rem; padding-inline: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .programs::-webkit-scrollbar { display: none; }
  .programs { gap: 1rem; }
  .program { flex: 0 0 78%; scroll-snap-align: center; }
  .review-list { display: flex; gap: 1rem; margin-inline: -1.25rem; padding-inline: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .review-list::-webkit-scrollbar { display: none; }
  .review { flex: 0 0 80%; scroll-snap-align: center; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: .75rem; }
  .gallery > :nth-child(n) { grid-column: 1 / -1; grid-row: auto; }
  .gallery > :is(:nth-child(2), :nth-child(3)) { grid-column: auto; }
  .gallery .shot .photo { aspect-ratio: 3 / 2; }
  .gallery > :is(:nth-child(2), :nth-child(3)) .photo { aspect-ratio: 3 / 4; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li { padding: 1.4rem 1rem 1.4rem 0; }
  .stats li + li { padding-left: 0; border-left: 0; }
  .stats li:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid #ffffff1f; }
  .stats li:nth-child(n + 3) { border-top: 1px solid #ffffff1f; }
  .journey__steps { grid-template-columns: 1fr; gap: 1.75rem; padding: 0 0 0 2.25rem; }
  .journey__steps::before { top: 0; right: auto; bottom: 0; left: .45rem; width: 3px; height: auto; background: linear-gradient(180deg, #4f9bff, var(--yellow)); }
  .journey__steps li::before { top: .5rem; left: -2.25rem; }
  .video-card__thumb { max-width: 16rem; }
  .whats { right: .75rem; bottom: .75rem; min-height: 2.8rem; padding: .5rem 1rem; font-size: .88rem; }
}

@media (max-width: 34rem) {
  .brand img { width: 5.6rem; }
  .brand--kids img { width: 6.5rem; }
  .site-header__inner { gap: .4rem .5rem; }
  .site-header .button { padding-inline: .6rem; font-size: .72rem; }
  .card-grid--4, .pillars { grid-template-columns: 1fr; }
  .pillar { padding-right: 0; }
  .pillar + .pillar { margin-top: 2rem; padding-left: 0; border-top: 1px solid #ffffff26; border-left: 0; }
  .facts div { grid-template-columns: 1fr; }
  th, td { padding-inline: .7rem; }
  .button { padding-inline: 1.35rem; }
}

@media (prefers-reduced-motion: no-preference) {
  /* The opening comes in softly; the pieces of the collage drift a little. The headline and the main photo
     only move, without fading, so the largest content of the page is painted at once. */
  .hero__grid > :first-child > :not(h1), .page-hero .wrap:not(.page-hero__grid) > :not(h1), .page-hero__grid > div > :not(h1) { animation: enter .9s var(--ease) both; }
  .hero h1, .hero__media, .page-hero h1, .page-hero__photo { animation: settle .9s var(--ease) both; }
  .hero__grid > :first-child > :nth-child(2) { animation-delay: .08s; }
  .hero__grid > :first-child > :nth-child(3) { animation-delay: .16s; }
  .hero__grid > :first-child > :nth-child(4) { animation-delay: .24s; }
  .page-hero .wrap > :nth-child(3), .page-hero__grid > div > :nth-child(3) { animation-delay: .1s; }
  .page-hero :is(.wrap, .page-hero__grid > div) > :nth-child(4) { animation-delay: .18s; }
  @keyframes enter { from { opacity: 0; translate: 0 22px; } }
  @keyframes settle { from { translate: 0 22px; } }
  .hero__seal { animation: drift 7s ease-in-out infinite; }
  .hero__photo--side { animation: drift 9s ease-in-out -3s infinite reverse; }
  @keyframes drift { 50% { translate: 0 -9px; } }
  .marquee__track { animation: marquee 48s linear infinite; }
  @keyframes marquee { to { transform: translateX(-50%); } }
  @supports (animation-timeline: view()) {
    .card, .quote, .panel, .place, .shot, .section-head, .video-card, .rating, .review, .program, .tile, .feature, .score, .journey, .pillar, .offer, .cta-band { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
    /* translate (not transform) keeps the hover lift of the cards working after the entrance. */
    @keyframes rise { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

@media print {
  .whats, .site-header nav, .site-header .button, .marquee { display: none; }
}