@charset "UTF-8";
/* ==========================================================================
   GLOBAL DESIGN TOKENS CORE SYSTEM (_variables.scss)
   ========================================================================== */
/* ==========================================================================
   BUTTON SYSTEM (_buttons.scss)
   One definition of the primary gold action. Every gold button on the site
   includes this mixin, so colour, weight, hover and shadow can only be
   changed in one place. Padding and radius stay adjustable, because a form
   submit and a hero CTA legitimately need different proportions.
   ========================================================================== */
/* ==========================================================================
   SHARED SCHOOL CARD ROWS (_school-cards.scss)
   The premium horizontal row layout used by both the directory hub and the
   per-area 11+ guides. Kept as a mixin so both pages stay identical in
   appearance and there is only one place to change it.
   ========================================================================== */
/* ==========================================================================
   FOUNDATIONAL RESET, BASE STYLES & LAYOUT UTILITIES (_base.scss)
   ========================================================================== */
html {
  font-size: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #F9F7F2;
  color: #2C3E50;
  font-family: "Lato", sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", serif;
  color: #1B365D;
  margin-top: 0;
  margin-bottom: 24px;
  font-weight: 700;
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
a:hover {
  color: #D4AF37;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.bg-pattern-maths {
  background-color: #F9F7F2;
  background-image: linear-gradient(#E5E5E5 1px, transparent 1px), linear-gradient(90deg, #E5E5E5 1px, transparent 1px);
  background-size: 40px 40px; /* Aligns mathematically square grid sizing */
  background-position: center top;
}

.text-on-dark {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #FFFFFF;
}
.text-on-dark h1, .text-on-dark h2, .text-on-dark h3, .text-on-dark h4, .text-on-dark h5, .text-on-dark h6 {
  color: #FFFFFF;
}
.text-on-dark p {
  color: #E0E0E0;
}

/* ==========================================================================
   STANDALONE REUSABLE INTERFACE COMPONENTS (_components.scss)
   ========================================================================== */
.btn-primary {
  display: inline-block;
  background-color: #1B365D;
  color: #FFFFFF;
  padding: 1rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  text-align: center;
  transition: all 0.2s ease-in-out;
  width: 100%;
}
.btn-primary:hover {
  opacity: 0.9;
}
@media (min-width: 768px) {
  .btn-primary {
    width: auto;
  }
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  background-color: #C5A059;
  color: #1B365D;
  padding: 1.1rem 2.5rem;
  border-radius: 50px;
  font-family: "Lato", sans-serif;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  border: 2px solid #C5A059;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.btn-gold:hover {
  background-color: #EAC351;
  border-color: #EAC351;
  color: #1B365D;
  transform: translateY(-2px);
  text-decoration: none;
}

/* The gold action as it appears on dark sections: same button, but the hover
   inverts to white because gold-on-gold has no contrast against a dark ground. */
.btn-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  background-color: #C5A059;
  color: #1B365D;
  padding: 16px 32px;
  border-radius: 50px;
  font-family: "Lato", sans-serif;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  border: 2px solid #C5A059;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  font-size: 1rem;
  box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);
}
.btn-premium:hover {
  background-color: #EAC351;
  border-color: #EAC351;
  color: #1B365D;
  transform: translateY(-2px);
  text-decoration: none;
}
.btn-premium i {
  transition: all 0.2s ease-in-out;
}
.btn-premium:hover {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #1B365D;
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}
.device-mockup {
  position: relative;
  background-color: #111111; /* Outer Device Solid Edge Frame Bezel */
  border-radius: 24px;
  padding: 12px;
  border: 1px solid #333333;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  animation: float 6s ease-in-out infinite;
}
@media (min-width: 768px) {
  .device-mockup {
    max-width: 600px; /* Optimized scale baseline ensures mockup text clarity */
  }
}

.mockup-screen {
  background-color: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3; /* Enforces native high-fidelity tablet viewport standards */
  position: relative;
  display: block;
}

.portal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.floating-whatsapp-luxury {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 55px;
  height: 55px;
  background: rgba(15, 30, 54, 0.85); /* Deep Translucent Dark Glass Foundation */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.floating-whatsapp-luxury i {
  color: #D4AF37;
  font-size: 1.65rem;
  transition: all 0.2s ease-in-out;
}
.floating-whatsapp-luxury:hover {
  transform: scale(1.05) translateY(-2px);
  background: #25D366; /* Transitions smoothly to official branding interaction green ground color */
  border-color: rgba(37, 211, 102, 0.4);
  box-shadow: 0 20px 40px rgba(37, 211, 102, 0.3);
}
.floating-whatsapp-luxury:hover i {
  color: #FFFFFF;
  transform: rotate(8deg);
}
.floating-whatsapp-luxury:hover .floating-whatsapp-tooltip {
  opacity: 1;
  transform: translateX(0);
}

.floating-whatsapp-tooltip {
  position: absolute;
  right: 70px;
  background: #0F1E36;
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.2s ease-in-out;
  pointer-events: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* --- Optimized Interactive Google Reviews Luxury Modal Viewport --- */
.star-modal-trigger {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 16px;
  margin: 1.5rem 0 0 0;
  border-radius: 50px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Lato", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(0);
  will-change: transform, background-color, border-color;
}
.star-modal-trigger .star-rating-inline {
  display: flex;
  gap: 3px;
  color: #D4AF37;
  font-size: 0.9rem;
  transition: all 0.2s ease-in-out;
}
.star-modal-trigger:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(212, 175, 55, 0.45);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.star-modal-trigger:hover .star-rating-inline {
  transform: scale(1.03);
  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.3));
}
.star-modal-trigger:active {
  transform: translateY(-1px);
}

.no-scroll .marquee-content {
  animation-play-state: paused !important;
}

.reviews-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 20, 38, 0.96);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  will-change: opacity, visibility;
}
.reviews-modal-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}
.reviews-modal-overlay.is-visible .reviews-modal-card {
  opacity: 1;
}

.reviews-modal-card {
  background: #FFFFFF;
  padding: 2.5rem 2rem 2rem 2rem;
  border-radius: 16px;
  max-width: 600px;
  width: 92%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: opacity;
}

.reviews-modal-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 2.25rem;
  color: #A0AEC0;
  cursor: pointer;
  line-height: 1;
  z-index: 5;
  transition: all 0.2s ease-in-out;
}
.reviews-modal-close:hover {
  color: #1B365D;
}

.modal-review-header {
  text-align: center;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}
.modal-review-header .google-logo-badge {
  width: 36px;
  height: 36px;
  background: #4285F4;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 1.35rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  box-shadow: 0 4px 10px rgba(66, 133, 244, 0.3);
}
.modal-review-header h3 {
  margin: 0 0 4px 0;
  font-size: 1.5rem;
  color: #1B365D;
}
.modal-review-header p {
  margin: 0;
  font-size: 0.9rem;
  color: #4A5568;
}

.modal-reviews-scroll-track {
  overflow-y: auto;
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 0;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #E2E8F0 transparent;
}
.modal-reviews-scroll-track::-webkit-scrollbar {
  width: 6px;
}
.modal-reviews-scroll-track::-webkit-scrollbar-track {
  background: transparent;
}
.modal-reviews-scroll-track::-webkit-scrollbar-thumb {
  background: #E2E8F0;
  border-radius: 10px;
}

.modal-review-card-item {
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  transform: translateZ(0);
}
.modal-review-card-item.card-gold {
  background-color: #FFFDF5;
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.02);
}
.modal-review-card-item.card-blue {
  background-color: #F4F9FF;
  border-color: rgba(21, 101, 192, 0.2);
  box-shadow: 0 4px 15px rgba(21, 101, 192, 0.02);
}
.modal-review-card-item.card-green {
  background-color: #F5FAF6;
  border-color: rgba(46, 125, 50, 0.2);
  box-shadow: 0 4px 15px rgba(46, 125, 50, 0.02);
}
.modal-review-card-item .modal-card-top-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-review-card-item .modal-reviewer-name {
  font-weight: 700;
  color: #1B365D;
  font-size: 1rem;
}
.modal-review-card-item .stars {
  margin: 0.5rem 0 0.75rem 0;
  font-size: 0.95rem;
  color: #FFB400;
}
.modal-review-card-item .modal-review-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #4A5568;
  font-style: italic;
}

.read-more-trigger {
  color: #1B365D;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
  margin-left: 6px;
  display: inline-block;
  transition: color 0.2s ease;
}
.read-more-trigger:hover {
  color: #EAC351;
}

.level-badge {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 50px;
}
.level-badge.badge-gold {
  background-color: #FFF8E1;
  color: #B8860B;
}
.level-badge.badge-blue {
  background-color: #E3F2FD;
  color: #1565C0;
}
.level-badge.badge-green {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.modal-review-footer {
  margin-top: 1.5rem;
  border-top: 1px solid #EFEFEF;
  padding-top: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

.google-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid #EAEAEA;
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
  font-family: "Lato", sans-serif;
  color: #1B365D;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease-in-out;
}
.google-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  background-color: #FAFAFA;
}
.google-badge span {
  font-size: 0.9rem;
}

/* ==========================================================================
   PAGE-SPECIFIC UNIQUE LAYOUT CONFIGURATIONS (_pages.scss)
   ========================================================================== */
.hero-premium {
  background: linear-gradient(135deg, #0F2027 0%, #203A43 50%, #2C5364 100%);
  padding: 5rem 0 4rem 0;
  overflow: hidden;
  position: relative;
}

.hero-split-layout {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  align-items: center;
}

.hero-text-col {
  text-align: center;
  z-index: 2;
}

.text-white {
  font-family: "Playfair Display", serif;
  color: #FFFFFF;
  font-size: 3rem;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.text-light-grey {
  color: #E0E0E0;
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

.hero-cta-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.trust-badge-light {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.star-rating-inline {
  display: flex;
  gap: 2px;
  color: #D4AF37;
  font-size: 0.85rem;
  line-height: 1;
}

.hero-visual-col {
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .hero-premium {
    padding: 7.5rem 0 6.5rem 0;
  }
  .hero-split-layout {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
  .hero-text-col {
    width: 46%;
    text-align: left;
  }
  .text-white {
    font-size: 4.25rem;
  }
  .hero-cta-wrapper {
    align-items: flex-start;
  }
  .hero-visual-col {
    width: 48%;
    justify-content: flex-end;
  }
}
.contact-section {
  background-color: #F9F7F2;
  padding: 4rem 0;
  min-height: 80vh;
}

.contact-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-top: 2.5rem;
}

.contact-info h1 {
  font-family: "Playfair Display", serif;
  color: #1B365D;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.1;
}
.contact-info .contact-subhead {
  font-size: 1.1rem;
  color: #4A5568;
  margin-bottom: 2.5rem;
}

.process-timeline {
  margin-bottom: 3rem;
}
.process-timeline h3 {
  color: #1B365D;
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
}

.step-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2rem;
  position: relative;
}
.step-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 30px;
  bottom: -25px;
  width: 2px;
  background-color: #E0E0E0;
  z-index: 0;
}
.step-item p {
  margin: 0;
  padding-top: 4px;
  line-height: 1.5;
  color: #4A5568;
  font-size: 1rem;
}

.step-num {
  background-color: #C5A059;
  color: #2C3E50;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  margin-right: 16px;
  z-index: 1;
}

.mini-testimonial {
  background-color: #FFFFFF;
  padding: 1.5rem;
  border-left: 4px solid #3B6E4C;
  border-radius: 8px;
  font-style: italic;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
.mini-testimonial .author {
  display: block;
  margin-top: 10px;
  font-weight: 700;
  font-style: normal;
  font-size: 0.9rem;
  color: #1B365D;
}

.contact-form-card {
  background-color: #FFFFFF;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 12px 25px rgba(27, 54, 93, 0.04);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: #1B365D;
  margin-bottom: 8px;
}

input, select, textarea {
  width: 100%;
  background-color: #F8F9FA;
  border: 1px solid #EAEAE8;
  padding: 16px;
  border-radius: 8px;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: #2C3E50;
  transition: border-color 0.2s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #1B365D;
  background-color: #FFFFFF;
}

textarea {
  resize: vertical;
}

.full-width {
  width: 100%;
  margin-top: 1rem;
}

.form-trust-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #1B365D;
  margin-top: 1rem;
  font-weight: 600;
  opacity: 0.8;
}
.form-trust-badge i {
  color: #3B6E4C;
  font-size: 1rem;
}

.contact-whatsapp-divider {
  text-align: center;
  position: relative;
  margin: 1.5rem 0;
}
.contact-whatsapp-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(27, 54, 93, 0.1);
  z-index: 1;
}
.contact-whatsapp-divider span {
  background: #FFFFFF;
  padding: 0 10px;
  font-size: 0.8rem;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  z-index: 2;
}

.btn-whatsapp-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #0F1E36;
  color: #FFFFFF;
  padding: 0.9rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-whatsapp-inline:hover {
  background: #25D366;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2);
}

@media (min-width: 768px) {
  .contact-wrapper {
    flex-direction: row;
    align-items: flex-start;
    gap: 4rem;
  }
  .contact-info,
  .contact-form-card {
    flex: 1;
  }
  .contact-info {
    padding-top: 2rem;
  }
  .contact-form-card {
    padding: 3rem;
  }
  .form-row {
    flex-direction: row;
    gap: 1.5rem;
  }
  .form-row .form-group {
    flex: 1;
  }
}
.service-hero-premium {
  background: linear-gradient(135deg, #0F1E36 0%, #1B365D 50%, #2A4B7C 100%);
  padding: 8rem 0 6rem 0;
  position: relative;
  overflow: hidden;
}

.hero-content-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 850px;
  margin: 0 auto;
  padding: 0 1rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px 18px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 2.25rem;
}

.badge-icon {
  font-size: 1.1rem;
  color: #D4AF37;
}

.badge-text {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #E2E8F0;
}

.service-hero-premium h1 {
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  line-height: 1.15;
  margin: 0 0 1.5rem 0;
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.hero-sub {
  font-size: 1.15rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 3.5rem 0;
  font-weight: 400;
  max-width: 720px;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 400px;
}

.btn-outline-white {
  background-color: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-weight: 700;
  padding: 1.1rem 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  text-align: center;
}
.btn-outline-white:hover {
  border-color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

@media (min-width: 768px) {
  .service-hero-premium h1 {
    font-size: 4rem;
  }
  .hero-actions {
    flex-direction: row;
    justify-content: center;
    width: auto;
    max-width: none;
  }
}
.transformation-section {
  background-color: #F8F6F0;
  padding: 4rem 0;
}
@media (min-width: 768px) {
  .transformation-section {
    padding: 6rem 0;
  }
}

.transform-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: stretch;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1rem;
}

.transform-card {
  padding: 1.5rem 1.25rem;
  border-radius: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.transform-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  margin: 0 0 1.5rem 0;
  line-height: 1.3;
  font-weight: 700;
}
@media (min-width: 768px) {
  .transform-card h3 {
    font-size: 1.6rem;
    margin: 0 0 2rem 0;
  }
}

.transform-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .transform-list {
    gap: 1.5rem;
  }
}
.transform-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .transform-list li {
    gap: 14px;
    font-size: 1rem;
    line-height: 1.55;
  }
}

.problem-card {
  background-color: #EEF2F6;
  border: 1px solid #D6E0EA;
  color: #486581;
}
.problem-card h3 {
  color: #1F2937;
}

.reality-badge {
  background-color: #FFEBEE;
  color: #C62828;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
}

.challenge-icon {
  color: #D32F2F;
  font-size: 1rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.solution-card {
  background-color: #FFFFFF;
  color: #1B365D;
  box-shadow: 0 12px 25px rgba(27, 54, 93, 0.04);
  border: 1px solid rgba(15, 30, 54, 0.04);
  z-index: 2;
}
.solution-card h3 {
  color: #1B365D;
}

.badge-wrapper {
  margin-bottom: 0.85rem;
}

.method-badge {
  background-color: #E8F5E9;
  color: #3B6E4C;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
}

.solution-icon {
  color: #D4AF37;
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.2));
}

.solution-cta {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid #F0F1F2;
}
@media (min-width: 768px) {
  .solution-cta {
    padding-top: 2rem;
  }
}

.btn-text-navy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1B365D;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.05rem;
  transition: gap 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.btn-text-navy:hover {
  gap: 14px;
  border-bottom-color: #D4AF37;
}
.btn-text-navy i {
  font-size: 1.1rem;
  color: #D4AF37;
}

@media (min-width: 768px) {
  .transform-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
  .transform-card {
    padding: 2.5rem;
  }
  .solution-card {
    transform: scale(1.03);
  }
}
.method-results-section {
  background-color: #0F172A;
  color: #FFFFFF;
  padding: 7rem 0;
}

.section-header-center {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}
.section-header-center h2 {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  color: #FFFFFF;
  margin: 0 0 0.75rem 0;
  font-weight: 700;
}

.header-sub-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  line-height: 1.5;
}

.method-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  max-width: 1140px;
  margin: 0 auto 5rem auto;
  padding: 0 1.5rem;
}

.feature-icon-wrapper {
  font-size: 2.5rem;
  color: #D4AF37;
  margin-bottom: 1.25rem;
  line-height: 1;
}

