/* ==========================================================================
   school-pages.css — hand-written, NOT compiled from SCSS.

   Loaded after master.css by the pages rewritten for T.D.B. Central School:
   index-2, about, service, service-details, project, team, faq, contact.

   Why this file exists
   --------------------
   The Bizzpro template ships pre-sized PNGs for most image slots (a team card
   is 380x384, a brand logo 133x75, the "who we are" figure 602x739) and its
   CSS therefore sets no width or height on them — the file's own dimensions
   are the layout. Dropping the school's photographs into those slots breaks
   that assumption twice over: the photographs are two to four times larger, so
   they render oversized and push the composed layout apart, and they are 4:3
   landscape where the slots were built for portrait, so anything that does get
   constrained distorts.

   Every rule below pins a slot to the box the template intended and uses
   object-fit: cover, so a photograph of any shape crops to fit instead of
   stretching or overflowing. Adding a new photograph anywhere on these pages
   needs no new rule — it will be cropped to its slot automatically.

   assets/css/master.css is generated from assets/scss/ and must never be
   hand-edited; the repo's style.css applies only to index-4 through index-7.
   This file is the correct place for school-page overrides.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Palette — the school crest, not the template's beige
   The Bizzpro theme is built around --main-color-one: #B69974, a warm beige.
   master.css uses that custom property in 116 rules and hardcodes the literal
   only once, so redefining the property here retints the whole site from one
   place. The values below are sampled from the crest itself
   (assets/imgs/tdb-images/cropped-logonrw.png), whose navy measures #203068.

   Two tones are needed, not one. Crest navy is a fill colour: white type sits
   on it well. It cannot be *text* on the template's near-black bands
   (--secondary is #1F242C) — navy on charcoal is unreadable. So the accent
   stays navy everywhere it fills a shape, and steps up to a lighter crest blue
   wherever the template used the accent as type on a dark surface.
   -------------------------------------------------------------------------- */

:root {
  --crest-navy: #21316D;
  --crest-navy-deep: #16224E;
  --crest-navy-mid: #3A4E97;
  --crest-blue-light: #93A5DE;

  /* Retints every one of master.css's 116 accent rules. */
  --main-color-one: var(--crest-navy);
}

/* The single place master.css hardcodes the beige instead of using the
   variable: the underline sweep behind section headings. */
.underline-2::after,
.underline-5::after {
  background-color: var(--crest-navy) !important;
}

/* Accent-as-type on the dark bands — counters, the FAQ panel, the contact
   block, the footer and the marquee asterisk. */
.counter__area .counter__number,
.counter__area-6 .counter__number,
.faq__area .accordion-button::after,
.contact__area .contact__media a:hover,
.textslider__text span,
.footer__area a:hover,
.footer__area-4 a:hover,
.db-bg-secondary a:hover,
.color-base {
  color: var(--crest-blue-light);
}

/* Hover fills stay navy but deepen, so a pressed control still reads as one. */
.btn-rollover:hover,
.db-btn-main-color-one:hover {
  background-color: var(--crest-navy-deep);
}


/* --------------------------------------------------------------------------
   1. Photograph slots
   Ratios are taken from the template asset each slot originally held.
   -------------------------------------------------------------------------- */

/* Hero figure — template 1275x463 */
.hero__btm img {
  width: 100%;
  height: auto;
  aspect-ratio: 1275 / 463;
  object-fit: cover;
  object-position: center 60%;
}

/* About figures. These two slots need explicit pixel widths, not percentages:
   .image-1 is display:inline-block and .image-2 is position:absolute, so both
   shrink-to-fit their content. A percentage width on the image inside is
   circular — the parent sizes to the image, the image sizes to the parent —
   and the browser resolves it by collapsing the box to a thin strip. */
.about__imgs .image-1 img,
.about__imgs-6 .image-1 img {
  width: 420px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 458 / 555;
  object-fit: cover;
}

.about__imgs .image-2 img,
.about__imgs-6 .image-2 img {
  width: 300px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 350 / 272;
  object-fit: cover;
  border-radius: 16px;
}

