/* Sri Lorven School: public site styles */
:root {
  --navy: #1b2559;
  --navy-deep: #131a42;
  --indigo: #33409c;
  --gold: #f4b400;
  --gold-deep: #c98f00;
  --red: #c8202f;
  --cream: #fbf7ee;
  --paper: #ffffff;
  --tint: #f1f4fb;
  --ink: #1b1e2f;
  --body: #474b63;
  --muted: #71768f;
  --line: #e3e6f0;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(27, 37, 89, 0.06), 0 12px 32px -12px rgba(27, 37, 89, 0.18);
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); line-height: 1.15; margin: 0 0 0.5em; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.7vw, 2.5rem); }
h3, .h3 { font-size: 1.25rem; line-height: 1.25; }
h4, .h4 { font-size: 1.05rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 760px); }
.skip { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: 0.6rem 1rem; z-index: 100; }
.skip:focus { left: 0; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.hide-sm, .topbar a.hide-sm { display: none; }

.eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8a6200; margin: 0 0 0.9rem;
}
.lead { font-size: 1.1rem; color: var(--body); max-width: 56ch; }
.empty { padding: 3rem 1rem; text-align: center; color: var(--muted); background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.4rem; border-radius: 999px; border: 2px solid transparent;
  font: 700 0.97rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--navy { background: var(--navy); color: #fff; box-shadow: 0 10px 24px -12px rgba(27, 37, 89, 0.7); }
.btn--navy:hover { background: var(--navy-deep); color: #fff; }
.btn--gold { background: var(--gold); color: var(--navy-deep); }
.btn--gold:hover { background: #ffc61a; color: var(--navy-deep); }
.btn--ghost { border-color: rgba(27, 37, 89, 0.25); color: var(--navy); background: transparent; }
.btn--ghost:hover { border-color: var(--navy); }
.btn--ghost-light { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; color: #fff; }
.btn--block { width: 100%; }
.btn--wa { background: #1faa59; color: #fff; }
.btn--wa:hover { background: #178a48; color: #fff; }
.link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--navy); text-decoration: none; white-space: nowrap; }
.link .icon { transition: transform 0.15s ease; }
.link:hover .icon { transform: translateX(3px); }
.link--back .icon { transform: rotate(180deg); }
.link--back:hover .icon { transform: rotate(180deg) translateX(3px); }

/* Top bar and header */
.topbar { background: var(--navy-deep); color: #dfe4ff; font-size: 0.86rem; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.topbar a:hover { color: #fff; }
.topbar__notice { font-weight: 600; min-width: 0; }
.topbar__notice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__notice .icon { color: var(--gold); }
.topbar__contact { display: flex; gap: 1.2rem; flex: none; align-items: center; }
.langswitch { padding: 0.15rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; font-weight: 700; }
.langswitch:hover { border-color: var(--gold); color: var(--gold) !important; }

.header { position: sticky; top: 0; z-index: 50; background: rgba(251, 247, 238, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(27, 37, 89, 0.08); }
.header__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 78px; }
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand__logo { height: 54px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--navy); letter-spacing: -0.01em; }
.brand__tag { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); margin-top: 0.25rem; }

.navtoggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--navy); cursor: pointer; }
.navtoggle__close { display: none; }
.navtoggle[aria-expanded='true'] .navtoggle__open { display: none; }
.navtoggle[aria-expanded='true'] .navtoggle__close { display: inline-flex; }
.nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--cream); border-bottom: 1px solid var(--line); padding: 0.75rem 1.25rem 1.5rem; box-shadow: var(--shadow); }
.nav.is-open { display: block; }
.nav ul { display: grid; }
.nav a:not(.btn) { display: block; padding: 0.8rem 0.25rem; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.nav a[aria-current='page'] { color: var(--indigo); }
.nav__cta { margin-top: 1rem; width: 100%; }

/* Hero */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; right: -12%; top: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 180, 0, 0.2), transparent 70%); pointer-events: none; }
.hero__in { display: grid; gap: 2.5rem; align-items: center; position: relative; }
.hero__lead { font-size: 1.13rem; max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 1.5rem; }
.hero__points { display: grid; gap: 0.45rem; font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.hero__points li { display: flex; align-items: center; gap: 0.55rem; }
.hero__points .icon { color: #1c8a4a; }
.hero__art { position: relative; max-width: 560px; justify-self: center; width: 100%; }
.hero__frame { position: relative; aspect-ratio: 1 / 1.02; border-radius: 240px 240px var(--radius) var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--tint); }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transform: scale(1.06); transition: opacity 1.1s ease, transform 7s ease-out; }
.hero__photo.is-on { opacity: 1; transform: scale(1); }
.hero__caption { position: absolute; right: 14px; bottom: 14px; max-width: 62%; padding: 0.4rem 0.8rem; border-radius: 999px; background: rgba(13, 18, 48, 0.72); color: #fff; font-size: 0.78rem; font-weight: 600; line-height: 1.3; backdrop-filter: blur(6px); }
.hero__shape { position: absolute; pointer-events: none; z-index: 2; }
.hero__shape--ring { width: 74px; height: 74px; right: -18px; top: 18%; border: 10px solid var(--gold); border-radius: 50%; animation: float 7s ease-in-out infinite; }
.hero__shape--dots { width: 92px; height: 92px; left: -34px; top: 6%; background-image: radial-gradient(var(--indigo) 2.2px, transparent 2.6px); background-size: 15px 15px; opacity: 0.55; animation: float 9s ease-in-out infinite reverse; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.hl { position: relative; white-space: nowrap; color: var(--navy); }
.hl::after { content: ''; position: absolute; left: -2%; right: -2%; bottom: -0.08em; height: 0.34em; z-index: -1; border-radius: 999px; background: var(--gold); opacity: 0.55; transform: rotate(-1.2deg); }
.hero__art::after { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--gold); border-radius: 240px 240px var(--radius) var(--radius); z-index: -1; }
.hero__badge { position: absolute; left: -6px; bottom: 26px; background: var(--navy); color: #fff; border-radius: var(--radius-sm); padding: 0.8rem 1.1rem; box-shadow: var(--shadow); display: grid; line-height: 1.2; }
.hero__badge strong { font-family: var(--display); font-size: 1.35rem; color: var(--gold); }
.hero__badge span { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; }

/* Stats */
.stats { background: var(--navy); color: #cfd5f5; }
.stats__in { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.25rem; padding-block: 2rem; }
.stats strong { display: block; font-family: var(--display); font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); color: #fff; line-height: 1.1; margin-bottom: 0.3rem; }
.stats__in > div > span { font-size: 0.9rem; line-height: 1.4; display: block; }
.stats strong span { font-variant-numeric: tabular-nums; }

/* Moving strip of what the school offers */
.ticker { overflow: hidden; background: var(--gold); color: var(--navy-deep); border-block: 1px solid rgba(19, 26, 66, 0.12); }
.ticker__track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker ul { display: flex; flex: none; }
.ticker li { display: flex; align-items: center; gap: 1.6rem; padding: 0.7rem 0 0.7rem 1.6rem; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; white-space: nowrap; }
.ticker li::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); opacity: 0.7; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Scroll-in animation (only when scripts run, so content is never hidden without them) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Sections */
.section { padding: clamp(3.25rem, 7vw, 6rem) 0; }
.section--tint { background: var(--tint); }
.section--navy { background: var(--navy); color: #cfd5f5; }
.section--navy h2 { color: #fff; }
.section--navy .eyebrow { color: var(--gold); }
.section--navy .link { color: #fff; }
.sechead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.25rem; }
.sechead h2 { margin: 0; max-width: 22ch; }
.split { display: grid; gap: 2.5rem; align-items: start; }

.values { display: grid; gap: 1rem; }
.value { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.value__n { font-family: var(--display); font-weight: 700; color: var(--gold-deep); font-size: 0.95rem; letter-spacing: 0.06em; }
.value h3 { margin: 0.5rem 0 0.4rem; }
.value p { margin: 0; font-size: 0.96rem; }

.breadcrumbs { padding-top: 1rem; padding-bottom: 1rem; font-size: .875rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem .6rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: '/'; margin-right: .6rem; opacity: .5; }
.breadcrumbs a { text-decoration: underline; text-underline-offset: .2em; }
.stages { display: grid; gap: 1.1rem; }
.stage { background: var(--paper); border-radius: var(--radius); padding: 1.9rem 1.75rem; border-top: 4px solid var(--gold); box-shadow: var(--shadow); }
.stage:nth-child(2) { border-top-color: var(--indigo); }
.stage:nth-child(3) { border-top-color: var(--red); }
.stage__classes { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.stage p:last-child { margin: 0; }

.facgrid { display: grid; gap: 1rem; }
.fac { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.fac:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.fac__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #eef1fb; color: var(--indigo); margin-bottom: 1rem; flex: none; }
.fac__icon .icon { width: 26px; height: 26px; }
.fac:nth-child(3n + 2) .fac__icon { background: #fff4d1; color: #9a6c00; }
.fac:nth-child(3n) .fac__icon { background: #fde9eb; color: var(--red); }
.fac h3, .fac .h3 { font-size: 1.12rem; margin-bottom: 0.4rem; }
.fac p { margin: 0; font-size: 0.95rem; }

.mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.mosaic__item { position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; background: var(--navy-deep); }
.mosaic__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 0.4s ease; }
.mosaic__item:hover img { transform: scale(1.05); }
.mosaic__item span { position: absolute; inset: auto 0 0 0; padding: 2rem 0.9rem 0.7rem; background: linear-gradient(transparent, rgba(10, 14, 40, 0.85)); color: #fff; font-size: 0.85rem; font-weight: 600; line-height: 1.3; }

.postgrid { display: grid; gap: 1.1rem; }
.postcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.postcard__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tint); }
.postcard__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.postcard__body { padding: 1.35rem 1.4rem 1.5rem; }
.postcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.7rem; font-weight: 600; }
.postcard h3 { margin-bottom: 0.45rem; }
.postcard h3 a { color: var(--ink); text-decoration: none; }
.postcard h3 a:hover { color: var(--indigo); }
.postcard p:last-child { margin: 0; font-size: 0.95rem; }
.tag { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: #eef1fb; color: var(--indigo); }
.tag--event { background: #fff4d1; color: #8a6000; }
.tag--notice { background: #fde9eb; color: #a31523; }
.tag--pin { background: var(--navy); color: #fff; }

.videos { display: grid; grid-auto-flow: column; grid-auto-columns: 68%; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.75rem; margin-inline: -1.25rem; padding-inline: 1.25rem; }
.video { scroll-snap-align: start; }
.video__frame { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: var(--navy); box-shadow: var(--shadow); }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.video__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.video__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.video__play::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(13, 18, 48, 0.05), rgba(13, 18, 48, 0.55)); }
.video__play:hover img { transform: scale(1.05); }
.video__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: var(--gold); color: var(--navy-deep); box-shadow: 0 0 0 0 rgba(244, 180, 0, 0.6); animation: pulse 2.4s ease-out infinite; }
.video__icon .icon { width: 28px; height: 28px; margin-left: 3px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(244, 180, 0, 0.55); } 70%, 100% { box-shadow: 0 0 0 20px rgba(244, 180, 0, 0); } }
.video h3 { margin: 0.9rem 0 0.15rem; font-size: 1.08rem; }
.video__link { font-size: 0.86rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.video__link:hover { color: var(--indigo); }

.quotes { display: grid; gap: 1.1rem; }
.quote { margin: 0; background: var(--paper); border-radius: var(--radius); padding: 1.75rem; border: 1px solid var(--line); }
.quote blockquote { margin: 0 0 1rem; font-family: var(--display); font-size: 1.12rem; line-height: 1.5; color: var(--ink); }
.quote figcaption { font-size: 0.9rem; display: grid; }
.quote figcaption span { color: var(--muted); }

.cta { background: var(--navy); color: #cfd5f5; padding: clamp(2.75rem, 6vw, 4.5rem) 0; position: relative; overflow: hidden; }
.cta::before { content: ''; position: absolute; left: -8%; bottom: -70%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 180, 0, 0.22), transparent 70%); }
.cta__in { display: grid; gap: 1.5rem; align-items: center; position: relative; }
.cta h2 { color: #fff; margin-bottom: 0.4rem; }
.cta p { margin: 0; max-width: 58ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Principal's message */
.principal { display: grid; gap: 2rem; align-items: center; }
.principal__photo { width: min(100%, 300px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 160px 160px var(--radius) var(--radius); box-shadow: var(--shadow); justify-self: center; }
.principal__msg { margin: 0 0 1.25rem; padding: 0 0 0 1.25rem; border-left: 4px solid var(--gold); }
.principal__msg p { font-family: var(--display); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); line-height: 1.6; color: var(--ink); }
.principal__msg p:last-child { margin: 0; }
.principal__sign { display: grid; margin: 0; padding-left: 1.5rem; }
.principal__sign span { color: var(--muted); font-size: 0.92rem; }

/* Inner pages */
.pagehead { background: var(--navy); color: #cfd5f5; padding: clamp(2.75rem, 6vw, 4.75rem) 0; position: relative; overflow: hidden; }
.pagehead::after { content: ''; position: absolute; right: -6%; top: -60%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 180, 0, 0.2), transparent 70%); }
.pagehead .wrap { position: relative; z-index: 1; }
.pagehead .eyebrow { color: var(--gold); }
.pagehead h1 { color: #fff; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); max-width: 22ch; margin-bottom: 0.4em; }
.pagehead__lead { font-size: 1.1rem; max-width: 62ch; margin: 0; }

.prose { max-width: 64ch; }
.prose p { font-size: 1.05rem; }
.media { margin: 0; }
.media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); max-height: 560px; object-fit: cover; }
.media figcaption, .strip figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.6rem; }

.leaders { display: grid; gap: 1rem; }
.leader { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius-sm); padding: 1.4rem 1.5rem; }
.leader h3 { margin-bottom: 0.15rem; }
.leader__role { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 0.6rem; }
.leader p:last-child { margin: 0; font-size: 0.96rem; }

.checks { display: grid; gap: 0.75rem 1.5rem; }
.checks li { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 600; color: var(--ink); }
.checks .icon { color: #1c8a4a; margin-top: 0.2em; }
.checks--one { margin-top: 1.25rem; }

.programmes { display: grid; gap: 1rem; }
.programme { padding: 1.5rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.programme p { margin: 0; font-size: 0.96rem; }

.strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.strip figure { margin: 0; }
.strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }

.people { display: grid; gap: 1rem; }
.person { display: flex; align-items: center; gap: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.person__photo { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex: none; }
.person__photo--initial { display: grid; place-items: center; background: var(--navy); color: var(--gold); font-family: var(--display); font-size: 1.6rem; font-weight: 700; }
.person h2 { margin: 0 0 0.15rem; font-size: 1.12rem; }
.person__role { margin: 0; color: var(--indigo); font-weight: 600; font-size: 0.93rem; }
.person__q { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.86rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }
.chips a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.chips a span { font-size: 0.75rem; color: var(--muted); }
.chips a:hover { border-color: var(--navy); }
.chips a[aria-current='true'] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chips a[aria-current='true'] span { color: #cfd5f5; }

.masonry { columns: 2; column-gap: 0.75rem; }
.masonry__item { position: relative; display: block; break-inside: avoid; margin-bottom: 0.75rem; border-radius: var(--radius-sm); overflow: hidden; background: var(--tint); cursor: zoom-in; }
.masonry__item img { width: 100%; height: auto; transition: transform 0.4s ease; }
.masonry__item:hover img { transform: scale(1.03); }
.masonry__item span { position: absolute; inset: auto 0 0 0; padding: 1.75rem 0.8rem 0.6rem; background: linear-gradient(transparent, rgba(10, 14, 40, 0.82)); color: #fff; font-size: 0.82rem; font-weight: 600; line-height: 1.3; opacity: 0; transition: opacity 0.2s ease; }
.masonry__item:hover span, .masonry__item:focus-visible span { opacity: 1; }
.follow { display: flex; align-items: center; gap: 0.5rem; justify-content: center; margin: 2.5rem 0 0; font-weight: 600; flex-wrap: wrap; }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8, 10, 28, 0.94); display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 3.5rem 1rem 1.25rem; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(100%, 1200px); max-height: calc(100vh - 8rem); object-fit: contain; border-radius: 8px; }
.lightbox__cap { color: #e6e9fb; font-size: 0.95rem; text-align: center; padding-top: 0.9rem; min-height: 2.2rem; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; }
.lightbox button:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox__close { top: 0.9rem; right: 0.9rem; }
.lightbox__prev { left: 0.75rem; top: 50%; transform: translateY(-50%) rotate(180deg); }
.lightbox__next { right: 0.75rem; top: 50%; transform: translateY(-50%); }

.steps { display: grid; gap: 1rem; counter-reset: step; }
.steps li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.steps__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--navy-deep); font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin-bottom: 0.9rem; }
.steps h3 { margin-bottom: 0.35rem; }
.steps p { margin: 0; font-size: 0.95rem; }

.callbox { margin-top: 1.75rem; padding: 1.25rem 1.4rem; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--line); }
.callbox p { margin: 0 0 0.6rem; font-weight: 600; color: var(--ink); }
.callbox__nums { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0 !important; }
.callbox__nums a { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; text-decoration: none; color: var(--navy); }

.applyform h2 { margin: 2rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 0.6rem; }
.applyform h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.formhint { font-size: 0.9rem; color: var(--muted); margin: -0.4rem 0 1rem; }
.consent { margin-top: 1.5rem; }
.consent__label { display: flex !important; gap: 0.7rem; align-items: flex-start; font-weight: 500 !important; line-height: 1.5; }
.field__err:empty { display: none; }
.morelinks { margin: 1.25rem 0 0; }
.refbox { display: inline-flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; justify-content: center; margin: 0 auto 1.5rem; padding: 0.9rem 1.4rem; border-radius: var(--radius-sm); background: var(--paper); border: 2px dashed var(--gold); }
.refbox strong { font-family: var(--display); font-size: 1.5rem; color: var(--navy); letter-spacing: 0.04em; }
.cta__actions--center { justify-content: center; }

.doclist { display: grid; gap: 0.7rem; margin-bottom: 2.25rem; }
.doclist__h { margin-bottom: 0.9rem; }
.doclist a { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--line); text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
.doclist a:hover { border-color: var(--navy); transform: translateY(-1px); }
.doclist .fac__icon { margin: 0; }
.doclist__text { display: grid; }
.doclist__text strong { color: var(--ink); }
.doclist__text span { font-size: 0.85rem; color: var(--muted); }

.datelist { display: grid; gap: 0.7rem; margin-bottom: 2.5rem; }
.datelist__h { margin-top: 0.5rem; }
.datelist li { display: flex; align-items: center; gap: 1.1rem; padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--line); }
.datelist__date { display: grid; justify-items: center; flex: none; width: 76px; padding: 0.4rem 0.3rem; border-radius: 12px; background: var(--navy); color: #cfd5f5; line-height: 1.15; }
.datelist__date strong { font-family: var(--display); font-size: 1.6rem; color: #fff; }
.datelist__date span { font-size: 0.72rem; font-weight: 700; text-align: center; }
.datelist__body { display: grid; gap: 0.3rem; justify-items: start; }
.datelist__body a { font-weight: 700; color: var(--ink); text-decoration: none; font-size: 1.05rem; }
.datelist__body a:hover { color: var(--indigo); }
.datelist--past .datelist__date { background: #dfe3f1; color: var(--body); }
.datelist--past .datelist__date strong { color: var(--ink); }
.tag--holiday { background: #e4f5ea; color: #14532d; }
.chips a .icon { width: 1.05em; height: 1.05em; }

.formcard { background: var(--paper); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.25rem); box-shadow: var(--shadow); border: 1px solid var(--line); }
.field { margin-bottom: 1.1rem; }
.field-row { display: grid; gap: 0 1rem; }
.field label { display: block; font-weight: 700; color: var(--ink); font-size: 0.92rem; margin-bottom: 0.4rem; }
.opt { font-weight: 500; color: var(--muted); font-size: 0.8rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.8rem 0.95rem; border-radius: 10px; border: 1.5px solid #cfd4e4; background: #fff;
  font: inherit; color: var(--ink);
}
/* Tick boxes and file pickers are not text boxes: keep their natural size. */
.field input[type='checkbox'], .field input[type='radio'] { width: 1.2rem; height: 1.2rem; padding: 0; margin: 0.2rem 0 0; flex: none; border-radius: 4px; accent-color: var(--navy); }
.field input[type='file'] { padding: 0.55rem; font-size: 0.88rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 4px rgba(51, 64, 156, 0.14); }
.field--error input, .field--error select, .field--error textarea { border-color: var(--red); }
.field__err { color: #a31523; font-size: 0.86rem; margin: 0.35rem 0 0; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formnote { font-size: 0.82rem; color: var(--muted); margin: 0.9rem 0 0; text-align: center; }
.notice { border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; margin: 0 0 1rem; }
.notice--ok { background: #e7f6ec; color: #14532d; }
.notice--ok h3 { color: #14532d; margin-bottom: 0.3rem; }
.notice--ok p { margin: 0; }
.notice--error { background: #fde9eb; color: #8f1220; font-weight: 600; }

.contactlist { display: grid; gap: 1.5rem; }
.contactitem { display: flex; gap: 1rem; align-items: flex-start; }
.contactitem .fac__icon { margin: 0; }
.contactitem h2 { margin-bottom: 0.25rem; }
.contactitem p { margin: 0 0 0.4rem; }
.contactitem p a { text-decoration: none; font-weight: 600; }
.map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-height: 360px; background: var(--tint); }
.map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }

.article h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); }
.article__back { margin-bottom: 1.75rem; }
.article__img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius); margin: 1.5rem 0 2rem; }
.notfound { text-align: center; }
.notfound .lead { margin-inline: auto; margin-bottom: 1.75rem; }

/* Floating WhatsApp button */
.wa { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem; border-radius: 999px; background: #1faa59; color: #fff; font-weight: 700; font-size: 0.92rem; text-decoration: none; box-shadow: 0 10px 28px -8px rgba(13, 80, 40, 0.6); transition: transform 0.15s ease; }
.wa:hover { color: #fff; transform: translateY(-2px); }
.wa .icon { width: 26px; height: 26px; }
.wa span { display: none; }

/* Footer */
.footer { background: var(--navy-deep); color: #b9c0e6; padding: 3.5rem 0 0; font-size: 0.94rem; }
.footer a { color: #e3e7ff; text-decoration: none; }
.footer a:hover { color: var(--gold); }
.footer__grid { display: grid; gap: 2.25rem; }
.footer__logo { width: 190px; height: auto; margin-bottom: 1.1rem; }
.footer__name { font-family: var(--display); font-size: 1.5rem; color: #fff; font-weight: 700; margin: 0; }
.footer__tag { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--gold); margin: 0.3rem 0 1rem; }
.footer__muted { margin: 0 0 1.1rem; }
.footer__h { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; font-weight: 700; margin-bottom: 1rem; }
.footer__links { display: grid; gap: 0.5rem; }
.footer__links--two { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
.footer__addr { display: grid; gap: 0.8rem; }
.footer__addr > span { display: flex; gap: 0.6rem; align-items: flex-start; }
.footer__addr .icon { color: var(--gold); margin-top: 0.15em; }
.social { display: flex; gap: 0.6rem; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.social a:hover { background: var(--gold); color: var(--navy-deep); }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 3rem; padding-block: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.84rem; }
.footer__base a { color: #8f97c4; }

/* Telugu pages: Telugu fonts, and no forced capitals or wide letter-spacing (Telugu has neither) */
html[lang='te'] { --display: 'Noto Serif Telugu', 'Fraunces', Georgia, serif; --sans: 'Noto Sans Telugu', 'Plus Jakarta Sans', system-ui, sans-serif; }
html[lang='te'] body { line-height: 1.8; }
html[lang='te'] h1, html[lang='te'] h2, html[lang='te'] h3 { line-height: 1.4; letter-spacing: 0; }
html[lang='te'] .eyebrow, html[lang='te'] .stage__classes, html[lang='te'] .leader__role, html[lang='te'] .tag, html[lang='te'] .footer__h { letter-spacing: 0.02em; font-size: 0.86rem; }
html[lang='te'] h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }

/* Larger screens */
@media (min-width: 600px) {
  .hide-sm, .topbar a.hide-sm { display: inline-flex; }
  .videos { grid-auto-columns: 40%; }
  .wa { padding: 0.75rem 1.1rem 0.75rem 0.9rem; }
  .wa span { display: inline; }
  .facgrid { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(2, 1fr); }
  .postgrid { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: repeat(2, 1fr); }
  .people { grid-template-columns: repeat(2, 1fr); }
  .programmes { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .checks { grid-template-columns: repeat(2, 1fr); }
  .checks--one { grid-template-columns: 1fr; }
  .leaders { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 3; }
  .strip { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .stats__in { grid-template-columns: repeat(4, 1fr); padding-block: 2.5rem; }
  .videos { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; padding-bottom: 0; }
  .hero__in { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; }
  .split { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; }
  .split--media { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
  .split--form { grid-template-columns: 1fr 1fr; }
  .principal { grid-template-columns: 300px 1fr; gap: 3.5rem; }
  .split--contact { grid-template-columns: 0.8fr 1.2fr; align-items: stretch; }
  .stages { grid-template-columns: repeat(3, 1fr); }
  .values--row { grid-template-columns: repeat(4, 1fr); }
  .facgrid { grid-template-columns: repeat(4, 1fr); }
  .facgrid--3 { grid-template-columns: repeat(3, 1fr); }
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; gap: 1rem; }
  .mosaic__item { aspect-ratio: auto; }
  .mosaic__item:nth-child(1), .mosaic__item:nth-child(6) { grid-column: span 2; }
  .postgrid { grid-template-columns: repeat(4, 1fr); }
  .postgrid--3 { grid-template-columns: repeat(3, 1fr); }
  .quotes { grid-template-columns: repeat(3, 1fr); }
  .people { grid-template-columns: repeat(3, 1fr); }
  .programmes { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .checks { grid-template-columns: repeat(4, 1fr); }
  .checks--one { grid-template-columns: 1fr; }
  .cta__in { grid-template-columns: 1fr auto; gap: 3rem; }
  .footer__grid { grid-template-columns: 1.15fr 1.25fr 1.2fr 0.9fr; gap: 2.5rem; }
  .masonry { columns: 4; column-gap: 1rem; }
  .masonry__item { margin-bottom: 1rem; }
  .strip { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1080px) {
  .navtoggle { display: none; }
  .nav { display: flex; align-items: center; gap: 1.25rem; position: static; background: none; border: 0; padding: 0; box-shadow: none; }
  .nav ul { display: flex; gap: 0.15rem; }
  .nav a:not(.btn) { border: 0; padding: 0.5rem 0.7rem; border-radius: 8px; font-size: 0.93rem; }
  .nav a:not(.btn):hover { background: rgba(27, 37, 89, 0.06); }
  .nav a[aria-current='page'] { color: var(--navy); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
  .brand__logo { height: 64px; }
  .header__in { min-height: 90px; }
  .nav__cta { margin: 0; width: auto; padding: 0.7rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .ticker__track { width: auto; flex-wrap: wrap; }
  .ticker ul { flex-wrap: wrap; }
  .ticker ul[aria-hidden] { display: none; }
}

/* ---------- certificates and the "school on your phone" section ---------- */
.certpage { background: var(--tint); }
.certok { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: #e4f5ea; color: #14532d; font-weight: 700; border-radius: 999px; padding: 0.55rem 1rem; margin: 0 auto 1.25rem; width: fit-content; max-width: 100%; font-size: 0.92rem; text-align: center; }
.cert { background: var(--paper); border-radius: var(--radius); padding: 0.7rem; box-shadow: var(--shadow); background-image: linear-gradient(135deg, var(--navy) 0 50%, var(--gold) 50% 100%); }
.cert__in { background: var(--paper); border-radius: 12px; padding: clamp(1.4rem, 1rem + 3vw, 3rem) clamp(1rem, 0.6rem + 3vw, 3rem); text-align: center; display: grid; justify-items: center; }
.cert__logo { width: clamp(140px, 30%, 200px); margin-bottom: 1.25rem; }
.cert__kind { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 1.2rem; }
.cert__to, .cert__for { margin: 0; color: var(--muted); font-size: 0.95rem; }
.cert__name { font-size: clamp(1.9rem, 1.3rem + 3vw, 3rem); margin: 0.3rem 0 0.1rem; overflow-wrap: anywhere; }
.cert__class { margin: 0 0 1rem; font-weight: 700; color: var(--indigo); }
.cert__title { font-size: clamp(1.25rem, 1rem + 1.4vw, 1.8rem); color: var(--navy); margin: 0.4rem 0 0.5rem; max-width: 24ch; }
.cert__detail { max-width: 46ch; margin: 0; }
.cert__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: end; width: 100%; margin-top: 2rem; }
.cert__foot > div { display: grid; gap: 0.15rem; font-size: 0.82rem; color: var(--muted); min-width: 0; }
.cert__foot strong { color: var(--ink); font-size: 0.95rem; border-top: 1px solid #b9bfd6; padding-top: 0.35rem; overflow-wrap: anywhere; }
.cert__qr { justify-items: center; }
.cert__qr svg { width: 96px; height: 96px; }
.cert__qr span { font-size: 0.68rem; letter-spacing: 0.12em; font-weight: 700; }
.certshare { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin: 1.5rem 0 1rem; }
.certcta { text-align: center; color: var(--muted); margin: 0; }
.certcta a { font-weight: 700; }

.tech { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tech__item { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); padding: 1.25rem; }
.tech__item .icon { width: 2rem; height: 2rem; color: var(--gold); margin-bottom: 0.7rem; }
.tech__item h3 { color: #fff; font-family: var(--sans); font-weight: 700; font-size: 1.05rem; letter-spacing: 0; margin-bottom: 0.35rem; }
.tech__item p { margin: 0; font-size: 0.94rem; }
.topbar__parents { font-weight: 700; }
@media print {
  .topbar, .header, .footer, .wa, .noprint, .certok { display: none !important; }
  .certpage { background: #fff; padding: 0; }
  .cert { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Lab Saturday: home band, booking slots, ticket ---------- */
.labband { background: var(--gold); color: var(--navy-deep); }
.labband__in { display: grid; gap: 1rem 1.5rem; align-items: center; padding-block: 1.5rem; grid-template-columns: auto minmax(0, 1fr); }
.labband__date { background: var(--navy-deep); color: #fff; border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; text-align: center; display: grid; line-height: 1.1; min-width: 4.2rem; }
.labband__date strong { font-size: 1.9rem; font-family: var(--display); }
.labband__date span { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); }
.labband .eyebrow { color: var(--navy-deep); margin-bottom: 0.2rem; }
.labband h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); margin: 0 0 0.2rem; color: var(--navy-deep); }
.labband p { margin: 0; }
.labband .btn { background: var(--navy-deep); color: #fff; grid-column: 1 / -1; justify-self: start; }
.labband .btn:hover { background: var(--navy); color: #fff; }
.slots { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.slots legend { font-weight: 700; color: var(--ink); font-size: 0.92rem; margin-bottom: 0.4rem; padding: 0; }
.slot { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0.2rem 0.8rem; align-items: center; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 0.8rem; margin-bottom: 0.5rem; cursor: pointer; font-weight: 400 !important; }
.slot:has(input:checked) { border-color: var(--indigo); background: var(--tint); }
.slot--full { opacity: 0.55; cursor: not-allowed; }
.slot__date { display: grid; text-align: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--gold-deep); line-height: 1.1; }
.slot__date strong { font-size: 1.35rem; color: var(--navy); font-family: var(--display); }
.slot__text { display: grid; min-width: 0; font-size: 0.86rem; color: var(--muted); }
.slot__text strong { color: var(--ink); font-size: 0.95rem; }
.slot__left { grid-column: 3; font-size: 0.78rem; font-weight: 700; color: #14532d; }
.slot--full .slot__left { color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ticket { background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.ticket > header { background: var(--navy-deep); color: var(--gold); display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82rem; }
.ticket > header img { width: 120px; }
.ticket__body { display: grid; gap: 1.25rem; padding: 1.5rem 1.25rem; align-items: center; }
.ticket__when { margin: 0 0 0.3rem; color: var(--gold-deep); font-weight: 600; }
.ticket__when strong { font-size: 1.15rem; }
.ticket h1 { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem); margin-bottom: 0.9rem; }
.ticket dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.35rem 1rem; margin: 0; font-size: 0.95rem; }
.ticket dt { color: var(--muted); font-weight: 600; }
.ticket dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.ticket__qr { display: grid; justify-items: center; gap: 0.3rem; border-top: 2px dashed var(--line); padding-top: 1.25rem; }
.ticket__qr svg { width: 170px; height: 170px; }
.ticket__qr span { font-weight: 700; letter-spacing: 0.16em; color: var(--ink); }

/* ---------- admissions assistant ---------- */
.ask { position: fixed; right: 16px; bottom: 78px; z-index: 61; }
.ask__open { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: 700 0.92rem/1 var(--sans); cursor: pointer; box-shadow: 0 10px 28px -8px rgba(19, 26, 66, 0.7); }
.ask__open .icon { width: 26px; height: 26px; }
.ask__open span { display: none; }
.ask.is-open .ask__open { display: none; }
.ask__panel { position: fixed; inset: auto 8px 8px 8px; max-height: min(620px, calc(100dvh - 16px)); display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius); box-shadow: 0 24px 60px -12px rgba(19, 26, 66, 0.5); overflow: hidden; border: 1px solid var(--line); }
.ask__panel[hidden] { display: none; }
.ask__panel > header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--navy-deep); color: #fff; padding: 0.8rem 1rem; }
.ask__panel > header div { display: grid; line-height: 1.3; }
.ask__panel > header span { font-size: 0.78rem; color: #c5cbee; }
.ask__close { background: none; border: 0; color: #fff; cursor: pointer; padding: 0.3rem; display: grid; }
.ask__log { flex: 1; overflow-y: auto; padding: 1rem; display: grid; gap: 0.6rem; align-content: start; min-height: 180px; background: var(--cream); }
.ask__msg { max-width: 88%; padding: 0.6rem 0.85rem; border-radius: 14px; font-size: 0.95rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask__msg--bot { background: var(--paper); border: 1px solid var(--line); color: var(--ink); justify-self: start; border-bottom-left-radius: 4px; }
.ask__msg--me { background: var(--navy); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.ask__msg.is-waiting { color: var(--muted); letter-spacing: 0.2em; }
.ask__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.6rem; background: var(--cream); }
.ask__chips[hidden] { display: none; }
.ask__chips button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 0.35rem 0.75rem; font: 600 0.82rem var(--sans); color: var(--navy); cursor: pointer; }
.ask__form, .ask__call { display: flex; gap: 0.5rem; padding: 0.7rem 0.8rem; border-top: 1px solid var(--line); }
.ask__call { flex-wrap: wrap; background: var(--tint); }
.ask__call[hidden] { display: none; }
.ask__form input, .ask__call input { flex: 1; min-width: 0; padding: 0.65rem 0.8rem; border: 1.5px solid #cdd2e2; border-radius: 10px; font: inherit; font-size: 1rem; }
.ask__call input { flex: 1 1 8rem; }
.ask__form button, .ask__call button { border: 0; border-radius: 10px; background: var(--navy); color: #fff; padding: 0 0.9rem; min-height: 2.6rem; font: 700 0.9rem var(--sans); cursor: pointer; display: grid; place-items: center; }
.ask__foot { margin: 0; padding: 0.5rem 0.9rem 0.7rem; font-size: 0.74rem; color: var(--muted); line-height: 1.4; }
.ask__callbtn { background: none; border: 0; padding: 0; font: 700 0.78rem var(--sans); color: var(--indigo); text-decoration: underline; cursor: pointer; }
@media (min-width: 600px) {
  .labband__in { grid-template-columns: auto minmax(0, 1fr) auto; }
  .labband .btn { grid-column: auto; }
  .ticket__body { grid-template-columns: minmax(0, 1fr) auto; padding: 2rem; }
  .ticket__qr { border-top: 0; border-left: 2px dashed var(--line); padding: 0 0 0 1.5rem; }
  .ask { bottom: 84px; }
  .ask__open { padding: 0.75rem 1.1rem 0.75rem 0.9rem; }
  .ask__open span { display: inline; }
  .ask__panel { inset: auto 16px 16px auto; width: 380px; }
}
@media print { .ask, .ticket + .certshare { display: none !important; } .ticket { box-shadow: none; border: 1px solid #999; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------- learning passport (the page a parent shares) ---------- */
.passport { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.passport__head { background: var(--navy); color: #fff; text-align: center; padding: 1.75rem 1.25rem 1.5rem; display: grid; gap: 0.3rem; justify-items: center; }
.passport__head img { width: 150px; height: auto; margin-bottom: 0.4rem; }
.passport__head p { margin: 0; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.passport__head h1 { margin: 0; color: #fff; font-size: clamp(1.7rem, 5vw, 2.4rem); }
.passport__head span { color: #c5cbee; }
.passport__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.passport__stats div { text-align: center; padding: 1rem 0.5rem; display: grid; }
.passport__stats div + div { border-left: 1px solid var(--line); }
.passport__stats strong { font-size: 1.8rem; color: var(--navy); line-height: 1.1; }
.passport__stats span { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.passport h2 { font-size: 1.05rem; margin: 1.4rem 1.25rem 0.7rem; }
.passport__badges { list-style: none; margin: 0 1.25rem; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.passport__badges li { display: flex; gap: 0.7rem; align-items: flex-start; }
.passport__badges .icon { flex: none; width: 2.5rem; height: 2.5rem; padding: 0.5rem; border-radius: 50%; background: #fff4cf; color: #a06d00; }
.passport__badges div { display: grid; gap: 0.1rem; min-width: 0; }
.passport__badges span, .passport__badges em, .passport__projects span, .passport__projects em { font-size: 0.82rem; color: var(--muted); font-style: normal; }
.passport__projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.9rem; margin: 0 1.25rem; }
.passport__projects figure { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 0; }
.passport__projects img, .passport__projects figure > div { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.passport__projects figure > div { background: linear-gradient(135deg, #eef0fb, #dfe4fa); color: var(--indigo); display: grid; place-items: center; }
.passport__projects figcaption { padding: 0.6rem 0.7rem 0.75rem; display: grid; gap: 0.15rem; overflow-wrap: anywhere; }
.passport__certs { margin: 0 1.25rem; padding-left: 1.1rem; display: grid; gap: 0.35rem; }
.passport__certs span { color: var(--muted); font-size: 0.86rem; }
.passport > :last-child { margin-bottom: 1.5rem; }

/* ---------- home: numbers from the school's own records ---------- */
.live { background: var(--tint); padding-block: 2.25rem; }
.live .eyebrow { text-align: center; }
.live__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 0.75rem; }
.live__grid div { background: var(--paper); border-radius: var(--radius); padding: 1.1rem 1rem; text-align: center; display: grid; gap: 0.25rem; box-shadow: var(--shadow); }
.live__grid strong { font-family: var(--display); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); color: var(--navy); line-height: 1.05; font-variant-numeric: tabular-nums; }
.live__grid span { color: var(--muted); font-size: 0.9rem; }

/* ---------- admissions: age finder and seat reservation ---------- */
.agefinder { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.2rem, 3vw, 2rem); display: grid; gap: 1.2rem; }
.agefinder h2 { margin: 0 0 0.9rem; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem); }
.agefinder label { display: block; font-weight: 700; color: var(--ink); font-size: 0.92rem; margin-bottom: 0.4rem; }
.agefinder input { width: 100%; max-width: 16rem; padding: 0.75rem 0.85rem; border: 1.5px solid #cdd2e2; border-radius: 10px; font: inherit; color: var(--ink); background: #fff; }
.agefinder__result { background: var(--tint); border-radius: 14px; padding: 1rem 1.1rem; display: grid; gap: 0.5rem; align-content: center; justify-items: start; }
.agefinder__result p { margin: 0; }
.agefinder__result strong { font-family: var(--display); font-size: clamp(1.3rem, 1rem + 1.4vw, 1.8rem); color: var(--navy); line-height: 1.2; }
@media (min-width: 700px) { .agefinder { grid-template-columns: 1fr 1fr; align-items: center; } }
.seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem; margin-bottom: 1.25rem; }
.seats__class { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.8rem; display: grid; }
.seats__class strong { color: var(--ink); }
.seats__class span { font-size: 0.86rem; color: #14532d; font-weight: 600; }
.seats__class.is-low span { color: #a05a00; }
.seats__class.is-full { opacity: 0.6; }
.seats__class.is-full span { color: var(--muted); }
.seats__amount { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-top: 1px solid var(--line); padding-top: 0.9rem; margin: 0.4rem 0 0.9rem; }
.seats__amount strong { font-size: 1.5rem; color: var(--ink); }
.seatdone { display: grid; gap: 0.9rem; }
.seatdone__facts { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 0.4rem 1rem; margin: 0; }
.seatdone__facts dt { color: var(--muted); font-weight: 600; }
.seatdone__facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* ---------- Talent Test and showcase wall ---------- */
.tquiz { display: grid; gap: 1rem; margin-top: 1rem; }
.tquiz fieldset { margin: 0; min-width: 0; display: grid; gap: 0.5rem; }
.tquiz legend { font-weight: 700; color: var(--ink); float: left; width: 100%; margin-bottom: 0.6rem; padding: 0; }
.tquiz legend + * { clear: both; }
.tquiz legend span { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--navy); color: #fff; font-size: 0.82rem; margin-right: 0.35rem; }
.topt { position: relative; display: block; }
.topt input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.topt span { display: block; padding: 0.75rem 0.9rem; border: 1.5px solid #cdd2e2; border-radius: 11px; background: var(--tint); color: var(--ink); overflow-wrap: anywhere; }
.topt input:checked + span { border-color: var(--navy); background: #e9ecfb; font-weight: 700; }
.topt input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 1px; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; margin-bottom: 2rem; }
.wall__item { margin: 0; background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-width: 0; }
.wall__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.wall__item figcaption { padding: 0.8rem 0.9rem 1rem; display: grid; gap: 0.2rem; overflow-wrap: anywhere; }
.wall__item strong { color: var(--ink); font-size: 1.05rem; }
.wall__item span, .wall__item em { color: var(--muted); font-size: 0.86rem; font-style: normal; }
.misscall { display: flex; gap: 0.6rem; align-items: center; margin: 0 0 0.9rem; } .misscall .icon { flex: none; color: var(--indigo); }

/* ---------- sample lessons, bridge course ---------- */
.videobox { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #0d1230; margin: 1.2rem 0; box-shadow: var(--shadow); }
.videobox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.lessonlist { margin-bottom: 2rem; }
.lessonlist h2 { font-size: 1.25rem; margin-bottom: 0.7rem; }
.lessonlist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.lessonlist a { display: flex; align-items: center; gap: 0.9rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.9rem 1rem; text-decoration: none; color: var(--ink); }
.lessonlist a[href]:hover { border-color: var(--navy); }
.lessonlist a > .icon:first-child { color: var(--indigo); width: 1.4rem; height: 1.4rem; flex: none; }
.lessonlist a > .icon:last-child { color: #a4aac6; flex: none; }
.lessonlist span { flex: 1; min-width: 0; display: grid; }
.lessonlist em { font-style: normal; font-size: 0.85rem; color: var(--muted); }
.lessonlist .is-done a > .icon:first-child { color: #1f8a4c; }
.lessonlist .is-locked { opacity: 0.6; }
.lesson h1 { margin-bottom: 0.5rem; }
.lesson__block { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; margin: 1.1rem 0; }
.lesson__block h2 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.lesson__block p { margin: 0 0 0.7rem; }
.lesson__block--sheet { background: #fffbee; border-color: #f0dfa6; }
.lesson__cta { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 1.6rem; margin-top: 1.6rem; }
.lesson__cta h2 { color: #fff; font-size: 1.3rem; }
.lesson__cta .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.4); }

/* ---------- readiness check, fee calculator, near you, clubs, careers ---------- */
.readyrow { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 0.9rem 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; min-width: 0; }
.readyrow legend { font-weight: 700; color: var(--ink); padding: 0; margin-bottom: 0.5rem; float: left; width: 100%; grid-column: 1 / -1; }
.readyrow label { position: relative; }
.readyrow input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.readyrow span { display: block; text-align: center; padding: 0.6rem 0.3rem; border-radius: 10px; border: 1.5px solid var(--line); background: #f6f7fb; font-weight: 700; font-size: 0.9rem; color: var(--muted); }
.readyrow input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.readyrow input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.readyask { font-size: 1.05rem; margin: 1.2rem 0 0.8rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.readyresult { background: var(--paper); border: 1px solid var(--line); border-top: 6px solid #1f8a4c; border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 2rem); box-shadow: var(--shadow); }
.readyresult--nearly { border-top-color: var(--gold); }
.readyresult--wait, .readyresult--young { border-top-color: var(--indigo); }
.readyresult h2 { font-size: clamp(1.3rem, 1rem + 1.4vw, 1.8rem); }
.readyresult__score { font-size: 1.1rem; color: var(--muted); }
.readyresult__score strong { font-family: var(--display); font-size: 2.4rem; color: var(--navy); }
.readyresult ul { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.7rem; }
.readyresult li { background: #f6f7fb; border-radius: var(--radius-sm); padding: 0.8rem 1rem; display: grid; gap: 0.2rem; }
.readyresult li strong { color: var(--ink); }
.readyresult li span { font-size: 0.95rem; }
.feecheck label { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 600; }
.feeresult { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 2rem); margin: 1.5rem 0; box-shadow: var(--shadow); }
.feeresult h2 { font-size: 1.3rem; }
.feeresult table { width: 100%; border-collapse: collapse; margin: 0.6rem 0 1rem; }
.feeresult td { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.feeresult td:last-child { text-align: right; font-weight: 700; color: var(--ink); white-space: nowrap; }
.feeresult__total td { border-bottom: 0; font-size: 1.2rem; font-weight: 800; color: var(--navy); padding-top: 0.9rem; }
.feeresult h3 { font-size: 1rem; margin: 0.6rem 0; }
.feeresult ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.feeresult li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; }
.feeask { font-size: 1.2rem; margin-bottom: 1rem; }
.nearfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.9rem; margin-bottom: 1.6rem; }
.nearfacts div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem; display: grid; gap: 0.2rem; }
.nearfacts .icon { color: var(--indigo); width: 1.5rem; height: 1.5rem; }
.nearfacts span { font-size: 0.85rem; color: var(--muted); }
.nearfacts strong { font-family: var(--display); font-size: 1.35rem; color: var(--navy); }
.nearlinks { margin-top: 1.6rem; color: var(--muted); font-size: 0.95rem; }
.clubcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; margin-bottom: 1rem; }
.clubcard h2 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.clubcard__facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.6rem 0 0; font-size: 0.92rem; color: var(--ink); font-weight: 600; }
.clubcard__facts span { display: inline-flex; align-items: center; gap: 0.35rem; }
.clubcard__facts .icon { color: var(--indigo); width: 1.05rem; height: 1.05rem; }

/* Phones: the photo caption sat under the admissions badge. */
@media (max-width: 520px) { .hero__caption { display: none; } }
[hidden] { display: none !important; }

/* ---------- Brand guidelines (/brand) ---------- */
.brandtop { padding: clamp(2rem, 4vw, 3rem) 0; }
.brandintro { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: center; justify-content: space-between; }
.brandintro__text { max-width: 62ch; font-size: 1.1rem; margin: 0; }
.brandintro .btn .icon { width: 1.1rem; height: 1.1rem; }
.brandnav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.brandnav a { padding: 0.45rem 0.95rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-weight: 600; font-size: 0.9rem; text-decoration: none; color: var(--navy); }
.brandnav a:hover { border-color: var(--navy); }
.brandsec { scroll-margin-top: 90px; }
.brandsec .eyebrow { color: var(--indigo); }
.brandsec h2 { margin-bottom: 0.6em; }
.brandsec h3 { margin-top: 2.25rem; }
.brandlead { max-width: 68ch; font-size: 1.1rem; }
.brandcards { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.brandcard { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1.6rem; border-top: 4px solid var(--gold); }
.brandcard h3 { margin-top: 0; }
.brandcard p { margin: 0; }
.brandtwo { display: grid; gap: 1.5rem 3rem; margin-top: 0.5rem; }
.brandtwo > div > h3:first-child { margin-top: 2.25rem; }

.brandlogos { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
.brandlogo { margin: 0; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: grid; }
.brandlogo__stage { display: grid; place-items: center; padding: 2rem; height: 232px; background: var(--paper); border-bottom: 1px solid var(--line); }
.brandlogo--dark .brandlogo__stage { background: var(--navy); }
.brandlogo--tile .brandlogo__stage { background: var(--tint); }
.brandlogo__stage img { width: min(100%, 300px); }
.brandlogo--tile .brandlogo__stage img { width: 132px; border-radius: 26px; }
.brandlogo figcaption { display: grid; gap: 0.3rem; padding: 1.1rem 1.4rem 1.3rem; }
.brandlogo figcaption strong { color: var(--ink); }
.brandlogo figcaption .link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-weight: 700; }
.brandlogo figcaption .icon, .brandfiles .icon { width: 1rem; height: 1rem; flex: none; }

.brandclear { display: inline-block; padding: 2.1rem; border: 1px dashed var(--indigo); border-radius: 6px; background: repeating-linear-gradient(45deg, rgba(51, 64, 156, 0.09) 0 6px, transparent 6px 12px); max-width: 100%; }
.brandclear__logo { background: var(--paper); outline: 1px solid var(--indigo); }
.brandclear__logo img { width: 280px; max-width: 100%; }
.brandsizes { display: flex; flex-wrap: wrap; align-items: end; gap: 1.5rem 2rem; }
.brandsizes span { display: grid; gap: 0.4rem; justify-items: start; }
.brandsizes img { border-radius: 4px; }
.brandsizes em { font-style: normal; font-size: 0.8rem; color: var(--muted); }
.brandbgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; max-width: 30rem; }
.brandbgs span { display: grid; place-items: center; padding: 0.9rem 0.6rem; border-radius: 10px; border: 1px solid var(--line); }
.brandbgs__white { background: #fff; } .brandbgs__cream { background: var(--cream); } .brandbgs__gold { background: var(--gold); } .brandbgs__navy { background: var(--navy); }
.brandmisuse { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
.brandmisuse li { background: var(--paper); border-radius: var(--radius-sm); border: 1px solid var(--line); overflow: hidden; }
.brandmisuse__stage { display: grid; place-items: center; height: 130px; padding: 1rem; background: #fff; border-bottom: 1px solid var(--line); overflow: hidden; }
.brandmisuse__stage img { width: 150px; }
.brandmisuse__stage--stretch img { width: 150px; height: 69px; transform: scaleX(1.55); }
.brandmisuse__stage--recolour i { display: block; width: 150px; aspect-ratio: 1000 / 460; background: #e0218a; -webkit-mask: url(/img/logo.png) center / contain no-repeat; mask: url(/img/logo.png) center / contain no-repeat; }
.brandmisuse__stage--tilt img { transform: rotate(-14deg); }
.brandmisuse__stage--busy { background: url(/seed/hoops-activity-thumb.jpg) center / cover; }
.brandmisuse__stage--effects img { filter: drop-shadow(0 0 2px #f4b400) drop-shadow(0 0 6px #c8202f) drop-shadow(5px 6px 3px rgba(0, 0, 0, 0.55)); }
.brandmisuse__stage--crop { place-items: start; padding: 0; }
.brandmisuse__stage--crop img { width: 230px; max-width: none; margin: 14px 0 0 -28px; }
.brandmisuse p { margin: 0; padding: 0.7rem 0.9rem; font-size: 0.93rem; display: flex; gap: 0.5rem; align-items: baseline; }
.brandno { color: var(--red); font-weight: 700; font-size: 1.1rem; line-height: 1; }

.brandmix { display: flex; height: 44px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); max-width: 46rem; }
.brandmix i { display: block; }
.brandswatches { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.brandswatch { background: var(--paper); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; display: grid; align-content: start; }
.brandswatch__chip { height: 104px; display: flex; align-items: end; padding: 0.8rem 1rem; color: var(--ink); border-bottom: 1px solid var(--line); }
.brandswatch__chip.is-dark { color: #fff; }
.brandswatch dl { margin: 0; padding: 0.8rem 1rem 0.2rem; display: grid; gap: 0.2rem; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.brandswatch dl div { display: flex; gap: 0.6rem; }
.brandswatch dt { width: 2.9rem; flex: none; color: var(--muted); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; padding-top: 0.12rem; }
.brandswatch dd { margin: 0; color: var(--ink); }
.brandswatch p { margin: 0; padding: 0.5rem 1rem 1rem; font-size: 0.9rem; }
.brandcopy { font: inherit; color: var(--indigo); background: none; border: 0; padding: 0; cursor: pointer; font-weight: 700; text-decoration: underline dotted; text-underline-offset: 3px; }
.brandcopy.is-done { color: #1a7f45; text-decoration: none; }
.brandpairs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 1.25rem; }
.brandpair { background: var(--paper); border-radius: var(--radius-sm); border: 1px solid var(--line); overflow: hidden; }
.brandpair__chip { padding: 1.1rem 1rem; display: flex; align-items: baseline; gap: 0.7rem; border-bottom: 1px solid var(--line); }
.brandpair__chip strong { font-family: var(--display); font-size: 1.9rem; line-height: 1; }
.brandpair__chip span { font-weight: 600; }
.brandpair p { margin: 0; padding: 0.7rem 1rem 0.9rem; font-size: 0.9rem; }
.brandpair p strong { display: block; color: #1a7f45; }
.brandpair--no p strong { color: var(--red); }

.brandfonts { display: grid; gap: 1.1rem; margin: 1.5rem 0 0.5rem; }
.brandfont { background: var(--paper); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 1.4rem 1.5rem; }
.brandfont p { margin: 0; }
.brandfont__sample { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.35; color: var(--navy); font-weight: 600; margin-bottom: 0.6rem !important; }
.brandfont__name { color: var(--ink); }
.brandspecimen { background: var(--navy); color: #cfd5f5; border-radius: var(--radius); padding: 2rem; margin-top: 2.25rem; align-self: start; }
.brandspecimen p { margin: 0; }
.brandspecimen__label { font: 700 0.75rem/1 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem !important; }
.brandspecimen__h { font: 600 1.9rem/1.2 'Fraunces', Georgia, serif; color: #fff; margin-bottom: 0.6rem !important; }
.brandspecimen__p { font: 400 1rem/1.6 'Plus Jakarta Sans', sans-serif; }
.brandspecimen__h--te { font-family: 'Noto Serif Telugu', serif; font-size: 1.55rem; line-height: 1.5; margin-top: 1.5rem !important; }
.brandspecimen__p--te { font-family: 'Noto Sans Telugu', sans-serif; line-height: 1.8; }
.brandrules { display: grid; gap: 0.75rem; margin-top: 2.25rem; }
.brandrules li { display: flex; gap: 0.7rem; align-items: flex-start; }
.brandrules .icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.3rem; color: #1a7f45; }

.brandtable { overflow-x: auto; margin-top: 1.5rem; background: var(--paper); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.brandtable table { border-collapse: collapse; width: 100%; min-width: 34rem; }
.brandtable--two table { min-width: 0; }
.brandtable--two td { width: 50%; }
.brandtable th, .brandtable td { text-align: left; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.brandtable thead th { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.brandtable tbody tr:last-child > * { border-bottom: 0; }
.brandtable tbody th { color: var(--body); font-weight: 600; }
.brandtable td strong { color: var(--ink); }
.brandtable__no { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(200, 32, 47, 0.55); }
.brandte { margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.brandte div { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; align-items: baseline; padding: 0.7rem 1rem; background: var(--paper); border-radius: 10px; border: 1px solid var(--line); }
.brandte dt { width: 11rem; color: var(--muted); font-size: 0.9rem; }
.brandte dd { margin: 0; font: 600 1.15rem/1.6 'Noto Sans Telugu', sans-serif; color: var(--ink); }
.brandcontact { display: grid; gap: 0.55rem; margin-bottom: 1rem; padding: 1.1rem 1.2rem; background: var(--paper); border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.brandcontact span { display: flex; gap: 0.7rem; align-items: flex-start; }
.brandcontact .icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.25rem; color: var(--indigo); }

.brandphotos { display: grid; gap: 1rem; margin-top: 1.5rem; }
.brandphotos figure { margin: 0; }
.brandphotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.brandphotos figcaption { font-size: 0.88rem; color: var(--muted); margin-top: 0.45rem; }

.branduses { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
.branduse { margin: 0; display: grid; gap: 0.9rem; align-content: start; }
.branduse__stage { background: var(--tint); border-radius: var(--radius); padding: 1.5rem; display: grid; place-items: center; min-height: 300px; }
.branduse figcaption { font-size: 0.95rem; }
.branduse figcaption strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 0.2rem; }
.mockpost { width: min(100%, 260px); aspect-ratio: 1; background: var(--navy); color: #fff; border-radius: 6px; padding: 7%; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.mockpost img { width: 46%; }
.mockpost p { margin: 0; }
.mockpost__label { margin-top: auto !important; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.mockpost__h { font-family: var(--display); font-weight: 600; font-size: 1.55rem; line-height: 1.2; margin: 0.3rem 0 !important; }
.mockpost__p { font-size: 0.78rem; color: #cfd5f5; }
.mockpost__strip { margin-top: 0.8rem !important; background: var(--gold); color: var(--navy-deep); font-weight: 700; font-size: 0.68rem; padding: 0.4rem 0.6rem; border-radius: 4px; text-align: center; }
.mockbanner { width: min(100%, 560px); background: var(--cream); border-radius: 4px; box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line); }
.mockbanner__top { display: flex; align-items: center; gap: 4%; padding: 5% 4%; }
.mockbanner__top img { width: 27%; flex: none; }
.mockbanner__top div { flex: 1; min-width: 0; }
.mockbanner p { margin: 0; }
.mockbanner__h { font-family: var(--display); font-weight: 600; color: var(--navy); font-size: clamp(0.95rem, 0.6rem + 1.4vw, 1.4rem); line-height: 1.25; }
.mockbanner__p { font-size: 0.72rem; color: var(--body); margin-top: 0.3rem !important; }
.mockbanner__qr { flex: none; width: 13%; aspect-ratio: 1; display: grid; place-items: center; background: #fff; border: 2px solid var(--navy); color: var(--navy); font-weight: 700; font-size: 0.65rem; border-radius: 3px; }
.mockbanner__strip { background: var(--gold); color: var(--navy-deep); font-weight: 700; font-size: 0.78rem; text-align: center; padding: 0.55rem 0.5rem; }
.mockletter { width: min(100%, 230px); aspect-ratio: 210 / 297; background: #fff; box-shadow: var(--shadow); padding: 8% 9%; display: flex; flex-direction: column; gap: 4.5%; }
.mockletter__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6%; padding-bottom: 6%; border-bottom: 2px solid var(--navy); }
.mockletter__head img { width: 38%; }
.mockletter__head p { margin: 0; font-size: 0.36rem; line-height: 1.5; text-align: right; color: var(--body); }
.mockletter i { display: block; height: 3px; border-radius: 2px; background: var(--line); }
.mockletter i.short { width: 62%; }
.mockletter__foot { margin: auto 0 0 !important; font-size: 0.4rem; text-align: center; color: var(--navy); font-weight: 700; border-top: 1px solid var(--gold); padding-top: 5%; }
.mockprofile { display: flex; align-items: center; gap: 1rem; background: #fff; padding: 1rem 1.4rem 1rem 1rem; border-radius: 999px; box-shadow: var(--shadow); max-width: 100%; }
.mockprofile img { width: 76px; height: 76px; border-radius: 50%; flex: none; }
.mockprofile p { margin: 0; display: grid; }
.mockprofile strong { color: var(--ink); }
.mockprofile span { font-size: 0.85rem; color: var(--muted); }

.brandcheck { display: grid; gap: 0.7rem; margin-top: 1.5rem; max-width: 52rem; }
.brandcheck li { display: flex; gap: 0.85rem; align-items: flex-start; background: var(--paper); padding: 0.85rem 1.1rem; border-radius: 12px; border: 1px solid var(--line); color: var(--ink); }
.brandcheck__box { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.3rem; border: 2px solid var(--navy); border-radius: 4px; }
.brandfiles { display: grid; gap: 0.6rem; margin-bottom: 1.25rem; }
.brandfiles a { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; }

@media (min-width: 640px) {
  .brandlogos, .brandfonts, .branduses { grid-template-columns: repeat(2, 1fr); }
  .brandmisuse { grid-template-columns: repeat(3, 1fr); }
  .brandphotos { grid-template-columns: repeat(3, 1fr); }
  .brandrules--cols { grid-template-columns: repeat(2, 1fr); gap: 0.75rem 2.5rem; }
}
@media (min-width: 900px) {
  .brandswatches { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
  .brandcards { grid-template-columns: repeat(3, 1fr); }
  .brandcards--four { grid-template-columns: repeat(4, 1fr); }
  .brandlogos { grid-template-columns: repeat(3, 1fr); }
  .brandtwo { grid-template-columns: repeat(2, 1fr); }
  .branduses { grid-template-columns: repeat(3, 1fr); }
  .branduse--wide, .branduse:last-child { grid-column: span 2; }
  .brandmisuse { grid-template-columns: repeat(6, 1fr); }
  .brandmisuse__stage img, .brandmisuse__stage--recolour i { width: 120px; }
  .brandmisuse__stage--stretch img { width: 120px; height: 55px; transform: scaleX(1.4); }
}
@media print {
  .brandnav { display: none !important; }
  .brandsec, .brandtop { padding: 1.25rem 0 !important; background: #fff !important; }
  body:has(.brandtop) .pagehead { padding: 1.75rem 0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body:has(.brandtop) .breadcrumbs { display: none !important; }
  .brandsec { break-inside: auto; }
  .brandcard, .brandlogo, .brandswatch, .brandpair, .brandfont, .branduse, .brandmisuse li, .brandtable, .brandphotos figure, .brandcheck li { break-inside: avoid; box-shadow: none; border: 1px solid #c9cddb; }
  .brandsec h2, .brandsec h3 { break-after: avoid; }
  .brandsec, .brandsec * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .brandlogos, .branduses { grid-template-columns: repeat(3, 1fr); }
  .brandcards, .brandphotos { grid-template-columns: repeat(3, 1fr); }
  .brandcards--four, .brandmisuse { grid-template-columns: repeat(4, 1fr); }
  .brandmisuse { grid-template-columns: repeat(3, 1fr); }
  .brandtwo, .brandfonts { grid-template-columns: repeat(2, 1fr); }
  .brandswatches { grid-template-columns: repeat(3, 1fr); }
  .brandpairs { grid-template-columns: repeat(4, 1fr); }
}