.method-feature-item h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 0.8rem 0;
  color: #FFFFFF;
}
.method-feature-item p {
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0;
}

.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 5rem auto;
}

.student-reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.video-review-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.video-thumbnail {
  position: relative;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-thumbnail:hover {
  transform: translateY(-4px);
}
.video-thumbnail:hover .video-overlay {
  background: rgba(15, 30, 54, 0.2);
}
.video-thumbnail:hover .play-btn-circle {
  background: #D4AF37;
  color: #0F1E36;
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 30, 54, 0.35);
  transition: background 0.3s ease;
  z-index: 1;
}

.result-pill-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem; /* Creates breathing room above the quote */
  color: #D4AF37;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.result-pill-text i {
  font-size: 1.1rem; /* Slightly larger icon to anchor the text */
}

.play-btn-circle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 58px;
  height: 58px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid #D4AF37;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D4AF37;
  font-size: 1.6rem;
  z-index: 2;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding-left: 4px;
}

.review-content {
  text-align: left;
}

.review-quote {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.15rem;
  color: #FFFFFF;
  margin: 0 0 0.65rem 0;
  line-height: 1.55;
}

.review-author {
  color: #D4AF37;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.section-footer-cta {
  text-align: center;
  margin-top: 4.5rem;
}

@media (min-width: 768px) {
  .method-features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
  .method-feature-item {
    text-align: center;
  }
  .feature-icon-wrapper {
    margin-left: auto;
    margin-right: auto;
  }
  .student-reviews-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}
/* ==========================================================================
   DYNAMIC PREMIUM CTA BANNER
   ========================================================================== */
.premium-cta-section {
  padding: 4rem 1.5rem 5rem;
  background-color: transparent;
}
.premium-cta-section .container {
  max-width: 1050px;
  margin: 0 auto;
}
.premium-cta-section .premium-cta-card {
  position: relative;
  background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%);
  border-radius: 20px;
  padding: 3.5rem 4rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.premium-cta-section .premium-cta-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(197, 160, 89, 0.12) 0%, rgba(197, 160, 89, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}
.premium-cta-section .premium-cta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.35);
  border-color: rgba(197, 160, 89, 0.3);
}
.premium-cta-section .premium-cta-card .cta-icon-box {
  position: relative;
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.15) 0%, rgba(197, 160, 89, 0.05) 100%);
  border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.premium-cta-section .premium-cta-card .cta-icon-box i {
  font-size: 2rem;
  color: #C5A059;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.premium-cta-section .premium-cta-card .cta-content {
  flex: 1;
  z-index: 1;
}
.premium-cta-section .premium-cta-card .cta-content h2 {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  font-weight: 500;
  color: #FFFFFF;
  margin: 0 0 0.75rem 0;
  letter-spacing: -0.5px;
}
.premium-cta-section .premium-cta-card .cta-content p {
  margin: 0;
  font-size: 1.05rem;
  color: #94A3B8;
  line-height: 1.6;
  max-width: 90%;
}
.premium-cta-section .premium-cta-card .cta-action {
  flex-shrink: 0;
  z-index: 1;
  /* Inherits the canonical gold button. Only the icon motion is local. */
}
.premium-cta-section .premium-cta-card .cta-action .btn-gold {
  gap: 0.75rem;
}
.premium-cta-section .premium-cta-card .cta-action .btn-gold i {
  transition: transform 0.3s ease;
}
.premium-cta-section .premium-cta-card .cta-action .btn-gold:hover i {
  transform: translateX(4px);
}
@media (max-width: 768px) {
  .premium-cta-section {
    padding: 3rem 1rem 4rem;
  }
  .premium-cta-section .premium-cta-card {
    flex-direction: column;
    text-align: center;
    padding: 2.5rem 1.5rem;
    gap: 1.5rem;
  }
  .premium-cta-section .premium-cta-card::before {
    right: 50%;
    transform: translateX(50%);
    top: -10%;
  }
  .premium-cta-section .premium-cta-card .cta-content h2 {
    font-size: 1.6rem;
  }
  .premium-cta-section .premium-cta-card .cta-content p {
    font-size: 0.95rem;
    max-width: 100%;
  }
  .premium-cta-section .premium-cta-card .cta-action {
    width: 100%;
  }
  .premium-cta-section .premium-cta-card .cta-action .btn-gold {
    width: 100%;
    justify-content: center;
  }
}

.curriculum-section {
  padding: 6rem 0;
  background-color: #FFFFFF;
  border-bottom: 1px solid #F0F1F2;
  position: relative;
}

.exam-boards-wrapper-clean {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.boards-label-clean {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #718096;
  margin-bottom: 1.75rem;
}

.spec-matrix-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2.5rem;
  padding: 0 1rem;
}

.spec-matrix-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #1B365D;
  font-size: 1.05rem;
  font-weight: 600;
}

.spec-check-marker {
  color: #D4AF37;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.spec-item-text {
  line-height: 1.4;
}

.curriculum-divider-clean {
  height: 1px;
  background: linear-gradient(90deg, transparent, #E2E8F0, transparent);
  margin: 4.5rem 0;
  width: 100%;
}

.modules-wrapper-clean {
  max-width: 1100px;
  margin: 0 auto;
}

.curriculum-title-clean {
  font-family: "Playfair Display", serif;
  color: #1B365D;
  font-size: 2.25rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.5px;
}

.curriculum-subtitle-clean {
  font-size: 1.05rem;
  color: #555555;
  text-align: center;
  margin-bottom: 3.5rem;
}

.topics-blueprint-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 0 1rem;
}

.blueprint-topic-card {
  background: #FAFAF9;
  border: 1px solid #EAEAE8;
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(27, 54, 93, 0.01);
}

.blueprint-card-accent-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #1B365D;
  opacity: 0.8;
}

.blueprint-icon-box {
  width: 38px;
  height: 38px;
  background: rgba(27, 54, 93, 0.05);
  color: #1B365D;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.blueprint-topic-text {
  font-size: 1rem;
  font-weight: 600;
  color: #2D3748;
  line-height: 1.45;
}

@media (min-width: 640px) {
  .topics-blueprint-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .topics-blueprint-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.features-matrix-section {
  background-color: #FFFFFF;
  padding: 6rem 0;
  color: #1B365D;
}

.matrix-main-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem auto;
  padding: 0 1rem;
}
.matrix-main-header h2 {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #1B365D;
  margin: 0 0 1rem 0;
  letter-spacing: -0.5px;
}

.matrix-eyebrow {
  display: block;
  font-family: "Lato", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #D4AF37;
  margin-bottom: 0.75rem;
}

.matrix-lead {
  font-size: 1.15rem;
  line-height: 1.6;
  color: #4A5568;
}

.pillar-block {
  border-bottom: 1px solid #F0F1F2;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}
.pillar-block.no-border {
  border-bottom: none;
}
.pillar-block.is-open .pillar-header {
  border-color: #1B365D;
  background-color: #FAFAF9;
  box-shadow: 0 4px 15px rgba(27, 54, 93, 0.05);
}
.pillar-block.is-open .pillar-toggle-chevron {
  transform: rotate(180deg);
}
.pillar-block.is-open .feature-grid-cards {
  display: grid;
}

.pillar-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  background-color: #F1F5F9;
  border: 2px solid #CBD5E1;
  transition: background-color 0.2s ease, border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.pillar-header:hover {
  background-color: #E2E8F0;
  border-color: #94A3B8;
}

.pillar-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

/* Category Soft-Luxury Custom Identity Tags */
.color-shield {
  background-color: #EBF8FF;
  color: #2B6CB0;
}

.color-columns {
  background-color: #F7FAFC;
  color: #4A5568;
  border: 1px solid #E2E8F0;
}

.color-rocket {
  background-color: #FEFCBF;
  color: #B7791F;
}

.color-calendar {
  background-color: #E6FFFA;
  color: #234E52;
}

.pillar-title-area {
  flex-grow: 1;
}
.pillar-title-area h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1B365D;
  margin: 0;
  letter-spacing: -0.25px;
}

.pillar-toggle-chevron {
  color: #D4AF37;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  flex-shrink: 0;
}

.feature-grid-cards {
  display: none;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding: 1.5rem 1rem 1rem 1rem;
  align-items: stretch;
  animation: matrixBlockFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.matrix-card {
  background-color: #FAFAF9;
  border: 1px solid #EAEAE8;
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.matrix-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1B365D;
  margin: 0 0 0.75rem 0;
  line-height: 1.35;
}
.matrix-card.highlight-border {
  border-left: 4px solid #D4AF37;
}

.card-explanation {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4A5568;
  margin: 0;
}

@keyframes matrixBlockFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 768px) {
  .matrix-main-header h2 {
    font-size: 3rem;
    margin-bottom: 5rem;
  }
  .pillar-header {
    background-color: transparent !important;
    border: none !important;
    padding: 0 1rem !important;
    cursor: default !important;
    pointer-events: none !important;
    margin-bottom: 2.5rem;
    box-shadow: none !important;
  }
  .pillar-icon-badge {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }
  .pillar-title-area h3 {
    font-size: 1.6rem;
  }
  .pillar-toggle-chevron {
    display: none !important;
  }
  .pillar-block {
    display: block !important;
    border-bottom: 1px solid #E2E8F0;
    padding-bottom: 4rem;
    margin-bottom: 4rem;
  }
  .pillar-block.no-border {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .feature-grid-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    padding: 0 1rem !important;
    gap: 1.5rem;
  }
  .matrix-card {
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  }
  .matrix-card:hover {
    background-color: #FFFFFF;
    border-color: rgba(27, 54, 93, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(27, 54, 93, 0.04);
  }
}
@media (min-width: 992px) {
  .feature-grid-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ==========================================================================
   SITE ARCHITECTURE STRUCTURAL SECTIONS LAYOUT SPEC (_sections.scss)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 1rem 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header .logo-text,
.site-header .nav-link {
  color: #FFFFFF;
}

.header-transparent {
  background-color: transparent;
  border-bottom: none;
}
.header-transparent.scrolled {
  background-color: #1B365D;
  border-bottom: 2px solid #D4AF37;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header-solid {
  background-color: #1B365D !important;
  border-bottom: 2px solid #D4AF37;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-text {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav-link {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-link:hover {
  color: #D4AF37;
}

.dropdown-item {
  position: relative;
}
.dropdown-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #FFFFFF;
  min-width: 220px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease-in-out;
  list-style: none;
}
.dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  color: #1B365D;
  font-size: 0.9rem;
  font-weight: 500;
}
.dropdown-menu li a:hover {
  background-color: #f4f4f4;
  color: #D4AF37;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.login-link {
  color: #D4AF37;
  font-weight: 600;
  font-size: 0.9rem;
}

.btn-nav-cta {
  padding: 0.5rem 1.2rem;
  border: 1px solid #D4AF37;
  color: #FFFFFF;
  border-radius: 50px;
  font-size: 0.9rem;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-nav-cta:hover {
  background-color: #D4AF37;
  color: #1B365D;
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 1.8rem;
  cursor: pointer;
}

.mobile-overlay {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: #1B365D;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 8rem;
  padding-bottom: 4rem;
  transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.mobile-overlay.active {
  right: 0;
}
.mobile-overlay.active .mobile-close {
  opacity: 1;
  visibility: visible;
}
.mobile-overlay.active .mobile-links li {
  opacity: 1;
  transform: translateY(0);
}
.mobile-overlay.active .mobile-links li:nth-child(1) {
  transition-delay: 0.1s;
}
.mobile-overlay.active .mobile-links li:nth-child(2) {
  transition-delay: 0.15s;
}
.mobile-overlay.active .mobile-links li:nth-child(3) {
  transition-delay: 0.2s;
}
.mobile-overlay.active .mobile-links li:nth-child(4) {
  transition-delay: 0.25s;
}
.mobile-overlay.active .mobile-links li:nth-child(5) {
  transition-delay: 0.3s;
}
.mobile-overlay.active .mobile-links li:nth-child(6) {
  transition-delay: 0.35s;
}
.mobile-overlay.active .mobile-links li:nth-child(7) {
  transition-delay: 0.4s;
}

.mobile-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 2.5rem;
  cursor: pointer;
  z-index: 2001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-links {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.mobile-links li {
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-links a {
  color: #FFFFFF;
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  display: block;
  padding: 5px 0;
}
.mobile-links .highlight-gold {
  color: #D4AF37;
}

body.no-scroll {
  overflow: hidden;
}

@media (max-width: 992px) {
  .desktop-only {
    display: none;
  }
  .mobile-toggle {
    display: block;
  }
}
.about-section {
  background-color: #FFFFFF;
  padding: 4rem 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
.about-section .about-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}
.about-section .about-image-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}
.about-section .profile-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  filter: sepia(20%);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-section .profile-img:hover {
  filter: sepia(0%);
  transform: scale(1.02);
}
.about-section .about-content {
  text-align: center;
}
.about-section .about-badges {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.about-section .badge {
  display: inline-block;
  background-color: rgba(27, 54, 93, 0.1);
  color: #1B365D;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 8px 16px;
  border-radius: 50px;
}
@media (min-width: 768px) {
  .about-section .about-grid {
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
  }
  .about-section .about-image-wrapper {
    width: 40%;
    justify-content: flex-start;
  }
  .about-section .profile-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    aspect-ratio: 1/1.2;
  }
  .about-section .about-content {
    width: 60%;
    text-align: left;
    padding-top: 1rem;
  }
  .about-section .about-badges {
    justify-content: flex-start;
  }
}

.trust-banner {
  background-color: #F9F7F2;
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

.trust-headline {
  font-family: "Playfair Display", serif;
  color: #1B365D;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.google-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid #EAEAEA;
  padding: 10px 22px;
  border-radius: 50px;
  text-decoration: none;
  color: #1B365D;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease-in-out;
}
.google-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  background-color: #FAFAFA;
}
.google-badge span {
  font-size: 0.9rem;
  font-family: "Lato", sans-serif;
}

.marquee-wrapper {
  width: 100%;
  position: relative;
}

.review-card {
  --review-card-padding: 24px;
  padding: var(--review-card-padding);
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, 0.03);
  position: relative;
  box-sizing: border-box;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.review-card.card-gold {
  background-color: #FFFDF5;
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.02);
}
.review-card.card-blue {
  background-color: #F4F9FF;
  border-color: rgba(21, 101, 192, 0.2);
  box-shadow: 0 4px 15px rgba(21, 101, 192, 0.02);
}
.review-card.card-green {
  background-color: #F5FAF6;
  border-color: rgba(46, 125, 50, 0.2);
  box-shadow: 0 4px 15px rgba(46, 125, 50, 0.02);
}
.review-card .stars {
  color: #FFB400;
  letter-spacing: 2px;
  margin-bottom: 12px;
  font-size: 1.1rem;
  margin-top: 0.25rem;
}
.review-card .review-text {
  font-size: 0.95rem;
  color: #4A5568;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 16px;
}
.review-card .review-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.review-card .review-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: #1B365D;
}

.absolute-badge {
  position: absolute;
  bottom: var(--review-card-padding);
  right: var(--review-card-padding);
}

.level-badge {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 50px;
}
.level-badge.badge-gold {
  background-color: #FFF8E1;
  color: #B8860B;
}
.level-badge.badge-blue {
  background-color: #E3F2FD;
  color: #1565C0;
}
.level-badge.badge-green {
  background-color: #E8F5E9;
  color: #2E7D32;
}

@media (max-width: 767px) {
  .marquee-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 15%;
    background: linear-gradient(to right, rgba(249, 247, 242, 0), #F9F7F2);
    pointer-events: none;
    z-index: 2;
  }
  .marquee-content {
    display: flex;
    gap: 16px;
    padding: 0 24px 1rem 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  .marquee-content::-webkit-scrollbar {
    display: none;
  }
  .review-card {
    flex: 0 0 85%;
    scroll-snap-align: center;
    margin-right: 0;
  }
}
@media (min-width: 768px) {
  .marquee-wrapper {
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    padding: 1rem 0;
  }
  .marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
  }
  .marquee-content {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: scrollMarqueeTrack 120s linear infinite;
    padding-left: 24px;
    transform: translateZ(0);
  }
  .review-card {
    flex: 0 0 350px;
  }
  @keyframes scrollMarqueeTrack {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
}
.habit-section {
  padding: 4rem 0;
  background: linear-gradient(to bottom, #FFFDF5, #FFF8E1);
  border-top: 1px solid #EAD8B1;
}
.habit-section .habit-grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}
.habit-section .habit-col-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
  align-items: center;
}
.habit-section .habit-text h2 {
  font-family: "Playfair Display", serif;
  color: #1B365D;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.habit-section .habit-text p {
  color: #444444;
  line-height: 1.6;
}
.habit-section .voucher-wrapper {
  order: -1;
  margin-bottom: 1rem;
}
.habit-section .voucher-card {
  background: #232F3E;
  color: #FFFFFF;
  border-radius: 8px;
  padding: 20px;
  width: 260px;
  height: 150px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: rotate(-3deg);
  transition: all 0.2s ease-in-out;
}
.habit-section .voucher-card:hover {
  transform: rotate(0deg) scale(1.02);
}
.habit-section .voucher-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.habit-section .voucher-amt {
  font-size: 2.5rem;
  font-weight: 700;
  color: #FF9900;
  line-height: 1;
}
.habit-section .voucher-label {
  text-transform: uppercase;
  font-size: 0.7rem;
  color: #cccccc;
  letter-spacing: 1px;
}
.habit-section .voucher-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.habit-section .voucher-brand {
  font-size: 0.9rem;
  font-weight: 700;
}
.habit-section .habit-col-right {
  background: rgba(255, 255, 255, 0.5);
  padding: 2rem;
  border-radius: 16px;
  width: 100%;
  border: 1px solid rgba(212, 175, 55, 0.2);
}
.habit-section .benefit-header {
  margin-top: 0;
  color: #1B365D;
  font-family: "Lato", sans-serif;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
}
.habit-section .benefit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.habit-section .benefit-list li {
  display: flex;
  align-items: center;
  font-size: 1.05rem;
  color: #333333;
}
.habit-section .check-icon {
  color: #3B6E4C;
  font-weight: 700;
  margin-right: 12px;
  font-size: 1.2rem;
}
@media (min-width: 768px) {
  .habit-section .habit-grid {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .habit-section .habit-col-left {
    width: 45%;
    text-align: left;
    align-items: flex-start;
  }
  .habit-section .voucher-wrapper {
    order: 0;
    align-self: flex-start;
  }
  .habit-section .habit-col-right {
    width: 45%;
  }
}

.methodology-section {
  background-color: #FFFFFF;
  padding: 5rem 0;
  border-bottom: 1px solid #F0F0F0;
}
.methodology-section .method-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem auto;
}
.methodology-section .method-header h2 {
  font-family: "Playfair Display", serif;
  color: #1B365D;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.methodology-section .method-sub {
  font-size: 1.1rem;
  color: #666666;
}
.methodology-section .method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.methodology-section .method-card {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: 12px;
  transition: all 0.2s ease-in-out;
}
.methodology-section .method-card:hover {
  background-color: #F9F7F2;
}
.methodology-section .icon-wrapper {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background-color: rgba(27, 54, 93, 0.05);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1B365D;
  font-size: 1.5rem;
}
.methodology-section .text-wrapper h3 {
  margin: 0 0 0.5rem 0;
  color: #1B365D;
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
}
.methodology-section .text-wrapper p {
  margin: 0;
  font-size: 0.9rem;
  color: #555555;
  line-height: 1.6;
}
@media (min-width: 768px) {
  .methodology-section .method-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    row-gap: 3rem;
  }
}