@media (max-width: 991px) {
  .about__imgs .image-1 img,
  .about__imgs-6 .image-1 img {
    width: 320px;
  }

  .about__imgs .image-2 img,
  .about__imgs-6 .image-2 img {
    width: 220px;
  }
}

/* The decorative arrow, now an icon rather than fixed-colour PNG art. */
.db-arrow-up i {
  font-size: 96px;
  line-height: 120px;
  color: var(--crest-blue-light);
  transform: rotate(45deg);
  display: inline-block;
}

.db-arrow-up .img-2 {
  display: none;
}

/* Facilities cards on the homepage — template 380x384 (near square) */
.team__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 380 / 384;
  object-fit: cover;
}

/* Faculty cards on team.html — template 3/1.png */
.team__thumb-2 img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* The crest stands in for a missing portrait: show it whole, not cropped. */
.team__thumb-2 img[src*="logonrw"] {
  object-fit: contain;
  background-color: #fff;
  padding: 18%;
}

/* Admission-enquiry figure — template 501x609 (portrait) */
.newsletter__left img {
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 501 / 609;
  object-fit: cover;
}

/* "Who we are" figure — template 602x739 (portrait) */
.who__right .main-img img {
  width: 100%;
  max-width: 560px;
  height: auto;
  aspect-ratio: 602 / 739;
  object-fit: cover;
  border-radius: 20px;
}

/* Notice thumbnails — template 410x424 */
.blog__thumb .shine img {
  width: 100%;
  height: auto;
  aspect-ratio: 410 / 424;
  object-fit: cover;
}

/* Photo strip. The template ran partner logos here at 133x75; photographs need
   a fixed height and a natural width so the strip stays a strip. */
.brand__slide img {
  width: auto;
  height: 150px;
  max-width: none;
  object-fit: cover;
  border-radius: 12px;
}

/* Gallery tiles on project.html — template portfolio/N.jpg */
.portfolio__item-4 .shine img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
}

/* Academics detail figures */
.service__details .img img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.more-service__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 16px;
}

/* Footer transport thumbnail */
.footer__rblog img {
  width: 100px;
  height: 75px;
  object-fit: cover;
  border-radius: 8px;
}

/* Crest lockups: never crop or distort a coat of arms. */
.header__logo img,
.offcanvas__top img,
.footer__logo img {
  object-fit: contain;
}


/* --------------------------------------------------------------------------
   1b. Card icons
   The template shipped nine of its icon "images" as flat 94x94 grey rectangles
   with their own pixel dimensions printed on them — unfinished placeholder art,
   not icons. Worse, .service__item .icon img applies filter: brightness(100),
   which bleached them to plain white squares. They have been replaced with Font
   Awesome glyphs, which the theme already loads and which scale cleanly.
   -------------------------------------------------------------------------- */

.service__item .icon i,
.service__item .icon-box i {
  font-size: 40px;
  line-height: 1;
  color: #fff;
}

.service__item.style2 .icon-box {
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background-color: var(--crest-navy);
  margin-bottom: 28px;
}

.about__imgs .projects i,
.about__imgs-6 .projects i {
  font-size: 26px;
  color: var(--crest-navy);
}


/* --------------------------------------------------------------------------
   2. Noticeboard rows
   The board previously held marked placeholders, because no notice text existed.
   It now carries real entries pointing at the statutory documents in
   assets/affiliation-documents/, so the placeholder treatments that used to live
   here have been deleted rather than left to rot.
   -------------------------------------------------------------------------- */

.notice__when {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--crest-navy);
}

.notice__body a {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--sch-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--crest-navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease;
}

.notice__body a:hover {
  border-bottom-color: var(--crest-navy);
}

.notice__body a i {
  font-size: .72em;
  opacity: .7;
}

.notice__body p {
  margin: .35rem 0 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--sch-ink-soft);
}

.sch-noticeboard img {
  width: 112px;
  height: 76px;
  object-fit: cover;
  border-radius: 10px;
}

@media (max-width: 700px) {
  .sch-noticeboard li {
    grid-template-columns: 1fr 88px;
    gap: .5rem 1rem;
  }

  .notice__when,
  .notice__body {
    grid-column: 1;
  }

  .sch-noticeboard img {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 88px;
    height: 66px;
  }
}


