/* =============================================================
   New Oxford School – Admissions 2027-28 landing page
   Custom styles (loaded after Bootstrap 5.3 so these win)
   ============================================================= */

:root {
  --forest: #0B4D3B;
  --forest-dark: #083A2C;
  --forest-deep: #062C21;
  --gold: #C9A227;
  --gold-dark: #A8861B;
  --gold-soft: #F6EFD6;
  --mist: #F3F7F5;
  --ink: #1C2B26;
  --wa: #25D366;

  --bs-body-font-family: 'Poppins', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  --bs-body-color: var(--ink);
  --bs-link-color-rgb: 11, 77, 59;
}
/* scroll-padding keeps anchored sections clear of the sticky header */
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body { -webkit-font-smoothing: antialiased; }
@media (max-width: 767.98px) { body { padding-bottom: 80px; } }
section[id] { scroll-margin-top: 5.5rem; }

/* Brand utilities */
.bg-forest { background: var(--forest) !important; }
.bg-forest-dark { background: var(--forest-dark) !important; }
.bg-forest-deep { background: var(--forest-deep) !important; }
.bg-mist { background: var(--mist) !important; }
.bg-gold-soft { background: var(--gold-soft) !important; }
.text-forest { color: var(--forest) !important; }
.text-gold { color: var(--gold) !important; }
.text-gold-dark { color: var(--gold-dark) !important; }
.text-muted-ink { color: rgba(28,43,38,.68) !important; }
.text-white-75 { color: rgba(255,255,255,.78) !important; }
.fs-15 { font-size: .94rem; }

/* Display serif for headlines, Poppins stays for body copy */
.section-title, .band-title, .brand-name, .lead-card-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

.section { padding: 4rem 0; }
@media (min-width: 768px) { .section { padding: 6rem 0; } }
.section-title { font-weight: 700; color: var(--forest); line-height: 1.15; font-size: calc(1.5rem + 1.2vw); }
@media (min-width: 1200px) { .section-title { font-size: 2.4rem; } }
.section-intro { max-width: 40rem; }

/* Small letterspaced kicker above each section heading */
.section-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 600; color: var(--gold-dark); margin: 0 0 .6rem; }
.section-eyebrow.on-dark { color: var(--gold); }