.results-section {
  background-color: #1B365D;
  padding: 6rem 0;
  color: #FFFFFF;
  overflow: hidden;
  font-family: "Lato", sans-serif;
}
.results-section .results-grid {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: center;
}
.results-section .results-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.results-section .results-text h2 {
  font-family: "Playfair Display", serif;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: #FFFFFF;
}
.results-section .results-text .text-light-grey {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
}
.results-section .text-gold {
  color: #D4AF37;
  font-weight: 700;
}
.results-section .stat-highlight {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.5rem 2.5rem;
  border-radius: 16px;
  align-self: center;
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 1rem;
  transition: all 0.2s ease-in-out;
}
.results-section .stat-highlight:hover {
  border-color: rgba(212, 175, 55, 0.3);
  background: rgba(255, 255, 255, 0.07);
}
.results-section .stat-number {
  font-size: 2.75rem;
  font-weight: 800;
  color: #D4AF37;
  line-height: 1;
  display: block;
}
.results-section .stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
}
.results-section .chart-wrapper {
  width: 100%;
  max-width: 440px;
  height: 340px;
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;
}
.results-section .bars-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  position: relative;
  z-index: 1;
  padding: 0 1.5rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}
.results-section .bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  width: 84px;
  position: relative;
}
.results-section .bar {
  width: 100%;
  border-radius: 8px 8px 0 0;
  position: relative;
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.results-section .bar-start {
  height: 40%;
  background: linear-gradient(to top, #3A4F6B, #5C7293);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.results-section .bar-end {
  height: 78%;
  background: linear-gradient(to top, #C29B38, #EBBF55);
  transform: translateZ(0);
  filter: drop-shadow(0 0 15px rgba(235, 191, 85, 0.45));
}
.results-section .bar-value {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  background: #FFFFFF;
  color: #1B365D;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}
.results-section .bar-label {
  position: absolute;
  top: 100%;
  padding-top: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  white-space: nowrap;
}
.results-section .delta-connector {
  position: absolute;
  bottom: calc(40% + 15px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  pointer-events: none;
}
.results-section .delta-badge {
  background-color: #3B6E4C;
  color: #FFFFFF;
  padding: 6px 14px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  display: inline-block;
}
@media (max-width: 767px) {
  .results-section {
    padding: 5rem 0 7rem 0;
  }
  .results-section .chart-wrapper {
    max-width: 340px;
  }
  .results-section .bars-container {
    padding: 0 0.5rem;
  }
  .results-section .bar-group {
    width: 72px;
  }
  .results-section .bar-label {
    font-size: 0.8rem;
  }
}
@media (min-width: 768px) {
  .results-section .results-grid {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .results-section .results-text {
    width: 48%;
    text-align: left;
  }
  .results-section .results-text .stat-highlight {
    align-self: flex-start;
  }
  .results-section .chart-wrapper {
    width: 45%;
    margin: 0;
  }
}

.video-stories-section {
  /* FIX: Swapped $color-primary-brand for a deep, neutral cinematic slate */
  background-color: #1B365D;
  padding: 0 0 5rem 0;
  /* Softened the top border so it feels like a subtle shadow line */
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.video-header {
  text-align: center;
  margin-bottom: 3rem;
  padding-top: 4rem;
}
.video-header h2 {
  font-family: "Playfair Display", serif;
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.text-white {
  color: #FFFFFF;
}

.text-light-grey {
  color: #CBD5E0;
  font-size: 1.05rem;
}

.stories-grid {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
  scrollbar-width: none;
}
.stories-grid::-webkit-scrollbar {
  display: none;
}

.story-card {
  flex: 0 0 85%;
  scroll-snap-align: center;
  text-decoration: none;
  display: block;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.story-card:hover {
  transform: translateY(-5px);
}
.story-card:hover .story-thumb {
  transform: scale(1.04);
  opacity: 0.55;
}
.story-card:hover .story-play-btn {
  background-color: #D4AF37;
  border-color: #D4AF37;
  color: #1B365D;
  transform: scale(1.12);
}

.thumbnail-wrapper {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1rem;
  aspect-ratio: 16/9;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  background-color: #0f1e35;
}

.story-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0.85;
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.story-play-btn {
  width: 56px;
  height: 56px;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, 0.8);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding-left: 3px;
}

/* 1. Refined Result Tag */
.result-tag {
  display: inline-block;
  /* A frosted, sheer highlight that looks beautiful against deep slate */
  background-color: rgba(255, 255, 255, 0.06);
  color: #D4AF37;
  border: 1px solid rgba(255, 255, 255, 0.08); /* Delicate, crisp edge */
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  margin-top: 1rem;
  margin-bottom: 1.25rem;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle hover effect for the tag */
.story-card:hover .result-tag {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

/* 2. Adjusted Caption for Readability */
.video-caption {
  color: #FFFFFF;
  font-size: 1.05rem;
  font-style: italic;
  margin-bottom: 1rem; /* Added space before the student's name */
  font-family: "Playfair Display", serif;
  line-height: 1.6; /* Increased line-height for breathability */
  opacity: 0.9; /* Softens the stark white text */
}

/* 3. Refined Student Name */
.student-name {
  color: #D4AF37;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  opacity: 0.8; /* Subtle softening so it doesn't fight the quote */
}

@media (min-width: 768px) {
  .stories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    gap: 32px;
  }
  .story-card {
    flex: unset;
  }
}
.pull-quote-section {
  background-color: #FFFFFF;
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #F0F1F2;
}

.quote-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 1.5rem;
}

.quote-watermark {
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Playfair Display", serif;
  font-size: 10rem;
  line-height: 1;
  color: rgba(212, 175, 55, 0.08);
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

.editorial-quote {
  font-family: "Playfair Display", serif;
  font-size: 1.35rem;
  line-height: 1.6;
  color: #1B365D;
  margin: 0 0 2.5rem 0;
  border: none;
  font-style: italic;
  font-weight: 500;
}

.highlight {
  background: linear-gradient(120deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.05) 100%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 2px 6px;
  font-weight: 600;
  border-radius: 4px;
}

.quote-attribution-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.author-avatar-link {
  display: block;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(27, 54, 93, 0.12);
  border: 2px solid #FFFFFF;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.author-avatar-link:hover {
  transform: scale(1.08);
}

.author-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.author-title-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.author-name {
  font-family: "Lato", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1B365D;
}

.uni-tag {
  color: #D4AF37;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1px;
  display: block;
}

.watch-story-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 0.85rem;
  color: #718096;
  font-weight: 600;
  transition: color 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.youtube-icon {
  color: #FF0000;
  flex-shrink: 0;
}

.watch-story-link:hover {
  color: #1B365D;
}

@media (min-width: 768px) {
  .editorial-quote {
    font-size: 1.85rem;
    line-height: 1.55;
  }
  .quote-attribution-block {
    flex-direction: row;
    justify-content: center;
    text-align: left;
    gap: 1.25rem;
  }
  .author-details {
    align-items: flex-start;
    gap: 2px;
  }
  .author-title-row {
    flex-direction: row;
    align-items: center;
  }
  .uni-tag {
    display: inline-block;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #E2E8F0;
  }
  .quote-watermark {
    font-size: 12rem;
    top: -60px;
  }
}
.faq-section {
  padding: 4rem 0;
  background-color: #F9F7F2;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
}
.faq-item:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  border-color: rgba(27, 54, 93, 0.1);
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: #1B365D;
  font-family: "Playfair Display", serif;
  font-size: 1.1rem;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item .faq-icon {
  color: #D4AF37;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}
.faq-item[open] .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.5rem 1.5rem 1.5rem;
  color: #555555;
  line-height: 1.6;
  font-size: 0.9rem;
  border-top: 1px solid transparent;
  animation: fadeDown 0.3s ease-in-out;
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.uni-banner-section {
  background-color: #FFFFFF;
  padding: 5rem 0;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
}

.uni-header {
  font-family: "Lato", sans-serif;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #1B365D;
  text-align: center;
  margin-bottom: 4rem;
  opacity: 0.8;
  font-weight: 700;
}

.logos-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
  justify-items: center;
  align-items: center;
  padding: 0 2rem;
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 65px;
  width: 100%;
  max-width: 160px;
  transition: transform 0.3s ease;
}
.logo-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: all 0.3s ease-in-out;
}
.logo-item:hover {
  transform: translateY(-4px);
}
.logo-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}
.logo-item.logo-heavy img {
  max-height: 75%;
  max-width: 85%;
}
.logo-item.logo-light img, .logo-item.logo-light:hover img {
  transform: scale(1.4);
}

@media (min-width: 576px) {
  .logos-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
  .logo-item {
    height: 75px;
    max-width: 190px;
  }
}
@media (min-width: 768px) {
  .logos-wrapper {
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem 3rem;
  }
  .logo-item {
    height: 80px;
    max-width: 220px;
  }
}
.services-section-redesign {
  padding: 4rem 0;
  background-color: #f8f6f0;
  position: relative;
}

.services-modern-header {
  max-width: 650px;
  margin: 0 auto 4.5rem auto;
  text-align: center;
}
.services-modern-header h2 {
  font-family: "Playfair Display", serif;
  color: #0f1e36;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
}

.eyebrow-accent {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #c59b27;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.services-modern-subtitle {
  font-size: 1.1rem;
  color: #4A5568;
  line-height: 1.55;
}

.services-modern-matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .services-modern-matrix {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .services-modern-matrix {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* --- Sleek, Compact Service Panels --- */
.modern-service-panel {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(15, 30, 54, 0.08);
  box-shadow: 0 4px 15px rgba(15, 30, 54, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.modern-service-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(15, 30, 54, 0.08);
}

/* 1. Header (Tightened Spacing) */
.panel-header-compact {
  padding: 1.75rem 1.75rem 1rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.panel-icon-shield-small {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.panel-micro-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 50px;
}

.panel-main-title {
  font-family: "Playfair Display", serif;
  font-size: 1.35rem;
  color: #0f1e36;
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
}

.panel-description {
  font-size: 0.9rem;
  color: #555555;
  line-height: 1.5;
  margin: 0;
}

.panel-stretched-anchor {
  text-decoration: none;
  color: inherit;
}
.panel-stretched-anchor::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

/* 2. Body (Removed bulky background box) */
.panel-body-delivery-compact {
  padding: 0 1.75rem 1.5rem 1.75rem;
  flex-grow: 1;
}

.milestone-custom-list-clean {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.milestone-custom-list-clean li {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #444444;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.milestone-custom-list-clean li i {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: -2px;
}

/* 3. Footer (Inline Flex Layout) */
.panel-action-footer-inline {
  padding: 1.5rem 1.75rem;
  border-top: 1px solid #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.inline-price-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rate-tier-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: #94A3B8;
}

.rate-numerical-value {
  font-weight: 700;
  color: #0f1e36;
  font-size: 1.4rem;
  line-height: 1;
}
.rate-numerical-value span {
  font-size: 0.8rem;
  color: #94A3B8;
  font-weight: 500;
}

.panel-conversion-btn-compact {
  padding: 0.65rem 1.25rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

/* --- Tier Custom Structural Color Tokens --- */
.tier-emerald {
  border-top: 3px solid #3B6E4C;
}
.tier-emerald .panel-icon-shield-small, .tier-emerald .panel-micro-tag {
  background: rgba(59, 110, 76, 0.08);
  color: #3B6E4C;
}
.tier-emerald .milestone-custom-list-clean li i {
  color: #3B6E4C;
}
.tier-emerald .panel-conversion-btn-compact {
  background: rgba(59, 110, 76, 0.08);
  color: #3B6E4C;
}
.tier-emerald .panel-conversion-btn-compact:hover {
  background: #3B6E4C;
  color: #FFFFFF;
}

.tier-sapphire {
  border-top: 3px solid #246B8F;
}
.tier-sapphire .panel-icon-shield-small, .tier-sapphire .panel-micro-tag {
  background: rgba(36, 107, 143, 0.08);
  color: #246B8F;
}
.tier-sapphire .milestone-custom-list-clean li i {
  color: #246B8F;
}
.tier-sapphire .panel-conversion-btn-compact {
  background: rgba(36, 107, 143, 0.08);
  color: #246B8F;
}
.tier-sapphire .panel-conversion-btn-compact:hover {
  background: #246B8F;
  color: #FFFFFF;
}

.tier-aurum {
  border-top: 3px solid #C5A059;
}
.tier-aurum .panel-icon-shield-small, .tier-aurum .panel-micro-tag {
  background: rgba(197, 155, 39, 0.1);
  color: #A47D15;
}
.tier-aurum .milestone-custom-list-clean li i {
  color: #A47D15;
}
.tier-aurum .panel-conversion-btn-compact {
  background: rgba(197, 155, 39, 0.1);
  color: #A47D15;
}
.tier-aurum .panel-conversion-btn-compact:hover {
  background: #C5A059;
  color: #1B365D;
}

.portal-breakout {
  background-color: #e8f1ef;
  padding: 3rem 0 6rem 0;
  position: relative;
  overflow: hidden;
}

.portal-grid {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: center;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #3B6E4C;
  display: block;
  margin-bottom: 0.5rem;
}

.portal-content h2 {
  font-size: 2rem;
  line-height: 1.2;
  color: #1B365D;
  margin-top: 0;
}

.portal-subhead {
  font-size: 1.1rem;
  color: #444444;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.feature-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.feature-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.feature-icon {
  background: #FFFFFF;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.feature-text strong {
  display: block;
  color: #1B365D;
  margin-bottom: 0.2rem;
}
.feature-text p {
  margin: 0;
  font-size: 1rem;
  color: #555555;
  line-height: 1.4;
}

.btn-outline-navy {
  display: inline-block;
  padding: 0.8rem 2rem;
  border: 2px solid #1B365D;
  color: #1B365D;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  background: transparent;
  transition: all 0.2s ease-in-out;
}
.btn-outline-navy:hover {
  background: #1B365D;
  color: #FFFFFF;
}

.portal-visual {
  position: relative;
  width: 100%;
  perspective: 1000px;
}

.decorative-circle {
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.interface-card {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(27, 54, 93, 0.15);
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.main-dashboard {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  transform: rotateX(2deg);
}

.ui-header {
  background: #1B365D;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ui-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  margin-right: 4px;
}

.ui-user {
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.8;
}

.ui-body {
  padding: 20px;
}

.ui-streak-banner {
  background: #FFF8E1;
  border: 1px solid #FFE082;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.streak-fire {
  font-size: 1.5rem;
}

.streak-info strong {
  display: block;
  color: #b8860b;
  font-size: 0.9rem;
}
.streak-info small {
  font-size: 0.75rem;
  color: #666666;
}

.ui-section-title {
  font-weight: 700;
  color: #1B365D;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.ui-task-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eeeeee;
}
.ui-task-row:last-child {
  border-bottom: none;
}

.task-check {
  width: 20px;
  height: 20px;
  border: 2px solid #dddddd;
  border-radius: 50%;
}
.task-check.checked {
  background: #3B6E4C;
  border-color: #3B6E4C;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.task-details {
  flex-grow: 1;
}
.task-details strong {
  display: block;
  font-size: 0.85rem;
  color: #333333;
}
.task-details small {
  font-size: 0.7rem;
  color: #888888;
}

.task-status {
  font-size: 0.7rem;
  font-weight: 700;
  background: #1B365D;
  color: #FFFFFF;
  padding: 4px 10px;
  border-radius: 4px;
}
.task-status.complete {
  background: #E8F5E9;
  color: #3B6E4C;
}

.floating-filter {
  position: absolute;
  bottom: -30px;
  right: -20px;
  width: 180px;
  padding: 15px;
  z-index: 3;
  animation: float 6s ease-in-out infinite;
}

.filter-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #888888;
  margin-bottom: 8px;
}

.filter-pill {
  display: block;
  font-size: 0.8rem;
  padding: 6px 10px;
  background: #f4f4f4;
  color: #555555;
  border-radius: 4px;
  margin-bottom: 6px;
}
.filter-pill.active {
  background: #1B365D;
  color: #FFFFFF;
}

@media (min-width: 992px) {
  .portal-grid {
    flex-direction: row;
    align-items: center;
  }
  .portal-content {
    width: 45%;
  }
  .portal-visual {
    width: 55%;
    margin-right: -80px;
  }
  .main-dashboard {
    transform: rotateY(-10deg) rotateX(5deg);
    box-shadow: -20px 20px 60px rgba(27, 54, 93, 0.2);
  }
  .floating-filter {
    right: 40px;
    bottom: 40px;
  }
}
.site-footer {
  background: linear-gradient(180deg, #1B365D 0%, #0F2027 100%);
  padding: 5rem 0 2rem 0;
  color: #FFFFFF;
  border-top: 4px solid #D4AF37;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.footer-logo {
  font-family: "Playfair Display", serif;
  font-size: 1.8rem;
  color: #FFFFFF;
  margin-bottom: 1rem;
  font-weight: 700;
}

.footer-tagline {
  opacity: 0.8;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 300px;
}

.footer-contact .contact-link {
  display: block;
  color: #D4AF37;
  text-decoration: none;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.footer-contact .contact-link:hover {
  text-decoration: underline;
}

.location-text {
  font-size: 0.9rem;
  opacity: 0.6;
}
.location-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(212, 175, 55, 0.55);
  text-underline-offset: 3px;
  transition: all 0.2s ease-in-out;
}
.location-text a:hover {
  color: #D4AF37;
  text-decoration-color: #D4AF37;
}

.footer-heading {
  color: #D4AF37;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  margin-bottom: 0.8rem;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  font-size: 0.95rem;
}
.footer-links a:hover {
  color: #FFFFFF;
  transform: translateX(5px);
  display: inline-block;
}

.portal-link {
  color: #FFFFFF !important;
  font-weight: 700;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.85rem;
  opacity: 0.7;
  text-align: center;
}

.dbs-badge {
  color: #4b7f52;
  font-weight: 700;
}

.back-to-top {
  color: #FFFFFF;
  text-decoration: none;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.cta-strip {
  background: linear-gradient(135deg, #0F2027 0%, #203A43 50%, #2C5364 100%);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.pattern-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.cta-flex-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.5rem;
  position: relative;
  z-index: 2;
}

.cta-headline {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: #FFFFFF;
}

.cta-sub {
  font-size: 1.15rem;
  margin: 0;
  opacity: 0.9;
  font-weight: 300;
  max-width: 600px;
  line-height: 1.6;
}

@media (min-width: 992px) {
  .cta-flex-wrapper {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    align-items: center;
  }
  .cta-text {
    width: 65%;
  }
  .cta-action {
    width: 35%;
    text-align: right;
  }
  .cta-sub {
    margin-left: 0;
  }
}
/* ==========================================================================
   GRADE PREDICTOR PROMO - LIGHT & AIRY DESIGN
   ========================================================================== */
.predictor-promo-light {
  background-color: #F8F9FB; /* Matches your simulator background */
  border: 1px solid #E2E8F0;
  padding: 5rem 2rem;
  border-radius: 24px;
  margin: 4rem auto;
  max-width: 1100px;
  overflow: hidden;
}

.promo-grid-light {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.promo-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #D4AF37;
  margin-bottom: 1rem;
}

.promo-headline-light {
  font-family: "Playfair Display", serif;
  font-size: 2.75rem;
  color: #0F172A;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
}

.promo-text-light {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #4A5568;
  margin-bottom: 2.5rem;
}

/* Size modifier only. Colour, weight, hover and shadow come from .btn-gold,
   which this is always used alongside. */
.promo-btn-light {
  padding: 16px 36px;
  font-size: 1.1rem;
}

/* --- The Floating UI Visuals --- */
.promo-visual-light {
  position: relative;
  height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.visual-backdrop-circle {
  position: absolute;
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0) 100%);
  border-radius: 50%;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.floating-stat-card {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 15px 35px rgba(14, 34, 69, 0.08);
  width: 100%;
  max-width: 320px;
  animation: float 6s ease-in-out infinite;
}

.card-primary {
  margin-right: 40px;
  margin-bottom: -20px;
}

.card-secondary {
  margin-left: 60px;
  padding: 1rem 1.5rem;
  max-width: 260px;
  animation: float 6s ease-in-out infinite 1s; /* Delayed animation */
}

.mock-badge {
  background: #0F172A;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 20px;
}

.mock-card-body {
  margin-top: 1rem;
}

.mock-grade {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  color: #0F172A;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.mock-prob {
  font-size: 1.5rem;
  font-weight: 800;
  color: #2E7D32; /* Green for high prob */
  display: flex;
  align-items: center;
  gap: 8px;
}

.mock-prob span {
  font-size: 0.85rem;
  font-weight: 600;
  color: #718096;
}

.mock-progress-track {
  width: 100%;
  height: 6px;
  background: #E2E8F0;
  border-radius: 10px;
  margin-top: 1rem;
  overflow: hidden;
}

.mock-progress-fill {
  height: 100%;
  background: #D4AF37;
  border-radius: 10px;
}

/* Secondary card horizontal layout */
.mock-horizontal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
}

.mock-grade-small {
  font-weight: 700;
  color: #4A5568;
}

.mock-prob-small {
  font-weight: 800;
  color: #0F172A;
}

/* Floating Animation */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
/* --- Mobile Responsiveness --- */
@media (max-width: 900px) {
  .promo-grid-light {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .predictor-promo-light {
    padding: 3.5rem 1.5rem;
    margin: 2rem 1rem;
    text-align: center;
  }
  .promo-headline-light {
    font-size: 2.25rem;
  }
  .card-primary {
    margin-right: 0;
    margin-bottom: 15px;
  }
  .card-secondary {
    margin-left: 0;
  }
  .visual-backdrop-circle {
    width: 250px;
    height: 250px;
  }
}
/* ==========================================================================
   ALUMNI CASE STUDIES & VIDEO REVIEW HUB LAYER (_alumni.scss)
   ========================================================================== */
.reviews-hero-text-only {
  /* Using the cinematic slate to match your new theme */
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  padding: 8rem 1.5rem 6rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  /* Ambient radial glow behind the text for a premium 3D feel */
}
.reviews-hero-text-only::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(197, 160, 89, 0.12) 0%, rgba(197, 160, 89, 0) 60%);
  border-radius: 50%;
  pointer-events: none;
}

.reviews-hero-content {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1; /* Keeps text above the ambient glow */
}

/* --- New Sleek Eyebrow Pill --- */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(197, 160, 89, 0.1);
  color: #D4AF37;
  border: 1px solid rgba(197, 160, 89, 0.25);
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 2rem;
}

/* --- Typography Upgrades --- */
.reviews-hero-text-only h1 {
  font-family: "Playfair Display", serif;
  color: #FFFFFF;
  font-size: 3rem;
  margin-bottom: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
@media (min-width: 768px) {
  .reviews-hero-text-only h1 {
    font-size: 4rem; /* Scales up beautifully on desktop */
  }
}

.reviews-hero-content .reviews-lead-p {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #94A3B8; /* Soft slate gray for breathability */
  margin-bottom: 3rem;
  font-weight: 400;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Glassmorphic Trust Badges --- */
.hero-trust-badges {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-trust-badges .trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.05); /* Frosted glass effect */
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.75rem 1.5rem;
  border-radius: 12px; /* Matches the modern curves of your other cards */
  transition: transform 0.3s ease, background 0.3s ease;
}
.hero-trust-badges .trust-badge i {
  color: #D4AF37;
  font-size: 1.15rem;
}
.hero-trust-badges .trust-badge:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.reviews-grid-section {
  padding: 6rem 0;
  background-color: #FAFAF9;
}

.alumni-stories-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .alumni-stories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .alumni-stories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.alumni-story-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 20px; /* Softer, more modern corners */
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(15, 32, 55, 0.05); /* Softer, more elegant shadow */
  border: 1px solid #F1F5F9;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.alumni-story-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(15, 32, 55, 0.1);
  border-color: rgba(197, 160, 89, 0.3);
}
.alumni-story-card:hover .story-image-blur {
  transform: scale(1.05);
}
.alumni-story-card:hover .story-play-hub {
  background: #D4AF37;
  transform: scale(1.1);
  box-shadow: 0 10px 25px rgba(197, 160, 89, 0.4);
}
.alumni-story-card:hover .story-play-hub i {
  color: #FFFFFF;
}
.alumni-story-card:hover .action-icon i {
  transform: translateX(4px);
  color: #D4AF37;
}

/* --- Thumbnail Styling --- */
.story-thumbnail-container {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  background: #1B365D;
}

.story-image-blur {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.thumbnail-dark-glass-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(15, 32, 55, 0.1) 0%, rgba(15, 32, 55, 0.5) 100%);
  z-index: 1;
}

.story-play-hub {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 3;
  transition: all 0.3s ease;
}
.story-play-hub i {
  color: #1B365D;
  font-size: 1.5rem;
  margin-left: 4px;
  line-height: 1;
  transition: color 0.3s ease;
}

/* --- Editorial Content Styling --- */
.alumni-story-content {
  padding: 2.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.programme-tag-caps {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #D4AF37;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1.25rem;
}

.alumni-video-quote {
  /* Restored your original typography */
  font-family: "Lato", sans-serif; /* Back to your standard sans-serif */
  font-size: 1rem; /* Back to original size */
  font-style: italic; /* Restored italics */
  color: #333333; /* Restored original dark gray */
  /* Kept the new layout structure */
  line-height: 1.6;
  margin: 0 0 2rem 0;
  flex-grow: 1;
  position: relative;
  z-index: 1;
}

/* --- Structured Footer Styling --- */
.alumni-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 1.5rem;
  border-top: 1px solid #E2E8F0; /* Crisp divider line */
}

.student-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.alumni-student-name {
  /* Restored your original typography */
  font-size: 0.95rem; /* Back to original size */
  font-weight: 700; /* Back to original weight */
  letter-spacing: 0.25px; /* Restored original letter spacing */
  color: #1B365D;
  margin: 0;
}

.alumni-result-text {
  font-size: 0.85rem;
  color: #64748B; /* Soft slate gray */
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.alumni-result-text i {
  color: #D4AF37;
  font-size: 1rem;
}

.action-icon i {
  font-size: 1.25rem;
  color: #94A3B8;
  transition: all 0.3s ease;
}

/* ==========================================================================
   PHILOSOPHY, BIOGRAPHY & TEAM DIRECTORY STYLESHEET (_about.scss)
   ========================================================================== */
.eyebrow-text-gold {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #D4AF37;
  font-weight: 700;
  display: block;
  margin-bottom: 0.75rem;
}

.eyebrow-text-navy {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #1B365D;
  font-weight: 700;
  display: block;
  margin-bottom: 0.75rem;
}

.about-philosophy-hero {
  background: linear-gradient(135deg, #0F2027 0%, #1B365D 100%);
  padding: 8rem 0 6rem 0; /* Slightly increased padding for premium feel */
  color: #FFFFFF;
  text-align: center; /* Centers the content */
}
.about-philosophy-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: 2.8rem;
  margin-bottom: 1.5rem;
  color: #FFFFFF;
}
@media (min-width: 768px) {
  .about-philosophy-hero h1 {
    font-size: 3.5rem; /* Larger font for impact since there is no video */
  }
}

.philosophy-hero-content {
  max-width: 850px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.philosophy-lead-p {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #FFFFFF;
  margin-bottom: 1.25rem;
  font-weight: 400;
}

.philosophy-lead-sub {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 2.5rem;
}

.btn-gold-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  background-color: #C5A059;
  color: #1B365D;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-family: "Lato", sans-serif;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  border: 2px solid #C5A059;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.btn-gold-action:hover {
  background-color: #EAC351;
  border-color: #EAC351;
  color: #1B365D;
  transform: translateY(-2px);
  text-decoration: none;
}

.stats-strip-clean {
  background: #F9F7F2;
  padding: 2.5rem 0;
  border-bottom: 1px solid #EAEAE8;
}

.stats-grid-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}
@media (min-width: 768px) {
  .stats-grid-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-box-value {
  font-size: 2.25rem;
  font-weight: 700;
  color: #1B365D;
  display: block;
}

.stat-box-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: #666666;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-top: 4px;
  display: block;
}

.founder-bio-section {
  padding: 6rem 0;
  background: #FFFFFF;
}

.founder-grid-matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
@media (min-width: 992px) {
  .founder-grid-matrix {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

.portrait-wrapper-box {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  border: 1px solid #eeeeee;
}
.portrait-wrapper-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-content-holder h2 {
  font-family: "Playfair Display", serif;
  font-size: 2.25rem;
  color: #1B365D;
  margin-bottom: 1.5rem;
}

.founder-biography-markdown p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #444444;
  margin-bottom: 1.25rem;
}

.founder-credentials-subgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  /* Increased the top margin to create a clean visual break from the photo/bio above */
  margin-top: 4.5rem;
  background: #F9F7F2;
  /* Increased padding slightly since the box is now much wider */
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid #EAEAE8;
}
@media (min-width: 768px) {
  .founder-credentials-subgrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.subgrid-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.subgrid-card i {
  color: #D4AF37;
  font-size: 1.25rem;
}
.subgrid-card h4 {
  font-size: 0.95rem;
  color: #1B365D;
  margin: 0 0 2px 0;
  font-weight: 700;
}
.subgrid-card p {
  font-size: 0.8rem;
  color: #666666;
  margin: 0;
  line-height: 1.4;
}

.team-standards-section {
  background: #0F1E36;
  color: #FFFFFF;
  padding: 6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.team-section-header {
  max-width: 800px;
  margin: 0 auto 4rem auto;
  text-align: center;
}
.team-section-header h2 {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  color: #FFFFFF;
  margin: 0.5rem 0 1.5rem 0;
}

.team-section-p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.tutor-vetting-panel {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 2rem;
  border-radius: 12px;
}
.tutor-vetting-panel h3 {
  font-size: 1rem;
  text-transform: uppercase;
  color: #D4AF37;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 1.5rem;
}

.vetting-checklist {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.check-item-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.check-item-row i {
  color: #3B6E4C;
  font-size: 1.1rem;
}
.check-item-row p {
  margin: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
}

.timeline-container-block {
  max-width: 1000px;
  margin: 5rem auto 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 3rem;
}

.timeline-block-title {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin-bottom: 3rem;
}

.timeline-horizontal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .timeline-horizontal-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
  }
}

.timeline-node {
  position: relative;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 1rem;
  border-radius: 8px;
}

.node-year {
  font-size: 1.2rem;
  font-weight: 700;
  color: #D4AF37;
  display: block;
  margin-bottom: 4px;
}

.node-title {
  font-size: 0.95rem;
  color: #FFFFFF;
  margin: 0 0 6px 0;
  font-weight: 600;
}

.node-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  line-height: 1.4;
}

.team-profiles-section {
  padding: 6rem 0;
  background-color: #FAFAF9;
  border-bottom: 1px solid #EFEFEF;
}

.profiles-section-header {
  max-width: 700px;
  margin: 0 auto 4.5rem auto;
  text-align: center;
}
.profiles-section-header h2 {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  color: #1B365D;
  margin: 0.5rem 0 1rem 0;
}

.profiles-subtitle-p {
  font-size: 1.1rem;
  color: #555555;
  line-height: 1.6;
}

.team-profiles-matrix-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .team-profiles-matrix-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .team-profiles-matrix-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Team Member Cards --- */
.team-member-card {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #EEEEEE;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.team-member-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 20px 40px rgba(15, 32, 55, 0.12);
}

/* NEW: Cinematic Navy Header */
.member-card-header {
  background: linear-gradient(135deg, #0F1E36 0%, #1B365D 100%);
  padding: 2rem;
  border-bottom: 3px solid #D4AF37;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}
.member-card-header h3 {
  font-family: "Playfair Display", serif;
  color: #FFFFFF; /* Stands out brilliantly against the navy */
  font-size: 1.6rem;
  margin: 0;
  font-weight: 700;
}

/* NEW: Clean Text Body */
.member-card-body {
  padding: 1.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Updated Tags for Dark Background */
.tag-premium-gold {
  background: rgba(212, 175, 55, 0.95);
  color: #1B365D;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.tag-premium-glass {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tag-premium-glass i {
  color: #D4AF37;
}

.member-bio-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #555555;
  margin: 0 0 2rem 0;
  flex-grow: 1;
}

.member-pill-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  border-top: 1px solid #F5F5F5;
  padding-top: 1.25rem;
}

.credential-micro-pill {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1B365D;
  background: rgba(15, 30, 54, 0.05);
  padding: 5px 14px;
  border-radius: 50px;
  letter-spacing: 0.5px;
}

.about-final-cta-strip {
  background: #F9F7F2;
  /* Reduced bottom padding from 6rem down to 2rem to hug the contact form */
  padding: 6rem 0 2rem 0;
  border-bottom: 1px solid #EAEAE8;
}

.text-center-box {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.text-center-box h2 {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  color: #1B365D;
  margin: 0.5rem 0 1.5rem 0;
}

.cta-strip-paragraph {
  font-size: 1.15rem;
  color: #444444;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

.guarantee-badges-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.guarantee-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(27, 54, 93, 0.05);
  border: 1px solid rgba(27, 54, 93, 0.05);
  color: #1B365D;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 18px;
  border-radius: 50px;
}
.guarantee-badge-item i {
  color: #3B6E4C;
  font-size: 1rem;
}

/* ==========================================================================
   INSIGHTS ARCHIVE, BLOG MATRIX & EDITORIAL SYSTEM (_insights.scss)
   ========================================================================== */
.insights-hero {
  background: linear-gradient(135deg, #0F2027 0%, #1B365D 100%);
  padding: 6rem 0 5rem 0;
}
.insights-hero h1 {
  font-family: "Playfair Display", serif;
  color: #FFFFFF;
  font-size: 3rem;
  margin: 0.5rem 0 1rem 0;
}

.insights-subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.15rem;
  max-width: 650px;
  line-height: 1.5;
}

.insights-grid-section {
  padding: 5rem 0;
  background-color: #FAFAFA;
}

.container-reading-width {
  max-width: 720px !important;
  margin: 0 auto;
}

.insight-category-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #D4AF37;
  margin-bottom: 1rem;
}

.featured-insight-wrapper {
  margin-bottom: 4rem;
}

.featured-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #EFEFEF;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.featured-card .featured-thumb-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-card .featured-content-box h2 {
  font-family: "Playfair Display", serif;
  color: #1B365D;
  font-size: 2rem;
  margin: 0 0 1rem 0;
  line-height: 1.2;
}
.featured-card .featured-content-box p {
  color: #4A5568;
  line-height: 1.6;
  margin-bottom: 2rem;
  font-size: 1.05rem;
}
.featured-card .read-link-action {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1B365D;
  transition: all 0.2s ease-in-out;
}
.featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(27, 54, 93, 0.04);
  border-color: rgba(197, 160, 89, 0.2);
}
.featured-card:hover .read-link-action {
  color: #D4AF37;
}
@media (min-width: 768px) {
  .featured-card {
    flex-direction: row;
    aspect-ratio: 21/9;
  }
  .featured-card .featured-thumb-box,
  .featured-card .featured-content-box {
    width: 50%;
  }
  .featured-card .featured-thumb-box {
    height: 100%;
  }
  .featured-card .featured-content-box {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.insight-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #F5F5F5;
  padding-top: 1.25rem;
  margin-top: auto;
}

.read-time {
  font-size: 0.85rem;
  color: #888888;
  font-weight: 500;
}

.insights-matrix-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .insights-matrix-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .insights-matrix-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.matrix-insight-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #EFEFEF;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.matrix-insight-card .matrix-content-box {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.matrix-insight-card .matrix-content-box h3 {
  font-family: "Playfair Display", serif;
  color: #1B365D;
  font-size: 1.35rem;
  margin: 0 0 0.75rem 0;
  line-height: 1.3;
}
.matrix-insight-card .matrix-content-box p {
  color: #666666;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.matrix-insight-card .matrix-action-arrow i {
  color: #1B365D;
  font-size: 1.1rem;
  transition: all 0.2s ease-in-out;
}
.matrix-insight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  border-color: rgba(197, 160, 89, 0.25);
}
.matrix-insight-card:hover .matrix-thumb-box img {
  transform: scale(1.04);
}
.matrix-insight-card:hover .matrix-action-arrow i {
  transform: translateX(4px);
  color: #D4AF37;
}

.matrix-thumb-box {
  width: 100%;
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
}
.matrix-thumb-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.matrix-category-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: #1B365D;
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 4px;
}

.single-insight-wrapper {
  background-color: #FFFFFF;
  padding: 5rem 0 7rem 0;
}

.back-to-insights-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #D4AF37;
  text-decoration: none;
  margin-bottom: 2.5rem;
}

.insight-article-header h1 {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  color: #1B365D;
  line-height: 1.15;
  margin: 0.75rem 0 1.5rem 0;
}
@media (min-width: 768px) {
  .insight-article-header h1 {
    font-size: 3.5rem;
  }
}

.article-standfirst {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #4A5568;
  font-weight: 300;
  margin-bottom: 3.5rem;
  border-left: 3px solid #D4AF37;
  padding-left: 1.5rem;
}

.header-meta-pill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #888888;
  font-weight: 500;
}

.category-pill {
  color: #1B365D;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.markdown-editorial-entry p {
  font-size: 1.1rem;
  line-height: 1.75;
  color: #2C2C2C;
  margin-bottom: 1.75rem;
  font-weight: 400;
}
.markdown-editorial-entry strong {
  color: #1B365D;
  font-weight: 700;
}
.markdown-editorial-entry h2 {
  font-family: "Playfair Display", serif;
  color: #1B365D;
  font-size: 1.85rem;
  margin: 3rem 0 1.25rem 0;
  font-weight: 700;
}
.markdown-editorial-entry h3 {
  font-size: 1.3rem;
  color: #1B365D;
  margin: 2rem 0 1rem 0;
  font-weight: 600;
}
.markdown-editorial-entry ul, .markdown-editorial-entry ol {
  margin-bottom: 2rem;
  padding-left: 1.5rem;
}
.markdown-editorial-entry li {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #2C2C2C;
  margin-bottom: 0.75rem;
}

.insight-article-footer {
  margin-top: 6rem;
  border-top: 1px solid #EFEFEF;
  padding-top: 4rem;
}

.routing-footer-card {
  background: #0F1E36;
  color: #FFFFFF;
  border-radius: 16px;
  padding: 3rem;
  text-align: center;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}
.routing-footer-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.85rem;
  color: #FFFFFF;
  margin: 0.5rem 0 1rem 0;
}
.routing-footer-card p {
  color: rgba(255, 255, 255, 0.7);
  max-width: 550px;
  margin: 0 auto 2rem auto;
  line-height: 1.6;
  font-size: 1.05rem;
}

.routing-eyebrow {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  display: block;
}
.routing-eyebrow.gold-text {
  color: #D4AF37;
}

.btn-gold-routing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  background-color: #C5A059;
  color: #1B365D;
  padding: 1rem 2.25rem;
  border-radius: 50px;
  font-family: "Lato", sans-serif;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  border: 2px solid #C5A059;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.btn-gold-routing:hover {
  background-color: #EAC351;
  border-color: #EAC351;
  color: #1B365D;
  transform: translateY(-2px);
  text-decoration: none;
}

/* ==========================================================================
   PREMIUM MONTE CARLO SIMULATOR STYLES
   ========================================================================== */
/* --- 1. Layout & Base Wrappers --- */
.simulator-wrapper {
  background-color: #F8F9FB;
  padding: 5rem 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #0F172A;
}

.simulator-container {
  max-width: 950px;
  margin: 1rem auto 0;
}

/* --- 2. Typography & Headers --- */
.simulator-header {
  text-align: center;
  margin-bottom: 2rem;
}

.simulator-header h1 {
  font-family: "Playfair Display", serif;
  font-size: 2.75rem;
  color: #0F172A;
  margin-bottom: 1rem;
  font-weight: 700;
}

.simulator-header p {
  font-size: 1.1rem;
  color: #4A5568;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* --- 3. Segmented Tier Toggle --- */
.tier-toggle-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}

.tier-toggle {
  display: inline-flex;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 50px;
  padding: 6px;
  box-shadow: 0 4px 15px rgba(14, 34, 69, 0.05);
}

.tier-btn {
  background: transparent;
  border: none;
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #4A5568;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tier-btn.active {
  background: #0F172A;
  color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(14, 34, 69, 0.2);
}

.tier-btn:not(.active):hover {
  color: #0F172A;
  background: rgba(14, 34, 69, 0.05);
}

/* --- 4. Main Calculator Card & Inputs --- */
.simulator-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 10px 40px rgba(14, 34, 69, 0.06);
}

.input-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.input-group label {
  display: block;
  font-weight: 700;
  font-size: 0.7rem;
  margin-bottom: 0.5rem;
  color: #0F172A;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}

.input-group input {
  width: 100%;
  padding: 14px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 1rem;
  color: #2D3748;
  background-color: #F8F9FB;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.input-group input:focus {
  outline: none;
  border-color: #D4AF37;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

/* --- 5. Call to Action Button --- */
.btn-simulate {
  background: #0F172A;
  color: #FFFFFF;
  padding: 16px 32px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(14, 34, 69, 0.15);
}

.btn-simulate:hover {
  background: #D4AF37;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.25);
}

/* --- 6. Results Layout & Chart --- */
.results-wrapper {
  margin-top: 3rem;
  display: none;
  animation: fadeIn 0.5s ease;
}

.chart-container {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.probabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* --- 7. Probability Stat Cards --- */
.stat-card {
  background: linear-gradient(135deg, #F8F9FB 0%, #FFFFFF 100%);
  border: 1px solid #E2E8F0;
  padding: 1.5rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: #D4AF37;
}

.stat-grade {
  font-size: 1rem;
  font-weight: 700;
  color: #4A5568;
  margin-bottom: 0.5rem;
}

.stat-prob {
  font-size: 2rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1;
}

/* --- 8. Conditional Card States (Colors & Highlights) --- */
.stat-prob.high-prob {
  color: #2E7D32; /* Safe Green */
}

.stat-grade.fail-grade,
.stat-prob.fail-prob {
  color: #E53E3E; /* Alert Red */
}

/* "Most Likely" Grade Overrides */
.stat-card.most-likely-card {
  border-color: #D4AF37;
  background: linear-gradient(135deg, #FFFDF5 0%, #FFFFFF 100%);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.15);
  transform: translateY(-2px);
}

.stat-prob.most-likely-prob {
  color: #D4AF37;
}

/* "Most Likely" Fail Overrides */
.stat-card.most-likely-fail-card {
  border-color: #E53E3E;
  background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
  box-shadow: 0 8px 20px rgba(229, 62, 62, 0.15);
  transform: translateY(-2px);
}

/* "Most Likely" Pill Badge */
.most-likely-badge {
  background: #D4AF37;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 20px;
  margin-top: 12px;
}

.stat-card.most-likely-fail-card .most-likely-badge {
  background: #E53E3E;
}

/* --- 9. Animations --- */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* --- 10. Dynamic Marketing CTA --- */
.premium-cta-card {
  background: linear-gradient(135deg, #0F172A 0%, #1A365D 100%);
  border-radius: 16px;
  padding: 3rem 2rem;
  text-align: center;
  color: #FFFFFF;
  box-shadow: 0 10px 40px rgba(14, 34, 69, 0.15);
  margin-top: 2rem;
  animation: fadeIn 0.6s ease;
}

.premium-cta-card.alert-cta {
  background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
  border: 1px solid #E53E3E;
  color: #0F172A;
}

.premium-cta-card.elite-cta {
  background: linear-gradient(135deg, #D4AF37 0%, #B8962E 100%);
}

.premium-cta-title {
  font-family: "Playfair Display", serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.premium-cta-desc {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 auto 2rem auto;
  max-width: 600px;
  opacity: 0.9;
}

.alert-cta .premium-cta-desc {
  color: #4A5568;
}

.cta-action-btn {
  display: inline-block;
  background: #FFFFFF;
  color: #0F172A;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 14px 36px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.cta-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.alert-cta .cta-action-btn {
  background: #E53E3E;
  color: #FFFFFF;
}

/* --- 11. Mobile Responsiveness & Spacing Fixes --- */
@media (max-width: 768px) {
  /* Increased top padding to 6rem to clear the fixed navigation bar */
  .simulator-wrapper {
    padding: 6rem 1rem 2.5rem 1rem;
  }
  /* Scale down the main heading to prevent awkward wrapping */
  .simulator-header h1 {
    font-size: 2rem;
  }
  /* Tighten up the space below the toggle buttons */
  .tier-toggle-wrapper {
    margin-bottom: 2rem;
  }
  /* Reduce inner padding of the main calculator box */
  .simulator-card {
    padding: 1.5rem;
  }
  /* Decrease the gap between the text inputs */
  .input-grid {
    gap: 1rem;
  }
  /* Reduce padding inside the chart border */
  .chart-container {
    padding: 1rem;
  }
  /* Shrink the CTA padding and title size for better mobile reading */
  .premium-cta-card {
    padding: 2rem 1.25rem;
  }
  .premium-cta-title {
    font-size: 1.5rem;
  }
}
/* ==========================================================================
   GCSE PREDICTED TOPICS PAGE (_predicted-topics.scss)
   ========================================================================== */
.predicted-topics-section {
  background-color: #FFFFFF;
  padding: 6rem 1.5rem;
  font-family: "Lato", sans-serif;
  /* --- Page Header --- */
  /* --- Tab Controls --- */
  /* --- Tab Panes --- */
  /* --- Sleek List Rows --- */
  /* --- Row Probability Module --- */
  /* --- Mobile Adjustments --- */
}
.predicted-topics-section .topics-page-header {
  text-align: center;
  margin-bottom: 4rem;
}
.predicted-topics-section .topics-page-header .gold-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #C5A059;
  margin-bottom: 1rem;
}
.predicted-topics-section .topics-page-header h1 {
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  color: #1B365D;
  margin-bottom: 1.25rem;
}
.predicted-topics-section .topics-page-header p {
  font-size: 1.15rem;
  color: #4A5568;
  max-width: 700px;
  margin: 0 auto;
}
.predicted-topics-section .topics-tab-container {
  max-width: 900px;
  margin: 0 auto;
}
.predicted-topics-section .tab-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.predicted-topics-section .tab-btn {
  background: #F8F9FB;
  border: 1px solid #E2E8F0;
  color: #4A5568;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.predicted-topics-section .tab-btn:hover {
  background: #EDF2F7;
}
.predicted-topics-section .tab-btn.active {
  background: #1B365D;
  color: #FFFFFF;
  border-color: #1B365D;
  box-shadow: 0 4px 10px rgba(14, 34, 69, 0.15);
}
.predicted-topics-section .tab-pane {
  display: none;
  animation: fadeIn 0.4s ease;
}
.predicted-topics-section .tab-pane.active {
  display: block;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.predicted-topics-section .sleek-topic-list {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.predicted-topics-section .sleek-topic-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #E2E8F0;
  transition: background 0.2s ease;
}
.predicted-topics-section .sleek-topic-row:last-child {
  border-bottom: none;
}
.predicted-topics-section .sleek-topic-row:hover {
  background: #FDFDFD;
}
.predicted-topics-section .row-main-info {
  flex: 1;
  padding-right: 2rem;
}
.predicted-topics-section .row-main-info .row-title {
  font-size: 1.15rem;
  color: #1B365D;
  margin-bottom: 0.5rem;
}
.predicted-topics-section .row-main-info .row-meta {
  font-size: 0.9rem;
  color: #718096;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.predicted-topics-section .row-main-info .row-meta strong {
  color: #4A5568;
}
.predicted-topics-section .row-main-info .row-meta .meta-divider {
  color: #CBD5E0;
}
.predicted-topics-section .row-probability {
  width: 200px;
  flex-shrink: 0;
}
.predicted-topics-section .row-probability .prob-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0.4rem;
}
.predicted-topics-section .row-probability .prob-header .prob-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #A0AEC0;
}
.predicted-topics-section .row-probability .prob-header .prob-value {
  font-size: 1rem;
  font-weight: 800;
  color: #D4AF37;
}
.predicted-topics-section .row-probability .mini-prob-track {
  width: 100%;
  height: 6px;
  background: #EDF2F7;
  border-radius: 10px;
  overflow: hidden;
}
.predicted-topics-section .row-probability .mini-prob-track .mini-prob-fill {
  height: 100%;
  background: linear-gradient(90deg, #C5A059 0%, #D4AF37 100%);
  border-radius: 10px;
}
@media (max-width: 768px) {
  .predicted-topics-section {
    padding: 4rem 1rem;
  }
  .predicted-topics-section .sleek-topic-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }
  .predicted-topics-section .row-main-info {
    padding-right: 0;
    margin-bottom: 1.5rem;
  }
  .predicted-topics-section .row-probability {
    width: 100%;
  }
}

/* ==========================================================================
   GRAMMAR SCHOOL DIRECTORY - PREMIUM ROW LAYOUT (_grammar-directory.scss)
   ========================================================================== */
.directory-section {
  background-color: #F9F7F2;
  padding: 5rem 1.5rem;
  font-family: "Lato", sans-serif;
  /* --- Headers --- */
  /* --- Search & Filter Bar --- */
  /* --- Shared school row layout --- */
  /* --- No Results State --- */
}
.directory-section .directory-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.directory-section .directory-header .gold-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #C5A059;
  margin-bottom: 1rem;
}
.directory-section .directory-header h1 {
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  color: #1B365D;
  margin-bottom: 1rem;
}
.directory-section .directory-header p {
  font-size: 1.1rem;
  color: #4A5568;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}
.directory-section .filter-bar-container {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 12px 25px rgba(27, 54, 93, 0.04);
  border: 1px solid #EAEAE8;
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.directory-section .filter-bar-container .search-input-group {
  position: relative;
  width: 100%;
}
.directory-section .filter-bar-container .search-input-group i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #4A5568;
  font-size: 1.1rem;
}
.directory-section .filter-bar-container .search-input-group input {
  width: 100%;
  padding: 14px 16px 14px 50px;
  border: 2px solid #CBD5E1;
  border-radius: 8px;
  font-size: 1.05rem;
  font-family: "Lato", sans-serif;
  color: #1B365D;
  transition: all 0.2s ease-in-out;
  outline: none;
  background-color: #FFFFFF;
}
.directory-section .filter-bar-container .search-input-group input::placeholder {
  color: #94A3B8;
}
.directory-section .filter-bar-container .search-input-group input:focus {
  border-color: #C5A059;
  box-shadow: inset 0 0 0 1px #C5A059;
}
.directory-section .filter-bar-container .dropdown-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.directory-section .filter-bar-container .dropdown-group select {
  flex: 1 1 200px;
  padding: 14px 16px;
  border: 2px solid #CBD5E1;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: "Lato", sans-serif;
  background-color: #F1F5F9;
  color: #1B365D;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease-in-out;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231B365D' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
}
.directory-section .filter-bar-container .dropdown-group select:focus {
  border-color: #C5A059;
}
.directory-section .filter-bar-container .dropdown-group .postcode-group {
  display: flex;
  flex: 1 1 250px;
  position: relative;
}
.directory-section .filter-bar-container .dropdown-group .postcode-group input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #CBD5E1;
  border-right: none;
  border-radius: 8px 0 0 8px;
  font-size: 0.95rem;
  font-family: "Lato", sans-serif;
  outline: none;
  transition: all 0.2s ease-in-out;
  background-color: #F1F5F9;
}
.directory-section .filter-bar-container .dropdown-group .postcode-group input::placeholder {
  color: #94A3B8;
}
.directory-section .filter-bar-container .dropdown-group .postcode-group input:focus {
  background-color: #FFFFFF;
  border-color: #C5A059;
  box-shadow: inset 0 1px 0 0 #C5A059, inset 0 -1px 0 0 #C5A059, inset 1px 0 0 0 #C5A059;
}
.directory-section .filter-bar-container .dropdown-group .postcode-group .btn-postcode {
  padding: 0 1.25rem;
  background-color: #FFFFFF;
  color: #1B365D;
  border: 2px solid #CBD5E1;
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.directory-section .filter-bar-container .dropdown-group .postcode-group .btn-postcode:hover {
  background-color: #F1F5F9;
}
.directory-section .filter-bar-container .dropdown-group .postcode-group .btn-postcode.active {
  background-color: #1B365D;
  color: #FFFFFF;
  border-color: #1B365D;
}
.directory-section .school-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.directory-section .school-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #EAEAE8;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease-in-out;
  gap: 2rem;
}
.directory-section .school-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(27, 54, 93, 0.04);
  border-color: rgba(197, 160, 89, 0.3);
}
.directory-section .school-card .card-header {
  flex: 0 0 38%;
  border-right: 1px solid #EAEAE8;
  padding-right: 2rem;
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.directory-section .school-card .card-header .school-name {
  font-size: 1.15rem;
  font-family: "Playfair Display", serif;
  color: #1B365D;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.directory-section .school-card .card-header .location-badge {
  font-size: 0.85rem;
  color: #4A5568;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.directory-section .school-card .card-header .location-badge i {
  color: #C5A059;
  margin-top: 2px;
}
.directory-section .school-card .card-header .distance-badge {
  margin-top: 0.75rem;
  display: inline-block;
  background-color: #FFF9EB;
  color: #B48600;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}
.directory-section .school-card .card-header .distance-badge i {
  margin-right: 4px;
}
.directory-section .school-card .card-body {
  flex: 1;
  display: flex;
  gap: 3rem;
  border-right: 1px solid #EAEAE8;
  padding-right: 2rem;
  margin: 0;
}
.directory-section .school-card .card-body .school-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.directory-section .school-card .card-body .school-meta .meta-label {
  color: #4A5568;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  margin-bottom: 6px;
}
.directory-section .school-card .card-body .school-meta .meta-value {
  color: #1B365D;
  font-weight: 700;
  font-size: 0.95rem;
}
.directory-section .school-card .card-footer {
  flex: 0 0 170px;
}
.directory-section .school-card .card-footer .btn-outline-gold {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 0;
  border: 2px solid #C5A059;
  color: #1B365D;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
  background: transparent;
  text-decoration: none;
}
.directory-section .school-card .card-footer .btn-outline-gold:hover {
  background-color: #C5A059;
  color: #FFFFFF;
}
.directory-section .school-card .card-footer .no-link {
  display: block;
  text-align: center;
  color: #94A3B8;
  font-size: 0.85rem;
  padding: 12px 0;
  background: #F1F5F9;
  border-radius: 8px;
  font-weight: 600;
}
@media (max-width: 992px) {
  .directory-section .school-card {
    flex-direction: column;
    align-items: stretch;
    padding: 1.75rem;
    gap: 1.5rem;
  }
  .directory-section .school-card .card-header {
    flex: auto;
    border-right: none;
    border-bottom: 1px solid #EAEAE8;
    padding-right: 0;
    padding-bottom: 1.5rem;
  }
  .directory-section .school-card .card-body {
    flex: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 2rem;
    border-right: none;
    padding-right: 0;
  }
  .directory-section .school-card .card-footer {
    flex: auto;
  }
}
@media (max-width: 768px) {
  .directory-section .school-card .card-body {
    flex-direction: column;
    gap: 1.25rem;
  }
  .directory-section .school-card .card-body .school-meta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .directory-section .school-card .card-body .school-meta .meta-label {
    margin-bottom: 0;
  }
  .directory-section .school-card .card-body .school-meta .meta-value {
    text-align: right;
  }
}
.directory-section .no-results-state {
  text-align: center;
  padding: 5rem 2rem;
  background: #FAFAF9;
  border-radius: 16px;
  border: 2px solid #CBD5E1;
  border-style: dashed;
}
.directory-section .no-results-state i {
  font-size: 2.5rem;
  color: #CBD5E1;
  margin-bottom: 1rem;
  display: inline-block;
}
.directory-section .no-results-state h3 {
  font-size: 1.35rem;
  color: #1B365D;
  margin-bottom: 0.5rem;
}
.directory-section .no-results-state p {
  color: #4A5568;
  font-size: 1rem;
}
@media (max-width: 768px) {
  .directory-section {
    padding: 3rem 1rem;
  }
  .directory-section .filter-bar-container {
    padding: 1.25rem;
  }
  .directory-section .filter-bar-container .dropdown-group {
    flex-direction: column;
  }
  .directory-section .filter-bar-container .dropdown-group select, .directory-section .filter-bar-container .dropdown-group .postcode-group {
    width: 100%;
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   UNIVERSITY ENTRANCE EXAM DIRECTORY - 3-ROW RECTANGULAR LAYOUT (_entrance-exams.scss)
   ========================================================================== */
.sleek-directory-section {
  background-color: #F8FAFC;
  padding: 8rem 1.5rem 4rem 1.5rem; /* Bumper to clear fixed navigation */
  font-family: "Lato", sans-serif;
  color: #0F172A;
  /* --- Header --- */
  /* --- Modern Filter Toolbar --- */
  /* --- 3-Row Rectangular Layout --- */
  /* --- Empty State --- */
  /* ==========================================================================
     MOBILE RESPONSIVENESS UPGRADES
     ========================================================================== */
}
.sleek-directory-section .directory-header {
  text-align: center;
  margin-bottom: 3rem;
}
.sleek-directory-section .directory-header h1 {
  font-family: "Playfair Display", serif;
  font-size: 2.75rem;
  color: #1B365D;
  margin-bottom: 0.75rem;
}
.sleek-directory-section .directory-header p {
  font-size: 1.1rem;
  color: #64748B;
  max-width: 600px;
  margin: 0 auto;
}
.sleek-directory-section .filter-toolbar {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  margin-bottom: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.sleek-directory-section .filter-toolbar .search-box {
  flex: 1 1 300px;
  position: relative;
}
.sleek-directory-section .filter-toolbar .search-box i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
}
.sleek-directory-section .filter-toolbar .search-box input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  background: #F1F5F9;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 1rem;
  color: #0F172A;
  transition: all 0.2s ease;
  outline: none;
}
.sleek-directory-section .filter-toolbar .search-box input:focus {
  background: #FFFFFF;
  border-color: #C5A059;
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2);
}
.sleek-directory-section .filter-toolbar .filter-controls {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 2 1 auto;
}
.sleek-directory-section .filter-toolbar .filter-controls select {
  flex: 1 1 160px;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  background-color: #F1F5F9;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  transition: all 0.2s ease;
}
.sleek-directory-section .filter-toolbar .filter-controls select:focus, .sleek-directory-section .filter-toolbar .filter-controls select:hover {
  background-color: #E2E8F0;
}
.sleek-directory-section .filter-toolbar .filter-controls .btn-clear {
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  color: #64748B;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}
.sleek-directory-section .filter-toolbar .filter-controls .btn-clear:hover {
  background: #FEF2F2;
  color: #DC2626;
  border-color: #FECACA;
}
.sleek-directory-section .sleek-course-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.sleek-directory-section .course-card-row {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* ROW 1: Header */
  /* ROW 2: Middle Box */
  /* ROW 3: Footer */
}
.sleek-directory-section .course-card-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: rgba(197, 160, 89, 0.4);
}
.sleek-directory-section .course-card-row .card-row-header {
  padding: 1.5rem 2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.sleek-directory-section .course-card-row .card-row-header .header-left-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sleek-directory-section .course-card-row .card-row-header .tags-row {
  display: flex;
  gap: 0.5rem;
  margin: 0;
}
.sleek-directory-section .course-card-row .card-row-header .tags-row span {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.sleek-directory-section .course-card-row .card-row-header .tags-row .tag-ucas {
  background: #F1F5F9;
  color: #475569;
  font-family: monospace;
}
.sleek-directory-section .course-card-row .card-row-header .tags-row .tag-duration {
  background: #FFFBEB;
  color: #B45309;
}
.sleek-directory-section .course-card-row .card-row-header .course-title {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  color: #1B365D;
  margin: 0;
  line-height: 1.3;
}
.sleek-directory-section .course-card-row .card-row-header .university-name {
  font-size: 0.95rem;
  color: #64748B;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-align: right;
}
.sleek-directory-section .course-card-row .card-row-header .university-name i {
  color: #C5A059;
}
.sleek-directory-section .course-card-row .card-row-middle {
  padding: 0 2rem;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box {
  background: #F8FAFC;
  border-radius: 12px;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  border: 1px solid #F1F5F9;
  /* Test Column */
  /* Academic Column */
  /* Shared Pill Styles */
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .req-column {
  display: flex;
  flex-direction: column;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .req-column .label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.75px;
  color: #94A3B8;
  margin-bottom: 0.75rem;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .test-col {
  border-right: 1px solid #E2E8F0;
  padding-right: 2rem;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .test-col .col-header {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Aligns items centrally on the cross-axis */
  flex-wrap: wrap; /* Allows wrapping if space is too tight */
  gap: 1rem; /* FIX: Added gap to separate label and status badge */
  margin-bottom: 0.5rem;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .test-col .col-header .label {
  margin-bottom: 0; /* Override the default margin to align with the badge */
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .test-col .col-header .status {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .test-col .col-header .status.red {
  background: #FEE2E2;
  color: #B91C1C;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .test-col .col-header .status.amber {
  background: #FEF3C7;
  color: #B45309;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .test-col .col-header .status.gray {
  background: #E2E8F0;
  color: #475569;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .test-col .test-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1B365D;
  margin-bottom: 0.75rem;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .test-col .sitting-window {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #475569;
  margin-bottom: 1rem;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .test-col .sitting-window i {
  color: #3B82F6;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .test-col .sitting-window strong {
  font-weight: 700;
  color: #334155;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .test-col .sub-papers {
  margin-top: auto;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .test-col .sub-papers .sub-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748B;
  margin-bottom: 0.5rem;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .academic-col .offers {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .academic-col .offers .offer {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .academic-col .offers .offer .offer-type {
  font-size: 0.8rem;
  color: #64748B;
  font-weight: 600;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .academic-col .offers .offer .offer-grade {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1B365D;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .academic-col .required-subjects {
  margin-top: auto;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .academic-col .required-subjects .sub-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748B;
  margin-bottom: 0.5rem;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .pill-group .mini-pill {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #334155;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
}
.sleek-directory-section .course-card-row .card-row-footer {
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.sleek-directory-section .course-card-row .card-row-footer .note-container {
  flex: 1;
}
.sleek-directory-section .course-card-row .card-row-footer .note-container .note-block {
  display: flex;
  gap: 0.75rem;
  background: #EFF6FF;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  align-items: center;
}
.sleek-directory-section .course-card-row .card-row-footer .note-container .note-block i {
  color: #3B82F6;
  font-size: 1.25rem;
  margin-top: 0;
  flex-shrink: 0;
}
.sleek-directory-section .course-card-row .card-row-footer .note-container .note-block p {
  margin: 0;
  font-size: 0.95rem;
  color: #1E3A8A;
  line-height: 1.5;
}
.sleek-directory-section .course-card-row .card-row-footer .action-container {
  flex: 0 0 240px;
}
.sleek-directory-section .course-card-row .card-row-footer .action-container .btn-primary-dark {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem;
  background: #1E293B;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.sleek-directory-section .course-card-row .card-row-footer .action-container .btn-primary-dark:hover {
  background: #0F172A;
}
.sleek-directory-section .course-card-row .card-row-footer .action-container .btn-disabled {
  display: block;
  width: 100%;
  padding: 1rem;
  background: #F1F5F9;
  color: #94A3B8;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
}
.sleek-directory-section .empty-state {
  text-align: center;
  padding: 4rem 1rem;
}
.sleek-directory-section .empty-state i {
  font-size: 2.5rem;
  color: #CBD5E1;
  margin-bottom: 1rem;
  display: inline-block;
}
.sleek-directory-section .empty-state h3 {
  font-size: 1.25rem;
  color: #334155;
  margin-bottom: 0.5rem;
}
.sleek-directory-section .empty-state p {
  color: #64748B;
  font-size: 0.95rem;
}
@media (max-width: 1024px) {
  .sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .test-col {
    border-right: none;
    border-bottom: 1px solid #E2E8F0;
    padding-right: 0;
    padding-bottom: 1.5rem;
  }
  .sleek-directory-section .course-card-row .card-row-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .sleek-directory-section .course-card-row .card-row-footer .action-container {
    flex: auto;
  }
}
@media (max-width: 768px) {
  .sleek-directory-section {
    /* FIX: Reverted to the safe, standard padding without !important overrides */
    /* 1. Fix the Search Box breaking the icon out */
    /* 2. Refine Mobile Typography & Spacing */
  }
  .sleek-directory-section .sleek-directory-section {
    padding-top: 6rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .sleek-directory-section .filter-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .sleek-directory-section .filter-toolbar .search-box {
    width: 100%;
    flex: none;
  }
  .sleek-directory-section .filter-toolbar .filter-controls {
    flex-direction: column;
    width: 100%;
  }
  .sleek-directory-section .filter-toolbar .filter-controls select, .sleek-directory-section .filter-toolbar .filter-controls .btn-clear {
    width: 100%;
    flex: none;
  }
  .sleek-directory-section .course-card-row {
    /* 3. Elevate Info Icon to Top */
  }
  .sleek-directory-section .course-card-row .card-row-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 1.25rem 1rem;
  }
  .sleek-directory-section .course-card-row .card-row-header .header-left-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .sleek-directory-section .course-card-row .card-row-header .course-title {
    font-size: 1.3rem;
  }
  .sleek-directory-section .course-card-row .card-row-header .university-name {
    text-align: left;
    width: 100%;
  }
  .sleek-directory-section .course-card-row .card-row-middle {
    padding: 0 1.25rem;
  }
  .sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box {
    padding: 1.25rem;
    /* Elevate Calendar Icon to Top */
  }
  .sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .test-col .sitting-window {
    align-items: flex-start;
  }
  .sleek-directory-section .course-card-row .card-row-middle .combined-requirements-box .test-col .sitting-window i {
    margin-top: 0.15rem;
  }
  .sleek-directory-section .course-card-row .card-row-footer {
    padding: 1.25rem;
  }
  .sleek-directory-section .course-card-row .card-row-footer .note-container .note-block {
    align-items: flex-start;
  }
  .sleek-directory-section .course-card-row .card-row-footer .note-container .note-block i {
    margin-top: 0.15rem;
  }
}

/* ==========================================================================
   GRAMMAR SCHOOL AREA PAGES (_grammar-area.scss)
   Per-local-authority 11+ guides, plus the area index that links to them
   from the directory hub. Shares its card layout with the directory.
   ========================================================================== */
.area-page {
  background-color: #F9F7F2;
  /* Top padding clears the 75px fixed site header */
  padding: 7rem 1.5rem 5rem;
  font-family: "Lato", sans-serif;
  /* Same premium row cards as the directory hub */
  /* --- Breadcrumb --- */
  /* --- Page header --- */
  /* --- Key facts panel --- */
  /* --- Provider-change notice --- */
  /* --- Notes panel --- */
  /* --- School list heading --- */
  /* --- Verified stamp --- */
  /* --- CTA --- */
  /* --- Nearby areas --- */
}
.area-page .school-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.area-page .school-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #EAEAE8;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease-in-out;
  gap: 2rem;
}
.area-page .school-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(27, 54, 93, 0.04);
  border-color: rgba(197, 160, 89, 0.3);
}
.area-page .school-card .card-header {
  flex: 0 0 38%;
  border-right: 1px solid #EAEAE8;
  padding-right: 2rem;
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.area-page .school-card .card-header .school-name {
  font-size: 1.15rem;
  font-family: "Playfair Display", serif;
  color: #1B365D;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.area-page .school-card .card-header .location-badge {
  font-size: 0.85rem;
  color: #4A5568;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.area-page .school-card .card-header .location-badge i {
  color: #C5A059;
  margin-top: 2px;
}
.area-page .school-card .card-header .distance-badge {
  margin-top: 0.75rem;
  display: inline-block;
  background-color: #FFF9EB;
  color: #B48600;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}
.area-page .school-card .card-header .distance-badge i {
  margin-right: 4px;
}
.area-page .school-card .card-body {
  flex: 1;
  display: flex;
  gap: 3rem;
  border-right: 1px solid #EAEAE8;
  padding-right: 2rem;
  margin: 0;
}
.area-page .school-card .card-body .school-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.area-page .school-card .card-body .school-meta .meta-label {
  color: #4A5568;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  margin-bottom: 6px;
}
.area-page .school-card .card-body .school-meta .meta-value {
  color: #1B365D;
  font-weight: 700;
  font-size: 0.95rem;
}
.area-page .school-card .card-footer {
  flex: 0 0 170px;
}
.area-page .school-card .card-footer .btn-outline-gold {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 0;
  border: 2px solid #C5A059;
  color: #1B365D;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
  background: transparent;
  text-decoration: none;
}
.area-page .school-card .card-footer .btn-outline-gold:hover {
  background-color: #C5A059;
  color: #FFFFFF;
}
.area-page .school-card .card-footer .no-link {
  display: block;
  text-align: center;
  color: #94A3B8;
  font-size: 0.85rem;
  padding: 12px 0;
  background: #F1F5F9;
  border-radius: 8px;
  font-weight: 600;
}
@media (max-width: 992px) {
  .area-page .school-card {
    flex-direction: column;
    align-items: stretch;
    padding: 1.75rem;
    gap: 1.5rem;
  }
  .area-page .school-card .card-header {
    flex: auto;
    border-right: none;
    border-bottom: 1px solid #EAEAE8;
    padding-right: 0;
    padding-bottom: 1.5rem;
  }
  .area-page .school-card .card-body {
    flex: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 2rem;
    border-right: none;
    padding-right: 0;
  }
  .area-page .school-card .card-footer {
    flex: auto;
  }
}
@media (max-width: 768px) {
  .area-page .school-card .card-body {
    flex-direction: column;
    gap: 1.25rem;
  }
  .area-page .school-card .card-body .school-meta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .area-page .school-card .card-body .school-meta .meta-label {
    margin-bottom: 0;
  }
  .area-page .school-card .card-body .school-meta .meta-value {
    text-align: right;
  }
}
.area-page .area-breadcrumb {
  font-size: 0.85rem;
  color: #4A5568;
  margin-bottom: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.area-page .area-breadcrumb a {
  color: #4A5568;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
.area-page .area-breadcrumb a:hover {
  color: #C5A059;
}
.area-page .area-breadcrumb .crumb-sep {
  color: #C5A059;
  opacity: 0.55;
  font-size: 0.7rem;
}
.area-page .area-breadcrumb .crumb-current {
  color: #1B365D;
  font-weight: 700;
}
.area-page .area-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3rem;
}
.area-page .area-header .gold-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #C5A059;
  margin-bottom: 1rem;
}
.area-page .area-header h1 {
  font-family: "Playfair Display", serif;
  font-size: 2.9rem;
  line-height: 1.15;
  color: #1B365D;
  margin-bottom: 1rem;
}
.area-page .area-header .area-intro {
  font-size: 1.1rem;
  color: #4A5568;
  line-height: 1.65;
  margin: 0;
}
.area-page .area-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  background: #FFFFFF;
  border: 1px solid #EAEAE8;
  border-radius: 16px;
  box-shadow: 0 12px 25px rgba(27, 54, 93, 0.04);
  overflow: hidden;
  margin-bottom: 2rem;
}
.area-page .area-fact {
  padding: 1.5rem 1.75rem;
  border-right: 1px solid #EAEAE8;
}
.area-page .area-fact:last-child {
  border-right: none;
}
.area-page .area-fact .fact-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: #4A5568;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.area-page .area-fact .fact-value {
  display: block;
  font-size: 1rem;
  line-height: 1.45;
  color: #1B365D;
  font-weight: 700;
}
.area-page .area-change-notice {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: #FFF9EB;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-left: 4px solid #D4AF37;
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.5rem;
}
.area-page .area-change-notice > i {
  color: #B48600;
  font-size: 1.4rem;
  line-height: 1.2;
  flex-shrink: 0;
}
.area-page .area-change-notice h2 {
  font-family: "Lato", sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  color: #1B365D;
  margin: 0 0 0.4rem;
}
.area-page .area-change-notice p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.65;
  color: #4A5568;
}
.area-page .area-notes {
  background: #FFFFFF;
  border: 1px solid #EAEAE8;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  padding: 2rem 2.25rem;
  margin-bottom: 3.5rem;
}
.area-page .area-notes h2 {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  color: #1B365D;
  margin: 0 0 1.25rem;
}
.area-page .area-notes ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.area-page .area-notes li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 1rem;
  line-height: 1.7;
  color: #4A5568;
  font-size: 0.98rem;
}
.area-page .area-notes li:last-child {
  margin-bottom: 0;
}
.area-page .area-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #C5A059;
  transform: rotate(45deg);
}
.area-page .area-schools-heading {
  font-family: "Playfair Display", serif;
  font-size: 1.9rem;
  color: #1B365D;
  margin: 0 0 0.5rem;
}
.area-page .area-schools-sub {
  color: #4A5568;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.75rem;
}
.area-page .area-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #4A5568;
  background: #FFFFFF;
  border: 1px solid #EAEAE8;
  border-radius: 50px;
  padding: 0.6rem 1.25rem;
  margin-top: 1.75rem;
}
.area-page .area-verified i {
  color: #3B6E4C;
  font-size: 1rem;
}
.area-page .area-cta {
  background: #1B365D;
  border-radius: 16px;
  padding: 3rem 2.5rem;
  margin-top: 3.5rem;
  text-align: center;
}
.area-page .area-cta h2 {
  font-family: "Playfair Display", serif;
  color: #FFFFFF;
  font-size: 1.9rem;
  margin: 0 0 0.85rem;
}
.area-page .area-cta p {
  color: #E0E0E0;
  max-width: 580px;
  margin: 0 auto 1.75rem;
  line-height: 1.7;
  font-size: 1.02rem;
}
.area-page .area-nearby {
  margin-top: 3.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid #EAEAE8;
}
.area-page .area-nearby h2 {
  font-family: "Playfair Display", serif;
  font-size: 1.4rem;
  color: #1B365D;
  margin: 0 0 1.25rem;
}
@media (max-width: 768px) {
  .area-page {
    padding: 6rem 1rem 3rem;
  }
  .area-page .area-header h1 {
    font-size: 2.1rem;
  }
  .area-page .area-fact {
    border-right: none;
    border-bottom: 1px solid #EAEAE8;
  }
  .area-page .area-notes {
    padding: 1.5rem 1.35rem;
  }
  .area-page .area-cta {
    padding: 2.25rem 1.5rem;
  }
  .area-page .area-cta h2 {
    font-size: 1.45rem;
  }
  .area-page .area-schools-heading {
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   Pill links, shared by the area pages and the hub index
   -------------------------------------------------------------------------- */
.area-pill-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.area-pill-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  background: #FFFFFF;
  border: 1px solid #EAEAE8;
  border-radius: 50px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1B365D;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
.area-pill-links a:hover {
  border-color: #C5A059;
  background: #FFF9EB;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   AREA INDEX — the "11+ guides by area" block on the directory hub
   -------------------------------------------------------------------------- */
.area-index {
  background: #FFFFFF;
  border: 1px solid #EAEAE8;
  border-radius: 16px;
  box-shadow: 0 12px 25px rgba(27, 54, 93, 0.04);
  padding: 2.75rem 2.5rem;
  margin-bottom: 2.5rem;
  /* Multi-column so short regions do not leave tall empty rows */
}
.area-index .area-index-head {
  padding-bottom: 1.75rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #EAEAE8;
}
.area-index .area-index-head h2 {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  color: #1B365D;
  margin: 0 0 0.65rem;
}
.area-index .area-index-head .area-index-sub {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #4A5568;
  max-width: none;
  margin: 0;
}
.area-index .area-index-grid {
  column-count: 3;
  column-gap: 2.75rem;
}
.area-index .area-index-region {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 1.85rem;
}
.area-index .area-index-region h3 {
  font-family: "Lato", sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #1B365D;
  margin: 0 0 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid #C5A059;
}
.area-index .area-index-region ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.area-index .area-index-region li {
  margin: 0;
}
.area-index .area-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  color: #1B365D;
  font-size: 0.97rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
.area-index .area-link:hover {
  background: #F1F5F9;
  color: #A47D15;
}
.area-index .area-link:hover .area-count {
  background: #C5A059;
  color: #FFFFFF;
}
.area-index .area-count {
  flex-shrink: 0;
  min-width: 30px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 900;
  color: #4A5568;
  background: #F1F5F9;
  border-radius: 50px;
  padding: 3px 9px;
  transition: all 0.2s ease-in-out;
}
.area-index .area-index-foot {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #EAEAE8;
  font-size: 0.9rem;
  color: #4A5568;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.area-index .area-index-foot i {
  color: #3B6E4C;
}
@media (max-width: 992px) {
  .area-index .area-index-grid {
    column-count: 2;
  }
}
@media (max-width: 768px) {
  .area-index {
    padding: 1.75rem 1.35rem;
  }
  .area-index .area-index-head h2 {
    font-size: 1.5rem;
  }
  .area-index .area-index-head .area-index-sub {
    font-size: 0.97rem;
  }
  .area-index .area-index-grid {
    column-count: 1;
  }
}

/* ==========================================================================
   LOCAL LANDING PAGES (_local-page.scss)
   Commercial landing pages for a named area. Warmer and more persuasive than
   the reference-style area guides: dark hero, overlapping stat card, icon
   tiles, and school cards with a gold rail.
   ========================================================================== */
.local-page {
  background-color: #F9F7F2;
  font-family: "Lato", sans-serif;
  /* ---------- Hero ---------- */
  /* trust row under the buttons */
  /* ---------- Stat card, overlapping the hero ---------- */
  /* ---------- Generic section rhythm ---------- */
  /* ---------- Areas covered ---------- */
  /* ---------- Why-online tiles ---------- */
  /* four tiles read better as a 2x2 block than as 3 + 1 orphan */
  /* ---------- School cards ---------- */
  /* ---------- Level cards ---------- */
  /* ---------- Closing CTA ---------- */
  /* ---------- Breadcrumb ---------- */
  /* ---------- Responsive ---------- */
}
.local-page .local-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, #0F1F3A 0%, #1B365D 55%, #24507F 100%);
  padding: 9rem 1.5rem 7rem;
  text-align: center;
  /* faint graph paper, because the subject is maths */
  /* warm gold bloom behind the headline */
}
.local-page .local-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.local-page .local-hero::after {
  content: "";
  position: absolute;
  top: -18%;
  left: 50%;
  width: 780px;
  height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0) 68%);
  pointer-events: none;
}
.local-page .local-hero > .container {
  position: relative;
  z-index: 2;
}
.local-page .local-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #D4AF37;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.08);
  border-radius: 50px;
  padding: 0.5rem 1.15rem;
  margin-bottom: 1.75rem;
}
.local-page .local-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  line-height: 1.08;
  color: #FFFFFF;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.local-page .local-hero h1 em {
  font-style: normal;
  color: #D4AF37;
}
.local-page .local-lede {
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  max-width: 640px;
  margin: 0 auto 2.25rem;
}
.local-page .local-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2.75rem;
}
.local-page .btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 14px 28px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 50px;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
.local-page .btn-hero-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #FFFFFF;
}
.local-page .local-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.9rem 2rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
}
.local-page .local-trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.local-page .local-trust i {
  color: #D4AF37;
  font-size: 1rem;
}
.local-page .local-trust strong {
  color: #FFFFFF;
}
.local-page .local-facts-wrap {
  max-width: 1000px;
  margin: -4rem auto 0;
  padding: 0 1.5rem;
  position: relative;
  z-index: 5;
}
.local-page .local-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: #FFFFFF;
  border: 1px solid #EAEAE8;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15, 31, 58, 0.13);
  overflow: hidden;
}
.local-page .local-fact {
  padding: 1.6rem 1.5rem;
  text-align: center;
  border-right: 1px solid #EAEAE8;
}
.local-page .local-fact:last-child {
  border-right: none;
}
.local-page .local-fact i {
  display: block;
  font-size: 1.35rem;
  color: #C5A059;
  margin-bottom: 0.7rem;
}
.local-page .local-fact .fact-value {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1B365D;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}
.local-page .local-fact .fact-label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.85px;
  text-transform: uppercase;
  color: #4A5568;
  font-weight: 700;
}
.local-page .local-section {
  padding: 5rem 1.5rem 0;
}
.local-page .local-section.is-last {
  padding-bottom: 5.5rem;
}
.local-page .section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.local-page .section-head h2 {
  font-family: "Playfair Display", serif;
  font-size: 2.1rem;
  color: #1B365D;
  margin: 0 0 0.85rem;
  text-wrap: balance;
}
.local-page .section-head p {
  font-size: 1.03rem;
  line-height: 1.7;
  color: #4A5568;
  margin: 0;
}
.local-page .local-areas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  max-width: 820px;
  margin: 0 auto;
}
.local-page .local-area-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #FFFFFF;
  border: 1px solid #EAEAE8;
  border-radius: 50px;
  padding: 0.55rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1B365D;
}
.local-page .local-area-tag i {
  color: #C5A059;
  font-size: 0.82rem;
}
.local-page .local-area-tag.is-base {
  background: #1B365D;
  border-color: #1B365D;
  color: #FFFFFF;
}
.local-page .local-area-tag.is-base i {
  color: #D4AF37;
}
.local-page .local-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 980px;
  margin: 0 auto;
}
.local-page .local-tile {
  background: #FFFFFF;
  border: 1px solid #EAEAE8;
  border-radius: 16px;
  padding: 2rem 1.85rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.local-page .local-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(27, 54, 93, 0.04);
  border-color: rgba(197, 160, 89, 0.4);
}
.local-page .local-tile .tile-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(197, 160, 89, 0.12);
  color: #A47D15;
  font-size: 1.3rem;
  margin-bottom: 1.15rem;
}
.local-page .local-tile h3 {
  font-family: "Lato", sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  color: #1B365D;
  margin: 0 0 0.55rem;
}
.local-page .local-tile p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #4A5568;
}
.local-page .local-schools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1.75rem;
}
.local-page .school-panel {
  background: #FFFFFF;
  border: 1px solid #EAEAE8;
  border-top: 4px solid #C5A059;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.local-page .school-panel:hover {
  box-shadow: 0 12px 25px rgba(27, 54, 93, 0.04);
  transform: translateY(-3px);
}
.local-page .school-panel .panel-head {
  padding: 1.75rem 1.85rem 1.35rem;
  border-bottom: 1px solid #EAEAE8;
  background: linear-gradient(180deg, rgba(197, 160, 89, 0.06), transparent);
}
.local-page .school-panel .panel-head .panel-place {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #C5A059;
  margin-bottom: 0.5rem;
}
.local-page .school-panel .panel-head h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.3rem;
  color: #1B365D;
  margin: 0;
  line-height: 1.3;
}
.local-page .school-panel .panel-body {
  padding: 1.6rem 1.85rem;
  flex: 1;
}
.local-page .school-panel .panel-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.local-page .school-panel .panel-body li {
  position: relative;
  padding-left: 1.65rem;
  margin-bottom: 0.95rem;
  font-size: 0.94rem;
  line-height: 1.65;
  color: #4A5568;
}
.local-page .school-panel .panel-body li:last-child {
  margin-bottom: 0;
}
.local-page .school-panel .panel-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #C5A059;
  transform: rotate(45deg);
}
.local-page .school-panel .panel-foot {
  padding: 0 1.85rem 1.75rem;
}
.local-page .school-panel .panel-foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 0.92rem;
  color: #1B365D;
  text-decoration: none;
  border-bottom: 2px solid #C5A059;
  padding-bottom: 2px;
  transition: all 0.2s ease-in-out;
}
.local-page .school-panel .panel-foot a:hover {
  color: #A47D15;
  gap: 0.75rem;
}
.local-page .local-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.15rem;
}
.local-page .level-card {
  display: block;
  background: #FFFFFF;
  border: 1px solid #EAEAE8;
  border-radius: 16px;
  padding: 1.6rem 1.35rem;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.local-page .level-card:hover {
  transform: translateY(-4px);
  border-color: #C5A059;
  box-shadow: 0 12px 25px rgba(27, 54, 93, 0.04);
}
.local-page .level-card:hover .level-go {
  color: #A47D15;
}
.local-page .level-card i.level-icon {
  font-size: 1.5rem;
  color: #C5A059;
  display: block;
  margin-bottom: 0.8rem;
}
.local-page .level-card .level-name {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1B365D;
  line-height: 1.35;
  margin-bottom: 0.35rem;
}
.local-page .level-card .level-go {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #4A5568;
  transition: all 0.2s ease-in-out;
}
.local-page .local-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, #0F1F3A 0%, #1B365D 60%, #24507F 100%);
  padding: 4.5rem 2rem;
  text-align: center;
}
.local-page .local-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
}
.local-page .local-cta > .container {
  position: relative;
  z-index: 2;
}
.local-page .local-cta h2 {
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  color: #FFFFFF;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.local-page .local-cta p {
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 0 auto 2rem;
  line-height: 1.7;
  font-size: 1.03rem;
}
.local-page .local-cta .cta-note {
  display: block;
  margin-top: 1.35rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}
.local-page .local-breadcrumb {
  position: absolute;
  top: 6.25rem;
  left: 0;
  right: 0;
  z-index: 3;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}
.local-page .local-breadcrumb a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
}
.local-page .local-breadcrumb a:hover {
  color: #D4AF37;
}
.local-page .local-breadcrumb .crumb-sep {
  margin: 0 0.55rem;
  color: rgba(212, 175, 55, 0.55);
}
.local-page .local-breadcrumb .crumb-current {
  color: #FFFFFF;
  font-weight: 700;
}
@media (max-width: 992px) {
  .local-page .local-fact {
    border-right: none;
    border-bottom: 1px solid #EAEAE8;
  }
  .local-page .local-fact:last-child {
    border-bottom: none;
  }
}
@media (max-width: 768px) {
  .local-page .local-hero {
    padding: 8rem 1.25rem 6rem;
  }
  .local-page .local-lede {
    font-size: 1.03rem;
  }
  .local-page .local-facts-wrap {
    margin-top: -3rem;
    padding: 0 1.25rem;
  }
  .local-page .local-tiles {
    grid-template-columns: 1fr;
  }
  .local-page .local-section {
    padding: 3.5rem 1.25rem 0;
  }
  .local-page .section-head h2 {
    font-size: 1.6rem;
  }
  .local-page .local-cta {
    padding: 3rem 1.5rem;
  }
  .local-page .local-cta h2 {
    font-size: 1.6rem;
  }
  .local-page .local-breadcrumb {
    top: 5.5rem;
  }
}

/* ==========================================================================
   QUESTION INDEX (_question-index.scss)
   The Grade 4 booklet pages: headline stats, the method note, and the
   booklet download cards. Composes with .area-page for the page shell.
   ========================================================================== */
.qindex-page {
  /* Shell (breadcrumb, eyebrow, header, CTA) comes from .area-page, which this
     is always used alongside. Only the table-specific pieces live here. */
  /* --- method note: this page rests on a stated assumption, so say it --- */
  /* --- headline numbers --- */
}
.qindex-page .qindex-method {
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
  max-width: 820px;
  margin: 0 auto 3rem;
  background: #FFFFFF;
  border: 1px solid #EAEAE8;
  border-left: 4px solid #246B8F;
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
}
.qindex-page .qindex-method > i {
  color: #246B8F;
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1.3;
}
.qindex-page .qindex-method p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.7;
  color: #4A5568;
}
.qindex-page .qindex-method strong {
  color: #1B365D;
}
.qindex-page .qindex-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  background: #FFFFFF;
  border: 1px solid #EAEAE8;
  border-radius: 16px;
  box-shadow: 0 12px 25px rgba(27, 54, 93, 0.04);
  overflow: hidden;
  margin-bottom: 3.5rem;
}
.qindex-page .qindex-stat {
  padding: 1.5rem 1.25rem;
  text-align: center;
  border-right: 1px solid #EAEAE8;
}
.qindex-page .qindex-stat:last-child {
  border-right: none;
}
.qindex-page .qindex-stat .n {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: #1B365D;
  line-height: 1;
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.qindex-page .qindex-stat .l {
  display: block;
  font-size: 0.73rem;
  letter-spacing: 0.85px;
  text-transform: uppercase;
  font-weight: 700;
  color: #4A5568;
}
.qindex-page .booklet-credit {
  margin-top: 3rem;
  font-size: 0.8rem;
  color: #4A5568;
  opacity: 0.75;
  text-align: center;
}
@media (max-width: 768px) {
  .qindex-page .qindex-stat {
    border-right: none;
    border-bottom: 1px solid #EAEAE8;
  }
}

/* ==========================================================================
   BOOKLET DOWNLOAD + SOFT EMAIL CAPTURE
   Used on the six Grade 4 strand pages. The card has two states, driven by
   whether `pdf:` is set in _data/grade4_booklets.yml.
   ========================================================================== */
.booklet-card {
  display: grid;
  grid-template-columns: 128px 1fr auto;
  align-items: center;
  gap: 2rem;
  background: #FFFFFF;
  border: 1px solid #EAEAE8;
  border-top: 4px solid #C5A059;
  border-radius: 16px;
  box-shadow: 0 12px 25px rgba(27, 54, 93, 0.04);
  padding: 2rem 2.25rem;
  margin-bottom: 1.5rem;
  /* the booklet itself, drawn rather than an image so there is nothing to load */
}
.booklet-card .booklet-cover {
  position: relative;
  width: 118px;
  height: 158px;
  border-radius: 6px 10px 10px 6px;
  background: linear-gradient(140deg, #1B365D 0%, #24507F 100%);
  box-shadow: 0 10px 22px rgba(15, 31, 58, 0.28);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0.9rem;
  overflow: hidden;
}
.booklet-card .booklet-cover::before { /* spine */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 9px;
  background: rgba(0, 0, 0, 0.22);
}
.booklet-card .booklet-cover .cover-strand {
  position: relative;
  font-family: "Playfair Display", serif;
  font-size: 1.02rem;
  line-height: 1.25;
  color: #FFFFFF;
}
.booklet-card .booklet-cover .cover-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.7rem;
  font-size: 0.58rem;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  font-weight: 800;
  color: #D4AF37;
}
.booklet-card .booklet-copy h2 {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  color: #1B365D;
  margin: 0 0 0.5rem;
}
.booklet-card .booklet-copy p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.65;
  color: #4A5568;
}
.booklet-card .booklet-copy .booklet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #4A5568;
}
.booklet-card .booklet-copy .booklet-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.booklet-card .booklet-copy .booklet-meta i {
  color: #C5A059;
}
.booklet-card .booklet-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: stretch;
  min-width: 190px;
}
.booklet-card .btn-booklet-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 1.1rem 2.5rem;
  border-radius: 50px;
  border: 2px solid #1B365D;
  background: transparent;
  color: #1B365D;
  font-family: "Lato", sans-serif;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.booklet-card .btn-booklet-secondary:hover {
  background: #1B365D;
  color: #FFFFFF;
  transform: translateY(-2px);
}
.booklet-card .booklet-pending {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #F1F5F9;
  border-radius: 50px;
  padding: 0.7rem 1.35rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: #4A5568;
  white-space: nowrap;
}
.booklet-card .booklet-pending i {
  color: #246B8F;
}