/* ==========================================================================
   3. The school homepage
   index-2.html's <main> was rebuilt around what a parent actually came to find
   out — is this a real school, who runs it, what does a day look like, how do I
   apply, can my child get here — rather than the template's agency section set.
   The markup uses its own `sch-` namespace, so none of the rules below touch
   the Bizzpro components still used by the header, offcanvas and footer.

   Three template devices were removed on purpose and must not come back: the
   eyebrow label with a giant ghosted repeat of itself behind it, the row of
   same-size icon cards, and the 01/02/03 numbering beside unordered features.
   They are portfolio furniture and they are why the page read as an agency site.
   ========================================================================== */

:root {
  --sch-paper: #F6F4EF;
  --sch-paper-deep: #EDEAE2;
  --sch-ink: #1A2030;
  --sch-ink-soft: #565F76;
  --sch-rule: rgba(33, 49, 109, .16);
  --sch-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sch-wrap: 1180px;
  --sch-gutter: clamp(1.25rem, 5vw, 3.5rem);
}

.sch-wrap {
  max-width: var(--sch-wrap);
  margin-inline: auto;
  padding-inline: var(--sch-gutter);
}

/* Section headings carry their own weight — no eyebrow above them. */
.sch-h2 {
  font-family: var(--sch-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--crest-navy);
  text-wrap: balance;
  max-width: 18ch;
  margin: 0 0 1rem;
}

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

.sch-intro {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--sch-ink-soft);
  max-width: 62ch;
  margin: 0 0 2.5rem;
}

.sch-intro--light {
  color: rgba(255, 255, 255, .82);
}

.sch-note {
  font-size: .9375rem;
  color: var(--sch-ink-soft);
  margin: 2rem 0 0;
}

.sch-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  color: var(--crest-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--sch-rule);
  padding-bottom: .3rem;
  transition: color .2s ease, border-color .2s ease, gap .2s ease;
}

.sch-link:hover {
  color: var(--crest-navy-deep);
  border-color: var(--crest-navy);
  gap: .85rem;
}


/* Buttons ---------------------------------------------------------------- */

.sch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
}

.sch-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.65rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

.sch-btn--solid {
  background: var(--crest-navy);
  color: #fff;
  border-color: var(--crest-navy);
}

.sch-btn--solid:hover {
  background: var(--crest-navy-deep);
  border-color: var(--crest-navy-deep);
  color: #fff;
  transform: translateY(-2px);
}

.sch-btn--ghost {
  color: var(--crest-navy);
  border-color: rgba(33, 49, 109, .35);
}

.sch-btn--ghost:hover {
  border-color: var(--crest-navy);
  background: rgba(33, 49, 109, .06);
  color: var(--crest-navy);
}

.sch-btn--ghost-light {
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}

.sch-btn--ghost-light:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}


/* Hero ------------------------------------------------------------------- */

.sch-hero {
  display: flex;
  flex-direction: column;
  background: var(--sch-paper);
}

.sch-hero__inner {
  order: 1;
  padding-top: clamp(9rem, 14vh, 12rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.sch-hero__media {
  order: 2;
}

.sch-hero__crest {
  width: clamp(88px, 9vw, 118px);
  height: auto;
  margin: 0 auto 1.75rem;
  display: block;
}

.sch-hero__title {
  font-family: var(--sch-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 1.1rem + 3.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--crest-navy);
  text-wrap: balance;
  max-width: 16ch;
  margin: 0 auto 1.25rem;
}

.sch-hero__lead {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem);
  line-height: 1.6;
  color: var(--sch-ink-soft);
  max-width: 54ch;
  margin: 0 auto 2.25rem;
}

.sch-hero .sch-actions {
  justify-content: center;
}

/* The banner shows the whole photograph. A fixed height plus object-fit: cover
   was cropping 36% of the frame away at 1440px and 52% at 1920px, taking the
   roofline and the ground with it. Holding the source's own 1491x739 ratio means
   nothing is cut at any width, and the reserved box still prevents layout shift. */
.sch-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1491 / 739;
  object-fit: cover;
}


/* At a glance ------------------------------------------------------------ */

.sch-glance {
  background: var(--crest-navy);
  color: #fff;
}

.sch-glance__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
}

