/* Desktop Enhancements - Improved Spacing & Layout for Large Screens */

/* ─────────────────────────────────────────────────────────────
   DESKTOP TYPOGRAPHY & READABILITY (769px and above)
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Improved base typography for desktop readability */
  body {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.25px;
  }

  /* Enhanced heading sizes for desktop */
  h1 {
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1.15;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
  }

  h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.25;
    margin-bottom: 1.25rem;
    letter-spacing: -0.25px;
  }

  h3 {
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    line-height: 1.3;
    margin-bottom: 1rem;
  }

  h4, h5, h6 {
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
  }

  p {
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.25rem;
  }

  /* Better paragraph spacing in sections */
  .section p, .bh-section p {
    max-width: 75ch;
    margin-bottom: 1.5rem;
  }

  /* Improved small text on desktop */
  small, .small-text {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  /* Enhanced list styling */
  ul, ol {
    margin: 1.5rem 0;
    padding-left: 2rem;
  }

  li {
    margin-bottom: 0.9rem;
    line-height: 1.75;
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP GRID TIGHTENING & CHILDREN SHRINKING
   Force grid children to shrink correctly and stay in viewport
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Enable shrinking of grid children below content size */
  .why-sikri-grid > *,
  .ws-pillars > *,
  .level-grid > *,
  .sibling-grid > *,
  .gallery-strip > *,
  .values-strip > *,
  .bh-resources > *,
  .bh-level-grid > *,
  .programme-grid > *,
  .resource-grid > *,
  .level-card-grid > *,
  .card-grid > *,
  .features-grid > *,
  .content-grid > *,
  .values-row > *,
  .mv-grid > *,
  .img-strip > *,
  .img-strip-2 > *,
  .img-strip-3 > *,
  .related-grid > *,
  .resources-grid > *,
  .bh-split > *,
  .about-split > * {
    min-width: 0;
    overflow: hidden;
  }

  /* Tighten gap spacing on primary grids */
  .why-sikri-grid {
    gap: 20px !important;
  }

  .sibling-grid {
    gap: 16px !important;
  }

  .gallery-strip {
    gap: 4px !important;
  }

  .img-strip,
  .img-strip-2,
  .img-strip-3 {
    gap: 4px !important;
  }

  /* Keep minimal gaps for border grids */
  .ws-pillars,
  .level-grid,
  .values-strip,
  .bh-resources,
  .bh-level-grid,
  .mv-grid,
  .values-row {
    gap: 1px !important;
  }

  /* Tighten resource and card grids */
  .programme-grid,
  .resource-grid,
  .resources-grid,
  .level-card-grid,
  .card-grid,
  .features-grid,
  .content-grid,
  .related-grid {
    gap: 16px !important;
  }

  /* Reduce split/about layout gaps */
  .bh-split,
  .about-split {
    gap: 2rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP IMAGE FRAME WIDTH SCALING
   Ensure image frames scale with grid width instead of fixed ratio
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Grid-based image WRAPPERS scale with column width.
     Wrappers: width/max-width only — height is driven by aspect-ratio (set in global_min.css).
     Never set height:auto on a wrapper that uses the absolute-fill pattern, as it collapses the frame. */
  .why-sikri-grid .ws-card-image,
  .sibling-grid .intro-img,
  .level-grid .img-frame,
  .bh-resources .img-frame,
  .resource-grid .img-frame,
  .programme-grid .img-frame,
  .related-grid .img-frame,
  .resources-grid .img-frame,
  .about-split-img,
  .bh-split__img,
  .intro-img {
    width: 100%;
    max-width: 100%;
  }

  /* Aspect-ratio overrides for specific desktop contexts.
     Note: These contextual overrides properly use the cascade. More specific selectors override generic defaults.*/
  .why-sikri-grid .ws-card-image {
    aspect-ratio: 3 / 2 !important;
  }

  /* .sibling-grid .intro-img uses 16/9 in this specific context, overriding the generic 4/3 default below */
  .sibling-grid .intro-img {
    aspect-ratio: 16 / 9 !important;
  }

  /* Generic defaults for intro-img, about-split-img, bh-split__img (overridden by more specific context above) */
  .about-split-img,
  .bh-split__img,
  .intro-img {
    aspect-ratio: 4 / 3 !important;
  }

  .level-grid .img-frame,
  .bh-resources .img-frame,
  .resource-grid .img-frame,
  .programme-grid .img-frame,
  .related-grid .img-frame,
  .resources-grid .img-frame {
    aspect-ratio: 3 / 2 !important;
  }

  /* .img-strip / .gallery-strip use direct <img> children (no wrapper).
     aspect-ratio on the <img> itself is safe here — these are NOT absolute-fill frames. */
  .gallery-strip img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    width: 100%;
  }

  .img-strip img,
  .img-strip-2 img,
  .img-strip-3 img {
    aspect-ratio: 16 / 9 !important;
    object-fit: cover;
    display: block;
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP PROGRAMME RESOURCE SECTIONS
   ───────────────────────────────────────────────────────────── */

@media (min-width: 961px) {
  .bh-section:has(.bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid, .prog-editorial)) {
    padding-top: var(--section-y) !important;
    padding-bottom: var(--section-y) !important;
  }

  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid, .prog-editorial)) {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(40px, 5vw, 72px);
    max-width: 1180px;
  }

  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid, .prog-editorial)) > .bh-prose--left {
    position: sticky;
    top: 112px;
    max-width: 420px;
    grid-column: 1;
    grid-row: 1;
  }

  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) > :is(.bh-resources, .resources-grid, .resource-grid) {
    grid-column: 2;
    margin-top: 0 !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    width: 100%;
  }

  .bh-section .container:has(> .bh-prose--left + .prog-editorial) > .prog-editorial {
    grid-column: 2;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
  }

  .bh-section .container:has(> .bh-prose--left + .prog-editorial) > .prog-editorial + .prog-editorial {
    margin-top: clamp(18px, 2vw, 28px) !important;
  }

  .bh-section .container:has(> .bh-prose--left + .prog-editorial) > .prog-editorial .prog-editorial__inner {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .bh-section .container:has(> .bh-prose--left + .prog-editorial) > .prog-editorial .prog-editorial__img {
    order: 1 !important;
  }

  .bh-section .container:has(> .bh-prose--left + .prog-editorial) > .prog-editorial .prog-editorial__text {
    order: 2 !important;
  }

  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) .bh-resource,
  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) .resource-card {
    min-height: 220px;
    padding: clamp(28px, 3vw, 36px);
    display: flex;
    flex-direction: column;
  }

  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) .bh-resource p,
  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) .resource-card p {
    margin-bottom: 1rem;
  }

  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) .bh-resource .bh-link,
  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) .resource-card .resource-link {
    margin-top: auto;
  }
}