/* Buttons */
.btn-gold { background: var(--gold); color: var(--forest-deep); font-weight: 600; border: 0; padding: .85rem 1.5rem; border-radius: .6rem; }
.btn-gold:hover, .btn-gold:focus { background: var(--gold-dark); color: var(--forest-deep); }
.btn-wa { background: var(--wa); color: #fff; font-weight: 600; border: 0; padding: .85rem 1.5rem; border-radius: .6rem; }
.btn-wa:hover { filter: brightness(.95); color: #fff; }
.btn-light-forest { background: #fff; color: var(--forest); font-weight: 600; padding: .85rem 1.5rem; border-radius: .6rem; }
.btn-light-forest:hover { background: var(--gold-soft); color: var(--forest); }

:focus-visible { outline: 3px solid var(--gold) !important; outline-offset: 2px; }
.form-control:focus, .form-select:focus { border-color: var(--forest); box-shadow: 0 0 0 .2rem rgba(11,77,59,.18); }
.form-control, .form-select { padding-top: .72rem; padding-bottom: .72rem; border-radius: .55rem; }
.form-label { font-size: .88rem; font-weight: 500; margin-bottom: .3rem; }

/* ============================================================
   Announcement bar
   ============================================================ */
.announce { background: var(--forest-deep); color: rgba(255,255,255,.8); font-size: .82rem; font-weight: 500; padding: .55rem 0; text-align: center; }
.announce svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--gold); }
.announce strong { color: var(--gold); font-weight: 600; }

/* ============================================================
   Server-rendered confirmation / failure banner (no-JS submits)
   ============================================================ */
.flash { padding: .85rem 0; font-size: .94rem; font-weight: 500; text-align: center; }
.flash-ok { background: var(--gold-soft); color: var(--forest-deep); border-bottom: 2px solid var(--gold); }
.flash-err { background: #fdecec; color: #7d1d1d; border-bottom: 2px solid #d66; }
.flash a { color: inherit; font-weight: 600; }

/* Spam-trap field: hidden from sight without display:none, which some bots
   detect and skip. Must never be reachable by keyboard or screen readers. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Sticky header + section menu
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 1035; background: #fff; border-bottom: 1px solid rgba(11,77,59,.08); padding: .7rem 0; transition: box-shadow .25s ease, padding .25s ease; }
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(6,44,33,.1); padding: .45rem 0; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.brand .logo-mark { width: 42px; height: 42px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.brand-name { font-weight: 700; font-size: 1.08rem; color: var(--forest); }
.brand-tag { font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: rgba(28,43,38,.55); }
/* Phones keep the school name; only the decorative tagline goes */
@media (max-width: 480px) { .brand-tag { display: none; } }
@media (max-width: 340px) { .brand-text { display: none; } }

.main-nav { display: flex; align-items: center; gap: .1rem; flex-shrink: 0; }
.main-nav a { position: relative; padding: .5rem .42rem; font-size: .85rem; font-weight: 500; white-space: nowrap; color: rgba(28,43,38,.78); text-decoration: none; border-radius: .4rem; transition: color .15s ease, background .15s ease; }
.main-nav a:hover { color: var(--forest); background: var(--mist); }
.main-nav a.active { color: var(--forest); font-weight: 600; }
.main-nav a.active::after { content: ""; position: absolute; left: .42rem; right: .42rem; bottom: .15rem; height: 2px; border-radius: 2px; background: var(--gold); }
/* 1200–1399: the container is still only 1140px wide, so buy back room for the
   full section menu by dropping the decorative tagline and tightening gaps.
   The logo, menu, phone and gold CTA all stay. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .site-header .container { gap: .4rem !important; }
  .brand-tag { display: none; }
  .btn-cta-sm { padding: .6rem .85rem; }
}
@media (min-width: 1400px) {
  .main-nav a { padding: .5rem .5rem; font-size: .875rem; }
  .main-nav a.active::after { left: .5rem; right: .5rem; }
}

.header-call { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .7rem; font-size: .88rem; font-weight: 600; white-space: nowrap; color: var(--forest); text-decoration: none; border-radius: .5rem; }
.header-call:hover { background: var(--mist); color: var(--forest); }
.btn-cta-sm { padding: .6rem 1.1rem; font-size: .88rem; white-space: nowrap; }
.nav-toggle { width: 42px; height: 42px; flex-shrink: 0; border: 1px solid rgba(11,77,59,.18); background: #fff; border-radius: .55rem; color: var(--forest); display: inline-flex; align-items: center; justify-content: center; }
.nav-toggle:hover { background: var(--mist); }

/* Slide-in section menu (tablet / mobile) */
.nav-panel { --bs-offcanvas-width: 310px; }
.nav-panel .offcanvas-header { background: var(--forest); color: #fff; }
.nav-panel .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.nav-panel-links { display: flex; flex-direction: column; }
.nav-panel-links a { display: flex; align-items: center; justify-content: space-between; padding: .85rem .15rem; font-size: .96rem; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid #eef1f0; }
.nav-panel-links a span { color: var(--gold-dark); transition: transform .2s ease; }
.nav-panel-links a:hover, .nav-panel-links a.active { color: var(--forest); }
.nav-panel-links a:hover span { transform: translateX(3px); }
.nav-panel-links a.active { font-weight: 600; }

/* ============================================================
   Hero — slider backdrop with the admissions band + lead form on top

   Layering inside .hero (which is the stacking context):
     .hero-bg        slide images        (z-index auto, painted first)
     .hero-overlay   green scrim         z-index 1
     .hero-content   copy + form         z-index 2
     indicators / arrows                 z-index 3
   .hero-bg deliberately has NO z-index so the indicators nested inside it can
   still rise above .hero-content. They must stay inside #heroCarousel for
   Bootstrap to keep the active dot in sync.
   ============================================================ */
.hero { position: relative; overflow: hidden; background: var(--forest); color: #fff; padding: 3.5rem 0 4.5rem; }
@media (min-width: 992px) { .hero { padding: 4.5rem 0 5.5rem; } }

.hero-bg { position: absolute; inset: 0; }
.hero-bg .carousel, .hero-bg .carousel-inner, .hero-bg .carousel-item { height: 100%; }
.hero .slide-media { position: absolute; inset: 0; }
.hero .slide-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,44,33,.9) 0%, rgba(6,44,33,.78) 45%, rgba(6,44,33,.92) 100%);
}
@media (min-width: 992px) {
  /* Darker behind the copy, lighter on the right so the photo reads past the form */
  .hero-overlay { background: linear-gradient(100deg, rgba(6,44,33,.94) 0%, rgba(6,44,33,.86) 45%, rgba(6,44,33,.64) 100%); }
}
.hero-content { position: relative; z-index: 2; }

/* Slider controls */
.hero .carousel-indicators { z-index: 3; bottom: 1.1rem; margin: 0 auto; gap: .5rem; }
.hero .carousel-indicators [data-bs-target] { width: 9px; height: 9px; margin: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.5); opacity: 1; transition: width .3s ease, background .3s ease; }
.hero .carousel-indicators .active { width: 30px; background: var(--gold); }

.hero-arrows { position: absolute; z-index: 3; right: 1.25rem; bottom: 1rem; display: flex; gap: .5rem; }
.hero-arrows .carousel-control-prev, .hero-arrows .carousel-control-next { position: static; width: auto; padding: 0; opacity: 1; }
.hero .ctrl { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: rgba(6,44,33,.4); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.hero-arrows .carousel-control-prev:hover .ctrl, .hero-arrows .carousel-control-next:hover .ctrl { background: var(--gold); border-color: var(--gold); color: var(--forest-deep); }
/* On phones there is no room beside the form — swipe and the dots cover it */
@media (max-width: 767.98px) { .hero-arrows { display: none; } }

/* ============================================================
   Admissions band content (headline + checklist + lead form)
   ============================================================ */
.rank-badge { max-width: 150px; margin: 0 0 1.5rem; border-radius: .8rem; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.rank-badge img { width: 100%; display: block; }
.band-title { font-weight: 700; color: #fff; line-height: 1.12; font-size: clamp(1.9rem, 3.6vw, 2.9rem); }

.check-list { list-style: none; padding: 0; margin: 1.9rem 0 0; display: grid; gap: .8rem; }
.check-list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; color: rgba(255,255,255,.88); }
.check-circle { flex-shrink: 0; width: 22px; height: 22px; margin-top: .12rem; border-radius: 50%; background: var(--gold); color: var(--forest-deep); display: flex; align-items: center; justify-content: center; }
.check-circle svg { width: 13px; height: 13px; }

/* Lead form card */
.lead-card-title { font-weight: 700; font-size: 1.4rem; color: var(--forest); }
.badge-gold { display: inline-flex; align-items: center; gap: .4rem; background: var(--gold); color: var(--forest-deep); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .4rem .7rem; border-radius: .4rem; }
.form-label-caps { text-transform: uppercase; font-size: .7rem; letter-spacing: .07em; font-weight: 600; color: rgba(28,43,38,.6); margin-bottom: .35rem; }

.pill { display: inline-flex; align-items: center; gap: .5rem; background: rgba(201,162,39,.15); color: var(--gold-soft); border-radius: 999px; padding: .35rem 1rem; font-size: .88rem; font-weight: 500; }
.pill .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); }
.logo-mark { width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--forest-dark); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.form-card { background: #fff; color: var(--ink); border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); }

/* Signature arch frame: a doorway, because admissions are open */
.arch-sm { border-radius: 160px 160px 14px 14px; overflow: hidden; }

/* Image placeholder – shows a branded pattern until real photos are added to /images/ */
.ph {
  background-color: var(--forest);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(201,162,39,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.12) 0 2px, transparent 3px),
    linear-gradient(160deg, #0F5E48 0%, #0B4D3B 55%, #083A2C 100%);
  background-size: 28px 28px, 36px 36px, 100% 100%;
}
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Trust strip */
.trust-item { text-align: center; padding: 0 .5rem; }
@media (min-width: 768px) { .trust-item:not(:last-child) { border-right: 1px solid #e5e7eb; } }
.trust-num { font-size: 1.5rem; font-weight: 700; color: var(--forest); margin: 0; }

/* USPs */
.icon-tile { flex-shrink: 0; width: 48px; height: 48px; border-radius: .8rem; background: var(--gold-soft); color: var(--forest); display: flex; align-items: center; justify-content: center; }
.icon-tile svg { width: 24px; height: 24px; }

/* Stages */
.stage-card { background: #fff; border-radius: 1rem; padding: 1.5rem; border-top: 4px solid var(--forest); height: 100%; }
.stage-card.first { border-top-color: var(--gold); }
.stage-card ul { padding-left: 1.1rem; margin: 1rem 0 0; font-size: .88rem; color: rgba(28,43,38,.78); }
.stage-card li { margin-bottom: .35rem; }
.stage-card li::marker { color: var(--gold); }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.tile { position: relative; border-radius: 1rem; overflow: hidden; height: 10rem; margin: 0; }
@media (min-width: 768px) { .tile { height: 13rem; } }
.tile.wide { grid-column: span 2; height: 14rem; }
@media (min-width: 768px) {
  .tile.tall { grid-row: span 2; grid-column: span 1; height: auto; }
  .tile.full { grid-column: span 3; }
}
.tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem 1rem; color: #fff; font-weight: 500; font-size: .9rem; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); }

/* Co-curriculars */
.activity { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; padding: 1.25rem; height: 100%; }

/* Testimonials */
.quote-card { background: var(--mist); border-radius: 1rem; padding: 1.5rem; height: 100%; display: flex; flex-direction: column; margin: 0; }
.scroll-row { scroll-snap-type: x mandatory; }
.scroll-row > * { scroll-snap-align: start; }

/* Steps */
.steps { position: relative; list-style: none; padding: 0; }
@media (min-width: 768px) { .steps::before { content: ""; position: absolute; top: 24px; left: 12%; right: 12%; height: 1px; background: rgba(201,162,39,.5); } }
.step-num { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: var(--forest); color: var(--gold); font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.step-num.last { background: var(--gold); color: var(--forest-deep); }

/* FAQ – Bootstrap accordion restyled */
.faq .accordion-item { border: 0; border-bottom: 1px solid #e5e7eb; border-radius: 0 !important; }
.faq .accordion-item:first-child { border-top: 1px solid #e5e7eb; }
.faq .accordion-button { font-weight: 500; font-size: 1.05rem; color: var(--ink); padding: 1.25rem 0; background: transparent; box-shadow: none; }
.faq .accordion-button:not(.collapsed) { color: var(--forest); background: transparent; }
.faq .accordion-button::after { background-image: none; content: "+"; font-size: 1.6rem; line-height: 1; color: var(--gold-dark); width: auto; height: auto; transition: transform .2s ease; }
.faq .accordion-button:not(.collapsed)::after { transform: rotate(45deg); background-image: none; }
.faq .accordion-body { padding: 0 0 1.25rem; color: rgba(28,43,38,.7); line-height: 1.7; }

/* Floating & sticky actions */
.wa-float { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1040; width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(0,0,0,.2); transition: transform .2s; }
.wa-float:hover { transform: scale(1.05); color: #fff; }
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; background: #fff; border-top: 1px solid #e5e7eb; padding: .75rem; padding-bottom: max(.75rem, env(safe-area-inset-bottom)); display: flex; gap: .5rem; transition: transform .3s ease; }
.mobile-bar .sq { width: 48px; flex-shrink: 0; border-radius: .55rem; display: flex; align-items: center; justify-content: center; }

/* Side sticky enquiry tab + slide-in form panel */
.side-tab {
  position: fixed; right: 0; top: 50%; z-index: 1045;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  background: var(--gold); color: var(--forest-deep);
  font-weight: 600; font-size: .95rem; letter-spacing: .02em;
  border: 0; border-radius: .7rem 0 0 .7rem;
  padding: 1.1rem .7rem;
  box-shadow: -4px 6px 18px rgba(0,0,0,.18);
  display: flex; align-items: center; gap: .6rem;
  transition: padding .2s ease, background .2s ease, opacity .25s ease;
}
.side-tab:hover { background: var(--gold-dark); padding-right: .95rem; }
.side-tab svg { transform: rotate(90deg); }
.side-tab.is-hidden { opacity: 0; pointer-events: none; }
.enquiry-panel { --bs-offcanvas-width: 420px; }
.enquiry-panel .offcanvas-header { background: var(--forest); color: #fff; }
.enquiry-panel .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.panel-perks li { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; color: rgba(28,43,38,.75); margin-bottom: .4rem; }

/* One orchestrated moment: the hero settles in on load */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); animation: rise .7s ease forwards; }
  .rise-2 { animation-delay: .12s; } .rise-3 { animation-delay: .24s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}