.sch-glance__list > div {
  padding: 2rem 1.5rem;
  border-left: 1px solid rgba(255, 255, 255, .16);
}

.sch-glance__list > div:first-child {
  border-left: 0;
}

.sch-glance dt {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--crest-blue-light);
  margin-bottom: .6rem;
}

.sch-glance dd {
  margin: 0;
  font-family: var(--sch-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}


/* Principal -------------------------------------------------------------- */

.sch-principal {
  padding-block: clamp(4rem, 9vw, 7rem);
}

.sch-principal__inner {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.sch-principal__figure {
  margin: 0;
}

.sch-principal__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
}

.sch-quote {
  margin: 0 0 1.75rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--crest-navy);
}

.sch-quote p {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--sch-ink);
  margin: 0 0 1rem;
}

.sch-quote p:last-child {
  margin-bottom: 0;
}

.sch-attrib {
  margin: 0;
}

.sch-attrib strong {
  display: block;
  font-family: var(--sch-display);
  font-size: 1.125rem;
  color: var(--crest-navy);
}

.sch-attrib span {
  font-size: .9375rem;
  color: var(--sch-ink-soft);
}


/* School life ------------------------------------------------------------ */

.sch-life {
  background: var(--sch-paper);
  padding-block: clamp(4rem, 9vw, 7rem);
}

.sch-life__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0 var(--sch-gutter);
  max-width: 1440px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.sch-life__tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--sch-paper-deep);
}

.sch-life__tile--wide {
  grid-column: span 2;
}

.sch-life__tile img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}

.sch-life__tile:hover img {
  transform: scale(1.04);
}

.sch-life__tile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 1.1rem .9rem;
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, rgba(12, 18, 34, .82), transparent);
}


/* Teaching resources ----------------------------------------------------- */

.sch-teach {
  padding-block: clamp(4rem, 9vw, 7rem);
}

.sch-teach__inner {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
}

/* A definition list, not a row of identical icon cards. */
.sch-rows {
  margin: 0;
}

.sch-rows > div {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: 1.5rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--sch-rule);
}

.sch-rows > div:last-child {
  border-bottom: 1px solid var(--sch-rule);
}

.sch-rows dt {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--crest-navy);
  padding-top: .2rem;
}

.sch-rows dd {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--sch-ink);
}

.sch-rows dd a {
  color: var(--crest-navy);
}


/* Admissions ------------------------------------------------------------- */

.sch-admissions {
  background: var(--crest-navy);
  color: #fff;
  padding-block: clamp(4rem, 9vw, 7rem);
}

.sch-steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin: 0 0 3rem;
  padding: 0;
}

.sch-steps li {
  counter-increment: step;
  padding-top: 1.5rem;
  border-top: 2px solid var(--crest-blue-light);
}

/* The number is the sequence itself, so it carries information — unlike the
   template's decorative 01/02/03 beside features that had no order. */
.sch-steps li::before {
  content: "Step " counter(step);
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--crest-blue-light);
  margin-bottom: .75rem;
}

.sch-steps h3 {
  font-family: var(--sch-display);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 .6rem;
}

.sch-steps p {
  font-size: .9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .78);
  margin: 0;
}

.sch-admissions__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
}


/* Transport -------------------------------------------------------------- */

.sch-transport {
  background: var(--sch-paper);
  padding-block: clamp(4rem, 9vw, 7rem);
}

.sch-routes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}

.sch-route h3 {
  margin: 0 0 1.25rem;
}

.sch-route__tag {
  display: inline-block;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: var(--crest-navy);
  color: #fff;
  font-family: var(--sch-display);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sch-route ol {
  list-style: none;
  counter-reset: stop;
  margin: 0;
  padding: 0;
}

.sch-route li {
  counter-increment: stop;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 0;
  border-top: 1px solid var(--sch-rule);
  font-size: 1.0625rem;
  color: var(--sch-ink);
}

.sch-route li::before {
  content: counter(stop, decimal-leading-zero);
  flex: none;
  width: 2rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--crest-navy);
  opacity: .55;
}


/* Notices ---------------------------------------------------------------- */

.sch-notices {
  padding-block: clamp(4rem, 9vw, 7rem);
}