/* --- sibling booklet links --- */
.booklet-siblings {
  margin-top: 3.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid #EAEAE8;
}
.booklet-siblings h2 {
  font-family: "Playfair Display", serif;
  font-size: 1.35rem;
  color: #1B365D;
  margin: 0 0 1.25rem;
}

@media (max-width: 768px) {
  .booklet-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 1.75rem 1.35rem;
    gap: 1.5rem;
  }
  .booklet-card .booklet-copy .booklet-meta {
    justify-content: center;
  }
}
/* ==========================================================================
   EMAIL CAPTURE (_email-capture.scss)
   One signup component, two themes. Light is the white card used under the
   Grade 4 booklets; dark is the navy panel at the foot of predicted-topics.
   Markup lives in _includes/email-capture.html — both pages share it, so a
   change here changes every signup form on the site.
   ========================================================================== */
.ec-capture {
  border-radius: 16px;
  text-align: center;
  /* Spam trap. Off-screen rather than display:none, which some bots skip. */
}
.ec-capture h2 {
  font-family: "Playfair Display", serif;
  margin: 0 0 0.6rem;
}
.ec-capture > p {
  margin: 0 auto 1.5rem;
  line-height: 1.65;
}
.ec-capture .ec-form {
  max-width: 560px;
  margin: 0 auto;
}
.ec-capture .ec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.ec-capture input[type=email] {
  flex: 1 1 260px;
  font-family: "Lato", sans-serif;
  outline: none;
  transition: all 0.2s ease-in-out;
}
.ec-capture .ec-note {
  max-width: 560px;
  margin: 1.1rem auto 0;
  font-size: 0.82rem;
  line-height: 1.55;
}
.ec-capture .ec-hp {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   LIGHT — white card on the cream body
   -------------------------------------------------------------------------- */
.ec-capture.ec-light {
  background: #FFFFFF;
  border: 1px solid #EAEAE8;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  padding: 2rem 2.25rem;
  margin-top: 3rem;
}
.ec-capture.ec-light h2 {
  font-size: 1.4rem;
  color: #1B365D;
}
.ec-capture.ec-light > p {
  max-width: 560px;
  font-size: 0.97rem;
  color: #4A5568;
}
.ec-capture.ec-light input[type=email] {
  padding: 14px 18px;
  border: 2px solid #CBD5E1;
  border-radius: 50px;
  font-size: 0.97rem;
  color: #1B365D;
  background: #F1F5F9;
}
.ec-capture.ec-light input[type=email]:focus {
  border-color: #C5A059;
  background: #FFFFFF;
}
.ec-capture.ec-light input[type=email]::placeholder {
  color: #94A3B8;
}
.ec-capture.ec-light .ec-note {
  color: #4A5568;
}
.ec-capture.ec-light .ec-note i {
  color: #3B6E4C;
}
@media (max-width: 768px) {
  .ec-capture.ec-light {
    padding: 1.5rem 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   DARK — navy panel, used as a section closer
   -------------------------------------------------------------------------- */
.ec-capture.ec-dark {
  max-width: 900px;
  margin: 4rem auto 0;
  background: linear-gradient(135deg, #1B365D 0%, #1A365D 100%);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  padding: 3.5rem 2rem;
  color: #FFFFFF;
}
.ec-capture.ec-dark h2 {
  font-size: 2.25rem;
  font-weight: 700;
  color: #FFFFFF;
}
.ec-capture.ec-dark > p {
  max-width: 650px;
  margin-bottom: 2rem;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
}
.ec-capture.ec-dark .ec-row {
  gap: 10px;
}
.ec-capture.ec-dark input[type=email] {
  padding: 16px 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 1.05rem;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ec-capture.ec-dark input[type=email]::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.ec-capture.ec-dark input[type=email]:focus {
  border-color: #C5A059;
  background: rgba(255, 255, 255, 0.15);
}
.ec-capture.ec-dark .btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  background-color: #C5A059;
  color: #1B365D;
  padding: 14px 26px;
  border-radius: 8px;
  font-family: "Lato", sans-serif;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  border: 2px solid #C5A059;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  font-size: 1.05rem;
}
.ec-capture.ec-dark .btn-gold:hover {
  background-color: #EAC351;
  border-color: #EAC351;
  color: #1B365D;
  transform: translateY(-2px);
  text-decoration: none;
}
.ec-capture.ec-dark .ec-note {
  color: rgba(255, 255, 255, 0.6);
}
.ec-capture.ec-dark .ec-note i {
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 768px) {
  .ec-capture.ec-dark {
    padding: 3rem 1.5rem;
    /* In a column, flex-basis is a HEIGHT — reset it or the field grows tall */
  }
  .ec-capture.ec-dark h2 {
    font-size: 1.7rem;
  }
  .ec-capture.ec-dark > p {
    font-size: 1rem;
  }
  .ec-capture.ec-dark .ec-row {
    flex-direction: column;
  }
  .ec-capture.ec-dark .btn-gold {
    width: 100%;
  }
  .ec-capture.ec-dark input[type=email] {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   EMAILOCTOPUS EMBED SKIN
   When emailoctopus_form_script is set, EmailOctopus injects its own form
   plus a 140KB stylesheet — and it injects that <style> INSIDE this div, so
   in document order it comes after ours and wins every specificity tie.
   Hence the long selectors and the !important flags: they are not laziness,
   they are the minimum needed to outrank a stylesheet that loads after us.

   Their markup, for reference:
     .inline-container > form.emailoctopus-form > .main-form
        > [eo-form-fields-container] > .emailoctopus-form-row > input.form-control
        > input[type=submit].btn.w-100.btn-primary

   Two things CSS cannot reach, both set in the EmailOctopus form designer:
   the button label ("Subscribe") and the invisible reCAPTCHA badge.
   -------------------------------------------------------------------------- */
.ec-capture .ec-embed {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  /* theirs is max-width:600px with zero margins, so it sits flush left */
}
.ec-capture .ec-embed .inline-container {
  width: 100%;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.ec-capture .ec-embed .inline-container form.emailoctopus-form {
  font-family: "Lato", sans-serif !important;
  /* field and button side by side, as on the rest of the site */
}
.ec-capture .ec-embed .inline-container form.emailoctopus-form .main-form {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.ec-capture .ec-embed .inline-container form.emailoctopus-form [eo-form-fields-container] {
  flex: 1 1 260px;
}
.ec-capture .ec-embed .inline-container form.emailoctopus-form .emailoctopus-form-row {
  margin: 0 !important;
}
.ec-capture .ec-embed .inline-container form.emailoctopus-form input[type=email].form-control {
  width: 100% !important;
  height: auto !important;
  padding: 14px 18px !important;
  border: 2px solid #CBD5E1 !important;
  border-radius: 50px !important;
  font-family: "Lato", sans-serif !important;
  font-size: 0.97rem !important;
  color: #1B365D !important;
  background-color: #F1F5F9 !important;
  box-shadow: none !important;
}
.ec-capture .ec-embed .inline-container form.emailoctopus-form input[type=submit].btn {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  display: inline-flex !important;
  line-height: 1 !important;
  padding: 1.1rem 2.5rem !important;
  border-radius: 50px !important;
  font-family: "Lato", sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.97rem !important;
  background-color: #C5A059 !important;
  color: #1B365D !important;
  border: 2px solid #C5A059 !important;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3) !important;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ec-capture .ec-embed .inline-container form.emailoctopus-form input[type=submit].btn:hover {
  background-color: #EAC351 !important;
  border-color: #EAC351 !important;
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .ec-capture .ec-embed .inline-container form.emailoctopus-form .main-form {
    flex-direction: column;
    align-items: stretch;
  }
  .ec-capture .ec-embed .inline-container form.emailoctopus-form input[type=submit].btn {
    width: 100% !important;
  }
}

/* Dark panel: their field is white-on-white against our navy, so restate it */
.ec-capture.ec-dark .ec-embed .inline-container form.emailoctopus-form input[type=email].form-control {
  padding: 16px 20px !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  font-size: 1.05rem !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}
.ec-capture.ec-dark .ec-embed .inline-container form.emailoctopus-form input[type=email].form-control::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}
.ec-capture.ec-dark .ec-embed .inline-container form.emailoctopus-form input[type=submit].btn {
  padding: 14px 26px !important;
  border-radius: 8px !important;
  font-size: 1.05rem !important;
}

/*# sourceMappingURL=styles.css.map */