/* ===========================================================================
Sikri Academy — styles.css
Consolidated stylesheet (merged from global.min.css, main.min.css,
responsive-improvements.css, site-consistency.css) + mega-menu nav,
homepage photo-grid hero, and alternating content-section restyle.
=========================================================================== */
/* ---- from css/global.min.css ---- */
/* Outfit + Playfair Display (italic accent weight) are loaded via tags in (see partials/head). */
/* Blog redesign (2026-09) needs upright Playfair Display weights for editorial headlines that individual
blog/*.html post pages don't link directly — pulled here via @import (must stay the first rule in the
file per the CSS spec) instead of editing all 47 post templates. See the "BLOG REDESIGN" block at the
end of this file for where it's used. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400&display=swap');
/* ── TOKENS ── */
:root{
--font-body:'Outfit',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--font-display:'Outfit',system-ui,sans-serif;
--font-family:'Outfit',system-ui,sans-serif;
--navy:#1a3a5c;--navy-dark:#0d2540;--red:#c8102e;--red-dark:#a00d24;
--cream:#f7f5f0;--dark:#111820;--text:#2c3e50;
--soft:#586879;--white:#ffffff;--border:rgba(26,58,92,.1);
--color-navy:var(--navy);--color-navy-dark:var(--navy-dark);--color-red:var(--red);--color-red-dark:var(--red-dark);
--color-cream:var(--cream);--color-text:var(--text);--color-text-dark:var(--dark);--color-text-muted:var(--soft);
--color-white:var(--white);--color-border:var(--border);--text-body:1rem;--text-small:.85rem;--text-label:.68rem;--text-nav:.8rem;
--leading-body:1.75;--leading-heading:1.2;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:40px;--space-8:48px;--space-9:64px;
--container-max:1200px;--radius-control:2px;--radius-card:4px;--radius-image:8px;--radius-pill:100px;--radius-circle:50%;
--shadow:0 2px 20px rgba(0,0,0,.08);--shadow-lg:0 8px 40px rgba(0,0,0,.14);
--t:.3s cubic-bezier(.4,0,.2,1);--nav-main:80px;
--page-gutter:clamp(20px,4vw,32px);
--section-y:48px;--section-y-compact:40px;
--block-gap:clamp(12px,2.5vw,24px);
--content-max:calc(1200px - 2*var(--page-gutter))
}
@media(max-width:900px){:root{--section-y:36px;--section-y-compact:32px}}
@media(max-width:640px){:root{--section-y:28px;--section-y-compact:24px;--block-gap:16px}}
/* ── BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-family:var(--font-body);text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--white);color:var(--text);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body,button,input,select,textarea{font-family:var(--font-body)!important}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display)!important;font-weight:600;line-height:1.2;color:var(--dark)}
h1{font-size:clamp(2.4rem,5.5vw,4rem)}
h2{font-size:clamp(1.9rem,4vw,2.8rem)}
h3{font-size:clamp(1.3rem,2.5vw,1.65rem)}
h4{font-size:1.1rem}
p{color:var(--soft);line-height:var(--leading-body)}
em{font-style:italic;color:var(--red)}
p,li,.lead,.bh-p,.prog-intro-text p,.footer-tagline,.footer-address p{line-height:var(--leading-body)}
.logo-name,.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{font-family:var(--font-display)!important}
.btn,.nav-enquire,.btn-red-solid,.btn-navy-outline,.bh-btn-white,.bh-btn-ghost,.mob-cta{font-family:var(--font-body)!important}
/* ── LAYOUT ── */
/* .container max-width and margins: single owner. Source of truth for all container sizing.
!important: Overrides page-level or component-level width/margin declarations to prevent overflow or centering issues. */
.container{max-width:1200px!important;margin-left:auto!important;margin-right:auto!important;padding-left:var(--page-gutter)!important;padding-right:var(--page-gutter)!important;padding-top:0!important;padding-bottom:0!important}
body>.img-strip,body>.about-split,.section>.img-strip,.section>.about-split,main>.img-strip,main>.about-split{width:min(calc(100% - 2*var(--page-gutter)),var(--content-max));margin-left:auto!important;margin-right:auto!important}
/* prog-editorial is full-bleed by design — image fills one half edge-to-edge */
body>.prog-editorial,.section>.prog-editorial,.bh-section>.prog-editorial,main>.prog-editorial{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
/* ── SECTION CHROME ── */
.section-rule{display:block;width:100%;height:1px;background:var(--border)}
.section-light{background:var(--white)}
.section-cream{background:var(--cream)}
.section-navy{background:var(--navy)}
.section-intro{text-align:left;margin:0 0 32px}
.hr-rule{display:block;width:56px;height:3px;background:var(--red);margin:1.5rem 0 2rem;border:none}
.hr-rule-center{margin-left:auto;margin-right:auto}
/* ── SECTION SPACING ──
NOTE: section padding is owned by site-consistency.css and applied via !important.
Do not redefine padding here. Other properties (margin, etc.) can be set here. */
.section,.section-light,.section-cream,.section-navy,.bh-section,.prog-intro,.prog-offers,.prog-resources,.cbc-strip,.transport-hero,.transport-section,.legal-main{content-visibility:visible}
.section-intro{margin-bottom:var(--block-gap)!important}
.prog-offers-grid,.resources-grid,.bh-resources,.bh-stats,.bh-features,.values-row,.mv-grid{margin-top:var(--block-gap)}
/* ── PAGE INTRO ── */
.page-intro{background:var(--cream);border-bottom:1px solid var(--border)}
.page-intro .page-tag{font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:.6rem}
.page-intro h1{color:var(--dark);margin-bottom:.6rem}
.page-intro p.lead{color:var(--soft);font-size:1rem;max-width:580px;line-height:var(--leading-body)}
.page-intro h1,.page-intro p,.bh-banner h1,.bh-banner-sub,.bh-cta-band h2,.bh-cta-band p{max-width:680px}
/* ── TEXT CONSTRAINTS ── */
: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:var(--text-body);line-height:var(--leading-body)!important;text-align:left!important}
/* ── ALIGNMENT ── */
.why-sikri-intro,.results-header,.testimonial-section,.quote-wrap,.cta-band,.seo-link-hub__intro,.section-intro{text-align:left!important;margin-left:0!important;margin-right:0!important}
.cta-band-light{text-align:center!important}
.cta-actions{display:flex;gap:16px;justify-content:center!important;flex-wrap:wrap}
.cta-band p,.bh-cta-band p{margin-left:0!important;margin-right:0!important}
.cta-band-light p{margin-left:auto!important;margin-right:auto!important}
/* ── NAV ── */
.main-nav{position:fixed;top:0;left:0;right:0;z-index:900;background:transparent;border-bottom:1px solid transparent;box-shadow:none;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,transform .28s ease}
.main-nav.nav-solid{background:var(--white);border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
.main-nav.nav-up{transform:translateY(-100%)}
.main-nav.nav-down{transform:translateY(0)}
.main-nav:not(.nav-solid) .logo-name{color:#fff!important}
.main-nav:not(.nav-solid) .logo-sub{color:rgba(255,255,255,.75)!important}
.main-nav:not(.nav-solid) .nav-item>a{color:rgba(255,255,255,.9)}
.main-nav:not(.nav-solid) .nav-item>a::after{background:#fff}
.main-nav:not(.nav-solid) .nav-item:hover>a{color:#fff}
.main-nav:not(.nav-solid) .hamburger span{background:#fff}
.logo-name{color:var(--navy)!important}
.logo-sub{color:var(--soft)!important}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-main)}
.nav-logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-logo img{width:48px;height:48px;object-fit:contain;flex-shrink:0}
.nav-logo .logo-white{display:block}
.nav-logo .logo-colour{display:none}
.main-nav.nav-solid .nav-logo .logo-white{display:none}
.main-nav.nav-solid .nav-logo .logo-colour{display:block}
.logo-text{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap}
.logo-name{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--dark)}
.logo-sub{font-size:.6rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.nav-links{display:flex;align-items:stretch;height:100%;gap:2px}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item>a{display:flex;align-items:center;gap:4px;padding:0 14px;height:var(--nav-main);font-size:.82rem;font-weight:500;color:var(--text);white-space:nowrap;transition:color var(--t);position:relative}
.nav-item>a::after{content:'';position:absolute;bottom:0;left:14px;right:14px;height:3px;background:var(--red);transform:scaleX(0);transition:transform var(--t);border-radius:2px 2px 0 0}
.nav-item:hover>a{color:var(--navy)}
.nav-item:hover>a::after,.nav-item>a.active::after{transform:scaleX(1)}
.chev{display:inline-block;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--t);flex-shrink:0}
.nav-item:hover .chev{transform:rotate(-135deg) translateY(-2px)}
.drop-panel{position:absolute;top:100%;left:0;min-width:210px;background:var(--white);border-top:3px solid var(--red);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--t),visibility var(--t),transform var(--t);z-index:800}
.nav-item:hover .drop-panel{opacity:1;visibility:visible;transform:none}
.drop-panel a{display:block;padding:11px 20px;font-size:.8rem;color:var(--soft);border-bottom:1px solid rgba(0,0,0,.04);transition:background var(--t),color var(--t),padding-left var(--t)}
.drop-panel a:last-child{border-bottom:none}
.drop-panel a:hover{background:rgba(26,58,92,.04);color:var(--navy);padding-left:26px}
.nav-enquire{margin-left:12px;padding:10px 22px;background:var(--red);color:var(--white)!important;font-size:.8rem;font-weight:600;white-space:nowrap;transition:background var(--t)!important;display:flex;align-items:center}
.nav-enquire::after{display:none!important}
.nav-enquire:hover{background:var(--red-dark)!important}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.hamburger span{display:block;width:24px;height:2px;background:var(--dark);border-radius:1px;transition:var(--t)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
.main-nav .nav-inner{height:64px}
.nav-links{display:none}
.hamburger{display:flex}
#navToggle.nav-toggle{top:10px;width:44px;height:44px}
}
/* ── MOBILE DRAWER ── */
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1800;opacity:0;transition:opacity .3s}
.mob-overlay.open{opacity:1}
.mob-drawer{position:fixed;top:0;right:0;width:min(320px,90vw);height:100vh;background:var(--white);z-index:1900;display:flex;flex-direction:column;padding:24px 28px 120px;overflow-y:auto;transform:translate3d(110%,0,0);transition:transform .4s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 40px rgba(0,0,0,.15);will-change:transform}
.mob-drawer.open{transform:translate3d(0,0,0)}
.mob-close{width:36px;height:36px;border-radius:50%;background:var(--cream);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--dark);flex-shrink:0}
.mob-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 20px;border-bottom:1px solid var(--border);margin-bottom:8px;flex-shrink:0}
.mob-drawer-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.mob-drawer-logo img{width:44px;height:44px;object-fit:contain;flex-shrink:0}
.mob-drawer-logo-text{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap}
.mob-drawer-logo-name{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--navy)}
.mob-drawer-logo-sub{font-size:.55rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.mob-group-label{display:block;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:20px 0 6px}
.mob-link{display:block;padding:12px 0;font-size:.95rem;font-weight:500;color:var(--text);border-bottom:1px solid var(--border);transition:color var(--t)}
.mob-link:hover{color:var(--navy)}
.mob-sub{display:block;padding:9px 0 9px 14px;font-size:.85rem;color:var(--soft);border-bottom:1px solid rgba(0,0,0,.04);transition:color var(--t)}
.mob-sub-label{display:block;padding:8px 0 4px 14px;font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);margin-top:8px}
.mob-sub:hover{color:var(--navy)}
.mob-cta{display:block;margin-top:24px;padding:14px;background:var(--red);color:var(--white);text-align:center;font-weight:600;font-size:.9rem}
/* ── BUTTONS ── */
.btn-primary{display:inline-block;margin-top:2rem;padding:14px 32px;background:var(--navy);color:var(--white);font-size:.875rem;font-weight:600;letter-spacing:.03em;transition:background var(--t),transform var(--t)}
.btn-primary:hover{background:var(--navy-dark);transform:translateY(-1px)}
.btn-outline{display:inline-block;padding:13px 30px;border:1.5px solid var(--navy);color:var(--navy);font-size:.875rem;font-weight:600;transition:background var(--t),color var(--t)}
.btn-outline:hover{background:var(--navy);color:var(--white)}
.btn-outline-white{display:inline-block;padding:13px 30px;border:1.5px solid rgba(255,255,255,.72);color:var(--white);font-size:.875rem;font-weight:500;transition:border-color var(--t),background var(--t)}
.btn-outline-white:hover{border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.1)}
.btn-hero-primary{padding:14px 32px;background:var(--red);color:var(--white);font-size:.875rem;font-weight:600;letter-spacing:.03em;transition:background var(--t),transform var(--t),box-shadow var(--t);display:inline-block;box-shadow:0 4px 16px rgba(200,16,46,.3)}
.btn-hero-primary:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(200,16,46,.4)}
.btn-cta{padding:15px 36px;background:var(--white);color:var(--navy);font-size:.9rem;font-weight:700;letter-spacing:.03em;transition:background var(--t),transform var(--t)}
.btn-cta:hover{background:var(--cream);transform:translateY(-1px)}
.btn-cta-primary{font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:16px 36px;font-size:.9rem}
.cta-band-light .btn-primary-cta,.cta-band-light .btn-cta,.cta-band-light .btn-hero-primary{display:inline-block;padding:14px 36px;background:var(--red);color:#fff;font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:background .25s ease,transform .2s ease}
.cta-band-light .btn-primary-cta:hover,.cta-band-light .btn-cta:hover,.cta-band-light .btn-hero-primary:hover{background:var(--red-dark);transform:translateY(-1px)}
.cta-band-light .btn-secondary-cta,.cta-band-light .btn-outline,.cta-band-light .btn-outline-white{display:inline-block;padding:13px 30px;border:1.5px solid var(--navy);color:var(--navy);font-size:.85rem;font-weight:600;transition:background .25s ease,color .25s ease;margin-left:12px}
.cta-band-light .btn-secondary-cta:hover,.cta-band-light .btn-outline:hover,.cta-band-light .btn-outline-white:hover{background:var(--navy);color:#fff}
/* ── CTA BANDS ── */
.cta-band h2{color:var(--white);margin-bottom:1rem}
.cta-band p{color:rgba(255,255,255,.95);font-size:1rem;max-width:500px}
.cta-band-light h2{color:var(--dark);margin-bottom:1rem}
.cta-band-light p{color:var(--soft);max-width:500px;margin:0 auto 2.5rem;font-size:1rem}
/* ── HERO ── */
.block-hero{position:relative;width:100%;height:100vh;min-height:600px;overflow:hidden;background:#1a2a3a}
.block-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;will-change:transform}
.block-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,21,32,.45) 0%,rgba(10,21,32,.55) 50%,rgba(10,21,32,.72) 100%)}
.block-hero-content{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:0 7vw 80px;max-width:100%;margin:0 auto}
.block-hero-tag{font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:.75rem;display:block}
.block-hero-title{font-size:clamp(2.8rem,6vw,4.8rem);font-weight:700;color:#fff;line-height:1.08;margin-bottom:1.5rem}
.block-hero-title em{color:#fff;font-style:normal}
.block-hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
@media(max-width:640px){
.block-hero{height:100svh;min-height:560px}
.block-hero-bg{object-position:50% 25%}
.block-hero-content{padding:0 24px 64px}
}
/* ── CARDS ── */
.ws-card{background:var(--white);border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--t),transform var(--t);box-shadow:var(--shadow);contain:layout style}
.ws-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px)}
.ws-card-image{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:transparent}
.ws-card-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.ws-card:hover .ws-card-image img{transform:scale(1.08)}
.ws-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,20,35,.38) 0%,transparent 65%)}
.ws-card-badge{position:absolute;top:14px;right:14px;background:var(--red);color:var(--white);font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;z-index:2}
.ws-card-body{padding:28px 24px 32px;display:flex;flex-direction:column;flex:1;border-top:3px solid var(--red)}
.ws-card-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:rgba(200,16,46,.08);border-radius:50%;margin-bottom:14px;flex-shrink:0}
.ws-card-icon svg{color:var(--red)}
.ws-card-body h3{font-size:1.3rem;font-weight:700;color:var(--dark);margin-bottom:10px;line-height:1.3}
.ws-card-body>p{font-size:.9rem;color:var(--soft);line-height:1.65;margin-bottom:18px}
.ws-card-features{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:8px}
.ws-card-features li{display:flex;align-items:flex-start;gap:9px;font-size:.84rem;color:var(--text);line-height:1.5}
.ws-card-features li .feat-dot{display:inline-block;width:6px;height:6px;background:var(--red);border-radius:50%;flex-shrink:0;margin-top:7px}
.ws-card-link{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);border-bottom:1.5px solid var(--navy);padding-bottom:2px;transition:color var(--t),border-color var(--t);width:fit-content;margin-top:auto}
.ws-card-link svg{transition:transform var(--t)}
.ws-card:hover .ws-card-link{color:var(--red);border-color:var(--red)}
.ws-card:hover .ws-card-link svg{transform:translateX(4px)}
.ws-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--border);margin-top:48px}
.ws-pillar{background:var(--white);padding:36px 24px;display:flex;flex-direction:column;gap:14px;transition:background var(--t)}
.ws-pillar:hover{background:var(--cream)}
.ws-pillar-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(200,16,46,.08);border-radius:50%}
.ws-pillar-icon svg{color:var(--red)}
.ws-pillar h4{font-size:1.1rem;font-weight:700;color:var(--dark);line-height:1.3}
.ws-pillar p{font-size:.875rem;line-height:1.7;margin:0}
@media(max-width:900px){.ws-pillars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ws-pillars{grid-template-columns:1fr}}
.ws-card,.resource-card,.programme-card,.value-card,.mv-card,.bh-feature,.bh-resource-card,.sibling-card,.seo-link-hub__link{contain:layout style}
/* ── RESULTS ── */
.results-header{text-align:left;margin-bottom:56px}
.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(255,255,255,.1)}
.result-item{background:var(--navy);padding:40px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.result-num{font-size:3.5rem;font-weight:700;color:var(--white);line-height:1}
.result-label{font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
@media(max-width:900px){.results-grid{grid-template-columns:repeat(2,1fr)}}
/* ── TESTIMONIAL ── */
.testimonial-section{text-align:left}
.quote-wrap{max-width:760px;margin:0}
.quote-mark{font-size:7rem;line-height:.4;color:var(--red);opacity:.2;display:block;margin-bottom:1rem}
.quote-text{font-size:clamp(1.4rem,3vw,2rem);font-style:italic;font-weight:400;color:var(--dark);line-height:1.5;margin-bottom:1.5rem}
.quote-cite{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
/* ── IMAGE FRAMES ── */
.img-frame,.intro-img,.about-split-img,.bh-split__img,.ws-card-image,.banner-img,.fleet-image,.safety-img,.gs-item,.gg-item,.prog-editorial__img{position:relative!important;overflow:hidden!important;box-shadow:none!important}
/* Card/thumbnail frames get rounded corners; editorial image panels do not */
.img-frame,.intro-img,.about-split-img,.bh-split__img,.ws-card-image,.banner-img,.fleet-image,.safety-img,.gs-item,.gg-item{border-radius:4px!important}
.prog-editorial__img{border-radius:0!important}
.about-split-img,.intro-img,.bh-split__img{aspect-ratio:4/3!important;background:transparent}
.banner-img{aspect-ratio:16/9!important}
.ws-card-image,.fleet-image,.safety-img,.gs-item,.gg-item,.img-frame{aspect-ratio:3/2!important}
/* prog-editorial__img fills its grid column — height driven by the row, not a fixed ratio */
.prog-editorial__img{aspect-ratio:unset!important;min-height:420px}
.img-frame>img,.intro-img>img,.about-split-img>img,.bh-split__img>img,.ws-card-image>img,.banner-img>img,.fleet-image>img,.safety-img>img,.gs-item>img,.gg-item>img,.prog-editorial__img>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;display:block!important;transition:transform .6s cubic-bezier(.4,0,.2,1)!important}
.img-frame:hover>img,.intro-img:hover>img,.about-split-img:hover>img,.bh-split__img:hover>img,.ws-card-image:hover>img,.banner-img:hover>img,.fleet-image:hover>img,.safety-img:hover>img,.gs-item:hover>img,.gg-item: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!important;display:block!important}
.site-natural-image-frame{aspect-ratio:var(--site-image-ratio)}
.school-img-side{position:relative;overflow:hidden;min-height:480px;background:#c0d0dc}
.school-img-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.school-img-side:hover img{transform:scale(1.04)}
@media(max-width:900px){.school-img-side{min-height:280px}}
/* ── FOOTER ── */
.footer{background:var(--white)}
.footer-top{display:grid;grid-template-columns:1.4fr 1.6fr 1fr 1fr;background:var(--navy-dark);border-top:none}
.footer-top-col{padding:52px 40px;border-right:1px solid rgba(255,255,255,.07)}
.footer-top-col:last-child{border-right:none}
.footer-logo-img{width:92px;height:auto;object-fit:contain;margin-bottom:1rem}
.footer-tagline{font-size:.82rem;color:rgba(255,255,255,.76);line-height:1.75;max-width:220px;margin-top:.5rem}
.footer-col-label{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#ff8fa0;margin-bottom:1.25rem;display:block}
.footer-address p{font-size:.85rem;color:rgba(255,255,255,.76);line-height:1.75;margin-bottom:.25rem}
.footer-address a{color:rgba(255,255,255,.76);transition:color var(--t)}
.footer-address a:hover{color:rgba(255,255,255,.95)}
.footer-address .addr-group{margin-bottom:1.25rem}
.footer-address .addr-group:last-child{margin-bottom:0}
.footer-nav-col a{display:block;font-size:.85rem;color:rgba(255,255,255,.76);margin-bottom:.6rem;transition:color var(--t),padding-left var(--t)}
.footer-nav-col a:hover{color:rgba(255,255,255,.95);padding-left:4px}
.footer-social-list{list-style:none;padding:0;margin:0}
.footer-social-list li{display:flex;align-items:center;gap:12px;margin-bottom:.85rem}
.footer-social-list li:last-child{margin-bottom:0}
.footer-social-icon-wrap{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--t)}
.footer-social-list li:hover .footer-social-icon-wrap{background:rgba(255,255,255,.2)}
.footer-social-list li:hover .footer-social-icon-wrap svg{fill:white!important}
.footer-social-label{font-size:.82rem;font-weight:500;color:rgba(255,255,255,.8);transition:color var(--t)}
.footer-social-list li:hover .footer-social-label{color:rgba(255,255,255,.95)}
.footer-bottom{background:#0a1520;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:20px 40px}
.footer-bottom-brand{display:flex;align-items:center;gap:14px}
.footer-bottom-badge{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.2);padding:5px 10px;border-radius:2px}
.footer-bottom-motto{font-style:italic;font-size:.95rem;color:rgba(255,255,255,.76)}
.footer-bottom-right{display:flex;align-items:center;flex-wrap:wrap;gap:20px}
.footer-copyright{font-size:.72rem;color:rgba(255,255,255,.72)}
.footer-legal{display:flex;gap:20px;flex-wrap:wrap}
.footer-legal a{font-size:.72rem;color:rgba(255,255,255,.72);transition:color var(--t)}
.footer-legal a:hover{color:rgba(255,255,255,.85)}
@media(max-width:1100px){.footer-top{grid-template-columns:1fr 1fr}.footer-top-col{border-bottom:1px solid rgba(26,58,92,.08)}.footer-top-col:nth-child(2n){border-right:none}}
@media(max-width:640px){.footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-top-col{border-right:none;padding:28px 18px}.footer-bottom{flex-direction:column;align-items:flex-start;padding:20px 24px}.footer-logo-img{width:72px}.footer-tagline{font-size:.78rem;max-width:none}}
/* ── SEO LINK HUB ── */
.seo-link-hub{background:var(--white);padding:0 0 24px}
.seo-link-hub__intro{max-width:720px;margin:0 0 var(--block-gap);text-align:left}
.seo-link-hub__intro p{color:var(--soft);margin-top:.75rem}
.seo-link-hub__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.seo-link-hub__link{display:flex;flex-direction:column;justify-content:space-between;padding:24px 22px;border:1px solid var(--border);border-top:3px solid var(--red);background:var(--white);transition:box-shadow var(--t),transform var(--t),border-top-color var(--t);text-decoration:none}
.seo-link-hub__link:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-top-color:var(--navy)}
.seo-link-hub__link strong{font-size:1.05rem;font-weight:700;color:var(--dark);line-height:1.35;display:block;margin-bottom:12px}
.seo-link-hub__link span{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:5px}
.seo-link-hub__link span::after{content:'\2192';font-size:.85em;transition:transform var(--t)}
.seo-link-hub__link:hover span{color:var(--navy)}
.seo-link-hub__link:hover span::after{transform:translateX(3px)}
@media(max-width:900px){.seo-link-hub__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.seo-link-hub__grid{gap:10px}.seo-link-hub__link{padding:18px 14px}.seo-link-hub__link strong{font-size:.92rem}}
/* ── WHATSAPP FAB ── */
.wa-btn{position:fixed;bottom:28px;right:28px;z-index:9999;width:54px;height:54px;border-radius:50%;background:#0f7a41;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.4);transition:transform .2s,box-shadow .2s}
.wa-btn svg{color:#fff;fill:#fff}
.wa-btn:hover{transform:scale(1.1);box-shadow:0 8px 28px rgba(37,211,102,.55)}
/* ── STICKY CTA ── */
#stickyCTA{display:none!important;visibility:hidden!important}
/* ── REVEAL ANIMATION ── */
.reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .7s ease,transform .7s cubic-bezier(.2,1,.3,1);will-change:opacity,transform}
.reveal.active{opacity:1;transform:translate3d(0,0,0);will-change:auto}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}img.lazyload{transition:none}}
/* ── LAZY IMAGES ── */
img.lazyload{opacity:0;transition:opacity .5s ease}
img.lazyload.loaded{opacity:1}
/* ── PERFORMANCE ── */
.block-hero-bg,.page-hero-bg{will-change:transform}
/* ---- from css/main.min.css ---- */
:root {
--font-body: "Outfit", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;
--font-display: "Outfit", system-ui, sans-serif;
--font-family: "Outfit", system-ui, sans-serif;
--navy: #1a3a5c;
--navy-dark: #0d2540;
--red: #c8102e;
--red-dark: #a00d24;
--cream: #f7f5f0;
--dark: #111820;
--text: #2c3e50;
--soft: #586879;
--white: #ffffff;
--border: rgba(26, 58, 92, 0.1);
--color-navy: var(--navy);
--color-navy-dark: var(--navy-dark);
--color-red: var(--red);
--color-red-dark: var(--red-dark);
--color-cream: var(--cream);
--color-text: var(--text);
--color-text-dark: var(--dark);
--color-text-muted: var(--soft);
--color-white: var(--white);
--color-border: var(--border);
--text-body: 1rem;
--text-small: 0.85rem;
--text-label: 0.68rem;
--text-nav: 0.8rem;
--leading-body: 1.75;
--leading-heading: 1.2;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 40px;
--space-8: 48px;
--space-9: 64px;
--container-max: 1200px;
--radius-control: 2px;
--radius-card: 4px;
--radius-image: 8px;
--radius-pill: 100px;
--radius-circle: 50%;
--shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.14);
--t: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--nav-main: 80px;
--page-gutter: clamp(20px, 4vw, 32px);
--section-y: 48px;
--section-y-compact: 40px;
--block-gap: clamp(12px, 2.5vw, 24px);
--content-max: calc(1200px - 2 * var(--page-gutter));
}
@media (max-width: 900px) {
:root {
--section-y: 36px;
--section-y-compact: 32px;
}
}
@media (max-width: 640px) {
:root {
--section-y: 28px;
--section-y-compact: 24px;
--block-gap: 16px;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-family: var(--font-body);
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background: var(--white);
color: var(--text);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-display) !important;
font-weight: 600;
line-height: 1.2;
color: var(--dark);
}
h1 {
font-size: clamp(2.4rem, 5.5vw, 4rem);
}
h2 {
font-size: clamp(1.9rem, 4vw, 2.8rem);
}
h3 {
font-size: clamp(1.3rem, 2.5vw, 1.65rem);
}
h4 {
font-size: 1.1rem;
}
p {
color: var(--soft);
line-height: var(--leading-body);
}
em {
font-style: italic;
color: var(--red);
}
.logo-name,
.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 {
font-family: var(--font-display) !important;
}
.btn,
.nav-enquire,
.btn-red-solid,
.btn-navy-outline,
.bh-btn-white,
.bh-btn-ghost,
.mob-cta {
font-family: var(--font-body) !important;
}
.container {
max-width: var(--container-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--page-gutter) !important;
padding-right: var(--page-gutter) !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body > .img-strip,
body > .about-split,
.section > .img-strip,
.section > .about-split,
main > .img-strip,
main > .about-split {
width: min(calc(100% - 2 * var(--page-gutter)), var(--content-max));
margin-left: auto !important;
margin-right: auto !important;
}
.section-rule {
display: block;
width: 100%;
height: 1px;
background: var(--border);
}
.section-light {
background: var(--white);
}
.section-cream {
background: var(--cream);
}
.section-navy {
background: var(--navy);
}
.section-intro {
text-align: left;
margin: 0 0 32px;
}
.hr-rule {
display: block;
width: 56px;
height: 3px;
background: var(--red);
margin: 1.5rem 0 2rem;
border: none;
}
.hr-rule-center {
margin-left: auto;
margin-right: auto;
}
.section,
.section-light,
.section-cream,
.section-navy,
.bh-section,
.prog-intro,
.prog-offers,
.prog-resources,
.cbc-strip,
.transport-hero,
.transport-section,
.legal-main {
content-visibility: visible;
}
.section-intro {
margin-bottom: var(--block-gap) !important;
}
.prog-offers-grid,
.resources-grid,
.bh-resources,
.bh-stats,
.bh-features,
.values-row,
.mv-grid {
margin-top: var(--block-gap);
}
.page-intro {
background: var(--cream);
border-bottom: 1px solid var(--border);
}
.page-intro .page-tag {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--red);
display: block;
margin-bottom: 0.6rem;
}
.page-intro h1 {
color: var(--dark);
margin-bottom: 0.6rem;
}
.page-intro p.lead {
color: var(--soft);
font-size: 1rem;
max-width: 580px;
line-height: 1.75;
}
.why-sikri-intro,
.results-header,
.testimonial-section,
.quote-wrap,
.cta-band,
.seo-link-hub__intro,
.section-intro {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.cta-band-light {
text-align: center !important;
}
.cta-actions {
display: flex;
gap: 16px;
justify-content: center !important;
flex-wrap: wrap;
}
.cta-band p,
.bh-cta-band p {
margin-left: 0 !important;
margin-right: 0 !important;
}
.cta-band-light p {
margin-left: auto !important;
margin-right: auto !important;
}
.main-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 900;
background: #fff0;
border-bottom: 1px solid #fff0;
box-shadow: none;
transition: background 0.35s ease, border-color 0.35s ease,
box-shadow 0.35s ease, transform 0.28s ease;
}
.main-nav.nav-solid {
background: var(--white);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow);
}
.main-nav.nav-up {
transform: translateY(-100%);
}
.main-nav.nav-down {
transform: translateY(0);
}
.main-nav:not(.nav-solid) .logo-name {
color: #fff !important;
}
.main-nav:not(.nav-solid) .logo-sub {
color: rgb(255 255 255 / 0.75) !important;
}
.main-nav:not(.nav-solid) .nav-item > a {
color: rgb(255 255 255 / 0.9);
}
.main-nav:not(.nav-solid) .nav-item > a::after {
background: #fff;
}
.main-nav:not(.nav-solid) .nav-item:hover > a {
color: #fff;
}
.main-nav:not(.nav-solid) .hamburger span {
background: #fff;
}
.logo-name {
color: var(--navy) !important;
}
.logo-sub {
color: var(--soft) !important;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--nav-main);
}
.nav-logo {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.nav-logo .logo-white {
display: block;
}
.nav-logo .logo-colour {
display: none;
}
.main-nav.nav-solid .nav-logo .logo-white {
display: none;
}
.main-nav.nav-solid .nav-logo .logo-colour {
display: block;
}
.logo-text {
display: flex;
flex-direction: column;
line-height: 1.2;
white-space: nowrap;
}
.logo-name {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
color: var(--dark);
}
.logo-sub {
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--soft);
}
.nav-links {
display: flex;
align-items: stretch;
height: 100%;
gap: 2px;
}
.nav-item {
position: relative;
display: flex;
align-items: center;
}
.nav-item > a {
display: flex;
align-items: center;
gap: 4px;
padding: 0 14px;
height: var(--nav-main);
font-size: 0.82rem;
font-weight: 500;
color: var(--text);
white-space: nowrap;
transition: color var(--t);
position: relative;
}
.nav-item > a::after {
content: "";
position: absolute;
bottom: 0;
left: 14px;
right: 14px;
height: 3px;
background: var(--red);
transform: scaleX(0);
transition: transform var(--t);
border-radius: 2px 2px 0 0;
}
.nav-item:hover > a {
color: var(--navy);
}
.nav-item:hover > a::after,
.nav-item > a.active::after {
transform: scaleX(1);
}
.chev {
display: inline-block;
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform var(--t);
flex-shrink: 0;
}
.nav-item:hover .chev {
transform: rotate(-135deg) translateY(-2px);
}
.drop-panel {
position: absolute;
top: 100%;
left: 0;
min-width: 210px;
background: var(--white);
border-top: 3px solid var(--red);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--t), visibility var(--t), transform var(--t);
z-index: 800;
}
.nav-item:hover .drop-panel {
opacity: 1;
visibility: visible;
transform: none;
}
.drop-panel a {
display: block;
padding: 11px 20px;
font-size: 0.8rem;
color: var(--soft);
border-bottom: 1px solid rgb(0 0 0 / 0.04);
transition: background var(--t), color var(--t), padding-left var(--t);
}
.drop-panel a:last-child {
border-bottom: none;
}
.drop-panel a:hover {
background: rgb(26 58 92 / 0.04);
color: var(--navy);
padding-left: 26px;
}
.nav-enquire {
margin-left: 12px;
padding: 10px 22px;
background: var(--red);
color: var(--white) !important;
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
transition: background var(--t) !important;
display: flex;
align-items: center;
}
.nav-enquire::after {
display: none !important;
}
.nav-enquire:hover {
background: var(--red-dark) !important;
}
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.hamburger span {
display: block;
width: 24px;
height: 2px;
background: var(--dark);
border-radius: 1px;
transition: var(--t);
}
.hamburger.open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
opacity: 0;
}
.hamburger.open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
@media (max-width: 900px) {
.main-nav .nav-inner {
height: 64px;
}
.nav-links {
display: none;
}
.hamburger {
display: flex;
}
}
.mob-overlay {
display: none;
position: fixed;
inset: 0;
background: rgb(0 0 0 / 0.4);
z-index: 1800;
opacity: 0;
transition: opacity 0.3s;
}
.mob-overlay.open {
opacity: 1;
display: block;
}
.mob-drawer {
position: fixed;
top: 0;
right: -110%;
width: min(320px, 90vw);
height: 100vh;
background: var(--white);
z-index: 1900;
display: flex;
flex-direction: column;
padding: 24px 28px 120px;
overflow-y: auto;
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -4px 0 40px rgb(0 0 0 / 0.15);
}
.mob-drawer.open {
right: 0;
}
.mob-close {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--cream);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: var(--dark);
flex-shrink: 0;
}
.mob-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 20px;
border-bottom: 1px solid var(--border);
margin-bottom: 8px;
flex-shrink: 0;
}
.mob-drawer-logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.mob-drawer-logo-text {
display: flex;
flex-direction: column;
line-height: 1.2;
white-space: nowrap;
}
.mob-drawer-logo-name {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 700;
color: var(--navy);
}
.mob-drawer-logo-sub {
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--soft);
}
.mob-group-label {
display: block;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--red);
margin: 20px 0 6px;
}
.mob-link {
display: block;
padding: 12px 0;
font-size: 0.95rem;
font-weight: 500;
color: var(--text);
border-bottom: 1px solid var(--border);
transition: color var(--t);
}
.mob-link:hover {
color: var(--navy);
}
.mob-sub {
display: block;
padding: 9px 0 9px 14px;
font-size: 0.85rem;
color: var(--soft);
border-bottom: 1px solid rgb(0 0 0 / 0.04);
transition: color var(--t);
}
.mob-sub-label {
display: block;
padding: 8px 0 4px 14px;
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--navy);
margin-top: 8px;
}
.mob-sub:hover {
color: var(--navy);
}
.mob-cta {
display: block;
margin-top: 24px;
padding: 14px;
background: var(--red);
color: var(--white);
text-align: center;
font-weight: 600;
font-size: 0.9rem;
}
.btn-primary {
display: inline-block;
margin-top: 2rem;
padding: 14px 32px;
background: var(--navy);
color: var(--white);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.03em;
transition: background var(--t), transform var(--t);
}
.btn-primary:hover {
background: var(--navy-dark);
transform: translateY(-1px);
}
.btn-outline {
display: inline-block;
padding: 13px 30px;
border: 1.5px solid var(--navy);
color: var(--navy);
font-size: 0.875rem;
font-weight: 600;
transition: background var(--t), color var(--t);
}
.btn-outline:hover {
background: var(--navy);
color: var(--white);
}
.btn-outline-white {
display: inline-block;
padding: 13px 30px;
border: 1.5px solid rgb(255 255 255 / 0.72);
color: var(--white);
font-size: 0.875rem;
font-weight: 500;
transition: border-color var(--t), background var(--t);
}
.btn-outline-white:hover {
border-color: rgb(255 255 255 / 0.9);
background: rgb(255 255 255 / 0.1);
}
.btn-hero-primary {
padding: 14px 32px;
background: var(--red);
color: var(--white);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.03em;
transition: background var(--t), transform var(--t), box-shadow var(--t);
display: inline-block;
box-shadow: 0 4px 16px rgb(200 16 46 / 0.3);
}
.btn-hero-primary:hover {
background: var(--red-dark);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgb(200 16 46 / 0.4);
}
.btn-cta {
padding: 15px 36px;
background: var(--white);
color: var(--navy);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.03em;
transition: background var(--t), transform var(--t);
}
.btn-cta:hover {
background: var(--cream);
transform: translateY(-1px);
}
.btn-cta-primary {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 16px 36px;
font-size: 0.9rem;
}
.cta-band-light .btn-primary-cta,
.cta-band-light .btn-cta,
.cta-band-light .btn-hero-primary {
display: inline-block;
padding: 14px 36px;
background: var(--red);
color: #fff;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background 0.25s ease, transform 0.2s ease;
}
.cta-band-light .btn-primary-cta:hover,
.cta-band-light .btn-cta:hover,
.cta-band-light .btn-hero-primary:hover {
background: var(--red-dark);
transform: translateY(-1px);
}
.cta-band-light .btn-secondary-cta,
.cta-band-light .btn-outline,
.cta-band-light .btn-outline-white {
display: inline-block;
padding: 13px 30px;
border: 1.5px solid var(--navy);
color: var(--navy);
font-size: 0.85rem;
font-weight: 600;
transition: background 0.25s ease, color 0.25s ease;
margin-left: 12px;
}
.cta-band-light .btn-secondary-cta:hover,
.cta-band-light .btn-outline:hover,
.cta-band-light .btn-outline-white:hover {
background: var(--navy);
color: #fff;
}
.cta-band h2 {
color: var(--white);
margin-bottom: 1rem;
}
.cta-band p {
color: rgb(255 255 255 / 0.95);
font-size: 1rem;
max-width: 500px;
}
.cta-band-light h2 {
color: var(--dark);
margin-bottom: 1rem;
}
.cta-band-light p {
color: var(--soft);
max-width: 500px;
margin: 0 auto 2.5rem;
font-size: 1rem;
}
.block-hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
overflow: hidden;
background: #1a2a3a;
}
.block-hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
display: block;
will-change: transform;
}
.block-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgb(10 21 32 / 0.45) 0%,
rgb(10 21 32 / 0.55) 50%,
rgb(10 21 32 / 0.72) 100%
);
}
.block-hero-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
text-align: center;
padding: 0 7vw 80px;
max-width: 100%;
margin: 0 auto;
}
.block-hero-tag {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgb(255 255 255 / 0.75);
margin-bottom: 0.75rem;
display: block;
}
.block-hero-title {
font-size: clamp(2.8rem, 6vw, 4.8rem);
font-weight: 700;
color: #fff;
line-height: 1.08;
margin-bottom: 1.5rem;
}
.block-hero-title em {
color: #fff;
font-style: normal;
}
.block-hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 640px) {
.block-hero {
height: 100svh;
min-height: 560px;
}
.block-hero-bg {
object-position: 50% 25%;
}
.block-hero-content {
padding: 0 24px 64px;
}
}
.ws-card {
background: var(--white);
border: 1px solid var(--border);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow var(--t), transform var(--t);
box-shadow: var(--shadow);
contain: layout style;
}
.ws-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-6px);
}
.ws-card-image {
position: relative;
width: 100%;
aspect-ratio: 4/3;
overflow: hidden;
background: #fff0;
}
.ws-card-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ws-card:hover .ws-card-image img {
transform: scale(1.08);
}
.ws-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgb(10 20 35 / 0.38) 0%, transparent 65%);
}
.ws-card-badge {
position: absolute;
top: 14px;
right: 14px;
background: var(--red);
color: var(--white);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 6px 12px;
z-index: 2;
}
.ws-card-body {
padding: 28px 24px 32px;
display: flex;
flex-direction: column;
flex: 1;
border-top: 3px solid var(--red);
}
.ws-card-icon {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
background: rgb(200 16 46 / 0.08);
border-radius: 50%;
margin-bottom: 14px;
flex-shrink: 0;
}
.ws-card-icon svg {
color: var(--red);
}
.ws-card-body h3 {
font-size: 1.3rem;
font-weight: 700;
color: var(--dark);
margin-bottom: 10px;
line-height: 1.3;
}
.ws-card-body > p {
font-size: 0.9rem;
color: var(--soft);
line-height: 1.65;
margin-bottom: 18px;
}
.ws-card-features {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.ws-card-features li {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 0.84rem;
color: var(--text);
line-height: 1.5;
}
.ws-card-features li .feat-dot {
display: inline-block;
width: 6px;
height: 6px;
background: var(--red);
border-radius: 50%;
flex-shrink: 0;
margin-top: 7px;
}
.ws-card-link {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--navy);
border-bottom: 1.5px solid var(--navy);
padding-bottom: 2px;
transition: color var(--t), border-color var(--t);
width: fit-content;
margin-top: auto;
}
.ws-card-link svg {
transition: transform var(--t);
}
.ws-card:hover .ws-card-link {
color: var(--red);
border-color: var(--red);
}
.ws-card:hover .ws-card-link svg {
transform: translateX(4px);
}
.ws-pillars {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
background: var(--border);
margin-top: 48px;
}
.ws-pillar {
background: var(--white);
padding: 36px 24px;
display: flex;
flex-direction: column;
gap: 14px;
transition: background var(--t);
}
.ws-pillar:hover {
background: var(--cream);
}
.ws-pillar-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgb(200 16 46 / 0.08);
border-radius: 50%;
}
.ws-pillar-icon svg {
color: var(--red);
}
.ws-pillar h4 {
font-size: 1.1rem;
font-weight: 700;
color: var(--dark);
line-height: 1.3;
}
.ws-pillar p {
font-size: 0.875rem;
line-height: 1.7;
margin: 0;
}
@media (max-width: 900px) {
.ws-pillars {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.ws-pillars {
grid-template-columns: 1fr;
}
}
.ws-card,
.resource-card,
.programme-card,
.value-card,
.mv-card,
.bh-feature,
.bh-resource-card,
.sibling-card,
.seo-link-hub__link {
contain: layout style;
}
.results-header {
text-align: left;
margin-bottom: 56px;
}
.results-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
background: rgb(255 255 255 / 0.1);
}
.result-item {
background: var(--navy);
padding: 40px 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.result-num {
font-size: 3.5rem;
font-weight: 700;
color: var(--white);
line-height: 1;
}
.result-label {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgb(255 255 255 / 0.72);
}
@media (max-width: 900px) {
.results-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.testimonial-section {
text-align: left;
}
.quote-wrap {
max-width: 760px;
margin: 0;
}
.quote-mark {
font-size: 7rem;
line-height: 0.4;
color: var(--red);
opacity: 0.2;
display: block;
margin-bottom: 1rem;
}
.quote-text {
font-size: clamp(1.4rem, 3vw, 2rem);
font-style: italic;
font-weight: 400;
color: var(--dark);
line-height: 1.5;
margin-bottom: 1.5rem;
}
.quote-cite {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--soft);
}
.img-frame,
.intro-img,
.about-split-img,
.bh-split__img,
.ws-card-image,
.banner-img,
.fleet-image,
.safety-img,
.gs-item,
.gg-item,
.prog-editorial__img {
position: relative !important;
overflow: hidden !important;
box-shadow: none !important;
}
.img-frame,
.intro-img,
.about-split-img,
.bh-split__img,
.ws-card-image,
.banner-img,
.fleet-image,
.safety-img,
.gs-item,
.gg-item {
border-radius: 4px !important;
}
.prog-editorial__img {
border-radius: 0 !important;
}
.about-split-img,
.intro-img,
.bh-split__img {
aspect-ratio: 4/3 !important;
background: #fff0;
}
.banner-img {
aspect-ratio: 16/9 !important;
}
.ws-card-image,
.fleet-image,
.safety-img,
.gs-item,
.gg-item,
.img-frame {
aspect-ratio: 3/2 !important;
}
.prog-editorial__img {
aspect-ratio: unset !important;
min-height: 420px;
}
.img-frame > img,
.intro-img > img,
.about-split-img > img,
.bh-split__img > img,
.ws-card-image > img,
.banner-img > img,
.fleet-image > img,
.safety-img > img,
.gs-item > img,
.gg-item > img,
.prog-editorial__img > img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.img-frame:hover > img,
.intro-img:hover > img,
.about-split-img:hover > img,
.bh-split__img:hover > img,
.ws-card-image:hover > img,
.banner-img:hover > img,
.fleet-image:hover > img,
.safety-img:hover > img,
.gs-item:hover > img,
.gg-item: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 !important;
display: block !important;
}
.site-natural-image-frame {
aspect-ratio: var(--site-image-ratio);
}
.school-img-side {
position: relative;
overflow: hidden;
min-height: 480px;
background: #c0d0dc;
}
.school-img-side img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
}
.school-img-side:hover img {
transform: scale(1.04);
}
@media (max-width: 900px) {
.school-img-side {
min-height: 280px;
}
}
.footer {
background: var(--white);
}
.footer-top {
display: grid;
grid-template-columns: 1.4fr 1.6fr 1fr 1fr;
background: var(--navy-dark);
border-top: none;
}
.footer-top-col {
padding: 52px 40px;
border-right: 1px solid rgb(255 255 255 / 0.07);
}
.footer-top-col:last-child {
border-right: none;
}
.footer-tagline {
font-size: 0.82rem;
color: rgb(255 255 255 / 0.76);
line-height: 1.75;
max-width: 220px;
margin-top: 0.5rem;
}
.footer-col-label {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #ff8fa0;
margin-bottom: 1.25rem;
display: block;
}
.footer-address p {
font-size: 0.85rem;
color: rgb(255 255 255 / 0.76);
line-height: 1.75;
margin-bottom: 0.25rem;
}
.footer-address a {
color: rgb(255 255 255 / 0.76);
transition: color var(--t);
}
.footer-address a:hover {
color: rgb(255 255 255 / 0.95);
}
.footer-address .addr-group {
margin-bottom: 1.25rem;
}
.footer-address .addr-group:last-child {
margin-bottom: 0;
}
.footer-nav-col a {
display: block;
font-size: 0.85rem;
color: rgb(255 255 255 / 0.76);
margin-bottom: 0.6rem;
transition: color var(--t), padding-left var(--t);
}
.footer-nav-col a:hover {
color: rgb(255 255 255 / 0.95);
padding-left: 4px;
}
.footer-social-list {
list-style: none;
padding: 0;
margin: 0;
}
.footer-social-list li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 0.85rem;
}
.footer-social-list li:last-child {
margin-bottom: 0;
}
.footer-social-icon-wrap {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgb(255 255 255 / 0.08);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background var(--t);
}
.footer-social-list li:hover .footer-social-icon-wrap {
background: rgb(255 255 255 / 0.2);
}
.footer-social-list li:hover .footer-social-icon-wrap svg {
fill: white !important;
}
.footer-social-label {
font-size: 0.82rem;
font-weight: 500;
color: rgb(255 255 255 / 0.8);
transition: color var(--t);
}
.footer-social-list li:hover .footer-social-label {
color: rgb(255 255 255 / 0.95);
}
.footer-bottom {
background: #0a1520;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding: 20px 40px;
}
.footer-bottom-brand {
display: flex;
align-items: center;
gap: 14px;
}
.footer-bottom-badge {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgb(255 255 255 / 0.74);
border: 1px solid rgb(255 255 255 / 0.2);
padding: 5px 10px;
border-radius: 2px;
}
.footer-bottom-motto {
font-style: italic;
font-size: 0.95rem;
color: rgb(255 255 255 / 0.76);
}
.footer-bottom-right {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-copyright {
font-size: 0.72rem;
color: rgb(255 255 255 / 0.72);
}
.footer-legal {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.footer-legal a {
font-size: 0.72rem;
color: rgb(255 255 255 / 0.72);
transition: color var(--t);
}
.footer-legal a:hover {
color: rgb(255 255 255 / 0.85);
}
@media (max-width: 1100px) {
.footer-top {
grid-template-columns: 1fr 1fr;
}
.footer-top-col {
border-bottom: 1px solid rgb(26 58 92 / 0.08);
}
.footer-top-col:nth-child(2n) {
border-right: none;
}
}
@media (max-width: 640px) {
.footer-top {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-top-col {
border-right: none;
padding: 28px 18px;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
padding: 20px 24px;
}
.footer-logo-img {
width: 72px;
}
.footer-tagline {
font-size: 0.78rem;
max-width: none;
}
}
.seo-link-hub {
background: var(--white);
padding: 0 0 24px;
}
.seo-link-hub__intro p {
color: var(--soft);
margin-top: 0.75rem;
}
.seo-link-hub__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.seo-link-hub__link {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px 22px;
border: 1px solid var(--border);
border-top: 3px solid var(--red);
background: var(--white);
transition: box-shadow var(--t), transform var(--t), border-top-color var(--t);
text-decoration: none;
}
.seo-link-hub__link:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
border-top-color: var(--navy);
}
.seo-link-hub__link strong {
font-size: 1.05rem;
font-weight: 700;
color: var(--dark);
line-height: 1.35;
display: block;
margin-bottom: 12px;
}
.seo-link-hub__link span {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--red);
display: inline-flex;
align-items: center;
gap: 5px;
}
.seo-link-hub__link span::after {
content: "\2192";
font-size: 0.85em;
transition: transform var(--t);
}
.seo-link-hub__link:hover span {
color: var(--navy);
}
.seo-link-hub__link:hover span::after {
transform: translateX(3px);
}
@media (max-width: 900px) {
.seo-link-hub__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 540px) {
.seo-link-hub__grid {
gap: 10px;
}
.seo-link-hub__link {
padding: 18px 14px;
}
.seo-link-hub__link strong {
font-size: 0.92rem;
}
}
.wa-btn {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 9999;
width: 54px;
height: 54px;
border-radius: 50%;
background: #0f7a41;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgb(37 211 102 / 0.4);
transition: transform 0.2s, box-shadow 0.2s;
}
.wa-btn svg {
color: #fff;
fill: #fff;
}
.wa-btn:hover {
transform: scale(1.1);
box-shadow: 0 8px 28px rgb(37 211 102 / 0.55);
}
#stickyCTA {
display: none !important;
visibility: hidden !important;
}
.reveal {
opacity: 0;
transform: translate3d(0, 28px, 0);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal.active {
opacity: 1;
transform: translate3d(0, 0, 0);
will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.reveal {
opacity: 1;
transform: none;
transition: none;
}
img.lazyload {
transition: none;
}
}
.block-hero-bg,
.page-hero-bg {
will-change: transform;
}
:root {
--section-y: clamp(48px, 5vw, 72px);
--section-y-compact: clamp(36px, 4vw, 52px);
--block-gap: clamp(24px, 3vw, 36px);
}
@media (min-width: 901px) {
body {
padding-top: var(--nav-main) !important;
}
body.page-home,
body.site-has-visual-hero {
padding-top: 0 !important;
}
}
@media (max-width: 900px) {
body {
padding-top: 64px !important;
}
body.page-home {
padding-top: 0 !important;
}
}
body {
font-size: 16px;
line-height: 1.7;
}
p,
li,
.lead,
.bh-p,
.prog-intro-text p,
.footer-tagline,
.footer-address p {
line-height: 1.75;
}
.section,
.bh-section,
.faq-page,
.fees-body,
.form-outer,
.section-legal,
.school-section,
.payment-section,
.download-strip,
.testimonial-band,
.stats-strip,
.values-strip,
.global-band,
.safety-band,
.map-section,
.newsletter-strip,
.prog-intro,
.prog-offers,
.prog-resources,
.enrol-cta,
.cta-band,
.bh-cta-band,
.cbc-strip,
.transport-hero,
.transport-section,
.cta-band-light,
.blog-hero,
.seo-link-hub,
.legal-main {
padding-top: var(--section-y) !important;
padding-bottom: var(--section-y) !important;
}
.section,
.section-light,
.section-cream,
.section-navy,
.bh-section,
.prog-intro,
.prog-offers,
.prog-resources,
.cbc-strip,
.transport-hero,
.transport-section,
.legal-main {
content-visibility: visible !important;
contain-intrinsic-size: auto none !important;
}
.blog-hero {
padding-top: var(--section-y) !important;
padding-bottom: var(--section-y) !important;
}
@media (min-width: 901px) {
body.site-nav-index-behavior .main-nav {
position: fixed !important;
top: 0;
left: 0;
right: 0;
z-index: 1200;
padding-top: 0 !important;
padding-bottom: 0 !important;
background: #fff0;
border-bottom: 1px solid #fff0;
box-shadow: none;
transform: translateY(0);
transition: background 0.35s ease, border-color 0.35s ease,
box-shadow 0.35s ease, transform 0.28s ease;
}
body.site-nav-index-behavior .main-nav.nav-solid {
background: #fff;
border-bottom-color: rgb(26 58 92 / 0.1);
box-shadow: 0 2px 20px rgb(0 0 0 / 0.08);
}
body.site-nav-index-behavior .main-nav:not(.nav-solid) .logo-name,
body.site-nav-index-behavior .main-nav:not(.nav-solid) .nav-item > a {
color: rgb(255 255 255 / 0.92) !important;
}
body.site-nav-index-behavior .main-nav:not(.nav-solid) .logo-sub {
color: rgb(255 255 255 / 0.74) !important;
}
}
img.lazyload {
opacity: 0;
transition: opacity 0.5s ease;
}
.img-frame {
aspect-ratio: 16/9;
overflow: hidden;
background: #fff0;
}
.img-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.bh-split__img {
position: relative;
min-height: 420px;
overflow: hidden;
background: #fff0;
}
.bh-split__img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.bh-split__img--placeholder svg {
opacity: 0.18;
}
@media (max-width: 640px) {
}
.seo-link-hub__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
background: rgb(26 58 92 / 0.12);
border: 1px solid rgb(26 58 92 / 0.12);
}
@media (min-width: 961px) {
}
@media (min-width: 961px) and (max-width: 1120px) {
}
@media (max-width: 760px) {
.section,
.bh-section,
.faq-page,
.fees-body,
.form-outer,
.section-legal,
.school-section,
.payment-section,
.download-strip,
.testimonial-band,
.stats-strip,
.values-strip,
.global-band,
.safety-band,
.map-section,
.newsletter-strip,
.prog-intro,
.prog-offers,
.prog-resources,
.enrol-cta,
.cta-band,
.bh-cta-band,
.cbc-strip,
.transport-hero,
.transport-section,
.cta-band-light,
.blog-hero,
.seo-link-hub,
.legal-main {
padding-top: var(--section-y) !important;
padding-bottom: var(--section-y) !important;
}
}
.img-frame,
.intro-img,
.about-split-img,
.bh-split__img,
.ws-card-image,
.banner-img,
.fleet-image,
.safety-img,
.gs-item,
.gg-item,
.prog-editorial__img {
position: relative;
overflow: hidden;
box-shadow: none;
background: #fff0;
}
.img-frame > img,
.intro-img > img,
.about-split-img > img,
.bh-split__img > img,
.ws-card-image > img,
.banner-img > img,
.fleet-image > img,
.safety-img > img,
.gs-item > img,
.gg-item > img,
.prog-editorial__img > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.img-frame {
aspect-ratio: 3 / 2;
}
body > .img-strip,
body > .about-split,
.section > .img-strip,
.section > .about-split,
.bh-section > .bh-split,
main > .img-strip,
main > .about-split {
width: min(
calc(100% - var(--page-gutter) - var(--page-gutter)),
var(--content-max)
);
margin-left: auto !important;
margin-right: auto !important;
}
body > .prog-editorial,
.section > .prog-editorial,
.bh-section > .prog-editorial,
main > .prog-editorial {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.prog-editorial + .prog-editorial {
padding-top: var(--section-y-compact);
border-top: 1px solid rgb(0 0 0 / 0.08);
}
.prog-editorial__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0;
align-items: stretch;
}
.prog-editorial--reverse .prog-editorial__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 768px) {
.prog-editorial__inner,
.prog-editorial--reverse .prog-editorial__inner {
grid-template-columns: 1fr;
row-gap: clamp(20px, 6vw, 32px) !important;
}
.prog-editorial__text + .prog-editorial__img,
.prog-editorial__img + .prog-editorial__text {
margin-top: 0 !important;
}
.prog-editorial__img {
min-height: 300px;
}
}
@media (max-width: 640px) {
.prog-editorial__img {
min-height: 260px;
}
}
: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) !important;
font-size: 1rem;
line-height: 1.8 !important;
text-align: left !important;
}
.main-nav,
body.site-nav-index-behavior .main-nav,
body.site-nav-index-behavior .main-nav.nav-solid {
background: #fff !important;
border-bottom: 1px solid var(--notable-line) !important;
box-shadow: none !important;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
will-change: transform;
}
.main-nav.nav-up,
body.site-nav-index-behavior .main-nav.nav-up {
transform: translateY(-100%) !important;
}
.main-nav.nav-down,
body.site-nav-index-behavior .main-nav.nav-down {
transform: translateY(0) !important;
}
body.page-home .main-nav:not(.nav-solid) .logo-name,
body.page-home .main-nav:not(.nav-solid) .nav-item > a {
color: rgb(255 255 255 / 0.92) !important;
}
body.page-home .main-nav:not(.nav-solid) .logo-sub {
color: rgb(255 255 255 / 0.74) !important;
}
body.site-nav-index-behavior.site-has-visual-hero
.main-nav:not(.nav-solid)
.logo-name,
body.site-nav-index-behavior.site-has-visual-hero
.main-nav:not(.nav-solid)
.nav-item
> a {
color: rgb(255 255 255 / 0.92) !important;
}
body.site-nav-index-behavior.site-has-visual-hero
.main-nav:not(.nav-solid)
.logo-sub {
color: rgb(255 255 255 / 0.74) !important;
}
@media (min-width: 901px) {
body.page-home .prog-editorial--feature .prog-editorial__body {
color: rgb(255 255 255 / 0.78) !important;
}
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: 0.8;
font-weight: 800;
color: rgb(200 16 46 / 0.08);
pointer-events: none;
}
body.page-home .prog-editorial--wide .prog-editorial__text {
order: 2;
max-width: 880px;
padding: clamp(38px, 4vw, 58px) 0 0 !important;
background: #fff0;
}
}
.section,
.bh-section,
.prog-intro,
.prog-offers,
.prog-resources,
.faq-page,
.fees-body,
.form-outer,
.school-section,
.payment-section,
.download-strip,
.testimonial-band,
.stats-strip,
.values-strip,
.global-band,
.safety-band,
.map-section,
.newsletter-strip,
.transport-section,
.legal-main,
.seo-link-hub {
background: var(--notable-bg) !important;
border-top: 1px solid rgb(218 220 224 / 0.72);
}
.block-hero .block-hero-title {
text-shadow: 0 2px 18px rgb(0 0 0 / 0.45);
}
.cta-band .container,
.cta-band-light .container,
.bh-cta-band .container,
.enrol-cta .container,
.cta-band-inner {
text-align: center !important;
}
@media (min-width: 769px) {
}
.btn-navy-outline,
.bh-btn-ghost,
.resource-link,
.bh-link,
.content-link,
.seo-link-hub__link,
.btn-outline {
color: var(--notable-link) !important;
}
.blog-hero {
background: var(--notable-heading) !important;
border-top: 1px solid rgb(255 255 255 / 0.08);
border-bottom: 1px solid rgb(0 0 0 / 0.08);
box-shadow: none !important;
}
.hero-eyebrow {
background: rgb(200 16 46 / 0.16) !important;
border-color: rgb(200 16 46 / 0.32) !important;
}
.featured-post:hover,
.post-card:hover,
.sidebar-card:hover {
box-shadow: 0 8px 20px rgb(26 58 92 / 0.08) !important;
}
.cta-card {
background: var(--notable-heading) !important;
border: 1px solid rgb(255 255 255 / 0.12) !important;
border-radius: 4px !important;
box-shadow: none !important;
}
.cta-btn.secondary {
background: rgb(255 255 255 / 0.12) !important;
color: #fff !important;
border: 1px solid rgb(255 255 255 / 0.28) !important;
}
.img-frame,
.intro-img,
.about-split-img,
.bh-split__img,
.ws-card-image,
.banner-img,
.fleet-image,
.safety-img,
.gs-item,
.gg-item {
border-radius: 4px;
}
.prog-editorial__img {
border-radius: 0;
}
.about-split-img,
.intro-img,
.bh-split__img {
aspect-ratio: 4 / 3;
background: #fff0;
}
.ws-card-image,
.fleet-image,
.safety-img,
.gs-item,
.gg-item,
.img-frame {
aspect-ratio: 3 / 2;
}
.prog-editorial__img {
aspect-ratio: unset;
min-height: 420px;
}
body:not(.gallery-page) .featured-img::before,
body:not(.gallery-page) .hero-img::before,
body:not(.gallery-page) .banner-img::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
45deg,
rgb(200 146 42 / 0.05) 0,
rgb(200 146 42 / 0.05) 1px,
transparent 0,
transparent 50%
),
repeating-linear-gradient(
-45deg,
rgb(200 146 42 / 0.05) 0,
rgb(200 146 42 / 0.05) 1px,
transparent 0,
transparent 50%
);
background-size: 20px 20px;
z-index: 1;
pointer-events: none;
}
body:not(.gallery-page) .featured-img::after,
body:not(.gallery-page) .hero-img::after,
body:not(.gallery-page) .banner-img::after {
content: "";
position: absolute;
bottom: -40px;
right: -40px;
width: 280px;
height: 280px;
background: radial-gradient(
circle,
rgb(200 146 42 / 0.25) 0%,
transparent 65%
);
pointer-events: none;
z-index: 1;
}
body:not(.gallery-page) .card-img::after,
body:not(.gallery-page) .post-thumb::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(
rgb(255 255 255 / 0.08) 1.5px,
transparent 1.5px
);
background-size: 20px 20px;
pointer-events: none;
}
@media (min-width: 901px) {
}
@media (max-width: 900px) {
}
@media (min-width: 901px) {
}
body.page-about-design {
background: #fff;
}
body.page-about-design .page-banner,
body.page-about-design .page-intro,
body.page-about-design .page-header,
body.page-about-design .bh-banner,
body.page-about-design .merit-banner {
background: var(--cream, #f7f5f0) !important;
border-bottom: 1px solid var(--border, rgb(26 58 92 / 0.1)) !important;
overflow: hidden;
}
body.page-about-design .page-banner::before,
body.page-about-design .page-banner::after,
body.page-about-design .bh-banner::before,
body.page-about-design .bh-banner::after,
body.page-about-design .merit-banner::before,
body.page-about-design .merit-banner::after {
display: none !important;
}
body.page-about-design .page-banner .container,
body.page-about-design .page-intro .container,
body.page-about-design .page-header .container,
body.page-about-design .bh-banner .container,
body.page-about-design .merit-banner .container {
position: relative;
z-index: 1;
}
body.page-about-design .page-banner-tag,
body.page-about-design .page-tag,
body.page-about-design .prog-editorial__label {
color: var(--red, #c8102e) !important;
}
body.page-about-design .page-banner h1,
body.page-about-design .page-intro h1,
body.page-about-design .page-header h1,
body.page-about-design .bh-banner h1,
body.page-about-design .merit-banner h1 {
color: var(--dark, #132238) !important;
margin-bottom: 0.6rem !important;
}
body.page-about-design .page-banner p.lead,
body.page-about-design .page-intro p.lead,
body.page-about-design .page-header p.lead,
body.page-about-design .bh-banner p.lead,
body.page-about-design .merit-banner p.lead {
color: var(--soft, #586879) !important;
font-size: 1rem;
line-height: 1.75;
max-width: 640px;
}
body.page-about-design .breadcrumb a,
body.page-about-design .breadcrumb span,
body.page-about-design .breadcrumb-sep {
color: rgb(19 34 56 / 0.72) !important;
}
body.page-about-design .breadcrumb a:hover {
color: var(--red, #c8102e) !important;
}
body.page-about-design .bh-section {
border-bottom: 0 !important;
}
body.page-about-design .bh-section--navy,
body.page-about-design .section-navy,
body.page-about-design .section-dark {
background: #fff !important;
}
body.page-about-design .bh-section--navy .bh-h2,
body.page-about-design .bh-section--navy .bh-h3,
body.page-about-design .section-navy h2,
body.page-about-design .section-navy h3,
body.page-about-design .section-dark h2,
body.page-about-design .section-dark h3 {
color: var(--dark, #132238) !important;
}
body.page-about-design .bh-section--navy .bh-p,
body.page-about-design .section-navy p,
body.page-about-design .section-dark p {
color: #4a5568 !important;
}
body.page-about-design .hr-rule,
body.page-about-design .bh-hr,
body.page-about-design .prog-editorial__hr {
display: block;
width: 56px;
height: 3px;
background: var(--red, #c8102e) !important;
border: 0;
margin: 1.5rem 0 2rem;
}
body.page-about-design .prog-editorial {
background: #fff !important;
border-bottom: 0 !important;
padding: clamp(42px, 4.5vw, 72px) 0 !important;
}
body.page-about-design .prog-editorial__inner {
display: grid !important;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important;
align-items: stretch !important;
gap: 0 !important;
max-width: 1140px !important;
margin: 0 auto !important;
min-height: 0 !important;
}
@media (min-width: 901px) {
body.page-about-design:not(.gallery-page) .prog-editorial__inner {
width: min(calc(100% - (2 * var(--page-gutter, 32px))), 1140px) !important;
}
}
body.page-about-design
.prog-editorial:is(.prog-editorial--reverse, .prog-editorial--flip)
.prog-editorial__inner,
body.page-about-design .about-editorial--reverse .prog-editorial__inner {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
}
body.page-about-design .prog-editorial__img {
order: 1 !important;
box-sizing: border-box;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 620px !important;
aspect-ratio: auto !important;
border-radius: 4px 0 0 4px !important;
box-shadow: none !important;
overflow: hidden;
}
body.page-about-design .prog-editorial__text {
order: 2 !important;
box-sizing: border-box;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
background: #fff !important;
padding: clamp(54px, 5vw, 84px) !important;
display: flex !important;
flex-direction: column;
justify-content: center;
}
body.page-about-design
.prog-editorial:is(.prog-editorial--reverse, .prog-editorial--flip)
.prog-editorial__img,
body.page-about-design .about-editorial--reverse .prog-editorial__img {
order: 2 !important;
border-radius: 0 4px 4px 0 !important;
}
body.page-about-design
.prog-editorial:is(.prog-editorial--reverse, .prog-editorial--flip)
.prog-editorial__text,
body.page-about-design .about-editorial--reverse .prog-editorial__text {
order: 1 !important;
}
body.page-about-design .prog-editorial__title {
color: var(--dark, #132238) !important;
font-size: clamp(2rem, 3vw, 3.2rem) !important;
line-height: 1.04 !important;
margin-bottom: 0;
}
body.page-about-design .prog-editorial__body {
color: #4a5568 !important;
font-size: 1rem;
line-height: 1.85;
max-width: 640px;
}
body.page-about-design .prog-editorial__cta,
body.page-about-design .bh-link {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.55rem;
align-self: flex-start;
margin-top: 2rem;
padding: 14px 32px !important;
background: var(--red, #c8102e) !important;
border: 0 !important;
color: #fff !important;
font-family: var(--font-body, "Outfit", sans-serif);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.03em;
line-height: 1.2;
width: fit-content;
text-decoration: none;
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
body.page-about-design .prog-editorial__cta:hover,
body.page-about-design .bh-link:hover {
background: #9f0d25 !important;
color: #fff !important;
transform: translateY(-1px);
}
body.page-about-design .prog-editorial__feats,
body.page-about-design .bh-features,
body.page-about-design .about-feature-list {
display: flex;
flex-direction: column;
gap: 0;
margin-top: 1.25rem;
}
body.page-about-design .prog-editorial__feat,
body.page-about-design .bh-feat,
body.page-about-design .about-feature-list__item {
padding: 18px 0;
border-bottom: 1px solid rgb(0 0 0 / 0.1) !important;
}
body.page-about-design .prog-editorial__feat:last-child,
body.page-about-design .bh-feat:last-child,
body.page-about-design .about-feature-list__item:last-child {
border-bottom: 0 !important;
}
body.page-about-design .prog-editorial__feat strong,
body.page-about-design .bh-feat strong,
body.page-about-design .about-feature-list__item strong,
body.page-about-design .about-song-block strong {
display: block;
color: var(--dark, #132238) !important;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
body.page-about-design .prog-editorial__feat p,
body.page-about-design .bh-feat p,
body.page-about-design .about-feature-list__item p,
body.page-about-design .about-song-block p {
color: #4a5568 !important;
font-size: 1rem;
line-height: 1.85;
margin: 0;
}
body.page-about-design .bh-stats {
grid-template-columns: repeat(4, 1fr);
margin-top: 2rem;
background: rgb(0 0 0 / 0.08);
}
body.page-about-design .bh-stat {
background: #fff;
}
body.page-about-design .bh-stat__num {
color: var(--navy, #1a3a5c);
}
body.page-about-design .bh-stat__label {
color: #6b7c93;
}
body.page-about-design .cta-band,
body.page-about-design .cta-band-light,
body.page-about-design .bh-cta-band,
body.page-about-design .enrol-cta {
background: #fff !important;
text-align: left !important;
}
body.page-about-design .cta-band h2,
body.page-about-design .cta-band-light h2,
body.page-about-design .bh-cta-band h2,
body.page-about-design .enrol-cta h2 {
color: var(--dark, #132238) !important;
}
body.page-about-design .cta-band p,
body.page-about-design .cta-band-light p,
body.page-about-design .bh-cta-band p,
body.page-about-design .enrol-cta p {
color: #4a5568 !important;
}
@media (max-width: 900px) {
body.page-about-design .prog-editorial__inner,
body.page-about-design
.prog-editorial:is(.prog-editorial--reverse, .prog-editorial--flip)
.prog-editorial__inner,
body.page-about-design .about-editorial--reverse .prog-editorial__inner {
grid-template-columns: 1fr !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
body.page-about-design .prog-editorial__img,
body.page-about-design
.prog-editorial:is(.prog-editorial--reverse, .prog-editorial--flip)
.prog-editorial__img,
body.page-about-design .about-editorial--reverse .prog-editorial__img {
order: 1 !important;
min-height: 0 !important;
aspect-ratio: 16 / 9 !important;
border-radius: 4px 4px 0 0 !important;
}
body.page-about-design:not(.gallery-page) .prog-editorial__img,
body.page-about-design:not(.gallery-page)
.prog-editorial:is(.prog-editorial--reverse, .prog-editorial--flip)
.prog-editorial__img,
body.page-about-design:not(.gallery-page)
.about-editorial--reverse
.prog-editorial__img {
width: min(
calc(100% - (2 * var(--page-gutter, 20px))),
var(--content-max, 1136px)
) !important;
max-width: min(
calc(100% - (2 * var(--page-gutter, 20px))),
var(--content-max, 1136px)
) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.page-about-design:not(.gallery-page) .container .prog-editorial__img,
body.page-about-design:not(.gallery-page)
.container
.prog-editorial:is(.prog-editorial--reverse, .prog-editorial--flip)
.prog-editorial__img,
body.page-about-design:not(.gallery-page)
.container
.about-editorial--reverse
.prog-editorial__img {
width: 100% !important;
max-width: 100% !important;
}
body.page-about-design .prog-editorial__text,
body.page-about-design
.prog-editorial:is(.prog-editorial--reverse, .prog-editorial--flip)
.prog-editorial__text,
body.page-about-design .about-editorial--reverse .prog-editorial__text {
order: 2 !important;
padding: var(--page-gutter, 20px) !important;
}
body.page-about-design .bh-stats {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
body.page-about-design .page-banner,
body.page-about-design .page-intro,
body.page-about-design .page-header,
body.page-about-design .bh-banner,
body.page-about-design .merit-banner {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
}
@media (min-width: 769px) {
body {
font-size: 16px;
line-height: 1.6;
letter-spacing: -0.25px;
}
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;
}
.section p,
.bh-section p {
max-width: 75ch;
margin-bottom: 1.5rem;
}
small,
.small-text {
font-size: 0.9rem;
line-height: 1.6;
}
ul,
ol {
margin: 1.5rem 0;
padding-left: 2rem;
}
li {
margin-bottom: 0.9rem;
line-height: 1.75;
}
}
@media (min-width: 769px) {
.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;
}
.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;
}
.ws-pillars,
.level-grid,
.values-strip,
.bh-resources,
.bh-level-grid,
.mv-grid,
.values-row {
gap: 1px !important;
}
.programme-grid,
.resource-grid,
.resources-grid,
.level-card-grid,
.card-grid,
.features-grid,
.content-grid,
.related-grid {
gap: 16px !important;
}
.bh-split,
.about-split {
gap: 2rem !important;
}
}
@media (min-width: 769px) {
.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%;
}
.why-sikri-grid .ws-card-image {
aspect-ratio: 3 / 2 !important;
}
.sibling-grid .intro-img {
aspect-ratio: 16 / 9 !important;
}
.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;
}
.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%;
}
}
@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 + :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;
}
}
@media (min-width: 769px) {
.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);
}
.page-intro,
.bh-banner {
padding-top: var(--section-y-compact);
padding-bottom: var(--section-y-compact);
}
.hero-container {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 769px) {
.bh-level-grid,
.programme-grid,
.resource-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--block-gap);
}
.level-card-grid,
.card-grid,
.features-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--block-gap);
}
.content-grid,
.bh-resources {
grid-template-columns: repeat(2, 1fr);
gap: var(--block-gap);
}
.flex-group,
.button-group {
gap: var(--block-gap);
align-items: flex-start;
}
.values-row,
.mv-grid {
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
margin-top: var(--block-gap);
}
.stats-grid,
.bh-stats {
grid-template-columns: repeat(4, 1fr);
gap: var(--block-gap);
}
.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;
}
}
@media (min-width: 769px) {
.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);
}
.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;
}
.card-image {
margin-bottom: 1.5rem;
}
.card-footer,
.card-cta {
margin-top: auto;
padding-top: 1.5rem;
border-top: 1px solid rgb(26 58 92 / 0.08);
}
.level-card:hover,
.resource-card:hover,
.card:hover,
.programme-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
}
.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;
}
}
@media (min-width: 769px) {
.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;
}
.btn-primary,
.btn-red-solid {
background-color: var(--red, #c8102e);
color: #fff;
}
.btn-primary:hover,
.btn-red-solid:hover {
background-color: var(--red-dark, #a00d24);
box-shadow: 0 4px 12px rgb(200 16 46 / 0.3);
transform: translateY(-1px);
}
.btn-secondary,
.btn-navy-outline {
background-color: #fff0;
color: var(--navy, #1a3a5c);
border: 2px solid var(--navy, #1a3a5c);
}
.btn-secondary:hover,
.btn-navy-outline:hover {
background-color: var(--navy, #1a3a5c);
color: #fff;
box-shadow: 0 4px 12px rgb(26 58 92 / 0.3);
transform: translateY(-1px);
}
.btn-ghost,
.bh-btn-ghost {
background-color: rgb(200 16 46 / 0.08);
color: var(--navy, #1a3a5c);
border: 1px solid rgb(200 16 46 / 0.2);
}
.btn-ghost:hover,
.bh-btn-ghost:hover {
background-color: rgb(200 16 46 / 0.15);
border-color: var(--red, #c8102e);
}
.cta-actions {
display: flex;
gap: 1.5rem;
align-items: center;
flex-wrap: wrap;
margin-top: 2rem;
}
.cta-actions .btn {
margin: 0;
}
.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: "→";
}
}
@media (min-width: 769px) {
.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;
}
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 rgb(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 rgb(200 16 46 / 0.1);
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--navy, #1a3a5c);
font-size: 0.95rem;
}
label .required {
color: var(--red, #c8102e);
margin-left: 2px;
}
.form-help,
.helper-text {
display: block;
margin-top: 0.4rem;
font-size: 0.85rem;
color: var(--soft, #586879);
}
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;
}
}
@media (min-width: 769px) {
.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);
}
.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%;
}
.nav-enquire {
margin-left: auto;
white-space: nowrap;
}
.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);
}
}
@media (min-width: 769px) {
.footer,
.page-footer {
margin-top: auto;
}
.footer-top {
padding: 3rem var(--page-gutter);
max-width: var(--container-max);
margin: 0 auto;
border-bottom: 1px solid rgb(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: rgb(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 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem var(--page-gutter);
max-width: var(--container-max);
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: rgb(255 255 255 / 0.7);
margin: 0;
}
.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: rgb(255 255 255 / 0.1);
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
}
.social-links a:hover {
background-color: var(--red, #c8102e);
}
}
@media (min-width: 769px) {
.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,
.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);
}
.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;
}
}
@media (min-width: 769px) {
.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: rgb(200 16 46 / 0.15);
}
.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: rgb(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,
.quote {
background-color: rgb(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);
}
}
@media (min-width: 769px) {
.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,
.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);
}
}
@media (min-width: 769px) {
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
outline: 2px solid var(--red, #c8102e);
outline-offset: 3px;
}
a,
button,
.btn,
.card,
.level-card {
transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
}
[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background-color: var(--navy, #1a3a5c);
color: #fff;
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;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: rgb(26 58 92 / 0.05);
}
::-webkit-scrollbar-thumb {
background: var(--red, #c8102e);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--red-dark, #a00d24);
}
}
@media (min-width: 769px) {
.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;
}
.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;
}
.cta-band-light {
text-align: center !important;
}
.cta-band-light > .container > div,
.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;
}
.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;
}
}
@media (min-width: 769px) {
*:focus-visible {
outline: 2px solid var(--red, #c8102e);
outline-offset: 3px;
}
.soft-text {
color: var(--soft, #586879);
}
::selection {
background-color: var(--red, #c8102e);
color: #fff;
}
}
@media (min-width: 769px) {
table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
background-color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}
thead {
background-color: var(--navy, #1a3a5c);
color: #fff;
}
th {
padding: 1rem 1.25rem;
text-align: left;
font-weight: 600;
border-bottom: 2px solid rgb(26 58 92 / 0.1);
}
td {
padding: 1rem 1.25rem;
border-bottom: 1px solid rgb(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;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
}
@media (min-width: 769px) {
.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;
}
.p-1 {
padding: 0.5rem;
}
.p-2 {
padding: 1rem;
}
.p-3 {
padding: 1.5rem;
}
.p-4 {
padding: 2rem;
}
.p-5 {
padding: 3rem;
}
.gap-1 {
gap: 0.5rem;
}
.gap-2 {
gap: 1rem;
}
.gap-3 {
gap: 1.5rem;
}
.gap-4 {
gap: 2rem;
}
.gap-5 {
gap: 3rem;
}
}
@media (min-width: 769px) {
.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 rgb(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 rgb(0 0 0 / 0.16);
}
.about-split-text {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.5rem;
padding: 0;
}
.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);
}
.about-split-text[style*="background"] {
padding: 3.5rem;
background: var(--cream);
border-radius: 12px;
box-shadow: inset 0 1px 0 rgb(0 0 0 / 0.04);
}
.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 {
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), rgb(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);
}
.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 rgb(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);
}
.prog-editorial--reverse .prog-editorial__inner {
grid-template-columns: 1fr 1fr;
}
.prog-editorial--reverse .prog-editorial__img {
order: -1;
}
.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-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 rgb(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 rgb(0 0 0 / 0.15);
}
.container {
max-width: 1200px;
}
.section + .section,
.section + .img-strip,
.img-strip + .section {
margin-top: 0;
}
.section-rule {
margin: var(--section-y) auto;
max-width: 1200px;
}
.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;
}
}
@media (min-width: 769px) {
.page-intro {
padding: var(--section-y-compact) 0;
background: linear-gradient(
135deg,
var(--cream) 0%,
rgb(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 {
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 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: rgb(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 rgb(0 0 0 / 0.15);
transform: translateY(-2px);
}
.cta-actions .btn-ghost-white {
border: 2px solid var(--white);
color: var(--white);
background: #fff0;
}
.cta-actions .btn-ghost-white:hover {
background: rgb(255 255 255 / 0.1);
border-color: var(--white);
box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
transform: translateY(-2px);
}
}
@media (min-width: 1200px) {
.container {
max-width: 1200px;
}
.hero-container {
max-width: 1400px;
}
.about-split {
gap: 5rem;
}
.about-split-text[style*="background"] {
padding: 4rem;
}
.features-grid,
.card-grid {
grid-template-columns: repeat(4, 1fr);
}
h1 {
font-size: clamp(2.4rem, 4.5vw, 3.2rem);
}
h2 {
font-size: clamp(2rem, 3.5vw, 2.8rem);
}
.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;
}
}
.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;
}
.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;
}
: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;
}
@media print {
body {
background-color: #fff;
color: #000;
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;
}
}
@media (min-width: 1024px) {
body.page-home {
background: #fff;
}
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 .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,
rgb(7 18 31 / 0.78) 0%,
rgb(7 18 31 / 0.48) 42%,
rgb(7 18 31 / 0.18) 100%
),
linear-gradient(0deg, rgb(7 18 31 / 0.62) 0%, rgb(7 18 31 / 0.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: 0.95;
margin-bottom: 1.1rem;
text-wrap: balance;
}
body.page-home .block-hero-tag {
order: -1;
margin-bottom: 1.35rem;
color: rgb(255 255 255 / 0.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, 0.95fr) minmax(420px, 0.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 rgb(0 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 rgb(26 58 92 / 0.1);
}
body.page-home .ws-card {
border: 0;
border-right: 1px solid rgb(26 58 92 / 0.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: rgb(7 18 31 / 0.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: 0.95rem;
}
body.page-home .prog-editorial {
margin-top: 0 !important;
margin-bottom: 0 !important;
border-top: 1px solid rgb(26 58 92 / 0.1);
}
body.page-home .prog-editorial__inner {
grid-template-columns: minmax(0, 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, 0.92fr) !important;
}
body.page-home .prog-editorial__text {
padding: clamp(48px, 5vw, 72px) !important;
display: flex;
flex-direction: column;
justify-content: center;
background: #fff;
}
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, 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: rgb(255 255 255 / 0.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: 0.8;
font-weight: 800;
color: rgb(200 16 46 / 0.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: #fff0;
}
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 rgb(26 58 92 / 0.1);
}
body.page-home .seo-link-hub__link {
min-height: 190px;
border: 0;
border-right: 1px solid rgb(26 58 92 / 0.1);
border-bottom: 1px solid rgb(26 58 92 / 0.1);
border-top: 4px solid #fff0;
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;
}
}
@media (min-width: 1024px) {
body {
margin-left: 0;
margin-right: 0;
}
main {
margin-left: auto;
margin-right: auto;
}
.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;
}
.section > .container,
.bh-section > .container {
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 1200px) {
.container {
margin-left: auto;
margin-right: auto;
}
.about-split,
.bh-split {
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
}
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;
}
}
button,
input[type="submit"],
input[type="button"],
.btn,
.mob-cta,
.nav-enquire {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
}
a {
-webkit-tap-highlight-color: rgb(26 58 92 / 0.1);
tap-highlight-color: rgb(26 58 92 / 0.1);
}
button {
-webkit-tap-highlight-color: #fff0;
tap-highlight-color: #fff0;
}
.bh-p a,
p a {
color: var(--red, #c8102e);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
transition: color 0.25s ease, background-color 0.25s ease;
}
.bh-p a:hover,
p a:hover {
color: var(--navy, #1a3a5c);
text-decoration-color: var(--navy, #1a3a5c);
}
.bh-p a:active,
p a:active {
background-color: rgb(200 16 46 / 0.1);
}
.banner-body a[target="_blank"]::after,
.welcome-text a[target="_blank"]::after,
.bh-p a[target="_blank"]::after,
p a[target="_blank"]::after {
content: " ↗";
font-size: 0.9em;
margin-left: 2px;
}
@media (max-width: 640px) {
button,
a.btn,
.nav-enquire,
.mob-cta {
padding: 14px 20px;
font-size: 0.9rem;
min-height: 48px;
}
input,
textarea,
select {
min-height: 48px;
padding: 12px 14px;
font-size: 16px;
}
body {
font-size: 16px;
line-height: 1.75;
}
h1 {
font-size: clamp(1.75rem, 4.5vw, 2.4rem);
line-height: 1.2;
}
h2 {
font-size: clamp(1.4rem, 3.5vw, 2rem);
line-height: 1.3;
}
h3 {
font-size: clamp(1.1rem, 2.5vw, 1.35rem);
line-height: 1.3;
}
p {
font-size: 0.95rem;
line-height: 1.75;
}
.bh-p a,
p a,
li a {
display: inline;
padding: 2px 4px;
border-radius: 2px;
}
.container {
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
}
.level-card,
.bh-level-card,
.bh-resource {
padding: 24px 18px;
}
li {
margin-bottom: 0.75rem;
}
.sticky-mobile-cta {
position: sticky;
bottom: 0;
background: var(--navy, #1a3a5c);
padding: 12px 16px;
text-align: center;
z-index: 100;
box-shadow: 0 -2px 8px rgb(0 0 0 / 0.08);
}
.sticky-mobile-cta a {
color: #fff;
font-weight: 700;
text-decoration: none;
}
}
@media (max-width: 768px) {
.bh-level-grid,
.bh-resources {
grid-template-columns: 1fr;
gap: 16px;
}
.container {
padding: 0 24px;
}
.mob-drawer {
width: min(320px, 90vw);
}
.cta-actions {
flex-direction: column;
gap: 12px;
}
.cta-actions .btn {
width: 100%;
justify-content: center;
}
}
@media (max-height: 500px) and (orientation: landscape) {
h1 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
h2 {
font-size: 1.3rem;
margin-bottom: 0.75rem;
}
p {
font-size: 0.9rem;
margin-bottom: 0.75rem;
}
}
img {
height: auto;
max-width: 100%;
}
.img-frame,
.intro-img,
.about-split-img,
.bh-split__img {
width: 100%;
}
@media (max-width: 640px) {
.bh-split__img {
aspect-ratio: 16 / 9 !important;
}
.img-strip {
gap: 2px;
}
.img-frame {
aspect-ratio: 16 / 9 !important;
}
}
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
outline: 2px solid var(--red, #c8102e);
outline-offset: 2px;
}
.btn:focus {
outline: 2px solid var(--red, #c8102e);
outline-offset: 2px;
}
.content-link {
display: inline-block;
padding: 2px 6px;
margin: 0 2px;
border-radius: 3px;
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 {
background-color: rgb(200 16 46 / 0.1);
color: var(--navy, #1a3a5c);
text-decoration-color: var(--navy, #1a3a5c);
}
.related-page-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 4px;
color: var(--red, #c8102e);
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.25s ease;
}
.related-page-link::after {
content: "→";
font-size: 1.1em;
transition: transform 0.25s ease;
}
.related-page-link:hover {
background-color: rgb(200 16 46 / 0.08);
gap: 10px;
}
.related-page-link:hover::after {
transform: translateX(2px);
}
.fb-feed-section{padding:var(--section-y) 0}
.fb-page-embed{max-width:520px;margin:0 auto}
.fee-actions{display:inline-flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.related-page-link-download{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:4px;color:var(--navy);font-weight:600;font-size:.9rem;text-decoration:none;transition:all .25s ease}
.related-page-link-download::after{content:"\2b07";font-size:1em}
.related-page-link-download:hover{background-color:rgba(26,58,92,.08)}
@media(max-width:560px){.fee-actions{justify-content:flex-start;width:100%}}
a[target="_blank"].content-link,
a[target="_blank"].related-page-link {
position: relative;
}
a[target="_blank"].content-link::after,
a[target="_blank"].related-page-link::after {
content: "↗";
}
.btn-red,
.btn-navy,
.btn-outline,
.btn-red-solid {
min-height: 48px;
min-width: 120px;
padding: 12px 24px;
}
@media (max-width: 640px) {
.btn-red,
.btn-navy,
.btn-outline,
.btn-red-solid {
width: 100%;
padding: 14px 20px;
min-width: 100%;
}
.cta-actions {
flex-direction: column;
align-items: stretch;
}
.cta-actions .btn {
width: 100%;
}
}
input[type="text"],
input[type="email"],
input[type="phone"],
input[type="number"],
textarea,
select {
width: 100%;
padding: 12px 14px;
font-size: 16px;
border: 1.5px solid rgb(26 58 92 / 0.2);
border-radius: 4px;
transition: border-color 0.25s ease;
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--red, #c8102e);
}
input[type="text"],
input[type="email"],
input[type="phone"],
input[type="number"],
textarea {
font-size: 16px;
}
.main-nav {
z-index: 1000;
will-change: transform;
}
@media (max-width: 640px) {
.main-nav {
height: auto;
padding: 12px 0;
}
.nav-inner {
height: 56px;
}
}
.breadcrumb {
font-size: 0.7rem;
flex-wrap: wrap;
gap: 4px;
}
@media (max-width: 480px) {
.breadcrumb {
font-size: 0.65rem;
}
.breadcrumb-sep {
display: none;
}
.breadcrumb a,
.breadcrumb span {
display: block;
width: 100%;
margin-bottom: 4px;
}
}
.soft-text {
color: var(--soft, #586879);
}
.small-text,
small {
font-size: 0.85rem;
line-height: 1.6;
}
ul,
ol {
margin: 1rem 0;
padding-left: 1.5rem;
}
li {
margin-bottom: 0.75rem;
line-height: 1.75;
}
table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
td,
th {
padding: 12px 8px;
text-align: left;
}
@media (max-width: 640px) {
table {
font-size: 0.85rem;
}
td,
th {
padding: 10px 6px;
}
}
@media (max-width: 640px) {
.cta-band,
.cta-band-light,
.bh-cta-band {
padding: var(--section-y) 0;
}
.cta-band h2,
.cta-band-light h2,
.bh-cta-band h2 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.cta-band p,
.cta-band-light p,
.bh-cta-band p {
font-size: 0.95rem;
margin-bottom: 1.5rem;
}
.cta-actions {
flex-direction: column;
gap: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
}
@media (max-width: 760px) {
:root {
--page-gutter: 20px;
--section-y: 40px;
--section-y-compact: 32px;
--block-gap: 24px;
}
.container,
.nav-inner,
.footer-inner,
.hero-inner {
padding-left: var(--page-gutter) !important;
padding-right: var(--page-gutter) !important;
}
.section,
.bh-section,
.faq-page,
.fees-body,
.form-outer,
.section-legal,
.school-section,
.payment-section,
.download-strip,
.testimonial-band,
.stats-strip,
.values-strip,
.global-band,
.safety-band,
.map-section,
.newsletter-strip,
.prog-intro,
.prog-offers,
.prog-resources,
.enrol-cta,
.cta-band,
.cta-band-light,
.bh-cta-band,
.cbc-strip,
.transport-hero,
.transport-section,
.legal-main,
.blog-hero {
padding-top: var(--section-y) !important;
padding-bottom: var(--section-y) !important;
}
.section-intro,
.section-header,
.news-header,
.seo-link-hub__intro {
margin-bottom: var(--block-gap) !important;
}
.page-hero {
min-height: 340px;
}
.school-text {
padding: var(--section-y) var(--page-gutter) !important;
text-align: center;
}
.school-text.bg-dark h2,
.school-text.bg-dark h2[style] {
color: var(--white) !important;
}
.school-text .hr-rule {
margin-left: auto !important;
margin-right: auto !important;
}
.school-text .btn-outline-white {
display: block !important;
width: 100% !important;
text-align: center !important;
padding: 14px 24px !important;
border: 2px solid rgb(255 255 255 / 0.85) !important;
color: var(--white) !important;
font-weight: 600 !important;
margin-top: 1.5rem !important;
box-sizing: border-box !important;
}
}
/* ---- from css/responsive-improvements.css ---- */
/* Responsive Improvements - Full Screen Coverage (All Devices)
This file ensures excellent responsiveness across all screen sizes
Load after main.min.css and desktop-enhancements.css
*/
/* ─────────────────────────────────────────────────────────────
EXTRA LARGE SCREENS (1920px and above)
Desktop refinements for ultra-wide displays
───────────────────────────────────────────────────────────── */
@media (min-width: 1920px) {
:root {
--page-gutter: clamp(20px, 3.5vw, 80px);
}
.container {
max-width: 1400px !important;
}
body.page-home .welcome-grid {
gap: clamp(72px, 8vw, 140px);
}
body.page-home .why-sikri-grid {
gap: 24px !important;
}
}
/* ─────────────────────────────────────────────────────────────
LARGE TABLETS (1024px - 1180px)
Refined layout for iPad and similar devices in landscape
───────────────────────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1180px) {
:root {
--section-y: 56px;
--section-y-compact: 44px;
}
body.page-home .welcome-grid {
grid-template-columns: 1fr 1fr;
gap: 48px;
}
body.page-home .welcome-img-wrap {
min-height: 500px;
}
body.page-home .prog-editorial__inner {
min-height: 440px;
}
body.page-home .school-section {
min-height: 540px;
}
body.page-home .school-img-side {
min-height: 540px;
}
}
/* ─────────────────────────────────────────────────────────────
TABLETS & SMALL DESKTOPS (768px - 1023px)
Optimize layout for iPad, tablet devices in portrait and landscape
───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
:root {
--section-y: 48px;
--section-y-compact: 36px;
--page-gutter: clamp(16px, 4vw, 28px);
}
/* Stagger welcome section layout on tablets */
body.page-home .welcome-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: center;
}
body.page-home .welcome-img-wrap {
order: -1;
min-height: 420px;
}
body.page-home .welcome-img-main {
aspect-ratio: 16 / 9 !important;
}
body.page-home .welcome-text {
align-self: auto;
}
body.page-home .welcome-text h2 {
font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
}
/* Simplify why-sikri grid on tablets */
body.page-home .why-sikri-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px !important;
}
body.page-home .ws-card {
min-height: auto;
}
body.page-home .ws-card-image {
aspect-ratio: 3 / 2 !important;
}
/* Stack programme editorials on tablets */
body.page-home .prog-editorial__inner {
grid-template-columns: 1fr !important;
gap: 0 !important;
min-height: auto;
}
body.page-home .prog-editorial__text {
order: 2;
padding: clamp(32px, 4vw, 48px) !important;
}
body.page-home .prog-editorial__img {
order: 1;
min-height: 300px;
aspect-ratio: 16 / 9 !important;
}
body.page-home .prog-editorial--reverse .prog-editorial__inner {
grid-template-columns: 1fr !important;
}
body.page-home .prog-editorial--feature .prog-editorial__inner {
grid-template-columns: 1fr !important;
}
body.page-home .prog-editorial--compact .prog-editorial__inner {
grid-template-columns: 1fr !important;
}
body.page-home .prog-editorial--legacy .prog-editorial__inner {
grid-template-columns: 1fr !important;
}
/* Stack school section on tablets */
body.page-home .school-section {
display: grid;
grid-template-columns: 1fr;
gap: 0;
min-height: auto;
}
body.page-home .school-img-side {
order: -1;
min-height: 380px;
}
body.page-home .school-text {
padding: clamp(40px, 4vw, 56px);
}
/* Adjust seo link hub for tablets */
body.page-home .seo-link-hub__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
}
body.page-home .seo-link-hub__link {
min-height: 160px;
padding: 24px 20px;
border-right: 1px solid rgba(26, 58, 92, 0.1);
border-bottom: 1px solid rgba(26, 58, 92, 0.1);
}
body.page-home .seo-link-hub__link:nth-child(2n) {
border-right: 0;
}
body.page-home .seo-link-hub__link:nth-last-child(-n + 2) {
border-bottom: 0;
}
/* Improve typography on tablets */
h1 {
font-size: clamp(2rem, 5vw, 3rem) !important;
}
h2 {
font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
}
h3 {
font-size: clamp(1.2rem, 2.5vw, 1.6rem) !important;
}
body.page-home .welcome-text p {
font-size: 0.95rem;
}
p {
line-height: 1.75;
}
}
/* ─────────────────────────────────────────────────────────────
PORTRAIT TABLETS (600px - 767px)
Optimize for iPad in portrait, smaller tablets
───────────────────────────────────────────────────────────── */
@media (min-width: 600px) and (max-width: 767px) {
:root {
--section-y: 40px;
--section-y-compact: 30px;
--page-gutter: clamp(14px, 4vw, 22px);
}
/* Full-width stacked layout */
body.page-home .welcome-grid,
body.page-home .school-section,
body.page-home .prog-editorial__inner {
display: grid;
grid-template-columns: 1fr !important;
gap: 32px;
align-items: center;
}
body.page-home .welcome-img-wrap {
order: -1;
min-height: 380px;
}
body.page-home .welcome-img-main {
aspect-ratio: 16 / 9 !important;
}
/* Why sikri grid on small tablets */
body.page-home .why-sikri-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px !important;
}
body.page-home .ws-card {
min-height: auto;
border: none !important;
}
body.page-home .ws-card-image {
aspect-ratio: 16 / 9 !important;
}
body.page-home .ws-card-body {
padding: 20px 16px;
border: 1px solid rgba(26, 58, 92, 0.1);
}
/* Programme editorials */
body.page-home .prog-editorial__text {
order: 2;
padding: clamp(24px, 4vw, 36px) !important;
}
body.page-home .prog-editorial__img {
order: 1;
min-height: 280px;
aspect-ratio: 16 / 9 !important;
}
body.page-home .prog-editorial--feature .prog-editorial__text {
background: var(--navy-dark, #0d2540);
}
body.page-home .prog-editorial--legacy .prog-editorial__text::before {
font-size: clamp(3rem, 8vw, 5.5rem);
top: 12px;
right: 16px;
}
/* School section */
body.page-home .school-img-side {
order: -1;
min-height: 340px;
}
body.page-home .school-text {
padding: clamp(32px, 4vw, 44px);
}
body.page-home .school-text h2 {
font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important;
}
/* SEO link hub - 2 column */
body.page-home .seo-link-hub__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
}
body.page-home .seo-link-hub__link {
min-height: 140px;
padding: 20px 16px;
}
body.page-home .seo-link-hub__link:nth-child(2n) {
border-right: 0;
}
body.page-home .seo-link-hub__link:nth-last-child(-n + 2) {
border-bottom: 0;
}
/* Typography adjustments */
h1 {
font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
}
h2 {
font-size: clamp(1.3rem, 3vw, 2rem) !important;
}
body.page-home .welcome-text h2 {
font-size: clamp(1.4rem, 3vw, 2rem) !important;
}
p {
font-size: 0.95rem;
}
}
/* ─────────────────────────────────────────────────────────────
LARGE PHONES (481px - 599px)
Optimize for iPhone 12+, Pixel 5, Galaxy S21 in portrait
───────────────────────────────────────────────────────────── */
@media (min-width: 481px) and (max-width: 599px) {
:root {
--section-y: 32px;
--section-y-compact: 24px;
--page-gutter: clamp(12px, 3.5vw, 18px);
}
/* Ensure full-width stacking */
body.page-home .welcome-grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
}
body.page-home .welcome-img-wrap {
order: -1;
min-height: 340px;
}
body.page-home .welcome-img-main {
aspect-ratio: 16 / 9 !important;
}
body.page-home .welcome-img-accent {
width: 32%;
right: -16px;
bottom: -16px;
border-width: 6px;
}
body.page-home .welcome-badge {
right: -12px;
top: 16px;
padding: 12px 14px;
font-size: 0.7rem;
}
body.page-home .welcome-text h2 {
font-size: clamp(1.2rem, 3.5vw, 1.8rem) !important;
}
body.page-home .welcome-text p {
font-size: 0.9rem;
}
/* Why sikri grid - full stack on small screens */
body.page-home .why-sikri-grid {
grid-template-columns: 1fr;
gap: 8px !important;
border: none;
}
body.page-home .ws-card {
border: 1px solid rgba(26, 58, 92, 0.1);
border-right: none;
min-height: auto;
padding: 0;
}
body.page-home .ws-card:last-child {
border-right: none;
}
body.page-home .ws-card-image {
aspect-ratio: 16 / 9 !important;
height: 180px;
}
body.page-home .ws-card-body {
padding: 16px 14px;
border-top: none;
}
body.page-home .ws-card-body h3 {
font-size: 1.1rem;
}
body.page-home .ws-card-body > p {
font-size: 0.85rem;
margin-bottom: 0.75rem;
}
/* Programme editorials - single column */
body.page-home .prog-editorial__inner {
grid-template-columns: 1fr !important;
min-height: auto;
gap: 0 !important;
}
body.page-home .prog-editorial__text {
order: 2;
padding: clamp(20px, 3.5vw, 28px) !important;
}
body.page-home .prog-editorial__img {
order: 1;
min-height: 240px;
aspect-ratio: 16 / 9 !important;
}
body.page-home .prog-editorial--feature .prog-editorial__img {
min-height: 240px;
}
body.page-home .prog-editorial--compact .prog-editorial__img {
min-height: 240px;
}
body.page-home .prog-editorial--legacy .prog-editorial__img {
min-height: 240px;
}
body.page-home .prog-editorial--legacy .prog-editorial__text::before {
font-size: clamp(2.5rem, 7vw, 4.5rem);
top: 8px;
right: 12px;
}
body.page-home .prog-editorial__title {
font-size: clamp(1.4rem, 3vw, 1.8rem) !important;
}
/* School section stacking */
body.page-home .school-section {
grid-template-columns: 1fr;
gap: 0;
min-height: auto;
}
body.page-home .school-img-side {
order: -1;
min-height: 300px;
}
body.page-home .school-text {
padding: clamp(24px, 3.5vw, 32px);
}
body.page-home .school-text h2 {
font-size: clamp(1.3rem, 3.5vw, 1.8rem) !important;
}
/* SEO link hub - single column on tiny screens */
body.page-home .seo-link-hub__grid {
grid-template-columns: 1fr;
gap: 0;
border: none;
}
body.page-home .seo-link-hub__link {
min-height: 120px;
padding: 18px 14px;
border: 1px solid rgba(26, 58, 92, 0.1);
border-bottom: none;
border-right: none;
}
body.page-home .seo-link-hub__link:last-child {
border-bottom: none;
}
body.page-home .seo-link-hub__link strong {
font-size: 1rem;
}
/* Global typography adjustments for large phones */
h1 {
font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
}
h2 {
font-size: clamp(1.2rem, 3vw, 1.8rem) !important;
}
h3 {
font-size: clamp(1rem, 2.5vw, 1.3rem) !important;
}
p {
font-size: 0.9rem;
line-height: 1.7;
}
}
/* ─────────────────────────────────────────────────────────────
SMALL PHONES (320px - 480px)
Optimize for iPhone SE, small Android phones
───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
:root {
--section-y: 24px;
--section-y-compact: 18px;
--page-gutter: 12px;
}
.container {
padding-left: 12px !important;
padding-right: 12px !important;
}
/* Hero section */
body.page-home .block-hero {
height: 100vh;
min-height: 480px;
}
body.page-home .block-hero-content {
padding: 0 12px 48px;
}
body.page-home .block-hero-title {
font-size: clamp(1.4rem, 5vw, 2.2rem) !important;
margin-bottom: 1rem;
}
body.page-home .block-hero-tag {
font-size: 0.6rem;
margin-bottom: 0.5rem;
}
/* Welcome section - full stacking */
body.page-home .welcome-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
body.page-home .welcome-img-wrap {
order: -1;
min-height: 280px;
margin: 0 -12px;
width: calc(100% + 24px);
}
body.page-home .welcome-img-main {
aspect-ratio: 16 / 9 !important;
width: 100%;
}
body.page-home .welcome-img-accent {
display: none;
}
body.page-home .welcome-badge {
display: none;
}
body.page-home .welcome-text {
padding: 0;
}
body.page-home .welcome-text h2 {
font-size: clamp(1.1rem, 4vw, 1.6rem) !important;
margin-bottom: 1rem;
}
body.page-home .welcome-text p {
font-size: 0.85rem;
margin-bottom: 1rem;
}
body.page-home .welcome-text .btn-primary {
width: 100%;
margin-top: 0.5rem;
}
/* Why sikri section */
body.page-home .why-sikri-grid {
display: grid;
grid-template-columns: 1fr;
gap: 4px !important;
border: none;
}
body.page-home .ws-card {
border: 1px solid rgba(26, 58, 92, 0.1);
border-bottom: none;
min-height: auto;
}
body.page-home .ws-card:last-child {
border-bottom: 1px solid rgba(26, 58, 92, 0.1);
}
body.page-home .ws-card-image {
aspect-ratio: 16 / 9 !important;
height: 160px;
}
body.page-home .ws-card-body {
padding: 14px 12px;
}
body.page-home .ws-card-body h3 {
font-size: 1rem;
margin-bottom: 0.5rem;
}
body.page-home .ws-card-body > p {
font-size: 0.8rem;
}
/* Programme editorials */
body.page-home .prog-editorial {
border-top: none;
margin: 0 -12px !important;
width: calc(100% + 24px);
padding: 0 !important;
}
body.page-home .prog-editorial__inner {
grid-template-columns: 1fr !important;
gap: 0 !important;
min-height: auto;
}
body.page-home .prog-editorial__text {
order: 2;
padding: clamp(16px, 3.5vw, 20px) !important;
background: #fff;
border: none;
}
body.page-home .prog-editorial__img {
order: 1;
min-height: 220px;
aspect-ratio: 16 / 9 !important;
}
body.page-home .prog-editorial--feature .prog-editorial__text {
background: var(--navy-dark, #0d2540);
}
body.page-home .prog-editorial--feature .prog-editorial__img {
min-height: 220px;
}
body.page-home .prog-editorial--compact .prog-editorial__text {
border-left: none;
border-top: 4px solid var(--red, #c8102e);
}
body.page-home .prog-editorial--legacy .prog-editorial__text::before {
font-size: clamp(2rem, 6vw, 3.5rem);
top: 6px;
right: 10px;
}
body.page-home .prog-editorial__title {
font-size: clamp(1.2rem, 3vw, 1.6rem) !important;
margin-bottom: 0.75rem;
}
body.page-home .prog-editorial__body {
max-width: 100%;
}
body.page-home .prog-editorial__body > p {
font-size: 0.85rem;
}
/* School section */
body.page-home .school-section {
display: grid;
grid-template-columns: 1fr;
gap: 0;
min-height: auto;
margin: 0 -12px !important;
width: calc(100% + 24px);
padding: 0 !important;
}
body.page-home .school-img-side {
order: -1;
min-height: 260px;
}
body.page-home .school-text {
padding: clamp(20px, 3.5vw, 24px);
background: #fff;
}
body.page-home .school-text h2 {
font-size: clamp(1.1rem, 3.5vw, 1.6rem) !important;
margin-bottom: 0.75rem;
}
body.page-home .school-text p {
font-size: 0.85rem;
margin-bottom: 1rem;
}
/* SEO link hub */
body.page-home .seo-link-hub {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
body.page-home .seo-link-hub__grid {
grid-template-columns: 1fr;
gap: 0;
border: 1px solid rgba(26, 58, 92, 0.1);
}
body.page-home .seo-link-hub__link {
min-height: 110px;
padding: 16px 12px;
border: none;
border-bottom: 1px solid rgba(26, 58, 92, 0.1);
}
body.page-home .seo-link-hub__link:last-child {
border-bottom: none;
}
body.page-home .seo-link-hub__link strong {
font-size: 0.95rem;
display: block;
margin-bottom: 0.4rem;
}
body.page-home .seo-link-hub__link p {
font-size: 0.75rem;
}
/* Global typography */
h1 {
font-size: clamp(1.3rem, 4.5vw, 2rem) !important;
margin-bottom: 0.75rem;
}
h2 {
font-size: clamp(1.1rem, 3vw, 1.6rem) !important;
margin-bottom: 0.6rem;
}
h3 {
font-size: clamp(0.95rem, 2.5vw, 1.2rem) !important;
margin-bottom: 0.5rem;
}
h4 {
font-size: 0.95rem;
}
p {
font-size: 0.85rem;
line-height: 1.65;
margin-bottom: 0.75rem;
}
/* Ensure all buttons are touch-friendly */
.btn,
.nav-enquire,
.mob-cta,
button,
a.btn {
min-height: 44px;
padding: 12px 16px;
font-size: 0.85rem;
}
/* Improve footer on small screens */
.footer-top {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.footer-top-col {
padding: 20px 0;
border: none;
}
.footer-top-col h4 {
margin-bottom: 0.75rem;
}
.footer-top-col a,
.footer-top-col p {
font-size: 0.8rem;
line-height: 1.6;
margin-bottom: 0.5rem;
}
/* Ensure hero scroll indicator is visible */
.block-hero a[aria-label="Scroll down"] {
display: flex;
font-size: 0.5rem;
}
}
/* ─────────────────────────────────────────────────────────────
ULTRA-SMALL SCREENS (Below 320px)
Safety fallback for very old/small devices
───────────────────────────────────────────────────────────── */
@media (max-width: 319px) {
:root {
--page-gutter: 8px;
}
.container {
padding-left: 8px !important;
padding-right: 8px !important;
}
h1 {
font-size: 1.2rem !important;
}
h2 {
font-size: 1rem !important;
}
p {
font-size: 0.8rem;
}
body.page-home .welcome-img-wrap,
body.page-home .school-img-side {
min-height: 240px;
}
}
/* ─────────────────────────────────────────────────────────────
ORIENTATION-SPECIFIC TWEAKS
Optimize for device orientation changes
───────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 600px) {
body.page-home .block-hero {
min-height: 480px;
height: auto;
}
body.page-home .welcome-img-wrap,
body.page-home .prog-editorial__img,
body.page-home .school-img-side {
min-height: 300px;
}
}
@media (orientation: portrait) and (max-width: 480px) {
body.page-home .block-hero {
height: 100vh;
min-height: 500px;
}
}
/* ─────────────────────────────────────────────────────────────
REDUCED MOTION SUPPORT
Respect user preferences for motion and animations
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal,
.reveal.active {
opacity: 1 !important;
transform: none !important;
}
}
/* ─────────────────────────────────────────────────────────────
DARK MODE SUPPORT (Optional)
Add if implementing dark mode
───────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
/* Maintain light theme for now, but can be extended */
/* body { background: #1a1a1a; color: #f0f0f0; } */
}
/* ─────────────────────────────────────────────────────────────
HIGH DPI SCREEN OPTIMIZATION
Better rendering on high-resolution displays
───────────────────────────────────────────────────────────── */
@media (min-resolution: 2dppx) {
img {
image-rendering: crisp-edges;
}
body.page-home .block-hero-bg {
image-rendering: optimizeQuality;
}
}
/* Site-wide responsive container system: keeps desktop layouts broad without stretching text. */
:root {
--page-gutter: clamp(16px, 3vw, 32px);
--container-max: 1200px;
--content-max: var(--container-max);
}
html,
body {
max-width: 100%;
overflow-x: hidden;
}
img,
picture,
video,
canvas,
svg {
max-width: 100%;
height: auto;
}
.container,
.nav-inner,
.footer-inner,
.hero-inner,
.hero-container,
.cta-band-inner {
width: min(calc(100% - (2 * var(--page-gutter))), var(--container-max)) !important;
max-width: var(--container-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.section-rule {
width: min(calc(100% - (2 * var(--page-gutter))), var(--container-max));
max-width: var(--container-max);
}
body > .img-strip,
body > .about-split,
.section > .img-strip,
.section > .about-split,
main > .img-strip,
main > .about-split,
.about-split,
.bh-split {
width: min(calc(100% - (2 * var(--page-gutter))), var(--container-max)) !important;
max-width: var(--container-max) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.page-about-design:not(.gallery-page) .prog-editorial__inner,
.page-about .about-editorial .prog-editorial__inner,
.page-about .about-editorial--reverse .prog-editorial__inner {
width: min(calc(100% - (2 * var(--page-gutter))), var(--container-max)) !important;
max-width: var(--container-max) !important;
}
body.page-about-design:not(.gallery-page) .prog-editorial__img,
body.page-about-design:not(.gallery-page) .prog-editorial:is(.prog-editorial--reverse, .prog-editorial--flip) .prog-editorial__img,
body.page-about-design:not(.gallery-page) .about-editorial--reverse .prog-editorial__img {
width: 100% !important;
max-width: 100% !important;
}
.page-intro h1,
.page-intro p,
.page-banner h1,
.page-banner p,
.page-header h1,
.page-header p,
.bh-banner h1,
.bh-banner p,
.prog-intro-text,
.prog-editorial__body,
.bh-prose,
.content-grid p,
.card-grid p,
.resource-grid p,
.values-row p,
.mv-grid p {
max-width: 720px;
}
.page-intro .container,
.page-banner .container,
.page-header .container,
.bh-banner .container,
.merit-banner .container {
display: block;
}
@media (min-width: 1200px) {
.offerings-grid,
.prog-offers-grid,
.resources-grid,
.resource-grid,
.bh-resources,
.card-grid,
.level-card-grid,
.programme-grid,
.values-row,
.facilities-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
body.page-home .why-sikri-grid,
body.page-home .results-grid {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
}
@media (min-width: 1440px) {
.container,
.nav-inner,
.footer-inner,
.hero-inner,
.hero-container,
.cta-band-inner {
width: min(calc(100% - 64px), var(--container-max)) !important;
}
.main-nav .nav-links {
gap: 0;
}
}
@media (min-width: 1920px) {
:root {
--page-gutter: 32px;
}
.container {
max-width: var(--container-max) !important;
}
}
@media (max-width: 767px) {
.container,
.nav-inner,
.footer-inner,
.hero-inner,
.hero-container,
.cta-band-inner {
width: calc(100% - 32px) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (max-width: 340px) {
.container,
.nav-inner,
.footer-inner,
.hero-inner,
.hero-container,
.cta-band-inner {
width: calc(100% - 24px) !important;
}
}
/* Final mobile drawer overflow guard: hidden closed state does not expand body width. */
.mob-drawer {
right: 0 !important;
transform: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 0.25s ease, visibility 0.25s ease !important;
}
.mob-drawer.open {
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* Small-screen stats strips must not keep fixed multi-column widths. */
@media (max-width: 480px) {
.stats-strip,
.bh-stats {
width: 100% !important;
max-width: 100% !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
overflow: hidden !important;
}
.stat-block,
.bh-stat {
min-width: 0 !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
}
@media (max-width: 340px) {
.stats-strip,
.bh-stats {
grid-template-columns: 1fr !important;
}
}
/* Footer should paint full-bleed on wide screens while its content stays on the site grid. */
.footer {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
background: var(--navy-dark, #0d2540) !important;
}
.footer-top {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-left: max(var(--page-gutter), calc((100vw - var(--container-max)) / 2)) !important;
padding-right: max(var(--page-gutter), calc((100vw - var(--container-max)) / 2)) !important;
background: var(--navy-dark, #0d2540) !important;
box-sizing: border-box !important;
}
.footer-bottom {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-left: max(var(--page-gutter), calc((100vw - var(--container-max)) / 2)) !important;
padding-right: max(var(--page-gutter), calc((100vw - var(--container-max)) / 2)) !important;
box-sizing: border-box !important;
}
@media (max-width: 760px) {
.footer-top,
.footer-bottom {
padding-left: var(--page-gutter) !important;
padding-right: var(--page-gutter) !important;
}
}
:focus-visible { outline: 3px solid #f4b400; outline-offset: 3px; }
/* Uniform mobile content grid: every inner wrapper shares the same centered 16px gutter. */
@media (max-width: 767px) {
:root {
--page-gutter: 16px;
}
.container,
.nav-inner,
.footer-inner,
.hero-inner,
.hero-container,
.cta-band-inner,
.page-intro > .container,
.page-banner > .container,
.page-header > .container,
.bh-banner > .container,
.merit-banner > .container {
width: 100% !important;
max-width: var(--container-max, 1280px) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--page-gutter) !important;
padding-right: var(--page-gutter) !important;
box-sizing: border-box !important;
}
/* Keep full-bleed section backgrounds while their contents remain on the same grid. */
.page-intro,
.page-banner,
.page-header,
.bh-banner,
.merit-banner,
.section,
.section-light,
.section-cream,
.section-navy,
.bh-section,
.legal-main,
.footer {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* Prevent long cards, tables, and media from pulling the viewport off-centre. */
main,
main > *,
.section > *,
.section-light > *,
.section-cream > *,
.bh-section > *,
.article-layout,
.related-section,
.form-outer,
.enquiry-grid,
.map-section-inner {
max-width: 100% !important;
box-sizing: border-box !important;
}
img,
svg,
video,
iframe,
table {
max-width: 100%;
}
}
@media (max-width: 340px) {
:root {
--page-gutter: 12px;
}
}
/* ---- from site-consistency.css ---- */
/*
Shared visual consistency layer.
Keep this file loaded after page-level styles so common typography and spacing
stay aligned while individual layouts keep their own structure.
*/
/* Fonts loaded by global_min.css — no duplicate import needed */
:root {
--font-body: 'Outfit', 'Lato', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Outfit', system-ui, sans-serif;
--font-family: 'Outfit', system-ui, sans-serif;
--color-navy: #1a3a5c;
--color-navy-dark: #0d2540;
--color-red: #c8102e;
--color-red-dark: #a00d24;
--color-cream: #f7f5f0;
--color-text: #2c3e50;
--color-text-dark: #111820;
--color-text-muted: #586879;
--color-white: #fff;
--color-border: rgba(26, 58, 92, .1);
--text-body: 1rem;
--text-small: .85rem;
--text-label: .68rem;
--text-nav: .8rem;
--leading-body: 1.75;
--leading-heading: 1.2;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 40px;
--space-8: 48px;
--space-9: 64px;
--container-max: 1200px;
--radius-control: 2px;
--radius-card: 4px;
--radius-image: 8px;
--radius-pill: 100px;
--radius-circle: 50%;
--page-gutter: clamp(20px, 4vw, 32px);
--section-y: clamp(40px, 5vw, 64px);
--section-y-compact: clamp(24px, 3vw, 48px);
--block-gap: clamp(16px, 3vw, 32px);
--content-max: calc(1200px - var(--page-gutter) - var(--page-gutter));
}
/* ── BLANK-BAR FIX ──
body padding-top and .main-nav position are set via a critical inline