.sch-noticeboard {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sch-rule);
}

.sch-noticeboard li {
  display: grid;
  grid-template-columns: 7rem 1fr 112px;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--sch-rule);
}


/* An unfilled notice must be unmistakably unfilled. */
.sch-noticeboard .is-placeholder {
  background: repeating-linear-gradient(-45deg,
      rgba(33, 49, 109, .04) 0 10px,
      transparent 10px 20px);
}

.sch-noticeboard .is-placeholder time {
  color: var(--sch-ink-soft);
}

.sch-noticeboard .is-placeholder p {
  font-style: italic;
  color: var(--sch-ink-soft);
}


/* Find us ---------------------------------------------------------------- */

.sch-find {
  background: var(--sch-paper);
  padding-block: clamp(4rem, 9vw, 7rem);
}

.sch-find__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.sch-map {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 18px;
  margin-top: 2rem;
}

.sch-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.sch-field {
  margin: 0;
}

.sch-field--full {
  grid-column: 1 / -1;
}

.sch-field label {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--crest-navy);
  margin-bottom: .5rem;
}

.sch-field input,
.sch-field textarea {
  width: 100%;
  padding: .85rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--sch-ink);
  background: #fff;
  border: 1px solid rgba(33, 49, 109, .25);
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.sch-field input::placeholder {
  color: #7A8395;
}

.sch-field input:focus,
.sch-field textarea:focus {
  outline: none;
  border-color: var(--crest-navy);
  box-shadow: 0 0 0 3px rgba(33, 49, 109, .14);
}

.sch-field textarea {
  resize: vertical;
}

/* Focus stays visible on everything operable, and is never removed. */
.sch-btn:focus-visible,
.sch-link:focus-visible,
.sch-field input:focus-visible,
.sch-field textarea:focus-visible {
  outline: 3px solid var(--crest-blue-light);
  outline-offset: 3px;
}


/* Responsive ------------------------------------------------------------- */