@media (min-width: 961px) and (max-width: 1120px) {
  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid, .prog-editorial)) {
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
    gap: 36px;
  }

  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) > :is(.bh-resources, .resources-grid, .resource-grid) {
    grid-template-columns: 1fr;
  }

  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) .bh-resource,
  .bh-section .container:has(> .bh-prose--left + :is(.bh-resources, .resources-grid, .resource-grid)) .resource-card {
    min-height: 240px;
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP SECTION & CONTAINER SPACING
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Consistent section padding on desktop */
  .section, .bh-section, .prog-intro, .prog-offers, .prog-resources, 
  .enrol-cta, .cta-band, .bh-cta-band, .cbc-strip, .transport-section, .legal-main {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
  }

  /* Larger padding for page intro sections */
  .page-intro, .bh-banner {
    padding-top: var(--section-y-compact);
    padding-bottom: var(--section-y-compact);
  }

  /* Wider containers for hero sections */
  .hero-container {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP GRID & LAYOUT IMPROVEMENTS
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Multi-column grid layouts on desktop */
  .bh-level-grid, .programme-grid, .resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--block-gap);
  }

  /* 3-column grid for most card layouts */
  .level-card-grid, .card-grid, .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--block-gap);
  }

  /* 2-column for larger content cards */
  .content-grid, .bh-resources {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--block-gap);
  }

  /* Better spacing in flex containers */
  .flex-group, .button-group {
    gap: var(--block-gap);
    align-items: flex-start;
  }

  /* Improved value row spacing */
  .values-row, .mv-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: var(--block-gap);
  }

  /* Stats grid on desktop */
  .stats-grid, .bh-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--block-gap);
  }

  /* Hero split layout */
  .about-split, .bh-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
  }

  .about-split-content, .bh-split__content {
    padding-right: 2rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP CARD & COMPONENT SPACING
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Improved card padding on desktop */
  .level-card, .bh-level-card, .resource-card, .card, .feature-card {
    padding: 2rem;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
  }

  /* Better spacing inside cards */
  .card-content, .card-body {
    padding: 0;
  }

  .card h3, .level-card h3, .resource-card h3 {
    margin-bottom: 1rem;
    font-size: 1.3rem;
  }

  .card p, .level-card p, .resource-card p {
    margin-bottom: 1.25rem;
    line-height: 1.75;
  }

  /* .img-frame aspect-ratio and fill rules are owned by global_min.css / site-consistency.css.
     Only .card-image (a non-frame element) gets a layout nudge here. */
  .card-image {
    margin-bottom: 1.5rem;
  }

  /* Better spacing in card footer areas */
  .card-footer, .card-cta {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(26, 58, 92, 0.08);
  }

  /* Hover effects on cards */
  .level-card:hover, 
  .resource-card:hover, 
  .card:hover,
  .programme-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }

  /* Better badge and label spacing */
  .card-badge, .label, .tag {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    margin-right: 0.5rem;
    margin-bottom: 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP BUTTON & CTA IMPROVEMENTS
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Desktop button sizing and spacing */
  .btn, .nav-enquire, .btn-red-solid, .btn-navy-outline, 
  .bh-btn-white, .bh-btn-ghost, .cta-button {
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    min-height: 48px;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  /* Primary button states */
  .btn-primary, .btn-red-solid {
    background-color: var(--red, #c8102e);
    color: white;
  }

  .btn-primary:hover, .btn-red-solid:hover {
    background-color: var(--red-dark, #a00d24);
    box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3);
    transform: translateY(-1px);
  }

  /* Secondary button states */
  .btn-secondary, .btn-navy-outline {
    background-color: transparent;
    color: var(--navy, #1a3a5c);
    border: 2px solid var(--navy, #1a3a5c);
  }

  .btn-secondary:hover, .btn-navy-outline:hover {
    background-color: var(--navy, #1a3a5c);
    color: white;
    box-shadow: 0 4px 12px rgba(26, 58, 92, 0.3);
    transform: translateY(-1px);
  }

  /* Ghost button styling */
  .btn-ghost, .bh-btn-ghost {
    background-color: rgba(200, 16, 46, 0.08);
    color: var(--navy, #1a3a5c);
    border: 1px solid rgba(200, 16, 46, 0.2);
  }

  .btn-ghost:hover, .bh-btn-ghost:hover {
    background-color: rgba(200, 16, 46, 0.15);
    border-color: var(--red, #c8102e);
  }

  /* CTA band button groups */
  .cta-actions {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 2rem;
  }

  .cta-actions .btn {
    margin: 0;
  }

  /* Link button styling */
  .btn-text, .link-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 12px;
    color: var(--red, #c8102e);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
  }

  .btn-text:hover, .link-button:hover {
    color: var(--navy, #1a3a5c);
    gap: 0.75rem;
  }

  .btn-text::after, .link-button::after {
    content: '→';
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP FORM IMPROVEMENTS
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Better form layout on desktop */
  .form-group {
    margin-bottom: 1.75rem;
  }

  .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

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

  /* Improved input fields */
  input[type="text"],
  input[type="email"],
  input[type="phone"],
  input[type="number"],
  textarea,
  select {
    width: 100%;
    max-width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border: 1.5px solid rgba(26, 58, 92, 0.15);
    border-radius: 4px;
    transition: all 0.3s ease;
    background-color: #fff;
  }

  input:focus,
  textarea:focus,
  select:focus {
    outline: none;
    border-color: var(--red, #c8102e);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
  }

  /* Better label styling */
  label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--navy, #1a3a5c);
    font-size: 0.95rem;
  }

  /* Required field indicator */
  label .required {
    color: var(--red, #c8102e);
    margin-left: 2px;
  }

  /* Form helper text */
  .form-help, .helper-text {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--soft, #586879);
  }

  /* Checkbox and radio improvements */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--red, #c8102e);
    margin-right: 0.5rem;
  }

  .checkbox-group, .radio-group {
    margin: 1.5rem 0;
  }

  .checkbox-group label, .radio-group label {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    font-weight: 400;
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP NAVIGATION & HEADER IMPROVEMENTS
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Better header spacing — .main-nav padding is owned by page CSS / nav component;
     only .header gets the desktop bump here to avoid conflicting with scroll-triggered nav rules. */
  .header {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--page-gutter);
  }

  /* Improved navigation menu */
  .nav-menu {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
  }

  .nav-menu a {
    color: var(--navy, #1a3a5c);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.25s ease;
    position: relative;
  }

  .nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--red, #c8102e);
    transition: width 0.3s ease;
  }

  .nav-menu a:hover::after {
    width: 100%;
  }

  .nav-menu a.active::after {
    width: 100%;
  }

  /* Enquire button in nav */
  .nav-enquire {
    margin-left: auto;
    white-space: nowrap;
  }

  /* Breadcrumb improvements */
  .breadcrumb {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 0;
  }

  .breadcrumb a {
    color: var(--red, #c8102e);
    text-decoration: none;
    transition: color 0.25s ease;
  }

  .breadcrumb a:hover {
    color: var(--navy, #1a3a5c);
  }

  .breadcrumb-sep {
    color: var(--soft, #586879);
  }

  .breadcrumb .current {
    color: var(--soft, #586879);
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP FOOTER IMPROVEMENTS
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Better footer spacing */
  .footer, .page-footer {
    margin-top: auto;
  }

  .footer-top {
    padding: 3rem var(--page-gutter);
    max-width: 1400px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-top-col h4 {
    margin-bottom: 1.25rem;
    font-size: 1.1rem;
  }

  .footer-top-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer-top-col li {
    margin-bottom: 0.75rem;
  }

  .footer-top-col a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.25s ease;
    font-weight: 400;
  }

  .footer-top-col a:hover {
    color: var(--red, #c8102e);
  }

  /* Footer bottom improvements */
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem var(--page-gutter);
    max-width: 1400px;
    margin: 0 auto;
    gap: 2rem;
    flex-wrap: wrap;
  }

  .footer-bottom-left, .footer-bottom-right {
    display: flex;
    gap: 2rem;
    align-items: center;
  }

  .footer-bottom-motto {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
  }

  /* Social links in footer */
  .social-links {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .social-links a:hover {
    background-color: var(--red, #c8102e);
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP IMAGE & MEDIA IMPROVEMENTS
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Better image spacing */
  .img-frame, .intro-img, .about-split-img, .bh-split__img {
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
  }

  .img-frame img, .intro-img img, .about-split-img img, .bh-split__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1);
  }

  .img-frame:hover img, .intro-img:hover img, .about-split-img:hover img {
    transform: scale(1.02);
  }

  /* Image gallery improvements */
  .image-gallery, .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: var(--block-gap);
  }

  .gallery-item {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1;
  }

  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .gallery-item:hover img {
    transform: scale(1.05);
  }

  /* Image strip improvements */
  .img-strip {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    margin: 2rem 0;
  }

  .img-strip-item {
    flex: 0 0 250px;
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    overflow: hidden;
  }

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

/* ─────────────────────────────────────────────────────────────
   DESKTOP LINK & TEXT IMPROVEMENTS
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Enhanced link styling */
  .content-link, p a, .bh-p a {
    color: var(--red, #c8102e);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: all 0.25s ease;
  }

  .content-link:hover, p a:hover, .bh-p a:hover {
    color: var(--navy, #1a3a5c);
    text-decoration-color: var(--navy, #1a3a5c);
    text-decoration-thickness: 3px;
  }

  .content-link:active, p a:active, .bh-p a:active {
    background-color: rgba(200, 16, 46, 0.15);
  }

  /* Related page links */
  .related-page-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 6px 12px;
    border-radius: 4px;
    color: var(--red, #c8102e);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .related-page-link:hover {
    background-color: rgba(200, 16, 46, 0.1);
    gap: 0.75rem;
    color: var(--navy, #1a3a5c);
  }

  .related-page-link::after {
    content: '→';
    font-size: 1.1em;
    transition: transform 0.3s ease;
  }

  .related-page-link:hover::after {
    transform: translateX(3px);
  }

  /* Highlight/callout text */
  .highlight, .callout, .quote {
    background-color: rgba(200, 16, 46, 0.05);
    border-left: 4px solid var(--red, #c8102e);
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 4px;
  }

  blockquote {
    border-left: 4px solid var(--red, #c8102e);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--soft, #586879);
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP CTA BAND & TESTIMONIAL IMPROVEMENTS
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* CTA band improvements */
  .cta-band, .cta-band-light, .bh-cta-band {
    padding: 4rem var(--page-gutter);
  }

  .cta-band-content, .bh-cta-band-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
  }

  .cta-band h2, .bh-cta-band h2 {
    margin-bottom: 1.5rem;
    font-size: 2rem;
  }

  .cta-band p, .bh-cta-band p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.8;
  }

  /* Testimonial cards */
  .testimonial, .testimonial-card {
    padding: 2rem;
    background-color: var(--cream, #f7f5f0);
    border-radius: 8px;
    margin-bottom: 1.5rem;
  }

  .testimonial-content {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.25rem;
    font-style: italic;
    color: var(--navy, #1a3a5c);
  }

  .testimonial-author {
    font-weight: 600;
    color: var(--navy, #1a3a5c);
    margin-bottom: 0.25rem;
  }

  .testimonial-role {
    font-size: 0.9rem;
    color: var(--soft, #586879);
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP INTERACTIVE ELEMENTS
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Better focus states */
  a:focus, button:focus, input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--red, #c8102e);
    outline-offset: 3px;
  }

  /* Improved transition effects */
  a, button, .btn, .card, .level-card {
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
  }

  /* Tooltips and popovers */
  [data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--navy, #1a3a5c);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
  }

  [data-tooltip]:hover::before {
    opacity: 1;
  }

  /* Improved scrollbar styling (webkit browsers) */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(26, 58, 92, 0.05);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--red, #c8102e);
    border-radius: 5px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--red-dark, #a00d24);
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP CONTENT CENTERING
   Center-align sections that don't require left alignment
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Center the why-sikri intro section */
  .why-sikri-intro {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
  }

  .why-sikri-intro .hr-rule {
    margin-left: auto;
    margin-right: auto;
  }

  /* Center the seo-link-hub intro section */
  .seo-link-hub__intro {
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 48px;
  }

  .seo-link-hub__intro h2 {
    margin-left: auto;
    margin-right: auto;
  }

  /* Center the CTA band content */
  .cta-band-light {
    text-align: center !important;
  }

  .cta-band-light > .container > div,
  .cta-band-light .section-tag,
  .cta-band-light h2,
  .cta-band-light p {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  .cta-band-light .cta-actions {
    justify-content: center;
  }

  .cta-band-light .btn-outline,
  .cta-band-light .btn-secondary-cta,
  .cta-band-light .btn-primary-cta,
  .cta-band-light .btn-hero-primary {
    margin-left: 0;
  }

  /* Center the school section text */
  .school-text {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .school-text h2 {
    margin-left: auto;
    margin-right: auto;
  }

  .school-text p {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  .school-text .btn-outline-white {
    display: inline-block;
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP ACCESSIBILITY ENHANCEMENTS
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Better skip link styling */
  .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--red, #c8102e);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100;
    border-radius: 0 0 4px 0;
  }

  .skip-link:focus {
    top: 0;
  }

  /* Improved focus visible for keyboard users */
  *:focus-visible {
    outline: 2px solid var(--red, #c8102e);
    outline-offset: 3px;
  }

  /* Color contrast improvements */
  .soft-text {
    color: var(--soft, #586879);
  }

  /* Improved text selection */
  ::selection {
    background-color: var(--red, #c8102e);
    color: white;
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP RESPONSIVE TABLES
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  thead {
    background-color: var(--navy, #1a3a5c);
    color: white;
  }

  th {
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid rgba(26, 58, 92, 0.1);
  }

  td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(26, 58, 92, 0.08);
  }

  tbody tr {
    transition: background-color 0.25s ease;
  }

  tbody tr:hover {
    background-color: var(--cream, #f7f5f0);
  }

  tbody tr:last-child td {
    border-bottom: none;
  }

  /* Table cell alignment utilities */
  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP SPACING UTILITY CLASSES
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Margin utilities */
  .mt-1 { margin-top: 0.5rem; }
  .mt-2 { margin-top: 1rem; }
  .mt-3 { margin-top: 1.5rem; }
  .mt-4 { margin-top: 2rem; }
  .mt-5 { margin-top: 3rem; }

  .mb-1 { margin-bottom: 0.5rem; }
  .mb-2 { margin-bottom: 1rem; }
  .mb-3 { margin-bottom: 1.5rem; }
  .mb-4 { margin-bottom: 2rem; }
  .mb-5 { margin-bottom: 3rem; }

  .mx-auto { margin-left: auto; margin-right: auto; }

  /* Padding utilities */
  .p-1 { padding: 0.5rem; }
  .p-2 { padding: 1rem; }
  .p-3 { padding: 1.5rem; }
  .p-4 { padding: 2rem; }
  .p-5 { padding: 3rem; }

  /* Gap utilities */
  .gap-1 { gap: 0.5rem; }
  .gap-2 { gap: 1rem; }
  .gap-3 { gap: 1.5rem; }
  .gap-4 { gap: 2rem; }
  .gap-5 { gap: 3rem; }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP ABOUT PAGE & SPLIT LAYOUTS ENHANCEMENTS
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Enhanced split layout with better spacing */
  .about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: var(--section-y);
  }

  .about-split-img {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
  }

  .about-split-img:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
  }

  .about-split-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    padding: 0;
  }

  .about-split-text .section-tag {
    margin-bottom: 0.5rem;
  }

  .about-split-text h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.25;
    margin-bottom: 1rem;
  }

  .about-split-text .hr-rule {
    width: 56px;
    height: 3px;
    margin: 0.5rem 0 1.5rem 0;
  }

  .about-split-text p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--soft);
  }

  /* Song & Prayer section with improved grid */
  .about-split-text[style*="background"] {
    padding: 3.5rem;
    background: var(--cream);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04);
  }

  /* Song and Prayer subsections */
  .about-split-text > div {
    margin-bottom: 2.5rem;
  }

  .about-split-text > div:last-child {
    margin-bottom: 0;
  }

  .about-split-text h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: var(--dark);
    letter-spacing: -0.25px;
  }

  .about-split-text p[style*="italic"] {
    font-size: 1.05rem;
    line-height: 2.1;
    color: var(--soft);
    font-style: italic;
    letter-spacing: 0.2px;
  }

  /* Timeline improvements */
  .timeline {
    padding: 2rem 0;
    max-width: 900px;
  }

  .tl-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 2rem;
    align-items: flex-start;
    padding-bottom: 3rem;
    position: relative;
    margin-bottom: 1rem;
  }

  .tl-item::before {
    left: 39px;
    top: 40px;
    width: 2px;
    background: linear-gradient(to bottom, var(--red), rgba(200, 16, 46, 0.3));
  }

  .tl-dot {
    width: 20px;
    height: 20px;
    margin-top: 0;
    box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--red);
  }

  .tl-content {
    padding-top: 0.5rem;
  }

  .tl-year {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    margin-bottom: 0.75rem;
  }

  .tl-item h4 {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
    color: var(--dark);
  }

  .tl-item p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--soft);
  }

  /* Mission & Vision editorial layout */
  .prog-editorial {
    margin-bottom: 3rem;
  }

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

  .prog-editorial__text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .prog-editorial__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 0.5rem;
  }

  .prog-editorial__title {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dark);
  }

  .prog-editorial__body {
    font-size: 1.03rem;
    line-height: 1.8;
    color: var(--soft);
  }

  .prog-editorial__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--red);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    margin-top: 0.5rem;
    transition: gap 0.3s ease, color 0.3s ease;
  }

  .prog-editorial__cta:hover {
    gap: 1rem;
    color: var(--navy);
  }

  .prog-editorial__img {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 3/2;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }

  .prog-editorial__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
  }

  .prog-editorial__img:hover img {
    transform: scale(1.05);
  }

  /* Reverse layout: use column order, not direction:rtl (which breaks BiDi text) */
  .prog-editorial--reverse .prog-editorial__inner {
    grid-template-columns: 1fr 1fr;
  }

  .prog-editorial--reverse .prog-editorial__img {
    order: -1;
  }

  /* Values section grid enhancement */
  .section-cream .section-intro {
    margin-bottom: 3rem;
  }

  .section-cream .section-intro h2 {
    margin-bottom: 1rem;
  }

  .section-cream .section-intro .hr-rule {
    margin: 1rem 0 1.5rem 0;
  }

  /* img-strip margins governed by site-consistency.css via --block-gap token */

  .img-strip-3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .img-strip img {
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.3s ease;
  }

  .img-strip img:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }

  /* Enhanced container max-width for content readability */
  .container {
    max-width: 1200px;
  }

  /* Better spacing between sections */
  .section + .section,
  .section + .img-strip,
  .img-strip + .section {
    margin-top: 0;
  }

  /* Section rule (hr) improvements */
  .section-rule {
    margin: var(--section-y) auto;
    max-width: 1200px;
  }

  /* Mission/Vision panels spacing */
  .mv-panel {
    padding: 3.5rem;
  }

  .mv-panel h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  .mv-panel p {
    font-size: 1.05rem;
    line-height: 1.8;
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP PAGE INTRO & HERO ENHANCEMENTS
   ───────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  
  /* Enhanced page intro styling */
  .page-intro {
    padding: var(--section-y-compact) 0;
    background: linear-gradient(135deg, var(--cream) 0%, rgba(247, 245, 240, 0.8) 100%);
    border-bottom: 2px solid var(--border);
  }

  .page-intro .container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .page-intro .page-tag {
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 700;
  }

  .page-intro h1 {
    font-size: clamp(2.2rem, 4vw, 2.8rem);
    margin-bottom: 1.25rem;
    color: var(--dark);
    font-weight: 700;
  }

  .page-intro p.lead {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--soft);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .page-intro p.lead em {
    color: var(--red);
    font-style: italic;
    font-weight: 600;
  }

  /* CTA band enhancements */
  .cta-band {
    padding: var(--section-y) var(--page-gutter);
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  }

  .cta-band .container {
    text-align: center;
    max-width: 950px;
  }

  .cta-band .section-tag {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    margin-bottom: 1.25rem;
  }

  .cta-band h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    color: var(--white);
    margin-bottom: 1.5rem;
    line-height: 1.25;
  }

  .cta-band h2 em {
    color: var(--red);
    font-style: italic;
    font-weight: 700;
  }

  .cta-band p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2.5rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .cta-actions {
    display: flex;
    gap: 1.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0;
  }

  .cta-actions .btn {
    min-width: 160px;
    padding: 15px 32px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
  }

  .cta-actions .btn-white {
    background: var(--white);
    color: var(--navy);
  }

  .cta-actions .btn-white:hover {
    background: var(--cream);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }

  .cta-actions .btn-ghost-white {
    border: 2px solid var(--white);
    color: var(--white);
    background: transparent;
  }

  .cta-actions .btn-ghost-white:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }
}

/* ─────────────────────────────────────────────────────────────
   LARGE SCREEN OPTIMIZATIONS (1200px+)
   ───────────────────────────────────────────────────────────── */

@media (min-width: 1200px) {
  
  /* Wider layouts for large screens — capped at 1200px to stay on-system */
  .container {
    max-width: 1200px;
  }

  .hero-container {
    max-width: 1400px;
  }

  /* Enhanced about split for ultra-wide screens */
  .about-split {
    gap: 5rem;
  }

  .about-split-text[style*="background"] {
    padding: 4rem;
  }

  /* More aggressive grid expansion */
  .features-grid, .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Section padding is governed by site-consistency.css rhythm tokens. */

  /* Better hero sizing */
  h1 {
    font-size: clamp(2.4rem, 4.5vw, 3.2rem);
  }

  h2 {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
  }

  /* Improved flex layouts */
  .flex-large {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
  }

  .flex-large > * {
    flex: 1;
  }

  .flex-large > *:first-child {
    flex: 1.2;
  }
}

@media (max-width: 900px) {
  body:not(.gallery-page) .img-frame,
  body:not(.gallery-page) .intro-img,
  body:not(.gallery-page) .about-split-img,
  body:not(.gallery-page) .bh-split__img,
  body:not(.gallery-page) .banner-img,
  body:not(.gallery-page) .featured-img,
  body:not(.gallery-page) .post-thumb,
  body:not(.gallery-page) .card-img,
  body:not(.gallery-page) .ws-card-image,
  body:not(.gallery-page) .fleet-image,
  body:not(.gallery-page) .safety-img,
  body:not(.gallery-page) .gs-item,
  body:not(.gallery-page) .gg-item,
  body:not(.gallery-page) .img-strip,
  body:not(.gallery-page) .img-strip-2,
  body:not(.gallery-page) .img-strip-3,
  body:not(.gallery-page) .img-strip-4,
  body:not(.gallery-page) .welcome-img-wrap,
  body:not(.gallery-page) .welcome-img-main,
  body:not(.gallery-page) .prog-editorial,
  body:not(.gallery-page) .prog-editorial__inner,
  body:not(.gallery-page) .prog-editorial__text,
  body:not(.gallery-page) .prog-editorial__img,
  body:not(.gallery-page) .school-section,
  body:not(.gallery-page) .school-img-side {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body:not(.gallery-page) .prog-editorial__img {
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  body:not(.gallery-page) .featured-img,
  body:not(.gallery-page) .post-thumb,
  body:not(.gallery-page) .card-img,
  body:not(.gallery-page) .img-frame,
  body:not(.gallery-page) .intro-img,
  body:not(.gallery-page) .about-split-img,
  body:not(.gallery-page) .bh-split__img,
  body:not(.gallery-page) .banner-img,
  body:not(.gallery-page) .ws-card-image,
  body:not(.gallery-page) .fleet-image,
  body:not(.gallery-page) .safety-img,
  body:not(.gallery-page) .gs-item,
  body:not(.gallery-page) .gg-item,
  body:not(.gallery-page) .welcome-img-main,
  body:not(.gallery-page) .school-img-side {
    aspect-ratio: 16 / 9 !important;
  }

  body:not(.gallery-page) .img-strip,
  body:not(.gallery-page) .img-strip-2,
  body:not(.gallery-page) .img-strip-3,
  body:not(.gallery-page) .img-strip-4 {
    width: min(calc(100% - (2 * var(--page-gutter, 20px))), var(--content-max, 1136px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:not(.gallery-page) .img-frame > img,
  body:not(.gallery-page) .intro-img > img,
  body:not(.gallery-page) .about-split-img > img,
  body:not(.gallery-page) .bh-split__img > img,
  body:not(.gallery-page) .banner-img > img,
  body:not(.gallery-page) .featured-img > img,
  body:not(.gallery-page) .post-thumb > img,
  body:not(.gallery-page) .card-img > img,
  body:not(.gallery-page) .ws-card-image > img,
  body:not(.gallery-page) .fleet-image > img,
  body:not(.gallery-page) .safety-img > img,
  body:not(.gallery-page) .gs-item > img,
  body:not(.gallery-page) .gg-item > img,
  body:not(.gallery-page) .img-strip > img,
  body:not(.gallery-page) .img-strip-2 img,
  body:not(.gallery-page) .img-strip-3 img,
  body:not(.gallery-page) .img-strip-4 img,
  body:not(.gallery-page) .prog-editorial__img > img,
  body:not(.gallery-page) .welcome-img-main > img,
  body:not(.gallery-page) .school-img-side > img {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-home .welcome-img-wrap,
  body.page-home .welcome-img-main,
  body.page-home .ws-card,
  body.page-home .ws-card-image,
  body.page-home .prog-editorial,
  body.page-home .prog-editorial__inner,
  body.page-home .prog-editorial__text,
  body.page-home .prog-editorial__img,
  body.page-home .school-section,
  body.page-home .school-img-side {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-home .prog-editorial__img {
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  body.page-home .prog-editorial__img > img,
  body.page-home .welcome-img-main > img,
  body.page-home .ws-card-image > img,
  body.page-home .school-img-side > img {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Final consistency pass: keep shared intro, CTA, and image rules aligned. */
.why-sikri-intro,
.results-header,
.testimonial-section,
.quote-wrap,
.seo-link-hub__intro,
.section-intro {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.cta-band,
.cta-band-light,
.bh-cta-band,
.enrol-cta {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.cta-actions {
  justify-content: center !important;
}

.cta-band p,
.cta-band-light p,
.bh-cta-band p,
.enrol-cta p {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.about-split-img,
.intro-img,
.bh-split__img,
.banner-img,
.ws-card-image,
.fleet-image,
.safety-img,
.gs-item,
.gg-item,
.img-frame,
.prog-editorial__img {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.about-split-img,
.intro-img,
.bh-split__img {
  aspect-ratio: 4 / 3 !important;
}

.banner-img {
  aspect-ratio: 16 / 9 !important;
}

.ws-card-image,
.fleet-image,
.safety-img,
.gs-item,
.gg-item,
.img-frame,
.prog-editorial__img {
  aspect-ratio: 3 / 2 !important;
}

.about-split-img > img,
.intro-img > img,
.bh-split__img > img,
.banner-img > img,
.ws-card-image > img,
.fleet-image > img,
.safety-img > img,
.gs-item > img,
.gg-item > img,
.img-frame > img,
.prog-editorial__img > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.about-split-img:hover > img,
.intro-img:hover > img,
.bh-split__img:hover > img,
.banner-img:hover > img,
.ws-card-image:hover > img,
.fleet-image:hover > img,
.safety-img:hover > img,
.gs-item:hover > img,
.gg-item:hover > img,
.img-frame:hover > img,
.prog-editorial__img:hover > img {
  transform: scale(1.04) !important;
}

.img-strip > img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Align section body copy with the About page "Who We Are" text treatment. */
:where(.page-intro,
.page-banner,
.page-header,
.section,
.bh-section,
.prog-intro,
.prog-offers,
.prog-resources,
.about-split-text,
.prog-editorial__text,
.intro-text,
.intro-wrap,
.content-grid,
.features-grid,
.card-grid,
.resource-grid,
.level-card-grid,
.programme-grid,
.values-row,
.mv-grid,
.cta-band,
.bh-cta-band,
.enrol-cta,
.legal-main) :where(p, li, .lead, .bh-p, .prog-editorial__body, .prog-intro-text p) {
  color: var(--notable-muted, var(--soft, #586879)) !important;
  font-size: 1rem;
  line-height: 1.8 !important;
  text-align: left !important;
}

body > .img-strip,
body > .about-split,
body > .prog-editorial,
.section > .img-strip,
.section > .about-split,
.section > .prog-editorial,
.bh-section > .bh-split,
.bh-section > .prog-editorial,
main > .img-strip,
main > .about-split,
main > .prog-editorial {
  width: min(calc(100% - var(--page-gutter, 32px) - var(--page-gutter, 32px)), var(--content-max, 1136px));
  margin-left: auto !important;
  margin-right: auto !important;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-body, 'Outfit', 'Lato', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo-name,
.logo-text,
.mob-drawer-logo-name,
.footer-bottom-motto,
.ls-name,
.bh-h2,
.bh-h3,
.bh-stat__num,
.bh-banner h1,
.bh-cta-band h2,
.prog-stat strong,
.cbc-point-num,
.resource-card h3,
.section-title,
.prog-editorial__title,
.tl-item h4,
.value-block h4,
.sibling-card-body h4,
.stat-num,
.quote-mark,
.quote-text,
.merit-text strong,
.why-card-num,
.why-cta-box h3,
.cbc-intro-visual blockquote {
  font-family: var(--font-display, 'Outfit', 'Lato', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
}

/* ─────────────────────────────────────────────────────────────
   PRINT STYLES
   ───────────────────────────────────────────────────────────── */

@media print {
  
  body {
    background-color: white;
    color: black;
    line-height: 1.6;
  }

  a {
    color: var(--navy, #1a3a5c);
    text-decoration: underline;
  }

  .no-print, .nav, .header, .footer, .sticky-mobile-cta {
    display: none !important;
  }

  .page-break {
    page-break-after: always;
  }

  img {
    max-width: 100%;
  }

  h1, h2, h3, h4 {
    page-break-after: avoid;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }
}

/* ─────────────────────────────────────────────────────────────
   HOMEPAGE DESKTOP: IMAGE-LED SCHOOL LAYOUT
   Inspired by premium school homepages: large photographic hero,
   centered editorial copy, strong image tiles, and spacious split bands.
   ───────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  body.page-home {
    background: #ffffff;
  }

  body.page-home h1,
  body.page-home h2,
  body.page-home h3,
  body.page-home .logo-name {
    font-family: 'Outfit', system-ui, sans-serif !important;
    letter-spacing: 0 !important;
  }

  body.page-home .container {
    max-width: 1240px;
  }

  body.page-home .section {
    padding-top: var(--section-y) !important;
    padding-bottom: var(--section-y) !important;
  }

  body.page-home .section-tag {
    letter-spacing: .24em;
    color: var(--red, #c8102e);
  }

  body.page-home .hr-rule,
  body.page-home .hr-rule-center {
    width: 76px;
    height: 2px;
    margin-top: 1.4rem;
    margin-bottom: 2rem;
  }

  body.page-home .block-hero {
    height: min(92vh, 820px);
    min-height: 680px;
  }

  body.page-home .block-hero-bg {
    object-position: center 35%;
  }

  body.page-home .block-hero-overlay {
    background:
      linear-gradient(90deg, rgba(7, 18, 31, .78) 0%, rgba(7, 18, 31, .48) 42%, rgba(7, 18, 31, .18) 100%),
      linear-gradient(0deg, rgba(7, 18, 31, .62) 0%, rgba(7, 18, 31, .08) 54%);
  }

  body.page-home .block-hero-content {
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    width: min(1240px, calc(100% - 96px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding: 0 0 calc(var(--nav-main, 80px) + 24px);
  }

  body.page-home .block-hero-title {
    max-width: 760px;
    font-size: clamp(4rem, 7vw, 6.8rem) !important;
    line-height: .95;
    margin-bottom: 1.1rem;
    text-wrap: balance;
  }

  body.page-home .block-hero-tag {
    order: -1;
    margin-bottom: 1.35rem;
    color: rgba(255, 255, 255, .84);
  }

  body.page-home .block-hero-actions {
    justify-content: center;
  }

  body.page-home .btn-hero-primary,
  body.page-home .btn-primary,
  body.page-home .btn-cta {
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.page-home .welcome-grid {
    grid-template-columns: minmax(0, .95fr) minmax(420px, .82fr);
    gap: clamp(72px, 7vw, 112px);
  }

  body.page-home .welcome-img-wrap {
    min-height: 650px;
  }

  body.page-home .welcome-img-main {
    aspect-ratio: 5 / 6;
  }

  body.page-home .welcome-img-accent {
    width: 46%;
    right: -38px;
    bottom: -38px;
    border-width: 10px;
  }

  body.page-home .welcome-badge {
    left: auto;
    right: -34px;
    top: 34px;
    padding: 16px 20px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .22);
  }

  body.page-home .welcome-text {
    align-self: center;
  }

  body.page-home .welcome-text h2 {
    font-size: clamp(2.5rem, 3.8vw, 4.35rem) !important;
    line-height: 1.02;
    max-width: 620px;
  }

  body.page-home .welcome-text p {
    max-width: 620px;
    font-size: 1.03rem;
  }

  body.page-home .why-sikri-intro,
  body.page-home .seo-link-hub__intro,
  body.page-home .results-header {
    max-width: 780px;
    margin-bottom: clamp(56px, 5vw, 76px);
  }

  body.page-home .why-sikri-intro h2,
  body.page-home .seo-link-hub__intro h2,
  body.page-home .cta-band-light h2 {
    font-size: clamp(2.45rem, 3.8vw, 4.1rem) !important;
    line-height: 1.04;
    text-wrap: balance;
  }

  body.page-home .why-sikri-intro p,
  body.page-home .seo-link-hub__intro p,
  body.page-home .cta-band-light p {
    max-width: 780px;
    margin-left: 0;
    margin-right: 0;
    text-align: left !important;
  }

  body.page-home .why-sikri-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-bottom: clamp(84px, 8vw, 120px);
    border: 1px solid rgba(26, 58, 92, .1);
  }

  body.page-home .ws-card {
    border: 0;
    border-right: 1px solid rgba(26, 58, 92, .1);
    box-shadow: none;
    min-height: 620px;
  }

  body.page-home .ws-card:last-child {
    border-right: 0;
  }

  body.page-home .ws-card-image {
    aspect-ratio: 4 / 3.25;
  }

  body.page-home .ws-card-badge {
    top: auto;
    right: auto;
    left: 24px;
    bottom: 24px;
    background: rgba(7, 18, 31, .82);
  }

  body.page-home .ws-card-body {
    padding: 34px 32px 38px;
    border-top: 0;
  }

  body.page-home .ws-card-icon {
    display: none;
  }

  body.page-home .ws-card-body h3 {
    font-size: 1.75rem;
    line-height: 1.12;
  }

  body.page-home .ws-card-body > p,
  body.page-home .ws-card-features li {
    font-size: .95rem;
  }

  body.page-home .prog-editorial {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-top: 1px solid rgba(26, 58, 92, .1);
  }

  body.page-home .prog-editorial__inner {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    min-height: 520px;
    gap: 0 !important;
  }

  body.page-home .prog-editorial--reverse .prog-editorial__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
  }

  body.page-home .prog-editorial__text {
    padding: clamp(48px, 5vw, 72px) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
  }

  body.page-home .prog-editorial__img {
    min-height: 520px;
  }

  body.page-home .prog-editorial__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.page-home .prog-editorial__title {
    font-size: clamp(2rem, 3vw, 3.2rem) !important;
    line-height: 1.04;
  }

  body.page-home .prog-editorial__body {
    max-width: 640px;
  }

  body.page-home .school-section {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    min-height: 640px;
  }

  body.page-home .school-img-side {
    min-height: 640px;
  }

  body.page-home .school-text {
    padding: clamp(70px, 7vw, 108px);
  }

  body.page-home .school-text h2 {
    font-size: clamp(2.45rem, 3.6vw, 4rem) !important;
    line-height: 1.04;
  }

  body.page-home .prog-editorial--feature,
  body.page-home .prog-editorial--compact,
  body.page-home .prog-editorial--legacy,
  body.page-home .prog-editorial--wide {
    padding: clamp(42px, 4.5vw, 72px) 0 !important;
  }

  body.page-home .prog-editorial--feature .prog-editorial__inner,
  body.page-home .prog-editorial--compact .prog-editorial__inner,
  body.page-home .prog-editorial--legacy .prog-editorial__inner,
  body.page-home .prog-editorial--wide .prog-editorial__inner {
    min-height: 0;
    gap: 0 !important;
    align-items: stretch;
  }

  body.page-home .prog-editorial--feature .prog-editorial__text,
  body.page-home .prog-editorial--feature .prog-editorial__img,
  body.page-home .prog-editorial--compact .prog-editorial__text,
  body.page-home .prog-editorial--compact .prog-editorial__img,
  body.page-home .prog-editorial--legacy .prog-editorial__text,
  body.page-home .prog-editorial--legacy .prog-editorial__img,
  body.page-home .prog-editorial--wide .prog-editorial__text,
  body.page-home .prog-editorial--wide .prog-editorial__img {
    min-width: 0;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-home .prog-editorial--feature .prog-editorial__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important;
  }

  body.page-home .prog-editorial--feature .prog-editorial__img {
    order: 1;
    min-height: 620px;
    aspect-ratio: auto !important;
  }

  body.page-home .prog-editorial--feature .prog-editorial__text {
    order: 2;
    background: var(--navy-dark, #0d2540);
    padding: clamp(54px, 5vw, 84px) !important;
  }

  body.page-home .prog-editorial--feature .prog-editorial__label {
    color: #ffb6c1;
  }

  body.page-home .prog-editorial--feature .prog-editorial__title {
    color: #fff;
  }

  body.page-home .prog-editorial--feature .prog-editorial__body {
    color: rgba(255, 255, 255, .78);
  }

  body.page-home .prog-editorial--feature .prog-editorial__cta {
    background: #fff;
    color: var(--navy-dark, #0d2540);
  }

  body.page-home .prog-editorial--compact .prog-editorial__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
  }

  body.page-home .prog-editorial--compact .prog-editorial__text {
    order: 1;
    padding: clamp(42px, 4vw, 64px) !important;
    background: #fff;
    border-left: 4px solid var(--red, #c8102e);
  }

  body.page-home .prog-editorial--compact .prog-editorial__img {
    order: 2;
    min-height: 430px;
    aspect-ratio: auto !important;
  }

  body.page-home .prog-editorial--legacy .prog-editorial__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important;
  }

  body.page-home .prog-editorial--legacy .prog-editorial__text {
    order: 1;
    position: relative;
    padding: clamp(54px, 5vw, 78px) !important;
    background: #fff;
    overflow: hidden;
  }

  body.page-home .prog-editorial--legacy .prog-editorial__text::before {
    content: "12+";
    position: absolute;
    top: clamp(18px, 3vw, 34px);
    right: clamp(24px, 4vw, 54px);
    font-family: var(--font-display, 'Outfit', sans-serif);
    font-size: clamp(5rem, 10vw, 9rem);
    line-height: .8;
    font-weight: 800;
    color: rgba(200, 16, 46, .08);
    pointer-events: none;
  }

  body.page-home .prog-editorial--legacy .prog-editorial__img {
    order: 2;
    min-height: 560px;
    aspect-ratio: auto !important;
  }

  body.page-home .prog-editorial--wide .prog-editorial__inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-home .prog-editorial--wide .prog-editorial__img {
    order: 1;
    min-height: 420px;
    aspect-ratio: 21 / 9 !important;
  }

  body.page-home .prog-editorial--wide .prog-editorial__text {
    order: 2;
    max-width: 880px;
    padding: clamp(38px, 4vw, 58px) 0 0 !important;
    background: transparent;
  }

  body.page-home .prog-editorial--wide .prog-editorial__body {
    max-width: 820px;
  }

  body.page-home .prog-editorial--compact .prog-editorial__cta,
  body.page-home .prog-editorial--legacy .prog-editorial__cta,
  body.page-home .prog-editorial--wide .prog-editorial__cta {
    background: var(--navy, #1a3a5c) !important;
    color: #fff !important;
  }

  body.page-home .seo-link-hub {
    padding-top: clamp(92px, 8vw, 128px);
    padding-bottom: clamp(92px, 8vw, 128px);
  }

  body.page-home .seo-link-hub__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid rgba(26, 58, 92, .1);
  }

  body.page-home .seo-link-hub__link {
    min-height: 190px;
    border: 0;
    border-right: 1px solid rgba(26, 58, 92, .1);
    border-bottom: 1px solid rgba(26, 58, 92, .1);
    border-top: 4px solid transparent;
    padding: 30px 28px;
    box-shadow: none !important;
  }

  body.page-home .seo-link-hub__link:nth-child(4n) {
    border-right: 0;
  }

  body.page-home .seo-link-hub__link:nth-last-child(-n+4) {
    border-bottom: 0;
  }

  body.page-home .seo-link-hub__link:hover {
    transform: none;
    border-top-color: var(--red, #c8102e);
    background: #faf8f4;
  }

  body.page-home .seo-link-hub__link strong {
    font-size: 1.28rem;
    line-height: 1.18;
  }

  body.page-home .cta-band-light {
    padding-top: clamp(96px, 8vw, 132px);
    padding-bottom: clamp(96px, 8vw, 132px);
    background: #f7f5f0;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  body.page-home .block-hero-content {
    width: min(1120px, calc(100% - 64px));
  }

  body.page-home .welcome-grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }

  body.page-home .why-sikri-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.page-home .ws-card-body {
    padding: 30px 24px 34px;
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP HORIZONTAL MARGINS (LEFT & RIGHT)
   Applied to all pages for consistent centered layout with white space
   ───────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  /* Ensure all sections have horizontal margins on larger screens */
  body {
    margin-left: 0;
    margin-right: 0;
  }

  /* Content regions get centered with margins */
  main {
    margin-left: auto;
    margin-right: auto;
  }

  /* All major section blocks get margin treatment */
  .section, .bh-section, .prog-intro, .prog-offers, .prog-resources,
  .enrol-cta, .cta-band, .bh-cta-band, .cbc-strip, .transport-section,
  .legal-main, .page-intro, .bh-banner, .page-header, .page-banner {
    margin-left: auto;
    margin-right: auto;
  }

  /* Full-width sections stay full-width but their containers have margins */
  .section > .container,
  .bh-section > .container {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP WIDE SCREENS: ENHANCED MARGINS (1200px+)
   Adds substantial left/right spacing on screens wider than 1200px
   ───────────────────────────────────────────────────────────── */

@media (min-width: 1200px) {
  /* Containers already have max-width, margins auto handles centering */
  .container {
    margin-left: auto;
    margin-right: auto;
  }

  /* Split layouts get better spacing */
  .about-split, .bh-split {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }

  /* prog-editorial full-bleed rules are owned by global_min.css with proper scoping.
     No generic override needed here. */

  /* Images and full-width content */
  body > .img-strip,
  body > .about-split,
  .section > .img-strip,
  .section > .about-split {
    margin-left: auto;
    margin-right: auto;
  }
}

.cta-band,
.cta-band-light,
.bh-cta-band,
.enrol-cta,
.cta-band .container,
.cta-band-light .container,
.bh-cta-band .container,
.enrol-cta .container,
.cta-band-inner {
  text-align: center !important;
}

.cta-band h2,
.cta-band-light h2,
.bh-cta-band h2,
.enrol-cta h2 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.cta-band p,
.cta-band-light p,
.bh-cta-band p,
.enrol-cta p {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.cta-actions,
.bh-cta-btns {
  justify-content: center !important;
}

.cta-actions > *,
.bh-cta-btns > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (min-width: 769px) {
  .page-intro .container {
    text-align: center !important;
  }

  .page-intro .page-tag,
  .page-intro h1,
  .page-intro p,
  .page-intro p.lead {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}