@media (max-width: 991px) {
  .sch-glance__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .sch-glance__list > div:nth-child(odd) {
    border-left: 0;
  }

  .sch-glance__list > div:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, .16);
  }

  .sch-principal__inner,
  .sch-teach__inner,
  .sch-find__inner {
    grid-template-columns: 1fr;
  }

  .sch-life__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sch-steps {
    grid-template-columns: 1fr;
  }

  .sch-routes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .sch-glance__list {
    grid-template-columns: 1fr;
  }

  .sch-glance__list > div {
    border-left: 0;
  }

  .sch-glance__list > div + div {
    border-top: 1px solid rgba(255, 255, 255, .16);
  }

  .sch-rows > div,
  .sch-noticeboard li {
    grid-template-columns: 1fr;
    gap: .4rem;
  }

  .sch-form {
    grid-template-columns: 1fr;
  }

  .sch-actions .sch-btn,
  .sch-admissions__cta .sch-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {

  .sch-life__tile img,
  .sch-btn,
  .sch-link {
    transition: none;
  }

  .sch-life__tile:hover img {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   4. Fixes found in review
   -------------------------------------------------------------------------- */

/* The primary button is navy-filled, which disappears on the navy Admissions
   band. Invert it there so the main action still reads as the main action. */
.sch-admissions .sch-btn--solid {
  background: #fff;
  border-color: #fff;
  color: var(--crest-navy);
}

.sch-admissions .sch-btn--solid:hover {
  background: var(--sch-paper);
  border-color: var(--sch-paper);
  color: var(--crest-navy-deep);
}

/* Media never exceeds its column. Kept as a cheap guard; note that an earlier
   pass added html/body overflow-x:hidden here on the strength of a mobile
   screenshot that turned out to be a capture artifact — headless Chrome on
   Windows clamps the window to an OS minimum, so --window-size=390 renders
   wider and crops. There is no horizontal overflow, and body-level overflow
   clipping was removed because it breaks position:sticky and ScrollSmoother. */
img,
iframe,
video {
  max-width: 100%;
}


/* --------------------------------------------------------------------------
   5. The display face across the template pages
   The homepage sets its own headings through --sch-display. The inner pages
   still use Bizzpro's heading components, so they are pointed at the same
   serif here — otherwise the site would speak in two voices.
   -------------------------------------------------------------------------- */

.sec-title,
.breadcrumb__title,
.service__details-title,
.service__title,
.more-service__title,
.blog__title,
.portfolio__title-4,
.team__name,
.team__title,
.footer__title,
.footer__top-4 .title,
.accordion-button,
.form__title,
.counter__title {
  font-family: var(--sch-display);
  letter-spacing: -0.01em;
}

/* The theme sets several headings at weights the serif does not carry well
   below 600; hold them at the two weights actually loaded. */
.sec-title,
.breadcrumb__title,
.service__details-title,
.form__title,
.footer__top-4 .title {
  font-weight: 700;
}

.service__title,
.more-service__title,
.blog__title,
.portfolio__title-4,
.team__name,
.team__title,
.footer__title,
.accordion-button {
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   6. Mandatory Disclosure (mandatory-disclosure.html)
   A CBSE school must publish its affiliation and statutory certificates. These
   are large scans, so the page links them rather than embedding a viewer: an
   embedded PDF would download several megabytes before a parent on a phone had
   chosen anything. Every row states the format and weight before it is tapped.
   -------------------------------------------------------------------------- */

.sch-docs {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.doc__lede {
  margin-bottom: 2.5rem;
}

.doc__facts {
  margin-bottom: 1.5rem;
}

.doc__sizes {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.doc__group + .doc__group {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}

.doc__group-title {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-family: var(--sch-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  letter-spacing: -0.02em;
  color: var(--crest-navy);
  margin: 0 0 .5rem;
}

.doc__group-title i {
  font-size: .8em;
  color: var(--crest-navy);
  opacity: .55;
}

.doc__group-note {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--sch-ink-soft);
  max-width: 60ch;
  margin: 0 0 1.25rem;
}

.doc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sch-rule);
}

.doc__list li {
  border-bottom: 1px solid var(--sch-rule);
}

/* The whole row is the target, so it stays comfortable to tap on a phone. */
.doc__list a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .35rem 1.5rem;
  padding: 1.1rem .75rem;
  margin-inline: -.75rem;
  text-decoration: none;
  border-radius: 10px;
  transition: background-color .18s ease;
}

.doc__list a:hover {
  background: rgba(33, 49, 109, .05);
}

.doc__list a:focus-visible {
  outline: 3px solid var(--crest-blue-light);
  outline-offset: 2px;
}

.doc__name {
  font-family: var(--sch-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--crest-navy);
}

.doc__note {
  grid-column: 1;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--sch-ink-soft);
}

.doc__meta {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sch-ink-soft);
}

.doc__meta i {
  font-size: .85em;
  color: var(--crest-navy);
}

/* Screen-reader-only text, for the "opens in a new tab" clarification. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .doc__list a {
    grid-template-columns: 1fr;
  }

  .doc__meta {
    grid-column: 1;
    grid-row: auto;
    margin-top: .35rem;
  }
}


/* --------------------------------------------------------------------------
   7. Two template backgrounds that were never real artwork
   -------------------------------------------------------------------------- */

/* The footer admissions banner. assets/imgs/footer/4-bg.jpg is a flat grey
   placeholder with "1290x417" printed on it — the same unfinished art the icon
   slots shipped with. The template then covered it with rgba(6,75,181,.9), a
   bright blue at 90% opacity, which is why it read as a solid block rather than
   an obviously broken image. Replaced with the assembly photograph: a line about
   admitting every child on merit should show the children. */
.footer__top-4 {
  background-image: url(../imgs/tdb-images/front-1024x768.jpg);
  background-position: center 42%;
}

/* The scrim is retinted to crest navy and eased off so the photograph is
   actually visible. White display type over this measures comfortably past
   4.5:1 against both the bright sky and the darker foreground of that frame. */
.footer__top-4::after {
  background-color: rgba(22, 34, 78, .78) !important;
}

/* The breadcrumb wash carries a warm beige glow on its right side, left over
   from the template's palette. Neutralised toward the crest tones rather than
   replaced, so the band keeps its soft falloff. */
.breadcrumb__area {
  background-color: var(--sch-paper);
  background-blend-mode: luminosity;
}